/*
Theme Name: Astra Child - TiresWego
Template: astra
Author: TiresWego
Description: Child theme de Astra con el sistema de diseno "Performance Velocity" (Stitch) para tireswego.com
Version: 1.0.0
Text Domain: astra-child
*/

/* ==========================================================================
   Design tokens - "Performance Velocity" (Stitch)
   Fuente: pantallas generadas en Stitch (Home, Catalogo, Producto, Carrito).
   No hardcodear estos valores fuera de aqui; todo lo demas los referencia.
   ========================================================================== */
:root {
	/* Superficies oscuras (header, hero, franjas de marca) */
	--tw-black: #000000;
	--tw-surface: #10131c;
	--tw-surface-container-low: #191b24;
	--tw-surface-container: #1d1f28;
	--tw-surface-container-high: #272a33;
	--tw-outline: #8c90a1;
	--tw-outline-variant: #424656;
	--tw-on-surface: #e1e2ee;
	--tw-on-surface-variant: #c2c6d8;

	/* Superficies claras (producto, catalogo, fichas tecnicas) */
	--tw-paper: #ffffff;
	--tw-paper-alt: #e7e9ed;
	--tw-ink: #101828;
	--tw-ink-soft: #4a5266;
	--tw-hairline: #d8dcdf;

	/* Acento de marca */
	--tw-primary: #0066ff;
	--tw-primary-dark: #0052cc;
	--tw-accent: #a8e600;
	--tw-accent-ink: #101828;

	/* Semanticos */
	--tw-stock: #2e7d4f;
	--tw-warn: #b4461c;
	--tw-error: #d1453b;

	/* Tipografia */
	--tw-font-display: 'Hanken Grotesk', 'Arial Narrow', sans-serif;
	--tw-font-body: 'Inter', -apple-system, sans-serif;
	--tw-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Espaciado y layout */
	--tw-base: 8px;
	--tw-gutter: 24px;
	--tw-margin-mobile: 16px;
	--tw-margin-desktop: 64px;
	--tw-max-width: 1440px;

	/* Radios */
	--tw-radius-sm: 2px;
	--tw-radius: 4px;
	--tw-radius-lg: 8px;
	--tw-radius-full: 999px;
}

/* ==========================================================================
   Tipografia auto-hospedada (nunca fonts.googleapis.com en runtime)
   ========================================================================== */
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/hanken-grotesk-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

/* ==========================================================================
   Reset ligero + tipografia base
   ========================================================================== */
body.tw-site {
	font-family: var(--tw-font-body);
	color: var(--tw-ink);
	background: var(--tw-paper);
	-webkit-font-smoothing: antialiased;
}

.tw-site h1, .tw-site h2, .tw-site h3, .tw-site h4,
.tw-site .ast-woo-shop-archive-title,
.tw-site .product_title {
	font-family: var(--tw-font-display);
	letter-spacing: -0.01em;
}

.tw-mono, .tw-site .price, .tw-spec-plate {
	font-family: var(--tw-font-mono);
	font-variant-numeric: tabular-nums;
}

.tw-container {
	max-width: var(--tw-max-width);
	margin: 0 auto;
	padding: 0 var(--tw-margin-mobile);
}
@media (min-width: 1024px) {
	.tw-container { padding: 0 var(--tw-margin-desktop); }
}

/* Foco de teclado visible (requisito duro de la skill) */
.tw-site a:focus-visible,
.tw-site button:focus-visible,
.tw-site input:focus-visible,
.tw-site select:focus-visible {
	outline: 2px solid var(--tw-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tw-site *, .tw-site *::before, .tw-site *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Botones
   ========================================================================== */
.tw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--tw-font-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 16px 32px;
	border-radius: var(--tw-radius-lg);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.tw-btn-primary { background: var(--tw-primary); color: #fff; }
.tw-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,102,255,.35); color: #fff; }
.tw-btn-accent { background: var(--tw-accent); color: var(--tw-accent-ink); }
.tw-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(168,230,0,.35); color: var(--tw-accent-ink); }
.tw-btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.tw-btn-ghost:hover { background: rgba(255,255,255,.1); }
.tw-btn-dark { background: var(--tw-ink); color: #fff; }
.tw-btn-dark:hover { transform: translateY(-2px); color: #fff; }

/* ==========================================================================
   Header / navegacion
   ========================================================================== */
.tw-topbar {
	background: var(--tw-black);
	color: var(--tw-accent);
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 8px 0;
	text-align: right;
}
.tw-topbar .tw-container { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.tw-main-header {
	background: var(--tw-black);
	color: var(--tw-on-surface);
	position: sticky;
	top: 0;
	z-index: 500;
}
.tw-main-header .tw-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tw-gutter);
	min-height: 80px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.tw-main-header .tw-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--tw-font-display);
	font-weight: 700;
	font-size: 24px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}
.tw-main-header .tw-logo img { height: 40px; width: auto; }

.tw-header-search { flex: 1; max-width: 480px; position: relative; }
.tw-header-search input[type="search"],
.tw-header-search input[type="text"] {
	width: 100%;
	background: var(--tw-surface-container);
	border: 1px solid var(--tw-outline-variant);
	color: #fff;
	border-radius: var(--tw-radius-lg);
	padding: 10px 40px 10px 16px;
	font-family: var(--tw-font-body);
}
.tw-header-search button {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--tw-on-surface-variant);
	cursor: pointer;
}

.tw-header-actions { display: flex; align-items: center; gap: 28px; }
.tw-header-actions a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--tw-on-surface-variant);
	text-decoration: none;
	font-family: var(--tw-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	position: relative;
}
.tw-header-actions a:hover { color: var(--tw-accent); }
.tw-cart-count {
	position: absolute;
	top: -4px;
	right: -10px;
	background: var(--tw-accent);
	color: var(--tw-accent-ink);
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.tw-primary-nav {
	background: var(--tw-black);
	border-top: 1px solid rgba(255,255,255,.08);
}
.tw-primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 40px;
	height: 48px;
	align-items: center;
}
.tw-primary-nav a {
	color: var(--tw-on-surface-variant);
	text-decoration: none;
	font-family: var(--tw-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.tw-primary-nav a:hover { color: #fff; }
.tw-primary-nav li.tw-nav-deals a { color: var(--tw-accent); }

@media (max-width: 900px) {
	.tw-header-search, .tw-primary-nav { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.tw-site-footer {
	background: var(--tw-black);
	color: var(--tw-on-surface-variant);
	padding: 64px 0 32px;
}
.tw-site-footer h4 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 20px;
}
.tw-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
	margin-bottom: 48px;
}
.tw-footer-grid nav { display: flex; flex-direction: column; gap: 10px; }
.tw-footer-grid a { color: inherit; text-decoration: none; }
.tw-footer-grid a:hover { color: var(--tw-accent); }
.tw-footer-bottom {
	border-top: 1px solid var(--tw-outline-variant);
	padding-top: 24px;
	text-align: center;
	font-size: 13px;
	opacity: 0.7;
}
@media (max-width: 900px) {
	.tw-footer-grid { grid-template-columns: 1fr 1fr; }
}