/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/* ==========================================================================
   FICHA DE PRODUCTO — bloque de compra
   Swatches, disponibilidad, cantidad y botones.

   Paleta tomada de la maqueta aprobada (lenguaje visual Patagonia).
   Esta hoja carga la ULTIMA de todas, asi que con igualar la especificidad
   de Porto / Elementor / woo-variation-swatches alcanza; el !important se
   usa solo donde la otra regla es mas especifica, y esta comentado.
   Todo va prefijado con .single-product para no filtrarse a la tienda.
   ========================================================================== */

:root {
	--hy-ink:   #0A0A0A;
	--hy-bed:   #F1F0EC;
	--hy-chip:  #EFEEE9;
	--hy-rule:  #DCDAD3;
	--hy-muted: #6E6B64;
}


/* --- 1. Swatches de color: de cuadrados con borde duro a circulos ---------
   El plugin se maneja por variables CSS, asi que se reconfigura en origen
   en vez de pelear la cascada regla por regla. */

.single-product .woo-variation-swatches .variable-items-wrapper {
	--wvs-single-product-item-width:  42px;
	--wvs-single-product-item-height: 42px;
	--wvs-selected-item-box-shadow:   0 0 0 1.5px var(--hy-ink);
	--wvs-hover-item-box-shadow:      0 0 0 1px var(--hy-muted);

	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 4px;
	padding: 0;
}

/* Anula el border-radius:2px del estilo "squared" del plugin.
   Se repite su misma cadena de selectores para igualar especificidad. */
.single-product .woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item),
.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--hy-rule);
	transition: box-shadow .18s ease, transform .18s ease;
	margin: 0;
}

.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) img,
.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents {
	border-radius: 50%;
}

.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
	transform: translateY(-1px);
}

/* El tilde de "seleccionado" del plugin es un icono grande sobre la muestra:
   con el aro negro alcanza y se ve mas limpio. */
.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).image-variable-item.selected:not(.no-stock) .variable-item-contents:before,
.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.selected:not(.no-stock) .variable-item-contents:before {
	display: none;
}

/* Etiqueta del atributo ("Color:") mas discreta */
.single-product .variations .label,
.single-product .variations th.label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hy-muted);
	padding-bottom: 8px;
}

.single-product .variations,
.single-product .variations tr,
.single-product .variations td,
.single-product .variations th {
	border: 0;
	background: none;
}

.single-product .variations td.value {
	padding: 0 0 18px;
}


/* --- 2. "Limpiar": de chip gris a enlace discreto ------------------------- */

.single-product a.reset_variations {
	display: inline-block;
	margin-top: 2px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--hy-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
}

.single-product a.reset_variations:hover {
	color: var(--hy-ink);
}


/* --- 3. Disponibilidad: fuera la barra de progreso falsa ------------------
   Porto pinta un :before verde de 15% de ancho FIJO, que no representa
   ninguna magnitud real: parece un indicador de stock y no lo es.
   Se reemplaza por una linea tranquila con un punto de estado. */

.single-product .woocommerce-variation-availability .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: static;
	overflow: visible;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hy-muted);
	margin: 2px 0 18px;
}

.single-product .woocommerce-variation-availability .stock:before {
	display: block;
	content: "";
	position: static;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #2FA36B;
}

.single-product .woocommerce-variation-availability .stock.out-of-stock {
	color: var(--hy-ink);
}

.single-product .woocommerce-variation-availability .stock.out-of-stock:before {
	background-color: #C4443A;
}


/* --- 4. Cantidad: de tres cajas sueltas a un solo control --------------- */

.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	background: var(--hy-bed);
	border: 1px solid var(--hy-rule);
	border-radius: 999px;
	overflow: hidden;
	height: 52px;
	padding: 0 4px;
	flex: none;
}

.single-product form.cart .quantity button.minus,
.single-product form.cart .quantity button.plus {
	width: 40px;
	height: 100%;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--hy-muted);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.single-product form.cart .quantity button.minus:hover,
.single-product form.cart .quantity button.plus:hover {
	background: rgba(10, 10, 10, .06);
	color: var(--hy-ink);
}

/* !important necesario: Elementor genera en post-7728.css la regla
   .elementor-7728 .elementor-element-170d1af4 .quantity .qty { ... }
   con 5 clases de especificidad para color, borde y radio. */
.single-product form.cart .quantity input.qty {
	width: 44px;
	height: 100%;
	padding: 0;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--hy-ink) !important;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* --- 5. Botones: pildoras, con una sola accion primaria ------------------- */

.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.single-product form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-width: 0;
	/* Porto pone overflow:hidden y recorta la etiqueta al encoger */
	overflow: visible;
	white-space: nowrap;
	min-height: 52px;
	padding: 0 34px;
	background: var(--hy-ink);
	border: 1px solid var(--hy-ink);
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.single-product form.cart button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button:focus {
	background: #2B2B2B;
	border-color: #2B2B2B;
	color: #fff;
}

.single-product form.cart button.single_add_to_cart_button.disabled,
.single-product form.cart button.single_add_to_cart_button:disabled {
	background: var(--hy-chip);
	border-color: var(--hy-rule);
	color: var(--hy-muted);
	opacity: 1;
}

/* Porto fuerza height:3rem!important en el boton y en .view-cart-btn.
   Hay que igualar la altura de la pildora de cantidad (52px) o los dos
   controles quedan desalineados; por eso el !important aca. */
.single-product form.cart button.single_add_to_cart_button {
	height: 52px !important;
	line-height: 1 !important;
}

/* Porto agrega un check de Font Awesome (\f00c) y un icono de carrito
   dentro del boton. Sobran: la etiqueta sola se lee mejor. */
.single-product .single-add-to-cart .type-product .single_add_to_cart_button:not(.wpcbn-btn):after,
.single-product form.cart button.single_add_to_cart_button:after,
.single-product form.cart button.single_add_to_cart_button:before {
	content: none;
	display: none;
	margin: 0;
}

/* "Ver carrito": accion secundaria y de bajo peso.
   Porto lo genera en inc/functions/woo-actions/cart.php:407 con las clases
   "wc-action-btn view-cart-btn button wc-forward" y lo imprime en el hook
   woocommerce_after_add_to_cart_button, o sea DENTRO del form, despues del
   boton principal. Por eso hay que sacarlo de la fila (flex-basis 100%) o se
   come el ancho del boton de compra.

   El !important es necesario: hereda .button de WooCommerce/Porto (fondo,
   borde, mayusculas) y ademas Porto fuerza height:3rem!important sobre
   .view-cart-btn. .added_to_cart cubre el caso estandar de Woo. */
.single-product .cart a.view-cart-btn,
.single-product .cart a.added_to_cart {
	flex: 0 0 100%;
	align-self: flex-start;
	width: auto;
	max-width: max-content;
	display: inline-block;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--hy-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s ease;
}

.single-product .cart a.view-cart-btn:hover,
.single-product .cart a.added_to_cart:hover {
	color: var(--hy-ink) !important;
	background: none !important;
}

.single-product .cart a.view-cart-btn:after,
.single-product .cart a.added_to_cart:after,
.single-product .cart a.view-cart-btn:before,
.single-product .cart a.added_to_cart:before {
	content: none;
	display: none;
}

/* --- 6. Aire y filetes suaves alrededor del bloque ------------------------ */

.single-product .single_variation_wrap {
	margin-top: 4px;
}

.single-product .product-summary-wrap .cart,
.single-product .elementor-add-to-cart form.cart {
	padding-top: 4px;
}

.single-product .woocommerce-variation-add-to-cart {
	padding-top: 2px;
}

.single-product .product-summary-wrap hr,
.single-product .elementor-widget-woocommerce-product-add-to-cart hr {
	border: 0;
	border-top: 1px solid var(--hy-rule);
	margin: 26px 0;
}

.single-product form.cart button.single_add_to_cart_button:focus-visible,
.single-product form.cart a.added_to_cart:focus-visible,
.single-product .woo-variation-swatches .variable-item:focus-visible {
	outline: 2px solid var(--hy-ink);
	outline-offset: 3px;
}


/* --- 7. Movil ------------------------------------------------------------ */

@media (max-width: 575px) {

	.single-product .woo-variation-swatches .variable-items-wrapper {
		--wvs-single-product-item-width:  38px;
		--wvs-single-product-item-height: 38px;
		gap: 8px;
	}

	.single-product .woocommerce-variation-add-to-cart .quantity,
	.single-product form.cart .quantity {
		height: 48px;
	}

	.single-product form.cart button.single_add_to_cart_button {
		flex: 1 1 auto;
		min-height: 48px;
		padding: 0 20px;
	}
}


@media (prefers-reduced-motion: reduce) {

	.single-product .woo-variation-swatches .variable-items-wrapper .variable-item,
	.single-product form.cart button.single_add_to_cart_button,
	.single-product form.cart a.added_to_cart,
	.single-product form.cart .quantity button.minus,
	.single-product form.cart .quantity button.plus {
		transition: none;
	}

	.single-product .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
		transform: none;
	}
}