:root {
	/* Themed tokens (#34) -- this is the "dark" theme, i.e. today's look;
	   body.theme-{slug} blocks further down override these per theme. */
	--color-bg: #0c0906;
	--color-surface: #13131a;
	--color-accent: #d3ad7f;
	--color-text: #fff;
	--color-text-muted: #ccc;
	--border: .1rem solid rgba(255,255,255,.3);
	--font-body: 'Roboto', sans-serif;

	/* Fixed tokens -- self-contained light UI chrome (cart flyout, mobile
	   nav flyout, form inputs) and the danger/error color stay literal
	   across every theme, not swapped. */
	--white: #fff;
	--black: #000;
	--red: #f9004d;

	--header-height: 9rem; /* fallback; sft1.js overwrites this with the real measured height */
}

*{
	font-family: var(--font-body);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	transition: .2s linear;
}

html {
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-padding-top: 9rem;
	scroll-behavior: smooth;
}

html::-webkit-scrollbar {
	width: .8rem;
}

html::-webkit-scrollbar-track {
	background: transparent;
}

html::-webkit-scrollbar-thumb {
	background: var(--white);
	border-radius: 5rem;
}

body {
	background: var(--color-bg);
}

section {
	padding: 2rem 7%;
}

.heading {
	text-align: center;
	color: var(--color-text);
	text-transform: uppercase;
	padding-bottom: 3.5rem;
	font-size: 4rem;
}

.heading span{
	color: var(--color-accent);
	text-transform: uppercase;
}

.btn {
	display: inline-block;
	padding: .9rem 3rem;
	font-size: 1.7rem;
	color: var(--white);
	background: var(--color-accent);
	cursor: pointer;
}

.btn:hover {
	color: var(--red);
	cursor: pointer;
}

.header {
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 7%;
	border-bottom: var(--border);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	text-transform: capitalize;
}

.header .logo img {
	height: 6rem;
    border-radius: 999em;
}

.header .navbar a {
	margin: 0 1rem;
	font-size: 2rem;
	color: var(--color-text);
	font-weight: bold;
}

.header .navbar a:hover {
	color: var(--color-accent);
	border-bottom: .1rem solid var(--color-accent);
	padding-bottom: .5rem;
}

.header .icons {
	display: flex;
	align-items: center;
}

.header .icons button {
	position: relative;
	color: var(--color-text);
	cursor: pointer;
	font-size: 2.5rem;
	margin-left: 2rem;
	background: none;
}

.header .icons button:hover {
	color: var(--color-accent);
    transform: rotate(360deg);
 }

.header .icons #cart-btn:hover {
	transform: none;
}

.header .icons .cart-count {
	position: absolute;
	top: -.8rem;
	right: -1.2rem;
	background: var(--red);
	color: var(--white);
	font-size: 1.2rem;
	font-weight: bold;
	min-width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	border-radius: 50%;
	text-align: center;
}

.header .cart-container {
	position: absolute;
	top: 100%;
	right: -100%;
	height: calc(100vh - var(--header-height));
	height: calc(100dvh - var(--header-height));
	width: 35rem;
	background: var(--white);
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
}

.header .cart-container.active {
	right: 0;
}

.header .cart-container .menu-header {
	color: var(--red);
	display: block;
	margin: 1.5rem;
	padding: .5rem;
	font-size: 2rem;
	border-bottom: .1rem solid var(--red);
}

#menu-btn {
	display: none;
}

.home {
	padding-top: var(--header-height);
	text-align: center;
}

.home .hero-image {
	width: 100%;
	display: block;
}

.home .content {
	padding: 2rem;
}

/* Home's optional body text (#35) -- no rule existed here before, since
   Home never had body copy until sections became admin-editable; without
   an explicit color the <p> fell back to the browser default (black),
   invisible against the dark page background behind the hero image. */
.home .content p {
	font-size: 1.6rem;
	color: var(--color-text-muted);
	padding: 1rem 0;
	line-height: 1.8;
}

section .row {
	display: flex;
	align-items: center;
	background: var(--color-surface);
	flex-wrap: wrap;
	color: var(--color-text);
}

section .row .image {
	flex: 1 1 45rem;
	padding: 0 0 .5rem;
}

section .row .image img {
	width: 100%;
}

section .row .content {
	flex: 1 1 45rem;
	padding: 2rem;
}

/* Admin-selectable body text alignment (#35) -- left matches the default
   (unset) browser alignment every section already had, so this is a no-op
   until the admin actually picks center/right. Only ever applied to
   type='content' sections' .content block -- never the heading (which
   lives outside .row/.content entirely) or Home/Products, which don't
   expose the control. */
section .row .content.align-left {
	text-align: left;
}

section .row .content.align-center {
	text-align: center;
}

section .row .content.align-right {
	text-align: right;
}

section .row .content h3 {
	font-size: 3rem;
	text-transform: capitalize;
}

section .row .content p {
	font-size: 1.6rem;
	color: var(--color-text-muted);
	padding: 1rem 0;
	line-height: 1.8;
}

/* products grid (dynamic, from _data/products.csv) */

.products .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, 28rem);
	justify-content: center;
	gap: 1.5rem;
}

.products .box-container .box {
	padding: 2rem;
	text-align: center;
	border: var(--border);
	display: flex;
	flex-direction: column;
}

.products .box-container .box[hidden] {
	display: none;
}

.products .box-container .box .product-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
}

/* Shown instead of the <img> when a product has no usable image (never
   uploaded, or the file's gone missing) -- deliberately text, not a
   fallback image file, since a missing fallback image would just leave us
   right back where we started. Matches the real image's footprint (same
   width/aspect-ratio) so the card grid doesn't reflow around it. */
.products .box-container .box .product-image-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	background: rgba(255,255,255,.05);
	border: var(--border);
	color: var(--color-text-muted);
	font-size: 1.5rem;
}

.products .box-container .box h3 {
	padding: 1.5rem 0 .5rem 0;
	font-size: 2rem;
	color: var(--color-text);
}

.products .box-container .box p {
	font-size: 1.5rem;
	line-height: 1.8;
	color: var(--color-text-muted);
	padding: .5rem 0 1.5rem;
	flex-grow: 1;
}

.products .box-container .box .price {
	font-size: 2.2rem;
	color: var(--color-accent);
	font-weight: bold;
	padding-bottom: 1.5rem;
}

/* product category/subcategory filters */

.product-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
	padding-bottom: 2rem;
}

.product-filters label {
	color: var(--color-text);
	font-size: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.product-filters select {
	background: var(--color-surface);
	color: var(--color-text);
	border: var(--border);
	padding: .8rem 1.2rem;
	font-size: 1.5rem;
	min-width: 20rem;
}

.product-filters select:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.products .no-products {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 1.8rem;
	padding: 2rem 0;
}

/* cart panel + checkout modal shared item list styling */

.cart-items {
	overflow-y: auto;
	flex-grow: 1;
}

.cart-empty {
	color: var(--black);
	font-size: 1.6rem;
	padding: 2rem 1rem;
	text-align: center;
}

.cart-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-bottom: .1rem solid rgba(0,0,0,.1);
}

.cart-item img {
	width: 6rem;
	height: 6rem;
	object-fit: cover;
}

.cart-item-details {
	flex-grow: 1;
	text-align: left;
}

.cart-item-name {
	color: var(--black);
	font-size: 1.5rem;
	font-weight: bold;
}

.cart-item-price {
	color: var(--black);
	font-size: 1.4rem;
}

.cart-item-qty {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: .5rem;
}

.cart-item-qty .qty-btn {
	width: 2.2rem;
	height: 2.2rem;
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	font-size: 1.4rem;
}

.cart-item-qty .qty-btn:hover {
	background: var(--color-accent);
}

.cart-item-qty span {
	color: var(--black);
	font-size: 1.5rem;
	min-width: 1.5rem;
	text-align: center;
}

.cart-item-remove {
	color: var(--red);
	font-size: 2rem;
	cursor: pointer;
	background: none;
	line-height: 1;
}

.cart-summary {
	padding: 1.5rem 0;
	border-top: .1rem solid rgba(0,0,0,.2);
}

.cart-subtotal {
	color: var(--black);
	font-size: 1.8rem;
	font-weight: bold;
	padding-bottom: 1rem;
}

.cart-summary .btn {
	width: 100%;
	text-align: center;
}

/* checkout modal */

.checkout-step form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 1rem 0;
}

.checkout-step form label {
	color: var(--color-text);
	font-size: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.checkout-step form input {
	background: var(--white);
	padding: 1rem;
	font-size: 1.5rem;
	color: var(--black);
}

.checkout-step form .btn {
	margin-top: .5rem;
	align-self: flex-start;
}

/* Honeypot field (see index.php's checkout form) -- off-screen, not
   display:none/visibility:hidden, since some bots skip fields hidden that
   way but still blind-fill anything present in the DOM. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.checkout-step .payment-note {
	color: var(--color-text-muted);
	font-size: 1.6rem;
	line-height: 1.8;
	padding: 2rem 0;
}

.checkout-step .payment-processors-note {
	padding-bottom: 1.5rem;
}

.checkout-step .payment-processors-note p {
	color: var(--color-text-muted);
	font-size: 1.4rem;
	margin-bottom: .8rem;
}

.checkout-step .payment-processors-list {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.checkout-step .payment-processors-list li {
	background: rgba(255,255,255,.08);
	color: var(--color-text);
	font-size: 1.3rem;
	padding: .4rem 1.2rem;
	border-radius: 2rem;
}

.checkout-step .payment-error {
	background: rgba(249,0,77,.1);
	border: .1rem solid var(--red);
	color: var(--red);
	font-size: 1.5rem;
	padding: 1.2rem;
	margin-bottom: 1.5rem;
}

#checkout-items .cart-item-name,
#checkout-items .cart-item-price,
#checkout-items .cart-item-qty span {
	color: var(--color-text);
}

#checkout-subtotal,
.checkout-step .cart-subtotal {
	color: var(--color-text);
}

.footer {
	background: var(--color-surface);
	text-align: center;
}

.footer .share {
	padding: 1rem 0;
}

.footer .share a {
	height: 5rem;
	width: 5rem;
	line-height: 5rem;
	font-size: 2rem;
	color: var(--color-text);
	border: var(--border);
	margin: .3rem;
	border-radius: 50%;
}

.footer .share a:hover {
	background-color: var(--color-accent);
    transform: rotate(360deg);
}

/* phone/address -- plain info lines below the social icons, shown only
   when configured, distinct from the icon-button treatment above */

.footer .contact-info-lines {
	padding-bottom: 1rem;
}

.footer .contact-info-line {
	font-size: 1.6rem;
	color: var(--color-text-muted);
	padding: .2rem 0;
}

.footer .contact-info-line a {
	color: var(--color-text-muted);
}

.footer .contact-info-line a:hover {
	color: var(--color-accent);
}

.footer .links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 2rem 0;
	gap: 1rem;
	text-transform: uppercase;
}

.footer .links a {
	padding: .7rem 2rem;
	color: var(--color-text);
	border: var(--border);
	font-size: 2rem;
}

.footer .links a:hover {
	background: var(--color-accent);
}

.footer .credit {
	font-size: 2rem;
	color: var(--color-text);
	font-weight: lighter;
	padding: 1.5rem;
	text-transform: capitalize;
}

.footer .credit a {
	color: var(--color-accent);
	font-weight: bolder;
}

.footer .credit a:hover {
	color: var(--color-text);
	border-bottom: .1rem solid var(--color-text);
	padding-bottom: .5rem
}

/* modal from W3schools.com */
.modal {
	display: none;
	position: fixed;
	z-index: 2000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,.4);
}

.image-modal {
	align-items: center;
	justify-content: center;
}

.image-modal img {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
}

.image-modal .close {
	position: fixed;
	top: 2rem;
	right: 3rem;
	font-size: 3rem;
	z-index: 2001;
}

.modal-content {
	background-color: var(--color-surface);
	margin: 8% auto;
	padding: 2rem;
	border: 1px solid #888;
	width: 80%;
	max-width: 60rem;
	text-transform: capitalize;
}

.close {
	color: var(--color-text);
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
}

.modal-content .modal-title {
	color: var(--color-accent);
	font-size: 2.5rem;
	font-weight: bold;
	float: left;
}

.modal-content .modal-body2 {
	color: var(--color-text);
	font-size: 1.5rem;
	padding: 3rem 0 0 0;
	text-transform: none;
	clear: both;
}

/* Themes (#34) -- admin-selectable from Settings, see _lib/appearance.php.
   "dark" (today's look) is the :root default above; every other theme
   overrides the themed tokens here. Each has its own bg/surface/accent, not
   just a swapped accent -- light/cream also flip text to dark and soften
   the border's translucency direction since it's no longer on a dark page. */

body.theme-charcoal {
	--color-bg: #101113;
	--color-surface: #1a1c1f;
	--color-accent: #b9c2cc;
	--color-text: #fff;
	--color-text-muted: #c7ccd1;
	--border: .1rem solid rgba(255,255,255,.25);
}

body.theme-light {
	--color-bg: #f7f5f2;
	--color-surface: #efe9e1;
	--color-accent: #a97c50;
	--color-text: #1c1a17;
	--color-text-muted: #5c574f;
	--border: .1rem solid rgba(0,0,0,.15);
}

body.theme-cream {
	--color-bg: #fbf7ee;
	--color-surface: #f1e9d8;
	--color-accent: #c1793f;
	--color-text: #2a2118;
	--color-text-muted: #6b6152;
	--border: .1rem solid rgba(0,0,0,.12);
}

body.theme-blue {
	--color-bg: #1a4fa0;
	--color-surface: #153f80;
	--color-accent: #f5a623;
	--color-text: #fff;
	--color-text-muted: #cfe0f5;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-navy {
	--color-bg: #0a1f44;
	--color-surface: #081936;
	--color-accent: #d4af37;
	--color-text: #fff;
	--color-text-muted: #b7c4dc;
	--border: .1rem solid rgba(255,255,255,.28);
}

body.theme-teal {
	--color-bg: #0f6b66;
	--color-surface: #0c5652;
	--color-accent: #ff7a59;
	--color-text: #fff;
	--color-text-muted: #cdeae5;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-green {
	--color-bg: #1a7a42;
	--color-surface: #156535;
	--color-accent: #f0b429;
	--color-text: #fff;
	--color-text-muted: #d8f0dd;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-forest {
	--color-bg: #1b4332;
	--color-surface: #163628;
	--color-accent: #d98a3d;
	--color-text: #fff;
	--color-text-muted: #cfe0d3;
	--border: .1rem solid rgba(255,255,255,.26);
}

body.theme-mint {
	--color-bg: #107a64;
	--color-surface: #0d6250;
	--color-accent: #ff9e80;
	--color-text: #fff;
	--color-text-muted: #d4f3ea;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-purple {
	--color-bg: #5b2c91;
	--color-surface: #492374;
	--color-accent: #ffc94d;
	--color-text: #fff;
	--color-text-muted: #e2d8f5;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-pink {
	--color-bg: #f3d9df;
	--color-surface: #ecc7d0;
	--color-accent: #b15678;
	--color-text: #3a232b;
	--color-text-muted: #7d5c66;
	--border: .1rem solid rgba(0,0,0,.14);
}

body.theme-hotpink {
	--color-bg: #ff1694;
	--color-surface: #db127e;
	--color-accent: #4a1259;
	--color-text: #23071a;
	--color-text-muted: #7a2b52;
	--border: .1rem solid rgba(0,0,0,.2);
}

body.theme-rose {
	--color-bg: #764050;
	--color-surface: #5e3340;
	--color-accent: #eec18f;
	--color-text: #fff;
	--color-text-muted: #ecd6da;
	--border: .1rem solid rgba(255,255,255,.28);
}

body.theme-red {
	--color-bg: #a4262c;
	--color-surface: #831e23;
	--color-accent: #ffcf56;
	--color-text: #fff;
	--color-text-muted: #f5d9d5;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-maroon {
	--color-bg: #5c1a2e;
	--color-surface: #4a1525;
	--color-accent: #d9a955;
	--color-text: #fff;
	--color-text-muted: #e6cdd4;
	--border: .1rem solid rgba(255,255,255,.26);
}

body.theme-orange {
	--color-bg: #833e16;
	--color-surface: #693212;
	--color-accent: #3fb6c4;
	--color-text: #fff;
	--color-text-muted: #f5ddc4;
	--border: .1rem solid rgba(255,255,255,.3);
}

body.theme-walnut {
	--color-bg: #5a3a22;
	--color-surface: #482e1b;
	--color-accent: #e0b25a;
	--color-text: #fff;
	--color-text-muted: #e6d7c4;
	--border: .1rem solid rgba(255,255,255,.28);
}

body.theme-amber {
	--color-bg: #6b5010;
	--color-surface: #56400d;
	--color-accent: #4a90d9;
	--color-text: #fff;
	--color-text-muted: #ecdfb8;
	--border: .1rem solid rgba(255,255,255,.3);
}

/* Fonts (#34) -- admin-selectable from Settings, see _lib/appearance.php.
   "roboto" matches the :root default above; index.php also builds the
   matching Google Fonts <link> dynamically since the font file itself has
   to be requested by name, not just swapped via CSS. */

body.font-roboto { --font-body: 'Roboto', sans-serif; }
body.font-open-sans { --font-body: 'Open Sans', sans-serif; }
body.font-lato { --font-body: 'Lato', sans-serif; }
body.font-montserrat { --font-body: 'Montserrat', sans-serif; }
body.font-poppins { --font-body: 'Poppins', sans-serif; }
body.font-inter { --font-body: 'Inter', sans-serif; }
body.font-nunito { --font-body: 'Nunito', sans-serif; }
body.font-nunito-sans { --font-body: 'Nunito Sans', sans-serif; }
body.font-raleway { --font-body: 'Raleway', sans-serif; }
body.font-work-sans { --font-body: 'Work Sans', sans-serif; }
body.font-source-sans-3 { --font-body: 'Source Sans 3', sans-serif; }
body.font-rubik { --font-body: 'Rubik', sans-serif; }
body.font-karla { --font-body: 'Karla', sans-serif; }
body.font-mulish { --font-body: 'Mulish', sans-serif; }
body.font-manrope { --font-body: 'Manrope', sans-serif; }
body.font-dm-sans { --font-body: 'DM Sans', sans-serif; }
body.font-space-grotesk { --font-body: 'Space Grotesk', sans-serif; }
body.font-barlow { --font-body: 'Barlow', sans-serif; }
body.font-josefin-sans { --font-body: 'Josefin Sans', sans-serif; }
body.font-quicksand { --font-body: 'Quicksand', sans-serif; }
body.font-jost { --font-body: 'Jost', sans-serif; }
body.font-outfit { --font-body: 'Outfit', sans-serif; }
body.font-figtree { --font-body: 'Figtree', sans-serif; }
body.font-urbanist { --font-body: 'Urbanist', sans-serif; }
body.font-merriweather { --font-body: 'Merriweather', serif; }
body.font-playfair-display { --font-body: 'Playfair Display', serif; }
body.font-lora { --font-body: 'Lora', serif; }
body.font-cormorant-garamond { --font-body: 'Cormorant Garamond', serif; }
body.font-pt-serif { --font-body: 'PT Serif', serif; }
body.font-source-serif-4 { --font-body: 'Source Serif 4', serif; }
body.font-crimson-text { --font-body: 'Crimson Text', serif; }
body.font-libre-baskerville { --font-body: 'Libre Baskerville', serif; }
body.font-eb-garamond { --font-body: 'EB Garamond', serif; }
body.font-vollkorn { --font-body: 'Vollkorn', serif; }
body.font-domine { --font-body: 'Domine', serif; }
body.font-spectral { --font-body: 'Spectral', serif; }
body.font-noto-serif { --font-body: 'Noto Serif', serif; }
body.font-cardo { --font-body: 'Cardo', serif; }
body.font-alegreya { --font-body: 'Alegreya', serif; }
body.font-bree-serif { --font-body: 'Bree Serif', serif; }
body.font-oswald { --font-body: 'Oswald', sans-serif; }
body.font-bitter { --font-body: 'Bitter', serif; }
body.font-roboto-slab { --font-body: 'Roboto Slab', serif; }
body.font-arvo { --font-body: 'Arvo', serif; }
body.font-zilla-slab { --font-body: 'Zilla Slab', serif; }
body.font-rokkitt { --font-body: 'Rokkitt', serif; }
body.font-aleo { --font-body: 'Aleo', serif; }
body.font-bevan { --font-body: 'Bevan', serif; }
body.font-cormorant { --font-body: 'Cormorant', serif; }
body.font-marcellus { --font-body: 'Marcellus', serif; }
body.font-prata { --font-body: 'Prata', serif; }
body.font-cinzel { --font-body: 'Cinzel', serif; }
body.font-tenor-sans { --font-body: 'Tenor Sans', sans-serif; }
body.font-julius-sans-one { --font-body: 'Julius Sans One', sans-serif; }
body.font-bodoni-moda { --font-body: 'Bodoni Moda', serif; }
body.font-italiana { --font-body: 'Italiana', serif; }
body.font-dancing-script { --font-body: 'Dancing Script', cursive; }
body.font-parisienne { --font-body: 'Parisienne', cursive; }
body.font-sacramento { --font-body: 'Sacramento', cursive; }
body.font-fredoka { --font-body: 'Fredoka', sans-serif; }
body.font-baloo-2 { --font-body: 'Baloo 2', sans-serif; }
body.font-chewy { --font-body: 'Chewy', sans-serif; }
body.font-comic-neue { --font-body: 'Comic Neue', sans-serif; }
body.font-varela-round { --font-body: 'Varela Round', sans-serif; }
body.font-sniglet { --font-body: 'Sniglet', sans-serif; }
body.font-luckiest-guy { --font-body: 'Luckiest Guy', sans-serif; }
body.font-bungee { --font-body: 'Bungee', sans-serif; }
body.font-caveat { --font-body: 'Caveat', cursive; }
body.font-kalam { --font-body: 'Kalam', cursive; }
body.font-patrick-hand { --font-body: 'Patrick Hand', cursive; }
body.font-shadows-into-light { --font-body: 'Shadows Into Light', cursive; }
body.font-architects-daughter { --font-body: 'Architects Daughter', cursive; }
body.font-permanent-marker { --font-body: 'Permanent Marker', cursive; }

/* media queries */
@media (max-width: 991px) {

	html {
		font-size: 55%;
	}

	.header {
		padding: 1.5rem 2rem;
	}

	section {
		padding: 2rem;
	}
}

@media (max-width: 768px) {

	#menu-btn {
		display: inline-block;
	}

	.products .box-container {
		/* only one column ever fits at this width regardless of item count,
		   so it's safe (and matches the existing look) to let it stretch full-width */
		grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
		justify-content: normal;
	}

	.header .navbar {
		position: absolute;
		top: 100%;
		right: -100%;
		background: var(--white);
		width: 30rem;
		height: calc(100vh - var(--header-height));
		height: calc(100dvh - var(--header-height));
	}

	.header .navbar.active {
		right: 0;
	}

	.header .navbar a {
		color: var(--black);
		display: block;
		margin: 1.5rem;
		padding: .5rem;
		font-size: 2rem;
		font-weight: normal;
	}

	.home {
		background-size: contain;
		background-position: center top;
		justify-content: center;
		text-align: center;
	}

	.home .content h3 {
		font-size: 4.5rem;
	}
}

@media (max-width: 450px) {

	html {
		font-size: 55%;
	}
}