/*
 * Black & white theme and layout additions for Classless.css.
 * Load AFTER classless.css. Only theme variables and layouts that
 * Classless does not provide live here. Button/table/form styles come
 * from the framework, so they are intentionally not repeated.
 */

/* 0. Fonts ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* 1. Theme variables ------------------------------------------------ */
:root {
	--rem: 12pt;
	--width: 70rem;
	--navpos: fixed;
	--ornament: "";
	--font-p: 'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-h: 'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cfg:    #000;  --cbg:    #fff;
	--cdark:  #666;  --clight: #f5f5f5;
	--cmed:   #ddd;
	--clink:  #000;
	--cemph:  #000;  --cemphbg: #0001;
}

/* 2. Navbar --------------------------------------------------------- */
body { padding-top: 3.6rem; }
body > nav { max-width: var(--width); margin: 0 auto; }
body > nav + * { margin-top: 0; }
body > nav > ul:first-child { display: flex; align-items: center; }
body > nav > ul > li:first-child { margin-right: auto; }
body > nav > ul > li:first-child a {
	font-size: 1.3em;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}
nav a[href] { text-decoration: none; }
nav svg { display: block; }
nav a { display: inline-flex; align-items: flex-start; }
nav sup { font-size: .65em; font-weight: 700; margin-left: .15em; line-height: 1; }

/* search dropdown (no JS: <details>) */
nav details { width: auto; margin: 0; overflow: visible; }
nav summary { display: block; list-style: none; cursor: pointer; }
nav summary::-webkit-details-marker { display: none; }
nav details[open] form {
	position: absolute;
	top: 100%;
	right: .6rem;
	width: min(24rem, 94vw);
	padding: .8rem;
	background: var(--cbg);
	border: var(--border);
	border-radius: 4px;
	box-shadow: 0 4px 12px #0002;
}

/* inline search form (navbar + shop page) */
form[role="search"] { display: flex; gap: .5rem; align-items: center; }
form[role="search"] input[type="search"] { margin: 0; flex: 1; }
form[role="search"] button { margin: 0; }

/* 3. Hero banner ---------------------------------------------------- */
body > header {
	position: relative;
	margin: 0 0 2rem;
	text-align: center;
	overflow: hidden;
}
body > header img {
	width: 100%;
	height: auto;
	display: block;
}
body > header .hero-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--cfg);
}
body > header .hero-text h1 { margin: 0; font-size: 3em; font-weight: 800; letter-spacing: .02em; }
body > header .hero-text p { margin: 0; color: var(--cdark); font-size: 1.2em; }
body > header .hero-text a[href] {
	display: inline-block;
	margin-top: 1.5rem;
	padding: .6em 1.8em;
	border-radius: 4px;
	background: var(--cfg);
	color: var(--cbg);
	font-size: .85em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
@media (max-width: 40rem) {
	body > header .hero-text h1 { font-size: 2.2em; }
	body > header .hero-text p { font-size: 1em; }
}

/* 4. Sections & product grid --------------------------------------- */
section:after { display: none; }
main section > header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	overflow: visible;
}
main section > header h2 { margin: 0; }

/* 4 columns on desktop, 2 on mobile */
.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}
@media (max-width: 48rem) {
	.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}
.products article { border: var(--border); border-radius: 4px; overflow: hidden; }
.products article:hover { border-color: var(--cfg); }
.products article a[href] { display: block; color: var(--cfg); text-decoration: none; }
.products article img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.products article h4 { margin: .6rem .8rem .2rem; font-size: 1em; }
.products article p { margin: 0 .8rem .8rem; color: var(--cdark); }

/* 5. Product page / cart / checkout layouts ------------------------ */
.row img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; }
main .row h1 { margin-top: 0; }

.checkout { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: start; }
@media (max-width: 48rem) { .checkout { grid-template-columns: 1fr; } }

.summary {
	display: grid;
	grid-template-columns: 1fr auto;
	max-width: 24rem;
	margin: 1rem 0 1rem auto;
	padding: 0;
}
.summary dt, .summary dd { margin: 0; padding: .35rem 0; }
.summary dd { text-align: right; }
.summary dt:last-of-type, .summary dd:last-of-type {
	margin-top: .5rem;
	border-top: 1.5px solid var(--cfg);
	font-weight: 700;
}
.checkout .summary { max-width: none; margin-left: 0; }

/* 6. Footer --------------------------------------------------------- */
body > footer { margin: 4rem 0 0; padding: 1rem 0; border-top: var(--border); overflow: hidden; }
footer ul { list-style: none; padding: 0; }
footer h4 { margin-top: .5rem; }