/* Sahla Commande — frontend styles. Uses CSS custom properties from Assets::enqueue(). */

.sahla-pro-price-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 8px 0;
}

.sahla-price-pro .sahla-price-value {
	color: var(--sahla-primary, #FF741F);
	font-weight: 700;
	font-size: 1.15em;
}
.sahla-price-savings .sahla-price-value {
	color: var(--sahla-accent, #FFC53D);
}

.sahla-guest-pro-prompt {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px dashed #ccc;
	border-radius: var(--sahla-radius, 22px);
	font-size: 0.9em;
}

.sahla-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--sahla-radius, 22px);
	text-decoration: none;
	min-height: 44px;
	line-height: 24px;
	text-align: center;
	box-sizing: border-box;
	border: none;
	font: inherit;
	cursor: pointer;
}
/* Some themes/page builders ship a generic `button`/`.button` reset (seen
   in production: a Tailwind-based theme forcing a flat grey background on
   every <button>) that outranks our plain class selectors on both the
   background AND the text color, since a bare .sahla-btn-particulier has
   the same specificity as their reset and simply loads first. Pin both
   explicitly on every state so third-party CSS can't win that fight —
   the one place !important is deliberate here. */
.sahla-btn,
.sahla-btn:link,
.sahla-btn:visited,
.sahla-btn:hover,
.sahla-btn:focus,
.sahla-btn:active {
	color: #fff !important;
	background: var(--sahla-primary, #FF741F) !important;
}
.sahla-btn-particulier,
.sahla-btn-particulier:link,
.sahla-btn-particulier:visited,
.sahla-btn-particulier:hover,
.sahla-btn-particulier:focus,
.sahla-btn-particulier:active {
	background: var(--sahla-particulier, #17120C) !important;
}
.sahla-btn:hover,
.sahla-btn:focus-visible {
	opacity: 0.9;
}
.sahla-btn:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-btn-label {
	color: inherit;
}

.sahla-floating-pro-button {
	position: fixed;
	z-index: 9990; /* Stays under consent banners, which commonly use 9999+. */
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--sahla-primary, #FF741F);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	font-size: 14px;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.sahla-floating-pro-button:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.sahla-floating-pro-button:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-position-bottom-right {
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sahla-position-bottom-left {
	left: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
	.sahla-floating-pro-button {
		font-size: 13px;
		padding: 10px 16px;
	}
}

.sahla-form-errors {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	border-radius: var(--sahla-radius, 22px);
	padding: 12px;
	margin-bottom: 16px;
	color: #611a15;
}

.sahla-pro-registration-form {
	max-width: 560px;
	width: 100%;
}
.sahla-field {
	margin: 0 0 14px;
}
.sahla-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}
.sahla-field input[type="text"],
.sahla-field input[type="email"],
.sahla-field input[type="tel"],
.sahla-field input[type="password"],
.sahla-field select {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: var(--sahla-radius, 22px);
	box-sizing: border-box;
	font: inherit;
	background: #fff;
}
.sahla-field input:focus-visible,
.sahla-field select:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 1px;
}
.sahla-field-row {
	display: flex;
	gap: 12px;
}
.sahla-field-row .sahla-field {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 600px) {
	.sahla-field-row {
		flex-direction: column;
		gap: 0;
	}
}
.sahla-field-checkbox label {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.sahla-field-checkbox input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Honeypot — invisible to sighted users and screen readers, still
   reachable by naive bots that fill every field including hidden ones. */
.sahla-field-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sahla-password-strength {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: #e5e5e5;
	margin-top: 6px;
	overflow: hidden;
}
.sahla-password-strength span {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: 2px;
	background: #d9534f;
	transition: width 0.2s ease, background-color 0.2s ease;
}
.sahla-password-strength[data-level="weak"] span {
	width: 33%;
	background: #d9534f;
}
.sahla-password-strength[data-level="medium"] span {
	width: 66%;
	background: #e6a23c;
}
.sahla-password-strength[data-level="strong"] span {
	width: 100%;
	background: var(--sahla-primary, #FF741F);
}

.sahla-field-submit {
	margin: 20px 0 0;
}
.sahla-btn-submit {
	width: 100%;
}
.sahla-btn-submit[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}


.sahla-cart-empty {
	text-align: center;
	padding: 32px 16px;
}

/* Accessibility utility — visually hidden but available to screen readers.
   Defined locally rather than relying on the active theme providing it. */
/* !important throughout: seen in production, a theme's own CSS can reset
   `position`/`display`/`width` on spans inside buttons (e.g. a flex-reset
   utility), which silently un-hides this technique and shows both the
   visible label AND the "hidden" accessible-name text side by side. */
.screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
	white-space: nowrap !important;
}

/* Shop — layout shell. */
.sahla-shop {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	min-width: 0;
	transition: opacity 0.15s ease;
}
.sahla-shop,
.sahla-shop * {
	box-sizing: border-box;
}
.sahla-shop.is-loading {
	opacity: 0.55;
	pointer-events: none;
	cursor: progress;
}

/* Toast — empty and invisible by default; JS populates it on error (e.g.
   add-to-cart failure) so a sighted user actually sees why nothing happened,
   not just an assistive-tech-only announcement. */
.sahla-toast {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	z-index: 10001;
	background: #611a15;
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--sahla-radius, 22px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	max-width: 90vw;
}
.sahla-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.sahla-toast {
		transition: none;
	}
}
.sahla-shop-filter-form {
	margin: 0;
}

/* One predictable disclosure on every viewport. Keeping different desktop
   and mobile rules made the button visible under some theme overrides while
   its click had no visual effect on desktop. */
.sahla-cat-filter-toggle {
	margin: 0;
}
button[data-sahla-cat-toggle] {
	width: fit-content;
	display: inline-flex !important;
}
.sahla-cat-filter-active-tag {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.8em;
	margin-left: 4px;
}

.sahla-shop-cat-strip {
	display: none !important;
	margin-top: 12px;
}
.sahla-shop-cat-strip.is-open {
	display: block !important;
}

/* Category strip — horizontally scrollable row of category cards with image. */
.sahla-shop-cat-strip ul {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.sahla-cat-card {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 120px;
	padding: 12px 10px;
	border: 1px solid #e2e2e2;
	border-radius: var(--sahla-radius, 22px);
	text-decoration: none;
	color: inherit;
	background: #fff;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sahla-cat-card:hover {
	border-color: var(--sahla-primary, #FF741F);
}
.sahla-cat-card:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-cat-card.is-active {
	border-color: var(--sahla-primary, #FF741F);
	box-shadow: 0 0 0 1px var(--sahla-primary, #FF741F);
	background: color-mix(in srgb, var(--sahla-primary, #FF741F) 6%, white);
}
.sahla-cat-card-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f2f2f2;
	color: var(--sahla-primary, #FF741F);
	overflow: hidden;
}
.sahla-cat-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sahla-cat-card-name {
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.sahla-cat-card-count {
	font-size: 0.72em;
	color: #777;
}

/* Main content — no sidebar anymore, full width. */
.sahla-shop-body {
	display: block;
}
.sahla-filter-field {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Toolbar — search + sort + apply, above the grid. */
.sahla-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}
.sahla-filter-search {
	flex: 1 1 260px;
	margin: 0;
}
.sahla-filter-sort {
	flex: 0 1 200px;
	margin: 0;
}
.sahla-filter-field label:not(.screen-reader-text) {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}
.sahla-filter-field input,
.sahla-filter-field select {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: var(--sahla-radius, 22px);
	background: #fff;
	font: inherit;
	box-sizing: border-box;
}
.sahla-filter-field input:focus-visible,
.sahla-filter-field select:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 1px;
}
.sahla-btn-filter {
	border: none;
	cursor: pointer;
	font: inherit;
	flex: 0 0 auto;
}

.sahla-shop-toolbar-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}
.sahla-shop-result-count {
	margin: 0;
	font-size: 0.9em;
	color: #555;
}
.sahla-filter-clear {
	font-size: 0.9em;
	color: #555;
	text-decoration: underline;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.sahla-filter-clear:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

/* Product grid — dual particulier/pro buttons per product card. */
.sahla-shop-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}
.sahla-shop-card {
	margin: 0;
}
.sahla-shop-card article {
	height: 100%;
	border: 1px solid #e2e2e2;
	border-radius: var(--sahla-radius, 22px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sahla-shop-card article:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.sahla-shop-card article {
		transition: none;
	}
	.sahla-shop-card article:hover {
		transform: none;
	}
}
.sahla-shop-card-image {
	display: block;
	background: #f7f7f7;
}
.sahla-shop-card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.sahla-shop-card-body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.sahla-shop-card-cat {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sahla-primary, #FF741F);
}
.sahla-shop-card-title {
	font-size: 1em;
	margin: 0;
	line-height: 1.3;
}
.sahla-shop-card-title a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sahla-shop-card-title a:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-shop-card-sku {
	margin: 0;
	font-size: 0.78em;
	color: #888;
}
.sahla-badge-pro {
	align-self: flex-start;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sahla-primary, #FF741F);
	background: color-mix(in srgb, var(--sahla-primary, #FF741F) 12%, white);
	border-radius: 999px;
	padding: 3px 10px;
}
.sahla-shop-card-offers {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}
.sahla-offer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--sahla-radius, 22px);
	background: #f7f7f7;
}
.sahla-offer-pro {
	background: color-mix(in srgb, var(--sahla-primary, #FF741F) 8%, white);
	border: 1px solid var(--sahla-primary, #FF741F);
}
.sahla-offer-label {
	font-size: 0.78em;
	color: #555;
}
.sahla-offer-price {
	font-weight: 700;
	font-size: 1.1em;
	overflow-wrap: anywhere;
}
.sahla-offer-actions {
	display: flex;
	gap: 6px;
	align-items: stretch;
}
.sahla-offer-actions .sahla-btn {
	flex: 1 1 auto;
	text-align: center;
	border: none;
	cursor: pointer;
	font: inherit;
}
.sahla-add-to-cart-form {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
}
.sahla-add-to-cart-form .sahla-btn {
	width: 100%;
}
.sahla-shop-unavailable {
	color: #888;
	font-size: 0.9em;
	font-style: italic;
	margin: 0;
}
.sahla-shop-pro-only {
	color: var(--sahla-primary, #FF741F);
	background: color-mix(in srgb, var(--sahla-primary, #FF741F) 10%, white);
	border-radius: var(--sahla-radius, 22px);
	font-size: 0.86em;
	font-weight: 700;
	margin: 0;
	padding: 7px 9px;
}
.sahla-shop-empty {
	text-align: center;
	padding: 40px 16px;
	color: #666;
}
.sahla-shop-card-prompt {
	font-size: 0.85em;
	color: #666;
	margin: 0;
}
.sahla-shop-card-prompt a:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

.sahla-shop-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.sahla-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--sahla-radius, 22px);
	border: 1px solid #ddd;
	color: inherit;
	text-decoration: none;
}
.sahla-shop-pagination .page-numbers.current {
	background: var(--sahla-primary, #FF741F);
	border-color: var(--sahla-primary, #FF741F);
	color: #fff;
}
.sahla-shop-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

.sahla-form-success {
	background: #eaf6ec;
	border: 1px solid #b7ddbd;
	border-radius: var(--sahla-radius, 22px);
	padding: 14px 16px;
	color: #1c4d27;
}

/* Responsive: 1 column on very narrow screens, 2 on common smartphones,
   3 on tablet and 5 on desktop
   (≥1024px, the .sahla-shop-grid default above). Desktop cards get smaller
   type/padding too — 5 across is noticeably tighter than the previous 4. */
@media (max-width: 767px) {
	.sahla-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.sahla-cat-card {
		width: 104px;
		padding: 10px 8px;
	}
	.sahla-shop-card .sahla-btn {
		min-width: 0;
		padding: 8px 5px;
		font-size: 13px;
		line-height: 1.25;
	}
	.sahla-offer {
		padding: 7px 6px;
	}
	.sahla-offer-price {
		font-size: 0.96em;
	}
}
@media (max-width: 339px) {
	.sahla-shop-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.sahla-shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.sahla-shop-card-body {
		padding: 10px 12px 12px;
	}
	.sahla-shop-card-title {
		font-size: 0.92em;
	}
	.sahla-shop-card-sku,
	.sahla-shop-card-cat,
	.sahla-badge-pro {
		font-size: 0.68em;
	}
	.sahla-offer-price {
		font-size: 1em;
	}
	.sahla-offer-label {
		font-size: 0.72em;
	}
	.sahla-offer {
		padding: 6px 8px;
	}
}

@media (max-width: 767px) {
	.sahla-shop-card-body {
		padding: 8px 8px 10px;
	}
	.sahla-shop-toolbar .sahla-btn-filter {
		width: 100%;
	}
	.sahla-filter-search,
	.sahla-filter-sort {
		flex: 1 1 100%;
	}
}

/* JS toggles this on both <html> and <body> while any modal is open —
   whichever one the theme makes the actual scrolling element, this blocks
   it, without repositioning the page (that broke scrolling *inside* the
   popup itself on this theme). */
html.sahla-modal-open,
body.sahla-modal-open {
	overflow: hidden !important;
	height: 100% !important;
}

/* Registration popup modal — opens with a scale-in anchored at the floating
   button's corner (bottom-right by default), closes the same way in reverse. */
.sahla-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
	opacity: 0;
	transition: opacity 0.2s ease;
}
.sahla-modal-overlay[hidden] {
	display: none;
}
.sahla-modal-overlay.is-open {
	opacity: 1;
}
.sahla-modal {
	box-sizing: border-box;
	background: #fff;
	border-radius: var(--sahla-radius, 22px);
	padding: 24px;
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	position: relative;
	transform: scale(0.3) translateY(40vh) translateX(40vw);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.sahla-modal-overlay.is-open .sahla-modal {
	transform: scale(1) translateY(0) translateX(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.sahla-modal-overlay,
	.sahla-modal {
		transition: none;
	}
	.sahla-modal {
		transform: none;
	}
}
.sahla-modal h2 {
	margin: 0 0 16px;
	font-size: 1.3em;
	padding-right: 32px;
}

/* The checkout form lays billing fields (.col2-set) and the order summary
   (#order_review / .woocommerce-checkout-review-order, a SIBLING of
   .col2-set, not nested in it) out as two side-by-side columns meant for a
   full-width page. On this theme that's done via `display: grid` with two
   columns on form.checkout itself, not floats — overriding the children's
   width/float alone did nothing, the grid parent still placed them in
   separate columns. Forcing the form to plain block layout is what
   actually stacks them; the width/float rules stay as a safety net for
   themes that use the older float-based .col2-set layout instead. */
.sahla-modal form.checkout,
.sahla-modal form.woocommerce-checkout {
	display: block !important;
}
.sahla-modal .col2-set,
.sahla-modal .col2-set .col-1,
.sahla-modal .col2-set .col-2,
.sahla-modal #order_review,
.sahla-modal .woocommerce-checkout-review-order,
.sahla-modal .woocommerce-checkout-review-order-table {
	width: 100% !important;
	float: none !important;
}
.sahla-modal table,
.sahla-modal .shop_table {
	width: 100%;
	table-layout: fixed;
}
.sahla-modal * {
	max-width: 100%;
}
.sahla-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
}
/* Hello/Elementor and some widget packs apply a global button min-width,
   padding and line-height. Lock icon-only controls to a true square and
   center a block-level SVG, independently from font baselines. */
button.sahla-modal-close,
button.sahla-drawer-item-remove,
button.sahla-drawer-suggested-add {
	box-sizing: border-box !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	display: inline-grid !important;
	place-items: center !important;
	text-indent: 0 !important;
}
button.sahla-modal-close {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
}
button.sahla-drawer-item-remove {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
}
button.sahla-drawer-suggested-add {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
}
button.sahla-modal-close svg,
button.sahla-drawer-item-remove svg,
button.sahla-drawer-suggested-add svg {
	display: block !important;
	position: static !important;
	margin: 0 !important;
	transform: none !important;
	flex: none !important;
}
/* Same theme-CSS-override problem as .sahla-btn (a bare selector loses to
   a generic button reset some themes ship) — pin background/color/border so
   the × is never washed out to near-invisible on top of the modal. */
.sahla-modal-close,
.sahla-modal-close:hover,
.sahla-modal-close:focus,
.sahla-modal-close:active {
	background: #222 !important;
	color: #fff !important;
	border-color: #222 !important;
}
.sahla-modal-close:hover {
	background: #000 !important;
}
.sahla-modal-close:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

/* Success state — shown in place of the form after a successful submission,
   whether via the popup (AJAX) or the plain My Account page redirect. */
.sahla-form-success {
	background: #eaf6ec;
	border: 1px solid #b7ddbd;
	border-radius: var(--sahla-radius, 22px);
	padding: 14px 16px;
	color: #1c4d27;
}
.sahla-form-success-animated {
	text-align: center;
	padding: 24px 16px;
}
.sahla-success-check {
	display: inline-flex;
	width: 64px;
	height: 64px;
	margin-bottom: 12px;
}
.sahla-success-check svg {
	width: 100%;
	height: 100%;
}
.sahla-success-check circle {
	stroke: var(--sahla-primary, #FF741F);
	stroke-width: 3;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: sahla-draw-circle 0.4s ease forwards;
}
.sahla-success-check path {
	stroke: var(--sahla-primary, #FF741F);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: sahla-draw-check 0.3s 0.4s ease forwards;
}
@keyframes sahla-draw-circle {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes sahla-draw-check {
	to {
		stroke-dashoffset: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sahla-success-check circle,
	.sahla-success-check path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Floating cart button — sits above the pro-account button so the two
   never overlap; only the cart shows for logged-in customers. */
.sahla-floating-cart-button {
	position: fixed;
	right: 16px;
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	z-index: 9991;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.sahla-floating-cart-button,
.sahla-floating-cart-button:hover,
.sahla-floating-cart-button:focus,
.sahla-floating-cart-button:active {
	background: var(--sahla-primary, #FF741F) !important;
	color: #fff !important;
}
.sahla-floating-cart-button:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.sahla-floating-cart-button:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 10px;
	background: var(--sahla-accent, #FFC53D);
	color: #222;
	font-size: 0.7em;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sahla-floating-cart-button.is-bouncing {
	animation: sahla-cart-bounce 0.4s ease;
}
@keyframes sahla-cart-bounce {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.25);
	}
	60% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sahla-floating-cart-button.is-bouncing {
		animation: none;
	}
}

/* Cart/checkout popup — same centered scale-in modal as pro registration
   (.sahla-modal, .sahla-modal-overlay), just a bit wider to fit the item
   list + suggested-products grid comfortably. */
.sahla-cart-modal {
	max-width: 640px;
}
.sahla-cart-modal.sahla-cart-modal-checkout {
	width: min(1120px, calc(100vw - 32px));
	max-width: 1120px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
	max-height: 960px;
	display: flex;
	flex-direction: column;
}
.sahla-cart-modal-checkout .sahla-drawer-body-checkout {
	position: relative;
	flex: 1 1 auto;
	max-height: none;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	border-radius: var(--sahla-radius, 22px);
}
.sahla-checkout-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 560px;
	border: 0;
	background: #fff;
}
.sahla-checkout-frame-loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	background: #fff;
	z-index: 1;
	color: #555;
}
.sahla-checkout-frame-fallback {
	position: absolute;
	left: 12px;
	bottom: 8px;
	font-size: 12px;
	z-index: 2;
}

/* Minimal document rendered inside the same-origin checkout iframe. */
body.sahla-popup-checkout-document {
	margin: 0;
	background: #fff;
	overflow-x: hidden;
}
.sahla-popup-checkout-main {
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}
.sahla-popup-checkout-document *,
.sahla-popup-checkout-document *::before,
.sahla-popup-checkout-document *::after {
	box-sizing: border-box;
}
.sahla-popup-checkout-document form.checkout,
.sahla-popup-checkout-document form.woocommerce-checkout {
	display: block !important;
}
.sahla-popup-checkout-document .col2-set,
.sahla-popup-checkout-document .col2-set .col-1,
.sahla-popup-checkout-document .col2-set .col-2,
.sahla-popup-checkout-document #customer_details,
.sahla-popup-checkout-document #order_review,
.sahla-popup-checkout-document .woocommerce-checkout-review-order,
.sahla-popup-checkout-document .woocommerce-checkout-review-order-table,
.sahla-popup-checkout-document .form-row {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
.sahla-popup-checkout-document input:not([type="checkbox"]):not([type="radio"]),
.sahla-popup-checkout-document select,
.sahla-popup-checkout-document textarea,
.sahla-popup-checkout-document button {
	max-width: 100%;
}
.sahla-popup-checkout-document table,
.sahla-popup-checkout-document .shop_table {
	width: 100% !important;
	table-layout: auto;
}
.sahla-popup-checkout-document th,
.sahla-popup-checkout-document td,
.sahla-popup-checkout-document label {
	overflow-wrap: anywhere;
}
.sahla-popup-checkout-document .sahla-floating-cart-button,
.sahla-popup-checkout-document .sahla-floating-pro-button {
	display: none !important;
}
@media (max-width: 767px) {
	.sahla-cart-overlay.sahla-checkout-active {
		padding: 0;
	}
	.sahla-cart-modal.sahla-cart-modal-checkout {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		padding: 14px 10px 10px;
	}
	.sahla-checkout-frame {
		min-height: 0;
	}
	.sahla-popup-checkout-main {
		padding: 10px;
	}
	.sahla-popup-checkout-document .shop_table th,
	.sahla-popup-checkout-document .shop_table td {
		padding: 8px 5px;
		font-size: 14px;
	}
}
.sahla-drawer-body {
	max-height: 65vh;
	overflow-y: auto;
	padding-top: 4px;
}
.sahla-drawer-loading {
	text-align: center;
	color: #888;
	padding: 40px 0;
}

.sahla-drawer-items {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sahla-drawer-item {
	display: flex;
	gap: 10px;
}
.sahla-drawer-item-image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--sahla-radius, 22px);
	display: block;
}
.sahla-drawer-item-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.sahla-drawer-item-name {
	font-weight: 600;
	font-size: 0.92em;
	overflow-wrap: anywhere;
}
.sahla-drawer-item-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.sahla-drawer-item-row input[type="number"] {
	width: 56px;
	min-height: 36px;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: var(--sahla-radius, 22px);
	box-sizing: border-box;
}
.sahla-drawer-item-total {
	margin-left: auto;
	font-weight: 700;
	font-size: 0.9em;
}
.sahla-drawer-item-remove {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.sahla-drawer-item-remove svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.5;
}
/* Solid + high-contrast — a pale-on-pale combo (light pink bg, dark-red
   icon) reads as an almost invisible smudge in practice; matches the
   dark-circle/white-icon treatment already proven visible on .sahla-modal-close. */
.sahla-drawer-item-remove,
.sahla-drawer-item-remove:hover,
.sahla-drawer-item-remove:focus,
.sahla-drawer-item-remove:active {
	background: #c0392b !important;
	color: #fff !important;
}
.sahla-drawer-item-remove:hover {
	background: #a3291d !important;
}
.sahla-drawer-item-remove:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

.sahla-drawer-totals {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.1em;
	padding: 14px 0;
	border-top: 1px solid #eee;
	margin-bottom: 12px;
}
.sahla-btn-validate {
	width: 100%;
}
.sahla-drawer-back {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	color: var(--sahla-primary, #FF741F);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 0 0 16px;
}
.sahla-drawer-back:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

/* "Vous aimerez peut-être" — best-sellers upsell inside the cart step. */
.sahla-drawer-suggested {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}
.sahla-drawer-suggested h3 {
	margin: 0 0 10px;
	font-size: 0.95em;
}
.sahla-drawer-suggested-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.sahla-drawer-suggested-item {
	position: relative;
	text-align: center;
	font-size: 0.8em;
}
.sahla-drawer-suggested-image {
	display: block;
	margin-bottom: 4px;
}
.sahla-drawer-suggested-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--sahla-radius, 22px);
	display: block;
}
.sahla-drawer-suggested-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
	min-height: 2.5em;
}
.sahla-drawer-suggested-price {
	display: block;
	font-weight: 700;
	margin: 2px 0 4px;
}
.sahla-drawer-suggested-item form {
	margin: 0;
}
.sahla-drawer-suggested-add {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: none;
	cursor: pointer;
}
.sahla-drawer-suggested-add svg {
	width: 16px;
	height: 16px;
}
.sahla-drawer-suggested-add,
.sahla-drawer-suggested-add:hover,
.sahla-drawer-suggested-add:focus,
.sahla-drawer-suggested-add:active {
	background: var(--sahla-primary, #FF741F) !important;
	color: #fff !important;
}
.sahla-drawer-suggested-add:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.sahla-drawer-suggested-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sahla-modal:not(.sahla-cart-modal-checkout) {
		padding: 18px 14px;
	}
	.sahla-modal-close {
		top: 10px;
		right: 10px;
	}
	.sahla-modal h2 {
		font-size: 1.15em;
		padding-right: 44px;
	}
	.sahla-drawer-item {
		gap: 8px;
	}
	.sahla-drawer-item-image img {
		width: 48px;
		height: 48px;
	}
	.sahla-drawer-item-row {
		flex-wrap: wrap;
	}
	.sahla-drawer-item-total {
		margin-left: 0;
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.sahla-drawer {
		max-width: 100%;
	}
	.sahla-floating-cart-button {
		width: 48px;
		height: 48px;
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}