/**
 * NF-Digital Shop - Main Frontend Styles
 * All-in-One CSS für komplette Shop-Funktionalität
 */

/* ========================================
   1. BASIC LAYOUT & CONTAINER
   ======================================== */

/* Desktop Container */
@media (min-width: 769px) {
    .woocommerce.single-product .site-main,
    .woocommerce.single-product .elementor-location-single {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
}

/* Mobile Full Width */
@media (max-width: 768px) {
    .woocommerce.single-product .site-main,
    .woocommerce.single-product .elementor-location-single,
    body.woocommerce.single-product,
    body.single-product,
    html body.single-product #page,
    html body.single-product #content,
    html body.single-product .site-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }
    
    .elementor-widget-container {
        padding: 0 10px !important;
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    html, body, #page, #content, .site, .site-content, .site-main,
    .content-area, main, article {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body.single-product #nfdigital-product,
    body.single-product .woocommerce,
    body.single-product .product {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   2. PRODUCT LOOP/ARCHIVE STYLES
   ======================================== */

/* Archive/Shop Page - Content Area Spacing (für fixed Header) */
body.archive,
body.post-type-archive,
body.post-type-archive-product,
body.tax-product_cat,
body.woocommerce-shop {
    /* Content-Bereich nach unten verschieben wegen fixed Header */
}

body.archive .site-content,
body.post-type-archive .site-content,
body.post-type-archive-product .site-content,
body.tax-product_cat .site-content,
body.woocommerce-shop .site-content,
body.archive #content,
body.post-type-archive #content,
body.post-type-archive-product #content,
body.tax-product_cat #content,
body.woocommerce-shop #content {
    padding-top: 120px !important; /* Abstand zum fixed Header */
}

/* Product Title in Loop */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce h2.woocommerce-loop-product__title,
body.woocommerce-page h2.woocommerce-loop-product__title {
    font-size: 20px !important;
    min-height: 100px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   3. SINGLE PRODUCT STYLES
   ======================================== */

/* Product Title H1 - Remove left padding */
.single-product h1.product_title,
.single-product .product_title,
.woocommerce div.product h1.product_title,
.woocommerce-page div.product h1.product_title,
body.single-product h1 {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Product Gallery */
.nfdigital-gallery {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.nfdigital-main-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.nfdigital-main-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Thumbnails */
.nfdigital-thumbnails,
#thumbnailWrapper {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

/* Specific thumbnailWrapper styling */
div#thumbnailWrapper {
    margin: 10px 0;
}

.nfdigital-thumbnail {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.nfdigital-thumbnail.active {
    border-color: #2271b1;
}

.nfdigital-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   4. ADD TO CART BUTTON STYLES
   ======================================== */

.nfdigital-add-to-cart,
.single_add_to_cart_button,
.button.product_type_simple.add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
body.archive .button,
body.post-type-archive .button,
body.post-type-archive-product .button,
body.tax-product_cat .button,
body.woocommerce-shop .button {
    /* Farben OHNE !important - damit Admin-Settings greifen */

    /* Form-Properties mit !important */
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
}

.nfdigital-add-to-cart:hover,
.single_add_to_cart_button:hover,
.button.product_type_simple.add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
body.woocommerce ul.products li.product .button:hover,
body.woocommerce-page ul.products li.product .button:hover,
body.archive .button:hover,
body.post-type-archive .button:hover,
body.post-type-archive-product .button:hover,
body.tax-product_cat .button:hover,
body.woocommerce-shop .button:hover {
    /* Hover-Farben OHNE !important */
    transform: translateY(-2px) !important;
}

/* Loading State */
.nfdigital-add-to-cart.loading,
.single_add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.nfdigital-add-to-cart.loading::after,
.single_add_to_cart_button.loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ========================================
   5. VARIATION STYLES
   ======================================== */

.variations_form {
    margin: 20px 0;
}

.variations select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background: white;
}

.reset_variations {
    color: #666;
    text-decoration: underline;
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
}

/* ========================================
   6. PRICE DISPLAY
   ======================================== */

.price {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #2271b1 !important;
    margin: 15px 0 !important;
}

.price del,
del,
.woocommerce-Price-amount del,
span.woocommerce-Price-amount del {
    /* Nutze Admin Primary Color ohne !important */
    font-size: 0.8em !important;
    margin-right: 10px !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

.price ins {
    text-decoration: none !important;
}

/* B2B Tax Info */
.b2b-tax-info,
.price-vat-info {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin-top: 5px !important;
    display: block !important;
}

/* ========================================
   7. PRODUCT META INFO
   ======================================== */

.nfdigital-product-vat,
.nfdigital-product-delivery {
    font-size: 0.85rem;
    color: #666;
    margin: 5px 0;
    font-style: italic;
}

.product_meta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.product_meta > span {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
    color: #666;
}

/* ========================================
   8. MOBILE MENU FIXES
   ======================================== */

/* Navigation CSS komplett entfernt - Elementor hat volle Kontrolle */

/* ========================================
   9. QUANTITY INPUT
   ======================================== */

.quantity-cart-container,
div.quantity-cart-container,
.woocommerce .quantity-cart-container,
.single-product .quantity-cart-container,
body .quantity-cart-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.quantity input[type="number"] {
    width: 60px;
    text-align: center;
    border: none;
    padding: 10px 5px;
    font-size: 16px;
    -moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity .minus,
.quantity .plus {
    background: #f5f5f5;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    transition: all 0.3s ease;
}

.quantity .minus:hover,
.quantity .plus:hover {
    background: #e0e0e0;
}

/* ========================================
   10. NOTICES & MESSAGES
   ======================================== */

.woocommerce-notices-wrapper {
    margin: 20px 0;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    position: relative;
    list-style: none;
}

.woocommerce-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.woocommerce-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.woocommerce-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* ========================================
   11. CUSTOM HTML CONTENT
   ======================================== */

.nfdigital-product-html,
.nfdigital-product-html-single {
    margin: 10px 0;
}

/* Shop loop specific HTML */
.woocommerce ul.products li.product .nfdigital-product-html {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 5px 0;
}

/* ========================================
   12. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .price {
        font-size: 20px !important;
    }
    
    .nfdigital-thumbnails {
        justify-content: center;
    }
    
    .product_meta {
        font-size: 12px;
    }
}

/* ========================================
   13. CSS VARIABLES FOR CUSTOMIZATION
   ======================================== */

:root {
    --nfdigital-primary: #2271b1;
    --nfdigital-primary-dark: #135e96;
    --nfdigital-secondary: #ff9800;
    --nfdigital-success: #4caf50;
    --nfdigital-error: #f44336;
    --nfdigital-text: #333;
    --nfdigital-text-light: #666;
    --nfdigital-border: #ddd;
    --nfdigital-background: #f5f5f5;
}

/* ========================================
   14. MOBILE MENU FIX (700PX BREAKPOINT)
   ======================================== */

/* ===================================================
   NAVIGATION - KOMPLETT ENTFERNT
   =================================================== */

/* ALLE Navigation CSS wurde entfernt! */
/* Elementor hat die KOMPLETTE Kontrolle über das Menü */
/* Keine Styles die Elementor's Breakpoints stören könnten */

/* ========================================
   15. ARCHIVE/SHOP SPECIFIC STYLES
   ======================================== */

/* Streichpreis auf Archive-Seiten - Respektiert Admin-Farben */
body.archive .price del,
body.post-type-archive .price del,
body.post-type-archive-product .price del,
body.tax-product_cat .price del,
body.woocommerce-shop .price del,
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del,
body.woocommerce ul.products li.product .price del,
body.woocommerce-page ul.products li.product .price del,
.woocommerce ul.products li.product del,
.woocommerce-page ul.products li.product del,
body.woocommerce ul.products li.product del,
body.woocommerce-page ul.products li.product del,
ul.products li.product .price del,
ul.products li.product del,
.elementor ul.products li.product .price del,
.elementor ul.products li.product del,
html body .woocommerce ul.products li.product .price del,
html body .woocommerce ul.products li.product del {
    /* Farbe OHNE !important - nutzt Admin Primary Color */
    font-size: 0.8em !important;
    margin-right: 10px !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

/* Elementor-spezifische Streichpreis-Regeln */
.elementor-element .woocommerce ul.products li.product .price del,
.elementor-element .woocommerce ul.products li.product del,
[class*="elementor-"] ul.products li.product .price del,
[class*="elementor-"] ul.products li.product del,
.elementor-section ul.products li.product .price del,
.elementor-section ul.products li.product del {
    /* Farbe OHNE !important - nutzt Admin Primary Color */
    font-size: 0.8em !important;
    margin-right: 10px !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

/* MwSt-Hinweis auf Archive-Seiten - Höchste Spezifität */
body.archive .woocommerce-price-suffix,
body.post-type-archive .woocommerce-price-suffix,
body.post-type-archive-product .woocommerce-price-suffix,
body.tax-product_cat .woocommerce-price-suffix,
body.woocommerce-shop .woocommerce-price-suffix,
.woocommerce ul.products li.product .woocommerce-price-suffix,
.woocommerce-page ul.products li.product .woocommerce-price-suffix,
body.woocommerce ul.products li.product .woocommerce-price-suffix,
body.woocommerce-page ul.products li.product .woocommerce-price-suffix,
body.archive .price-vat-info,
body.post-type-archive .price-vat-info,
body.post-type-archive-product .price-vat-info,
body.tax-product_cat .price-vat-info,
body.woocommerce-shop .price-vat-info {
    font-size: 0.75rem !important;
    color: #666 !important;
    margin-top: 3px !important;
    display: block !important;
    font-style: normal !important;
    line-height: 1.3 !important;
}