/* ==========================================================================
   UN — Panier : decomposed cart parts.
   Depends on un-tokens. The --un-cart-* variables below are the contract the
   widget's style controls write into; defaults reproduce the previously
   configured Elementor cart look. Outer spacing is handled by Elementor's
   native Avancé tab (no padding control here).
   ========================================================================== */

.un-cart {
	--un-cart-totals-gap:   36px;
	--un-cart-title-color:  var(--un-black);
	--un-cart-text:         var(--un-text);
	--un-cart-link:         var(--un-rose-link);
	--un-cart-accent:       var(--un-rose);
	--un-cart-divider:      var(--un-rose-divider);
	--un-cart-stepper:      var(--un-rose);
	--un-cart-thumb:        64px;
	--un-cart-remove-glyph: "\00d7";
	--un-cart-remove-size:  20px;
	--un-cart-remove-color: var(--un-text-3);

	/* Shared column template so the header row and item rows align exactly. */
	--un-cart-cols: var(--un-cart-thumb) minmax(0, 1fr) 92px 124px 100px;
	--un-cart-gutter: 28px;

	box-sizing: border-box;
	color: var(--un-cart-text);
	font-family: var(--un-font-body);
}

.un-cart *,
.un-cart *::before,
.un-cart *::after {
	box-sizing: border-box;
}

/* Text links only — never the .un-btn buttons (which are also <a>). */
.un-cart a:not(.un-btn) {
	color: var(--un-cart-link);
	text-decoration: none;
}
.un-cart a:not(.un-btn):hover {
	color: var(--un-cart-accent);
}

/* ----------------------------------------------------------------------------
   Buttons — bulletproof variants.
   Cart buttons are <a>/<button> sitting inside containers whose text-colour and
   hover-colour settings (Elementor) + The7 link styles bleed in and break the
   design-system hovers. Re-assert each variant (base + hover) with !important so
   they always render correctly. The widget's own colour controls also emit
   !important at higher specificity ({{WRAPPER}} …), so those still win when set.
   ---------------------------------------------------------------------------- */
.un-cart .un-cart__checkout {
	background-color: var(--un-rose) !important;
	color: var(--un-white) !important;
	border-color: var(--un-rose) !important;
}
.un-cart .un-cart__checkout:hover {
	background-color: var(--un-white) !important;
	color: var(--un-rose) !important;
	border-color: var(--un-rose) !important;
}
.un-cart .un-cart__coupon-apply {
	background-color: var(--un-text) !important;
	color: var(--un-white) !important;
	border-color: transparent !important;
}
.un-cart .un-cart__coupon-apply:hover {
	background-color: var(--un-white) !important;
	color: var(--un-text) !important;
	border-color: var(--un-text) !important;
}
.un-cart .un-cart__empty-btn {
	background-color: var(--un-white) !important;
	color: var(--un-black) !important;
	border-color: var(--un-black) !important;
}
.un-cart .un-cart__empty-btn:hover {
	background-color: var(--un-black) !important;
	color: var(--un-white) !important;
	border-color: var(--un-black) !important;
}

.un-cart--hidden {
	display: none !important;
}

/* Collapse the whole widget (incl. any container border) when its part is
   hidden — avoids an empty bordered box on an empty cart. */
.elementor-widget-un-cart .elementor-widget-container:has( > .un-cart--hidden ) {
	display: none;
}

.un-cart--busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Block title */
.un-cart__title {
	margin: 0 0 16px;
	font-family: var(--un-font-display);
	font-size: var(--un-h4);
	line-height: var(--un-lh-tight);
	color: var(--un-cart-title-color);
}

/* --------------------------------------------------------------------------
   Content — column header + item list (shared grid template = aligned)
   -------------------------------------------------------------------------- */

.un-cart__cols {
	display: grid;
	grid-template-columns: var(--un-cart-cols);
	gap: 16px;
	align-items: center;
	padding: 0 var(--un-cart-gutter) 12px 0;
	border-bottom: 1px solid var(--un-cart-divider);
	font-size: var(--un-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--un-text-2);
}
.un-cart--remove-left .un-cart__cols {
	padding: 0 0 12px var(--un-cart-gutter);
}
.un-cart__col--product  { grid-column: 1 / 3; text-align: left; }
.un-cart__col--price    { grid-column: 3; text-align: right; }
.un-cart__col--qty      { grid-column: 4; text-align: center; }
.un-cart__col--subtotal { grid-column: 5; text-align: right; }

.un-cart__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.un-cart__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--un-cart-cols);
	align-items: center;
	gap: 16px;
	padding: 16px var(--un-cart-gutter) 16px 0;
	border-bottom: 1px solid var(--un-cart-divider);
}
.un-cart--remove-left .un-cart__item {
	padding: 16px 0 16px var(--un-cart-gutter);
}

.un-cart__c-thumb img {
	display: block;
	width: var(--un-cart-thumb);
	height: var(--un-cart-thumb);
	object-fit: cover;
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
}

.un-cart__item-name {
	color: var(--un-cart-text);
	font-size: var(--un-fs-m);
	line-height: 1.4;
}
.un-cart__item-name a { color: var(--un-cart-text); }
.un-cart__item-name a:hover { color: var(--un-cart-accent); }

.un-cart__item-meta {
	margin-top: 4px;
	font-size: var(--un-fs-xs);
	color: var(--un-text-2);
}

.un-cart__c-price {
	text-align: right;
	color: var(--un-cart-text);
	white-space: nowrap;
}
.un-cart__c-qty {
	display: flex;
	justify-content: center;
}
.un-cart__c-subtotal {
	text-align: right;
	color: var(--un-cart-text);
	white-space: nowrap;
}

/* Remove button — glyph via ::before so size/colour/icon survive AJAX refresh */
.un-cart__remove {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--un-cart-gutter);
	height: var(--un-cart-gutter);
	color: var(--un-cart-remove-color);
	line-height: 1;
	text-decoration: none;
	transition: color 0.12s ease;
}
.un-cart--remove-left .un-cart__remove {
	right: auto;
	left: 0;
}
.un-cart__remove::before {
	content: var(--un-cart-remove-glyph);
	font-size: var(--un-cart-remove-size);
}
.un-cart__remove:hover {
	color: var(--un-cart-accent);
}

/* Quantity stepper — single brand outline, equal-height cells, rose hover fill */
.un-cart__qty {
	display: inline-flex;
	align-items: stretch;
	height: 38px;
	border: 1px solid var(--un-cart-stepper);
	background: var(--un-white);
}
.un-cart__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--un-cart-stepper);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.un-cart__qty-btn:hover {
	background: var(--un-cart-stepper);
	color: var(--un-white);
}
.un-cart__qty-input {
	width: 44px;
}
/* Same The7 form-input override fight as the coupon field — widget-scoped
   selector + !important kills the leaked margin-bottom that pushed the value
   off-centre, and resets the field to a flat centered number. */
.elementor-widget-un-cart .un-cart__qty input.un-cart__qty-input[type="number"] {
	height: auto !important;
	align-self: stretch;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--un-cart-stepper) !important;
	border-right: 1px solid var(--un-cart-stepper) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--un-cart-text) !important;
	text-align: center !important;
	font-size: var(--un-fs-s) !important;
	line-height: normal !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.un-cart__qty-input::-webkit-outer-spin-button,
.un-cart__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.un-cart__qty-input:focus {
	outline: none;
}
.un-cart__qty--single {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	color: var(--un-cart-text);
}

/* --------------------------------------------------------------------------
   Totals
   -------------------------------------------------------------------------- */

.un-cart__totals .un-cart__inner {
	display: block;
}

.un-cart__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: calc(var(--un-cart-totals-gap) / 2) 0;
	border-bottom: 1px solid var(--un-cart-divider);
	font-size: var(--un-fs-m);
	color: var(--un-cart-text);
}
.un-cart__row:first-child {
	padding-top: 0;
}

.un-cart__row-value {
	text-align: right;
	white-space: nowrap;
}

.un-cart__discount .un-cart__row-value,
.un-cart__fee .un-cart__row-value {
	color: var(--un-cart-accent);
}

.un-cart__total {
	border-bottom: 0;
	font-size: var(--un-h5);
	color: var(--un-cart-title-color);
}
.un-cart__total .un-cart__row-label,
.un-cart__total .un-cart__row-value {
	font-family: var(--un-font-display);
}

.un-cart--hide-subtotal .un-cart__subtotal { display: none; }
.un-cart--hide-shipping .un-cart__shipping { display: none; }
.un-cart--hide-perk .un-cart__perk,
.un-cart--hide-perk .un-cart__join,
.un-cart--hide-perk .un-cart__perk-reactivate { display: none; }

/* Ambassador perk discount line when NOT applied (opted out / no account yet):
   struck through and muted, so the customer transparently sees what they forgo. */
.un-cart__perk--off .un-cart__row-label,
.un-cart__perk--off .un-cart__row-value {
	text-decoration: line-through;
	color: var(--un-text-muted);
}

/* Opt-in checkbox row + reactivation: discreet, smaller. */
.un-cart__join,
.un-cart__perk-reactivate {
	font-size: var(--un-fs-s);
	color: var(--un-text-muted);
}
label.un-cart__join { cursor: pointer; }
.un-cart__join .un-cart__row-label,
.un-cart__perk-reactivate .un-cart__row-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.un-cart__join-text { flex: 1 1 auto; }
.un-cart__join-toggle {
	flex: 0 0 auto;
	accent-color: var(--un-rose);
	cursor: pointer;
	margin-top: 2px;
}
.un-cart__join a,
.un-cart__perk-reactivate a {
	color: var(--un-cart-accent);
	text-decoration: underline;
}

.un-cart__checkout {
	width: 100%;
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Coupon — underline input + solid apply button (heights aligned)
   -------------------------------------------------------------------------- */

.un-cart__coupon-label {
	display: block;
	margin-bottom: 8px;
	color: var(--un-cart-title-color);
	font-size: var(--un-fs-m);
}

.un-cart__coupon-form {
	display: flex;
	align-items: center;
	gap: 12px;
}

.un-cart__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
}
/* The7 themes .woocommerce form inputs with higher specificity + !important
   (margin-bottom:10px, font-size, border…). This widget-scoped selector
   (0,4,2) + !important is required to reset them to an underline field whose
   bottom line aligns with the size-S apply button. */
.elementor-widget-un-cart .un-cart__coupon input.un-cart__coupon-input[type="text"] {
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 2px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--un-divider) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--un-cart-text) !important;
	font-size: var(--un-fs-s) !important;
	line-height: normal !important;
}
.un-cart__coupon-input::placeholder {
	color: var(--un-text-3);
}
.elementor-widget-un-cart .un-cart__coupon input.un-cart__coupon-input[type="text"]:focus {
	outline: none;
	border-bottom-color: var(--un-cart-accent) !important;
}

/* Apply button — size S (38px), bottom line matches the input. */
.un-cart__coupon-apply.un-cart__coupon-apply {
	flex: 0 0 auto;
	height: 38px;
	min-height: 38px;
}

.un-cart__coupon-msg {
	margin-top: 8px;
	font-size: var(--un-fs-xs);
	color: var(--un-text-2);
	min-height: 1em;
}
.un-cart__coupon-msg--error {
	color: var(--un-error);
}

.un-cart__coupon-chips {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.un-cart__coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--un-rose-bg);
	color: var(--un-cart-accent);
	font-size: var(--un-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.un-cart__coupon-remove {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: color 0.12s ease;
}
.un-cart__coupon-remove:hover {
	color: var(--un-rose-deep);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.un-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.un-cart__empty-icon {
	color: var(--un-cart-accent);
	line-height: 1;
}
.un-cart__empty-icon svg {
	width: 48px;
	height: 48px;
	fill: currentColor;
}

.un-cart__empty-title { margin: 0; color: var(--un-cart-title-color); }

.un-cart__empty-text {
	margin: 0;
	color: var(--un-text-2);
	font-size: var(--un-fs-m);
}

.un-cart__empty-btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Responsive — stack item rows on narrow viewports
   -------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.un-cart__cols {
		display: none;
	}
	.un-cart__item {
		grid-template-columns: var(--un-cart-thumb) minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name name"
			"thumb price subtotal"
			"thumb qty   qty";
		row-gap: 8px;
		padding-right: var(--un-cart-gutter);
	}
	.un-cart--remove-left .un-cart__item {
		padding-right: 0;
		padding-left: var(--un-cart-gutter);
	}
	.un-cart__c-thumb { grid-area: thumb; align-self: start; }
	.un-cart__c-name { grid-area: name; }
	.un-cart__c-price { grid-area: price; text-align: left; }
	.un-cart__c-qty { grid-area: qty; justify-content: flex-start; }
	.un-cart__c-subtotal { grid-area: subtotal; }
}