/* =========================================================
   Steroidschmiede - Werkstatt statt Apotheke
   Graphit + Anthrazit + Glut. Keine Apothekenoptik.
   ========================================================= */

:root {
	/* Flaechen */
	--ss-graphite:   #1a1c1e;
	--ss-anthracite: #26292d;
	--ss-forge:      #2f3338;
	--ss-line:       #343941;

	/* Schrift */
	--ss-paper:      #f2f0ed;
	--ss-steel:      #8b9299;

	/* Glut */
	--ss-ember:      #e8622c;
	--ss-ember-dim:  #b74a1e;
	--ss-ember-glow: rgba(232, 98, 44, 0.16);

	/* Masse */
	--ss-radius:     2px;
	--ss-rule:       1px solid var(--ss-line);

	/* Familien. Schriften werden selbst gehostet, nie ueber ein CDN. */
	--ss-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
	--ss-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ss-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	/* Blocksy-Variablen mitziehen */
	--theme-palette-color-1: var(--ss-ember);
	--theme-palette-color-2: var(--ss-ember-dim);
	--theme-palette-color-3: var(--ss-paper);
	--theme-palette-color-4: var(--ss-steel);
	--theme-palette-color-5: var(--ss-line);
	--theme-palette-color-6: var(--ss-anthracite);
	--theme-palette-color-7: var(--ss-graphite);
	--theme-palette-color-8: var(--ss-forge);

	--theme-text-color:        var(--ss-steel);
	--theme-headings-color:    var(--ss-paper);
	--theme-link-initial-color: var(--ss-ember);
	--theme-link-hover-color:   var(--ss-paper);
	--theme-content-background: var(--ss-graphite);
	--theme-border-color:       var(--ss-line);
}

/* --- Grundflaeche ---------------------------------------------------- */

body {
	background-color: var(--ss-graphite);
	color: var(--ss-steel);
	font-family: var(--ss-text);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title {
	font-family: var(--ss-display);
	color: var(--ss-paper);
	letter-spacing: 0.01em;
	text-wrap: balance;
}

h1, .product_title {
	font-weight: 600;
	line-height: 1.12;
}

a {
	color: var(--ss-ember);
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--ss-paper);
}

:focus-visible {
	outline: 2px solid var(--ss-ember);
	outline-offset: 2px;
}

/* --- Zahlen sind das Versprechen ------------------------------------- */

.price,
.amount,
.woocommerce-Price-amount,
table td,
table th,
.ss-batch__value,
.shop_attributes td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.price,
.woocommerce-Price-amount {
	color: var(--ss-paper);
	font-family: var(--ss-mono);
	font-size: 1.05em;
	letter-spacing: -0.01em;
}

del .woocommerce-Price-amount {
	color: var(--ss-steel);
	opacity: 0.7;
}

/* --- Chargennummer in der Produktliste ------------------------------- */

.ss-batch {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	margin: 0.35em 0 0.2em;
	padding: 0.18em 0.5em;
	border: var(--ss-rule);
	border-radius: var(--ss-radius);
	background: var(--ss-anthracite);
	font-family: var(--ss-mono);
	font-size: 0.72rem;
	line-height: 1.5;
}

.ss-batch__label {
	color: var(--ss-steel);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.86em;
}

.ss-batch__value {
	color: var(--ss-ember);
}

/* --- Produktkacheln: Werkbank, keine Vitrine ------------------------- */

ul.products li.product {
	background: var(--ss-anthracite);
	border: var(--ss-rule);
	border-radius: var(--ss-radius);
	padding: 1rem;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

ul.products li.product:hover {
	border-color: var(--ss-ember);
	transform: translateY(-2px);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ss-display);
	color: var(--ss-paper);
	font-size: 1.15rem;
	line-height: 1.2;
}

/* --- Schaltflaechen: gluehendes Metall ------------------------------- */

.button,
button,
input[type="submit"],
.wp-block-button__link,
.single_add_to_cart_button {
	background: var(--ss-ember);
	color: #15171a;
	border: 1px solid var(--ss-ember);
	border-radius: var(--ss-radius);
	font-family: var(--ss-display);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 0 0 0 var(--ss-ember-glow);
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover {
	background: var(--ss-ember-dim);
	border-color: var(--ss-ember-dim);
	box-shadow: 0 0 0 4px var(--ss-ember-glow);
}

.button.alt.disabled,
.button:disabled {
	background: var(--ss-forge);
	border-color: var(--ss-line);
	color: var(--ss-steel);
}

/* --- Formulare ------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
	background: var(--ss-graphite);
	border: var(--ss-rule);
	border-radius: var(--ss-radius);
	color: var(--ss-paper);
}

input::placeholder,
textarea::placeholder {
	color: var(--ss-steel);
	opacity: 0.75;
}

/* --- Tabellen: Messprotokoll, nicht Prospekt ------------------------- */

table,
.shop_attributes,
.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
}

table th,
table td,
.shop_attributes th,
.shop_attributes td {
	border-bottom: var(--ss-rule);
	padding: 0.6rem 0.75rem;
	text-align: left;
}

table th,
.shop_attributes th {
	color: var(--ss-paper);
	font-family: var(--ss-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

/* --- Signatur: Chromatogramm statt Fiolenfoto ------------------------ */

.ss-chroma {
	height: 56px;
	margin: 3rem 0 0;
	border-top: var(--ss-rule);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 420px 56px;
	opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='56' viewBox='0 0 420 56'%3E%3Cpath d='M0 52 L60 52 Q72 52 78 30 Q84 8 92 30 Q98 50 108 52 L150 52 Q160 52 166 40 Q172 26 180 40 Q186 51 196 52 L250 52 Q262 52 268 18 Q274 2 282 18 Q288 50 300 52 L352 52 Q360 52 366 44 Q372 34 378 44 Q384 51 392 52 L420 52' fill='none' stroke='%23e8622c' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Hinweisblock fuer rechtliche Zweckbestimmung -------------------- */

.ss-note {
	border-left: 3px solid var(--ss-ember);
	background: var(--ss-anthracite);
	padding: 0.9rem 1.1rem;
	margin: 1.6rem 0;
	font-size: 0.92rem;
	color: var(--ss-steel);
}

/* --- Bewegung respektieren ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
	ul.products li.product:hover {
		transform: none;
	}
}

/* --- Zweckbestimmung ------------------------------------------------- */

.ss-badge {
	display: inline-block;
	margin: 0.6rem 0 1rem;
	padding: 0.3em 0.7em;
	border: 1px solid var(--ss-ember);
	border-radius: var(--ss-radius);
	background: var(--ss-ember-glow);
	color: var(--ss-paper);
	font-family: var(--ss-display);
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ss-note strong {
	color: var(--ss-paper);
	font-family: var(--ss-display);
	letter-spacing: 0.03em;
}