/*
Theme Name: Flatsome Child
Description: Geek of States — Genesis design system. Shop filter sidebar, premium interaction layer (hover, 3D, scroll motion). Customizer settings migrate automatically on activation. No WooCommerce cart/checkout/payment/order functionality is modified.
Template: flatsome
Version: 3.0.0
*/

/* ===================================================================
   1. Shop filter sidebar (rendered by sidebar.php on catalog pages)
   =================================================================== */

.post-type-archive-product main#main,
.tax-product_cat main#main,
.tax-product_tag main#main {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 28px;
	max-width: 1310px;
	margin: 0 auto;
	padding: 0 15px;
}

.post-type-archive-product main#main .shop-container,
.tax-product_cat main#main .shop-container,
.tax-product_tag main#main .shop-container {
	flex: 1 1 auto;
	min-width: 0;
}

#secondary.gs-shop-filters {
	display: block !important;
	flex: 0 0 250px;
	width: 250px;
	order: -1;
	background: #fff;
	border: 1px solid #E8E8EC;
	border-radius: 12px;
	padding: 22px 20px;
	margin: 30px 0;
}

#secondary.gs-shop-filters .widget { margin-bottom: 26px; }
#secondary.gs-shop-filters .widget:last-child { margin-bottom: 0; }

#secondary.gs-shop-filters .widget-title,
#secondary.gs-shop-filters .widgettitle {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #0A0A0A;
	border: 0;
	margin-bottom: 12px;
}

#secondary.gs-shop-filters ul { margin: 0; }
#secondary.gs-shop-filters li { list-style: none; font-size: 13.5px; padding: 4px 0; border: 0; }
#secondary.gs-shop-filters a { color: #6B6B6B; transition: color .18s ease; }
#secondary.gs-shop-filters a:hover { color: #6366F1; }
#secondary.gs-shop-filters .count { color: #9C9C9C; font-size: 11px; }

#secondary.gs-shop-filters .price_slider_wrapper .ui-slider { background: #E5E5EA; }
#secondary.gs-shop-filters .ui-slider .ui-slider-range { background: #6366F1; }
#secondary.gs-shop-filters .ui-slider .ui-slider-handle { background: #fff; border: 2px solid #6366F1; }
#secondary.gs-shop-filters .price_slider_amount .button { background: #6366F1; color: #fff; border-radius: 6px; }
#secondary.gs-shop-filters .price_slider_amount .button:hover { background: #4F46E5; }

#secondary.gs-shop-filters .widget_layered_nav_filters li a {
	display: inline-block;
	background: #6366F1;
	color: #fff;
	border-radius: 9999px;
	padding: 3px 12px;
	font-size: 12px;
}

/* The fallback WooCommerce sidebar is never shown outside the filter column */
#secondary:not(.gs-shop-filters) { display: none; }

/* ===================================================================
   2. Interaction layer — hover, depth, focus
   =================================================================== */

/* Product cards */
.product-small .col-inner {
	background: #fff;
	border: 1px solid #E8E8EC;
	border-radius: 12px;
	overflow: hidden;
	padding-bottom: 8px;
	transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .28s ease;
}
.product-small .col-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 10, 30, .10);
	border-color: #D9DAF7;
}
.product-small .box-image {
	background: #F4F4F7;
	overflow: hidden;
}
.product-small .box-image img {
	transition: transform .45s cubic-bezier(.16,1,.3,1);
	will-change: transform;
}
.product-small .col-inner:hover .box-image img { transform: scale(1.05); }

/* Category cards */
.gs-cat {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid #E8E8EC;
	border-radius: 12px;
	padding: 20px 18px;
	height: 100%;
	overflow: hidden;
	transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .28s ease;
}
.gs-cat::after {
	content: "\2192";
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 14px;
	color: #C9C9D4;
	transform: translateX(-4px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease, color .28s ease;
}
.gs-cat:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 10, 30, .10);
	border-color: #D9DAF7;
}
.gs-cat:hover::after { opacity: 1; transform: translateX(0); color: #6366F1; }
.gs-cat strong {
	display: block;
	font-family: 'General Sans', 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.01em;
	color: #0A0A0A;
	margin-bottom: 4px;
	transition: color .2s ease;
}
.gs-cat:hover strong { color: #6366F1; }
.gs-cat span { font-size: 12px; color: #9C9C9C; }

/* Buttons */
.button, button.button, input[type=submit] {
	border-radius: 6px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	transition: transform .18s ease, box-shadow .22s ease, background-color .2s ease;
}
.gs-hero .button { will-change: transform; }
.button.primary:hover, .button:not(.is-outline):hover {
	box-shadow: 0 8px 22px rgba(99, 102, 241, .32);
}
.button:active { transform: translateY(1px) scale(.99); }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .28);
	border-radius: 6px;
}

/* Header lifts once the page scrolls */
#header.gs-scrolled .header-wrapper {
	box-shadow: 0 6px 24px rgba(10, 10, 30, .07);
	transition: box-shadow .3s ease;
}

/* Nav underline */
.header-nav li > a { position: relative; }
.header-nav li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: #6366F1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .26s cubic-bezier(.16,1,.3,1);
}
.header-nav li > a:hover::after { transform: scaleX(1); }
.header-nav li.current-menu-item > a::after { transform: scaleX(1); }

/* Hero card — 3D tilt target with cursor-tracked specular highlight */
.gs-hero-card {
	position: relative;
	transform-style: preserve-3d;
	transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
	will-change: transform;
	--gs-mx: 50%;
	--gs-my: 0%;
}
.gs-hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: radial-gradient(340px circle at var(--gs-mx) var(--gs-my), rgba(99, 102, 241, .12), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.gs-hero-card:hover::before { opacity: 1; }
.gs-hero-card:hover { box-shadow: 0 26px 64px rgba(99, 102, 241, .18); }

/* Support plan cards */
.gs-plan {
	transition: transform .28s cubic-bezier(.16,1,.3,1), background-color .28s ease, box-shadow .28s ease;
	will-change: transform;
}
.gs-plan:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.gs-plan-hot { transform-style: preserve-3d; }
.gs-plan-hot:hover { background: #fff; box-shadow: 0 26px 64px rgba(0, 0, 0, .45); }
.gs-plan-btn { transition: transform .18s ease, border-color .2s ease, background-color .2s ease, box-shadow .22s ease; }

/* ===================================================================
   3. Scroll-reveal motion (JS adds .gs-in)
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.gs-motion-ready .gs-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
	}
	.gs-motion-ready .gs-reveal.gs-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-reveal { opacity: 1 !important; transform: none !important; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 849px) {
	.post-type-archive-product main#main,
	.tax-product_cat main#main,
	.tax-product_tag main#main { display: block; }
	#secondary.gs-shop-filters { width: auto; margin: 10px 0 20px; }
}