/*
Theme Name: ella fotografie
Theme URI: https://shop.ellafotografie.ch
Author: b prod
Author URI: https://bprod.ch
Description: Block-Theme für den Shop von ella fotografie (CI von ellafotografie.ch).
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ella
*/

/* ---------- Grundlagen ---------- */

:root {
	--ella-rahmen: var(--wp--custom--rahmen, #E3D3C7);
	--ella-radius: var(--wp--custom--radius--klein, 6px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
strong, b { font-weight: 500; }
::selection { background: var(--wp--preset--color--beige); color: var(--wp--preset--color--braun); }

/* Ellas Stil: Menüs, Labels und Knöpfe klein geschrieben */
.wp-block-navigation,
.wp-element-button,
.wp-block-button__link,
.ella-klein {
	text-transform: lowercase;
}

.ella-kicker {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.25em;
	text-transform: lowercase;
	color: var(--wp--preset--color--apricot);
}

/* ---------- Header ---------- */

.ella-header .wp-block-site-logo img { width: 76px; }
.ella-header .wp-block-navigation a { text-decoration: none; }
.ella-header .wp-block-navigation a:hover { color: var(--wp--preset--color--beige); }
.ella-header .wp-block-navigation .current-menu-item > a,
.ella-header .wp-block-navigation a[aria-current="page"] {
	box-shadow: inset 0 -1px 0 currentColor;
}
.ella-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--apricot);
	color: var(--wp--preset--color--creme);
}
.ella-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 2rem;
}
.ella-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--josefin-slab);
	font-size: 1.6rem;
	gap: 1.1rem;
}
.ella-header .wc-block-mini-cart__button { color: inherit; }
.ella-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--braun);
	color: var(--wp--preset--color--creme);
}

/* ---------- Einstieg (Hero) ---------- */

/* Verlauf von links, damit der Text neben dem Album lesbar bleibt */
.ella-hero .wp-block-cover__background {
	background: linear-gradient(90deg, rgba(83, 62, 49, 0.78) 0%, rgba(83, 62, 49, 0.5) 38%, rgba(83, 62, 49, 0) 70%) !important;
	opacity: 1 !important;
}
.ella-hero .wp-block-cover__inner-container > .wp-block-group { max-width: 480px; margin-left: 0 !important; }
@media (max-width: 781px) {
	.ella-hero .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(83, 62, 49, 0.85) 0%, rgba(83, 62, 49, 0.55) 55%, rgba(83, 62, 49, 0.1) 100%) !important;
	}
}

/* ---------- Bänder über die ganze Breite ---------- */

.ella-band { padding-left: 0 !important; padding-right: 0 !important; }
.ella-band .wp-block-media-text__media { min-height: 420px; }

/* ---------- Coming soon ---------- */

.ella-bald-text { max-width: 520px; }

/* ---------- Footer ---------- */

.ella-footer a { text-decoration: none; }
.ella-footer a:hover { color: var(--wp--preset--color--apricot); }
.ella-footer .ella-footer-links p { margin: 0.2rem 0; }

/* ---------- Bilder und Kacheln ---------- */

.ella-kachel { position: relative; overflow: hidden; border-radius: var(--ella-radius); }
.ella-kachel img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform 0.6s ease; }
.ella-kachel:hover img { transform: scale(1.03); }
.ella-kachel .wp-block-image { margin: 0; }
.ella-kachel h3 { margin-top: 0.8rem; }
.ella-kachel h3 a { text-decoration: none; }
.ella-kachel h3 a::after { content: ""; position: absolute; inset: 0; } /* ganze Kachel klickbar */

@media (prefers-reduced-motion: reduce) {
	.ella-kachel img { transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Preis-«Pille» wie in der Broschüre ---------- */

.ella-pille,
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	display: inline-block;
	background: var(--wp--preset--color--braun);
	color: var(--wp--preset--color--creme);
	border-radius: 999px;
	padding: 0.45em 1.3em;
	font-family: var(--wp--preset--font-family--josefin-slab);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.3;
}
.single-product .wp-block-woocommerce-product-price del { opacity: 0.7; }
.single-product .wp-block-woocommerce-product-price ins { text-decoration: none; }

/* ---------- Produktraster ---------- */

.wc-block-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ella-radius);
}
.wc-block-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--josefin-slab);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}
.wc-block-product-template .wp-block-post-title a { text-decoration: none; }
.wc-block-product-template .wc-block-components-product-price {
	color: var(--wp--preset--color--grau);
}

/* ---------- WooCommerce: Knöpfe und Formulare ---------- */

.wc-block-components-button:not(.is-link),
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.single_add_to_cart_button {
	background: var(--wp--preset--color--braun) !important;
	color: var(--wp--preset--color--creme) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--jost) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	padding: 0.8em 1.8em !important;
	transition: background-color 0.2s ease;
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce .button:hover,
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--apricot) !important;
	color: var(--wp--preset--color--weiss) !important;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce .quantity .qty,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select select,
.wc-block-components-combobox .components-combobox-control__input {
	border: 1px solid var(--ella-rahmen) !important;
	border-radius: var(--ella-radius) !important;
	background: var(--wp--preset--color--weiss) !important;
	font-family: var(--wp--preset--font-family--jost) !important;
	font-weight: 400;
	color: var(--wp--preset--color--braun);
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--apricot) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--apricot) !important;
	outline: none;
}

/* Formulare in Warenkorb und Kasse etwas kräftiger lesbar */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { font-weight: 400; }
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--josefin-slab) !important;
	font-weight: 400 !important;
	text-transform: lowercase !important;
	letter-spacing: 0.02em;
}

/* Produktseite: Variantenauswahl */
.single-product table.variations { border: 0; margin-bottom: 1rem; }
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr { display: block; width: 100%; }
.single-product table.variations th,
.single-product table.variations td { border: 0; padding: 0.2rem 0; display: block; text-align: left; width: 100%; }
.single-product table.variations tr + tr { margin-top: 0.9rem; }
.single-product table.variations label {
	font-family: var(--wp--preset--font-family--josefin-slab);
	font-size: 1.15rem;
	font-weight: 300;
	text-transform: lowercase;
}
.single-product table.variations select {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--ella-rahmen);
	border-radius: var(--ella-radius);
	background-color: var(--wp--preset--color--weiss);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 400;
	color: var(--wp--preset--color--braun);
}
.single-product .woocommerce-variation-price { margin: 0.5rem 0 0.25rem; font-size: 1.1rem; }
.single-product .reset_variations { font-size: var(--wp--preset--font-size--small); }
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.single-product form.cart.variations_form { display: block; }
.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.single-product .quantity .qty { width: 4.5rem; padding: 0.75em 0.5em; text-align: center; }
/* Die Überschrift «beschreibung» steht schon im Tab */
.woocommerce-Tabs-panel--description > h2:first-child { display: none; }

/* Produktseite: Galerie */
.single-product .woocommerce-product-gallery__image img,
.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: var(--ella-radius); }
.single-product .flex-control-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: 22%; }
.single-product .flex-control-thumbs img { border-radius: 4px; opacity: 0.7; cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

/* Tabs unter dem Produkt ruhiger */
.woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--ella-rahmen); }
.woocommerce-tabs ul.tabs li { display: inline-block; margin-right: 1.5rem; }
.woocommerce-tabs ul.tabs li a { text-decoration: none; text-transform: lowercase; padding-bottom: 0.4rem; display: inline-block; }
.woocommerce-tabs ul.tabs li.active a { box-shadow: inset 0 -2px 0 var(--wp--preset--color--apricot); }

/* Hinweise */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info {
	border-radius: var(--ella-radius);
	border-color: var(--wp--preset--color--beige) !important;
	background: var(--wp--preset--color--sand) !important;
	color: var(--wp--preset--color--braun) !important;
}

/* Info-Box (Lieferfrist usw.) */
.ella-info {
	border-left: 3px solid var(--wp--preset--color--apricot);
	background: var(--wp--preset--color--sand);
	border-radius: 0 var(--ella-radius) var(--ella-radius) 0;
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grau); text-transform: lowercase; }
.wp-block-woocommerce-breadcrumbs a { text-decoration: none; }

/* Kleine Bildschirme */
@media (max-width: 781px) {
	.ella-header .wp-block-site-logo img { width: 60px; }
	.ella-hero h1 { font-size: 2.4rem !important; }
}