/*
Theme Name:   Reitsport und Schönes
Theme URI:    https://ps-rsus.de
Author:       Reitsport und Schönes
Description:  Eigenständiges Blockthema für gebrauchte und neuwertige Reitsportartikel. Warme Ledertöne in Lodengrün und Messing, großzügige Fotos, Produktraster mit Zustands- und Rabattkennzeichnung. Ohne Elternthema, damit nichts von außen bricht.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ps-rsus
Tags:         block-styles, full-site-editing, custom-logo, wide-blocks, e-commerce
*/

/* Die Farben, Schriften und Abstaende kommen aus theme.json.
   Hier steht nur, was sich dort nicht ausdruecken laesst. */

:root {
	--ps-band: var(--wp--preset--color--loden);
	--ps-on-band: #F4F6F0;
	--ps-band-linie: rgba(255, 255, 255, .16);
	--ps-schatten: 0 1px 2px rgba(27, 33, 29, .06), 0 8px 24px -12px rgba(27, 33, 29, .18);
	--ps-schatten-hoch: 0 2px 6px rgba(27, 33, 29, .08), 0 18px 40px -18px rgba(27, 33, 29, .28);
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--messing);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Kein seitliches Scrollen, egal was im Inhalt steht. */
html, body { overflow-x: hidden; }

.ps-eyebrow {
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin: 0 0 10px;
}

/* ---------- Kopfbereich ---------- */
.ps-kopf {
	background: var(--wp--preset--color--flaeche);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.ps-kopf .wp-block-site-logo img { width: 52px; height: auto; }

/* WooCommerce setzt bei der Aktivierung Konto- und Warenkorbsymbole in die
   Kopfzeile. Beides gibt es hier bewusst nicht: keine Kundenkonten, kein
   Warenkorb - gekauft wird per Anfrage. */
.wp-block-woocommerce-customer-account,
.wc-block-customer-account,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart,
.wp-block-woocommerce-cart-link {
	display: none !important;
}

.ps-kopf .wp-block-navigation {
	font-size: 14.5px;
	gap: 4px 22px;
}

/* Menüeinträge: Lodengrün, beim Überfahren Messing mit Unterstrich.
   Die aktuelle Seite trägt den Unterstrich dauerhaft. */
.ps-kopf .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--loden);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: .01em;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.ps-kopf .wp-block-navigation .wp-block-navigation-item__content:hover,
.ps-kopf .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--messing);
	border-bottom-color: var(--wp--preset--color--messing);
	text-decoration: none;
}

.ps-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.ps-kopf .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--messing);
	border-bottom-color: var(--wp--preset--color--messing);
}

/* Untermenüs bleiben ruhig und lesbar. */
.ps-kopf .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	box-shadow: var(--ps-schatten);
	padding: 6px 0;
}

.ps-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 0;
	padding: 7px 16px;
	color: var(--wp--preset--color--ink-2);
}

.ps-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--messing);
	background: var(--wp--preset--color--flaeche-2);
	border-bottom: 0;
}

/* Wenn das Menü in eine eigene Zeile rutscht, bekommt es eine feine Trennlinie. */
.ps-kopf .wp-block-navigation__container {
	row-gap: 4px;
}

.ps-ortsangabe {
	font-family: var(--wp--preset--font-family--daten);
	font-size: 9.5px;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin: 3px 0 0;
}

/* Suchfeld im Kopf */
.ps-suche .wp-block-search__input {
	border: 1px solid #C8CDC3;
	background: var(--wp--preset--color--grund);
	border-radius: 3px;
	padding: 10px 14px;
	font-size: 14.5px;
}

.ps-suche .wp-block-search__button {
	background: var(--wp--preset--color--loden);
	color: var(--ps-on-band);
	border: 0;
	border-radius: 3px;
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Hero der Startseite ---------- */
.ps-hero { padding: 74px 0 66px; border-bottom: 1px solid var(--wp--preset--color--linie); }
.ps-hero .ps-strich { width: 52px; height: 2px; background: var(--wp--preset--color--messing); margin: 0 0 22px; }
.ps-hero h1 { line-height: 1.1; }

.ps-hero-lead {
	font-size: 1.09rem;
	color: var(--wp--preset--color--ink-2);
	max-width: 46ch;
}

.ps-hero-lead strong { color: var(--wp--preset--color--ink); font-weight: 600; }

/* Fotos wie auf dem Sattelschrank ausgelegt */
.ps-faecher { position: relative; min-height: 396px; }

.ps-faecher figure {
	position: absolute;
	margin: 0;
	border: 7px solid var(--wp--preset--color--flaeche);
	box-shadow: var(--ps-schatten-hoch);
	background: var(--wp--preset--color--flaeche);
	overflow: hidden;
}

.ps-faecher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-faecher .ps-f1 { width: 53%; height: 83%; left: 0; top: 8%; transform: rotate(-4.5deg); z-index: 2; }
.ps-faecher .ps-f2 { width: 47%; height: 70%; right: 2%; top: 0; transform: rotate(3.5deg); z-index: 1; }
.ps-faecher .ps-f3 { width: 42%; height: 56%; right: 9%; bottom: 0; transform: rotate(-1.5deg); z-index: 3; }

/* ---------- Kategoriewelten ---------- */
.ps-welten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ps-welten > * { min-width: 0; }

.ps-welt {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	padding: 24px 22px 20px;
	display: flex;
	flex-direction: column;
	transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ps-welt:hover { border-color: var(--wp--preset--color--loden); box-shadow: var(--ps-schatten); transform: translateY(-2px); }
.ps-welt h3 { margin: 0 0 6px; }
.ps-welt p { font-size: 13.5px; color: var(--wp--preset--color--ink-2); margin: 0 0 15px; }
.ps-welt a { text-decoration: none; }

.ps-welt-mehr {
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--messing);
	margin-top: auto;
}

/* ---------- Produktraster (WooCommerce) ---------- */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .18s, box-shadow .18s, transform .18s;
	position: relative;
}

ul.products li.product:hover {
	border-color: var(--wp--preset--color--loden);
	box-shadow: var(--ps-schatten-hoch);
	transform: translateY(-3px);
}

ul.products li.product > a { text-decoration: none; color: inherit; display: block; }

ul.products li.product img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0;
	display: block;
	transition: transform .5s ease;
}

ul.products li.product:hover img { transform: scale(1.035); }

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.03rem;
	line-height: 1.28;
	padding: 14px 16px 0;
	margin: 0;
}

ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 8px 16px 16px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--sale);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.22rem;
	font-weight: 700;
}

ul.products li.product .price del {
	color: var(--wp--preset--color--ink-3);
	font-size: 13px;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--body);
	opacity: 1;
}

ul.products li.product .price ins { text-decoration: none; background: none; }

/* Prozent-Fahne */
.ps-rabatt-fahne {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	background: var(--wp--preset--color--sale);
	color: #fff;
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 2px;
	letter-spacing: .03em;
}

/* Zustand und Sicherheitsvermerk in der Uebersicht */
.ps-zustand-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--wp--preset--color--ink-2);
	padding: 6px 16px 0;
}

.ps-zustand-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--ok);
	flex: none;
}

.ps-sturz-chip {
	display: inline-block;
	margin: 6px 16px 0;
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11px;
	border: 1px solid var(--wp--preset--color--messing);
	color: var(--wp--preset--color--messing);
	padding: 2px 8px;
	border-radius: 100px;
}

.ps-sturz-chip.ps-sturz-warn { border-color: var(--wp--preset--color--sale); color: var(--wp--preset--color--sale); }

.ps-verkauft-chip {
	display: inline-block;
	margin: 10px 16px 16px;
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11px;
	background: var(--wp--preset--color--flaeche-2);
	border: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--ink-3);
	padding: 4px 10px;
	border-radius: 100px;
}

ul.products li.product .button.ps-anfrage {
	margin: 10px 16px 16px;
	background: none;
	border: 1px solid #C8CDC3;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 13.5px;
	padding: 9px 14px;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
}

ul.products li.product .button.ps-anfrage:hover { border-color: var(--wp--preset--color--loden); }

/* ---------- Artikelseite ---------- */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.woocommerce div.product > * { min-width: 0; }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .summary { width: 100% !important; float: none !important; margin: 0; }

/* Bildergalerie: einheitliches Seitenverhaeltnis wie im Produktraster,
   Miniaturen als Kacheln statt der schmalen WooCommerce-Standardreihe. */
.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-viewport {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
	background: var(--wp--preset--color--flaeche-2);
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--linie) !important;
	border-radius: 2px;
	cursor: pointer;
	opacity: 1 !important;
	transition: border-color .15s ease;
}

.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery ol.flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--loden) !important;
}


.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.15rem;
	line-height: 1.12;
	margin: 0 0 8px;
}

.woocommerce div.product p.price {
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding: 22px 0;
	margin: 22px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--sale);
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.woocommerce div.product p.price del {
	font-size: 1rem;
	color: var(--wp--preset--color--ink-3);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	opacity: 1;
}

.woocommerce div.product p.price ins { text-decoration: none; background: none; }

.ps-preishinweis {
	font-size: 12px;
	color: var(--wp--preset--color--ink-3);
	line-height: 1.5;
	margin: 11px 0 22px;
	max-width: 52ch;
}

.ps-cta-reihe { display: flex; gap: 11px; flex-wrap: wrap; margin: 22px 0 0; }

.ps-cta-reihe .button.ps-reservieren {
	background: var(--wp--preset--color--loden);
	color: var(--ps-on-band);
	border: 1px solid var(--wp--preset--color--loden);
	padding: 13px 26px;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
}

.ps-cta-reihe .button.ps-reservieren:hover { background: var(--wp--preset--color--loden-2); }

.ps-cta-reihe .button.ps-anrufen {
	background: none;
	border: 1px solid #C8CDC3;
	color: var(--wp--preset--color--ink);
	padding: 13px 22px;
	border-radius: 3px;
	text-decoration: none;
}

.ps-cta-reihe .button.ps-anrufen:hover { border-color: var(--wp--preset--color--loden); }

.ps-zahlhinweis {
	margin: 22px 0 0;
	padding: 13px 15px;
	background: var(--wp--preset--color--flaeche-2);
	border-left: 2px solid var(--wp--preset--color--messing);
	font-size: 13.5px;
	color: var(--wp--preset--color--ink-2);
	border-radius: 0 3px 3px 0;
	max-width: 58ch;
}

/* Pflichtangabe bei Schutzausruestung */
.ps-sicherheit-kasten {
	border: 1px solid var(--wp--preset--color--messing);
	background: var(--wp--preset--color--flaeche-2);
	border-radius: 3px;
	padding: 16px 18px;
	margin: 22px 0 0;
	max-width: 60ch;
}

.ps-sicherheit-kasten.ps-sicherheit-warn {
	border-color: var(--wp--preset--color--sale);
	background: #F6E9EA;
}

.ps-sicherheit-kasten strong {
	display: block;
	font-family: var(--wp--preset--font-family--daten);
	font-size: 11px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--messing);
	margin-bottom: 8px;
}

.ps-sicherheit-kasten.ps-sicherheit-warn strong { color: var(--wp--preset--color--sale); }
.ps-sicherheit-kasten p { margin: 0 0 9px; font-size: 13.5px; color: var(--wp--preset--color--ink-2); line-height: 1.6; }
.ps-sicherheit-kasten p:last-child { margin-bottom: 0; }
.ps-sicherheit-fuss { font-size: 12.5px !important; color: var(--wp--preset--color--ink-3) !important; }

/* Verkaufter Artikel */
.ps-verkauft-kasten {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche-2);
	border-radius: 3px;
	padding: 15px 17px;
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-2);
}

.ps-verkauft-kasten strong { color: var(--wp--preset--color--ink); }

/* ---------- FAQ ---------- */
.ps-faq { border-bottom: 1px solid var(--wp--preset--color--linie); }

.ps-faq summary {
	cursor: pointer;
	padding: 19px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.13rem;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 15px;
}

.ps-faq summary::-webkit-details-marker { display: none; }

.ps-faq summary::before {
	content: "+";
	font-family: var(--wp--preset--font-family--daten);
	font-size: 19px;
	color: var(--wp--preset--color--messing);
	width: 19px;
	flex: none;
}

.ps-faq[open] summary::before { content: "\2013"; }
.ps-faq summary:hover { color: var(--wp--preset--color--messing); }

.ps-faq-antwort {
	padding: 0 0 21px 34px;
	color: var(--wp--preset--color--ink-2);
	max-width: 64ch;
}

.ps-faq-antwort p { margin: 0; }

/* ---------- Kontakt und Impressum ---------- */
.ps-kontakt-karte {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	padding: 26px;
}

.ps-laden-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.ps-laden-fotos figure { margin: 0; border-radius: 3px; overflow: hidden; border: 1px solid var(--wp--preset--color--linie); }
.ps-laden-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.ps-karten-knopf {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 15px;
	padding: 11px 17px;
	border: 1px solid #C8CDC3;
	border-radius: 3px;
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 14px;
}

.ps-karten-knopf:hover { border-color: var(--wp--preset--color--loden); }
.ps-karten-knopf small { display: block; color: var(--wp--preset--color--ink-3); font-size: 11.5px; margin-top: 1px; }

.ps-impressum {
	border-top: 2px solid var(--wp--preset--color--loden);
	margin-top: 14px;
	padding: 28px 0 0;
}

/* Rechtstexte */
.ps-rechtstext { max-width: 76ch; }
.ps-rechtstext h2 { font-size: 1.2rem; margin: 34px 0 9px; padding-top: 22px; border-top: 1px solid var(--wp--preset--color--linie); }
.ps-rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.ps-rechtstext p, .ps-rechtstext li { color: var(--wp--preset--color--ink-2); }

/* ---------- Fusszeile ---------- */
.ps-fuss { background: var(--ps-band); color: var(--ps-on-band); }
.ps-fuss :where(h2, h3, h4, p, li, span) { color: inherit; }

.ps-fuss h4 {
	font-family: var(--wp--preset--font-family--daten);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
	margin: 0 0 13px;
	font-weight: 600;
}

.ps-fuss a { color: inherit; text-decoration: none; opacity: .86; }
.ps-fuss a:hover { opacity: 1; text-decoration: underline; }
.ps-fuss .wp-block-navigation { gap: 18px; font-size: 12.5px; }
.ps-fuss-trenner { border-top: 1px solid var(--ps-band-linie); margin-top: 32px; padding-top: 20px; }
.ps-fuss-klein { font-size: 12.5px; opacity: .76; }

/* ---------- Reaktion auf kleine Bildschirme ---------- */
@media (max-width: 1080px) {
	.ps-welten, ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: 28px; }
	.ps-faecher { min-height: 320px; }
	.ps-laden-fotos { grid-template-columns: 1fr; }
}

@media (max-width: 660px) {
	.ps-welten, ul.products { grid-template-columns: repeat(2, 1fr); }
	.ps-hero { padding: 46px 0; }
	.woocommerce-product-gallery ol.flex-control-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}