/* ==================================================================
   Derek's Pet Shop — main stylesheet
   Mobile first. Breakpoints: 640px (large phone / tablet), 1024px (desktop)

   1. Fonts + tokens
   2. Base
   3. Layout
   4. Buttons, links, icons
   5. Status bar + header
   6. Navigation (drawer on mobile, mega menu on desktop)
   7. Home
   8. Product cards
   9. Product page
   10. Contact page + forms
   11. Footer
   12. Toast
   13. Shop listings (categories, brands, search)
   14. Product page additions
   15. Cart
   16. Checkout
   17. Order confirmation
   18. Content pages
   19. Sign-in pages
   20. Signed-in bar
   ================================================================== */


/* ------------------------------------------------------------------
   1. Fonts + tokens
   ------------------------------------------------------------------ */

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url( '../fonts/bricolage-grotesque-var.woff2' ) format( 'woff2-variations' );
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Red Hat Text';
	src: url( '../fonts/red-hat-text-var.woff2' ) format( 'woff2-variations' );
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Red Hat Text';
	src: url( '../fonts/red-hat-text-var-italic.woff2' ) format( 'woff2-variations' );
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Actinic: the deep blue of a reef tank under its lights */
	--actinic: #1e237a;
	--actinic-deep: #141859;

	/* Zoa: zoanthid / clownfish orange. The one accent. */
	--zoa: #ff5b1f;
	--zoa-hover: #ff7743;

	/* Glow: coral green. Only for "open now" and "in stock". */
	--glow: #5ef0b0;
	--ok: #0f7a52;

	--glass: #e9f1f5;
	--paper: #ffffff;
	--ink: #1a1f3d;
	--muted: #555d78;
	--line: #d3dde5;

	--font-display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
	--font-body: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--gutter: 16px;
	--max: 1200px;
	--header-h: 60px;
	--radius: 12px;
}

@media ( min-width: 640px ) {
	:root {
		--gutter: 24px;
	}
}

@media ( min-width: 1024px ) {
	:root {
		--gutter: 32px;
		--header-h: 72px;
	}
}


/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

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

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

body {
	margin: 0;
	background: var( --paper );
	color: var( --ink );
	font-family: var( --font-body );
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.is-locked {
	overflow: hidden;
}

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

img {
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var( --font-display );
	text-wrap: balance;
}

h1 {
	font-size: clamp( 2.4rem, 1.6rem + 4vw, 4.25rem );
	font-weight: 760;
	font-stretch: 82%;
	line-height: 1;
	letter-spacing: -.015em;
}

h2 {
	font-size: clamp( 1.7rem, 1.35rem + 1.8vw, 2.5rem );
	font-weight: 720;
	font-stretch: 86%;
	line-height: 1.05;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: inherit;
}

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

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

button {
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var( --zoa );
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 10px 16px;
	border-radius: 8px;
	background: var( --zoa );
	color: var( --actinic-deep );
	font-weight: 700;
	transform: translateY( -200% );
}

.skip-link:focus {
	transform: none;
}

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

.nowrap {
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
	}
}


/* ------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------ */

.container {
	width: min( 100% - var( --gutter ) * 2, var( --max ) );
	margin-inline: auto;
}

.section {
	padding-block: 48px;
}

.section--glass {
	background: var( --glass );
}

.section--dark {
	background: var( --actinic );
	color: #fff;
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}

@media ( min-width: 1024px ) {
	.section {
		padding-block: 72px;
	}
}


/* ------------------------------------------------------------------
   4. Buttons, links, icons
   ------------------------------------------------------------------ */

.icon {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon--sm {
	width: 18px;
	height: 18px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var( --font-display );
	font-size: 1.0625rem;
	font-weight: 650;
	font-stretch: 94%;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
	background: var( --zoa );
	color: var( --actinic-deep );
}

.btn--primary:hover {
	background: var( --zoa-hover );
}

.btn--light {
	border-color: rgba( 255, 255, 255, .55 );
	color: #fff;
}

.btn--light:hover {
	border-color: #fff;
	background: rgba( 255, 255, 255, .08 );
}

.btn--outline {
	border-color: var( --actinic );
	color: var( --actinic );
}

.btn--outline:hover {
	background: var( --actinic );
	color: #fff;
}

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

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.btn-row .btn {
	flex: 1 1 180px;
}

@media ( min-width: 640px ) {
	.btn-row .btn {
		flex: 0 0 auto;
	}
}

.link {
	color: var( --actinic );
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var( --zoa );
}

.link:hover {
	text-decoration-color: currentColor;
}

.section--dark .link {
	color: #fff;
}

.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var( --zoa );
}

.is-store-open .dot,
.dot--ok {
	background: var( --glow );
	box-shadow: 0 0 0 3px rgba( 94, 240, 176, .22 );
}


/* ------------------------------------------------------------------
   5. Status bar + header
   ------------------------------------------------------------------ */

.statusbar {
	background: var( --actinic-deep );
	color: #fff;
	font-size: .84rem;
	line-height: 1.3;
}

.statusbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 34px;
}

.statusbar__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.statusbar__extra {
	display: none;
}

.statusbar__phone {
	flex: none;
	font-weight: 700;
	text-decoration: none;
}

.statusbar__phone:hover {
	text-decoration: underline;
}

@media ( min-width: 768px ) {
	.statusbar__extra {
		display: inline;
		margin-left: 4px;
		padding-left: 12px;
		border-left: 1px solid rgba( 255, 255, 255, .3 );
		color: rgba( 255, 255, 255, .72 );
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var( --paper );
	border-bottom: 1px solid var( --line );
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var( --header-h );
}

.brand {
	display: inline-flex;
	flex-direction: column;
	margin-right: auto;
	color: var( --actinic );
	font-family: var( --font-display );
	line-height: .86;
	text-decoration: none;
}

.brand__name {
	font-size: 1.75rem;
	font-weight: 800;
	font-stretch: 76%;
	letter-spacing: -.01em;
}

.brand__sub {
	margin-top: 3px;
	padding-left: 1px;
	color: var( --zoa );
	font-size: .9rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.header-actions {
	display: flex;
	align-items: center;
	margin-right: -8px;
}

.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --actinic );
	text-decoration: none;
}

.icon-btn:hover {
	background: var( --glass );
}

.cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border: 2px solid var( --paper );
	border-radius: 10px;
	background: var( --zoa );
	color: var( --actinic-deep );
	font-size: .7rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.cart-count[data-count="0"] {
	display: none;
}

.header-search {
	display: none;
}

.search {
	position: relative;
}

.search input {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 44px;
	border: 1px solid var( --line );
	border-radius: 999px;
	background: var( --glass );
	font-size: 1rem;
}

.search input:focus {
	border-color: var( --actinic );
	background: var( --paper );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 30, 35, 122, .15 );
}

.search .icon {
	position: absolute;
	top: 50%;
	left: 15px;
	width: 18px;
	height: 18px;
	color: var( --muted );
	transform: translateY( -50% );
	pointer-events: none;
}

@media ( min-width: 1024px ) {
	.site-header__inner {
		gap: 16px;
	}

	.brand {
		margin-right: 24px;
	}

	.brand__name {
		font-size: 2.05rem;
	}

	.header-search {
		display: block;
		flex: 0 1 240px;
		margin-left: auto;
	}

	.header-actions .js-search-open,
	.header-actions .js-nav-open {
		display: none;
	}
}


/* ------------------------------------------------------------------
   6. Navigation
   Mobile: the <nav> is a slide-in drawer with accordion panels.
   Desktop: the same markup becomes a bar with dropdowns, and Aquatics
   opens a full-width mega menu.
   ------------------------------------------------------------------ */

.nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba( 20, 24, 89, .45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.nav-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

.nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min( 100%, 420px );
	background: var( --paper );
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform .25s ease, visibility .25s ease;
}

.nav.is-open {
	transform: none;
	visibility: visible;
}

.nav .container {
	width: auto;
	margin: 0;
}

.nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var( --header-h );
	padding: 0 8px 0 var( --gutter );
	border-bottom: 1px solid var( --line );
}

.nav__title {
	font-family: var( --font-display );
	font-size: 1.25rem;
	font-weight: 700;
}

.nav__search {
	padding: 16px var( --gutter ) 8px;
}

.nav__list {
	padding: 0 var( --gutter );
}

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

.nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 58px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --actinic );
	font-family: var( --font-display );
	font-size: 1.3rem;
	font-weight: 680;
	font-stretch: 90%;
	text-align: left;
}

.nav__toggle .icon {
	transition: transform .2s ease;
}

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

.nav__panel {
	display: none;
	padding-bottom: 20px;
}

.nav__toggle[aria-expanded="true"] + .nav__panel {
	display: block;
}

.nav__group + .nav__group {
	margin-top: 18px;
}

.nav__group-title {
	margin-bottom: 6px;
	color: var( --muted );
	font-size: .875rem;
	font-weight: 700;
}

.nav__group a {
	display: block;
	padding: 7px 0;
	text-decoration: none;
}

.nav__group a[aria-current] {
	color: var( --zoa );
	font-weight: 700;
}

.nav__group a:hover {
	color: var( --actinic );
	text-decoration: underline;
	text-decoration-color: var( --zoa );
	text-underline-offset: 4px;
}

.nav__note {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var( --glass );
	color: var( --muted );
	font-size: .9rem;
}

.nav__brands {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var( --line );
	font-size: .95rem;
}

.nav__brands p {
	margin-bottom: 6px;
	color: var( --muted );
	font-size: .875rem;
	font-weight: 700;
}

.nav__brands ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.nav__brands a {
	text-decoration: none;
}

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

.nav__promo {
	display: none;
}

.nav__visit {
	margin-top: auto;
	padding: 24px var( --gutter ) 28px;
	background: var( --glass );
}

.nav__visit-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.nav__visit-addr {
	margin: 4px 0 16px;
	color: var( --muted );
}

.badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var( --zoa );
	color: var( --actinic-deep );
	font-family: var( --font-body );
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}

@media ( min-width: 1024px ) {
	.nav-backdrop,
	.nav__top,
	.nav__search,
	.nav__visit {
		display: none;
	}

	.nav {
		position: static;
		display: block;
		width: auto;
		background: none;
		overflow: visible;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.nav .container {
		width: min( 100% - var( --gutter ) * 2, var( --max ) );
		margin-inline: auto;
	}

	.nav__list {
		display: flex;
		gap: 2px;
		padding: 0;
	}

	.nav__item {
		position: relative;
		border: 0;
	}

	.nav__item--mega {
		position: static;
	}

	.nav__toggle {
		gap: 4px;
		width: auto;
		min-height: 44px;
		padding: 0 12px;
		border-radius: 8px;
		font-size: 1.08rem;
		font-weight: 650;
		font-stretch: 92%;
	}

	.nav__toggle .icon {
		width: 16px;
		height: 16px;
	}

	.nav__toggle:hover,
	.nav__toggle[aria-expanded="true"] {
		background: var( --glass );
	}

	.nav__panel {
		position: absolute;
		top: calc( 100% + 8px );
		left: 0;
		z-index: 60;
		min-width: 260px;
		padding: 20px 24px;
		border: 1px solid var( --line );
		border-radius: var( --radius );
		background: var( --paper );
		box-shadow: 0 18px 40px -12px rgba( 20, 24, 89, .28 );
	}

	.nav__item--mega .nav__panel {
		top: 100%;
		right: 0;
		left: 0;
		padding: 28px 0 24px;
		border-width: 1px 0;
		border-radius: 0;
	}

	.nav__mega {
		display: grid;
		grid-template-columns: repeat( 4, 1fr ) 1.25fr;
		gap: 32px;
	}

	.nav__group + .nav__group {
		margin-top: 0;
	}

	.nav__group a {
		padding: 5px 0;
	}

	.nav__brands {
		display: flex;
		align-items: baseline;
		gap: 16px;
		margin-top: 24px;
	}

	.nav__brands p {
		margin: 0;
		white-space: nowrap;
	}

	.nav__promo {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 20px;
		border-radius: var( --radius );
		background: var( --actinic );
		color: #fff;
	}

	.nav__promo h3 {
		margin: 0;
		font-family: var( --font-display );
		font-size: 1.3rem;
		line-height: 1.15;
	}

	.nav__promo p {
		color: rgba( 255, 255, 255, .8 );
		font-size: .95rem;
	}

	.nav__promo .link {
		margin-top: auto;
		color: #fff;
	}
}


/* ------------------------------------------------------------------
   7. Home
   ------------------------------------------------------------------ */

.hero {
	background: var( --actinic );
	color: #fff;
}

.hero__inner {
	display: grid;
	gap: 28px;
	padding-block: 36px 40px;
}

.hero h1 {
	max-width: 11ch;
}

.hero__lead {
	max-width: 36ch;
	margin-top: 18px;
	color: rgba( 255, 255, 255, .86 );
	font-size: 1.15rem;
}

.hero__actions {
	margin-top: 26px;
}

.hero__media {
	margin: 0;
	border-radius: var( --radius );
	background: var( --actinic-deep );
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

@media ( min-width: 1024px ) {
	.hero__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 56px;
		padding-block: 64px 72px;
	}
}

/* Categories */
.cats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px 14px;
}

.cat {
	display: block;
	color: var( --actinic );
	font-family: var( --font-display );
	font-size: 1.12rem;
	font-weight: 680;
	font-stretch: 92%;
	line-height: 1.2;
	text-decoration: none;
}

.cat__img {
	display: block;
	margin-bottom: 10px;
	border-radius: var( --radius );
	background: var( --glass );
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.cat__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.cat__img--white {
	border: 1px solid var( --line );
	background: var( --paper );
}

.cat__img--white img {
	padding: 10px;
	object-fit: contain;
}

.cat:hover {
	text-decoration: underline;
	text-decoration-color: var( --zoa );
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.cat:hover .cat__img img {
	transform: scale( 1.04 );
}

@media ( min-width: 768px ) {
	.cats {
		grid-template-columns: repeat( 4, 1fr );
		gap: 28px 20px;
	}
}

/* Quarantine band: the 40-tick bar, one tick per day */
.qt-band__inner {
	display: grid;
	gap: 28px;
}

.qt-band h2 {
	max-width: 16ch;
}

.qt-band p {
	max-width: 46ch;
	margin-top: 14px;
	color: rgba( 255, 255, 255, .84 );
}

.qt-band .qt-band__more {
	margin-top: 18px;
}

.qt-meter {
	height: 28px;
	background: var( --zoa );
	-webkit-mask: repeating-linear-gradient( to right, #000 0, #000 calc( 2.5% - 3px ), transparent calc( 2.5% - 3px ), transparent 2.5% );
	mask: repeating-linear-gradient( to right, #000 0, #000 calc( 2.5% - 3px ), transparent calc( 2.5% - 3px ), transparent 2.5% );
}

.qt-band__labels {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-family: var( --font-display );
	font-weight: 700;
}

@media ( min-width: 1024px ) {
	.qt-band__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 64px;
	}
}

/* Visit */
.visit {
	display: grid;
	gap: 32px;
}

.visit__addr {
	margin-top: 14px;
	font-size: 1.15rem;
	font-style: normal;
	line-height: 1.45;
}

.visit__body .status-line {
	margin-top: 12px;
}

.visit__body .btn-row {
	margin-top: 22px;
}

.visit__aside {
	max-width: 44ch;
	margin-top: 24px;
	color: var( --muted );
}

.status-line {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-weight: 700;
}

.status-line .dot {
	transform: translateY( -1px );
}

.status-line--lg {
	margin-bottom: 16px;
	font-size: 1.15rem;
}

.visit__body .status-line--lg {
	margin-top: 0;
}

.hours {
	width: 100%;
	border-collapse: collapse;
}

.hours caption {
	margin-bottom: 8px;
	font-family: var( --font-display );
	font-size: 1.3rem;
	font-weight: 700;
	text-align: left;
}

.hours th,
.hours td {
	padding: 10px 12px;
	border-bottom: 1px solid var( --line );
	font-weight: 400;
	text-align: left;
}

.hours td {
	text-align: right;
}

.hours .is-closed-day td {
	color: var( --muted );
}

.hours .is-today th,
.hours .is-today td {
	background: var( --glass );
	font-weight: 700;
}

.section--glass .hours .is-today th,
.section--glass .hours .is-today td {
	background: var( --paper );
}

.hours .is-today th::after {
	content: "Today";
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var( --actinic );
	color: #fff;
	font-size: .72rem;
	vertical-align: 2px;
}

@media ( min-width: 1024px ) {
	.visit {
		grid-template-columns: 1.1fr 1fr;
		gap: 72px;
		align-items: start;
	}
}


/* ------------------------------------------------------------------
   8. Product cards
   ------------------------------------------------------------------ */

.cards {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px 14px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var( --ink );
	text-decoration: none;
}

.card__img {
	position: relative;
	display: block;
	margin-bottom: 8px;
	border-radius: var( --radius );
	background: var( --glass );
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

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

.card__img--white {
	border: 1px solid var( --line );
	background: var( --paper );
}

.card__img--white img {
	padding: 8px;
	object-fit: contain;
}

.card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --actinic );
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}

.card__name {
	font-weight: 700;
	line-height: 1.3;
}

.card:hover .card__name {
	text-decoration: underline;
	text-decoration-color: var( --zoa );
	text-underline-offset: 3px;
}

.card__price {
	font-family: var( --font-display );
	font-size: 1.2rem;
	font-weight: 720;
}

.card__price--out {
	color: var( --muted );
	font-family: var( --font-body );
	font-size: 1rem;
	font-weight: 400;
}

@media ( min-width: 768px ) {
	.cards {
		grid-template-columns: repeat( 4, 1fr );
		gap: 24px;
	}
}


/* ------------------------------------------------------------------
   9. Product page
   ------------------------------------------------------------------ */

.crumbs {
	padding-block: 14px;
	font-size: .9rem;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --muted );
}

.crumbs li + li::before {
	content: "/";
	color: var( --line );
}

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

.crumbs [aria-current] {
	color: var( --ink );
}

.product {
	display: grid;
	gap: 24px;
	padding-bottom: 48px;
}

.product__photo {
	position: relative;
	margin: 0;
	border: 1px solid var( --line );
	border-radius: var( --radius );
	background: var( --paper );
	aspect-ratio: 4 / 3;
}

.product__photo img {
	width: 100%;
	height: 100%;
	padding: 6%;
	object-fit: contain;
}

.product__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	background: var( --actinic );
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
}

.product__title {
	font-size: clamp( 2.1rem, 1.6rem + 2.6vw, 3.2rem );
}

.product__latin {
	margin-top: 6px;
	color: var( --muted );
	font-style: italic;
}

.product__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.product__price {
	font-family: var( --font-display );
	font-size: 2.1rem;
	font-weight: 740;
	line-height: 1;
}

.stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --ok );
	font-weight: 700;
}

.buy-form {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.buy-form .btn {
	flex: 1;
}

.qty {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 50px;
	border: 2px solid var( --line );
	border-radius: 999px;
}

.qty button {
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var( --actinic );
	font-size: 1.4rem;
	line-height: 1;
}

.qty button:hover {
	background: var( --glass );
}

.qty input {
	width: 36px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.product__desc {
	margin-top: 26px;
	max-width: 56ch;
}

.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 20px 0 0;
	border-top: 1px solid var( --line );
}

.facts div {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var( --line );
}

.facts dt {
	color: var( --muted );
	font-size: .85rem;
	font-weight: 700;
}

.facts dd {
	margin: 0;
	line-height: 1.35;
}

.product__note {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	padding: 14px 16px;
	border-radius: var( --radius );
	background: var( --glass );
	line-height: 1.45;
}

.product__note .icon {
	margin-top: 1px;
	color: var( --zoa );
}

.call-line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: var( --actinic );
	font-weight: 700;
	text-decoration: none;
}

.call-line > span {
	text-decoration: underline;
	text-decoration-color: var( --zoa );
	text-underline-offset: 3px;
}

@media ( min-width: 1024px ) {
	.product {
		grid-template-columns: 1.1fr 1fr;
		gap: 56px;
		align-items: start;
		padding-bottom: 72px;
	}

	.product__photo {
		position: sticky;
		top: calc( var( --header-h ) + 24px );
	}
}


/* ------------------------------------------------------------------
   10. Contact page + forms
   ------------------------------------------------------------------ */

.page-head {
	padding-block: 36px 40px;
	background: var( --actinic );
	color: #fff;
}

.page-head p {
	max-width: 44ch;
	margin-top: 14px;
	color: rgba( 255, 255, 255, .86 );
	font-size: 1.15rem;
}

.page-head .btn-row {
	margin-top: 24px;
}

.page-head .btn .icon {
	width: 20px;
	height: 20px;
}

@media ( min-width: 1024px ) {
	.page-head {
		padding-block: 56px 64px;
	}
}

.map {
	border-radius: var( --radius );
	background: var( --glass );
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.form {
	display: grid;
	gap: 18px;
	max-width: 720px;
	margin-inline: auto;
	padding: 22px 18px;
	border: 1px solid var( --line );
	border-radius: var( --radius );
	background: var( --paper );
}

.form__intro {
	margin-top: 8px;
	color: var( --muted );
}

.form__fields,
.form__row {
	display: grid;
	gap: 18px;
}

.field {
	display: grid;
	gap: 6px;
}

.field label {
	font-weight: 700;
}

.field input,
.field textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 2px solid var( --line );
	border-radius: 10px;
	background: var( --paper );
	font-size: 1rem;
}

.field textarea {
	min-height: 140px;
	resize: vertical;
}

.field input:focus,
.field textarea:focus {
	border-color: var( --actinic );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 30, 35, 122, .15 );
}

.field.has-error input,
.field.has-error textarea {
	border-color: #c2410c;
}

.field__error {
	display: none;
	color: #b3380a;
	font-size: .9rem;
	font-weight: 700;
}

.field.has-error .field__error {
	display: block;
}

.form__done {
	display: none;
	padding: 18px;
	border-radius: 10px;
	background: #e3f6ee;
	color: var( --ok );
	font-weight: 700;
}

.form.is-sent .form__done {
	display: block;
}

.form.is-sent .form__fields {
	display: none;
}

@media ( min-width: 640px ) {
	.form {
		padding: 32px;
	}

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


/* ------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------ */

.site-footer {
	background: var( --actinic-deep );
	color: rgba( 255, 255, 255, .82 );
}

.footer-main {
	display: grid;
	gap: 32px;
	padding-block: 44px;
}

.footer-brand .brand {
	color: #fff;
}

.footer-brand address {
	margin-top: 14px;
	font-style: normal;
	line-height: 1.6;
}

.footer-brand a {
	color: #fff;
	text-underline-offset: 3px;
}

.footer-links ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 20px;
}

.footer-links a {
	display: inline-block;
	padding: 5px 0;
	text-decoration: none;
}

.footer-links a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var( --zoa );
	text-underline-offset: 3px;
}

.signup h2 {
	margin-bottom: 12px;
	color: #fff;
	font-size: 1.25rem;
}

.signup__form {
	display: flex;
	gap: 8px;
}

.signup__form input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 18px;
	border: 2px solid rgba( 255, 255, 255, .25 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .06 );
	color: #fff;
}

.signup__form input::placeholder {
	color: rgba( 255, 255, 255, .6 );
}

.signup__form input:focus {
	border-color: #fff;
	outline: none;
}

.signup__form .btn {
	min-height: 48px;
	padding: 0 20px;
}

.signup__done {
	display: none;
	color: var( --glow );
	font-weight: 700;
}

.signup.is-sent .signup__done {
	display: block;
}

.signup.is-sent .signup__form {
	display: none;
}

.footer-bottom {
	padding-block: 18px 26px;
	border-top: 1px solid rgba( 255, 255, 255, .14 );
	color: rgba( 255, 255, 255, .6 );
	font-size: .875rem;
}

@media ( min-width: 1024px ) {
	.footer-main {
		grid-template-columns: 1fr 1fr 1.2fr;
		gap: 64px;
		padding-block: 56px;
	}
}


/* ------------------------------------------------------------------
   12. Toast
   ------------------------------------------------------------------ */

.toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc( 100vw - 32px );
	padding: 14px 20px;
	border-radius: var( --radius );
	background: var( --actinic-deep );
	color: #fff;
	font-weight: 700;
	box-shadow: 0 16px 36px -12px rgba( 20, 24, 89, .55 );
	opacity: 0;
	visibility: hidden;
	transform: translate( -50%, 12px );
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

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

.toast .icon {
	color: var( --glow );
}

.toast--error .icon {
	color: var( --zoa );
}

.toast__link {
	margin-left: 4px;
	color: var( --glow );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.toast__link[hidden] {
	display: none;
}


/* ------------------------------------------------------------------
   Shared bits added for the live site
   ------------------------------------------------------------------ */

.btn:disabled,
.btn[disabled] {
	cursor: not-allowed;
	opacity: .55;
}

.btn--sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: .95rem;
}

.section--tight {
	padding-block: 28px 56px;
}

.notice {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var( --glass );
	color: var( --ink );
	font-size: .95rem;
	line-height: 1.45;
}

.notice--warn {
	background: #fff1ea;
	color: #8a2c07;
}

.notice--ok {
	background: #e3f6ee;
	color: var( --ok );
	font-weight: 700;
}

.form__error,
.signup__error {
	color: #b3380a;
	font-weight: 700;
}

.form__error:empty,
.signup__error:empty {
	display: none;
}

.signup__error {
	margin-top: 8px;
	color: #ffb79c;
}

.closures {
	margin-top: 14px;
	font-size: .95rem;
}

.closures li {
	padding: 6px 0;
	color: var( --muted );
}

.footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

.footer-bottom a {
	color: rgba( 255, 255, 255, .75 );
	text-underline-offset: 3px;
}

.dot--out {
	background: var( --line );
	box-shadow: none;
}

.optional {
	color: var( --muted );
	font-weight: 400;
}

/* A top-level menu item with no dropdown */
.nav__link {
	display: flex;
	align-items: center;
	min-height: 58px;
	color: var( --actinic );
	font-family: var( --font-display );
	font-size: 1.3rem;
	font-weight: 680;
	font-stretch: 90%;
	text-decoration: none;
}

@media ( min-width: 1024px ) {
	.nav__link {
		min-height: 44px;
		padding: 0 12px;
		border-radius: 8px;
		font-size: 1.08rem;
		font-weight: 650;
		font-stretch: 92%;
	}

	.nav__link:hover,
	.nav__link[aria-current] {
		background: var( --glass );
	}
}


/* ------------------------------------------------------------------
   13. Shop listings (categories, brands, search)
   ------------------------------------------------------------------ */

.page-head--slim {
	padding-block: 28px 30px;
}

.page-head__kicker {
	margin: 0 0 6px !important;
	color: var( --glow ) !important;
	font-size: .9rem !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@media ( min-width: 1024px ) {
	.page-head--slim {
		padding-block: 40px 44px;
	}
}

.crumbs--light {
	padding: 0 0 10px;
}

.crumbs--light li,
.crumbs--light a {
	color: rgba( 255, 255, 255, .78 );
}

.crumbs--light li + li::before {
	color: rgba( 255, 255, 255, .4 );
}

.chips ul,
.brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chips {
	margin-bottom: 20px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var( --line );
	border-radius: 999px;
	background: var( --paper );
	color: var( --actinic );
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.chip:hover {
	border-color: var( --actinic );
	background: var( --glass );
}

.chip span {
	color: var( --muted );
	font-weight: 400;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --line );
}

.filters__count {
	color: var( --muted );
	font-weight: 700;
}

.filters__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.select select,
.field select {
	min-height: 44px;
	padding: 0 40px 0 14px;
	border: 2px solid var( --line );
	border-radius: 10px;
	background: var( --paper ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e237a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" ) no-repeat right 12px center / 16px;
	color: var( --ink );
	font: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.select select:focus,
.field select:focus {
	border-color: var( --actinic );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 30, 35, 122, .15 );
}

.field select {
	width: 100%;
	min-height: 50px;
}

.field.has-error select {
	border-color: #c2410c;
}

.select--block,
.select--block select {
	display: block;
	width: 100%;
}

.toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	cursor: pointer;
}

.toggle input {
	width: 20px;
	height: 20px;
	accent-color: var( --actinic );
}

.cards--grid {
	gap: 28px 14px;
}

@media ( min-width: 768px ) {
	.cards--grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: 32px 24px;
	}
}

@media ( min-width: 1024px ) {
	.cards--grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.card__noimg,
.product__noimg {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba( 30, 35, 122, .25 );
}

.card__noimg .icon {
	width: 46%;
	height: auto;
	stroke-width: 1;
}

.product__noimg .icon {
	width: 40%;
	height: auto;
	stroke-width: .8;
}

.pager {
	margin-top: 40px;
}

.pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.pager a,
.pager span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.pager a {
	border: 1px solid var( --line );
	color: var( --actinic );
}

.pager a:hover {
	border-color: var( --actinic );
}

.pager [aria-current] {
	background: var( --actinic );
	color: #fff;
}

.pager__gap {
	align-self: center;
	color: var( --muted );
}

.empty {
	max-width: 560px;
	margin: 24px auto;
	padding: 32px 24px;
	border-radius: var( --radius );
	background: var( --glass );
	text-align: center;
}

.empty h2 {
	margin-bottom: 10px;
	font-size: 1.6rem;
}

.empty p + p,
.empty .btn-row {
	margin-top: 14px;
}

.empty .btn-row {
	justify-content: center;
}

.search--page {
	max-width: 560px;
	margin-top: 22px;
}

.search--page input {
	height: 52px;
	border: 0;
	background: var( --paper );
	color: var( --ink );
	font-size: 1.05rem;
}

.search-pages {
	margin-top: 48px;
}

.search-pages h2 {
	margin-bottom: 14px;
	font-size: 1.5rem;
}

.search-pages li {
	padding: 12px 0;
	border-bottom: 1px solid var( --line );
}

.search-pages p {
	margin-top: 4px;
	color: var( --muted );
}


/* ------------------------------------------------------------------
   14. Product page additions
   ------------------------------------------------------------------ */

.product__media {
	min-width: 0;
}

.product__photo {
	overflow: hidden;
}

.product__photo--cover img {
	padding: 0;
	object-fit: cover;
}

.thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.thumb {
	flex: none;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid var( --line );
	border-radius: 10px;
	background: var( --paper );
	overflow: hidden;
}

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

.thumb.is-active {
	border-color: var( --actinic );
}

.product__brand {
	margin-top: 6px;
	color: var( --muted );
}

.stock--low {
	color: #b3380a;
}

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

.buy-form {
	flex-direction: column;
	gap: 12px;
}

.buy-form__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.buy-form__row {
	display: flex;
	gap: 10px;
}

.buy-form__row .btn {
	flex: 1;
}

.buy-form--call .btn {
	align-self: flex-start;
}

@media ( min-width: 1024px ) {
	.product__media {
		position: sticky;
		top: calc( var( --header-h ) + 24px );
	}

	.product__photo {
		position: relative;
		top: auto;
	}
}

.prose {
	max-width: 68ch;
	line-height: 1.65;
}

.prose > * + * {
	margin-top: 1em;
}

.prose h2 {
	margin-top: 1.6em;
	font-size: clamp( 1.45rem, 1.25rem + 1vw, 1.9rem );
}

.prose h3 {
	margin-top: 1.4em;
	font-size: 1.3rem;
}

.prose h2:first-child,
.prose h3:first-child {
	margin-top: 0;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose ul {
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li + li {
	margin-top: .35em;
}

.prose a:not( .btn ) {
	color: var( --actinic );
	font-weight: 700;
	text-decoration-color: var( --zoa );
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.prose img {
	border-radius: var( --radius );
}

.prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var( --zoa );
	color: var( --muted );
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: 8px 10px;
	border-bottom: 1px solid var( --line );
	text-align: left;
}

/* Text Derek still needs to replace; stands out so it isn't missed. */
.prose .placeholder {
	padding: 12px 14px;
	border: 2px dashed var( --zoa );
	border-radius: 10px;
	background: #fff6f1;
	color: #8a2c07;
}

.product__desc.prose {
	margin-top: 26px;
}


/* ------------------------------------------------------------------
   15. Cart
   ------------------------------------------------------------------ */

.cart {
	display: grid;
	gap: 28px;
}

.cart-line {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	grid-template-areas:
		"img body total"
		"img actions actions";
	gap: 8px 14px;
	padding: 18px 0;
	border-bottom: 1px solid var( --line );
	transition: opacity .15s ease;
}

.cart-line:first-child {
	border-top: 1px solid var( --line );
}

.cart-line.is-saving {
	opacity: .5;
	pointer-events: none;
}

.cart-line__img {
	grid-area: img;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 10px;
	background: var( --glass );
	overflow: hidden;
	color: rgba( 30, 35, 122, .3 );
}

.cart-line__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-line__img--white {
	border: 1px solid var( --line );
	background: var( --paper );
}

.cart-line__img--white img {
	padding: 6px;
	object-fit: contain;
}

.cart-line__body {
	grid-area: body;
	min-width: 0;
}

.cart-line__name {
	color: var( --ink );
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.cart-line__name:hover {
	text-decoration: underline;
	text-decoration-color: var( --zoa );
}

.cart-line__option,
.cart-line__unit {
	color: var( --muted );
	font-size: .92rem;
}

.cart-line__problem {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: #b3380a;
	font-size: .92rem;
	font-weight: 700;
}

.cart-line__flag {
	display: inline-block;
	margin-top: 6px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var( --glass );
	color: var( --actinic );
	font-size: .78rem;
	font-weight: 700;
}

.cart-line__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 14px;
}

.cart-line__total {
	grid-area: total;
	font-family: var( --font-display );
	font-size: 1.15rem;
	font-weight: 720;
	text-align: right;
}

.cart-line__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var( --muted );
	font-size: .92rem;
}

.cart-line__remove:hover {
	color: #b3380a;
}

.qty--sm {
	height: 42px;
}

.qty--sm button {
	width: 38px;
}

.cart__summary,
.checkout__summary {
	align-self: start;
	padding: 22px;
	border-radius: var( --radius );
	background: var( --glass );
}

.totals {
	margin: 0;
}

.totals div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
}

.totals dt {
	color: var( --muted );
}

.totals dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.totals__grand {
	margin-top: 6px;
	padding-top: 14px !important;
	border-top: 2px solid var( --line );
}

.totals__grand dt,
.totals__grand dd {
	color: var( --ink );
	font-family: var( --font-display );
	font-size: 1.35rem;
	font-weight: 750;
}

.cart__note {
	margin: 6px 0 18px;
	color: var( --muted );
	font-size: .92rem;
}

.cart__summary .notice {
	margin: 0 0 16px;
}

.cart__continue {
	display: inline-block;
	margin-top: 16px;
}

@media ( min-width: 640px ) {
	.cart-line {
		grid-template-columns: 96px 1fr auto auto;
		grid-template-areas: "img body actions total";
		align-items: center;
		gap: 18px;
	}

	.cart-line__img {
		width: 96px;
		height: 96px;
	}

	.cart-line__total {
		min-width: 90px;
	}
}

@media ( min-width: 1024px ) {
	.cart {
		grid-template-columns: 1fr 340px;
		align-items: start;
		gap: 48px;
	}

	.cart__summary {
		position: sticky;
		top: calc( var( --header-h ) + 24px );
	}
}


/* ------------------------------------------------------------------
   16. Checkout
   ------------------------------------------------------------------ */

.checkout {
	display: grid;
	gap: 28px;
}

.checkout__form {
	display: grid;
	gap: 22px;
	min-width: 0;
}

.checkout__step {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 20px 18px 22px;
	border: 1px solid var( --line );
	border-radius: var( --radius );
	min-width: 0;
}

.checkout__step legend {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
	margin-left: -8px;
	color: var( --actinic );
	font-family: var( --font-display );
	font-size: 1.35rem;
	font-weight: 720;
	font-stretch: 90%;
}

.checkout__num {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --actinic );
	color: #fff;
	font-family: var( --font-body );
	font-size: .9rem;
	font-weight: 700;
}

.choices {
	display: grid;
	gap: 10px;
}

.choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.choice input {
	position: absolute;
	top: 20px;
	left: 16px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var( --actinic );
}

.choice__body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	padding: 16px 16px 16px 48px;
	border: 2px solid var( --line );
	border-radius: var( --radius );
	transition: border-color .15s ease, background-color .15s ease;
}

.choice input:checked + .choice__body {
	border-color: var( --actinic );
	background: var( --glass );
}

.choice input:focus-visible + .choice__body {
	outline: 3px solid var( --zoa );
	outline-offset: 2px;
}

.choice__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.choice__title .icon {
	width: 20px;
	height: 20px;
	color: var( --actinic );
}

.choice__price {
	font-family: var( --font-display );
	font-weight: 720;
}

.choice__note {
	grid-column: 1 / -1;
	color: var( --muted );
	font-size: .92rem;
	line-height: 1.4;
}

.choice.is-disabled {
	cursor: not-allowed;
}

.choice.is-disabled .choice__body {
	background: #f6f8fa;
}

.choice.is-disabled .choice__title {
	color: var( --muted );
}

.choice.is-disabled .choice__note {
	color: #8a2c07;
}

.address {
	display: grid;
	gap: 16px;
}

.address[hidden] {
	display: none;
}

.form__row--3 {
	display: grid;
	gap: 16px;
}

@media ( min-width: 640px ) {
	.checkout__step {
		padding: 24px 26px 26px;
	}

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

	.form__row--3 {
		grid-template-columns: 1.4fr 1fr .8fr;
	}
}

.field textarea[rows] {
	min-height: 90px;
}

.card-field {
	min-height: 90px;
}

.wallets {
	display: grid;
	gap: 10px;
}

.wallet {
	min-height: 48px;
}

.wallet[hidden] {
	display: none;
}

.wallet--apple {
	border-radius: 8px;
	cursor: pointer;
	-webkit-appearance: -apple-pay-button;
	-apple-pay-button-type: plain;
	-apple-pay-button-style: black;
}

.checkout__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: -6px;
	color: var( --muted );
	font-size: .88rem;
}

.checkout__error {
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff1ea;
	color: #8a2c07;
	font-weight: 700;
	line-height: 1.45;
}

.checkout__error[hidden] {
	display: none;
}

.btn--pay {
	min-height: 56px;
	font-size: 1.15rem;
}

.checkout__summary h2 {
	margin-bottom: 14px;
	font-size: 1.4rem;
}

.checkout__summary .totals {
	margin: 14px 0 16px;
}

.summary-lines li {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var( --line );
}

.summary-lines__img {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: var( --paper );
}

.summary-lines__img img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: cover;
}

.summary-lines__qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var( --actinic );
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.summary-lines__name {
	font-size: .95rem;
	line-height: 1.3;
}

.summary-lines__name small {
	display: block;
	color: var( --muted );
}

.summary-lines__price {
	font-weight: 700;
}

.summary-lines--large li {
	grid-template-columns: 1fr auto auto;
	gap: 18px;
	padding: 14px 0;
}

.summary-lines__qty-text {
	color: var( --muted );
}

@media ( min-width: 1024px ) {
	.checkout {
		grid-template-columns: 1fr 380px;
		align-items: start;
		gap: 40px;
	}

	.checkout__summary {
		position: sticky;
		top: calc( var( --header-h ) + 24px );
	}
}


/* ------------------------------------------------------------------
   17. Order confirmation
   ------------------------------------------------------------------ */

.order-view {
	display: grid;
	gap: 28px;
}

.order-view .totals {
	margin-top: 14px;
}

.order-view__side {
	align-self: start;
	padding: 22px;
	border-radius: var( --radius );
	background: var( --glass );
}

.order-view__side h2 {
	margin-bottom: 8px;
	font-size: 1.3rem;
}

.order-view__side address {
	margin-bottom: 12px;
	font-style: normal;
	line-height: 1.55;
}

.order-view__side p {
	margin-top: 10px;
}

.order-view__paid,
.order-view__help {
	color: var( --muted );
	font-size: .95rem;
}

@media ( min-width: 1024px ) {
	.order-view {
		grid-template-columns: 1fr 360px;
		gap: 48px;
	}
}


/* ------------------------------------------------------------------
   18. Content pages
   ------------------------------------------------------------------ */

.page-body {
	display: grid;
	gap: 32px;
}

.page-body__image {
	margin: 0;
	border-radius: var( --radius );
	overflow: hidden;
}

.page-body__image img {
	width: 100%;
}

@media ( min-width: 1024px ) {
	.page-body--with-image {
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
		gap: 56px;
	}
}

.visit__addr--small {
	margin-top: 18px;
	font-size: 1rem;
}


/* ------------------------------------------------------------------
   19. Sign-in pages
   ------------------------------------------------------------------ */

.auth-page {
	background: var( --actinic );
}

.auth {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 32px var( --gutter );
}

.auth__card {
	width: 100%;
	max-width: 420px;
	padding: 32px 24px;
	border-radius: var( --radius );
	background: var( --paper );
	box-shadow: 0 30px 60px -20px rgba( 0, 0, 0, .4 );
}

.auth__brand {
	margin-bottom: 26px;
}

.auth__title {
	font-size: 2rem;
	line-height: 1.05;
}

.auth__lead {
	margin-top: 8px;
	color: var( --muted );
}

.auth__form {
	display: grid;
	gap: 16px;
	margin-top: 22px;
}

.auth__foot {
	margin-top: 4px;
	text-align: center;
}

.auth__card > .auth__foot {
	margin-top: 20px;
}

.password-field {
	position: relative;
}

.password-field input {
	padding-right: 72px;
}

.password-field__toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: var( --glass );
	color: var( --actinic );
	font-size: .85rem;
	font-weight: 700;
	transform: translateY( -50% );
}

@media ( min-width: 640px ) {
	.auth__card {
		padding: 40px 36px;
	}
}


/* ------------------------------------------------------------------
   20. Signed-in bar
   The strip across the top for signed-in staff, same as Raise the Bar,
   with a shortcut to edit whatever is on screen.
   ------------------------------------------------------------------ */

body.admin-session {
	--admin-session-bar-height: 38px;
	padding-top: var( --admin-session-bar-height );
}

body.admin-session .site-header {
	top: var( --admin-session-bar-height );
}

.admin-session-bar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	height: var( --admin-session-bar-height );
	border-bottom: 1px solid #94c9df;
	background: linear-gradient( 90deg, #b8def0 0%, #c9e8f4 100% );
	color: #17384a;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: .78rem;
	box-shadow: 0 2px 12px rgba( 35, 93, 120, .14 );
}

.admin-session-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 0 16px;
}

.admin-session-status,
.admin-session-actions,
.admin-session-link {
	display: flex;
	align-items: center;
}

.admin-session-status {
	gap: 8px;
	min-width: 0;
	font-weight: 600;
}

.admin-session-status-short {
	display: none;
}

.admin-session-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1683b8;
	box-shadow: 0 0 0 3px rgba( 22, 131, 184, .16 );
}

.admin-session-actions {
	height: 100%;
}

.admin-session-link {
	gap: 7px;
	height: 100%;
	padding: 0 12px;
	color: #1d5068;
	text-decoration: none;
}

.admin-session-link:hover {
	background: rgba( 23, 56, 74, .1 );
}

@media ( max-width: 640px ) {
	.admin-session-status-long {
		display: none;
	}

	.admin-session-status-short {
		display: inline;
	}

	.admin-session-link span {
		display: none;
	}
}

.totals div[hidden] {
	display: none;
}

/* Phones: a long list of sub-categories is one swipeable row, so the products stay near the top. */
@media ( max-width: 767px ) {
	.chips {
		margin-inline: calc( var( --gutter ) * -1 );
	}

	.chips ul {
		flex-wrap: nowrap;
		padding: 0 var( --gutter ) 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.chips ul::-webkit-scrollbar {
		display: none;
	}

	.chip {
		flex: none;
		white-space: nowrap;
	}
}