/* ECARTBAY hero mosaic.

   One large slideshow tile, a tall promo and two stacked promos, in the
   proportions of the reference the owner supplied. Soft corners here are
   deliberate and recorded in the design system: these are image tiles and a
   photograph reads better inside a rounded frame than a hard box. The rule
   stops at this band - product cards and buttons stay square. */

.nmb-hero {
	padding-top: 20px;
	padding-bottom: 10px;
}

.nmb-grid {
	display: grid;
	grid-template-columns: 1.85fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	/* Tuned so the main tile lands near 1.75:1. The slide artwork is 1024x460,
	   and a taller box would crop the sides of it away. */
	height: clamp(330px, 26vw, 520px);
}

.nmb-main { grid-column: 1; grid-row: 1 / span 2; }
.nmb-tall { grid-column: 2; grid-row: 1 / span 2; }
.nmb-sm   { grid-column: 3; }

/* No side tiles configured: let the slideshow take the full width. */
.nmb-grid-solo { grid-template-columns: 1fr; }
.nmb-grid-solo .nmb-main { grid-column: 1 / -1; }

/* ---------- main slideshow tile ---------- */

.nmb-main {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: var(--surface-iron, #F1EEF0);
}

.nmb-main .eb-heroslide {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .7s ease;
}

.nmb-main .eb-heroslide.is-active { opacity: 1; }

/* Weighted to the left, where the copy sits, so the photograph stays visible. */
.nmb-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(26, 25, 24, 0.78) 0%, rgba(26, 25, 24, 0.42) 46%, rgba(26, 25, 24, 0.04) 78%);
	z-index: 1;
}

.nmb-main-body {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: 66%;
	padding: 42px;
	color: #fff;
}

.nmb-main-slide[hidden] { display: none; }

.nmb-kicker {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

.nmb-title {
	margin: 0;
	font-family: 'Saira Condensed', 'Saira', sans-serif;
	font-size: clamp(32px, 3.5vw, 54px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: 0.01em;
	color: #fff;
}

.nmb-blurb {
	margin: 14px 0 0;
	max-width: 42ch;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* ---------- call to action ---------- */

.nmb-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	padding: 14px 32px;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	color: var(--ink, #252322);
	font-family: 'Saira', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.nmb-cta:hover,
.nmb-tile:hover .nmb-cta-sm {
	background: var(--gold, #0389AE);
	border-color: var(--gold, #0389AE);
	color: #fff;
}

.nmb-cta-sm { margin-top: 18px; padding: 11px 24px; font-size: 12px; }

/* ---------- dots ---------- */

.nmb-dots {
	position: absolute;
	right: 26px;
	bottom: 26px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
}

.nmb-dots .nmb-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	cursor: pointer;
	transition: width .28s cubic-bezier(.32, .72, 0, 1), background .2s ease, border-radius .28s ease;
}

.nmb-dots .nmb-dot.is-active {
	width: 24px;
	background: #fff;
	border-color: #fff;
	border-radius: 999px;
}

/* ---------- promo tiles ---------- */

.nmb-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--surface-iron, #F1EEF0);
	text-decoration: none;
}

.nmb-tile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.nmb-tile:hover .nmb-tile-bg { transform: scale(1.06); }

.nmb-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 25, 24, 0.62) 0%, rgba(26, 25, 24, 0.18) 46%, rgba(26, 25, 24, 0.58) 100%);
}

.nmb-tile-body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 24px;
	color: #fff;
}

.nmb-tall .nmb-tile-body {
	align-items: center;
	text-align: center;
	padding-top: 36px;
}

.nmb-tile-kicker {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
}

.nmb-tile-title {
	margin-top: 9px;
	font-family: 'Saira Condensed', 'Saira', sans-serif;
	font-size: clamp(20px, 1.75vw, 27px);
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
	overflow-wrap: anywhere;
}

.nmb-tall .nmb-tile-title { font-size: clamp(24px, 2.1vw, 33px); }

.nmb-tile-sub {
	margin-top: 9px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.84);
}

/* ---------- product tiles ----------

   A category's own artwork is a square studio shot on a plain ground. Cropping
   that to fill a tall tile shows a meaningless slice of fabric, and a dark
   scrim over it just makes it muddy. So these tiles invert: light ground, ink
   type, and the product sitting inside the frame at its own proportions.
   Tiles given a real photograph in the Customizer keep the scrim treatment. */

/* The portrait model shot is 460x1024 dropping into a near-square tile, so
   `cover` trims over half its height. Biasing upward keeps the face and the
   necklace in frame instead of centring on the middle of the torso. */
.nmb-tall.nmb-tile-photo .nmb-tile-bg { background-position: center 30%; }

.nmb-tile-product {
	background: var(--surface-iron, #F1EEF0);
	border: 1px solid var(--line, #E6E1E4);
}

.nmb-tile-product .nmb-tile-bg {
	background-size: auto 62%;
	background-position: center bottom 9%;
	background-repeat: no-repeat;
}

.nmb-tile-product:hover .nmb-tile-bg { transform: scale(1.05); }

/* Fades the top so the label always has a clean ground, whatever the photo. */
.nmb-tile-product .nmb-tile-scrim {
	background: linear-gradient(180deg, rgba(247, 245, 246, 0.96) 0%, rgba(247, 245, 246, 0.72) 30%, rgba(247, 245, 246, 0) 58%);
}

.nmb-tile-product .nmb-tile-kicker { color: var(--ash, #6E686B); }
.nmb-tile-product .nmb-tile-title { color: var(--ink, #252322); }
.nmb-tile-product .nmb-tile-sub { color: var(--ash, #6E686B); }

.nmb-tile-product .nmb-cta-sm {
	background: var(--gold, #0389AE);
	border-color: var(--gold, #0389AE);
	color: #fff;
}

.nmb-tile-product:hover .nmb-cta-sm {
	background: var(--gold-dark, #02607A);
	border-color: var(--gold-dark, #02607A);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.nmb-main .eb-heroslide,
	.nmb-tile-bg,
	.nmb-dots .nmb-dot { transition-duration: .01ms; }
}

/* ================================================================
   Homepage polish
   ================================================================ */

/* ---------- section rhythm ---------- */

/* A hairline under each section head gives the page a spine, and separates
   the heading from its grid without spending more vertical space. */
.eb-sechead {
	padding-bottom: 16px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line, #E6E1E4);
}

.eb-seclink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-bottom: 0;
	padding-bottom: 0;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--gold-text, #026E8C);
	white-space: nowrap;
}

.eb-seclink::after {
	content: "\2192";
	transition: transform .18s ease;
}

.eb-seclink:hover::after { transform: translateX(3px); }

/* On a very wide monitor a five-across row would stretch each card past any
   useful size. The page stays full-bleed; only the grids inside stop growing. */
.eb-grid5,
ul.products.eb-grid5,
.eb-dealgroups {
	max-width: 1900px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- deal cards ---------- */

/* The cards were tight enough that the ribbons, the thumbnails and the
   category link all ran together. */
.eb-dealgroups { gap: 18px; }

.eb-dealcard {
	padding: 20px;
	gap: 18px;
	border-radius: 0;
	transition: border-color .18s ease;
}

.eb-dealcard:hover { border-color: var(--border-ghost, #D8D2D6); }

/* Each section needs a floor as well as a ceiling, or the last row of one
   sits right on the heading of the next. The ceiling is raised too - the old
   rhythm was tight enough that the page read as a stack rather than as
   separate ideas. */
.eb-section {
	padding-top: clamp(54px, 5.4vw, 92px);
	padding-bottom: clamp(6px, 1vw, 14px);
}

/* ---------- category rail ---------- */

.eb-cattile { transition: transform .18s ease; }
.eb-cattile:hover { transform: translateY(-2px); }

/* ---------- product cards ---------- */

ul.products.eb-grid5 li.product { transition: transform .18s ease; }
ul.products.eb-grid5 li.product:hover { transform: translateY(-3px); }

/* ---------- three-up category band ---------- */

.eb-band3 .eb-mediatile {
	border-radius: 14px;
	aspect-ratio: 16 / 10;
	min-height: 0;
}

.eb-band3 .eb-mediatile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.eb-band3 .eb-mediatile:hover .eb-mediatile-bg { transform: scale(1.05); }

.eb-band3 .eb-mediatile-scrim { position: absolute; inset: 0; }

.eb-band3 .eb-mediatile-body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
}

.eb-band-title { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.1; }

.eb-band-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eb-band-link svg { transition: transform .18s ease; }
.eb-mediatile:hover .eb-band-link svg { transform: translateX(3px); }

/* Cut-out artwork: light ground, ink type, product sitting inside the frame.
   Same reasoning as the hero tiles - a scrim over a studio shot is muddy. */
.eb-band-product {
	background: var(--surface-iron, #F1EEF0);
	border: 1px solid var(--line, #E6E1E4);
}

.eb-band-product .eb-mediatile-bg {
	background-size: auto 68%;
	background-position: center bottom 14%;
	background-repeat: no-repeat;
}

.eb-band-product .eb-mediatile-scrim {
	background: linear-gradient(0deg, rgba(247, 245, 246, 0.96) 0%, rgba(247, 245, 246, 0.72) 26%, rgba(247, 245, 246, 0) 54%);
}

.eb-band-product .eb-band-title { color: var(--ink, #252322); }
.eb-band-product .eb-band-link { color: var(--gold-text, #026E8C); }

/* Photographs keep the scrim and white type. */
.eb-band-photo .eb-mediatile-scrim {
	background: linear-gradient(180deg, rgba(26, 25, 24, 0.5) 0%, rgba(26, 25, 24, 0.12) 42%, rgba(26, 25, 24, 0.66) 100%);
}

.eb-band-photo .eb-band-title,
.eb-band-photo .eb-band-link { color: #fff; }

/* ---------- trust band ---------- */

.eb-trust {
	background: var(--surface-charcoal, #F7F5F6);
	border: 1px solid var(--line, #E6E1E4);
	margin-top: clamp(40px, 5vw, 68px);
	padding: clamp(24px, 2.6vw, 34px);
}

@media (prefers-reduced-motion: reduce) {
	.eb-cattile,
	ul.products.eb-grid5 li.product,
	.eb-band3 .eb-mediatile-bg,
	.eb-seclink::after,
	.eb-band-link svg { transition-duration: .01ms; }
}

/* ================================================================
   Newsletter band
   ================================================================ */

.eb-news { padding-bottom: clamp(52px, 5vw, 84px); }

/* A tinted panel rather than a hairline: at full width the old rule left the
   heading stranded on the left with a lot of empty page beside it. */
.eb-news-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	padding: clamp(30px, 3.4vw, 52px);
	background: var(--surface-charcoal, #F7F5F6);
	border: 1px solid var(--line, #E6E1E4);
	border-top: 1px solid var(--line, #E6E1E4);
}

@media (min-width: 900px) {
	.eb-news-inner {
		grid-template-columns: 1fr minmax(360px, 460px);
		align-items: center;
		gap: 48px;
	}
}

.eb-news-title {
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.1;
	margin: 0;
}

.eb-news-inner .eb-micro { margin-top: 10px; max-width: 46ch; }

.eb-news-form { max-width: none; width: 100%; }

/* Square, to match the Sign up button beside it and the rest of the form
   controls. The pill is reserved for search. A bordered white field is still
   a step up from the bare underline this used to be. */
.eb-news-field {
	background: #fff;
	border: 1px solid var(--line, #E6E1E4);
	border-radius: 0;
	padding: 14px 16px;
	letter-spacing: 0.04em;
}

.eb-news-field:focus {
	border-color: var(--gold, #0389AE);
	box-shadow: 0 0 0 3px rgba(3, 137, 174, 0.11);
}

/* ================================================================
   Footer
   ================================================================ */

.eb-backtotop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 18px 12px;
	background: var(--ink-deep, #1A1918);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eb-backtotop:hover { background: var(--ink, #252322); color: #fff; }
.eb-backtotop svg { transition: transform .18s ease; }
.eb-backtotop:hover svg { transform: translateY(-2px); }

.eb-footmain { padding: clamp(44px, 5vw, 76px) 0; }

@media (min-width: 900px) {
	/* The brand and the delivery facts carry more text than the two link
	   columns, so they get the wider tracks. */
	.eb-footcols { grid-template-columns: 1.35fr 1fr 1fr 1.35fr; gap: 44px; }
}

.eb-footbrand { gap: 16px; }
.eb-footlogo { height: 30px; width: auto; display: block; }

.eb-footblurb {
	margin: 0;
	max-width: 34ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

.eb-footpays { display: flex; flex-wrap: wrap; gap: 7px; }

/* Muted heading, brighter links: the emphasis belongs on the things you can
   click, not on the label above them. */
.eb-foothead {
	margin: 0 0 16px;
	font-family: 'Saira', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.eb-footlist,
.eb-footfacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.eb-footlist { gap: 11px; }

.eb-footlist a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color .16s ease;
}

.eb-footlist a:hover { color: #fff; }

.eb-footfacts { gap: 15px; }

.eb-footfacts li {
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.eb-footfacts span {
	display: block;
	margin-bottom: 3px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}

.eb-footlow {
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.eb-footlegal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.eb-footlegal { margin: 0; }
.eb-footlegal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.eb-footlegal-links a:hover { color: #fff; }

.eb-footregion { display: flex; gap: 10px; }
.eb-footsel { padding: 8px 14px; font-size: 12px; text-decoration: none; }

@media (max-width: 899px) {
	.eb-footcols { gap: 32px 24px; }
	.eb-footbrand { grid-column: 1 / -1; }
	.eb-footlegal-row { justify-content: flex-start; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 1023px) {
	.nmb-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		height: auto;
		gap: 10px;
	}

	.nmb-main,
	.nmb-tall {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.nmb-main { aspect-ratio: 16 / 10; }
	.nmb-tall { aspect-ratio: 16 / 8; }
	.nmb-sm { grid-column: auto; aspect-ratio: 1 / 1; }

	.nmb-main-body { max-width: 78%; padding: 26px; }
	.nmb-dots { right: 18px; bottom: 18px; }
}

@media (max-width: 559px) {
	.nmb-grid { grid-template-columns: 1fr; }

	.nmb-main { aspect-ratio: 4 / 5; }
	.nmb-tall { aspect-ratio: 4 / 3; }
	.nmb-sm { aspect-ratio: 16 / 9; }

	.nmb-main-body { max-width: 100%; padding: 22px; }
	.nmb-blurb { display: none; }
	.nmb-cta { margin-top: 18px; padding: 12px 26px; }
	.nmb-tile-body { padding: 20px; }
}