/**
 * Digimax Store - Custom CSS
 *
 * Branding Digimax: azul + verde con gradiente diagonal
 * Inspiración layout: Pacifiko.com (limpio, cards, mucho blanco)
 */

/* ==========================================================================
   1. VARIABLES DE MARCA DIGIMAX
   ========================================================================== */

:root {
	/* Colores primarios del logo Digimax */
	--digimax-blue: #1E5FBF;
	--digimax-blue-dark: #0F3A8A;
	--digimax-blue-light: #4A8FE8;

	--digimax-green: #3FAF3F;
	--digimax-green-dark: #1F8F2F;
	--digimax-green-light: #6FCF6F;

	/* Gradiente característico del logo (azul a verde) */
	--digimax-gradient: linear-gradient(135deg, var(--digimax-blue) 0%, var(--digimax-green) 100%);
	--digimax-gradient-soft: linear-gradient(135deg, rgba(30, 95, 191, 0.1) 0%, rgba(63, 175, 63, 0.1) 100%);

	/* Neutrales */
	--digimax-black: #0A0A0A;
	--digimax-gray-900: #1F2937;
	--digimax-gray-700: #4B5563;
	--digimax-gray-500: #9CA3AF;
	--digimax-gray-300: #D1D5DB;
	--digimax-gray-100: #F3F4F6;
	--digimax-gray-50: #F9FAFB;
	--digimax-white: #FFFFFF;

	/* Acentos */
	--digimax-discount: #DC2626;  /* Rojo para precios descontados */
	--digimax-success: #059669;   /* Verde para "En stock" */
	--digimax-badge: #F59E0B;     /* Amarillo para badges "Nuevo" */
}


/* ==========================================================================
   2. BOTONES (override Astra/WooCommerce)
   ========================================================================== */

/* Botón primario con gradiente Digimax */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce #place_order,
.ast-custom-button {
	background: var(--digimax-gradient);
	color: var(--digimax-white);
	border: none;
	font-weight: 600;
	letter-spacing: 0.3px;
	border-radius: 8px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--digimax-gradient);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(30, 95, 191, 0.3);
	color: var(--digimax-white);
}

/* Botón secundario */
.woocommerce a.button,
.woocommerce button.button:not(.alt) {
	background: var(--digimax-white);
	color: var(--digimax-blue);
	border: 2px solid var(--digimax-blue);
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--digimax-blue);
	color: var(--digimax-white);
}


/* ==========================================================================
   3. SHOP / PRODUCT GRID (estilo Pacifiko)
   ========================================================================== */

/* Cards de productos */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--digimax-white);
	border: 1px solid var(--digimax-gray-100);
	border-radius: 12px;
	padding: 16px;
	transition: all 0.2s ease;
	overflow: hidden;
	position: relative;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--digimax-blue-light);
	box-shadow: 0 8px 24px rgba(30, 95, 191, 0.12);
	transform: translateY(-2px);
}

/* Imagen del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	border-radius: 8px;
	margin-bottom: 12px;
	background: var(--digimax-gray-50);
}

/* Título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--digimax-gray-900);
	line-height: 1.4;
	min-height: 40px;
	margin-bottom: 8px;
	padding: 0;
}

/* Precio */
.woocommerce ul.products li.product .price {
	color: var(--digimax-gray-900);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* Precio descontado (precio anterior tachado) */
.woocommerce ul.products li.product .price del {
	color: var(--digimax-gray-500);
	font-size: 14px;
	font-weight: 400;
	margin-right: 8px;
	opacity: 0.8;
}

/* Precio actual cuando hay descuento */
.woocommerce ul.products li.product .price ins {
	color: var(--digimax-discount);
	text-decoration: none;
	font-weight: 700;
}


/* ==========================================================================
   4. BADGES (Sale, Nuevo, etc.)
   ========================================================================== */

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--digimax-discount);
	color: var(--digimax-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
}


/* ==========================================================================
   5. PÁGINA SINGLE PRODUCT
   ========================================================================== */

/* Título del producto */
.woocommerce div.product .product_title {
	font-size: 28px;
	font-weight: 700;
	color: var(--digimax-gray-900);
	margin-bottom: 12px;
}

/* Precio en single */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--digimax-gray-900);
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
}

.woocommerce div.product p.price del {
	color: var(--digimax-gray-500);
	font-size: 20px;
	margin-right: 12px;
}

.woocommerce div.product p.price ins {
	color: var(--digimax-discount);
	text-decoration: none;
}

/* Variantes (Storage / RAM) - selector más visible */
.woocommerce div.product form.cart .variations {
	background: var(--digimax-gray-50);
	padding: 16px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.woocommerce div.product form.cart .variations label {
	font-weight: 600;
	color: var(--digimax-gray-900);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.woocommerce div.product form.cart .variations select {
	border: 2px solid var(--digimax-gray-300);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 500;
	min-height: 44px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--digimax-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 95, 191, 0.15);
}


/* ==========================================================================
   6. CHECKOUT
   ========================================================================== */

/* Mensaje informativo de pickup/delivery (custom de functions.php) */
.digimax-payment-notice {
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
	border-left: 4px solid;
}

.digimax-notice-success {
	background: #ECFDF5;
	border-left-color: var(--digimax-success);
	color: #065F46;
}

.digimax-notice-info {
	background: #EFF6FF;
	border-left-color: var(--digimax-blue);
	color: var(--digimax-blue-dark);
}

.digimax-payment-notice strong {
	font-weight: 700;
}

/* Métodos de pago - estilo cards */
.woocommerce-checkout #payment ul.payment_methods {
	background: transparent;
	padding: 0;
	border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--digimax-white);
	border: 2px solid var(--digimax-gray-300);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--digimax-blue);
	background: rgba(30, 95, 191, 0.03);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--digimax-gray-900);
}


/* ==========================================================================
   7. HEADER / NAV (ajustes sobre Astra)
   ========================================================================== */

/* Ícono de carrito con badge gradient */
.ast-site-header-cart .cart-container .ast-cart-menu-wrap .count {
	background: var(--digimax-gradient);
	color: var(--digimax-white);
	font-weight: 700;
	border: 2px solid var(--digimax-white);
}


/* ==========================================================================
   8. BANNER HERO (homepage)
   ========================================================================== */

.digimax-hero {
	background: var(--digimax-gradient);
	color: var(--digimax-white);
	padding: 60px 20px;
	border-radius: 16px;
	text-align: center;
	margin-bottom: 40px;
}

.digimax-hero h1 {
	color: var(--digimax-white);
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.digimax-hero p {
	font-size: 18px;
	margin-bottom: 24px;
	opacity: 0.95;
}

.digimax-hero .button {
	background: var(--digimax-white);
	color: var(--digimax-blue);
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 8px;
	display: inline-block;
}


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	.woocommerce div.product .product_title {
		font-size: 22px;
	}

	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 26px;
	}

	.digimax-hero {
		padding: 40px 16px;
	}

	.digimax-hero h1 {
		font-size: 28px;
	}

	.digimax-hero p {
		font-size: 16px;
	}
}