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

.jd-announce {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-size: var(--jd-fs-2xs);
	padding-block: var(--jd-space-3);
	padding-inline: var(--jd-space-16) var(--jd-space-14);
	overflow: hidden;
}

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

.jd-announce__track {
	display: flex;
	flex: 0 0 auto;
	gap: var(--jd-space-16);
	white-space: nowrap;
	padding-inline-end: var(--jd-space-16);
	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: var(--jd-space-16);
	font-size: .7em;
	vertical-align: .1em;
}

.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-start: var(--jd-space-7);
	inset-block-start: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: .75;
}

.jd-announce__close:hover {
	opacity: 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 ------------------------------------------------------------ */

.jd-header {
	background-color: var(--jd-surface);
	border-block-end: var(--jd-border);
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
}

.jd-header__inner {
	display: flex;
	align-items: center;
	gap: var(--jd-space-10);
	padding-block: var(--jd-space-5);
}

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

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

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

.jd-header__menu {
	display: flex;
	align-items: center;
	gap: var(--jd-space-9);
	font-size: var(--jd-fs-sm);
	font-weight: 500;
}

.jd-header__menu a {
	color: var(--jd-ink);
	padding-block: var(--jd-space-4);
}

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

.jd-header__actions {
	display: flex;
	align-items: center;
	gap: var(--jd-space-3);
	margin-inline-start: auto;
}

.jd-icon-btn {
	background: none;
	border: 0;
	padding-inline: var(--jd-space-4);
	color: var(--jd-ink);
	position: relative;
}

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

.jd-icon-btn__label {
	font-size: var(--jd-fs-2xs);
}

.jd-cart__count {
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-2xs);
	line-height: 1;
	padding: 2px var(--jd-space-3);
	border: var(--jd-border);
	border-radius: 999px;
}

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

.jd-search {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--jd-space-3);
	max-inline-size: 460px;
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-paper);
	padding-inline: var(--jd-space-5);
	transition: border-color var(--jd-transition);
}

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

.jd-search__field {
	flex: 1 1 auto;
	border: 0;
	background: none;
	padding-block: var(--jd-space-5);
	font-size: var(--jd-fs-sm);
	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;
}

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

.jd-header__burger {
	display: none;
}

.jd-drawer {
	border-block-start: var(--jd-border);
	padding: var(--jd-space-8) var(--jd-gutter);
	background-color: var(--jd-surface);
}

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

.jd-drawer__menu {
	display: grid;
	gap: var(--jd-space-2);
	font-size: var(--jd-fs-base);
}

.jd-drawer__menu a {
	display: block;
	padding-block: var(--jd-space-6);
	border-block-end: var(--jd-border);
	color: var(--jd-ink);
}

.jd-drawer__langs {
	margin-block-start: var(--jd-space-8);
}

/* 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 {
		display: inline-flex;
	}
}

@media (max-width: 768px) {
	.jd-search {
		order: 3;
		flex-basis: 100%;
		max-inline-size: none;
	}

	.jd-header__inner {
		flex-wrap: wrap;
	}
}

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

.jd-footer {
	margin-block-start: var(--jd-space-24);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	/* The pattern is architectural, not wallpaper: a thin band at the top edge only. */
	background-image: url("../img/pattern-navy.svg");
	background-repeat: repeat-x;
	background-position: top center;
	background-size: auto 120px;
}

.jd-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--jd-space-16);
	padding-block: var(--jd-space-24) var(--jd-space-16);
}

.jd-footer__wordmark {
	display: block;
	font-family: var(--jd-font-display);
	font-weight: 700;
	font-size: var(--jd-fs-title);
}

.jd-footer__latin {
	display: block;
	font-size: var(--jd-fs-2xs);
	letter-spacing: var(--jd-track-wide);
	color: rgb(255 255 255 / .7);
	margin-block-start: var(--jd-space-2);
}

.jd-footer__address,
.jd-footer__email,
.jd-footer__phone {
	display: block;
	font-style: normal;
	font-size: var(--jd-fs-sm);
	color: rgb(255 255 255 / .82);
	margin-block-start: var(--jd-space-6);
}

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

.jd-footer__heading {
	color: rgb(255 255 255 / .6);
	margin-block-end: var(--jd-space-6);
}

.jd-footer__menu {
	display: grid;
	gap: var(--jd-space-5);
	font-size: var(--jd-fs-sm);
}

.jd-footer__menu a {
	color: rgb(255 255 255 / .82);
}

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

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

.jd-footer__barinner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-6);
	padding-block: var(--jd-space-8);
	font-size: var(--jd-fs-2xs);
	color: rgb(255 255 255 / .7);
}

.jd-footer__tax {
	display: flex;
	align-items: center;
	gap: var(--jd-space-4);
}

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

/* ---- Floating WhatsApp ------------------------------------------------- */

.jd-whatsapp {
	position: fixed;
	inset-block-end: var(--jd-space-10);
	inset-inline-end: var(--jd-space-10);
	z-index: 60;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 999px;
	background-color: var(--jd-emerald);
	color: var(--jd-on-navy);
	border: 1px solid var(--jd-emerald);
}

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