/*
 * LC Médical — Comptoir : product card (the drawer label), card grid, price display, quantity stepper, breadcrumb.
 * Shared by the catalogue, the product page (related, complements), the home drawers and the cart cross-sells.
 *
 * A card is a drawer label: a flat paper face with the photo on top, then the lettering. No bright-blue frame here (it is for
 * the drawer labels and pulls only). Depth, not decoration: the card comes forward (offset + blur shadow) when it is
 * the one you are pointing at.
 * Tokens come from tokens.css; logical properties only.
 */

/* Resting shadow of paper surfaces: offset and blur only, no inset highlight. */
:root {
	--lc-rest: 0 1px 2px rgb(20 36 107 / 0.12), 0 2px 8px -3px rgb(20 36 107 / 0.12);

	/* Large white cards (gallery, buy box, filter column, category band): the home's 16px radius, hairline and soft shadow. */
	--lc-card-r: 16px;
	--lc-card-shadow: 0 1px 2px rgb(20 36 107 / 0.06), 0 6px 18px -8px rgb(20 36 107 / 0.16);
}

/* ---------- Breadcrumb: Accueil › Rayon › Produit ---------- */
.lc-crumbs {
	padding-block: var(--lc-s-4) var(--lc-s-3);
	font-size: var(--lc-fs-sm);
	line-height: 1.4;
	color: var(--lc-ink-muted);
}

.lc-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.lc-crumbs__list > span {
	display: inline;
}

.lc-crumbs a {
	display: inline-block;
	padding-block: 0.65em;
	color: var(--lc-ink-muted);
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.lc-crumbs a:hover {
	color: var(--lc-ink);
	text-decoration-color: currentColor;
}

.lc-crumbs .breadcrumb_last,
.lc-crumbs [aria-current='page'] {
	color: var(--lc-ink);
	font-weight: 700;
}

/* Mobile: the full trail gives way to one tap back to the parent. */
.lc-crumbs a.lc-crumbs__back {
	display: none;
}

@media (max-width: 699.98px) {
	.lc-crumbs:has(.lc-crumbs__back) .lc-crumbs__list {
		display: none;
	}

	.lc-crumbs a.lc-crumbs__back {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		min-block-size: var(--lc-tap);
		padding-block: 0;
		color: var(--lc-ink);
		font-weight: 700;
		text-decoration: none;
	}

	.lc-crumbs a.lc-crumbs__back .lc-icon {
		inline-size: 1.1em;
		block-size: 1.1em;
	}

	.lc-crumbs {
		padding-block: var(--lc-s-1) 0;
	}
}

/* Keyboard focus never sits under the fixed tab bar (WCAG 2.4.11). */
@media (max-width: 999.98px) {
	html {
		scroll-padding-block-end: calc(var(--lc-tabbar-h) + var(--lc-safe-bottom) + var(--lc-s-4));
	}
}

/* Skip link inside a page region (visible on focus only). */
.lc-skip {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lc-skip:focus-visible {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0 0 var(--lc-s-3);
	padding: 0.7em 1em;
	overflow: visible;
	clip-path: none;
	display: inline-block;
	background: var(--lc-paper);
	color: var(--lc-navy-800);
	font-weight: 700;
	border-radius: var(--lc-r-field);
	box-shadow: var(--lc-rest);
}

/* ---------- Stars (only ever rendered next to real review text) ---------- */
.lc-stars {
	--lc-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.9-4.8 4.5 1.2 6.5L12 17.4 6.2 20.5l1.2-6.5L2.6 9.5l6.5-.9z'/%3E%3C/svg%3E");
	display: inline-block;
	inline-size: 5.5em;
	block-size: 1.05em;
	vertical-align: -0.15em;
	background: linear-gradient(to right, var(--lc-accent) var(--lc-pct, 0%), var(--lc-line) 0);
	-webkit-mask: var(--lc-star) left center / 1.1em 1.05em repeat-x;
	mask: var(--lc-star) left center / 1.1em 1.05em repeat-x;
}

html[dir='rtl'] .lc-stars {
	transform: scaleX(-1);
}

/* ---------- Grid ---------- */
body ul.products.lc-cards,
.lc-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lc-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	body ul.products.lc-cards,
	.lc-cards {
		gap: var(--lc-gap);
	}
}

@media (min-width: 760px) {
	body ul.products.lc-cards,
	.lc-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	body ul.products.lc-cards.lc-cards--4,
	.lc-cards.lc-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 759.98px) {
	body ul.products.lc-cards.lc-cards--4,
	.lc-cards.lc-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- The card ---------- */
body ul.products.lc-cards > li.lc-card,
.lc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	float: none;
	inline-size: auto;
	background: var(--lc-paper);
	border-radius: var(--lc-card-r);
	box-shadow: var(--lc-rest);
	list-style: none;
	isolation: isolate;
	transition: transform var(--lc-dur-drawer) var(--lc-ease-out), box-shadow var(--lc-dur-drawer) var(--lc-ease-out);
}

.lc-card:has(a:focus-visible, button:focus-visible) {
	transform: translate3d(0, -4px, 0);
	box-shadow: var(--lc-rest), var(--lc-shadow-pulled);
	z-index: 2;
}

@media (hover: hover) {
	.lc-card:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: var(--lc-rest), var(--lc-shadow-pulled);
		z-index: 2;
	}
}

/* Face: the photo on paper. */
.lc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--lc-paper);
	border-start-start-radius: var(--lc-card-r);
	border-start-end-radius: var(--lc-card-r);
}

.lc-card__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

/* Every stand-in photo sits the same way, contained on one paper ground, so a row reads as one curated counter. */
.lc-card__img.lc-standin {
	object-fit: contain;
	padding: 8%;
	background: var(--lc-paper-2);
}

/* No photo at all: the flat placeholder field fills the whole frame, with the words "Photo à venir" on top. */
.lc-card__img.woocommerce-placeholder {
	object-fit: cover;
	padding: 0;
}

.lc-soon {
	display: inline-block;
	padding: 0.34em 0.7em 0.28em;
	border-radius: var(--lc-r-label);
	background: var(--lc-paper);
	color: var(--lc-ink-2);
	font-family: var(--lc-font-label);
	font-size: var(--lc-fs-xs);
	font-weight: 700;
	letter-spacing: var(--lc-track-label);
	line-height: 1.1;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgb(20 36 107 / 0.18);
}

.lc-card__soon {
	position: absolute;
	inset-block-end: var(--lc-s-2);
	inset-inline-start: var(--lc-s-2);
	z-index: 1;
}

.lc-card__badge {
	position: absolute;
	inset-block-start: var(--lc-s-2);
	inset-inline-start: var(--lc-s-2);
	z-index: 1;
}

.lc-card__badge .lc-label__paper {
	padding: 0.28em 0.6em 0.24em;
}

.lc-card__badge--out .lc-label__paper {
	color: var(--lc-ink-muted);
}

/* Sale: a solid red tag with a white figure, the way the big marketplaces flag a real reduction (no holder, no paper). */
.lc-card__badge--sale.lc-label {
	padding: 0;
	background: var(--lc-promo);
	border-radius: var(--lc-r-label);
	box-shadow: 0 1px 2px rgb(120 10 25 / 0.25);
}

.lc-card__badge--sale .lc-label__paper {
	padding: 0.32em 0.6em 0.28em;
	background: none;
	color: #ffffff;
	font-size: var(--lc-fs-sm);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Body ---------- */
.lc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--lc-s-1);
	padding: var(--lc-s-3) var(--lc-s-3) var(--lc-s-3);
	min-inline-size: 0;
}

@media (min-width: 480px) {
	.lc-card__body {
		padding: var(--lc-s-4);
		gap: 6px;
	}
}

.lc-card__title {
	margin: 0;
	font-family: var(--lc-font-label);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-block-size: 2.4em;
}

@media (min-width: 480px) {
	.lc-card__title {
		font-size: 1.1875rem;
	}
}

/* Narrow cards: three lines, so a differentiator such as "3 fonctions" is never clipped. */
@media (max-width: 479.98px) {
	.lc-card__title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
		min-block-size: 3.6em;
	}
}

.lc-card__title a {
	color: var(--lc-ink);
	text-decoration: none;
}

.lc-card__title a:hover {
	color: var(--lc-link-hover);
}

/* One link per card: the title's link covers the whole face. The action sits above it. */
.lc-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--lc-card-r);
}

.lc-card__title a:focus-visible {
	outline-offset: 2px;
}

.lc-card__cat {
	margin: 0;
	font-size: var(--lc-fs-xs);
	line-height: 1.35;
	color: var(--lc-ink-muted);
}

.lc-card__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-size: var(--lc-fs-xs);
	color: var(--lc-ink-muted);
}

/* ---------- Price: lettered like the label, numerals aligned ---------- */
.lc-card__price {
	margin-block-start: var(--lc-s-2);
	font-family: var(--lc-font-label);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--lc-ink);
}

@media (min-width: 480px) {
	.lc-card__price {
		font-size: 1.625rem;
	}
}

.lc-card__price .price,
.lc-card__price .amount,
.lc-pdp__price .amount,
.lc-buybar__amount .amount {
	font-variant-numeric: tabular-nums lining-nums;
}

.woocommerce-Price-currencySymbol {
	margin-inline-start: 0.2em;
	font-size: 0.58em;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.lc-card__price del,
.lc-pdp__price del,
.lc-buybar__amount del {
	display: block;
	margin-block-end: 0.15em;
	font-size: 0.62em;
	font-weight: 500;
	line-height: 1.1;
	color: var(--lc-ink-muted);
	text-decoration-thickness: 1px;
	opacity: 1;
}

.lc-card__price ins,
.lc-pdp__price ins,
.lc-buybar__amount ins {
	background: none;
	color: var(--lc-promo-ink);
	text-decoration: none;
}

/* "Économisez 65 DH · jusqu'au 31 oct." under a real sale price (lc_theme_sale_saving_html), in good-news green. */
.lc-saving {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5em;
	margin: 0;
	font-size: var(--lc-fs-sm);
	line-height: 1.3;
	color: var(--lc-ok-deep); /* the saving is good news: green; the sale price above stays red */
}

.lc-saving strong {
	font-family: var(--lc-font-label);
	font-weight: 700;
	white-space: nowrap;
}

.lc-saving strong .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
}

.lc-saving__until {
	color: var(--lc-ink-muted);
}

.lc-saving__until::before {
	content: '·';
	margin-inline-end: 0.5em;
}

.lc-card__price .sale-price {
	display: block;
}

/* Pro sessions: lc-b2b appends its own "HT" wording; keep it quiet. */
.lc-card__price small,
.lc-card__price .woocommerce-price-suffix {
	font-family: var(--lc-font-text);
	font-size: 0.5em;
	font-weight: 500;
	color: var(--lc-ink-muted);
}

/* ---------- Lines under the price ---------- */
.lc-card__alt {
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	font-size: var(--lc-fs-sm);
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-ok-deep);
}

.lc-card__alt .lc-num {
	font-weight: 700;
}

.lc-card__alt .lc-icon {
	margin-block-start: 0.1em;
	inline-size: 1.15em;
	block-size: 1.15em;
}

.lc-card__delivery {
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	font-size: var(--lc-fs-xs);
	line-height: 1.35;
	color: var(--lc-ink-muted);
}

.lc-card__delivery .lc-icon {
	margin-block-start: 0.05em;
	inline-size: 1.1em;
	block-size: 1.1em;
}

/* ---------- The one action ---------- */
.lc-card__action {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lc-s-2);
	margin-block-start: auto;
	padding-block-start: var(--lc-s-3);
}

/* The card CTA is md (48px); on a card narrower than 480px it is sm (44px). Sizes come from the scale variables, never literals. */
body .lc-card .lc-card__cta {
	white-space: nowrap;
}

@media (max-width: 479.98px) {
	body .lc-card .lc-card__cta,
	.lc-card button.lc-quote-add,
	.lc-card .lc-quote-add.button {
		--_h: var(--lc-ctl-sm);
		--_fs: var(--lc-btn-sm-fs);
		--_ls: var(--lc-btn-sm-ls);
		--_px: var(--lc-btn-sm-px);
		--_py: var(--lc-btn-sm-py);
	}
}

@media (max-width: 479.98px) {
	.lc-card__cta-rest {
		display: none;
	}
}

/* Price on request: the WhatsApp request is the card's main action (solid green, as on the product page). On a narrow
   card its label may wrap to two lines inside the same 44px instead of running past the button's edges. */
body .lc-card .lc-card__cta--request {
	white-space: normal;
}

@media (max-width: 479.98px) {
	body .lc-card .lc-card__cta--request {
		--_px: 0.6em;
		--_ls: 0.03em;
		line-height: 1.1;
	}
}

/* Ajax add to cart: WooCommerce adds .loading, then .added and a "Voir le panier" link. */
body .lc-card .lc-card__cta.loading {
	color: transparent;
	pointer-events: none;
}

body .lc-card .lc-card__cta.loading::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 1.25em;
	block-size: 1.25em;
	border: 2px solid rgb(255 255 255 / 0.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: lc-spin 0.8s linear infinite;
}

body .lc-card .lc-card__cta.added {
	--_bg: var(--lc-ok);
	--_bg-hover: var(--lc-ok-hover);
	--_bg-active: var(--lc-ok-hover);
}

/* After the add: the button reads "Ajouté au panier" with a check (both labels are in the markup, CSS swaps them), and
   WooCommerce's "Voir le panier" link below is a full-width secondary button (buttons.css), sm on a narrow card. */
.lc-card__cta-done {
	display: none;
}

body .lc-card .lc-card__cta.added .lc-card__cta-idle {
	display: none;
}

body .lc-card .lc-card__cta.added .lc-card__cta-done {
	display: revert;
}

.lc-card .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
}

@media (max-width: 479.98px) {
	body .lc-card a.added_to_cart:not(.lc-btn) {
		--_h: var(--lc-ctl-sm);
		--_fs: var(--lc-btn-sm-fs);
		--_ls: 0.03em;
		--_px: 0.6em;
		--_py: var(--lc-btn-sm-py);
	}
}

/* ---------- Quantity stepper (product page and cart) ---------- */
body .quantity,
body .woocommerce .quantity,
.quantity {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	inline-size: max-content;
	min-inline-size: calc(2 * var(--lc-tap) + 3.25em);
	overflow: hidden;
	background: var(--lc-paper);
}

/* Height, border and radius of the stepper are the control scale's (forms.css: 48px, 56px beside the PDP add to cart). */

.quantity .qty,
body .woocommerce .quantity .qty,
body .quantity input.qty {
	flex: 1 1 3.25em;
	inline-size: 3.25em;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--lc-ink);
	font: 700 1.125rem/1 var(--lc-font-text);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity .qty:focus,
.quantity .qty:focus-visible {
	outline: 0;
	box-shadow: none;
}

.lc-qty__btn {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: var(--lc-tap);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--lc-ink);
	cursor: pointer;
	transition: background-color var(--lc-dur-fast) linear;
}

.lc-qty__btn:hover {
	background: var(--lc-blue-50);
}

.lc-qty__btn:active {
	background: var(--lc-blue-100);
}

.lc-qty__btn .lc-icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
	.lc-card {
		transition-duration: 0.01ms;
	}
}

/* lc-b2b quote button. Pros: the card's second action, an outlined button above the filled one. Anyone else, on a
   product flagged quote-only: a quiet text link, so the card keeps one action. */
.lc-card .lc-quote-card {
	margin: 0;
}

.lc-card button.lc-quote-add,
.lc-card .lc-quote-add.button {
	--_h: var(--lc-ctl-md);
	--_fs: var(--lc-btn-md-fs);
	--_ls: var(--lc-btn-md-ls);
	--_px: var(--lc-btn-md-px);
	--_py: var(--lc-btn-md-py);

	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--_h);
	margin: 0;
	padding: var(--_py) var(--_px);
	border: 0;
	border-radius: var(--lc-ctl-r);
	background: var(--lc-paper);
	color: var(--lc-link);
	font: 700 var(--_fs)/var(--lc-btn-lh) var(--lc-font-label);
	letter-spacing: var(--_ls);
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1.5px var(--lc-action);
	cursor: pointer;
}

.lc-card button.lc-quote-add:hover,
.lc-card .lc-quote-add.button:hover {
	background: var(--lc-blue-50);
	color: var(--lc-link-hover);
}

.lc-card__quote--guest {
	order: 2;
}

.lc-card__quote--guest button.lc-quote-add,
.lc-card__quote--guest .lc-quote-add.button {
	min-block-size: var(--lc-tap);
	padding: 0;
	background: none;
	box-shadow: none;
	font: 700 var(--lc-fs-sm)/1.2 var(--lc-font-text);
	letter-spacing: 0;
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.22em;
	text-transform: none;
}

.lc-card__quote--guest button.lc-quote-add:hover,
.lc-card__quote--guest .lc-quote-add.button:hover {
	background: none;
}

/* Price on request (catalogue online before the price list). */
.lc-card__price .lc-price-request {
	font: 700 1rem / 1.2 var(--lc-font-label);
	color: var(--lc-navy-900);
}