/* 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));
}

/* Logged-in variant of the same pill: same shape, same anchoring, with the
   professional status stacked under the label when there is one to show. */
.sahla-floating-account-button {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: 1.2;
}
.sahla-floating-account-label {
	font-weight: 600;
}
.sahla-account-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}
/* Approved gets the accent chip on dark text — the one state worth reading
   from the corner of the eye; pending stays deliberately quieter. */
.sahla-account-badge-approved {
	background: var(--sahla-accent, #FFC53D);
	color: var(--sahla-ink, #17120C);
}

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

.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;
	}
}
/* Deliberately NOT flex, even though flex is the obvious way to align a
   checkbox with the first line of its label.
   The consent label is one sentence containing a link (Pro_Registration adds
   "Politique de confidentialité" whenever a privacy page is configured). A
   flex container turns each contiguous text run into its own anonymous flex
   item, so the sentence stops being a sentence: measured at 360px, the three
   items sat side by side under flex-wrap:nowrap and the link was squeezed
   into an 87x60 column of stacked words.
   Absolute-positioning the box inside a padded block keeps the text a single
   inline flow — link inline in the sentence, wrapping normally — while the
   whole label stays the hit target for the checkbox. */
.sahla-field-checkbox label {
	display: block;
	position: relative;
	/* 18px box + 8px gap. */
	padding-left: 26px;
	/* The label is what a thumb actually hits, so it carries the 44px, not the
	   18px box the browser draws. */
	min-height: 44px;
	padding-top: 2px;
	font-weight: 400;
	line-height: 1.45;
}
.sahla-field-checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 4px;
	margin: 0;
	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;
	}
}

/* Pending professional account banner — informational, not an error, so it
   uses the accent tone rather than the red error palette. Rendered only for
   applicants awaiting validation (see templates/shop-grid.php). */
.sahla-pending-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--sahla-accent, #FFC53D);
	border-left-width: 5px;
	border-radius: var(--sahla-radius, 22px);
	background: var(--sahla-cream, #FFF4E8);
	color: var(--sahla-ink, #17120C);
	font-size: 0.95em;
}
.sahla-pending-notice-text {
	flex: 1 1 auto;
}
.sahla-pending-notice p {
	margin: 4px 0 0;
}
.sahla-notice-dismiss,
.sahla-notice-dismiss:hover,
.sahla-notice-dismiss:focus,
.sahla-notice-dismiss:active {
	background: transparent !important;
	color: inherit !important;
	border: none !important;
}
.sahla-notice-dismiss {
	box-sizing: border-box !important;
	flex: none;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: -6px -6px 0 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	display: inline-grid !important;
	place-items: center !important;
	cursor: pointer;
}
.sahla-notice-dismiss svg {
	display: block !important;
}
.sahla-notice-dismiss:focus-visible {
	outline: 3px solid var(--sahla-primary, #FF741F);
	outline-offset: -3px;
}

.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;
}

/* The strip is a *sibling* of the toggle button inside .sahla-cat-filter-toggle,
   and the theme layer makes that wrapper a flex container. Without an explicit
   column direction the two sit side by side and the nav — a flex item, so
   min-width:auto, so sized to its max-content — stretches to the full width of
   every category card laid end to end: measured 496px of nav inside a 360px
   viewport, i.e. 396px of horizontal page scroll the moment a shopper opens
   "Filtres". Stacking them is what the 12px margin-top below always assumed. */
.sahla-cat-filter-toggle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.sahla-shop-cat-strip {
	display: none !important;
	margin-top: 12px;
	/* Belt and braces for the same trap: whatever the wrapper's direction, the
	   nav may never exceed it, so the ul's overflow-x actually engages. */
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.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;
}
/* overflow-wrap on every free-text node in the card: at 360px a card is 158px
   wide, and a single unbroken token — a hyphen-free SKU, a compound product
   name typed without spaces, a long category label — is enough to push the
   grid track past the viewport. `anywhere` (not break-word) so the intrinsic
   max-content size shrinks too, which is what the grid actually measures. */
.sahla-shop-card-cat {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sahla-primary, #FF741F);
	overflow-wrap: anywhere;
}
.sahla-shop-card-title {
	font-size: 1em;
	margin: 0;
	line-height: 1.3;
	color: inherit;
	overflow-wrap: anywhere;
}
.sahla-shop-card-sku {
	margin: 0;
	font-size: 0.78em;
	color: #888;
	overflow-wrap: anywhere;
}
/* Variable products lost their "Voir les options" button when single product
   pages were closed; this replaces it. Styled as plain copy on purpose — no
   button shape, no pointer — so nothing here reads as tappable. */
.sahla-offer-note {
	margin: 0;
	padding: 4px 0;
	font-size: 0.86em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sahla-muted, #5B4F42);
	overflow-wrap: anywhere;
}
.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;
}

/* Login / registration tabs. */
.sahla-modal-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
	border-bottom: 1px solid #e6ddd1;
}
/* Same generic-button-reset problem as .sahla-btn: a bare class selector
   loses to the theme's own `button {}` rule, so background/color/border are
   pinned on every state instead of only the ones we change. */
.sahla-modal-tab,
.sahla-modal-tab:hover,
.sahla-modal-tab:focus,
.sahla-modal-tab:active {
	background: transparent !important;
	color: var(--sahla-muted, #5B4F42) !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
}
.sahla-modal-tab {
	box-sizing: border-box;
	flex: 1 1 auto;
	padding: 10px 12px !important;
	margin-bottom: -1px !important;
	min-height: 44px;
	font: inherit;
	font-weight: 600;
	line-height: 1.3 !important;
	cursor: pointer;
	border-radius: 0 !important;
}
.sahla-modal-tab.is-active,
.sahla-modal-tab.is-active:hover,
.sahla-modal-tab.is-active:focus,
.sahla-modal-tab.is-active:active {
	color: var(--sahla-ink, #17120C) !important;
	border-bottom-color: var(--sahla-primary, #FF741F) !important;
}
.sahla-modal-tab:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: -3px;
}

/* The inactive panel is closed with the `hidden` attribute so its fields
   leave the tab order; restate display:none in case a theme sets a display
   value on generic containers, which would defeat the attribute. */
[data-sahla-tab-panel][hidden] {
	display: none !important;
}
.sahla-auth-panel:focus-visible {
	outline: none;
}

/* WooCommerce's form-login.php lays its two fields out as a 47%-wide floated
   pair meant for a full-width account page — far too cramped in a 560px
   dialog. Stack them, and stop the floats leaking into what follows. */
.sahla-auth-panel .woocommerce-form-login {
	margin: 0;
	border: none;
	padding: 0;
}
.sahla-auth-panel .form-row,
.sahla-auth-panel .form-row-first,
.sahla-auth-panel .form-row-last {
	width: 100%;
	float: none;
	margin: 0 0 14px;
}
.sahla-auth-panel .woocommerce-form-login label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
.sahla-auth-panel .woocommerce-form-login input.input-text {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
}
.sahla-auth-panel .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	margin-bottom: 14px;
}
.sahla-auth-panel .woocommerce-form-login__rememberme input {
	width: auto;
	min-height: 0;
}
.sahla-auth-panel .woocommerce-form-login__submit,
.sahla-auth-panel .woocommerce-form-login__submit:hover,
.sahla-auth-panel .woocommerce-form-login__submit:focus,
.sahla-auth-panel .woocommerce-form-login__submit:active {
	background: var(--sahla-primary, #FF741F) !important;
	color: #fff !important;
}
.sahla-auth-panel .woocommerce-form-login__submit {
	width: 100%;
	min-height: 44px;
	border: none;
	border-radius: var(--sahla-radius, 22px);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.sahla-auth-panel .woocommerce-form-login__submit:focus-visible {
	outline: 3px solid var(--sahla-accent, #FFC53D);
	outline-offset: 2px;
}
.sahla-auth-secondary {
	margin: 12px 0 0;
	font-size: 0.9em;
}

/* 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: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !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 account/pro pill.
   The offset has to clear the *tallest* pill, which is the logged-in account
   variant: label + status badge stacked, measured 68px at 360px wide against
   the 44px the single-line guest pill needs. The old 88px/76px pair was
   derived from the guest pill only, so a pending-validation customer had the
   cart button overlapping their own account button by 8px — measured, not
   theoretical. Both are anchored to the same bottom edge, so one variable
   keeps them in step: pill height + a 12px gap. */
.sahla-floating-cart-button {
	--sahla-fab-stack: 104px;
	position: fixed;
	right: 16px;
	bottom: calc(var(--sahla-fab-stack) + 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;
}
/* Nothing to clear when no account/pro pill was rendered — the My Account
   page, or a site that filtered the button off — so the cart drops back to the
   plain anchor instead of floating over an empty gap. Progressive
   enhancement: a browser without :has() keeps the larger, always-safe offset,
   which is the failure direction that cannot hide a control. */
body:not(:has(.sahla-floating-pro-button)) .sahla-floating-cart-button {
	--sahla-fab-stack: 16px;
}
.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;
		/* The overlay drops its padding at this breakpoint, so the iframe runs
		   edge to edge and the checkout's "Commander" button — the last thing
		   in the scrolled document — would otherwise finish flush against the
		   home indicator. env() is 0 unless the theme's viewport meta carries
		   viewport-fit=cover, so this costs nothing where it isn't needed. */
		padding: 14px 10px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.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 {
	/* dvh, with vh kept above it as the fallback for browsers without dynamic
	   viewport units. On iOS Safari `vh` is the *large* viewport (address bar
	   retracted), so 65vh with the bar showing is really ~72% of what the
	   shopper can see — enough, stacked under the title and above the totals
	   row, to push "Valider ma commande" off the bottom of the dialog. */
	max-height: 65vh;
	max-height: 65dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	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;
	min-width: 0;
	font-weight: 700;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}
.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%;
	/* height:auto is load-bearing, not tidiness: WordPress emits height="150"
	   on the thumbnail, which maps to a presentational `height: 150px`, and
	   aspect-ratio is ignored unless height computes to auto. Measured before
	   this line: 129x150 instead of 129x129 on a 360px phone — a 16% vertical
	   stretch of the tile, and a reflow of everything under it once the real
	   image decodes. */
	height: auto;
	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;
	overflow-wrap: anywhere;
	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;
}
/* 44px, not the 40px it used to be: this is the only control on a suggestion
   tile and it is thumb-operated inside a scrolling panel. */
.sahla-drawer-suggested-add {
	width: 44px;
	height: 44px;
	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;
}

/* Motion the rest of this file does not already opt out of. Grouped at the end
   so the exceptions are auditable in one place rather than hunted rule by
   rule: the shop's fade while a filter request is in flight, the password
   meter's fill, and the hover lifts the theme layer adds to icon buttons. */
@media (prefers-reduced-motion: reduce) {
	.sahla-shop,
	.sahla-password-strength span,
	.sahla-cat-card,
	.sahla-modal-close,
	.sahla-drawer-item-remove,
	.sahla-drawer-suggested-add,
	.sahla-btn {
		transition: none !important;
	}
	.sahla-modal-close:hover,
	.sahla-cat-card:hover,
	.sahla-btn:hover,
	.sahla-btn:focus-visible {
		transform: none !important;
	}
}

@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 {
		/* The pill loses 2px of vertical padding at this breakpoint (68px tall
		   instead of 72px), so the stack can come down by the same amount. */
		--sahla-fab-stack: 96px;
		width: 48px;
		height: 48px;
	}
}