/* ==========================================================================
   Content pages

   One sheet for every page that is mostly words: FAQ, size guide, returns,
   about, privacy, terms, order tracking. They share a single vocabulary rather
   than each inventing its own, and it is deliberately the same vocabulary the
   contact and order pages already use — card, head, body, note, button.

   Logical properties throughout, so the Arabic build mirrors without a second
   sheet.
   ========================================================================== */

.zd-doc {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 32px);
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(18px, 2.4vw, 30px) var(--gutter) clamp(44px, 5vw, 78px);
}

/* ---------------------------------------------------------------- lede --- */

.zd-doc__lede {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zd-doc__eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.zd-doc__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 34px);
	/* 1.2 left a fifth of a pixel above an É; see the note on .zd-doc__h2. */
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.zd-doc__lead {
	margin: 0;
	max-width: 62ch;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--muted);
}

.zd--ar .zd-doc__title,
.zd--ar .zd-doc__eyebrow,
.zd--ar .zd-doc__h2,
.zd--ar .zd-doc__chip,
.zd--ar .zd-doc__btn,
.zd--ar .zd-doc__step-n {
	text-transform: none;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- jump --- */

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

.zd-doc__chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--rule);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.zd-doc__chip:hover,
.zd-doc__chip:focus-visible {
	border-color: #1A1A1A;
	text-decoration: none;
}

/* --------------------------------------------------------------- card --- */

.zd-doc__card {
	border: 1px solid var(--rule);
	background: var(--paper);
	/* So a jump link does not tuck the heading under the fixed header. */
	scroll-margin-top: 120px;
}

.zd-doc__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--rule);
}

.zd-doc__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #1A1A1A;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zd-doc__h2 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 13.5px;
	/*
	 * Said, so there is room above the capitals for their accents.
	 *
	 * Clash Display declares an ascent of exactly the height of an É — the
	 * acute reaches the top of the font's own box with nothing to spare. Left
	 * at `normal` the line box is that box, the accent sits on its edge, and
	 * Safari clips it: "NUMÉRO" renders as "NUMERO". A stated line-height puts
	 * half its leading above the text, which is the clearance the font does
	 * not give.
	 */
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zd-doc__h3 {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
}

.zd-doc__body {
	padding: 4px 22px 18px;
}

.zd-doc__muted {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
}

/* An accordion answer carries real prose, so it gets prose spacing. */
.zd-doc__answer p {
	margin: 0 0 10px;
}

.zd-doc__answer p:last-child {
	margin-bottom: 0;
}

.zd-doc__answer ul,
.zd-doc__answer ol {
	margin: 0 0 10px;
	padding-inline-start: 18px;
}

.zd-doc__answer li {
	margin-bottom: 5px;
}

.zd-doc__answer strong {
	color: var(--ink);
	font-weight: 500;
}

/* The card head already draws a rule; the first row must not draw a second. */
.zd-doc__body > .zd-acc-list {
	padding-top: 0;
}

.zd-doc__body > .zd-acc-list > .zd-row:first-child {
	border-top: 0;
}

/* -------------------------------------------------------------- table --- */

/* A table is the one thing allowed to scroll sideways on a narrow screen. */
.zd-doc__scroll {
	overflow-x: auto;
	margin: 14px 0 4px;
}

.zd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.zd-table th,
.zd-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--rule);
	text-align: start;
	white-space: nowrap;
}

.zd-table th {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--rule-strong);
}

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

.zd-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------------- note --- */

.zd-doc__note {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--rule-strong);
}

.zd-doc__note--good { border-inline-start-color: #1E7A3C; }
.zd-doc__note--wait { border-inline-start-color: #B4801F; }
.zd-doc__note--alert { border-inline-start-color: var(--accent); }

.zd-doc__note-title {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.zd-doc__note-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
}

/* -------------------------------------------------------------- stats --- */

.zd-doc__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	border: 1px solid var(--rule);
	background: var(--rule);
}

.zd-doc__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: var(--paper);
}

.zd-doc__stat-k {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

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

.zd-doc__stat-v {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
}

/*
 * The same three-up grid holding statements rather than figures, so the second
 * line is body copy at reading size instead of a display number.
 */
.zd-doc__stats--text .zd-doc__stat {
	gap: 9px;
	padding: 20px;
}

.zd-doc__stats--text .zd-doc__stat-v {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
}

/* ----------------------------------------------------- numbered steps --- */

.zd-doc__step {
	padding: 16px 0;
	border-top: 1px solid var(--rule);
}

.zd-doc__step:first-child {
	border-top: 0;
}

.zd-doc__step-t {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.zd-doc__step-n {
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0;
}

.zd-doc__step-lead {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

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

/* ----------------------------------------------------------- the CTA --- */

.zd-doc__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px solid var(--rule);
	text-align: center;
}

.zd-doc__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
}

/*
 * Centred under a centred panel, but a lede is set from the inline start and a
 * button floating in the middle of it reads as belonging to nothing.
 */
.zd-doc__lede .zd-doc__actions {
	justify-content: flex-start;
	margin-top: 12px;
}

.zd-doc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border: 1px solid var(--rule-strong);
	background: var(--paper);
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.zd-doc__btn:hover,
.zd-doc__btn:focus-visible {
	border-color: #1A1A1A;
	text-decoration: none;
}

/*
 * A button whose label is a value — an address, a number — rather than an
 * instruction. Shouting an email address in capitals is how it stops looking
 * like one.
 */
.zd-doc__btn--value {
	text-transform: none;
	letter-spacing: 0.04em;
}

.zd-doc__btn--solid {
	border-color: #1A1A1A;
	background: #1A1A1A;
	color: #FFFFFF;
}

.zd-doc__btn--solid:hover,
.zd-doc__btn--solid:focus-visible {
	background: #000000;
	color: #FFFFFF;
}

.zd-doc__btn .zd-wa-mark {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* -------------------------------------------------------------- small --- */

@media (max-width: 640px) {
	.zd-doc__stats {
		grid-template-columns: 1fr;
	}

	.zd-doc__btn {
		width: 100%;
	}
}

/* ==========================================================================
   Size guide

   Shared by /guide-des-tailles/ and by the drawer on a product page, so a
   measurement looks the same wherever it is read.
   ========================================================================== */

.zd-sg__table + .zd-sg__table {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}

.zd-sg__table-title {
	margin: 18px 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.zd--ar .zd-sg__table-title,
.zd--ar .zd-sg-panel__title {
	text-transform: none;
	letter-spacing: 0.02em;
}

.zd-sg__rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 22px;
	margin: 14px 0 6px;
}

.zd-sg__rule-title {
	margin: 0 0 5px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.zd-sg__rule-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
}

.zd-sg__tips {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zd-sg__tips li {
	position: relative;
	padding-inline-start: 16px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
}

.zd-sg__tips li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 9px;
	width: 4px;
	height: 4px;
	background: var(--rule-strong);
}

/* ---------------------------------------------------------- the drawer --- */

.zd-sg-panel {
	/* Wider than the cart panel: these are tables, not a list of lines. */
	width: min(94vw, 560px);
	overflow-y: auto;
}

.zd-sg-panel__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zd-sg-panel .zd-panel__top {
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px 0;
}

.zd-sg-panel__body {
	padding: 6px 22px 28px;
}

.zd-sg-panel__body .zd-sg__rules {
	grid-template-columns: 1fr;
	gap: 14px;
}

.zd-sg-panel__all {
	margin-top: 22px;
	width: 100%;
}

@media (max-width: 640px) {
	.zd-sg__rules {
		grid-template-columns: 1fr;
	}
}

/*
 * Five columns do not fit a 560px drawer while every heading is held on one
 * line, and a table the shopper has to scroll sideways to read is a table they
 * will misread. Inside the drawer the headings wrap and the cells tighten.
 */
.zd-sg-panel .zd-table th,
.zd-sg-panel .zd-table td {
	padding: 9px 8px;
	white-space: normal;
}

.zd-sg-panel .zd-table th {
	font-size: 10px;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.zd-sg-panel .zd-table td {
	font-size: 12px;
	white-space: nowrap;
}

.zd-sg-panel .zd-doc__scroll {
	overflow-x: visible;
}

/* --------------------------------------------------------- favourites --- */

/*
 * The one page in this sheet that is not mostly words. The lede reads like
 * every other, then the saved pieces take the shop's own full-width grid: a
 * card squeezed into a 900px column would be a second, smaller card than the
 * one the shopper pressed the heart on.
 */
.zd-favs {
	max-width: none;
	gap: clamp(16px, 2vw, 24px);
}

/*
 * Nothing here is held in the 900px reading column the other pages use. On a
 * wide screen that column would pin the lede and the empty panel to one side
 * of a page whose grid runs edge to edge, and the two halves would not look
 * like the same page. Everything lines up on the page's own gutters instead,
 * and the lede's sentence keeps its own 62ch measure.
 */

/*
 * An empty shelf, at the size the full one would have been — so the page does
 * not visibly shrink the moment the last piece is un-hearted.
 */
.zd-favs > .zd-doc__cta {
	justify-content: center;
	min-height: clamp(220px, 26vw, 320px);
	margin-block-start: clamp(6px, 1vw, 14px);
}

.zd-favs__loading {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

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

/*
 * The grid is the shop's, so the pieces sit at the size they were saved at.
 * Only the breathing room above it belongs to this page.
 */
.zd-favs__grid {
	margin-block-start: clamp(6px, 1vw, 14px);
}

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

/* ------------------------------------------------------------- legal --- */

/*
 * Two long documents sharing one shape. Everything here is the page
 * vocabulary above; only the terms' three assurances and the sheer number of
 * sections need anything of their own.
 */

.zd-legal__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 4px 0 0;
}

.zd-legal__badge {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

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

.zd-legal__badge + .zd-legal__badge {
	padding-inline-start: 18px;
	border-inline-start: 1px solid var(--rule);
}

/*
 * A jump list of twenty-two chips is a block of its own, so it sits a little
 * apart from the lede above it, and each chip is centred on its number.
 */
.zd-legal .zd-doc__jump {
	margin-block-start: 2px;
}

.zd-legal .zd-doc__chip {
	height: 30px;
	padding: 0 11px;
	font-size: 10.5px;
}

/*
 * A heading that lands under the fixed header when jumped to is a heading the
 * reader has to scroll back up for. The header stands 164px at desktop and
 * 104px once the navigation bar folds away, plus a little air above the card.
 */
.zd-legal .zd-doc__card,
.zd-legal .zd-doc__cta {
	scroll-margin-top: 184px;
}

@media (max-width: 1039px) {
	.zd-legal .zd-doc__card,
	.zd-legal .zd-doc__cta {
		scroll-margin-top: 124px;
	}
}

/* ---------------------------------------------------------- tracking --- */

/*
 * One field and one button. On a wide screen they share a line, because the
 * pair is a single question; on a narrow one the button takes the full width
 * rather than being squeezed beside a field too short to type into.
 */
.zd-trk__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.zd-trk__field {
	flex: 1 1 240px;
	min-width: 0;
	display: block;
}

.zd-trk__field 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;
	letter-spacing: 0.06em;
	color: var(--ink);
	outline: none;
}

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

.zd-trk__form .zd-doc__btn {
	flex: 0 0 auto;
	height: 44px;
}

.zd-trk__hint {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
}

/*
 * Two facts, sometimes one. The shared grid is fixed at three columns, which
 * would leave an empty cell sitting beside them, so this row takes only the
 * columns it has something to put in.
 */
.zd-trk__head {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-block-end: 18px;
}

@media (max-width: 560px) {
	.zd-trk__form .zd-doc__btn {
		width: 100%;
	}
}