/* ---------------------------------------------------------------------------
   Shop, product, cart and checkout.

   WooCommerce ships its own markup; this file dresses it in the design tokens
   already defined in mw.css (--blue, --orange, --ink, --pale, --line, --muted)
   rather than replacing any templates.
   ------------------------------------------------------------------------ */

/* --- Breadcrumb ---------------------------------------------------------- */

.mw-breadcrumb {
	font-size: 12px;
	color: var(--muted);
	padding-block: 22px 0;
}

.mw-breadcrumb a:hover { color: var(--blue); }
.mw-crumb-sep { padding-inline: 7px; color: #a9b8cc; }

/* --- Archive header ------------------------------------------------------ */

.woocommerce-products-header { margin-block: 18px 6px; }

.woocommerce-products-header__title {
	font-size: clamp(28px, 2.4vw, 38px);
	line-height: 1.15;
	letter-spacing: -.045em;
	color: var(--blue);
	margin: 0;
}

.term-description {
	font-size: 14px;
	color: var(--muted);
	max-width: 60ch;
	margin-top: 10px;
}

.woocommerce-result-count {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
}

.woocommerce-ordering select {
	font: inherit;
	font-size: 13px;
	color: var(--ink);
	background: var(--pale);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 9px 12px;
}

.woocommerce-notices-wrapper:not(:empty) { margin-block: 16px; }

/* Result count and sorting share one row above the grid. */
.woocommerce .products ~ .woocommerce-ordering,
.woocommerce-ordering {
	float: none;
}

.catalog > .woocommerce-result-count,
.catalog > .woocommerce-ordering {
	display: inline-block;
	vertical-align: middle;
}

.catalog > .woocommerce-ordering { float: right; }

/* --- Product grid -------------------------------------------------------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	clear: both;
}

ul.products li.product {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}

ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px #24446e1f;
}

ul.products li.product a img,
ul.products li.product img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: contain;
	background: #f7f9fc;
	padding: 14px;
	margin: 0;
}

/* Products without a photo still need the same block of space, otherwise the
   grid rows jump around. The WMS does not always ship imagery. */
ul.products li.product > a.woocommerce-LoopProduct-link::before {
	content: "";
	display: block;
	height: 0;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	padding: 15px 16px 0;
	margin: 0;
	overflow-wrap: anywhere;
}

ul.products li.product .price {
	display: block;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--blue);
	padding: 10px 16px 0;
	margin: 0;
}

ul.products li.product .mw-loop-vpe {
	display: block;
	font-size: 12px;
	color: var(--muted);
	padding: 6px 16px 0;
}

ul.products li.product .button {
	margin: 14px 16px 16px;
	justify-content: center;
	font-size: 13px;
	padding: 11px 14px;
}

ul.products li.product .added_to_cart {
	margin: 0 16px 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
}

/* --- Pagination ---------------------------------------------------------- */

.woocommerce-pagination { margin-block: 34px; }

.woocommerce-pagination ul {
	display: flex;
	gap: 7px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 14px;
	font-weight: 700;
}

.woocommerce-pagination span.current {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* --- Single product ------------------------------------------------------ */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 46px;
	align-items: start;
	padding-block: 26px 10px;
}

.woocommerce div.product .woocommerce-product-gallery {
	background: #f7f9fc;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 26px;
}

.woocommerce div.product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.woocommerce div.product .summary { margin: 0; }

.woocommerce div.product .product_title {
	font-size: clamp(27px, 2.3vw, 36px);
	line-height: 1.15;
	letter-spacing: -.04em;
	color: var(--blue);
	margin: 0 0 18px;
}

.woocommerce div.product p.price {
	font-size: 33px;
	font-weight: 850;
	letter-spacing: -.03em;
	color: var(--ink);
	margin: 0 0 4px;
}

.mw-tax-note,
.woocommerce div.product p.price small {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0;
	margin-left: 4px;
}

.woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
	margin-block: 18px;
}

/* Packaging unit: the single most misread field on a hardware product page,
   so it is given a block of its own rather than a line of small print. */
.mw-vpe {
	background: #f0f5ff;
	border-left: 4px solid var(--orange);
	border-radius: 0 6px 6px 0;
	padding: 13px 16px;
	margin-block: 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.mw-vpe span {
	display: block;
	font-weight: 400;
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}

.mw-stock {
	font-size: 14px;
	font-weight: 700;
	margin-block: 14px;
}

.mw-stock.in-stock { color: #167d3f; }
.mw-stock.out-of-stock { color: #b3321f; }

/* --- Add to cart --------------------------------------------------------- */

.woocommerce div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-block: 22px;
}

.woocommerce .quantity input.qty {
	width: 96px;
	height: 100%;
	min-height: 50px;
	padding: 12px;
	text-align: center;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	background: #fff;
	border: 1px solid #c4d1e4;
	border-radius: 5px;
}

.woocommerce div.product form.cart .button {
	flex: 1;
	justify-content: center;
	min-height: 50px;
	font-size: 15px;
}

/* --- Product meta -------------------------------------------------------- */

.mw-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 22px;
	margin-block: 24px 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}

.mw-meta dt {
	color: var(--muted);
	padding-block: 7px;
}

.mw-meta dd {
	margin: 0;
	padding-block: 7px;
	font-weight: 700;
}

/* --- Tabs ---------------------------------------------------------------- */

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 18px;
	border-top: 1px solid var(--line);
	padding-top: 30px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 11px 18px;
	border-radius: 5px;
	background: var(--pale);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.woocommerce-tabs ul.tabs li.active a {
	background: var(--blue);
	color: #fff;
}

.woocommerce-tabs .panel h2 { display: none; }

.woocommerce-tabs .panel {
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 72ch;
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	text-align: left;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-tabs table.shop_attributes th { color: var(--muted); font-weight: 400; width: 220px; }
.woocommerce-tabs table.shop_attributes td { font-weight: 700; }
.woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* --- Related products ---------------------------------------------------- */

.related.products,
.up-sells.upsells {
	grid-column: 1 / -1;
	margin-top: 46px;
	border-top: 1px solid var(--line);
	padding-top: 32px;
}

.related.products > h2,
.up-sells.upsells > h2 {
	font-size: 28px;
	letter-spacing: -.04em;
	margin: 0 0 4px;
	color: var(--blue);
}

/* --- Notices ------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	padding: 16px 18px;
	margin: 0 0 20px;
	border-radius: 7px;
	border-left: 4px solid var(--blue);
	background: #f0f5ff;
}

.woocommerce-message { border-left-color: #167d3f; background: #eef8f1; }
.woocommerce-error   { border-left-color: #b3321f; background: #fdf0ee; }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	font-size: 13px;
	padding: 9px 15px;
}

/* --- Cart ---------------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 20px 30px;
	font-size: 14px;
}

.woocommerce table.shop_table th {
	text-align: left;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 14px 12px;
	border-bottom: 1px solid var(--line);
}

.woocommerce table.shop_table td {
	padding: 18px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table img { width: 62px; height: auto; border-radius: 5px; }
.woocommerce table.shop_table .product-name a { font-weight: 700; }
.woocommerce table.shop_table .product-name a:hover { color: var(--blue); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 24px;
	letter-spacing: -.035em;
	color: var(--blue);
	margin: 0 0 14px;
}

.woocommerce .cart_totals {
	max-width: 460px;
	margin-left: auto;
	background: var(--pale);
	border-radius: 9px;
	padding: 24px;
}

.woocommerce .cart_totals table.shop_table { margin: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td { padding: 12px 0; }

.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .button { width: 100%; justify-content: center; }

.woocommerce .cart-collaterals { margin-bottom: 40px; }

/* --- Checkout ------------------------------------------------------------ */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 16px;
}

.woocommerce form .form-row label {
	font-size: 13px;
	font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-selection {
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid #c4d1e4;
	border-radius: 5px;
	padding: 12px;
	width: 100%;
}

.woocommerce form .form-row .required { color: var(--orange); text-decoration: none; }

#customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

#order_review_heading { margin-top: 34px; }

.woocommerce-checkout #payment {
	background: var(--pale);
	border-radius: 9px;
	padding: 22px;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-checkout #payment div.form-row.place-order { margin: 0; }
.woocommerce-checkout #payment #place_order { width: 100%; justify-content: center; min-height: 52px; }

/* --- My account ---------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border-radius: 5px;
	background: var(--pale);
	font-size: 14px;
	font-weight: 700;
}

.woocommerce-MyAccount-navigation li.is-active a { background: var(--blue); color: #fff; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce div.product { gap: 34px; }
}

@media (max-width: 850px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: 26px; }
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	#customer_details { grid-template-columns: 1fr; gap: 0; }
	.woocommerce .cart_totals { max-width: none; }
	.woocommerce div.product p.price { font-size: 29px; }
}

@media (max-width: 540px) {
	ul.products { gap: 13px; }
	ul.products li.product img { height: 132px; padding: 10px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 14px; padding-inline: 13px; }
	ul.products li.product .price { font-size: 17px; padding-inline: 13px; }
	ul.products li.product .button { margin-inline: 13px; }
	.woocommerce div.product form.cart { flex-wrap: wrap; }
	.woocommerce .quantity input.qty { width: 100%; }
	.woocommerce table.shop_table th { font-size: 11px; padding-inline: 7px; }
	.woocommerce table.shop_table td { padding: 14px 7px; }
	.woocommerce-tabs ul.tabs { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Block cart and checkout.

   WooCommerce 11 renders cart and checkout as React blocks with their own
   class names, so the classic table rules above never reach them. These rules
   map the block components onto the same design tokens.
   ------------------------------------------------------------------------ */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin-block: 22px 44px;
}

/* Headings inside the blocks */
.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--blue);
}

/* Buttons — the block components do not inherit .button */
.wc-block-components-button:not(.is-link) {
	background: var(--blue);
	color: #fff;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 700;
	min-height: 50px;
	padding-inline: 22px;
}

.wc-block-components-button:not(.is-link):hover { filter: brightness(.95); }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	justify-content: center;
}

/* Line items */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--line);
}

.wc-block-cart-item__image img {
	border-radius: 6px;
	background: #f7f9fc;
}

.wc-block-components-product-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.wc-block-components-product-name:hover { color: var(--blue); }

.wc-block-components-product-metadata {
	font-size: 13px;
	color: var(--muted);
}

/* Quantity stepper — must stay legible, it carries the packaging unit */
.wc-block-components-quantity-selector {
	border: 1px solid #c4d1e4;
	border-radius: 5px;
}

.wc-block-components-quantity-selector__input {
	font-weight: 700;
	color: var(--ink);
}

/* Totals panel */
.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--line);
}

.wc-block-components-totals-item__label { color: var(--muted); font-size: 14px; }
.wc-block-components-totals-item__value { font-weight: 700; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 24px;
	font-weight: 850;
	letter-spacing: -.03em;
	color: var(--blue);
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var(--pale);
	border-radius: 9px;
	padding: 22px;
}

/* Form fields */
.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="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	border: 1px solid #c4d1e4;
	border-radius: 5px;
	background: #fff;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
	color: var(--muted);
}

/* Panels and notices inside the blocks */
.wc-block-components-notice-banner {
	border-radius: 7px;
	font-size: 14px;
}

.wc-block-components-panel__button {
	font-weight: 700;
	color: var(--blue);
}

.wc-block-checkout__terms {
	font-size: 13px;
	color: var(--muted);
}

/* Empty-cart state */
.wp-block-woocommerce-empty-cart-block h2 {
	font-size: 26px;
	letter-spacing: -.04em;
}

/* ---------------------------------------------------------------------------
   Subcategory tiles.

   With 183 categories, a category page that jumps straight to products is
   unusable — Möbelbeschläge alone holds 6.797 articles. WooCommerce shows
   child categories first; these rules make them look like the homepage cards.
   ------------------------------------------------------------------------ */

ul.products li.product-category {
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

ul.products li.product-category a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

ul.products li.product-category img {
	height: 150px;
	padding: 16px;
	background: var(--pale);
	transition: background .2s;
}

ul.products li.product-category:hover img { background: #e5edff; }

ul.products li.product-category h2,
ul.products li.product-category h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	padding: 15px 16px 16px;
	margin: 0;
	overflow-wrap: anywhere;
}

ul.products li.product-category mark,
ul.products li.product-category .count {
	background: transparent;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}

/* --- Legal pages and other editorial content ----------------------------- */

.mw-page { padding-block: 30px 50px; }

.mw-page-head h1 {
	font-size: clamp(28px, 2.5vw, 40px);
	line-height: 1.15;
	letter-spacing: -.045em;
	color: var(--blue);
	margin: 0 0 22px;
}

.mw-page-content {
	font-size: 16px;
	line-height: 1.7;
	max-width: 74ch;
}

.mw-page-content h2 {
	font-size: 24px;
	letter-spacing: -.035em;
	color: var(--blue);
	margin-block: 34px 12px;
}

.mw-page-content ul,
.mw-page-content ol { padding-left: 22px; }

/* Footer legal menu */
.footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-bottom ul a:hover { color: var(--blue); }