/**
 * Mamun Ecommerce — design system + shared components.
 *
 * 1.  Tokens
 * 2.  Reset & base
 * 3.  Layout / container
 * 4.  Typography
 * 5.  Buttons
 * 6.  Forms
 * 7.  Badges, chips, pills
 * 8.  Product card + grid
 * 9.  Category / brand / testimonial cards
 * 10. Section heading
 * 11. Drawers, overlay, toast, spinner
 * 12. Quantity control
 * 13. Empty state
 * 14. Breadcrumb, pagination, page header
 * 15. WooCommerce notices + shared overrides
 * 16. Utilities & accessibility
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Brand */
	--color-primary: #15803d;
	--color-primary-dark: #166534;
	--color-secondary: #f59e0b;
	--color-button: var(--color-primary);

	/* Ink */
	--color-heading: #111827;
	--color-body: #4b5563;
	--color-muted: #6b7280;

	/* Surfaces */
	--color-background: #ffffff;
	--color-surface: #f8faf9;
	--color-surface-alt: #eef4f0;

	/* Borders: one subtle default, one stronger hover/active tone.
	   Components must not invent their own border colours. */
	--color-border: #e5e7eb;
	--color-border-strong: #d3dbd5;

	/* Status */
	--color-success: #15803d;
	/* Bright lime for filled "saving" badges — same family as the palette. */
	--color-success-bright: #84cc16;
	--color-danger: #dc2626;

	--color-primary-soft: color-mix(in srgb, var(--color-primary) 8%, #fff);
	--color-danger-soft: color-mix(in srgb, var(--color-danger) 8%, #fff);

	--container-width: 1420px;
	--gutter: 16px;

	/* Radius scale — components pick from these only. Buttons and inputs share
	   --radius-sm/md so adjacent controls always agree. */
	--radius-sm: 10px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Spacing rhythm: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64.
	   Section rhythm is driven by --section-spacing per breakpoint. */

	/* Restrained elevation — depth from borders first, shadow second. */
	--shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
	--shadow-md: 0 4px 14px rgba(17, 24, 39, .07);
	--shadow-lg: 0 16px 40px rgba(17, 24, 39, .12);

	--section-spacing: 40px;
	--header-height: 64px;

	/* Control sizing — one source of truth for buttons and inputs. */
	--control-height: 46px;
	--control-height-lg: 50px;

	/* Fluid type scale */
	--fs-hero: clamp(1.75rem, 1.15rem + 2.6vw, 3.4rem);
	--fs-section: clamp(1.25rem, 1.05rem + 1vw, 1.9rem);
	--fs-body: 1rem;
	--fs-small: .875rem;

	--font-body: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", "SolaimanLipi", Roboto, Arial, sans-serif;
	--transition: 180ms ease;

	/* Stacking order, highest last. Bottom nav must sit under the drawer. */
	--z-header: 60;
	--z-bottom-nav: 70;
	--z-overlay: 90;
	--z-drawer: 100;
	--z-toast: 120;
}

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

/*
 * The [hidden] attribute only works through the UA stylesheet's
 * `display: none`, so ANY author rule that sets `display` on the same element
 * silently defeats it. That is exactly what made the cart drawer look stuck in
 * a permanent loading state: `.mamun-cart-drawer__loader` is rendered with
 * `hidden`, but its own `display: flex` kept it painted over the whole panel.
 * This restores the attribute's meaning everywhere, once.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Overflow guard.
   `overflow-x: hidden` on <body> alone is unreliable once anything is
   position:fixed, so the clip is declared on both elements. Grid/flex children
   also get min-width:0 below, which is what actually stops long Bangla words
   and wide tables from pushing the page sideways. */
html,
body { max-width: 100%; overflow-x: clip; }

/* Long unbroken strings (Bangla compounds, URLs, SKUs) must wrap, not scroll. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, label, button, a {
	overflow-wrap: break-word;
}

body.mamun-no-scroll { overflow: hidden; }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; cursor: pointer; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------------ *
 * 3. Layout
 * ------------------------------------------------------------------ */
/* ONE container for the whole site. Section-specific widths are not allowed —
   everything aligns to this. */
.mamun-container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site,
.site-content,
.site-main { min-width: 0; max-width: 100%; }

.site-content { min-height: 40vh; }

/* Grid/flex children default to min-width:auto, which is the single most common
   cause of horizontal overflow. Reset it for the theme's own layout wrappers. */
.mamun-layout > *,
.mamun-shop-layout > *,
.mamun-footer__grid > *,
.mamun-post-grid > *,
.mamun-cat-grid > *,
.mamun-brand-grid > *,
.mamun-combo__grid > * { min-width: 0; }

.mamun-section { padding-block: var(--section-spacing); }
.mamun-section + .mamun-section { padding-top: 0; }

/* Tinted bands keep a long homepage from reading as one flat column. They keep
   their own top padding so the background never looks clipped.

   .mamun-section--band carries that padding behaviour for any section that
   paints its own background; --alt adds the shared surface colour on top of it.
   Because the rule is generic rather than named after specific neighbours, any
   homepage section can be switched off in the Customizer without leaving a gap
   or clipping the next band: the combinators only ever see rendered siblings. */
.mamun-section--alt { background: var(--color-surface); }
.mamun-section + .mamun-section.mamun-section--alt,
.mamun-section + .mamun-section.mamun-section--band,
.mamun-section--alt + .mamun-section,
.mamun-section--band + .mamun-section { padding-top: var(--section-spacing); }

.mamun-layout { display: grid; gap: 28px; padding-block: var(--section-spacing); }

/* ------------------------------------------------------------------ *
 * 4. Typography
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--color-heading);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.entry-content > * + * { margin-top: 1.1em; }
.entry-content img { border-radius: var(--radius-md); }
.entry-content blockquote {
	margin: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--color-primary);
	background: var(--color-surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */
/*
 * BUTTON SYSTEM
 *
 * The theme owns every WooCommerce button. `woocommerce-block-theme-has-button-styles`
 * is added to <body> (see inc/woocommerce.php) which switches off WooCommerce's
 * own `:where(...) .woocommerce button.button.alt` rules — those weigh 0-3-1 and
 * would otherwise repaint the primary Add to Cart in WooCommerce purple, making
 * an entirely functional button look disabled. With that opt-out in place these
 * plain selectors are enough; no !important anywhere.
 */
.mamun-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--control-height);
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--color-button);
	color: #fff;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.mamun-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

.mamun-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.mamun-btn:active { transform: translateY(1px); }

/* Icons inside buttons keep a fixed box and an 8px gap (the .mamun-btn gap). */
.mamun-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Variants --- */
.mamun-btn--primary { background: var(--color-primary); color: #fff; }
.mamun-btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.mamun-btn--secondary { background: var(--color-heading); color: #fff; }
.mamun-btn--secondary:hover { background: #000; color: #fff; }

.mamun-btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.mamun-btn--outline:hover { background: var(--color-primary); color: #fff; }

.mamun-btn--ghost {
	background: var(--color-surface);
	color: var(--color-heading);
	border-color: var(--color-border);
}
.mamun-btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-heading); }

.mamun-btn--link {
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-primary);
	font-weight: 600;
}
.mamun-btn--link:hover { background: transparent; color: var(--color-primary-dark); text-decoration: underline; }

/* Secondary contact actions: outline by default so they never compete with
   Add to Cart / Buy Now. The brand colour is carried by the icon + border. */
.mamun-btn--whatsapp { background: transparent; color: #157f3d; border-color: #9ed9b4; }
.mamun-btn--whatsapp:hover { background: #1faa53; color: #fff; border-color: #1faa53; }
.mamun-btn--call { background: transparent; color: var(--color-heading); border-color: var(--color-border-strong); }
.mamun-btn--call:hover { background: var(--color-heading); color: #fff; border-color: var(--color-heading); }

.mamun-btn--buy-now { background: var(--color-secondary); color: #3d2c00; }
.mamun-btn--buy-now:hover { background: #d97706; color: #3d2c00; }

/* --- States ---
   Disabled stays readable (contrast preserved) and is never applied via
   pointer-events to real purchasable products — only genuinely disabled
   controls and demo placeholders opt out of pointer events. */
.mamun-btn:disabled,
.mamun-btn.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled {
	background: var(--color-surface-alt);
	border-color: var(--color-border);
	color: var(--color-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.mamun-btn:disabled:hover,
.mamun-btn.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button.disabled:hover {
	background: var(--color-surface-alt);
	color: var(--color-muted);
}

.mamun-btn.is-loading,
.woocommerce .mamun-btn.is-loading {
	position: relative;
	/* Label hidden but its box preserved, so the button never resizes. */
	color: transparent;
	pointer-events: none;
}

.mamun-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mamun-spin .6s linear infinite;
}

.mamun-btn--outline.is-loading::after,
.mamun-btn--ghost.is-loading::after {
	border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
	border-top-color: var(--color-primary);
}

/*
 * Variant guard inside .woocommerce.
 *
 * The theme's own base rule `.woocommerce button.button` weighs 0-2-1, which
 * outranks a single modifier class (0-1-0) — so without these, every button
 * that also carries WooCommerce's `.button` class (Add to Cart, Buy Now, cart
 * actions) would fall back to the solid primary fill. `.woocommerce .mamun-btn.mamun-btn--x`
 * is 0-3-0 and wins on class count alone.
 */
.woocommerce .mamun-btn.mamun-btn--primary { background: var(--color-primary); color: #fff; }
.woocommerce .mamun-btn.mamun-btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.woocommerce .mamun-btn.mamun-btn--secondary { background: var(--color-heading); color: #fff; }

.woocommerce .mamun-btn.mamun-btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.woocommerce .mamun-btn.mamun-btn--outline:hover { background: var(--color-primary); color: #fff; }

.woocommerce .mamun-btn.mamun-btn--ghost {
	background: var(--color-surface);
	color: var(--color-heading);
	border-color: var(--color-border);
}
.woocommerce .mamun-btn.mamun-btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-heading); }

.woocommerce .mamun-btn.mamun-btn--whatsapp { background: transparent; color: #157f3d; border-color: #9ed9b4; }
.woocommerce .mamun-btn.mamun-btn--whatsapp:hover { background: #1faa53; color: #fff; border-color: #1faa53; }
.woocommerce .mamun-btn.mamun-btn--call { background: transparent; color: var(--color-heading); border-color: var(--color-border-strong); }
.woocommerce .mamun-btn.mamun-btn--call:hover { background: var(--color-heading); color: #fff; }

.woocommerce .mamun-btn.mamun-btn--buy-now { background: var(--color-secondary); color: #3d2c00; }
.woocommerce .mamun-btn.mamun-btn--buy-now:hover { background: #d97706; color: #3d2c00; }

/* Disabled state must still beat the variant fills above (0-3-1). */
.woocommerce .mamun-btn.mamun-btn--buy-now:disabled,
.woocommerce .mamun-btn.mamun-btn--buy-now.disabled,
.woocommerce .mamun-btn.mamun-btn--primary:disabled {
	background: var(--color-surface-alt);
	border-color: var(--color-border);
	color: var(--color-muted);
	cursor: not-allowed;
}

.mamun-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-heading);
	transition: background var(--transition);
}
.mamun-icon-btn:hover { background: var(--color-surface); }

/* ------------------------------------------------------------------ *
 * 6. Forms
 * ------------------------------------------------------------------ */
/* Scoped to the storefront so WordPress admin bar / block editor inputs and
   any plugin UI are never restyled by the theme. */
.mamun-theme input[type="text"],
.mamun-theme input[type="email"],
.mamun-theme input[type="url"],
.mamun-theme input[type="password"],
.mamun-theme input[type="search"],
.mamun-theme input[type="number"],
.mamun-theme input[type="tel"],
.mamun-theme input[type="date"],
.mamun-theme select,
.mamun-theme textarea,
.mamun-input {
	width: 100%;
	max-width: 100%;
	min-height: var(--control-height);
	padding: 11px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-heading);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.45;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.mamun-theme input:focus,
.mamun-theme select:focus,
.mamun-theme textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
	outline: none;
}

.mamun-theme textarea { min-height: 120px; resize: vertical; }

label { display: block; margin-bottom: 6px; color: var(--color-heading); font-size: .88rem; font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 7. Badges, chips
 * ------------------------------------------------------------------ */
.mamun-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	white-space: nowrap;
}
.mamun-badge--sale { background: var(--color-danger); }
.mamun-badge--new { background: var(--color-secondary); color: var(--color-heading); }
.mamun-badge--featured { background: var(--color-heading); }
.mamun-badge--stock { background: var(--color-muted); }

.mamun-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }

.mamun-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--color-heading);
	font-size: .85rem;
	font-weight: 500;
	transition: border-color var(--transition), background var(--transition);
}
.mamun-chip:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-dark); }
.mamun-chip--removable svg { opacity: .6; }

/* ------------------------------------------------------------------ *
 * 8. Product card + grid
 * ------------------------------------------------------------------ */
.mamun-products {
	display: grid;
	grid-template-columns: repeat(var(--cols-mob, 2), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* minmax(0,1fr) above plus min-width:0 here is what keeps a long product name
   from widening its column and pushing the page into horizontal scroll. */
.mamun-products > * { min-width: 0; }

.mamun-products.cols-mob-1 { --cols-mob: 1; }
.mamun-products.cols-mob-2 { --cols-mob: 2; }

.mamun-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.mamun-product-card:hover {
	border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
	box-shadow: var(--shadow-md);
}

.mamun-product-card__media {
	position: relative;
	background: var(--color-surface);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.mamun-product-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}

/* `contain` so packaged grocery products are never cropped or stretched; the
   soft surface behind fills the remaining space. */
.mamun-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 8px;
	transition: transform 400ms ease, opacity 300ms ease;
}

/*
 * Second gallery image on hover.
 *
 * The hover copy is taken out of flow on top of the primary one, so the media
 * box keeps its 1/1 aspect ratio and the card height never shifts. Cards
 * without a usable second image never receive .has-hover-image, so this whole
 * block stays inert for them — no blank area, no extra request, no JS.
 */
.mamun-product-card__image--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.mamun-product-card:hover .mamun-product-card__media img { transform: scale(1.04); }
}

/* Pointer-fine only: a tap must never swap the image on a touch device. */
@media (hover: hover) and (pointer: fine) {
	.mamun-product-card.has-hover-image:hover .mamun-product-card__image--primary { opacity: 0; }
	.mamun-product-card.has-hover-image:hover .mamun-product-card__image--hover { opacity: 1; }

	/* Keep the dimmed reading of an unavailable product through the swap. */
	.mamun-product-card.is-out-of-stock.has-hover-image:hover .mamun-product-card__image--primary { opacity: 0; }
	.mamun-product-card.is-out-of-stock.has-hover-image:hover .mamun-product-card__image--hover { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.mamun-product-card__media img { transition: opacity 300ms ease; }
	.mamun-product-card:hover .mamun-product-card__media img { transform: none; }
}

/* Scoped to the primary image: the hover copy manages its own opacity, and an
   element selector here (`img`) would otherwise outrank it and leave both
   images stacked at 55% on an unavailable product. */
.mamun-product-card.is-out-of-stock .mamun-product-card__media .mamun-product-card__image--primary { opacity: .55; }

.mamun-product-card__badges {
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}

.mamun-product-card__actions {
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mamun-product-card__actions:empty { display: none; }

/*
 * Card body rhythm. One gap governs the whole stack so no element carries a
 * competing margin: meta 4px title, title 6px price, price 12px CTA.
 */
.mamun-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	padding: 12px;
}

.mamun-product-card__cat {
	color: var(--color-muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Fixed two-line title keeps every card in a row the same height. The full
   name stays in the DOM (and in a title attribute) for screen readers. */
.mamun-product-card__title {
	margin: 0 0 2px;
	/* Still exactly two lines reserved, so a row of cards stays level whatever
	   the name length; the tighter leading just removes dead space. */
	min-height: calc(2 * 1.4em);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
}

.mamun-product-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--color-heading);
	overflow-wrap: anywhere;
}
.mamun-product-card__title a:hover { color: var(--color-primary); }

/* margin-top:auto keeps the CTA row level across a grid of cards; the tiny
   padding that used to stack on top of the body gap is gone. */
.mamun-product-card__price {
	margin-top: auto;
	color: var(--color-heading);
	font-size: 1rem;
	font-weight: 700;
}

/*
 * Sale price row: current price first, compare price beside it on the same
 * baseline, one 8px gap and nothing else between them.
 *
 * Guarded with :has(del) so a variable product's price *range* keeps
 * WooCommerce's own inline rendering, and browsers without :has() simply fall
 * back to the previous inline layout. WooCommerce's screen-reader-text spans
 * sit between del and ins in the DOM but are absolutely positioned, so they
 * never become flex items and never widen the gap.
 */
.mamun-product-card__price:has(del) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.mamun-product-card__price:has(del) ins { order: -1; }
.mamun-product-card__price:has(del) del,
.woocommerce .mamun-product-card__price:has(del) del { margin-inline-end: 0; }

/* 0-3-0 beats WooCommerce's `.woocommerce div.product span.price` (0-2-2). */
.mamun-product-card__price .price,
.woocommerce .mamun-product-card__price .price {
	color: var(--color-heading);
	font-size: inherit;
	font-weight: 700;
}

.mamun-product-card__price del,
.woocommerce .mamun-product-card__price del {
	margin-inline-end: 6px;
	color: var(--color-muted);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: line-through;
	opacity: 1;
}
.mamun-product-card__price ins,
.woocommerce .mamun-product-card__price ins { text-decoration: none; color: var(--color-danger); }
.mamun-product-card__price .woocommerce-Price-amount { white-space: nowrap; }

.mamun-product-card__footer { margin-top: 8px; }

/* 0-3-0 so it outranks the theme's own `.woocommerce a.button` (0-2-1). */
.mamun-product-card__footer .mamun-btn--add,
.mamun-product-card__footer .button,
.woocommerce .mamun-product-card__footer .button {
	width: 100%;
	min-height: 42px;
	padding: 9px 14px;
	background: var(--color-primary-soft);
	color: var(--color-primary-dark);
	border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
	font-size: .88rem;
}

.mamun-product-card__footer .button:hover,
.woocommerce .mamun-product-card__footer .button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Out-of-stock loop button reads as unavailable without hiding the label. */
.mamun-product-card.is-out-of-stock .mamun-product-card__footer .button {
	background: var(--color-surface-alt);
	border-color: var(--color-border);
	color: var(--color-muted);
}

.mamun-product-card__footer .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: .8rem;
	text-align: center;
}

.mamun-product-card .button.loading,
.woocommerce .mamun-product-card .button.loading { position: relative; color: transparent; }
.mamun-product-card .button.loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--color-primary);
	animation: mamun-spin .6s linear infinite;
}

.mamun-product-card__rating { display: flex; align-items: center; gap: 6px; }

/* --- Demo (non-purchasable) cards --------------------------------------- */
.mamun-product-card--demo .mamun-product-card__media { background: #fff; }
.mamun-product-card--demo .mamun-product-card__title { color: var(--color-heading); }

.mamun-btn--demo,
.woocommerce .mamun-btn.mamun-btn--demo {
	background: var(--color-surface);
	color: var(--color-muted);
	border: 1px dashed var(--color-border);
	cursor: default;
	pointer-events: none;
}

.mamun-cat-card--demo,
.mamun-brand-card--demo { cursor: default; }
.mamun-brand-card--demo { color: inherit; }

.mamun-stars { display: inline-flex; gap: 1px; color: #d8dde2; }
.mamun-stars__star svg { display: block; }
.mamun-stars__star.is-filled { color: var(--color-secondary); }
.mamun-stars__star.is-filled svg { fill: currentColor; }
.mamun-rating-count { color: var(--color-muted); font-size: .78rem; }

/* Carousel variant */
.mamun-slider { position: relative; }

/* Carousel track.
   FLEX, not grid-auto-columns: `minmax(0, …)` auto-columns let every column
   SHRINK to fit the container, so the track never overflowed, scrollWidth
   always equalled clientWidth and both arrows sat permanently disabled.
   `flex: 0 0 <basis>` cannot shrink, so the track genuinely overflows and the
   arrows have something to scroll. --slides is set per breakpoint. */
.mamun-products--slider,
.mamun-cat-grid,
.mamun-brand-grid,
.mamun-testimonial-grid {
	--slides: 2;
	--slide-gap: 12px;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--slide-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
	/* Never let the track dictate page width. */
	max-width: 100%;
	min-width: 0;
}

.mamun-products--slider > *,
.mamun-cat-grid > *,
.mamun-brand-grid > *,
.mamun-testimonial-grid > * {
	flex: 0 0 calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
	min-width: 0;
}

.mamun-products--slider::-webkit-scrollbar,
.mamun-cat-grid::-webkit-scrollbar,
.mamun-brand-grid::-webkit-scrollbar,
.mamun-testimonial-grid::-webkit-scrollbar { display: none; }

.mamun-products--slider > *,
.mamun-cat-grid > *,
.mamun-brand-grid > *,
.mamun-testimonial-grid > * { scroll-snap-align: start; }

/* Arrows overlay the track edges and are vertically centred, so they can never
   overlap the section heading's "View All" link (they previously sat -54px
   above the slider, directly on top of it). */
.mamun-slider__controls { display: none; }

/*
 * Shared carousel arrow control — one visual system for every slider that
 * uses mamunecommerce_slider_controls() (categories, flash sale, brands,
 * testimonials, product rows).
 *
 * Below 992px the controls sit in normal flow underneath the track; the parent
 * wrapper owns the spacing through `gap`, so no button carries its own margin.
 * responsive.css repositions the same wrapper as an edge overlay on desktop.
 */
.mamun-slider.is-scrollable .mamun-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.mamun-slider__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--color-heading);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

/* The PHP emits a 20px chevron; the visual size is set here so the markup and
   every existing template stay untouched. */
.mamun-slider__btn svg {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Hover only on real pointers, so a tap on a phone never leaves the button
   stuck in its filled state. */
@media (hover: hover) {
	.mamun-slider__btn:not([disabled]):hover {
		border-color: var(--color-primary-dark);
		background: var(--color-primary);
		color: #fff;
	}
}

.mamun-slider__btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* sliders.js sets [disabled] at either end of the track. Still readable, just
   clearly inactive, and it never takes the hover fill. */
.mamun-slider__btn[disabled] {
	background: var(--color-surface);
	color: var(--color-muted);
	opacity: .55;
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * 9. Category, brand, testimonial cards
 * ------------------------------------------------------------------ */
.mamun-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	text-align: center;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.mamun-cat-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.mamun-cat-card__media {
	display: block;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--color-surface);
}
.mamun-cat-card__media img { width: 100%; height: 100%; object-fit: cover; }

.mamun-cat-card__title { color: var(--color-heading); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.mamun-cat-card__count { color: var(--color-muted); font-size: .75rem; }

.mamun-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	text-align: center;
}
.mamun-brand-card:hover { border-color: var(--color-primary); }
.mamun-brand-card__media { display: flex; align-items: center; justify-content: center; height: 56px; }
.mamun-brand-card__media img { max-height: 56px; width: auto; object-fit: contain; }
.mamun-brand-card__name { color: var(--color-heading); font-size: .84rem; font-weight: 600; }

.mamun-testimonial {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	min-width: 260px;
}
.mamun-testimonial__text { margin: 0; color: var(--color-body); font-size: .92rem; }
.mamun-testimonial__author { display: flex; align-items: center; gap: 10px; }
.mamun-testimonial__avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.mamun-testimonial__meta { display: flex; flex-direction: column; }
.mamun-testimonial__meta strong { color: var(--color-heading); font-size: .9rem; }
.mamun-testimonial__meta small { color: var(--color-muted); font-size: .78rem; }

/* ------------------------------------------------------------------ *
 * 10. Section heading
 * ------------------------------------------------------------------ */
.mamun-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.mamun-section-heading__title { margin: 0; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.mamun-section-heading__subtitle { margin: 4px 0 0; color: var(--color-muted); font-size: .88rem; }

.mamun-section-heading__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	color: var(--color-primary);
	font-size: .87rem;
	font-weight: 600;
}

.mamun-section-heading--center { flex-direction: column; align-items: center; text-align: center; }

/* ------------------------------------------------------------------ *
 * 11. Drawers, overlay, toast, spinner
 * ------------------------------------------------------------------ */
.mamun-overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 32, 42, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
	z-index: var(--z-overlay);
}
.mamun-overlay.is-visible { opacity: 1; visibility: visible; }

.mamun-drawer {
	position: fixed;
	inset-block: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 90vw);
	max-width: 100%;
	background: #fff;
	box-shadow: var(--shadow-lg);
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
	z-index: var(--z-drawer);
	overscroll-behavior: contain;
}

.mamun-drawer--left { inset-inline-start: 0; transform: translateX(-102%); }
.mamun-drawer--right { inset-inline-end: 0; transform: translateX(102%); }
[dir="rtl"] .mamun-drawer--left { transform: translateX(102%); }
[dir="rtl"] .mamun-drawer--right { transform: translateX(-102%); }

.mamun-drawer[aria-hidden="true"] { visibility: hidden; }
.mamun-drawer.is-open { transform: translateX(0); visibility: visible; }

.mamun-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}

.mamun-drawer__heading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }

.mamun-drawer__body { flex: 1; overflow-y: auto; padding: 16px; }

.mamun-drawer__footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid var(--color-border);
	flex-shrink: 0;
}

.mamun-drawer__section + .mamun-drawer__section { margin-top: 22px; }

.mamun-drawer__title {
	margin: 0 0 10px;
	color: var(--color-muted);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mamun-drawer__menu a,
.mamun-drawer__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-heading);
	font-size: .92rem;
	font-weight: 500;
}
.mamun-drawer__menu a:hover,
.mamun-drawer__links a:hover { color: var(--color-primary); }
.mamun-drawer__menu .sub-menu { padding-inline-start: 14px; }

.mamun-toast {
	position: fixed;
	inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 76px);
	inset-inline: 16px;
	margin-inline: auto;
	max-width: 340px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background: var(--color-heading);
	color: #fff;
	font-size: .88rem;
	text-align: center;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--transition), transform var(--transition);
	z-index: var(--z-toast);
}
.mamun-toast.is-visible { opacity: 1; transform: translateY(0); }
.mamun-toast.is-error { background: var(--color-danger); }

.mamun-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mamun-spin .6s linear infinite;
}

@keyframes mamun-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Quantity control
 * ------------------------------------------------------------------ */
.mamun-qty,
.woocommerce .quantity.mamun-qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	transition: border-color var(--transition);
}
.mamun-qty:focus-within { border-color: var(--color-primary); }

.mamun-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: var(--control-height);
	border: 0;
	background: transparent;
	color: var(--color-heading);
	transition: background var(--transition);
}
.mamun-qty__btn:hover { background: var(--color-surface); }
.mamun-qty__btn[disabled] { opacity: .35; cursor: not-allowed; }

.mamun-qty__input,
.woocommerce .quantity.mamun-qty input.qty {
	width: 54px;
	height: var(--control-height);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-heading);
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mamun-qty__input:focus { box-shadow: none; }
.mamun-qty__input::-webkit-outer-spin-button,
.mamun-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mamun-qty--compact .mamun-qty__btn { width: 28px; height: 30px; }
.mamun-qty--compact .mamun-qty__input { width: 36px; height: 30px; font-size: .85rem; }

/* ------------------------------------------------------------------ *
 * 13. Empty state
 * ------------------------------------------------------------------ */
.mamun-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 20px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	text-align: center;
}
.mamun-empty-state__icon { color: var(--color-muted); }
.mamun-empty-state__title { margin: 0; color: var(--color-heading); font-size: 1.05rem; font-weight: 700; }
.mamun-empty-state__text { margin: 0; color: var(--color-muted); font-size: .9rem; max-width: 42ch; }
.mamun-empty-state--drawer { border: 0; background: transparent; padding: 32px 12px; }
.mamun-empty-state--page { padding: 56px 24px; }

/* ------------------------------------------------------------------ *
 * 14. Breadcrumb, page header, pagination
 * ------------------------------------------------------------------ */
.mamun-breadcrumb {
	padding-block: 10px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-muted);
	font-size: .82rem;
}
.mamun-breadcrumb__inner,
.mamun-breadcrumb .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--color-muted);
	font-size: .82rem;
}
.mamun-breadcrumb a { color: var(--color-body); }
.mamun-breadcrumb a:hover { color: var(--color-primary); }
.mamun-breadcrumb .sep { color: var(--color-border); }

.mamun-page-header { margin-bottom: 20px; }
.mamun-page-header--shop { padding-block: 20px 0; }
.mamun-page-title { margin: 0 0 6px; }
.mamun-page-header__desc { color: var(--color-muted); font-size: .92rem; }
.mamun-page-header__search { max-width: 520px; margin-top: 14px; }

.mamun-pagination,
.woocommerce-pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.mamun-pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }

.mamun-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-heading);
	font-size: .9rem;
	font-weight: 600;
}

.mamun-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.mamun-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 15. WooCommerce shared overrides
 * ------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-inline-start: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-heading);
	font-size: .9rem;
	list-style: none;
}

.woocommerce-message { border-inline-start-color: var(--color-success); }
.woocommerce-info { border-inline-start-color: var(--color-secondary); }
.woocommerce-error { border-inline-start-color: var(--color-danger); background: var(--color-danger-soft); }
.woocommerce-error li { list-style: none; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-inline-start: auto; padding: 8px 16px; font-size: .85rem; }

.woocommerce .woocommerce-Price-amount { white-space: nowrap; }
.screen-reader-text,
.woocommerce form .form-row label.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 16. Utilities
 * ------------------------------------------------------------------ */
.mamun-menu-placeholder {
	margin: 0;
	padding: 8px 12px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	font-size: .8rem;
}

.mamun-placeholder-img { background: var(--color-surface); }

.widget { margin-bottom: 24px; }
.widget-title {
	margin: 0 0 12px;
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--color-body); }
.widget ul li a:hover { color: var(--color-primary); }

/* ------------------------------------------------------------------ *
 * Floating actions (cart tab + WhatsApp)
 *
 * Both sit below the overlay/drawer in the existing z-index scale, so the cart
 * drawer always covers them and no new stacking war is introduced. Everything
 * is scoped under .mamun-floating.
 * ------------------------------------------------------------------ */
.mamun-floating__cart,
.mamun-floating__wa {
	position: fixed;
	z-index: var(--z-bottom-nav);
}

/* --- Cart tab: right, vertically centred --------------------------- */
.mamun-floating__cart {
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 78px;
	padding: 0;
	border: 0;
	border-start-start-radius: var(--radius-md);
	border-end-start-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font: inherit;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	overflow: hidden;
	transition: background var(--transition);
}

.mamun-floating__cart:hover { background: var(--color-primary-dark); color: #fff; }
.mamun-floating__cart:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 2px; }

.mamun-floating__cart-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 6px 8px;
	color: #fff;
}

.mamun-floating__cart-items {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
}

/* The count bubble is a shared fragment element; inside the tab it is plain
   text rather than the header's badge. */
.mamun-floating__cart-items .mamun-cart-count {
	position: static;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
}

.mamun-floating__cart-items small { font-size: .72rem; font-weight: 500; }

.mamun-floating__cart-total {
	display: block;
	padding: 7px 6px;
	background: #fff;
	color: var(--color-heading);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* --- WhatsApp bubble: bottom right ---------------------------------- */
.mamun-floating__wa {
	inset-inline-end: 24px;
	inset-block-end: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1faa53;
	color: #fff;
	box-shadow: var(--shadow-lg);
	transition: background var(--transition), transform var(--transition);
}

.mamun-floating__wa:hover { background: #179144; color: #fff; transform: translateY(-2px); }
.mamun-floating__wa:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 3px; }

/* Very subtle attention ring; no movement of the button itself. */
.mamun-floating__wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(31, 170, 83, .45);
	animation: mamun-wa-pulse 4s ease-out infinite;
	pointer-events: none;
}

@keyframes mamun-wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 170, 83, .45); }
	22%  { box-shadow: 0 0 0 12px rgba(31, 170, 83, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 170, 83, 0); }
}

/* The admin bar shifts everything down; keep the tab visually centred. */
.admin-bar .mamun-floating__cart { margin-block-start: 16px; }

/* Tablet and below: the mobile bottom bar already carries a cart control, so
   the tab would duplicate it. Below 992px is also where .mamun-bottom-nav is
   actually visible, so the clearance offsets belong in the same query — the
   body keeps its has-mobile-bottom-nav class at every width. */
@media (max-width: 991px) {
	.mamun-floating__cart { display: none; }

	/* Clear the 60px bottom navigation instead of covering it. */
	body.has-mobile-bottom-nav .mamun-floating__wa {
		inset-block-end: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
	}

	/* Product pages also float a sticky add-to-cart bar above that nav. */
	body.mamun-single-product.has-mobile-bottom-nav .mamun-floating__wa {
		inset-block-end: calc(124px + env(safe-area-inset-bottom, 0px) + 12px);
	}
}

@media (max-width: 575px) {
	.mamun-floating__wa { inset-inline-end: 16px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.mamun-floating__wa::after { animation: none; }
	.mamun-floating__wa:hover { transform: none; }
}