/*
  Theme Name: Divi child theme
  Version: 1.0.1
  Template: Divi
  Author: Divi Pixel
  Author URI: https://www.divi-pixel.com
  Description: For woo-commerce edition 
  Text Domain: divi-child-theme
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========================================
   STOFFE KATEGORIEN STYLING
   ======================================== */

.stoffe-kategorien-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.kategorie-section {
    margin-bottom: 80px;
    padding: 40px;
    border: solid;
    border-radius: 0px;
    border-width: 2px;
    border-color: #2D5F6F;
    box-shadow: -10px 10px 0px 0px #2D5F6F;
}

.kategorie-titel {
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
    text-align: left;
}

.produkte-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.produkte-grid.spalten-2 { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
}

.produkte-grid.spalten-3 { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
}

.produkte-grid.spalten-4 { 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
}

@media (max-width: 1024px) {
    .produkte-grid.spalten-4 { 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
    }
}

@media (max-width: 980px) {
    .produkte-grid.spalten-4 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
    .produkte-grid.spalten-3 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }

    .kategorie-section {
        padding: 30px 20px;
        box-shadow: -5px 5px 0px 0px #2D5F6F;
    }

    .stoffe-kategorien-wrapper {
        padding: 40px 15px;
    }
}

@media (max-width: 767px) {
    .produkte-grid,
    .produkte-grid.spalten-2,
    .produkte-grid.spalten-3,
    .produkte-grid.spalten-4 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px;
    }

    .stoffe-kategorien-wrapper {
        padding: 20px 10px;
    }

    .kategorie-section {
        padding: 20px 15px;
        margin-bottom: 40px;
        box-shadow: -5px 5px 0px 0px #2D5F6F;
    }

    .kategorie-titel {
        font-size: 24px;
    }

    .mehr-anzeigen-wrapper {
        text-align: center;
    }

    .mehr-anzeigen-button {
        width: 100%;
        text-align: center;
        font-size: 14px;
        padding: .3em .8em !important;
    }
}

.produkt-item {
    text-align: left;
    min-width: 0;
    overflow: hidden;
}

.produkt-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    display: block;
    max-width: 100%;
}

.produkt-item img:hover {
    transform: scale(1.05);
}

.produkt-titel {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0;
    padding-left: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.produkt-titel a {
    text-decoration: none;
}

.produkt-preis-wrapper {
    margin: 5px 0;
    padding-left: 10px;
}

.produkt-preis {
    font-size: 16px;
}

.price-unit.smaller {
    font-size: 14px;
    font-weight: bold;
    opacity: 0.8;
}

.versandkosten-text {
    font-size: 12px;
    margin-top: 5px;
    padding-left: 10px;
}

.versandkosten-text a {
    text-decoration: none;
}

.mehr-anzeigen-wrapper {
    text-align: right;
    margin-top: 30px;
}

.mehr-anzeigen-button {
    display: inline-block;
    font-size: 16px;
    color: #28262c !important;
    background-color: #c64752;
    border-width: 0px !important;
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    border: 2px solid;
    border-radius: 3px;
    line-height: 1.7em !important;
    transition-property: all !important;
    box-sizing: border-box;
    padding: .3em 1em !important;
    box-shadow: -4px 4px 0px 0px #28262c;
    cursor: pointer;
}

.mehr-anzeigen-button:hover {
    opacity: 0.9;
}


/* ========================================
   CART-COLLATERALS AUSBLENDEN
   ======================================== */

/* Permanent ausblenden - verhindert dass WooCommerce/Divi es wieder anzeigt */
.woocommerce-cart .cart-collaterals,
.woocommerce .cart-collaterals,
.cart-collaterals {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ========================================
   CART LOADER (Balken-Animation)
   ======================================== */

.cart-item-loader {
    display: none;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    z-index: 100 !important;
    justify-content: center !important;
    align-items: center !important;
}

.cart-item-loader.active {
    display: flex !important;
}

.cart-item {
    position: relative !important;
}

/* Balken-Animation */
.loader-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 4px !important;
    height: 30px !important;
}

.loader-bars span {
    display: block !important;
    width: 6px !important;
    background: #e85a2c !important;
    border-radius: 2px !important;
    animation: loader-bar 1s ease-in-out infinite !important;
}

.loader-bars span:nth-child(1) {
    height: 10px !important;
    animation-delay: 0s !important;
}

.loader-bars span:nth-child(2) {
    height: 20px !important;
    animation-delay: 0.1s !important;
}

.loader-bars span:nth-child(3) {
    height: 30px !important;
    animation-delay: 0.2s !important;
}

.loader-bars span:nth-child(4) {
    height: 20px !important;
    animation-delay: 0.3s !important;
}

.loader-bars span:nth-child(5) {
    height: 10px !important;
    animation-delay: 0.4s !important;
}

@keyframes loader-bar {
    0%, 100% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* ========================================
   QUANTITY BUTTONS STYLING
   ROLLBACK: Globale Fallback-Regeln. Werden durch page-scoped Regeln
   (body.woocommerce-cart .qty-btn und .single-product form.cart .quantity .qty-btn)
   vollständig überschrieben. Hier als Basisreferenz erhalten.
   ======================================== */

.custom-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s ease;
    border-radius: 3px;
}

.qty-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

.qty-btn:active {
    transform: scale(0.95);
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-qty-input {
    width: 60px;
    text-align: center;
    padding: 5px;
    border: 1px solid #ddd;
}

.quantity-label {
    font-size: 12px;
    color: #666;
    margin-left: 5px;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Skip to content link für Screen Reader */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2D5F6F;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}



/* Reduced Motion für Nutzer mit Bewegungsempfindlichkeit */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .qty-btn,
    .custom-qty-input {
        border-width: 2px;
    }
}

/* ========================================
   WOOCOMMERCE CHECKOUT MULTISTEP (GEMINIZED)
   ROLLBACK: Legacy Checkout-Styles (vor Akkordeon-Umbau, pre-v2.0).
   Werden durch css/checkout-akkordeon.css vollständig überschrieben.
   Scope: body.woocommerce-checkout — bleibt als Fallback erhalten.
   ======================================== */

/* Input Felder Styling - Checkout only */
body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row textarea {
    border: 1px solid #8c8c8c;
    border-bottom: 1px solid #8c8c8c;
    background-color: #fafafa;
    padding: 5px 10px;
    border-radius: 0;
    box-sizing: border-box;
}

/* Focus State für Barrierefreiheit */
body.woocommerce-checkout .woocommerce form .form-row .input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus {
    outline: 2px solid #2D5F6F;
    outline-offset: 2px;
}

/* Zwei-Spalten Layout für Checkout-Felder (Desktop) */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #billing_email_field,
body.woocommerce-checkout #shipping_first_name_field,
body.woocommerce-checkout #shipping_last_name_field,
body.woocommerce-checkout #shipping_postcode_field,
body.woocommerce-checkout #shipping_city_field {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

/* Rechter Abstand für linke Spalte */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_first_name_field,
body.woocommerce-checkout #shipping_postcode_field {
    margin-right: 4%;
}

/* Checkout Spalten Layout - untereinander */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 auto 30px auto;
    padding-left: 0;
}

body.woocommerce-checkout #customer_details {
    display: block !important;
    width: 100%;
}

/* Überschriften */
body.woocommerce-checkout h3 {
    font-size: 22px;
}

body.woocommerce-checkout h4 {
    font-size: 18px;
}

/* Body Text */
body.woocommerce-checkout {
    font-size: 14px;
}

/* Checkout Buttons */
body.woocommerce-checkout button.button,
body.woocommerce-checkout a.button {
    box-shadow: -4px 4px 0px 0px #28262c;
    border-radius: 0;
}

/* Multistep Navigation ausblenden */
.woocommerce-multistep-checkout ul.nav-wizard {
    display: none !important;
}

/* Payment Bereich */
body.woocommerce-checkout #payment,
body.woocommerce-checkout #payment div.payment_box {
    background-color: #fafafa;
}

/* DHL Service ausblenden */
body.woocommerce-checkout .dhl-preferred-service-content {
    display: none !important;
}

/* Produkt Bilder in Bestellübersicht */
body.woocommerce-checkout img.attachment-woocommerce_thumbnail {
    max-width: 60%;
    height: auto;
}

/* Legal Checkbox */
body.woocommerce-checkout #legal {
    margin: 3px 3px 3px 4px;
}

/* Cart Info ausblenden (Germanized) */
body.woocommerce-checkout .wc-gzd-cart-info {
    display: none !important;
}

/* Bestellübersicht Tabelle */
body.woocommerce-checkout .shop_table {
    width: 90%;
    margin: 50px 30px auto;
    background-color: #fafafa;
    border-radius: 0;
    border: none;
}

body.woocommerce-checkout .shop_table th,
body.woocommerce-checkout .shop_table td {
    border-top: 1px solid #8c8c8c;
}

/* Thead ausblenden nur im Checkout */
body.woocommerce-checkout .shop_table thead {
    display: none;
}

/* Actions Spalte ausblenden */
body.woocommerce-checkout .shop_table td.actions {
    display: none;
}

/* Tabelle ohne Border (außer Variations-Tabelle) */
body.woocommerce-checkout .entry-content table:not(.variations) {
    border: none;
}

/* Button rechts ausrichten */
body.woocommerce-checkout .place-order {
    text-align: right;
    overflow: hidden;
}

body.woocommerce-checkout #place_order {
    float: right;
}

/* Preise in Tabelle rechts ausrichten */
body.woocommerce-checkout .shop_table td.product-total,
body.woocommerce-checkout .shop_table td.product-subtotal,
body.woocommerce-checkout .shop_table tfoot td,
body.woocommerce-checkout .shop_table .amount {
    text-align: right;
}

/* Zurück-Button Hover Underline */
body.woocommerce-checkout .prev-step-button.step-trigger:hover {
    text-decoration: underline;
}

/* Place Order Wrapper Padding */
body.woocommerce-checkout .form-row.place-order.wc-gzd-place-order {
    padding: 30px;
}

/* ========================================
   RESPONSIVE ANPASSUNGEN - CHECKOUT
   ======================================== */

/* Tablet Portrait & Mobile */
@media (max-width: 768px) {
    /* Zwei-Spalten Layout auf 100% ändern */
    body.woocommerce-checkout #billing_first_name_field,
    body.woocommerce-checkout #billing_last_name_field,
    body.woocommerce-checkout #billing_postcode_field,
    body.woocommerce-checkout #billing_city_field,
    body.woocommerce-checkout #billing_phone_field,
    body.woocommerce-checkout #billing_email_field,
    body.woocommerce-checkout #shipping_first_name_field,
    body.woocommerce-checkout #shipping_last_name_field,
    body.woocommerce-checkout #shipping_postcode_field,
    body.woocommerce-checkout #shipping_city_field {
        width: 100%;
        margin-right: 0;
    }

    /* Tabelle auf 100% Breite */
    body.woocommerce-checkout .shop_table {
        width: 100%;
        margin: 30px 0;
    }

    /* Place Order Padding reduzieren */
    body.woocommerce-checkout .form-row.place-order.wc-gzd-place-order {
        padding: 20px 15px;
    }

    /* Button Fullwidth auf Mobile */
    body.woocommerce-checkout #place_order {
        width: 100%;
        float: none;
    }

    body.woocommerce-checkout .place-order {
        text-align: center;
    }
}

/* Mobile Only */
@media (max-width: 480px) {
    /* Kleinere Überschriften */
    body.woocommerce-checkout h3 {
        font-size: 18px;
    }

    body.woocommerce-checkout h4 {
        font-size: 16px;
    }

    /* Produkt Bilder größer auf Mobile */
    body.woocommerce-checkout img.attachment-woocommerce_thumbnail {
        max-width: 80%;
    }
}

/* ========================================
   SINGLE PRODUCT PAGE - QUANTITY CONTROLS
   ROLLBACK: Legacy Quantity-Controls-Styles (pre-v2.0).
   Werden durch css/single-product.css (Pill-Optik mit !important) überschrieben.
   Scope: body.single-product — bleibt als strukturelle Referenz erhalten.
   ======================================== */

/* Wrapper für Mengen-Eingabe */
body.single-product .single-product-quantity-wrapper {
    margin-bottom: 20px;
}

/* Screen Reader Label */
body.single-product .single-product-quantity-wrapper .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Quantity Controls Container */
body.single-product .single-product-qty.custom-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 200px;
}

/* Plus/Minus Buttons */
body.single-product .single-product-qty .qty-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.single-product .single-product-qty .qty-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

body.single-product .single-product-qty .qty-btn:active {
    transform: scale(0.95);
}

body.single-product .single-product-qty .qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Input Field */
body.single-product .single-product-qty input.qty {
    width: 80px;
    text-align: center;
    padding: 8px 5px;
    border: 1px solid #ddd;
    font-size: 16px;
    border-radius: 3px;
    flex: 1;
    min-width: 60px;
}

body.single-product .single-product-qty input.qty:focus {
    outline: 2px solid #2D5F6F;
    outline-offset: 2px;
    border-color: #2D5F6F;
}

/* Add to Cart Button - volle Breite unter Quantity */
body.single-product form.cart .single_add_to_cart_button {
    width: 50%;
    margin-top: 15px;
    padding: 12px 24px;
    font-size: 16px;
    box-shadow: -4px 4px 0px 0px #28262c;
    border-radius: 0;
}

body.single-product form.cart .single_add_to_cart_button:hover {
    opacity: 0.9;
}

/* ========================================
   RESPONSIVE - SINGLE PRODUCT
   ======================================== */

/* Tablet */
@media (max-width: 768px) {
    body.single-product .single-product-qty.custom-quantity-wrapper {
        max-width: 180px;
    }

    body.single-product .single-product-qty .qty-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    body.single-product .single-product-qty input.qty {
        width: 70px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    body.single-product .single-product-quantity-wrapper {
        margin-bottom: 15px;
    }

    body.single-product .single-product-qty.custom-quantity-wrapper {
        max-width: 100%;
    }

    body.single-product .single-product-qty .qty-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    body.single-product .single-product-qty input.qty {
        flex: 1;
        min-width: 80px;
        font-size: 18px;
    }

    body.single-product form.cart .single_add_to_cart_button {
        padding: 14px 24px;
        font-size: 18px;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    body.single-product .single-product-qty .qty-btn,
    body.single-product .single-product-qty input.qty {
        border-width: 2px;
    }
}

/* ========================================
   WOOCOMMERCE CART PAGE - CUSTOM LAYOUT
   Scope: Nur Warenkorb-Seite betroffen
   ======================================== */

/* Cart Items Container */
body.woocommerce-cart .custom-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual Cart Item */
body.woocommerce-cart .cart-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
}

body.woocommerce-cart .cart-item:first-child {
    border-top: 1px solid #e5e5e5;
}

/* Produktbild */
body.woocommerce-cart .cart-item-image {
    width: 160px;
    height: 160px;
}

body.woocommerce-cart .cart-item-image a {
    display: block;
}

body.woocommerce-cart .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Rechte Seite - Details */
body.woocommerce-cart .cart-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Oberer Bereich */
body.woocommerce-cart .cart-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

body.woocommerce-cart .cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.woocommerce-cart .cart-item-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

body.woocommerce-cart .cart-item-name a {
    color: #28262c;
    text-decoration: none;
}

body.woocommerce-cart .cart-item-name a:hover {
    color: #c64752;
}

body.woocommerce-cart .stock-status.in-stock {
    color: #11645b;
    font-size: 14px;
}

body.woocommerce-cart .delivery-time {
    color: #666;
    font-size: 14px;
}

/* Remove Button */
body.woocommerce-cart .cart-item-remove .remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 25px;
    color: #c64752;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.woocommerce-cart .cart-item-remove .remove-btn:hover {
    background: #c64752;
    color: #fafafa;
}

/* Unterer Bereich */
body.woocommerce-cart .cart-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 16px;
}

/* Menge */
body.woocommerce-cart .cart-item-quantity {
    max-width: 200px;
}

body.woocommerce-cart .quantity-label {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    font-size: 12px;
}

/* Preis */
body.woocommerce-cart .cart-item-price {
    text-align: right;
}

body.woocommerce-cart .wc-gzd-cart-info.unit-price.unit-price-cart {
    display: none;
}

body.woocommerce-cart .cart-item-price .item-subtotal {
    font-size: 20px;
    font-weight: 700;
    color: #c64752;
}

body.woocommerce-cart .cart-item-price .item-unit-price {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Cart Actions */
body.woocommerce-cart .cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 16px;
    flex-wrap: wrap;
}

body.woocommerce-cart .cart-actions .coupon {
    display: flex;
    gap: 8px;
}

body.woocommerce-cart .cart-actions .coupon input {
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

body.woocommerce-cart .update-cart-btn {
    display: none !important;
}

body.woocommerce-cart .custom-quantity-wrapper {
    display: flex;
}

/* Plus/Minus Buttons - Angepasst an Single Product Style */
body.woocommerce-cart .qty-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 5px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    transition: all 0.2s ease;
    line-height: 1;
}

body.woocommerce-cart .qty-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

body.woocommerce-cart .qty-btn:active {
    transform: scale(0.95);
}

body.woocommerce-cart .qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Quantity Input */
body.woocommerce-cart .custom-qty-input {
    width: 65px;
    height: auto;
    text-align: center;
    border: none;
    border-bottom: 2px solid #28262c;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    margin: 0 10px;
    -moz-appearance: textfield;
}

body.woocommerce-cart .custom-qty-input::-webkit-outer-spin-button,
body.woocommerce-cart .custom-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.woocommerce-cart .custom-qty-input:focus {
    outline: none;
    border-bottom-color: #000;
}

/* ========================================
   RESPONSIVE - CART PAGE
   ======================================== */

/* Tablet & Mobile */
@media (max-width: 767px) {
    body.woocommerce-cart .cart-item {
        grid-template-columns: 120px 1fr;
        gap: 12px;
        padding: 16px 0;
    }

    body.woocommerce-cart .cart-item-image {
        width: 120px;
        height: 120px;
    }

    body.woocommerce-cart .cart-item-name {
        font-size: 14px;
    }

    body.woocommerce-cart .stock-status.in-stock,
    body.woocommerce-cart .delivery-time {
        font-size: 12px;
    }

    body.woocommerce-cart .cart-item-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    body.woocommerce-cart .cart-item-price {
        text-align: left;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.woocommerce-cart .cart-item-price .item-subtotal {
        font-size: 18px;
    }

    body.woocommerce-cart .cart-actions {
        flex-direction: column;
    }

    body.woocommerce-cart .cart-actions .coupon {
        width: 100%;
        flex-direction: column;
    }

    body.woocommerce-cart .cart-actions .coupon input,
    body.woocommerce-cart .cart-actions .coupon button {
        width: 100%;
    }

    body.woocommerce-cart .qty-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* ========================================
   CUSTOM SHOP SHORTCODES - DIVI LAYOUT
   Produktraster & Kategorie-Liste
   ======================================== */

/* Shop Wrapper */
.custom-shop-wrapper {
    width: 100%;
    max-width: 100%;
}

/* ========================================
   TOOLBAR (Suche, Filter, Sortierung)
   ======================================== */

.shop-toolbar {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #28262c30;
	box-shadow: 6px 6px 0px 0px #28262c20;
}

.shop-toolbar-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Suche Zeile (oben, volle Breite) */
.toolbar-search-row {
    width: 100%;
}

.toolbar-search {
    display: flex;
    gap: 5px;
    width: 100%;
}

/* Filter & Sortierung Zeile (unten, nebeneinander) */
.toolbar-filters-row {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: center;
}

.shop-search-input {
    flex: 1;
    padding: 10px 15px !important;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
	width: 100%;
	height: 38px;
}

.shop-search-input:focus {
    outline: 2px solid #2D5F6F;
    outline-offset: 2px;
    border-color: #2D5F6F;
}

.shop-search-btn {
    padding: 10px 10px;
    color: #c64752;
    background: #fafafa;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.shop-search-btn:hover {
    background: #c64752;
	color: #fafafa;
}

.shop-search-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Filter & Sortierung */
.toolbar-filter,
.toolbar-sort {
    flex: 1;
    min-width: 180px;
}

.shop-filter-select,
.shop-sort-select {
    width: 100%;
	height: 38px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.shop-filter-select:focus,
.shop-sort-select:focus {
    outline: 2px solid #2D5F6F;
    outline-offset: 2px;
    border-color: #2D5F6F;
}

/* ========================================
   PRODUKT GRID (3 Spalten)
   ======================================== */

.custom-shop-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.custom-shop-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.custom-shop-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.custom-shop-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Produkt Item - Gleiche Höhe mit Flexbox */
.shop-product-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-product-item:hover {
    box-shadow: 6px 6px 0px 0px #28262c20;
    transform: translateY(-5px);
}

.shop-product-item .product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.shop-product-item .product-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8f8f8;
}

.shop-product-item .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.shop-product-item:hover .product-image img {
    transform: scale(1.05);
}

.shop-product-item .product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 15px;
    color: #28262c;
    line-height: 1.4;
}

.shop-product-item .product-price {
    font-size: 18px;
    font-weight: 700;
    color: #c64752;
    margin: 0 15px 15px 15px;
}

.shop-product-item .product-price del {
    color: #999;
    font-weight: 400;
    font-size: 14px;
    margin-right: 8px;
}

/* Keine Produkte gefunden */
.no-products-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #f8f8f8;
    border-radius: 8px;
}

.no-products-found p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* ========================================
   PAGINATION
   ======================================== */

.shop-pagination {
    margin-top: 40px;
    text-align: center;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

.shop-pagination .page-numbers li {
    display: inline-block;
}

.shop-pagination .page-numbers a,
.shop-pagination .page-numbers span {
    display: inline-block;
    padding: 10px 15px !important;
    border-radius: 50%;
    text-decoration: none;
    color: #28262c !important;
    transition: all 0.3s ease;
}

.shop-pagination .page-numbers a:hover {
	text-decoration: underline;
}

.shop-pagination .page-numbers .current {
    background: #c64752;
    color: #fafafa !important;
    border-color: #c64752;
}

/* ========================================
   KATEGORIE-LISTE (Linke Spalte)
   ======================================== */

.custom-category-list {
    background: transparent;
    padding: 0px;
	margin: 0px;
}

.category-list-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #28262c;
    color: #28262c;
}

.category-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important
		;
}

.category-item {
    margin-bottom: 10px;
}

.category-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
	text-transform: uppercase;
    transition: all 0.3s ease;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
}

.category-item a .category-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.category-item a:hover {
    background: #c64752;
    color: #fafafa !important;
}

.category-item.is-active a {
    background: #c64752;
    color: #ffffff !important;
}

.category-item.is-active a .category-count {
    color: #ffffff !important;
}

.category-count {
    font-size: 12px;
    opacity: 0.8;
}

/* ========================================
   RESPONSIVE - SHOP SHORTCODES
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
    .custom-shop-grid.columns-3,
    .custom-shop-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .toolbar-filters-row {
        gap: 10px;
    }

    .toolbar-filter,
    .toolbar-sort {
        flex: 1;
        min-width: 150px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .custom-shop-grid,
    .custom-shop-grid.columns-2,
    .custom-shop-grid.columns-3,
    .custom-shop-grid.columns-4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .shop-toolbar {
        padding: 15px;
    }

    .toolbar-filters-row {
        flex-direction: column;
        gap: 12px;
    }

    .toolbar-filter,
    .toolbar-sort {
        width: 100%;
        min-width: 100%;
    }

    .shop-product-item .product-title {
        font-size: 14px;
    }

    .shop-product-item .product-price {
        font-size: 16px;
    }

    .custom-category-list {
        margin-bottom: 30px;
    }

    .category-list-title {
        font-size: 16px;
    }

    .category-item a {
        padding: 10px 12px;
        font-size: 14px;
    }

    .shop-pagination .page-numbers a,
    .shop-pagination .page-numbers span {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Very Small Mobile */
@media (max-width: 480px) {
    .shop-toolbar {
        padding: 12px;
    }

    .shop-search-input,
    .shop-filter-select,
    .shop-sort-select {
        font-size: 13px;
        padding: 8px 12px;
    }

    .shop-product-item .product-title {
        font-size: 13px;
        margin: 12px;
    }

    .shop-product-item .product-price {
        font-size: 15px;
        margin: 0 12px 12px 12px;
    }
}

/* ========================================
   AJAX SHOP FILTER - ZUSÄTZLICHE STYLES
   ======================================== */

/* Live-Suche Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 60px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.suggestion-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.suggestion-item:hover {
    background: #f8f8f8;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-image {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.suggestion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suggestion-image .no-image {
    width: 100%;
    height: 100%;
    background: #e5e5e5;
}

.suggestion-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.suggestion-title {
    font-size: 14px;
    font-weight: 600;
    color: #28262c;
    margin-bottom: 4px;
}

.suggestion-price {
    font-size: 13px;
    color: #c64752;
    font-weight: 600;
}

/* Search Input Wrapper */
.search-input-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
}

/* Pagination (Links + Buttons — SEO: echte <a href> Links, JS lädt per AJAX) */
.pagination-btn {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #28262c;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    margin: 0 4px;
    text-decoration: none;
}

.pagination-btn:hover:not(:disabled):not(.disabled):not(.active) {
    background: #2D5F6F;
    color: #fff;
    border-color: #2D5F6F;
}

.pagination-btn.active {
    background: #c64752;
    color: #fff;
    border-color: #c64752;
    cursor: default;
}

.pagination-btn:disabled,
.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Preisformat mit Germanized Klassen */
.shop-product-item .product-price .price.price-unit.smaller.wc-gzd-additional-info.wc-gzd-additional-info-loop {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #c64752;
}

.shop-product-item .product-price .price.price-unit.smaller.wc-gzd-additional-info.wc-gzd-additional-info-loop del {
    color: #999;
    font-weight: 400;
    font-size: 14px;
    margin-right: 8px;
}

/* Loading State */
.custom-shop-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Mobile Anpassungen */
@media (max-width: 767px) {
    .search-suggestions {
        right: 0;
    }

    .suggestion-item {
        padding: 10px;
        gap: 10px;
    }

    .suggestion-image {
        width: 50px;
        height: 50px;
    }

    .suggestion-title {
        font-size: 13px;
    }

    .suggestion-price {
        font-size: 12px;
    }

    .pagination-btn {
        padding: 8px 12px;
        font-size: 13px;
        margin: 0 2px;
    }
}

/* ========================================
   ORDER RECEIVED / DANKE-SEITE
   ======================================== */

/* Progress Bar ausblenden auf Danke-Seite */
body.woocommerce-order-received .dipi_htl_container {
    display: none !important;
}

/* Standard WooCommerce Danke-Text ausblenden (Fallback) */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
    display: none !important;
}

/* Eigene Überschrift */
.dct-thankyou-heading {
    font-size: 28px;
    font-weight: 700;
    color: #28262c;
    text-align: center;
    margin: 30px 0;
    padding: 0 20px;
}

/* Button Container */
.dct-thankyou-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 40px 0;
    flex-wrap: wrap;
    padding: 0 20px;
}

/* Primary Button - Home */
.dct-thankyou-buttons .dct-btn-home {
    background-color: #c64752;
    color: #28262c;
    box-shadow: -4px 4px 0px 0px #28262c;
    border-radius: 0;
    padding: 12px 30px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dct-thankyou-buttons .dct-btn-home:hover {
    opacity: 0.9;
}

/* Secondary Button - Widerruf */
.dct-thankyou-buttons .dct-btn-widerruf {
    background-color: transparent;
    color: #28262c;
    border: 2px solid #28262c;
    box-shadow: -4px 4px 0px 0px #28262c;
    border-radius: 0;
    padding: 12px 30px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dct-thankyou-buttons .dct-btn-widerruf:hover {
    background-color: #28262c;
    color: #fafafa;
}

/* Responsive - Danke-Seite */
@media (max-width: 768px) {
    .dct-thankyou-heading {
        font-size: 24px;
    }

    .dct-thankyou-buttons {
        flex-direction: column;
        align-items: center;
    }

    .dct-thankyou-buttons a.button {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dct-thankyou-heading {
        font-size: 20px;
    }
}

/* ========================================
   MOBILE PRODUKT SLIDER (mps-block)
   Shortcode: [mobile_populaere_produkte_slider]
   Sichtbar nur auf Mobile (max-width: 980px).
   Styles wurden aus dem PHP-Shortcode-Output ausgelagert (v2.1 Cleanup).
   ======================================== */

.mps-block { display: none; margin: 30px 0; }
@media (max-width: 980px) { .mps-block { display: block; } }

.mps-viewport {
    overflow: hidden !important;
    width: 100%;
    padding: 8px;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
}

.mps-viewport * {
    -webkit-user-drag: none;
    user-drag: none;
}

.mps-track {
    display: flex;
    will-change: transform;
}

.mps-track.mps-animating {
    transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

.mps-slide {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 10px;
}

.mps-card {
    display: block;
    text-decoration: none;
    background: #fafafa;
    border: 2px solid #2d5f6f;
    box-shadow: -5px 5px 0px 0px #2d5f6f;
    overflow: hidden;
    touch-action: pan-y !important;
}

.mps-card .mps-img {
    width: 100%;
    aspect-ratio: 1 / 0.85;
    overflow: hidden;
    background: #f1f1f1;
    pointer-events: none;
}

.mps-card .mps-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-user-drag: none;
}

.mps-card .mps-content {
    padding: 16px 18px 22px;
    pointer-events: none;
}

.mps-card .mps-name {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    font-style: italic;
    color: #28262c;
    margin-bottom: 6px;
}

.mps-card .mps-price,
.mps-card .mps-price * {
    font-size: 14px;
    line-height: 1.4;
    color: #28262c;
    font-weight: 500;
    display: inline;
}

.mps-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.mps-dots .mps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d8d8;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.mps-dots .mps-dot.active {
    background: #2d5f6f;
    transform: scale(1.15);
}