/*
Theme Name: My Commerce
Theme URI: https://autsch.cc
Description: Theme for commerce on WordPress.
Version: 1.1.0
Author: Autsch GmbH
Author URI: https://autsch.cc
Text Domain: my-commerce
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/* Tailwind — base layer is included without Preflight (disabled in tailwind.config.js). */
*, ::before, ::after {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}
::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}
.static {
	position: static;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}
.block {
	display: block;
}
.flex {
	display: flex;
}
.table {
	display: table;
}
.grid {
	display: grid;
}
.hidden {
	display: none;
}
.size-full {
	width: 100%;
	height: 100%;
}
.border {
	border-width: 1px;
}
.uppercase {
	text-transform: uppercase;
}
.not-italic {
	font-style: normal;
}
.line-through {
	text-decoration-line: line-through;
}
.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/*
 * Link styles
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* ── WooCommerce single product — stock status colours ──────────────────────
 * Green when in stock (delivery text), red when out of stock.
 */
.woocommerce div.product p.stock.in-stock,
p.stock.in-stock,
.wc-block-components-product-stock-indicator.in-stock {
	color: #1e6b3a;
	font-weight: 600;
}

.woocommerce div.product p.stock.out-of-stock,
p.stock.out-of-stock,
.wc-block-components-product-stock-indicator.out-of-stock {
	color: #a93226;
	font-weight: 600;
}

.woocommerce div.product p.stock.available-on-backorder,
p.stock.available-on-backorder,
.wc-block-components-product-stock-indicator.available-on-backorder {
	color: #b45309;
	font-weight: 600;
}

/* ── WooCommerce product archive — stock badge ──────────────────────────────
 * Displayed above the price via woocommerce_after_shop_loop_item_title (prio 9)
 */
.mc-stock-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2em 0.55em;
	border-radius: 2px;
	line-height: 1.4;
}

.mc-stock-badge--instock {
	background: #e6f4ea;
	color: #1e6b3a;
}

.mc-stock-badge--outofstock {
	background: #fdecea;
	color: #a93226;
}

/* ── WooCommerce product archive — thumbnail ────────────────────────────────
 * WooCommerce hard-crops images to 300×300.
 * Override: fixed-height container, image fills it via object-fit.
 * Targets both the classic loop and the WooCommerce block (Product Collection).
 */
.attachment-woocommerce_thumbnail,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	display: block;
	width: auto;
	height: 180px;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

.wc-block-product {
	border: 1px solid #e2e2e2;
	padding: 10px;
}

.wc-block-components-product-image {
    padding: 10px;
    display: flex;
    justify-content: center;
}

/* Spezifisch für Mobilgeräte (bis 768px Breite) */

@media (max-width: 768px) {
    li.wc-block-product .wc-block-grid__product-image img {
        height: 70px !important; /* !important stellt sicher, dass Inline-Styles überschrieben werden */
    }
}

/* ── WooCommerce single product — accordion tabs ────────────────────────────
 * Replaces the default horizontal tab navigation.
 */
.mc-product-accordion {
	margin-top: 2rem;
}

.mc-product-accordion__item {
	border-top: 1px solid #e2e2e2;
}

.mc-product-accordion__item:last-child {
	border-bottom: 1px solid #e2e2e2;
}

.mc-product-accordion__heading {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

.mc-product-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	color: inherit;
}

.mc-product-accordion__trigger::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
	margin-left: 1rem;
	transition: transform 0.25s ease;
}

.mc-product-accordion__item.is-open .mc-product-accordion__trigger::after {
	content: '−';
}

/* CSS grid trick for smooth height animation */
.mc-product-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.mc-product-accordion__item.is-open .mc-product-accordion__panel {
	grid-template-rows: 1fr;
}

.mc-product-accordion__inner {
	min-height: 0;
	overflow: hidden;
	padding-bottom: 1rem;
}

.mc-product-accordion__inner.is-clamped {
	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.mc-read-more {
	display: inline-block;
	margin-top: 0.375rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.1em;
}

/* ── WooCommerce product archive — left-align title & price ─────────────── */
.woocommerce-loop-product__title,
.wc-block-components-product-title,
.wc-block-components-product-price,
.woocommerce ul.products li.product .price {
	text-align: left;
}

/*
 product archive grid
*/


.wc-block-product-template__responsive {
    grid-gap: 0;
}
 
main {
    padding: 0px 16px 0px 16px !important;
}


.mc-product-specs__row {
    display: block !important;
}

.mc-product-specs__label {
    display: inline !important;
    font-weight: bold !important;
}

dd.mc-product-specs__value {
    display: inline !important;
    margin-left: 10px !important;
}

dl.mc-product-specs.wp-block-mc-product-specs {
    font-size: 14px;
}

div#mc-tab-description {
    padding-bottom: 15px;
}

img.payment-icons {
    width: 45px;
}

.subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.subcat-item {
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.subcat-item:hover {
    transform: translateY(-5px);
}

.subcat-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Quadratisch */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f5f5f5;
}

.subcat-item span {
    display: block;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}