/* ==========================================================================
   Zdesigner V2
   Built from the "ZDESIGNER Accueil v2" Claude Design handoff.
   Logical properties throughout, so the Arabic (RTL) and French (LTR)
   builds share one stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */

.zd {
	--paper: #FFFEFB;
	--ink: #000000;
	--muted: #6B6B6B;
	--rule: #E8E5DE;
	--rule-strong: #C9C5BC;
	--accent: #D81B24;
	--sale: #EB0712;
	--shade: rgba(0, 0, 0, 0.58);
	--scrim: rgba(0, 0, 0, 0.45);

	--font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Clash Display", "Satoshi", ui-serif, Georgia, serif;

	--gutter: 26px;
	--nav-gutter: 37px;
	--shadow-caption: 0 0 24px rgba(0, 0, 0, 0.4);
}

.zd--ar {
	--font-body: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", ui-sans-serif, sans-serif;
}

/* ----------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The admin bar.
 *
 * WordPress makes room for its bar with html { margin-top: 32px !important },
 * which moves the document down and nothing else. Every overlay here is
 * positioned against the viewport rather than the document, so top: 0 still
 * means the very top of the screen and the bar sits over it — over the header's
 * language row, over the cart panel's close button, over the size guide.
 *
 * Offsetting them is the theme's job, so it is done once, for all of them. The
 * height comes from WordPress's own --wp-admin--admin-bar--height, which it
 * sets on <html> and raises to 46px on narrow screens, so the bar's own
 * breakpoint is not restated here. The fallback covers nothing: the variable is
 * declared in admin-bar.css, which only loads when the bar does.
 *
 * The scrims move too — an editor should still be able to reach the bar while a
 * panel is open.
 */
body.admin-bar .zd-header,
body.admin-bar .zd-scrim,
body.admin-bar .zd-mobilenav,
body.admin-bar .zd-panel-scrim,
body.admin-bar .zd-panel,
body.admin-bar .zd-drawer-scrim,
body.admin-bar .zd-drawer,
body.admin-bar .zd-lb {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Below this width WordPress stops pinning the bar and lets it scroll away. */
@media screen and (max-width: 600px) {
	body.admin-bar .zd-header,
	body.admin-bar .zd-scrim,
	body.admin-bar .zd-mobilenav,
	body.admin-bar .zd-panel-scrim,
	body.admin-bar .zd-panel,
	body.admin-bar .zd-drawer-scrim,
	body.admin-bar .zd-drawer,
	body.admin-bar .zd-lb {
		top: 0;
	}
}

/*
 * Prices read left to right in both builds.
 *
 * The thousands separator is a space, and WooCommerce's own <bdi> resolves its
 * direction from the first strong character — which, with a dirham written
 * د.م., is Arabic. The amount then lays out right to left and the thousands
 * group jumps the hundreds: 3 099,00 is shown as 099,00 3. Stating the
 * direction fixes the order; the symbol still follows the number, and the
 * Arabic glyphs still shape among themselves.
 */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
	direction: ltr;
	unicode-bidi: isolate;
}

/*
 * The browser hides [hidden] with a rule of its own, but that rule is weaker
 * than any class, so a .zd-grid or a .zd-doc__cta carrying the attribute stays
 * on screen. Everything the theme shows and hides goes through this attribute,
 * so it is stated once, here, rather than answered component by component.
 */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
}

body.zd {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.zd--ar {
	font-weight: 400;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

img {
	max-width: 100%;
}

button {
	font: inherit;
	color: inherit;
}

::placeholder {
	color: var(--ph, var(--muted));
	opacity: 1;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

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

.zd-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--paper);
	color: var(--ink);
	font-size: 13px;
}

.zd-skip:focus {
	inset-inline-start: 0;
}

/* --------------------------------------------------------------- header */

.zd-header {
	--hdr-bg: var(--shade);
	--hdr-left: #FFFFFF;
	--hdr-right: #FFFFFF;
	--hdr-muted: #FFFFFF;
	--hdr-sep: rgba(255, 255, 255, 0.55);
	--hdr-field: #FFFFFF;
	--hdr-ph: rgba(255, 255, 255, 0.78);
	--logo-light: 1;
	--logo-gold: 0;
	--wash-w: 0px;
	--wash-o: 0;

	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: var(--hdr-bg);
	transition: background-color 0.25s ease;
}

.zd-header.is-hover:not(.is-mega) {
	--hdr-bg: var(--paper);
	--hdr-left: #000000;
	--hdr-right: #000000;
	--hdr-muted: #1A1A1A;
	--hdr-sep: var(--rule-strong);
	--hdr-field: #000000;
	--hdr-ph: var(--muted);
	--logo-light: 0;
	--logo-gold: 1;
}

/* With a mega panel open the left half is washed white, so only the left
   column flips to dark ink — the right stays over the dark backdrop. */
.zd-header.is-mega {
	--hdr-left: #000000;
	--logo-light: 0;
	--logo-gold: 1;
	--wash-o: 1;
}

.zd-header__wash {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: var(--wash-w);
	background: var(--paper);
	opacity: var(--wash-o);
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.zd-header__stack {
	position: relative;
	z-index: 1;
}

.zd-header__utility {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	padding: 12px var(--gutter) 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--hdr-muted);
}

.zd-header__utility .zd-lang {
	color: var(--hdr-muted);
}

.zd-header__utility .zd-lang.is-current {
	color: var(--hdr-right);
}

.zd-header__sep {
	color: var(--hdr-sep);
}

.zd-masthead {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 15px var(--gutter) 27px;
}

.zd-masthead__left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.zd-logo {
	position: relative;
	display: block;
	height: 60px;
	width: 204px;
	max-width: 100%;
}

.zd-logo:hover {
	text-decoration: none;
}

.zd-logo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.zd-logo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	transition: opacity 0.25s ease;
}

.zd--rtl .zd-logo__img {
	object-position: right center;
}

.zd-logo__img--light {
	opacity: var(--logo-light);
}

.zd-logo__img--gold {
	opacity: var(--logo-gold);
}

.zd-masthead__search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.zd-search {
	width: 100%;
	max-width: 440px;
}

.zd-search__label {
	position: relative;
	display: block;
	width: 100%;
}

.zd-search__input {
	width: 100%;
	height: 37px;
	padding-block: 11px;
	padding-inline: 16px 40px;
	border: 1px solid var(--hdr-field);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--hdr-field);
	outline: none;
	--ph: var(--hdr-ph);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.zd-search__input::-webkit-search-cancel-button {
	filter: invert(1);
}

.zd-header.is-hover:not(.is-mega) .zd-search__input::-webkit-search-cancel-button {
	filter: none;
}

.zd-search__icon {
	position: absolute;
	inset-inline-end: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--hdr-field);
	stroke-width: 1.4;
	pointer-events: none;
}

.zd-account {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--hdr-right);
}

/* ------------------------------------------------------------- main nav */

.zd-nav {
	position: relative;
	z-index: 40;
	max-height: 80px;
	opacity: 1;
	transform: translateY(0);
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.35s ease;
}

.zd-header.is-mega .zd-nav {
	overflow: visible;
}

.zd-header.is-hidden:not(.is-hover) .zd-nav {
	max-height: 0;
	opacity: 0;
	transform: translateY(-14px);
}

.zd-nav__bar {
	display: flex;
	gap: 30px;
	padding-block: 0 12px;
	padding-inline: var(--nav-gutter) var(--gutter);
}

.zd-nav__link {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdr-left);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease;
}

.zd-nav__link:hover,
.zd-nav__link.is-open {
	text-decoration: none;
	border-bottom-color: currentColor;
}

.zd-mega {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	width: max-content;
	min-width: var(--mega-min, 0px);
	max-width: min(72vw, 900px);
	height: calc(100vh - 170px);
	overflow-y: auto;
	background: var(--paper);
	z-index: 41;
}

.zd-mega__inner {
	display: flex;
	gap: clamp(28px, 4vw, 64px);
	padding-block: 34px 56px;
	padding-inline: var(--nav-gutter) var(--gutter);
}

.zd-mega__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 0 0 auto;
	min-width: 150px;
}

.zd-mega__col--sub {
	min-width: 0;
}

.zd-mega__link {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--ink);
	align-self: flex-start;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.zd-mega__link:hover,
.zd-mega__link.is-open {
	text-decoration: none;
	border-bottom-color: currentColor;
}

.zd-mega__link--sub {
	color: var(--muted);
}

.zd-mega__link.is-accent {
	color: var(--accent);
}

.zd-scrim {
	position: fixed;
	inset: 0;
	background: var(--scrim);
	z-index: 30;
}

/* ----------------------------------------------------------- mobile nav */

.zd-mobilenav {
	position: fixed;
	inset: 0;
	background: var(--paper);
	z-index: 60;
	overflow-y: auto;
	/* Room at the foot for the tab bar, which stays above this panel. */
	padding: 22px 24px calc(76px + env(safe-area-inset-bottom, 0px));
}

/*
 * The panel's head reads as the site's: the mark centred, at the size it is
 * worn up there. The close sits over the end of the row rather than in it, so
 * it cannot pull the mark off centre.
 */
.zd-mobilenav__top {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 26px;
}

/*
 * The gold mark, at the size the header wears it.
 *
 * It used to be the white mark turned black by a filter, which meant the
 * pages opening on a dark header had to turn the filter off again. Gold needs
 * none of that, so one rule covers every route — but it is written with two
 * classes, because WooCommerce ships `.woocommerce-page img{height:auto}` at
 * (0,1,1) and a single class loses to it on the shop, product and cart pages.
 * It did: the mark came back at its natural ninety-nine pixels there.
 */
.zd-mobilenav .zd-mobilenav__logo {
	display: block;
	height: 30px;
	width: auto;
}

.zd-mobilenav__close {
	position: absolute;
	inset-inline-end: -10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	padding: 10px;
	cursor: pointer;
}

/* The search at the head of the categories panel. */
.zd-mnav__search {
	margin-bottom: 20px;
}

/*
 * The whole shorthand, not just the colour.
 *
 * The base rule is `border: 1px solid var(--hdr-field)`, and --hdr-field is
 * declared on .zd-header. This panel is a sibling of it, so the variable is
 * unset here, the shorthand is invalid at computed-value time and resets to
 * its initial — style none, width zero. A border-color on top of that has
 * nothing to paint.
 */
.zd-mnav__search .zd-search__input {
	height: 44px;
	border: 1px solid var(--rule-strong);
	background-color: transparent;
	color: var(--ink);
	--ph: var(--muted);
}

.zd-mnav__search .zd-search__icon {
	stroke: var(--ink);
}

/*
 * The three departments, across a row.
 *
 * The current one is underlined rather than filled: the panel below it is
 * already the whole of the answer, so the tab only has to say which.
 */
.zd-mnav__tabs {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--rule);
}

.zd-mnav__tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0 0 11px;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 480;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
}

.zd-mnav__tab.is-current {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.zd--ar .zd-mnav__tab {
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 14px;
}

/* The pictures across the top of a department. */
.zd-mnav__quick {
	display: grid;
	/* Always three tracks: a department with two tiles keeps the same size. */
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 20px;
}

/*
 * Everything in the department, then the things in it one by one. The rows
 * read as the accordion heads do, so a list of links and a list of openable
 * groups make one list rather than two.
 */
.zd-mnav__all,
.zd-mnav__row {
	display: block;
	padding: 20px 0;
	font-size: 13px;
	font-weight: 480;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.zd-mnav__all {
	letter-spacing: 0.1em;
	color: var(--muted);
}

.zd-mnav__row.is-accent {
	color: var(--accent);
}

.zd--ar .zd-mnav__all,
.zd--ar .zd-mnav__row {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 14px;
}

.zd-mnav__tile {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	color: var(--ink);
	text-decoration: none;
}

.zd-mnav__shot {
	display: block;
	width: 100%;
	/* Without this the img's own height attribute wins and the ratio is ignored. */
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.zd-mnav__name {
	font-size: 10.5px;
	font-weight: 480;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

.zd--ar .zd-mnav__name {
	text-transform: none;
	letter-spacing: 0.02em;
}

/*
 * The thing that opens the search panel, dressed as the field it stands in
 * for. Only ever drawn on a phone; see the breakpoint blocks below.
 */
.zd-search__open {
	display: none;
	width: 100%;
	align-items: center;
	gap: 11px;
	height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--rule-strong);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--font-body);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-align: start;
	color: var(--muted);
	cursor: pointer;
}

.zd-search__open .zd-search__icon {
	position: static;
	flex: 0 0 auto;
	transform: none;
	width: 15px;
	height: 15px;
	stroke: var(--ink);
}

.zd-search__open-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The tally beside the saved pieces' title; the script fills and shows it. */
.zd-favs__count {
	color: var(--muted);
	font-weight: 400;
}

/* What was looked at lately, under what was kept. */
.zd-favs__seen {
	margin-top: clamp(40px, 5vw, 72px);
}

/* ------------------------------------------------------------- search */

/*
 * The search panel. Never drawn above the mobile breakpoint — see the rule in
 * the min-width block — where the header's own field has room to work.
 */
.zd-find {
	position: fixed;
	inset-inline: 0;
	/*
	 * Between the header and the tab bar, not over them.
	 *
	 * The mark still says whose shop this is and the four tabs are still the
	 * way out, so the panel takes the room between the two rather than the
	 * whole screen. The top follows the header's measured height, --zd-hdr-h
	 * from header.js, because the header is shorter on a listing than on the
	 * home page — and shorter again while this is open, since its own search
	 * field stands down. The z-index sits under the tab bar's 61 and over the
	 * page, so the bar draws on top and stays usable.
	 */
	top: var(--zd-hdr-h, 54px);
	bottom: 0;
	z-index: 59;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.zd-find__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px var(--gutter);
	border-bottom: 1px solid var(--rule);
}

.zd-find__back {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-inline-start: -8px;
	padding: 0;
	background: none;
	border: none;
	color: var(--ink);
	cursor: pointer;
}

.zd-find__back svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zd--rtl .zd-find__back svg {
	transform: scaleX(-1);
}

.zd-find__form {
	flex: 1 1 auto;
	min-width: 0;
}

.zd-find__form .zd-search__label {
	position: relative;
	display: block;
}

/*
 * The glass sits at the start of the field, as the reference has it, rather
 * than at the end where the header wears it.
 */
.zd-find__glass {
	position: absolute;
	inset-inline-start: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.5;
	stroke-linecap: round;
	pointer-events: none;
}

.zd-find__input {
	height: 44px;
	border: 1px solid var(--rule-strong);
	background-color: transparent;
	color: var(--ink);
	padding-inline: 38px 14px;
	--ph: var(--muted);
}

.zd-find__body {
	/* Room at the foot for the tab bar, which draws above this. */
	padding: 22px var(--gutter) calc(76px + env(safe-area-inset-bottom, 0px));
}

.zd-find__sec + .zd-find__sec {
	margin-top: 30px;
}

.zd-find__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.zd-find__h {
	margin: 0 0 14px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 480;
	letter-spacing: 0.04em;
	color: var(--ink);
}

.zd-find__clear {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--ink);
	opacity: 0.6;
	cursor: pointer;
}

.zd-find__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.zd-find__chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 15px;
	border: 1px solid var(--rule);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--ink);
	background: none;
	font-family: var(--font-body);
	cursor: pointer;
}

.zd-find__chip:hover {
	text-decoration: none;
	border-color: var(--rule-strong);
}

.zd-acc {
	border-bottom: 1px solid var(--rule);
}

.zd-acc__head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	padding: 20px 0;
	font-family: var(--font-body);
	font-size: 13px;
	/*
	 * A fifth of a step up from regular, through the whole panel. Satoshi
	 * ships 300/400/500/700 and IBM Plex Sans Arabic 300/400/500/600, so 480
	 * resolves to the 500 cut in both rather than being synthesised.
	 */
	font-weight: 480;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
}

.zd-acc__sign {
	color: var(--muted);
	font-size: 14px;
	letter-spacing: 0;
}

.zd-acc__body {
	padding: 0 0 22px;
}

.zd-acc__link {
	display: block;
	padding-block: 9px;
	padding-inline-start: 14px;
	font-size: 13px;
	font-weight: 480;
	letter-spacing: 0.04em;
	color: var(--ink);
}

.zd-acc__link--sub {
	color: var(--muted);
	padding-inline-start: 28px;
}

.zd-acc__link.is-accent {
	color: var(--accent);
}

/* ---------------------------------------------------------------- bands */

.zd-main {
	display: block;
}

.zd-gap {
	height: clamp(48px, 6vw, 92px);
}

.zd-band {
	position: relative;
	display: grid;
}

.zd-band--two {
	grid-template-columns: 1fr 1fr;
}

.zd-band--three {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.zd-band__cell {
	position: relative;
	display: block;
	min-width: 0;
}

.zd-band__cell:hover {
	text-decoration: none;
}

.zd-band__cell img {
	display: block;
	width: 100%;
	height: auto;
}

.zd-band__overlay {
	position: absolute;
	inset-inline: 0;
	top: 70%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	padding-inline: 24px;
}

.zd-hero__title {
	margin: 0;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 500;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: clamp(24px, 2.9vw, 42px);
	line-height: 1.35;
	text-shadow: 0 0 26px rgba(0, 0, 0, 0.35);
	max-width: 16em;
}

.zd--ar .zd-hero__title,
.zd--ar .zd-band__caption,
.zd--ar .zd-soldes__title {
	text-transform: none;
	letter-spacing: 0;
}

.zd-band__caption {
	position: absolute;
	inset-inline: 0;
	top: 70%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-weight: 500;
	/*
	 * Room above the capitals for their accents — "CAFTANS DE FÊTE" has one,
	 * and Clash Display's declared ascent stops exactly at the top of it. See
	 * the note on .zd-doc__h2 in pages.css. The caption is anchored by its
	 * bottom edge, so the leading grows upward and the 25% line holds.
	 */
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	padding-inline: 18px;
	text-shadow: var(--shadow-caption);
	pointer-events: none;
}

/*
 * The fete band writes its title onto two frames, the middle one and the last,
 * and each screen shows one of them — see template-parts/home/fete.php. This is
 * the wide screen, where all three frames are up and the middle one carries it.
 */
.zd-band__cell.is-capped-narrow .zd-band__caption {
	display: none;
}

.zd-band__caption--fete {
	letter-spacing: 0.22em;
	font-size: clamp(20px, 2.6vw, 35px);
}

.zd-band__caption--editorial {
	letter-spacing: 0.2em;
	font-size: clamp(17px, 1.9vw, 30px);
	line-height: 1.4;
	padding-inline: 24px;
}

.zd-band__caption--nouv {
	position: static;
	transform: none;
	letter-spacing: 0.28em;
	font-size: clamp(17px, 1.9vw, 30px);
	text-shadow: var(--shadow-caption);
}

/* ------------------------------------------------------------ editorial */

.zd-editorial {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: stretch;
	background: var(--paper);
}

.zd-editorial__side {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(30px, 5vw, 80px);
}

.zd-editorial__inset {
	position: relative;
	display: block;
	width: 64%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.zd-editorial__inset:hover,
.zd-editorial__main:hover {
	text-decoration: none;
}

.zd-editorial__inset picture {
	display: block;
}

.zd-editorial__inset-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.zd-editorial__main {
	position: relative;
	display: block;
}

.zd-editorial__main img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------- sale */

.zd-soldes {
	position: relative;
}

.zd-soldes__link {
	display: block;
	position: relative;
}

.zd-soldes__link:hover {
	text-decoration: none;
}

.zd-soldes__img {
	display: block;
	width: 100%;
	height: auto;
}

.zd-soldes__tint {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.17);
}

.zd-soldes__content {
	position: absolute;
	inset-inline: 0;
	top: 70%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-inline: 24px;
}

.zd-soldes__title {
	display: block;
	margin: 0;
	padding-block: clamp(16px, 2vw, 30px);
	padding-inline: clamp(22px, 3vw, 46px);
	text-align: center;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--sale);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(40px, 6.6vw, 98px);
	line-height: 1.08;
	max-width: 100%;
}

.zd-soldes__note {
	display: block;
	margin: 0;
	text-align: center;
	color: #FFFFFF;
	font-size: 11px;
	letter-spacing: 0.1em;
	font-weight: 300;
}

/* ------------------------------------------------- quantity stepper --- */

/* Shared by the product page and the cart line; the cart resizes it
   with .zd-qty--line. */
.zd-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--rule);
	width: 126px;
	height: 42px;
}

.zd-qty__btn {
	flex: 1 1 0;
	height: 100%;
	background: none;
	border: none;
	font-size: 15px;
	color: var(--ink);
	cursor: pointer;
}

.zd-qty__input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 12.5px;
	border: none;
	background: none;
	color: var(--ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.zd-qty__input::-webkit-outer-spin-button,
.zd-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------- footer */

.zd-footer {
	background: var(--paper);
	padding: clamp(44px, 5vw, 70px) var(--gutter) 30px;
}

/*
 * One footer everywhere. Inner pages give it room through their own content
 * padding; the home page ends on a full-bleed band, so the separation is
 * added here rather than by varying the footer itself.
 */
.home .zd-footer {
	margin-top: clamp(50px, 6vw, 88px);
}

.zd-footer__cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(22px, 3vw, 44px);
	max-width: 1440px;
	margin: 0 auto;
}

.zd-fcol__head,
.zd-fcol__title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	padding: 0 0 16px;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 575;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: start;
}

.zd-fcol__head {
	cursor: default;
}

.zd-fcol__sign {
	display: none;
	color: var(--muted);
	letter-spacing: 0;
}

.zd-fcol__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 18px;
}

.zd-fcol__body a {
	font-size: 12px;
	font-weight: 345;
	color: var(--muted);
}

.zd-fcol--social .zd-fcol__title {
	padding-bottom: 16px;
}

.zd-social {
	display: flex;
	align-items: center;
	gap: 16px;
}

.zd-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}

.zd-social__svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zd-social__svg--filled {
	fill: currentColor;
	stroke: none;
}

.zd-pay {
	max-width: 1440px;
	margin: clamp(10px, 1.1vw, 15px) auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.zd-pay__svg {
	width: 31px;
	height: 31px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zd-pay__coin {
	fill: var(--paper);
}

.zd-pay__cashplus {
	display: block;
	height: 50px;
	width: auto;
}

/*
 * One footer everywhere, at the size the shop pages were showing.
 *
 * WooCommerce ships `.woocommerce-page img{height:auto}` (specificity 0,1,1),
 * which outranks a single class. That let the mark render at its full 50px on
 * shop, product and cart pages while the home page — which has no
 * .woocommerce-page body class — held it at 25px. The larger mark is the one
 * being kept, so the size is stated once and given enough specificity to win
 * on every route rather than only where WooCommerce happens to intervene.
 */
.zd-pay .zd-pay__cashplus {
	height: 50px;
	width: auto;
}

.zd-logo .zd-logo__img {
	height: 100%;
}

/*
 * The language pair at the foot. Only drawn on a phone; above the mobile
 * breakpoint the header carries it and this would be a second copy.
 */
.zd-footer__lang {
	display: none;
}

.zd-footer__legal {
	max-width: 1440px;
	margin: clamp(8px, 0.9vw, 11px) auto 0;
	padding-top: clamp(9px, 1vw, 12px);
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: flex-start;
	font-size: 11px;
	font-weight: 345;
	letter-spacing: 0.1em;
	color: var(--muted);
}

/* ------------------------------------------------------ fallback pages */

.zd-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 26px var(--gutter) 80px;
}

/* WooCommerce pages lay themselves out edge to edge. */
.zd-wc-page {
	width: 100%;
}

.zd-page__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.2;
	margin: 0 0 24px;
}

.zd-page__content {
	font-size: 16px;
	line-height: 1.7;
}

/* ------------------------------------------------- solid header mode ---- */

/*
 * Every page except the home page uses the Boutique header: opaque, sticky,
 * gold logo throughout — no overlay, no wash, no scroll-away.
 */
.zd-header--solid {
	position: sticky;
	--hdr-bg: var(--paper);
	--hdr-left: #000000;
	--hdr-right: #000000;
	--hdr-muted: #1A1A1A;
	--hdr-sep: var(--rule-strong);
	--hdr-field: #1A1A1A;
	--hdr-ph: var(--muted);
	--logo-light: 0;
	--logo-gold: 1;
}

.zd-header--solid .zd-header__wash {
	display: none;
}

.zd-header--solid .zd-nav {
	max-height: none;
	opacity: 1;
	transform: none;
}

.zd-header--solid .zd-search__input {
	background-color: var(--paper);
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 1099px) {
	.zd-account__fav {
		display: none;
	}
}

@media (max-width: 1039px) {
	.zd-account {
		gap: 14px;
	}
}

@media (max-width: 899px) {
	/*
	 * The phone header: the mark, the departments, then the search. The pair of
	 * language links is not in it — see .zd-footer__lang.
	 *
	 * The search comes last and hangs below the header's own ground, so it sits
	 * over the top of the picture rather than taking a white band of its own —
	 * the arrangement on the reference. The masthead stops being a row and lets
	 * its children join the stack directly, which is the only way to put the
	 * search after a navigation bar that is its sibling in the markup.
	 */
	.zd-header__stack {
		display: grid;
		grid-template-columns: 1fr;
	}

	.zd-masthead {
		display: contents;
	}

	/* The language pair has gone to the foot; the header keeps the room. */
	.zd-header__utility {
		display: none;
	}

	/*
	 * While the search panel is up, the header is the mark and nothing else.
	 *
	 * Its own search field would be a second one directly above the panel's,
	 * and the departments are a place to go rather than part of searching —
	 * they are a tap away on the Catégories tab, which stays lit below. The
	 * panel's top follows the header down as it shrinks, since it is measured
	 * after this class lands.
	 */
	body.zd-finding .zd-masthead__search,
	body.zd-finding .zd-nav {
		display: none;
	}

	/*
	 * The basket and the checkout keep the mark and nothing else.
	 *
	 * They are pages with something to do on them, not pages to browse from,
	 * and the departments row with the search field under it was taking a
	 * third of the screen and holding it there — the header is sticky. Both
	 * are a tap away on the Catégories tab.
	 */
	/*
	 * The basket takes the whole header for itself: its own title row, with
	 * the way out beside it, is the header — see .zd-cart__head in cart.css.
	 * There is nowhere to go from the basket that the row does not offer, and
	 * the mark above it was a third row of chrome on a page of figures.
	 */
	body.woocommerce-cart .zd-header {
		display: none;
	}

	body.woocommerce-checkout .zd-nav,
	body.woocommerce-checkout .zd-masthead__search,
	body.zd-favs-page .zd-nav,
	body.zd-favs-page .zd-masthead__search {
		display: none;
	}

	/*
	 * The saved pieces name themselves under the mark, centred, with the
	 * count the browser holds — there is nothing to browse from here either.
	 */
	body.zd-favs-page .zd-favs__lede {
		text-align: center;
		padding-top: 4px;
	}

	body.zd-favs-page .zd-favs__lede .zd-doc__eyebrow {
		display: none;
	}

	body.zd-favs-page .zd-favs__lede .zd-doc__lead {
		margin-inline: auto;
		max-width: 30em;
	}

	/*
	 * A product listing keeps the mark and nothing else.
	 *
	 * Its own bar sits directly under the logo, naming the department and
	 * offering a search, so the departments row above it and the header's
	 * search field are both saying something the page has already said. The
	 * three departments stay one tap away on the Catégories tab, and the bar's
	 * magnifier calls the search field back.
	 */
	body.zd-archive .zd-nav,
	body.zd-archive .zd-masthead__search {
		display: none;
	}

	.zd-masthead__left  { order: 1; }
	.zd-nav             { order: 2; }
	.zd-masthead__search { order: 3; }

	.zd-masthead__left {
		justify-content: center;
		padding: 12px var(--gutter) 12px;
	}

	/*
	 * Centred for real.
	 *
	 * The mark is wider than it is tall by a different ratio than its box, so
	 * contain leaves slack at the sides. On a desktop that slack is deliberate:
	 * the logo sits at the start of the masthead row, hard against the gutter,
	 * which is why the artwork is pinned to the leading edge. Centre the box on
	 * a phone and the artwork still sits off to one side of it — so here it is
	 * centred in its box as well, in both directions of writing.
	 */
	.zd-logo__img,
	.zd--rtl .zd-logo__img {
		object-position: center;
	}

	/*
	 * White on a phone, wherever you are.
	 *
	 * Over a hero the desktop header is a dark wash with the mark in white —
	 * handsome on a wide screen with the photograph breathing around it, and on
	 * a phone it is a grey band over the only picture on the page. The paper
	 * treatment the rest of the site uses is cleaner and matches the reference.
	 */
	.zd-header {
		background: transparent;
		--hdr-bg: var(--paper);
		--hdr-left: #000000;
		--hdr-right: #000000;
		--hdr-muted: #1A1A1A;
		--hdr-sep: var(--rule-strong);
		--hdr-field: #1A1A1A;
		--hdr-ph: var(--muted);
		--logo-light: 0;
		--logo-gold: 1;
	}

	/* No wash to fade in: the ground is already paper. */
	.zd-header__wash {
		display: none;
	}

	.zd-masthead__left,
	.zd-nav {
		background: var(--hdr-bg);
	}

	/*
	 * The header holds its own ground; only the search hangs below it.
	 *
	 * Fixed, the whole header floated and the first hundred and thirty pixels
	 * of the hero — its caption among them — sat behind white. Sticky gives the
	 * mark and the departments a place in the flow, so the picture starts where
	 * they end, and the search alone is lifted out to lie over it.
	 */
	.zd-header {
		position: sticky;
	}

	/*
	 * The top padding here is doing two jobs, which is why it is as large as it
	 * is: it sets the gap under the departments, and it holds the field at the
	 * height it already sat at when the mark and the departments were further
	 * apart. Tighten the logo row and this grows by the same amount.
	 */
	.zd-masthead__search {
		padding: 32px var(--gutter) 16px;
		background: var(--hdr-bg);
	}

	/*
	 * The button in place of the field, here and in the categories panel.
	 */
	.zd-search__open {
		display: flex;
	}

	.zd-masthead__search > .zd-search,
	.zd-mnav__search.zd-search {
		display: none;
	}

	/*
	 * A pane rather than a hole: the control carries a thin wash of paper so
	 * it reads as sitting on the picture, with the photograph still faintly
	 * visible through it, the way the reference has it.
	 */
	.zd-masthead__search .zd-search__open,
	.zd-masthead__search .zd-search__input {
		height: 42px;
		background-color: rgba(255, 254, 251, 0.72);
		/* Ink, not a hairline: it lies over a photograph and has to hold. */
		border-color: var(--ink);
		color: var(--ink);
		--ph: var(--muted);
	}

	.zd-footer__lang {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 18px 0 2px;
		font-size: 11.5px;
		letter-spacing: 0.08em;
	}

	.zd-footer__lang .zd-lang {
		color: var(--muted);
	}

	.zd-footer__lang .zd-lang.is-current {
		color: var(--ink);
	}

	.zd-footer__sep {
		color: var(--rule-strong);
	}

	/*
	 * Only the home page has a photograph for the search to lie on. Everywhere
	 * else the page opens with a breadcrumb and a title, and a transparent
	 * field over those left two lines of text on top of each other — so there
	 * it keeps its place in the header and its paper behind it.
	 */
	.zd-header:not(.zd-header--solid) .zd-masthead__search {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding-bottom: 0;
		background: transparent;
	}

	.zd-masthead__search .zd-search__icon {
		stroke: var(--ink);
	}

	.zd-mnav__search.zd-search__open {
		margin-bottom: 20px;
	}

	.zd-masthead__search .zd-search__input::-webkit-search-cancel-button {
		filter: none;
	}

	.zd-logo {
		height: 30px;
		width: 136px;
	}

	/* The header's own cart and favourites links; the bar carries them below. */
	.zd-account {
		display: none;
	}

	/*
	 * The departments stay, as a row of three under the search — the mega menu
	 * they open on a desktop is a hover affair, so on a phone each is simply a
	 * link to its own page and the full tree lives behind Catégories.
	 */
	.zd-nav {
		display: block;
	}

	/*
	 * The header stays put on a phone.
	 *
	 * On a desktop the departments fold away as you scroll down and return as
	 * you scroll up, which keeps a tall hero uncluttered. On a phone the row is
	 * the only way into the three departments, so it folding out from under a
	 * thumb mid-scroll is a menu that moves while you aim at it.
	 */
	.zd-header.is-hidden:not(.is-hover) .zd-nav {
		max-height: none;
		opacity: 1;
		transform: none;
	}

	.zd-nav__bar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		padding: 0 var(--gutter);
	}

	.zd-nav__link {
		justify-content: center;
		padding: 13px 4px;
		font-size: 13px;
		text-align: center;
	}

	.zd-mega {
		display: none !important;
	}

	/*
	 * One picture per band.
	 *
	 * A two-up band stacked on a phone became two images with the caption
	 * straddling the seam, and doubled the length of the page for no extra
	 * information — both cells lead to the same place. The second is kept: it
	 * is the one composed with the subject in the frame.
	 */
	/*
	 * No breathing room between the bands on a phone.
	 *
	 * The spacers set the rhythm of a wide screen, where the bands sit side by
	 * side and need telling apart. Stacked one above another they read as one
	 * column of pictures, and a band of paper across it is a hole.
	 */
	.zd-gap {
		display: none;
	}

	.zd-band--two,
	.zd-band--three,
	.zd-editorial {
		display: grid;
		grid-template-columns: 1fr;
	}

	/*
	 * Each band keeps its right-hand frame and drops the rest. The columns are
	 * restated above because a hidden child leaves the grid altogether: without
	 * it the survivor would sit in the first track and the second would stand
	 * empty, which on the editorial band is a picture 55% of the way across.
	 */
	.zd-band--two .zd-band__cell:first-child,
	.zd-band--three .zd-band__cell:not(:last-child),
	.zd-editorial__side {
		display: none;
	}

	.zd-band__cell.is-capped-narrow .zd-band__caption {
		display: flex;
	}

	.zd-band__cell.is-capped-wide .zd-band__caption {
		display: none;
	}

	/*
	 * And all of them the same tall frame.
	 *
	 * The sources are three by four but for the sale's, which is five by four.
	 * Stacked at their own proportions the page read as a pile of different
	 * shapes; cropped alike it reads as one rhythm. Height stays auto because
	 * the tags carry a height attribute, which outranks aspect-ratio.
	 */
	.zd-band__cell img,
	.zd-editorial__main img,
	.zd-soldes__img {
		aspect-ratio: 9 / 16;
		height: auto;
		object-fit: cover;
	}

	/*
	 * Every heading on the same line: its last line a quarter of the way up
	 * from the foot of its picture.
	 *
	 * Anchored by the bottom rather than placed by the middle, so the line
	 * holds whether the heading runs to one line or three — centring a block
	 * only puts its middle somewhere, and a two-line caption and a three-line
	 * one then end in different places down a page of stacked bands.
	 */
	.zd-band__overlay,
	.zd-band__caption,
	.zd-soldes__content {
		top: auto;
		bottom: 25%;
		transform: none;
	}

	/*
	 * Nothing laid over the pictures.
	 *
	 * The bands used to carry a gradient down their lower half, and the sale
	 * band a flat tint, so that white captions held against a pale frame. The
	 * pictures are wanted as they were shot, so both come off and the captions
	 * are left to their own text-shadow.
	 */
	.zd-soldes__tint {
		display: none;
	}

	/*
	 * The sale picture is the one landscape frame on the page, so the tall crop
	 * takes only the middle 45% of its width and where that slice falls is the
	 * whole of it. It is placed on the woman, who stands about two thirds
	 * across; centred, the band would be dune. The vertical figure does nothing
	 * once the frame is taller than the source — there is no height to spare —
	 * but it is left stated for the shape it describes.
	 */
	.zd-soldes__img {
		object-position: 65% 22%;
	}

	/*
	 * "Jusqu'à 40 %" broke after the number, leaving the sign alone on a line.
	 * A smaller setting keeps the promise on two lines rather than four, and
	 * the block sits higher so it reads against sky rather than across her.
	 */
	.zd-soldes__title {
		font-size: clamp(26px, 9vw, 40px);
		line-height: 1.12;
		padding: 14px 18px 0;
	}

	/*
	 * The sale band is the only one with a second line of copy under its
	 * heading. Left in the flow it would be the thing sitting on the quarter
	 * line, with the heading pushed above it and out of step with the other
	 * bands — so it is hung below the block instead.
	 */
	.zd-soldes__note {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: 12px 24px 0;
	}

	/*
	 * The columns box gave these their spacing through its grid gap, and that
	 * went when the box did — see `display: contents` above. Stated here as a
	 * margin instead, at the 22px the gap resolved to at this width.
	 */
	.zd-fcol {
		border-bottom: 1px solid var(--rule);
		margin-bottom: 22px;
	}

	/*
	 * Less paper before the footer begins.
	 *
	 * Two separations were stacking: the home page's own margin, there because
	 * it used to end on a full-bleed band that needed holding off the links,
	 * and the footer's top padding on top of it — ninety-four pixels of blank
	 * before the first mark. The bands run flush into one another now, so the
	 * margin goes and the padding alone does the work.
	 */
	.home .zd-footer {
		margin-top: 0;
	}

	.zd-footer {
		padding-top: 36px;
	}

	/*
	 * The networks, then the link rows, then the payment marks.
	 *
	 * The networks are a child of the link columns while the marks are a
	 * sibling of them, so no single ordering reaches both — until the columns
	 * stop being a box. `display: contents` on them hands their five children
	 * straight to this flex column; the networks are then ordered to the front
	 * and everything else falls out in the order it is written, which already
	 * puts the marks after the last link row and before the language.
	 */
	.zd-footer {
		display: flex;
		flex-direction: column;
	}

	.zd-footer__cols {
		display: contents;
	}

	.zd-pay {
		margin: 0 auto 26px;
	}

	/*
	 * The networks lead the link columns on a phone.
	 *
	 * Four collapsed accordions is a dull thing to meet first, and the socials
	 * are the one part of them worth looking at — so they lead, centred, ahead
	 * even of the payment marks. Order rather than new markup: on a wide screen
	 * they keep their own column at the end of the row, where they belong.
	 */
	.zd-fcol--social {
		order: -1;
		border-bottom: 0;
		padding-top: 4px;
		padding-bottom: 6px;
	}

	.zd-fcol--social .zd-fcol__title,
	.zd-fcol--social .zd-social {
		justify-content: center;
	}

	/*
	 * The payment marks, a little quieter.
	 *
	 * The Cash Plus mark needs two classes to carry a height, not one:
	 * WooCommerce's `.woocommerce-page img{height:auto}` is (0,1,1) and a media
	 * query adds no specificity of its own — see the base rule above.
	 */
	.zd-pay {
		gap: 18px;
	}

	.zd-pay__svg {
		width: 25px;
		height: 25px;
	}

	.zd-pay .zd-pay__cashplus {
		height: 40px;
	}

	.zd-fcol__head {
		cursor: pointer;
	}

	.zd-fcol__sign {
		display: inline;
	}

}

@media (min-width: 900px) {
	.zd-mobilenav,
	.zd-find {
		display: none !important;
	}

	/* The footer columns are always open above the mobile breakpoint, even
	   though the accordion button remains in the markup for small screens. */
	.zd-fcol__body {
		display: flex !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zd-header,
	.zd-nav,
	.zd-header__wash,
	.zd-logo__img,
	.zd-search__input,
	.zd-nav__link {
		transition: none !important;
	}
}

/* ==========================================================================
   Accordion

   One disclosure row, used by the product page's care and FAQ lists and by the
   FAQ and returns pages. It lived in product.css while only the product page
   had one; it is shared now, so it lives with the rest of the shared furniture.
   ========================================================================== */

.zd-acc-list {
	display: flex;
	flex-direction: column;
	padding-top: 14px;
}

.zd-row {
	border-top: 1px solid var(--rule);
}

.zd-row__end {
	border-top: 1px solid var(--rule);
}

.zd-row__head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: none;
	border: none;
	padding: 19px 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
}

.zd-row__sign {
	color: var(--muted);
}

.zd-row__body {
	margin: 0;
	padding: 0 0 20px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
	max-width: 46em;
}


.zd-row__body--list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 12px;
	line-height: 1.6;
}


/* ==========================================================================
   Notices

   Two behaviours, not two colours.

   A confirmation of something the shopper just did ("added to your bag") is
   feedback, not page content: it used to be pasted into the document between
   the breadcrumb and the gallery, a full-bleed slab of grey that shoved the
   product down the page to say one short sentence. It now rises as a slip from
   the inline edge the cart panel already owns, and leaves on its own.

   Anything the shopper has to act on - a refused code, a failed payment - stays
   in the document where they are working, but at a measure they can read rather
   than stretched across 1440px.

   State is carried on one 3px edge rule, the same device the order pages use.
   Nothing here fills with colour: this house is built out of hairlines.
   ========================================================================== */

/* ------------------------------------------------------------- in flow --- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper:not(:empty) {
	max-width: 1440px;
	margin: 0 auto;
	padding: 20px var(--gutter) 0;
}

/* The archive prints its own inside a section that is already inset. */
.zd-shop > .woocommerce-notices-wrapper:not(:empty) {
	max-width: none;
	padding: 0 0 6px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	/* Prose, not a banner: a line long enough to read and no longer. */
	max-width: 640px;
	width: auto;
	margin: 0 0 12px;
	padding: 15px 18px;
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--rule-strong);
	border-radius: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.65;
	list-style: none;
	word-wrap: break-word;
}

.woocommerce-message {
	border-inline-start-color: #1E7A3C;
}

.woocommerce-info {
	border-inline-start-color: #1A1A1A;
}

.woocommerce-error {
	border-inline-start-color: var(--accent);
}

/* The glyph comes from a webfont WooCommerce loads for this alone. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	content: none;
	display: none;
}

.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none outside !important;
}

.woocommerce-message li + li,
.woocommerce-info li + li,
.woocommerce-error li + li {
	margin-top: 6px !important;
}

/*
 * "View cart", "Undo?". WooCommerce floats these right, which drops them out of
 * flow and lands them at the wrong end in Arabic. They are also not the point
 * of the notice, so they read as a link rather than competing with the page's
 * real buttons.
 */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.zd-toast__action {
	float: none;
	flex: 0 0 auto;
	display: inline;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--rule-strong);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.zd-toast__action:hover,
.woocommerce-message .button:focus-visible,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:focus-visible,
.zd-toast__action:focus-visible {
	border-bottom-color: #1A1A1A;
	background: none;
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-message > a:not(.button),
.woocommerce-info > a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------ the slip --- */

/*
 * Anchored to the inline end, which is the edge the cart panel slides from, so
 * the one overlay the site already had and this one come from the same place.
 * Below the panel and its scrim, above everything else.
 */
.zd-toasts {
	position: fixed;
	inset-inline-end: var(--gutter);
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(92vw, 380px);
	pointer-events: none;
}

.zd-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 16px 18px;
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--rule-strong);
	background: var(--paper);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11);
	pointer-events: auto;
	opacity: 0;
	transform: translateX(14px);
	transition:
		opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.zd--rtl .zd-toast {
	transform: translateX(-14px);
}

.zd-toast.is-in {
	opacity: 1;
	transform: translateX(0);
}

.zd-toast.is-out {
	opacity: 0;
	transform: translateY(8px);
	transition-duration: 0.22s;
}

/* The edge is the only thing that differs: green confirms, red complains. */
.zd-toast--good {
	border-inline-start-color: #1E7A3C;
}

.zd-toast--bad {
	border-inline-start-color: var(--accent);
}

.zd-toast--info {
	border-inline-start-color: var(--ink);
}

.zd-toast__body {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink);
}

.zd-toast__body a {
	color: var(--ink);
}

.zd-toast__action {
	display: block;
	width: fit-content;
	margin-top: 11px;
}

.zd-toast__close {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: -3px -3px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease;
}

.zd--rtl .zd-toast__close {
	margin: -3px 0 0 -3px;
}

.zd-toast__close:hover,
.zd-toast__close:focus-visible {
	color: var(--ink);
}

/*
 * The dwell time, drawn as the hairline withdrawing rather than a bar filling.
 * No track behind it: what retracts is the rule the rest of the page is made
 * of. It holds while the slip is hovered or focused, so reading it buys time.
 */
.zd-toast__timer {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--rule-strong);
	transform-origin: left center;
	animation: zd-toast-timer var(--zd-toast-life, 6500ms) linear forwards;
}

.zd--rtl .zd-toast__timer {
	transform-origin: right center;
}

.zd-toast:hover .zd-toast__timer,
.zd-toast:focus-within .zd-toast__timer {
	animation-play-state: paused;
}

@keyframes zd-toast-timer {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.zd-toast {
		transform: none;
		transition: opacity 0.01ms linear;
	}

	.zd--rtl .zd-toast,
	.zd-toast.is-out {
		transform: none;
	}

	.zd-toast__timer {
		animation: none;
		transform: scaleX(0);
	}
}

@media (max-width: 560px) {
	.zd-toasts {
		inset-inline: 16px;
		width: auto;
	}
}

/*
 * The block notice, for anything still rendered by WooCommerce Blocks - the
 * cart and checkout are classic here, but the account and some fragments are
 * not, and its default is a rounded coloured card.
 */
.wc-block-components-notice-banner {
	max-width: 640px;
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--rule-strong);
	border-radius: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
}

.wc-block-components-notice-banner.is-success {
	border-inline-start-color: #1E7A3C;
}

.wc-block-components-notice-banner.is-error {
	border-inline-start-color: var(--accent);
}

.wc-block-components-notice-banner > svg {
	display: none;
}

/* ============================================= type-and-choose === */

/*
 * A select the browser has replaced with a box you type into, used by the
 * checkout's country and city fields and by the cart's delivery estimate. It
 * lives here rather than in either of those sheets because it belongs to both.
 */

/*
 * The field keeps the shape of every other field on the form; the menu hangs
 * under it. Logical properties throughout, so the Arabic build mirrors without
 * a second rule.
 */
.zd-combo {
	position: relative;
	min-width: 0;
}

.zd-combo__menu {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 4px);
	z-index: 20;
	max-height: 274px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--rule-strong);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
}

/*
 * A row names a place on one side and prices the trip to it on the other, so
 * the cost is known before the choice rather than after it.
 */
.zd-combo__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 14px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink);
	cursor: pointer;
}

.zd-combo__names {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.zd-combo__name {
	overflow-wrap: anywhere;
}

/* The courier's own spelling, kept under an Arabic name rather than hidden. */
.zd-combo__alt {
	font-size: 11px;
	color: var(--muted);
}

.zd-combo__price {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
}

/*
 * Hover and keyboard share one look: arrowing down the list should feel like
 * running the pointer over it.
 */
.zd-combo__item:hover,
.zd-combo__item.is-active {
	background: #F4F1EA;
}

.zd-combo__none {
	padding: 11px 14px;
	font-size: 12.5px;
	color: var(--muted);
}

/*
 * The select a type-and-choose box has taken over from. It still holds the
 * value that is posted, so it stays in the form rather than being removed —
 * out of sight, out of the tab order, and out of the way.
 */
.zd-combo__hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The box that replaced it wears the same clothes as every other field. */
.zd-combo__input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background-color: var(--paper);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink);
	outline: none;
}

.zd-combo__input:focus {
	border-color: #1A1A1A;
}

/* ========================================================= back to top === */

/*
 * Sits in the corner the language reads away from — end side, so it mirrors
 * for Arabic without a second rule — and under every overlay the theme opens,
 * which all sit at 50 and above.
 */
.zd-top {
	position: fixed;
	inset-inline-end: clamp(14px, 2vw, 26px);
	/*
	 * Clear of whatever is pinned along the foot — the tab bar on most pages,
	 * the buy bar on a product. Its height is measured and published as
	 * --zd-bottom-bar by header.js; on a wide screen there is nothing there
	 * and the figure is zero.
	 */
	bottom: calc(clamp(14px, 2vw, 26px) + var(--zd-bottom-bar, 0px));
	/*
	 * The height above the foot is the measured one and nothing else. A rule
	 * further down used to hard-code 56px here — the tab bar's height — which
	 * was right on a listing and wrong everywhere the bar is something else:
	 * the button stood on the product page's buy bar and on the basket's
	 * summary rather than above them.
	 */
	z-index: 40;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;

	/* Dark at rest, over photographs as readily as over paper. */
	border: 1px solid #1A1A1A;
	background: #1A1A1A;
	color: var(--paper);
	cursor: pointer;

	/*
	 * One declaration, not two: a second `transition` on the same rule
	 * replaces the first, so the fade this needs when it stands down has to
	 * be named here alongside the colours.
	 */
	transition: background-color 0.18s ease, border-color 0.18s ease,
		opacity 0.2s ease, visibility 0.2s;
}

.zd-top svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
}

/* Already dark, so reaching for it deepens rather than inverts. */
.zd-top:hover,
.zd-top:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
}

/* Stood down where the footer's own closing line is on screen. */
.zd-top.is-tucked {
	opacity: 0;
	visibility: hidden;
}

/* ====================================================== the tab bar === */

/*
 * A phone is held at the bottom, so that is where the four things a shopper
 * reaches for live. Above the mobile breakpoint the header carries them and
 * this is not drawn at all.
 */
.zd-tabbar {
	display: none;
}

@media (max-width: 899px) {
	.zd-tabbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		/*
		 * Above the categories panel, which is 60: the panel is opened from
		 * this bar and closed from it, so it has to stay under the thumb.
		 * Still below the filter drawer, the lightbox and the cart panel,
		 * which are their own full-screen things.
		 */
		z-index: 61;

		display: grid;
		grid-template-columns: repeat(4, 1fr);

		background: var(--paper);
		border-top: 1px solid var(--rule);
		/* Clear of the home indicator on a phone that has one. */
		padding-bottom: env(safe-area-inset-bottom, 0px);

		transition: transform 0.28s ease;
	}

	/*
	 * Tucked away while you read down the page.
	 *
	 * Translated rather than hidden, so it slides rather than blinks and so
	 * the safe-area padding travels with it. Anything focused inside brings
	 * it back: off-screen but still in the tab order is a trap otherwise.
	 */
	.zd-tabbar.is-tucked {
		transform: translateY(100%);
	}

	.zd-tabbar:focus-within {
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.zd-tabbar {
			transition: none;
		}
	}

	.zd-tabbar__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 56px;
		padding: 7px 4px;

		border: 0;
		background: none;
		font-family: var(--font-body);
		font-size: 10.5px;
		line-height: 1.2;
		letter-spacing: 0.02em;
		color: var(--muted);
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}

	.zd-tabbar__item svg {
		width: 21px;
		height: 21px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.4;
		stroke-linejoin: round;
	}

	/*
	 * Where you are, marked on the bar's own top edge.
	 *
	 * Drawn over the hairline the bar already carries rather than beside it,
	 * so the mark sits on the line instead of thickening the row. Only on the
	 * current tab: hovering is not being somewhere.
	 */
	.zd-tabbar__item.is-current::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: -1px;
		height: 2px;
		background: var(--ink);
	}

	/* Where you are now, and whatever is under your thumb. */
	.zd-tabbar__item.is-current,
	.zd-tabbar__item:hover,
	.zd-tabbar__item:focus-visible {
		color: var(--ink);
	}

	.zd-tabbar__item.is-current svg {
		stroke-width: 1.8;
	}

	.zd-tabbar__n::before {
		content: "(";
	}

	.zd-tabbar__n::after {
		content: ")";
	}

	/*
	 * The bar floats over the page, so the last of the footer would sit under
	 * it. The body is given its height back at the bottom.
	 */
	body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * No climbing back on the basket: the summary is pinned over the foot of
	 * the screen there, the page is short, and the button had nowhere to sit
	 * that was not on top of the total.
	 */
	body.woocommerce-cart .zd-top {
		display: none;
	}
}

/* ===================================================== suggestions === */

/*
 * What the shop offers while a word is still being typed, in two places: a
 * dropdown under the header's field on a wide screen, and the top of the
 * search panel on a phone. One set of rules, because it is one component —
 * only the box around it changes.
 */

.zd-sugg__sec + .zd-sugg__sec {
	margin-top: 18px;
}

.zd-sugg__h {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--muted);
}

.zd--ar .zd-sugg__h {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 12.5px;
}

.zd-sugg__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zd-sugg__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid var(--rule);
	font-size: 12.5px;
	color: var(--ink);
	transition: border-color 0.15s ease;
}

.zd-sugg__chip:hover,
.zd-sugg__chip:focus-visible {
	border-color: var(--ink);
	text-decoration: none;
}

.zd-sugg__chip-n {
	font-size: 11px;
	color: var(--muted);
}

.zd-sugg__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A row is a picture, a name and a price — what tells one caftan from another. */
.zd-sugg__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--ink);
}

.zd-sugg__row:hover,
.zd-sugg__row:focus-visible {
	text-decoration: none;
}

.zd-sugg__row:hover .zd-sugg__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zd-sugg__shot {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: var(--shade, #F7F5F0);
}

.zd-sugg__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/*
 * Two lines at most. A product name here runs to a dozen words and would push
 * the next suggestion off a phone on its own.
 */
.zd-sugg__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.35;
}

.zd-sugg__price {
	font-size: 12px;
	color: var(--muted);
}

.zd-sugg__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--rule);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}

.zd-sugg__all-n {
	color: var(--muted);
}

.zd-sugg__none {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

/* ---------------------------------------- the wide screen's dropdown --- */

/*
 * The dropdown hangs off the field, so the field's box has to be the thing it
 * is measured from — but only on a wide screen, where the dropdown is the
 * search. On a phone the typing happens in the panel instead, and this block
 * is floated over the hero by .zd-header:not(.zd-header--solid) further up;
 * claiming it here with an id outranked that rule and dropped the search back
 * into the flow, pushing the whole page down by its height.
 */
@media (min-width: 900px) {
	#zd-header-search {
		position: relative;
	}
}

.zd-sugg {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 8px);
	z-index: 60;
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 18px;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 14px 34px rgba(26, 26, 26, 0.12);
}

.zd-sugg[hidden] {
	display: none;
}

/* -------------------------------------------- inside the phone panel --- */

.zd-find__out {
	margin-bottom: 4px;
}

.zd-find__out[hidden] {
	display: none;
}

/*
 * Recent searches and the category chips are what to do *instead* of
 * searching. While an answer is on screen the shopper is plainly searching,
 * so they stand down rather than sit under it competing for the same tap.
 */
.zd-find__sec.is-stood-down {
	display: none;
}

/* ==================================================== opening screen === */

/*
 * A sheet of the shop's own paper with the mark drawn across it while the
 * first page of a visit loads. The wipe is the whole idea: a mark that fills
 * reads as something being made ready, where a mark that fades reads as a
 * mark that is simply there.
 *
 * It is painted from this stylesheet rather than assembled by script so that
 * it is up on the first frame — a curtain that arrives after the page it is
 * meant to cover is worse than no curtain.
 */
.zd-boot {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
	background: var(--paper);
	opacity: 1;
	transition: opacity 0.42s ease, visibility 0.42s;
}

/* A visit that has already seen it does not see it again. */
html.zd-booted .zd-boot {
	display: none;
}

.zd-boot.is-gone {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.zd-boot__mark {
	width: clamp(150px, 42vw, 240px);
}

.zd-boot__img,
.zd-boot__mark picture {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The wipe. clip-path rather than a width, so the letters keep their own
 * shape and are revealed where they stand instead of being squeezed.
 *
 * The hold from 58% is what the reference does: the mark finishes, then sits
 * finished for about as long again before going round. Without it the loop
 * reads as a flicker rather than as a breath.
 */
@keyframes zd-boot-wipe {
	0% {
		clip-path: inset(0 100% 0 0);
	}

	58%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}

/* Right to left, the mark is drawn the way the language is read. */
@keyframes zd-boot-wipe-rtl {
	0% {
		clip-path: inset(0 0 0 100%);
	}

	58%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}

.zd-boot__img {
	animation: zd-boot-wipe 1.6s cubic-bezier(0.32, 0, 0.2, 1) infinite;
}

.zd--rtl .zd-boot__img,
[dir="rtl"] .zd-boot__img {
	animation-name: zd-boot-wipe-rtl;
}

/*
 * Asked for less movement, the mark is simply present. The curtain still
 * lifts on load — the point of it is the waiting, not the animation.
 */
@media (prefers-reduced-motion: reduce) {
	.zd-boot__img {
		animation: none;
		clip-path: none;
	}
}

/*
 * No script, no curtain.
 *
 * Everything that takes this away is JavaScript, so without it the sheet
 * would stay over the shop for good. `scripting: none` is the browser saying
 * so itself, which is more reliable than waiting to be told.
 */
@media (scripting: none) {
	.zd-boot {
		display: none;
	}
}

/* ================================================== panels arriving === */

/*
 * How the panels come in.
 *
 * Every one of them was shown by dropping the `hidden` attribute, which the
 * rule at the top of this file answers with `display: none !important` — so
 * they did not arrive at all, they were simply there, whole, in the frame
 * after the tap. Nothing told the shopper where a panel had come from, which
 * is the one thing an entrance is for: a drawer that slides in from the edge
 * says it is a layer over the page and that the edge is where it goes back to.
 *
 * The attribute still does the hiding — it keeps a closed panel out of the
 * tab order and away from a stray tap. What changed is that it is set a beat
 * later, by window.zdReveal in header.js, after the box has travelled. The
 * class it adds is `is-in`, kept apart from the `is-open` that the size sheet
 * and the payment sheet already use for their own movement.
 *
 * One curve and one duration throughout, so two panels opening on the same
 * site are plainly the same kind of thing. 0.3s is long enough to be read as
 * movement and short enough never to be in the way of someone who knows where
 * they are going.
 */

.zd-panel,
.zd-drawer,
.zd-mobilenav,
.zd-find,
.zd-lb,
.zd-mega,
.zd-panel-scrim,
.zd-drawer-scrim,
.zd-scrim {
	transition: transform 0.3s cubic-bezier(0.32, 0, 0.2, 1),
		opacity 0.26s ease;
	will-change: transform, opacity;
}

/*
 * The side drawers — the basket and the filters — leave and return through
 * the edge they are anchored to. Both sit at inset-inline-end, so in Arabic
 * that edge is the left one and the journey is mirrored with it.
 */
.zd-panel:not(.is-in),
.zd-drawer:not(.is-in) {
	transform: translateX(100%);
}

.zd--rtl .zd-panel:not(.is-in),
.zd--rtl .zd-drawer:not(.is-in),
[dir="rtl"] .zd-panel:not(.is-in),
[dir="rtl"] .zd-drawer:not(.is-in) {
	transform: translateX(-100%);
}

/*
 * The full-screen ones rise instead. A sheet the size of the page sliding in
 * from an edge reads as the page itself moving; a short lift says a layer has
 * come up over it, which is what has happened.
 */
.zd-mobilenav:not(.is-in),
.zd-find:not(.is-in) {
	opacity: 0;
	transform: translateY(12px);
}

/* The lightbox grows into place from just under its own size. */
.zd-lb:not(.is-in) {
	opacity: 0;
	transform: scale(0.985);
}

/* The mega menu drops out of the header it belongs to. */
.zd-mega:not(.is-in) {
	opacity: 0;
	transform: translateY(-8px);
}

/* A scrim has nowhere to come from; it only deepens. */
.zd-panel-scrim:not(.is-in),
.zd-drawer-scrim:not(.is-in),
.zd-scrim:not(.is-in) {
	opacity: 0;
}

/*
 * Asked for less movement, the panels still appear and still leave — they
 * simply stop travelling to do it. The fade is kept: without it a panel would
 * cut in, which is harder to follow than the movement being avoided.
 */
@media (prefers-reduced-motion: reduce) {
	.zd-panel,
	.zd-drawer,
	.zd-mobilenav,
	.zd-find,
	.zd-lb,
	.zd-mega,
	.zd-panel-scrim,
	.zd-drawer-scrim,
	.zd-scrim {
		transition: opacity 0.2s ease;
	}

	.zd-panel:not(.is-in),
	.zd-drawer:not(.is-in),
	.zd-mobilenav:not(.is-in),
	.zd-find:not(.is-in),
	.zd-lb:not(.is-in),
	.zd-mega:not(.is-in) {
		opacity: 0;
		transform: none;
	}
}

/* ============================================ Arabic letter spacing === */

/*
 * Arabic letters join; spacing them apart breaks the joins. iPhones (Safari
 * and the Instagram/Facebook in-app browsers) then draw some letters in a form
 * the font does not have, and they show as "�" — "لديك" became "لدي��" on the
 * product page. Tracking is a Latin habit: on Arabic pages it is switched off
 * everywhere, whichever stylesheet set it.
 */
html[dir="rtl"] body,
html[dir="rtl"] body *,
.zd--rtl,
.zd--rtl * {
	letter-spacing: 0 !important;
}


/* ===================================================== WhatsApp support === */

/*
 * The other corner from "back to top" (start side, so it mirrors for Arabic),
 * at the same height above whatever is pinned to the foot of the screen.
 */
.zd-wa-fab {
	position: fixed;
	inset-inline-start: clamp(14px, 2vw, 26px);
	bottom: calc(clamp(14px, 2vw, 26px) + var(--zd-bottom-bar, 0px));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	min-width: 48px;
	padding: 0 12px;
	border-radius: 24px;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.45);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zd-wa-fab .zd-wa-mark {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.zd-wa-fab__label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.zd-wa-fab:hover,
.zd-wa-fab:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.5);
	text-decoration: none;
	color: #FFFFFF;
}

/* On a phone just the round mark; the words would cover the page. */
@media (max-width: 899px) {
	.zd-wa-fab {
		width: 48px;
		padding: 0;
		justify-content: center;
	}

	.zd-wa-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Out of the way while an order form is open over the page. */
html.zd-qo-lock .zd-wa-fab {
	display: none;
}