/* Sweet Candy UX. Mobile first: base rules are the phone layout, media queries add the wider screens. */

/* --- Feature 2: free shipping progress bar ------------------------------------------------ */
.scux-ship-bar {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid #efd3de;
	border-radius: 10px;
	background: #fdf4f7;
}

.scux-ship-bar__text {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.35;
	color: #33272b;
}

.scux-ship-bar__track {
	height: 10px;
	border-radius: 999px;
	background: #f0dde5;
	overflow: hidden;
}

.scux-ship-bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #df5f91, #54aaba);
	transition: width .35s ease;
}

/* Unlocked: a light pink banner with a small delivery truck, a title and one line, in the shop's
   pink and its Bree Serif headings (free-shipping-bar.php). */
.scux-ship-bar--unlocked {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-color: #e7a3bd;
	background: #fdf1f5;
}

.scux-ship-bar__icon {
	flex: 0 0 auto;
	display: flex;
	color: #cc3366;
}

.scux-ship-bar__icon svg {
	width: 48px;
	height: auto;
}

.scux-ship-bar__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid #efc3d3;
}

.scux-ship-bar__title {
	font-family: "Bree Serif", serif;
	font-size: 19px;
	line-height: 1.2;
	color: #cc3366;
}

.scux-ship-bar__title em {
	color: #33272b;
}

.scux-ship-bar__sub {
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5c4650;
}

@media (min-width: 768px) {
	.scux-ship-bar--unlocked {
		gap: 20px;
		padding: 16px 24px;
	}

	.scux-ship-bar__icon svg {
		width: 64px;
	}

	.scux-ship-bar__body {
		padding-left: 20px;
	}

	.scux-ship-bar__title {
		font-size: 24px;
	}

	.scux-ship-bar__sub {
		font-size: 12px;
		letter-spacing: .12em;
	}
}

/* --- Feature 8: low stock indicator ------------------------------------------------------- */
/* WooCommerce colours the stock line with "div.product p.stock", so the same shape is used here
   to set the low stock colour. Same weight of selector, no !important. */
div.product p.stock.scux-low-stock,
div.product span.stock.scux-low-stock {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fdecf1;
	font-weight: 700;
	color: #b3435f;
}

/* Shown under the sizes when the customer taps a size that is sold out (front.js). */
.scux-oos-note {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #6b4a55;
}

.elementor-menu-cart__products .scux-ship-bar,
.woocommerce-mini-cart .scux-ship-bar {
	margin: 10px 0 0;
	padding: 10px 12px;
}

.elementor-menu-cart__products .scux-ship-bar__text,
.woocommerce-mini-cart .scux-ship-bar__text {
	font-size: 13px;
}

/* The unlocked banner, smaller in the narrow mini cart. */
.elementor-menu-cart__products .scux-ship-bar--unlocked,
.woocommerce-mini-cart .scux-ship-bar--unlocked {
	gap: 10px;
}

.elementor-menu-cart__products .scux-ship-bar__icon svg,
.woocommerce-mini-cart .scux-ship-bar__icon svg {
	width: 36px;
}

.elementor-menu-cart__products .scux-ship-bar__body,
.woocommerce-mini-cart .scux-ship-bar__body {
	padding-left: 10px;
}

.elementor-menu-cart__products .scux-ship-bar__title,
.woocommerce-mini-cart .scux-ship-bar__title {
	font-size: 16px;
}

.elementor-menu-cart__products .scux-ship-bar__sub,
.woocommerce-mini-cart .scux-ship-bar__sub {
	font-size: 10px;
	letter-spacing: .04em;
}

/* --- Feature 5: cart UX -------------------------------------------------------------------- */
.scux-cart .woocommerce-cart-form .qty.scux-busy {
	opacity: .5;
}

/* Phone layout of a cart line. WooCommerce's small screen style gives every cell its own labelled
   row, which left a tall block with an empty line around the remove cross. Here a line is the
   small photo on the left (printed by the plugin inside the name cell, see cart-ux.php) and the
   details next to it. The name cell is flattened with display:contents so the photo, the name and
   the size can sit in the row grid. The row padding comes from the Elementor cart widget. */
.scux-cart-thumb {
	display: none;
}

@media (max-width: 767px) {
	.scux-cart .woocommerce-cart-form tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"thumb name remove"
			"thumb . ."
			"thumb price price"
			"thumb qty subtotal";
		column-gap: 12px;
		row-gap: 4px;
		align-items: center;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td {
		padding: 0;
		border: 0;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td::before {
		content: none;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td.product-name {
		display: contents;
	}

	.scux-cart-thumb {
		grid-area: thumb;
		align-self: start;
		display: block;
	}

	.scux-cart-thumb img {
		width: 72px;
		height: 72px;
		object-fit: contain;
		border-radius: 8px;
		background: #fff;
		border: 1px solid #f3e3ea;
	}

	.scux-cart .woocommerce-cart-form td.product-name > a {
		grid-area: name;
		text-align: left;
		font-size: 14px;
		line-height: 1.3;
	}

	/* The chosen size and any other line WooCommerce adds under the name. */
	.scux-cart .woocommerce-cart-form td.product-name > :not(a):not(.scux-cart-thumb) {
		grid-column: 2 / -1;
		margin: 0;
		text-align: left;
		font-size: 13px;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td.product-remove {
		grid-area: remove;
		align-self: start;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td.product-price {
		grid-area: price;
		justify-self: start;
		font-size: 13px;
		opacity: .75;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td.product-quantity {
		grid-area: qty;
		justify-self: start;
	}

	.scux-cart .woocommerce-cart-form td.product-quantity .quantity {
		text-align: left;
	}

	.scux-cart .woocommerce-cart-form tr.cart_item td.product-subtotal {
		grid-area: subtotal;
		font-weight: 700;
	}
}

/* --- Feature 3: mobile sticky add to cart -------------------------------------------------- */
.scux-sticky {
	font-family: "Muli", sans-serif; /* the shop's body font */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998; /* under the cookie banner, which must stay reachable */
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #fff;
	border-top: 1px solid #efd3de;
	box-shadow: 0 -6px 18px rgba(51, 39, 43, .12);
	/* Hidden: slid down and invisible. Sliding alone is not enough, because the bar can be lifted
	   above the cookie banner and would then still show part of itself. */
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}

.scux-sticky.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform .25s ease;
}

.scux-sticky__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid #f3e3ea;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.scux-sticky__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scux-sticky__info {
	flex: 1 1 auto;
	min-width: 0;
}

.scux-sticky__title {
	display: block;
	font-size: 13px;
	line-height: 1.25;
	color: #33272b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Price and chosen options on one line, so the bar keeps its height. */
.scux-sticky__meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	white-space: nowrap;
}

.scux-sticky__price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: #33272b;
}

.scux-sticky__variant {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	color: #6b4a55;
}

.scux-sticky__variant:not(:empty)::before {
	content: "· ";
}

.scux-sticky__price del {
	font-weight: 400;
	opacity: .6;
	margin-right: 4px;
}

/* Scoped inside the bar: the theme styles bare <button> elements, so the component needs to own
   its own button rather than inherit the theme's pink secondary style. */
.scux-sticky .scux-sticky__button {
	/* Same look as the product's own add to cart button, measured on the page itself. */
	flex: 0 0 auto;
	padding: 14px 22px;
	border: 0;
	border-radius: 30px;
	background: #54aaba;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.scux-sticky .scux-sticky__button:hover,
.scux-sticky .scux-sticky__button:focus {
	background: #48929f;
	color: #fff;
}

/* On a computer the same bar is shown, with its content kept in a centred column. */
@media (min-width: 768px) {
	.scux-sticky {
		padding-inline: max(14px, calc((100vw - 1100px) / 2));
	}

	.scux-sticky__title {
		font-size: 15px;
	}
}

/* --- Feature 1: complete the look (compact, under Add to cart) ----------------------------- */
/* The block sits in the flex row of the add to cart form (next to TI's button), which the product
   template lays out with its own custom CSS. On a phone the buttons stack and the block comes
   right after Add to cart; on a computer the two buttons stay side by side and the block goes on
   its own line under them. Variable products: the template gives the favourites button order 2
   and the WooRewards line order 3. Simple products: no order is set, so the page order counts. */
.scux-ctl {
	/* That row is a column on phones and a wrapping row on computers: a full width that does not
	   grow or shrink gives the block its own full line in both. */
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	order: 2;
	margin: 6px 0 4px;
}

form.cart:not(.variations_form) > .scux-ctl {
	order: 0;
}

@media (min-width: 768px) {
	.scux-ctl {
		order: 3;
	}

	form.cart:not(.variations_form) > .scux-ctl {
		order: 1;
	}
}

.scux-ctl__title {
	margin: 0 0 10px;
	font-family: "Bree Serif", sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #df5f91;
}

/* One row that scrolls sideways, so the block adds little height on a phone (the cut off last card
   shows there is more). The scrollbar itself is hidden, scrolling still works. */
.scux-ctl__list {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.scux-ctl__list::-webkit-scrollbar {
	display: none;
}

.scux-ctl__item {
	flex: 0 0 132px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #33272b;
	text-decoration: none;
}

.scux-ctl__img {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #f3e3ea;
	overflow: hidden;
}

.scux-ctl__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scux-ctl__name {
	font-size: 13px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scux-ctl__price {
	font-size: 14px;
	font-weight: 700;
}

.scux-ctl__price del {
	font-weight: 400;
	opacity: .6;
}

/* On a computer four cards fit the width exactly, so with the usual 4 suggestions there is nothing
   to scroll (with more, the row still scrolls with a trackpad or shift + wheel). */
@media (min-width: 768px) {
	.scux-ctl__item {
		flex-basis: calc((100% - 36px) / 4);
	}
}

/* --- Feature 4: recently viewed (and the shared card grid) ------------------------------------ */
/* Values below are the ones measured on the shop's own "Produits similaires" section, so the two
   new sections read as part of the page instead of as an add-on. */
.scux-grid {
	margin: 32px 0 0;
}

.scux-grid__title {
	margin: 0 0 28px;
	font-family: "Bree Serif", sans-serif;
	font-size: 32px;
	font-weight: 500;
	color: #df5f91;
	text-align: center;
}

/* WooCommerce lays its loops out with floats and percentage widths, which leaves uneven columns
   here. A grid keeps the cards on one row, two per row on a phone, like the rest of the shop. */
.scux-grid ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scux-grid ul.products::before,
.scux-grid ul.products::after {
	content: none;
}

.scux-grid ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

/* Photos of different proportions made the rows uneven: every picture gets the same frame, the
   whole garment stays visible (contain, not crop). */
.scux-grid ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #fff;
}

/* The shop colours its loop buttons through the Elementor widget that renders the related
   products, which cannot reach these sections, so the same colours are set here. */
.scux-grid ul.products a.button {
	background-color: #98d4df;
	color: #fff;
}

.scux-grid ul.products a.button:hover {
	background-color: #7cc3d1;
	color: #fff;
}

@media (min-width: 768px) {
	.scux-grid {
		margin-top: 48px;
	}

	.scux-grid__title {
		margin-bottom: 50px;
	}

	.scux-grid ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px 24px;
	}
}

/* --- Feature 6: wishlist ------------------------------------------------------------------- */
.scux-wl-link {
	position: relative;
}

.scux-wl-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #cc3366;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.scux-wl-count.is-empty {
	display: none;
}

/* Saved and not saved must not look alike. */
.tinvwl_add_to_wishlist_button {
	color: #8a7680;
	transition: color .2s ease, transform .2s ease;
}

/* tinvwl-product-in-list is what TI sets on the product page; scux-saved is set by this plugin
   on cards, where TI cannot tell. (TI's "already-on-wishlist" class is only a label setting and
   sits on every button, so it is not used.) */
.tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.tinvwl_add_to_wishlist_button.scux-saved {
	color: #cc3366;
	font-weight: 700;
}

/* The same round heart in the corner of the photo on every product card: shop and category
   listings, related products and the two sections of this plugin (the home page grid has its own
   rule below). */
ul.products li.product {
	position: relative;
}

ul.products li.product .tinvwl-loop-button-wrapper {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	margin: 0;
}

/* WooCommerce puts the "Promo !" badge in that same corner. It moves to the other corner so both
   stay visible (same selector as WooCommerce's own rule, this file loads after it). */
.woocommerce ul.products li.product .onsale {
	right: auto;
	left: 0;
	margin: -.5em 0 0 -.5em;
}

ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
.scux-jet-card-wishlist .tinvwl_add_to_wishlist_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(51, 39, 43, .18);
	overflow: hidden;
}

ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text,
ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_already_on_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.scux-saved::before,
ul.products li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	color: #cc3366;
}

/* Saved hearts are filled, with TI's own filled glyph, same selector shape as TI's in-list rule. */
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.scux-saved::before {
	content: "\e908";
}

.tinvwl_add_to_wishlist_button.scux-busy {
	opacity: .5;
}

/* Small non-blocking notice after adding or removing a favourite. */
.scux-toast {
	position: fixed;
	left: 50%;
	top: 16px;
	z-index: 10001;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100% - 32px);
	padding: 12px 16px;
	border-radius: 999px;
	background: #33272b;
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	transform: translate(-50%, -140%);
	transition: transform .25s ease;
	pointer-events: none;
}

.scux-toast.is-visible {
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.scux-toast a {
	color: #ffc0cb;
	font-weight: 700;
	text-decoration: underline;
}

/* Comfortable to tap on a phone. */
@media (max-width: 767px) {
	.tinv-wraper .tinvwl_add_to_wishlist_button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* The wishlist page (TI's table). The add to cart button takes the shop's own add to cart colour
   instead of WooCommerce's default purple (same selector weight as WooCommerce's rule). */
.tinv-wishlist .product-action button.button {
	border-radius: 30px;
	background-color: #54aaba;
	color: #fff;
	font-weight: 700;
}

.tinv-wishlist .product-action button.button:hover,
.tinv-wishlist .product-action button.button:focus {
	background-color: #48929f;
	color: #fff;
}

/* On phones TI stacks every column of a product as its own full width line, about 530px per
   product. Each product becomes a compact card: photo on the left, name, price and stock next to
   it, the remove cross in the corner and one add to cart button across the bottom. The date
   column is dropped on phones. Same selectors as TI's own rules, this file loads after them. */
@media (max-width: 767px) {
	.tinv-wishlist table.tinvwl-table-manage-list thead {
		display: none;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody tr.wishlist_item {
		display: grid;
		grid-template-columns: 24px 80px 1fr 32px;
		grid-template-areas:
			"cb thumb name remove"
			"cb thumb price price"
			"cb thumb stock stock"
			"action action action action";
		column-gap: 10px;
		row-gap: 4px;
		align-items: center;
		padding: 14px 0;
		border-bottom: 1px solid #f0e4e9;
	}

	/* No striped cells either (the theme greys every other table row, which breaks a card up). */
	.tinv-wishlist table.tinvwl-table-manage-list tbody td {
		padding: 0;
		border: 0;
		background-color: transparent;
		text-align: left;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-cb {
		grid-area: cb;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail {
		grid-area: thumb;
		align-self: start;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-thumbnail img {
		width: 80px;
		height: 80px;
		object-fit: contain;
		border: 1px solid #f3e3ea;
		border-radius: 8px;
		background: #fff;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-name {
		grid-area: name;
		font-size: 14px;
		line-height: 1.3;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove {
		grid-area: remove;
		align-self: start;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-price {
		grid-area: price;
		font-weight: 700;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-date {
		display: none;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock {
		grid-area: stock;
		font-size: 13px;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-stock p.stock {
		margin: 0;
	}

	.tinv-wishlist table.tinvwl-table-manage-list tbody td.product-action {
		grid-area: action;
		margin-top: 8px;
	}
}

/* --- Feature 7: size guide modal ----------------------------------------------------------- */
/* The size guide button under the sizes (size-guide.php), in the pink of the shop's outlined
   buttons (#E6007E, the colour the old button had). */
.scux-size-guide-link {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 10px 0 6px;
	padding: 8px 18px;
	border: 2px solid #e6007e;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #e6007e;
}

.scux-size-guide-link:hover,
.scux-size-guide-link:focus {
	background: #e6007e;
	color: #fff;
}

/* This rule must stay above the one below: display:flex on the block would otherwise beat the
   browser's own [hidden] rule and the modal would sit open over the page from the first paint. */
.scux-modal[hidden] {
	display: none;
}

.scux-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.scux-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(35, 25, 30, .55);
	/* iPhones only send taps to elements that look clickable: without this, tapping the shaded
	   area never reaches the close handler on a real phone, while a desktop mouse click does. */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.scux-modal__box {
	position: relative;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 14px 24px;
	border-radius: 16px 16px 0 0;
	background: #fff;
}

.scux-modal__close {
	position: sticky;
	top: 0;
	float: right;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f4e4ea;
	color: #33272b;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.scux-modal__content table {
	width: 100%;
	font-size: 13px;
}

/* Wide charts scroll inside the modal instead of stretching the page. */
.scux-modal__content {
	overflow-x: auto;
}

@media (min-width: 768px) {
	.scux-modal {
		align-items: center;
	}

	.scux-modal__box {
		width: min(860px, 92vw);
		max-height: 86vh;
		border-radius: 16px;
		padding: 24px;
	}
}

/* TI heart inside the JetWooBuilder grid cards (home page, "Les nouveautés").
   JetWooBuilder keeps this slot invisible until the card is hovered, which never happens on a
   phone, so the Jet heart that used to sit here could not be seen on mobile either. When the slot
   holds the TI heart it is shown all the time, as a round button in the top corner of the photo.
   The selector has the same shape as JetWooBuilder's own rule plus :has(), no !important. */
.jet-woo-products .jet-woo-products__item .jet-woo-products-cqw-wrapper:has(.scux-jet-card-wishlist) {
	opacity: 1;
	visibility: visible;
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	width: auto;
}

.scux-jet-card-wishlist .tinv-wraper {
	margin: 0;
}

/* Icon only in the corner button. TI switches its labels with display rules marked !important,
   so the labels are visually hidden instead (screen readers still read them) and their display
   is left alone. */
.scux-jet-card-wishlist .tinvwl_add_to_wishlist-text,
.scux-jet-card-wishlist .tinvwl_already_on_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Saved heart in the shop's pink rather than TI's black. */
.scux-jet-card-wishlist .tinvwl_add_to_wishlist_button.scux-saved::before,
.scux-jet-card-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	color: #cc3366;
}

/* --- Feature 9: checkout UX ----------------------------------------------------------------- */
/* Display only (checkout-ux.php, front.js). Payment, shipping, gift card and rewards keep their own
   markup: the rules below only lay the rows out. */

/* The choice: two clear buttons, then the login form in place. The pink-framed notice style stays
   the coupon's, so this block is white with a teal accent and never reads as the same message. */
.scux-co-choice {
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid #cfe6ec;
	border-radius: 12px;
	background: #f4fafb;
}

.scux-checkout form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid #cfe6ec;
	border-radius: 12px;
	background: #fff;
}

.scux-checkout form.checkout_coupon::before,
.scux-checkout form.checkout_coupon::after {
	content: none;
}

/* Input takes the room, the button keeps its text: stacked full width on a phone. */
.scux-checkout form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.scux-checkout form.checkout_coupon .form-row-first {
	flex: 1 1 220px;
}

.scux-checkout form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.scux-checkout form.checkout_coupon .input-text {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
}

.scux-checkout form.checkout_coupon .button {
	min-height: 44px;
	white-space: normal;
	background: #cc3366;
	color: #fff;
}

@media (max-width: 767px) {
	.scux-checkout form.checkout_coupon .form-row-first,
	.scux-checkout form.checkout_coupon .form-row-last {
		flex: 1 1 100%;
	}

	.scux-checkout form.checkout_coupon .button {
		width: 100%;
	}
}

.scux-co-choice__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	color: #33272b;
}

.scux-co-choice__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Scoped: the theme styles bare buttons, so the component owns every state. */
.scux-co-choice .scux-co-choice__btn {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid #bcdbe3;
	border-radius: 10px;
	background: #fff;
	color: #33272b;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.scux-co-choice .scux-co-choice__btn:hover,
.scux-co-choice .scux-co-choice__btn:focus {
	border-color: #54aaba;
	background: #fff;
	color: #33272b;
}

.scux-co-choice .scux-co-choice__btn.is-active,
.scux-co-choice .scux-co-choice__btn.is-active:hover,
.scux-co-choice .scux-co-choice__btn.is-active:focus {
	border-color: #54aaba;
	background: #54aaba;
	color: #fff;
	font-weight: 600;
}

.scux-co-login {
	margin: 14px 0 0;
}

.scux-co-login[hidden],
.scux-co-known[hidden] {
	display: none;
}

.scux-co-login__field {
	margin: 0 0 10px;
}

.scux-co-login__field label {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
}

.scux-co-login__field input {
	width: 100%;
}

.scux-co-choice .scux-co-login__submit,
.scux-co-known .scux-co-known__row button {
	padding: 11px 18px;
	border: 0;
	border-radius: 10px;
	background: #cc3366;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.scux-co-choice .scux-co-login__submit:hover,
.scux-co-known .scux-co-known__row button:hover {
	background: #b02a58;
	color: #fff;
}

.scux-co-login__lost,
.scux-co-known__lost {
	margin-left: 12px;
	font-size: 14px;
}

/* Under the e-mail field when an account exists. */
.scux-co-known {
	margin: 4px 0 18px;
	padding: 12px 14px;
	border-left: 4px solid #54aaba;
	border-radius: 8px;
	background: #f4fafb;
}

.scux-co-known__text {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.4;
}

.scux-co-known__row {
	display: flex;
	gap: 8px;
}

.scux-co-known__row input {
	flex: 1;
	min-width: 0;
}

.scux-co-known__lost {
	display: inline-block;
	margin: 8px 0 0;
}

.scux-co-known__skip {
	margin: 6px 0 0;
	font-size: 13px;
}

/* Company: one link until it is wanted. */
.scux-co-company-hidden {
	display: none;
}

.scux-co-company-link {
	margin: 0 0 14px;
	font-size: 14px;
}

/* Small order total at the top, phones only: the summary is far down the page there. */
.scux-co-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fdf4f7;
	font-size: 15px;
}

/* Shipping: one vertical list. The row's label and list stack, each method is a line of its own. */
.scux-checkout .woocommerce-checkout-review-order-table,
.scux-checkout .woocommerce-checkout-review-order-table thead,
.scux-checkout .woocommerce-checkout-review-order-table tbody,
.scux-checkout .woocommerce-checkout-review-order-table tfoot {
	display: block;
}

.scux-checkout .woocommerce-checkout-review-order-table tr {
	display: flex;
	flex-wrap: wrap;
}

.scux-checkout .woocommerce-checkout-review-order-table th,
.scux-checkout .woocommerce-checkout-review-order-table td {
	display: block;
	flex: 1 1 50%;
	box-sizing: border-box;
}

.scux-checkout .shop_table tr.woocommerce-shipping-totals th,
.scux-checkout .shop_table tr.woocommerce-shipping-totals td,
.scux-checkout .shop_table tr.mrwp th,
.scux-checkout .shop_table tr.mrwp td {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	border-top: 0;
	text-align: left;
}

.scux-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scux-checkout #shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #efe6ea;
}

.scux-checkout #shipping_method li:last-child {
	border-bottom: 0;
}

.scux-checkout #shipping_method li input {
	flex: none;
	margin: 4px 0 0;
}

.scux-checkout #shipping_method li label {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.scux-checkout #shipping_method li label img {
	vertical-align: middle;
}

/* The chosen pick-up point: a block that is easy to read, with the button to change it. */
.scux-checkout tr.mrwp td {
	padding-top: 0;
}

.scux-checkout tr.mrwp .parcel_shop_info {
	display: block;
	font-style: normal;
	line-height: 1.45;
	color: #33272b;
}

.scux-checkout tr.mrwp #modaal_link {
	display: inline-block;
	padding: 10px 14px;
	border: 1.5px solid #cc3366;
	border-radius: 10px;
	color: #cc3366;
	font-weight: 600;
	text-decoration: none;
}

/* Payment: one row per method, radio, label and logo on the same line. */
.scux-checkout #payment ul.wc_payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
}

.scux-checkout #payment ul.wc_payment_methods li.wc_payment_method > input {
	flex: none;
	margin: 0;
}

.scux-checkout #payment ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-width: 0;
	margin: 0;
	padding: 10px 0;
}

.scux-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img {
	width: auto;
	max-height: 28px;
	margin: 0;
}

.scux-checkout #payment ul.wc_payment_methods li.wc_payment_method > .payment_box {
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.scux-co-total {
		display: none;
	}

	.scux-co-choice__buttons {
		flex-direction: row;
	}

	.scux-co-choice .scux-co-choice__btn {
		width: auto;
	}

	/* The summary table is wide enough there for the usual label and value columns. */
	.scux-checkout .woocommerce-checkout-review-order-table {
		display: table;
	}

	.scux-checkout .woocommerce-checkout-review-order-table thead {
		display: table-header-group;
	}

	.scux-checkout .woocommerce-checkout-review-order-table tbody {
		display: table-row-group;
	}

	.scux-checkout .woocommerce-checkout-review-order-table tfoot {
		display: table-footer-group;
	}

	.scux-checkout .woocommerce-checkout-review-order-table tr {
		display: table-row;
	}

	.scux-checkout .woocommerce-checkout-review-order-table th,
	.scux-checkout .woocommerce-checkout-review-order-table td {
		display: table-cell;
	}

	.scux-checkout .shop_table tr.woocommerce-shipping-totals th,
	.scux-checkout .shop_table tr.woocommerce-shipping-totals td,
	.scux-checkout .shop_table tr.mrwp th,
	.scux-checkout .shop_table tr.mrwp td {
		display: table-cell;
		width: auto;
	}
}

/* Mondial Relay picker (phone): the plugin styles it through #parcel_picker, so the same ID is needed here.
   Search fields on one row, buttons full width. The plugin hides the map under 600px; the list stays usable. */
@media (max-width: 599px) {
	#parcel_picker .MRW-Line {
		justify-content: flex-start;
		padding-left: 0;
	}

	#parcel_picker .MRW-Line .iArg0 {
		flex: 1 1 0;
		min-width: 0;
	}

	#parcel_picker .MRW-Line .Arg2 {
		flex: 0 0 80px;
		min-width: 0;
	}

	#parcel_picker .MRW-Line .MRW-flag,
	#parcel_picker .MRW-Line .MRW-fl-Select {
		display: none;
	}

	#parcel_picker .MRW-Line .MRW-BtGo,
	#parcel_picker .MRW-Line .MRW-BtGeoGo {
		flex: 1 1 100%;
	}
}