/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       TheSelfPaid
 Author URI:   https://theselfpaid.com/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/* ==========================================================================
   SELF PAID — White & Blue Brand Theme
   Color System:
     --sp-navy:          #ffffff   (primary background)
     --sp-navy-light:    #ffffff   (card / section backgrounds)
     --sp-navy-mid:      #f5f5f5   (elevated surfaces)
     --sp-blue-dark:     #0d3b6e   (gradient start)
     --sp-blue-light:    #4da6ff   (gradient end / primary accent)
     --sp-blue-glow:     rgba(77,166,255,.15)  (subtle glow)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */
:root {
	--sp-navy:        #ffffff;
	--sp-navy-light:  #ffffff;
	--sp-navy-mid:    #f5f5f5;
	--sp-navy-border: #e0e0e0;
	--sp-blue-dark:   #0d3b6e;
	--sp-blue-light:  #4da6ff;
	--sp-blue-mid:    #2b7cd4;
	--sp-gradient:    linear-gradient(135deg, #0d3b6e 0%, #4da6ff 100%);
	--sp-gradient-h:  linear-gradient(90deg, #0d3b6e 0%, #4da6ff 100%);
	--sp-white:       #FFFFFF;
	--sp-heading:     #1a1a2e;
	--sp-text:        #333333;
	--sp-text-muted:  #666666;
	--sp-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   OVERRIDE PARENT "Connected" SCREEN
   (Targeted selectors — never use body > * which breaks WooCommerce forms)
   ========================================================================== */
body > #page,
body > .site,
body > div.hfeed {
	display: block !important;
}
body > style,
body > script,
body > noscript,
body > link {
	display: none !important;
}
body::after {
	display: none !important;
	content: none !important;
}

/* ==========================================================================
   HIDE OLD SITE LOGO (WPVantage demo logo)
   ========================================================================== */
.site-logo-img,
.custom-logo-link,
.custom-logo,
.ast-site-identity .custom-logo-link {
	display: none !important;
}

/* ==========================================================================
   HIDE ASTRA DEFAULT HEADER (replaced by custom SP header)
   ========================================================================== */
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-main-header-wrap,
.ast-mobile-header-wrap,
header#masthead.site-header,
.ast-header-break-point .ast-mobile-header-wrap {
	display: none !important;
}

/* ==========================================================================
   SP ANNOUNCEMENT BAR (site-wide)
   ========================================================================== */
.sp-topbar {
	background: var(--sp-gradient-h);
	text-align: center;
	padding: 10px 20px;
	font-family: var(--sp-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--sp-white);
	line-height: 1.4;
}
.sp-topbar-sep {
	display: inline-block;
	margin: 0 12px;
	opacity: .5;
}

/* ==========================================================================
   SP SITE HEADER
   ========================================================================== */
.sp-site-header {
	background: var(--sp-navy);
	border-bottom: 1px solid var(--sp-navy-border);
	position: sticky;
	top: 0;
	z-index: 99999;
	box-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.sp-header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	height: 64px;
	position: relative;
}

/* Logo */
.sp-logo {
	display: flex !important;
	align-items: center !important;
	text-decoration: none !important;
	flex-shrink: 0;
}
.sp-logo-img {
	height: 36px !important;
	width: auto !important;
	display: block !important;
	object-fit: contain !important;
}
.sp-logo:hover,
.sp-logo:focus {
	opacity: .85;
}

/* Desktop navigation — absolutely centered */
.sp-desktop-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.sp-nav-links {
	display: flex;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	gap: 40px;
}
.sp-nav-links .menu-item > a,
.sp-nav-links li > a {
	font-family: var(--sp-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	color: var(--sp-heading) !important;
	text-decoration: none !important;
	padding: 4px 0;
	transition: color .3s ease !important;
}
.sp-nav-links .menu-item > a:hover,
.sp-nav-links li > a:hover,
.sp-nav-links .current-menu-item > a,
.sp-nav-links .current_page_item > a {
	color: var(--sp-blue-light) !important;
}

/* Icon cluster */
.sp-header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}
.sp-hdr-icon {
	color: var(--sp-heading) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .3s ease !important;
	position: relative;
	text-decoration: none !important;
}
.sp-hdr-icon:hover {
	color: var(--sp-blue-light) !important;
}
.sp-hdr-icon svg {
	display: block;
}

/* Cart badge */
.sp-hdr-cart {
	position: relative;
}
.sp-cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--sp-blue-light) !important;
	color: var(--sp-white) !important;
	font-family: var(--sp-font);
	font-size: 10px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Hamburger (mobile only) */
.sp-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
	height: 24px;
	background: none !important;
	border: none !important;
	cursor: pointer;
	padding: 0 !important;
	box-shadow: none !important;
}
.sp-burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--sp-heading) !important;
	border-radius: 1px;
	transition: all .3s ease;
}
.sp-burger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.sp-burger.active span:nth-child(2) {
	opacity: 0;
}
.sp-burger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile drawer */
.sp-mobile-drawer {
	display: none;
	background: var(--sp-navy);
	border-top: 1px solid var(--sp-navy-border);
}
.sp-mobile-drawer.open {
	display: block;
}
.sp-mob-list {
	list-style: none;
	margin: 0 !important;
	padding: 8px 0 !important;
}
.sp-mob-list li a {
	display: block;
	padding: 14px 40px !important;
	font-family: var(--sp-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: var(--sp-heading) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--sp-navy-border) !important;
	transition: all .3s ease !important;
}
.sp-mob-list li:last-child a {
	border-bottom: none !important;
}
.sp-mob-list li a:hover {
	background: rgba(0,114,188,.06) !important;
	color: var(--sp-blue-light) !important;
}

/* ==========================================================================
   SP HEADER — RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.sp-desktop-nav {
		display: none !important;
	}
	.sp-burger {
		display: flex !important;
	}
	.sp-header-wrap {
		padding: 0 20px;
		height: 56px;
	}
	.sp-logo-img {
		height: 28px !important;
	}
	.sp-header-actions {
		gap: 16px;
	}
}
@media (max-width: 480px) {
	.sp-header-actions .sp-hdr-icon:not(.sp-hdr-cart) {
		display: none !important;
	}
	.sp-header-actions {
		gap: 14px;
	}
	.sp-topbar {
		font-size: 10px;
		padding: 8px 12px;
		letter-spacing: .08em;
	}
}

/* ==========================================================================
   GLOBAL / BODY
   ========================================================================== */
body,
body.flavor-flavor {
	background-color: var(--sp-navy) !important;
	color: var(--sp-text) !important;
	font-family: var(--sp-font) !important;
}

/* Astra site wrapper */
.site,
.hfeed.site {
	background-color: var(--sp-navy);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.woocommerce-loop-product__title,
.ast-archive-description .ast-archive-title,
.woocommerce div.product .product_title {
	font-family: var(--sp-font) !important;
	color: var(--sp-heading) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}

a {
	color: var(--sp-blue-light);
	transition: color .3s ease;
}
a:hover {
	color: var(--sp-heading);
}

p, li, td, th, label, span, div {
	color: var(--sp-text);
}

/* ==========================================================================
   ASTRA HEADER FALLBACK STYLES
   (Kept for WooCommerce cart drawer & any Astra popups)
   ========================================================================== */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-content,
.ast-mobile-popup-content {
	background-color: var(--sp-navy) !important;
}
.astra-cart-drawer.active {
	background-color: var(--sp-navy-light) !important;
}

/* ==========================================================================
   BUTTONS — Blue Gradient
   ========================================================================== */
button:not(.wc-block-components-quantity-selector__button):not(.sp-hero-arrow):not(.sp-hero-dot):not(.sp-burger),
input[type="button"],
input[type="submit"],
.button,
.ast-button,
.wp-block-button__link,
.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,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-element-button,
.added_to_cart {
	background: var(--sp-gradient) !important;
	color: var(--sp-white) !important;
	border: none !important;
	font-family: var(--sp-font) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	padding: 14px 32px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: all .3s ease !important;
	box-shadow: 0 4px 14px rgba(13,59,110,.35) !important;
	text-shadow: none !important;
}
button:not(.wc-block-components-quantity-selector__button):not(.sp-hero-arrow):not(.sp-hero-dot):not(.sp-burger):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wp-element-button:hover {
	background: linear-gradient(135deg, #1050a0 0%, #5cb8ff 100%) !important;
	box-shadow: 0 6px 20px rgba(77,166,255,.4) !important;
	transform: translateY(-1px);
}

/* Outlined / secondary button variant */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled {
	background: var(--sp-navy-mid) !important;
	color: var(--sp-text-muted) !important;
	opacity: .7 !important;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-input-wrapper input,
.select2-container .select2-selection--single {
	background-color: var(--sp-navy-light) !important;
	border: 1px solid var(--sp-navy-border) !important;
	color: var(--sp-heading) !important;
	font-family: var(--sp-font) !important;
	border-radius: 4px !important;
	padding: 12px 16px !important;
	transition: border-color .3s ease, box-shadow .3s ease !important;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--sp-blue-light) !important;
	box-shadow: 0 0 0 3px rgba(77,166,255,.15) !important;
	outline: none !important;
}
input::placeholder,
textarea::placeholder {
	color: var(--sp-text-muted) !important;
}

/* Select2 (used by WooCommerce) */
.select2-container .select2-selection--single .select2-selection__rendered {
	color: var(--sp-heading) !important;
}
.select2-dropdown {
	background-color: var(--sp-navy-light) !important;
	border-color: var(--sp-navy-border) !important;
}
.select2-results__option--highlighted {
	background-color: rgba(77,166,255,.15) !important;
	color: var(--sp-heading) !important;
}

/* ==========================================================================
   WOOCOMMERCE — SHOP / ARCHIVE PAGE
   ========================================================================== */
.woocommerce-page .site-content,
.woocommerce .site-content {
	background-color: var(--sp-navy) !important;
}

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--sp-navy-light) !important;
	border: 1px solid var(--sp-navy-border) !important;
	border-radius: 8px !important;
	overflow: hidden;
	padding: 0 !important;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
	display: flex !important;
	flex-direction: column !important;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
	border-color: rgba(77,166,255,.3) !important;
}
/* Card content wrapper — fills remaining space, pushes button down */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .added_to_cart {
	margin-top: auto !important;
}

/* Product image — consistent aspect ratio */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a img {
	border-radius: 8px 8px 0 0 !important;
	transition: transform .5s ease !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
}
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.05);
}

/* Product title on shop */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--sp-heading) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	padding: 12px 16px 4px !important;
}

/* Product price on shop */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span {
	color: var(--sp-blue-light) !important;
	font-weight: 800 !important;
	font-size: 18px !important;
	padding: 0 16px 16px !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del span {
	color: var(--sp-text-muted) !important;
	opacity: .6 !important;
}

/* Add to cart button on shop */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 0 16px 16px !important;
	border-radius: 4px !important;
	padding: 10px 20px !important;
	font-size: 12px !important;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--sp-gradient) !important;
	color: var(--sp-white) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	border-radius: 4px !important;
	padding: 4px 14px !important;
	line-height: 1.6 !important;
	min-height: auto !important;
	min-width: auto !important;
	font-size: 11px !important;
}

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT PAGE
   ========================================================================== */
.woocommerce div.product {
	background: var(--sp-navy) !important;
}
.woocommerce div.product .product_title {
	font-size: clamp(24px, 3.5vw, 36px) !important;
	color: var(--sp-heading) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price span {
	color: var(--sp-blue-light) !important;
	font-size: 28px !important;
	font-weight: 800 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
	color: var(--sp-text) !important;
	line-height: 1.7 !important;
}

/* Product summary — ensure it stacks properly and nothing overlaps */
.woocommerce div.product div.summary {
	position: relative;
	z-index: 1;
}
.woocommerce div.product div.summary > * {
	position: relative;
	z-index: 1;
}

/* Add-to-cart form — prevent overlap, proper stacking */
.woocommerce div.product form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
	position: relative !important;
	z-index: 10 !important;
	clear: both !important;
}

/* Quantity wrapper inside cart form */
.woocommerce div.product form.cart .quantity {
	display: inline-flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 60px !important;
	text-align: center !important;
	padding: 10px 8px !important;
	min-height: 44px !important;
}

/* Add-to-cart button itself */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto !important;
	min-width: 160px !important;
	text-align: center !important;
	white-space: nowrap !important;
	position: relative !important;
	z-index: 10 !important;
	-webkit-appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
	touch-action: manipulation !important;
	pointer-events: auto !important;
}

/* Variation form — prevent stacking */
.woocommerce div.product form.cart .variations {
	width: 100% !important;
	margin-bottom: 12px !important;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block !important;
	width: 100% !important;
	padding: 4px 0 !important;
	border: none !important;
}
.woocommerce div.product form.cart .variations select {
	width: 100% !important;
	min-height: 44px !important;
}
.woocommerce div.product form.cart .variations .reset_variations {
	display: inline-block !important;
	margin-top: 8px !important;
	visibility: visible !important;
}

/* Variation single_variation_wrap — the price + button area */
.woocommerce div.product form.cart .single_variation_wrap {
	width: 100% !important;
}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation {
	margin-bottom: 12px !important;
}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Grouped/external product button */
.woocommerce div.product form.cart .group_table + .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
	position: relative !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	touch-action: manipulation !important;
}

/* Product images — prevent covering the cart form */
.woocommerce div.product div.images {
	position: relative;
	z-index: 1;
	overflow: visible !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	z-index: 5 !important;
}

/* Product image zoom/lightbox — above header */
.woocommerce div.product div.images .flex-control-thumbs {
	z-index: 2;
}
.pswp, .pswp__bg {
	z-index: 999999 !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	background: var(--sp-navy-light) !important;
	border-bottom: 1px solid var(--sp-navy-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border-color: var(--sp-navy-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--sp-text-muted) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--sp-navy-light) !important;
	border-bottom-color: var(--sp-navy-light) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sp-blue-light) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--sp-navy) !important;
	color: var(--sp-text) !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
	background: var(--sp-navy-light) !important;
	border: 1px solid var(--sp-navy-border) !important;
	color: var(--sp-heading) !important;
}

/* WooCommerce Blocks — Cart Quantity Selector */
.wc-block-components-quantity-selector {
	display: inline-flex !important;
	align-items: stretch !important;
	border: 1px solid var(--sp-navy-border) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: var(--sp-navy-mid) !important;
	height: 44px !important;
	gap: 0 !important;
	flex-shrink: 0 !important;
	min-width: fit-content !important;
	width: auto !important;
}
.wc-block-components-quantity-selector__button {
	background: var(--sp-navy-light) !important;
	color: var(--sp-heading) !important;
	border: none !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background .2s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	position: relative !important;
	transform: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	overflow: hidden !important;
	text-indent: -9999px !important;
	flex-shrink: 0 !important;
}
.wc-block-components-quantity-selector__button::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: var(--sp-heading) !important;
	border-radius: 1px !important;
	width: 14px !important;
	height: 2px !important;
}
.wc-block-components-quantity-selector__button--plus::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 2px !important;
	height: 14px !important;
	background: var(--sp-heading) !important;
	border-radius: 1px !important;
}
.wc-block-components-quantity-selector__button:hover {
	background: var(--sp-blue-dark) !important;
	transform: none !important;
	box-shadow: none !important;
}
.wc-block-components-quantity-selector__button:hover::after,
.wc-block-components-quantity-selector__button:hover::before {
	background: var(--sp-white) !important;
}
.wc-block-components-quantity-selector__button:hover {
	background: var(--sp-blue-light) !important;
}
.wc-block-components-quantity-selector__button[disabled] {
	opacity: .35 !important;
	cursor: not-allowed !important;
}
.wc-block-components-quantity-selector__button[disabled]:hover {
	background: var(--sp-navy-light) !important;
}
.wc-block-components-quantity-selector__input {
	background: var(--sp-navy-mid) !important;
	color: var(--sp-heading) !important;
	border: none !important;
	border-left: 1px solid var(--sp-navy-border) !important;
	border-right: 1px solid var(--sp-navy-border) !important;
	width: 52px !important;
	min-width: 52px !important;
	height: 44px !important;
	min-height: 44px !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-family: var(--sp-font) !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 44px !important;
	-moz-appearance: textfield !important;
	flex-shrink: 0 !important;
}
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Star ratings */
.woocommerce .star-rating span::before {
	color: var(--sp-blue-light) !important;
}

/* Related products heading */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	color: var(--sp-heading) !important;
}

/* ==========================================================================
   WOOCOMMERCE — CART PAGE
   ========================================================================== */
.woocommerce-cart table.shop_table,
.woocommerce table.shop_table {
	background: var(--sp-navy-light) !important;
	border-color: var(--sp-navy-border) !important;
	border-radius: 8px !important;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background: var(--sp-navy-mid) !important;
	color: var(--sp-heading) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-size: 12px !important;
	border-color: var(--sp-navy-border) !important;
}
.woocommerce table.shop_table td {
	border-color: var(--sp-navy-border) !important;
	color: var(--sp-text) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--sp-navy-light) !important;
	border: 1px solid var(--sp-navy-border) !important;
	border-radius: 8px !important;
	padding: 24px !important;
}

/* ==========================================================================
   WOOCOMMERCE — CHECKOUT PAGE
   ========================================================================== */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--sp-navy-light) !important;
	border-color: var(--sp-navy-border) !important;
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	background: var(--sp-navy-light) !important;
	border-color: var(--sp-navy-border) !important;
	border-radius: 8px !important;
}
#order_review,
#order_review_heading {
	color: var(--sp-heading) !important;
}
.woocommerce-checkout #payment {
	background: var(--sp-navy-light) !important;
	border-radius: 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--sp-navy-border) !important;
}
.woocommerce-checkout #payment div.payment_box {
	background-color: var(--sp-navy-mid) !important;
	color: var(--sp-text) !important;
}

/* ==========================================================================
   WOOCOMMERCE — MY ACCOUNT
   ========================================================================== */
.woocommerce-MyAccount-navigation ul li a {
	color: var(--sp-text) !important;
	display: block;
	padding: 10px 16px !important;
	border-bottom: 1px solid var(--sp-navy-border) !important;
	transition: all .3s ease !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--sp-blue-light) !important;
	background: rgba(77,166,255,.06) !important;
}

/* ==========================================================================
   WOOCOMMERCE — MESSAGES / NOTICES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info {
	background-color: var(--sp-navy-light) !important;
	border-top-color: var(--sp-blue-light) !important;
	color: var(--sp-text) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sp-blue-light) !important;
}
.woocommerce-error {
	background-color: var(--sp-navy-light) !important;
	border-top-color: #e74c3c !important;
	color: var(--sp-text) !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.woocommerce-breadcrumb,
.ast-breadcrumbs,
.trail-items li,
.trail-items a {
	color: var(--sp-text-muted) !important;
	font-size: 12px !important;
}
.woocommerce-breadcrumb a,
.ast-breadcrumbs a {
	color: var(--sp-blue-light) !important;
}

/* ==========================================================================
   SIDEBAR / WIDGETS
   ========================================================================== */
.widget,
.widget-area {
	color: var(--sp-text) !important;
}
.widget-title,
.widget .widget-title {
	color: var(--sp-heading) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	border-bottom: 2px solid var(--sp-blue-light) !important;
	padding-bottom: 12px !important;
	margin-bottom: 20px !important;
}
.widget ul li a {
	color: var(--sp-text) !important;
}
.widget ul li a:hover {
	color: var(--sp-blue-light) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--sp-gradient) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--sp-blue-light) !important;
}

/* ==========================================================================
   FOOTER (Astra Footer)
   ========================================================================== */
.site-footer,
.ast-footer-overlay,
.ast-small-footer,
footer.site-footer,
.ast-builder-footer-row,
.ast-footer,
.site-below-footer-wrap,
.site-above-footer-wrap,
.ast-footer-copyright {
	background-color: var(--sp-navy-light) !important;
	color: var(--sp-text-muted) !important;
	border-top: 1px solid var(--sp-navy-border) !important;
}
.site-footer a,
.ast-small-footer a,
.ast-footer a,
footer a {
	color: var(--sp-text) !important;
}
.site-footer a:hover,
footer a:hover {
	color: var(--sp-blue-light) !important;
}
footer .widget-title {
	color: var(--sp-heading) !important;
}

/* ==========================================================================
   PAGE CONTENT AREAS
   ========================================================================== */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .comment-respond,
.single .post-navigation,
.ast-separate-container #primary {
	background: var(--sp-navy-light) !important;
	border: 1px solid var(--sp-navy-border) !important;
	border-radius: 8px !important;
}

/* Page / blog background */
.ast-separate-container {
	background: var(--sp-navy) !important;
}
.ast-plain-container {
	background: var(--sp-navy) !important;
}

/* Blog post content */
.entry-content,
.entry-content p,
.entry-content li {
	color: var(--sp-text) !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.woocommerce nav.woocommerce-pagination ul li a,
.ast-pagination a,
.page-numbers {
	background: var(--sp-navy-light) !important;
	color: var(--sp-text) !important;
	border: 1px solid var(--sp-navy-border) !important;
	border-radius: 4px !important;
	transition: all .3s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.ast-pagination a:hover,
.page-numbers:hover {
	background: rgba(77,166,255,.12) !important;
	color: var(--sp-blue-light) !important;
	border-color: var(--sp-blue-light) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.ast-pagination .page-numbers.current {
	background: var(--sp-gradient) !important;
	color: var(--sp-white) !important;
	border-color: transparent !important;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* ==========================================================================
   SELECTION HIGHLIGHT
   ========================================================================== */
::selection {
	background: rgba(77,166,255,.3);
	color: var(--sp-heading);
}
::-moz-selection {
	background: rgba(77,166,255,.3);
	color: var(--sp-heading);
}

/* ==========================================================================
   WOOCOMMERCE — ORDERING / RESULT COUNT
   ========================================================================== */
.woocommerce-ordering select,
.woocommerce-result-count {
	color: var(--sp-text) !important;
}

/* ==========================================================================
   GENERAL UTILITY
   ========================================================================== */
hr {
	border-color: var(--sp-navy-border) !important;
}
table, th, td {
	border-color: var(--sp-navy-border) !important;
}
blockquote {
	border-left-color: var(--sp-blue-light) !important;
	background: var(--sp-navy-light) !important;
	color: var(--sp-text) !important;
}
code, pre {
	background: var(--sp-navy-light) !important;
	color: var(--sp-blue-light) !important;
	border-color: var(--sp-navy-border) !important;
}

/* ==========================================================================
   WOOCOMMERCE — MINI-CART / CART WIDGET
   ========================================================================== */
.widget_shopping_cart .cart_list li,
.woocommerce .widget_shopping_cart .cart_list li {
	border-bottom-color: var(--sp-navy-border) !important;
}
.widget_shopping_cart .total,
.woocommerce .widget_shopping_cart .total {
	border-top-color: var(--sp-navy-border) !important;
	color: var(--sp-heading) !important;
}

/* ==========================================================================
   GLOBAL RESPONSIVE — Prevent horizontal scroll & smooth interactions
   ========================================================================== */
html {
	overflow-x: clip;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}
img {
	max-width: 100%;
	height: auto;
}

/* Touch-friendly targets — only on primary interactive elements, not ALL anchors */
button:not(.sp-hero-dot):not(.sp-hero-arrow):not(.sp-burger),
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button {
	min-height: 44px;
}

/* Undo min-sizes for small UI elements */
.sp-hdr-icon,
.sp-hero-dot,
.sp-hero-arrow,
.sp-topbar-sep,
.sp-cart-badge,
.sp-burger,
.sp-burger span,
.woocommerce .quantity .qty,
a.remove,
.woocommerce a.remove {
	min-height: unset;
	min-width: unset;
}

/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.ast-footer-overlay .ast-container,
	.site-footer .ast-container,
	.ast-builder-footer-row .ast-container,
	.ast-footer-row-wrap {
		flex-direction: column !important;
	}
	.site-footer .ast-builder-grid-row,
	.site-footer .ast-builder-footer-grid-columns {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
	}
	.ast-footer-copyright .ast-container {
		flex-direction: column !important;
		text-align: center !important;
		gap: 8px !important;
	}
	.ast-footer-copyright .ast-builder-layout-element {
		justify-content: center !important;
		text-align: center !important;
	}
}
@media (max-width: 480px) {
	.site-footer .ast-builder-grid-row,
	.site-footer .ast-builder-footer-grid-columns {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE RESPONSIVE — SHOP PAGES
   ========================================================================== */
@media (max-width: 768px) {
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
		display: grid !important;
		gap: 12px !important;
	}
	.woocommerce ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 12px !important;
		padding: 8px 10px 4px !important;
	}
	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .price span {
		font-size: 15px !important;
		padding: 0 10px 10px !important;
	}
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		margin: 0 10px 10px !important;
		padding: 8px 14px !important;
		font-size: 11px !important;
	}
	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-result-count {
		float: none !important;
		text-align: center !important;
		width: 100% !important;
		margin-bottom: 12px !important;
	}
}
@media (max-width: 380px) {
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE RESPONSIVE — SINGLE PRODUCT
   ========================================================================== */
@media (max-width: 768px) {
	/* Stack image and summary vertically */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
		display: block !important;
		clear: both !important;
	}
	.woocommerce div.product div.images {
		margin-bottom: 24px !important;
	}
	.woocommerce div.product div.summary {
		padding: 0 4px !important;
	}
	.woocommerce div.product .product_title {
		font-size: 22px !important;
		margin-bottom: 8px !important;
	}
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 22px !important;
		margin-bottom: 12px !important;
	}

	/* Add-to-cart form: full-width stacking on mobile */
	.woocommerce div.product form.cart {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.woocommerce div.product form.cart .quantity {
		width: 100% !important;
		justify-content: center !important;
	}
	.woocommerce div.product form.cart .quantity .qty {
		width: 100% !important;
		max-width: 120px !important;
		margin: 0 auto !important;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		width: 100% !important;
		min-width: unset !important;
		padding: 16px 24px !important;
		font-size: 14px !important;
	}

	/* Variation form on mobile */
	.woocommerce div.product form.cart .variations {
		margin-bottom: 16px !important;
	}
	.woocommerce div.product form.cart .variations tr {
		display: flex !important;
		flex-direction: column !important;
		margin-bottom: 8px !important;
	}
	.woocommerce div.product form.cart .variations td.label {
		padding-bottom: 4px !important;
	}
	.woocommerce div.product form.cart .variations td.label label {
		font-size: 13px !important;
		font-weight: 700 !important;
		color: var(--sp-heading) !important;
		text-transform: uppercase !important;
		letter-spacing: .04em !important;
	}
	.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Tabs on mobile */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex !important;
		flex-wrap: wrap !important;
		padding: 0 !important;
		margin: 0 0 20px !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: 1 1 auto !important;
		text-align: center !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		font-size: 11px !important;
		padding: 10px 8px !important;
		display: block !important;
	}

	/* Related products: 2-column grid */
	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.woocommerce div.product .related ul.products li.product,
	.woocommerce div.product .upsells ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
}

@media (max-width: 480px) {
	.woocommerce div.product .product_title {
		font-size: 20px !important;
	}
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 20px !important;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		font-size: 13px !important;
		padding: 14px 20px !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE RESPONSIVE — CART
   ========================================================================== */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table {
		display: block !important;
	}
	.woocommerce-cart table.shop_table thead {
		display: none !important;
	}
	.woocommerce-cart table.shop_table tbody,
	.woocommerce-cart table.shop_table tr,
	.woocommerce-cart table.shop_table td {
		display: block !important;
		width: 100% !important;
	}
	.woocommerce-cart table.shop_table td {
		text-align: left !important;
		padding: 8px 12px !important;
		border: none !important;
		border-bottom: 1px solid var(--sp-navy-border) !important;
	}
	.woocommerce-cart table.shop_table td::before {
		content: attr(data-title) ": ";
		font-weight: 700;
		color: var(--sp-heading);
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: .06em;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 16px !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE RESPONSIVE — CHECKOUT
   ========================================================================== */
@media (max-width: 768px) {
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100% !important;
		float: none !important;
		margin-bottom: 20px !important;
	}
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		width: 100% !important;
		float: none !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE RESPONSIVE — MY ACCOUNT
   ========================================================================== */
@media (max-width: 768px) {
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce-MyAccount-navigation {
		margin-bottom: 24px !important;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
	}
	.woocommerce-MyAccount-navigation ul li a {
		padding: 8px 12px !important;
		font-size: 12px !important;
		border: 1px solid var(--sp-navy-border) !important;
		border-radius: 4px !important;
		border-bottom: 1px solid var(--sp-navy-border) !important;
	}
}

/* ==========================================================================
   FORM RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px !important; /* prevents iOS zoom on focus */
	}
	/* Full-width standalone buttons only (not quantity .qty, not inline cart buttons) */
	.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
	.woocommerce-checkout #place_order,
	.woocommerce .return-to-shop .button,
	.woocommerce form.login .button,
	.woocommerce form.register .button,
	.woocommerce-MyAccount-content .button {
		padding: 12px 24px !important;
		font-size: 13px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   TYPOGRAPHY RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	h1, .entry-title {
		font-size: clamp(22px, 6vw, 32px) !important;
	}
	h2, .page-title {
		font-size: clamp(20px, 5vw, 28px) !important;
	}
	h3 {
		font-size: clamp(18px, 4.5vw, 24px) !important;
	}
}

/* ==========================================================================
   BREADCRUMBS RESPONSIVE
   ========================================================================== */
@media (max-width: 540px) {
	.woocommerce-breadcrumb,
	.ast-breadcrumbs {
		font-size: 11px !important;
		padding: 8px 0 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ==========================================================================
   ASTRA CONTENT AREA RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.ast-separate-container .ast-article-single,
	.ast-separate-container .ast-article-post {
		padding: 20px !important;
	}
	#primary {
		padding: 0 12px !important;
	}
}
@media (max-width: 480px) {
	.ast-separate-container .ast-article-single,
	.ast-separate-container .ast-article-post {
		padding: 16px !important;
	}
}

/* ==========================================================================
   PAGINATION RESPONSIVE
   ========================================================================== */
@media (max-width: 540px) {
	.woocommerce nav.woocommerce-pagination ul,
	.ast-pagination {
		gap: 4px !important;
	}
	.woocommerce nav.woocommerce-pagination ul li a,
	.ast-pagination a,
	.page-numbers {
		padding: 6px 10px !important;
		font-size: 12px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}
}