/* ============================================================
   HiperCentro Natural – WooCommerce v1.1
   ============================================================ */

/* ============================================================
   1 y 2. TARJETAS DE PRODUCTO — controlado por Elementor
   Solo mantenemos el badge de oferta que no tiene widget nativo.
   ============================================================ */

/* ── Badge OFERTA ── */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--hcn-gold) !important;
	color: var(--hcn-white) !important;
	font-family: var(--ff-ui) !important;
	font-size: .625rem !important;
	font-weight: 900 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: 3px 9px !important;
	border-radius: var(--r-full) !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.5 !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	box-shadow: 0 2px 8px rgba(217,119,6,.4) !important;
}

/* Rating stars */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--hcn-gold) !important; }

/* ============================================================
   3. BARRA SUPERIOR DE TIENDA (resultados + ordenar)
   ============================================================ */
.woocommerce-products-header {
	margin-bottom: var(--sp6) !important;
}

/* Barra de resultado + ordenar */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	color: var(--hcn-txt-lt) !important;
	margin-bottom: var(--sp5) !important;
}

.woocommerce-ordering select {
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: var(--r-full) !important;
	padding: .4375rem 1rem !important;
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	color: var(--hcn-txt) !important;
	background: var(--hcn-white) !important;
	cursor: pointer !important;
	width: auto !important;
	min-width: 200px !important;
	transition: border-color var(--tr) !important;
}

.woocommerce-ordering select:focus {
	border-color: var(--hcn-600) !important;
	box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* ============================================================
   4. FILTRO DE PRECIO (WIDGET)
   ============================================================ */
.widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-handle {
	background: var(--hcn-600) !important;
	border: 2px solid var(--hcn-white) !important;
	box-shadow: 0 0 0 2px var(--hcn-600) !important;
	border-radius: var(--r-full) !important;
	width: 18px !important; height: 18px !important;
	top: -7px !important;
}

.widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--hcn-600) !important;
}

.widget_price_filter .price_slider_wrapper .ui-slider {
	background: var(--hcn-100) !important;
	border: none !important;
	height: 4px !important;
	border-radius: var(--r-full) !important;
}

.widget_price_filter .price_slider_amount .button {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border: none !important;
	border-radius: var(--r-full) !important;
	font-family: var(--ff-ui) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	padding: .375rem 1rem !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	cursor: pointer !important;
	transition: background var(--tr) !important;
}

.widget_price_filter .price_slider_amount .button:hover {
	background: var(--hcn-700) !important;
}

.widget_price_filter .price_label {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	color: var(--hcn-txt-md) !important;
}

/* ============================================================
   5. PRODUCTO INDIVIDUAL
   ============================================================ */
.woocommerce div.product { margin: var(--sp8) 0 !important; }

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--r-xl) !important;
	overflow: hidden !important;
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--r-xl) !important;
}

.woocommerce div.product div.summary { padding-left: var(--sp10) !important; }

@media (max-width: 768px) {
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary { float: none !important; width: 100% !important; margin-right: 0 !important; }
	.woocommerce div.product div.summary { padding-left: 0 !important; padding-top: var(--sp6) !important; }
}

/* Título */
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
	line-height: 1.2 !important;
	margin-bottom: var(--sp4) !important;
	color: var(--hcn-800) !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none !important;
}

/* Precio */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--ff-ui) !important;
	font-size: 1.875rem !important;
	font-weight: 900 !important;
	color: var(--hcn-700) !important;
	margin-bottom: var(--sp5) !important;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
	font-size: 1.125rem !important;
	color: var(--hcn-txt-xs) !important;
	font-weight: 400 !important;
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
	color: var(--hcn-gold) !important;
	text-decoration: none !important;
}

/* Descripción corta */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: .9375rem !important;
	line-height: 1.8 !important;
	color: var(--hcn-txt-md) !important;
	padding: var(--sp4) var(--sp5) !important;
	background: var(--hcn-50) !important;
	border-left: 4px solid var(--hcn-500) !important;
	border-radius: 0 var(--r) var(--r) 0 !important;
	margin-bottom: var(--sp6) !important;
}

/* Meta */
.woocommerce div.product .product_meta {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	color: var(--hcn-txt-lt) !important;
	margin-top: var(--sp5) !important;
	padding-top: var(--sp5) !important;
	border-top: 1px solid var(--hcn-brd-l) !important;
}
.woocommerce div.product .product_meta a { color: var(--hcn-600) !important; font-weight: 600 !important; }

/* Cantidad */
.woocommerce div.product form.cart {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp3) !important;
	flex-wrap: wrap !important;
}

.woocommerce div.product form.cart .qty {
	border: 1.5px solid var(--hcn-brd) !important;
	border-radius: var(--r) !important;
	font-family: var(--ff-ui) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	width: 68px !important;
	height: 48px !important;
	text-align: center !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
}

/* Botón añadir al carrito individual */
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--hcn-600) !important;
	color: var(--hcn-white) !important;
	border: none !important;
	border-radius: var(--r-full) !important;
	font-family: var(--ff-ui) !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	padding: .875rem 2rem !important;
	height: auto !important;
	flex: 1 !important;
	box-shadow: 0 4px 16px rgba(22,163,74,.28) !important;
	transition: all var(--tr) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--hcn-700) !important;
	box-shadow: 0 8px 28px rgba(21,128,61,.40) !important;
	transform: translateY(-2px) !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs .tabs {
	border-bottom: 2px solid var(--hcn-brd) !important;
	margin-bottom: var(--sp8) !important;
	display: flex !important;
	gap: var(--sp2) !important;
	padding: 0 !important;
	list-style: none !important;
	overflow-x: auto !important;
}
.woocommerce div.product .woocommerce-tabs .tabs li {
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .tabs li a {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	color: var(--hcn-txt-lt) !important;
	padding: .625rem 1.25rem !important;
	border-radius: var(--r-full) !important;
	display: block !important;
	white-space: nowrap !important;
	transition: var(--tr) !important;
}
.woocommerce div.product .woocommerce-tabs .tabs li.active a,
.woocommerce div.product .woocommerce-tabs .tabs li a:hover {
	color: var(--hcn-white) !important;
	background: var(--hcn-600) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
	padding: 0 !important;
	border: none !important;
	margin: 0 !important;
}

/* Productos relacionados */
.related.products > h2, .upsells.products > h2 {
	font-size: 1.375rem !important;
	margin-bottom: var(--sp6) !important;
	position: relative !important;
	padding-bottom: var(--sp3) !important;
}
.related.products > h2::after, .upsells.products > h2::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 48px !important;
	height: 3px !important;
	background: var(--hcn-600) !important;
	border-radius: var(--r-full) !important;
}

/* ============================================================
   6. BOTONES +/− DE CANTIDAD
   ============================================================ */
.quantity { display: flex !important; align-items: center !important; }

.hcn-qty-minus, .hcn-qty-plus {
	background: var(--hcn-bg) !important;
	border: 1.5px solid var(--hcn-brd) !important;
	color: var(--hcn-700) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	width: 32px !important;
	height: 44px !important;
	padding: 0 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background var(--tr), border-color var(--tr) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.hcn-qty-minus {
	border-radius: var(--r) 0 0 var(--r) !important;
	border-right: none !important;
}
.hcn-qty-plus {
	border-radius: 0 var(--r) var(--r) 0 !important;
	border-left: none !important;
}

.hcn-qty-minus:hover, .hcn-qty-plus:hover {
	background: var(--hcn-50) !important;
	border-color: var(--hcn-600) !important;
	color: var(--hcn-700) !important;
	transform: none !important;
}

.quantity input.qty {
	border-radius: 0 !important;
	border-left: none !important;
	border-right: none !important;
	text-align: center !important;
	width: 52px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ============================================================
   7. CARRITO
   ============================================================ */
.woocommerce-cart table.cart {
	border-radius: var(--r-lg) !important;
	overflow: hidden !important;
	box-shadow: var(--hcn-sh-s) !important;
	border: 1px solid var(--hcn-brd-l) !important;
}

.woocommerce-cart table.cart th {
	background: var(--hcn-800) !important;
	color: var(--hcn-white) !important;
	font-family: var(--ff-ui) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 1rem 1.125rem !important;
	border: none !important;
}

.woocommerce-cart table.cart td {
	padding: 1rem 1.125rem !important;
	border-color: var(--hcn-brd-l) !important;
	vertical-align: middle !important;
}

.woocommerce-cart table.cart .product-name a {
	font-family: var(--ff-body) !important;
	font-weight: 700 !important;
	color: var(--hcn-txt) !important;
	font-size: .9375rem !important;
}

.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	font-family: var(--ff-ui) !important;
	font-weight: 800 !important;
	color: var(--hcn-700) !important;
}

/* Totales */
.woocommerce-cart .cart_totals {
	background: var(--hcn-white) !important;
	border-radius: var(--r-lg) !important;
	padding: var(--sp6) !important;
	box-shadow: var(--hcn-sh-s) !important;
	border: 1px solid var(--hcn-brd-l) !important;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 1.125rem !important;
	margin-bottom: var(--sp5) !important;
	padding-bottom: var(--sp3) !important;
	border-bottom: 2px solid var(--hcn-100) !important;
}

.woocommerce-cart .cart_totals .shop_table tr th {
	font-family: var(--ff-ui) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	color: var(--hcn-txt-lt) !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}

.woocommerce-cart .cart_totals .order-total td strong {
	color: var(--hcn-700) !important;
	font-size: 1.375rem !important;
}

/* Botón "Proceder al pago" */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce .cart .checkout-button {
	background: var(--hcn-600) !important;
	border: none !important;
	font-family: var(--ff-ui) !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	padding: 1rem 2rem !important;
	width: 100% !important;
	text-align: center !important;
	border-radius: var(--r-full) !important;
	box-shadow: 0 4px 16px rgba(22,163,74,.28) !important;
	color: var(--hcn-white) !important;
	display: block !important;
	transition: all var(--tr) !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--hcn-700) !important;
	box-shadow: 0 8px 28px rgba(21,128,61,.40) !important;
	transform: translateY(-2px) !important;
}

/* ============================================================
   8. CHECKOUT
   ============================================================ */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.125rem !important;
	color: var(--hcn-800) !important;
	font-family: var(--ff-head) !important;
	margin-bottom: var(--sp6) !important;
	padding-bottom: var(--sp3) !important;
	border-bottom: 2px solid var(--hcn-100) !important;
}

.woocommerce-checkout #payment {
	background: var(--hcn-50) !important;
	border-radius: var(--r-lg) !important;
	border: 1px solid var(--hcn-100) !important;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--hcn-white) !important;
	border-radius: var(--r) !important;
	margin: var(--sp4) !important;
	padding: var(--sp4) !important;
}

#place_order,
.woocommerce #payment input#place_order {
	background: var(--hcn-600) !important;
	border: none !important;
	border-radius: var(--r-full) !important;
	font-family: var(--ff-ui) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	padding: 1.0625rem 2rem !important;
	width: 100% !important;
	box-shadow: 0 4px 16px rgba(22,163,74,.28) !important;
	transition: all var(--tr) !important;
	color: var(--hcn-white) !important;
	cursor: pointer !important;
}
#place_order:hover {
	background: var(--hcn-700) !important;
	box-shadow: 0 8px 28px rgba(21,128,61,.40) !important;
	transform: translateY(-2px) !important;
}

.woocommerce-checkout-review-order-table th {
	background: var(--hcn-800) !important;
	color: var(--hcn-white) !important;
	font-family: var(--ff-ui) !important;
	font-size: .75rem !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

/* ============================================================
   9. MI CUENTA
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--hcn-white) !important;
	border-radius: var(--r-lg) !important;
	overflow: hidden !important;
	box-shadow: var(--hcn-sh-s) !important;
	border: 1px solid var(--hcn-brd-l) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: var(--sp2) !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	font-family: var(--ff-ui) !important;
	font-size: .875rem !important;
	font-weight: 600 !important;
	color: var(--hcn-txt-md) !important;
	display: block !important;
	padding: var(--sp3) var(--sp4) !important;
	border-radius: var(--r) !important;
	transition: var(--tr) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--hcn-50) !important;
	color: var(--hcn-700) !important;
}

/* ============================================================
   10. NOTIFICACIONES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--ff-ui) !important;
	font-size: .9rem !important;
	border-radius: var(--r-lg) !important;
	padding: var(--sp4) var(--sp5) !important;
	margin-bottom: var(--sp5) !important;
}

.woocommerce-message {
	background: var(--hcn-50) !important;
	border-left: 4px solid var(--hcn-600) !important;
	color: var(--hcn-800) !important;
}
.woocommerce-info {
	background: #EFF6FF !important;
	border-left: 4px solid #3B82F6 !important;
	color: #1E40AF !important;
}
.woocommerce-error {
	background: #FEF2F2 !important;
	border-left: 4px solid #EF4444 !important;
	color: #991B1B !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	font-size: .75rem !important;
	padding: .375rem 1rem !important;
	border-radius: var(--r-full) !important;
}

/* ============================================================
   11. MOBILE WOO
   ============================================================ */
@media (max-width: 768px) {
	.woocommerce-cart table.cart .product-thumbnail { display: none !important; }
	.woocommerce .cart-collaterals .cart_totals { float: none !important; width: 100% !important; margin-left: 0 !important; }

	.woocommerce div.product form.cart { gap: var(--sp2) !important; }
	.woocommerce div.product form.cart .qty { width: 60px !important; height: 44px !important; }

	#place_order, .woocommerce #payment input#place_order { padding: .9375rem !important; }
}