/*
Theme Name: PurePeptides
Theme URI: https://purepeptides.at/
Author: PurePeptides
Description: Block-Theme für den PurePeptides-Shop. Weißer Grund, Instrumentenblau als Akzent, Monospace für alle Messwerte. Gebaut für WooCommerce.
Version: 0.1.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purepeptides
Tags: e-commerce, full-site-editing, block-patterns, custom-colors, custom-logo
*/

/* ==========================================================================
   1. BRÜCKE ZUM PLUGIN
   Das Plugin nutzt --pp-*. theme.json erzeugt --wp--preset--*.
   Hier werden beide verbunden, damit Farben nur an EINER Stelle gepflegt
   werden (theme.json) und trotzdem überall gelten.
   ========================================================================== */

:root {
	--pp-white:       var(--wp--preset--color--base);
	--pp-tint:        var(--wp--preset--color--tint);
	--pp-tint-2:      var(--wp--preset--color--tint-2);
	--pp-line:        var(--wp--preset--color--line);
	--pp-navy:        var(--wp--preset--color--navy);
	--pp-ink:         var(--wp--preset--color--ink);
	--pp-ink-soft:    var(--wp--preset--color--ink-soft);
	--pp-muted:       var(--wp--preset--color--muted);
	--pp-blue:        var(--wp--preset--color--blue);
	--pp-blue-bright: var(--wp--preset--color--blue-bright);
	--pp-blue-wash:   var(--wp--preset--color--blue-wash);
	--pp-verify:      var(--wp--preset--color--verify);
	--pp-font-data:   var(--wp--preset--font-family--pp-mono);
}

/* ==========================================================================
   2. LOGO
   Peak und Wortmarke teilen sich eine Basislinie — deshalb in HTML gebaut
   und nicht als fertige Bilddatei.
   ========================================================================== */

.pp-logo {
	display: inline-flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1;
}

.pp-logo__row {
	display: flex;
	align-items: flex-end;
	gap: .34em;
	border-bottom: .036em solid var(--pp-blue);
}

.pp-logo__peak {
	height: .96em;
	width: auto;
	display: block;
	overflow: visible;
}

.pp-logo__peak path { stroke: var(--pp-blue); }

.pp-logo__word {
	font-family: var(--wp--preset--font-family--pp-sans);
	font-size: 1em;
	font-weight: 400;
	letter-spacing: .085em;
	padding-bottom: .11em;
	color: var(--pp-ink);
	white-space: nowrap;
}

.pp-logo__word b { font-weight: 800; }

.pp-logo__desc {
	font-family: var(--pp-font-data);
	font-size: .185em;
	letter-spacing: .19em;
	color: var(--pp-muted);
	padding-top: .55em;
	align-self: flex-end;
	white-space: nowrap;
}

/* Invertiert für das Marineblau-Band */
.pp-logo--reversed .pp-logo__row { border-bottom-color: #6BA6EE; }
.pp-logo--reversed .pp-logo__peak path { stroke: #6BA6EE; }
.pp-logo--reversed .pp-logo__word { color: #FFFFFF; }
.pp-logo--reversed .pp-logo__desc { color: #93A2B4; }

/* ==========================================================================
   3. KOPFZEILE
   ========================================================================== */

.pp-header {
	border-bottom: 1px solid var(--pp-line);
	background: var(--pp-white);
}

.pp-topbar {
	background: var(--pp-tint);
	border-bottom: 1px solid var(--pp-line);
	font-family: var(--pp-font-data);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-topbar p { margin: 0; }

.pp-header .wp-block-navigation {
	font-size: .875rem;
	font-weight: 500;
}

.pp-header .wp-block-navigation a { text-decoration: none; }
.pp-header .wp-block-navigation a:hover { color: var(--pp-blue); }

/* ==========================================================================
   3b. HERO MIT LABORFOTO
   Foto als Hintergrund, Vials als Vektor darüber. Bewusst nicht zu einem
   Bild zusammengerechnet: so bleiben die Etiketten bei jeder Auflösung
   scharf, und auf dem Handy lassen sich die Vials eigenständig anordnen.

   Die fünf Variablen oben sind die Stellschrauben. Wenn die Vials nicht
   exakt auf der Bankkante stehen, hier nachjustieren — sonst nichts.
   ========================================================================== */

.pp-hero {
	--pp-hero-x:       64%;   /* Bildausschnitt waagrecht */
	--pp-hero-y:       58%;   /* Bildausschnitt senkrecht */
	--pp-vials-width:  44%;   /* Breite der Vial-Ebene */
	--pp-vials-right:   4%;   /* Abstand von rechts */
	--pp-vials-bottom:  7%;   /* Höhe über der Unterkante = Bankkante */

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #EAF0F7;
	background-image: url("/wp-content/uploads/2026/08/pp-labor-0900.jpg");
	background-size: cover;
	background-position: var(--pp-hero-x) var(--pp-hero-y);
	background-repeat: no-repeat;
	min-height: clamp(500px, 62vh, 740px);
	display: flex;
	align-items: center;
}

@media (min-width: 700px) {
	.pp-hero { background-image: url("/wp-content/uploads/2026/08/pp-labor-1280.jpg"); }
}
@media (min-width: 1400px) {
	.pp-hero { background-image: url("/wp-content/uploads/2026/08/pp-labor-2048.jpg"); }
}

/* Weißer Verlauf nach links: macht die Überschrift lesbar, ohne dass
   Textschatten nötig wären. Rechts läuft er auf null aus, damit die
   Vials nicht milchig werden. */
.pp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(96deg,
		rgba(255,255,255,0.97) 0%,
		rgba(255,255,255,0.94) 24%,
		rgba(255,255,255,0.66) 42%,
		rgba(255,255,255,0.16) 58%,
		rgba(255,255,255,0)    72%);
}

.pp-hero__vials {
	position: absolute;
	right: var(--pp-vials-right);
	bottom: var(--pp-vials-bottom);
	width: var(--pp-vials-width);
	max-width: 660px;
	height: auto;
	z-index: 2;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Inhalt über allem */
.pp-hero > .wp-block-group,
.pp-hero .pp-hero__inhalt {
	position: relative;
	z-index: 3;
}

.pp-hero__inhalt { max-width: 640px; }

/* Handy: Vials wandern nach unten und werden größer statt zu schrumpfen,
   der Verlauf läuft senkrecht statt schräg. */
@media (max-width: 780px) {
	.pp-hero {
		--pp-hero-x:       70%;
		--pp-vials-width:  84%;
		--pp-vials-right: -8%;
		--pp-vials-bottom: -3%;
		min-height: 660px;
		align-items: flex-start;
	}
	.pp-hero::before {
		background: linear-gradient(178deg,
			rgba(255,255,255,0.97) 0%,
			rgba(255,255,255,0.93) 34%,
			rgba(255,255,255,0.55) 58%,
			rgba(255,255,255,0.10) 78%,
			rgba(255,255,255,0)    100%);
	}
	.pp-hero__inhalt { max-width: none; }
}

/* ==========================================================================
   4. ABSCHNITTS-LABEL
   Kleine Versalzeile über Überschriften. Als Blockstil verfügbar.
   ========================================================================== */

.is-style-pp-eyebrow {
	font-family: var(--pp-font-data);
	font-size: .6875rem !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: .5rem;
}

/* Überschrift mit blauer Basislinie darunter */
.is-style-pp-underline {
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--pp-blue);
	display: inline-block;
}

/* ==========================================================================
   5. WOOCOMMERCE
   ========================================================================== */

/* Produktraster als CSS Grid.
   WooCommerce liefert von Haus aus ein Float-Layout mit .first/.last und
   clear:both. Sobald zwei Kacheln unterschiedlich hoch sind — etwa weil ein
   Kategoriename zweizeilig umbricht — reißt der Umbruch auf und es stehen
   plötzlich nur noch eine oder zwei Kacheln in einer Reihe. Grid kennt das
   Problem nicht. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 1.5rem;
	margin: 0 0 2rem !important;
	padding: 0 !important;
	list-style: none;
}

/* Die Clearfix-Pseudoelemente würden im Grid als eigene Zellen zählen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
}

/* Preis und Button unten bündig, auch wenn Titel unterschiedlich lang sind. */
.woocommerce ul.products li.product .price { margin-top: auto; }

@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
	}
}

.woocommerce ul.products li.product {
	border: 1px solid var(--pp-line);
	border-radius: 2px;
	padding: 1rem;
	background: var(--pp-white);
	transition: border-color .15s ease;
}

.woocommerce ul.products li.product:hover { border-color: var(--pp-blue); }

.woocommerce ul.products li.product a img {
	background: var(--pp-tint);
	border-radius: 2px;
	margin-bottom: .85rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .9375rem !important;
	font-weight: 700;
	color: var(--pp-ink);
	padding: 0 0 .35rem !important;
}

.woocommerce ul.products li.product .price {
	font-family: var(--pp-font-data);
	font-size: 1.05rem !important;
	color: var(--pp-ink);
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: .6rem;
}

.woocommerce ul.products li.product .price del { color: var(--pp-muted); }

.woocommerce span.onsale {
	background: var(--pp-blue);
	color: #fff;
	border-radius: 2px;
	font-family: var(--pp-font-data);
	font-size: .65rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: auto;
	min-width: auto;
	padding: .25rem .5rem;
	line-height: 1.4;
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--pp-blue);
	color: #fff;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--pp-sans);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .03em;
	padding: .7rem 1.2rem;
	transition: background .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--pp-blue-bright);
	color: #fff;
}

.woocommerce .quantity .qty {
	border: 1px solid var(--pp-line);
	border-radius: 2px;
	padding: .55rem .4rem;
	font-family: var(--pp-font-data);
	font-variant-numeric: tabular-nums;
}

/* Einzelprodukt */
.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}

.woocommerce div.product p.price {
	font-family: var(--pp-font-data);
	font-size: 1.6rem;
	color: var(--pp-ink);
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--pp-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.woocommerce div.product .images img {
	background: var(--pp-tint);
	border: 1px solid var(--pp-line);
	border-radius: 2px;
}

/* Produktreiter */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--pp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--pp-font-data);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pp-muted);
	font-weight: 400;
	padding: .75rem 1.1rem;
	display: block;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--pp-ink);
	border-bottom-color: var(--pp-blue);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* Lagerstatus */
.woocommerce div.product .stock {
	font-family: var(--pp-font-data);
	font-size: .7rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: .18rem .5rem;
	border-radius: 2px;
	display: inline-block;
}

.woocommerce div.product .stock.in-stock { background: #E1F3EC; color: var(--pp-verify); }
.woocommerce div.product .stock.out-of-stock { background: #FBE9EA; color: #B4232D; }

/* Kategorie-Kacheln */
.woocommerce ul.products li.product-category a img {
	border: 1px solid var(--pp-line);
}

.woocommerce ul.products li.product-category h2 {
	font-size: .9375rem !important;
	font-weight: 700;
}

.woocommerce ul.products li.product-category mark.count {
	background: transparent;
	color: var(--pp-muted);
	font-family: var(--pp-font-data);
	font-size: .75rem;
}

/* Meldungen */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid var(--pp-blue);
	background: var(--pp-tint);
	border-radius: 0 2px 2px 0;
	font-size: .9375rem;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--pp-blue); }
.woocommerce-error { border-left-color: #B4232D; background: #FBE9EA; }

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--pp-font-data);
	font-size: .7rem;
	letter-spacing: .06em;
	color: var(--pp-muted);
	margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb a { color: var(--pp-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pp-blue); }

/* Ergebniszahl und Sortierung */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: .8125rem;
	color: var(--pp-muted);
}

/* ==========================================================================
   6. FUSSZEILE
   ========================================================================== */

.pp-footer {
	background: var(--pp-navy);
	color: #C2CEDD;
}

.pp-footer a { color: #C2CEDD; text-decoration: none; }
.pp-footer a:hover { color: #fff; text-decoration: underline; }
.pp-footer h2, .pp-footer h3 { color: #fff; }

.pp-footer .wp-block-heading {
	font-family: var(--pp-font-data);
	font-size: .6875rem !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #7E93AD;
	font-weight: 400;
}

.pp-footer .wp-block-navigation { font-size: .875rem; }

.pp-footer-legal {
	border-top: 1px solid #23394F;
	font-family: var(--pp-font-data);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7E93AD;
}

/* ==========================================================================
   7. KLEINIGKEITEN
   ========================================================================== */

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible {
	outline: 2px solid var(--pp-blue);
	outline-offset: 2px;
}

.pp-trust {
	font-family: var(--pp-font-data);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-trust strong { color: var(--pp-blue); font-weight: 400; }

/* Tabellen im Inhalt (Chargenregister bringt eigenes CSS mit) */
.wp-block-table table { font-size: .875rem; }
.wp-block-table th {
	font-family: var(--pp-font-data);
	font-size: .65rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pp-muted);
	font-weight: 400;
	background: var(--pp-tint);
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}