/* ==========================================================================
   Zaara Modernist — design tokens + component layer
   Ported 1:1 from "Zaara Store - Prototype Modernist.dc.html" inline styles.
   Loads after WooCommerce's own stylesheet (kept enqueued as a baseline for
   screens we don't hand-restyle, e.g. My Account) and overrides it wherever
   this theme provides its own markup.
   ========================================================================== */

:root {
	/* Neutrals, type scale and geometry follow Electro (MadrasThemes) — white
	   canvas, hairline separators instead of cards, squared corners, Inter at
	   14px/1.714. The accent stays Zaara's brand red rather than Electro's
	   default yellow: Electro ships an official red scheme at #ea1b25, so this
	   is that scheme tuned to the logo's exact red. */
	--zs-bg: #ffffff;
	--zs-surface: #f5f5f5;
	--zs-ink: #333e48;
	--zs-ink-2: #4a545e;
	--zs-mute-1: #62707c;
	--zs-mute-2: #878f96;
	--zs-mute-3: #a6adb3;
	--zs-mute-4: #c4c9cd;
	--zs-border: #dddddd;
	--zs-border-2: #ececec;
	--zs-accent: #ec3013;
	--zs-accent-hover: #d4260b;
	--zs-accent-text: #c9210a;
	--zs-tint-1: #fff2ef;
	--zs-tint-2: #ffe0d9;
	--zs-tint-3: #ffc4b8;
	--zs-success: #44b81b;
	--zs-success-tint: #eaf7e5;
	--zs-star: #f6b704;
	--zs-dark: #2f3336;
	--zs-dark-2: #3f4548;

	/* Electro is squared: cards are hairline-bordered panels, not rounded tiles. */
	--zs-radius-card: 4px;
	--zs-radius-card-sm: 3px;
	--zs-radius-pill: 999px;

	--zs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
	--zs-shadow-md: 0 2px 8px rgba(0, 0, 0, .08);
	--zs-shadow-lg: 0 10px 28px rgba(0, 0, 0, .14);

	--zs-font: Inter, 'Noto Sans Arabic', system-ui, sans-serif;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.zaara {
	margin: 0;
	background: var(--zs-bg);
	font-family: var(--zs-font);
	color: var(--zs-ink);
	-webkit-font-smoothing: antialiased;
}

.zaara a { color: var(--zs-accent-text); text-decoration: none; }
.zaara a:hover { color: var(--zs-accent); }
.zaara ::selection { background: var(--zs-tint-2); }
.zaara img { max-width: 100%; display: block; }
.zaara :focus-visible { outline: 2px solid var(--zs-accent); outline-offset: 2px; }

.zs-shell {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	position: relative;
}

.zs-ltr { direction: ltr; unicode-bidi: isolate; }

.zs-visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- buttons & tags ---------- */
.zs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 24px; border-radius: var(--zs-radius-card-sm);
	font-size: 14px; font-weight: 600; cursor: pointer; border: none;
	font-family: inherit; line-height: 1; letter-spacing: .01em;
	transition: background-color .15s ease, color .15s ease;
}
.zs-btn--sm { height: 36px; padding: 0 18px; font-size: 13px; }
.zs-btn--lg { height: 50px; padding: 0 26px; font-size: 15px; }
.zs-btn--block { width: 100%; }
.zs-btn--primary { background: var(--zs-accent); color: #fff; }
.zs-btn--primary:hover { background: var(--zs-accent-hover); color: #fff; }
.zs-btn--outline { background: var(--zs-bg); border: 1px solid var(--zs-border); color: var(--zs-ink); }
.zs-btn--outline:hover { background: var(--zs-border-2); color: var(--zs-ink); }
.zs-btn--dark { background: var(--zs-dark); color: var(--zs-surface); }
.zs-btn--dark:hover { background: var(--zs-dark-2); color: var(--zs-surface); }
.zs-btn--ghost { background: transparent; color: var(--zs-ink); }
.zs-btn--ghost:hover { background: var(--zs-border-2); }
.zs-btn--tint { background: var(--zs-tint-1); color: var(--zs-accent-text); }
.zs-btn--tint:hover { background: var(--zs-tint-2); }
.zs-btn-icon {
	width: 36px; height: 36px; border-radius: var(--zs-radius-pill); flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--zs-tint-1); color: var(--zs-accent-text); border: none; cursor: pointer;
}
.zs-btn-icon:hover { background: var(--zs-tint-2); }

.zs-tag {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
	border-radius: var(--zs-radius-pill); font-size: 12px; font-weight: 700;
}
.zs-tag--accent { background: var(--zs-tint-1); color: var(--zs-accent-text); }
.zs-tag--success { background: var(--zs-success-tint); color: var(--zs-success); }
.zs-tag--dark { background: var(--zs-dark); color: var(--zs-surface); }
.zs-tag--neutral { background: var(--zs-border-2); color: var(--zs-ink-2); letter-spacing: .1em; }

/* `.zaara a` paints every link accent-red at (0,1,1), which outranks a bare
   component class at (0,1,0). Every one of these lands on an <a>, so without
   re-asserting at (0,2,1) the primary button renders dark-red-on-red and the
   product grid comes out as a wall of red titles. */
.zaara a.zs-btn--primary, .zaara a.zs-btn--primary:hover,
.zaara a.zs-btn--dark, .zaara a.zs-btn--dark:hover,
.zaara a.zs-nav__all, .zaara a.zs-nav__all:hover { color: #fff; }
.zaara a.zs-btn--outline, .zaara a.zs-btn--ghost { color: var(--zs-ink); }
.zaara a.zs-btn--tint { color: var(--zs-accent-text); }
.zaara a.zs-account-link, .zaara a.zs-cart-link { color: var(--zs-ink); }
.zaara a.zs-product-card__title { color: var(--zs-ink); }
.zaara a.zs-product-card__title:hover { color: var(--zs-accent); }
.zaara a.zs-dept-card { color: var(--zs-ink); }
.zaara a.zs-dept-card:hover { color: var(--zs-accent); }
.zaara a.zs-section-link { color: var(--zs-mute-1); }
.zaara a.zs-section-link:hover { color: var(--zs-accent); }
.zaara .zs-footer__legal a { color: var(--zs-mute-2); }
.zaara .zs-footer__legal a:hover { color: var(--zs-surface); }

/* ---------- surfaces ---------- */
/* Electro panels are white with a hairline border rather than a tinted, shadowed tile. */
.zs-card { background: #fff; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card); }
.zs-card--sm-radius { border-radius: var(--zs-radius-card-sm); }
.zs-card--shadow { box-shadow: var(--zs-shadow-md); }
.zs-hr { height: 1px; background: var(--zs-border-2); border: none; margin: 0; }

/* ---------- topbar ---------- */
/* Electro's top-bar-v1: light grey utility strip above a white header. */
.zs-topbar {
	background: var(--zs-surface); color: var(--zs-mute-1); min-height: 36px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 5px 32px; font-size: 12px; gap: 12px; flex-wrap: wrap;
	border-bottom: 1px solid var(--zs-border);
}
.zs-topbar__group { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.zs-topbar__item { display: flex; gap: 7px; align-items: center; color: var(--zs-mute-1); }
.zs-topbar__item svg { flex: none; }
.zs-lang-switch { display: flex; gap: 2px; }
.zs-lang-switch a {
	padding: 4px 10px; border-radius: var(--zs-radius-card-sm); font-size: 12px;
	font-weight: 600; cursor: pointer; color: var(--zs-mute-1);
}
.zs-lang-switch a.is-active { background: var(--zs-accent); color: #fff; }

/* ---------- header ---------- */
.zs-header {
	background: #fff; padding: 16px 32px; display: flex;
	align-items: center; gap: 28px;
	position: relative; z-index: 5; flex-wrap: wrap;
}
.zs-logo { flex: none; display: flex; align-items: center; gap: 10px; }
/* The brand lockup is stacked (bag mark over the wordmark), roughly 1.3:1, so
   it needs more height than a horizontal logo would to keep "ZAARA STORE" legible. */
.zs-logo img { height: 62px; width: auto; }
/* Electro's navbar-search: 2px accent-bordered field welded to a solid button. */
.zs-search {
	flex: 1; min-width: 220px; display: flex; align-items: center; height: 44px;
	background: #fff; border: 2px solid var(--zs-accent); border-radius: var(--zs-radius-card-sm);
	padding-inline: 16px 0; gap: 12px; overflow: hidden;
}
.zs-search:focus-within { border-color: var(--zs-accent-hover); }
.zs-search input {
	flex: 1; border: none; background: transparent; font-size: 14px; color: var(--zs-ink);
	font-family: inherit; outline: none; min-width: 0;
}
.zs-search input::placeholder { color: var(--zs-mute-2); }
.zs-search button {
	height: 100%; padding: 0 26px; background: var(--zs-accent); color: #fff; border: none;
	border-radius: 0; font-size: 13.5px; font-weight: 600; cursor: pointer; align-self: stretch;
}
.zs-search button:hover { background: var(--zs-accent-hover); }
.zs-header__actions { display: flex; gap: 6px; flex: none; align-items: center; }
.zs-account-link {
	display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px;
	border-radius: var(--zs-radius-card-sm); color: var(--zs-ink);
}
.zs-account-link:hover { background: var(--zs-border-2); color: var(--zs-ink); }
.zs-account-link__meta { display: flex; flex-direction: column; line-height: 1.25; }
.zs-account-link__hello { font-size: 11px; color: var(--zs-mute-2); }
.zs-account-link__name { font-size: 13px; font-weight: 600; }
/* Electro's mini-cart sits bare in the header, the count riding the icon. */
.zs-cart-link {
	display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; height: 44px;
	border-radius: var(--zs-radius-card-sm); background: transparent; border: none;
	color: var(--zs-ink); position: relative;
}
.zs-cart-link:hover { background: var(--zs-surface); color: var(--zs-ink); }
.zs-cart-link__meta { display: flex; flex-direction: column; line-height: 1.25; }
.zs-cart-link__count { font-size: 11px; color: var(--zs-mute-2); }
.zs-cart-link__total { font-size: 14px; font-weight: 700; color: var(--zs-ink); }

/* ---------- department nav ---------- */
/* Electro's signature primary navbar: a full-width dark bar whose first item is
   the departments button in the accent colour, the rest plain uppercase links. */
.zs-nav {
	background: var(--zs-dark); padding: 0 32px; display: flex; align-items: stretch;
	gap: 0; min-height: 48px; position: relative; z-index: 4; flex-wrap: wrap;
}
/* Also a <button> (it opens the departments drawer), so reset the UA styles. */
.zs-nav__all {
	display: flex; align-items: center; gap: 8px; padding: 0 20px;
	border: none; border-radius: 0; background: var(--zs-accent); color: #fff;
	font-family: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .02em; cursor: pointer;
}
.zs-nav__all:hover { color: #fff; background: var(--zs-accent-hover); }

/* ---------- departments off-canvas ---------- */
.zs-offcanvas { position: fixed; inset: 0; z-index: 100; }
.zs-offcanvas[hidden] { display: none; }
.zs-offcanvas__scrim {
	position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
	opacity: 0; transition: opacity .2s ease; cursor: pointer;
}
.zs-offcanvas__panel {
	position: absolute; inset-block: 0; inset-inline-start: 0; width: min(340px, 88vw);
	background: #fff; display: flex; flex-direction: column; gap: 14px; padding: 18px;
	box-shadow: var(--zs-shadow-lg); overflow-y: auto;
	transform: translateX(-100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .zs-offcanvas__panel { transform: translateX(100%); }
.zs-offcanvas.is-open .zs-offcanvas__scrim { opacity: 1; }
.zs-offcanvas.is-open .zs-offcanvas__panel { transform: translateX(0); }
.zs-offcanvas__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zs-offcanvas__title { font-size: 15px; font-weight: 700; }
.zs-offcanvas__close {
	width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
	border: none; background: var(--zs-surface); color: var(--zs-ink); border-radius: var(--zs-radius-card-sm); cursor: pointer;
}
.zs-offcanvas__close:hover { background: var(--zs-border-2); }
.zs-offcanvas__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.zaara .zs-offcanvas__link {
	display: flex; align-items: center; gap: 12px; padding: 11px 10px;
	border-radius: var(--zs-radius-card-sm); color: var(--zs-ink); font-size: 14px;
}
.zaara .zs-offcanvas__link:hover { background: var(--zs-surface); color: var(--zs-accent); }
.zs-offcanvas__link-icon { display: flex; color: var(--zs-mute-1); flex: none; }
.zaara .zs-offcanvas__link:hover .zs-offcanvas__link-icon { color: var(--zs-accent); }
.zs-offcanvas__link-name { flex: 1; min-width: 0; }
.zs-offcanvas__link-count { font-size: 12px; color: var(--zs-mute-3); }
.zs-offcanvas__section {
	margin-top: 16px; padding: 0 10px 6px; font-size: 12px; font-weight: 700;
	letter-spacing: .1em; color: var(--zs-mute-2); text-transform: uppercase;
}
.zs-offcanvas__brands { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.zs-offcanvas__empty { font-size: 13px; color: var(--zs-mute-2); padding: 0 10px; }
/* Specificity has to clear `.zaara a`, which paints every link accent-red. */
.zaara .zs-nav__link {
	padding: 0 16px; border-radius: 0; font-size: 13px; font-weight: 500;
	color: #fff; display: flex; align-items: center;
}
.zaara .zs-nav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.zaara .zs-nav__deals {
	margin-inline-start: auto; display: flex; align-items: center; gap: 7px; padding: 0 16px;
	font-size: 13px; font-weight: 700; color: #ff7a63; text-transform: uppercase;
}
.zaara .zs-nav__deals:hover { color: #fff; }

/* ---------- section headers ---------- */
/* Electro section headers: a rule across the full width, the title sitting on it
   with a 2px accent underline marking the active block. */
.zs-section { padding: 0 32px 32px; }
.zs-section-head {
	display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
	border-bottom: 1px solid var(--zs-border);
}
.zs-section-title {
	font: 700 17px/1.6 var(--zs-font); letter-spacing: 0; margin: 0;
	padding-bottom: 10px; position: relative; color: var(--zs-ink);
}
.zs-section-title::after {
	content: ''; position: absolute; bottom: -1px; inset-inline-start: 0; width: 100%;
	border-bottom: 2px solid var(--zs-accent);
}
.zs-section-meta { font-size: 12px; color: var(--zs-mute-2); }
.zs-section-link {
	margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--zs-mute-1);
	display: flex; align-items: center; gap: 6px; padding-bottom: 10px;
}
.zs-section-link:hover { color: var(--zs-accent); }

/* ---------- hero ---------- */
.zs-hero-row { padding: 28px 32px; display: grid; grid-template-columns: 1fr 348px; gap: 20px; }
.zs-hero {
	background: var(--zs-surface); border-radius: var(--zs-radius-card); padding: 40px;
	display: flex; gap: 32px; align-items: center; box-shadow: var(--zs-shadow-md); overflow: hidden;
}
.zs-hero__body { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zs-hero__title { font: 800 46px/1.06 var(--zs-font); letter-spacing: -.03em; max-width: 460px; margin: 0; }
.zs-hero__desc { font-size: 15px; line-height: 1.6; color: var(--zs-mute-1); max-width: 420px; margin: 0; }
.zs-hero__actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.zs-hero__countdown { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.zs-hero__countdown-label { font-size: 11.5px; color: var(--zs-mute-2); letter-spacing: .1em; }
.zs-hero__clock { display: flex; gap: 6px; }
.zs-hero__clock span {
	min-width: 52px; text-align: center; padding: 8px 0; background: var(--zs-dark);
	color: var(--zs-surface); border-radius: 10px;
}
.zs-hero__clock b { display: block; font: 700 16px/1 var(--zs-font); }
.zs-hero__clock em { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .1em; color: #9b9797; margin-top: 3px; }
.zs-hero__media {
	width: 330px; height: 290px; border-radius: 14px; background: var(--zs-border-2); flex: none;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.zs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.zs-hero-side { display: flex; flex-direction: column; gap: 20px; }
.zs-hero-side__item {
	flex: 1; background: var(--zs-surface); border-radius: var(--zs-radius-card); padding: 22px;
	display: flex; gap: 16px; align-items: center; box-shadow: var(--zs-shadow-sm);
}
.zs-hero-side__item:hover { box-shadow: var(--zs-shadow-md); }
.zs-hero-side__kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--zs-accent-text); }
.zs-hero-side__title { font: 700 19px/1.2 var(--zs-font); letter-spacing: -.01em; }
.zs-hero-side__desc { font-size: 12.5px; color: var(--zs-mute-2); line-height: 1.5; }
.zs-hero-side__media { width: 88px; height: 88px; flex: none; border-radius: 12px; background: var(--zs-border-2); overflow: hidden; }
.zs-hero-side__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- trust badges ---------- */
.zs-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zs-trust-item { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.zs-trust-item__icon {
	width: 40px; height: 40px; flex: none; border-radius: var(--zs-radius-pill);
	background: var(--zs-tint-1); color: var(--zs-accent); display: flex; align-items: center; justify-content: center;
}
.zs-trust-item__title { font-size: 13.5px; font-weight: 600; display: block; }
.zs-trust-item__desc { font-size: 12px; color: var(--zs-mute-2); }

/* ---------- department grid ---------- */
/* Same hairline-sheet treatment as the product grid, centred like Electro's
   "shop by category" block. */
.zs-dept-grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
	border: 1px solid var(--zs-border); background: #fff;
}
.zs-dept-card {
	padding: 22px 16px; display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 12px; color: var(--zs-ink); background: #fff;
	border-inline-end: 1px solid var(--zs-border-2); border-bottom: 1px solid var(--zs-border-2);
	border-radius: 0;
}
.zs-dept-card:hover { color: var(--zs-accent); box-shadow: var(--zs-shadow-md); }
.zs-dept-card__icon {
	width: 48px; height: 48px; border-radius: var(--zs-radius-pill); background: var(--zs-surface); color: var(--zs-ink-2);
	display: flex; align-items: center; justify-content: center;
}
.zs-dept-card:hover .zs-dept-card__icon { background: var(--zs-tint-1); color: var(--zs-accent); }
.zs-dept-card__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.zs-dept-card__count { font-size: 11.5px; color: var(--zs-mute-2); }

/* ---------- product cards & grids ---------- */
/* Electro lays products out as one bordered sheet: no gaps, hairline separators
   between cells, and the whole grid boxed. Products are contained (not cropped)
   on white, the way an electronics catalogue shows a packshot. */
.zs-product-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	border: 1px solid var(--zs-border); background: #fff;
}
.zs-product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.zs-product-card {
	background: #fff; border-radius: 0; overflow: visible; position: relative;
	display: flex; flex-direction: column; color: inherit;
	border-inline-end: 1px solid var(--zs-border-2); border-bottom: 1px solid var(--zs-border-2);
	transition: box-shadow .18s ease;
}
.zs-product-card:hover { box-shadow: var(--zs-shadow-lg); color: inherit; z-index: 2; }
.zs-product-card__media {
	position: relative; height: 200px; background: #fff; display: flex;
	align-items: center; justify-content: center; overflow: hidden; padding: 14px;
}
.zs-product-card__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
/* Electro anchors the discount flag to the bottom-left of the packshot, in green. */
.zs-product-card__badge {
	position: absolute; bottom: 0; inset-inline-start: 0; padding: 3px 10px;
	border-radius: 0; background: var(--zs-success); color: #fff; font-size: 12px; font-weight: 700;
	min-width: 40px; text-align: center;
}
.zs-product-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zs-product-card__brand { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--zs-mute-3); }
.zs-product-card__title {
	font-size: 14px; font-weight: 400; line-height: 1.35; min-height: 38px; color: var(--zs-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zs-product-card__title:hover { color: var(--zs-accent); }
.zs-product-card__spec { font-size: 12px; color: var(--zs-mute-2); }
.zs-product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--zs-mute-1); }
.zs-product-card__rating svg { color: var(--zs-star); }
/* Electro's price-add-to-cart strip: price left, round add button right. */
.zs-product-card__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: auto; padding-top: 10px; min-height: 46px;
}
.zs-product-card__price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.zs-price { font: 700 20px/1 var(--zs-font); letter-spacing: -.01em; color: var(--zs-accent); }
.zs-price--sm { font-size: 18px; }
.zs-price-old { font-size: 13px; color: var(--zs-mute-3); text-decoration: line-through; }

/* WooCommerce's own get_price_html() markup, restyled in place. */
.zs-product-card__price-row ins, .zs-price-row ins { text-decoration: none; font: 700 20px/1 var(--zs-font); letter-spacing: -.01em; color: var(--zs-accent); }
.zs-product-card__price-row del, .zs-price-row del { font-size: 13px; color: var(--zs-mute-3); text-decoration: line-through; opacity: 1; }
.zs-price-row ins { font-size: 40px; color: var(--zs-accent); }
.zs-price-row del { font-size: 16px; }
.zs-product-card__stock { font-size: 12px; color: var(--zs-mute-1); display: flex; align-items: center; gap: 6px; }
.zs-product-card__stock svg { color: var(--zs-success); }
/* Icon-only round button, as Electro does it: the label stays in the DOM for
   screen readers and for WooCommerce's own AJAX handler, just not on screen.
   Selector is deliberately at (0,3,0) — WooCommerce styles `.woocommerce
   a.button` at (0,2,1) and would otherwise restore the square text button,
   including its own `background-image: none`. It renders as an <a>, so the
   display must be set too or width/height are ignored. */
.zaara .zs-product-card .zs-product-card__add,
.zaara .zs-product-card .added_to_cart {
	display: inline-flex; flex: none; width: 38px; height: 38px; min-width: 0;
	border-radius: var(--zs-radius-pill);
	background-color: var(--zs-accent); border: none; cursor: pointer; padding: 0; margin: 0;
	font-size: 0; line-height: 0; color: transparent; overflow: hidden;
	background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='19.5' r='1.7'/%3E%3Ccircle cx='17.5' cy='19.5' r='1.7'/%3E%3Cpath d='M2 3.5h2.8l2.7 12h10.4L21 7H6'/%3E%3C/svg%3E");
}
.zaara .zs-product-card .zs-product-card__add:hover,
.zaara .zs-product-card .added_to_cart:hover { background-color: var(--zs-accent-hover); }
.zaara .zs-product-card .zs-product-card__add.loading { opacity: .6; }
.zs-product-card__add-round {
	width: 36px; height: 36px; border-radius: var(--zs-radius-pill); background: var(--zs-tint-1);
	color: var(--zs-accent-text); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
}
.zs-product-card__add-round:hover { background: var(--zs-tint-2); }

/* ---------- brand strip ---------- */
.zs-brand-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zs-brand-strip__label { font-size: 13px; color: var(--zs-mute-2); margin-inline-end: 8px; }
.zs-brand-chip {
	padding: 9px 18px; background: var(--zs-surface); border-radius: var(--zs-radius-pill); font-size: 12.5px;
	font-weight: 600; letter-spacing: .06em; color: var(--zs-ink-2);
}
.zs-brand-chip:hover { background: var(--zs-dark); color: var(--zs-surface); }

/* ---------- packs ---------- */
.zs-pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zs-pack-card { padding: 20px; display: flex; gap: 18px; align-items: center; }
.zs-pack-card__media { display: flex; align-items: center; gap: 10px; flex: none; }
.zs-pack-card__thumb { width: 78px; height: 78px; border-radius: 12px; background: var(--zs-border-2); overflow: hidden; }
.zs-pack-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zs-pack-card__plus { color: var(--zs-mute-3); flex: none; display: flex; }
.zs-pack-card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zs-pack-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.zs-pack-card__prices { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

/* ---------- promo banner ---------- */
.zs-promo-banner {
	margin: 0 32px 32px; background: var(--zs-accent); color: #fff; border-radius: 20px; padding: 40px;
	display: grid; grid-template-columns: 1fr 420px; gap: 36px; align-items: center;
}
.zs-promo-banner__body { display: flex; flex-direction: column; gap: 14px; }
.zs-promo-banner__kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; opacity: .85; }
.zs-promo-banner__title { font: 800 38px/1.08 var(--zs-font); letter-spacing: -.03em; max-width: 500px; margin: 0; }
.zs-promo-banner__desc { font-size: 14.5px; line-height: 1.6; max-width: 460px; opacity: .92; }
.zs-promo-banner__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.zs-promo-banner__actions .zs-btn--dark { background: var(--zs-dark); }
.zs-promo-banner__ghost {
	height: 44px; padding: 0 22px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: var(--zs-radius-pill);
	display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff;
}
.zs-promo-banner__ghost:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.zs-promo-banner__media {
	height: 210px; border-radius: 14px; background: rgba(255, 255, 255, .14); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.zs-promo-banner__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- breadcrumb ---------- */
.zs-breadcrumb { padding: 20px 32px 8px; font-size: 12.5px; color: var(--zs-mute-2); }
.zs-breadcrumb a { color: var(--zs-mute-2); }
.zs-breadcrumb a:hover { color: var(--zs-accent-text); }

.zs-page-head { padding: 0 32px 20px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.zs-page-head__title { font: 800 34px/1 var(--zs-font); letter-spacing: -.03em; margin: 0; }
.zs-page-head__meta { font-size: 13.5px; color: var(--zs-mute-2); padding-bottom: 3px; }

/* ---------- shop / archive ---------- */
.zs-shop-layout { padding: 0 32px 32px; display: grid; grid-template-columns: 268px 1fr; gap: 24px; align-items: start; }

/* Desktop: the filter drawer is just a column. `display` beats the `hidden`
   attribute, so the same markup that the off-canvas JS toggles on mobile stays
   permanently visible here without JS having to know the difference. */
.zs-filters-wrap, .zs-filters-wrap[hidden] { display: block; position: static; }
.zs-filters-wrap .zs-offcanvas__scrim { display: none; }
.zs-filters-wrap .zs-offcanvas__panel {
	position: static; width: auto; transform: none; padding: 0; gap: 0;
	box-shadow: none; overflow: visible; background: transparent;
}
.zs-filters-wrap__head { display: none; }
.zs-filters-toggle { display: none; }
.zs-filters { padding: 22px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 20px; }
.zs-filters__head { display: flex; align-items: center; gap: 9px; }
.zs-filters__head-icon { color: var(--zs-ink-2); display: flex; }
.zs-filters__title { font-size: 15px; font-weight: 700; }
.zs-filters__clear { margin-inline-start: auto; font-size: 12px; color: var(--zs-accent-text); }
.zs-filters__group { display: flex; flex-direction: column; gap: 11px; }
.zs-filters__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--zs-mute-2); }
.zs-checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--zs-ink); }
.zs-checkbox-row:hover { color: var(--zs-ink); }
.zs-checkbox-row input { position: absolute; opacity: 0; width: 19px; height: 19px; margin: 0; cursor: pointer; }
.zs-checkbox-box {
	width: 19px; height: 19px; border-radius: 5px; flex: none; display: flex; align-items: center;
	justify-content: center; border: 1.5px solid var(--zs-mute-4); background: transparent; color: #fff;
}
.zs-checkbox-row input:checked ~ .zs-checkbox-box { border-color: var(--zs-accent); background: var(--zs-accent); }
.zs-checkbox-row__name { flex: 1; }
.zs-checkbox-row__count { font-size: 12px; color: var(--zs-mute-3); }
.zs-range-value { font-size: 13.5px; }
.zs-range-value b { font-weight: 700; }
.zs-range input[type="range"] { width: 100%; accent-color: var(--zs-accent); }
.zs-range__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--zs-mute-3); }

.zs-toolbar {
	background: var(--zs-surface); border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card-sm);
	padding: 8px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.zs-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs-chip {
	display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--zs-radius-card-sm);
	background: var(--zs-tint-1); color: var(--zs-accent-text); font-size: 12.5px; font-weight: 600; border: none; cursor: pointer;
}
.zs-sort { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zs-mute-1); flex-wrap: wrap; }
.zs-sort a { padding: 6px 13px; border-radius: var(--zs-radius-card-sm); font-size: 12.5px; font-weight: 600; color: var(--zs-mute-1); }
.zs-sort a.is-active { background: var(--zs-accent); color: #fff; }
.zs-sort a:hover { color: var(--zs-ink); }

.zs-pagination { display: flex; justify-content: center; gap: 6px; padding: 20px 0 0; }
.zs-pagination a, .zs-pagination span {
	min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--zs-radius-card-sm);
	display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600;
	background: #fff; border: 1px solid var(--zs-border); color: var(--zs-ink-2);
}
.zs-pagination .current { background: var(--zs-accent); border-color: var(--zs-accent); color: #fff; }
.zs-pagination a:hover { background: var(--zs-surface); color: var(--zs-ink); }


/* ---------- single product ---------- */
.zs-product-layout { padding: 12px 32px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.zs-gallery { display: flex; gap: 14px; position: sticky; top: 20px; }
.zs-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; flex: none; }
.zs-gallery__thumb {
	width: 76px; height: 76px; border-radius: 12px; background: var(--zs-border-2); overflow: hidden;
	border: 2px solid transparent; cursor: pointer; padding: 0;
}
.zs-gallery__thumb.is-active { border-color: var(--zs-accent); }
.zs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zs-gallery__main {
	flex: 1; min-height: 460px; background: var(--zs-surface); border-radius: var(--zs-radius-card);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.zs-gallery__main img { width: 100%; height: 100%; object-fit: contain; }

/* woocommerce_show_product_images() emits WooCommerce's own gallery markup, not
   the .zs-gallery__* classes above — it's styled further down, next to the rest
   of the WooCommerce-native overrides. */
.zaara .zs-gallery { display: block; }

.zs-buybox { display: flex; flex-direction: column; gap: 16px; }
.zs-buybox__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zs-buybox__title { font: 800 34px/1.1 var(--zs-font); letter-spacing: -.03em; margin: 0; }
.zs-buybox__desc { font-size: 14.5px; line-height: 1.6; color: var(--zs-mute-1); }
.zs-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zs-price--lg { font: 800 40px/1 var(--zs-font); letter-spacing: -.03em; color: var(--zs-accent); }

.zs-buybox__actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

.zs-trust-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.zs-trust-mini { display: flex; gap: 11px; align-items: center; padding: 14px; }
.zs-trust-mini svg { color: var(--zs-accent); flex: none; }
.zs-trust-mini__title { font-size: 12.5px; font-weight: 600; display: block; }
.zs-trust-mini__desc { font-size: 11.5px; color: var(--zs-mute-2); }

.zs-specs-table { border-radius: var(--zs-radius-card-sm); overflow: hidden; }
.zs-specs-row { display: flex; padding: 13px 18px; border-bottom: 1px solid var(--zs-border-2); font-size: 13.5px; }
.zs-specs-row:last-child { border-bottom: none; }
.zs-specs-row dt { width: 180px; flex: none; color: var(--zs-mute-2); font-weight: 400; margin: 0; }
.zs-specs-row dd { font-weight: 600; margin: 0; }

.zs-crosssell-card { padding: 14px; display: flex; gap: 14px; align-items: center; }
.zs-crosssell-card__thumb { width: 66px; height: 66px; border-radius: 10px; background: var(--zs-border-2); flex: none; overflow: hidden; }
.zs-crosssell-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zs-crosssell-card__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ---------- cart ---------- */
.zs-cart-layout { padding: 16px 32px 40px; display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.zs-cart-lines { display: flex; flex-direction: column; gap: 12px; }
.zs-cart-line { padding: 18px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.zs-cart-line__media { width: 104px; height: 104px; border-radius: 12px; background: var(--zs-border-2); flex: none; overflow: hidden; }
.zs-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.zs-cart-line__body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.zs-cart-line__remove {
	width: 38px; height: 38px; border-radius: var(--zs-radius-pill); display: flex; align-items: center;
	justify-content: center; color: var(--zs-mute-3); background: transparent; border: none; cursor: pointer;
}
.zs-cart-line__remove:hover { background: var(--zs-tint-2); color: var(--zs-accent-text); }
.zs-cart-empty { padding: 60px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.zs-cart-empty svg { color: var(--zs-mute-4); }
.zs-promo-row { padding: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zs-promo-row input { flex: 1; min-width: 160px; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-pill); height: 40px; padding: 0 16px; font-family: inherit; }

.zs-summary { padding: 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.zs-summary__title { font-size: 16px; font-weight: 700; }
.zs-summary__row { display: flex; justify-content: space-between; font-size: 14px; }
.zs-summary__row span:first-child { color: var(--zs-mute-1); }
.zs-summary__row span:last-child { font-weight: 600; }
.zs-summary__row--free span:last-child { color: var(--zs-success); }
.zs-summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.zs-summary__total-label { font-size: 15px; font-weight: 700; }
.zs-summary__total-value { font: 800 28px/1 var(--zs-font); letter-spacing: -.02em; }
.zs-summary__trust { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--zs-border-2); }
.zs-summary__trust-item { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--zs-mute-1); }
.zs-summary__trust-item svg { color: var(--zs-accent); }

/* ---------- checkout ---------- */
.zs-checkout-head { padding: 24px 32px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zs-checkout-steps { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zs-checkout-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--zs-mute-3); }
.zs-checkout-step.is-active, .zs-checkout-step.is-done { color: var(--zs-ink); }
.zs-checkout-step__num {
	width: 24px; height: 24px; border-radius: var(--zs-radius-pill); display: flex; align-items: center;
	justify-content: center; font-size: 12px; background: var(--zs-border); color: #fff;
}
.zs-checkout-step.is-active .zs-checkout-step__num, .zs-checkout-step.is-done .zs-checkout-step__num { background: var(--zs-accent); }
.zs-checkout-layout { padding: 0 32px 40px; display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.zs-panel { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.zs-panel__title { font-size: 16px; font-weight: 700; margin: 0; }
.zs-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zs-radio-card {
	display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; cursor: pointer;
	border: 1.5px solid var(--zs-border); background: #fff; position: relative;
}
/* Selection follows the real input, not a server-rendered class: the radio is
   visually hidden, so keying off :checked is what makes a click show up
   immediately instead of waiting for WooCommerce's AJAX re-render. The hidden
   variant is WooCommerce's single-shipping-method case — no radio to check,
   and it's always the chosen one. */
.zs-radio-card:has(input:checked),
.zs-radio-card:has(input[type="hidden"]) { border-color: var(--zs-accent); background: var(--zs-tint-1); }
.zs-radio-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zs-radio-card input:focus-visible { outline: 2px solid var(--zs-accent); outline-offset: 2px; }
.zs-radio-dot { width: 18px; height: 18px; border-radius: var(--zs-radius-pill); flex: none; border: 5px solid var(--zs-mute-4); background: #fff; }
.zs-radio-card:has(input:checked) .zs-radio-dot,
.zs-radio-card:has(input[type="hidden"]) .zs-radio-dot { border-color: var(--zs-accent); }
.zs-radio-card__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.zs-radio-card__title { font-size: 14px; font-weight: 600; }
.zs-radio-card__desc { font-size: 12px; color: var(--zs-mute-2); }
.zs-radio-card__price { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--zs-success); }
.zs-radio-card__icon { color: var(--zs-ink-2); display: flex; }
.zs-radio-card__tag { margin-inline-start: auto; padding: 5px 11px; border-radius: var(--zs-radius-pill); background: var(--zs-success-tint); color: var(--zs-success); font-size: 11.5px; font-weight: 700; }
.zs-payment-list { display: flex; flex-direction: column; gap: 10px; }

.zs-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zs-field { display: flex; flex-direction: column; gap: 7px; }
.zs-field--wide { grid-column: span 2; }
.zs-field label { font-size: 12px; font-weight: 600; color: var(--zs-mute-2); }
.zs-field input, .zs-field select, .zs-field textarea {
	height: 46px; background: #fff; border: 1px solid var(--zs-border); border-radius: 10px; padding: 0 14px;
	font-size: 14px; color: var(--zs-ink); font-family: inherit; width: 100%;
}
.zs-field textarea { height: auto; padding: 12px 14px; min-height: 88px; resize: vertical; }
.zs-field input:hover, .zs-field select:hover { border-color: var(--zs-mute-4); }
.zs-field input:focus, .zs-field select:focus, .zs-field textarea:focus { border-color: var(--zs-accent); outline: none; }

.zs-order-line { display: flex; gap: 12px; align-items: center; }
.zs-order-line__thumb { width: 48px; height: 48px; border-radius: 10px; background: var(--zs-border-2); flex: none; overflow: hidden; }
.zs-order-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zs-order-line__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.zs-order-legal { font-size: 11.5px; color: var(--zs-mute-2); text-align: center; line-height: 1.5; }

/* ---------- thank you ---------- */
.zs-confirm-layout { padding: 40px 32px 48px; display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.zs-confirm { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.zs-confirm__icon {
	width: 64px; height: 64px; border-radius: var(--zs-radius-pill); background: var(--zs-success-tint); color: var(--zs-success);
	display: flex; align-items: center; justify-content: center;
}
.zs-confirm__title { font: 800 32px/1.1 var(--zs-font); letter-spacing: -.03em; margin: 0; }
.zs-confirm__desc { font-size: 15px; color: var(--zs-mute-1); line-height: 1.6; max-width: 520px; }
.zs-confirm__meta { display: flex; gap: 26px; margin-top: 6px; flex-wrap: wrap; }
.zs-confirm__meta-item { display: flex; flex-direction: column; gap: 3px; }
.zs-confirm__meta-item span:first-child { font-size: 12px; color: var(--zs-mute-2); }
.zs-confirm__meta-item span:last-child { font-size: 16px; font-weight: 700; }

.zs-track { padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.zs-timeline { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.zs-timeline__step { flex: 1; min-width: 90px; display: flex; flex-direction: column; gap: 10px; }
.zs-timeline__row { display: flex; align-items: center; }
.zs-timeline__dot {
	width: 30px; height: 30px; border-radius: var(--zs-radius-pill); flex: none; display: flex; align-items: center;
	justify-content: center; color: #fff; background: var(--zs-border);
}
.zs-timeline__step.is-on .zs-timeline__dot { background: var(--zs-success); }
.zs-timeline__bar { flex: 1; height: 3px; background: var(--zs-border); }
.zs-timeline__step.is-on + .zs-timeline__step .zs-timeline__bar { background: var(--zs-success); }
.zs-timeline__name { font-size: 13.5px; font-weight: 600; color: var(--zs-mute-3); }
.zs-timeline__step.is-on .zs-timeline__name { color: var(--zs-ink); }
.zs-timeline__date { font-size: 11.5px; color: var(--zs-mute-3); }

/* ---------- footer ---------- */
.zs-footer { background: var(--zs-dark); color: var(--zs-surface); padding: 40px 32px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.zs-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.zs-footer__brand img { height: 72px; width: auto; align-self: flex-start; }
/* The bundled logo-light.png already ships light-on-transparent for this
   background; an uploaded Customizer logo can't be recoloured, so it keeps the
   old invert() treatment on the assumption it's dark-on-light artwork. */
.zs-footer__brand img.is-custom-logo { filter: invert(1) grayscale(1) contrast(1.15); }
.zs-footer__blurb { font-size: 13px; color: var(--zs-mute-3); line-height: 1.65; max-width: 290px; }
.zs-footer__social { display: flex; gap: 9px; }
.zs-footer__social a {
	width: 36px; height: 36px; border-radius: var(--zs-radius-pill); background: var(--zs-dark-2); display: flex;
	align-items: center; justify-content: center; color: #d7d3d3;
}
.zs-footer__social a:hover { background: var(--zs-accent); color: #fff; }
.zs-footer__col { display: flex; flex-direction: column; gap: 10px; }
.zs-footer__col-title { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #fff; margin-bottom: 4px; }
.zs-footer__col a { font-size: 13px; color: var(--zs-mute-3); }
.zs-footer__col a:hover { color: var(--zs-surface); }
.zs-footer__bottom {
	background: var(--zs-dark); color: var(--zs-mute-2); padding: 20px 32px 28px; font-size: 12px; display: flex;
	justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--zs-dark-2);
}
.zs-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- toast ---------- */
.zs-toast {
	position: fixed; left: 50%; transform: translateX(-50%); bottom: -90px; display: flex; align-items: center;
	gap: 10px; padding: 14px 22px; border-radius: var(--zs-radius-pill); background: var(--zs-dark); color: var(--zs-surface);
	box-shadow: var(--zs-shadow-lg); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); z-index: 200; opacity: 0; pointer-events: none;
}
.zs-toast.is-visible { bottom: 28px; opacity: 1; }

/* ---------- WooCommerce native markup bridge ----------
   Grid/gallery/quantity/rating markup we don't fully re-template (related
   products, cross-sells, the product gallery, quantity inputs) keeps
   WooCommerce's real classes — restyle those in place instead of the
   float-based grid its own stylesheet applies. */
/* One bordered sheet with hairline cells, like .zs-product-grid. WooCommerce
   stamps a columns-N class on the list, so archives (3 up, see
   loop_shop_columns) and related products (4 up) share one rule. */
.zaara ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--zs-border); background: #fff;
}
.zaara ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.zaara ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.zaara ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.zaara ul.products::before, .zaara ul.products::after { content: none; display: none; }
.zaara ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
.zaara .zs-related-products, .zaara .zs-cross-sells { margin-top: 8px; }

/* Electro shows the packshot boxed with a thumbnail strip underneath, rather
   than a column of thumbs running down the side of the page. */
.zaara .woocommerce-product-gallery { flex: 1; width: 100%; float: none; margin: 0; }
.zaara .woocommerce-product-gallery__wrapper { border-radius: 0; overflow: hidden; background: #fff; margin: 0; }
.zaara .woocommerce-product-gallery .flex-viewport,
.zaara .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--zs-border); background: #fff;
}
.zaara .woocommerce-product-gallery .flex-control-thumbs {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
	list-style: none; margin: 10px 0 0; padding: 0; width: 100%;
}
.zaara .woocommerce-product-gallery .flex-control-thumbs li { width: auto; height: auto; float: none; margin: 0; }
.zaara .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%; height: auto; display: block; object-fit: contain; border-radius: 0;
	border: 1px solid var(--zs-border); background: #fff; cursor: pointer; opacity: .65;
}
.zaara .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.zaara .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--zs-accent); }

.zaara .star-rating { color: var(--zs-star); }
.zaara p.stars { display: none; } /* interactive review-form rating widget, not the read-only summary */

.zaara form.cart { display: flex; flex-direction: column; gap: 14px; }
.zaara .quantity {
	display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--zs-border);
	border-radius: var(--zs-radius-pill); background: var(--zs-surface); overflow: hidden; width: fit-content;
}
.zaara form.cart .quantity { height: 50px; }
.zaara .quantity input.qty {
	width: 46px; text-align: center; border: none; background: transparent; font-size: 15px; font-weight: 700;
	font-family: inherit; height: 100%; -moz-appearance: textfield;
}
.zaara .quantity input.qty::-webkit-outer-spin-button, .zaara .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zaara .quantity button.plus, .zaara .quantity button.minus {
	width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;
	color: var(--zs-ink-2); background: transparent; border: none; padding: 0; flex: none;
}
.zaara .quantity button.plus:hover, .zaara .quantity button.minus:hover { background: var(--zs-border-2); }
.zaara form.cart button.single_add_to_cart_button {
	height: 50px; padding: 0 28px; background: var(--zs-accent); color: #fff; border: none; border-radius: var(--zs-radius-pill);
	font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--zs-shadow-md); width: fit-content;
}
.zaara form.cart button.single_add_to_cart_button:hover { background: var(--zs-accent-hover); }
.zaara form.cart .variations { border-collapse: collapse; margin: 0; }
.zaara form.cart .variations td { padding: 6px 0; }
.zaara form.cart .variations select {
	height: 44px; border: 1px solid var(--zs-border); border-radius: 10px; padding: 0 12px; font-family: inherit; min-width: 180px;
}
.zaara form.cart .variations label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--zs-mute-2); }
.zaara .woocommerce-variation-price .price, .zaara .woocommerce-variation-availability { margin: 8px 0; }
.zaara a.reset_variations { font-size: 12px; color: var(--zs-accent-text); margin-inline-start: 10px; }

.zaara .wc-proceed-to-checkout { margin-top: 6px; }
.zaara a.checkout-button {
	display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px; width: 100%;
	background: var(--zs-accent); color: #fff; border-radius: var(--zs-radius-pill); font-size: 15px; font-weight: 600;
	box-shadow: var(--zs-shadow-md);
}
.zaara a.checkout-button:hover { background: var(--zs-accent-hover); color: #fff; }
.zaara .zs-summary td.actions .coupon .input-text,
.zaara .zs-promo-row input[type="text"] {
	flex: 1; min-width: 160px; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-pill);
	height: 40px; padding: 0 16px; font-family: inherit;
}
.zaara .cross-sells h2 { font: 800 24px/1 var(--zs-font); letter-spacing: -.02em; margin: 32px 0 16px; }

/* ---------- checkout billing fields (native markup, bridged) ---------- */
.zaara .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zaara .woocommerce-billing-fields h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.zaara .form-row { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.zaara .form-row-wide, .zaara .form-row-first, .zaara .form-row-last { grid-column: span 1; }
.zaara .form-row-wide { grid-column: span 2; }
.zaara .form-row label { font-size: 12px; font-weight: 600; color: var(--zs-mute-2); }
.zaara .form-row .required { color: var(--zs-accent); text-decoration: none; }
.zaara .form-row input.input-text, .zaara .form-row select, .zaara .form-row textarea {
	height: 46px; background: #fff; border: 1px solid var(--zs-border); border-radius: 10px; padding: 0 14px;
	font-size: 14px; color: var(--zs-ink); font-family: inherit; width: 100%;
}
.zaara .form-row textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.zaara .form-row input:focus, .zaara .form-row select:focus, .zaara .form-row textarea:focus { border-color: var(--zs-accent); outline: none; }
.zaara .woocommerce-additional-fields h3 { font-size: 16px; font-weight: 700; }
.zaara .woocommerce-terms-and-conditions-wrapper { font-size: 12.5px; color: var(--zs-mute-2); }
.zaara .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zs-mute-1); }

.zaara .wc_payment_methods, .zaara .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zaara .wc_payment_method, .zaara .woocommerce-shipping-methods > li { list-style: none; }
.zaara .payment_box { margin-top: 10px; padding: 12px 14px; background: #fff; border-radius: 10px; font-size: 12.5px; color: var(--zs-mute-1); }
.zaara .payment_box p { margin: 0; }

/* ---------- WooCommerce notices, restyled to match ---------- */
.zaara .woocommerce-message, .zaara .woocommerce-error, .zaara .woocommerce-info,
.zaara .woocommerce-noreviews, .zaara p.no-comments {
	background: var(--zs-surface); border-radius: var(--zs-radius-card-sm); padding: 16px 20px; margin: 0 0 16px;
	list-style: none; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; border: none;
}
.zaara .woocommerce-error { background: var(--zs-tint-1); color: var(--zs-accent-text); }
.zaara .woocommerce-message::before, .zaara .woocommerce-error::before, .zaara .woocommerce-info::before { display: none; }
.zaara .woocommerce-message .button, .zaara .woocommerce-error .button, .zaara .woocommerce-info .button {
	margin-inline-start: auto;
}
.zaara ul.woocommerce-error li { list-style: none; }

/* ---------- RTL logical-property safety net ---------- */
/* The layout already relies on logical properties (inset-inline-start,
   margin-inline-start, text-align:start/end) so most of it flips for free;
   the exceptions live in style-rtl.css. */

/* ---------- responsive ----------
   Product grids step 4 → 3 → 2 and stop at 2: a one-per-row catalogue turns the
   homepage into a 7000px scroll, and two columns is what Electro keeps on
   phones. The archive loop (ul.products, with its columns-N class) has to be
   stepped down alongside .zs-product-grid or it forces the layout wider than
   the viewport. */
@media (max-width: 1280px) {
	.zs-product-grid { grid-template-columns: repeat(3, 1fr); }
	.zaara ul.products,
	.zaara ul.products.columns-4,
	.zaara ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); }
	.zs-dept-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
	.zs-hero-row { grid-template-columns: 1fr; }
	.zs-shop-layout { grid-template-columns: 1fr; }
	.zs-filters { position: static; }

	/* Below the sidebar breakpoint the filters become a drawer: a full-height
	   panel of checkboxes above the grid pushed the products off the first
	   screen entirely. */
	.zs-filters-wrap[hidden] { display: none; }
	.zs-filters-wrap { position: fixed; inset: 0; z-index: 100; }
	.zs-filters-wrap .zs-offcanvas__scrim { display: block; }
	.zs-filters-wrap .zs-offcanvas__panel {
		position: absolute; inset-block: 0; inset-inline-start: 0; width: min(340px, 88vw);
		background: #fff; padding: 18px; gap: 14px; display: flex; flex-direction: column;
		box-shadow: var(--zs-shadow-lg); overflow-y: auto; transform: translateX(-100%);
	}
	.zs-filters-wrap__head { display: flex; }
	.zs-filters-wrap .zs-filters { border: none; padding: 0; }
	/* The drawer supplies its own title bar, so drop the form's — otherwise
	   "Filtres" shows twice, one above the other. */
	.zs-filters-wrap .zs-filters__head { display: none; }
	.zs-filters-toggle {
		display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
		border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card-sm);
		background: #fff; color: var(--zs-ink); font-family: inherit; font-size: 13px;
		font-weight: 600; cursor: pointer;
	}
	.zs-filters-toggle:hover { border-color: var(--zs-accent); color: var(--zs-accent); }
	.zs-product-layout { grid-template-columns: 1fr; }
	.zs-gallery { position: static; }
	.zs-cart-layout, .zs-checkout-layout, .zs-confirm-layout { grid-template-columns: 1fr; }
	.zs-summary, .zs-track { position: static; }
	.zs-dept-grid { grid-template-columns: repeat(3, 1fr); }
	.zs-product-grid, .zs-product-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.zaara ul.products,
	.zaara ul.products.columns-3,
	.zaara ul.products.columns-4,
	.zaara ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }
	.zs-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.zs-promo-banner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* The hero's media column is a fixed 330px and would otherwise squeeze the
	   copy to one word per line before finally overflowing. */
	.zs-hero { flex-direction: column; align-items: stretch; padding: 24px; gap: 20px; }
	.zs-hero__media { width: 100%; height: 240px; }
	.zs-hero__title { font-size: 34px; max-width: none; }
	.zs-hero__desc { max-width: none; }
	.zs-footer { grid-template-columns: repeat(2, 1fr); }

	/* Wrapping turns the department bar into three ragged rows; scroll it. */
	.zs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.zs-nav::-webkit-scrollbar { display: none; }
	.zs-nav__all, .zaara .zs-nav__link, .zaara .zs-nav__deals { white-space: nowrap; flex: none; }
	.zaara .zs-nav__deals { margin-inline-start: 0; }

	.zs-topbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.zs-topbar::-webkit-scrollbar { display: none; }
	.zs-topbar__group { flex-wrap: nowrap; gap: 16px; }
	.zs-topbar__item { white-space: nowrap; }
}

@media (max-width: 640px) {
	.zs-topbar, .zs-header, .zs-nav, .zs-section, .zs-shop-layout, .zs-product-layout,
	.zs-cart-layout, .zs-checkout-layout, .zs-confirm-layout, .zs-hero-row,
	.zs-page-head, .zs-breadcrumb, .zs-checkout-head, .zs-promo-banner, .zs-footer, .zs-footer__bottom {
		padding-inline: 16px;
	}
	.zs-promo-banner { margin-inline: 16px; }

	/* Logo and account/cart share the first row, search takes the second. */
	.zs-header { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
	.zs-logo { order: 1; }
	.zs-logo img { height: 46px; }
	.zs-header__actions { order: 2; margin-inline-start: auto; }
	.zs-search { order: 3; flex-basis: 100%; }
	.zs-search button { padding: 0 16px; }
	.zs-account-link { padding: 0 8px; }
	.zs-account-link__meta { display: none; }

	.zs-dept-grid { grid-template-columns: repeat(2, 1fr); }
	.zs-trust-mini-grid, .zs-radio-grid, .zs-field-grid { grid-template-columns: 1fr; }
	.zs-footer { grid-template-columns: 1fr; }
	.zs-hero__title { font-size: 28px; }
	.zs-hero__media { height: 200px; }
	.zs-product-card__media { height: 150px; }
	.zaara .woocommerce-product-gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
	.zs-checkout-head { flex-wrap: wrap; }
	.zs-toolbar { padding: 8px; }
}

@media (max-width: 420px) {
	.zs-product-card__body { padding: 10px 12px 12px; }
	.zs-product-card__foot { flex-wrap: wrap; gap: 6px; }
	.zs-price,
	.zs-product-card__price-row ins { font-size: 17px; }
	.zs-section-title { font-size: 15px; }
	.zs-hero__title { font-size: 24px; }
}