/* ====================================================================
   Servicoop Energía — WooCommerce Dark Theme
   ==================================================================== */

/* ── Variables ────────────────────────────────── */
:root {
	--se-woo-card: #141414;
	--se-woo-border: rgba(224, 0, 0, 0.22);
	--se-woo-price: #ffd700;
	--se-woo-sale: #e00000;
	--se-woo-btn: #e00000;
	--se-woo-btn-hover: #9a0000;
	--se-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tienda / Grilla de productos ─────────────── */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--se-woo-card);
	border: 1px solid var(--se-woo-border);
	border-radius: 14px;
	overflow: hidden;
	padding: 0 0 1.5rem;
	transition: transform 0.3s var(--se-expo), box-shadow 0.3s var(--se-expo), border-color 0.3s var(--se-expo);
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-6px);
	border-color: rgba(224, 0, 0, 0.55);
	box-shadow: 0 18px 44px -16px rgba(224, 0, 0, 0.4);
}

/* Imagen */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	border-radius: 14px 14px 0 0;
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
	transition: transform 0.4s var(--se-expo);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* Título producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: "Saira Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.15rem;
	color: #f4f4f4;
	padding: 1rem 1.25rem 0.25rem;
}

/* Precio */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--se-woo-price);
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	padding: 0 1.25rem;
}
.woocommerce ul.products li.product .price del {
	color: #666;
	font-size: 0.9rem;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--se-woo-price);
}

/* Badge de oferta */
.woocommerce span.onsale {
	background: var(--se-woo-sale);
	color: #fff;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 0.85rem;
	top: 12px;
	left: 12px;
	right: auto;
	line-height: 1.4;
}

/* Botón agregar al carrito */
.woocommerce ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link,
.woocommerce a.added_to_cart {
	background: var(--se-woo-btn) !important;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
	padding: 0.7rem 1.25rem;
	margin: 0.75rem 1.25rem 0;
	display: block;
	text-align: center;
	transition: background 0.2s var(--se-expo), transform 0.2s var(--se-expo);
	box-shadow: 0 6px 18px -8px rgba(224, 0, 0, 0.5);
}
.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product .wp-block-button__link:hover {
	background: var(--se-woo-btn-hover) !important;
	transform: translateY(-2px);
}

/* ── Carrusel de productos (scroll-snap) ──────── */
.se-product-carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 1rem 0 2rem;
	scrollbar-width: thin;
	scrollbar-color: #e00000 #141414;
}
.se-product-carousel::-webkit-scrollbar { height: 6px; }
.se-product-carousel::-webkit-scrollbar-track { background: #141414; border-radius: 3px; }
.se-product-carousel::-webkit-scrollbar-thumb { background: #e00000; border-radius: 3px; }
.se-product-carousel > * {
	scroll-snap-align: start;
	flex: 0 0 280px;
	min-width: 280px;
}
@media (max-width: 781px) {
	.se-product-carousel > * { flex: 0 0 260px; min-width: 260px; }
}

/* ── Producto individual ──────────────────────── */
.woocommerce div.product {
	background: var(--se-woo-card);
	border: 1px solid var(--se-woo-border);
	border-radius: 14px;
	padding: 2rem;
}
.woocommerce div.product p.price {
	color: var(--se-woo-price);
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	font-size: 2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .product_meta { color: #b5adab; }
.woocommerce div.product form.cart .button {
	background: var(--se-woo-btn);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.85rem 2rem;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.2s var(--se-expo);
}
.woocommerce div.product form.cart .button:hover { background: var(--se-woo-btn-hover); }
.woocommerce div.product form.cart .quantity input {
	background: #1f1f1f;
	border: 1px solid var(--se-woo-border);
	color: #f4f4f4;
	border-radius: 6px;
	padding: 0.6rem;
	width: 70px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: #1f1f1f;
	border-color: var(--se-woo-border);
	border-radius: 6px 6px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #b5adab; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #ffd700; }
.woocommerce div.product .woocommerce-tabs .panel { background: #1f1f1f; padding: 1.5rem; border-radius: 0 0 6px 6px; }

/* ── Carrito ──────────────────────────────────── */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
	background: var(--se-woo-card);
	border: 1px solid var(--se-woo-border);
	border-radius: 14px;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: #1a1a1a; color: #ffd700; font-family: "Saira Condensed", sans-serif; text-transform: uppercase; }
.woocommerce table.shop_table td { border-color: var(--se-woo-border); color: #f4f4f4; }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal { color: var(--se-woo-price); font-weight: 700; }
.woocommerce .cart-collaterals .cart_totals { background: var(--se-woo-card); border: 1px solid var(--se-woo-border); border-radius: 14px; padding: 1.5rem; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--se-woo-btn);
	border-radius: 6px;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--se-woo-btn-hover); }

/* ── Checkout ─────────────────────────────────── */
.woocommerce-checkout #payment { background: var(--se-woo-card); border: 1px solid var(--se-woo-border); border-radius: 14px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--se-woo-border); }
.woocommerce-checkout #payment div.payment_box { background: #1a1a1a; color: #b5adab; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: #1a1a1a;
	border: 1px solid var(--se-woo-border);
	color: #f4f4f4;
	border-radius: 6px;
	padding: 0.7rem 1rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	border-color: #ffd700;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}
.woocommerce form .form-row label { color: #b5adab; }
#place_order {
	background: var(--se-woo-btn) !important;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 6px;
	font-size: 1.1rem;
}

/* ── Mini carrito (header) ────────────────────── */
.se-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #f4f4f4;
	text-decoration: none;
	transition: color 0.2s var(--se-expo);
}
.se-cart-link:hover { color: #ffd700; }
.se-cart-link svg { width: 22px; height: 22px; fill: currentColor; }
.se-cart-count {
	position: absolute;
	top: -8px; right: -10px;
	background: var(--se-woo-sale);
	color: #fff;
	font-family: "Saira Condensed", sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	width: 18px; height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	line-height: 1;
}

/* ── Mensajes WooCommerce ─────────────────────── */
.woocommerce-message { background: #1a3a1a; border-left-color: #25d366; color: #f4f4f4; border-radius: 8px; }
.woocommerce-error { background: #3a1a1a; border-left-color: #e00000; color: #f4f4f4; border-radius: 8px; }
.woocommerce-info { background: #1a1a3a; border-left-color: #ffd700; color: #f4f4f4; border-radius: 8px; }

/* ── Estrellas de reseña ──────────────────────── */
.woocommerce .star-rating { color: #ffd700; }

/* ── Mercado Pago branding ────────────────────── */
.woocommerce-checkout .payment_method_woo-mercado-pago-basic img,
.woocommerce-checkout .payment_method_woo-mercado-pago-custom img {
	max-height: 28px;
	filter: brightness(1.1);
}

/* ── Carrusel dentro de la sección #tienda ────── */
#tienda .woocommerce ul.products {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 1rem 0 2rem;
	scrollbar-width: thin;
	scrollbar-color: #e00000 #141414;
	flex-wrap: nowrap;
	margin: 0;
	list-style: none;
}
#tienda .woocommerce ul.products::-webkit-scrollbar { height: 6px; }
#tienda .woocommerce ul.products::-webkit-scrollbar-track { background: #141414; border-radius: 3px; }
#tienda .woocommerce ul.products::-webkit-scrollbar-thumb { background: #e00000; border-radius: 3px; }
#tienda .woocommerce ul.products li.product {
	scroll-snap-align: start;
	flex: 0 0 280px;
	min-width: 280px;
	width: 280px;
	margin: 0;
	float: none;
}
@media (max-width: 781px) {
	#tienda .woocommerce ul.products li.product { flex: 0 0 260px; min-width: 260px; }
}

/* Navegación del carrusel (flechas opcionales vía JS) */
.se-carousel-nav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.se-carousel-nav button {
	background: #1f1f1f;
	border: 1px solid rgba(224, 0, 0, 0.3);
	color: #ffd700;
	width: 44px; height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.2rem;
	display: grid;
	place-items: center;
	transition: background 0.2s var(--se-expo), border-color 0.2s var(--se-expo);
}
.se-carousel-nav button:hover { background: #2a2a2a; border-color: #ffd700; }