/* =========================================================
   SS DECO - FASE COMPRA 4.0
   Catalogo/Header + Carrito
   ========================================================= */

/* ---------------------------------------------------------
   TOKENS LOCALES DE RESPALDO
   --------------------------------------------------------- */
html[data-ss-theme] {
	--ss-buy-accent: var(--ss-accent, #744052);
	--ss-buy-bg: var(--ss-bg, #F3EEE6);
	--ss-buy-surface: var(--ss-surface, #ffffff);
	--ss-buy-text: var(--ss-text, #141416);
	--ss-buy-soft: var(--ss-text-soft, #68646a);
	--ss-buy-line: var(--ss-line, rgba(20, 20, 22, 0.16));
}

html[data-ss-theme="dark"] {
	--ss-buy-bg: var(--ss-bg, #141416);
	--ss-buy-surface: var(--ss-surface, #1D1D20);
	--ss-buy-text: var(--ss-text, #F3EEE6);
	--ss-buy-soft: var(--ss-text-soft, #C8C1B8);
	--ss-buy-line: var(--ss-line, rgba(243, 238, 230, 0.16));
}


/* =========================================================
   1. PRE-CARRITO: IMAGEN COMPLETA
   ========================================================= */

/*
 * El PHP de este módulo entrega directamente el archivo original
 * (sin srcset) para evitar que WooCommerce/navegador elija un crop.
 */
html[data-ss-theme] .ct-cart-content .mini_cart_item > a:not(.remove),
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item > a:not(.remove) {
	display: grid !important;
	grid-template-columns: 76px minmax(0, 1fr) !important;
	column-gap: 13px !important;
	align-items: center !important;
	width: 100% !important;
	color: var(--ss-buy-text) !important;
	text-decoration: none !important;
}

html[data-ss-theme] .ct-cart-content img.ss-precart-original-image {
	display: block !important;
	grid-column: 1 !important;
	justify-self: center !important;
	align-self: center !important;

	width: 76px !important;
	height: 76px !important;
	min-width: 76px !important;
	min-height: 76px !important;
	max-width: 76px !important;
	max-height: 76px !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain !important;
	object-position: 50% 50% !important;

	float: none !important;
	transform: none !important;
	translate: none !important;
	scale: none !important;
	clip-path: none !important;
	mask: none !important;

	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

html[data-ss-theme="light"] .ct-cart-content img.ss-precart-original-image {
	background: #ffffff !important;
}

html[data-ss-theme="dark"] .ct-cart-content img.ss-precart-original-image {
	background: #1D1D20 !important;
}

/* Variaciones/cantidad alineadas con el texto del producto */
html[data-ss-theme] .ct-cart-content .mini_cart_item .variation,
html[data-ss-theme] .ct-cart-content .mini_cart_item .quantity,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .variation,
html[data-ss-theme] .ct-cart-content .woocommerce-mini-cart-item .quantity {
	margin-left: 89px !important;
	color: var(--ss-buy-soft) !important;
}


/* =========================================================
   2. ACCOUNT DROPDOWN
   Este es el panel que sale al tocar el icono de usuario:
   nombre/email + Escritorio + Editar perfil + Salir.
   ========================================================= */

html[data-ss-theme="dark"] #header [data-id="account"] .ct-account-dropdown,
html[data-ss-theme="dark"] #header .ct-header-account .ct-account-dropdown,
html[data-ss-theme="dark"] #header [data-id="account"] [class*="dropdown"],
html[data-ss-theme="dark"] #header .ct-header-account [class*="dropdown"] {
	--theme-text-color: #141416 !important;
	--theme-link-initial-color: #141416 !important;
	--theme-link-hover-color: #744052 !important;
	--theme-border-color: rgba(20, 20, 22, 0.14) !important;

	background: #ffffff !important;
	color: #141416 !important;
	border-color: rgba(20, 20, 22, 0.14) !important;
}

html[data-ss-theme="dark"] #header [data-id="account"] .ct-account-dropdown *,
html[data-ss-theme="dark"] #header .ct-header-account .ct-account-dropdown *,
html[data-ss-theme="dark"] #header [data-id="account"] [class*="dropdown"] *,
html[data-ss-theme="dark"] #header .ct-header-account [class*="dropdown"] * {
	color: #141416 !important;
	opacity: 1 !important;
}

html[data-ss-theme="dark"] #header [data-id="account"] .ct-account-dropdown a:hover,
html[data-ss-theme="dark"] #header .ct-header-account .ct-account-dropdown a:hover {
	color: #744052 !important;
	background: rgba(116, 64, 82, 0.08) !important;
}


/* =========================================================
   3. BADGE CARRITO
   ========================================================= */
html[data-ss-theme] #header .ct-dynamic-count-cart,
html[data-ss-theme] #header [data-id="cart"] .ct-dynamic-count-cart {
	background: var(--ss-buy-accent) !important;
	background-color: var(--ss-buy-accent) !important;
	border-color: var(--ss-buy-accent) !important;
	color: #ffffff !important;
}


/* =========================================================
   4. CARRITO - BASE LIGHT/DARK
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart,
html[data-ss-theme] body.woocommerce-cart .site-main,
html[data-ss-theme] body.woocommerce-cart .ct-container {
	color: var(--ss-buy-text);
}

html[data-ss-theme] body.woocommerce-cart .woocommerce-cart-form,
html[data-ss-theme] body.woocommerce-cart .cart_totals {
	color: var(--ss-buy-text) !important;
}

/* Cabecera: Producto / Cantidad / Subtotal */
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table thead,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table thead tr,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table thead th {
	background: transparent !important;
	color: var(--ss-buy-text) !important;
	border-color: var(--ss-buy-line) !important;
	opacity: 1 !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table thead th {
	font-weight: 700 !important;
}

/* Filas y texto */
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table tbody td,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table tbody td a,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .product-name,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .product-subtotal,
html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .amount {
	color: var(--ss-buy-text) !important;
	border-color: var(--ss-buy-line) !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form table.shop_table tbody tr {
	border-color: var(--ss-buy-line) !important;
}


/* =========================================================
   5. CARRITO - CANTIDAD
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart .quantity,
html[data-ss-theme] body.woocommerce-cart .quantity input,
html[data-ss-theme] body.woocommerce-cart .quantity button {
	background: var(--ss-buy-surface) !important;
	color: var(--ss-buy-text) !important;
	border-color: var(--ss-buy-line) !important;
}

html[data-ss-theme] body.woocommerce-cart .quantity button:hover {
	color: var(--ss-buy-accent) !important;
}


/* =========================================================
   6. CARRITO - CUPON + ACTUALIZAR
   Verde antiguo -> cereza/ciruela
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .coupon input.input-text {
	background: var(--ss-buy-surface) !important;
	color: var(--ss-buy-text) !important;
	border-color: var(--ss-buy-line) !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .coupon input.input-text::placeholder {
	color: var(--ss-buy-soft) !important;
	opacity: 0.9 !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .coupon button.button,

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form button[name="apply_coupon"],

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form button[name="update_cart"] {
	background: var(--ss-buy-accent) !important;
	background-color: var(--ss-buy-accent) !important;
	border: 1px solid var(--ss-buy-accent) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form button[name="update_cart"]:disabled {
	background: var(--ss-buy-accent) !important;
	border-color: var(--ss-buy-accent) !important;
	color: #ffffff !important;
	opacity: 0.45 !important;
}

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .coupon button.button:hover,

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form button[name="apply_coupon"]:hover,

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form button[name="update_cart"]:hover:not(:disabled) {
	filter: brightness(1.06) !important;
}


/* =========================================================
   7. CARRITO - TOTALES
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart .cart_totals {
	background: transparent !important;
	border-color: var(--ss-buy-line) !important;
}

html[data-ss-theme] body.woocommerce-cart .cart_totals h2,
html[data-ss-theme] body.woocommerce-cart .cart_totals table,
html[data-ss-theme] body.woocommerce-cart .cart_totals th,
html[data-ss-theme] body.woocommerce-cart .cart_totals td,
html[data-ss-theme] body.woocommerce-cart .cart_totals .amount {
	color: var(--ss-buy-text) !important;
	border-color: var(--ss-buy-line) !important;
}

html[data-ss-theme] body.woocommerce-cart
.wc-proceed-to-checkout .checkout-button {
	background: var(--ss-buy-accent) !important;
	background-color: var(--ss-buy-accent) !important;
	border-color: var(--ss-buy-accent) !important;
	color: #ffffff !important;
}


/* =========================================================
   8. CARRITO - IMAGEN COMPLETA
   Mismo criterio que mini-cart.
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart
.woocommerce-cart-form .product-thumbnail img.ss-precart-original-image {
	display: block !important;
	width: 82px !important;
	height: 82px !important;
	max-width: 82px !important;
	max-height: 82px !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 auto !important;
}


/* =========================================================
   9. RESPONSIVE CARRITO
   No reconstruye el layout existente; solo mejora legibilidad.
   ========================================================= */

@media (max-width: 767px) {
	html[data-ss-theme] body.woocommerce-cart
	.woocommerce-cart-form table.shop_table td,
	html[data-ss-theme] body.woocommerce-cart
	.woocommerce-cart-form table.shop_table td::before {
		color: var(--ss-buy-text) !important;
	}

	html[data-ss-theme] body.woocommerce-cart
	.woocommerce-cart-form .coupon {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		gap: 8px !important;
		width: 100% !important;
	}

	html[data-ss-theme] body.woocommerce-cart
	.woocommerce-cart-form .coupon input.input-text {
		width: 100% !important;
		min-width: 0 !important;
	}

	html[data-ss-theme] body.woocommerce-cart
	.woocommerce-cart-form .coupon button.button {
		white-space: nowrap !important;
	}
}


/* =========================================================
   10. FOCUS ACCESIBLE
   ========================================================= */

html[data-ss-theme] body.woocommerce-cart button:focus-visible,
html[data-ss-theme] body.woocommerce-cart a.button:focus-visible {
	outline: 2px solid var(--ss-buy-accent) !important;
	outline-offset: 3px !important;
}