/*
Theme Name: Taylans
Theme URI: 
Author: Anselm Peischl
Author URI: 
Description: Block-Theme für TAYLAN'S — Schuhe & Lederhosen, modern interpretiert.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taylans
Tags: block-theme, full-site-editing, e-commerce
*/

:root {
	color-scheme: light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--wp--preset--color--soft-white);
	color: var(--wp--preset--color--obsidian-black);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--wp--preset--color--burnt-rust);
}

img {
	max-width: 100%;
}

.wp-site-blocks {
	background:
		linear-gradient(180deg, rgba(216, 208, 196, 0.34), rgba(245, 244, 239, 0) 18rem),
		var(--wp--preset--color--soft-white);
	min-height: 100vh;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.taylans-site-header,
.taylans-checkout-header {
	background: rgba(245, 244, 239, 0.96);
	border-bottom: 1px solid var(--wp--preset--color--concrete-gray);
	position: relative;
	z-index: 10;
}

.taylans-site-header__inner {
	gap: var(--wp--preset--spacing--30);
}

.taylans-brand-lockup {
	gap: 0.85rem;
}

.taylans-site-header .wp-block-site-logo img {
	border-radius: 2px;
	display: block;
}

.wp-block-site-title {
	margin: 0;
}

.wp-block-site-title a {
	color: inherit;
}

.taylans-site-header .wp-block-site-tagline,
.taylans-site-footer .wp-block-site-title {
	margin: 0;
}

.taylans-site-header .wp-block-site-tagline {
	max-width: 18rem;
}

.wp-block-navigation {
	gap: 1rem;
}

.wp-block-navigation a {
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible,
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--obsidian-black);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--soft-white);
	color: var(--wp--preset--color--obsidian-black);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* Header: brand lockup, primary nav, action cluster (search + mini-cart) */
.taylans-site-header__inner {
	flex-wrap: nowrap;
}

.taylans-primary-nav {
	flex: 1 1 auto;
}

.taylans-primary-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.taylans-primary-nav a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.taylans-header-actions {
	gap: 0.65rem;
	flex: 0 0 auto;
}

/* Search reduced to an icon button that blends into the header */
.taylans-header-search .wp-block-search__inside-wrapper {
	border: 0;
}

.taylans-header-actions .taylans-header-search .wp-block-search__button.wp-element-button {
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--obsidian-black);
	margin: 0;
	min-height: 0;
	padding: 0.5rem;
}

.taylans-header-actions .taylans-header-search .wp-block-search__button.wp-element-button:hover,
.taylans-header-actions .taylans-header-search .wp-block-search__button.wp-element-button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--burnt-rust);
	transform: none;
}

.taylans-header-search .wp-block-search__button svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* Customer-account icon */
.taylans-header-account a,
.taylans-header-account .wp-block-woocommerce-customer-account {
	color: var(--wp--preset--color--obsidian-black);
}

.taylans-header-account a:hover,
.taylans-header-account a:focus-visible {
	color: var(--wp--preset--color--burnt-rust);
}

.taylans-header-account svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* Mini-cart trigger */
.taylans-header-actions .wc-block-mini-cart__button {
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--obsidian-black);
	padding: 0.5rem;
}

.taylans-header-actions .wc-block-mini-cart__button:hover,
.taylans-header-actions .wc-block-mini-cart__button:focus-visible {
	color: var(--wp--preset--color--burnt-rust);
	background: transparent;
	transform: none;
}

.taylans-header-actions .wc-block-mini-cart__button svg {
	width: 1.4rem;
	height: 1.4rem;
}

.taylans-header-actions .wc-block-mini-cart__quantity-badge {
	color: var(--wp--preset--color--obsidian-black);
}

.taylans-header-actions .wc-block-mini-cart__amount {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--small);
}

main.wp-block-group {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.wp-block-query-title,
.wp-block-post-title {
	text-wrap: balance;
}

.wp-block-term-description,
.wp-block-post-excerpt,
.woocommerce-product-details__short-description {
	color: var(--wp--preset--color--graphite);
}

.wp-element-button,
.wp-block-button__link,
button,
input[type="button"],
input[type="submit"],
.wc-block-components-button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	border-radius: 2px;
	cursor: pointer;
	letter-spacing: 0;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wc-block-components-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--burnt-rust);
	border-color: var(--wp--preset--color--burnt-rust);
	color: var(--wp--preset--color--soft-white);
	transform: translateY(-1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--burnt-rust);
	outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"] {
	background: var(--wp--preset--color--soft-white);
	border: 1px solid var(--wp--preset--color--concrete-gray);
	border-radius: 2px;
	color: var(--wp--preset--color--obsidian-black);
	font: inherit;
	min-height: 2.75rem;
	padding: 0.72rem 0.85rem;
}

select {
	background-color: var(--wp--preset--color--soft-white);
}

label,
.wc-block-components-text-input label,
.wc-block-components-checkbox label,
.wc-block-components-radio-control__label {
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-product-collection {
	margin-top: var(--wp--preset--spacing--30);
}

/* Product grid cards: equal height with price + button aligned to the bottom */
.wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Push the price (and the button after it) to the bottom of every card so they
   line up across the row regardless of how many lines the title wraps to. */
.wc-block-product-template > li .wp-block-woocommerce-product-price {
	margin-top: auto;
}

/* Stack the product grid into a single column on phones */
@media (max-width: 600px) {
	.wc-block-product-template__responsive {
		grid-template-columns: 1fr !important;
	}

	/* Each card becomes image-left (40%) / text-right (60%), matching the
	   single-product page. Grid lets the image span all rows while the
	   unwrapped title/price/button auto-flow into the second column. */
	.wc-block-product-template > li {
		display: grid;
		grid-template-columns: 40% 1fr;
		column-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	.wc-block-product-template > li > .wp-block-woocommerce-product-image {
		/* span every text row so the image fills column 1; `1 / -1` would
		   collapse to a single row (no explicit rows defined) and shove the
		   price/button below the image instead of beside it. */
		grid-column: 1;
		grid-row: 1 / span 99;
		align-self: start;
	}

	/* title / price / button stack in the right column, left-aligned */
	.wc-block-product-template > li > :not(.wp-block-woocommerce-product-image) {
		grid-column: 2;
		text-align: left;
	}

	/* the add-to-cart button is a flex column centred by WooCommerce inline CSS
	   (align-items:center); pull it to the left to match the title/price. */
	.wc-block-product-template > li > .wp-block-woocommerce-product-button {
		align-items: flex-start;
	}

	/* cancel the desktop "push price to the bottom" so text groups at the top */
	.wc-block-product-template > li .wp-block-woocommerce-product-price {
		margin-top: 0;
	}
}

.wp-block-woocommerce-product-image,
.wc-block-components-product-image,
.woocommerce-product-gallery {
	background: var(--wp--preset--color--sand-stone);
	border-radius: 2px;
	overflow: hidden;
}

.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img,
.woocommerce-product-gallery img {
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-meta,
.product_meta {
	font-family: var(--wp--preset--font-family--sora);
	letter-spacing: 0;
}

.wp-block-woocommerce-product-collection .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.wp-block-woocommerce-product-price,
.wc-block-components-product-price,
.price {
	color: var(--wp--preset--color--graphite);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
}

.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.onsale {
	background: var(--wp--preset--color--burnt-rust);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--soft-white);
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.35rem 0.5rem;
	text-transform: uppercase;
}

.wp-block-woocommerce-product-meta {
	border-block: 1px solid var(--wp--preset--color--concrete-gray);
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
	padding-block: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-product-details {
	border-top: 1px solid var(--wp--preset--color--concrete-gray);
	padding-top: var(--wp--preset--spacing--40);
}

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--soft-white);
	border: 1px solid var(--wp--preset--color--concrete-gray);
	border-left: 3px solid var(--wp--preset--color--burnt-rust);
	border-radius: 2px;
	color: var(--wp--preset--color--obsidian-black);
}

.wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--wp--preset--color--obsidian-black);
}

.wc-block-cart__submit-container,
.wc-block-checkout__actions_row,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border-color: var(--wp--preset--color--concrete-gray);
}

.wc-block-components-order-summary,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background: rgba(216, 208, 196, 0.24);
	border-radius: 2px;
}

.wp-block-query-pagination {
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	border: 1px solid var(--wp--preset--color--concrete-gray);
	border-radius: 2px;
	color: var(--wp--preset--color--obsidian-black);
	padding: 0.45rem 0.7rem;
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--obsidian-black);
	border-color: var(--wp--preset--color--obsidian-black);
	color: var(--wp--preset--color--soft-white);
}

.taylans-site-footer {
	background: var(--wp--preset--color--obsidian-black);
	color: var(--wp--preset--color--soft-white);
	margin-top: var(--wp--preset--spacing--50);
}

.taylans-site-footer a,
.taylans-site-footer .wp-block-site-title a,
.taylans-site-footer p {
	color: var(--wp--preset--color--soft-white);
}

.taylans-site-footer p {
	margin: 0;
}

.taylans-site-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}

.taylans-site-footer a:hover,
.taylans-site-footer a:focus-visible {
	color: var(--wp--preset--color--sand-stone);
}

.taylans-footer-cols {
	gap: var(--wp--preset--spacing--40);
}

.taylans-footer-heading {
	color: var(--wp--preset--color--sand-stone);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.taylans-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.taylans-footer-links li {
	margin: 0 0 0.55rem;
}

.taylans-footer-links a {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.taylans-pay-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--30);
}

.taylans-pay-badges span {
	border: 1px solid rgba(245, 244, 239, 0.28);
	border-radius: 2px;
	color: var(--wp--preset--color--sand-stone);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.55rem;
	text-transform: uppercase;
}

.taylans-site-footer .taylans-no-tracking {
	color: var(--wp--preset--color--concrete-gray);
}

.taylans-footer-rule {
	border: 0;
	border-top: 1px solid rgba(245, 244, 239, 0.16);
}

.taylans-footer-bottom {
	gap: var(--wp--preset--spacing--20);
}

.taylans-site-footer .taylans-footer-bottom p {
	color: var(--wp--preset--color--concrete-gray);
}

/* ---------- Homepage ---------- */

/* Let the hero sit flush under the header; patterns manage their own spacing */
main.taylans-front-main {
	padding-block: 0;
}

main.taylans-front-main > .taylans-usp-bar:last-child {
	margin-bottom: 0;
}

/* Hero */
.taylans-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Category split cards */
.taylans-category-card {
	overflow: hidden;
	border-radius: 2px;
}

.taylans-category-card .wp-block-cover__image-background {
	transition: transform 500ms ease;
}

.taylans-category-card:hover .wp-block-cover__image-background,
.taylans-category-card:focus-within .wp-block-cover__image-background {
	transform: scale(1.05);
}

.taylans-category-card a {
	color: var(--wp--preset--color--soft-white);
	text-decoration: none;
}

.taylans-category-card a:hover,
.taylans-category-card a:focus-visible {
	color: var(--wp--preset--color--sand-stone);
}

.taylans-category-card .wp-block-cover__inner-container > * {
	margin-block: 0.15rem;
}

/* USP / trust bar */
.taylans-usp-icon {
	color: var(--wp--preset--color--obsidian-black);
	display: inline-flex;
	margin-bottom: 0.35rem;
}

.taylans-usp-bar h3 {
	margin: 0;
}

.taylans-usp-grid {
	text-align: center;
}

/* Brand story quote card — fill the column height, content vertically centered */
.taylans-brand-quote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

@media (max-width: 781px) {
	/* USP bar: 2×2 grid instead of a tall single column */
	.taylans-usp-grid.wp-block-columns {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
	}

	.taylans-usp-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - (var(--wp--preset--spacing--40) / 2)) !important;
	}
}

@media (max-width: 720px) {
	.taylans-site-footer .alignwide {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Mobile header: hamburger (left) · logo (center) · actions (right) */
	.taylans-site-header .taylans-site-header__inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		justify-content: space-between;
	}

	.taylans-primary-nav {
		flex: 0 0 auto;
		order: 1;
	}

	.taylans-brand-lockup {
		flex: 0 0 auto;
		order: 2;
	}

	.taylans-header-actions {
		flex: 0 0 auto;
		gap: 0.35rem;
		order: 3;
	}

	main.wp-block-group {
		padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}
}