/*
 * BRONTE — storefront styles.
 *
 * Order: fonts, tokens, base, primitives, then one block per page region in
 * the order the homepage renders them, then shop/content pages, then the
 * responsive and reduced-motion overrides.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Inter — the site's font throughout, replacing Anton (display) and Archivo
 * (body). Pleasuresnow.com's own type is a licensed "Helvetica Neue" family
 * (self-named "helvetica_neuelight"/"helvetica_neuethin" in its stylesheet),
 * which isn't freely redistributable, so this isn't that font — it's Inter,
 * a free variable grotesque built specifically to read as a modern
 * Helvetica alternative, with real thin/light weights to match that same
 * quiet, minimal feel rather than Anton's heavy poster look.
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens -- */

:root {
	--ink: #0b0b0c;
	--ink-80: rgba(11, 11, 12, 0.8);
	--ink-60: rgba(11, 11, 12, 0.6);
	--ink-40: rgba(11, 11, 12, 0.4);
	--ink-12: rgba(11, 11, 12, 0.12);
	--ink-06: rgba(11, 11, 12, 0.06);

	--paper: #f2f0eb;
	--paper-pure: #fbfaf8;
	--paper-70: rgba(242, 240, 235, 0.7);
	--paper-45: rgba(242, 240, 235, 0.45);
	--paper-25: rgba(242, 240, 235, 0.25);
	--paper-12: rgba(242, 240, 235, 0.12);

	--bronze: #b8763a;
	--bronze-dark: #8c5526;
	--hot: #d8351f;

	--wrap: 1520px;
	--wrap-narrow: 860px;
	--gutter: clamp(1rem, 4vw, 3rem);
	--header-h: 68px;

	--radius: 2px;
	--line: 1px solid var(--ink-12);

	/* Helvetica Neue, as on pleasuresnow.com. It's licensed, so it can't be
	   self-hosted: Apple devices get the real font, everyone else falls back
	   to Helvetica/Arial, its closest metric match. */
	--display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

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

/* ----------------------------------------------------------------- base -- */

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 200;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.brt-locked {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

/*
 * Tuned for Inter, not Anton — Anton only has one weight/shape no matter
 * what font-weight said, so 0.92 line-height and negative tracking worked
 * for its unusually tall, condensed letterforms. Inter is a normal-
 * proportioned grotesque; that line-height clipped ascenders/descenders and
 * negative tracking just looked cramped. Weight now does the hierarchy
 * pleasuresnow.com uses — h1 sits at their "medium" + bold tier, h2-h4 at
 * their lighter tier — since both now come from one variable font instead
 * of separate named font files per weight.
 */
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

h1 {
	font-weight: 600;
}

p {
	margin: 0 0 1em;
}

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

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

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

.brt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--paper);
}

.brt-skip:focus {
	left: 0;
}

.brt-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.brt-wrap--narrow {
	max-width: var(--wrap-narrow);
}

.brt-icon {
	display: block;
	flex: none;
}

/* ----------------------------------------------------------- primitives -- */

.brt-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bronze);
}

.brt-eyebrow--light {
	color: var(--paper);
	opacity: 0.85;
}

.brt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0 2rem;
	border: 1px solid var(--paper);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}

.brt-btn:hover {
	background: var(--bronze);
	border-color: var(--bronze);
	color: var(--paper-pure);
}

.brt-btn:active {
	transform: translateY(1px);
}

.brt-btn--light {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.brt-btn--light:hover {
	background: var(--bronze);
	border-color: var(--bronze);
	color: var(--paper-pure);
}

.brt-btn--ghost {
	background: transparent;
	border-color: var(--paper-45);
	color: var(--paper);
}

.brt-btn--ghost:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.brt-btn--dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.brt-btn--outline {
	background: transparent;
	border-color: var(--paper);
	color: var(--paper);
	min-height: 48px;
	font-size: 0.75rem;
}

.brt-btn--outline:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.brt-btn--sm {
	min-height: 42px;
	padding: 0 1.25rem;
	font-size: 0.75rem;
}

.brt-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--paper-45);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: gap 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.brt-textlink:hover {
	gap: 0.85rem;
	color: var(--bronze);
	border-color: var(--bronze);
}

.brt-wordmark {
	display: inline-block;
	font-family: var(--display);
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.brt-wordmark--footer {
	font-size: 2.5rem;
}

/* BRONTE's own logo file. It is white artwork on a transparent ground, so it
   is only ever placed on the dark shell; sized by height so the header does
   not depend on the file's pixel width. aspect-ratio is set explicitly
   rather than left to the browser to infer from the width/height attributes
   — a mismatch there is what previously let this render far too wide. */
.brt-wordmark__img {
	display: block !important;
	aspect-ratio: 1865 / 257 !important;
	width: auto !important;
	height: 15px !important;
	max-width: 130px !important;
}

.brt-wordmark--footer .brt-wordmark__img {
	height: 26px !important;
	max-width: 220px !important;
}

/* ----------------------------------------------------------- demo notice -- */

/* Same notice as the sister demo builds: a quiet strip above everything,
   set apart from the ticker by the bronze tag and a hairline. */
.brt-demo {
	position: relative;
	z-index: 61;
	background: var(--ink);
	color: var(--paper-70);
	border-bottom: 1px solid var(--paper-12);
	font-size: 12px;
	text-align: center;
}

.brt-demo__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.75rem;
	padding: 0.5rem var(--gutter);
}

.brt-demo__tag {
	padding: 2px 8px;
	background: var(--bronze);
	color: var(--paper-pure);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- ticker -- */

.brt-ticker {
	position: relative;
	z-index: 60;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid rgba(242, 240, 235, 0.14);
}

.brt-ticker__track {
	display: flex;
	width: max-content;
	animation: brt-marquee 36s linear infinite;
}

.brt-ticker__list {
	display: flex;
	align-items: center;
}

.brt-ticker__list li {
	display: flex;
	align-items: center;
	padding: 0.7rem 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The bullet is the separator, so it must not lead the first item — it is
   drawn after each item instead, which also keeps the loop seam even. */
.brt-ticker__list li::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 2.5rem;
	border-radius: 50%;
	background: var(--bronze);
}

.brt-ticker:hover .brt-ticker__track {
	animation-play-state: paused;
}

@keyframes brt-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------- header -- */

.brt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid var(--paper-12);
	transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.brt-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
	min-height: var(--header-h);
}

/* On the homepage the masthead sits over the hero: it is pulled out of flow
   with a negative margin rather than positioned absolutely, so it keeps its
   sticky behaviour on scroll. The hero pads itself by the same height. */
.home .brt-header {
	margin-bottom: calc(-1 * var(--header-h));
	background: transparent;
	border-bottom-color: transparent;
	color: var(--paper);
}

.home .brt-header.is-stuck {
	background: var(--ink);
	border-bottom-color: var(--paper-12);
	color: var(--paper);
}

.brt-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.brt-nav--right {
	justify-content: flex-end;
	gap: 0.5rem;
}

.brt-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.brt-nav__list--actions {
	gap: 1.5rem;
}

.brt-nav__list a,
.brt-navtext {
	position: relative;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* .brt-navtext doubles as a plain-text nav action (search toggle, account,
   cart) so it has to reset the button styling browsers apply by default. */
.brt-navtext {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
}

.brt-nav__list a::after,
.brt-navtext::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	transition: right 0.3s var(--ease);
}

.brt-nav__list a:hover::after,
.brt-nav__list .current-menu-item > a::after,
.brt-navtext:hover::after {
	right: 0;
}

.brt-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.brt-iconbtn:hover {
	color: var(--bronze);
}

.brt-iconbtn--menu,
.brt-iconbtn--bag {
	display: none;
}

.brt-iconbtn--bag {
	color: inherit;
}

.brt-bagcount {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--bronze);
	color: var(--paper-pure);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* The cart action is plain text now, not an icon, so its count sits inline
   after the word instead of badged over an icon corner. */
.brt-bagcount--inline {
	position: static;
	display: inline-flex;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
}

.brt-bagcount[data-count='0'] {
	display: none;
}

/* --------------------------------------------------------------- search -- */

.brt-search {
	border-top: 1px solid var(--paper-12);
	background: var(--ink);
	color: var(--paper);
}

.brt-search__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 1.25rem var(--gutter);
}

.brt-search__form {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex: 1;
}

.brt-search__field {
	flex: 1;
	min-width: 0;
	padding: 0.65rem 0;
	border: 0;
	border-bottom: 1px solid var(--ink-12);
	background: none;
	font-family: var(--display);
	font-size: clamp(1.25rem, 3vw, 2rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--paper);
}

.brt-search__field:focus {
	outline: none;
	border-bottom-color: var(--bronze);
}

.brt-search__field::placeholder {
	color: var(--ink-40);
}

/* Same form, sat inline in the shop drawer instead of the full-width
   overlay bar — the overlay's display-sized field would overrun a 420px
   panel. `.brt-search__form`'s `flex: 1` means "fill the width" in the
   overlay's row layout, but this drawer's panel is a flex *column* — there,
   `flex: 1` instead grows the form to fill nearly the whole column height,
   which is the huge empty gap above "Dyqani" this cancels back out. */
.brt-search__form--drawer {
	flex: 0 1 auto;
	margin-bottom: 1.5rem;
}

.brt-search__form--drawer .brt-search__field {
	border-bottom-color: var(--paper-45);
	color: var(--paper);
	font-size: 1rem;
	text-transform: none;
}

/* The drawers are dark; the base field's ink-coloured line and placeholder
   were invisible on them. */
.brt-search__form--drawer .brt-search__field::placeholder {
	color: var(--paper-45);
}

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

.brt-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
}

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

/* Logged in, WordPress's admin bar sits on top and would hide the drawer's
   first row (the close button). Visitors never see this. */
body.admin-bar .brt-drawer {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .brt-drawer {
		top: 46px;
	}
}

/* Below 600px the admin bar stops being fixed and scrolls away with the
   page, so an offset left a strip of page showing above the drawer. The
   drawer covers the whole screen there instead, admin bar included. */
@media (max-width: 600px) {
	body.admin-bar .brt-drawer {
		top: 0;
		z-index: 100000;
	}
}

.brt-drawer__scrim {
	order: 2;
	flex: 1;
	border: 0;
	background: rgba(11, 11, 12, 0.55);
	cursor: pointer;
	animation: brt-fade 0.3s var(--ease);
}

.brt-drawer__panel {
	order: 1;
	display: flex;
	flex-direction: column;
	width: min(420px, 86vw);
	padding: 1.5rem var(--gutter) 2rem;
	background: var(--ink);
	/* Its own text colour, not the page's: the shop, product, cart and story
	   pages set dark body text, which made the menu black on black there. */
	color: var(--paper);
	overflow-y: auto;
	animation: brt-slide 0.35s var(--ease);
}

.brt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.5rem;
	border-bottom: var(--line);
}

.brt-drawer__head .brt-eyebrow {
	margin: 0;
}

.brt-drawer__list {
	padding: 1.5rem 0;
}

.brt-drawer__list > li > a {
	display: block;
	padding: 0.6rem 0;
	font-family: var(--display);
	font-size: 2rem;
	text-transform: uppercase;
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Mouse only: on a phone a tap leaves :hover stuck on, so the tapped link
   stayed bronze and shifted right, which read as a glitch. */
@media (hover: hover) {
	.brt-drawer__list > li > a:hover {
		color: var(--bronze);
		transform: translateX(6px);
	}
}

.brt-drawer__list .sub-menu a {
	display: block;
	padding: 0.25rem 0;
	font-size: 0.875rem;
	color: var(--ink-60);
}

.brt-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: var(--line);
}

.brt-drawer__account {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The categories under "Dyqani" in the phone menu: small, quiet links,
   so the two big items still read as the menu. */
.brt-drawer__cats {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.brt-drawer__cats a {
	display: block;
	padding: 0.45rem 0;
	color: var(--paper-70);
	font-size: 15px;
	letter-spacing: 0.02em;
}

.brt-drawer__cats-all a {
	color: var(--paper);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

@media (hover: hover) {
	.brt-drawer__cats a:hover,
	.brt-drawer__account:hover {
		color: var(--bronze);
	}
}

@keyframes brt-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes brt-slide {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

/* ------------------------------------------------------------ shop drawer -- */

.brt-drawer__panel--shop .brt-drawer__head {
	justify-content: flex-start;
	gap: 1.25rem;
}

.brt-drawer__mark {
	flex: 1;
	text-align: center;
}

.brt-drawer__label {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper-70);
}

.brt-facet__cats--drawer {
	padding-bottom: 1.5rem;
	border-bottom: var(--line);
}

.brt-drawer__shopall {
	display: block;
	padding-top: 1.5rem;
	font-family: var(--display);
	font-size: 1.5rem;
	text-transform: uppercase;
	transition: color 0.2s var(--ease);
}

.brt-drawer__shopall:hover {
	color: var(--bronze);
}

/* --------------------------------------------------------- category chips -- */

.brt-catchips {
	margin: -0.5rem 0 2rem;
	border-bottom: 1px solid var(--paper-12);
}

.brt-catchips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
	margin: 0;
	padding: 0.75rem 0;
	list-style: none;
	overflow-x: auto;
}

.brt-catchips__list a {
	position: relative;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--paper-45);
	transition: color 0.2s var(--ease);
}

.brt-catchips__list a:hover,
.brt-catchips__list a.is-active {
	color: var(--paper);
}

.brt-catchips__list a.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.85rem;
	height: 2px;
	background: var(--bronze);
}

.brt-catchips__all {
	font-weight: 700;
}

/* The nav drawer opens from the left; the filter drawer opens from the
   right, so its scrim sits first in source order and its panel slides in
   from the opposite edge. */
.brt-drawer--filters .brt-drawer__scrim {
	order: 1;
}

.brt-drawer--filters .brt-drawer__panel {
	order: 2;
	animation-name: brt-slide-right;
	background: var(--paper-pure);
	color: var(--ink);
}

/* Everything below had a colour hardcoded for the dark shell the nav and
   shop drawers still use — this drawer reads light now, to match the shop
   archive it opens from. */
.brt-drawer--filters .brt-facet__title,
.brt-drawer--filters .brt-swatch__label {
	color: var(--ink-60);
}

.brt-drawer--filters .brt-facet__cats a {
	color: var(--ink-60);
}

.brt-drawer--filters .brt-swatch__dot {
	border-color: var(--ink-12);
}

.brt-drawer--filters .brt-textlink {
	border-bottom-color: var(--ink-40);
}

.brt-drawer--filters .brt-btn--light {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

@keyframes brt-slide-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* ------------------------------------------------------------ mini cart -- */

/* Slides in from the right like the filter drawer, light like the shop
   pages. */
.brt-drawer--cart .brt-drawer__scrim {
	order: 1;
}

.brt-drawer--cart .brt-drawer__panel {
	order: 2;
	width: min(440px, 92vw);
	padding-bottom: 0;
	background: var(--paper-pure);
	color: var(--ink);
	animation-name: brt-slide-right;
}

.brt-drawer--cart .brt-drawer__head {
	border-bottom-color: var(--ink-12);
}

.brt-drawer--cart .brt-eyebrow {
	color: var(--ink);
}

.brt-drawer--cart .widget_shopping_cart_content {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.brt-minicart__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.brt-minicart__item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: start;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ink-12);
}

.brt-minicart__media img {
	display: block;
	width: 80px;
	height: 100px;
	object-fit: cover;
	background: #f0f0f0;
}

.brt-minicart__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
}

.brt-minicart__name {
	color: var(--ink);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.brt-minicart__name:hover {
	opacity: 0.6;
}

.brt-minicart__body dl.variation {
	margin: 0;
	color: var(--ink-60);
}

.brt-minicart__qty {
	color: var(--ink-60);
}

.brt-minicart__remove {
	align-self: flex-start;
	margin-top: 0.35rem;
	color: var(--ink-60);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: uppercase;
}

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

.brt-minicart__subtotal {
	font-size: 12px;
	white-space: nowrap;
}

/* Subtotal and buttons stay pinned to the bottom of the drawer however
   long the list gets — the panel scrolls, the foot sticks. */
.brt-minicart__foot {
	position: sticky;
	bottom: 0;
	margin-top: auto;
	padding: 1.25rem 0 1.5rem;
	border-top: 1px solid var(--ink-12);
	background: var(--paper-pure);
}

.brt-minicart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.brt-minicart__total strong {
	font-weight: 500;
}

.brt-minicart__note {
	margin: 0.35rem 0 1.25rem;
	color: var(--ink-60);
	font-size: 12px;
}

.brt-minicart__buttons {
	display: grid;
	gap: 0.6rem;
	margin: 0;
}

/* !important only to get past the single-product page's own
   `body.single-product .button` overrides, which are !important too. */
.brt-drawer--cart .brt-minicart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 0 1.5rem;
	border: 1px solid var(--ink) !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--ink) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.brt-drawer--cart .brt-minicart__buttons .button.checkout {
	background: var(--ink) !important;
	color: var(--paper-pure) !important;
}

.brt-drawer--cart .brt-minicart__buttons .button:hover {
	background: var(--ink) !important;
	color: var(--paper-pure) !important;
}

.brt-drawer--cart .brt-minicart__buttons .button.checkout:hover {
	opacity: 0.85;
}

.brt-minicart__empty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 3rem 0;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.brt-minicart__empty p {
	margin: 0;
	color: var(--ink-60);
}

.brt-minicart__shop {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* WooCommerce dims the list while an AJAX remove is running. */
.brt-drawer--cart .blockUI.blockOverlay {
	background: var(--paper-pure) !important;
}

/* Scrolling the item list never drags the page behind it along (iOS). */
.brt-drawer--cart .brt-drawer__panel {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Phones: the drawer takes the whole screen, sized to the visible area so
   Safari's toolbar never covers the checkout button, with room left for
   the iPhone home bar under the buttons. */
@media (max-width: 640px) {
	.brt-drawer--cart .brt-drawer__scrim {
		display: none;
	}

	/* No fixed height: the panel stretches to the drawer, which is pinned to
	   all four edges of the visible screen. A 100dvh height overflowed it
	   whenever the drawer started lower (the admin bar offset), pushing the
	   buttons off the bottom. */
	.brt-drawer--cart .brt-drawer__panel {
		flex: 1 0 100%;
		width: 100%;
		padding-top: 1rem;
	}

	.brt-drawer--cart .brt-drawer__head {
		padding-bottom: 1rem;
	}

	.brt-minicart__item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		gap: 0.85rem;
		padding: 1rem 0;
	}

	.brt-minicart__media img {
		width: 64px;
		height: 80px;
	}

	/* A finger-sized target for "Hiq" without making it look bigger. */
	.brt-minicart__remove {
		margin: 0 -0.5rem -0.5rem;
		padding: 0.5rem;
	}

	.brt-minicart__foot {
		padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.brt-minicart__buttons {
		grid-template-columns: 1fr 1fr;
	}

	.brt-drawer--cart .brt-minicart__buttons .button {
		min-height: 50px;
		padding: 0 0.75rem;
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}

/* The product form while its add to cart is on its way. */
form.cart.is-loading .single_add_to_cart_button {
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------------- facets -- */

.brt-facetform {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.brt-facet {
	padding: 1.5rem 0;
	border-bottom: var(--line);
}

.brt-facet__title {
	margin: 0 0 1rem;
	font-family: var(--body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper-70);
}

.brt-facet__cats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.brt-facet__cats a {
	display: block;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	color: var(--paper-70);
	transition: color 0.2s var(--ease);
}

.brt-facet__cats a:hover,
.brt-facet__cats a.is-active {
	color: var(--bronze);
}

.brt-facet__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brt-swatch {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.65rem 0.35rem 0.35rem;
	border: 1px solid var(--paper-12);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s var(--ease);
}

.brt-swatch:has(input:checked) {
	border-color: var(--bronze);
}

.brt-swatch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.brt-swatch__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--swatch);
	border: 1px solid var(--paper-25);
	flex-shrink: 0;
}

.brt-swatch__label {
	font-size: 0.8125rem;
	color: var(--paper-70);
}

.brt-facetform__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

/* ----------------------------------------------------------------- hero -- */

.brt-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(600px, 96vh, 1040px);
	padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
}

.brt-hero__media {
	position: absolute;
	inset: 0;
	background-color: #14141a;
	background-size: cover;
	background-position: center;
	/* A slow, small zoom keeps a still frame from reading as a flat colour
	   block; it is disabled under prefers-reduced-motion below. */
	animation: brt-kenburns 24s ease-out both;
}

.brt-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Two scrims, not one. The hero carries whatever photograph the client
	   supplies, and a bright studio frame leaves white nav links and a white
	   caption invisible without them: the top band backs the masthead, the
	   bottom band backs the caption. */
	background:
		linear-gradient(to bottom, rgba(11, 11, 12, 0.62) 0%, rgba(11, 11, 12, 0.28) 9%, rgba(11, 11, 12, 0) 20%),
		linear-gradient(to top, rgba(11, 11, 12, 0.82) 0%, rgba(11, 11, 12, 0.35) 22%, rgba(11, 11, 12, 0) 48%);
}

/* The caption is set small and centred at the foot of the frame, so the
   picture carries the section and the words only name the drop. */
.brt-hero__caption {
	position: relative;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	text-align: center;
}

.brt-hero__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper);
}

.brt-hero__title {
	margin: 0 0 1.5rem;
	font-family: var(--body);
	font-size: clamp(0.75rem, 1.1vw, 0.875rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper-70);
}

@keyframes brt-kenburns {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

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

.brt-section {
	padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.brt-section--tight {
	padding-top: 0;
}

.brt-section__title {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	text-align: center;
}

.brt-section__more {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	text-align: center;
}

/* -------------------------------------------------------------- banners -- */

.brt-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* A full screen of photo under the sticky header. */
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
	background-color: #14141a;
	background-size: cover;
	background-position: center;
	color: var(--paper);
}

/* Only the foot of the frame is darkened — a full scrim would flatten the
   picture, which is the thing the section is actually selling. */
.brt-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 11, 12, 0.8) 0%, rgba(11, 11, 12, 0.3) 26%, rgba(11, 11, 12, 0) 52%);
}

.brt-banner__caption {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
}

.brt-banner__caption--center {
	text-align: center;
}

.brt-banner__title {
	margin: 0 0 0.4rem;
	font-family: var(--body);
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brt-banner__text {
	margin: 0 0 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--paper-70);
}

/* ---------------------------------------------------------------- split -- */

.brt-split {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* A full screen of photo under the sticky header, like the banners. */
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
	color: var(--paper);
}

/* Two frames butted together with no gap, so the pair reads as one spread. */
.brt-split__frames {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.brt-split__frame {
	background-color: #14141a;
	background-size: cover;
	background-position: center;
}

.brt-split__frames::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 11, 12, 0.8) 0%, rgba(11, 11, 12, 0.3) 26%, rgba(11, 11, 12, 0) 52%);
}

.brt-split__caption {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
}

.brt-split__caption--center {
	text-align: center;
}

.brt-split__title {
	margin: 0 0 0.35rem;
	font-family: var(--body);
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.brt-split__text {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--paper-70);
}

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

.brt-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 1.5vw, 1.5rem);
}

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

.brt-card {
	display: flex;
	flex-direction: column;
}

.brt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #ffffff;
}

.brt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
}

.brt-card__img--empty {
	display: block;
	background: repeating-linear-gradient(45deg, var(--ink-06), var(--ink-06) 10px, transparent 10px, transparent 20px);
}

.brt-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.brt-card__media:hover .brt-card__img--hover {
	opacity: 1;
}

.brt-card__media:hover .brt-card__img {
	transform: scale(1.04);
}

.brt-card.is-soldout .brt-card__img {
	opacity: 0.55;
}

.brt-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.6rem;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.brt-card.is-soldout .brt-badge {
	background: var(--paper);
	color: var(--ink);
}

.brt-card__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.85rem;
}

.brt-card__title {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 300;
	line-height: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.brt-card__title a:hover {
	color: var(--bronze);
}

.brt-card__price {
	margin: 0;
	font-size: 11px;
	font-weight: 300;
	line-height: 12px;
	letter-spacing: 0;
	white-space: nowrap;
}

.brt-card__price del {
	margin-right: 0.35rem;
	color: var(--paper-45);
	font-weight: 400;
}

.brt-card__price ins {
	text-decoration: none;
	color: #ff6a54;
}

/* ----------------------------------------------------------- categories -- */

.brt-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.brt-cat {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ink);
}

.brt-cat__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s var(--ease);
}

.brt-cat__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 11, 12, 0.8), rgba(11, 11, 12, 0) 55%);
}

.brt-cat:hover .brt-cat__media {
	transform: scale(1.05);
}

.brt-cat__label {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	color: var(--paper);
}

.brt-cat__title {
	font-family: var(--display);
	font-size: clamp(1.125rem, 1.8vw, 1.625rem);
	line-height: 1;
	text-transform: uppercase;
}

.brt-cat .brt-icon {
	transition: transform 0.3s var(--ease);
}

.brt-cat:hover .brt-icon {
	transform: translateX(5px);
}

/* ------------------------------------------------------------ editorial -- */

.brt-editorial {
	background: var(--ink);
	color: var(--paper);
}

.brt-editorial__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
	padding-top: clamp(3.5rem, 8vw, 7rem);
	padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.brt-editorial__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.brt-editorial__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brt-editorial__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 4.5vw, 3.75rem);
}

.brt-editorial__text {
	max-width: 52ch;
	margin-bottom: 2rem;
	color: var(--paper-70);
}

.brt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: 2.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(242, 240, 235, 0.16);
	border-bottom: 1px solid rgba(242, 240, 235, 0.16);
}

.brt-stat__value {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
	color: var(--bronze);
}

.brt-stat__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper-70);
}

.brt-editorial .brt-btn {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.brt-editorial .brt-btn:hover {
	background: var(--bronze);
	border-color: var(--bronze);
	color: var(--paper-pure);
}

/* ------------------------------------------------------------- the rail -- */

.brt-rail {
	display: grid;
	grid-auto-flow: column;
	/* Four across on desktop with the fifth just breaking the edge, so the
	   rail reads as scrollable without a control. The breakpoints below widen
	   the tiles as the screen narrows. */
	grid-auto-columns: minmax(23.5%, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	/* The gutter bleed lets a tile run to the screen edge while the first one
	   still lines up with the grid above it. */
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 1rem;
}

.brt-rail__item {
	scroll-snap-align: start;
}

.brt-rail::-webkit-scrollbar {
	height: 3px;
}

.brt-rail::-webkit-scrollbar-thumb {
	background: var(--ink-12);
}

/* ------------------------------------------------------------ look band -- */

.brt-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 56vh, 640px);
	padding: clamp(3rem, 8vw, 6rem) var(--gutter);
	background-color: var(--ink);
	background-size: cover;
	background-position: center;
	color: var(--paper);
	text-align: center;
}

.brt-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 12, 0.5);
}

.brt-band__inner {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.brt-band__title {
	margin: 0 0 1rem;
	font-size: clamp(2.25rem, 7vw, 5.5rem);
}

.brt-band__text {
	margin-bottom: 2rem;
	color: var(--paper-70);
}

/* ------------------------------------------------------------- services -- */

.brt-services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--paper-12);
	border: 1px solid var(--paper-12);
}

.brt-service {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ink);
}

.brt-service .brt-icon {
	margin-bottom: 1rem;
	color: var(--bronze);
}

.brt-service__title {
	margin: 0 0 0.4rem;
	font-family: var(--body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.brt-service__text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--paper-70);
}

/* --------------------------------------------------------------- social -- */

.brt-social {
	padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.brt-social__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(0.5rem, 1vw, 0.875rem);
}

.brt-social__tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--ink-06);
}

.brt-social__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s var(--ease);
}

.brt-social__tile:hover .brt-social__media {
	transform: scale(1.06);
}

.brt-social__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 11, 12, 0.45);
	color: var(--paper);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.brt-social__tile:hover .brt-social__icon {
	opacity: 1;
}

.brt-social__links {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.brt-social__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(242, 240, 235, 0.25);
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.brt-social__links a:hover {
	background: var(--bronze);
	border-color: var(--bronze);
	color: var(--paper-pure);
}

/* --------------------------------------------------------------- signup -- */

.brt-signup {
	background: var(--ink);
	color: var(--paper-pure);
	border-bottom: var(--line);
}

.brt-signup__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.brt-signup__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 4vw, 3rem);
}

.brt-signup__text p {
	margin: 0;
	max-width: 46ch;
	color: rgba(251, 250, 248, 0.85);
}

.brt-signup__form {
	display: flex;
	gap: 0.75rem;
}

.brt-signup__field {
	flex: 1;
	min-width: 0;
	padding: 0 1.25rem;
	min-height: 52px;
	border: 1px solid rgba(251, 250, 248, 0.5);
	border-radius: var(--radius);
	background: transparent;
	color: var(--paper-pure);
	font-family: inherit;
	font-size: 0.9375rem;
}

.brt-signup__field::placeholder {
	color: rgba(251, 250, 248, 0.6);
}

.brt-signup__field:focus {
	outline: none;
	border-color: var(--paper-pure);
}

/* --------------------------------------------------------------- footer -- */

.brt-footer {
	padding: clamp(3rem, 6vw, 5rem) 0 2rem;
	background: var(--ink);
	color: var(--paper);
}

.brt-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: clamp(2rem, 6vw, 5rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(242, 240, 235, 0.16);
}

.brt-footer__tagline {
	margin: 0.75rem 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bronze);
}

.brt-footer__address {
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.8;
	color: var(--paper-70);
}

.brt-footer__address a:hover {
	color: var(--paper);
}

.brt-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.brt-footer__heading {
	margin: 0 0 1.1rem;
	font-family: var(--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--paper);
}

.brt-footer__list li + li {
	margin-top: 0.6rem;
}

.brt-footer__list a {
	font-size: 0.875rem;
	color: var(--paper-70);
	transition: color 0.2s var(--ease);
}

.brt-footer__list a:hover {
	color: var(--paper);
}

.brt-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	font-size: 0.75rem;
	color: var(--paper-70);
}

.brt-footer__bottom p {
	margin: 0;
}

.brt-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.brt-footer__legal a {
	font-size: 0.75rem;
	transition: color 0.2s var(--ease);
}

.brt-footer__legal a:hover {
	color: var(--bronze);
}

.brt-footer__made {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ----------------------------------------------------- shop and content -- */

.brt-pagehead {
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.brt-pagehead__title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
}

.brt-pagehead__text {
	max-width: 60ch;
	margin-top: 1rem;
	color: var(--paper-70);
}

/* Title, category chips and the filter trigger share one thin bar instead
   of three stacked blocks — title left, chips fill the middle, filter/sort
   sits at the far right, all on the same line down to tablet width. */
.brt-shopheader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--paper-12);
}

.brt-shopheader__title {
	margin: 0;
	font-family: var(--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.brt-shopheader__right {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
	font-size: 0.8125rem;
}

.brt-shopheader__count,
.brt-shopheader__count p {
	margin: 0;
	color: var(--paper-70);
	white-space: nowrap;
}

.brt-shopheader__desc {
	max-width: 60ch;
	margin-bottom: 2rem;
	color: var(--paper-70);
}

/* The category-chip row is a flex child of the header bar here, not its own
   bordered block — brt_category_chips() is reused as-is on both this bar
   and anywhere else it might be dropped in later. */
.brt-shopheader .brt-catchips {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border: 0;
}

.brt-shopheader .brt-catchips__list {
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	justify-content: center;
}

.brt-shopheader .brt-catchips__list::-webkit-scrollbar {
	display: none;
}

/* ------------------------------------------------- light shop archive -- */

/*
 * The shop and category archives read light — white ground, ink text —
 * while the header, footer and filter drawer keep the dark shell; all three
 * already set their own background explicitly, so this body-level flip
 * does not touch them. Most child elements just inherit body's color and
 * fall into place; only the handful with a colour hardcoded for the dark
 * theme need an explicit override here.
 */
body.tax-product_cat,
body.tax-product_tag,
body.post-type-archive-product,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.page-id-169 {
	background: var(--paper-pure);
	color: var(--ink);
}

body.tax-product_cat .brt-shopheader,
body.tax-product_tag .brt-shopheader,
body.post-type-archive-product .brt-shopheader {
	border-bottom-color: var(--ink-12);
}

/* The shop/category header sat under the same generous top padding every
   .brt-section gets — plenty of room for a hero or a text block, but just
   dead space above a title-and-filter-chips row this compact. */
body.tax-product_cat .brt-section,
body.tax-product_tag .brt-section,
body.post-type-archive-product .brt-section {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

body.tax-product_cat .brt-catchips__list a,
body.tax-product_tag .brt-catchips__list a,
body.post-type-archive-product .brt-catchips__list a {
	color: var(--ink-40);
}

body.tax-product_cat .brt-catchips__list a:hover,
body.tax-product_cat .brt-catchips__list a.is-active,
body.tax-product_tag .brt-catchips__list a:hover,
body.tax-product_tag .brt-catchips__list a.is-active,
body.post-type-archive-product .brt-catchips__list a:hover,
body.post-type-archive-product .brt-catchips__list a.is-active {
	color: var(--ink);
}

body.tax-product_cat .brt-shopheader__desc,
body.tax-product_cat .brt-empty,
body.tax-product_tag .brt-shopheader__desc,
body.tax-product_tag .brt-empty,
body.post-type-archive-product .brt-shopheader__desc,
body.post-type-archive-product .brt-empty {
	color: var(--ink-60);
}

body.tax-product_cat .brt-card__price del,
body.tax-product_tag .brt-card__price del,
body.post-type-archive-product .brt-card__price del,
body.single-product .price del {
	color: var(--ink-40);
}

/* The gallery frame reads white too, matching the archive tiles it's the
   same photography as — WooCommerce prints no background of its own, so
   the transparent-looking areas of a photo would otherwise show whatever
   colour the page happens to have behind it. */
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .flex-viewport,
body.single-product .flex-control-thumbs li {
	background: #ffffff;
}

body.single-product .flex-control-thumbs li.flex-active {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

/* Pleasures-style layout: every photo stacked down the left — the first one
   full width, the rest two to a row — while the summary stays pinned on
   the right as the photos scroll past. */
body.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 0 clamp(2rem, 6vw, 8rem);
	align-items: start;
}

body.single-product div.product > * {
	grid-column: 1 / -1;
}

body.single-product div.product div.images,
body.single-product div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper {
	background: transparent;
}

body.single-product div.product div.images {
	grid-column: 1;
	grid-row: 1;
	opacity: 1 !important;
}

body.single-product div.product div.summary {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: calc(var(--header-h) + 2rem);
	max-width: 490px;
	padding-top: 4rem;
}

body.single-product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

/* :nth-child(n) matches WooCommerce's own :nth-child(n+2) 25%-width rule
   for specificity, so the extra photos aren't shrunk to thumbnails. */
body.single-product div.product div.images .woocommerce-product-gallery__image:nth-child(n) {
	display: block;
	width: auto;
	margin: 0 !important;
	padding: 0;
	background: #f0f0f0;
}

body.single-product .brt-product .related,
body.single-product .brt-product .upsells {
	margin-top: clamp(3rem, 8vw, 6rem);
}

body.single-product .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

body.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	body.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product div.product div.summary {
		grid-column: 1;
		grid-row: auto;
		position: static;
		max-width: none;
		padding-top: 2rem;
	}
}

/* Add to cart reads as an outlined box here — ink border and text on the
   white ground — rather than the solid ink-on-paper pill the dark shell
   uses elsewhere for the same button. */
body.single-product .button,
body.single-product button.button {
	border: 1px solid var(--ink) !important;
	background: var(--paper-pure) !important;
	color: var(--ink) !important;
}

body.single-product .button:hover,
body.single-product button.button:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

body.single-product .woocommerce-tabs,
body.single-product .woocommerce-Tabs-panel {
	border-color: var(--ink-12);
}

body.single-product table.shop_attributes {
	color: var(--ink);
}

body.single-product table.shop_attributes th {
	color: var(--ink-60);
}

body.single-product table.shop_attributes td,
body.single-product table.shop_attributes th {
	border-bottom: 1px solid var(--ink-12);
}

/* -------------------------------------------------------- product extras -- */

.brt-pdp-color {
	margin: 1.5rem 0 0;
}

.brt-pdp-color__label {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--ink-60);
}

.brt-pdp-color__label strong {
	color: var(--ink);
	font-weight: 700;
}

.brt-pdp-color__swatch {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ink-12);
	background: var(--swatch);
}

.brt-pdp-sizes {
	margin: 1.5rem 0 0;
}

.brt-pdp-sizes__label {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--ink-60);
}

.brt-pdp-sizes__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.brt-pdp-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--ink-12);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
}

.brt-pdp-size.is-selected {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.brt-pdp-accordion {
	margin-top: 2rem;
	border-top: 1px solid var(--ink-12);
}

.brt-pdp-accordion__item {
	border-bottom: 1px solid var(--ink-12);
}

.brt-pdp-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.brt-pdp-accordion__item summary::-webkit-details-marker {
	display: none;
}

.brt-pdp-accordion__item summary::after {
	content: '';
	width: 9px;
	height: 9px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s var(--ease);
}

.brt-pdp-accordion__item[open] summary::after {
	transform: rotate(-135deg);
}

.brt-pdp-accordion__body {
	padding: 0 0 1.25rem;
	color: var(--ink-60);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.brt-pdp-accordion__body p {
	margin: 0 0 0.75rem;
}

/* The filter trigger is a proper bordered button here, not plain nav text
   — border and background keyed to currentColor/paper so they hold up
   equally if this component is ever dropped onto the dark shell instead. */
.brt-filtertrigger {
	padding: 0.55rem 1rem;
	border: 0;
	background: var(--paper-pure);
	color: var(--ink);
}

.brt-filtertrigger::after {
	content: none;
}

.brt-facet--sort select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ink-40);
	background: var(--paper-pure);
	color: var(--ink);
	font: inherit;
	font-size: 0.8125rem;
}

.brt-filtertrigger {
	position: relative;
}

.brt-filtertrigger__dot {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bronze);
}

/* WooCommerce prints ul.products for the loop; the theme grids it. */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 1.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce's own stylesheet hangs a clearfix ::before/::after on this list.
   On a float layout they collapse to nothing, but in a grid container each one
   becomes a grid item — the ::before takes the first cell and pushes the whole
   catalogue one place to the right.

   The selector has to carry the .woocommerce ancestor to match the specificity
   of the rule it is undoing, and "content: none" removes the box outright
   rather than relying on a display value the grid would still lay out. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/*
 * WooCommerce's own frontend stylesheet styles this exact markup
 * (nav.woocommerce-pagination > ul.page-numbers > li > a/span) with
 * selectors rooted in `.woocommerce`, which out-specifies the plain
 * `.woocommerce-pagination ...` rules this used to be — the boxes were
 * rendering with WC's defaults (no flex row, lavender "current" highlight)
 * instead of the theme's. Matching the same `.woocommerce nav...` nesting
 * (plus `!important` on the properties WC also sets) wins the conflict.
 */
.brt-pagination,
.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: var(--line);
}

.brt-pagination .nav-links,
.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination li,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.brt-pagination a,
.brt-pagination span,
.woocommerce-pagination a,
.woocommerce-pagination span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 42px !important;
	height: 42px;
	padding: 0 0.75rem;
	border: var(--line);
	font-size: 0.8125rem;
	font-weight: 600;
	background: transparent;
	color: var(--ink);
}

.brt-pagination .current,
.woocommerce-pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ink) !important;
	border-color: var(--ink);
	color: var(--paper) !important;
}

.brt-empty {
	padding: 3rem 0;
	color: var(--paper-70);
}

.brt-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* The opening paragraph reads as a lead-in rather than just the first line
   of body copy — bigger and a touch lighter, same trick as .brt-pagehead__text.
   The muted tone is the dark-shell one (.brt-prose lives on dark pages like
   single posts by default); light-background pages override it below. */
.brt-prose > p:first-of-type {
	font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
	line-height: 1.6;
	color: var(--paper-70);
}

body.page-id-169 .brt-prose > p:first-of-type {
	color: var(--ink-80);
}

.brt-prose h2,
.brt-prose h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.75rem;
}

/* A rule above every section after the first turns the wall of paragraphs
   into distinct beats instead of one continuous block. */
.brt-prose h2:not(:first-of-type) {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ink-12);
}

.brt-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.brt-pagemedia {
	margin: 0 0 2.5rem;
}

.brt-pagemedia img {
	width: 100%;
	height: auto;
	display: block;
}

/* An image dropped into the body copy itself, not just the header slot —
   breaks up the text before it turns into a wall. Fixed to a landscape
   ratio with object-fit rather than left at the source's own dimensions,
   since a portrait-cropped photo stretched to the full text column would
   run taller than the copy around it. */
.brt-pagemedia--inline {
	margin: 3rem 0;
}

.brt-pagemedia--inline img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	display: block;
}

.brt-pagemedia--inline figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--ink-40);
}

.brt-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.brt-post__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 1rem;
}

.brt-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brt-post__title {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
}

.brt-404 {
	text-align: center;
}

.brt-404__title {
	margin-bottom: 1rem;
	font-size: clamp(2.25rem, 7vw, 5rem);
}

.brt-404__text {
	max-width: 46ch;
	margin: 0 auto 2rem;
	color: var(--paper-70);
}

/* The single product page keeps WooCommerce defaults, nudged onto the
   theme's type and spacing rather than restyled wholesale. */
.brt-product .product_title {
	margin-bottom: 1.25rem;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
}

.brt-product .price {
	font-size: 15px;
	font-weight: 300;
}

.brt-product .button,
.brt-product button.button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 2rem;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--bronze);
	color: var(--paper-pure);
}

/* ------------------------------------------------------ order received -- */

/* The thank-you page shares body.woocommerce-checkout, so it would inherit
   the checkout's full-width two-column grid and sit hard left. It gets one
   centred column instead, title included. */
body.woocommerce-checkout.woocommerce-order-received .brt-pagehead,
body.woocommerce-checkout.woocommerce-order-received .woocommerce {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

body.woocommerce-checkout.woocommerce-order-received .brt-pagehead {
	text-align: center;
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce {
	display: block;
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce-thankyou-order-received {
	margin: 0 0 2rem;
	font-size: 1.125rem;
	text-align: center;
}

/* Order number, date, email, total, payment — one centred row of cells. */
body.woocommerce-checkout.woocommerce-order-received ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 0;
	margin: 0 0 3rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--ink-12);
	border-bottom: 1px solid var(--ink-12);
	list-style: none;
}

body.woocommerce-checkout.woocommerce-order-received ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0 1.5rem;
	border-right: 1px solid var(--ink-12);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-60);
}

body.woocommerce-checkout.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
	border-right: 0;
}

body.woocommerce-checkout.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	color: var(--ink);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* The payment method's own note ("Paguani me para në dorë…"). */
body.woocommerce-checkout.woocommerce-order-received .woocommerce-order > p {
	text-align: center;
	color: var(--ink-60);
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-checkout.woocommerce-order-received .woocommerce-customer-details {
	margin-top: 3rem;
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-checkout.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-checkout.woocommerce-order-received .woocommerce-customer-details h2 {
	margin-bottom: 1rem;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Totals rows: label left, amount right — the same as the item rows above. */
body.woocommerce-checkout.woocommerce-order-received .shop_table tfoot th {
	text-align: left;
}

body.woocommerce-checkout.woocommerce-order-received .shop_table tfoot td,
body.woocommerce-checkout.woocommerce-order-received .shop_table td.product-total {
	text-align: right;
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce-customer-details .col2-set .col-1,
body.woocommerce-checkout.woocommerce-order-received .woocommerce-customer-details .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

body.woocommerce-checkout.woocommerce-order-received .woocommerce-customer-details address {
	padding: 1.25rem;
	border: 1px solid var(--ink-12);
	border-radius: 0;
	font-style: normal;
	line-height: 1.7;
}

@media (max-width: 640px) {
	body.woocommerce-checkout.woocommerce-order-received ul.woocommerce-order-overview li {
		flex: 1 1 50%;
		padding: 0 0.75rem;
		border-right: 0;
	}
}

/* -------------------------------------------------------------- notices -- */

/* WooCommerce's notices ("added to cart", info, errors) as one quiet line:
   a hairline frame, small uppercase text, a drawn check in place of the
   stock icon font, and the action as a plain underlined link on the right
   instead of a full-size button. Colours follow the page (currentColor),
   so the same rules read on both the light shop pages and the dark shell. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
}

/* WooCommerce focuses the notice so screen readers announce it; the
   browser's focus ring around it only read as a stray orange frame. */
body .woocommerce-message:focus,
body .woocommerce-info:focus,
body .woocommerce-error:focus {
	outline: none;
}

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	content: '';
	position: static;
	flex: none;
	width: 5px;
	height: 10px;
	margin: -3px 0.25rem 0 0.25rem;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	color: inherit;
	font-family: inherit;
}

body .woocommerce-info::before {
	width: 6px;
	height: 6px;
	margin: 0 0.25rem;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	transform: none;
}

body .woocommerce-error {
	border-left: 2px solid #c8423a;
}

body .woocommerce-error::before {
	display: none;
}

body .woocommerce-error li {
	flex-basis: 100%;
	margin: 0;
}

body .woocommerce-message .button,
body .woocommerce-info .button,
body.single-product .woocommerce-message .button {
	order: 2;
	float: none;
	display: inline;
	min-height: 0;
	margin-left: auto;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: inherit !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body.single-product .woocommerce-message .button:hover {
	background: transparent !important;
	color: inherit !important;
	opacity: 0.6;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
	.brt-nav__list {
		display: none;
	}

	.brt-iconbtn--menu,
	.brt-iconbtn--bag {
		display: inline-flex;
	}

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

	.brt-rail {
		grid-auto-columns: minmax(31.5%, 1fr);
	}
}

@media (max-width: 900px) {
	.brt-grid--4,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.brt-editorial__inner,
	.brt-signup__inner,
	.brt-footer__top {
		grid-template-columns: 1fr;
	}

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

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

	.brt-rail {
		grid-auto-columns: minmax(46%, 1fr);
	}
}

@media (max-width: 640px) {
	:root {
		--header-h: 60px;
	}

	.brt-wordmark {
		font-size: 1.375rem;
	}

	/* A full first screen under the demo strip and ticker (~90px together),
	   caption over the photo as on desktop. The photo is wide (16:9), so a
	   tall phone screen shows only about a third of it; centred, that third
	   was the empty wall between the walkers. Anchoring at 72% frames the
	   group of three instead. */
	.brt-hero {
		min-height: calc(100vh - 90px);
		min-height: calc(100svh - 90px);
	}

	.brt-hero__media {
		background-position: 72% center;
	}

	/* Banners carry the same 16:9 photography, set as the section's own
	   background. On phones the photo is drawn full width at the top at its
	   natural height (56.25vw is 9/16 of the screen width) and the caption
	   and button sit under it, so nothing is cropped. */
	.brt-banner {
		display: block;
		min-height: 0;
		padding: calc(56.25vw + 1.75rem) var(--gutter) 2.5rem;
		background-color: var(--ink);
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
	}

	.brt-banner::after {
		display: none;
	}

	/* Tag inline with the text, so the notice takes two lines, not three. */
	.brt-demo {
		font-size: 11px;
		line-height: 1.5;
	}

	.brt-demo__inner {
		display: block;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
	}

	.brt-demo__tag {
		margin-right: 0.4rem;
		padding: 1px 6px;
		font-size: 9px;
	}

	/* Split spreads stack on phones. Side by side, each frame was a strip a
	   third of its own width, cropping faces down the middle; stacked, each
	   gets the full width in a portrait shape, and the caption sits over the
	   foot of the second frame. */
	.brt-split {
		display: block;
		min-height: 0;
		padding: 0;
	}

	.brt-split__frames {
		position: relative;
		inset: auto;
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.brt-split__frame {
		aspect-ratio: 4 / 5;
	}

	.brt-split__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 var(--gutter) 2rem;
	}

	.brt-hero__meta {
		flex-direction: column;
		gap: 0.35rem;
	}

	.brt-services,
	.brt-posts {
		grid-template-columns: 1fr;
	}

	.brt-signup__form {
		flex-direction: column;
	}

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

	.brt-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.brt-search__form .brt-btn {
		display: none;
	}

	.brt-rail {
		grid-auto-columns: minmax(72%, 1fr);
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.brt-ticker__track {
		animation: none;
	}
}

/* ------------------------------------------------------------- checkout -- */

/*
 * Classic checkout, not the block version — swapped in specifically because
 * a server-rendered form can be reskinned confidently from the plain HTML,
 * where the block checkout is a React island that renders its own markup
 * client-side and is much harder to verify against without a browser.
 *
 * Layout: address form left, order summary right, using CSS grid's explicit
 * placement. The grid container is .woocommerce, not form.checkout itself,
 * so `display: contents` on the form lets its fields join that same grid
 * as if the form wrapper weren't there, without actually removing it from
 * the DOM — kept even now that the coupon box no longer needs to be a
 * separate grid item (see review-order.php and inc/woocommerce.php: the
 * coupon is a plain input+button inside #order_review now, not a <form>
 * of its own, so it never had to be positioned around).
 */
body.woocommerce-checkout .woocommerce {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 0 clamp(2rem, 5vw, 4rem);
	align-items: start;
}

body.woocommerce-checkout form.checkout {
	display: contents;
}

/* Validation notices are a sibling of form.checkout, not one of its fields,
   so they'd otherwise land in whichever grid cell auto-placement gives them
   instead of running the full width of the layout. */
body.woocommerce-checkout .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / 3;
}

body.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.125rem;
}

body.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 900px) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}

	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review {
		grid-column: 1;
	}
}

/* Form fields, both here and on the cart page — bordered boxes on the
   light ground rather than the dark shell's underline-only inputs. */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-cart .input-text {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--ink-12);
	background: var(--paper-pure);
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
}

body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--ink);
}

body.woocommerce-checkout .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

body.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	color: var(--ink-60);
}

body.woocommerce-checkout h3 {
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* Order summary — plain rows on the page background, no card border,
   matching the reference layout (checkout's #order_review and the cart's
   .cart-collaterals both read this way now; see the cart-specific reset
   below too, kept for when this rule changes back for one but not both). */
body.woocommerce-checkout #order_review,
body.woocommerce-cart .cart-collaterals {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Cart page: product list on the left, totals on the right, top-aligned —
 * same idea as checkout, but clean and borderless (no card background)
 * rather than boxed, per reference. The line-items table itself is down
 * to two real columns now (see woocommerce/cart/cart.php — a template
 * override collapsing WooCommerce's stock six columns into "product" and
 * "totali", with price/quantity/remove all living inside the product
 * cell), which is what makes a comfortable two-column page layout
 * possible in the first place: six columns plus a sidebar never fit this
 * page's ~700-790px content width no matter how they were sized.
 */
/* Cart and checkout run the full site width, so the page title and both
   columns line up with the header's left and right edges, not a narrow
   860px column floating in the middle. */
body.woocommerce-cart .brt-wrap--narrow,
body.woocommerce-checkout .brt-wrap--narrow {
	max-width: var(--wrap);
}

body.woocommerce-cart .brt-pagehead,
body.woocommerce-checkout .brt-pagehead {
	margin-bottom: 2.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ink-12);
}

body.woocommerce-cart .brt-pagehead__title,
body.woocommerce-checkout .brt-pagehead__title {
	font-family: var(--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
	gap: 0 clamp(2rem, 8vw, 8rem);
	align-items: start;
}

/* Checkout: address form left, order summary right at a fixed comfortable
   width. The billing and shipping blocks stack instead of sitting side by
   side as two cramped half-width columns. */
body.woocommerce-checkout .woocommerce {
	grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
	gap: 0 clamp(2rem, 8vw, 8rem);
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

body.woocommerce-checkout #customer_details .col-2 {
	margin-top: 1.5rem;
}

body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
	width: calc(50% - 0.5rem);
}

body.woocommerce-checkout textarea {
	min-height: 120px;
	resize: vertical;
}

@media (max-width: 900px) {
	body.woocommerce-checkout .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review {
		grid-row: auto;
		margin-top: 2rem;
	}
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout h3,
body.woocommerce-cart .cart_totals h2 {
	font-family: var(--body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.woocommerce-cart .woocommerce-cart-form {
	grid-column: 1;
	min-width: 0;
}

body.woocommerce-cart .cart-collaterals {
	grid-column: 2;
}

@media (max-width: 900px) {
	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
	}

	body.woocommerce-cart .cart-collaterals {
		grid-column: 1;
	}
}

/* The checkout page still uses the stock #order_review card treatment —
   this cancels it back out just for the cart's totals, which read as
   plain rows on the page background per reference, not a boxed panel. */
body.woocommerce-cart .cart-collaterals {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * WooCommerce's own stylesheet floats .cart_totals and caps it at 48% width
 * — meant for the old unstyled layout where the table needed the room
 * back. Its actual selector is `.woocommerce .cart-collaterals .cart_totals`
 * (3 classes), which beat a plainer `body.woocommerce-cart .cart_totals` (2
 * classes) outright — matching the same chain of classes is what wins.
 */
body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

body.woocommerce-cart .cart_totals h2 {
	margin: 0 0 1rem;
}

body.woocommerce-checkout .shop_table,
body.woocommerce-cart .shop_table {
	width: 100%;
	border: 0;
}

body.woocommerce-checkout .shop_table th,
body.woocommerce-checkout .shop_table td,
body.woocommerce-cart .shop_table th,
body.woocommerce-cart .shop_table td {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ink-12);
	text-align: left;
}

body.woocommerce-cart .shop_table.cart td.product-subtotal,
body.woocommerce-cart .shop_table.cart th.product-subtotal {
	width: 100px;
	text-align: right;
	white-space: nowrap;
}

/* Checkout's order-review table (untouched, still WooCommerce's stock
   two-column template) needs its own right-align — `.shop_table td` just
   above is one element more specific than a plain `.product-total` and
   was winning over it. */
body.woocommerce-checkout .shop_table th.product-total,
body.woocommerce-checkout .shop_table td.product-total {
	text-align: right;
}

body.woocommerce-checkout .shop_table thead th,
body.woocommerce-cart .shop_table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-60);
}

/* The product row itself: image, name, price and the quantity/remove
   controls all in one cell (see cart.php) — replacing the old five
   separate columns this table used to need room for side by side. */
.brt-cartrow {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.brt-cartrow__media {
	flex-shrink: 0;
	display: block;
	width: 72px;
	height: 90px;
}

/* WooCommerce caps cart images at 32px with `.woocommerce-cart table.cart img`. */
.brt-cartrow__img,
body.woocommerce-cart table.cart .brt-cartrow__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--ink-12);
}

.brt-cartrow__body {
	min-width: 0;
}

.brt-cartrow__title {
	display: block;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.brt-cartrow__title:hover {
	text-decoration: underline;
}

.brt-cartrow__price {
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	color: var(--ink-60);
}

.brt-cartrow__price del {
	margin-right: 0.4em;
	text-decoration: line-through;
	color: var(--ink-40);
}

.brt-cartrow__price ins {
	text-decoration: none;
}

.brt-cartrow__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.85rem;
}

body.woocommerce-checkout .order-total,
body.woocommerce-cart .order-total {
	font-size: 1.0625rem;
}

body.woocommerce-checkout .order-total th,
body.woocommerce-checkout .order-total td,
body.woocommerce-cart .order-total th,
body.woocommerce-cart .order-total td {
	border-bottom: 0;
	font-weight: 700;
}

/* Checkout's inline coupon row — a plain input + button between the item
   rows and the totals footer (see review-order.php and initCouponApply()
   in main.js), not WooCommerce's own coupon <form>, which can't sit here —
   see inc/woocommerce.php. */
body.woocommerce-checkout tr.brt-coupon-row td {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.brt-coupon-inline {
	display: flex;
	gap: 0.75rem;
}

.brt-coupon-inline input {
	flex: 1;
	min-width: 0;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--ink-12);
	background: var(--paper-pure);
	color: var(--ink);
	font: inherit;
	font-size: 0.875rem;
}

.brt-coupon-inline input:focus {
	outline: none;
	border-color: var(--ink);
}

.brt-coupon-inline__btn {
	flex-shrink: 0;
	padding: 0 1.25rem;
	border: 1px solid var(--ink-12);
	background: var(--ink-06);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.brt-coupon-inline__btn:hover {
	background: var(--ink-12);
	border-color: var(--ink-40);
}

.brt-coupon-inline__btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.brt-coupon-inline__msg {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
}

.brt-coupon-inline__msg:empty {
	display: none;
}

.brt-coupon-inline__msg .woocommerce-message {
	color: var(--ink);
}

.brt-coupon-inline__msg .woocommerce-error {
	color: var(--hot);
}

/* Coupon box and the update-cart button share one row: the coupon stays a
   compact inline field+button since applying a code is occasional, while
   update-cart — needed on every quantity change — reads as a plain text
   action rather than competing with "proceed to checkout" for attention. */
/*
 * td.actions itself stays a plain table cell — display:flex directly on a
 * colspan'd <td> confused table-layout:fixed the same way it did on
 * .product-quantity, and the cell collapsed to a single column's width
 * instead of spanning all six. The flex row lives one level in, on .coupon,
 * which is a plain <div>.
 */
body.woocommerce-cart td.actions {
	border-bottom: 0;
	padding-top: 1.5rem;
}

/*
 * Same specificity fight as the input above: WooCommerce's own stylesheet
 * floats this exact element via `.woocommerce table.cart td.actions
 * .coupon` (4 classes), which is why a plainer selector's display:flex
 * never actually stopped it floating — the float from that rule kept
 * winning and the update-cart button beside it just wrapped around it.
 */
body.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	float: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	max-width: 420px;
}

/*
 * WooCommerce's own stylesheet targets this exact input with
 * `.woocommerce-cart table.cart td.actions .coupon .input-text` — five
 * classes, and plainer selectors here (even `!important`-free ones) lose to
 * it outright. Matching that same chain of classes is what actually wins,
 * not raising specificity some other way.
 */
body.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: auto;
	flex: 1;
	min-width: 0;
	max-width: 220px;
	float: none;
	margin: 0;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--ink-12);
}

body.woocommerce-cart .coupon .button {
	width: auto;
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 1.25rem;
}

body.woocommerce-cart td.actions .button[name="update_cart"] {
	display: block;
	width: auto;
	min-height: 0;
	margin-top: 1rem;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	color: var(--ink-60) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.875rem;
	font-weight: 400;
}

body.woocommerce-cart td.actions .button[name="update_cart"]:hover {
	color: var(--ink) !important;
	background: transparent !important;
}

body.woocommerce-cart td.actions .button[name="update_cart"]:disabled {
	opacity: 0.4;
	cursor: default;
}

.brt-cartitem {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.brt-cartitem__media {
	position: relative;
	flex-shrink: 0;
}

.brt-cartitem__thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--ink-12);
	flex-shrink: 0;
}

/* The quantity badge over the thumbnail's corner replaces the classic
   "× 2" text next to the name (hidden below) on checkout's order review —
   matching the reference layout. */
.brt-cartitem__qty {
	position: absolute;
	top: -8px;
	left: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 0.3em;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

body.woocommerce-checkout .product-quantity {
	display: none;
}

/* Quantity stepper — wraps WooCommerce's own number input rather than
   replacing it, so cart/checkout quantity limits and AJAX add-to-cart keep
   working unchanged; see brt_quantity_stepper() and initQuantitySteppers(). */
.brt-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ink-12);
}

.brt-qty .qty {
	width: 44px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ink);
	/* Hide the native step arrows — the theme's own buttons replace them. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.brt-qty .qty::-webkit-outer-spin-button,
.brt-qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.brt-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	border: 0;
	background: transparent;
	color: var(--ink-60);
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.brt-qty__btn:hover {
	background: var(--ink-06);
	color: var(--ink);
}

.brt-qty__btn--minus {
	border-right: 1px solid var(--ink-12);
}

.brt-qty__btn--plus {
	border-left: 1px solid var(--ink-12);
}

/* The remove link: WooCommerce's own stylesheet draws this as a red circular
   badge around the "×" text; brt_cart_remove_icon() swaps that text for the
   theme's close icon, so the badge is dropped in favour of a plain icon
   button consistent with the rest of the row's controls. */
body.woocommerce-cart .remove,
body.woocommerce-checkout .remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--ink-60) !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

body.woocommerce-cart .remove:hover,
body.woocommerce-checkout .remove:hover {
	background: var(--ink-06) !important;
	color: var(--ink) !important;
}

/* The single payment method (cash on delivery — the only one this demo can
   actually honour) reads as a plain list row rather than WooCommerce's
   default box-and-radio treatment. */
body.woocommerce-checkout ul.payment_methods {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border-top: 1px solid var(--ink-12);
}

body.woocommerce-checkout ul.payment_methods li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--ink-12);
}

body.woocommerce-checkout ul.payment_methods label {
	font-weight: 700;
}

body.woocommerce-checkout .payment_box {
	margin-top: 0.5rem;
	color: var(--ink-60);
	font-size: 0.875rem;
}

/*
 * !important throughout this rule: WooCommerce's own stylesheet styles the
 * "proceed to checkout" and "place order" buttons via `.button.alt`, which
 * — at two classes plus the element — out-specifies the plain `.button`
 * selector this theme uses everywhere else on these two pages, so it wins
 * the cascade and the button renders in WooCommerce's default purple
 * instead of the theme's ink-on-paper. Forcing it here is simpler and more
 * robust than chasing WooCommerce's selector on every relevant class.
 */
body.woocommerce-checkout #place_order,
body.woocommerce-cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 2rem;
	border: 1px solid var(--ink) !important;
	background: var(--paper-pure) !important;
	color: var(--ink) !important;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * WooCommerce has a second, more specific rule just for this button —
 * `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button` (3 classes)
 * — that bumps it to font-size:1.25em/padding:1em as a "make this one
 * bigger" treatment. That's more specific than the plain `.button` rule
 * above, so it won it, and at this card's width "Kaloni tek kasa" no
 * longer fit on one line and wrapped into three. Matching the same classes
 * here (plus one more element) is what actually wins the override.
 */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.25rem;
	font-size: 0.8125rem;
	line-height: normal;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-cart .button:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
}