/**
 * Samsonite theme styles.
 *
 * 1.  Tokens
 * 2.  Reset & base
 * 3.  Utilities
 * 4.  Media placeholders
 * 5.  Buttons & badges
 * 6.  Utility bar
 * 7.  Header & mega menu
 * 8.  Contact bar
 * 9.  Mobile nav
 * 10. Hero
 * 11. Sections & carousels
 * 12. Product cards
 * 13. Category tiles
 * 14. Campaign banners
 * 15. Service promises
 * 16. Newsletter
 * 17. Footer
 * 18. Legal
 * 19. Inner pages
 * 20. Shop archive
 * 21. Product page
 * 22. Responsive
 */

/* ------------------------------------------------------------ 1. Tokens - */

:root {
	--black: #000;
	--ink: #1a1a1a;
	--ink-soft: #4a4a4a;
	--muted: #6f6f6f;
	--muted-light: #8d8d8d;
	--line: #e4e4e4;
	--line-strong: #d0d0d0;
	--white: #fff;
	--off: #f7f7f7;
	--sale: #e2001a;
	--sky: #7dc0e8;
	--link: #1b6cb5;

	--font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;

	--gutter: clamp(16px, 4vw, 76px);
	--container: 1920px;

	--admin-bar-height: 0px;

	/* Height of the sticky header: logo row + nav row + its bottom border. */
	--header-h: 148px;

	/* Width of the catalogue's filter column, and of the toolbar cell above it. */
	--shop-side: clamp(300px, 24.8vw, 476px);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------- 2. Reset and base - */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* -------------------------------------------------------- 3. Utilities - */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--black);
	color: var(--white);
}

.overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, 0.45);
	animation: fade 0.25s var(--ease);
}

.overlay[hidden] {
	display: none;
}

@keyframes fade {
	from {
		opacity: 0;
	}
}

.icon {
	flex: none;
}

/* Corner brackets used on campaign artwork. */
.brackets {
	position: absolute;
	inset: 30px;
	pointer-events: none;
}

.brackets::before,
.brackets::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.brackets::before {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
	box-shadow: none;
}

.brackets::after {
	right: 0;
	bottom: 0;
	border-top: 0;
	border-left: 0;
}

/* The remaining two corners are painted on the same element, so one span
   covers all four without extra markup. */
.brackets {
	background:
		linear-gradient(to left, rgba(255, 255, 255, 0.85) 44px, transparent 44px) top right / 100% 1.5px no-repeat,
		linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 44px, transparent 44px) top right / 1.5px 100% no-repeat,
		linear-gradient(to right, rgba(255, 255, 255, 0.85) 44px, transparent 44px) bottom left / 100% 1.5px no-repeat,
		linear-gradient(to top, rgba(255, 255, 255, 0.85) 44px, transparent 44px) bottom left / 1.5px 100% no-repeat;
}

.brackets--light::before,
.brackets--light::after {
	border-color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------- 4. Media placeholders --- */

/*
 * Artwork slots. A real <img> covers the block when one exists; otherwise the
 * tone gradient holds the exact aspect ratio so the layout never collapses.
 */
.media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #ededed;
	isolation: isolate;
}

.media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media--sand    { background: linear-gradient(150deg, #d9c49b 0%, #cbb489 45%, #b99e70 100%); }
.media--stone   { background: linear-gradient(160deg, #4a5560 0%, #2f3841 55%, #1d242b 100%); }
.media--deep    { background: linear-gradient(160deg, #274a63 0%, #16303f 60%, #0d1c26 100%); }
.media--mist    { background: linear-gradient(160deg, #dfe8ee 0%, #c9d6df 60%, #b8c8d3 100%); }
.media--pale    { background: linear-gradient(160deg, #eef1f3 0%, #dfe4e8 60%, #ced5da 100%); }
.media--peach   { background: linear-gradient(160deg, #f3c7ad 0%, #e9ac8b 60%, #dd9670 100%); }
.media--sage    { background: linear-gradient(160deg, #cdd6c8 0%, #b6c2b0 60%, #9dab96 100%); }
.media--jungle  { background: linear-gradient(150deg, #5c6b4a 0%, #3d4a31 55%, #26301e 100%); }
.media--ice     { background: linear-gradient(155deg, #7fb4d6 0%, #3d7fb0 40%, #1d5580 75%, #123c5e 100%); }
.media--forest  { background: linear-gradient(160deg, #1f6a4c 0%, #12563a 60%, #0b3d29 100%); }
.media--yellow  { background: linear-gradient(160deg, #f4bf52 0%, #eda31d 60%, #d78a0d 100%); }
.media--graphite{ background: linear-gradient(160deg, #55575a 0%, #3a3c3f 60%, #232527 100%); }
.media--silver  { background: linear-gradient(160deg, #d8dcda 0%, #c2c8c6 60%, #a9b1af 100%); }
.media--navy    { background: linear-gradient(160deg, #1d4a80 0%, #123a6b 60%, #0b2749 100%); }
.media--petrol  { background: linear-gradient(160deg, #147078 0%, #0f5f66 60%, #08444a 100%); }

/* --------------------------------------------- 5. Buttons and badges --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 0 44px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.btn--light {
	background: var(--white);
	color: var(--black);
}

.btn--light:hover,
.btn--light:focus-visible {
	background: var(--black);
	color: var(--white);
}

.btn--dark {
	background: var(--black);
	color: var(--white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
	background: #333;
}

.btn--block {
	display: flex;
	width: 100%;
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 27px;
	padding: 0 9px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.badge--sale {
	background: var(--sale);
	color: var(--white);
}

/* -------------------------------------------------------- 6. Promo bar - */

.promo-bar {
	background: var(--black);
	color: var(--white);
}

.promo-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 24px;
	min-height: 52px;
}

.promo-bar__item {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------ 7. Header - */

.header {
	position: sticky;
	top: var(--admin-bar-height);
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

/* The cart panel hangs off the logo row, so it covers the nav row below it. */
.header__top {
	position: relative;
}

.header__top-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
}

.header__logo {
	line-height: 0;
}

.wordmark {
	display: inline-flex;
	align-items: baseline;
	color: var(--black);
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1;
}

.wordmark__text {
	display: inline-block;
}

.wordmark__mark {
	width: 0.83em;
	height: 0.83em;
	margin: 0 0.015em;
	transform: translateY(0.045em);
	color: currentColor;
}

.wordmark--light {
	color: var(--white);
}

.header__actions {
	position: absolute;
	right: var(--gutter);
	display: flex;
	align-items: center;
	gap: 26px;
}

.header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}

.header__action:hover {
	color: var(--muted);
}

.header__action--search {
	display: none;
}

.header__count {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sale);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.header__count.is-empty {
	display: none;
}

.header__burger {
	position: absolute;
	left: var(--gutter);
	display: none;
	align-items: center;
}

.header__bottom-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: 63px;
}

.header__search {
	justify-self: start;
	width: 100%;
	max-width: 210px;
}

.search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 5px;
}

.search-form__label {
	display: flex;
	color: var(--ink);
}

.search-form__input {
	width: 100%;
	border: 0;
	background: none;
	font-size: 16px;
	padding: 2px 0;
}

.search-form__input::placeholder {
	color: var(--muted);
	opacity: 1;
}

.search-form__input:focus {
	outline: none;
}

/* Enter in the field submits natively; the button stays for screen readers. */
.search-form__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Mini cart -------------------------------------------------------------- */

.cart-menu {
	position: absolute;
	top: 100%;
	right: var(--gutter);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.cart-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mini-cart {
	width: min(610px, calc(100vw - 2 * var(--gutter)));
	padding: 20px 26px 26px;
	background: var(--white);
	box-shadow: 0 22px 34px rgba(0, 0, 0, 0.16);
}

.mini-cart:focus {
	outline: none;
}

.mini-cart__empty {
	padding: 8px 0;
	color: var(--ink-soft);
	font-size: 15px;
}

/* Long carts scroll; the totals and the button below stay put. */
.mini-cart__items {
	max-height: min(46vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mini-cart__item {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 20px;
	padding: 14px 0;
}

.mini-cart__item + .mini-cart__item {
	border-top: 1px solid var(--line);
}

.mini-cart__media {
	aspect-ratio: 4 / 5;
	background: #fff;
}

/* Product shots keep their full silhouette at this size. */
.mini-cart__img {
	object-fit: contain;
}

/* Stands in for the shot while no photography is attached. */
.mini-cart__media[class*="media--"] {
	background-image: none;
	background-color: #fff;
}

.mini-cart__media::after {
	content: "";
	position: absolute;
	inset: 6% 10%;
	border-radius: 8px;
	background: currentColor;
	opacity: 0.1;
}

.mini-cart__media:has(img)::after {
	display: none;
}

.mini-cart__media.media--forest   { color: #12563a; }
.mini-cart__media.media--yellow   { color: #eda31d; }
.mini-cart__media.media--graphite { color: #3a3c3f; }
.mini-cart__media.media--silver   { color: #a9b1af; }
.mini-cart__media.media--navy     { color: #123a6b; }
.mini-cart__media.media--petrol   { color: #0f5f66; }
.mini-cart__media.media--mist     { color: #7d94a4; }
.mini-cart__media.media--sand     { color: #b99e70; }
.mini-cart__media.media--pale     { color: #9aa4ab; }
.mini-cart__media.media--peach    { color: #dd9670; }
.mini-cart__media.media--stone    { color: #2f3841; }
.mini-cart__media.media--sage     { color: #9dab96; }

.mini-cart__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
}

.mini-cart__summary {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.4;
}

.mini-cart__qty {
	margin-top: 8px;
	color: var(--muted-light);
	font-size: 15px;
}

/* Prices sit on the baseline of the lines they price, not the item name. */
.mini-cart__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px;
	align-self: end;
	text-align: right;
	white-space: nowrap;
}

.mini-cart__price del {
	color: var(--muted);
	font-size: 15px;
	text-decoration-thickness: 1px;
}

.mini-cart__price ins {
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.mini-cart__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
}

.mini-cart__row--total {
	font-size: 16px;
	font-weight: 700;
}

.mini-cart__checkout {
	margin-top: 6px;
}

.mini-cart__view {
	display: block;
	margin-top: 22px;
	text-align: center;
	font-size: 15px;
}

.mini-cart__view:hover {
	text-decoration: underline;
}

/* The panel already says what was added, so the store's own follow-up link
   under the card button has nothing left to do. */
.card .added_to_cart {
	display: none;
}

.nav {
	justify-self: center;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav__list > li > a {
	display: inline-block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nav__list > li > a:hover {
	color: var(--muted);
}

/* Second level, shown on hover. */
.nav__list li {
	position: relative;
}

.nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	padding: 14px 0;
	background: var(--white);
	border: 1px solid var(--line);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--ease);
	z-index: 5;
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.nav__list .sub-menu a {
	display: block;
	padding: 9px 24px;
	font-size: 14px;
	white-space: nowrap;
}

.nav__list .sub-menu a:hover {
	background: var(--off);
}

/* Mega panels ------------------------------------------------------------ */

/*
 * A panel lives inside its list item but is measured against the whole nav
 * row, so items that own one give up their positioning context.
 */
.header__bottom {
	position: relative;
}

.nav__list > .has-mega {
	position: static;
}

/* The panel stands in for any second level on the same item. */
.nav__list > .has-mega > .sub-menu {
	display: none;
}

.nav__list > .has-mega > a {
	position: relative;
	color: var(--ink);
}

/* Marks the open item, on the bottom edge of the nav row. */
.nav__list > .has-mega > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -18px;
	left: 0;
	height: 2px;
	background: var(--black);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.mega {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	width: 100%;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 22px 34px rgba(0, 0, 0, 0.09);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

/* Hover alone opens a panel; once the script loads it takes over, adding the
   delays that stop panels flickering as the pointer crosses the bar. */
.nav:not(.is-js) .nav__list > .has-mega:hover > .mega,
.nav__list > .has-mega:focus-within > .mega,
.nav__list > .has-mega.is-open > .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav:not(.is-js) .nav__list > .has-mega:hover > a::after,
.nav__list > .has-mega:focus-within > a::after,
.nav__list > .has-mega.is-open > a::after {
	opacity: 1;
}

/* padding-block only: the inline gutters come from .container. */
.mega__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.85fr) minmax(0, 1fr);
	align-items: start;
	gap: 0 clamp(18px, 1.7vw, 32px);
	padding-block: 42px 54px;
}

.mega__group + .mega__group {
	margin-top: 42px;
}

.mega__heading {
	padding-bottom: 13px;
	border-bottom: 1px solid var(--line-strong);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mega__heading + .mega__list {
	margin-top: 5px;
}

.mega__link {
	display: block;
	padding: 13px 0;
	color: var(--ink);
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-transform: uppercase;
}

.mega__link:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* A column with no heading still starts on the line the headings sit on. */
.mega__col > .mega__group:first-child > .mega__list:first-child li:first-child > .mega__link {
	padding-top: 0;
}

/* Artwork keeps its tracks even in panels with fewer link columns. */
.mega__products {
	grid-column: 4;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 40px);
}

.mega__card-media {
	aspect-ratio: 3 / 4;
}

.mega__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-top: 24px;
}

.mega__card-brand {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.mega__card .compare {
	gap: 5px;
	font-size: 12px;
}

.mega__card-title {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.mega__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__card-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
}

.mega__card-price del {
	color: var(--muted);
	font-size: 13px;
	text-decoration-thickness: 1px;
}

.mega__card-price ins {
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.mega__promo {
	grid-column: 5;
	display: block;
}

.mega__promo-media {
	aspect-ratio: 55 / 64;
}

.mega__promo-title,
.mega__feature-title {
	display: block;
	margin-top: 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mega__promo:hover .mega__promo-title,
.mega__feature:hover .mega__feature-title {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Personalization: one link column beside two wide artwork cards. */
.mega--features .mega__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 2.4fr);
	gap: 0 clamp(24px, 3vw, 62px);
}

.mega__feature {
	display: block;
}

.mega__feature-media {
	aspect-ratio: 5 / 3;
}

.header__brand,
.header__brand-list {
	justify-self: end;
	display: flex;
	gap: 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.header__mobile-search {
	display: none;
	padding: 14px 0 18px;
	border-top: 1px solid var(--line);
}

.header__mobile-search[hidden] {
	display: none;
}

/* ------------------------------------------------------- 8. Contact bar - */

.contact-bar {
	background: var(--sky);
	color: var(--ink);
}

.contact-bar__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 68px;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-align: center;
}

.contact-bar__text a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------- 9. Mobile nav - */

.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	width: min(84vw, 380px);
	height: 100%;
	background: var(--white);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.3s var(--ease);
	overflow-y: auto;
}

.mobile-nav.is-open {
	transform: translateX(0);
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px var(--gutter);
	border-bottom: 1px solid var(--line);
}

.mobile-nav__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.mobile-nav__body {
	padding: 8px var(--gutter) 40px;
}

.mobile-nav__body .nav__list {
	display: block;
}

.mobile-nav__body .nav__list > li > a,
.mobile-nav__brand {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mobile-nav__body .sub-menu {
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	border: 0;
	padding: 0 0 10px 14px;
}

/* The mega panel's link groups, laid out as one indented list per group. */
.mobile-nav__panel {
	padding: 14px 0 20px 14px;
	border-bottom: 1px solid var(--line);
}

.mobile-nav__heading {
	margin-top: 14px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.mobile-nav__panel > .mobile-nav__heading:first-child {
	margin-top: 0;
}

.mobile-nav__list a {
	display: block;
	padding: 9px 0;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The item's own link keeps the divider; the panel below it carries the next. */
.mobile-nav__body .nav__list > .has-mega > a {
	border-bottom: 0;
}

/* ------------------------------------------------------------- 10. Hero - */

.hero {
	padding-top: 36px;
}

.hero__grid {
	display: grid;
	grid-template-columns: 3.14fr 1fr;
	gap: 42px;
	align-items: stretch;
}

/* With no side panels configured, the main panel takes the full width. */
.hero__grid--single {
	grid-template-columns: minmax(0, 1fr);
}

.hero__main {
	position: relative;
	aspect-ratio: 16 / 9;
}

.hero__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 91%;
	height: 77%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	background: rgba(216, 199, 168, 0.76);
	text-align: center;
	color: var(--white);
}

.hero__title {
	max-width: 9ch;
	font-size: clamp(40px, 5vw, 96px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.hero__sub {
	font-size: clamp(20px, 2.1vw, 40px);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 22px;
}

.hero__side {
	position: relative;
	display: flex;
	flex-direction: column;
}

.hero__slides {
	position: relative;
	flex: 1;
	min-height: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 46px 22px 22px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--ease);
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero__slide-body {
	padding-inline: 8px;
}

.hero__slide-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--white);
	/* Capped so "Remarkably light" stays on one line inside the narrow panel. */
	font-size: clamp(20px, 1.6vw, 29px);
	line-height: 1.12;
	text-transform: uppercase;
}

.hero__slide-title strong {
	font-weight: 700;
}

.hero__slide-title em {
	font-style: italic;
	font-weight: 700;
}

.hero__slide .btn {
	min-height: 52px;
	padding-inline: 14px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 18px 0 4px;
}

.dots__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--line-strong);
	transition: background-color 0.2s var(--ease);
}

.dots__dot.is-active {
	background: var(--ink);
}

/* ------------------------------------------- 11. Sections and carousels - */

.section {
	padding-top: 46px;
}

.section--newsletter {
	padding-top: 0;
}

.section__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.carousel {
	position: relative;
}

.carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	/* Without this the first item snaps to the scrollport edge and the row
	   starts scrolled past the container gutter. */
	scroll-padding-inline-start: var(--gutter);
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
}

.carousel__viewport::-webkit-scrollbar {
	display: none;
}

.carousel__track {
	display: flex;
	align-items: stretch;
}

.carousel__track::after {
	content: "";
	flex: none;
	width: 1px;
}

.carousel__item {
	flex: none;
	scroll-snap-align: start;
}

.carousel__track--products {
	gap: 23px;
}

.carousel__track--products > .carousel__item {
	width: 420px;
}

.carousel__track--tiles {
	gap: 58px;
}

.carousel__track--tiles > .carousel__item {
	width: 497px;
}

.carousel__nav {
	position: absolute;
	top: 34%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
	opacity: 0;
	transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease);
}

.carousel:hover .carousel__nav,
.carousel__nav:focus-visible {
	opacity: 1;
}

.carousel__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

.carousel__nav--prev {
	left: calc(var(--gutter) / 2);
}

.carousel__nav--next {
	right: calc(var(--gutter) / 2);
}

.carousel__progress {
	position: relative;
	width: min(1140px, 62%);
	height: 2px;
	margin: 42px auto 0;
	background: var(--line);
}

.carousel__bar {
	position: absolute;
	top: -0.5px;
	left: 0;
	height: 3px;
	width: 30%;
	background: var(--ink);
	transition: transform 0.15s linear, width 0.15s linear;
}

/* ----------------------------------------------------- 12. Product card - */

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 17px;
	transition: box-shadow 0.25s var(--ease);
}

.card:hover {
	box-shadow: 0 4px 26px rgba(0, 0, 0, 0.1);
}

.card__media {
	aspect-ratio: 4 / 5;
	background: #fff;
}

/* Product shots -- on the page and in the mega panels alike -- sit on white in
   the reference design; the tone only shows through as a soft wash while no
   photography is attached. */
:is(.card__media, .mega__card-media)[class*="media--"] {
	background-image: none;
	background-color: #fff;
}

/* Stands in for the product shot while no photography is attached. */
.card__media::after,
.mega__card-media::after {
	content: "";
	position: absolute;
	inset: 7% 13%;
	border-radius: 14px;
	background: currentColor;
	opacity: 0.1;
}

.card__media:has(img)::after,
.mega__card-media:has(img)::after {
	display: none;
}

:is(.card__media, .mega__card-media).media--forest   { color: #12563a; }
:is(.card__media, .mega__card-media).media--yellow   { color: #eda31d; }
:is(.card__media, .mega__card-media).media--graphite { color: #3a3c3f; }
:is(.card__media, .mega__card-media).media--silver   { color: #a9b1af; }
:is(.card__media, .mega__card-media).media--navy     { color: #123a6b; }
:is(.card__media, .mega__card-media).media--petrol   { color: #0f5f66; }
:is(.card__media, .mega__card-media).media--mist     { color: #7d94a4; }
:is(.card__media, .mega__card-media).media--sand     { color: #b99e70; }
:is(.card__media, .mega__card-media).media--pale     { color: #9aa4ab; }
:is(.card__media, .mega__card-media).media--peach    { color: #dd9670; }
:is(.card__media, .mega__card-media).media--stone    { color: #2f3841; }
:is(.card__media, .mega__card-media).media--sage     { color: #9dab96; }
:is(.card__media, .mega__card-media).media--ice      { color: #3d7fb0; }
:is(.card__media, .mega__card-media).media--jungle   { color: #3d4a31; }
:is(.card__media, .mega__card-media).media--deep     { color: #16303f; }

.card .badge--sale {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
}

.swatches {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.swatches__dot {
	display: block;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--swatch, #101010);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
	transition: transform 0.18s var(--ease);
}

.swatches__dot:hover {
	transform: scale(1.14);
}

.card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-top: 30px;
}

.card__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
}

.compare {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	color: var(--ink-soft);
	font-size: 13px;
	letter-spacing: 0.01em;
}

.compare:hover {
	color: var(--ink);
}

.compare.is-active {
	color: var(--sale);
	font-weight: 600;
}

.card__summary {
	margin-top: 10px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.card__price {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
}

.card__price del {
	color: var(--muted);
	font-size: 15px;
	text-decoration-thickness: 1px;
}

.card__price ins {
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.card__cta {
	margin-top: 18px;
	min-height: 48px;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.card:hover .card__cta,
.card__cta:focus-visible {
	opacity: 1;
}

/* ---------------------------------------------------- 13. Category tile - */

.tile {
	display: block;
}

.tile__media {
	display: block;
	aspect-ratio: 497 / 300;
}

.tile__name {
	display: block;
	margin-top: 26px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.tile:hover .tile__name {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* -------------------------------------------------------- 14. Banners --- */

.split {
	display: grid;
	grid-template-columns: 41% 59%;
	min-height: 555px;
}

.split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 60px clamp(24px, 7.5vw, 131px);
	background: var(--black);
	color: var(--white);
}

.split__title {
	display: flex;
	flex-direction: column;
	font-size: clamp(34px, 4vw, 76px);
	font-weight: 700;
	font-style: italic;
	line-height: 1.06;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.split__kicker {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 18px;
}

.split__kicker-lead {
	font-size: clamp(14px, 1.2vw, 22px);
	font-weight: 400;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

.split__collection {
	font-size: clamp(20px, 1.7vw, 31px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.split__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 46px;
}

.split__cta {
	position: relative;
	z-index: 2;
	min-height: 46px;
	padding-inline: 30px;
	font-size: 13px;
}

.section--material {
	padding-top: 46px;
}

.material {
	position: relative;
	display: block;
	width: min(1334px, 100% - (var(--gutter) * 2));
	margin-inline: auto;
	aspect-ratio: 1334 / 780;
	color: var(--white);
}

.material .brackets {
	inset: 48px;
}

.material__logo {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
}

.material__logo .wordmark {
	font-size: 30px;
}

.material__lockup {
	position: absolute;
	bottom: 6%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.material__name {
	font-size: clamp(22px, 2.2vw, 34px);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

.material__name sup {
	font-size: 0.4em;
	vertical-align: super;
}

.material__caption {
	font-size: clamp(9px, 0.72vw, 12px);
	font-weight: 600;
	letter-spacing: 0.62em;
	text-indent: 0.62em;
	text-transform: uppercase;
}

/* --------------------------------------------- 15. Service promises ----- */

.section--usp {
	padding-top: 64px;
}

.section--usp .container {
	padding-inline: 0;
	max-width: none;
}

.usp {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--line);
}

.usp__item {
	display: flex;
	align-items: flex-start;
	gap: 42px;
	padding: 52px clamp(20px, 5vw, 95px);
	border-bottom: 1px solid var(--line);
}

.usp__item:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.usp__icon {
	flex: none;
	color: var(--ink);
}

.usp__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.35;
}

.usp__text {
	margin-top: 20px;
	max-width: 62ch;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.75;
}

/* ----------------------------------------------------- 16. Newsletter --- */

.section--newsletter {
	margin-top: 0;
	background: var(--off);
}

.newsletter {
	padding: 72px var(--gutter) 92px;
	text-align: center;
}

.newsletter__title {
	font-size: clamp(26px, 2.4vw, 38px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.newsletter__lead {
	margin-top: 16px;
	font-size: 17px;
	color: var(--ink-soft);
}

.newsletter__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(560px, 100%);
	margin: 30px auto 0;
	border-bottom: 1px solid #999;
	padding-bottom: 8px;
}

.newsletter__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-size: 17px;
	padding: 6px 0;
}

.newsletter__input:focus {
	outline: none;
}

.newsletter__input::placeholder {
	color: var(--muted);
	opacity: 1;
}

.newsletter__submit {
	display: flex;
	align-items: center;
	color: var(--ink);
	transition: transform 0.2s var(--ease);
}

.newsletter__submit:hover {
	transform: translateX(4px);
}

.newsletter__message {
	min-height: 22px;
	margin-top: 16px;
	font-size: 15px;
}

.newsletter__message.is-error {
	color: var(--sale);
}

.newsletter__message.is-success {
	color: #157a3d;
}

.newsletter.is-busy .newsletter__submit {
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------- 17. Footer --- */

.footer {
	background: var(--black);
	color: var(--white);
	padding: 62px 0 72px;
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.footer__title {
	margin-bottom: 26px;
	color: var(--muted-light);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.footer__title--tight {
	margin-top: 34px;
	margin-bottom: 16px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.footer__links li + li {
	margin-top: 24px;
}

.footer__links a {
	font-size: 16px;
}

.footer__links a:hover {
	color: var(--muted-light);
}

.ig-card {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px 10px 12px;
	border-radius: 6px;
	background: linear-gradient(70deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
}

.ig-card__badge {
	display: flex;
	color: var(--white);
}

.ig-card__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.ig-card__lead {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ig-card__brand {
	font-size: 26px;
	font-weight: 600;
	font-style: italic;
	letter-spacing: -0.01em;
}

.footer__handle {
	margin-top: 20px;
	font-size: 26px;
	letter-spacing: 0.01em;
}

.social {
	display: flex;
	align-items: center;
	gap: 38px;
	margin-top: 22px;
}

.social a:hover {
	opacity: 0.65;
}

.payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	max-width: 380px;
}

.payments__item svg {
	height: 34px;
	width: auto;
}

/* ---------------------------------------------------------- 18. Legal --- */

.legal {
	background: var(--white);
	color: var(--ink);
	padding: 40px 0 56px;
	text-align: center;
}

.legal__line {
	font-size: 15px;
	line-height: 1.7;
}

.legal__line a {
	color: var(--link);
}

.legal__line a:hover {
	text-decoration: underline;
}

.legal__badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 46px;
	margin-top: 52px;
}

.legal__badge--trustmark svg {
	width: 78px;
	height: 78px;
}

.legal__badge--europe svg {
	width: 112px;
	height: 75px;
}

.legal__member {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.legal__member svg {
	width: 214px;
	height: 70px;
}

/* --------------------------------------------------- 19. Inner pages ---- */

.site-main:not(.home) {
	padding: 56px 0 90px;
}

.page-title {
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 34px;
}

.entry + .entry {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--line);
}

.entry__title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
}

.entry__meta {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 18px;
}

.entry__content > * + * {
	margin-top: 18px;
}

.entry__content a {
	color: var(--link);
	text-decoration: underline;
}

.pagination {
	margin-top: 48px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-size: 14px;
}

.pagination .current {
	background: var(--black);
	color: var(--white);
	border-color: var(--black);
}

.widget + .widget {
	margin-top: 36px;
}

.widget__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* WooCommerce pages inherit the theme's type; the store's own layout CSS is
   dequeued in inc/woocommerce.php. */
.shop ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 23px;
	margin-top: 30px;
}

/* The store's clearfix pseudo-elements would each claim a grid cell. */
.shop ul.products::before,
.shop ul.products::after {
	display: none;
}

.shop ul.products li.product {
	position: relative;
}

.shop ul.products li.product a img {
	width: 100%;
	height: auto;
	margin-bottom: 18px;
}

.shop ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.shop ul.products li.product .price {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

.shop ul.products li.product .price del {
	color: var(--muted);
	font-size: 15px;
	font-weight: 400;
	margin-right: 8px;
}

.shop ul.products li.product .price ins {
	text-decoration: none;
}

/*
 * woocommerce-general.css is enqueued after the theme stylesheet, so its
 * button and helper rules need to be out-specified rather than just restated.
 */
.site-main.shop .button,
.site-main.shop button.button,
.site-main.shop a.button,
.site-main.shop input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	margin-top: 14px;
	background: var(--black);
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
}

.site-main.shop .button:hover,
.site-main.shop button.button:hover,
.site-main.shop a.button:hover,
.site-main.shop input[type="submit"]:hover {
	background: #333;
	color: var(--white);
}

.site-main.shop .woocommerce-result-count,
.site-main.shop .woocommerce-ordering {
	color: var(--muted);
}

.site-main.shop ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0;
}

.site-main.shop ul.products li.product .price {
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
}

.site-main.shop ul.products li.product .price del {
	color: var(--muted);
	font-size: 15px;
	font-weight: 400;
	opacity: 1;
}

/* Account, cart and checkout forms. woocommerce-layout.css is dequeued, so the
   two-column arrangements it used to provide are rebuilt here. */
.shop .woocommerce-form,
.shop form.checkout_coupon,
.shop form.login,
.shop form.register {
	max-width: 620px;
	margin-top: 24px;
	padding: 30px;
	border: 1px solid var(--line);
}

.shop .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 20px;
}

.shop .form-row label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.shop .input-text,
.shop input[type="text"],
.shop input[type="email"],
.shop input[type="tel"],
.shop input[type="password"],
.shop select,
.shop textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--line-strong);
	background: var(--white);
	font-size: 15px;
}

.shop .form-row.form-row-first,
.shop .form-row.form-row-last {
	display: inline-flex;
	width: calc(50% - 8px);
	vertical-align: top;
}

.shop .form-row.form-row-first {
	margin-right: 12px;
}

.shop .woocommerce-form__label-for-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 9px;
	font-weight: 400;
}

.shop .woocommerce-form__label-for-checkbox input {
	min-height: 0;
	width: auto;
}

.shop .lost_password {
	margin-top: 14px;
	font-size: 14px;
}

.shop .woocommerce-error,
.shop .woocommerce-info,
.shop .woocommerce-message {
	margin-bottom: 26px;
	padding: 16px 20px;
	border-left: 3px solid var(--ink);
	background: var(--off);
	list-style: none;
	font-size: 15px;
}

.shop .woocommerce-error {
	border-left-color: var(--sale);
}

.shop .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 30px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.shop .woocommerce-MyAccount-navigation a {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.shop .woocommerce-MyAccount-navigation .is-active a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.shop table.shop_table {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
}

.shop table.shop_table th,
.shop table.shop_table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 15px;
}

.shop table.shop_table th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.shop .woocommerce-breadcrumb {
	margin-bottom: 18px;
	color: var(--muted);
	font-size: 14px;
}

.shop .woocommerce-result-count,
.shop .woocommerce-ordering {
	display: inline-block;
	margin-right: 18px;
	font-size: 14px;
	color: var(--muted);
}

/* -------------------------------------------------- 20. Shop archive --- */

/*
 * The catalogue is a two-column page: a product grid and, beside it, the
 * attribute filters. The toolbar above shares the same column template so the
 * "Filters" heading sits exactly over the column it opens and closes.
 */
.shop-archive {
	padding: 0 0 90px;
}

.shop-bar {
	position: sticky;
	top: calc(var(--header-h) + var(--admin-bar-height));
	z-index: 30;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.shop-bar__inner {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 456px) var(--shop-side);
	min-height: 78px;
}

/* ---- Breadcrumb ---- */

.shop-bar__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline: var(--gutter) 20px;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shop-bar__crumb:hover {
	color: var(--ink);
}

.shop-bar__sep {
	color: var(--line-strong);
}

/* The trail ends on a separator, as in the reference; the last one only shows
   when there is a category after "Home". */
.shop-bar__crumbs .shop-bar__sep:last-child {
	color: var(--muted);
}

/* ---- Sort menu ---- */

.shop-bar__sort {
	position: relative;
	border-inline: 1px solid var(--line);
}

.shop-sort__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	height: 100%;
	min-height: 78px;
	padding-inline: 30px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shop-sort__chevron {
	transition: transform 0.22s var(--ease);
}

.shop-sort__toggle[aria-expanded="true"] .shop-sort__chevron {
	transform: rotate(180deg);
}

.shop-sort__panel {
	position: absolute;
	top: 100%;
	left: -1px;
	right: -1px;
	z-index: 5;
	padding: 16px 0 22px;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 0;
	box-shadow: 0 18px 30px rgba(0, 0, 0, 0.07);
}

.shop-sort__panel[hidden] {
	display: none;
}

.shop-sort__option {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 9px 30px;
	color: var(--muted-light);
	font-size: 15px;
}

.shop-sort__option:hover,
.shop-sort__option:focus-visible {
	color: var(--ink);
}

.shop-sort__option.is-active {
	color: var(--ink);
	font-weight: 600;
}

/* ---- Filter column heading ---- */

.shop-bar__filters {
	display: flex;
	align-items: center;
	padding-inline: 26px 46px;
}

.shop-filters__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shop-filters__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.shop-filters__count,
.shop-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--black);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

.shop-filters__chevron {
	transition: transform 0.22s var(--ease);
}

.shop-filters__toggle[aria-expanded="false"] .shop-filters__chevron {
	transform: rotate(180deg);
}

/* ---- Two-column body ---- */

.shop-layout {
	display: grid;
	grid-template-columns: 1fr var(--shop-side);
	align-items: start;
}

.shop-layout__main {
	min-width: 0;
	padding-inline: var(--gutter) 0;
}

/* Closing the filters -- or having no attributes to filter on -- gives the grid
   the whole width back. */
.shop-archive--wide,
.shop-archive.is-filters-closed {
	--shop-side: 0px;
}

.shop-archive--wide .shop-layout__main,
.shop-archive.is-filters-closed .shop-layout__main {
	padding-inline: var(--gutter);
}

.shop-archive.is-filters-closed .shop-layout__side,
.shop-archive.is-filters-closed .shop-bar__filters .shop-filters__label {
	visibility: visible;
}

.shop-archive.is-filters-closed .shop-filters {
	display: none;
}

/* The heading cell keeps its width so the toolbar does not jump when the column
   underneath it closes. */
.shop-archive.is-filters-closed .shop-bar__inner {
	grid-template-columns: 1fr minmax(240px, 456px) clamp(300px, 24.8vw, 476px);
}

/* ---- Category shortcuts ---- */

.shop-chips {
	padding: 44px 0 6px;
}

.shop-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.shop-chip {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	font-size: 15px;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.shop-chip:hover {
	border-color: var(--ink);
}

.shop-chip.is-active {
	background: var(--black);
	border-color: var(--black);
	color: var(--white);
}

/* ---- Grid ---- */

.shop-grid {
	display: grid;
	grid-template-columns: repeat(var(--shop-columns, 4), minmax(0, 1fr));
	gap: 26px 24px;
	padding-top: 30px;
}

.shop-grid__item {
	display: flex;
	min-width: 0;
}

.shop-grid__item > .card {
	width: 100%;
}

.shop-empty {
	padding: 60px 0 20px;
	color: var(--ink-soft);
	font-size: 17px;
}

.shop-empty__reset {
	margin-bottom: 40px;
}

/* ---- Load more ---- */

.shop-more {
	display: flex;
	justify-content: center;
	padding: 64px 0 24px;
}

.shop-more__btn {
	gap: 12px;
	min-width: min(348px, 100%);
}

.shop-more__plus {
	font-size: 17px;
	line-height: 1;
}

.shop-more__btn.is-busy {
	pointer-events: none;
	opacity: 0.6;
}

/* ---- Filter column ---- */

.shop-filters {
	padding-inline: 26px 46px;
}

.shop-filters__clear {
	padding: 18px 0 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: right;
}

.shop-filters__clear a {
	color: var(--sale);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.shop-filter {
	border-bottom: 1px solid var(--line);
}

.shop-filter__title {
	font: inherit;
}

.shop-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	min-height: 78px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.shop-filter__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.shop-filter__chevron {
	flex: none;
	transition: transform 0.22s var(--ease);
}

.shop-filter__head[aria-expanded="true"] .shop-filter__chevron {
	transform: rotate(180deg);
}

.shop-filter__body {
	padding-bottom: 28px;
}

.shop-filter__body[hidden] {
	display: none;
}

.shop-filter__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.shop-filter__option.is-folded {
	display: none;
}

.shop-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 62px;
	padding: 14px 10px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.shop-tile--swatch {
	min-height: 108px;
}

.shop-tile:hover {
	border-color: var(--ink);
}

.shop-tile.is-active {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
	font-weight: 700;
}

.shop-tile__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--swatch, #d5d5d5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* Stands in for a colour term with no swatch set, and for "multicolour". */
.shop-tile__dot--multi {
	background: conic-gradient(#e2001a, #f2a71b, #0e6b45, #1b6cb5, #a99bc4, #e2001a);
}

.shop-filter__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--ink-soft);
	font-size: 14px;
}

.shop-filter__more:hover {
	color: var(--ink);
}

.shop-filter__more[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.shop-filter__more .icon {
	transition: transform 0.22s var(--ease);
}

/* The drawer's own head only exists below the desktop breakpoint. */
.shop-filters__head {
	display: none;
}

/* --------------------------------------------------- 21. Product page --- */

/*
 * Out-specifies the generic `.site-main:not(.home)` inner-page padding, which
 * would otherwise push the breadcrumb 56px down and leave a white strip between
 * the newsletter and the footer.
 */
.site-main.product-page {
	padding: 20px 0 0;
}

/*
 * Three tracks: the fixed-width summary, the gallery, and the thumbnail rail
 * hugging the viewport edge. The summary carries the page gutter itself so its
 * dividing rule can run to the very edge of the column.
 */
.product-layout {
	display: grid;
	grid-template-columns: 635px minmax(0, 1fr) 76px;
	align-items: start;
}

/* ---- Summary column ---- */

/* No right padding: the rules inside run flush to the dividing border, as in
   the reference design. */
.product-summary {
	padding: 22px 0 64px var(--gutter);
	border-right: 1px solid var(--line);
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.8;
}

.crumbs__item + .crumbs__item::before {
	content: "/";
	margin-right: 6px;
	color: var(--muted);
}

.crumbs__item--home a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.product-title {
	margin-top: 48px;
	font-size: clamp(30px, 2.6vw, 44px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

.product-subtitle {
	margin-top: 6px;
	font-size: clamp(20px, 1.6vw, 28px);
	font-weight: 400;
	line-height: 1.25;
}

/* Outlined, unlike the filled pill used on cards. */
.product-discount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 78px;
	height: 42px;
	margin-top: 32px;
	padding: 0 12px;
	border: 1.5px solid var(--sale);
	color: var(--sale);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.product-pricing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 30px;
}

.product-price {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.product-price del {
	color: var(--muted);
	font-size: 19px;
	text-decoration-thickness: 1px;
}

.product-price ins {
	color: var(--ink);
	font-size: clamp(24px, 2vw, 30px);
	font-weight: 700;
	text-decoration: none;
}

.product-stock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-stock__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #00a89b;
}

.product-stock.is-out {
	color: var(--muted);
}

.product-stock.is-out .product-stock__dot {
	background: var(--muted);
}

.product-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 34px;
	margin-top: 34px;
	padding: 19px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.product-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-soft);
	font-size: 15px;
}

.product-link span {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: var(--line-strong);
}

.product-link:hover {
	color: var(--ink);
}

.product-option {
	margin-top: 28px;
}

.product-option__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.product-option__value {
	margin-left: 8px;
	color: var(--muted);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}

.sizes__item {
	min-width: 62px;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	background: var(--white);
	font-size: 15px;
	letter-spacing: 0.02em;
	transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.sizes__item:hover:not(.is-unavailable) {
	border-color: var(--ink);
}

.sizes__item.is-selected {
	border-color: var(--ink);
	border-width: 1.5px;
	font-weight: 600;
}

.sizes__item.is-unavailable {
	border-color: #ededed;
	color: #c2c2c2;
	cursor: not-allowed;
}

.colours {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 18px;
}

.colours__item {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--swatch, #c9c9c9);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* Selection ring sits outside the dot so the colour stays true. */
.colours__item.is-selected::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
}

.colours__item.is-unavailable {
	cursor: not-allowed;
	opacity: 0.35;
}

.product-buy {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 40px;
}

.product-buy form.cart,
.product-buy .variations_form {
	flex: 0 1 406px;
	min-width: 0;
	margin: 0;
}

.product-buy .single_add_to_cart_button,
.site-main.shop .product-buy .single_add_to_cart_button {
	display: flex;
	width: 100%;
	min-height: 60px;
	margin: 0;
	padding: 0 24px;
	background: var(--black);
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.product-buy .single_add_to_cart_button:hover {
	background: #333;
}

.product-buy .single_add_to_cart_button.disabled,
.product-buy .single_add_to_cart_button:disabled {
	background: var(--line-strong);
	color: var(--white);
	cursor: not-allowed;
}

/* WooCommerce's own attribute selects. JS hides them once the swatch and size
   pickers above are wired to them; without JS they stay usable. */
.product-buy .variations {
	width: 100%;
	margin-bottom: 18px;
	border: 0;
}

.product-buy .variations th,
.product-buy .variations td {
	padding: 6px 0;
	text-align: left;
	border: 0;
}

.product-buy .variations.is-proxied,
.product-buy .woocommerce-variation-price {
	display: none;
}

.product-buy .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}

.product-unavailable {
	flex: 1;
	color: var(--muted);
	font-size: 15px;
}

.wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--ink);
	transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}

.wishlist:hover {
	transform: scale(1.08);
}

.wishlist[aria-pressed="true"] {
	color: var(--sale);
}

/* ---- Gallery ---- */

.product-gallery {
	padding: 0 6px 0 25px;
}

.product-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px;
}

.product-shot {
	position: relative;
	margin: 0;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	background: #fafafa;
	border: 1px solid #efefef;
	scroll-margin-top: calc(var(--header-h) + var(--admin-bar-height) + 20px);
}

.product-shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Stands in for the product shot while no photography is attached. */
.product-shot:not(:has(img))::after {
	content: "";
	position: absolute;
	inset: 14% 20%;
	border-radius: 16px;
	background: var(--accent, #9aa4ab);
	opacity: 0.13;
}

/*
 * The track has to span the full row for the rail to have anywhere to travel:
 * the grid sets align-items:start so the summary's divider stops at its own
 * content, so this column opts back into stretching.
 */
.product-rail {
	align-self: stretch;
	padding-right: 12px;
}

.product-rail__list {
	position: sticky;
	top: calc(var(--header-h) + var(--admin-bar-height) + 20px);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.product-rail__item {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 5 / 8;
	overflow: hidden;
	background: #fafafa;
	border: 1px solid #efefef;
	transition: border-color 0.18s var(--ease);
}

.product-rail__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-rail__item:not(:has(img))::after {
	content: "";
	position: absolute;
	inset: 16% 24%;
	border-radius: 4px;
	background: var(--accent, #9aa4ab);
	opacity: 0.16;
}

.product-rail__item:hover,
.product-rail__item.is-active {
	border-color: var(--ink);
}

/* ---- Description and panels ---- */

.section--product-info {
	padding-top: 72px;
}

.product-info {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	gap: 75px;
	align-items: start;
}

.prose {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.75;
}

.prose > * + * {
	margin-top: 16px;
}

.prose a {
	color: var(--link);
	text-decoration: underline;
}

.accordion__item {
	border-bottom: 1px solid var(--line);
}

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	min-height: 68px;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
}

.accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.accordion__chevron {
	flex: none;
	color: var(--ink-soft);
	transition: transform 0.25s var(--ease);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
	transform: rotate(180deg);
}

.accordion__panel[hidden] {
	display: none;
}

.accordion__body {
	padding: 4px 0 30px;
}

.spec {
	margin: 0;
}

.spec__row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.spec__row:last-child {
	border-bottom: 0;
}

.spec__key {
	color: var(--muted);
	font-size: 15px;
}

.spec__value {
	margin: 0;
	font-size: 15px;
}

.section--related {
	padding-top: 72px;
}

/* ----------------------------------------------------- 21. Responsive --- */

@media (max-width: 1440px) {
	.nav__list {
		gap: 20px;
	}

	.nav__list > li > a {
		font-size: 13px;
	}

	.carousel__track--products > .carousel__item {
		width: 350px;
	}

	.carousel__track--tiles > .carousel__item {
		width: 420px;
	}

	.hero__slide {
		padding: 32px 18px 18px;
	}

	.mega__inner {
		padding-block: 34px 44px;
	}

	.mega__link {
		padding: 11px 0;
		font-size: 13px;
	}

	.product-layout {
		grid-template-columns: 520px minmax(0, 1fr) 72px;
	}

	.product-info {
		grid-template-columns: 440px minmax(0, 1fr);
		gap: 56px;
	}

	.shop-bar__inner {
		grid-template-columns: 1fr minmax(220px, 380px) var(--shop-side);
	}

	.shop-grid {
		gap: 24px 18px;
	}
}

@media (max-width: 1200px) {
	.header__bottom-inner {
		grid-template-columns: auto 1fr auto;
	}

	.header__search {
		max-width: 170px;
	}

	.nav__list {
		gap: 14px;
	}

	/* Too narrow for five tracks: the artwork tile goes, the products stay. */
	.mega__promo {
		display: none;
	}

	.mega__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr);
	}

	.mega--features .mega__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 2.2fr);
	}

	.hero__grid {
		grid-template-columns: 2.4fr 1fr;
		gap: 26px;
	}

	.split {
		min-height: 420px;
	}

	.product-layout {
		grid-template-columns: 440px minmax(0, 1fr) 68px;
	}

	.product-summary {
		padding-right: 28px;
	}

	.product-gallery {
		padding-left: 18px;
	}

	.product-gallery__grid {
		gap: 20px;
	}

	.product-info {
		grid-template-columns: 360px minmax(0, 1fr);
		gap: 44px;
	}

	.spec__row {
		grid-template-columns: 170px minmax(0, 1fr);
	}

	.shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shop-filter__head,
	.shop-sort__toggle,
	.shop-bar__inner {
		min-height: 66px;
	}
}

@media (max-width: 1024px) {
	.promo-bar__item {
		font-size: 11px;
		letter-spacing: 0.06em;
		gap: 9px;
	}

	.promo-bar__item .icon {
		width: 17px;
		height: 17px;
	}

	.header__bottom {
		display: none;
	}

	.header__action--search {
		display: inline-flex;
	}

	/* Absolute centring can collide with the icon row on narrow screens, so
	   the three groups become grid tracks that cannot overlap. */
	.header__top-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		min-height: 70px;
	}

	.header__burger {
		position: static;
		display: inline-flex;
	}

	.header__logo {
		grid-column: 2;
		justify-self: center;
	}

	.wordmark {
		font-size: 30px;
	}

	.header__actions {
		position: static;
		grid-column: 3;
		gap: 18px;
	}

	.header__mobile-search:not([hidden]) {
		display: block;
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.hero__main {
		aspect-ratio: 16 / 10;
	}

	.hero__side {
		min-height: 420px;
	}

	.split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.split__copy {
		gap: 26px;
		padding: 48px var(--gutter);
	}

	.split__media {
		aspect-ratio: 16 / 9;
		padding: 26px;
	}

	.usp {
		grid-template-columns: 1fr;
	}

	.usp__item {
		gap: 28px;
		padding: 38px var(--gutter);
	}

	.usp__item:nth-child(odd) {
		border-right: 0;
	}

	.usp__icon svg {
		width: 44px;
		height: 44px;
	}

	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 44px 30px;
	}

	.shop ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The nav row is hidden at this width, so the sticky offset shrinks. */
	:root {
		--header-h: 71px;
	}

	/* Artwork first, then the buying column; the rail has no room left. */
	.product-layout {
		display: block;
	}

	.product-summary {
		padding: 30px var(--gutter) 54px;
		border-right: 0;
	}

	.product-gallery {
		padding: 0;
	}

	.product-gallery__grid {
		display: flex;
		gap: 12px;
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--gutter);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.product-gallery__grid::-webkit-scrollbar {
		display: none;
	}

	.product-shot {
		flex: none;
		width: min(78%, 460px);
		scroll-snap-align: start;
	}

	.product-rail {
		display: none;
	}

	.product-info {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.section--product-info,
	.section--related {
		padding-top: 48px;
	}

	/* The filter column becomes a drawer, so the toolbar drops to two rows: the
	   trail on top, the two controls beneath it. */
	.shop-bar__inner {
		grid-template-columns: 1fr auto;
		min-height: 0;
	}

	.shop-bar__crumbs {
		grid-column: 1 / -1;
		padding: 13px var(--gutter);
		border-bottom: 1px solid var(--line);
	}

	.shop-bar__sort {
		border-inline: 0;
	}

	.shop-sort__toggle {
		min-height: 58px;
		padding-inline: var(--gutter) 20px;
	}

	.shop-sort__panel {
		left: 0;
		right: auto;
		width: min(340px, 92vw);
		border-inline: 1px solid var(--line);
	}

	.shop-bar__filters {
		padding-inline: 20px var(--gutter);
	}

	.shop-filters__toggle {
		gap: 10px;
	}

	.shop-filters__toggle[aria-expanded="false"] .shop-filters__chevron,
	.shop-filters__toggle[aria-expanded="true"] .shop-filters__chevron {
		transform: none;
	}

	.shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.shop-layout__main,
	.shop-archive.is-filters-closed .shop-layout__main {
		padding-inline: var(--gutter);
	}

	.shop-layout__side {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		width: min(430px, 92vw);
		background: var(--white);
		box-shadow: -10px 0 36px rgba(0, 0, 0, 0.14);
		transform: translateX(101%);
		transition: transform 0.3s var(--ease);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.shop-archive.is-filters-open .shop-layout__side {
		transform: none;
	}

	/* The desktop collapse has no meaning once the column is a drawer. */
	.shop-archive.is-filters-closed .shop-filters {
		display: block;
	}

	.shop-filters {
		padding-inline: var(--gutter);
	}

	.shop-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 71px;
		border-bottom: 1px solid var(--line);
	}

	.shop-filters__head-title {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-chips {
		padding-top: 30px;
	}
}

@media (max-width: 767px) {
	.promo-bar__inner {
		justify-content: flex-start;
		gap: 34px;
		overflow-x: auto;
		scrollbar-width: none;
		min-height: 44px;
	}

	.promo-bar__inner::-webkit-scrollbar {
		display: none;
	}

	.contact-bar__text {
		min-height: 52px;
		font-size: 14px;
	}

	.wordmark {
		font-size: 26px;
	}

	.header__actions {
		gap: 15px;
	}

	/* Too narrow to hang off the icon: the panel spans the gutters instead. */
	.cart-menu {
		left: var(--gutter);
	}

	.mini-cart {
		width: auto;
		padding: 16px 18px 20px;
	}

	.mini-cart__item {
		grid-template-columns: 46px minmax(0, 1fr) auto;
		gap: 0 14px;
	}

	.hero {
		padding-top: 20px;
	}

	.hero__main {
		aspect-ratio: 4 / 5;
	}

	.hero__panel {
		width: 88%;
		height: 72%;
	}

	.hero__side {
		min-height: 360px;
	}

	.section {
		padding-top: 40px;
	}

	.section--usp {
		padding-top: 34px;
	}

	.carousel__track--products {
		gap: 14px;
	}

	.carousel__track--products > .carousel__item {
		width: 72vw;
	}

	.carousel__track--tiles {
		gap: 18px;
	}

	.carousel__track--tiles > .carousel__item {
		width: 82vw;
	}

	.carousel__nav {
		display: none;
	}

	.carousel__progress {
		width: calc(100% - (var(--gutter) * 2));
		margin-top: 28px;
	}

	.card__cta {
		opacity: 1;
	}

	.material {
		width: calc(100% - (var(--gutter) * 2));
		aspect-ratio: 3 / 4;
	}

	.material .brackets {
		inset: 24px;
	}

	.newsletter {
		padding: 52px var(--gutter) 64px;
	}

	.footer {
		padding: 44px 0 54px;
	}

	.footer__grid {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.legal__badges {
		gap: 28px;
		margin-top: 38px;
	}

	.shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 16px;
	}

	.product-summary {
		padding-bottom: 40px;
	}

	.product-title {
		margin-top: 28px;
	}

	.product-shot {
		width: 84%;
	}

	.product-buy {
		gap: 18px;
		margin-top: 30px;
	}

	.product-links {
		gap: 20px 24px;
	}

	.spec__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.shop-grid {
		gap: 18px 12px;
		padding-top: 22px;
	}

	.shop-chip {
		min-height: 44px;
		padding: 0 18px;
		font-size: 14px;
	}

	.shop-more {
		padding-top: 44px;
	}

	.shop-more__btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.wordmark {
		font-size: 23px;
	}

	/* The store locator stays reachable from the off-canvas menu. */
	.header__action--stores {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.carousel__viewport {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}