/* =============================================================
   Aketch Bakery — Styles
   ============================================================= */

/* --- Honeypot (spam protection) --- */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* --- Skip Link --- */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-s);
	background: var(--black);
	color: var(--white);
	padding: var(--space-2xs) var(--space-s);
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-size: var(--step--1);
	text-decoration: none;
	z-index: 999;
}

.skip-link:focus {
	top: var(--space-s);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/* --- Colors --- */
	--black: #000;
	--white: #fff;
	--gray: #ededed;
	--gray-dark: #444;
	--gray-mid: #777;
	--danger: #ff1800;
	--success: #06C167;

	/* --- Fonts --- */
	--font-heading: 'Marcellus', serif;
	--font-body: 'Lexend', sans-serif;

	/* --- Utopia Fluid Type Scale ---
     @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2, */
	--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
	--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
	--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
	--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
	--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
	--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
	--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

	/* --- Utopia Fluid Space Scale ---
     @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2, */
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

	/* Custom pairs */
	--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

	/* --- Utopia Fluid Grid ---
     @link https://utopia.fyi/grid/calculator?c=360,18,1.2,1240,20,1.25,5,2, */
	--grid-max-width: 77.5rem;
	--grid-gutter: var(--space-s-l);
	--grid-columns: 12;

	/* --- Design Tokens --- */
	--max-width: 48rem;
	--radius: 16px;
	--radius-lg: 24px;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
	--transition: 0.2s ease;
}

html {
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--black);
	background: var(--white);
	line-height: 1.6;
	min-height: 100svh;
	padding: var(--space-s);
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url('../images/bg-page.webp') center / cover no-repeat;
	height: 100lvh;
}

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

a {
	color: var(--black);
}

.color-gray-dark {
	color: var(--gray-dark);
}

.color-gray-mid {
	color: var(--gray-mid);
}

.color-gray-light {
	color: var(--gray-light);
}



/* --- Typography --- */
h1,
h2,
h3,
h4,
label,
.mono {
	font-family: var(--font-heading);
}

h1 {
	font-size: var(--step-3);
}

h2 {
	font-size: var(--step-2);
}

h3 {
	font-size: var(--step-1);
}

.font-size-small {
	font-size: var(--step--1);
}

/* --- Layout --- */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--grid-gutter);
}

main.container {
	background: var(--white);
	padding: 0 var(--space-xs-s);
	border-radius: var(--radius-lg);
	margin-top: -1px;
}

/* --- Utopia Grid Utilities --- */
.u-container {
	max-width: var(--grid-max-width);
	padding-inline: var(--grid-gutter);
	margin-inline: auto;
}

.u-grid {
	display: grid;
	gap: var(--grid-gutter);
}

/* --- Header --- */
.site-header {
	padding: var(--space-l) 0 var(--space-m);
	text-align: center;
	border-bottom: none;
	background: var(--white);
	border-radius: var(--radius-lg);
	margin: var(--space-m) auto 0;
	max-width: var(--max-width);
	box-shadow: var(--shadow);
}

.site-logo {
	max-width: 10rem;
	height: auto;
	margin: 0 auto var(--space-3xs);
}

.site-header .tagline {
	color: var(--gray-dark);
	font-size: var(--step--1);
}

.site-header .info {
	font-size: var(--step--1);
	margin-top: var(--space-2xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Banner --- */
.banner {
	text-align: center;
	padding: var(--space-xs) var(--space-m);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	max-width: var(--max-width);
	margin: var(--space-xs) auto;
	border-radius: var(--radius);
}

.banner--open {
	background: var(--success);
	color: var(--black);
}

.banner--closed {
	background: var(--danger);
	color: var(--white);
}

/* --- Product Grid --- */
.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	padding: var(--space-m-l) 0;
}

@media (min-width: 40rem) {}

/* --- Product Card --- */


.product-card {
	border: none;
	border-radius: var(--radius);
	position: relative;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.product-card__image {
	width: 7rem;
	min-height: 7rem;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--gray);
	align-self: stretch;
}
@media (min-width: 40rem) {
	.product-card__image {
		width: 9rem;
		min-height: 9rem;
	}
}


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

.product-card__image:empty {
	display: none;
}

.product-card__body {
	padding: var(--space-s);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.product-card__name {
	font-family: var(--font-heading);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-3xs);
}

.product-card__desc {
	font-size: var(--step--2);
	color: var(--gray-dark);
	margin-bottom: var(--space-xs);
	line-height: 1.35;
	flex: 1;
}

.product-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-heading);
	font-size: var(--step--2);
	margin-bottom: var(--space-xs);
}

.product-card__price {
	font-family: var(--font-body);
	font-weight: 700;
}

.product-card__stock {
	font-family: var(--font-body);
	color: var(--gray-dark);
}

.product-card__stock--low {
	color: var(--danger);
}

/* --- Quantity Selector --- */
.qty-selector {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0;
	border: none;
	border-radius: 999px;
	overflow: hidden;
	background: var(--gray);
}

.qty-selector button {
	width: 2.4rem;
	height: 2.4rem;
	border: none;
	background: var(--black);
	color: var(--white);
	font-size: var(--step-0);
	cursor: pointer;
	transition: opacity var(--transition);
	border-radius: 50%;
}

.qty-selector button:hover {
	opacity: 0.7;
}

.qty-selector button:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.qty-selector button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.qty-selector__value {
	width: 2.2rem;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 700;
	border: none;
	background: transparent;
}

.product-card__stock--sold-out {
	background: var(--black);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: 999px;
}

/* --- Cart Bar --- */
.cart-bar {
	position: fixed;
	bottom: var(--space-xs);
	left: 50%;
	right: auto;
	width: calc(100% - var(--space-m));
	max-width: var(--max-width);
	transform: translateX(-50%) translateY(calc(100% + var(--space-xs)));
	background: var(--black);
	color: var(--white);
	padding: var(--space-s) var(--space-m);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-heading);
	font-size: var(--step--1);
	transition: transform 0.3s ease;
	z-index: 100;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.cart-bar--visible {
	transform: translateX(-50%) translateY(0);
}

.cart-bar button {
	background: var(--white);
	color: var(--black);
	border: none;
	padding: var(--space-2xs) var(--space-s);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	border-radius: 999px;
	transition: opacity var(--transition);
}

.cart-bar button:hover {
	opacity: 0.8;
}

.cart-bar button:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* --- Order Form / Modal --- */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.modal-overlay--visible {
	opacity: 1;
	pointer-events: auto;
}

.modal {
	background: var(--white);
	width: 90%;
	max-width: 28rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--space-m-l);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.modal h2 {
	margin-bottom: var(--space-s);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.modal__close {
	float: right;
	background: none;
	border: none;
	font-size: var(--step-1);
	cursor: pointer;
	font-family: var(--font-heading);
	line-height: 1;
}

.modal__close:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: 2px;
}

/* checkout modal */

#checkout-title {
	font-size: var(--step-1);
}

/* --- Forms --- */
.form-group {
	margin-bottom: var(--space-s);
}

.form-group label {
	display: block;
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3xs);
}

.form-group input,
.form-group textarea,
.form-group select {
	width: 100%;
	padding: var(--space-xs);
	border: 1px solid var(--gray);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: var(--step--1);
	background: var(--gray);
	transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	border-color: var(--black);
	background: var(--white);
	outline: 2px solid var(--black);
	outline-offset: 2px;
}

.form-group .hint {
	font-size: var(--step--2);
	color: var(--gray-dark);
	margin-top: var(--space-3xs);
}

/* --- Buttons --- */
.btn {
	display: inline-block;
	padding: var(--space-xs) var(--space-m);
	font-family: var(--font-body);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: opacity var(--transition);
	text-decoration: none;
	min-height: 44px;
}

.btn:hover {
	opacity: 0.7;
}

.btn:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: 2px;
}

.btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.btn--primary {
	background: var(--black);
	color: var(--white);
}

.btn--secondary {
	background: var(--gray);
	color: var(--black);
}

.btn--danger {
	background: var(--danger);
	color: var(--white);
}

.btn--small {
	padding: var(--space-3xs) var(--space-xs);
	font-size: var(--step--2);
}

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

/* --- Order Summary (in modal) --- */
.order-summary {
	border-top: 1px solid var(--gray);
	padding-top: var(--space-s);
	margin-bottom: var(--space-m);
}

.order-summary__item {
	display: flex;
	justify-content: space-between;
	font-size: var(--step--1);
	padding: var(--space-3xs) 0;
}

.order-summary__total {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--step-0);
	padding-top: var(--space-2xs);
	border-top: 1px solid var(--gray);
	margin-top: var(--space-2xs);
}

/* --- Confirmation --- */
.confirmation {
	text-align: center;
	padding: var(--space-xl) var(--space-m);
}

.confirmation h2 {
	margin-bottom: var(--space-2xs);
}

.confirmation p {
	color: var(--gray-dark);
	margin-bottom: var(--space-m);
}

/* --- Loading --- */
.loading {
	text-align: center;
	padding: var(--space-xl);
	font-family: var(--font-heading);
	font-size: var(--step--1);
	color: var(--gray-dark);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.retry-btn {
	display: inline-block;
	margin-top: var(--space-s);
	padding: var(--space-2xs) var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #000;
	color: #fff;
	border: none;
	cursor: pointer;
}

.spinner {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid var(--gray);
	border-top-color: var(--black);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
	margin-right: var(--space-2xs);
	vertical-align: middle;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Error / Alert --- */
.alert {
	padding: var(--space-xs) var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--step--2);
	margin-bottom: var(--space-s);
	border-radius: var(--radius);
}

.alert--error {
	background: #fde8e8;
	color: var(--danger);
	border: 1px solid var(--danger);
}

.alert--success {
	background: #e8fde8;
	color: var(--success);
	border: 1px solid var(--success);
}

/* --- Footer --- */
.site-footer {
	text-align: center;
	padding: 0 0 var(--space-xl) 0;
	font-family: var(--font-heading);
	font-size: var(--step-0);
	color: var(--white);
	font-weight: bold;
	border-top: none;
	margin-top: 0;
}

/* --- Feedback Section --- */
.feedback-section {
	background: var(--white);
	border-radius: var(--radius-lg);
	max-width: var(--max-width);
	margin: var(--space-l) auto 0;
	padding: var(--space-m-l) 0;
	box-shadow: var(--shadow);
}

.feedback-section__title {
	font-style: italic;
	margin-bottom: var(--space-2xs);
}

.feedback-section__intro {
	font-size: var(--step--1);
	color: var(--gray-dark);
	line-height: 1.6;
	margin-bottom: var(--space-m);
}


@media (min-width: 40rem) {
	/*
	.feedback-section .container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-l);
		align-items: start;
	}
	*/


	.feedback-form {
		margin-top: 0;
	}
}

.feedback-form .form-group {
	margin-bottom: var(--space-m);
}

.form-row-inline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-s);
}

/* --- Announcement Section --- */
#announcement-section {
	max-width: var(--max-width);
	margin: var(--space-xs) auto;
}

#announcement-section:not(:empty) {
	background: var(--gray);
	border-radius: var(--radius);
	padding: var(--space-xs-s);
	box-shadow: var(--shadow);
}

#announcement-section h2,
#announcement-section h3 {
	margin-bottom: var(--space-2xs);
}

#announcement-section p,
#announcement-section ul,
#announcement-section ol {
	font-size: var(--step--1);
	color: var(--gray-dark);
	line-height: 1.6;
	margin-bottom: var(--space-s);
}

#announcement-section p:last-child,
#announcement-section ul:last-child,
#announcement-section ol:last-child {
	margin-bottom: 0;
}

/* --- Promo Links Row --- */
.promo-links {
	display: flex;
	gap: var(--space-s);
	justify-content: center;
	align-items: flex-end;
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.promo-links a {
	display: block;
	min-width: 0;
}
.promo-links img {
	max-height: 50px;
	height: auto;
	width: auto;
	max-width: 100%;
	display: block;
}

.promo-links a:nth-of-type(2) img {
	max-height: 44px;
}

/* --- Feedback Intro Content (markdown-rendered) --- */
#feedback-intro-content h2 {
	font-style: italic;
	margin-bottom: var(--space-2xs);
}

#feedback-intro-content p {
	font-size: var(--step--1);
	color: var(--gray-dark);
	line-height: 1.6;
	margin-bottom: var(--space-m);
}

/* --- Cart bar spacer --- */
.cart-spacer {
	height: var(--space-2xl);
}

/* =============================================================
   Admin Styles
   ============================================================= */

.admin-body {
	background: var(--white);
}

.admin-body .container {
	background: var(--white);
	padding: var(--space-m);
	border-radius: var(--radius);
}

/* --- Admin Layout --- */
.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 var(--space-s) 0;
	border-bottom: 1px solid var(--gray);
	margin-bottom: var(--space-m);
}

.admin-header h1 {
	font-size: var(--step-1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* --- Tabs --- */
.tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--gray);
	margin-bottom: var(--space-l);
}

.tab {
	padding: var(--space-2xs) var(--space-s);
	font-family: var(--font-heading);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	color: var(--gray-dark);
	transition: all var(--transition);
}

.tab:hover {
	color: var(--black);
}

.tab--active {
	color: var(--black);
	border-bottom-color: var(--black);
}

.tab-content {
	display: none;
}

.tab-content--active {
	display: block;
}

/* --- Admin Table --- */
.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}

.admin-table th {
	font-family: var(--font-heading);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: var(--space-2xs);
	border-bottom: 2px solid var(--black);
	white-space: nowrap;
}

.admin-table td {
	padding: var(--space-2xs);
	border-bottom: 1px solid var(--gray);
	vertical-align: middle;
}

.admin-table tr:hover td {
	background: var(--gray);
}

.admin-table img {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 6px;
}

/* --- Admin Product Form --- */
.product-form {
	background: var(--gray);
	padding: var(--space-m);
	margin-bottom: var(--space-l);
	border-radius: var(--radius);
}

.product-form h3 {
	margin-bottom: var(--space-s);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.product-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-s);
}

.product-form .form-group input, .product-form .form-group textarea, .product-form .form-group select {
	background-color: var(--white);
}

@media (max-width: 32rem) {
	.product-form .form-row {
		grid-template-columns: 1fr;
	}
}

.product-form .form-group input,
.product-form .form-group textarea,
.product-form .form-group select {
	background: var(--white);
	border-color: var(--gray-mid);
}

.product-form .image-preview {
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	margin-top: var(--space-2xs);
	border: 1px solid var(--gray-mid);
	border-radius: 8px;
}

/* --- Toggle Switch --- */
.toggle {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}

.toggle__track {
	width: 2.5rem;
	height: 1.4rem;
	background: var(--gray-mid);
	border-radius: 0.7rem;
	position: relative;
	transition: background var(--transition);
}

.toggle--on .toggle__track {
	background: var(--black);
}

.toggle__thumb {
	width: 1rem;
	height: 1rem;
	background: var(--white);
	border-radius: 50%;
	position: absolute;
	top: 0.2rem;
	left: 0.2rem;
	transition: transform var(--transition);
}

.toggle--on .toggle__thumb {
	transform: translateX(1.1rem);
}

.toggle__label {
	font-family: var(--font-heading);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Admin Login --- */
.login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding: var(--space-l);
}

.login-box {
	width: 100%;
	max-width: 20rem;
	text-align: center;
}

.login-box h1 {
	margin-bottom: var(--space-3xs);
}

.login-box p {
	font-size: var(--step--1);
	color: var(--gray-dark);
	margin-bottom: var(--space-m);
}

/* --- Admin Stats Row --- */
.stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--space-s);
	margin-bottom: var(--space-l);
}

.stat-card {
	border: 1px solid var(--gray);
	padding: var(--space-s);
	text-align: center;
	border-radius: var(--radius);
}

.stat-card__value {
	font-family: var(--font-body);
	font-size: var(--step-3);
	font-weight: 700;
}

.stat-card__label {
	font-family: var(--font-heading);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gray-dark);
	margin-top: var(--space-3xs);
}

/* --- Drag & Drop Reorder --- */
.drag-handle {
	cursor: grab;
	font-size: var(--step-0);
	color: var(--gray-mid);
	text-align: center;
	user-select: none;
	width: 2rem;
	transition: color var(--transition);
}

.drag-handle:hover {
	color: var(--black);
}

.admin-table tr.dragging {
	opacity: 0.4;
	background: var(--gray);
}

/* --- Status Pill --- */
.status-pill {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.2em 0.65em;
	border-radius: 999px;
}

.status-pill--active {
	background: var(--success);
	color: var(--white);
}

.status-pill--inactive {
	background: var(--gray);
	color: var(--gray-dark);
}

.admin-table tr[draggable="true"] {
	transition: opacity var(--transition);
}

/* --- Inline Edit --- */
.inline-edit {
	border: 1px solid transparent;
	padding: 0.2rem 0.4rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	background: transparent;
	width: 100%;
	transition: border-color var(--transition);
}

.inline-edit:focus {
	outline: none;
	border-color: var(--black);
	background: var(--white);
}

/* --- Responsive Admin --- */
.admin-table-wrap {
	overflow-x: auto;
}

/* --- Week Selector --- */
.week-selector {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-3xs) var(--space-xs);
	border: 1px solid var(--gray);
	border-radius: var(--radius);
	background: var(--white);
	cursor: pointer;
	transition: border-color var(--transition);
}

.week-selector:focus {
	outline: none;
	border-color: var(--black);
}

/* --- Content Editor (admin) --- */
.content-editor {
	width: 100%;
	font-family: monospace;
	font-size: var(--step--2);
	padding: var(--space-xs);
	border: 1px solid var(--gray);
	border-radius: 4px;
	resize: vertical;
	background: var(--white);
	line-height: 1.6;
}

.content-editor:focus {
	border-color: var(--black);
	outline: 2px solid var(--black);
	outline-offset: 2px;
}

.content-preview {
	border: 1px solid var(--gray);
	border-radius: var(--radius);
	padding: var(--space-s);
	margin-top: var(--space-xs);
	font-size: var(--step--1);
	line-height: 1.6;
}

.content-preview:empty {
	display: none;
}

.content-preview h1,
.content-preview h2,
.content-preview h3 {
	margin-bottom: var(--space-2xs);
}

.content-preview p,
.content-preview ul,
.content-preview ol {
	margin-bottom: var(--space-2xs);
}

/* --- Empty State --- */
.empty-state {
	text-align: center;
	padding: var(--space-xl) var(--space-s);
	color: var(--gray-dark);
}

.empty-state p {
	font-family: var(--font-heading);
	font-size: var(--step--1);
}