/**
 * EquaShop — public storefront (front). EquaSuite brand, theme-independent.
 * Fonts embedded locally (OFL) ; no CDN dependency.
 */

/* ---- Fonts (local woff2) ---------------------------------------------- */
@font-face {
	font-family: "EquaShop Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
	font-family: "EquaShop Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
	font-family: "EquaShop Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
	font-family: "EquaShop Jakarta";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/jakarta-600.woff2") format("woff2");
}
@font-face {
	font-family: "EquaShop Jakarta";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/jakarta-700.woff2") format("woff2");
}

/* ---- Scope & variables ------------------------------------------------ */
.equashop-shop {
	--equashop-blue: #1981DE;
	--equashop-navy: #0C3A66;
	--equashop-cyan: #34BFFF;
	--equashop-ink: #000D1C;
	--equashop-bg: #ffffff;
	--equashop-soft: #f4f7fb;
	--equashop-border: #e3e9f0;
	--equashop-muted: #5a6675;
	--equashop-radius: 14px;
	--equashop-gap: 1.5rem;
	/* Uniform soft-transition tokens (same feel as the admin design system). */
	--equashop-anim-dur: 220ms;
	--equashop-anim-ease: ease-in-out;

	font-family: "EquaShop Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--equashop-ink);
	line-height: 1.55;
	box-sizing: border-box;
}
.equashop-shop *,
.equashop-shop *::before,
.equashop-shop *::after { box-sizing: inherit; }

.equashop-shop h1, .equashop-shop h2, .equashop-shop h3 {
	font-family: "EquaShop Jakarta", "EquaShop Inter", sans-serif;
	font-weight: 700;
	color: var(--equashop-navy);
	line-height: 1.2;
	margin: 0 0 .5em;
}

.equashop-empty { color: var(--equashop-muted); }

/* ---- Card grid -------------------------------------------------------- */
.equashop-grid {
	display: grid;
	gap: var(--equashop-gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 900px) {
	.equashop-grid.equashop-cols-1 { grid-template-columns: 1fr; }
	.equashop-grid.equashop-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.equashop-grid.equashop-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.equashop-grid.equashop-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Card ------------------------------------------------------------- */
.equashop-card {
	position: relative;
	background: var(--equashop-bg);
	border: 1px solid var(--equashop-border);
	border-radius: var(--equashop-radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	box-shadow: 0 1px 2px rgba(12, 58, 102, .04), 0 6px 20px rgba(12, 58, 102, .05);
}
.equashop-card--featured {
	border-color: var(--equashop-blue);
	box-shadow: 0 0 0 1px var(--equashop-blue), 0 10px 28px rgba(25, 129, 222, .14);
}
.equashop-badge {
	position: absolute;
	top: -.7rem;
	left: 1.25rem;
	background: var(--equashop-blue);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: .25rem .7rem;
	border-radius: 999px;
}
.equashop-card__logo img, .equashop-logo { max-width: 96px; height: auto; }
.equashop-card__title { font-size: 1.25rem; }
.equashop-card__excerpt { color: var(--equashop-muted); margin: 0; }
.equashop-card__price { font-weight: 600; color: var(--equashop-navy); font-size: 1.05rem; margin: .2rem 0; }
.equashop-card__durations {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.equashop-card__durations li {
	background: var(--equashop-soft);
	border: 1px solid var(--equashop-border);
	border-radius: 999px;
	padding: .15rem .6rem;
	font-size: .8rem;
	color: var(--equashop-navy);
}
.equashop-card__label { font-weight: 600; margin: .4rem 0 .1rem; font-size: .9rem; }

.equashop-list { margin: 0; padding-left: 1.1rem; }
.equashop-list li { margin: .15rem 0; }
.equashop-list--features li::marker { color: var(--equashop-blue); }
.equashop-list--benefits li::marker { color: var(--equashop-cyan); }

.equashop-card__actions {
	margin-top: auto;
	padding-top: .8rem;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

/* ---- Buttons ---------------------------------------------------------- */
.equashop-btn {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	border-radius: 10px;
	padding: .6rem 1.1rem;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .15s, border-color .15s;
}
.equashop-btn--primary { background: var(--equashop-blue); color: #fff; }
.equashop-btn--primary:hover { background: var(--equashop-navy); }
.equashop-btn--primary[disabled] { background: #aebfd0; cursor: not-allowed; }
.equashop-btn--ghost { background: #fff; color: var(--equashop-navy); border-color: var(--equashop-border); }
.equashop-btn--ghost:hover { border-color: var(--equashop-blue); color: var(--equashop-blue); }

/* ---- Product page ----------------------------------------------------- */
.equashop-detail { max-width: 920px; margin: 0 auto; }
.equashop-detail__head {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--equashop-border);
	margin-bottom: 1.2rem;
}
/* Stable width independent of the language: the text block fills the row after
 * the logo, so the configured alignment (left/center/right) of the title/price
 * operates in a fixed width and the text no longer shifts when a translation
 * changes the longest line's length. min-width:0 lets long text wrap instead of
 * overflowing the flex item. */
.equashop-detail__headtext { flex: 1; min-width: 0; }
.equashop-detail__logo img { max-width: 140px; height: auto; }
.equashop-detail__title { font-size: 1.9rem; margin: 0; }
.equashop-detail__price { font-weight: 600; color: var(--equashop-blue); font-size: 1.15rem; margin: .3rem 0 0; }
.equashop-detail__desc { margin-bottom: 1.4rem; }
.equashop-detail__section { margin: 1.4rem 0; }
.equashop-detail__section h2 { font-size: 1.3rem; }
.equashop-durations { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.equashop-durations li {
	background: var(--equashop-soft);
	border: 1px solid var(--equashop-border);
	border-radius: 10px;
	padding: .5rem .9rem;
	font-weight: 500;
	color: var(--equashop-navy);
}
.equashop-faq__item {
	border: 1px solid var(--equashop-border);
	border-radius: 10px;
	padding: .6rem 1rem;
	margin-bottom: .6rem;
}
.equashop-faq__item summary { cursor: pointer; font-weight: 600; color: var(--equashop-navy); }
.equashop-faq__item p { margin: .5rem 0 0; color: var(--equashop-muted); }
/* Soft reveal of the answer when a FAQ item opens (native <details>; close stays
 * instant). Uniform duration/curve with the rest of the design system. */
@keyframes equashop-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.equashop-shop details.equashop-faq__item[open] > p { animation: equashop-faq-in var(--equashop-anim-dur) var(--equashop-anim-ease); }
@media (prefers-reduced-motion: reduce) {
	.equashop-shop details.equashop-faq__item[open] > p { animation: none; }
}
.equashop-detail__cta { margin: 1.4rem 0; }
.equashop-related { border-top: 1px solid var(--equashop-border); padding-top: 1.2rem; }

/* Other categories — grouped miniatures */
.equashop-categories { border-top: 1px solid var(--equashop-border); padding-top: 1.2rem; }
.equashop-category { margin: 1rem 0; }
.equashop-category__title { font-size: 1.05rem; color: var(--equashop-navy); margin: 0 0 .6rem; }
.equashop-minis {
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.equashop-mini {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem .8rem;
	border: 1px solid var(--equashop-border);
	border-radius: 10px;
	background: var(--equashop-bg);
	text-decoration: none;
	color: var(--equashop-ink);
	transition: border-color .15s;
}
.equashop-mini:hover { border-color: var(--equashop-blue); }
.equashop-mini__logo img, .equashop-mini__logo { max-width: 40px; height: auto; flex: 0 0 auto; }
.equashop-mini__name { display: block; font-weight: 600; color: var(--equashop-navy); }
.equashop-mini__desc { display: block; font-size: .82rem; color: var(--equashop-muted); }

/* (Product-page mobile rules consolidated in the RESPONSIVE section below.) */

/* ---------------------------------------------------------------------------
 * Configurable layout: presentation blocks + lead paragraph
 * ------------------------------------------------------------------------- */
.equashop-detail__lead { font-size: 1.05rem; color: var(--equashop-muted); margin: 0 0 1rem; }

.equashop-block-spacer { display: block; width: 100%; }
.equashop-block-spacer--sm { height: 1rem; }
.equashop-block-spacer--md { height: 2rem; }
.equashop-block-spacer--lg { height: 3.5rem; }

.equashop-block-sep { border: 0; margin: 1.5rem auto; }
.equashop-block-sep--full { width: 100%; }
.equashop-block-sep--narrow { width: 30%; }
.equashop-block-sep--line { border-top: 1px solid var(--equashop-border); }
.equashop-block-sep--dots { border-top: 2px dotted var(--equashop-border); }

.equashop-block-image { margin: 1.5rem 0; }
.equashop-block-image img { max-width: 100%; height: auto; border-radius: 10px; }
.equashop-block-image--left { text-align: left; }
.equashop-block-image--center { text-align: center; }
.equashop-block-image--right { text-align: right; }

.equashop-block-html { margin: 1.25rem 0; }
.equashop-block-html img { max-width: 100%; height: auto; }

/* Catalogue grouped by group (show_group_title="1") */
.equashop-catalog-group { margin: 0 0 2.5rem; }
.equashop-catalog-group__title {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	color: var(--equashop-navy);
}

/* Plans (detail page): per-duration price, strikethrough, monthly equivalent */
.equashop-plans { list-style: none; margin: 0; padding: 0; }
.equashop-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--equashop-border);
}
.equashop-plan__label { font-weight: 600; color: var(--equashop-navy); min-width: 9rem; }
.equashop-plan__pricing { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.equashop-plan__was { color: var(--equashop-muted); text-decoration: line-through; font-size: .9rem; }
.equashop-plan__price { font-weight: 700; color: var(--equashop-ink); }
.equashop-plan__permonth { color: var(--equashop-muted); font-size: .85rem; }

/* Cart page ([equashop_cart]) */
.equashop-cart__title { color: var(--equashop-navy); }
.equashop-cart__notice { color: var(--equashop-muted); }
.equashop-cart__items { list-style: none; margin: 1rem 0; padding: 0; }
.equashop-cart__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--equashop-border);
}
.equashop-cart__name { font-weight: 600; color: var(--equashop-navy); flex: 1 1 12rem; }
.equashop-cart__dur { color: var(--equashop-muted); }
.equashop-cart__price { font-weight: 700; min-width: 5rem; text-align: right; }
.equashop-cart__remove { color: var(--equashop-muted); font-size: .85rem; text-decoration: underline; }
.equashop-cart__email .equashop-input { padding: .5rem .6rem; border: 1px solid var(--equashop-border); border-radius: 8px; min-width: 16rem; }
.equashop-cart__total { font-size: 1.1rem; margin-top: 1rem; }
.equashop-notice { padding: .7rem 1rem; border-radius: 8px; background: var(--equashop-bg); border: 1px solid var(--equashop-border); }
.equashop-notice--ok { border-color: #1aa35a; }
.equashop-notice--err { border-color: #c0392b; }
.equashop-plan__add { margin: 0; }

/* Cart line: discounted pricing + applied-discount badge */
.equashop-cart__was { color: var(--equashop-muted); text-decoration: line-through; font-size: .85rem; margin-right: .3rem; }
.equashop-cart__eff { font-weight: 700; }
.equashop-cart__disc { display: inline-block; margin-left: .4rem; padding: .1rem .4rem; font-size: .75rem; border-radius: 6px; background: var(--equashop-bg); border: 1px solid var(--equashop-blue); color: var(--equashop-navy); }

/* Checkout result (option B) */
.equashop-checkout-result__items { list-style: none; margin: 1rem 0; padding: 0; }
.equashop-checkout-result__item { padding: .7rem 0; border-bottom: 1px solid var(--equashop-border); }
.equashop-state { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .8rem; }
.equashop-state--ok { background: var(--equashop-bg); border: 1px solid #1aa35a; color: #137a43; }
.equashop-state--action { background: var(--equashop-bg); border: 1px solid #bd8600; color: #8a6100; }
.equashop-state--err { background: var(--equashop-bg); border: 1px solid #c0392b; color: #962d22; }
.equashop-cart__pay { margin-top: 1.2rem; }

/* Cart: payment notice before the pay button */
.equashop-cart__paynotice { color: var(--equashop-muted); font-size: .9rem; line-height: 1.5; margin: 1rem 0; }

/* Language switcher (discreet; placement left to the integrator) */
/* Language switcher — segmented control (cartouche): one welded button per
 * active language, only the two end buttons keep their outer corners rounded.
 * Discreet, right-aligned; placement still left to the integrator. */
.equashop-langsw { display: block; text-align: right; font-size: .85rem; margin-bottom: var(--equashop-gap); }
.equashop-langsw__list { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0; align-items: stretch; }
.equashop-langsw__item { margin: 0; display: flex; }
.equashop-langsw__link,
.equashop-langsw__current {
	display: inline-flex;
	align-items: center;
	padding: .3rem .65rem;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--equashop-border);
	border-radius: 0;
}
/* Weld the buttons: overlap adjacent borders so they read as one block. */
.equashop-langsw__item + .equashop-langsw__item > * { margin-left: -1px; }
/* Round only the outer edges of the first / last button. */
.equashop-langsw__item:first-child > * { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.equashop-langsw__item:last-child > * { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
/* Inactive buttons: sober, neutral; legible hover (no blue-on-blue). */
.equashop-langsw__link { background: #fff; color: var(--equashop-navy); }
.equashop-langsw__link:hover,
.equashop-langsw__link:focus { background: var(--equashop-soft); border-color: var(--equashop-blue); color: var(--equashop-navy); position: relative; z-index: 1; }
.equashop-langsw__link:focus-visible { outline: 2px solid var(--equashop-blue); outline-offset: 1px; z-index: 3; }
/* Active language: brand blue with light text. */
.equashop-langsw__current { background: var(--equashop-blue); border-color: var(--equashop-blue); color: #fff; font-weight: 700; position: relative; z-index: 2; }

/* =======================================================================
 * Visual polish & hover corrections (storefront finitions — Lot 4).
 * Scoped to existing storefront classes; transforms only (no layout shift,
 * no overflow). Grouped here so the overlay stays easy to tune/remove.
 * ===================================================================== */

/* Legible button hovers: any filled state keeps light text on blue/navy.
 * Fixes the illegible dark-blue-on-blue hover on the cart buttons, and gives
 * « En savoir plus » (ghost at rest) a blue fill + light text on hover —
 * the same blue as « Voir le panier » at rest (--equashop-blue). */
.equashop-btn--primary:hover { color: #fff; }
.equashop-btn--ghost:hover {
	background: var(--equashop-blue);
	border-color: var(--equashop-blue);
	color: #fff;
}

/* Hover lift: product cards, mini-cards, FAQ items. */
.equashop-card,
.equashop-mini,
.equashop-faq__item {
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.equashop-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(12, 58, 102, .08), 0 14px 32px rgba(12, 58, 102, .10);
}
.equashop-mini:hover { transform: translateY(-2px); }
.equashop-faq__item { border-radius: 8px; }
.equashop-faq__item:hover { transform: translateY(-1px); }

/* Per-item lift/zoom on feature & benefit rows (each row individually). */
.equashop-list li {
	transition: transform .12s ease, color .12s ease;
	transform-origin: left center;
}
.equashop-list li:hover {
	transform: translateX(2px) scale(1.02);
	color: var(--equashop-navy);
}

/* Product page: push each duration's « Add to cart » to the far right and
 * align the row on the center axis. */
.equashop-plan { align-items: center; }
.equashop-plan__add { margin-left: auto; }

/* Whole card clickable: the Learn-more link stretches over the entire card.
 * One semantic, keyboard-focusable link; no nested interactive elements on
 * the card, so this is safe and accessible. */
.equashop-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--equashop-radius);
}
/* Keep the focus ring visible on keyboard navigation. */
.equashop-card__link:focus-visible { outline: 2px solid var(--equashop-blue); outline-offset: 2px; }

/* ── Additional sub-sections (Temps 2): reuse the section/list/faq styles ── */
.equashop-shop .equashop-addsec__title { margin: 0 0 .4em; }
.equashop-shop .equashop-card__addsec { margin-top: 12px; }
.equashop-shop .equashop-mini__addsec { display: block; margin-top: 6px; }
.equashop-shop .equashop-addsec__qa { display: block; }
.equashop-shop .equashop-addsec__qa .equashop-addsec__q { font-weight: 600; }

/* ── Floating cart + cart icon (site-wide, behaviour set in Settings → Cart) ── */
.equashop-carticon { position: relative; display: inline-flex; align-items: center; color: var(--equashop-navy); text-decoration: none; }
.equashop-carticon__badge,
.equashop-floatcart-mini__badge { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--equashop-blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* Roomier panel: more padding/spacing for a less cramped, breathable look.
   It widens smoothly into « checkout mode » to fit the full payment notice. */
.equashop-shop.equashop-floatcart { position: fixed; top: 50%; transform: translate(0, -50%); z-index: 9990; width: 296px; max-width: 84vw; background: var(--equashop-bg); border: 1px solid var(--equashop-border); border-radius: var(--equashop-radius); box-shadow: 0 12px 34px rgba(12,58,102,.18); padding: 20px 22px; transition: width var(--equashop-anim-dur) var(--equashop-anim-ease); }
.equashop-shop.equashop-floatcart.is-checkout { width: 460px; }
.equashop-floatcart--right { right: 20px; animation: equashop-floatcart-in-right var(--equashop-anim-dur) var(--equashop-anim-ease) both; }
.equashop-floatcart--left { left: 20px; animation: equashop-floatcart-in-left var(--equashop-anim-dur) var(--equashop-anim-ease) both; }
.equashop-floatcart__head { margin: 0 0 14px; font-weight: 700; font-size: 16px; color: var(--equashop-navy); display: flex; align-items: center; gap: 8px; }
.equashop-floatcart__count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--equashop-blue); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.equashop-floatcart__items { list-style: none; margin: 0 0 14px; padding: 0; max-height: 42vh; overflow: auto; }
.equashop-floatcart__item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 22px 10px 0; border-bottom: 1px solid var(--equashop-border); }
.equashop-floatcart__item:last-child { border-bottom: 0; }
.equashop-floatcart__name { font-weight: 600; color: var(--equashop-ink); }
.equashop-floatcart__remove { position: absolute; top: 8px; right: 0; line-height: 1; font-size: 18px; color: var(--equashop-muted); text-decoration: none; }
.equashop-floatcart__remove:hover { color: var(--equashop-blue); }
.equashop-floatcart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--equashop-muted); }
.equashop-floatcart__price { margin-left: auto; white-space: nowrap; }
.equashop-floatcart__total { margin: 4px 0 16px; }
.equashop-floatcart__actions { display: flex; flex-direction: column; gap: 8px; }
.equashop-floatcart__go,
.equashop-floatcart__checkout-toggle { display: block; width: 100%; text-align: center; }
.equashop-floatcart__checkout { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--equashop-anim-dur) var(--equashop-anim-ease), opacity var(--equashop-anim-dur) var(--equashop-anim-ease); }
.equashop-floatcart.is-checkout .equashop-floatcart__checkout { max-height: 80vh; opacity: 1; margin-top: 10px; overflow: auto; }
.equashop-floatcart.is-checkout .equashop-floatcart__checkout-toggle { display: none; } /* replaced by « Back » below */
.equashop-floatcart__back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 0 8px; color: var(--equashop-muted); cursor: pointer; font: inherit; }
.equashop-floatcart__back:hover { color: var(--equashop-blue); }
.equashop-floatcart__email { margin: 0 0 10px; }
.equashop-floatcart__email .equashop-input { width: 100%; }
.equashop-floatcart__paynotice { font-size: 12px; line-height: 1.5; color: var(--equashop-muted); margin: 0 0 12px; }
.equashop-floatcart__checkout button[type="submit"] { display: block; width: 100%; text-align: center; }

.equashop-shop.equashop-floatcart-mini { position: fixed; bottom: 20px; z-index: 9990; display: none; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: var(--equashop-blue); color: #fff; box-shadow: 0 8px 22px rgba(12,58,102,.28); animation: equashop-floatcart-in-up var(--equashop-anim-dur) var(--equashop-anim-ease) both; }
.equashop-floatcart-mini--right { right: 20px; }
.equashop-floatcart-mini--left { left: 20px; }

.equashop-shop.equashop-floatcart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: none; align-items: center; gap: 12px; padding: 12px 18px; background: var(--equashop-navy); color: #fff; text-decoration: none; animation: equashop-floatcart-in-up var(--equashop-anim-dur) var(--equashop-anim-ease) both; }
.equashop-floatcart-bar__count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--equashop-blue); font-size: 12px; line-height: 22px; text-align: center; }
.equashop-floatcart-bar__go { margin-left: auto; font-weight: 700; }

/* Slide in from the screen edge (resting transform preserved for centering). */
@keyframes equashop-floatcart-in-right { from { transform: translate(120%, -50%); } to { transform: translate(0, -50%); } }
@keyframes equashop-floatcart-in-left { from { transform: translate(-120%, -50%); } to { transform: translate(0, -50%); } }
@keyframes equashop-floatcart-in-up { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Small screens: hide the side panel, reveal the chosen mobile variant.
   In checkout mode the panel takes over the screen so paying is comfortable
   and thumb-reachable, with the full payment notice never truncated.
   Breakpoint aligned with the storefront's « compact » breakpoint (900px). */
@media (max-width: 900px) {
	.equashop-shop.equashop-floatcart { display: none; }
	.equashop-shop.equashop-floatcart-mini { display: inline-flex; }
	.equashop-shop.equashop-floatcart-bar { display: flex; }
	.equashop-shop.equashop-floatcart.is-checkout { display: block; position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; transform: none; border-radius: 0; padding: 22px; overflow: auto; }
	.equashop-floatcart.is-checkout .equashop-floatcart__checkout { max-height: none; }
}

/* Respect reduced-motion: no slide, no width/reveal transition. */
@media (prefers-reduced-motion: reduce) {
	.equashop-shop.equashop-floatcart,
	.equashop-shop.equashop-floatcart-mini,
	.equashop-shop.equashop-floatcart-bar { animation: none; transition: none; }
	.equashop-floatcart__checkout { transition: none; }
}

/* =======================================================================
 * RESPONSIVE — coherent storefront breakpoints (single source of truth).
 *   • compact : ≤ 900px (tablets + phones) — grids reduce, plans breathe,
 *               the floating cart switches to its mobile variants (above).
 *   • phone   : ≤ 600px — single column, full-width CTAs, ≥44px touch targets.
 * Every rule is scoped under .equashop-shop and specific enough to survive the
 * active theme; none depends on stylesheet load order. Configurable per-zone
 * styles (alignment/size) are preserved — these rules only adapt the layout.
 * ===================================================================== */

/* Fluid media: no storefront image ever overflows its container. */
.equashop-shop img { max-width: 100%; height: auto; }

@media (max-width: 900px) {
	/* Catalogue / mini grids: never force more columns than actually fit. */
	.equashop-shop .equashop-grid,
	.equashop-shop .equashop-grid.equashop-cols-2,
	.equashop-shop .equashop-grid.equashop-cols-3,
	.equashop-shop .equashop-grid.equashop-cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	/* Product page: shorter plan label so the row doesn't crush the pricing. */
	.equashop-shop .equashop-plan__label { min-width: 7rem; }
	/* The product page is served on its own URL inside a bare <main>, NOT the
	   theme's padded content area — so below its max-width it would otherwise go
	   full-bleed and touch the screen edges. Give it the same comfortable side
	   gutter the shortcode surfaces inherit from the theme. Desktop is unchanged
	   (its auto side margins already exceed this padding). box-sizing:border-box
	   is inherited, so the padding insets the content without widening it. */
	.equashop-shop.equashop-detail { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 600px) {
	/* Single column for every card/mini grid. */
	.equashop-shop .equashop-grid,
	.equashop-shop .equashop-grid.equashop-cols-2,
	.equashop-shop .equashop-grid.equashop-cols-3,
	.equashop-shop .equashop-grid.equashop-cols-4,
	.equashop-shop .equashop-minis { grid-template-columns: 1fr; }

	/* Comfortable thumb targets for every button/CTA. */
	.equashop-shop .equashop-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

	/* Cards: a touch less padding on small screens. */
	.equashop-shop .equashop-card { padding: 1.15rem; }

	/* Product page: smaller title; plan rows stack with a full-width add button. */
	.equashop-shop .equashop-detail__title { font-size: 1.4rem; }
	.equashop-shop .equashop-detail__head { flex-direction: column; align-items: flex-start; }
	/* Stacked header: keep the text block full-width so the configured alignment
	 * stays stable across languages here too (flex:1 only sizes the row axis). */
	.equashop-shop .equashop-detail__headtext { width: 100%; }
	.equashop-shop .equashop-plan { flex-direction: column; align-items: stretch; gap: .4rem; }
	.equashop-shop .equashop-plan__label { min-width: 0; }
	.equashop-shop .equashop-plan__add { margin-left: 0; width: 100%; }

	/* Cart: stack each line, full-width email field and pay button. */
	.equashop-shop .equashop-cart__name { flex: 1 1 100%; }
	.equashop-shop .equashop-cart__price { text-align: left; min-width: 0; }
	.equashop-shop .equashop-cart__email .equashop-input { min-width: 0; width: 100%; }
	.equashop-shop .equashop-cart__pay button,
	.equashop-shop .equashop-cart__pay .equashop-btn { width: 100%; }

	/* Language switcher: centre and allow wrapping when there are many languages. */
	.equashop-shop .equashop-langsw { text-align: center; }
	.equashop-shop .equashop-langsw__list { flex-wrap: wrap; justify-content: center; }
}

/* Duration-discount « extra mention » badge — same pill as the discount badge,
   with a subtle distinct accent (cyan) to read as a separate kind of label. */
.equashop-shop .equashop-note-badge { border-color: var(--equashop-cyan); }
.equashop-shop .equashop-card__durations .equashop-note-badge,
.equashop-shop .equashop-plan__pricing .equashop-note-badge { margin-left: .4rem; }

/* Consent blocks (tunnel): breathing room between each block. */
.equashop-shop .equashop-consent { margin: 0 0 1rem; }
.equashop-shop .equashop-consent__radios { margin: .35rem 0 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.equashop-shop .equashop-consent__label { line-height: 1.45; }

/* Client-data form (tunnel): rows, small label above, full-width input, no frame. */
.equashop-shop .equashop-cart__customer { margin: 0 0 1rem; border: 0; padding: 0; }
.equashop-shop .equashop-cust__title { font-weight: 600; margin: 0 0 .6rem; }
.equashop-shop .equashop-cust__row { display: grid; grid-template-columns: 1fr; gap: .8rem 1rem; margin-bottom: .8rem; }
.equashop-shop .equashop-cust__row--2 { grid-template-columns: 1fr 1fr; }
.equashop-shop .equashop-cust__cell { min-width: 0; }
.equashop-shop .equashop-cust__lbl { display: block; }
.equashop-shop .equashop-cust__lbl > span { display: block; font-size: .82rem; margin-bottom: .2rem; color: var( --equashop-navy ); }
.equashop-shop .equashop-cust__input { width: 100%; box-sizing: border-box; }
@media ( max-width: 560px ) { .equashop-shop .equashop-cust__row--2 { grid-template-columns: 1fr; } }

/* ---- Product image gallery (mosaic) ----------------------------------- */
.equashop-shop .equashop-detail__gallery { margin: 1.4rem 0; }
.equashop-shop .equashop-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: var( --equashop-gap, .8rem );
}
.equashop-shop .equashop-gallery__item { margin: 0; }
.equashop-shop .equashop-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var( --equashop-border, #dbe3ec );
	border-radius: var( --equashop-radius, 10px );
	background: var( --equashop-soft, #f4f7fb );
	cursor: zoom-in;
	overflow: hidden;
	transition: box-shadow var( --equashop-anim-dur, .18s ) var( --equashop-anim-ease, ease ), transform var( --equashop-anim-dur, .18s ) var( --equashop-anim-ease, ease );
}
.equashop-shop .equashop-gallery__thumb:hover,
.equashop-shop .equashop-gallery__thumb:focus-visible { box-shadow: 0 4px 18px rgba( 12, 58, 102, .18 ); transform: translateY( -2px ); outline: none; }
.equashop-shop .equashop-gallery__thumb img { display: block; width: 100%; height: 150px; object-fit: cover; }

/* ---- Gallery lightbox (overlay appended to <body>, outside .equashop-shop) -- */
html.equashop-lb-lock { overflow: hidden; }
.equashop-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; }
.equashop-lightbox.is-open { display: block; }
.equashop-lightbox__backdrop { position: absolute; inset: 0; background: rgba( 0, 13, 28, .82 ); cursor: zoom-out; }
.equashop-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vmin;
	pointer-events: none;
}
.equashop-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 50px rgba( 0, 0, 0, .5 );
	pointer-events: auto;
}
.equashop-lightbox__btn {
	position: absolute;
	pointer-events: auto;
	appearance: none;
	border: none;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.equashop-lightbox__btn:hover { background: rgba( 255, 255, 255, .28 ); }
.equashop-lightbox__prev { left: 3vmin; top: 50%; transform: translateY( -50% ); }
.equashop-lightbox__next { right: 3vmin; top: 50%; transform: translateY( -50% ); }
.equashop-lightbox__close { top: 3vmin; right: 3vmin; font-size: 1.6rem; }
@media ( max-width: 560px ) {
	.equashop-shop .equashop-gallery__thumb img { height: 120px; }
	.equashop-lightbox__prev { left: 1vmin; }
	.equashop-lightbox__next { right: 1vmin; }
}

/* ---- Out-of-stock (native availability, « greyed » policy) ------------- */
.equashop-shop .equashop-card--oos { opacity: .72; }
.equashop-shop .equashop-card--oos .equashop-card__cta,
.equashop-shop .equashop-card--oos .equashop-plan__add { pointer-events: none; opacity: .5; }
.equashop-shop .equashop-badge--oos { background: #6a7683; color: #fff; }
.equashop-shop .equashop-detail__oos { margin: 1.2rem 0; }
.equashop-shop .equashop-oos { display: inline-block; padding: .5rem .9rem; border-radius: var( --equashop-radius, 10px ); background: #eef2f6; color: #43525f; font-weight: 600; }

/* Withdrawal-regime surface at the cart (Brick C). Additive to consent blocks. */
.equashop-regimes { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.equashop-regime { margin: 0; font-size: 14px; line-height: 1.5; }
.equashop-regime--notice { color: #0C3A66; background: #F1F7FE; border-left: 3px solid #34BFFF; padding: 10px 12px; border-radius: 6px; }
.equashop-regime--gate { color: #000D1C; background: #FFF8E6; border-left: 3px solid #1981DE; padding: 10px 12px; border-radius: 6px; }
.equashop-regime--gate label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.equashop-regime--gate input[type="checkbox"] { margin-top: 3px; }

/* Quantity selector (multiple-order products) — add-to-cart forms + cart line (§6). */
.equashop-qty { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.equashop-qty__label { font-size: 13px; color: #0C3A66; }
.equashop-qty__input, .equashop-cart__qtyinput { width: 4.5em; padding: 4px 6px; border: 1px solid #cdd7e1; border-radius: 6px; text-align: center; }
.equashop-cart__qty { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; }
.equashop-cart__qtylabel { font-size: 13px; color: #0C3A66; display: inline-flex; align-items: center; gap: 4px; }
.equashop-cart__linetotal { font-weight: 600; margin: 0 8px; color: #000D1C; }

/* "On order" (backorder) badge + mention — out-of-stock product still purchasable (§4). */
.equashop-badge--backorder { background: #0C3A66; color: #fff; }
.equashop-backorder { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 6px; background: #F1F7FE; color: #0C3A66; font-weight: 600; font-size: 14px; }