/*
Theme Name: patentundpatronen
Theme URI:
Author: extravirgin
Author URI:
Description:
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentythree
Text Domain: patentundpatronen
Tags:
*/

:root {
	--wp--preset--line-height--custom-1: 60px;
	--wp--preset--line-height--custom-2: 66px;
	--wp--preset--line-height--custom-3: 1.5;
	--wp--preset--line-height--custom-4: 1.5;
	--wp--preset--line-height--custom-5: 1.1;
	/* The design's 435px logo only fits very large screens; scale down to the
	   mobile 220px so more of the page is above the fold on mid-size viewports. */
	--pp-logo-width: clamp(220px, 25vw, 435px);
	/* Matches the WooCommerce stepper button default (+/- next to the qty). */
	--pp-opacity-muted: 0.6;
}

a {
	text-decoration: none !important;
}

/* Global link hover: purple links turn black, black links turn purple.
   Gray (breadcrumb) and white (footer) links keep their color —
   their block-level colors outrank the low-specificity global hover.
   Default (unstyled, purple) links get their black hover from
   theme.json elements.link; the rules here cover links whose color
   comes from block settings or higher-specificity shop CSS. */
.has-contrast-color a:hover,
.has-custom-p-p-black-color a:hover {
	color: var(--wp--preset--color--custom-p-p-purple);
}

/* After the black→purple rules so purple wins inside nested blocks
   (e.g. purple nav paragraphs inside the contrast header group). */
.has-custom-p-p-purple-color a:hover {
	color: var(--wp--preset--color--custom-p-p-black);
}

/* Brackets around links like "(Home)" are paragraph text, not part of
   the <a>, so recolor the paragraph while its link is hovered — but only
   when the link is the paragraph's sole element, otherwise sibling text
   (e.g. the footer's "Ruf uns an" labels) would flip along.
   !important because the preset color classes carry !important too. */
p.has-contrast-color:has(> a:only-child:hover),
p.has-custom-p-p-black-color:has(> a:only-child:hover) {
	color: var(--wp--preset--color--custom-p-p-purple) !important;
}

p.has-custom-p-p-purple-color:has(> a:only-child:hover) {
	color: var(--wp--preset--color--custom-p-p-black) !important;
}

/* Content links with a manually set (purple) link color outrank the
   global hover, so re-apply it; scoped to post content so header and
   footer groups with their own link colors (white, contrast) stay
   untouched. */
.wp-block-post-content .has-link-color a:hover {
	color: var(--wp--preset--color--custom-p-p-black);
}

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

body {
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
}

input,
button,
select {
	font-family: inherit;
}

.woocommerce-page main,
.woocommerce-page .shop-main {
	max-width: var(--wp--style--global--content-size) !important;
	padding: 0 40px;
	margin-left: auto;
	margin-right: auto;
}

.has-custom-1-font-size {
	line-height: var(--wp--preset--line-height--custom-1);
	text-transform: uppercase;
}

.has-custom-2-font-size {
	line-height: var(--wp--preset--line-height--custom-2);
}

.has-custom-3-font-size {
	line-height: var(--wp--preset--line-height--custom-3);
}

.has-custom-4-font-size {
  letter-spacing: 0;
  line-height: var(--wp--preset--line-height--custom-4);
}

.has-custom-5-font-size {
  line-height: var(--wp--preset--line-height--custom-5);
}

body {
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
}

.page-template-default:not(.home) .main-content,
.woocommerce-page main,
.woocommerce-page .shop-main {
	margin-top: 120px !important;
}

/* main */
.main-content {
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 0 40px !important;
}
/* !main */

/* header */
header {
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	padding: 40px !important;
}

header > div {
	align-items: start !important;
}

header .custom-logo {
	width: var(--pp-logo-width);
}

header .wp-block-navigation__container {
	column-gap: 74px;
}

header .wc-block-mini-cart__button {
	padding: 0;
}

header .wc-block-mini-cart__button svg {
	display: none;
}

header .wc-block-mini-cart__badge {
	position: static;
	margin: 0;
	height: auto;
	color: var(--wp--preset--color--custom-p-p-purple) !important;
	background-color: transparent !important;
	transform: none;
	font-size: inherit;
	line-height: var(--wp--preset--line-height--custom-4);
	font-weight: inherit;
	padding: 0;
	min-width: 0;
}

/* !important to outrank the !important base color above. */
header .wc-block-mini-cart__button:hover .wc-block-mini-cart__badge {
	color: var(--wp--preset--color--custom-p-p-black) !important;
}

header .wc-block-mini-cart__badge::after {
	content: ')'
}

header .wc-block-mini-cart__badge::before {
	content: '('
}

header .nav-block p,
header .nav-block a {
	font-size: var(--wp--preset--font-size--custom-4) !important;
	letter-spacing: 0;
  line-height: var(--wp--preset--line-height--custom-4);
	text-decoration: none;
}

header .nav-block > .wp-block-group {
	column-gap: 90px;
}
/* !header */

/* footer */
footer {
	margin-top: 200px;
}

footer > div {
	padding: 40px !important;
}

footer .footer-logo {
 margin-bottom: 110px;
}

footer a {
	font-size: inherit;
}

.footer-opening-hours {
  max-width: 587px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-opening-hours > .wp-block-group {
  margin: 0 auto !important;
	max-width: 380px;
	width: 100%;
}

.footer-opening-hours > .wp-block-group > * {
	margin-top: 0;
}

.footer-opening-hours > .wp-block-group > .wp-block-group {
  align-items: start;
}
/* !footer */

/* home */
.home-images {
	margin-left: -40px !important;
	margin-right: -40px !important;
	margin-bottom: 50px;
}

.home-text {
	margin: 200px 0 160px;
}

.home-text a {
	font-size: inherit;
	text-decoration: none;
	color: var(--wp--preset--color--custom-p-p-purple);
}

/* The explicit link color above outranks the theme.json element hover —
   restore the global purple→black hover. */
.home-text a:hover {
	color: var(--wp--preset--color--custom-p-p-black);
}
/* !home */

/* product card */
/* The one grid + card for every product listing: the shop/brand/search/
   attribute collections and the homepage showcase all render
   patent-und-patronen/product-card (inc/product-card.php).
   The ul selector outranks WooCommerce's
   .wc-block-product-template.is-flex-container flex layout; the doubled
   class covers grids outside a collection (showcase). */
ul.pp-product-grid.wc-block-product-template,
.pp-product-grid.pp-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: min(4.95vw, 86px);
	row-gap: 60px;
}

/* Neutralize the collection's flex-layout width on the <li> items. */
.pp-product-grid > .wc-block-product {
	width: 100% !important;
	max-width: none;
	margin: 0;
}

/* Grid rows equalize card heights; the flex column pins the meta row
   (price + button) to the bottom edge of every card in the row. */
.pp-product-card {
	max-width: 348px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pp-product-card .wp-block-post-title {
	margin: 0 0 5px;
}

.pp-product-card .wc-block-components-product-image__inner-container {
	display: none;
}

.pp-product-card__meta {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 12px;
	margin-top: auto;
}

/* The VAT note stays on the PDP; the card shows the bare price. */
.pp-product-card .woocommerce-price-suffix {
	display: none;
}

/* Never wrap the button label; centered as a fallback if a long
   translation wraps anyway. */
.pp-product-card .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
	overflow: visible;
	white-space: nowrap;
	text-align: center;
}

/* Same bracket treatment as the PDP add-to-cart CTA. */
.pp-product-card .wc-block-components-product-button__button::before {
	content: '(';
}

.pp-product-card .wc-block-components-product-button__button::after {
	content: ')';
}

/* Card hover: the image zooms out slightly, and the button label flips to
   the global black hover color (the preset text-color class carries
   !important). The selector covers both the AJAX <button> and the
   "(Details)" link. */
.pp-product-card .wc-block-components-product-image a {
	display: block;
	overflow: hidden;
}

/* Square frame with the full photo fitted in — the thumbnails are
   generated uncropped (WooCommerce thumbnail cropping: uncropped), so
   nothing gets cut off; near-square studio shots fill the frame.
   !important beats the block's inline style="object-fit:cover". */
.pp-product-card .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	transition: transform 0.3s ease;
}

.pp-product-card:hover .wc-block-components-product-image img {
	transform: scale(0.95);
}

.pp-product-card:hover .wc-block-components-product-button__button {
	color: var(--wp--preset--color--custom-p-p-black) !important;
}

@media (prefers-reduced-motion: reduce) {
	.pp-product-card .wc-block-components-product-image img {
		transition: none;
	}

	.pp-product-card:hover .wc-block-components-product-image img {
		transform: none;
	}
}
/* !product card */

/* product showcase */
.product-showcase__footer {
	text-align: center;
	margin-top: 92px;
}

.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.product-showcase__heading {
	margin-bottom: 60px;
}

/* No own link color here: showcase links inherit the global link style
   from theme.json (purple, hover black), incl. the CTA. */
/* !product showcase */

/* logos group */
.logos-group {
	column-gap: 173px;
	row-gap: 80px;
	margin-top: 86px !important;
}

.brand-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
}

.brand-list__link {
	text-decoration: none;
}
/* !logos group */

/* product detail */
.custom-product-variants {
	padding: 0;
}

.custom-product-variants .custom-product-variants__list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

.custom-product-variants .custom-product-variants__list .custom-product-variants__item {
	width: 56px;
	height: 56px;
	display: block;
	position: relative;
	border-radius: 50%;
}

/* Colour name tooltip on hover/focus; ::after is taken by the active ring. */
.custom-product-variants .custom-product-variants__list .custom-product-variants__item::before {
	content: attr(data-variant-name);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: 4px;
	background: var(--wp--preset--color--custom-p-p-black);
	color: var(--wp--preset--color--custom-p-p-white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 2;
}

.custom-product-variants .custom-product-variants__list .custom-product-variants__item:hover::before,
.custom-product-variants .custom-product-variants__list .custom-product-variants__item:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.custom-product-variants .custom-product-variants__list .custom-product-variants__item.is-active::after {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	border: 2px solid var(--wp--preset--color--custom-p-p-black);
	border-radius: 50%;
	pointer-events: none;
}

.custom-product-variants {
	margin-top: 60px;
}

.wp-block-woocommerce-product-specifications {
	overflow: visible;
	margin-top: 80px;
}

.wp-block-woocommerce-product-specifications table th,
.wp-block-woocommerce-product-specifications table td {
	border: none;
	padding: 0 0 10px;
	vertical-align: top;
	font-weight: inherit;
}

.wp-block-woocommerce-product-specifications table th p,
.wp-block-woocommerce-product-specifications table td p {
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-product-specifications table th {
	/* Wide enough for the longest label ("Maschenprobe Maschen") on one line. */
	width: 230px;
	padding-right: 20px;
}

.wp-block-post-excerpt {
	margin-top: 20px;
}

.wc-block-add-to-cart-form {
	margin-top: 80px;
}

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

.wc-block-components-quantity-selector > label {
	display: hidden;
}

div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper .wc-block-components-quantity-selector input[type=number].input-text.qty.text,
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus,
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus
{
	font-size: var(--wp--preset--font-size--custom-3);
	line-height: var(--wp--preset--line-height--custom-3);
	color: var(--wp--preset--color--custom-p-p-purple);
	padding: 0;
}

.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus:focus,
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus:focus {
	outline: none;
	box-shadow: none;
}

.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--minus,
.wc-block-components-quantity-selector>.wc-block-components-quantity-selector__button--plus {
	opacity: var(--pp-opacity-muted);
}

.woocommerce a.button,
.woocommerce button.single_add_to_cart_button,
.woocommerce button[name=add-to-cart],
.woocommerce button[type=submit]:not(.wp-block-search__button),
.woocommerce input[name=submit] {
	font-size: var(--wp--preset--font-size--custom-3);
	line-height: var(--wp--preset--line-height--custom-3);
	color: var(--wp--preset--color--custom-p-p-purple);
	padding: 0;
}

/* Transparent background keeps the inherited wp-element-button hover
   (contrast background + base text) from turning these text-style
   buttons into filled blocks. */
.woocommerce a.button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce button[name=add-to-cart]:hover,
.woocommerce button[type=submit]:not(.wp-block-search__button):hover,
.woocommerce input[name=submit]:hover {
	color: var(--wp--preset--color--custom-p-p-black);
	background: transparent;
}

.woocommerce-variation-add-to-cart {
	justify-content: center;
	grid-template-columns: auto;
	gap: 40px;
}

.product-detail-columns {
	column-gap: 150px;
}

/* Image column sticks while the longer info column scrolls; align-self
   is required because the columns default to stretch, which disables
   sticky. Below 1024px the columns stack, so no sticky there. */
@media (min-width: 1024px) {
	.product-detail-columns > .wp-block-column:first-child {
		position: sticky;
		top: 40px;
		align-self: flex-start;
	}
}

.woocommerce table.variations {
	display: flex;
	justify-content: center;
}

/* Partie row below the quantity/add-to-cart row. */
.woocommerce form.variations_form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap);
}

.woocommerce form.variations_form.cart .variations {
	order: 2;
	margin: 0;
}

.variations_form.cart .variations th,
.variations_form.cart .variations td {
	padding: 0;
	margin: 0;
	font-weight: inherit;
}

/* Pseudo-elements don't render on <select>, so the brackets around the
   value live on the cell; partie-select-fit.js shrinks the select to the
   selected option so the closing bracket sits right after the text. */
.variations_form.cart .variations .value::before,
.variations_form.cart .pp-partie-row .value::before {
	content: '(';
}

.variations_form.cart .variations .value::after,
.variations_form.cart .pp-partie-row .value::after {
	content: ')';
}

.variations_form.cart .woocommerce-variation {
	display: none !important;
}

/* The Partie row shows a proxy select that stays on "keine spezielle
   Partie" while WooCommerce's own select keeps the automatically chosen lot
   (js/partie-auto-switch.js). The whole WooCommerce row is hidden — its
   select still submits — and the proxy row takes its place. */
.variations_form.cart .variations.pp-partie-native-table {
	display: none;
}

.variations_form.cart .pp-partie-row {
	order: 2;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.product-variation-stock {
	margin: 0;
}

.product-variation-stock .stock {
	margin: 0;
	color: var(--wp--preset--color--custom-p-p-gray);
}

.title-price {
	align-items: start;
}

.title-price > div:nth-child(2) {
	text-align: right;
}

/* Flex keeps bracket + select + bracket on one line and swallows the
   whitespace text nodes around the select that would render as gaps
   inside the brackets. */
.variations_form.cart .pp-partie-row .value,
.variations_form.cart .variations .value {
	padding-left: 10px;
	display: inline-flex;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
	color: var(--wp--preset--color--custom-p-p-purple);
}

.variations_form.cart .pp-partie-row label,
.variations_form.cart .variations label {
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
	color: var(--wp--preset--color--custom-p-p-purple);
	opacity: var(--pp-opacity-muted);
}

.variations_form.cart .pp-partie-row select,
.variations_form.cart .variations select {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
	color: var(--wp--preset--color--custom-p-p-purple);
	appearance: none;
	margin: 0 !important;
	height: auto;
}

.variations_form.cart .pp-partie-row select:focus,
.variations_form.cart .variations select:focus {
	outline: none;
}

.woocommerce div.product a.reset_variations {
	display: none !important;
}

.woocommerce .wp-block-woocommerce-product-image-gallery {
	width: 100%;
	max-width: 100%;
}

.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce-breadcrumb {
	font-size: inherit;
	line-height: inherit;
}

.woocommerce-breadcrumb *:not(.current) {
	color: var(--wp--preset--color--custom-p-p-gray);
	text-decoration: none;
}

/* The way back to the overview sits on its own line above the trail, both
   left-aligned: the trail keeps the left edge of the content grid below it
   (right-aligned it would start 140px further left or right per product,
   depending on the title length), and the arrow points where the link goes.
   align-items keeps the link box as narrow as its text — stretched, its
   click target would span the whole content width. */
.pp-product-breadcrumbs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

/* WooCommerce gives the trail a 1em bottom margin. Unwrapped it collapsed
   into the group's 20px blockGap; as a flex item it would stack on top of
   it and push the product down by another 18px. */
.pp-product-breadcrumbs .woocommerce-breadcrumb {
	margin-bottom: 0;
}

/* Same bracketed-link treatment as the other CTAs of the shop (product
   card, add to cart) — brackets in CSS so the label stays a plain string.
   The arrow lives inside them: \2190 = left arrow, \A0 = no-break space. */
.pp-shop-return {
	color: var(--wp--preset--color--custom-p-p-black);
	text-decoration: none;
	white-space: nowrap;
}

.pp-shop-return::before {
	content: '(\2190\A0';
}

.pp-shop-return::after {
	content: ')';
}

.pp-shop-return:hover {
	color: var(--wp--preset--color--custom-p-p-purple);
}

.single-product .wp-block-post-title {
	margin-bottom: 10px;
}

/* POS names read "Group - Colour" (inc/product-title.php). The colour keeps
   its place inside the heading but sits on its own line in body text size —
   the same size as the stock line on the other side of the row. Colour comes
   from the heading (black), the presets shrink along on mobile. */
.single-product .wp-block-post-title .pp-product-color {
	display: block;
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
}

/* Same rhythm as the title on the left side of the row: the stock follows
   the price as closely as the colour follows the title (both are the second
   line of their column). The 10px below the pair sits on the column itself,
   not on the stock line — sold-out products render no stock line at all. */
.single-product .title-price .wp-block-woocommerce-product-price {
	margin-bottom: 0;
}

.single-product .title-price > div:nth-child(2) {
	margin-bottom: 10px;
}

.single_add_to_cart_button {
	white-space: nowrap;
}

.single_add_to_cart_button::after {
	content: ')';
	display: inline;
}

.single_add_to_cart_button::before {
	content: '(';
	display: inline;
}

.wp-block-add-to-cart-form {
	margin-top: 80px;
}

.wc-forward,
.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward {
	font-size: var(--wp--preset--font-size--custom-5) !important;
	line-height: var(--wp--preset--line-height--custom-5) !important;
	color: var(--wp--preset--color--custom-p-p-purple) !important;
}

/* !important to outrank the !important base color above. */
.wc-forward:hover,
.wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward:hover {
	color: var(--wp--preset--color--custom-p-p-black) !important;
}
/* !product detail */

/* about */
.pp-team {
	margin-bottom: 160px;
}

.about-image {
	margin-bottom: 80px;
}
/* !about */

/* shop page */
.shop-archive {
	padding-top: 24px;
	padding-bottom: 80px;
}

.shop-archive__top {
	margin-bottom: 56px;
}

.shop-archive__title {
	margin-bottom: 40px;
}

.shop-archive__filter-bar {
	align-items: flex-start;
	gap: 24px;
}

.shop-archive__filter-groups {
	flex: 1;
}

.shop-archive__filter-row {
	line-height: 1.5;
}

.shop-archive__filter-row + .shop-archive__filter-row {
	margin-top: 20px;
}

.shop-archive__filter-link {
	color: var(--wp--preset--color--custom-p-p-gray);
	display: inline-block;
	margin-right: 10px;
	text-decoration: none;
}

.shop-archive__filter-link.is-active {
	color: var(--wp--preset--color--custom-p-p-black);
}

.shop-archive__selected-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 72px;
}

.shop-archive__selected-filter {
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
	text-decoration: none;
}

.shop-archive__search {
	width: 100%;
}

.shop-archive__search .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--custom-p-p-gray);
	padding: 0;
}

.shop-archive__search .wp-block-search__input {
	border: 0;
	padding: 0 0 8px;
}

.shop-archive__search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--custom-p-p-gray);
	margin: 0;
	padding: 0 0 8px;
}

.shop-archive__toolbar {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.shop-archive__pagination {
	margin-top: 88px;
	text-align: center;
}

.shop-archive__pagination .page-numbers {
	border: 0;
	display: inline-flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.shop-archive__pagination .page-numbers li {
	list-style: none;
}

.shop-archive__pagination a,
.shop-archive__pagination span {
	color: var(--wp--preset--color--custom-p-p-purple);
	font-size: var(--wp--preset--font-size--custom-4);
	line-height: var(--wp--preset--line-height--custom-4);
	text-decoration: none;
}

/* Toolbar grid: result count and sorting share one line. With active
   filter chips (the selected-filters block renders inside the toolbar)
   the toolbar becomes two rows — chips | sorting, count below with the
   global block gap (Figma shop overview). Without chips the block
   renders nothing, :has() does not match and auto-placement keeps the
   single count | sorting line. .shop-main raises specificity over the
   generated group layout styles. */
.shop-main .shop-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--wp--style--block-gap, 20px);
	align-items: baseline;
}

.shop-main .shop-toolbar:has(.selected-filters) {
	grid-template-areas:
		"chips sorting"
		"count count";
	row-gap: var(--wp--style--block-gap, 20px);
}

.shop-main .shop-toolbar:has(.selected-filters) .selected-filters {
	grid-area: chips;
}

.shop-main .shop-toolbar:has(.selected-filters) .wc-block-product-results-count,
.shop-main .shop-toolbar:has(.selected-filters) .wp-block-woocommerce-product-results-count {
	grid-area: count;
}

.shop-main .shop-toolbar:has(.selected-filters) .wc-block-catalog-sorting {
	grid-area: sorting;
}

/* Product filter block (the tab row and the term rows above the grid).
   Lives here rather than in the block render so the brand archive can
   reuse the same classes. */
.product-filter-block a,
.product-filter-block button {
	appearance: none;
	text-decoration: none;
	color: var(--wp--preset--color--custom-p-p-gray);
	font-weight: 400;
}

.product-filter-block a.is-active,
.product-filter-block button.is-active {
	color: var(--wp--preset--color--custom-p-p-black);
}

/* Hover in the global violet — after .is-active so it also wins on
   active items. */
.product-filter-block a:hover,
.product-filter-block button:hover {
	color: var(--wp--preset--color--custom-p-p-purple);
}

.product-filter-block button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.product-filter-block .parent-filters {
	margin-bottom: 40px;
	justify-content: space-between;
	display: flex;
	gap: 8px;
}

.product-filter-block .parent-filters .parent-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.product-filter-block .child-filters-wrapper {
	margin-bottom: 160px;
}

/* One tab panel: the term row, plus the sub filter row below it when a
   brand is selected. */
.product-filter-block .child-filters-panel {
	display: flex;
	flex-direction: column;
}

.product-filter-block .child-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* The second level starts on the same left edge as every other filter
   row and keeps the distance the tab row keeps from the row below it. */
.product-filter-block .child-filters--sub {
	margin-top: 40px;
}

/* On the brand archive the Qualität row stands alone between the hero and
   the grid, so it brings its own breathing room. */
.brand-quality-filter {
	margin-bottom: 40px;
}

.product-filter-block .child-filters--search {
	width: 100%;
}

.product-filter-block .search-input-wrapper {
	position: relative;
}

.product-filter-block .search-input {
	width: 100%;
	padding: 0px 20px;
	border: 1px solid var(--wp--preset--color--custom-p-p-gray);
	background-color: var(--wp--preset--color--custom-p-p-white);
	border-radius: 57px;
	appearance: none;
}

@media (max-width: 1023px) {
	.product-filter-block .child-filters-wrapper {
		margin-bottom: 40px;
	}
}

.woocommerce-ordering select {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: 0;
	text-align: right;
}

.woocommerce-ordering select:focus {
	outline: none;
}

.wp-block-woocommerce-product-collection {
	margin-top: 80px;
}

.wp-block-query-pagination {
	justify-content: center;
	align-items: center;
	margin-top: 80px;
}

.wp-block-query-pagination-numbers {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
}

/* Current page as a filled circle; em-based so it scales with the global font sizes. */
.wp-block-query-pagination-numbers .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--wp--preset--color--custom-p-p-purple);
	color: var(--wp--preset--color--custom-p-p-white);
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: 1;
}

.onsale {
	display: none;
}
/* !shop page */


/* brand page */
.category-hero {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 50px;
}

.category-hero h1 {
	text-transform: unset;
}

.category-hero .category-hero-content {
	max-width: 774px;
}

.category-hero .product-brand-thumbnail {
	min-width: 283px;
	flex: none;
}

.product-brand-secondary-image {
	margin-top: 100px;
}

.category-main .wp-block-woocommerce-product-collection {
	margin-top: 45px;
}
/* !brand page */


/* category page */
/* The category feature image reuses the term-thumbnail block outside the
   hero, so the hero-scoped logo sizing does not apply here. */
.tax-product_cat .category-main > .product-brand-thumbnail {
	margin-top: 100px;
}

.tax-product_cat .category-main > .product-brand-thumbnail img {
	width: 100%;
	height: auto;
}
/* !category page */


/* cart page */
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
	max-width: 100%;
}

.woocommerce-cart .wc-block-components-quantity-selector__input,
.woocommerce-cart .wc-block-components-quantity-selector__button {
	font-size: var(--wp--preset--font-size--custom-5) !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--custom-p-p-purple) !important;
	padding: 0 !important;
	opacity: 1 !important;
}

.woocommerce-cart .wc-block-cart-item__product {}

.woocommerce-cart .wc-block-cart-items .wc-block-cart-items__header {
	display: none;
}

.woocommerce-cart .wc-block-cart-items th,
.woocommerce-cart .wc-block-cart-items td,
.wc-block-cart__main .wc-block-cart-items {
	border: none !important;
}

.woocommerce-cart .wc-block-cart__totals-title {
	display: none;
}

.wp-block-woocommerce-cart-order-summary-block {
	font-size: var(--wp--preset--font-size--custom-5) !important;
	line-height: 1.5;
	font-weight: normal;
}

/* Grand total slightly raised above the body size; the bracket CTA below
   it carries the 30px accent. */
.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-size: var(--wp--preset--font-size--custom-4) !important;
	line-height: var(--wp--preset--line-height--custom-4);
	font-weight: normal;
}

.wc-block-components-totals-shipping {
	color: var(--wp--preset--color--custom-p-p-gray);
}

.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	border: none;
}

.wc-block-cart__submit-button {
	padding: 0;
	color: var(--wp--preset--color--custom-p-p-purple);
	width: auto;
	font-size: var(--wp--preset--font-size--custom-3);
	line-height: var(--wp--preset--line-height--custom-3);
}

a.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover {
	color: var(--wp--preset--color--custom-p-p-black);
	background: transparent;
}

.wc-block-cart__submit-button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.wc-block-cart__submit-button:before {
	content: '(';
	display: inline;
}

.wc-block-cart__submit-button:after {
	content: ')';
	display: inline;
}

.woocommerce-cart .wc-block-components-product-name {
	color: #000;
	text-decoration: none;
	font-weight: normal;
	font-size: inherit;
	line-height: inherit;
}

.woocommerce-cart .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--custom-p-p-purple);
}

/* Scoped to .wc-block-cart (cart page block only) — the mini-cart drawer
   renders the same table classes and has its own, smaller type scale. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-cart .wc-block-components-product-details.wc-block-components-product-details,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	font-weight: normal;
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
}

/* Intentionally global: applies to cart page and drawer alike. */
.wc-block-cart-item__wrap {
	gap: 10px !important;
}

.wc-block-cart-item__wrap .wc-block-cart-item__prices {
	display: none !important;
}

/* !cart page */


/* mini-cart drawer */
/* Title: Woo ships 2em (32px); align with the P2 preset. */
.wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--custom-4);
	line-height: var(--wp--preset--line-height--custom-4);
	font-weight: normal;
}

/* Product lines: fixed 15px — the drawer is narrower than anything the
   font-size presets account for (mobile custom-5 is 15px anyway). */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-mini-cart__drawer .wc-block-components-product-details.wc-block-components-product-details {
	font-weight: normal;
	font-size: 15px;
	line-height: 1.2;
}

/* The drawer opens on every page, so the .woocommerce-cart product-name
   rule from the cart section never reaches it. */
.wc-block-mini-cart__drawer .wc-block-components-product-name {
	color: var(--wp--preset--color--custom-p-p-black);
	text-decoration: none;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--custom-p-p-purple);
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
	font-size: 15px !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--custom-p-p-purple) !important;
	padding: 0 !important;
	opacity: 1 !important;
}

/* Subtotal: Woo ships it bold. */
.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--custom-4);
	line-height: var(--wp--preset--line-height--custom-4);
	font-weight: normal;
}

.wc-block-mini-cart__footer-actions {
	margin-top: 30px;
	justify-content: space-between;
}

/* :not(.is-link) mirrors Woo's outline-button specificity, which would
   otherwise win with color: currentColor. */
.wc-block-components-button:not(.is-link).wc-block-mini-cart__footer-cart,
.wc-block-components-button:not(.is-link).wc-block-mini-cart__footer-checkout {
	color: var(--wp--preset--color--custom-p-p-purple);
	padding: 0;
	border: 0;
	box-shadow: none !important;
	width: auto;
	display: inline-block;
	flex-grow: unset !important;
	font-size: var(--wp--preset--font-size--custom-4);
	line-height: var(--wp--preset--line-height--custom-4);
	background: transparent !important;
}

.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer-cart:focus,
.wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__footer-checkout:focus {
	color: var(--wp--preset--color--custom-p-p-black) !important;
	background-color: transparent !important;
}

/* Empty state: bracket CTA instead of Woo's boxed border button. */
.wc-block-mini-cart__shopping-button a {
	border: 0;
	padding: 0;
	font-weight: normal;
	font-size: var(--wp--preset--font-size--custom-3);
	line-height: var(--wp--preset--line-height--custom-3);
	color: var(--wp--preset--color--custom-p-p-purple);
	background: transparent;
}

.wc-block-mini-cart__shopping-button a::before {
	content: '(';
	display: inline;
}

.wc-block-mini-cart__shopping-button a::after {
	content: ')';
	display: inline;
}

.wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__shopping-button a:focus {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--custom-p-p-black);
}
/* !mini-cart drawer */


/* checkout page */
/* Underline form fields. Inputs stay at Woo's 16px — anything smaller
   triggers iOS Safari's focus auto-zoom. */
.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=number],
.wc-block-components-form .wc-block-components-text-input input[type=password],
.wc-block-components-form .wc-block-components-text-input input[type=url] {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--custom-p-p-gray);
	border-radius: 0;
	color: var(--wp--preset--color--custom-p-p-black);
	padding: 16px 0 8px;
}

/* Keep Woo's floated-label top padding, minus the side padding. The
   -webkit-autofill line mirrors Woo's own selector list — without it,
   autofilled fields snap back to the unfloated padding. */
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type=text],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=email],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=number],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=password],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=url] {
	padding: 24px 0 8px;
}

/* Woo's :focus resets the border shorthand, so all sides must be
   restated. The purple underline is the visible focus indicator on this
   long form — an intentional exception to the theme's no-outline habit. */
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--custom-p-p-purple);
	padding: 24px 0 8px;
	outline: none;
	box-shadow: none;
}

.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error input {
	border-color: var(--pp-color-error);
}

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label {
	left: 0;
	color: var(--wp--preset--color--custom-p-p-black);
	opacity: var(--pp-opacity-muted);
}

/* Country/state selects (note Woo's wc-blocks- plural prefix here). */
.wc-blocks-components-select .wc-blocks-components-select__container {
	background: transparent;
	border-radius: 0;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--custom-p-p-gray);
	border-radius: 0;
	color: var(--wp--preset--color--custom-p-p-black);
	padding: 16px 24px 0 0;
}

.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-width: 0 0 1px;
	border-bottom-color: var(--wp--preset--color--custom-p-p-purple);
	padding: 16px 24px 0 0;
	outline: none;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
	right: 0;
	fill: var(--wp--preset--color--custom-p-p-purple);
}

.wc-blocks-components-select .wc-blocks-components-select__label {
	left: 0;
	opacity: var(--pp-opacity-muted);
}

/* Order-note textarea: 16px like the inputs (iOS zoom, consistency). */
.wc-block-components-textarea {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--custom-p-p-gray);
	border-radius: 0;
	color: var(--wp--preset--color--custom-p-p-black);
	padding: 12px 0;
	font-size: 16px;
}

.wc-block-components-textarea:focus {
	border-bottom-color: var(--wp--preset--color--custom-p-p-purple);
	outline: none;
	box-shadow: none;
}

/* Radios and checkboxes are appearance:none customs (accent-color has no
   effect) — recolor Woo's checked dot and SVG mark instead. The focus
   outlines are intentional accessibility exceptions on this long form. */
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--custom-p-p-purple);
}

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

.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
	outline: 1px solid var(--wp--preset--color--custom-p-p-purple);
	outline-offset: 2px;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
	border-radius: 0;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
	border-color: var(--wp--preset--color--custom-p-p-purple);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--custom-p-p-purple);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus {
	outline: 1px solid var(--wp--preset--color--custom-p-p-purple);
	outline-offset: 2px;
}

/* Place-order: bracket CTA. Brackets sit on the inner text span so they
   disappear together with the label while Woo's spinner shows. */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button--full-width {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--custom-p-p-purple);
	padding: 0;
	width: auto;
	font-size: var(--wp--preset--font-size--custom-3);
	line-height: var(--wp--preset--line-height--custom-3);
	font-weight: normal;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover {
	color: var(--wp--preset--color--custom-p-p-black);
	background: transparent;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:focus {
	background: transparent;
	box-shadow: none;
	outline: none;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 1px solid var(--wp--preset--color--custom-p-p-purple);
	outline-offset: 4px;
}

/* Brackets live on the inner flex div (not the outer block-level
   __text span, which would push them onto their own lines) and hide
   with it while Woo's loading spinner shows. */
.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
	justify-content: center;
}

.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text::before {
	content: '(';
}

.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text::after {
	content: ')';
}

.wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--custom-p-p-purple);
	font-size: var(--wp--preset--font-size--custom-5);
}

.wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--custom-p-p-black);
}

/* Step titles would otherwise inherit the 50px h2 preset. */
.wc-block-checkout .wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--custom-4);
	line-height: var(--wp--preset--line-height--custom-4);
	font-weight: normal;
}

/* Order summary: flatten Woo's box; totals typography comes from the
   global cart rules above. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--custom-5);
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content.is-open,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title.is-open {
	border-bottom: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
	font-size: var(--wp--preset--font-size--custom-4);
	font-weight: normal;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
	font-weight: normal;
	font-size: var(--wp--preset--font-size--custom-5);
}

/* Coupon: link and apply button in the theme's flat purple; the input
   itself inherits the underline style from the text-input rules above. */
.wc-block-components-totals-coupon-link {
	color: var(--wp--preset--color--custom-p-p-purple);
}

.wc-block-components-totals-coupon-link:hover {
	color: var(--wp--preset--color--custom-p-p-black);
}

.wc-block-components-totals-coupon__button {
	background: transparent;
	border: 0;
	box-shadow: none !important;
	color: var(--wp--preset--color--custom-p-p-purple);
	padding: 0;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus {
	background: transparent;
	color: var(--wp--preset--color--custom-p-p-black);
}
/* !checkout page */

@media (max-width: 1023px) {
	:root {
		--wp--preset--font-size--custom-1: 50px;
    --wp--preset--font-size--custom-2: 30px;
    --wp--preset--font-size--custom-3: 20px;
    --wp--preset--font-size--custom-4: 15px;
    --wp--preset--font-size--custom-5: 15px;
		--wp--preset--line-height--custom-1: 50px;
    --wp--preset--line-height--custom-2: 36px;
    --wp--preset--line-height--custom-3: 1;
    --wp--preset--line-height--custom-4: 1.2;
    --wp--preset--line-height--custom-5: 1.2;
		--pp-logo-width: 220px;
	}

	.pp-team {
		gap: 40px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-template-default:not(.home) .main-content,
	.woocommerce-page main,
	.woocommerce-page .shop-main {
		margin-top: 50px !important;
	}

	/* header */
	header .nav-block .wp-block-group {
		flex-direction: column;
		row-gap: 5px;
		align-items: end;
	}
	/* header */

	/* home */
	.home-images {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.home-text {
		margin: 145px 0;
	}

	ul.pp-product-grid.wc-block-product-template,
	.pp-product-grid.pp-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* !home */

	/* main */
	.main-content {
		padding: 0 10px !important;
	}
	/* !main */

	/* footer */
	footer {
		margin-top: 100px;
	}

	footer .footer-logo {
		margin-bottom: 50px;
	}

	footer .footer-logo img {
		width: 220px !important;
	}

	footer > div {
		padding: 20px 10px !important;
	}

	.footer-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		row-gap: 50px;
	}

	.footer-opening-hours > .wp-block-group {
		max-width: 250px;
	}
	/* !footer */

	/* product detail */
	.product-detail-columns {
		flex-direction: column;
	}

	.product-detail-columns .wp-block-column {
		flex-basis: 100% !important;
	}

	.custom-product-variants .custom-product-variants__list {
		gap: 10px;
	}

	.custom-product-variants .custom-product-variants__list .custom-product-variants__item {
		width: 28px;
		height: 28px;
	}

	/* No hover on touch — the aria-label still carries the colour name. */
	.custom-product-variants .custom-product-variants__list .custom-product-variants__item::before {
		display: none;
	}

	.wp-block-woocommerce-product-specifications {
		margin-top: 50px;
	}

	.wp-block-woocommerce-product-specifications table th {
		width: 185px;
	}

	.wp-block-post-excerpt {
		margin-top: 20px;
	}

	.wc-block-add-to-cart-form {
		margin-top: 50px;
	}
	/* !product detail */

	/* header */
	header {
		padding: 20px 10px !important;
	}
	/* !header */

	.woocommerce-page main,
	.woocommerce-page .shop-main {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* product card */
	.pp-product-card .wp-block-post-title {
		margin-bottom: 10px;
	}
	/* !product card */

	/* about */
	.pp-team {
		margin-bottom: 100px;
	}

	.logos-group {
		margin-top: 50px !important;
		column-gap: 60px;
		row-gap: 30px;
	}
	/* !about */

	/* shop page */
	ul.pp-product-grid.wc-block-product-template,
	.pp-product-grid.pp-product-grid {
		column-gap: 80px;
		justify-content: center;
		row-gap: 50px;
	}

	/* brand page */
	.category-hero {
		flex-direction: column;
	}

	.category-hero .product-brand-thumbnail {
		margin: 0 auto;
		max-width: 190px;
		min-width: 0;
	}

	.product-brand-secondary-image {
		margin-top: 58px;
	}
	/* !brand page */

	/* category page */
	.tax-product_cat .category-main > .product-brand-thumbnail {
		margin-top: 58px;
	}
	/* !category page */

	/* cart */
	.wc-block-cart {
		gap: 50px;
	}
	/* !cart */
}

@media (max-width: 767px) {
	.pp-team .wp-block-group {
		grid-column: 1 / -1;
	}

	/* home */
	.home-images {
		margin-top: 50px !important;
		flex-direction: column;
		gap: 10px;
		margin-bottom: -10px;
	}
	/* !home */

	ul.pp-product-grid.wc-block-product-template,
	.pp-product-grid.pp-product-grid {
		gap: 50px;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* toast */
:root {
	--pp-toast-offset: 24px;
	--pp-color-error: #e5484d;
}

/* Server-rendered notices (store-notices block) share the fixed stack with
   the JS toast region, so they sit bottom-right from first paint — no layout
   shift, and a no-JS fallback. js/pp-toast.js moves them into .pp-toast-region. */
.wc-block-store-notices,
.pp-toast-region {
	position: fixed;
	right: var(--pp-toast-offset);
	bottom: var(--pp-toast-offset);
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(420px, calc(100vw - 2 * var(--pp-toast-offset)));
	z-index: 99999;
	pointer-events: none;
}

.wc-block-store-notices:empty {
	display: none;
}

/* Flatten the inner wrapper so server-rendered toasts sit directly
   in the flex stack (gap applies between them). */
.wc-block-store-notices .woocommerce-notices-wrapper {
	display: contents;
}

.pp-toast {
	pointer-events: auto;
	position: relative;
	cursor: pointer;
	background: var(--wp--preset--color--custom-p-p-purple);
	color: var(--wp--preset--color--custom-p-p-white);
	border-left: 6px solid transparent;
	padding: 16px 20px;
	font-size: var(--wp--preset--font-size--custom-5);
	line-height: var(--wp--preset--line-height--custom-5);
	animation: pp-toast-in 200ms ease-out;
}

.pp-toast--success {
	border-left-color: var(--wp--preset--color--custom-p-p-neon-green);
}

.pp-toast--info {
	border-left-color: var(--wp--preset--color--custom-p-p-gray);
}

.pp-toast--error {
	border-left-color: var(--pp-color-error);
}

.pp-toast__content > p {
	margin: 0;
}

.pp-toast a,
.pp-toast a.wc-forward {
	color: var(--wp--preset--color--custom-p-p-white) !important;
}

.pp-toast a:hover,
.pp-toast a.wc-forward:hover {
	color: var(--wp--preset--color--custom-p-p-neon-green) !important;
}

/* "View cart" links stretch invisibly over the whole card, so the toast
   itself is the click target; their text stays for screen readers. Links
   that carry meaning inside the message text (no .wc-forward) remain
   visible inline. */
.pp-toast a.wc-forward {
	position: absolute;
	inset: 0;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

.pp-toast.is-leaving {
	opacity: 0;
	transition: opacity 150ms ease-out;
}

@keyframes pp-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-toast {
		animation: none;
	}

	.pp-toast.is-leaving {
		transition: none;
	}
}

@media (max-width: 600px) {
	.wc-block-store-notices,
	.pp-toast-region {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
	}
}

/* Cart/checkout inline notices (React blocks) stay in place — field-level
   validation belongs next to the field — but pick up the toast look. */
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--custom-p-p-purple);
	color: var(--wp--preset--color--custom-p-p-white);
	border: 0;
	border-left: 6px solid var(--wp--preset--color--custom-p-p-gray);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--custom-p-p-neon-green);
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
	border-left-color: var(--pp-color-error);
}

.wc-block-components-notice-banner > svg {
	background: transparent;
	fill: currentColor;
}

.wc-block-components-notice-banner .wc-forward {
	color: var(--wp--preset--color--custom-p-p-white) !important;
}

.wc-block-components-notice-banner .wc-forward:hover {
	color: var(--wp--preset--color--custom-p-p-neon-green) !important;
}
/* !toast */