/*
Theme Name: JR Printshop
Template: twentytwentyfive
Description: Child-Theme von Twenty Twenty-Five im Look von www.jrprojects.de (helle Werkstatt im JR-Grün).
Author: JR-Projects
Version: 1.0.0
Text Domain: jrprojects-shop
*/

:root {
	--jr: #77bb3f;
	--jr-dark: #5a9a2e;
	--jr-ink: #3c7414;
	--jr-wash: #e8f4dc;
	--bg: #f6f8f2;
	--surface: #ffffff;
	--sunk: #eef2e7;
	--line: #dde3d3;
	--line-strong: #c3cbb6;
	--fg: #141a0f;
	--fg-soft: #434d3a;
	--fg-mute: #65705b;
	--f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

:focus-visible { outline: 3px solid var(--jr-dark); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--jr); color: #0d1a05; }

/* ---------- Navigation (wie .nav auf jrprojects.de) ---------- */
.jr-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(246, 248, 242, .88);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--line);
	padding-inline: max(16px, 3vw);
}
.admin-bar .jr-nav { top: var(--wp-admin--admin-bar--height, 0); }
.jr-nav-row { padding-block: .65rem; gap: 1.3rem; }
.jr-nav-right { gap: 1rem; }
.jr-brand {
	display: inline-flex; align-items: center; gap: .6rem;
	text-decoration: none; color: var(--fg);
	font: 800 1.08rem/1 "Bricolage Grotesque", Inter, system-ui, sans-serif;
	letter-spacing: -.01em; white-space: nowrap;
}
.jr-brand img { width: 34px; height: 34px; border-radius: 8px; }
.jr-nav-links .wp-block-navigation-item__content {
	color: var(--fg-soft); text-decoration: none; position: relative; padding-block: .3rem;
}
.jr-nav-links .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--jr); transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--ease-out);
}
.jr-nav-links .wp-block-navigation-item__content:hover { color: var(--fg); }
.jr-nav-links .wp-block-navigation-item__content:hover::after,
.jr-nav-links .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
@media (max-width: 599px) {
	.jr-nav .wp-block-navigation__responsive-container-open {
		width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong);
		background: var(--surface); display: grid; place-items: center;
	}
}
.jr-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg); padding: 1.5rem max(16px, 3vw); }
.jr-nav .is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; padding-block: .6rem; }
.jr-cart .wc-block-mini-cart__button { color: var(--fg); }
.jr-cart .wc-block-mini-cart__badge { background: var(--jr) !important; color: #0d1a05 !important; }

/* ---------- Footer (wie .site-footer auf jrprojects.de) ---------- */
.jr-footer {
	border-top: 1px solid var(--line); background: var(--surface);
	font-size: .9rem; color: var(--fg-mute); margin-top: clamp(3rem, 6vw, 5rem);
}
.jr-f-grid, .jr-f-bottom { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, 3vw); }
.jr-f-grid {
	display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: 1.5rem 2rem; padding-block: 2.5rem 1.5rem;
}
.jr-footer h2 {
	font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
	color: var(--fg-mute); margin: 0 0 .4rem;
}
.jr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.jr-footer a { color: var(--fg-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.jr-footer a:hover { color: var(--jr-ink); }
.jr-footer p a { display: inline; min-height: 0; color: var(--jr-ink); font-weight: 600; }
.jr-f-brand p { max-width: 34ch; margin: .6rem 0 0; }
.jr-f-bottom {
	border-top: 1px solid var(--line); padding-block: 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
	display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
}
@media (max-width: 860px) {
	.jr-f-grid { grid-template-columns: 1fr 1fr; }
	.jr-f-brand { grid-column: 1 / -1; }
}

/* ---------- Seitenkopf auf Shop-/Kategorieseiten: Druckbett-Raster wie Hero ---------- */
.woocommerce-products-header, .wp-block-query-title, .wc-block-store-notices + .wp-block-query-title { position: relative; }
body.woocommerce-shop main > .wp-block-group:first-child,
body.tax-product_cat main > .wp-block-group:first-child {
	background:
		linear-gradient(rgba(90, 154, 46, .10) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(90, 154, 46, .10) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(180deg, var(--bg) 0%, var(--jr-wash) 100%);
}

/* ---------- Produktkarten ---------- */
.wc-block-product-template > li,
.wp-block-woocommerce-product-template > li,
ul.products li.product {
	background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
	padding: .8rem .8rem 1.1rem; overflow: hidden;
	transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.wc-block-product-template > li:hover,
.wp-block-woocommerce-product-template > li:hover,
ul.products li.product:hover {
	transform: translateY(-3px); border-color: var(--line-strong);
	box-shadow: 0 18px 40px -24px rgba(60, 116, 20, .45);
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img { border-radius: 12px; }
.wp-block-post-title a, .wc-block-components-product-name { color: var(--fg); text-decoration: none; }
.wc-block-components-product-price, .wp-block-woocommerce-product-price { color: var(--jr-ink); font-weight: 700; }
.wc-block-components-product-sale-badge, .onsale {
	background: var(--jr) !important; color: #0d1a05 !important; border: 0 !important;
	border-radius: 999px !important; font: 600 .75rem var(--f-mono) !important;
}

/* Buttons von WooCommerce angleichen (Pill im JR-Grün) */
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.single_add_to_cart_button {
	border-radius: 999px !important; font-weight: 600;
	transition: transform .2s var(--ease-out), background-color .2s;
}
.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover,
.single_add_to_cart_button:hover { transform: translateY(-2px); }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .single_add_to_cart_button {
	background: var(--jr) !important; color: #0d1a05 !important;
}

/* Formularfelder */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea,
.wc-block-components-text-input input, .wc-blocks-components-select__select {
	border: 1px solid var(--line-strong) !important; border-radius: 10px !important;
	background: var(--surface); padding: .6em .8em; font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--jr-dark) !important; outline: 2px solid var(--jr-wash); }

/* Produktseite: Variationen und Personalisierung als Karten */
.variations_form, .jr-pers { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.jr-pers-hinweis { color: var(--fg-mute); }
.wc-gzd-additional-info, .delivery-time-info, .shipping-costs-info, .wc-gzd-additional-info a { color: var(--fg-mute); font-size: .85rem; }

/* Kleingedrucktes im Mono-Stil der Website (Eyebrows) */
.wp-block-woocommerce-breadcrumbs, .woocommerce-breadcrumb {
	font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute);
}
.wp-block-woocommerce-breadcrumbs a { color: var(--jr-ink); text-decoration: none; }

/* Hinweis-Banner */
.wc-block-components-notice-banner.is-success { border-color: var(--jr); background: var(--jr-wash); }

/* Anfrageformular */
.jr-anfrage { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1rem, 3vw, 1.6rem); }
.jr-anfrage label { font-weight: 600; font-size: .92rem; }

/* ---------- Feinschliff ---------- */
/* Lange Etsy-Titel: Karten-Titel kompakter */
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-product .wp-block-post-title,
li.product .woocommerce-loop-product__title {
	font-size: 1rem !important; font-weight: 700; line-height: 1.25; letter-spacing: -.005em;
}
.wc-block-product-template .wc-gzd-additional-info,
.wc-block-product-template .wp-block-woocommerce-gzd-product-tax-info,
.wc-block-product-template [class*="wp-block-woocommerce-gzd"],
.wp-block-woocommerce-product-template [class*="wp-block-woocommerce-gzd"] {
	font-size: .75rem !important; color: var(--fg-mute); overflow-wrap: anywhere; line-height: 1.4;
}
/* Produktseite: Titel nicht plakatgross, Etsy-Tags/Meta ausblenden (Kategorie steht im Breadcrumb) */
.single-product .wp-block-post-title:not(.wc-block-product .wp-block-post-title),
.single-product h1.product_title { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; line-height: 1.1; }
.single-product .wp-block-woocommerce-product-meta { display: none; }
@media (max-width: 599px) {
	.wc-block-product-template > li,
	.wp-block-woocommerce-product-template > li { padding: .5rem .5rem .8rem; border-radius: 14px; }
	.wc-block-product-template .wp-block-post-title,
	.wp-block-woocommerce-product-template .wp-block-post-title { font-size: .88rem !important; }
	.wc-block-product-template .wp-block-button__link,
	.wp-block-woocommerce-product-template .wp-block-button__link { font-size: .82rem; padding: .55em .9em; }
}

/* Dropdowns der Variationen nicht abschneiden */
select, .variations select { height: auto !important; min-height: 2.6em; line-height: 1.3; padding-block: .5em !important; }
.variations td, .variations th { vertical-align: middle; padding-block: .35rem; }