/* ==========================================================================
   BJJ is Boring — theme styles
   Black, acid green, heavy condensed type. One job: sell t-shirts.
   ========================================================================== */

:root {
	/* Colour */
	--void: #0b0c0b;
	--carbon: #131513;
	--slate: #1c1f1c;
	--stage: #ffffff; /* matches the white mockup backgrounds — no seam */
	--acid: #c8f135;
	--acid-dim: #a8cd23;
	--bone: #f4f2ea;
	--chalk: #8b8f83;
	--line: rgba(244, 242, 234, 0.14);
	--line-strong: rgba(244, 242, 234, 0.3);
	--flag: #e0641f;

	/* Type */
	--display: "Anton", "Archivo Black", Impact, sans-serif;
	--utility: "Barlow Condensed", "Inter", system-ui, sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Rhythm */
	--gutter: clamp(20px, 5vw, 72px);
	--section: clamp(64px, 9vw, 132px);
	--radius: 0px;
	--header-h: 68px;
}

/* Reset ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--void);
	color: var(--bone);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--acid);
	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;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--acid);
	color: var(--void);
	padding: 12px 18px;
	font-weight: 700;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

/* Type ------------------------------------------------------------------- */

.display {
	font-family: var(--display);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 0.87;
	letter-spacing: -0.02em;
	font-size: clamp(38px, 6.4vw, 96px);
	margin: 0;
}

.display span {
	display: block;
}

.display--xl {
	font-size: clamp(46px, 9vw, 148px);
}

.display .is-outlined,
.is-outlined {
	color: transparent;
	-webkit-text-stroke: 2px var(--bone);
	text-stroke: 2px var(--bone);
}

.eyebrow {
	font-family: var(--utility);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acid);
	margin: 0 0 18px;
}

.muted {
	color: var(--chalk);
	font-size: 13px;
}

/* Buttons and links ------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	border: 1px solid transparent;
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--acid {
	background: var(--acid);
	color: var(--void);
}

.btn--acid:hover {
	background: var(--bone);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--bone);
}

.btn--ghost:hover {
	border-color: var(--acid);
	color: var(--acid);
}

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

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 4px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.link-arrow:hover {
	color: var(--acid);
	border-color: var(--acid);
}

.link-arrow .icon {
	transition: transform 0.2s ease;
}

.link-arrow:hover .icon {
	transform: translateX(4px);
}

/* Layout ----------------------------------------------------------------- */

.shell {
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 72px) var(--gutter) var(--section);
}

.shell--narrow {
	max-width: 820px;
}

.section {
	padding: var(--section) var(--gutter);
	max-width: 1600px;
	margin: 0 auto;
}

.section__head {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(24px, 5vw, 80px);
	margin-bottom: clamp(32px, 5vw, 60px);
}

.section__intro {
	color: var(--chalk);
	font-size: 16px;
	margin: 0;
	max-width: 44ch;
}

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

.announcement {
	background: var(--acid);
	color: var(--void);
	text-align: center;
	padding: 9px 16px;
}

.announcement p {
	margin: 0;
	font-family: var(--utility);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(11, 12, 11, 0.88);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	height: var(--header-h);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 0 var(--gutter);
	max-width: 1600px;
	margin: 0 auto;
}

.site-header__brand {
	display: flex;
	align-items: center;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.brand__type {
	font-family: var(--display);
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.brand__mark {
	color: var(--acid);
	display: flex;
}

.custom-logo {
	max-height: 40px;
	width: auto;
}

.site-nav {
	justify-self: center;
}

.site-nav ul {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-family: var(--utility);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 0;
	position: relative;
}

.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--acid);
	transition: width 0.24s ease;
}

.site-nav a:hover::after,
.site-nav .current-menu-item > a::after {
	width: 100%;
}

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-self: end;
}

.tool-link,
.cart-toggle,
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	text-decoration: none;
}

.nav-toggle {
	display: none;
}

.cart-toggle__count {
	min-width: 21px;
	height: 21px;
	display: inline-grid;
	place-items: center;
	background: var(--acid);
	color: var(--void);
	border-radius: 50%;
	font-family: var(--utility);
	font-size: 13px;
	font-weight: 700;
}

/* Mobile nav ------------------------------------------------------------- */

.mobile-nav {
	border-top: 1px solid var(--line);
	padding: 12px var(--gutter) 26px;
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--display);
	font-size: 26px;
	text-transform: uppercase;
	text-decoration: none;
}

/* Hero ------------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding: clamp(48px, 8vw, 110px) var(--gutter);
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
}

/* Signature: a faint tatami weave behind the headline. */
.hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(0deg, rgba(244, 242, 234, 0.045) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, rgba(244, 242, 234, 0.045) 0 1px, transparent 1px 40px);
	mask-image: radial-gradient(circle at 30% 45%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(circle at 30% 45%, #000 0%, transparent 72%);
}

.hero__copy {
	position: relative;
	z-index: 2;
}

.hero__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-weight: 400;
	line-height: 0.84;
	letter-spacing: -0.025em;
	font-size: clamp(58px, 10.5vw, 168px);
	margin: 0 0 26px;
}

.hero__title span {
	display: block;
}

.hero__title .is-outlined {
	-webkit-text-stroke: clamp(2px, 0.3vw, 4px) var(--acid);
}

.hero__body {
	font-size: clamp(16px, 1.2vw, 19px);
	color: var(--chalk);
	max-width: 52ch;
	margin: 0 0 32px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: clamp(38px, 5vw, 64px) 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.hero__facts dt {
	font-family: var(--display);
	font-size: clamp(22px, 2vw, 30px);
	text-transform: uppercase;
	color: var(--acid);
}

.hero__facts dd {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--chalk);
	line-height: 1.4;
}

.hero__stage {
	position: relative;
	z-index: 2;
}

.hero__product {
	display: block;
	position: relative;
	background: var(--stage);
	border: 1px solid var(--line);
	text-decoration: none;
}

.hero__product img {
	width: 100%;
}

.hero__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	background: rgba(11, 12, 11, 0.86);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--line);
}

.hero__tag strong {
	font-family: var(--utility);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero__tag em {
	font-style: normal;
	color: var(--acid);
	font-weight: 700;
}

.hero__placeholder {
	display: grid;
	place-items: center;
	gap: 18px;
	min-height: 380px;
	background: var(--stage);
	border: 1px dashed var(--line-strong);
	color: var(--chalk);
	text-align: center;
	padding: 40px;
}

.hero__placeholder .skull {
	color: var(--acid);
}

/* Marquee ---------------------------------------------------------------- */

.marquee,
.bjjib-ticker {
	overflow: hidden;
	background: var(--acid);
	color: var(--void);
	padding: 13px 0;
	border-top: 1px solid var(--void);
	border-bottom: 1px solid var(--void);
}

.marquee__rail {
	display: flex;
	gap: 40px;
	width: max-content;
	animation: marquee 42s linear infinite;
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2em;
	white-space: nowrap;
}

@keyframes marquee {
	to {
		transform: translateX(calc(-50% - 20px));
	}
}

/* Collection ------------------------------------------------------------- */

.collection__more {
	margin-top: 44px;
}

.notice-card {
	border: 1px dashed var(--line-strong);
	padding: clamp(28px, 4vw, 52px);
	max-width: 720px;
}

.notice-card h2,
.notice-card h3 {
	font-family: var(--display);
	text-transform: uppercase;
	font-size: clamp(24px, 3vw, 36px);
	margin: 0 0 12px;
	font-weight: 400;
}

.notice-card p {
	color: var(--chalk);
	margin: 0 0 22px;
}

/* Manifesto -------------------------------------------------------------- */

.manifesto {
	background: var(--acid);
	color: var(--void);
	max-width: none;
}

.manifesto__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.manifesto .eyebrow {
	color: rgba(11, 12, 11, 0.62);
}

.manifesto__body {
	font-size: clamp(17px, 1.5vw, 22px);
	max-width: 60ch;
	margin: 28px 0 0;
	font-weight: 500;
}

.manifesto__quote {
	margin: clamp(40px, 6vw, 72px) 0 0;
	padding-top: 32px;
	border-top: 2px solid rgba(11, 12, 11, 0.25);
}

.manifesto__quote p {
	font-family: var(--display);
	font-size: clamp(24px, 3.4vw, 52px);
	line-height: 0.98;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.manifesto__quote cite {
	font-family: var(--utility);
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Quality ---------------------------------------------------------------- */

.quality__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.quality__item {
	background: var(--void);
	padding: clamp(24px, 3vw, 44px);
}

.quality__item h3 {
	font-family: var(--display);
	font-size: clamp(20px, 2.2vw, 30px);
	text-transform: uppercase;
	font-weight: 400;
	margin: 0 0 14px;
}

.quality__item p {
	color: var(--chalk);
	margin: 0;
	font-size: 15px;
}

/* FAQ -------------------------------------------------------------------- */

.faq__list {
	border-top: 1px solid var(--line);
	max-width: 900px;
}

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

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--utility);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__sign {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	background: var(--acid);
	transition: transform 0.2s ease;
}

.faq__sign::before {
	inset: 7px 0 7px 0;
	height: 2px;
}

.faq__sign::after {
	inset: 0 7px 0 7px;
	width: 2px;
}

.faq__item[open] .faq__sign::after {
	transform: scaleY(0);
}

.faq__answer {
	padding: 0 0 24px;
	max-width: 62ch;
	color: var(--chalk);
}

.faq__answer p {
	margin: 0;
}

/* Newsletter ------------------------------------------------------------- */

.newsletter {
	border-top: 1px solid var(--line);
}

.newsletter__inner {
	max-width: 900px;
}

.newsletter__body {
	color: var(--chalk);
	max-width: 52ch;
	margin: 22px 0 34px;
}

.newsletter__form,
.mc4wp-form form {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 2px solid var(--line-strong);
	max-width: 620px;
}

.newsletter__form input[type="email"],
.mc4wp-form input[type="email"] {
	flex: 1;
	background: none;
	border: 0;
	color: var(--bone);
	padding: 16px 0;
	font-size: 17px;
}

.newsletter__form input::placeholder {
	color: var(--chalk);
}

.newsletter__form button,
.mc4wp-form input[type="submit"] {
	background: none;
	border: 0;
	color: var(--acid);
	font-family: var(--utility);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 10px 0;
}

.newsletter__note {
	font-size: 13px;
	color: var(--chalk);
	margin-top: 16px;
}

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

.site-footer {
	border-top: 1px solid var(--line);
	background: var(--carbon);
	padding: var(--section) var(--gutter) 32px;
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 60px);
	max-width: 1600px;
	margin: 0 auto;
}

.site-footer__brand .skull {
	color: var(--acid);
	margin-bottom: 18px;
}

.site-footer__line {
	font-family: var(--display);
	font-size: clamp(20px, 2vw, 30px);
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 16px;
	max-width: 12ch;
}

.site-footer__social a {
	margin-right: 16px;
	font-family: var(--utility);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 15px;
}

.site-footer__social a:hover {
	color: var(--acid);
}

.site-footer__col h2,
.site-footer__widgets .widget-title {
	font-family: var(--utility);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--chalk);
	margin: 0 0 16px;
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__col a {
	display: block;
	padding: 6px 0;
	text-decoration: none;
	font-size: 15px;
	color: var(--bone);
}

.site-footer__col a:hover {
	color: var(--acid);
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	max-width: 1600px;
	margin: clamp(40px, 6vw, 70px) auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--chalk);
	font-size: 13px;
}

.site-footer__base p {
	margin: 0;
}

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

.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 90;
	width: min(440px, 100%);
	height: 100dvh;
	background: var(--carbon);
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
	visibility: hidden;
}

.cart-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

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

.cart-drawer__head h2 {
	font-family: var(--display);
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
}

.cart-drawer__close {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 6px;
}

.cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.cart-drawer__empty {
	padding: 48px 24px;
	text-align: center;
	display: grid;
	gap: 10px;
	align-content: center;
	flex: 1;
}

.cart-drawer__empty p {
	margin: 0;
}

.cart-drawer__empty .btn {
	margin-top: 16px;
	justify-self: center;
}

.cart-drawer__progress {
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
}

.cart-drawer__progress p {
	margin: 0 0 10px;
	font-family: var(--utility);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cart-drawer__progress .track,
.bjjib-shipping-bar__track {
	height: 4px;
	background: var(--line);
	overflow: hidden;
}

.cart-drawer__progress .track span {
	display: block;
	height: 100%;
	background: var(--acid);
	transition: width 0.4s ease;
}

.cart-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0 24px;
	flex: 1;
}

.cart-line {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.cart-line__media {
	background: var(--stage);
	display: block;
}

.cart-line__body h3 {
	font-size: 14px;
	margin: 0 0 4px;
	line-height: 1.35;
}

.cart-line__body h3 a {
	text-decoration: none;
}

.cart-line__meta,
.cart-line__price {
	margin: 0;
	font-size: 13px;
	color: var(--chalk);
}

.cart-line__price {
	color: var(--bone);
	font-weight: 600;
	margin-top: 4px;
}

.cart-line__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	font-size: 12px;
	color: var(--chalk);
}

.cart-line__actions .remove {
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cart-line__actions .remove:hover {
	color: var(--acid);
}

.cart-drawer__foot {
	padding: 20px 24px 26px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 12px;
	background: var(--carbon);
}

.cart-drawer__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--utility);
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cart-drawer__total strong {
	font-size: 21px;
}

.scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.66);
	z-index: 80;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.scrim[hidden] {
	display: none;
}

.scrim.is-visible {
	opacity: 1;
}

/* Toast ------------------------------------------------------------------ */

.toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 100;
	transform: translate(-50%, 24px);
	background: var(--acid);
	color: var(--void);
	padding: 13px 22px;
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	max-width: calc(100vw - 32px);
	text-align: center;
}

.toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Inner pages ------------------------------------------------------------ */

.trail {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--chalk);
	margin-bottom: 26px;
}

.trail a {
	text-decoration: none;
}

.trail a:hover {
	color: var(--acid);
}

.page-head {
	margin-bottom: clamp(30px, 4vw, 54px);
}

.page-head--shop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px 26px;
}

.post-card__media {
	display: block;
	background: var(--stage);
	margin-bottom: 16px;
}

.post-card h2 {
	font-family: var(--display);
	font-size: 26px;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 8px;
}

.post-card h2 a {
	text-decoration: none;
}

.post-meta {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chalk);
	margin: 0 0 12px;
}

.post-card__excerpt {
	color: var(--chalk);
	margin-bottom: 14px;
}

.entry__head {
	margin-bottom: 30px;
}

.entry__media {
	margin: 0 0 32px;
}

.entry__content {
	font-size: 17px;
}

.entry__content h2,
.entry__content h3 {
	font-family: var(--display);
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
}

.entry__content h2 {
	font-size: 34px;
}

.entry__content h3 {
	font-size: 25px;
}

.entry__content a {
	color: var(--acid);
	text-underline-offset: 3px;
}

.entry__content blockquote {
	border-left: 3px solid var(--acid);
	margin: 30px 0;
	padding-left: 22px;
	font-size: 19px;
}

.entry__content code,
.entry__content pre {
	background: var(--carbon);
	font-size: 14px;
}

.entry__content pre {
	padding: 18px;
	overflow: auto;
}

.error-404 {
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 18px;
}

.error-404__body {
	color: var(--chalk);
	max-width: 46ch;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.search-form {
	display: flex;
	gap: 10px;
	border-bottom: 2px solid var(--line-strong);
	max-width: 460px;
	width: 100%;
}

.search-form input[type="search"] {
	flex: 1;
	background: none;
	border: 0;
	color: var(--bone);
	padding: 13px 0;
	font-size: 16px;
}

.search-form button {
	background: none;
	border: 0;
	color: var(--acid);
	font-family: var(--utility);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
}

.pagination,
.woocommerce-pagination {
	margin-top: 50px;
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--line);
	text-decoration: none;
	font-family: var(--utility);
	letter-spacing: 0.08em;
}

.pagination .current,
.woocommerce-pagination .page-numbers li span.current {
	background: var(--acid);
	color: var(--void);
	border-color: var(--acid);
}

.comments {
	margin-top: 60px;
	border-top: 1px solid var(--line);
	padding-top: 36px;
}

.comments__title {
	font-family: var(--display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 26px;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	background: var(--carbon);
	border: 1px solid var(--line);
	color: var(--bone);
	padding: 12px 14px;
	font-family: inherit;
}

/* WooCommerce ------------------------------------------------------------ */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}

/* Mockups are 4:3 with the garment already centred, so the tile matches the
   asset rather than cropping into the print. */
.bjjib-card__media,
.woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--stage);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--body);
	font-size: 15px;
	font-weight: 600;
	padding: 0;
	margin: 16px 0 4px;
	line-height: 1.35;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	text-decoration: none;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 13px 0 !important;
	background: none !important;
	color: var(--bone) !important;
	border-top: 1px solid var(--line);
	border-radius: 0 !important;
	font-family: var(--utility) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce ul.products li.product a.button:hover {
	color: var(--acid) !important;
}

.woocommerce span.onsale,
.bjjib-card__flag {
	background: var(--acid) !important;
	color: var(--void) !important;
	border-radius: 0 !important;
	font-family: var(--utility);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
	min-height: 0;
	line-height: 1;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 70px);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: var(--stage);
	border: 1px solid var(--line);
}

.woocommerce div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product .product_title {
	font-family: var(--display);
	font-size: clamp(30px, 4vw, 56px);
	text-transform: uppercase;
	line-height: 0.94;
	font-weight: 400;
	margin: 0 0 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--acid) !important;
	font-family: var(--utility);
	font-size: 26px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--chalk);
	font-size: 17px;
}

.woocommerce div.product form.cart {
	margin: 26px 0;
	border-top: 1px solid var(--line);
	padding-top: 24px;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 18px;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: 8px 0;
	border: 0;
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--chalk);
}

.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea {
	background: var(--carbon);
	border: 1px solid var(--line);
	color: var(--bone);
	padding: 12px 14px;
	border-radius: 0;
	font-family: inherit;
	font-size: 15px;
}

.woocommerce .quantity .qty {
	width: 74px;
	text-align: center;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--acid);
	color: var(--void);
	border-radius: 0;
	font-family: var(--utility);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 15px 26px;
	transition: background 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
	background: var(--bone);
	color: var(--void);
}

.woocommerce .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: 8px;
}

.woocommerce .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce .woocommerce-tabs ul.tabs li::before,
.woocommerce .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce .woocommerce-tabs ul.tabs li a {
	padding: 12px 16px;
	font-family: var(--utility);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chalk);
}

.woocommerce .woocommerce-tabs ul.tabs li.active a {
	color: var(--acid);
	box-shadow: inset 0 -2px 0 var(--acid);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce-tabs h2 {
	font-family: var(--display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 40px);
	margin: 60px 0 24px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--carbon);
	border-top: 3px solid var(--acid);
	color: var(--bone);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--acid);
}

.woocommerce-error {
	border-top-color: var(--flag);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--line);
	border-radius: 0;
}

.woocommerce-cart table.cart img {
	width: 74px;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
	color: var(--chalk);
}

.woocommerce-checkout #payment {
	background: var(--carbon);
	border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--slate);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--slate);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.site-header__brand {
		justify-content: center;
	}

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

	.hero__stage {
		order: -1;
	}

	.section__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

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

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

	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 560px) {
	.brand__type {
		font-size: 18px;
	}

	.hero__facts {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.post-list {
		grid-template-columns: 1fr;
	}

	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
	}

	.cart-drawer {
		width: 100%;
	}
}

/* Motion and contrast preferences ---------------------------------------- */

@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;
	}
}

@media (prefers-contrast: more) {
	:root {
		--chalk: #d6d8cf;
		--line: rgba(244, 242, 234, 0.4);
	}
}

/* Print ------------------------------------------------------------------ */

@media print {
	.site-header,
	.announcement,
	.cart-drawer,
	.scrim,
	.marquee,
	.newsletter,
	.site-footer {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}