/*
 * Shop: Produktliste (Archiv, Kategorien), Produktseite und Produkt-Raster.
 * Werte aus den Oxygen-Vorlagen „Archiv“ (752), „singel product template“ (753) und der Seite Shop (1759).
 * Grundstyles (Buttons, Formulare, Warenkorb, Kasse) stehen in woocommerce.css.
 * „:root“ vor .woocommerce-Selektoren: WooCommerce lädt seine eigenen, gleich spezifischen Styles später.
 */

/* ---------- Produkt-Raster (Archiv, verwandte Produkte, Block „Produkte“) ---------- */

:root .woocommerce ul.products[class*="columns-"] {
	display: flex;
	flex-wrap: wrap;
	margin: -10px -20px 20px;
}

:root .woocommerce ul.products[class*="columns-"]::before,
:root .woocommerce ul.products[class*="columns-"]::after {
	content: none;
}

:root .woocommerce ul.products[class*="columns-"] li.product {
	float: none;
	width: 25%;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
}

:root .woocommerce ul.products li.product a img {
	margin: 0 0 16px;
}

:root .woocommerce ul.products li.product a img {
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 50%;
}

:root .woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--wp--preset--color--black);
}

:root .woocommerce ul.products li.product .price,
:root .woocommerce ul.products li.product .price span {
	font-size: 30px;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

:root .woocommerce ul.products li.product .price del,
:root .woocommerce ul.products li.product .price del span {
	font-size: 16px;
	color: var(--wp--preset--color--grey);
}

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

:root .woocommerce ul.products li.product a.button {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

:root .woocommerce ul.products li.product a.button:hover {
	background: var(--wp--preset--color--gold);
}

:root .woocommerce ul.products li.product .onsale,
:root .woocommerce span.onsale {
	top: 32px;
	right: 32px;
	left: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--wp--preset--color--blue);
	font-size: 12px;
	line-height: 1.2;
}

/* ---------- Shop-Startseite: Sektionen 1440 px breit ---------- */

.nb-wide-sections .nb-inner {
	max-width: 1440px;
}

/* ---------- Produktliste (Archiv) ---------- */

.nb-shop-archive {
	max-width: 1440px;
	margin-inline: auto;
	padding: 75px 20px 0;
}

:root .nb-shop-archive .woocommerce-products-header__title,
:root .nb-shop-archive h1.page-title {
	margin: 0 0 7px;
	line-height: 1;
	font-size: var(--wp--preset--font-size--h-1);
	color: var(--wp--preset--color--gold);
}

.nb-shop-archive .term-description {
	font-size: 20px;
}

.nb-shop-archive .woocommerce-ordering select {
	padding: 8px 36px 8px 12px;
	border: 1px solid var(--wp--preset--color--gold);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 94% / 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--black);
	appearance: none;
	cursor: pointer;
}

:root .woocommerce .nb-shop-archive ul.products[class*="columns-"] li.product {
	padding-block: 50px;
}

:root .woocommerce .nb-shop-archive nav.woocommerce-pagination ul {
	border-color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-shop-archive nav.woocommerce-pagination ul li {
	border-color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-shop-archive nav.woocommerce-pagination ul li a {
	padding: 8px 12px;
	color: var(--wp--preset--color--grey);
}

:root .woocommerce .nb-shop-archive nav.woocommerce-pagination ul li a:hover {
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--black);
}

:root .woocommerce .nb-shop-archive nav.woocommerce-pagination ul li span.current {
	padding: 8px 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

/* ---------- Produktseite ---------- */

.nb-product {
	max-width: 1120px;
	box-sizing: border-box;
	margin-inline: auto;
	padding: 75px 20px;
}

:root .woocommerce .nb-product div.product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

:root .woocommerce .nb-product div.product div.images {
	float: none;
	width: 55%;
	margin-bottom: 30px;
}

:root .woocommerce .nb-product div.product div.summary {
	float: none;
	width: 45%;
	padding: 50px;
	box-sizing: border-box;
}

:root .woocommerce .nb-product div.product div.images .flex-viewport,
:root .woocommerce .nb-product div.product div.images .flex-control-thumbs li {
	border-radius: 50%;
}

:root .woocommerce .nb-product div.product div.images .flex-viewport {
	border-color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-product div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
}

:root .woocommerce .nb-product div.product div.images .flex-control-thumbs li {
	flex-shrink: 0;
	width: 23%;
	overflow: hidden;
}

:root .woocommerce .nb-product div.product div.images .flex-control-thumbs li img {
	opacity: 0.6;
}

:root .woocommerce .nb-product div.product div.images .flex-control-thumbs li img.flex-active,
:root .woocommerce .nb-product div.product div.images .flex-control-thumbs li:hover img {
	opacity: 1;
}

:root .woocommerce .nb-product .product_title {
	margin: 0;
	font-size: 40px;
	color: var(--wp--preset--color--grey);
	text-align: left;
}

:root .woocommerce .nb-product div.product p.price {
	margin: 50px 0 0;
}

:root .woocommerce .nb-product div.product p.price,
:root .woocommerce .nb-product div.product p.price .woocommerce-Price-amount {
	font-size: 30px;
	color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-product div.product p.price del,
:root .woocommerce .nb-product div.product p.price del .woocommerce-Price-amount {
	font-size: 16px;
	color: var(--wp--preset--color--grey);
}

:root .woocommerce .nb-product div.product form.cart {
	width: 100%;
	max-width: 360px;
	margin: 20px 0 0;
}

:root .woocommerce .nb-product p.stock.in-stock {
	display: none;
}

:root .woocommerce .nb-product div.product form.cart .single_add_to_cart_button.button {
	flex-grow: 1;
	background: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	letter-spacing: normal;
	text-transform: none;
}

:root .woocommerce .nb-product div.product form.cart .single_add_to_cart_button.button:hover {
	background: var(--wp--preset--color--gold);
}

/* Eigenschaften (Maße, Handgefertigt von) */
.nb-product .nb-product__attributes {
	width: 93%;
	margin-top: 27px;
}

:root .woocommerce .nb-product table.shop_attributes {
	margin-bottom: 0;
}

:root .woocommerce .nb-product table.shop_attributes th,
:root .woocommerce .nb-product table.shop_attributes td {
	border-color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-product table.shop_attributes td p {
	margin: 0;
	padding: 0;
	font-family: permanent-marker, cursive;
	font-size: 30px;
	font-style: normal;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-product .woocommerce-product-details__short-description {
	margin-top: 50px;
	text-align: left;
}

:root .woocommerce .nb-product .woocommerce-product-details__short-description p {
	font-size: 20px;
}

:root .woocommerce .nb-product .woocommerce-product-details__short-description > :first-child {
	margin-top: 0;
}

/* Beschreibung und verwandte Produkte unter dem Produkt */
.nb-product__description {
	width: 100%;
	margin-bottom: 30px;
}

.nb-product__description > h2 {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.nb-product__description > :last-child {
	margin-bottom: 0;
}

:root .woocommerce .nb-product .related {
	width: 100%;
	margin-top: 0;
}

:root .woocommerce .nb-product .related.products > h2 {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--gold);
	font-size: 30px;
	color: var(--wp--preset--color--gold);
}

:root .woocommerce .nb-product .related ul.products li.product {
	padding-top: 20px;
}

:root .woocommerce .nb-product .related ul.products li.product .woocommerce-loop-product__title {
	font-size: 24px;
}

:root .woocommerce .nb-product .related ul.products li.product .price,
:root .woocommerce .nb-product .related ul.products li.product .price span {
	font-size: 20px;
}

:root .woocommerce .nb-product .related ul.products li.product a.button {
	font-size: 16px;
}

/* ---------- Spalten je Breite ---------- */

@media (max-width: 1120px) {
	:root .woocommerce .nb-shop-archive ul.products[class*="columns-"] li.product {
		width: 33.33%;
	}

	.nb-product .nb-product__attributes {
		width: 100%;
	}
}

@media (max-width: 991px) {
	:root .woocommerce ul.products[class*="columns-"] li.product,
	:root .woocommerce .nb-shop-archive ul.products[class*="columns-"] li.product {
		width: 50%;
	}

	:root .woocommerce .nb-product .woocommerce-product-details__short-description {
		margin-top: 37px;
	}
}

@media (max-width: 767px) {
	:root .woocommerce .nb-shop-archive ul.products[class*="columns-"] li.product {
		width: 100%;
	}

	:root .woocommerce .nb-product div.product div.images,
	:root .woocommerce .nb-product div.product div.summary {
		width: 100%;
	}
}

@media (max-width: 479px) {
	:root .woocommerce ul.products[class*="columns-"] li.product {
		width: 100%;
	}

	:root .woocommerce .nb-product div.product div.summary {
		padding-inline: 0;
	}

	:root .woocommerce .nb-product .woocommerce-product-details__short-description p {
		font-size: 16px;
	}

	:root .woocommerce .nb-product table.shop_attributes td p {
		color: var(--wp--preset--color--black);
	}
}

/* ---------- Warenkorb, Kasse, Mein Konto: Abstand wie die Oxygen-Sektion (75 px) ---------- */

.woocommerce-cart .nb-main,
.woocommerce-checkout .nb-main,
.woocommerce-account .nb-main {
	padding-block: 75px;
}

.woocommerce-cart .nb-main .wp-block-post-content > *:first-child,
.woocommerce-checkout .nb-main .wp-block-post-content > *:first-child,
.woocommerce-account .nb-main .wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* ---------- Pillen-Buttons wie im übrigen Theme (style.css „Buttons“) ---------- */

/* :not(#nb) hebt die Spezifität über die vielen eckigen Button-Regeln aus woocommerce.css (Oxygen-Port). */
:root .woocommerce :is(a, button, input).button:not(#nb),
:root .woocommerce .cart .button:not(#nb),
:root .woocommerce a.added_to_cart:not(#nb),
:root .woocommerce #respond input#submit,
:root .woocommerce .widget_shopping_cart .buttons a:not(#nb),
:root .woocommerce button[type="submit"]:not(#nb) {
	border-radius: 999px;
	padding: 8px 24px; /* wie die übrigen Buttons (theme.json), nicht 16 px aus woocommerce.css */
	box-sizing: border-box; /* sonst rechnet min-height am Handy Innenabstand und Rand dazu */
	font-weight: 400; /* Buttons immer in Regular */
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--nb-ease), box-shadow 0.2s ease;
}

:root .woocommerce :is(a, button, input).button:not(:disabled):not(.disabled):hover,
:root .woocommerce .cart .button:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -8px rgb(54 66 130 / 55%);
}

:root .woocommerce :is(a, button, input).button:active,
:root .woocommerce .cart .button:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 0.05s;
}

/* woocommerce.css schaltet outline ab; Tastaturfokus braucht einen sichtbaren Ring */
:root .woocommerce :is(a, button, input).button:focus-visible,
:root .woocommerce .cart .button:focus-visible,
:root .woocommerce .quantity .qty:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

:root .woocommerce .quantity .qty {
	border-radius: 999px;
	padding-inline: 14px;
}

/* Handy: wie style.css, 44 px hoch und 16 px Schrift */
@media (max-width: 767px) {
	:root .woocommerce :is(a, button, input).button:not(#nb),
	:root .woocommerce .cart .button:not(#nb),
	:root .woocommerce button[type="submit"]:not(#nb) {
		min-height: 44px;
		padding: 6px 20px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root .woocommerce :is(a, button, input).button:hover,
	:root .woocommerce .cart .button:hover {
		transform: none;
	}
}

/* ---------- Schalter „Nur verfügbare Stücke“ ---------- */

.nb-available-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	float: right;
	margin: 0 0 1em 24px;
	padding: 6px 0;
	font-size: 16px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.nb-available-toggle__track {
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: #c4c4c4;
	transition: background-color 0.2s ease;
}

.nb-available-toggle__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	transition: transform 0.2s var(--nb-ease);
}

.nb-available-toggle.is-on .nb-available-toggle__track {
	background: var(--wp--preset--color--blue);
}

.nb-available-toggle.is-on .nb-available-toggle__track::after {
	transform: translateX(18px);
}

.nb-available-toggle:hover,
.nb-available-toggle:focus-visible {
	color: var(--wp--preset--color--blue);
}

.nb-available-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.nb-available-toggle {
		float: none;
		margin: 0 0 1em;
	}
}