/* =========================================================
   GPL Villa — Base design system
   Design tokens + resets + typography + buttons + forms + badges
   ========================================================= */

:root {
	/* Surfaces */
	--gv-bg: #0b0e18;
	--gv-bg-alt: #101526;
	--gv-ink: #070a12;
	--gv-card: #141a2e;
	--gv-card-hover: #1a2138;
	--gv-border: #232b47;
	--gv-border-light: #2c3557;

	/* Brand — tuned to match the official promo poster: dark navy/black
	   surfaces, a bright warm gold as the hero color, red for urgency
	   ribbons/badges, and a small amount of blue only for platform-brand
	   icons (Facebook, etc.), same as the poster. No pink/magenta. */
	--gv-gold: #e8ac1f;
	--gv-gold-light: #ffd23f;
	--gv-gold-dark: #b3830f;
	--gv-teal: #2fbd8e;
	--gv-red: #e2685e;
	--gv-red-strong: #ff3b3b;
	--gv-pink: #ff6a4d;
	--gv-pink-strong: #d92b2b;
	--gv-blue: #5b8def;
	--gv-black: #05060b;
	--gv-white: #ffffff;

	/* Text */
	--gv-text: #f7f1e3;
	--gv-text-muted: #cbb98a;
	--gv-text-faint: #a08f5f;

	/* Radius + shadow */
	--gv-radius-sm: 6px;
	--gv-radius: 12px;
	--gv-radius-lg: 20px;
	--gv-shadow: 0 8px 24px rgba(0,0,0,0.28);
	--gv-shadow-lg: 0 20px 48px rgba(0,0,0,0.4);
	--gv-shadow-gold: 0 10px 28px rgba(212,175,55,0.22);

	/* Spacing scale */
	--gv-space-xs: 6px;
	--gv-space-sm: 12px;
	--gv-space-md: 20px;
	--gv-space-lg: 32px;
	--gv-space-xl: 56px;
	--gv-space-2xl: 88px;

	/* Type */
	--gv-font-heading: 'Sora', 'Inter', sans-serif;
	--gv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===================== RESET / BASE ===================== */

* { box-sizing: border-box; }

/* Every list in this theme's own templates is a layout grid (product
   grids, nav, etc.), never a bulleted list — reset here once so no
   individual grid rule can forget it and end up shifted right by the
   browser's default one-sided list padding (exactly what caused the
   homepage product grid to hug the right edge with a gap on the left).
   Restored below for .gv-entry-content/.gv-page-body so real bulleted/
   numbered lists inside blog posts and page content still look normal. */
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gv-entry-content ul, .gv-page-body ul { list-style: disc; margin: 1em 0; padding-left: 1.4em; }
.gv-entry-content ol, .gv-page-body ol { list-style: decimal; margin: 1em 0; padding-left: 1.4em; }

html, body {
	background: var(--gv-bg);
	color: var(--gv-text);
	font-family: var(--gv-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Safety net: if any section's content ever forces itself wider than
	   the viewport (a grid/flex child ignoring its container, an
	   unconstrained image, etc.), this stops it from pushing the whole
	   page into horizontal scroll instead of just clipping that one
	   section — exactly the "products showing outside the screen on both
	   sides" symptom this is here to prevent from recurring. */
	overflow-x: hidden;
}

.site,
.site-content,
#content,
.gsm-shop .col-full,
.gsm-shop .col-full {
	background: var(--gv-bg);
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gv-font-heading);
	color: #fff;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

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

a {
	color: var(--gv-gold-light);
	text-decoration: none;
	transition: color 0.18s ease;
}
a:hover { color: var(--gv-gold); }

::selection { background: var(--gv-gold); color: #14100a; }

hr { border-color: var(--gv-border); }

.col-full { max-width: 1240px; }

/* Reset any default vertical padding around #content so there's no empty
   gap below our custom header. */
#content,
.site-content,
#primary {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ===================== BUTTONS ===================== */

.gv-btn {
	background: var(--gv-card);
	color: var(--gv-text);
	border: 1px solid var(--gv-border-light);
	border-radius: var(--gv-radius-sm);
	font-weight: 600;
	font-family: var(--gv-font-body);
	padding: 12px 22px;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.gv-btn:hover {
	border-color: var(--gv-gold);
	color: var(--gv-gold-light);
	transform: translateY(-1px);
}

.gv-btn.alt,
.gsm-store a.checkout-button,
.gsm-store #place_order,
.gv-btn-gold {
	background: linear-gradient(135deg, var(--gv-gold-light), var(--gv-gold-dark));
	border: none;
	color: #171106;
	font-weight: 700;
	box-shadow: var(--gv-shadow-gold);
}

.gv-btn.alt:hover,
.gsm-store #place_order:hover,
.gv-btn-gold:hover {
	filter: brightness(1.08);
	box-shadow: 0 14px 34px rgba(212,175,55,0.3);
	transform: translateY(-2px);
}

.gv-btn-outline {
	background: transparent;
	border: 1px solid var(--gv-border-light);
	color: #fff;
}
.gv-btn-outline:hover { border-color: var(--gv-gold); color: var(--gv-gold-light); }

.gv-btn-lg { padding: 15px 30px; font-size: 15px; border-radius: var(--gv-radius-sm); }
.gv-btn-sm { padding: 8px 16px; font-size: 13px; }
.gv-btn-full { width: 100%; text-align: center; display: block; }

/* Glowing pulse — used on every Add to Cart / Buy Now pair so both actions
   read as live, tappable calls-to-action rather than flat form buttons. */
@keyframes gv-btn-glow-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.35); }
	50% { box-shadow: 0 0 0 8px rgba(255, 210, 63, 0); }
}
.gv-btn-glow {
	animation: gv-btn-glow-pulse 2.4s ease-in-out infinite;
}
.gv-btn-glow.gv-btn-outline {
	animation-name: gv-btn-glow-pulse-outline;
}
@keyframes gv-btn-glow-pulse-outline {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.12); }
	50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
.gv-btn-glow:hover,
.gv-btn-glow:focus-visible {
	animation-play-state: paused;
}

/* Add to Cart + Buy Now, always side by side as one glowing action row. */
.gsm-buy-row {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.gsm-buy-row .gv-btn {
	flex: 1;
	text-align: center;
	white-space: nowrap;
}
.gsm-buy-row-compact {
	margin-top: 10px;
	gap: 8px;
}
.gsm-buy-row-compact .gv-btn { padding: 9px 10px; font-size: 12.5px; }

@media (max-width: 380px) {
	.gsm-buy-row { flex-direction: column; }
}

/* ===================== FORM FIELDS ===================== */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="file"], select, textarea {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	color: var(--gv-text);
	border-radius: var(--gv-radius-sm);
	padding: 12px 14px;
	font-family: var(--gv-font-body);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--gv-gold);
	box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}

::placeholder { color: var(--gv-text-faint); }

.gsm-store form .form-row label { color: var(--gv-text-muted); font-size: 14px; }

/* ===================== NOTICES ===================== */

.gsm-notice, .gsm-notice {
	background: var(--gv-card);
	border-top-color: var(--gv-teal);
	color: var(--gv-text);
	border-radius: var(--gv-radius-sm);
}
.gsm-error {
	background: var(--gv-card);
	border-top-color: var(--gv-red);
	color: var(--gv-text);
	border-radius: var(--gv-radius-sm);
}

/* ===================== BADGES (shared) ===================== */

.gv-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	margin: 0 6px 6px 0;
}
.gv-badge-plan { background: rgba(91,141,239,0.15); color: var(--gv-blue); }
.gv-badge-license { background: rgba(212,175,55,0.15); color: var(--gv-gold-light); }
.gv-badge-sale { background: rgba(226,104,94,0.15); color: var(--gv-red); }

.gv-status-active, .gv-status-approved, .gv-status-delivered {
	color: var(--gv-teal) !important;
}
.gv-status-pending, .gv-status-inactive, .gv-status-no.plan {
	color: var(--gv-gold-light) !important;
}
.gv-status-suspended, .gv-status-rejected, .gv-status-expired {
	color: var(--gv-red) !important;
}

/* ===================== CONTAINERS ===================== */

.gv-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.gv-section {
	padding: var(--gv-space-xl) 0;
}

.gv-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--gv-space-lg);
}

.gv-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--gv-gold-light);
	background: rgba(212,175,55,0.12);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 14px;
}

.gv-section-head p { color: var(--gv-text-muted); margin-top: 10px; }

/* ===================== SKELETON LOADERS ===================== */

.gv-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--gv-card);
}
.gv-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
	transform: translateX(-100%);
	animation: gv-shimmer 1.4s infinite;
}
@keyframes gv-shimmer {
	100% { transform: translateX(100%); }
}

img.gv-lazy {
	background: var(--gv-card);
}

@media (max-width: 782px) {
	.gv-section { padding: var(--gv-space-lg) 0; }
}

/* Cart / account tables (Product, Price, Qty, Subtotal, Actions, etc.)
   had no responsive handling at all — on narrow screens the columns
   don't shrink to fit, so the table pushed past the edge of the
   screen (clipped/shifted, or requiring the whole page to scroll
   sideways). Making the table itself the horizontal-scroll container
   keeps the rest of the page (and the table's own left edge) fully
   on-screen, no matter how many columns it has. */
@media (max-width: 782px) {
	.gsm-cart-table,
	table.shop_table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}