/*
Theme Name: Hello Elementor Child
Theme URI: https://digital.apexdevz.com
Description: Child theme for ApexDevz Digital. Holds site CSS that must not depend on Elementor's generated asset files.
Author: ApexDevz
Author URI: https://apexdevz.com
Template: hello-elementor
Version: 1.1.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   ApexDevz Dark Engineering
   ground #0B0F19 / surface #111827 / hairline #1F2937
   ink #F9FAFB / muted #9CA3AF / accent #2563EB / signal #06B6D4
   ========================================================================== */

:root {
	--ax-bg: #0B0F19;
	--ax-surface: #111827;
	--ax-border: #1F2937;
	--ax-ink: #F9FAFB;
	--ax-muted: #9CA3AF;
	--ax-accent: #2563EB;
	--ax-signal: #06B6D4;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--ax-bg);
	color: var(--ax-ink);
}

[id] {
	scroll-margin-top: 90px;
}

/* ==========================================================================
   HEADER, ported verbatim from apexdevz.com
   The markup is a plain html widget hosted in a display:contents wrapper, so
   none of Elementor's atomic container styling touches it. Variable names
   kept as --apex-* so this block stays a straight copy of the parent's CSS.
   ========================================================================== */

:root {
	--apex-bg: #0B0F19;
	--apex-surface: #111827;
	--apex-border: #1F2937;
	--apex-ink: #F9FAFB;
	--apex-muted: #9CA3AF;
	--apex-accent: #2563EB;
	--apex-signal: #06B6D4;
	--apex-radius-sm: 10px;
	--apex-radius-md: 16px;
	--apex-radius-lg: 24px;
	--apex-maxw: 1200px;
}

/* The Elementor wrapper is removed from the layout entirely. */
.elementor .s-header-host,
.elementor .s-header-host > .elementor-widget-html,
.elementor .s-header-host > .elementor-widget-html > .elementor-widget-container {
	display: contents;
}

.apex-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	background: rgba(11, 15, 25, 0.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--apex-border);
	transition: box-shadow 0.3s ease;
}

.apex-header.is-scrolled {
	box-shadow: 0 8px 40px -16px rgba(3, 6, 14, 0.92);
}

.admin-bar .apex-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .apex-header {
		top: 46px;
	}
}

.apex-header-inner {
	box-sizing: border-box;
	max-width: var(--apex-maxw);
	margin: 0 auto;
	height: 76px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.apex-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex: none;
}

.apex-logo-img {
	max-height: 36px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	flex: none;
}

.apex-brand-name {
	font: 800 19px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.5px;
	color: var(--apex-ink);
	white-space: nowrap;
}

.apex-nav-desktop {
	display: none;
}

@media (min-width: 1025px) {
	.apex-nav-desktop {
		display: block;
	}
}

.apex-menu {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apex-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apex-menu a {
	font: 500 15px/1 Inter, sans-serif;
	color: var(--apex-muted);
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.apex-menu a:hover,
.apex-menu a:focus-visible,
.apex-menu .current-menu-item > a {
	color: var(--apex-ink);
}

.apex-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.apex-header-cta {
	display: none;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--apex-radius-sm);
	background: var(--apex-accent);
	color: #fff;
	text-decoration: none;
	font: 600 15px/1 Inter, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.apex-header-cta:hover,
.apex-header-cta:focus-visible {
	background: var(--apex-signal);
	color: var(--apex-bg);
	box-shadow: 0 0 35px -8px rgba(6, 182, 212, 0.7);
}

@media (min-width: 600px) {
	.apex-header-cta {
		display: inline-block;
	}
}

.apex-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-sm);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.apex-nav-toggle:hover {
	border-color: var(--apex-signal);
}

.apex-bar {
	display: block;
	height: 2px;
	background: var(--apex-ink);
	border-radius: 2px;
}

@media (min-width: 1025px) {
	.apex-nav-toggle {
		display: none;
	}
}

.apex-nav-panel {
	display: none;
	flex-direction: column;
	padding: 12px 24px 28px;
	border-top: 1px solid var(--apex-border);
	background: var(--apex-bg);
	max-height: calc(100vh - 76px);
	overflow-y: auto;
}

.apex-nav-panel.is-open {
	display: flex;
}

@media (min-width: 1025px) {
	.apex-nav-panel.is-open {
		display: none;
	}
}

.apex-menu-mobile {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.apex-menu-mobile li {
	border-bottom: 1px solid var(--apex-border);
	margin: 0;
	list-style: none;
}

.apex-menu-mobile a {
	display: block;
	padding: 16px 0;
	font: 600 18px/1.2 "Plus Jakarta Sans", sans-serif;
	color: var(--apex-ink);
	text-decoration: none;
}

.apex-menu-mobile .current-menu-item > a {
	color: var(--apex-signal);
}

.apex-header-cta-mobile {
	display: block;
	text-align: center;
	padding: 15px 20px;
}

body.apex-nav-locked {
	overflow: hidden;
}

/* ==========================================================================
   LAYOUT CORRECTIONS AND RESPONSIVE

   Elementor's atomic base sheet applies `padding: 10px` to EVERY e-flexbox
   and e-div-block via `.elementor .e-flexbox-base`. Any container that does
   not declare its own padding silently inherits it, which adds 20px to each
   nesting level and throws percentage columns out. Zeroed here for the
   containers whose design calls for no padding. Containers that do declare
   padding are untouched.
   ========================================================================== */

.elementor .s-hero-in,
.elementor .s-hero-copy,
.elementor .s-hero-visual,
.elementor .s-hero-cta,
.elementor .s-inner,
.elementor .s-head,
.elementor .s-table,
.elementor .s-trow,
.elementor .s-card,
.elementor .s-card-row,
.elementor .s-grid-2,
.elementor .s-grid-3,
.elementor .s-grid-4,
.elementor .s-prose,
.elementor .s-narrow,
.elementor .s-ph-in,
.elementor .s-split,
.elementor .s-col-a,
.elementor .s-catchup-in,
.elementor .s-footer-in,
.elementor .s-footer-top,
.elementor .s-footer-brand,
.elementor .s-footer-brand-row,
.elementor .s-footer-col,
.elementor .s-footer-bottom {
	padding: 0;
}

/* s-trow declares vertical padding of its own; restore it. */
.elementor .s-trow {
	padding-block: 26px;
}

/* No element may push the document wider than the viewport. `clip` rather
   than `hidden` because `hidden` on an ancestor breaks position: sticky. */
html,
body {
	max-width: 100%;
}

.elementor img,
.elementor svg,
.elementor video {
	max-width: 100%;
}

/* A flex or grid child will not shrink below its longest word unless told to. */
.elementor .s-hero-copy,
.elementor .s-hero-visual,
.elementor .s-col-a,
.elementor .s-tcell-muted,
.elementor .s-tcell-ink,
.elementor .s-srow-h,
.elementor .s-srow-p,
.elementor .s-rrow-h,
.elementor .s-rrow-p {
	min-width: 0;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Laptop and small desktop, 1025px to 1200px
   The 1200px container needs breathing room before the 24px gutters.
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   Tablet, up to 1024px
   Three-up card grids are too tight here; drop to two.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Narrow tablet and large phone, up to 900px
   Two-column splits stop working well before the 767px breakpoint.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.elementor .s-hero-in,
	.elementor .s-split,
	.elementor .s-catchup-in {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.elementor .s-hero-copy,
	.elementor .s-hero-visual,
	.elementor .s-col-a,
	.elementor .s-panel,
	.elementor .s-formbox,
	.elementor .s-figures,
	.elementor .s-catchup-copy {
		width: 100%;
	}

	.elementor .s-grid-2,
	.elementor .s-grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .s-trow {
		flex-direction: column;
		gap: 10px;
	}

	.elementor .s-tcell-muted,
	.elementor .s-tcell-ink {
		width: 100%;
	}

	.elementor .s-trow-labels {
		display: none;
	}

	.elementor .s-srow,
	.elementor .s-rrow {
		flex-direction: column;
		gap: 10px;
	}

	.elementor .s-srow-h,
	.elementor .s-srow-p,
	.elementor .s-rrow-h,
	.elementor .s-rrow-p {
		width: 100%;
	}

	.elementor .s-footer-top {
		flex-wrap: wrap;
		gap: 40px;
	}

	.elementor .s-footer-brand {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Phone, up to 767px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.elementor .s-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .s-verify-panel,
	.elementor .s-bigpanel,
	.elementor .s-enqpanel,
	.elementor .s-close-panel {
		border-radius: 16px;
	}

	.elementor .s-path {
		overflow-wrap: break-word;
	}
}

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

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

/* ==========================================================================
   FORMS (WPForms) on the dark ground
   ========================================================================== */

.wpforms-container {
	margin: 0;
}

.wpforms-container .wpforms-field {
	padding: 0 0 20px;
}

.wpforms-container .wpforms-field-label {
	color: var(--ax-ink);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 8px;
}

.wpforms-container .wpforms-required-label {
	color: var(--ax-signal);
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
	color: var(--ax-muted);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: 10px;
	color: var(--ax-ink);
	font-family: "Inter", sans-serif;
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	transition: border-color 0.18s ease;
}

.wpforms-container textarea {
	min-height: 150px;
	line-height: 1.7;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: var(--ax-muted);
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--ax-signal);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: none;
}

.wpforms-container select {
	appearance: none;
	-webkit-appearance: none;
}

.wpforms-container select option {
	background-color: var(--ax-surface);
	color: var(--ax-ink);
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background-color: var(--ax-accent);
	border: 0;
	border-radius: 10px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 28px;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container button[type="submit"]:focus-visible,
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus-visible {
	background-color: var(--ax-signal);
	color: var(--ax-bg);
	box-shadow: 0 0 35px -8px rgba(6, 182, 212, 0.7);
}

.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
	color: #FCA5A5;
	font-size: 13px;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error {
	border-color: #FCA5A5;
}

.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: 16px;
	color: var(--ax-ink);
	font-family: "Inter", sans-serif;
	line-height: 1.7;
	padding: 24px 28px;
}

.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p {
	color: var(--ax-ink);
	margin: 0;
}

/* ==========================================================================
   HEADER CART
   ========================================================================== */

.apex-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-sm);
	color: var(--apex-ink);
	text-decoration: none;
	flex: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.apex-cart:hover,
.apex-cart:focus-visible {
	border-color: var(--apex-signal);
	color: var(--apex-signal);
}

.apex-cart svg {
	width: 20px;
	height: 20px;
}

.apex-cart-count {
	position: absolute;
	top: -7px;
	inset-inline-end: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--apex-accent);
	color: #fff;
	font: 600 11px/20px Inter, sans-serif;
	text-align: center;
	letter-spacing: 0;
}

.apex-cart-count.is-empty {
	display: none;
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */

.elementor .s-pdp-media .woocommerce-product-gallery {
	margin: 0;
	width: 100% !important;
}

.elementor .s-pdp-media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* No image yet: an on-palette panel rather than an empty box. */
.elementor .s-pdp-media:empty::before,
.elementor .s-pdp-media .woocommerce-product-gallery--without-images {
	content: "";
	display: block;
	min-height: 320px;
	background: linear-gradient(145deg, rgba(37, 99, 235, 0.12) 0%, rgba(11, 15, 25, 0) 70%);
}

.elementor .s-pdp-buy .price,
.elementor .s-pdp-buy .woocommerce-Price-amount {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	color: var(--apex-ink);
}

.elementor .s-pdp-buy del .woocommerce-Price-amount {
	color: var(--apex-muted);
	font-weight: 500;
}

.elementor .s-pdp-buy .single_add_to_cart_button {
	background: var(--apex-accent);
	color: #fff;
	border: 0;
	border-radius: var(--apex-radius-sm);
	font: 600 16px/1 Inter, sans-serif;
	padding: 16px 30px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.elementor .s-pdp-buy .single_add_to_cart_button:hover,
.elementor .s-pdp-buy .single_add_to_cart_button:focus-visible {
	background: var(--apex-signal);
	color: var(--apex-bg);
	box-shadow: 0 0 35px -8px rgba(6, 182, 212, 0.7);
}

.elementor .s-pdp-buy .quantity input {
	background: var(--apex-surface);
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-sm);
	color: var(--apex-ink);
	padding: 12px;
}

.elementor .woocommerce-breadcrumb {
	font: 400 14px/1.6 Inter, sans-serif;
	color: var(--apex-muted);
}

.elementor .woocommerce-breadcrumb a {
	color: var(--apex-muted);
	text-decoration: none;
}

.elementor .woocommerce-breadcrumb a:hover {
	color: var(--apex-signal);
}

/* Long description, rendered from the product content */
.elementor .s-pdp-prose h2 {
	font: 800 32px/1.15 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -1px;
	color: var(--apex-ink);
	margin: 8px 0 0;
}

.elementor .s-pdp-prose h3 {
	font: 800 21px/1.25 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.5px;
	color: var(--apex-ink);
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--apex-border);
}

.elementor .s-pdp-prose p {
	font: 400 17px/1.75 Inter, sans-serif;
	color: var(--apex-muted);
	margin: 12px 0 0;
	max-width: 70ch;
}

.elementor .s-pdp-prose strong {
	color: var(--apex-ink);
	font-weight: 600;
}

.elementor .s-pdp-prose ul {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	max-width: 70ch;
}

.elementor .s-pdp-prose li {
	font: 400 16px/1.7 Inter, sans-serif;
	color: var(--apex-muted);
	padding: 12px 0 12px 20px;
	border-top: 1px solid var(--apex-border);
	position: relative;
}

.elementor .s-pdp-prose li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 21px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--apex-accent);
}

.elementor .s-pdp-prose blockquote {
	margin: 20px 0 0;
	padding: 20px 24px;
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-md);
	background: var(--apex-bg);
	color: var(--apex-ink);
}

/* Product grids, shop and related */
.elementor ul.products li.product {
	background: var(--apex-surface);
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-md);
	overflow: hidden;
	padding: 0 0 22px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.elementor ul.products li.product:hover {
	border-color: var(--apex-accent);
	transform: translateY(-4px);
}

.elementor ul.products li.product img {
	margin: 0 0 18px;
	border-radius: 0;
	width: 100%;
	height: auto;
}

.elementor ul.products li.product .woocommerce-loop-product__title {
	font: 800 19px/1.25 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.5px;
	color: var(--apex-ink);
	padding: 0 22px;
}

.elementor ul.products li.product .price {
	display: block;
	font: 500 16px/1.4 Inter, sans-serif;
	color: var(--apex-ink);
	padding: 8px 22px 0;
}

.elementor ul.products li.product .price del {
	color: var(--apex-muted);
	margin-inline-end: 8px;
}

.elementor ul.products li.product .price ins {
	text-decoration: none;
	color: var(--apex-ink);
}

.elementor ul.products li.product .button {
	display: inline-block;
	margin: 16px 22px 0;
	padding: 11px 20px;
	border-radius: var(--apex-radius-sm);
	background: var(--apex-accent);
	color: #fff;
	font: 600 14px/1 Inter, sans-serif;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
}

.elementor ul.products li.product .button:hover {
	background: var(--apex-signal);
	color: var(--apex-bg);
}

.elementor ul.products li.product .added_to_cart {
	display: inline-block;
	margin: 10px 22px 0;
	font: 500 14px/1 Inter, sans-serif;
	color: var(--apex-signal);
	text-decoration: none;
}

/* Cart and checkout on the dark ground */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce .cart-collaterals .cart_totals table {
	background: var(--apex-surface);
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-md);
	color: var(--apex-ink);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--apex-border);
	color: var(--apex-ink);
}

.woocommerce .quantity input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--apex-surface);
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius-sm);
	color: var(--apex-ink);
	padding: 12px 14px;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--apex-accent);
	color: #fff;
	border-radius: var(--apex-radius-sm);
	font: 600 15px/1 Inter, sans-serif;
	padding: 14px 24px;
	border: 0;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--apex-signal);
	color: var(--apex-bg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--apex-surface);
	border-top-color: var(--apex-accent);
	color: var(--apex-ink);
	border-radius: var(--apex-radius-md);
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--apex-signal);
}