/* =========================================================
   SS DECO - COMMERCE UI CONSOLIDADO 3.0
   ========================================================= */

/* ---------------------------------------------------------
   0. TOKENS DE RESPALDO
   Solo se usan si alguno no existe en el sistema principal.
   --------------------------------------------------------- */

html[data-ss-theme] {
	--ss-commerce-accent: var(--ss-accent, #744052);
	--ss-commerce-bg: var(--ss-bg, #f3eee6);
	--ss-commerce-surface: var(--ss-surface, #ffffff);
	--ss-commerce-text: var(--ss-text, #141416);
	--ss-commerce-soft: var(--ss-text-soft, #68646a);
	--ss-commerce-line: var(--ss-line, rgba(20, 20, 22, 0.16));
}

html[data-ss-theme="dark"] {
	--ss-commerce-bg: var(--ss-bg, #141416);
	--ss-commerce-surface: var(--ss-surface, #1d1d20);
	--ss-commerce-text: var(--ss-text, #f3eee6);
	--ss-commerce-soft: var(--ss-text-soft, #c6c0b8);
	--ss-commerce-line: var(--ss-line, rgba(243, 238, 230, 0.16));
}


/* =========================================================
   1. PRE-CARRITO / MINI-CART
   ========================================================= */

html[data-ss-theme] .ct-cart-content {
	background: var(--ss-commerce-surface) !important;
	color: var(--ss-commerce-text) !important;
	border: 1px solid var(--ss-commerce-line) !important;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__total,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__buttons,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__empty-message {
	background: var(--ss-commerce-surface) !important;
	color: var(--ss-commerce-text) !important;
}

/* Item */
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item,
html[data-ss-theme] .ct-cart-content .mini_cart_item {
	position: relative !important;
	padding: 14px 44px 14px 14px !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--ss-commerce-line) !important;
	background: transparent !important;
}

/*
 * El enlace de producto contiene imagen + nombre.
 * Lo convertimos en grid para que la imagen tenga un marco
 * definido sin cortar la fotografia.
 */
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item > a:not(.remove),
html[data-ss-theme] .ct-cart-content .mini_cart_item > a:not(.remove) {
	display: grid !important;
	grid-template-columns: 76px minmax(0, 1fr) !important;
	column-gap: 13px !important;
	align-items: start !important;
	width: 100% !important;
	color: var(--ss-commerce-text) !important;
	text-decoration: none !important;
}

/* Imagen completa dentro de 76x76 */
html[data-ss-theme] .ct-cart-content img.ss-commerce-full-image,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item img,
html[data-ss-theme] .ct-cart-content .mini_cart_item img {
	display: block !important;
	width: 76px !important;
	height: 76px !important;
	min-width: 76px !important;
	max-width: 76px !important;
	min-height: 76px !important;
	max-height: 76px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	object-position: center center !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	clip-path: none !important;
	mask: none !important;
}

html[data-ss-theme="light"] .ct-cart-content img.ss-commerce-full-image,
html[data-ss-theme="light"] .ct-cart-content .woocommerce-mini-cart-item img {
	background: #fff !important;
}

html[data-ss-theme="dark"] .ct-cart-content img.ss-commerce-full-image,
html[data-ss-theme="dark"] .ct-cart-content .woocommerce-mini-cart-item img {
	background: color-mix(
		in srgb,
		var(--ss-commerce-surface) 94%,
		var(--ss-commerce-text) 6%
	) !important;
}

/* Variaciones y cantidad se alinean con el texto, no con la foto */
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .variation,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .quantity,
html[data-ss-theme] .ct-cart-content .mini_cart_item .variation,
html[data-ss-theme] .ct-cart-content .mini_cart_item .quantity {
	margin-left: 89px !important;
	margin-top: 4px !important;
	color: var(--ss-commerce-soft) !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}

html[data-ss-theme] .ct-cart-content .variation dt,
html[data-ss-theme] .ct-cart-content .variation dd,
html[data-ss-theme] .ct-cart-content .quantity,
html[data-ss-theme] .ct-cart-content .amount {
	color: inherit !important;
}

/* Papelera */
html[data-ss-theme] .ct-cart-content a.remove,
html[data-ss-theme] .ct-cart-content .remove_from_cart_button {
	position: absolute !important;
	top: 14px !important;
	right: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	color: var(--ss-commerce-accent) !important;
	background: transparent !important;
	border: 0 !important;
	opacity: 0.9 !important;
}

html[data-ss-theme] .ct-cart-content a.remove:hover,
html[data-ss-theme] .ct-cart-content .remove_from_cart_button:hover {
	color: var(--ss-commerce-accent) !important;
	opacity: 1 !important;
}

/* Subtotal */
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__total,
html[data-ss-theme] .ct-cart-content .total {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 15px 16px !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--ss-commerce-line) !important;
	color: var(--ss-commerce-text) !important;
}

html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__total strong,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__total .amount,
html[data-ss-theme] .ct-cart-content .total strong,
html[data-ss-theme] .ct-cart-content .total .amount {
	color: var(--ss-commerce-text) !important;
}

/* Botones del mini-cart */
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__buttons,
html[data-ss-theme] .ct-cart-content .buttons {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
	padding: 16px !important;
	margin: 0 !important;
}

html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart__buttons .button,
html[data-ss-theme] .ct-cart-content .buttons .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 9px 11px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: 1px solid var(--ss-commerce-accent) !important;
	box-shadow: none !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: uppercase !important;
}

/* Ver carrito = secundario */
html[data-ss-theme] .ct-cart-content .button:not(.checkout) {
	background: transparent !important;
	color: var(--ss-commerce-accent) !important;
}

/* Finalizar compra = primario */
html[data-ss-theme] .ct-cart-content .button.checkout {
	background: var(--ss-commerce-accent) !important;
	color: #fff !important;
}


/* =========================================================
   2. DROPDOWN DE CUENTA
   ========================================================= */

/*
 * Blocksy puede renderizar el contenido de cuenta con pequeñas
 * variaciones de clases segun su configuracion/version.
 */
html[data-ss-theme] .ct-account-dropdown,
html[data-ss-theme] #header [data-id="account"] .ct-dropdown-menu,
html[data-ss-theme] #header .ct-header-account .ct-dropdown-menu,
html[data-ss-theme] #header .ct-account-item .ct-dropdown-menu,
html[data-ss-theme] .ct-account-content {
	background: var(--ss-commerce-surface) !important;
	color: var(--ss-commerce-text) !important;
	border: 1px solid var(--ss-commerce-line) !important;
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
}

/* Texto del usuario, email y acciones */
html[data-ss-theme] .ct-account-dropdown :is(a, p, span, strong, small),
html[data-ss-theme] #header [data-id="account"] .ct-dropdown-menu :is(a, p, span, strong, small),
html[data-ss-theme] #header .ct-header-account .ct-dropdown-menu :is(a, p, span, strong, small),
html[data-ss-theme] .ct-account-content :is(a, p, span, strong, small) {
	color: var(--ss-commerce-text) !important;
	opacity: 1 !important;
}

/* Email/meta menos protagonista pero legible */
html[data-ss-theme] .ct-account-dropdown :is(small, .user-email, .ct-account-email),
html[data-ss-theme] .ct-account-content :is(small, .user-email, .ct-account-email) {
	color: var(--ss-commerce-soft) !important;
}

/* Divisores */
html[data-ss-theme] .ct-account-dropdown *,
html[data-ss-theme] .ct-account-content *,
html[data-ss-theme] #header [data-id="account"] .ct-dropdown-menu * {
	border-color: var(--ss-commerce-line) !important;
}

/* Links/acciones */
html[data-ss-theme] .ct-account-dropdown a,
html[data-ss-theme] .ct-account-content a,
html[data-ss-theme] #header [data-id="account"] .ct-dropdown-menu a {
	transition:
		color 160ms ease,
		background-color 160ms ease !important;
}

html[data-ss-theme] .ct-account-dropdown a:hover,
html[data-ss-theme] .ct-account-content a:hover,
html[data-ss-theme] #header [data-id="account"] .ct-dropdown-menu a:hover {
	color: var(--ss-commerce-accent) !important;
	background: color-mix(
		in srgb,
		var(--ss-commerce-accent) 10%,
		transparent
	) !important;
}

/* Avatar dentro del dropdown */
html[data-ss-theme] .ct-account-dropdown img.avatar,
html[data-ss-theme] .ct-account-content img.avatar {
	border-radius: 999px !important;
	box-shadow: 0 0 0 1px var(--ss-commerce-line) !important;
}


/* =========================================================
   3. BUSCADOR MODAL
   ========================================================= */

html[data-ss-theme] #search-modal .ct-search-form,
html[data-ss-theme] .ct-search-form {
	border-color: var(--ss-commerce-accent) !important;
	box-shadow: none !important;
}

html[data-ss-theme] #search-modal .ct-search-form input,
html[data-ss-theme] .ct-search-form input {
	background: var(--ss-commerce-surface) !important;
	color: var(--ss-commerce-text) !important;
	caret-color: var(--ss-commerce-accent) !important;
}

html[data-ss-theme] #search-modal .ct-search-form input::placeholder,
html[data-ss-theme] .ct-search-form input::placeholder {
	color: var(--ss-commerce-soft) !important;
	opacity: 0.9 !important;
}

html[data-ss-theme] #search-modal .ct-search-form button,
html[data-ss-theme] #search-modal button[type="submit"],
html[data-ss-theme] .ct-search-form button {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
	box-shadow: none !important;
}

html[data-ss-theme] #search-modal .ct-search-form button svg,
html[data-ss-theme] #search-modal button[type="submit"] svg,
html[data-ss-theme] .ct-search-form button svg {
	color: #fff !important;
	fill: currentColor !important;
}


/* =========================================================
   4. ELIMINAR VERDE ANTIGUO EN ACCIONES PRIMARIAS
   ========================================================= */

/* Header: badge carrito */
html[data-ss-theme] #header [data-id="cart"] .ct-dynamic-count,
html[data-ss-theme] #header .ct-header-cart .ct-dynamic-count,
html[data-ss-theme] #header .ct-cart-item .ct-dynamic-count {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
}

/* Carrito */
html[data-ss-theme] body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
html[data-ss-theme] body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
}

/* Checkout */
html[data-ss-theme] body.woocommerce-checkout #place_order {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
}

/* Woo acciones "alt" */
html[data-ss-theme] .woocommerce a.button.alt,
html[data-ss-theme] .woocommerce button.button.alt,
html[data-ss-theme] .woocommerce input.button.alt {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
}

/* Paginacion activa: el "1" verde pasa a ciruela */
html[data-ss-theme] .woocommerce-pagination .page-numbers.current,
html[data-ss-theme] .ct-pagination .current,
html[data-ss-theme] .ct-pagination [aria-current="page"] {
	background: var(--ss-commerce-accent) !important;
	border-color: var(--ss-commerce-accent) !important;
	color: #fff !important;
}


/* =========================================================
   5. CARRITO NORMAL: IMAGEN COMPLETA
   ========================================================= */

html[data-ss-theme] .woocommerce-cart-form .product-thumbnail img.ss-commerce-full-image {
	display: block !important;
	width: 78px !important;
	height: 78px !important;
	max-width: 78px !important;
	max-height: 78px !important;
	object-fit: contain !important;
	object-position: center center !important;
	transform: none !important;
	clip-path: none !important;
	mask: none !important;
	border: 0 !important;
	box-shadow: none !important;
}


/* =========================================================
   6. HOVER / FOCUS
   ========================================================= */

html[data-ss-theme] .ct-cart-content .button:hover,
html[data-ss-theme] body.woocommerce-cart .checkout-button:hover,
html[data-ss-theme] body.woocommerce-checkout #place_order:hover,
html[data-ss-theme] #search-modal .ct-search-form button:hover {
	filter: brightness(1.05) !important;
	transform: translateY(-1px);
}

html[data-ss-theme] .ct-cart-content .button:focus-visible,
html[data-ss-theme] body.woocommerce-cart .checkout-button:focus-visible,
html[data-ss-theme] body.woocommerce-checkout #place_order:focus-visible,
html[data-ss-theme] #search-modal .ct-search-form button:focus-visible {
	outline: 2px solid var(--ss-commerce-accent) !important;
	outline-offset: 3px !important;
}


/* =========================================================
   7. MOBILE MINI-CART
   ========================================================= */

@media (max-width: 767px) {
	html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item > a:not(.remove),
	html[data-ss-theme] .ct-cart-content .mini_cart_item > a:not(.remove) {
		grid-template-columns: 66px minmax(0, 1fr) !important;
		column-gap: 11px !important;
	}

	html[data-ss-theme] .ct-cart-content img.ss-commerce-full-image,
	html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item img,
	html[data-ss-theme] .ct-cart-content .mini_cart_item img {
		width: 66px !important;
		height: 66px !important;
		min-width: 66px !important;
		max-width: 66px !important;
		min-height: 66px !important;
		max-height: 66px !important;
	}

	html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .variation,
	html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .quantity,
	html[data-ss-theme] .ct-cart-content .mini_cart_item .variation,
	html[data-ss-theme] .ct-cart-content .mini_cart_item .quantity {
		margin-left: 77px !important;
	}
}