/**
 * aromuli — WooCommerce styling. Every Woo surface follows the design system:
 * pill buttons in lime, 26px cards with the e6ecd7 hairline, paper input wells
 * with the lime focus ring, Ubuntu Condensed for names and prices.
 * Uses palette custom properties from theme.json presets.
 */

/* =========================================================
   Buttons — lime pills (proceed to checkout, place order,
   apply coupon, add to cart). Ghost/link variants stay quiet.
   ========================================================= */
.wc-block-components-button:not(.is-link),
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--lime);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 2px solid var(--wp--preset--color--lime);
	border-radius: 999px;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	background-color: var(--wp--preset--color--leaf);
	border-color: var(--wp--preset--color--leaf);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Text-style buttons (e.g. «Gutschein hinzufügen») read as quiet links. */
.wc-block-components-button.is-link,
.wc-block-components-totals-coupon-link {
	color: var(--wp--preset--color--leaf-deep);
	text-decoration: none;
}

.wc-block-components-button.is-link:hover,
.wc-block-components-totals-coupon-link:hover {
	color: var(--wp--preset--color--leaf);
}

/* =========================================================
   Notices — mist/lime for success, warm tangerine for errors.
   ========================================================= */
.wc-block-components-notice-banner.is-success {
	background: var(--wp--preset--color--mist);
	border-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-notice-banner.is-error {
	background: #fdf3ec;
	border-color: var(--wp--preset--color--tangerine);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-notice-banner {
	border-radius: 14px;
}

/* =========================================================
   Breadcrumbs (single product) — small, undecorated links.
   ========================================================= */
.am-crumbs .woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-size: 14.5px;
	color: var(--wp--preset--color--body);
}

.am-crumbs .woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
	color: var(--wp--preset--color--leaf-deep);
	text-decoration: none;
}

.am-crumbs .woocommerce-breadcrumb a:hover,
.wp-block-woocommerce-breadcrumbs a:hover {
	color: var(--wp--preset--color--leaf);
}

/* =========================================================
   Single product — gallery plate with drift garnish
   ========================================================= */
.am-product__gallery {
	position: relative;
}

/* The gallery block wrapper anchors the drift garnish and goes sticky like
   the design (.gallery-inner) on wide screens. flow-root: WooCommerce's
   classic layout floats the gallery (div.product div.images), which would
   collapse this wrapper to height 0 — the sticky box then travels the whole
   column and drags the image over the «Das könnte dir auch gefallen» band. */
.am-product__gallery .wp-block-woocommerce-product-image-gallery {
	position: relative;
	display: flow-root;
}

@media (min-width: 821px) {
	.am-product__gallery .wp-block-woocommerce-product-image-gallery {
		position: sticky;
		top: 96px;
	}
}

.am-product__gallery .woocommerce-product-gallery {
	border-radius: var(--am-radius);
	overflow: hidden;
	box-shadow: var(--am-shadow);
	background: var(--am-imgbox);
}

/* Lemon top-right, leaf bottom-left — the design's drift garnish. Static here
   (the scroll parallax lives on the plugin's decorated sections). */
.am-product__gallery .wp-block-woocommerce-product-image-gallery::before,
.am-product__gallery .wp-block-woocommerce-product-image-gallery::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
}

.am-product__gallery .wp-block-woocommerce-product-image-gallery::before {
	width: 90px;
	height: 90px;
	right: -24px;
	top: -26px;
	background-image: url(../img/lemon.png);
	rotate: 14deg;
}

.am-product__gallery .wp-block-woocommerce-product-image-gallery::after {
	width: 110px;
	height: 139px;
	left: -30px;
	bottom: -22px;
	background-image: url(../img/leaf-2.png);
	rotate: -18deg;
}

/* Zoom trigger as a quiet paper pill. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
}

/* Thumbnails, if a product has several photos. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 10px 10px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: calc(25% - 6px);
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 1;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	transition: border-color 0.15s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--wp--preset--color--lime);
}

/* =========================================================
   Single product — info column
   ========================================================= */
.am-product__info .wp-block-post-title {
	font-size: clamp(42px, 5.5vw, 68px);
	letter-spacing: 0.015em;
	margin: 0;
}

/* Short description as the bold subtitle line. */
.am-product__subtitle {
	font-size: clamp(17px, 1.5vw, 20px);
	margin-top: 14px;
}

.am-product__subtitle p {
	margin: 0;
}

/* Price box — the mist pill card with price, quantity and button. */
.am-price-box {
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--am-radius);
	padding: 22px 26px;
	margin-top: 28px;
	gap: 18px;
}

.am-price-box .wc-block-components-product-price,
.am-price-box .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 38px;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}

.am-price-box .wp-block-woocommerce-add-to-cart-form {
	margin: 0;
}

/* Classic form.cart markup inside the Add-to-Cart-Form block. */
.am-price-box form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

/* Quantity as the design's pill stepper / well. */
.am-price-box form.cart div.quantity,
.am-price-box .wc-block-components-quantity-selector {
	display: flex;
	align-items: center;
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	overflow: hidden;
	margin: 0;
	float: none;
}

.am-price-box form.cart div.quantity input.qty,
.am-price-box .wc-block-components-quantity-selector input {
	width: 64px;
	height: 46px;
	border: 0;
	text-align: center;
	background: transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	color: var(--wp--preset--color--ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.am-price-box form.cart div.quantity input.qty::-webkit-outer-spin-button,
.am-price-box form.cart div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.am-price-box .wc-block-components-quantity-selector::after {
	border: none;
}

.am-price-box .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	width: 44px;
	height: 46px;
	opacity: 1;
}

.am-price-box .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
}

/* Add-to-cart button — the lime pill. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.am-price-box form.cart .button {
	background-color: var(--wp--preset--color--lime);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 13px 30px;
	border: 2px solid var(--wp--preset--color--lime);
	border-radius: 999px;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.am-price-box form.cart .button:hover {
	background-color: var(--wp--preset--color--leaf);
	border-color: var(--wp--preset--color--leaf);
	color: #ffffff;
	transform: translateY(-2px);
}

/* Shipping note with the lime dot (design .shipnote). */
.am-shipnote {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 15px;
}

.am-shipnote::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	flex: none;
}

/* Description flow under the price box. */
.am-product__desc {
	margin-top: 30px;
}

/* =========================================================
   Generic Woo product cards (product-collection, cross-sells)
   — matched to the plugin's .am-prod-card look.
   ========================================================= */
.wp-block-woocommerce-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--am-radius);
	overflow: hidden;
	box-shadow: var(--am-shadow-soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-woocommerce-product-template .wc-block-product:hover {
	transform: translateY(-6px);
	box-shadow: var(--am-shadow);
}

.wp-block-woocommerce-product-template .wc-block-components-product-image {
	margin: 0 0 10px;
	background: var(--am-imgbox);
}

.wp-block-woocommerce-product-template .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: scale 0.4s ease;
}

.wp-block-woocommerce-product-template .wc-block-product:hover .wc-block-components-product-image img {
	scale: 1.05;
}

.wp-block-woocommerce-product-template .wp-block-post-title {
	margin: 0 24px;
	font-size: 24px;
	letter-spacing: 0.03em;
	line-height: 1.15;
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wp-block-woocommerce-product-template .wc-block-components-product-price {
	margin: 4px 24px 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	color: var(--wp--preset--color--ink);
}

/* =========================================================
   Cart & checkout — paper wells, hairlines, white 26px cards
   ========================================================= */

/* Form fields: paper wells with the design's 14px radius + lime focus. */
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.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-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-totals-coupon__input input {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
}

.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-totals-coupon__input input:focus {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 3px rgba(163, 207, 68, 0.25);
	outline: none;
}

/* Select wells match the inputs. */
.wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--wp--preset--color--paper);
	border-radius: 14px;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
}

.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 3px rgba(163, 207, 68, 0.25);
}

/* Floating labels + helper text. */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-blocks-components-select__label,
.wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--body);
	font-family: var(--wp--preset--font-family--body);
}

/* Newer WooCommerce field components read these custom properties. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-form-border-color: var(--wp--preset--color--line);
	--wc-form-border-radius: 14px;
}

/* Checkout step titles in the condensed uppercase voice. */
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Checkout form + totals sidebar as white rounded cards. */
.wc-block-checkout__main .wc-block-checkout__form,
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-checkout-totals-block {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--am-radius);
	box-shadow: var(--am-shadow-soft);
	padding: clamp(18px, 3vw, 30px);
}

/* Grand total in condensed ink. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	color: var(--wp--preset--color--ink);
}

/* --- Cart line items --- */
.wc-block-cart-items th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 13.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--leaf-deep);
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 22px;
	line-height: 1.15;
}

.wc-block-cart__main table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	color: var(--wp--preset--color--ink);
}

/* Thumbnails on the warm image ground with soft corners. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	background: var(--am-imgbox);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
}

/* Quantity stepper as an ink-keyline pill. */
.wc-block-components-quantity-selector {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 999px;
}

.wc-block-components-quantity-selector::after {
	border: none;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--ink);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
	color: var(--wp--preset--color--leaf-deep);
}

/* «Entfernen» link: faint, tangerine on hover. */
.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--tangerine);
}

/* --- Radios & checkboxes (shipping, payment, terms) --- */
.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input[type="checkbox"] {
	background-color: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--line);
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--leaf);
}

.wc-block-components-radio-control__input:checked::before {
	background-color: var(--wp--preset--color--leaf);
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--lime);
	border-color: var(--wp--preset--color--lime);
}

.wc-block-components-checkbox__mark {
	color: #ffffff;
	fill: #ffffff;
}

/* Readable option texts (Versandoptionen, Zahlung). */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label,
.wp-block-woocommerce-cart .wc-block-components-radio-control__label {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label,
.wp-block-woocommerce-cart .wc-block-components-radio-control__secondary-label {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__description,
.wp-block-woocommerce-cart .wc-block-components-radio-control__description {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox label,
.wp-block-woocommerce-cart .wc-block-components-checkbox label {
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Warm up Woo's cool-gray hairlines wherever they appear. */
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary-item,
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart-items thead th,
.wc-block-components-panel,
.wc-block-components-shipping-rates-control__package,
.wc-block-components-radio-control__option,
.wc-block-components-checkout-step,
.wc-block-checkout__sidebar .wc-block-components-title {
	border-color: var(--wp--preset--color--line);
}

/* =========================================================
   Mini-cart drawer
   ========================================================= */
.wc-block-components-drawer {
	background: var(--wp--preset--color--paper);
}

.wc-block-components-drawer__close.wc-block-components-button:not(.is-link) {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

.wc-block-components-drawer__close.wc-block-components-button:not(.is-link):hover,
.wc-block-components-drawer__close.wc-block-components-button:not(.is-link):focus-visible {
	background: transparent;
	color: var(--wp--preset--color--leaf-deep);
	transform: none;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 18px;
	line-height: 1.2;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	color: var(--wp--preset--color--ink);
}

/* «Warenkorb anzeigen» as the ghost pill next to the lime «Zur Kasse». */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:focus-visible {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #ffffff;
}

/* =========================================================
   My Account — quiet tabs in the design voice.
   ========================================================= */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: 9px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	transition: background 0.2s, color 0.2s;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--leaf-deep);
}

/* Classic Woo form rows (login, addresses) follow the paper wells. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 13px 16px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 3px rgba(163, 207, 68, 0.25);
}

.woocommerce form .form-row label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Classic notices (my account, coupons). */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--lime);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--tangerine);
}