/**
 * Swole AF — theme styles.
 * Ported from the redesign comp: Orbitron display / Space Grotesk body,
 * hard 0-radius edges, ink + orange + teal.
 */

:root {
	--saf-ink: #131417;
	--saf-ink-2: #26272B;
	--saf-ink-3: #3A3B3F;
	--saf-orange: #FE7B2B;
	--saf-teal: #0B808A;
	--saf-teal-soft: #CFEDF0;
	--saf-line: #E8E7E3;
	--saf-line-2: #F0EFEC;
	--saf-cream: #F5F5F3;
	--saf-grey: #8B8C90;
	--saf-grey-2: #5A5B5F;
	--saf-grey-3: #B9B9B6;
	--saf-grey-4: #D6D6D3;
	--saf-display: 'Orbitron', sans-serif;
	--saf-body: 'Space Grotesk', sans-serif;
	--saf-max: 1240px;
	--saf-gutter: 24px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--saf-ink);
	font-family: var(--saf-body);
}

a { color: var(--saf-teal); text-decoration: none; }
a:hover { color: var(--saf-orange); }

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

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

.saf-wrap { max-width: var(--saf-max); margin: 0 auto; padding: 0 var(--saf-gutter); width: 100%; }
.saf-site {
	min-height: 100vh;
	min-height: 100dvh; /* iOS: 100vh is the chrome-hidden height, which overshoots. */
	display: flex;
	flex-direction: column;
}
.saf-main { flex: 1; }

.saf-section { padding: 88px 0; }
.saf-section--tight { padding: 40px 0; }
.saf-section--cream { background: var(--saf-cream); }

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

.saf-h1, .saf-h2, .saf-h3 { font-family: var(--saf-display); font-weight: 800; margin: 0; }
.saf-h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.12; }
.saf-h2 { font-size: clamp(26px, 3vw, 38px); }
.saf-h3 { font-size: clamp(24px, 2.8vw, 32px); }
.saf-eyebrow {
	color: var(--saf-teal);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 10px;
}
.saf-lede { font-size: 16px; line-height: 1.65; color: var(--saf-grey-2); }
.saf-lede > *:first-child { margin-top: 0; }
.saf-lede h2 {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.25;
	color: var(--saf-ink);
	margin: 40px 0 14px;
}
.saf-lede h3 {
	font-family: var(--saf-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--saf-ink);
	margin: 30px 0 12px;
}
.saf-lede p { margin: 0 0 18px; }
.saf-lede ul, .saf-lede ol { margin: 0 0 18px; padding-left: 22px; }
.saf-lede li { margin-bottom: 8px; }
.saf-lede a { color: var(--saf-orange); text-decoration: underline; }
.saf-lede a:hover { color: var(--saf-ink); }
.saf-lede strong { color: var(--saf-ink); }
.saf-lede img { max-width: 100%; height: auto; }

/* Section header with a trailing link */
.saf-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.saf-morelink {
	color: var(--saf-ink);
	font-weight: 600;
	font-size: 14px;
	border-bottom: 2px solid var(--saf-orange);
	padding-bottom: 4px;
}
.saf-morelink:hover { color: var(--saf-orange); }

/* ---------- Buttons ---------- */

.saf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	padding: 16px 36px;
	min-height: 44px;
	transition: background .2s ease, color .2s ease;
}
.saf-btn--orange { background: var(--saf-orange); color: var(--saf-ink); }
.saf-btn--orange:hover { background: #fff; color: var(--saf-ink); }
.saf-btn--ink { background: var(--saf-ink); color: #fff; }
.saf-btn--ink:hover { background: var(--saf-orange); color: var(--saf-ink); }
.saf-btn--light { background: #fff; color: var(--saf-ink); }
.saf-btn--light:hover { background: var(--saf-orange); }
.saf-btn--ghost { border: 1px solid rgba(255,255,255,0.4); color: #fff; background: none; }
.saf-btn--ghost:hover { border-color: var(--saf-orange); color: var(--saf-orange); }
.saf-btn--cart {
	width: 100%;
	background: var(--saf-ink);
	color: #fff;
	font-family: var(--saf-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	padding: 13px 0;
}
.saf-btn--cart:hover { background: var(--saf-orange); color: var(--saf-ink); }

/* ---------- Promo bar + header ---------- */

.saf-promo {
	background: linear-gradient(90deg, var(--saf-teal), var(--saf-orange));
	color: #fff;
	text-align: center;
	padding: 9px 16px;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.saf-promo strong { font-weight: 700; }

.saf-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--saf-line);
}
.saf-header__inner {
	max-width: var(--saf-max);
	margin: 0 auto;
	padding: 0 var(--saf-gutter);
	min-height: 76px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.saf-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.saf-header__logo img { height: 38px; display: block; width: auto; }
.saf-header__rule { height: 2px; background: linear-gradient(90deg, var(--saf-teal), var(--saf-orange)); }

.saf-nav {
	display: flex;
	gap: 2px;
	flex: 1;
	min-width: 0;
	justify-content: center;
	font-family: var(--saf-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.saf-nav a {
	color: var(--saf-ink);
	padding: 10px 14px;
	display: inline-block;
	text-transform: uppercase;
}
.saf-nav a:hover, .saf-nav .current-menu-item > a {
	color: var(--saf-orange);
	background: var(--saf-cream);
}
.saf-nav__caret { font-size: 9px; margin-left: 7px; display: inline-block; transition: transform .2s; }
.saf-nav__item--open .saf-nav__caret { transform: rotate(180deg); }

/* Header search. Open, it takes the nav's place in the row; the nav itself is
   hidden, so the header never grows a second line on desktop. */
.saf-search { flex: 1; min-width: 0; position: relative; }
.saf-header.is-search-open .saf-nav { display: none; }
.saf-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 8px 0 14px;
	border: 1px solid var(--saf-line);
	background: var(--saf-cream);
}
/* No focus ring on the field itself: the panel only opens on a deliberate
   click and puts the caret straight in, so the global orange outline just
   doubled up with the form's own border. */
.saf-search__form:focus-within { border-color: var(--saf-ink-3); }
.saf-search__input:focus,
.saf-search__input:focus-visible { outline: none; box-shadow: none; }
.saf-search__icon { display: flex; color: var(--saf-grey); flex-shrink: 0; }
.saf-search__input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 15px;
	color: var(--saf-ink);
	background: none;
	border: none;
	outline: none;
	padding: 0;
}
.saf-search__input::-webkit-search-cancel-button { display: none; }
.saf-search__close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--saf-grey-2);
}
.saf-search__close:hover { color: var(--saf-orange); }

.saf-search__results {
	position: absolute;
	z-index: 60;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--saf-line);
	box-shadow: 0 18px 40px rgba(19,20,23,0.16);
}
.saf-search__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	color: var(--saf-ink);
	border-bottom: 1px solid var(--saf-line-2);
}
.saf-search__row:last-child { border-bottom: none; }
.saf-search__row:hover,
.saf-search__row.is-active { background: var(--saf-cream); }
.saf-search__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	background: var(--saf-line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.saf-search__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The row's parts are spans inside an anchor, so they need to be told to
   stack — otherwise the category runs on from the product name. */
.saf-search__text { min-width: 0; flex: 1; display: block; }
.saf-search__name {
	display: block;
	font-family: var(--saf-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
	/* Long product names must not push the price off the row. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.saf-search__cat { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--saf-teal); margin-top: 3px; }
.saf-search__price { font-weight: 600; font-size: 14px; flex-shrink: 0; }
.saf-search__price .saf-search__sale { color: var(--saf-orange); }
.saf-search__more,
.saf-search__empty {
	display: block;
	padding: 13px 14px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-family: var(--saf-display);
	font-weight: 600;
}
.saf-search__more { color: var(--saf-ink); background: var(--saf-cream); text-align: center; }
.saf-search__more:hover { color: var(--saf-orange); }
.saf-search__empty { color: var(--saf-grey-2); text-transform: none; font-family: inherit; font-weight: 400; }

.saf-utils { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.saf-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--saf-ink);
}
.saf-iconbtn:hover { background: var(--saf-cream); color: var(--saf-orange); }
.saf-cartbtn {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--saf-ink);
	color: #fff;
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 700;
	font-family: var(--saf-display);
	letter-spacing: 0.06em;
}
.saf-cartbtn:hover { background: var(--saf-orange); color: var(--saf-ink); }
.saf-cartbtn__count {
	background: var(--saf-orange);
	color: var(--saf-ink);
	min-width: 21px;
	height: 21px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--saf-body);
}

/* Mega menu */
.saf-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-bottom: 1px solid var(--saf-line);
	box-shadow: 0 24px 48px rgba(19,20,23,0.12);
}
.saf-mega[hidden] { display: none; }
.saf-mega__inner {
	max-width: var(--saf-max);
	margin: 0 auto;
	padding: 36px var(--saf-gutter) 40px;
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
}
.saf-mega__col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 12px; }
.saf-mega__title {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--saf-teal);
	margin-bottom: 4px;
}
.saf-mega__col a { color: var(--saf-ink); font-size: 14px; font-weight: 500; }
.saf-mega__col a:hover { color: var(--saf-orange); }
.saf-mega__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px var(--saf-gutter);
	border-top: 1px solid var(--saf-line);
	background: var(--saf-cream);
	color: var(--saf-ink);
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	transition: background .2s ease, color .2s ease;
}
.saf-mega__all:hover { background: var(--saf-orange); color: var(--saf-ink); }
.saf-mega__feature {
	flex: 1.4 1 300px;
	background: var(--saf-ink);
	overflow: hidden;
	display: flex;
	color: #fff;
	min-height: 170px;
}
.saf-mega__feature:hover { box-shadow: 0 12px 32px rgba(19,20,23,0.25); }
.saf-mega__featurebody {
	flex: 1;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	color: #fff;
}
.saf-mega__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--saf-orange); }
.saf-mega__name { font-family: var(--saf-display); font-weight: 800; font-size: 20px; }
.saf-mega__desc { font-size: 13px; color: var(--saf-grey-3); line-height: 1.5; }
.saf-mega__img { width: 130px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 16px 16px 16px 0; }
.saf-mega__img img { height: 130px; width: 100%; object-fit: contain; }

/* Buttons mid add-to-cart request. */
.saf-btn.is-loading,
.saf-addbtn.is-loading,
.saf-sticky__btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Wholesale ---------- */

.saf-ws-hero { background: var(--saf-ink); color: #fff; overflow: hidden; }
.saf-ws-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	padding-top: 72px;
	padding-bottom: 72px;
}
.saf-ws-hero__title {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.06;
	text-transform: uppercase;
	margin: 0 0 22px;
}
.saf-ws-hero__title .saf-accent { color: var(--saf-orange); }
.saf-ws-hero__body { font-size: 15px; line-height: 1.72; color: var(--saf-grey-4); margin: 0 0 32px; max-width: 460px; }
.saf-ws-hero__media {
	position: relative;
	display: flex;
	justify-content: flex-end;
	padding: 44px 0 44px 96px;
}
.saf-ws-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/dot-grid.png") center / contain no-repeat;
	opacity: 0.6;
}
.saf-ws-hero__media img { position: relative; width: 100%; max-width: 566px; height: auto; display: block; }

.saf-ws-partner { background: var(--saf-cream); padding: 84px 0 96px; text-align: center; }
.saf-ws-partner__title { text-transform: uppercase; margin: 0 0 48px; }
.saf-ws-partner__title .saf-accent { color: var(--saf-orange); }
.saf-ws-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.saf-ws-card {
	background: var(--saf-line);
	padding: 56px 24px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Chamfered top-left and bottom-right, as on the live page. Fixed rather
	   than percentage: a full-width card on a phone would otherwise wear a
	   60px slash across the corner. */
	clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.saf-ws-card__title {
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 500;
	line-height: 1.25;
	margin: 0 0 20px;
	color: var(--saf-ink);
}
.saf-ws-card__rule {
	display: block;
	width: 38px;
	height: 2px;
	margin-bottom: 20px;
	background: linear-gradient(90deg, var(--saf-teal), var(--saf-orange));
}
.saf-ws-card__body { font-size: 15px; line-height: 1.6; color: var(--saf-ink); }
.saf-ws-card__body p { margin: 0; }

.saf-ws-dark {
	background: var(--saf-ink);
	color: #fff;
	padding: 96px 0;
	/* The live page tiles a dot texture here; a gradient does the same job
	   seamlessly at any width. */
	background-image: radial-gradient(rgba(255,255,255,0.10) 1.4px, transparent 1.5px);
	background-size: 54px 54px;
}
.saf-ws-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}
.saf-ws-split + .saf-ws-split { margin-top: 96px; }
.saf-ws-split__media img { width: 100%; height: auto; display: block; }
.saf-ws-dark__title {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 26px;
}
.saf-ws-dark__title .saf-accent { color: var(--saf-orange); }
.saf-ws-dark__body { font-size: 15px; line-height: 1.75; color: var(--saf-grey-4); }
.saf-ws-dark__body p { margin: 0; }
.saf-ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.saf-ws-list li { font-size: 15px; line-height: 1.6; color: var(--saf-grey-4); }
.saf-ws-list strong { color: #fff; }

.saf-ws-apply { background: var(--saf-cream); padding: 84px 0 96px; }
.saf-ws-apply__title { text-transform: uppercase; text-align: center; margin: 0 0 44px; }
.saf-ws-apply__title .saf-accent { color: var(--saf-orange); }
.saf-ws-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	max-width: 900px;
	margin: 0 auto;
}
.saf-ws-field { display: flex; flex-direction: column; gap: 8px; }
.saf-ws-field--100 { grid-column: 1 / -1; }
.saf-ws-field label { font-size: 14px; color: var(--saf-grey-2); }
.saf-ws-field__req { color: var(--saf-orange); }
.saf-ws-field input,
.saf-ws-field textarea {
	font: inherit;
	font-size: 15px;
	color: var(--saf-ink);
	background: #fff;
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 14px 16px;
	width: 100%;
}
.saf-ws-field textarea { resize: vertical; min-height: 130px; }
.saf-ws-field input:focus,
.saf-ws-field textarea:focus { outline: 2px solid var(--saf-orange); outline-offset: -2px; }
.saf-ws-field.has-error input,
.saf-ws-field.has-error textarea { border-color: #C0392B; }
.saf-ws-field__error { font-size: 13px; color: #C0392B; }
/* Off-screen rather than display:none — a bot reading the DOM should still
   find it worth filling in. */
.saf-ws-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.saf-ws-form__submit { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 12px; }
/* Privacy request form: same field styling as the wholesale form, in the
   narrower column a policy page runs in. */
.saf-privacy-form { margin: 44px 0 8px; }
.saf-privacy-form .saf-ws-form { max-width: none; }
.saf-privacy-form .saf-ws-note { max-width: none; }
.saf-privacy-form select {
	font: inherit;
	font-size: 15px;
	color: var(--saf-ink);
	background: #fff;
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 14px 16px;
	width: 100%;
}
.saf-privacy-form__note { font-size: 14px; color: var(--saf-grey); margin-top: 18px; }

.saf-ws-note { max-width: 900px; margin: 0 auto 28px; padding: 16px 20px; font-size: 15px; }
.saf-ws-note--ok { background: var(--saf-teal-soft); color: var(--saf-ink); }
.saf-ws-note--bad { background: #FBE3E0; color: #7A241A; }

/* ---------- Our Story ---------- */

.saf-story-hero { background: var(--saf-ink); color: #fff; overflow: hidden; }
.saf-story-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	padding-top: 72px;
	padding-bottom: 72px;
}
.saf-story-hero__title {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(34px, 3.6vw, 46px);
	line-height: 1.06;
	text-transform: uppercase;
	margin: 0 0 22px;
}
.saf-story-hero__title .saf-accent { color: var(--saf-orange); }
.saf-story-hero__body { font-size: 15px; line-height: 1.72; color: var(--saf-grey-4); margin: 0; }
/* The dot grid sits behind the photo, as on the live page. */
.saf-story-hero__media {
	position: relative;
	display: flex;
	justify-content: flex-end;
	/* The dot field runs wider than the photo, so a band of it shows down the
	   left edge and under the corner, as on the live page. */
	padding: 44px 0 44px 96px;
}
.saf-story-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/dot-grid.png") center / contain no-repeat;
	opacity: 0.6;
}
.saf-story-hero__media img { position: relative; width: 100%; max-width: 566px; height: auto; display: block; }

.saf-crumbs--invert { text-transform: uppercase; letter-spacing: 0.04em; }
.saf-crumbs--invert a { color: var(--saf-grey-3); }
.saf-crumbs--invert .saf-crumbs__current { color: #fff; }

.saf-story-intro { padding: 80px 0 8px; text-align: center; }
.saf-story-intro__title { text-transform: uppercase; margin: 0 0 18px; }
.saf-story-intro__title .saf-accent { color: var(--saf-orange); }
.saf-story-intro__body {
	max-width: 620px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.72;
	color: var(--saf-grey-2);
}

/* Two columns either side of the rail. The right column starts lower so the
   blocks interleave rather than sitting in rows. */
.saf-story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: 0 56px;
	padding-top: 56px;
	padding-bottom: 96px;
}
.saf-story-col { display: flex; flex-direction: column; gap: 56px; }
.saf-story-col--offset { padding-top: 150px; }
.saf-story-rail { position: relative; background: var(--saf-orange); opacity: 0.55; }
.saf-story-rail::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 9px;
	height: 9px;
	background: var(--saf-orange);
	transform: translate(-50%, -50%) rotate(45deg);
}

.saf-story-shot { margin: 0; }
.saf-story-shot img { width: 100%; height: auto; display: block; }
.saf-story-card__icon { width: 55px; height: 55px; margin-bottom: 22px; }
.saf-story-card__icon img { width: 100%; height: 100%; display: block; }
.saf-story-card__title {
	font-family: var(--saf-display);
	font-weight: 600;
	font-size: clamp(22px, 2.2vw, 27px);
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--saf-ink);
}
.saf-story-card__body { font-size: 14px; line-height: 1.75; color: var(--saf-grey-2); }
.saf-story-card__body p { margin: 0 0 16px; }
.saf-story-card__body p:last-child { margin-bottom: 0; }

.saf-story-quote { background: var(--saf-ink); color: #fff; padding: 88px 0; text-align: center; }
.saf-story-quote__eyebrow {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--saf-grey-3);
	margin-bottom: 26px;
}
.saf-story-quote__text {
	font-family: var(--saf-display);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.35;
	text-transform: uppercase;
	max-width: 1000px;
	margin: 0 auto;
}
.saf-story-quote__text .saf-accent { color: var(--saf-orange); }

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

.saf-hero { background: var(--saf-ink); color: #fff; overflow: hidden; position: relative; }
.saf-hero__media { position: absolute; inset: 0; }
.saf-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.saf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(19,20,23,0.88) 0%, rgba(19,20,23,0.6) 45%, rgba(19,20,23,0.15) 100%);
	pointer-events: none;
}
.saf-hero__inner {
	/* Explicit width: as a centred flex item, `margin: 0 auto` would otherwise
	   shrink this to its content and pull the copy off the page's left edge. */
	width: 100%;
	max-width: var(--saf-max);
	margin: 0 auto;
	padding: 120px var(--saf-gutter) 130px;
	position: relative;
	pointer-events: none;
}
.saf-hero__copy { max-width: 640px; }
.saf-hero h1 {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.12;
	margin: 0 0 24px;
	letter-spacing: 0.01em;
}
.saf-hero h1 .saf-accent { color: var(--saf-orange); }
.saf-hero h1 .saf-nowrap { white-space: nowrap; }
.saf-hero p { font-size: 17px; line-height: 1.6; color: var(--saf-grey-4); max-width: 480px; margin: 0 0 36px; }
.saf-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; pointer-events: auto; }

/* Hero slider: slides share one grid cell, so the section keeps the height of
   the tallest banner and nothing shifts as they cross-fade. */
.saf-hero__slides { display: grid; position: relative; min-height: clamp(360px, 34vw, 520px); }
.saf-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Banners can differ in height; the cell takes the tallest, so centre the
	   copy rather than letting short slides hang from the top. */
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}
/* A banner set to show whole gives the hero a floor: the height that image
   needs at full width, capped so the page below stays in view. Expressed on
   the container — an aspect-ratio on the slide itself would be resolved from
   the row height instead, blowing the slide out sideways. */
.saf-hero--whole .saf-hero__slides { min-height: min(78vh, calc(100vw / var(--saf-hero-ratio, 1.9))); }
.saf-hero__slide.is-active { opacity: 1; visibility: visible; }
.saf-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.55);
	border-radius: 0;
	background: rgba(19,20,23,0.35);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.saf-hero__arrow:hover { background: var(--saf-orange); border-color: var(--saf-orange); }
.saf-hero__arrow svg { width: 20px; height: 20px; display: block; }
.saf-hero__arrow--prev { left: var(--saf-gutter); }
.saf-hero__arrow--next { right: var(--saf-gutter); }
.saf-hero__dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 32px;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.saf-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,0.4);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}
.saf-hero__dot:hover { background: rgba(255,255,255,0.7); }
.saf-hero__dot.is-active { width: 28px; background: var(--saf-orange); }

@media (max-width: 900px) {
	.saf-hero__slide--whole { justify-content: flex-end; }
	.saf-hero__slide--whole .saf-hero__media img { object-fit: contain; object-position: center top; }
}

@media (max-width: 1100px) {
	/* The copy column reaches both gutters at this width, so side arrows would
	   land on the headline. Move the controls into a row beneath it. */
	.saf-hero--multi .saf-hero__inner { padding-bottom: 104px; }
	.saf-hero__arrow { top: auto; bottom: 24px; transform: none; width: 40px; height: 40px; }
	.saf-hero__arrow svg { width: 16px; height: 16px; }
	.saf-hero__dots { bottom: 39px; }
}

.saf-stats { border-top: 1px solid var(--saf-ink-2); background: var(--saf-ink); position: relative; }
.saf-stats__grid {
	max-width: var(--saf-max);
	margin: 0 auto;
	padding: 28px var(--saf-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.saf-stat { display: flex; flex-direction: column; gap: 4px; }
.saf-stat__big { font-family: var(--saf-display); font-weight: 700; font-size: 26px; color: var(--saf-orange); }
.saf-stat__small { font-size: 13px; color: var(--saf-grey); line-height: 1.4; }

/* ---------- Product cards ---------- */

.saf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.saf-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* auto-fit collapses empty tracks, so one or two cards stretch across the whole
   row. Cap them at card width instead — a category with a single product should
   show one normal-sized card, not one enormous one. */
.saf-grid > *:only-child { max-width: 340px; }
.saf-grid--wide > *:only-child { max-width: 400px; }
.saf-grid > *:first-child:nth-last-child(2),
.saf-grid > *:first-child:nth-last-child(2) ~ * { max-width: 400px; }

.saf-card {
	border: 1px solid var(--saf-line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: box-shadow .2s;
}
.saf-card:hover { box-shadow: 0 12px 32px rgba(19,20,23,0.10); }
.saf-card__media { position: relative; background: var(--saf-cream); height: 230px; overflow: hidden; }
.saf-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.saf-card:hover .saf-card__media img { transform: scale(1.06); }
.saf-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.saf-card__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--saf-teal); }
.saf-card__name { font-family: var(--saf-display); font-weight: 700; font-size: 17px; color: var(--saf-ink); }
.saf-card__meta { font-size: 13px; color: var(--saf-grey); }
.saf-card__prices { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.saf-card__now { font-weight: 700; font-size: 18px; }
.saf-card__was { font-size: 14px; color: var(--saf-grey-3); text-decoration: line-through; }

.saf-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 5px 10px;
	pointer-events: none;
}

/* ---------- Why choose (teal band) ---------- */

.saf-why { background: var(--saf-teal); padding: 72px 0; width: 100%; }
.saf-why__inner {
	max-width: var(--saf-max);
	margin: 0 auto;
	color: #fff;
	padding: 0 clamp(40px, 5vw, 72px);
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	align-items: center;
}
.saf-why__intro { flex: 1 1 380px; }
.saf-why__intro h2 { margin: 0 0 18px; }
.saf-why__intro p { font-size: 16px; line-height: 1.65; color: var(--saf-teal-soft); max-width: 440px; margin: 0; }
.saf-why__grid { flex: 1 1 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.saf-pillar {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	padding: 20px;
}
.saf-pillar__title { font-family: var(--saf-display); font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--saf-orange); }
.saf-pillar__body { font-size: 13px; line-height: 1.5; color: var(--saf-teal-soft); }

/* ---------- Split feature ---------- */

.saf-split {
	max-width: var(--saf-max);
	margin: 0 auto;
	padding: 24px var(--saf-gutter) 88px;
	width: 100%;
	display: flex;
	gap: 56px;
	align-items: center;
	flex-wrap: wrap;
}
.saf-split__media { flex: 1 1 380px; min-width: 280px; }
.saf-split__media img { width: 100%; height: 400px; object-fit: contain; }
.saf-split__body { flex: 1 1 420px; }
.saf-split__body h2 { margin: 0 0 18px; }
.saf-split__body > p { margin: 0 0 28px; }
.saf-ticks { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.saf-tick { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.saf-tick__mark {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--saf-orange);
	color: var(--saf-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 10px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---------- Post cards ---------- */

.saf-post {
	background: #fff;
	border: 1px solid var(--saf-line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.saf-post:hover { box-shadow: 0 12px 32px rgba(19,20,23,0.10); }
.saf-post__media { width: 100%; height: 190px; background: var(--saf-cream); }
.saf-post__media img { width: 100%; height: 100%; object-fit: cover; }
.saf-post__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; color: var(--saf-ink); }
.saf-post__meta { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.saf-post__tag { color: var(--saf-teal); }
.saf-post__date { color: var(--saf-grey-3); }
.saf-post__title { font-family: var(--saf-display); font-weight: 700; font-size: 17px; line-height: 1.35; }
.saf-post__blurb { font-size: 14px; line-height: 1.6; color: var(--saf-grey-2); margin: 0; }
.saf-post__more {
	margin-top: auto;
	font-weight: 600;
	font-size: 13px;
	color: var(--saf-ink);
	border-bottom: 2px solid var(--saf-orange);
	align-self: flex-start;
	padding-bottom: 2px;
}
.saf-post--home .saf-post__media { height: 180px; }
.saf-post--home .saf-post__body { padding: 22px; gap: 10px; }
.saf-post--home .saf-post__title { font-size: 16px; }

/* ---------- Blog page ---------- */

.saf-bloghero { background: var(--saf-ink); color: #fff; }
.saf-bloghero__inner { max-width: var(--saf-max); margin: 0 auto; padding: 64px var(--saf-gutter); width: 100%; }
.saf-bloghero__eyebrow { color: var(--saf-orange); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 12px; }
.saf-bloghero h1 { margin: 0 0 12px; font-family: var(--saf-display); font-weight: 800; font-size: clamp(32px, 4vw, 52px); }
.saf-bloghero p { color: var(--saf-grey-3); font-size: 16px; max-width: 520px; margin: 0; line-height: 1.6; }

.saf-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.saf-chip {
	border: 1px solid var(--saf-line);
	background: #fff;
	color: var(--saf-ink);
	padding: 10px 20px;
	font-family: var(--saf-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.saf-chip:hover { border-color: var(--saf-orange); color: var(--saf-orange); }
.saf-chip--active, .saf-chip[aria-current="true"] { background: var(--saf-ink); color: #fff; border-color: var(--saf-ink); }

.saf-featured {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--saf-line);
	overflow: hidden;
	margin-bottom: 48px;
}
.saf-featured:hover { box-shadow: 0 16px 40px rgba(19,20,23,0.10); }
.saf-featured__media { flex: 1 1 480px; min-width: 300px; min-height: 340px; position: relative; background: var(--saf-cream); }
.saf-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.saf-featured__body {
	flex: 1 1 380px;
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	color: var(--saf-ink);
}
.saf-featured__meta { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
.saf-featured__flag { background: var(--saf-orange); color: var(--saf-ink); padding: 5px 12px; }
.saf-featured__date { color: var(--saf-teal); }
.saf-featured__title { font-family: var(--saf-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; }
.saf-featured__blurb { font-size: 15px; line-height: 1.65; color: var(--saf-grey-2); margin: 0; }
.saf-featured__more { font-weight: 600; font-size: 14px; border-bottom: 2px solid var(--saf-orange); align-self: flex-start; padding-bottom: 3px; }

/* ---------- Product page ---------- */

.saf-crumbs { font-size: 13px; color: var(--saf-grey); margin-bottom: 28px; }
.saf-crumbs a { color: var(--saf-grey); }
.saf-crumbs a:hover { color: var(--saf-orange); }
.saf-crumbs__current { color: var(--saf-ink); font-weight: 600; }

.saf-pdp { max-width: var(--saf-max); margin: 0 auto; padding: 32px var(--saf-gutter) 88px; width: 100%; }
.saf-pdp__top { display: flex; gap: 56px; flex-wrap: wrap; }

.saf-gallery { flex: 1 1 440px; min-width: 300px; }
.saf-gallery__main { position: relative; background: var(--saf-cream); overflow: hidden; }
.saf-gallery__main img { width: 100%; height: 520px; object-fit: cover; transition: transform .35s ease; }
.saf-gallery__main:hover img { transform: scale(1.06); }
.saf-gallery__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 14px;
	pointer-events: none;
}
.saf-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.saf-gallery__thumb { overflow: hidden; background: var(--saf-cream); border: none; padding: 0; cursor: pointer; }
.saf-gallery__thumb img { width: 100%; height: 90px; object-fit: cover; transition: transform .35s ease; display: block; }
.saf-gallery__thumb:hover img { transform: scale(1.06); }
.saf-gallery__thumb[aria-current="true"] { outline: 2px solid var(--saf-orange); outline-offset: -2px; }

.saf-buy { flex: 1 1 420px; min-width: 300px; }
.saf-buy__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--saf-teal); margin-bottom: 12px; }
.saf-buy h1 { font-family: var(--saf-display); font-weight: 800; font-size: clamp(32px, 4vw, 46px); margin: 0 0 14px; }
.saf-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.saf-stars { color: var(--saf-orange); font-size: 16px; letter-spacing: 2px; }
.saf-rating__meta { font-size: 13px; color: var(--saf-grey); }
.saf-buy__desc { font-size: 16px; line-height: 1.65; color: var(--saf-grey-2); margin: 0 0 28px; }
.saf-buy__prices { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.saf-buy__now { font-family: var(--saf-display); font-weight: 800; font-size: 34px; }
.saf-buy__was { font-size: 19px; color: var(--saf-grey-3); text-decoration: line-through; }
.saf-buy__label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 12px; }
.saf-buy__label span { color: var(--saf-teal); }
.saf-flavors { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.saf-flavor {
	border: 1px solid var(--saf-line);
	background: #fff;
	color: var(--saf-ink);
	padding: 12px 20px;
	font-family: var(--saf-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}
.saf-flavor:hover { border-color: var(--saf-orange); }
.saf-flavor[aria-pressed="true"] { background: var(--saf-ink); color: #fff; border-color: var(--saf-ink); }

.saf-addrow { display: flex; gap: 14px; align-items: stretch; margin-bottom: 20px; flex-wrap: wrap; }
.saf-qty { display: flex; align-items: center; border: 1px solid var(--saf-line); overflow: hidden; }
.saf-qty button { background: none; border: none; width: 46px; height: 52px; font-size: 18px; cursor: pointer; color: var(--saf-ink); }
.saf-qty button:hover { color: var(--saf-orange); }
.saf-qty__val { min-width: 32px; text-align: center; font-weight: 700; font-size: 16px; }
.saf-addbtn {
	/* Flex-centred: as an <a> the label would otherwise sit at the top of the
	   fixed 52px box. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	min-width: 220px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	padding: 0 32px;
	height: 52px;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.saf-addbtn:hover { background: var(--saf-ink); color: #fff; }
.saf-addbtn[disabled] { background: var(--saf-line); color: var(--saf-grey); cursor: not-allowed; }
.saf-addbtn[disabled]:hover { background: var(--saf-line); color: var(--saf-grey); }
.saf-addform { display: contents; }
.saf-flavor[disabled] {
	opacity: .45;
	cursor: not-allowed;
	text-decoration: line-through;
}
.saf-flavor[disabled]:hover { border-color: var(--saf-line); }
.saf-assures { display: flex; gap: 20px; font-size: 13px; color: var(--saf-grey); margin-bottom: 32px; flex-wrap: wrap; }
.saf-benefits { border: 1px solid var(--saf-line); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.saf-benefits__title { font-family: var(--saf-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; }
.saf-benefit { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.saf-benefit__mark { color: var(--saf-orange); font-weight: 700; }

/* Tabs */
.saf-tabs { margin-top: 72px; }
.saf-tabs__list { display: flex; gap: 8px; border-bottom: 1px solid var(--saf-line); flex-wrap: wrap; }
.saf-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 16px 22px;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--saf-grey);
	cursor: pointer;
	min-height: 44px;
}
.saf-tab:hover { color: var(--saf-ink); }
.saf-tab[aria-selected="true"] { color: var(--saf-ink); border-bottom-color: var(--saf-orange); }
.saf-tabs__panel { padding: 36px 0; max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--saf-ink-3); }
.saf-tabs__panel[hidden] { display: none; }

/* Marquee */
.saf-marquee { background: var(--saf-ink); color: #fff; overflow: hidden; padding: 14px 0; }
.saf-marquee__track { display: flex; width: max-content; animation: saf-marquee 28s linear infinite; }
.saf-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 28px;
	font-family: var(--saf-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	white-space: nowrap;
}
.saf-marquee__item span { color: var(--saf-orange); }
@keyframes saf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.saf-marquee__track { animation: none; }
}

/* How it works */
.saf-how { max-width: var(--saf-max); margin: 0 auto; padding: 88px var(--saf-gutter) 40px; width: 100%; }
.saf-how h2 { margin: 0 0 48px; text-align: center; }
.saf-how__inner { display: flex; gap: 56px; flex-wrap: wrap; align-items: stretch; justify-content: center; }
.saf-how__media { flex: 1 1 380px; min-width: 280px; max-width: 520px; }
.saf-how__media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.saf-how__phases { flex: 1 1 420px; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.saf-phase { display: flex; gap: 20px; }
.saf-phase__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.saf-phase__chip {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	background: var(--saf-ink);
	color: #fff;
	padding: 8px 16px;
	white-space: nowrap;
}
.saf-phase__line { flex: 1; width: 2px; background: linear-gradient(var(--saf-orange), var(--saf-line)); margin-top: 8px; }
.saf-phase__title { font-family: var(--saf-display); font-weight: 700; font-size: 16px; margin-bottom: 10px; color: var(--saf-teal); }
.saf-phase__points { display: flex; flex-direction: column; gap: 8px; }
.saf-phase__point { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--saf-ink-3); }
.saf-phase__point span:first-child { color: var(--saf-orange); font-weight: 700; }

/* Burn list */
.saf-burn { max-width: var(--saf-max); margin: 0 auto; padding: 64px var(--saf-gutter); width: 100%; display: flex; gap: 64px; flex-wrap: wrap; align-items: center; }
.saf-burn__media { flex: 1 1 340px; min-width: 280px; max-width: 460px; display: flex; justify-content: center; }
.saf-burn__media img { width: 75%; max-width: 340px; height: 340px; object-fit: contain; }
.saf-burn__body { flex: 1 1 440px; }
.saf-burn__body h2 { margin: 0 0 32px; }
.saf-burnlist { display: flex; flex-direction: column; }
.saf-burnitem { display: flex; gap: 20px; }
.saf-burnitem__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 4px; }
.saf-burnitem__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--saf-orange); }
.saf-burnitem__line { flex: 1; width: 2px; background: var(--saf-line); }
.saf-burnitem__body { padding-bottom: 26px; }
.saf-burnitem__title { font-family: var(--saf-display); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.saf-burnitem__text { font-size: 14px; line-height: 1.55; color: var(--saf-grey-2); }

/* Us vs them */
.saf-vs { background: var(--saf-cream); }
.saf-vs__inner { max-width: 1080px; margin: 0 auto; padding: 80px var(--saf-gutter); width: 100%; }
.saf-vs h2 { margin: 0 0 48px; text-align: center; }
.saf-vs__table {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	background: #fff;
	overflow: hidden;
	border: 1px solid var(--saf-line);
}
.saf-vs__corner { padding: 20px 24px; border-bottom: 1px solid var(--saf-line); }
.saf-vs__head {
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--saf-line);
}
.saf-vs__head--ours { background: var(--saf-ink); color: #fff; }
.saf-vs__head--theirs { border-left: 1px solid var(--saf-line); }
.saf-vs__head img { width: 90px; height: 90px; object-fit: contain; }
.saf-vs__headline { font-family: var(--saf-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-align: center; }
.saf-vs__head--ours .saf-vs__headline { color: var(--saf-orange); }
.saf-vs__head--theirs .saf-vs__headline { color: var(--saf-grey); font-weight: 600; }
.saf-vs__row { display: contents; }
.saf-vs__label {
	padding: 16px 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--saf-line);
	display: flex;
	align-items: center;
}
.saf-vs__ours {
	background: var(--saf-ink);
	color: #fff;
	padding: 16px;
	text-align: center;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 14px;
	border-bottom: 1px solid var(--saf-ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.saf-vs__theirs {
	padding: 16px;
	text-align: center;
	font-size: 14px;
	color: var(--saf-grey);
	border-bottom: 1px solid var(--saf-line);
	border-left: 1px solid var(--saf-line);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Is it for you */
.saf-foryou { max-width: var(--saf-max); margin: 0 auto; padding: 80px var(--saf-gutter); width: 100%; display: flex; gap: 64px; flex-wrap: wrap; align-items: center; }
.saf-foryou__body { flex: 1.4 1 460px; }
.saf-foryou__body h2 { margin: 0 0 16px; }
.saf-foryou__body > p { font-size: 16px; line-height: 1.6; color: var(--saf-grey-2); margin: 0 0 24px; }
.saf-foryou__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.saf-foryou__item { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.saf-foryou__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--saf-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.saf-traits { display: flex; gap: 10px; flex-wrap: wrap; }
.saf-trait {
	border: 1px solid var(--saf-line);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.saf-trait span { color: var(--saf-orange); }
.saf-foryou__media { flex: 1 1 320px; min-width: 280px; max-width: 420px; }
.saf-foryou__media img { width: 100%; height: 400px; object-fit: contain; }

/* FAQ */
.saf-faq { max-width: var(--saf-max); margin: 0 auto; padding: 0 var(--saf-gutter) 96px; width: 100%; display: flex; gap: 64px; flex-wrap: wrap; align-items: flex-start; }
.saf-faq__body { flex: 1.4 1 480px; }
.saf-faq__body h2 { margin: 0 0 28px; }
.saf-faq__list { display: flex; flex-direction: column; gap: 12px; }
.saf-faq__item { border: 1px solid var(--saf-line); overflow: hidden; }
.saf-faq__q {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	font-family: var(--saf-body);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--saf-ink);
	min-height: 44px;
}
.saf-faq__q:hover { color: var(--saf-orange); }
.saf-faq__mark { color: var(--saf-orange); font-size: 18px; font-weight: 700; flex-shrink: 0; }
.saf-faq__a { padding: 0 22px 20px; font-size: 14px; line-height: 1.65; color: var(--saf-grey-2); }
.saf-faq__a[hidden] { display: none; }
.saf-faq__cta { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.saf-faq__cta span { font-size: 14px; color: var(--saf-grey-2); }
.saf-faq__media { flex: 1 1 320px; min-width: 280px; max-width: 420px; }
.saf-faq__media img { width: 100%; height: 440px; object-fit: cover; }

/* Reviews */
.saf-reviews { max-width: var(--saf-max); margin: 0 auto; padding: 0 var(--saf-gutter) 88px; width: 100%; }
.saf-reviews__score { display: flex; align-items: center; gap: 10px; }
.saf-reviews__score .saf-stars { font-size: 20px; }
.saf-reviews__num { font-family: var(--saf-display); font-weight: 800; font-size: 20px; }
.saf-review { border: 1px solid var(--saf-line); padding: 28px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.saf-review__top { display: flex; align-items: center; justify-content: space-between; }
.saf-review__date { font-size: 12px; color: var(--saf-grey); }
.saf-review__title { font-family: var(--saf-display); font-weight: 700; font-size: 15px; }
.saf-review__body { font-size: 14px; line-height: 1.6; color: var(--saf-grey-2); margin: 0; flex: 1; }
.saf-review__by { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.saf-review__name { font-weight: 700; }
.saf-review__verified { color: var(--saf-teal); font-weight: 600; }

/* Supplement facts panel */
.saf-facts { border: 2px solid var(--saf-ink); max-width: 560px; }
.saf-facts__title {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	background: var(--saf-ink);
	padding: 12px 16px;
}
.saf-facts__meta {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 6px solid var(--saf-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	font-size: 14px;
}
.saf-facts__meta > div { display: flex; gap: 6px; }
.saf-facts__meta dt { font-weight: 700; color: var(--saf-ink); }
.saf-facts__meta dt::after { content: ":"; }
.saf-facts__meta dd { margin: 0; color: var(--saf-grey-2); }

.saf-facts__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.saf-facts__table th,
.saf-facts__table td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--saf-line); }
.saf-facts__table thead th {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--saf-ink);
	border-bottom: 2px solid var(--saf-ink);
}
/* Amount and %DV are numeric columns; right-aligned with lining figures they
   scan down the column instead of drifting. */
.saf-facts__table thead th:not(:first-child),
.saf-facts__table td { text-align: right; font-variant-numeric: tabular-nums; }
.saf-facts__table tbody th { font-weight: 500; color: var(--saf-ink); }
.saf-facts__table tbody tr:last-child th,
.saf-facts__table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 560px) {
	.saf-facts__table th,
	.saf-facts__table td { padding: 8px 10px; font-size: 13px; }
}

/* Legal and policy pages */
.saf-legal { max-width: 860px; padding-top: 44px; padding-bottom: 88px; }
.saf-legal__updated {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--saf-grey);
	margin: 0 0 28px;
}

.saf-legal__toc {
	border: 1px solid var(--saf-line);
	background: var(--saf-cream);
	padding: 22px 26px;
	margin-bottom: 40px;
}
.saf-legal__toctitle {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}
.saf-legal__toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.saf-legal__toc a { color: var(--saf-teal); font-size: 15px; text-underline-offset: 2px; }

/* Prose. Long policy text needs a comfortable measure and clear hierarchy more
   than it needs styling. */
.saf-legal__body { font-size: 16px; line-height: 1.75; color: var(--saf-grey-2); }
.saf-legal__body h2 {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--saf-ink);
	margin: 46px 0 14px;
	scroll-margin-top: 96px;
}
.saf-legal__body h3 {
	font-family: var(--saf-body);
	font-weight: 700;
	font-size: 17px;
	color: var(--saf-ink);
	margin: 30px 0 10px;
}
/* The imported policy pages mark sections with h4, so it has to carry the same
   weight as h2 rather than rendering as small text. */
.saf-legal__body h4 {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--saf-ink);
	margin: 36px 0 12px;
	scroll-margin-top: 96px;
}
.saf-legal__body p { margin: 0 0 18px; }
.saf-legal__body ul,
.saf-legal__body ol { margin: 0 0 20px; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.saf-legal__body a { color: var(--saf-teal); text-underline-offset: 2px; }
.saf-legal__body strong { color: var(--saf-ink); }
.saf-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.saf-legal__body th,
.saf-legal__body td { text-align: left; padding: 10px 14px; border: 1px solid var(--saf-line); vertical-align: top; }
.saf-legal__body th { background: var(--saf-cream); font-weight: 700; color: var(--saf-ink); }
.saf-legal__body img { max-width: 100%; height: auto; }
.saf-legal__empty { color: var(--saf-grey); font-style: italic; }

/* Write a review */
.saf-review-write { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--saf-line); }
.saf-review-write__note { font-size: 14px; color: var(--saf-grey-2); margin: 0; text-align: center; }
.saf-review-write__note a { color: var(--saf-teal); font-weight: 600; }
.saf-review-write__title {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.04em;
	margin: 0 0 20px;
	text-align: center;
}
.saf-review-form { max-width: 640px; }
.saf-review-form fieldset { border: 0; padding: 0; margin: 0; }
.saf-review-form legend { font-size: 14px; color: var(--saf-grey-2); padding: 0; margin-bottom: 8px; }
.saf-review-form__note { grid-column: 1 / -1; font-size: 13px; color: var(--saf-grey); text-align: center; margin: 4px 0 0; }

/*
 * The radios are laid out 5 to 1 in the markup so a plain sibling selector can
 * light up every star to the left of the one under the cursor. Direction is
 * flipped back to row-reverse so they still read 1 to 5 on screen.
 */
.saf-stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.saf-stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.saf-stars-input label { font-size: 26px; line-height: 1; color: var(--saf-line); cursor: pointer; }
.saf-stars-input label:hover,
.saf-stars-input label:hover ~ label,
.saf-stars-input input:checked ~ label { color: var(--saf-orange); }
.saf-stars-input input:focus-visible + label { outline: 2px solid var(--saf-orange); outline-offset: 2px; }

/* Sticky add to cart */
.saf-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--saf-line);
	box-shadow: 0 -8px 24px rgba(19,20,23,0.08);
	transform: translateY(100%);
	/* Same reason as the cart drawer. */
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}
.saf-sticky.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform .25s ease, visibility 0s;
}
.saf-sticky__inner { max-width: var(--saf-max); margin: 0 auto; padding: 12px var(--saf-gutter); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* `.woocommerce img { height:auto }` outranks a lone class on product pages. */
.saf-sticky img.saf-sticky__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: var(--saf-cream);
	flex-shrink: 0;
}
.saf-sticky__info { flex: 1; min-width: 160px; }
.saf-sticky__name { font-family: var(--saf-display); font-weight: 800; font-size: 15px; }
.saf-sticky__meta { font-size: 13px; color: var(--saf-grey); }
.saf-sticky__meta strong { font-weight: 700; color: var(--saf-ink); }
.saf-sticky__meta s { text-decoration: line-through; }
.saf-sticky__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	padding: 14px 36px;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	cursor: pointer;
	min-height: 44px;
}
.saf-sticky__btn:hover { background: var(--saf-ink); color: #fff; }

/* Back to top */
.saf-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 55;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--saf-ink);
	color: #fff;
	border: none;
	cursor: pointer;
}
.saf-totop.is-visible { display: flex; }
.saf-totop:hover { background: var(--saf-orange); color: var(--saf-ink); }

/* Cart drawer */
.saf-cart__overlay {
	position: fixed;
	inset: 0;
	background: rgba(19,20,23,0.45);
	z-index: 70;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.saf-cart__overlay.is-open { opacity: 1; pointer-events: auto; }
.saf-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	background: #fff;
	z-index: 71;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	/* Hidden rather than merely off-screen: iOS Safari counts a transformed
	   fixed element in the scrollable area, which reads as blank space past
	   the end of the page. The delay keeps it visible while it slides out. */
	visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
	box-shadow: -12px 0 40px rgba(19,20,23,0.18);
}
.saf-cart.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform .25s ease, visibility 0s;
}
.saf-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid var(--saf-line);
}
.saf-cart__title { font-family: var(--saf-display); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; }
.saf-cart__close { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--saf-ink); width: 44px; height: 44px; }
.saf-cart__close:hover { color: var(--saf-orange); }
.saf-cart__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.saf-cart__empty { padding: 48px 0; text-align: center; color: var(--saf-grey); font-size: 14px; }
.saf-cart__empty strong { display: block; font-family: var(--saf-display); font-weight: 700; font-size: 15px; color: var(--saf-ink); margin-bottom: 8px; }
.saf-cart__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.saf-cart__foot { border-top: 1px solid var(--saf-line); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* WooCommerce mini-cart, restyled to the drawer design.

   Every selector here is scoped `.saf-cart ul.cart_list li …` on purpose:
   Woo ships rules like `.woocommerce ul.cart_list li a { display:block }`, and
   anything shallower loses the specificity contest no matter the load order. */
.saf-cart ul.cart_list,
.saf-cart ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }

.saf-cart ul.cart_list li.woocommerce-mini-cart-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 0;
	margin: 0;
	border-bottom: 1px solid var(--saf-line-2);
}

.saf-cart ul.cart_list li > a:not(.remove) {
	order: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 0;
	padding: 0;
	color: var(--saf-ink);
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.35;
}
.saf-cart ul.cart_list li > a:not(.remove):hover { color: var(--saf-orange); }

.saf-cart ul.cart_list li img,
.saf-cart ul.woocommerce-mini-cart li img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	background: var(--saf-cream);
	flex-shrink: 0;
	margin: 0;
	float: none;
}

.saf-cart ul.cart_list li .quantity {
	order: 3;
	font-size: 13px;
	font-weight: 600;
	color: var(--saf-grey-2);
	white-space: nowrap;
	flex-shrink: 0;
}

.saf-cart ul.cart_list li .variation {
	margin: 4px 0 0;
	font-family: var(--saf-body);
	font-weight: 500;
	font-size: 12px;
	color: var(--saf-grey);
}
.saf-cart ul.cart_list li .variation dt,
.saf-cart ul.cart_list li .variation dd { display: inline; margin: 0; }

/* Remove control: right of the row, vertically centred. Woo sizes this itself
   and paints it `color: #a00 !important`. */
.saf-cart ul.cart_list li a.remove,
.saf-cart ul.cart_list li a.remove_from_cart_button {
	order: 4;
	margin: 0 0 0 auto;
	align-self: center;
	width: 32px !important;
	height: 32px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	float: none;
	border: 1px solid var(--saf-line);
	border-radius: 0;
	background: transparent !important;
	color: var(--saf-grey) !important;
	font-size: 18px !important;
	line-height: 1;
	text-decoration: none;
}
.saf-cart ul.cart_list li a.remove:hover,
.saf-cart ul.cart_list li a.remove_from_cart_button:hover {
	border-color: var(--saf-orange);
	color: var(--saf-orange) !important;
	background: var(--saf-cream) !important;
}

/* We render our own totals and checkout button in the drawer footer. */
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons { display: none; }
.saf-cart__promo { display: flex; gap: 8px; }
.saf-cart__promo input {
	flex: 1;
	border: 1px solid var(--saf-line);
	padding: 12px 14px;
	font-family: var(--saf-body);
	font-size: 14px;
	outline: none;
	min-width: 0;
	text-transform: uppercase;
}
.saf-cart__promo button {
	background: var(--saf-ink);
	color: #fff;
	border: none;
	padding: 0 20px;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	cursor: pointer;
	min-height: 44px;
}
.saf-cart__promo button:hover { background: var(--saf-orange); color: var(--saf-ink); }
.saf-cart__line { display: flex; justify-content: space-between; font-size: 14px; color: var(--saf-grey-2); }
.saf-cart__line--discount span:last-child { color: var(--saf-teal); }
/* Shipping that has no answer yet, said quietly rather than as a price. */
.saf-cart__pending { font-size: 13px; color: var(--saf-grey); }
/* The gap the itemised lines now fill was the whole bug: subtotal, then
   total, with nothing accounting for the difference. Tighten the stack so
   four rows read as one block rather than a list. */
.saf-cart__foot .saf-cart__line + .saf-cart__line { margin-top: -4px; }
.saf-cart__total { display: flex; justify-content: space-between; font-family: var(--saf-display); font-weight: 800; font-size: 17px; color: var(--saf-ink); }
.saf-cart__checkout {
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	padding: 16px 0;
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.08em;
	cursor: pointer;
	text-align: center;
}
.saf-cart__checkout:hover { background: var(--saf-ink); color: #fff; }
.saf-cart__note { font-size: 12px; color: var(--saf-grey); text-align: center; }

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

.saf-footer { background: var(--saf-ink); color: #fff; }
.saf-footer__inner { max-width: var(--saf-max); margin: 0 auto; padding: 64px var(--saf-gutter) 32px; width: 100%; }
.saf-footer__cols { display: flex; gap: 48px; flex-wrap: wrap; padding-bottom: 48px; border-bottom: 1px solid var(--saf-ink-2); }
.saf-footer__brand { flex: 2 1 300px; display: flex; flex-direction: column; gap: 20px; }
.saf-footer__brand img { height: 40px; width: fit-content; }
.saf-footer__brand p { font-size: 14px; line-height: 1.6; color: var(--saf-grey); max-width: 320px; margin: 0; }
.saf-footer__brand a { color: var(--saf-orange); }
.saf-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.saf-social li { margin: 0; }
.saf-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--saf-ink-3);
	color: var(--saf-grey-3);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.saf-social a:hover { background: var(--saf-orange); border-color: var(--saf-orange); color: var(--saf-ink); }
.saf-footer__col { flex: 1 1 150px; display: flex; flex-direction: column; gap: 12px; }
/* wp_nav_menu() hands back bare <li>s here (items_wrap is '%3$s'), and a
   flex item that is still a list-item keeps its marker. */
.saf-footer__col li { list-style: none; margin: 0; }
.saf-footer__title { font-family: var(--saf-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 6px; }
.saf-footer__col a { color: var(--saf-grey-3); font-size: 14px; }
.saf-footer__col a:hover { color: var(--saf-orange); }
/* With four link columns the signup wraps to its own row; the cap keeps the
   field from stretching the full width of the footer when it does. */
.saf-footer__signup { flex: 1 1 240px; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.saf-footer__form { display: flex; gap: 8px; }
.saf-footer__form input {
	flex: 1;
	background: var(--saf-ink-2);
	border: 1px solid var(--saf-ink-3);
	padding: 12px 18px;
	color: #fff;
	font-family: var(--saf-body);
	font-size: 14px;
	outline: none;
	min-width: 0;
}
.saf-footer__form button {
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	padding: 0 22px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	min-height: 44px;
}
.saf-footer__form button:hover { background: #fff; }
.saf-footer__fineprint { font-size: 12px; color: var(--saf-grey-2); margin: 0; line-height: 1.5; }
.saf-footer__legal {
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--saf-grey-2);
}

/* ---------- Reveal animation ---------- */

@keyframes saf-rise {
	from { opacity: 0; transform: translateY(42px); }
	to { opacity: 1; transform: translateY(0); }
}
body.saf-anim .saf-reveal { opacity: 0; }
body.saf-anim .saf-reveal.saf-in { animation: saf-rise .7s cubic-bezier(.22,1,.36,1) forwards; }

/* Grids come in one item at a time. The parent carries .saf-reveal so the
   observer still drives it; the children take over the animation. */
body.saf-anim .saf-stagger.saf-reveal,
body.saf-anim .saf-stagger.saf-reveal.saf-in { opacity: 1; animation: none; }
body.saf-anim .saf-stagger > * { opacity: 0; }
body.saf-anim .saf-stagger.saf-in > * { animation: saf-rise .6s cubic-bezier(.22,1,.36,1) both; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(2) { animation-delay: 70ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(3) { animation-delay: 140ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(4) { animation-delay: 210ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(5) { animation-delay: 280ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(6) { animation-delay: 350ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(7) { animation-delay: 420ms; }
body.saf-anim .saf-stagger.saf-in > *:nth-child(8) { animation-delay: 490ms; }
/* Past eight the wait starts to read as a stall, so the rest arrive together. */
body.saf-anim .saf-stagger.saf-in > *:nth-child(n+9) { animation-delay: 520ms; }

/* Cross-document page transitions. Chrome and Safari honour this; anywhere
   else the navigation is simply instant, as it is today. */
@view-transition { navigation: auto; }

/* The chrome stays put instead of cross-fading with the page under it. */
.saf-promo { view-transition-name: saf-promo; }
.saf-header { view-transition-name: saf-header; }

::view-transition-old(root) { animation: saf-page-out .16s ease both; }
::view-transition-new(root) { animation: saf-page-in .34s cubic-bezier(.22,1,.36,1) both; }

@keyframes saf-page-out { to { opacity: 0; } }
@keyframes saf-page-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	body.saf-anim .saf-reveal,
	body.saf-anim .saf-stagger > * { opacity: 1; animation: none; }
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}

/* ---------- Accessibility ---------- */

.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;
}
.saf-skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--saf-ink);
	color: #fff;
	padding: 12px 20px;
}
:focus-visible { outline: 2px solid var(--saf-orange); outline-offset: 2px; }

/* ---------- Logged-in admin bar ---------- */

/* WordPress fixes its 32px bar over the top of the viewport, so anything
   sticky or fixed at top:0 hides behind it. Below 601px WP switches the bar to
   position:absolute and it scrolls away, so the offset goes back to zero. */
body.admin-bar .saf-header { top: 32px; }
body.admin-bar .saf-cart { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .saf-header { top: 46px; }
	body.admin-bar .saf-cart { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .saf-header { top: 0; }
	body.admin-bar .saf-cart { top: 0; }
}

/* ---------- Hamburger ---------- */

.saf-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	order: 2;
	margin-left: auto;
}
.saf-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--saf-ink);
	transition: transform .2s ease, opacity .2s ease;
}
.saf-header.is-nav-open .saf-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.saf-header.is-nav-open .saf-burger span:nth-child(2) { opacity: 0; }
.saf-header.is-nav-open .saf-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

@media (max-width: 900px) {
	.saf-why__grid { grid-template-columns: 1fr; }

	/* Keep the comparison three-across — the values are short, and stacking
	   the header away from its rows is what made this unreadable. */
	.saf-vs__table { grid-template-columns: 1.25fr 1fr 1fr; }
	.saf-vs__row { display: contents; }
	.saf-vs__head img { width: 64px; height: 64px; }
	.saf-vs__headline { font-size: 11px; letter-spacing: 0.04em; }
	.saf-vs__label { padding: 14px 12px; font-size: 12px; }
	.saf-vs__ours, .saf-vs__theirs { padding: 14px 8px; font-size: 13px; }
	.saf-vs__inner { padding: 56px var(--saf-gutter); }

	.saf-gallery__main img { height: 380px; }

	/* The bar collapses to logo + burger + cart; the nav becomes a panel. */
	.saf-burger { display: flex; }

	.saf-header__inner { min-height: 64px; padding: 10px var(--saf-gutter); gap: 8px; }
	/* One row: logo | utilities | burger. */
	.saf-header__logo { order: 1; margin-right: auto; }
	.saf-header__logo img { height: 30px; }
	.saf-utils { order: 2; gap: 2px; }
	.saf-burger { order: 3; margin-left: 0; }

	.saf-search { flex: 0 0 100%; width: 100%; order: 4; margin-top: 4px; }
	.saf-header.is-search-open .saf-header__inner { padding-bottom: 12px; }
	.saf-search__results { top: calc(100% + 6px); max-height: 60vh; }
	.saf-search__thumb { width: 46px; height: 46px; }

	.saf-nav {
		display: none;
		order: 4;
		/* Own row: the base rule's flex:1 would otherwise shrink it. */
		flex: 0 0 100%;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 4px 0 12px;
	}
	.saf-header.is-nav-open .saf-nav { display: flex; }
	.saf-nav li { list-style: none; }
	.saf-nav a {
		display: block;
		padding: 15px 4px;
		font-size: 13px;
		border-bottom: 1px solid var(--saf-line);
	}
	.saf-nav a:hover { background: none; }

	/* The mega panel drops inline under the nav rather than floating. */
	.saf-mega {
		position: static;
		box-shadow: none;
		border-bottom: none;
		border-top: 1px solid var(--saf-line);
	}
	.saf-mega__inner { flex-direction: column; gap: 24px; padding: 20px var(--saf-gutter) 24px; }
	.saf-mega__feature { display: none; }

	/* Both new heroes match the home hero's mobile scale. */
	.saf-story-hero__title,
	.saf-ws-hero__title { font-size: clamp(28px, 8vw, 34px); }
	.saf-story-hero__body,
	.saf-ws-hero__body { font-size: 16px; }
	.saf-story-card__body { font-size: 15px; }
	.saf-story-quote__text { font-size: 20px; line-height: 1.42; }
	.saf-story-quote__eyebrow { font-size: 12px; margin-bottom: 18px; }
	.saf-ws-card { padding: 34px 22px 30px; }
	.saf-ws-card__rule { margin-bottom: 18px; }
	.saf-ws-dark__title { font-size: clamp(24px, 7vw, 30px); }
	.saf-mega__all { padding: 14px var(--saf-gutter); }

	.saf-ws-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
	.saf-ws-hero__media { padding: 0; justify-content: center; }
	.saf-ws-hero__media::before { display: none; }
	.saf-ws-partner { padding: 56px 0 64px; }
	.saf-ws-cards { grid-template-columns: 1fr; gap: 16px; }
	.saf-ws-card { padding: 40px 24px 32px; }
	.saf-ws-dark { padding: 64px 0; }
	.saf-ws-split { grid-template-columns: 1fr; gap: 32px; }
	.saf-ws-split + .saf-ws-split { margin-top: 64px; }
	/* Keep the photo above the copy in both halves when they stack. */
	.saf-ws-split--flip .saf-ws-split__media { order: -1; }
	.saf-ws-apply { padding: 56px 0 72px; }
	.saf-ws-form { grid-template-columns: 1fr; }
	.saf-ws-field--50 { grid-column: 1 / -1; }
	.saf-ws-form__submit .saf-btn { width: 100%; }

	.saf-story-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
	.saf-story-hero__media { padding: 0; justify-content: center; }
	.saf-story-hero__media::before { display: none; }
	.saf-story-intro { padding-top: 56px; }
	.saf-story-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
	.saf-story-col { gap: 40px; }
	.saf-story-col--offset { padding-top: 0; }
	.saf-story-rail { display: none; }
	.saf-story-card__icon { display: none; }
	.saf-story-quote { padding: 64px 0; }

	/* Hero: the headline must be free to wrap, or it widens the whole page. */
	.saf-hero h1 .saf-nowrap { white-space: normal; }
	.saf-hero__inner { padding: 56px var(--saf-gutter) 64px; }
	.saf-hero h1 { font-size: clamp(30px, 8vw, 46px); margin-bottom: 18px; }
	.saf-hero p { font-size: 16px; margin-bottom: 28px; }
	.saf-hero__scrim {
		background: linear-gradient(180deg, rgba(19,20,23,0.72) 0%, rgba(19,20,23,0.84) 55%, rgba(19,20,23,0.94) 100%);
	}

	.saf-section { padding: 56px 0; }
	.saf-split, .saf-burn, .saf-foryou, .saf-faq { gap: 32px; }
	.saf-split { padding-bottom: 56px; }
	.saf-split__media img { height: 300px; }
	.saf-why { padding: 56px 0; }
	.saf-why__inner { padding: 0 var(--saf-gutter); gap: 32px; }

	/* ----- Product page ----- */

	.saf-pdp { padding: 24px var(--saf-gutter) 56px; }
	.saf-pdp__top { gap: 32px; }

	/* Quantity and add-to-cart share a row; the 220px floor pushed the
	   button onto its own line. */
	.saf-addbtn { min-width: 0; }

	/* Tabs scroll sideways instead of stacking three deep. */
	.saf-tabs { margin-top: 40px; }
	.saf-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.saf-tabs__list::-webkit-scrollbar { display: none; }
	.saf-tab { white-space: nowrap; padding: 14px 16px; }
	.saf-tabs__panel { padding: 24px 0; font-size: 15px; }

	.saf-how { padding: 56px var(--saf-gutter) 32px; }
	.saf-how h2 { margin-bottom: 32px; }
	.saf-how__inner { gap: 32px; }
	.saf-how__media img { min-height: 0; height: 280px; }

	.saf-burn { padding: 40px var(--saf-gutter); gap: 32px; }
	.saf-burn__media img { width: 100%; height: 260px; }

	.saf-foryou { padding: 56px var(--saf-gutter); }
	.saf-foryou__media img { height: 300px; }

	.saf-faq { padding: 0 var(--saf-gutter) 64px; }
	.saf-faq__media img { height: 300px; }

	.saf-reviews { padding: 0 var(--saf-gutter) 56px; }

	/* ----- Blog collection ----- */

	.saf-bloghero__inner { padding: 48px var(--saf-gutter); }
	.saf-bloghero p { font-size: 15px; }

	/* Twenty categories stacked into a 476px wall before any content.
	   One swipeable row instead. */
	.saf-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-bottom: 28px;
		padding-bottom: 4px;
	}
	.saf-chips::-webkit-scrollbar { display: none; }
	.saf-chip { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; min-height: 40px; }

	.saf-featured { margin-bottom: 32px; }
	.saf-featured__body { padding: 24px; gap: 12px; }
	.saf-featured__title { font-size: clamp(20px, 6vw, 26px); }
	.saf-featured__blurb { font-size: 14px; }
}

@media (max-width: 640px) {
	/* The bar carries logo, search, cart and burger only — the rest would push
	   it onto a second row at 375px. Favourites has its own row in the menu,
	   and the account link lives there too. */
	.saf-utils .saf-iconbtn { display: none; }
	.saf-utils .saf-iconbtn[data-saf-search-toggle] { display: flex; width: 38px; }
	.saf-cartbtn__label { display: none; }
	.saf-cartbtn { padding: 10px 12px; gap: 7px; }
	.saf-header__logo img { height: 28px; }

	/* Two stats per row reads better than four stacked. */
	.saf-stats__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 24px var(--saf-gutter); }
	.saf-stat__big { font-size: 22px; }
	.saf-stat__small { font-size: 12px; }

	/* Full-width CTAs — easier targets than side-by-side pills. */
	.saf-hero__ctas { gap: 12px; }
	.saf-hero__ctas .saf-btn { flex: 1 1 100%; }

	.saf-card__media { height: 200px; }
	.saf-sechead { margin-bottom: 28px; gap: 12px; }
	.saf-h2 { font-size: clamp(24px, 7vw, 32px); }

	.saf-post__media { height: 170px; }
	.saf-featured__media { min-height: 220px; }

	/* Product page at phone width. */
	.saf-gallery__main img { height: 320px; }
	.saf-gallery__thumb img { height: 72px; }
	.saf-buy h1 { font-size: clamp(28px, 8vw, 38px); }
	.saf-buy__now { font-size: 28px; }
	.saf-buy__desc { font-size: 15px; }
	.saf-flavor { padding: 11px 16px; font-size: 12px; }

	/* The sticky bar was 125px tall — two wrapped rows. Keep it to one. */
	.saf-sticky__inner { gap: 10px; padding: 10px var(--saf-gutter); flex-wrap: nowrap; }
	.saf-sticky img.saf-sticky__thumb { width: 40px; height: 40px; }
	.saf-sticky__info { min-width: 0; }
	.saf-sticky__name { font-size: 13px; }
	.saf-sticky__meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.saf-sticky__btn { padding: 12px 18px; font-size: 12px; flex-shrink: 0; }

	.saf-vs__label { padding: 12px 10px; font-size: 11px; }
	.saf-vs__ours, .saf-vs__theirs { padding: 12px 6px; font-size: 12px; }
	.saf-vs__head { padding: 12px 8px; }
	.saf-vs__head img { width: 52px; height: 52px; }

	.saf-review { padding: 22px; }
	.saf-phase__chip { font-size: 12px; padding: 7px 12px; }

	.saf-footer__cols { gap: 32px; padding-bottom: 32px; }
	.saf-footer__inner { padding: 48px var(--saf-gutter) 24px; }
	.saf-footer__legal { flex-direction: column; gap: 8px; }
}

@media (max-width: 420px) {
	.saf-promo { font-size: 12px; padding: 8px 12px; }
	.saf-hero__inner { padding: 48px var(--saf-gutter) 56px; }
}

/* ---------- Shop / category archive ---------- */

.saf-shophero { background: var(--saf-ink); color: #fff; }
.saf-shophero__inner { max-width: var(--saf-max); margin: 0 auto; padding: 72px var(--saf-gutter) 80px; width: 100%; }
.saf-shophero__eyebrow {
	color: var(--saf-orange);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 14px;
}
.saf-shophero h1 {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(36px, 6vw, 68px);
	line-height: 1.05;
	margin: 0;
	letter-spacing: 0.01em;
}
.saf-shophero__intro { margin-top: 16px; max-width: 560px; color: var(--saf-grey-3); font-size: 16px; line-height: 1.6; }

.saf-shop {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 56px;
	padding-top: 48px;
	padding-bottom: 88px;
	align-items: start;
}

/* Facets */

.saf-facets__toggle { display: none; }

.saf-facet { margin-bottom: 36px; }
.saf-facet__title {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--saf-teal);
	margin: 0 0 16px;
	text-transform: uppercase;
}
.saf-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.saf-facet__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 0;
	color: var(--saf-ink);
	font-size: 15px;
	min-height: 44px;
}
.saf-facet__item:hover { color: var(--saf-orange); }
.saf-facet__box {
	width: 20px;
	height: 20px;
	border: 1px solid var(--saf-grey-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--saf-ink);
	background: #fff;
}
.saf-facet__item[aria-current="true"] .saf-facet__box {
	background: var(--saf-orange);
	border-color: var(--saf-orange);
	color: var(--saf-ink);
}
.saf-facet__item[aria-current="true"] .saf-facet__label { font-weight: 600; }
.saf-facet__label { flex: 1; min-width: 0; }
.saf-facet__count { color: var(--saf-grey-3); font-size: 13px; }

.saf-facet__price { display: flex; flex-direction: column; gap: 10px; }
.saf-facet__price input[type="range"] {
	width: 100%;
	accent-color: var(--saf-orange);
	height: 24px;
}
.saf-facet__range { display: flex; justify-content: space-between; font-size: 13px; color: var(--saf-grey); }
.saf-facet__range del, .saf-facet__range ins { text-decoration: none; }
.saf-facet__apply {
	background: var(--saf-ink);
	color: #fff;
	border: none;
	padding: 12px 20px;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	cursor: pointer;
}
.saf-facets__clear { width: 100%; padding: 14px 20px; font-size: 13px; }
.saf-facets__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 8px;
	padding: 0 6px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-family: var(--saf-body);
	font-size: 12px;
	font-weight: 700;
}

/* Toolbar */

.saf-shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.saf-shop__count { font-size: 15px; color: var(--saf-grey-2); }
.saf-shop__count strong { color: var(--saf-ink); font-weight: 700; }
.saf-shop__sort select {
	appearance: none;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23131417' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 13px 44px 13px 18px;
	font-family: var(--saf-body);
	font-size: 14px;
	color: var(--saf-ink);
	cursor: pointer;
	min-height: 44px;
}
.saf-shop__sort select:hover { border-color: var(--saf-orange); }

/* Card rating (shop cards show a rating where home cards show flavours) */

.saf-card__rating { display: flex; align-items: center; gap: 8px; }
.saf-card__rating .saf-stars { font-size: 14px; letter-spacing: 1px; }
.saf-card__ratingval { font-size: 13px; color: var(--saf-grey-2); font-weight: 600; }

.saf-shop__empty { padding: 64px 0; text-align: center; }
.saf-shop__empty .saf-lede { margin: 12px 0 24px; }
.saf-shop__pagination { margin-top: 40px; }

@media (max-width: 900px) {
	.saf-shop { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 56px; }
	.saf-shophero__inner { padding: 48px var(--saf-gutter) 56px; }

	/* Filters collapse behind a toggle rather than pushing the grid down. */
	.saf-facets__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: 1px solid var(--saf-line);
		padding: 14px 18px;
		font-family: var(--saf-display);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.1em;
		color: var(--saf-ink);
		cursor: pointer;
		min-height: 44px;
	}
	.saf-facets__panel { display: none; padding-top: 20px; }
	.saf-facets.is-open .saf-facets__panel { display: block; }
	.saf-facets.is-open .saf-facets__toggle span[aria-hidden] { transform: rotate(180deg); }
	.saf-facets__toggle span[aria-hidden] { transition: transform .2s ease; display: inline-block; }
	.saf-facet { margin-bottom: 28px; }

	.saf-shop__bar { gap: 12px; margin-bottom: 20px; }
	.saf-shop__count { font-size: 14px; }

	.saf-nav a.saf-nav__extra { display: block; }

	/* Empty states read as a hole in the page at phone width. */
	.saf-shop__empty { padding: 40px 0; }
	.saf-shop__empty .saf-lede { font-size: 15px; max-width: 34ch; margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
	.saf-shop__bar { margin-bottom: 20px; }
	.saf-shop__sort { width: 100%; }
	.saf-shop__sort select { width: 100%; }
}

/* ---------- Favourites ---------- */

/* Only in the mobile nav panel: on desktop the header heart does this job.
   Matches `.saf-nav a` depth, which would otherwise keep it visible. */
.saf-nav a.saf-nav__extra { display: none; }
.saf-nav__extracount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 8px;
	padding: 0 5px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-family: var(--saf-body);
	font-size: 11px;
	font-weight: 700;
}
.saf-nav__extracount[hidden] { display: none; }

.saf-fav { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }
.saf-fav__btn {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.92);
	border: 1px solid var(--saf-line);
	color: var(--saf-ink);
	cursor: pointer;
	padding: 0;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.saf-fav__btn:hover { color: var(--saf-orange); border-color: var(--saf-orange); background: #fff; }
.saf-fav__btn[aria-pressed="true"] { color: var(--saf-orange); border-color: var(--saf-orange); }
.saf-fav__btn[disabled] { opacity: .6; cursor: progress; }
.saf-fav--gallery { top: 16px; right: 16px; }
.saf-fav--gallery .saf-fav__btn { width: 44px; height: 44px; }

.saf-iconbtn--fav { position: relative; }
.saf-iconbtn__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-family: var(--saf-body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.saf-iconbtn__count[hidden] { display: none; }

/* The card media is the positioning context for the heart. */
.saf-card { position: relative; }
.saf-gallery__main { position: relative; }

/* ---------- Cart & checkout (WooCommerce blocks) ---------- */

/* Woo's cart and checkout are React blocks with their own styles. These rules
   pull them onto the SwoleAF type, colour and edge treatment; selectors match
   Woo's own depth so they win without a wall of !important. */

.saf-store-page { padding-top: 48px; padding-bottom: 88px; }
.saf-store-page .wp-block-woocommerce-cart,
.saf-store-page .wp-block-woocommerce-checkout { margin: 0; max-width: none; }

/* Layout: main column plus summary. Woo sizes these two columns to exactly
   fill the row, so adding a flex gap wraps the sidebar onto its own line. */
.saf-store-page .wc-block-components-sidebar { background: none; }
.saf-store-page .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.saf-store-page .wc-block-cart__totals-title,
.saf-store-page .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { padding-left: 0; padding-right: 0; }
.saf-store-page .wc-block-components-sidebar .wc-block-components-panel,
.saf-store-page .wc-block-cart__sidebar .is-large { border: 1px solid var(--saf-line); border-radius: 0; padding: 24px; }

/* Headings */
.saf-store-page h1, .saf-store-page h2, .saf-store-page h3,
.saf-store-page .wc-block-components-title,
.saf-store-page .wc-block-cart__totals-title,
.saf-store-page .wc-block-components-checkout-step__title {
	font-family: var(--saf-display);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--saf-ink);
}
.saf-store-page .wc-block-components-checkout-step__title { font-size: 18px; }
.saf-store-page .wc-block-components-checkout-step__description { color: var(--saf-grey-2); }

/* Cart line items */
.saf-store-page .wc-block-cart-items__header {
	font-family: var(--saf-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--saf-grey);
	border-bottom: 1px solid var(--saf-line);
}
.saf-store-page .wc-block-cart-items__row { border-bottom: 1px solid var(--saf-line-2); }
.saf-store-page .wc-block-cart-item__image img { border-radius: 0; background: var(--saf-cream); }
.saf-store-page .wc-block-components-product-name {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--saf-ink);
	text-decoration: none;
}
.saf-store-page .wc-block-components-product-name:hover { color: var(--saf-orange); }
.saf-store-page .wc-block-components-product-metadata { color: var(--saf-grey); font-size: 13px; }
.saf-store-page .wc-block-components-product-price__value { font-weight: 700; }
.saf-store-page .wc-block-components-product-price del { color: var(--saf-grey-3); }

/* Quantity stepper */
.saf-store-page .wc-block-components-quantity-selector {
	border: 1px solid var(--saf-line);
	border-radius: 0;
}
.saf-store-page .wc-block-components-quantity-selector::after { display: none; }
.saf-store-page .wc-block-components-quantity-selector__button { color: var(--saf-ink); font-weight: 600; }
.saf-store-page .wc-block-components-quantity-selector__button:hover { color: var(--saf-orange); }
.saf-store-page .wc-block-components-quantity-selector__input { font-weight: 700; color: var(--saf-ink); }

/* Remove link */
.saf-store-page .wc-block-cart-item__remove-link {
	color: var(--saf-grey);
	text-decoration: underline;
	font-size: 12px;
}
.saf-store-page .wc-block-cart-item__remove-link:hover { color: var(--saf-orange); }

/* Totals */
.saf-store-page .wc-block-components-totals-item { font-size: 14px; color: var(--saf-grey-2); }
.saf-store-page .wc-block-components-totals-item__label { font-weight: 500; }
.saf-store-page .wc-block-components-totals-footer-item {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 17px;
	color: var(--saf-ink);
	border-top: 1px solid var(--saf-line);
}

/* Buttons */
.saf-store-page .wc-block-components-button:not(.is-link) {
	border-radius: 0;
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.08em;
	min-height: 52px;
	box-shadow: none;
}
.saf-store-page .wc-block-components-button:not(.is-link):hover {
	background: var(--saf-ink);
	color: #fff;
}
.saf-store-page .wc-block-components-button.is-link { color: var(--saf-teal); }

/* Inputs */
.saf-store-page .wc-block-components-text-input input,
.saf-store-page .wc-block-components-textarea,
.saf-store-page .wc-block-components-select__container,
.saf-store-page .wc-block-components-combobox-control input {
	border-radius: 0;
	border: 1px solid var(--saf-line);
	font-family: var(--saf-body);
	background: #fff;
}
.saf-store-page .wc-block-components-text-input.is-active label,
.saf-store-page .wc-block-components-text-input input:focus { border-color: var(--saf-orange); }
.saf-store-page .wc-block-components-checkbox__input[type="checkbox"] { border-radius: 0; accent-color: var(--saf-orange); }

/* Empty cart */
.saf-store-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--saf-display);
	font-weight: 800;
}

@media (max-width: 900px) {
	.saf-store-page { padding-top: 32px; padding-bottom: 56px; }

	/* The header row is meaningless once the rows stack. */
	.saf-store-page .wc-block-cart-items__header { display: none; }
	.saf-store-page .wc-block-cart-items__row { padding: 20px 0; }
	.saf-store-page .wc-block-cart-item__image img { width: 72px; }
	.saf-store-page .wc-block-components-sidebar .wc-block-components-panel,
	.saf-store-page .wc-block-cart__sidebar .is-large { padding: 20px; }

	/* Full-width, thumb-sized primary actions. */
	.saf-store-page .wc-block-components-button:not(.is-link) { width: 100%; }
	.saf-store-page .wc-block-cart__submit-container { padding: 0; }
}

@media (max-width: 640px) {
	.saf-store-page .wc-block-components-product-name { font-size: 14px; }
	.saf-store-page .wc-block-components-totals-footer-item { font-size: 16px; }
	.saf-store-page .wc-block-components-quantity-selector { max-width: 120px; }
}

/* ---------- Account ---------- */

/* The account area uses our own templates (theme woocommerce/myaccount/*),
   so most of this targets SwoleAF classes; Woo's own tables and notices are
   restyled where its markup still shows through. */

.saf-account { display: block; }

.saf-account__nav { margin-bottom: 32px; }
.saf-account__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.saf-account__navitem a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--saf-line);
	color: var(--saf-ink);
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	min-height: 44px;
}
.saf-account__navitem a:hover { border-color: var(--saf-orange); color: var(--saf-orange); }
.saf-account__navitem.is-active a { background: var(--saf-ink); border-color: var(--saf-ink); color: #fff; }
.saf-account__navitem--logout { margin-top: 10px; }
.saf-account__navitem--logout a { color: var(--saf-grey-2); }
.saf-account__navcount {
	background: var(--saf-orange);
	color: var(--saf-ink);
	font-family: var(--saf-body);
	font-size: 11px;
	padding: 1px 6px;
}

.saf-account__greeting { margin-bottom: 28px; }
.saf-account__greeting .saf-lede { margin-top: 10px; }

.saf-account__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}
.saf-account__tile {
	border: 1px solid var(--saf-line);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--saf-ink);
	min-height: 108px;
	justify-content: center;
}
.saf-account__tile:hover { border-color: var(--saf-orange); color: var(--saf-ink); box-shadow: 0 12px 32px rgba(19,20,23,0.08); }
.saf-account__tilenum { font-family: var(--saf-display); font-weight: 800; font-size: 30px; color: var(--saf-orange); line-height: 1; }
.saf-account__tilelabel { font-family: var(--saf-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.saf-account__tilehint { font-size: 13px; color: var(--saf-grey); }

.saf-account__section { margin-bottom: 40px; }
.saf-account__orders { list-style: none; margin: 0; padding: 0; border: 1px solid var(--saf-line); }
.saf-account__orders li + li { border-top: 1px solid var(--saf-line-2); }
.saf-account__orders a {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	color: var(--saf-ink);
	font-size: 14px;
}
.saf-account__orders a:hover { background: var(--saf-cream); color: var(--saf-ink); }
.saf-account__ordernum { font-family: var(--saf-display); font-weight: 700; }
.saf-account__orderdate, .saf-account__orderstatus { color: var(--saf-grey-2); }
.saf-account__ordertotal { font-weight: 700; }

/* Sign in / register */
/* A lone sign-in panel should not span the full container. */
.saf-auth { display: grid; gap: 24px; max-width: 560px; margin: 0 auto; }
.saf-auth--split { max-width: none; margin: 0; }
.saf-auth--split { grid-template-columns: 1fr 1fr; }
.saf-auth__panel { border: 1px solid var(--saf-line); padding: 32px; }
.saf-auth__panel--alt { background: var(--saf-cream); }
.saf-auth__intro { color: var(--saf-grey-2); font-size: 15px; line-height: 1.6; margin: 10px 0 24px; }
.saf-auth__form { display: flex; flex-direction: column; }
.saf-auth__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.saf-auth__input {
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 13px 16px;
	font-family: var(--saf-body);
	font-size: 15px;
	min-height: 48px;
	margin-bottom: 18px;
	background: #fff;
	color: var(--saf-ink);
}
.saf-auth__input:focus { border-color: var(--saf-orange); outline: none; }
.saf-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.saf-auth__remember { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--saf-grey-2); }
.saf-auth__remember input { accent-color: var(--saf-orange); width: 18px; height: 18px; }
.saf-auth__link { font-size: 14px; color: var(--saf-teal); }
.saf-auth__link:hover { color: var(--saf-orange); }
.saf-auth__submit { width: 100%; justify-content: center; }

/* Woo markup that still shows through: tables, addresses, notices, buttons */
.saf-store-page .woocommerce table.shop_table {
	border: 1px solid var(--saf-line);
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}
.saf-store-page .woocommerce table.shop_table th {
	font-family: var(--saf-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--saf-grey);
	border-bottom: 1px solid var(--saf-line);
	padding: 14px 16px;
	text-align: left;
}
.saf-store-page .woocommerce table.shop_table td { border-top: 1px solid var(--saf-line-2); padding: 16px; font-size: 14px; }
.saf-store-page .woocommerce .woocommerce-Address { border: 1px solid var(--saf-line); padding: 24px; }
.saf-store-page .woocommerce h2, .saf-store-page .woocommerce h3, .saf-store-page .woocommerce legend {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 24px);
	color: var(--saf-ink);
	margin: 0 0 18px;
}
.saf-store-page .woocommerce label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--saf-ink); }
.saf-store-page .woocommerce input[type="text"],
.saf-store-page .woocommerce input[type="email"],
.saf-store-page .woocommerce input[type="tel"],
.saf-store-page .woocommerce input[type="password"],
.saf-store-page .woocommerce select,
.saf-store-page .woocommerce .select2-selection {
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 13px 16px;
	font-family: var(--saf-body);
	font-size: 15px;
	min-height: 48px;
	background: #fff;
	color: var(--saf-ink);
}
.saf-store-page .woocommerce .button,
.saf-store-page .woocommerce button.button,
.saf-store-page .woocommerce input.button {
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	border-radius: 0;
	padding: 15px 32px;
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: 48px;
}
.saf-store-page .woocommerce .button:hover,
.saf-store-page .woocommerce button.button:hover,
.saf-store-page .woocommerce input.button:hover { background: var(--saf-ink); color: #fff; }
.saf-store-page .woocommerce-message,
.saf-store-page .woocommerce-info,
.saf-store-page .woocommerce-error {
	border-top-color: var(--saf-orange);
	border-radius: 0;
	background: var(--saf-cream);
	font-size: 14px;
}

/* Woo's own account forms: two-up rows, the address headers and the password
   fieldset all arrive with core's markup, so they are styled here rather than
   in a template override. */
.saf-store-page .woocommerce .woocommerce-Address-title {
	/* Left-aligned rather than space-between: when the heading and the link
	   are too wide to share a line the lone heading was ending up adrift on
	   the right. */
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-bottom: 12px;
}
.saf-store-page .woocommerce .woocommerce-Address-title h2,
.saf-store-page .woocommerce .woocommerce-Address-title h3 { margin: 0; }
.saf-store-page .woocommerce .woocommerce-Address-title .edit {
	float: none;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--saf-orange);
}
.saf-store-page .woocommerce .woocommerce-Address-title .edit:hover { color: var(--saf-ink); }
.saf-store-page .woocommerce address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.65;
	color: var(--saf-grey-2);
	margin: 0;
}
.saf-store-page .woocommerce fieldset {
	border: 1px solid var(--saf-line);
	border-radius: 0;
	padding: 24px;
	margin: 32px 0 0;
}
.saf-store-page .woocommerce fieldset legend {
	padding: 0 10px;
	margin: 0;
	font-size: clamp(16px, 2vw, 19px);
}
.saf-store-page .woocommerce .woocommerce-form-row { margin-bottom: 18px; }
.saf-store-page .woocommerce span.description,
.saf-store-page .woocommerce em {
	display: block;
	font-style: normal;
	font-size: 13px;
	line-height: 1.55;
	color: var(--saf-grey);
	margin-top: 6px;
}

/* Woo pins "Proceed to checkout" to the bottom of the screen on phones. Its
   own container is a bare white strip, so the button ran edge to edge with
   the page showing through beneath it. */
.saf-store-page .wc-block-cart__submit-container--sticky {
	padding: 12px var(--saf-gutter);
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--saf-line);
	box-shadow: 0 -8px 24px rgba(19, 20, 23, 0.10);
}

@media (min-width: 901px) {
	.saf-account { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
	.saf-account__nav { margin-bottom: 0; }
}

@media (max-width: 900px) {
	/* Account nav scrolls sideways rather than stacking seven items deep. */
	.saf-account__nav ul {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 8px;
		padding-bottom: 4px;
	}
	.saf-account__nav ul::-webkit-scrollbar { display: none; }
	.saf-account__navitem a { white-space: nowrap; padding: 12px 16px; }

	.saf-auth--split { grid-template-columns: 1fr; }
	.saf-auth__panel { padding: 24px 20px; }

	.saf-account__tiles { grid-template-columns: 1fr 1fr; gap: 12px; }

	/* The strip runs to both screen edges, so a half-shown chip reads as
	   "there is more this way" rather than as a clipped button. */
	.saf-account__nav {
		margin-left: calc(var(--saf-gutter) * -1);
		margin-right: calc(var(--saf-gutter) * -1);
	}
	.saf-account__nav ul { padding: 0 var(--saf-gutter) 4px; }

	.saf-account__tile { padding: 16px 18px; min-height: 88px; }
	.saf-account__tilenum { font-size: 26px; }

	/* Two-up name fields are ~145px wide at 375: full width reads better. */
	.saf-store-page .woocommerce .form-row-first,
	.saf-store-page .woocommerce .form-row-last { float: none; width: 100%; margin-right: 0; }
	.saf-store-page .woocommerce fieldset { padding: 20px 16px; }
	.saf-account__orders a { grid-template-columns: 1fr auto; gap: 6px 12px; }
	.saf-account__orderdate { grid-column: 1; font-size: 13px; }
	.saf-account__orderstatus { grid-column: 2; text-align: right; font-size: 13px; }

	.saf-store-page .woocommerce .button,
	.saf-store-page .woocommerce button.button,
	.saf-store-page .woocommerce input.button { width: 100%; }

	/* Clearance for that sticky bar, and the back-to-top button sits above it
	   rather than on top of the checkout button. */
	body.woocommerce-cart .saf-store-page { padding-bottom: 120px; }
	body.woocommerce-cart .saf-totop { bottom: 96px; }

	/* The back-to-top button was clipping the FDA line in the footer. */
	.saf-footer__legal { padding-right: 56px; }
}

@media (max-width: 380px) {
	.saf-account__tiles { gap: 10px; }
	.saf-account__tilelabel { font-size: 12px; }
}

/* ---------- Checkout ---------- */
/* Mobile first. The breakpoint is 860px,
and below it the whole page is one
   column in source order: summary,
then the three steps. Source order is also
   what a screen reader gets,
and "here is what you are paying" before "type
   your address" is the right order to hear it in.

   Two rules of thumb the last attempt broke,
written down because they are the
   whole reason it looked wrong:

   1. Never select an input by its container alone. `.pay input` set every field
      in the payment row to 18px wide,
radio or not. Type selectors,
always.
   2. `margin-left: auto` goes on the FIRST of a run,
not all of them. On all
      four card marks each pushed the next and Discover fell off a 375px screen.

   woocommerce.css,
woocommerce-layout.css,
woocommerce-smallscreen.css and
   select2.css all load here,
and swoleaf.css loads last — so equal specificity
   wins on order,
and only Woo's id-bearing selectors need an id back. Those are
   gathered at the end of this section rather than spread through it. */

/* --- The bar that replaces the header ----------------------------------- */

body.woocommerce-checkout .saf-cobar { border-bottom: 1px solid var(--saf-line); padding: 15px 0; }
body.woocommerce-checkout .saf-cobar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.woocommerce-checkout .saf-cobar__logo { display: inline-flex; }
body.woocommerce-checkout .saf-cobar__logo img { height: 30px; width: auto; display: block; }
body.woocommerce-checkout .saf-cobar__secure { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--saf-grey-2); }
body.woocommerce-checkout .saf-cobar__secure svg { width: 14px; height: 14px; fill: var(--saf-teal); flex: none; }
body.woocommerce-checkout .saf-store-page { padding-top: 0; padding-bottom: 80px; }
/* --- Form shell --------------------------------------------------------- */

body.woocommerce-checkout .saf-co { display: block; }
body.woocommerce-checkout .saf-co__steps { display: flex; flex-direction: column; gap: 22px; }
/* --- Summary ------------------------------------------------------------ */

/* One element,
two presentations. Rendering it twice would be simpler and would
   break Woo's AJAX,
which replaces .woocommerce-checkout-review-order-table
   wherever it matches — and would have matched both copies. */

body.woocommerce-checkout .saf-co__summary { margin: 0 -20px 26px; background: var(--saf-cream); border-bottom: 1px solid var(--saf-line); }
body.woocommerce-checkout .saf-co__toggle { position: absolute; opacity: 0; pointer-events: none; }
body.woocommerce-checkout .saf-co__sumbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 20px;
	margin: 0;
	cursor: pointer;
	min-height: 56px;
}
body.woocommerce-checkout .saf-co__sumlabel { display: inline-flex; align-items: center; gap: 9px; }
body.woocommerce-checkout .saf-co__sumlabel b {
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--saf-ink);
}
body.woocommerce-checkout .saf-co__sumlabel svg { width: 11px; height: 11px; fill: var(--saf-orange); transition: transform .18s ease; flex: none; }
body.woocommerce-checkout .saf-co__toggle:checked ~ .saf-co__sumbar .saf-co__sumlabel svg { transform: rotate(180deg); }
body.woocommerce-checkout .saf-co__toggle:focus-visible ~ .saf-co__sumbar { outline: 2px solid var(--saf-orange); outline-offset: -2px; }
body.woocommerce-checkout .saf-co__sumamt { font-family: var(--saf-display); font-weight: 800; font-size: 18px; color: var(--saf-ink); }
body.woocommerce-checkout .saf-co__sumbody { display: none; padding: 0 20px 20px; }
body.woocommerce-checkout .saf-co__toggle:checked ~ .saf-co__sumbody { display: block; }
body.woocommerce-checkout .saf-co__sumtitle { display: none; }
/* --- Steps -------------------------------------------------------------- */

body.woocommerce-checkout .saf-step { border: 1px solid var(--saf-line); background: #fff; }
body.woocommerce-checkout .saf-step__h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 13px 18px;
	background: var(--saf-ink);
	color: #fff;
}
body.woocommerce-checkout .saf-step__n { font-family: var(--saf-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; color: var(--saf-orange); }
body.woocommerce-checkout .saf-step__t { font-family: var(--saf-display); font-weight: 800; font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; }
body.woocommerce-checkout .saf-step__b { padding: 20px 18px; }
body.woocommerce-checkout .saf-co__hint { margin: 10px 0 0; font-size: 12px; color: var(--saf-grey); }
/* --- Fields ------------------------------------------------------------- */

body.woocommerce-checkout .saf-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.woocommerce-checkout .saf-co p.form-row,
body.woocommerce-checkout .saf-co .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.woocommerce-checkout .saf-co .form-row-wide,
body.woocommerce-checkout .saf-co .create-account { grid-column: 1 / -1; }
body.woocommerce-checkout .saf-co .form-row label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--saf-grey-2);
	font-family: var(--saf-body);
}
body.woocommerce-checkout .saf-co .form-row .required,
body.woocommerce-checkout .saf-co abbr.required { color: var(--saf-orange); border: none; text-decoration: none; }
body.woocommerce-checkout .saf-co .form-row .optional { color: var(--saf-grey-3); }
body.woocommerce-checkout .saf-co .woocommerce-input-wrapper { display: block; width: 100%; }
body.woocommerce-checkout .saf-co .form-row input[type="text"],
body.woocommerce-checkout .saf-co .form-row input[type="email"],
body.woocommerce-checkout .saf-co .form-row input[type="tel"],
body.woocommerce-checkout .saf-co .form-row input[type="password"],
body.woocommerce-checkout .saf-co .form-row input[type="number"],
body.woocommerce-checkout .saf-co .form-row select,
body.woocommerce-checkout .saf-co .form-row textarea {
	font: inherit;
	/* 16px is not a taste choice: iOS Safari zooms the viewport on focus for
	   anything smaller and throws the customer out of the form. 15px from 860px
	   up, where no phone is looking. */
	font-size: 16px;
	color: var(--saf-ink);
	background: #fff;
	border: 1px solid var(--saf-grey-4);
	border-radius: 0;
	padding: 12px 14px;
	width: 100%;
	min-height: 48px;
	appearance: none;
}
body.woocommerce-checkout .saf-co .form-row textarea { min-height: 96px; resize: vertical; }
body.woocommerce-checkout .saf-co .form-row select {
	background-image: linear-gradient(45deg, transparent 50%, var(--saf-ink) 50%),
	                  linear-gradient(135deg, var(--saf-ink) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
body.woocommerce-checkout .saf-co .form-row input:focus,
body.woocommerce-checkout .saf-co .form-row select:focus,
body.woocommerce-checkout .saf-co .form-row textarea:focus { outline: 2px solid var(--saf-orange); outline-offset: -2px; border-color: var(--saf-orange); }
body.woocommerce-checkout .saf-co .form-row ::placeholder { color: var(--saf-grey-3); }
body.woocommerce-checkout .saf-co .form-row.woocommerce-invalid input,
body.woocommerce-checkout .saf-co .form-row.woocommerce-invalid select { border-color: #C0392B; }
/* Woo's own checkboxes — create-an-account, ship-to-a-different-address, terms.
   Explicitly NOT third-party widgets: Navidium renders its shipping-protection
   opt-in as a 33x16 pill inside a `.form-row`, and this rule was squashing it
   to an 18x18 square. With Navidium's own 9px border-radius still applied, that
   drew a small orange circle where a toggle should be. Excluding their class
   lets their cascade win untouched, rather than us restating their dimensions
   and owning them forever. */
body.woocommerce-checkout .saf-co .form-row input[type="checkbox"]:not(.forms-check-inputCstm) { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--saf-orange); flex: none; }
body.woocommerce-checkout .saf-co label.checkbox,
body.woocommerce-checkout .saf-co .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--saf-ink); cursor: pointer; }
body.woocommerce-checkout .saf-co__account { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--saf-line2); }
body.woocommerce-checkout .saf-co__shipalt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--saf-line2); }
body.woocommerce-checkout .saf-co__shipalt h3 { font-family: var(--saf-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; margin: 0; }
body.woocommerce-checkout .saf-co__shipalt #ship-to-different-address { margin: 0; }
body.woocommerce-checkout .saf-co__shipalt .shipping_address { margin-top: 16px; }
body.woocommerce-checkout .saf-co__shipalt .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .saf-co__shipalt .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.woocommerce-checkout .saf-co__shipalt .woocommerce-additional-fields { margin-top: 18px; }
body.woocommerce-checkout .saf-co__shipalt .woocommerce-additional-fields h3 { margin-bottom: 12px; }
/* --- Summary contents --------------------------------------------------- */

body.woocommerce-checkout .saf-sum { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; }
body.woocommerce-checkout .saf-sum td,
body.woocommerce-checkout .saf-sum th { padding: 0; border: none; }
body.woocommerce-checkout .saf-sum__cell { padding: 0 !important; }
body.woocommerce-checkout .saf-sum__line { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--saf-line); }
body.woocommerce-checkout .saf-sum__thumb { position: relative; flex: none; width: 54px; height: 54px; }
body.woocommerce-checkout .saf-sum__thumb img { width: 54px; height: 54px; object-fit: cover; display: block; border: 1px solid var(--saf-line); background: #fff; }
body.woocommerce-checkout .saf-sum__qty {
	position: absolute; top: -7px; right: -7px;
	min-width: 20px; height: 20px; padding: 0 5px;
	background: var(--saf-ink); color: #fff; border-radius: 10px;
	font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
body.woocommerce-checkout .saf-sum__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.woocommerce-checkout .saf-sum__name { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--saf-ink); }
body.woocommerce-checkout .saf-sum__var { font-size: 12px; color: var(--saf-grey); }
body.woocommerce-checkout .saf-sum__var p { margin: 0; }
body.woocommerce-checkout .saf-sum__price { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--saf-ink); }
body.woocommerce-checkout .saf-sum tfoot th,
body.woocommerce-checkout .saf-sum tfoot td { padding: 7px 0; font-weight: 500; color: var(--saf-grey-2); text-align: left; }
body.woocommerce-checkout .saf-sum tfoot td { text-align: right; color: var(--saf-ink); }
body.woocommerce-checkout .saf-sum tfoot tr:first-child th,
body.woocommerce-checkout .saf-sum tfoot tr:first-child td { padding-top: 14px; }
body.woocommerce-checkout .saf-sum__pending { font-size: 13px; color: var(--saf-grey); }
body.woocommerce-checkout .saf-sum #shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; }
body.woocommerce-checkout .saf-sum #shipping_method li { margin: 0 0 5px; }
body.woocommerce-checkout .saf-sum #shipping_method li:last-child { margin-bottom: 0; }
body.woocommerce-checkout .saf-sum #shipping_method label { font-size: 13px; color: var(--saf-ink); }
body.woocommerce-checkout .saf-sum #shipping_method input[type="radio"] { width: 15px; height: 15px; accent-color: var(--saf-orange); margin-right: 5px; }
body.woocommerce-checkout .saf-sum tr.order-total th,
body.woocommerce-checkout .saf-sum tr.order-total td {
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 18px;
	color: var(--saf-ink);
	border-top: 2px solid var(--saf-ink);
	padding-top: 14px;
	margin-top: 8px;
}
body.woocommerce-checkout .saf-sum tr.order-total .includes_tax { display: block; font-family: var(--saf-body); font-weight: 400; font-size: 12px; color: var(--saf-grey-2); }
body.woocommerce-checkout .saf-sum tr.cart-discount th,
body.woocommerce-checkout .saf-sum tr.cart-discount td { color: var(--saf-teal); }
/* Coupon form,
moved into the summary by inc/checkout.php. */
body.woocommerce-checkout .saf-co__sumbody .woocommerce-form-coupon-toggle { margin: 14px 0 0; }
body.woocommerce-checkout .saf-co__sumbody .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0; padding: 0; background: none; border: none; font-size: 13px; color: var(--saf-grey-2);
}
body.woocommerce-checkout .saf-co__sumbody form.checkout_coupon { border: none; padding: 0; margin: 12px 0 0; }
body.woocommerce-checkout .saf-co__sumbody form.checkout_coupon p { margin: 0; }
body.woocommerce-checkout .saf-co__sumbody form.checkout_coupon .form-row { display: block; }
body.woocommerce-checkout .saf-co__sumbody form.checkout_coupon .form-row-first,
body.woocommerce-checkout .saf-co__sumbody form.checkout_coupon .form-row-last { width: auto; float: none; }
/* --- Payment ------------------------------------------------------------ */

body.woocommerce-checkout .saf-co ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 1px solid var(--saf-grey-4); background: #fff; }
body.woocommerce-checkout .saf-co li.wc_payment_method {
	/* The radio, the label and the payment box are three siblings. The li has to
	   be the flex container for the first two to sit on a line, and the box has
	   to be given the row back or it lands beside the method name. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--saf-line);
	list-style: none;
}
body.woocommerce-checkout .saf-co li.wc_payment_method:last-child { border-bottom: none; }
body.woocommerce-checkout .saf-co li.wc_payment_method > input[type="radio"] {
	width: 18px; height: 18px; min-height: 0; margin: 0 0 0 16px;
	accent-color: var(--saf-orange); flex: none;
}
body.woocommerce-checkout .saf-co li.wc_payment_method > label {
	flex: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	row-gap: 8px;
	/* 58px, not 44 — this is the row a thumb hits one-handed, and picking the
	   wrong payment method is an abandoned cart. */
	min-height: 58px;
	padding: 12px 16px;
	margin: 0;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--saf-ink);
	cursor: pointer;
}
body.woocommerce-checkout .saf-co li.wc_payment_method > label img { max-height: 21px; width: auto; margin-left: 0; flex: none; }
body.woocommerce-checkout .saf-co li.wc_payment_method > label img:first-of-type { margin-left: auto; }
body.woocommerce-checkout .saf-co li.wc_payment_method > .payment_box { flex: 0 0 100%; }
body.woocommerce-checkout .saf-co li.wc_payment_method:has(input[type="radio"]:checked) { background: var(--saf-cream); box-shadow: inset 3px 0 0 var(--saf-orange); }
body.woocommerce-checkout .saf-co .payment_box { margin: 0; padding: 2px 16px 18px 46px; background: var(--saf-cream); font-size: 14px; line-height: 1.55; color: var(--saf-grey-2); }
body.woocommerce-checkout .saf-co .payment_box p:first-child { margin-top: 0; }
body.woocommerce-checkout .saf-co .payment_box p:last-child { margin-bottom: 0; }
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form { border: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form .form-row-wide { grid-column: 1 / -1; }
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form label { font-size: 13px; color: var(--saf-grey-2); }
body.woocommerce-checkout .saf-co .wc-credit-card-form-card-number,
body.woocommerce-checkout .saf-co .wc-credit-card-form-card-expiry,
body.woocommerce-checkout .saf-co .wc-credit-card-form-card-cvc { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
/* --- Place order -------------------------------------------------------- */

body.woocommerce-checkout .saf-co .woocommerce-terms-and-conditions-wrapper { margin: 16px 0 0; }
body.woocommerce-checkout .saf-co .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.6; color: var(--saf-grey-2); margin: 0 0 14px; }
body.woocommerce-checkout .saf-co .woocommerce-privacy-policy-text a { color: var(--saf-teal); }
body.woocommerce-checkout .saf-co .form-row.place-order { margin: 0; padding: 0; }
body.woocommerce-checkout .saf-co .saf-place {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--saf-orange);
	color: var(--saf-ink);
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--saf-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 18px 24px;
	min-height: 58px;
	transition: background .2s ease, color .2s ease;
}
body.woocommerce-checkout .saf-co .saf-place:hover { background: var(--saf-ink); color: #fff; }
body.woocommerce-checkout .saf-co .saf-place:disabled { opacity: .55; cursor: not-allowed; }
body.woocommerce-checkout .saf-place__dot { opacity: .45; }
body.woocommerce-checkout .saf-place__amt { font-size: 17px; }
body.woocommerce-checkout .saf-place__amt .woocommerce-Price-amount { font-size: inherit; }
body.woocommerce-checkout .saf-co__trust { display: flex; justify-content: center; gap: 16px; margin-top: 13px; font-size: 11px; letter-spacing: 0.04em; color: var(--saf-grey); }
/* --- Notices and the login prompt --------------------------------------- */

body.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
	list-style: none;
	margin: 0 0 18px;
	padding: 13px 16px;
	border-left: 3px solid var(--saf-teal);
	background: var(--saf-teal-soft);
	font-size: 14px;
	line-height: 1.5;
}
body.woocommerce-checkout .woocommerce-error { border-left-color: #C0392B; background: #FBEAE7; }
body.woocommerce-checkout .woocommerce-error li { margin: 0; }
body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout .showlogin { color: var(--saf-teal); font-weight: 600; }
body.woocommerce-checkout .showcoupon:hover,
body.woocommerce-checkout .showlogin:hover { color: var(--saf-orange); }
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	background: none; border-left: none; border: 1px solid var(--saf-line); color: var(--saf-grey-2);
}
body.woocommerce-checkout form.woocommerce-form-login { border: 1px solid var(--saf-line); padding: 20px 18px; margin: 0 0 20px; background: #fff; }
/* --- Beating WooCommerce's own rules ------------------------------------ */

/* Only the ones carrying an id,
which no amount of class nesting out-ranks.
   Matched depth rather than !important,
so they stay overridable in turn. */

body.woocommerce-checkout .saf-co .woocommerce-checkout #payment,
body.woocommerce-checkout .saf-store-page #payment { background: none; border-radius: 0; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment ul.payment_methods { padding: 0; border-bottom: 1px solid var(--saf-grey-4); }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment ul.payment_methods li img { max-height: 21px; width: auto; margin-left: 0; float: none; padding: 0; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment ul.payment_methods li label img:first-of-type { margin-left: auto; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment div.payment_box {
	flex: 0 0 100%;
	background: var(--saf-cream);
	color: var(--saf-grey-2);
	margin: 0;
	padding: 2px 16px 18px 46px;
	border-radius: 0;
	font-size: 14px;
	line-height: 1.55;
}
/* Woo points a little triangle at the row above. The row is now flush against
   the box and the arrow points at a border. */
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment div.payment_box::before { display: none; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment div.form-row { padding: 0; margin: 0; }
body.woocommerce-checkout .saf-store-page .woocommerce-checkout .form-row.place-order { background: none; padding: 0; }
/* The notice icons come from the WooCommerce icon font,
which is not loaded,
so
   each renders as a tofu box wedged into the first letter. */
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before { display: none; }
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error { padding-left: 16px; }
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button {
	float: none; display: inline-block; width: auto; margin: 10px 0 0;
	padding: 9px 17px; min-height: 0; background: var(--saf-ink); color: #fff;
	border-radius: 0; font-family: var(--saf-display); font-weight: 700;
	font-size: 11px; letter-spacing: 0.08em; text-decoration: none;
}
body.woocommerce-checkout .woocommerce-message .button:hover,
body.woocommerce-checkout .woocommerce-info .button:hover { background: var(--saf-orange); color: var(--saf-ink); }
/* select2 draws the country and state pickers as a 28px grey pill next to our
   48px square fields. */
body.woocommerce-checkout .saf-store-page .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--saf-grey-4); border-radius: 0; background: #fff; }
body.woocommerce-checkout .saf-store-page .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--saf-ink); font-size: 16px; }
body.woocommerce-checkout .saf-store-page .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
body.woocommerce-checkout .saf-store-page .select2-dropdown { border-color: var(--saf-grey-4); border-radius: 0; }
/* Woo's submit overlay is otherwise a transparent box that looks like nothing
   is happening on the one click that matters. */
body.woocommerce-checkout .saf-store-page .blockUI.blockOverlay { background: rgba(255,255,255,0.72) !important; }
/* --- From 860px --------------------------------------------------------- */

@media (min-width: 860px) {
	body.woocommerce-checkout .saf-store-page { padding-top: 34px; }
	body.woocommerce-checkout .saf-co { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); column-gap: 44px; align-items: start; }
	body.woocommerce-checkout .saf-co__steps { grid-column: 1; grid-row: 1; }
	/* Same node,
	second column,
	sticky and always open. */
			body.woocommerce-checkout .saf-co__summary {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		position: sticky;
		top: 22px;
		border: 1px solid var(--saf-line);
		border-bottom: 1px solid var(--saf-line);
		padding: 22px 20px;
	}
	body.woocommerce-checkout .saf-co__sumbar { display: none; }
	body.woocommerce-checkout .saf-co__sumbody { display: block; padding: 0; }
	body.woocommerce-checkout .saf-co__sumtitle {
		display: block;
		font-family: var(--saf-display);
		font-weight: 800;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		margin: 0 0 2px;
		padding-bottom: 13px;
		border-bottom: 2px solid var(--saf-ink);
	}
	body.woocommerce-checkout .saf-fields,
	body.woocommerce-checkout .saf-co__shipalt .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
	body.woocommerce-checkout .saf-co .form-row input[type="text"],
	body.woocommerce-checkout .saf-co .form-row input[type="email"],
	body.woocommerce-checkout .saf-co .form-row input[type="tel"],
	body.woocommerce-checkout .saf-co .form-row input[type="password"],
	body.woocommerce-checkout .saf-co .form-row select,
	body.woocommerce-checkout .saf-co .form-row textarea { font-size: 15px; }
	body.woocommerce-checkout .saf-store-page .select2-container .select2-selection--single .select2-selection__rendered { font-size: 15px; }
	body.woocommerce-checkout .saf-step__b { padding: 22px 22px; }
	body.woocommerce-checkout .saf-co .saf-place { width: auto; min-width: 290px; }
	body.woocommerce-checkout .saf-co .form-row.place-order { display: flex; justify-content: flex-end; }
	body.woocommerce-checkout .saf-co__trust { justify-content: flex-end; }
}

@media (max-width: 380px) {
	body.woocommerce-checkout .saf-co .payment_box,
	body.woocommerce-checkout .saf-store-page .woocommerce-checkout #payment div.payment_box { padding-left: 16px; }
	body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form { grid-template-columns: 1fr; }
}

/* Payment row corrections, scoped on the body class alone.
   Twice now a rule has failed because it assumed `.saf-store-page` was an
   ancestor of something Woo renders. These do not assume it. */

body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box:before { display: none; content: none; }

/* Four card marks plus the method name fit one line at 18px and an 8px gap —
   at 21px they wrapped, and a wrapped run with margin-left:auto on the first
   one strands the rest mid-row. */
body.woocommerce-checkout #payment ul.payment_methods li > label { flex-wrap: nowrap; gap: 8px; }
body.woocommerce-checkout #payment ul.payment_methods li > label img { max-height: 18px; }

/* The payment box was indented 46px to sit under the radio. On a 375px screen
   that plus the box padding left the card number 226px to live in, which is
   narrower than the number it has to hold. The indent is a nicety; the field
   width is not, so the indent only applies once there is room for it. */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout .saf-co .payment_box { padding: 4px 16px 18px; }

@media (min-width: 600px) {
	body.woocommerce-checkout #payment div.payment_box,
	body.woocommerce-checkout .saf-co .payment_box { padding: 4px 18px 20px 46px; }
}

/* Expiry and CVC stay side by side. They are four and three characters wide;
   stacking them buys nothing and costs a scroll. */
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form { grid-template-columns: 1fr 1fr; }
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form > .form-row-wide,
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form > .nmi-source-errors,
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form > .clear { grid-column: 1 / -1; }
/* Woo/NMI emit float-clearing divs that become empty grid rows. */
body.woocommerce-checkout .saf-co fieldset.wc-credit-card-form > .clear { display: none; }

/* Woo floats paired fields and gives them width:47%. Inside a grid the float is
   ignored but the width is not — 47% of an already-narrow grid column, which is
   how the expiry and CVC ended up 50px wide with their labels wrapping one
   letter per line. */
body.woocommerce-checkout .saf-co .form-row-first,
body.woocommerce-checkout .saf-co .form-row-last,
body.woocommerce-checkout .saf-co .form-row-wide { width: auto; float: none; }

/* NMI's card fields are not inputs. Collect.js removes them and mounts hosted
   iframes from nmi.com in their place, so every input rule written for them
   matched nothing. The field is now the wrapper, and the iframe just fills it. */
/* NMI configures Collect.js with `styleSniffer: true`, which copies the styles
   of one of our own inputs into the input it renders inside its iframe. So the
   field is already drawn — with our border, our padding, our 15px text inset —
   and every bit of chrome added out here lands *around* it. That is what the
   nested boxes were: our border, then the sniffed one 14px inside it, with the
   placeholder sitting against the inner edge.
   The wrapper is therefore nothing. The iframe is the field. */
body.woocommerce-checkout .saf-co .wc-nmi-elements-field {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	min-height: 0;
	display: block;
}
body.woocommerce-checkout .saf-co .wc-nmi-elements-field iframe {
	width: 100% !important;
	min-width: 0;
	display: block;
	border: 0;
	background: none;
}
body.woocommerce-checkout .saf-co .nmi-card-group { position: relative; }
body.woocommerce-checkout .saf-co .nmi-source-errors:empty { display: none; }
body.woocommerce-checkout .saf-co .nmi-source-errors { color: #C0392B; font-size: 13px; }

/* Collect.js writes an inline width onto its own iframes, which no stylesheet
   rule outranks — hence the one !important in this file, and the note saying
   why it is here rather than looking like laziness. */
body.woocommerce-checkout .saf-co .wc-nmi-elements-field iframe { width: 100% !important; }

/* --- Summary table containment ------------------------------------------ */

/* The summary broke out of its own panel. Three causes, all here:
   1. `white-space: nowrap` on every totals cell. The shipping row is not a
      number, it is "Express Shipping 3 - 5 Days (Estimate): $7.99", and a cell
      that may not wrap makes the whole table as wide as its longest string.
   2. No `table-layout: fixed`, so the browser sized columns to that string.
   3. Woo's `.woocommerce table.shop_table` borders and padding, which carry an
      id-free but deeper selector than `.saf-sum` and drew boxes around rows.
   A grid column of minmax(0, …) lets a child overflow rather than forcing the
   track wider, so none of this showed up as a layout error — just as a table
   hanging out of a panel. */

body.woocommerce-checkout .saf-co__summary { min-width: 0; }
body.woocommerce-checkout .saf-co__sumbody { min-width: 0; overflow-wrap: break-word; }

body.woocommerce-checkout .saf-store-page .woocommerce table.shop_table.saf-sum,
body.woocommerce-checkout .saf-co table.saf-sum {
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0;
}
body.woocommerce-checkout .saf-store-page .woocommerce table.shop_table.saf-sum th,
body.woocommerce-checkout .saf-store-page .woocommerce table.shop_table.saf-sum td,
body.woocommerce-checkout .saf-co table.saf-sum th,
body.woocommerce-checkout .saf-co table.saf-sum td {
	border: 0;
	background: none;
	padding: 7px 0;
	overflow-wrap: break-word;
}
/* Label column narrow, money column right — and only the money is allowed to
   refuse to wrap, because only the money is short. */
body.woocommerce-checkout .saf-co table.saf-sum tfoot th { width: 46%; text-align: left; font-weight: 500; color: var(--saf-grey-2); vertical-align: top; }
body.woocommerce-checkout .saf-co table.saf-sum tfoot td { width: 54%; text-align: right; vertical-align: top; }
body.woocommerce-checkout .saf-co table.saf-sum tr.cart-subtotal td,
body.woocommerce-checkout .saf-co table.saf-sum tr.order-total td { white-space: nowrap; }

/* The shipping cell is a list of rates, not a figure. Let it wrap under its
   own label and sit right, at a size that admits it is secondary. */
body.woocommerce-checkout .saf-co table.saf-sum tr.shipping td { font-size: 13px; line-height: 1.45; }
body.woocommerce-checkout .saf-co table.saf-sum tr.shipping td #shipping_method,
body.woocommerce-checkout .saf-co table.saf-sum tr.shipping td ul { list-style: none; margin: 0; padding: 0; text-align: right; }
body.woocommerce-checkout .saf-co table.saf-sum tr.shipping td label { display: inline; font-size: 13px; color: var(--saf-ink); }
body.woocommerce-checkout .saf-co table.saf-sum .woocommerce-shipping-destination { display: none; }

/* The line item row spans both columns, so it must not inherit the fixed
   column widths meant for the totals. */
body.woocommerce-checkout .saf-co table.saf-sum td.saf-sum__cell { width: auto; padding: 0; }
body.woocommerce-checkout .saf-co .saf-sum__name { overflow-wrap: break-word; }

/* The place-order label is now one string, so the amount is no longer a span to
   size separately. Letter-spacing does the separating instead. */
body.woocommerce-checkout .saf-co .saf-place { letter-spacing: 0.05em; }

/* --- Promo code, in the summary ----------------------------------------- */

body.woocommerce-checkout .saf-promo { margin: 16px 0 4px; }
body.woocommerce-checkout .saf-promo__row { display: flex; gap: 8px; }
body.woocommerce-checkout .saf-promo__input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	color: var(--saf-ink);
	background: #fff;
	border: 1px solid var(--saf-grey-4);
	border-radius: 0;
	padding: 0 12px;
	min-height: 44px;
	appearance: none;
}
body.woocommerce-checkout .saf-promo__input:focus { outline: 2px solid var(--saf-orange); outline-offset: -2px; border-color: var(--saf-orange); }
body.woocommerce-checkout .saf-promo__input::placeholder { color: var(--saf-grey-3); }
body.woocommerce-checkout .saf-promo__btn {
	flex: none;
	background: var(--saf-ink);
	color: #fff;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--saf-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0 16px;
	min-height: 44px;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
body.woocommerce-checkout .saf-promo__btn:hover { background: var(--saf-orange); color: var(--saf-ink); }
body.woocommerce-checkout .saf-promo__btn:disabled { opacity: .55; cursor: wait; }

/* Woo returns its own notice markup from apply_coupon, so it arrives with the
   classes the notice rules above already style — just smaller, because this one
   sits inside a panel rather than across the page. */
body.woocommerce-checkout .saf-promo__msg:empty { display: none; }
body.woocommerce-checkout .saf-promo__msg { margin-top: 10px; }
body.woocommerce-checkout .saf-promo__msg .woocommerce-message,
body.woocommerce-checkout .saf-promo__msg .woocommerce-error,
body.woocommerce-checkout .saf-promo__msg .woocommerce-info {
	margin: 0;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.45;
}
body.woocommerce-checkout .saf-promo__msg ul { list-style: none; margin: 0; padding: 0; }

/* The applied-coupon row gets its remove link back, since Woo only wires that
   up on the cart page. */
body.woocommerce-checkout .saf-co table.saf-sum tr.cart-discount a.woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	color: var(--saf-grey);
	text-decoration: underline;
}
body.woocommerce-checkout .saf-co table.saf-sum tr.cart-discount a.woocommerce-remove-coupon:hover { color: #C0392B; }

/* --- select2 (country and state) ---------------------------------------- */

/* The rendered label was 61px tall inside a 48px control and offset 14px down,
   so "California" floated below its own field. It was being positioned by
   line-height against a container whose height came from somewhere else
   entirely. Centring it with flex removes the arithmetic: the control owns the
   height, the label just sits in the middle of it. */

body.woocommerce-checkout .saf-co .select2-container { height: 48px; width: 100% !important; }
body.woocommerce-checkout .saf-co .select2-container .select2-selection--single {
	height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid var(--saf-grey-4);
	border-radius: 0;
	background: #fff;
	outline: none;
}
body.woocommerce-checkout .saf-co .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: normal;
	height: auto;
	padding: 0 38px 0 14px;
	margin: 0;
	color: var(--saf-ink);
	font-size: 16px;
}
body.woocommerce-checkout .saf-co .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
	top: 0;
	right: 8px;
}
body.woocommerce-checkout .saf-co .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .saf-co .select2-container--open .select2-selection--single { outline: 2px solid var(--saf-orange); outline-offset: -2px; border-color: var(--saf-orange); }
body.woocommerce-checkout .select2-dropdown { border-color: var(--saf-grey-4); border-radius: 0; }
body.woocommerce-checkout .select2-results__option--highlighted { background: var(--saf-orange) !important; color: var(--saf-ink) !important; }

@media (min-width: 860px) {
	body.woocommerce-checkout .saf-co .select2-container .select2-selection--single .select2-selection__rendered { font-size: 15px; }
}

/* --- Payment method radio alignment ------------------------------------- */

/* The radios sat 1px from the border. The margin that was supposed to inset
   them lost a specificity contest it could not win: Woo's rule is
   `.woocommerce-checkout #payment ul.payment_methods li input`, and an id beats
   any number of classes. So this one carries the id too.
   15px is not arbitrary — it is the text inset of every input on the page, so
   the radios line up with the left edge of the form's content rather than with
   the box that contains it. */

body.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0 0 0 15px;
	padding: 0;
	accent-color: var(--saf-orange);
	flex: none;
}
/* The radio now supplies the left inset, so the label stops adding its own. */
body.woocommerce-checkout #payment ul.payment_methods li > label { padding: 12px 16px 12px 12px; }

/* Google seller rating, in the footer.

   Not floating, and not clipped. Both of those were mistakes worth not
   repeating: a fixed badge had to be clipped so Google's 614px-wide iframe
   would stop swallowing clicks across the foot of every page, and clipping
   it broke the thing — clicking the badge expands that iframe to 344x570 to
   show the reviews panel, which a 150x60 box with overflow hidden showed as
   a 60px sliver. It looked like a dead control.

   In normal flow it can grow when opened, and nothing is overlaid, so
   neither problem exists. Google draws its own pill; there is no card here
   on purpose. */
.saf-footer__rating {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.saf-footer__rating iframe {
	max-width: 100%;
	border: 0;
}