/* ==========================================================================
   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; }
/* The panel is the scroll container, so the title bar and the footer button
   scrolled out of reach behind a 52-item list. Pinned to the panel's own
   padding box, with the panel's background so rows pass underneath. */
.zs-offcanvas__head--sticky {
	position: sticky; top: 0; z-index: 2; flex: none;
	background: #fff; padding-block: 2px 10px;
}
/* The 8px white ring covers the panel's side padding, so rows scrolling past
   do not show up beside the pinned button. */
.zs-offcanvas__foot {
	position: sticky; bottom: 0; z-index: 2; flex: none;
	box-shadow: 0 0 0 8px #fff, 0 -14px 18px -12px rgba(0, 0, 0, .3);
}
.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); }
/* A `hidden` row still has `display:flex` from its component rule, and the UA
   sheet's [hidden] is only `display:none` — so without this the type-to-narrow
   lists hid nothing. */
.zaara [hidden] { display: none !important; }

.zs-filters__search, .zs-offcanvas__search {
	height: 38px; width: 100%; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card-sm);
	padding: 0 12px; font-family: inherit; font-size: 13px; color: var(--zs-ink); background: #fff;
}
.zs-filters__search:focus, .zs-offcanvas__search:focus { border-color: var(--zs-accent); outline: none; }
.zs-filters__list { display: flex; flex-direction: column; gap: 11px; }
/* Roughly eight rows, then scroll: a 52-term catalogue would otherwise push
   the price and availability groups below the fold on every screen size. */
.zs-filters__list--scroll {
	max-height: 260px; overflow-y: auto; padding-inline-end: 4px;
	scrollbar-width: thin; overscroll-behavior: contain;
}
.zs-filters__empty { font-size: 12.5px; color: var(--zs-mute-2); margin: 2px 0; }

.zs-price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zs-price-input { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.zs-price-input > span { font-size: 11.5px; font-weight: 600; color: var(--zs-mute-2); }
.zs-price-input input {
	height: 38px; width: 100%; min-width: 0; border: 1px solid var(--zs-border);
	border-radius: var(--zs-radius-card-sm); padding: 0 10px; font-family: inherit;
	font-size: 13.5px; color: var(--zs-ink); background: #fff;
}
.zs-price-input input:focus { border-color: var(--zs-accent); outline: none; }

.zs-chip--clear { background: transparent; color: var(--zs-mute-1); text-decoration: underline; }
.zs-chip--clear:hover { color: var(--zs-accent-text); }

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

/* ---------- infinite scroll ---------- */
/* Needs a real box for the observer to watch, and has to sit inside the flow
   rather than be collapsed away by the grid above it. */
.zs-loop__sentinel { width: 100%; height: 1px; }
.zs-loop__status { font-size: 12.5px; color: var(--zs-mute-2); text-align: center; margin: 16px 0 0; min-height: 1em; }
.zs-loop__more { display: flex; justify-content: center; padding: 14px 0 0; }
.zs-loop__more-btn:disabled { opacity: .6; cursor: default; }
/* The real pagination stays in the document for crawlers and for no-JS, and
   stays on screen as the fallback whenever a fetch fails. */
.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); }
/* A payment method that has its own fields renders the card as a <div> whose
   first row is the label (.zs-radio-card__hit) and whose second is
   .payment_box. The hidden radio stretches over its own positioned row only —
   stretched over the whole card, as it was when the card itself was the
   <label>, it covered the gateway's inputs and they could not be typed into. */
.zs-radio-card:has(> .zs-radio-card__hit) { display: block; padding: 0; }
.zs-radio-card__hit {
	display: flex; align-items: center; gap: 12px; padding: 16px;
	position: relative; cursor: pointer;
}
.zs-radio-card__hit + .payment_box { margin: 0 16px 16px; background: var(--zs-surface); }
.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); }
/* The interactive review-form rating widget (not the read-only .star-rating
   summary). It used to be `display:none`, but WooCommerce's "ratings are
   required" setting is on by default — hiding the only control that sets one
   meant every review submission bounced with "Please select a rating". Left
   visible, on WooCommerce's own star glyphs, scaled up to a real touch target. */
.zaara p.stars { display: block; margin: 0 0 12px; }
.zaara p.stars a { font-size: 1.5em; padding: 4px 2px; }

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

/* ---------- layout helpers lifted out of inline styles ----------
   These blocks used to carry their geometry in a `style` attribute on the
   template. An inline declaration outranks every media query, so none of them
   could be collapsed on a phone — the two-column ones stayed two columns at
   360px and pushed the page into a sideways scroll. The geometry lives here
   now so the responsive layer at the bottom can actually reach it. */
.zs-checkout-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zs-checkout-head__title { font: 800 30px/1 var(--zs-font); letter-spacing: -.03em; margin: 0; }
.zs-confirm-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.zs-confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.zs-help-row { display: flex; gap: 12px; align-items: center; }
.zs-help-row__body { display: flex; flex-direction: column; min-width: 0; }
.zs-specs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.zs-page-shell { padding: 32px; max-width: 900px; }
.zs-page-shell__title { margin-bottom: 16px; }
.zs-prose { padding: 32px; line-height: 1.7; }
.zs-prose img, .zs-prose video, .zs-prose iframe, .zs-prose table { max-width: 100%; }
.zs-prose iframe, .zs-prose video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* The two spans inside each timeline step were laid out by nothing at all, so
   they ran together on one line ("Commande confirmée22 septembre, 09:35"). */
.zs-timeline__label { display: flex; flex-direction: column; gap: 3px; padding-inline-end: 10px; min-width: 0; }

/* `woocommerce_thankyou` prints the order-details and customer-details tables,
   and they were emitted as a bare child of .zs-shell — which carries no
   padding of its own, so they ran edge to edge on a phone. */
.zs-order-details { padding: 0 32px 40px; display: flex; flex-direction: column; gap: 10px; }
.zs-order-details h2, .zs-order-details h3 { font: 700 17px/1.4 var(--zs-font); margin: 18px 0 10px; }

/* ==========================================================================
   Forms — WooCommerce's own markup
   Every screen this theme does not hand-template still posts through a real
   WooCommerce form: sign-in, registration, password reset, the address book,
   account details, the checkout coupon drawer, the review form. Those shipped
   with WooCommerce's default float layout and its own control sizing, which
   read as a different product from the checkout next to it. Restyled here on
   the same tokens so there is one form language across the store.
   ========================================================================== */
.zaara .woocommerce-form,
.zaara form.checkout_coupon,
.zaara form.woocommerce-ResetPassword,
.zaara form.lost_reset_password,
.zaara form.woocommerce-EditAccountForm,
.zaara form.edit-account,
.zaara form.woocommerce-address-fields {
	background: #fff; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card);
	padding: 24px; margin: 0 0 20px; display: flex; flex-direction: column; gap: 16px;
}
/* The login form WooCommerce prints above the checkout is already inside a
   panel; a second border around it reads as a box in a box. */
body.zaara.woocommerce-checkout .woocommerce-form-login,
body.zaara.woocommerce-checkout .woocommerce-form-login-toggle { margin-inline: 32px; }

/* WooCommerce floats these columns at 47% from its own stylesheet, which
   leaves them wedged side by side on a phone. Its float rule is
   `.woocommerce .col2-set .col-1`, so the override has to carry three classes
   of its own to reach it — this sheet loads after WooCommerce's, so equal
   specificity is enough. */
.zaara .col2-set, .zaara .u-columns.col2-set, .zaara .woocommerce-Addresses {
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: auto;
}
.zaara .woocommerce .col2-set .col-1, .zaara .woocommerce .col2-set .col-2,
.zaara .col2-set .col-1, .zaara .col2-set .col-2,
.zaara .woocommerce-Addresses .woocommerce-Address {
	float: none; width: auto; min-width: 0;
}
.zaara .col2-set::before, .zaara .col2-set::after { content: none; display: none; }
.zaara .woocommerce-Address-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zaara .woocommerce-Address-title h2, .zaara .woocommerce-Address-title h3 { font: 700 16px/1.4 var(--zs-font); margin: 0; }
.zaara .woocommerce-Address address { font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--zs-mute-1); }
.zaara .u-columns > h2, .zaara .woocommerce-Addresses > h2 { font: 700 16px/1.4 var(--zs-font); margin: 0 0 10px; }

/* One field-grid rule for every address form WooCommerce renders, not just
   the checkout's billing block. */
.zaara .woocommerce-billing-fields__field-wrapper,
.zaara .woocommerce-shipping-fields__field-wrapper,
.zaara .woocommerce-address-fields__field-wrapper,
.zaara .woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* The native login/register/reset rows carry `form-row` too, so the control
   sizing above already reaches them — these are the pieces it misses. */
.zaara .woocommerce-form-row, .zaara .woocommerce-form .form-row { margin: 0; }
.zaara .form-row input[type="password"],
.zaara .form-row input[type="email"],
.zaara .form-row input[type="tel"],
.zaara .form-row input[type="number"],
.zaara .woocommerce-Input {
	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 input:hover, .zaara .form-row select:hover { border-color: var(--zs-mute-4); }
.zaara .woocommerce-Input:focus { border-color: var(--zs-accent); outline: none; }
.zaara .form-row input[type="checkbox"], .zaara .form-row input[type="radio"] {
	width: auto; height: auto; min-width: 20px; min-height: 20px; accent-color: var(--zs-accent);
}
/* WooCommerce absolutely-positions its show/hide-password eye against the top
   of the wrapper, which lands it a third of the way up a 46px control and
   straight over the last characters typed. */
.zaara .woocommerce-password-input, .zaara .password-input { display: block; position: relative; }
.zaara .woocommerce-password-input input.input-text, .zaara .password-input input.input-text { padding-inline-end: 46px; }
/* The physical resets have to come first: in horizontal-tb they are the same
   properties as the logical ones below, so listed after they would win and
   undo the centring. */
.zaara .show-password-input {
	position: absolute; top: auto; right: auto; left: auto;
	inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; cursor: pointer;
}
.zaara .woocommerce-password-strength { font-size: 12px; border-radius: var(--zs-radius-card-sm); padding: 8px 12px; }
.zaara .woocommerce-password-hint { font-size: 12px; color: var(--zs-mute-2); line-height: 1.5; }
.zaara .woocommerce-privacy-policy-text p, .zaara .woocommerce-form__label-for-checkbox span {
	font-size: 12.5px; line-height: 1.6; color: var(--zs-mute-1);
}
.zaara .woocommerce-LostPassword { font-size: 12.5px; margin: 0; }
.zaara .woocommerce-form-login__rememberme { margin: 0; }
.zaara .woocommerce-form-coupon-toggle { margin-inline: 32px; }
.zaara form.checkout_coupon .form-row { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.zaara form.checkout_coupon .form-row input.input-text { flex: 1; min-width: 160px; width: auto; }

/* Form buttons, scoped to form contexts so they cannot reach the shop's own
   styled buttons (.checkout-button, the product-card add button) further up. */
.zaara .woocommerce-form .button,
.zaara form.checkout_coupon .button,
.zaara form.woocommerce-ResetPassword .button,
.zaara form.lost_reset_password .button,
.zaara form.woocommerce-EditAccountForm .button,
.zaara form.woocommerce-address-fields .button,
.zaara .woocommerce-MyAccount-content .button,
.zaara .woocommerce-message .button,
.zaara .woocommerce-error .button,
.zaara .woocommerce-info .button,
.zaara #review_form .submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 22px; border: none; border-radius: var(--zs-radius-card-sm);
	background: var(--zs-accent); color: #fff; font-family: inherit; font-size: 14px;
	font-weight: 600; line-height: 1; cursor: pointer; align-self: flex-start;
	text-decoration: none; width: auto;
}
.zaara .woocommerce-form .button:hover,
.zaara form.checkout_coupon .button:hover,
.zaara form.woocommerce-EditAccountForm .button:hover,
.zaara form.woocommerce-address-fields .button:hover,
.zaara .woocommerce-MyAccount-content .button:hover,
.zaara #review_form .submit:hover { background: var(--zs-accent-hover); color: #fff; }

/* ---------- My Account ---------- */
/* The account page is an Elementor page holding the [woocommerce_my_account]
   shortcode, and an `elementor-section-boxed` section only caps its width —
   below 1140px it has no side padding, so the account screens sat flush
   against both edges of a phone. This is the page's gutter. */
.zs-account-shell { padding: 28px 32px 40px; }
.zs-account-shell > .woocommerce > h2,
.zs-account-shell .woocommerce-MyAccount-content h2 { font: 700 20px/1.3 var(--zs-font); margin: 0 0 14px; }

/* WooCommerce floats the nav at 30% and the panel at 68%; a grid keeps the two
   aligned at the top and lets the nav become a scrolling chip row on a phone
   instead of a 30%-wide column of clipped words. The :has() guard keeps the
   logged-out screen (login + register, no nav) on its own two-column rule. */
body.zaara.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start;
}
body.zaara.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.zaara .woocommerce-MyAccount-navigation { float: none; width: auto; min-width: 0; }
.zaara .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px;
	background: #fff; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card);
}
.zaara .woocommerce-MyAccount-navigation li { margin: 0; }
.zaara .woocommerce-MyAccount-navigation li a {
	display: block; padding: 11px 12px; border-radius: var(--zs-radius-card-sm);
	color: var(--zs-ink); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.zaara .woocommerce-MyAccount-navigation li a:hover { background: var(--zs-surface); color: var(--zs-accent); }
.zaara .woocommerce-MyAccount-navigation li.is-active a { background: var(--zs-accent); color: #fff; }
.zaara .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; font-size: 14px; line-height: 1.7; }
.zaara .woocommerce-MyAccount-content > p { margin-top: 0; }
.zaara .woocommerce-MyAccount-content fieldset { border: 1px solid var(--zs-border-2); border-radius: var(--zs-radius-card-sm); padding: 16px; margin: 4px 0 0; }
.zaara .woocommerce-MyAccount-content legend { font-size: 13px; font-weight: 700; padding: 0 6px; }

/* ---------- WooCommerce tables ---------- */
.zaara table.shop_table, .zaara table.woocommerce-table, .zaara table.woocommerce-orders-table {
	width: 100%; border-collapse: collapse; border-spacing: 0; background: #fff;
	border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card);
	font-size: 13.5px; margin: 0 0 16px;
}
.zaara table.shop_table th, .zaara table.woocommerce-table th {
	text-align: start; font-size: 12px; font-weight: 700; letter-spacing: .04em;
	color: var(--zs-mute-2); padding: 12px 14px; border-bottom: 1px solid var(--zs-border);
}
.zaara table.shop_table td, .zaara table.woocommerce-table td {
	padding: 12px 14px; border-top: 1px solid var(--zs-border-2); vertical-align: middle;
}
.zaara table.shop_table tfoot th, .zaara table.shop_table tfoot td { font-weight: 700; color: var(--zs-ink); }
/* Anything WooCommerce did not mark up as stackable keeps its columns and gets
   its own scroll box, rather than widening the page. */
.zaara .woocommerce-MyAccount-content table:not(.shop_table_responsive),
.zs-order-details table:not(.shop_table_responsive),
.zs-prose table { display: block; overflow-x: auto; max-width: 100%; }

/* ---------- select2 (country / governorate pickers) ---------- */
/* WooCommerce swaps the country and state selects for select2 on checkout and
   in the address book, so its own 28px-tall control sat next to 46px fields. */
/* Scoped to the container select2 leaves inside the field row. The dropdown is
   a second .select2-container that select2 appends to <body> and positions
   with an inline width — stretching that one to 100% would tear it off the
   field it belongs to. */
.zaara .form-row .select2-container,
.zaara .zs-field .select2-container { width: 100% !important; }
.zaara .select2-container--default .select2-selection--single {
	height: 46px; background: #fff; border: 1px solid var(--zs-border); border-radius: 10px;
}
.zaara .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px; padding-inline: 14px 30px; font-size: 14px; color: var(--zs-ink);
}
.zaara .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px; inset-inline-end: 8px; right: auto;
}
.zaara .select2-container--default.select2-container--focus .select2-selection--single,
.zaara .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--zs-accent); }
.zaara .select2-dropdown { border-color: var(--zs-border); border-radius: 10px; overflow: hidden; }
.zaara .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 40px; padding: 0 12px; border: 1px solid var(--zs-border); border-radius: 8px;
	font-family: inherit; font-size: 16px; /* 16px: see the iOS note in the responsive layer. */
}
.zaara .select2-container--default .select2-results__option { font-size: 14px; padding: 10px 14px; }
.zaara .select2-container--default .select2-results__option--highlighted[aria-selected],
.zaara .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--zs-accent); color: #fff;
}

/* ---------- product review form ---------- */
.zaara #reviews .commentlist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.zaara #reviews .comment_container { display: flex; gap: 14px; align-items: flex-start; }
.zaara #reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: var(--zs-radius-pill); flex: none; }
.zaara #reviews .comment-text { flex: 1; min-width: 0; }
.zaara #review_form_wrapper {
	background: #fff; border: 1px solid var(--zs-border); border-radius: var(--zs-radius-card); padding: 24px;
}
.zaara #review_form .comment-reply-title { font: 700 16px/1.4 var(--zs-font); display: block; margin-bottom: 14px; }
.zaara .comment-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.zaara .comment-form p { margin: 0; }
.zaara .comment-form label { display: block; font-size: 12px; font-weight: 600; color: var(--zs-mute-2); margin-bottom: 7px; }
.zaara .comment-form input[type="text"],
.zaara .comment-form input[type="email"],
.zaara .comment-form input[type="url"] {
	height: 46px; width: 100%; background: #fff; border: 1px solid var(--zs-border);
	border-radius: 10px; padding: 0 14px; font-size: 14px; font-family: inherit; color: var(--zs-ink);
}
.zaara .comment-form textarea {
	width: 100%; min-height: 110px; background: #fff; border: 1px solid var(--zs-border);
	border-radius: 10px; padding: 12px 14px; font-size: 14px; font-family: inherit;
	color: var(--zs-ink); resize: vertical;
}
.zaara .comment-form input:focus, .zaara .comment-form textarea:focus { border-color: var(--zs-accent); outline: none; }
.zaara .comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; }
.zaara .comment-form-cookies-consent label { margin: 0; font-size: 12.5px; color: var(--zs-mute-1); }

/* ---------- 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: 40px; 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); }
	.zs-specs-layout { grid-template-columns: 1fr; gap: 24px; }
	.zs-pack-grid { grid-template-columns: 1fr; }
	.zs-checkout-head__title { font-size: 25px; }

	/* The account nav stops being a column and becomes a scrolling chip row
	   above the panel — a 240px sidebar next to a 400px viewport left both
	   halves unusable. */
	body.zaara.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr); gap: 16px;
	}
	.zaara .woocommerce-MyAccount-navigation ul {
		flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px;
	}
	.zaara .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.zaara .woocommerce-MyAccount-navigation li a { padding: 10px 14px; font-size: 13.5px; }

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

/* iOS Safari zooms the viewport in whenever a focused control's text is under
   16px, and it does not zoom back out on blur — on checkout that left the form
   half off-screen for the rest of the session, which is the single worst thing
   that happens on this site on a phone. 16px is the browser's threshold, not a
   type choice, so it is applied at tablet width and down, to every control the
   store renders including the ones inside select2's dropdown. */
@media (max-width: 820px) {
	.zaara input, .zaara select, .zaara textarea,
	.zaara .zs-field input, .zaara .zs-field select, .zaara .zs-field textarea,
	.zaara .form-row input.input-text, .zaara .form-row select, .zaara .form-row textarea,
	.zaara .form-row input[type="password"], .zaara .form-row input[type="email"],
	.zaara .form-row input[type="tel"], .zaara .form-row input[type="number"],
	.zaara .woocommerce-Input,
	.zaara .comment-form input[type="text"], .zaara .comment-form input[type="email"],
	.zaara .comment-form input[type="url"], .zaara .comment-form textarea,
	.zaara .select2-container--default .select2-selection--single .select2-selection__rendered,
	.zaara .select2-container--default .select2-search--dropdown .select2-search__field,
	.zaara .zs-search input, .zaara .zs-promo-row input {
		font-size: 16px;
	}
	/* The controls grow a little with the type so the text is not cramped, and
	   48px clears the 44px minimum touch target on both platforms. */
	.zaara .form-row input.input-text, .zaara .form-row select,
	.zaara .form-row input[type="password"], .zaara .form-row input[type="email"],
	.zaara .form-row input[type="tel"], .zaara .form-row input[type="number"],
	.zaara .woocommerce-Input, .zaara .zs-field input, .zaara .zs-field select,
	.zaara .comment-form input[type="text"], .zaara .comment-form input[type="email"],
	.zaara .select2-container--default .select2-selection--single { height: 48px; }
	.zaara .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; }
	.zaara .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
}

@media (max-width: 640px) {
	/* Backstop for Elementor-authored content, not a licence for the layout
	   below to overflow. On the root element rather than <body>: `overflow` on
	   the root propagates to the viewport, so the fixed-position drawer and
	   toast keep working, where clipping on <body> risks taking them with it. */
	:root:has(body.zaara) { overflow-x: clip; }

	.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, .zs-order-details, .zs-account-shell {
		padding-inline: 16px;
	}
	.zs-account-shell { padding-block: 20px 32px; }
	.zs-promo-banner { margin-inline: 16px; padding: 24px; }
	body.zaara.woocommerce-checkout .woocommerce-form-login,
	body.zaara.woocommerce-checkout .woocommerce-form-login-toggle,
	.zaara .woocommerce-form-coupon-toggle { 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%; height: 48px; }
	.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-footer__brand img { height: 56px; }
	.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-toolbar { padding: 8px; }

	/* ---- forms: one column ----
	   This is the fix that matters most on checkout. Every address form was a
	   hard-coded two-column grid with `.form-row-wide` spanning both, so on a
	   360px screen "Nom", "Prénom", "Gouvernorat" and "Ville" were ~150px wide
	   each and the wide rows overshot the container. */
	.zaara .woocommerce-billing-fields__field-wrapper,
	.zaara .woocommerce-shipping-fields__field-wrapper,
	.zaara .woocommerce-address-fields__field-wrapper,
	.zaara .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; gap: 12px; }
	.zaara .form-row-wide, .zaara .form-row-first, .zaara .form-row-last { grid-column: span 1; }
	.zaara .col2-set, .zaara .u-columns.col2-set, .zaara .woocommerce-Addresses { grid-template-columns: 1fr; gap: 16px; }
	.zaara .woocommerce-form,
	.zaara form.checkout_coupon,
	.zaara form.woocommerce-ResetPassword,
	.zaara form.lost_reset_password,
	.zaara form.woocommerce-EditAccountForm,
	.zaara form.edit-account,
	.zaara form.woocommerce-address-fields,
	.zaara #review_form_wrapper { padding: 18px; }
	.zaara .woocommerce-form .button,
	.zaara form.checkout_coupon .button,
	.zaara form.woocommerce-EditAccountForm .button,
	.zaara form.woocommerce-address-fields .button,
	.zaara .woocommerce-MyAccount-content .button,
	.zaara #review_form .submit { width: 100%; align-self: stretch; }

	/* ---- checkout ---- */
	.zs-checkout-head { padding-block: 16px 12px; gap: 12px; }
	.zs-checkout-head__title { font-size: 22px; }
	/* The three step chips no longer fit beside the title; give them their own
	   row and let it scroll rather than stack into three lines of chrome above
	   the form. */
	.zs-checkout-steps {
		margin-inline-start: 0; flex-basis: 100%; flex-wrap: nowrap;
		overflow-x: auto; scrollbar-width: none; gap: 14px;
	}
	.zs-checkout-steps::-webkit-scrollbar { display: none; }
	.zs-checkout-step { white-space: nowrap; flex: none; font-size: 12.5px; }
	.zs-panel { padding: 16px; gap: 14px; }
	.zs-summary { padding: 18px; }
	.zs-summary__total-value { font-size: 24px; }
	.zs-radio-card { padding: 14px; }
	.zs-order-line__thumb { width: 44px; height: 44px; }

	/* ---- cart lines ----
	   Five flex children wrapping freely produced a different shape per row.
	   Fixed areas: thumb and title on top, then quantity and line total. */
	.zs-cart-line {
		display: grid; align-items: center; gap: 10px 12px; padding: 14px;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas: "media body remove" "qty qty price";
	}
	.zs-cart-line__media { grid-area: media; width: 72px; height: 72px; }
	.zs-cart-line__body { grid-area: body; min-width: 0; }
	.zs-cart-line .quantity { grid-area: qty; justify-self: start; }
	.zs-cart-line .zs-price { grid-area: price; justify-self: end; font-size: 18px; }
	.zs-cart-line__remove { grid-area: remove; justify-self: end; }
	.zs-promo-row { padding: 14px; }

	/* ---- confirmation ---- */
	.zs-confirm { padding: 22px; }
	.zs-confirm__title { font-size: 26px; }
	.zs-confirm__meta { gap: 14px 22px; }
	.zs-track { padding: 20px; }
	/* Four steps on one row is ~90px each; two rows of two, and the connecting
	   bars stop meaning anything once the row wraps. */
	.zs-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
	.zs-timeline__bar { display: none; }
	.zs-confirm-actions .zs-btn { flex: 1 1 100%; }

	/* ---- product ---- */
	.zs-buybox__title { font-size: 26px; }
	.zs-price--lg, .zs-price-row ins { font-size: 30px; }
	.zs-specs-row { flex-direction: column; gap: 3px; padding: 12px 14px; }
	.zs-specs-row dt { width: auto; }
	.zaara form.cart button.single_add_to_cart_button { width: 100%; }
	.zaara form.cart .variations select { min-width: 0; width: 100%; }

	/* ---- page chrome ---- */
	.zs-page-shell { padding: 16px; }
	.zs-prose { padding: 20px; }
	.zs-page-head__title { font-size: 26px; }
	.zs-section { padding-bottom: 24px; }

	/* Notices put their action button on a second line here — side by side it
	   squeezed the message down to two words a line. */
	.zaara .woocommerce-message, .zaara .woocommerce-error, .zaara .woocommerce-info {
		flex-direction: column; align-items: stretch; padding: 14px 16px; font-size: 13.5px;
	}
	.zaara .woocommerce-message .button, .zaara .woocommerce-error .button, .zaara .woocommerce-info .button {
		margin-inline-start: 0; width: 100%;
	}

	/* ---- touch targets: 44px minimum ---- */
	.zs-btn-icon { width: 44px; height: 44px; }
	.zs-cart-line__remove { width: 44px; height: 44px; }
	.zs-pagination a, .zs-pagination span { min-width: 44px; height: 44px; }
	.zs-lang-switch a { padding: 8px 12px; }
	.zs-offcanvas__close { width: 44px; height: 44px; }
	.zaara .zs-product-card .zs-product-card__add,
	.zaara .zs-product-card .added_to_cart { width: 42px; height: 42px; }
	.zaara .quantity { height: 48px; }
	.zaara .quantity input.qty { width: 52px; }
	.zaara .quantity button.plus, .zaara .quantity button.minus { width: 44px; }
}

@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; }
	.zs-checkout-head__title { font-size: 20px; }
	.zs-confirm__title { font-size: 22px; }
	.zs-cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; }
	.zs-cart-line__media { width: 64px; height: 64px; }
	.zs-btn { padding: 0 16px; }
	.zs-btn--lg { padding: 0 18px; font-size: 14.5px; }
	.zs-confirm__meta { gap: 12px 18px; }
}

/* Motion is decorative throughout (drawer slide, toast, card shadow); honour
   the OS switch rather than animating anyway. */
@media (prefers-reduced-motion: reduce) {
	.zaara *, .zaara *::before, .zaara *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
}