/* Product card */
.product-card { display: block; }
.product-card__image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-paper-alt);
}
.product-card__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	background: var(--color-white);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius);
}
.product-card__body { padding-top: var(--space-2); }
.product-card__category { font-size: 0.75rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.product-card__name { font-family: var(--font-display); font-size: 1.1rem; margin-top: 2px; }
.product-card:hover .product-card__name { color: var(--color-accent); }

/* Category card */
.category-card { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.category-card:hover img { transform: scale(1.05); }
.category-card__label {
	position: absolute; inset: auto 0 0 0;
	padding: var(--space-3);
	background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.1rem;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn--ghost { border-color: var(--color-line); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Availability badge */
.badge {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius);
	background: var(--color-accent-soft);
	color: var(--color-accent);
}
.badge--muted { background: var(--color-paper-alt); color: var(--color-ink-soft); }

/* Forms */
.field { margin-bottom: var(--space-3); }
.field label { display: block; font-size: 0.85rem; margin-bottom: var(--space-1); color: var(--color-ink-soft); }
.field input, .field textarea, .field select {
	width: 100%;
	padding: var(--space-2);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-white);
}
.field input:focus, .field textarea:focus, .field select:focus {
	outline: 2px solid var(--color-ink);
	outline-offset: 1px;
}
.field-error { color: var(--color-error); font-size: 0.8rem; margin-top: var(--space-1); }
.field textarea { min-height: 140px; resize: vertical; }

.flash {
	padding: var(--space-3);
	border-radius: var(--radius);
	margin-bottom: var(--space-4);
	font-size: 0.9rem;
}
.flash--success { background: #e5efe6; color: var(--color-success); }
.flash--error { background: #f6e4e2; color: var(--color-error); }

/* Cookie banner */
.cookie-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100;
	background: var(--color-ink);
	color: var(--color-paper);
	padding: var(--space-4) var(--space-3);
	display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner {
	max-width: var(--max-width);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.cookie-banner p { font-size: 0.85rem; max-width: 60ch; }
.cookie-banner a { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cookie-banner .btn { border-color: var(--color-paper); }
.cookie-banner .btn:hover { background: var(--color-paper); color: var(--color-ink); }
.cookie-banner .btn--primary { background: var(--color-paper); color: var(--color-ink); }
.cookie-banner .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Lightbox / gallery */
.gallery { display: flex; flex-direction: column; gap: var(--space-2); }
.gallery__main { aspect-ratio: 4/5; background: var(--color-paper-alt); overflow: hidden; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gallery__thumbs button { width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius); }
.gallery__thumbs button.is-active { border-color: var(--color-ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(20,18,16,.95);
	display: none;
	align-items: center;
	justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next {
	position: absolute;
	color: #fff;
	font-size: 1.6rem;
	padding: var(--space-2);
}
.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-3); top: 50%; transform: translateY(-50%); }