/**
 * SPECOPS 3D Design System
 * Version: 1.2.4
 *
 * Visual reference: specops-landing-mockup.html
 * Dark industrial global styles for WordPress, Elementor, and WooCommerce.
 *
 * Selector policy:
 * - Prefer theme/content wrappers over bare element tags where conflicts are likely.
 * - Do not constrain Elementor full-width sections.
 * - Do not restyle Elementor's default `elementor-button-link` class as outline.
 * - Landing mockup components are scoped under `.specops-landing`.
 */

/* ==========================================================================
   1. Design tokens (aligned to landing mockup)
   ========================================================================== */

:root {
	/* Brand colors — mockup palette */
	--specops-primary: #3eacb7;
	--specops-accent: #4fc0cb;
	--specops-teal-deep: #2a7f88;
	--specops-navy: #041116;
	--specops-background: #070a0c;
	--specops-section: #10161a;
	--specops-surface: #10161a;
	--specops-text: #e8eef0;
	--specops-muted: #9aadb4;
	--specops-muted-deep: #6f8289;
	--specops-border: rgba(232, 238, 240, 0.12);
	--specops-border-solid: #2a3338;
	--specops-success: #3FA66C;
	--specops-warning: #D68A32;
	--specops-error: #D64A32;
	--specops-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

	/* Typography — mockup: Teko + Barlow */
	--specops-font-display: "Teko", Impact, Haettenschweiler, sans-serif;
	--specops-font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Layout — mockup max 1120px */
	--specops-content-max: 1120px;
	--specops-gutter: 16px;
	--specops-radius: 2px;

	/* Motion */
	--specops-transition: 180ms ease;
	--specops-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* Form select chevron */
	--specops-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aadb4' d='M1.4.3L6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
	:root {
		--specops-gutter: 20px;
	}
}

@media (min-width: 1024px) {
	:root {
		/* Matches mockup: width min(max, calc(100% - 2.5rem)) */
		--specops-gutter: 20px;
	}
}

/* ==========================================================================
   2. Base / global document
   ========================================================================== */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	color: var(--specops-text);
	font-family: var(--specops-font-body);
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background:
		radial-gradient(1200px 700px at 70% 10%, rgba(62, 172, 183, 0.12), transparent 55%),
		radial-gradient(900px 500px at 10% 90%, rgba(42, 127, 136, 0.1), transparent 50%),
		var(--specops-background);
	background-color: var(--specops-background);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. Typography — headings, paragraphs, links
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.wp-block-heading {
	margin: 0 0 0.5em;
	color: var(--specops-text);
	font-family: var(--specops-font-display);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: none;
}

h1,
.entry-title {
	font-size: clamp(2.75rem, 2rem + 3.5vw, 5.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 0.9;
}

h2 {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	font-weight: 600;
}

h3 {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
	font-weight: 600;
}

h4 {
	font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem);
	font-weight: 600;
}

h5 {
	font-size: clamp(1.125rem, 1rem + 0.35vw, 1.35rem);
	font-weight: 500;
}

h6 {
	font-family: var(--specops-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--specops-muted);
	line-height: 1.4;
}

p {
	margin: 0 0 1.25em;
	color: var(--specops-text);
	font-family: var(--specops-font-body);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.5;
}

.entry-content > p:last-child,
.elementor-widget-text-editor > p:last-child,
.woocommerce-Tabs-panel > p:last-child {
	margin-bottom: 0;
}

/* Content links — exclude buttons, nav items */
a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.elementor-button):not(.elementor-item)) {
	color: var(--specops-primary);
	text-decoration: none;
	transition: color var(--specops-transition);
}

a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.elementor-button):not(.elementor-item)):hover,
a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.elementor-button):not(.elementor-item)):focus {
	color: var(--specops-accent);
}

a:focus-visible {
	outline: 2px solid var(--specops-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   4. Layout — content width & horizontal padding
   ========================================================================== */

/*
 * Theme / WP content wrappers only.
 * Elementor section containers are intentionally NOT constrained here.
 */
.site-content,
.content-area,
.entry-content,
.wp-site-blocks,
.ast-container {
	max-width: var(--specops-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--specops-gutter);
	padding-right: var(--specops-gutter);
}

body:not(.elementor-page).woocommerce .site-main,
body:not(.elementor-page).woocommerce-page .site-main {
	max-width: var(--specops-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--specops-gutter);
	padding-right: var(--specops-gutter);
}

/* ==========================================================================
   5. Buttons — WordPress, Elementor, WooCommerce
   ========================================================================== */

/*
 * Mockup CTA: solid teal, Barlow 600, 2px radius, no heavy outline border.
 * Do NOT treat `.elementor-button-link` as outline.
 */
.wp-block-button__link,
.wp-element-button,
.button.wp-element-button,
body .button:where(:not(.components-button)),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.elementor-button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 3rem;
	padding: 0 1.35rem;
	border: 0;
	border-radius: var(--specops-radius);
	background-color: var(--specops-primary);
	color: var(--specops-navy);
	font-family: var(--specops-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color var(--specops-transition),
		transform var(--specops-transition),
		color var(--specops-transition);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
body .button:where(:not(.components-button)):hover,
body .button:where(:not(.components-button)):focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.elementor-button:hover,
.elementor-button:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--specops-accent);
	color: var(--specops-navy);
	box-shadow: none;
	text-decoration: none;
	transform: translateY(-1px);
}

.wp-block-button__link:active,
.wp-element-button:active,
body .button:where(:not(.components-button)):active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.elementor-button:active,
button[type="submit"]:active,
input[type="submit"]:active {
	transform: translateY(0);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
body .button:where(:not(.components-button)):focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.elementor-button:focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible {
	outline: 2px solid var(--specops-accent);
	outline-offset: 3px;
}

/* Outline / secondary — WordPress block outline + explicit outline modifiers only */
.button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.elementor-button[class*="outline"],
.elementor-button.elementor-button--outline {
	background-color: transparent;
	border: 1px solid var(--specops-primary);
	color: var(--specops-primary);
}

.button.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.elementor-button[class*="outline"]:hover,
.elementor-button.elementor-button--outline:hover {
	background-color: var(--specops-primary);
	border-color: var(--specops-primary);
	color: var(--specops-navy);
}

/* ==========================================================================
   6. Forms — inputs, textareas, selects
   ========================================================================== */

/* Shared field look — translucent like mockup waitlist */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .input-text,
.elementor-field-group .elementor-field,
.elementor-field-textual {
	min-height: 3rem;
	padding: 0 1rem;
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	background-color: rgba(7, 10, 12, 0.55);
	color: var(--specops-text);
	font-family: var(--specops-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	box-shadow: none;
	backdrop-filter: blur(8px);
	transition:
		border-color var(--specops-transition),
		background-color var(--specops-transition);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .input-text,
.elementor-field-group .elementor-field,
.elementor-field-textual,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-search__input {
	width: 100%;
	max-width: 100%;
}

select,
.woocommerce form .form-row select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5em;
	background-color: rgba(7, 10, 12, 0.55);
	background-image: var(--specops-select-chevron);
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 12px 8px;
}

textarea {
	min-height: 8rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	resize: vertical;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder,
.elementor-field-group .elementor-field::placeholder {
	color: var(--specops-muted-deep);
	opacity: 1;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover,
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover,
.elementor-field-group .elementor-field:hover {
	border-color: rgba(232, 238, 240, 0.22);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.elementor-field-group .elementor-field:focus,
.elementor-field-textual:focus {
	border-color: var(--specops-primary);
	background-color: rgba(7, 10, 12, 0.75);
	color: var(--specops-text);
	outline: none;
	box-shadow: none;
}

label,
.woocommerce form .form-row label,
.elementor-field-group .elementor-field-label {
	display: block;
	margin-bottom: 0.4em;
	color: var(--specops-text);
	font-family: var(--specops-font-body);
	font-size: 0.875rem;
	font-weight: 500;
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]),
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment .payment_methods label,
.elementor-field-type-acceptance label,
.elementor-field-type-checkbox label,
.elementor-field-type-radio label,
.elementor-field-option label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

fieldset {
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	padding: 1.25em;
	background-color: var(--specops-section);
}

/* ==========================================================================
   7. Header & navigation
   ========================================================================== */

.site-header,
#masthead,
.elementor-location-header {
	background-color: transparent;
	border-bottom: 1px solid transparent;
	color: var(--specops-text);
}

.site-header a,
#masthead a,
.main-navigation a,
.primary-navigation a,
.primary-menu a,
.main-navigation .menu > li > a,
.wp-block-navigation a,
.elementor-location-header .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
	color: var(--specops-text);
	font-family: var(--specops-font-display);
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
	text-decoration: none;
	transition: color var(--specops-transition);
}

.site-header a:hover,
.site-header a:focus,
#masthead a:hover,
#masthead a:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.primary-navigation a:hover,
.primary-menu a:hover,
.main-navigation .menu > li > a:hover,
.wp-block-navigation a:hover,
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted,
.elementor-nav-menu--main .elementor-item:focus {
	color: var(--specops-primary);
	background-color: transparent;
}

.site-header a:focus-visible,
.main-navigation a:focus-visible,
.elementor-location-header .elementor-nav-menu a:focus-visible,
.elementor-nav-menu--main .elementor-item:focus-visible {
	outline: 2px solid var(--specops-primary);
	outline-offset: 3px;
}

.site-title,
.site-branding .site-title a {
	font-family: var(--specops-font-display);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--specops-text);
	text-decoration: none;
	font-size: 1.55rem;
	line-height: 1;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer,
#colophon,
.elementor-location-footer {
	background-color: transparent;
	border-top: 1px solid var(--specops-border);
	color: var(--specops-muted-deep);
	padding-top: 2rem;
	padding-bottom: 2.5rem;
	font-size: 0.9rem;
}

.site-footer a,
#colophon a,
.elementor-location-footer a {
	color: var(--specops-muted-deep);
	text-decoration: none;
	transition: color var(--specops-transition);
}

.site-footer a:hover,
.site-footer a:focus,
#colophon a:hover,
#colophon a:focus,
.elementor-location-footer a:hover,
.elementor-location-footer a:focus {
	color: var(--specops-accent);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
	color: var(--specops-text);
}

.site-info {
	color: var(--specops-muted-deep);
	font-size: 0.9rem;
}

/* ==========================================================================
   9. WooCommerce — product cards, prices, notices, cart, checkout
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: var(--specops-surface);
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	padding: 0 0 1rem;
	overflow: hidden;
	box-shadow: none;
	transition: border-color var(--specops-transition);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	border-color: var(--specops-primary);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--specops-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: none;
	color: var(--specops-text);
	padding: 0 1rem;
	margin-top: 0.75rem;
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	margin-bottom: 0;
	width: 100%;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
	margin-left: 1rem;
	margin-right: 1rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .summary .price {
	color: var(--specops-primary);
	font-family: var(--specops-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 0.03em;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce div.product .summary .price del {
	color: var(--specops-muted);
	opacity: 0.85;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.woocommerce div.product .summary .price ins {
	color: var(--specops-primary);
	text-decoration: none;
}

.woocommerce table.shop_table .amount,
.woocommerce-cart .cart-collaterals .amount,
.woocommerce-checkout .amount {
	font-family: var(--specops-font-display);
	font-weight: 600;
	color: var(--specops-text);
	font-size: 1.15em;
}

.woocommerce-cart .cart-collaterals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	color: var(--specops-primary);
	font-size: 1.25em;
}

.woocommerce div.product .product_title {
	font-family: var(--specops-font-display);
	font-weight: 700;
	text-transform: none;
	color: var(--specops-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--specops-border);
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--specops-section);
	border: 1px solid var(--specops-border-solid);
	border-radius: var(--specops-radius) var(--specops-radius) 0 0;
	margin: 0 0.25rem -1px 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--specops-muted);
	font-family: var(--specops-font-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--specops-surface);
	border-bottom-color: var(--specops-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--specops-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
	background-color: var(--specops-surface);
	border: 1px solid var(--specops-border-solid);
	border-radius: 0 var(--specops-radius) var(--specops-radius) var(--specops-radius);
	padding: 1.25rem;
	box-shadow: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-radius: var(--specops-radius);
	border-top: none;
	border-left: 4px solid;
	background-color: var(--specops-section);
	color: var(--specops-text);
	box-shadow: none;
	padding: 1em 1.25em 1em 3.5em;
}

.woocommerce-message {
	border-left-color: var(--specops-success);
}

.woocommerce-info {
	border-left-color: var(--specops-primary);
}

.woocommerce-error {
	border-left-color: var(--specops-error);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--specops-accent);
}

.woocommerce-message::before {
	color: var(--specops-success);
}

.woocommerce-info::before {
	color: var(--specops-primary);
}

.woocommerce-error::before {
	color: var(--specops-error);
}

.woocommerce-cart table.cart,
.woocommerce table.shop_table {
	border: 1px solid var(--specops-border-solid);
	border-radius: var(--specops-radius);
	background-color: var(--specops-surface);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	background-color: rgba(7, 10, 12, 0.55);
	color: var(--specops-text);
	font-family: var(--specops-font-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	border-color: var(--specops-border-solid);
	padding: 0.85em 1em;
}

.woocommerce table.shop_table td {
	border-color: var(--specops-border-solid);
	color: var(--specops-text);
	padding: 1em;
	background-color: transparent;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
	background-color: var(--specops-surface);
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	padding: 1.25rem;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--specops-font-display);
	text-transform: none;
	color: var(--specops-text);
}

.woocommerce-checkout #payment {
	background-color: var(--specops-surface);
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--specops-border);
	background-color: transparent;
	padding: 1rem;
}

.woocommerce-checkout #payment div.payment_box {
	background-color: rgba(7, 10, 12, 0.55);
	color: var(--specops-text);
	border-radius: var(--specops-radius);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: rgba(7, 10, 12, 0.55);
}

.woocommerce-checkout #payment div.form-row {
	padding: 1rem;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	background-color: var(--specops-surface);
	padding: 1.25rem;
}

.woocommerce .quantity .qty {
	width: 4.5em;
	max-width: 4.5em;
	min-height: 2.5rem;
	text-align: center;
	background-color: rgba(7, 10, 12, 0.55);
	border: 1px solid var(--specops-border);
	border-radius: var(--specops-radius);
	color: var(--specops-text);
	padding: 0.35em;
}

.woocommerce span.onsale {
	background-color: var(--specops-primary);
	color: var(--specops-navy);
	font-family: var(--specops-font-body);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	border-radius: var(--specops-radius);
	min-height: 2.5em;
	min-width: 2.5em;
	line-height: 2.5em;
	box-shadow: none;
}

/* ==========================================================================
   10. Elementor-scoped refinements
   ========================================================================== */

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--specops-font-display);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: none;
}

.elementor-widget-text-editor {
	font-family: var(--specops-font-body);
	color: var(--specops-text);
}

.elementor-widget-text-editor a {
	color: var(--specops-primary);
}

.elementor-widget-text-editor a:hover {
	color: var(--specops-accent);
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-list .elementor-icon-list-text {
	font-family: var(--specops-font-display);
	letter-spacing: 0.05em;
	text-transform: none;
}

.elementor-widget-icon-box .elementor-icon-box-description {
	font-family: var(--specops-font-body);
	color: var(--specops-muted);
}

.elementor-widget-form .elementor-button {
	width: auto;
}

.elementor-widget-form .elementor-message {
	border-radius: var(--specops-radius);
	font-family: var(--specops-font-body);
}

.elementor-widget-form .elementor-message.elementor-message-success {
	background-color: var(--specops-section);
	color: var(--specops-success);
	border: 1px solid var(--specops-success);
}

.elementor-widget-form .elementor-message.elementor-message-danger {
	background-color: var(--specops-section);
	color: var(--specops-error);
	border: 1px solid var(--specops-error);
}

.elementor-divider-separator {
	border-color: var(--specops-border);
}

/* ==========================================================================
   11. Landing page components (from mockup — scope under .specops-landing)
   ========================================================================== */

.specops-landing {
	color: var(--specops-text);
}

.specops-landing .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.specops-landing .site-header,
.specops-landing-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(var(--specops-content-max), calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 1.25rem 0;
	background: transparent;
	border: 0;
}

.specops-landing .brand-lockup,
.specops-brand-lockup {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.specops-landing .brand-lockup img,
.specops-brand-lockup img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--specops-radius);
}

.specops-landing .brand-lockup span,
.specops-brand-lockup span {
	font-family: var(--specops-font-display);
	font-size: 1.55rem;
	letter-spacing: 0.08em;
	line-height: 1;
	font-weight: 600;
}

.specops-landing .header-note,
.specops-header-note {
	margin: 0;
	color: var(--specops-muted);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	font-family: var(--specops-font-body);
}

/* Hero: one full-bleed composition */
.specops-landing .hero,
.specops-hero {
	position: relative;
	min-height: 100svh;
	height: auto;
	display: grid;
	align-items: end;
	overflow: visible;
	isolation: isolate;
}

.specops-landing .hero-media,
.specops-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.specops-landing .hero-media img,
.specops-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	transform: scale(1.06);
	animation: specops-hero-drift 18s ease-in-out infinite alternate;
	max-width: none;
}

.specops-landing .hero-scrim,
.specops-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(7, 10, 12, 0.55) 0%, rgba(7, 10, 12, 0.2) 35%, rgba(7, 10, 12, 0.88) 78%, var(--specops-background) 100%),
		linear-gradient(90deg, rgba(7, 10, 12, 0.72) 0%, rgba(7, 10, 12, 0.15) 55%, rgba(7, 10, 12, 0.45) 100%);
}

.specops-landing .hero-content,
.specops-hero-content {
	position: relative;
	z-index: 2;
	width: min(var(--specops-content-max), calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 0 0 4.5rem;
	max-width: 34rem;
	animation: specops-rise 900ms var(--specops-ease-out) both;
}

.specops-landing .brand-mark,
.specops-brand-mark {
	font-family: var(--specops-font-display);
	font-size: clamp(3.4rem, 9vw, 5.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 0.9;
	margin: 0 0 0.85rem;
	text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

.specops-landing .brand-mark em,
.specops-brand-mark em {
	font-style: normal;
	color: var(--specops-primary);
}

.specops-landing .hero-line,
.specops-hero-line {
	margin: 0 0 1.6rem;
	color: var(--specops-muted);
	font-size: 1.125rem;
	font-weight: 400;
	max-width: 28ch;
}

.specops-landing .waitlist,
.specops-waitlist {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	max-width: 28rem;
}

.specops-landing .waitlist input,
.specops-waitlist input[type="email"],
.specops-waitlist input[type="text"] {
	flex: 1 1 12rem;
	width: auto;
	min-height: 3rem;
}

.specops-landing .waitlist button,
.specops-waitlist button,
.specops-waitlist .elementor-button {
	flex: 0 0 auto;
	min-height: 3rem;
	transform: none;
}

.specops-landing .waitlist button:hover,
.specops-waitlist button:hover {
	transform: translateY(-1px);
}

.specops-landing .hero-meta,
.specops-hero-meta {
	margin: 0.9rem 0 0;
	color: var(--specops-muted-deep);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

.specops-landing .section,
.specops-section {
	width: min(var(--specops-content-max), calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 5.5rem 0 4rem;
}

.specops-landing .section-head,
.specops-section-head {
	max-width: 34rem;
	margin-bottom: 2.25rem;
	animation: specops-rise 900ms 120ms var(--specops-ease-out) both;
}

.specops-landing .section-head h2,
.specops-section-head h2 {
	margin: 0 0 0.55rem;
}

.specops-landing .section-head p,
.specops-section-head p {
	margin: 0;
	color: var(--specops-muted);
	font-size: 1.05rem;
}

.specops-landing .gallery,
.specops-gallery {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1rem;
	min-height: 28rem;
}

.specops-landing .gallery figure,
.specops-gallery figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--specops-radius);
	background: var(--specops-section);
	box-shadow: var(--specops-shadow);
}

.specops-landing .gallery figure:first-child,
.specops-gallery figure:first-child {
	grid-row: span 2;
}

.specops-landing .gallery img,
.specops-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--specops-ease-out);
	max-width: none;
}

.specops-landing .gallery figure:hover img,
.specops-gallery figure:hover img {
	transform: scale(1.035);
}

.specops-landing .gallery figcaption,
.specops-gallery figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.1rem 1rem;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--specops-font-body);
	font-weight: 500;
	color: var(--specops-text);
	background: linear-gradient(180deg, transparent, rgba(7, 10, 12, 0.85));
}

.specops-landing .cta-band,
.specops-cta-band {
	border-top: 1px solid var(--specops-border);
	border-bottom: 1px solid var(--specops-border);
	background:
		linear-gradient(90deg, rgba(62, 172, 183, 0.08), transparent 40%),
		var(--specops-section);
}

.specops-landing .cta-band .section,
.specops-cta-band .specops-section {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	padding-top: 3.25rem;
	padding-bottom: 3.25rem;
}

.specops-landing .cta-band h2,
.specops-cta-band h2 {
	margin: 0 0 0.4rem;
	font-size: clamp(2rem, 4vw, 2.8rem);
}

.specops-landing .cta-band p:not(.specops-offer__badge):not(.specops-offer__deal):not(.specops-offer__body):not(.specops-offer__fine),
.specops-cta-band p:not(.specops-offer__badge):not(.specops-offer__deal):not(.specops-offer__body):not(.specops-offer__fine) {
	margin: 0;
	color: var(--specops-muted);
	max-width: 36ch;
}

.specops-landing .site-footer,
.specops-landing-footer {
	width: min(var(--specops-content-max), calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 2rem 0 2.5rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	color: var(--specops-muted-deep);
	font-size: 0.9rem;
	border: 0;
	background: transparent;
}

@keyframes specops-hero-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@keyframes specops-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 800px) {
	.specops-landing .gallery,
	.specops-gallery {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.specops-landing .gallery figure:first-child,
	.specops-gallery figure:first-child {
		grid-row: auto;
		min-height: 20rem;
	}

	.specops-landing .gallery figure,
	.specops-gallery figure {
		min-height: 14rem;
	}

	.specops-landing .hero-content,
	.specops-hero-content {
		padding-bottom: 3.25rem;
	}

	.specops-landing .hero,
	.specops-hero {
		min-height: 0;
		overflow: visible;
	}

	.specops-landing .header-note,
	.specops-header-note {
		display: none;
	}
}

/* ==========================================================================
   12. Accessibility & reduced motion
   ========================================================================== */

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--specops-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.specops-landing .hero-media img,
	.specops-hero-media img,
	.specops-landing .hero-content,
	.specops-hero-content,
	.specops-landing .section-head,
	.specops-section-head,
	.specops-landing .gallery img,
	.specops-gallery img {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

::selection {
	background-color: var(--specops-primary);
	color: var(--specops-navy);
}