/*
Theme Name: Deport Gym
Theme URI: https://deportgym.com
Description: Tema hijo de Storefront con la identidad de marca de Deport Gym — negro, verde #6FE200, tipografía Oswald/Inter. Requiere el tema padre Storefront instalado y activo.
Author: Nodo MKT
Template: storefront
Version: 1.1.0
Text Domain: deportgym-theme
*/

/* =====================================================================
   VARIABLES DE MARCA
   ===================================================================== */
:root{
	--dg-bg: #0b0b0b;
	--dg-panel: #141414;
	--dg-panel-2: #1c1c1c;
	--dg-line: #2a2a2a;
	--dg-lime: #6fe200;
	--dg-lime-dim: #59b600;
	--dg-text: #f2f2f2;
	--dg-text-dim: #9a9a9a;
	--dg-red: #ff5c5c;
	--dg-amber: #ffb020;
}

/* =====================================================================
   BASE
   ===================================================================== */
body{
	background: var(--dg-bg);
	color: var(--dg-text);
	font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.site-title, .woocommerce ul.products li.product h2,
.button, button, input[type="submit"], .dg-btn{
	font-family: 'Oswald', sans-serif;
}
a{ color: var(--dg-lime); }
a:hover{ color: var(--dg-lime-dim); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
	background: var(--dg-panel) !important;
	border-bottom: 1px solid var(--dg-line);
}
.site-header .site-branding .site-title a,
.site-header .site-branding .site-title a:hover{
	color: var(--dg-text);
	font-weight: 700;
	letter-spacing: 0.5px;
}
.site-header-cart .cart-contents,
.site-header a{
	color: var(--dg-text);
}
.storefront-primary-navigation,
.main-navigation{
	background: var(--dg-panel) !important;
	border-top: 1px solid var(--dg-line);
	border-bottom: 1px solid var(--dg-line);
}
.main-navigation ul li a{
	color: var(--dg-text-dim);
}
.main-navigation ul li a:hover{
	color: var(--dg-lime);
}
.site-header-cart .widget_shopping_cart{
	background: var(--dg-panel);
	border: 1px solid var(--dg-line);
	color: var(--dg-text);
}

/* =====================================================================
   BOTONES (aplican en todo el sitio: shop, carrito, checkout, cuenta)
   ===================================================================== */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.wp-block-button__link{
	background-color: var(--dg-lime) !important;
	border-color: var(--dg-lime) !important;
	color: #0b0b0b !important;
	font-weight: 600;
	border-radius: 5px;
	letter-spacing: 0.3px;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, .checkout-button:hover{
	background-color: var(--dg-lime-dim) !important;
	border-color: var(--dg-lime-dim) !important;
}
.button.alt, .woocommerce a.button.alt{
	background-color: var(--dg-lime) !important;
	color: #0b0b0b !important;
}

/* =====================================================================
   CATÁLOGO / GRID DE PRODUCTOS
   ===================================================================== */
.woocommerce ul.products li.product{
	background: var(--dg-panel);
	border: 1px solid var(--dg-line);
	border-radius: 10px;
	padding: 14px;
	transition: border-color .15s;
}
.woocommerce ul.products li.product:hover{
	border-color: #3a3a3a;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	color: var(--dg-text);
	font-size: 14px;
	font-weight: 600;
}
.woocommerce ul.products li.product .price{
	color: var(--dg-lime) !important;
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
	font-weight: 600;
}
.woocommerce ul.products li.product .price del{
	color: var(--dg-text-dim);
}
.woocommerce span.onsale{
	background: var(--dg-lime);
	color: #0b0b0b;
}

/* Categoría — badge/pill sobre la imagen del producto */
.dg-cat-tag{
	display: inline-block;
	background: rgba(111,226,0,0.15);
	color: var(--dg-lime);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 3px 9px;
	border-radius: 10px;
	margin-bottom: 8px;
}

/* =====================================================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ===================================================================== */
.single-product div.product p.price,
.single-product div.product span.price{
	color: var(--dg-lime) !important;
	font-family: 'Oswald', sans-serif;
}
.woocommerce-tabs, .woocommerce-Tabs-panel{
	background: var(--dg-panel);
	border: 1px solid var(--dg-line);
	color: var(--dg-text);
}
.woocommerce-tabs ul.tabs li a{
	color: var(--dg-text-dim);
}
.woocommerce-tabs ul.tabs li.active a{
	color: var(--dg-lime);
}

/* =====================================================================
   CARRITO Y CHECKOUT
   ===================================================================== */
.woocommerce-cart table.cart, .woocommerce-checkout table,
.woocommerce table.shop_table{
	background: var(--dg-panel);
	border: 1px solid var(--dg-line);
	color: var(--dg-text);
}
.woocommerce table.shop_table th{
	color: var(--dg-text-dim);
	border-bottom: 1px solid var(--dg-line);
}
.woocommerce table.shop_table td{
	border-bottom: 1px solid var(--dg-line);
}
.woocommerce-checkout #payment,
.woocommerce-checkout-review-order{
	background: var(--dg-panel) !important;
	border: 1px solid var(--dg-line);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
	background: var(--dg-panel-2);
	border: 1px solid var(--dg-line);
	color: var(--dg-text);
}
.woocommerce-checkout #payment ul.payment_methods li{
	border-top: 1px solid var(--dg-line);
}

/* =====================================================================
   MI CUENTA
   ===================================================================== */
.woocommerce-MyAccount-navigation ul{
	background: var(--dg-panel);
	border: 1px solid var(--dg-line);
}
.woocommerce-MyAccount-navigation ul li a{
	color: var(--dg-text-dim);
}
.woocommerce-MyAccount-navigation ul li.is-active a{
	color: var(--dg-lime);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
	background: var(--dg-panel) !important;
	color: var(--dg-text-dim);
	border-top: 1px solid var(--dg-line);
}
.site-footer a{ color: var(--dg-text-dim); }
.site-footer a:hover{ color: var(--dg-lime); }

/* =====================================================================
   HERO DE INICIO (usado por page-templates/template-home.php)
   ===================================================================== */
.dg-hero{
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.dg-hero h1{
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--dg-text);
	max-width: 520px;
}
.dg-hero h1 em{
	font-style: normal;
	color: var(--dg-lime);
}
.dg-hero p{
	color: var(--dg-text-dim);
	margin-top: 14px;
	max-width: 420px;
	font-size: 15px;
}
.dg-hero-badges{
	display: flex;
	gap: 24px;
	margin-top: 26px;
	flex-wrap: wrap;
}
.dg-hero-badge{ font-size: 12px; color: var(--dg-text-dim); }
.dg-hero-badge b{
	display: block;
	color: var(--dg-lime);
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
}
.dg-social-row{ display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.dg-social-btn{
	display: flex; align-items: center; gap: 7px;
	background: var(--dg-panel); border: 1px solid var(--dg-line);
	color: var(--dg-text-dim); padding: 9px 16px; border-radius: 20px;
	font-size: 13px; text-decoration: none; transition: all .15s;
}
.dg-social-btn:hover{ border-color: var(--dg-lime); color: var(--dg-lime); }

.dg-hero-visual{ width: 280px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dg-hero-visual-placeholder{
	width: 280px; height: 280px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #1e2a08, #0b0b0b 70%);
	border: 1px dashed var(--dg-line);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.dg-hero-visual-placeholder img{ width: 100%; height: 100%; object-fit: cover; }
.dg-wa-btn{
	display: flex; align-items: center; gap: 8px;
	background: #25D366; color: #0b0b0b; text-decoration: none;
	padding: 11px 20px; border-radius: 24px; font-family: 'Oswald', sans-serif;
	font-weight: 600; font-size: 13px; transition: background .15s; white-space: nowrap;
}
.dg-wa-btn:hover{ background: #1ebe5a; color: #0b0b0b; }

/* Navegación de categorías (pills): barra fija arriba al bajar */
.dg-cat-bar{
	position: sticky; top: 0; z-index: 50;
	background: rgba(11,11,11,.96); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--dg-line); margin-bottom: 24px;
}
body.admin-bar .dg-cat-bar{ top: 32px; }
.dg-cat-nav{
	display: flex; gap: 6px; padding: 12px 40px; max-width: 1280px; margin: 0 auto;
	overflow-x: auto; flex-wrap: wrap;
}
.dg-cat-pill{
	background: var(--dg-panel); border: 1px solid var(--dg-line); color: var(--dg-text-dim);
	padding: 8px 16px; border-radius: 20px; font-size: 13px; white-space: nowrap;
	text-decoration: none; transition: all .15s;
}
.dg-cat-pill:hover, .dg-cat-pill.active{
	background: var(--dg-lime); color: #0b0b0b; border-color: var(--dg-lime); font-weight: 600;
}

.dg-section{ max-width: 1280px; margin: 0 auto; padding: 0 40px 60px; }
.dg-section-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.dg-section-head h2{ font-size: 22px; font-weight: 600; color: var(--dg-text); }

/* =====================================================================
   RESPONSIVE — TABLET (768px y menos)
   ===================================================================== */
@media(max-width: 768px){
	.dg-hero{
		padding: 32px 20px;
		flex-direction: column-reverse; /* la imagen queda arriba, el texto abajo, se lee mejor */
		text-align: center;
	}
	.dg-hero h1{ font-size: 30px; max-width: 100%; }
	.dg-hero p{ margin-left: auto; margin-right: auto; max-width: 100%; }
	.dg-hero-badges{ justify-content: center; }
	.dg-social-row{ justify-content: center; }

	.dg-hero-visual{ width: 100%; }
	.dg-hero-visual-placeholder{ width: 180px; height: 180px; }

	/* Navegación de categorías: franja horizontal con scroll, no se amontona verticalmente */
	.dg-cat-nav{
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 20px;
		scrollbar-width: none;
	}
	.dg-cat-nav::-webkit-scrollbar{ display: none; }

	.dg-section{ padding-left: 20px; padding-right: 20px; }
	.dg-section-head{ flex-direction: column; align-items: flex-start; gap: 4px; }

	/* 2 columnas de producto en vez de 4 */
	.woocommerce ul.products.columns-4 li.product,
	.woocommerce ul.products li.product{
		width: 47% !important;
		margin-right: 4% !important;
	}
	.woocommerce ul.products.columns-4 li.product:nth-child(2n),
	.woocommerce ul.products li.product:nth-child(2n){
		margin-right: 0 !important;
	}
}

/* =====================================================================
   RESPONSIVE — CELULAR (480px y menos)
   ===================================================================== */
@media(max-width: 480px){
	.dg-hero h1{ font-size: 26px; }
	.dg-hero-badges{ gap: 16px; }
	.dg-hero-visual-placeholder{ width: 150px; height: 150px; }
	.dg-wa-btn{ width: 100%; justify-content: center; }

	/* 1 columna de producto — más fácil de leer en pantallas chicas */
	.woocommerce ul.products.columns-4 li.product,
	.woocommerce ul.products li.product{
		width: 100% !important;
		margin-right: 0 !important;
	}
}

@media(max-width: 782px){ body.admin-bar .dg-cat-bar{ top: 46px; } }