/**
 * Header, announcement bar, footer.
 *
 * Logical properties throughout - this file must render correctly in both RTL and LTR
 * with no per-direction overrides. If you find yourself writing `left` or `right` for
 * anything in normal flow, use the inline-start/inline-end equivalent instead.
 */

/* ---- Announcement bar -------------------------------------------------- */

/*
 * Measured from store.dc.html, not approximated from the spacing scale. The bar is a
 * FIXED 36px - padding-block plus line-height gave a different height at every font size,
 * and the header sits directly under it, so the two drift together.
 *
 * The 40px separator margin matters more than it looks: the marquee duration is 36s over
 * the track's own width, so shortening the gaps shortens the track and the same 36s reads
 * as a faster scroll. The theme had 32px, which is why the speed did not match.
 */
.jd-announce {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 36px;
	background-color: var(--jd-navy);
	color: rgb(255 255 255 / .88);
	font-size: 11.5px;
	padding-inline: var(--jd-space-20);
	overflow: hidden;
}

.jd-announce__viewport {
	display: flex;
	inline-size: 100%;
	overflow: hidden;
}

.jd-announce__track {
	display: flex;
	flex: 0 0 auto;
	gap: 40px;
	white-space: nowrap;
	padding-inline-end: 40px;
	animation: jd-marquee var(--jd-marquee-announce) linear infinite;
}

.jd-announce:hover .jd-announce__track,
.jd-announce:focus-within .jd-announce__track {
	animation-play-state: paused;
}

/* The diamond separator is the one place brass sits on navy, hence the lighter tint. */
.jd-announce__item + .jd-announce__item::before,
.jd-announce__track + .jd-announce__track .jd-announce__item::before {
	content: "\25C6";
	color: var(--jd-brass-on-navy);
	margin-inline-end: 40px;
	font-size: 8px;
	vertical-align: .15em;
}

.jd-announce__item a {
	color: inherit;
	text-decoration: none;
}

.jd-announce__item a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jd-announce__close {
	position: absolute;
	inset-inline-end: var(--jd-space-7);
	inset-block-start: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	/* 26px keeps the 44px touch target via padding while the glyph stays 13px. */
	inline-size: 26px;
	block-size: 26px;
	padding: var(--jd-space-2);
	background: none;
	border: 0;
	color: rgb(255 255 255 / .6);
	font-size: 13px;
	cursor: pointer;
}

.jd-announce__close:hover {
	color: rgb(255 255 255 / 1);
}

/**
 * Marquee.
 *
 * The track is duplicated in the markup and translated by exactly -50%, so the second
 * copy lands where the first began and the loop is seamless. Changing this percentage
 * without changing the duplication count produces a visible jump.
 */
@keyframes jd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* An RTL track scrolls the other way. */
.jd-rtl .jd-announce__track {
	animation-name: jd-marquee-rtl;
}

@keyframes jd-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

/* ---- Header ------------------------------------------------------------ */

/*
 * Measured from store.dc.html `hdrWrapStyle` and the desktop header row. Three things
 * here were wrong and all three are visible at a glance:
 *
 *   - the ground is PAPER (#F6F1E6), not the card surface (#FCF9F1)
 *   - the hairline under the header does not exist until the page scrolls; it fades in
 *     with the same .18s the WhatsApp pill uses, driven by the body class float-ui.js
 *     already sets
 *   - the row is a fixed 88px (60px on mobile), not padding around a variable line box
 */
.jd-header {
	background-color: var(--jd-paper);
	border-block-end: 1px solid transparent;
	transition: border-color .18s ease-out;
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
}

.jd-scrolled .jd-header {
	border-block-end-color: var(--jd-hairline);
}

/* The header runs wider than the 1200px body column. */
.jd-header__inner {
	max-inline-size: var(--jd-container-wide);
	display: flex;
	align-items: center;
	gap: 22px;
	block-size: 88px;
	padding-block: 0;
}

.jd-header__brand {
	flex: 0 0 auto;
	display: block;
}

/* A wordmark: sized by WIDTH, so its height follows the artwork's own ratio. */
.jd-header__brand img {
	inline-size: 168px;
	block-size: auto;
	display: block;
}

.jd-header__nav {
	flex: 0 0 auto;
}

.jd-header__menu {
	display: flex;
	align-items: center;
	gap: var(--jd-space-10);
	font-size: 13.5px;
	font-weight: 500;
}

/* 6px above and below over a 2px rule - el.25-28 measure the link box at 35px tall, which
 * is what gives the nav its optical alignment with the 44px search field beside it. */
.jd-header__menu a {
	color: var(--jd-ink);
	border-block-end: 2px solid transparent;
	padding-block: 6px;
	transition: border-color .18s ease-out, color .18s ease-out;
}

.jd-header__menu a:hover {
	color: var(--jd-navy);
	border-block-end-color: rgb(24 41 94 / .35);
	text-decoration: none;
}

/* el.25 - the section the visitor is in is 600 in navy over a solid navy rule, against
   500 in ink over a transparent one for the rest. */
.jd-header__menu .current-menu-item > a,
.jd-header__menu .current-menu-ancestor > a,
.jd-header__menu [aria-current="page"] {
	font-weight: 600;
	color: var(--jd-navy);
	border-block-end-color: var(--jd-navy);
}

/* Submenus stay quiet until the parent is hovered, focused, or opened by its toggle. */
.jd-header__menu > .menu-item-has-children {
	position: relative;
}

.jd-header__menu > .menu-item-has-children > .sub-menu {
	display: none;
	position: absolute;
	inset-block-start: calc(100% + 1px);
	inset-inline-start: 0;
	min-inline-size: 220px;
	padding-block: var(--jd-space-3);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	box-shadow: var(--jd-shadow-card);
	z-index: 2;
}

.jd-header__menu > .menu-item-has-children:hover > .sub-menu,
.jd-header__menu > .menu-item-has-children:focus-within > .sub-menu,
.jd-header__menu > .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.jd-header__menu .sub-menu a {
	display: block;
	padding-block: var(--jd-space-4);
	padding-inline: var(--jd-space-8);
	border-block-end: 0;
	white-space: nowrap;
}

.jd-header__menu .sub-menu a:hover,
.jd-header__menu .sub-menu .current-menu-item > a {
	background-color: var(--jd-paper-deep);
}

.jd-submenu-toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	margin-inline-start: var(--jd-space-2);
	padding: 0;
	border: 0;
	background: transparent;
	color: currentColor;
	cursor: pointer;
}

.jd-submenu-toggle::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-inline-end: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--jd-transition);
}

.menu-item-has-children.is-open > .jd-submenu-toggle::before {
	transform: translateY(2px) rotate(225deg);
}

.jd-submenu-toggle:focus-visible {
	outline: 2px solid var(--jd-brass);
	outline-offset: 2px;
}

/*
 * The hairline rule between navigation and the account/cart cluster. It carries the
 * margin-inline-start:auto, so it is what pushes the cluster to the end of the row —
 * remove it and the cluster collapses back against the nav.
 */
.jd-header__actions::before {
	content: "";
	inline-size: 1px;
	block-size: 26px;
	background-color: var(--jd-hairline);
	flex-shrink: 0;
	margin-inline-end: var(--jd-space-10);
}

.jd-header__actions {
	display: flex;
	align-items: center;
	gap: var(--jd-space-10);
	font-size: 13px;
	font-weight: 500;
	margin-inline-start: auto;
}

/*
 * On desktop these are icon + LABEL pairs sitting on the header ground, not chrome
 * buttons: no border, no padding box, 7px between glyph and word. Hover moves to the
 * navy hover tint over .18s, matching every other interactive element in the header.
 */
.jd-icon-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--jd-ink);
	position: relative;
	transition: color .18s ease-out;
}

.jd-icon-btn:hover {
	color: var(--jd-navy-700);
	text-decoration: none;
}

.jd-icon-btn__label {
	font-size: 13px;
	font-weight: 500;
}

/*
 * The count is a parenthesised mono figure beside the word, not a pill badge. It is
 * secondary text: the cart label is what you click, the number is a detail.
 */
.jd-cart__count {
	font-family: var(--jd-font-mono);
	font-size: 11px;
	line-height: 1;
	color: var(--jd-text-secondary);
}

.jd-cart__count::before { content: "("; }
.jd-cart__count::after  { content: ")"; }

/* ---- Language switcher ------------------------------------------------- */

.jd-langswitch {
	display: flex;
	align-items: center;
	gap: var(--jd-space-1);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	padding: 2px;
}

.jd-langswitch__item {
	font-size: var(--jd-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--jd-track-label);
	padding: var(--jd-space-2) var(--jd-space-4);
	border-radius: var(--jd-radius-tag);
	color: var(--jd-text-secondary);
	min-block-size: 32px;
	display: inline-flex;
	align-items: center;
}

.jd-langswitch__item:hover {
	color: var(--jd-navy);
	text-decoration: none;
}

.jd-langswitch__item.is-current {
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
}

/* ---- Search ------------------------------------------------------------ */

/*
 * `hdrSearchStyle`: the field is the header's flexible element and it MINIMUMS at 460px
 * rather than capping there - the prototype lets it grow to fill the row. Capping it, as
 * this did, left a gap between search and nav that the design does not have.
 *
 * Ground is the card surface against the paper header, which is the inverse of the usual
 * pairing and is what makes the field read as inset.
 */
.jd-search {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	min-inline-size: 460px;
	block-size: 44px;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	color: var(--jd-text-muted);
	padding-inline: var(--jd-space-7) var(--jd-space-5);
	transition: border-color .18s ease-out, color .18s ease-out;
}

.jd-search:focus-within {
	border-color: var(--jd-navy);
	color: var(--jd-navy);
}

.jd-search__field {
	flex: 1 1 auto;
	border: 0;
	background: none;
	padding-block: 0;
	font-family: var(--jd-font-ui);
	font-size: 13px;
	color: var(--jd-ink);
	min-inline-size: 0;
}

.jd-search__field:focus {
	outline: none; /* the ring is on the wrapper via :focus-within */
}

.jd-search__submit {
	background: none;
	border: 0;
	color: var(--jd-text-secondary);
	cursor: pointer;
	display: grid;
	place-items: center;
	min-block-size: 44px;
	min-inline-size: 32px;
}

/* Type-ahead extends the measured header field with the same hairline surface. The
   closed 44px control remains unchanged; this layer exists only while results are open. */
.jd-search__suggestions {
	position: absolute;
	inset-block-start: calc(100% + var(--jd-space-2));
	inset-inline: 0;
	z-index: 40;
	max-block-size: 360px;
	overflow-y: auto;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	box-shadow: var(--jd-shadow-card);
}

.jd-search__suggestions[hidden] {
	display: none;
}

.jd-search__suggestion {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--jd-space-4);
	align-items: center;
	padding: var(--jd-space-4) var(--jd-space-5);
	border-block-end: 1px solid var(--jd-paper-deep);
	color: var(--jd-ink);
	text-decoration: none;
}

.jd-search__suggestion:last-child {
	border-block-end: 0;
}

.jd-search__suggestion:hover,
.jd-search__suggestion:focus,
.jd-search__suggestion.is-active {
	background-color: var(--jd-paper);
	color: var(--jd-navy);
	text-decoration: none;
	outline: none;
}

.jd-search__suggestion-image {
	inline-size: 32px;
	block-size: 40px;
	object-fit: contain;
}

.jd-search__suggestion-copy {
	min-inline-size: 0;
}

.jd-search__suggestion-title,
.jd-search__suggestion-meta {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jd-search__suggestion-title {
	font-size: var(--jd-fs-xs);
	font-weight: 600;
	text-align: start;
	unicode-bidi: plaintext;
}

.jd-search__suggestion-meta {
	margin-block-start: var(--jd-space-1);
	color: var(--jd-text-secondary);
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-3xs);
	direction: ltr;
	text-align: start;
}

/* ---- The mobile search row (≤768) --------------------------------------
 *
 * Not the bar's field on a narrow screen: a SEPARATE row that drops below the 60px bar
 * when the header's search button is pressed (store.dc.html `mSearch`). Hidden outright
 * above the breakpoint, where the bar carries its own field instead.
 *
 * Every value is that form's own inline style: 10px/16px padding, a hairline above, the
 * PAPER ground rather than the card surface, a 44px borderless field at 13.5px, and a
 * 38px navy submit. The chrome the base .jd-search gives the header field - a bordered,
 * rounded, 44px surface box 460px wide - is undone here rather than inherited.
 */
.jd-search--mobile {
	display: none;
	block-size: auto;
	min-inline-size: 0;
	gap: var(--jd-space-5);
	padding-block: var(--jd-space-5);
	padding-inline: var(--jd-space-8);
	border: 0;
	border-block-start: var(--jd-border);
	border-radius: 0;
	background-color: var(--jd-paper);
	color: var(--jd-text-muted);
}

/* [hidden] loses to any author display, so the collapsed state needs saying. Specificity
   0,2,0 also keeps it winning over the 0,1,0 display:flex in the 768px block below. */
.jd-search--mobile[hidden] {
	display: none;
}

/* The prototype gives this row no focus treatment - the field is already borderless, and
   the hairline above it belongs to the header, not to the control. */
.jd-search--mobile:focus-within {
	border-block-start-color: var(--jd-hairline);
	color: var(--jd-text-muted);
}

.jd-search__icon {
	flex-shrink: 0;
}

.jd-search--mobile .jd-search__field {
	block-size: 44px;
	font-size: 13.5px;
}

/*
 * The mobile submit is the INVERSE of the hero's: navy ground, white word. It is declared
 * here, in full, because .jd-search__go's own rules live in catalog.css - which is
 * enqueued conditionally, so on a page without it this button would otherwise render as a
 * bare browser default, and on a page with it the hover would repaint a navy button in
 * paper-deep. Both states are pinned; the prototype gives this button no hover.
 */
.jd-search--mobile .jd-search__go,
.jd-search--mobile .jd-search__go:hover {
	flex-shrink: 0;
	block-size: 38px;
	padding-inline: var(--jd-space-8);
	border: 0;
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-family: var(--jd-font-ui);
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
}

/* ---- Mobile drawer ----------------------------------------------------- */

/* Both are mobile-only controls: the burger and the search toggle appear together in the
   ≤768 cluster and are absent from the desktop row. */
.jd-header__burger,
.jd-header__msearch {
	display: none;
}

/*
 * The drawer is the prototype's mobile menu stack, not a padded list: full-bleed rows on
 * the card surface, a hairline above the stack, a paper-deep rule between rows and none
 * under the last. 15px has no token - it is the prototype's own row padding.
 */
.jd-drawer {
	border-block-start: var(--jd-border);
	background-color: var(--jd-surface);
}

.jd-drawer[hidden] {
	display: none;
}

.jd-drawer__menu {
	font-size: var(--jd-fs-sm);
	font-weight: 500;
}

.jd-drawer__menu a {
	display: block;
	padding-block: 15px;
	padding-inline: var(--jd-space-10);
	border-block-end: 1px solid var(--jd-paper-deep);
	color: var(--jd-ink);
}

.jd-drawer__menu > .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-block-end: 1px solid var(--jd-paper-deep);
}

.jd-drawer__menu > .menu-item-has-children > a {
	flex: 1 1 auto;
	min-inline-size: 0;
	border-block-end: 0;
}

.jd-drawer__menu > .menu-item-has-children > .jd-submenu-toggle {
	flex: 0 0 52px;
	inline-size: 52px;
	block-size: 52px;
	margin: 0;
	border-inline-start: 1px solid var(--jd-paper-deep);
}

.jd-drawer__menu .sub-menu {
	display: none;
	flex: 0 0 100%;
	background-color: var(--jd-paper);
}

.jd-drawer__menu .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.jd-drawer__menu .sub-menu[hidden] {
	display: none;
}

.jd-drawer__menu .sub-menu a {
	padding-inline-start: var(--jd-space-16);
	font-size: var(--jd-fs-xs);
}

.jd-drawer__menu > li:last-child > a {
	border-block-end: 0;
}

/*
 * DERIVED: see PENDING-DECISIONS #13. The prototype is single-language and has no switcher
 * anywhere; below 768 its bar has room for exactly three buttons, so the switcher moves
 * here - the drawer is its only mobile home, and the Definition of Done requires it to
 * stay reachable.
 */
.jd-drawer__langs {
	padding-block: var(--jd-space-8);
	padding-inline: var(--jd-space-10);
}

/* The prototype's header is gated on isDesk = !mob, so the drawer takes over at 768 -
   there is no tablet state between the two. */
@media (max-width: 768px) {
	.jd-header__nav,
	.jd-icon-btn__label {
		display: none;
	}

	.jd-header__burger,
	.jd-header__msearch {
		display: inline-flex;
	}
}

/*
 * Tablet: the wordmark steps down before the drawer takes over.
 *
 * This block MUST precede the 768px one. Both match at 768 and below, and with equal
 * specificity the later rule wins - so putting 1080 last would have re-imposed the
 * 136px desktop wordmark over the mobile 36px one at exactly the width where the mobile
 * header applies.
 */
@media (max-width: 1080px) {
	.jd-header__brand img {
		inline-size: 136px;
	}

	.jd-search {
		min-inline-size: 200px;
	}
}

@media (max-width: 768px) {
	/*
	 * The bar's own field is a DESKTOP control. Below 768 the prototype replaces it with
	 * .jd-search--mobile, a row under the bar that the search button opens.
	 *
	 * Scoped to the bar deliberately: the same `header` variant is also drawn by 404.php,
	 * where it is the page's only way forward and must keep working at 390.
	 */
	.jd-header__inner .jd-search {
		display: none;
	}

	/*
	 * A FIXED 60px row that does not wrap (el.19: the header measures 390×61, the extra
	 * pixel being its border). This block used to give the bar `flex-wrap: wrap` and
	 * `block-size: auto` so the search field could take a second line - but nothing ever
	 * hid the field, so the second line was permanent and the header measured 101px. Every
	 * screen's 390px capture was 40px out of register because of it. Nothing here may
	 * reintroduce wrapping; the search row is a sibling of this element, not a member.
	 */
	.jd-header__inner {
		block-size: 60px;
		gap: var(--jd-space-6);
		padding-inline: var(--jd-space-8);
	}

	.jd-header__brand img {
		inline-size: auto;
		block-size: 36px;
	}

	/* Icon-only on mobile, so each needs its own 44px target. */
	.jd-icon-btn {
		inline-size: 44px;
		block-size: 44px;
		justify-content: center;
		gap: 0;
	}

	/* The divider belongs to the desktop row only. */
	.jd-header__actions::before {
		display: none;
	}

	.jd-header__actions {
		gap: var(--jd-space-3);
	}

	/*
	 * The ≤768 cluster is exactly three buttons - search, cart, menu - and that is what
	 * puts the cart at x=66..110 and its count at x=68 (el.21/el.22). The account link and
	 * the language switcher move into the drawer, which the burger opens; the prototype's
	 * own mobile menu carries حسابي as a row for the same reason.
	 * DERIVED: see PENDING-DECISIONS #13.
	 */
	.jd-header__account,
	.jd-header__actions .jd-langswitch {
		display: none;
	}

	/*
	 * el.21/el.22 - on mobile the count is not the cart word's companion but a mark in the
	 * button's outer top corner: 9.5px mono in navy, 2px in from the top and from the
	 * inline end. Logical offsets, so the English mirror uses the opposite corner.
	 */
	.jd-cart__count {
		position: absolute;
		inset-block-start: 2px;
		inset-inline-end: 2px;
		font-size: 9.5px;
		color: var(--jd-navy);
	}

	/* The row itself; .jd-search--mobile[hidden] (0,2,0) keeps the closed state closed. */
	.jd-search--mobile {
		display: flex;
	}
}

/* ---- Footer ------------------------------------------------------------ */

.jd-footer {
	margin-block-start: 30px; /* Every footer JSON: content end → separator = 30px. */
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	background-image: url("../img/pattern-navy.svg");
	background-repeat: repeat;
	background-position: center 44px;
	background-size: 72px 72px;
}

.jd-footer__separator {
	block-size: 44px;
	background: var(--jd-paper);
	border-block: var(--jd-border);
}

/* Every shared JSON: 1152px usable, tracks 417/298/357, gaps 40, padding 42/24/30. */
.jd-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 40px;
	padding-block: 42px 30px;
}

/* Seven 27.5px links + heading rhythm keep the inner band at its measured 292px. */
.jd-footer__nav { min-block-size: 220px; }

.jd-footer__logo { display: block; inline-size: 190px; }
.jd-footer__logo img { display: block; inline-size: 100%; block-size: auto; filter: brightness(0) invert(1); }

/* 9.5px at .3em = the 2.85px tracking on el.292 - the imprint line is a rule of small
 * caps under the wordmark, not a subtitle. */
.jd-footer__latin {
	display: block;
	font-size: 9.5px;
	line-height: normal;
	letter-spacing: .3em;
	color: rgb(255 255 255 / .55);
	margin-block-start: var(--jd-space-1);
}

.jd-footer__contact {
	display: grid;
	gap: var(--jd-space-2);
	margin: 0;
	margin-block-start: var(--jd-space-8);
}

.jd-footer__contact li { display: flex; gap: var(--jd-space-3); align-items: flex-start; color: rgb(255 255 255 / .72); font-size: 12px; line-height: 20px; }
.jd-footer__contact li > svg { flex: 0 0 16px; inline-size: 16px; block-size: 16px; margin-block-start: 2px; fill: none; stroke: var(--jd-brass); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.jd-footer__contact address { font-style: normal; }
.jd-footer__contact a,
.jd-footer__social a { color: rgb(255 255 255 / .72); }
.jd-footer__social { display: flex; flex-wrap: wrap; gap: var(--jd-space-5); margin-block-start: var(--jd-space-6); font-size: 12px; }

.jd-footer__address,
.jd-footer__email {
	display: block;
	font-style: normal;
	font-size: 12px;
	line-height: 24px;
	color: rgb(255 255 255 / .72);
	margin: 0;
}

/* An address is an identifier, like an ISBN: mono, LTR, and NOT the Latin display face
 * .jd-latin would otherwise impose (el.294 is IBM Plex Mono 11/22). */
.jd-footer__email {
	display: inline;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	line-height: 22px;
	width: fit-content;
}

.jd-footer__email:hover {
	color: var(--jd-on-navy);
}

/*
 * These are h2s, so the h1-h4 base hands them Amiri at 700. The prototype sets the footer
 * column headings in the UI sans at 10/400 with .18em tracking (el.295/303) - they are
 * eyebrow labels over each column, not headings competing with the wordmark above.
 */
.jd-footer__heading {
	font-family: var(--jd-font-ui);
	font-size: 10px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: .18em;
	color: rgb(255 255 255 / .55);
	margin-block-end: var(--jd-space-6); /* 12px. */
}

.jd-footer__pay,
.jd-footer__verify {
	margin: 0;
	font-size: 12.5px;
	line-height: 27.5px;
	color: rgb(255 255 255 / .72);
}

.jd-footer__verify a { color: rgb(255 255 255 / .72); }
.jd-footer__business { display: inline-flex; gap: var(--jd-space-3); align-items: center; }

/*
 * The two verification badges are 182px and 174px in a 357px column, so they cannot
 * share a line and one of them has to wrap. As a bare text node the ZATCA phrase wrapped
 * mid-sentence and left the word "ZATCA" alone on a third line. inline-block makes it move
 * as a unit when it does not fit, and still lets it break internally on a column too narrow
 * to hold it - which is why this is not `white-space: nowrap`. The sibling badge is already
 * inline-flex and has always behaved this way.
 */
.jd-footer__badge { display: inline-block; }
.jd-footer__business img { inline-size: 28px; block-size: 28px; object-fit: contain; }

.jd-footer__menu {
	font-size: 12.5px;
	line-height: 27.5px;
}

.jd-footer__menu a {
	display: block;
	color: rgb(255 255 255 / .72);
}

.jd-footer__menu a:hover {
	color: var(--jd-on-navy);
}

.jd-footer__bar {
	border-block-start: 1px solid rgb(255 255 255 / .16);
}

.jd-footer__barinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-8);
	min-block-size: 49px;
	padding-block: var(--jd-space-8);
}

.jd-footer__copy,
.jd-footer__tax {
	font-size: 11px;
	line-height: normal;
	color: rgb(255 255 255 / .55);
}

.jd-footer__tax {
	/* The local prototype falls back to its Arabic sans face inside this mono-labelled run. */
	font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace;
	inline-size: 160px; /* Every footer JSON: el.307 is 159.875px at both viewports. */
	block-size: 14px;
	text-align: start;
	white-space: nowrap;
}

/* footGridStyle collapses 1.4fr 1fr 1.2fr straight to a single column at 768. The
   two-column tablet state that used to be here does not exist in the prototype. */
@media (max-width: 768px) {
	.jd-footer__inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.jd-footer__barinner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--jd-space-8);
		min-block-size: 79px;
		text-align: start;
	}
}

/* ---- Floating WhatsApp -------------------------------------------------
 * The prototype draws a CREAM PILL carrying a visible label, which collapses to a
 * 46px circle once the page scrolls past 4px (`hdrSc`). The port had shipped only a
 * solid-emerald circle, which is neither state. Both are now here.
 *
 * store.dc.html `waStyle`: background #FCF9F1, 1px #DBCFB8, 12.5px/600 navy text,
 * emerald-stroked glyph, offset 22px, z-index 90.
 */

.jd-whatsapp {
	position: fixed;
	inset-block-end: 22px;
	inset-inline-end: 22px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 10px;
	padding-inline: 16px;
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	border: 1px solid var(--jd-hairline);
	box-shadow: var(--jd-shadow-card);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jd-navy);
	transition:
		border-color .18s ease-out,
		inset-block-end .18s ease-out,
		transform .18s ease-out;
}

.jd-whatsapp__icon {
	color: var(--jd-emerald);
	flex-shrink: 0;
}

.jd-whatsapp:hover {
	border-color: var(--jd-navy);
	transform: translateY(-1px);
	color: var(--jd-navy);
	text-decoration: none;
}

/* Collapsed state - scrolled. */
.jd-scrolled .jd-whatsapp {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	justify-content: center;
	gap: 0;
	padding: 0;
}

.jd-scrolled .jd-whatsapp__label {
	display: none;
}

/* ---- Sticky add-to-cart (prototype: single product, scrollY > 650) ------
 * Pins to the TOP on desktop and to the BOTTOM on mobile - that inversion is in the
 * prototype's `stickyStyle`, not an invention.
 */

.jd-stickyatc {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 70;
	background-color: var(--jd-surface);
	border-block-end: 1px solid var(--jd-hairline);
	animation: jd-rise .2s ease-out;
}

.jd-stickyatc__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 10px;
	padding-inline: 24px;
}

.jd-stickyatc__name {
	flex: 1;
	min-inline-size: 0;
	font-family: var(--jd-font-latin);
	font-size: 15.5px;
	color: var(--jd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: end;
}

.jd-stickyatc__price {
	flex-shrink: 0;
	font-family: var(--jd-font-mono);
	font-size: 16px;
	font-weight: 500;
	color: var(--jd-navy);
	font-variant-numeric: tabular-nums;
}

.jd-stickyatc__terms {
	flex-shrink: 0;
	font-size: 10.5px;
	color: var(--jd-text-muted);
}

.jd-stickyatc__action {
	flex-shrink: 0;
}

/* ---- Cart toast --------------------------------------------------------
 * Centred with inset-inline + margin-inline:auto rather than the prototype's
 * right:50%/translateX pair, which is a physical offset and flips wrongly in LTR.
 */

.jd-toast {
	position: fixed;
	inset-block-end: 26px;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: max-content;
	max-inline-size: calc(100% - 32px);
	z-index: 99;
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 11px;
	padding-inline: 22px;
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	border: 1px solid var(--jd-navy-700);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	animation: jd-rise .25s ease-out;
}

/*
 * The toast ships with the `hidden` attribute and is revealed by float-ui.js. That alone
 * is not enough: the UA sheet's `[hidden] { display: none }` is a plain type-less rule,
 * so the `display: flex` above beats it and the pill sat over every page, permanently,
 * reading "View cart". An attribute selector restores the intent at equal specificity —
 * declared after, so it wins.
 */
.jd-toast[hidden] { display: none; }

.jd-toast__action {
	color: var(--jd-brass-on-navy);
	font-weight: 600;
	border-block-end: 1px solid rgb(184 146 84 / .45);
	padding-block-end: 1px;
}

.jd-toast__action:hover {
	color: var(--jd-brass-on-navy);
	border-block-end-color: var(--jd-brass-on-navy);
	text-decoration: none;
}

@keyframes jd-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 768px) {

	.jd-whatsapp {
		padding-block: 12px;
	}

	/*
	 * The float lifts clear of the sticky bar, which sits at the bottom on mobile.
	 * Prototype: bottom = (mob && sticky && product) ? 86px : 22px.
	 */
	.jd-stickyatc-on .jd-whatsapp {
		inset-block-end: 86px;
	}

	.jd-stickyatc {
		inset-block-start: auto;
		inset-block-end: 0;
		border-block-end: 0;
		border-block-start: 1px solid var(--jd-hairline);
	}

	.jd-stickyatc__terms {
		display: none;
	}
}

/* ---- WooCommerce notices -------------------------------------------------
 *
 * The theme had NO rule for these, on any page. WooCommerce's own woocommerce-general
 * stylesheet is still enqueued (only the *block* styles are dequeued, see
 * inc/enqueue.php), so notices were not unstyled - they were styled in WooCommerce's
 * palette: a #f6f5f8 bar with a 3px #a46497 purple top border and an icon from the
 * WooCommerce icon font. Every colour in that description is foreign to this design.
 *
 * They live in layout.css rather than commerce.css because notices appear on both
 * families of page: the catalogue and product page load catalog.css, the cart, checkout
 * and account pages load commerce.css, and layout.css is the only stylesheet both
 * depend on.
 *
 * Selectors are element-qualified - ul.woocommerce-error, div.woocommerce-message,
 * div.woocommerce-info - exactly as notices/error.php, success.php and notice.php emit
 * them. That is one point of specificity above WooCommerce's bare .woocommerce-error,
 * so these win regardless of stylesheet order rather than relying on the theme
 * happening to enqueue second.
 */

ul.woocommerce-error,
div.woocommerce-message,
div.woocommerce-info {
	position: relative;
	list-style: none;
	margin-block: 0 var(--jd-space-12);
	padding: var(--jd-space-10) var(--jd-space-12);
	border: var(--jd-border);
	border-inline-start: 3px solid var(--jd-navy);
	border-radius: var(--jd-radius-card);
	background-color: var(--jd-surface);
	color: var(--jd-ink);
	font-size: var(--jd-fs-sm);
	line-height: var(--jd-lh-body);
}

/* WooCommerce sets its icon with a physical `left` offset and its own webfont. */
ul.woocommerce-error::before,
div.woocommerce-message::before,
div.woocommerce-info::before {
	content: none;
}

ul.woocommerce-error {
	border-inline-start-color: var(--jd-danger);
}

div.woocommerce-message {
	border-inline-start-color: var(--jd-emerald);
}

ul.woocommerce-error > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.woocommerce-error > li + li {
	margin-block-start: var(--jd-space-4);
	padding-block-start: var(--jd-space-4);
	border-block-start: var(--jd-border);
}

/* Stable support references identify the policy branch without replacing the explanation. */
.jd-notice__reference {
	display: inline-flex;
	align-items: center;
	margin-inline-start: var(--jd-space-3);
	padding: var(--jd-space-1) var(--jd-space-2);
	border: var(--jd-border);
	border-radius: var(--jd-radius-xs);
	color: var(--jd-text-secondary);
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-3xs);
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * WooCommerce puts an action button inside the notice - "View cart" on a successful
 * add, "Login" on a restricted page. Core floats it; this keeps it in flow at the end
 * of the line so it works identically in both directions.
 */
ul.woocommerce-error .button,
div.woocommerce-message .button,
div.woocommerce-info .button {
	float: none;
	margin-inline-start: var(--jd-space-8);
	font-weight: 600;
	color: var(--jd-navy);
	text-decoration: underline;
}

/*
 * Product-page wrapper. woocommerce_before_single_product fires outside .jd-product,
 * so without this the notice would be the one full-bleed element on the page.
 */
.jd-notices:empty {
	display: none;
}

.jd-notices {
	padding-block-start: var(--jd-space-12);
}

/* ---- Screen 01 measured corrections (Session 30) -------------------------
 * The prototype leaves most small text at `line-height: normal` and sets an explicit
 * line-height only where a rhythm is wanted (hero 65px, sub 31px, footer links 28px,
 * step bodies 25px). The theme inherits --jd-lh-body (1.7) from body, which at 13px is
 * 22.1px against the prototype's ~17px - over the 1.5px tolerance on nearly every label,
 * link and control. These are the elements docs/design/01-home.md measures at `normal`.
 */
.jd-header__menu a,
.jd-icon-btn__label,
.jd-langswitch__item {
	line-height: normal;
}