/**
 * Shop Page Styles
 *
 * Brand-consistent styling for Schilcher Customer Catalog shop page
 * Uses centralized CSS variables from schilcher-variables.css for consistency
 * All sizes use rem units for proper 60% scaling
 * Strictly enforces 5-size type scale for consistency
 *
 * @package Schilcher_Customer_Catalog
 * @since 1.2.6
 */

/* =======================
   Shop Page Container
   ======================= */

.schilcher-shop-page {
    font-family: var(--schilcher-font-family);
    max-width: 100%;
    width: 100%;
    margin: 0 -4.375rem !important;  /* -70px → -4.375rem */
    padding: var(--schilcher-space-2xl) 4.375rem !important;  /* 30px 70px */
    color: var(--schilcher-text-primary);
    box-sizing: border-box;
}

/* Mobile-responsive container margins */
@media (max-width: 768px) {
    .schilcher-shop-page {
        margin: 0 -2.5rem !important;  /* -40px for tablets */
        padding: var(--schilcher-space-xl) 2.5rem !important;  /* 25px 40px */
    }
}

@media (max-width: 480px) {
    .schilcher-shop-page {
        margin: 0 -1.25rem !important;  /* -20px for mobile */
        padding: var(--schilcher-space-lg) 1.25rem !important;  /* 20px 20px */
    }
}

/* =======================
   Page Header
   ======================= */

.shop-header {
    margin-bottom: var(--schilcher-space-3xl);  /* 40px → 2.5rem */
    padding-bottom: var(--schilcher-space-lg);  /* 20px → 1.25rem */
    border-bottom: 2px solid var(--schilcher-border-color);
    text-align: center;
}

.shop-header h1 {
    font-size: var(--schilcher-text-display);  /* DISPLAY - page title */
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-sm) 0;
    font-weight: var(--schilcher-font-weight-bold);
    letter-spacing: -0.5px;
}

.shop-subtitle {
    font-size: var(--schilcher-text-body);  /* 16px → 1rem */
    color: var(--schilcher-text-secondary);
    margin: 0;
    font-weight: var(--schilcher-font-weight-normal);
}

/* =======================
   Empty State
   ======================= */

.shop-empty-state {
    text-align: center;
    padding: 5rem var(--schilcher-space-lg);  /* 80px 20px */
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-lg);  /* 12px → 0.75rem */
    max-width: 600px;
    margin: var(--schilcher-space-3xl) auto;  /* 40px auto */
}

.shop-empty-state .empty-icon {
    margin-bottom: var(--schilcher-space-2xl);  /* 30px */
    color: var(--schilcher-text-secondary);
    opacity: 0.5;
}

.shop-empty-state h2 {
    font-size: var(--schilcher-text-display);  /* 28px → 1.75rem */
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-md) 0;  /* 15px */
    font-weight: var(--schilcher-font-weight-semibold);
}

.shop-empty-state p {
    font-size: var(--schilcher-text-body);  /* 16px → 1rem */
    color: var(--schilcher-text-secondary);
    margin: 0;
    line-height: var(--schilcher-line-height-relaxed);
}

/* =======================
   Katalog Login Prompt
   ======================= */

.schilcher-katalog-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 3rem;
    background: linear-gradient(135deg, var(--schilcher-bg-primary) 0%, var(--schilcher-bg-secondary) 100%);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-xl);
    box-shadow: 0 4px 20px rgba(73, 57, 27, 0.08);
    max-width: 480px;
    margin: 4rem auto;
    font-family: var(--schilcher-font-family);
}

.schilcher-katalog-login-prompt .login-prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: var(--schilcher-space-2xl);
    background: var(--schilcher-bg-secondary);
    border-radius: 50%;
    color: var(--schilcher-primary);
}

.schilcher-katalog-login-prompt .login-prompt-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 1.5;
}

.schilcher-katalog-login-prompt h2 {
    font-size: var(--schilcher-text-display);
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-md) 0;
    font-weight: var(--schilcher-font-weight-bold);
    letter-spacing: -0.3px;
}

.schilcher-katalog-login-prompt p {
    font-size: var(--schilcher-text-body);
    color: var(--schilcher-text-secondary);
    margin: 0 0 var(--schilcher-space-3xl) 0;
    line-height: var(--schilcher-line-height-relaxed);
    max-width: 320px;
}

.schilcher-katalog-login-prompt .login-prompt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--schilcher-space-md) var(--schilcher-space-3xl);
    background: var(--schilcher-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--schilcher-radius-md);
    font-size: var(--schilcher-text-body);
    font-weight: var(--schilcher-font-weight-semibold);
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(73, 57, 27, 0.15);
}

.schilcher-katalog-login-prompt .login-prompt-button:hover {
    background: var(--schilcher-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(73, 57, 27, 0.2);
}

.schilcher-katalog-login-prompt .login-prompt-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(73, 57, 27, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .schilcher-katalog-login-prompt {
        margin: 2rem auto;
        padding: 3rem 2rem;
        max-width: calc(100% - 2rem);
    }

    .schilcher-katalog-login-prompt h2 {
        font-size: var(--schilcher-text-heading);
    }
}

/* =======================
   Shop Container Layout
   ======================= */

.shop-container {
    display: grid;
    grid-template-columns: 20.125rem 1fr;  /* 322px → 20.125rem (15% wider) */
    gap: var(--schilcher-space-3xl);  /* 40px → 2.5rem */
    align-items: start;
}

@media (max-width: 992px) {
    .shop-container {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* =======================
   Sidebar Navigation
   ======================= */

.shop-sidebar {
    position: sticky;
    top: 6.25rem;  /* 100px → 6.25rem */
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    padding: var(--schilcher-space-xl);  /* 25px */
    box-shadow: var(--schilcher-shadow-md);
    max-height: calc(100vh - 7.5rem);  /* 120px → 7.5rem */
    overflow-y: auto;
}

.sidebar-title {
    font-size: var(--schilcher-text-heading);  /* 20px → 1.25rem */
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-lg) 0;  /* 20px */
    font-weight: var(--schilcher-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-xs);  /* 8px → 0.5rem */
}

.category-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--schilcher-space-sm);  /* 12px → 0.75rem */
    padding: var(--schilcher-space-sm) var(--schilcher-space-md);  /* 12px 15px */
    background: var(--schilcher-bg-primary);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    color: var(--schilcher-text-primary);
    text-decoration: none;
    transition: var(--schilcher-transition-base);
    border: 2px solid transparent;
    cursor: pointer;
}

.category-nav-item:hover {
    background: var(--schilcher-bg-tertiary);
    transform: translateX(var(--schilcher-space-xs));  /* 5px */
}

.category-nav-item.active {
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
    font-weight: var(--schilcher-font-weight-semibold);
    border-color: var(--schilcher-warm-brown);
}

.category-name {
    font-size: var(--schilcher-text-body);  /* 15px → 0.9375rem */
    font-weight: var(--schilcher-font-weight-medium);
}

.category-count {
    font-size: var(--schilcher-text-small);  /* 13px */
    color: var(--schilcher-text-secondary);
    font-weight: var(--schilcher-font-weight-semibold);
    flex-shrink: 0;
    margin-left: auto;
}

.category-nav-item.active .category-count {
    color: var(--schilcher-primary-teal);
}

/* Mobile Sidebar - Horizontal Scroll */
@media (max-width: 992px) {
    .shop-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        padding: var(--schilcher-space-lg);  /* 20px */
        margin-bottom: var(--schilcher-space-2xl);  /* 30px */
        overflow-x: auto;
        overflow-y: visible;
    }

    .shop-sidebar::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        background: linear-gradient(to right, rgba(254, 248, 231, 0), rgba(254, 248, 231, 1));
        pointer-events: none;
        z-index: 1;
    }

    .sidebar-title {
        font-size: var(--schilcher-text-body);  /* 18px → 1.125rem */
        margin-bottom: var(--schilcher-space-md);  /* 15px */
    }

    .sidebar-title::after {
        content: ' →';
        font-size: 0.875rem;
        color: var(--schilcher-text-secondary);
        margin-left: var(--schilcher-space-xs);
        opacity: 0.6;
    }

    .category-navigation {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--schilcher-space-sm);  /* 10px */
        padding-bottom: var(--schilcher-space-sm);
        padding-right: 60px;  /* Space for gradient fade */
        -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
        scrollbar-width: thin;
        scrollbar-color: var(--schilcher-warm-brown) transparent;
    }

    .category-navigation::-webkit-scrollbar {
        height: 6px;
    }

    .category-navigation::-webkit-scrollbar-track {
        background: transparent;
    }

    .category-navigation::-webkit-scrollbar-thumb {
        background: var(--schilcher-warm-brown);
        border-radius: 3px;
    }

    .category-nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .category-nav-item:hover {
        transform: translateY(-2px);
    }
}

/* =======================
   Main Content Area
   ======================= */

.shop-content {
    display: flex;
    flex-direction: column;
    gap: 5rem;  /* 80px → 5rem */
    overflow: visible;
}

/* =======================
   Category Section
   ======================= */

.category-section {
    scroll-margin-top: 5rem;  /* 80px → 5rem */
    overflow: visible;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--schilcher-space-xl);  /* 25px → 1.5625rem */
    padding-bottom: var(--schilcher-space-md);  /* 15px */
    border-bottom: 3px solid var(--schilcher-border-color);
}

.category-title {
    font-size: var(--schilcher-text-display);  /* 28px → 1.75rem */
    color: var(--schilcher-text-primary);
    margin: 0;
    font-weight: var(--schilcher-font-weight-bold);
    letter-spacing: -0.5px;
}

.category-count-badge {
    background: var(--schilcher-bg-tertiary);
    color: var(--schilcher-text-primary);
    padding: var(--schilcher-space-xs) var(--schilcher-space-md);  /* 8px 16px */
    border-radius: var(--schilcher-radius-full);  /* 20px pill */
    font-size: var(--schilcher-text-body);  /* 14px */
    font-weight: var(--schilcher-font-weight-semibold);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--schilcher-space-sm);  /* 10px */
    }

    .category-title {
        font-size: var(--schilcher-text-heading);  /* 24px → 1.5rem */
    }
}

/* =======================
   Products Grid
   ======================= */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--schilcher-space-xl);  /* 24px → 1.5rem */
    overflow: visible;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--schilcher-space-md);  /* 16px → 1rem */
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* =======================
   Product Card
   ======================= */

.product-card {
    position: relative;
    background: var(--schilcher-bg-primary);
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    padding: var(--schilcher-space-md);  /* 16px → 1rem */
    box-shadow: var(--schilcher-shadow-sm);
    transition: var(--schilcher-transition-slow);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: visible;
    z-index: var(--schilcher-z-base);
}

.product-card:hover {
    box-shadow: var(--schilcher-shadow-lg);
    transform: translateY(-0.25rem);  /* -4px */
}

.product-card.overlay-active {
    z-index: 10000;
    box-shadow: var(--schilcher-shadow-2xl);
}

/* Out of Stock Card */
.product-card.out-of-stock {
    opacity: 0.6;
    cursor: default;
    background: var(--schilcher-bg-tertiary);
}

.product-card.out-of-stock:hover {
    transform: none;
    box-shadow: var(--schilcher-shadow-sm);
}

/* =======================
   Skeleton Loading States
   ======================= */

.product-card.skeleton {
    pointer-events: none;
    cursor: default;
    animation: none;
}

.product-card.skeleton:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(73, 57, 27, 0.08);
}

/* Skeleton shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-element {
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e0e0e0 40px,
        #f0f0f0 80px
    );
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* Skeleton Image */
.skeleton-image {
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e0e0e0 40px,
        #f0f0f0 80px
    );
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

/* Skeleton Text Elements */
.skeleton-text {
    height: 16px;
    margin: 8px 0;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e0e0e0 40px,
        #f0f0f0 80px
    );
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}

.skeleton-title {
    height: 20px;
    width: 90%;
    margin-bottom: 12px;
}

.skeleton-sku {
    height: 14px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-price {
    height: 24px;
    width: 70%;
    margin: 12px 0;
}

/* Skeleton Buttons */
.skeleton-button {
    height: 40px;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #e0e0e0 40px,
        #f0f0f0 80px
    );
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
    margin: 4px 0;
}

.skeleton-quantity {
    height: 36px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-cart {
    height: 44px;
    width: 100%;
}

/* Loading state for category sections */
.category-section.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Fade transitions */
.products-grid {
    transition: opacity 0.3s ease-out;
}

.products-grid.fading-out {
    opacity: 0;
}

.products-grid.fading-in {
    opacity: 1;
}

/* Empty category message */
.shop-empty-category {
    text-align: center;
    padding: 60px 20px;
    background: #fef8e7;
    border-radius: 12px;
    color: #876c4b;
    font-size: var(--schilcher-text-body);
    grid-column: 1 / -1;
}

.out-of-stock-badge {
    position: absolute;
    top: var(--schilcher-space-sm);  /* 12px */
    left: var(--schilcher-space-sm);
    background: var(--schilcher-error);
    color: #ffffff;
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 6px 12px */
    border-radius: var(--schilcher-radius-full);  /* 20px pill */
    font-size: var(--schilcher-text-small);  /* 11px */
    font-weight: var(--schilcher-font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-xs);  /* 5px */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

.out-of-stock-badge svg {
    flex-shrink: 0;
}

/* Seasonal Product Badge - Out of Stock */
.out-of-stock-badge.seasonal-badge {
    background: #fff3cd;  /* Light yellow/orange background */
    border: 2px solid var(--schilcher-warning, #ffc107);
    color: #856404;
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 6px 12px */
    gap: 0;
    text-transform: none;
    letter-spacing: normal;
    flex-direction: row;
    align-items: flex-start;
    min-width: 140px;
}

.seasonal-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seasonal-badge-title {
    font-size: var(--schilcher-text-small);  /* 11px */
    font-weight: var(--schilcher-font-weight-bold);
    text-transform: uppercase;
}

.seasonal-badge-dates {
    font-size: var(--schilcher-text-tiny);  /* 10px */
    font-weight: var(--schilcher-font-weight-normal);
    white-space: nowrap;
}

.out-of-stock-badge.seasonal-badge > svg {
    margin-right: var(--schilcher-space-xs);  /* 5px */
    margin-top: 2px;
}

.out-of-stock-badge.seasonal-badge svg {
    flex-shrink: 0;
    stroke: #856404;
}

/* Mobile responsive for seasonal badge */
@media (max-width: 768px) {
    .out-of-stock-badge.seasonal-badge {
        min-width: 140px;
        padding: 6px 12px;
    }

    .seasonal-badge-title {
        font-size: 13px;  /* Increased from 10px for better readability */
    }

    .seasonal-badge-dates {
        font-size: 12px;  /* Increased from 9px for better readability */
    }

    .out-of-stock-badge.seasonal-badge svg {
        width: 16px;
        height: 16px;
    }
}

/* =======================
   Product Seasonal Info Section (Card Body)
   ======================= */

.product-seasonal-info {
    background: #fff9f0;
    border: 1px solid var(--schilcher-warm-brown);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    padding: var(--schilcher-space-md);  /* 16px */
    margin-top: var(--schilcher-space-sm);  /* 12px */
    margin-bottom: var(--schilcher-space-sm);
}

.seasonal-info-message {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-sm);  /* 10px */
    margin-bottom: var(--schilcher-space-sm);
    padding-bottom: var(--schilcher-space-sm);
    border-bottom: 1px solid var(--schilcher-light-brown);
}

.seasonal-info-message svg {
    flex-shrink: 0;
    stroke: #856404;  /* Match badge clock icon color */
}

.seasonal-info-message span {
    font-size: var(--schilcher-text-body);  /* 16px */
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-primary-text-brown);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.seasonal-availability-text {
    font-size: var(--schilcher-text-small);  /* 13px */
    line-height: var(--schilcher-line-height-relaxed);
    color: var(--schilcher-primary-text-brown);
    margin: 0 0 var(--schilcher-space-sm) 0;
}

.seasonal-availability-text strong {
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-text-primary);
}

.seasonal-contact-intro {
    font-size: var(--schilcher-text-small);  /* 13px */
    line-height: var(--schilcher-line-height-normal);
    color: var(--schilcher-primary-text-brown);
    margin: 0 0 var(--schilcher-space-sm) 0;
    font-weight: var(--schilcher-font-weight-medium);
}

/* Contact actions already styled in NON-CATALOG PRODUCT CARDS section (lines 2472-2527) */
/* Using shared .contact-actions and .contact-btn styles */

/* Mobile responsive for seasonal info section */
@media (max-width: 768px) {
    .product-seasonal-info {
        padding: var(--schilcher-space-sm);  /* 12px */
    }

    .seasonal-info-message {
        gap: var(--schilcher-space-xs);  /* 8px */
        margin-bottom: var(--schilcher-space-xs);
        padding-bottom: var(--schilcher-space-xs);
    }

    .seasonal-info-message svg {
        width: 18px;
        height: 18px;
    }

    .seasonal-info-message span {
        font-size: var(--schilcher-text-small);  /* 13px */
    }

    .seasonal-availability-text,
    .seasonal-contact-intro {
        font-size: var(--schilcher-text-small);  /* 13px */
        margin-bottom: var(--schilcher-space-xs);
    }
}

/* =======================
   Seasonal Product Notice
   ======================= */

.schilcher-seasonal-notice {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-sm);  /* 10px */
    padding: var(--schilcher-space-md) var(--schilcher-space-lg);  /* 15px 20px */
    border-radius: var(--schilcher-radius-md);  /* 8px */
    font-size: var(--schilcher-text-body);  /* 16px */
    font-weight: var(--schilcher-font-weight-semibold);
    margin: var(--schilcher-space-lg) 0;  /* 20px 0 */
    border: 2px solid;
}

.schilcher-seasonal-notice svg {
    flex-shrink: 0;
}

/* In Season - Green Badge */
.schilcher-seasonal-notice.in-season {
    background: #e8f5e9;
    border-color: #2e7d32;
    color: #2e7d32;
}

.schilcher-seasonal-notice.in-season svg {
    stroke: #2e7d32;
}

/* Out of Season - Orange/Warning Badge */
.schilcher-seasonal-notice.out-of-season {
    background: #fff3cd;
    border-color: var(--schilcher-warning);
    color: #856404;
}

.schilcher-seasonal-notice.out-of-season svg {
    stroke: #856404;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .schilcher-seasonal-notice {
        font-size: var(--schilcher-text-small);  /* 14px */
        padding: var(--schilcher-space-sm) var(--schilcher-space-md);  /* 12px 16px */
        margin: var(--schilcher-space-md) 0;  /* 15px 0 */
    }

    .schilcher-seasonal-notice svg {
        width: 14px;
        height: 14px;
    }
}

/* =======================
   Product Image
   ======================= */

.product-image {
    position: relative;
    width: 100%;
    height: 11.25rem;  /* 180px → 11.25rem */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--schilcher-space-md);  /* 15px */
    border-radius: var(--schilcher-radius-md);  /* 8px */
    overflow: hidden;
    background: var(--schilcher-bg-tertiary);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--schilcher-transition-slow);
}

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

.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--schilcher-text-secondary);
    opacity: 0.3;
}

/* =======================
   Product Attribute Icons
   ======================= */

.product-attribute-icons {
    position: absolute;
    /* Position at bottom of product-image area (padding + image height - icon height - margin) */
    top: calc(var(--schilcher-space-md) + 11.25rem - 3rem - var(--schilcher-space-xs));
    left: calc(var(--schilcher-space-md) + var(--schilcher-space-xs));
    display: flex;
    flex-direction: row;  /* horizontal layout */
    gap: var(--schilcher-space-xs);  /* 6px gap between icons */
    z-index: 10;
}

.product-icon {
    width: 3rem !important;  /* 48px */
    height: 3rem !important;
    min-width: 3rem;
    max-width: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    border-radius: var(--schilcher-radius-sm);  /* rounded corners, not circle */
    background: var(--schilcher-bg-primary);
    padding: 3px;
    box-shadow: var(--schilcher-shadow-sm);
    object-fit: contain !important;
    border: 1px solid var(--schilcher-border-color);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.product-icon:hover {
    transform: scale(1.25);
    box-shadow: var(--schilcher-shadow-md);
    z-index: 10;
}

.product-icon-milk {
    /* Milk type icons (cow, goat, sheep, buffalo) */
}

.product-icon-bio {
    /* Organic certification icons (DB, DD, DN, DV) */
}

.product-icon-country {
    /* Country flag icons */
}

/* Mobile responsive for product icons */
@media (max-width: 768px) {
    .product-attribute-icons {
        bottom: var(--schilcher-space-xs);
        left: var(--schilcher-space-xs);
        gap: 4px;
    }

    .product-icon {
        width: 2rem !important;  /* 32px - slightly smaller on mobile */
        height: 2rem !important;
        min-width: 2rem;
        max-width: 2rem;
        min-height: 2rem;
        max-height: 2rem;
    }
}

@media (max-width: 480px) {
    .product-icon {
        width: 1.75rem !important;  /* 28px - smaller on small mobile */
        height: 1.75rem !important;
        min-width: 1.75rem;
        max-width: 1.75rem;
        min-height: 1.75rem;
        max-height: 1.75rem;
    }
}

/* =======================
   Product Info
   ======================= */

.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);  /* 12px - space between major sections */
    flex: 1;
}

/* Product Header - Name + SKU grouped with no space */
.product-header {
    display: flex;
    flex-direction: column;
    gap: 0;  /* No space between name and SKU */
    line-height: 1;  /* Tight line-height for the container */
}

.product-name {
    font-size: var(--schilcher-text-body);  /* 16px → 1rem */
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.2;  /* Tight line-height to minimize space */
    min-height: 2.75rem;  /* 44px → 2.75rem */
    display: flex;
    align-items: flex-end;  /* Align text to bottom of min-height box */
}

.product-name a {
    color: var(--schilcher-text-primary);
    text-decoration: none;
    transition: var(--schilcher-transition-base);
    line-height: 1.2;  /* Match parent line-height */
}

.product-name a:hover {
    color: var(--schilcher-text-secondary);
}

.product-sku {
    font-size: var(--schilcher-text-small);  /* 13px */
    color: var(--schilcher-text-secondary);
    margin: 0;
    padding: 0;
    line-height: 1.2;  /* Tight line-height */
    font-weight: var(--schilcher-font-weight-medium);
}

/* =======================
   Product Price
   ======================= */

.product-price {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-xs);  /* 6px - space between price sections */
    margin: 0;
}

/* Price Group - Unit + Effective prices grouped with no space */
.price-group {
    display: flex;
    flex-direction: column;
    gap: 0;  /* No space between unit price and effective price */
}

/* Unit Price Row */
.unit-price-row,
.effective-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;  /* 4px gap between elements in each row */
    flex-wrap: wrap;
}

.price-amount {
    font-size: var(--schilcher-text-body);  /* Reduced from heading to body size */
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-text-primary);
}

.price-unit {
    font-size: var(--schilcher-text-small);  /* Reduced from body to small size */
    font-weight: var(--schilcher-font-weight-normal);
    color: var(--schilcher-text-secondary);
}

.price-label {
    font-size: var(--schilcher-text-small);  /* Small size for labels */
    color: var(--schilcher-text-secondary);
    font-weight: var(--schilcher-font-weight-medium);
}

.promotion-badge {
    background: var(--schilcher-accent-yellow);
    color: var(--schilcher-text-primary);
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 4px 10px */
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    font-size: var(--schilcher-text-small);  /* 11px */
    font-weight: var(--schilcher-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--schilcher-border-color-strong);
}

/* =======================
   Product Packaging Unit
   ======================= */

.product-packaging-unit {
    font-size: var(--schilcher-text-small);  /* 13px */
    color: var(--schilcher-text-secondary);
    margin: var(--schilcher-space-xs) 0 var(--schilcher-space-xs) 0;  /* 6px 0 8px 0 */
    line-height: var(--schilcher-line-height-normal);
}

.product-packaging-unit strong {
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    margin-right: var(--schilcher-space-xs);  /* 4px */
}

/* =======================
   Product Actions
   ======================= */

.product-actions {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);  /* 10px */
    margin-top: auto;
    padding-top: var(--schilcher-space-sm);  /* 12px */
}

.product-actions-disabled {
    margin-top: auto;
    padding-top: var(--schilcher-space-sm);
}

.more-info-btn {
    display: block;
    background: var(--schilcher-bg-tertiary);
    color: var(--schilcher-text-secondary);
    text-align: center;
    padding: var(--schilcher-space-sm) var(--schilcher-space-md);  /* 12px 16px */
    font-size: var(--schilcher-text-body);  /* 14px */
    font-weight: var(--schilcher-font-weight-semibold);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    text-decoration: none;
    transition: var(--schilcher-transition-base);
    border: 2px solid var(--schilcher-border-color-strong);
}

.more-info-btn:hover {
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
}

/* =======================
   Quantity Selector
   ======================= */

.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.quantity-btn {
    background: var(--schilcher-bg-tertiary);
    border: 2px solid var(--schilcher-border-color-strong);
    color: var(--schilcher-text-primary);
    width: 2.75rem;  /* 44px → 2.75rem (mobile-friendly touch target) */
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--schilcher-transition-base);
    font-size: var(--schilcher-text-body);  /* 18px → 1.125rem */
    font-weight: var(--schilcher-font-weight-bold);
    padding: 0;
}

.quantity-btn:hover {
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
}

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

.quantity-minus {
    border-radius: var(--schilcher-radius-md) 0 0 var(--schilcher-radius-md);  /* 8px rounded left */
    border-right: none;
    margin-right: 0 !important;
}

.quantity-plus {
    border-radius: 0 var(--schilcher-radius-md) var(--schilcher-radius-md) 0;  /* 8px rounded right */
    border-left: none;
}

.quantity-input {
    width: 3.75rem;  /* 60px → 3.75rem */
    height: 2.75rem;  /* 44px → 2.75rem (mobile-friendly touch target) */
    text-align: center;
    border: 2px solid var(--schilcher-border-color-strong);
    border-left: none;
    border-right: none;
    font-size: var(--schilcher-text-body);  /* 15px */
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    background: var(--schilcher-bg-primary);
    -moz-appearance: textfield;
    transition: var(--schilcher-transition-base);
}

.quantity-input:focus {
    outline: none;
    background: var(--schilcher-bg-secondary);
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =======================
   Add to Cart Button
   ======================= */

.add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--schilcher-space-xs);  /* 8px */
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
    padding: var(--schilcher-space-sm) var(--schilcher-space-md);  /* 12px 16px */
    font-size: var(--schilcher-text-body);  /* 14px */
    font-weight: var(--schilcher-font-weight-semibold);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    border: none;
    cursor: pointer;
    transition: var(--schilcher-transition-slow);
    position: relative;
    overflow: hidden;
}

.add-to-cart-btn:hover {
    background: var(--schilcher-text-primary);  /* Darker brown on hover */
    transform: translateY(-2px);
    box-shadow: var(--schilcher-shadow-md);
}

.add-to-cart-btn:active {
    transform: translateY(0);
}

.add-to-cart-btn svg {
    flex-shrink: 0;
}

.add-to-cart-btn.queued {
    pointer-events: none;
    background: #a88b6b;
    opacity: 0.8;
}

.add-to-cart-btn.queued .btn-text {
    opacity: 0.7;
}

.add-to-cart-btn.queued::after {
    content: '';
    position: absolute;
    right: var(--schilcher-space-sm);  /* 10px */
    top: 50%;
    transform: translateY(-50%);
    width: var(--schilcher-space-xs);  /* 8px */
    height: var(--schilcher-space-xs);
    background: var(--schilcher-primary-teal);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.8);
    }
}

.add-to-cart-btn.loading {
    pointer-events: none;
}

.add-to-cart-btn.loading .btn-text {
    opacity: 0;
}

.add-to-cart-btn.loading::after {
    content: '';
    position: absolute;
    width: var(--schilcher-space-md);  /* 16px → 1rem */
    height: var(--schilcher-space-md);
    border: 2px solid var(--schilcher-primary-teal);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =======================
   Product Page Link
   ======================= */

.product-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--schilcher-space-xs);  /* 8px */
    color: var(--schilcher-text-secondary);
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 8px 12px */
    font-size: var(--schilcher-text-small);  /* smaller text */
    font-weight: var(--schilcher-font-weight-normal);
    text-decoration: none;
    transition: var(--schilcher-transition-base);
    border-radius: var(--schilcher-radius-md);  /* 8px */
}

.product-page-link:hover {
    color: var(--schilcher-warm-brown);
    background: var(--schilcher-bg-tertiary);
}

.product-page-link svg {
    flex-shrink: 0;
    transition: var(--schilcher-transition-base);
}

.product-page-link:hover svg {
    transform: translateX(3px);
}

/* =======================
   Print Buttons in Overlay
   ======================= */

.overlay-print-buttons {
    display: flex;
    gap: var(--schilcher-space-sm);  /* 12px */
    margin-bottom: var(--schilcher-space-lg);  /* 20px */
    padding-bottom: var(--schilcher-space-lg);
    border-bottom: 1px solid var(--schilcher-border-color);
}

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);  /* 8px */
    padding: var(--schilcher-space-xs) var(--schilcher-space-md);  /* 10px 16px */
    font-size: var(--schilcher-text-body);  /* 16px */
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    background-color: var(--schilcher-primary-teal);
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    text-decoration: none;
    transition: var(--schilcher-transition-base);
    box-shadow: var(--schilcher-shadow-sm);
}

.print-btn:hover {
    background-color: var(--schilcher-cream);
    border-color: var(--schilcher-warm-brown);
    box-shadow: var(--schilcher-shadow-md);
    transform: translateY(-1px);
}

.print-btn:active {
    transform: translateY(0);
    box-shadow: var(--schilcher-shadow-sm);
}

.print-btn svg {
    flex-shrink: 0;
}

.print-btn span {
    line-height: 1;
}

/* =======================
   Label Modal Styles
   ======================= */

/* Modal background overlay - hidden by default */
#schilcher-data-sheets--setup-bg {
    display: none !important;
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(73, 57, 27, 0.5);
}

/* Modal popup container - hidden by default */
#schilcher-data-sheets--setup {
    display: none !important;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    max-width: 90%;
    height: auto;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 30px;
    z-index: 1050;
    color: var(--schilcher-text-primary);
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    box-shadow: 0 10px 40px rgba(73, 57, 27, 0.2);
    font-family: var(--schilcher-font-family);
    font-size: var(--schilcher-text-body);
    line-height: var(--schilcher-line-height-relaxed);
}

/* Show modal and background when visible class is added */
#schilcher-data-sheets--setup-bg.visible,
#schilcher-data-sheets--setup.visible {
    display: block !important;
}

/* Modal title */
#schilcher-data-sheets--setup h3 {
    font-size: var(--schilcher-text-lg);  /* 20px */
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-lg) 0;  /* 20px */
}

/* Form fields container */
#schilcher-data-sheets--setup .form-field {
    margin-bottom: var(--schilcher-space-lg);  /* 20px */
}

#schilcher-data-sheets--setup .form-field:last-of-type {
    margin-bottom: 0;
}

/* Form labels */
#schilcher-data-sheets--setup label {
    display: block;
    font-size: var(--schilcher-text-body);  /* 15px */
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-primary);
    margin-bottom: var(--schilcher-space-xs);  /* 8px */
    line-height: 1.4;
}

/* Input fields and select dropdowns */
#schilcher-data-sheets--setup input,
#schilcher-data-sheets--setup select {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 10px 12px;
    font-size: var(--schilcher-text-body);  /* 15px */
    font-weight: var(--schilcher-font-weight-normal);
    font-family: var(--schilcher-font-family);
    color: var(--schilcher-text-primary);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);  /* 6px */
    transition: var(--schilcher-transition-base);
    box-sizing: border-box;
    line-height: 1.4;
}

#schilcher-data-sheets--setup input:focus,
#schilcher-data-sheets--setup select:focus {
    outline: none;
    border-color: var(--schilcher-warm-brown);
    box-shadow: 0 0 0 3px rgba(135, 108, 75, 0.1);
}

/* Select dropdowns */
#schilcher-data-sheets--setup select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349391b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* Submit button */
#schilcher-data-sheets--setup button {
    background: var(--schilcher-primary-teal);
    color: var(--schilcher-text-primary);
    font-size: var(--schilcher-text-body);  /* 16px */
    font-weight: var(--schilcher-font-weight-semibold);
    font-family: var(--schilcher-font-family);
    padding: 12px 20px;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin-top: 24px;
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);  /* 8px */
    cursor: pointer;
    transition: var(--schilcher-transition-base);
    box-shadow: var(--schilcher-shadow-sm);
}

#schilcher-data-sheets--setup button:hover {
    background: var(--schilcher-cream);
    border-color: var(--schilcher-warm-brown);
    box-shadow: var(--schilcher-shadow-md);
    transform: translateY(-1px);
}

#schilcher-data-sheets--setup button:active {
    transform: translateY(0);
    box-shadow: var(--schilcher-shadow-sm);
}

/* Hide specific format options */
.format-90.hide {
    display: none;
}

/* Hidden link for PDF generation */
#schilcher_data_sheets_generate_hidden {
    display: none;
}

.add-to-cart-btn.success {
    background: var(--schilcher-success);
}

.add-to-cart-btn.error {
    background: var(--schilcher-error);
    animation: shake 0.4s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.3125rem); }  /* -5px */
    75% { transform: translateX(0.3125rem); }  /* 5px */
}

/* =======================
   Hover Preview Overlay
   ======================= */

.product-hover-overlay {
    position: absolute;
    top: 0;
    display: none;
    z-index: var(--schilcher-z-popover);
    pointer-events: none;
}

.product-hover-overlay.active {
    display: block;
    pointer-events: all;
}

/* Overlay positioned to the right */
.product-hover-overlay.position-right {
    left: calc(100% + var(--schilcher-space-lg));
    width: 30rem;  /* 480px → 30rem */
    height: 40rem;  /* 640px → 40rem */
}

/* Overlay positioned to the left */
.product-hover-overlay.position-left {
    right: calc(100% + var(--schilcher-space-lg));
    width: 30rem;  /* 480px → 30rem */
    height: 40rem;  /* 640px → 40rem */
}

/* Overlay positioned above (for bottom rows) */
.product-hover-overlay.position-above {
    bottom: 0;
}

/* Overlay positioned below (for top rows) */
.product-hover-overlay.position-below {
    top: 0;
}

.overlay-content {
    background: var(--schilcher-bg-primary);
    border-radius: var(--schilcher-radius-xl);
    padding: var(--schilcher-space-2xl);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--schilcher-shadow-2xl);
    animation: slideIn 0.25s ease-out;
    border: 2px solid var(--schilcher-cream);
}

/* Slide in from right */
.position-right .overlay-content {
    animation: slideInFromRight 0.25s ease-out;
}

/* Slide in from left */
.position-left .overlay-content {
    animation: slideInFromLeft 0.25s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Connecting Arrow */
.overlay-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10002;
}

/* Arrow pointing left (for right-positioned overlays) */
.position-right .overlay-arrow {
    left: -10px;
    top: var(--schilcher-space-2xl);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--schilcher-cream) transparent transparent;
}

.position-right .overlay-arrow::after {
    content: '';
    position: absolute;
    left: 2px;
    top: -9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 9px 9px 0;
    border-color: transparent var(--schilcher-bg-primary) transparent transparent;
}

/* Arrow pointing right (for left-positioned overlays) */
.position-left .overlay-arrow {
    right: -10px;
    top: var(--schilcher-space-2xl);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--schilcher-cream);
}

.position-left .overlay-arrow::after {
    content: '';
    position: absolute;
    right: 2px;
    top: -9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent var(--schilcher-bg-primary);
}

.overlay-close {
    position: absolute;
    top: var(--schilcher-space-md);
    right: var(--schilcher-space-md);
    background: var(--schilcher-cream);
    border: none;
    color: var(--schilcher-text-primary);
    width: 2rem;  /* 32px → 2rem */
    height: 2rem;
    border-radius: 50%;
    font-size: var(--schilcher-text-heading);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--schilcher-transition-base);
    z-index: 10;
}

.overlay-close:hover {
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
    transform: rotate(90deg);
}

.overlay-image {
    width: 100%;
    height: 15.625rem;  /* 250px → 15.625rem */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--schilcher-space-lg);
    border-radius: var(--schilcher-radius-lg);
    overflow: hidden;
    background: var(--schilcher-cream);
}

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

.overlay-title {
    font-size: var(--schilcher-text-heading);
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-text-primary);
    margin: 0 0 var(--schilcher-space-xs) 0;
    line-height: var(--schilcher-line-height-tight);
}

.overlay-sku {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-warm-brown);
    margin: 0 0 var(--schilcher-space-sm) 0;
    font-weight: var(--schilcher-font-weight-medium);
}

/* Overlay Attribute Icons (25% larger than card icons) */
.overlay-attribute-icons {
    display: flex;
    flex-direction: row;
    gap: var(--schilcher-space-sm);
    margin-bottom: var(--schilcher-space-md);
}

.overlay-attribute-icons .product-icon {
    width: 4rem !important;  /* 64px */
    height: 4rem !important;
    min-width: 4rem;
    max-width: 4rem;
    min-height: 4rem;
    max-height: 4rem;
}

.overlay-description {
    font-size: var(--schilcher-text-body);
    color: var(--schilcher-text-primary);
    line-height: var(--schilcher-line-height-relaxed);
    margin: 0 0 var(--schilcher-space-lg) 0;
    padding: var(--schilcher-space-md);
    background: var(--schilcher-primary-teal);
    border-radius: var(--schilcher-radius-md);
}

.overlay-details {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    margin-bottom: var(--schilcher-space-lg);
}

.detail-item {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
}

.detail-item strong {
    font-weight: var(--schilcher-font-weight-semibold);
}

.stock-indicator {
    color: var(--schilcher-success);
    font-weight: var(--schilcher-font-weight-semibold);
}

.stock-indicator svg {
    flex-shrink: 0;
}

.overlay-price {
    display: flex;
    align-items: baseline;
    gap: var(--schilcher-space-xs);
    margin-bottom: var(--schilcher-space-sm);
}

.overlay-price .price-amount {
    font-size: var(--schilcher-text-display);
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-text-primary);
}

.overlay-price .price-unit {
    font-size: var(--schilcher-text-body);
    color: var(--schilcher-warm-brown);
}

.promotion-validity {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-warm-brown);
    margin: 0 0 var(--schilcher-space-lg) 0;
    font-weight: var(--schilcher-font-weight-semibold);
}

.overlay-actions {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    margin-bottom: var(--schilcher-space-md);
}

.overlay-add-btn {
    width: 100%;
}

.overlay-link {
    display: block;
    text-align: center;
    color: var(--schilcher-warm-brown);
    font-size: var(--schilcher-text-small);
    font-weight: var(--schilcher-font-weight-semibold);
    text-decoration: none;
    padding: var(--schilcher-space-sm);
    transition: color var(--schilcher-transition-base);
}

.overlay-link:hover {
    color: var(--schilcher-primary-text-brown);
}

/* Mobile Overlay - Disabled on true mobile devices (not touchscreen laptops) */
@media (hover: none) and (pointer: coarse) {
    .product-hover-overlay {
        display: none !important;
    }
}

/* =======================
   Responsive Adjustments
   ======================= */

@media (max-width: 768px) {
    .schilcher-shop-page {
        margin: 0 -1.25rem !important;  /* -20px */
        padding: var(--schilcher-space-lg) var(--schilcher-space-lg) !important;  /* 20px */
    }

    .shop-header h1 {
        font-size: var(--schilcher-text-display);  /* 28px → 1.75rem */
    }

    .shop-content {
        gap: var(--schilcher-space-3xl);  /* 40px → 2.5rem */
    }

    .product-card {
        padding: var(--schilcher-space-md);  /* 15px - more breathing room on tablet */
    }

    .product-image {
        height: 11.25rem;  /* 180px → 11.25rem (medium height for tablets) */
    }
}

@media (max-width: 480px) {
    .shop-header h1 {
        font-size: var(--schilcher-text-heading);  /* 24px → 1.5rem */
    }

    .category-title {
        font-size: var(--schilcher-text-heading);  /* 20px → 1.25rem */
    }

    .product-image {
        height: 9.375rem;  /* 150px → 9.375rem (smaller for mobile to save vertical space) */
    }

    .product-card {
        padding: var(--schilcher-space-md);  /* 15px - consistent with tablet */
    }

    .product-name {
        font-size: var(--schilcher-text-body);  /* 15px */
        min-height: auto;
    }
}

/* =======================
   Loading State
   ======================= */

.shop-loading {
    text-align: center;
    padding: 3.75rem var(--schilcher-space-lg);  /* 60px 20px */
}

.shop-loading-spinner {
    width: 3.125rem;  /* 50px → 3.125rem */
    height: 3.125rem;
    border: 4px solid var(--schilcher-border-color);
    border-top-color: var(--schilcher-warm-brown);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--schilcher-space-lg);  /* 20px bottom */
}

/* =======================
   Error State
   ======================= */

.schilcher-shop-error {
    background: #fff3cd;
    border: 2px solid var(--schilcher-warning);
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    padding: var(--schilcher-space-2xl);  /* 30px */
    text-align: center;
    color: #856404;
    font-size: var(--schilcher-text-body);  /* 16px → 1rem */
    font-weight: var(--schilcher-font-weight-medium);
    max-width: 600px;
    margin: var(--schilcher-space-3xl) auto;  /* 40px auto */
}

/* =======================
   VPE Pricing Display
   ======================= */

.price-per-piece {
    margin-bottom: var(--schilcher-space-xs);  /* 6px */
    display: flex;
    align-items: baseline;
    gap: var(--schilcher-space-xs);
    flex-wrap: wrap;
}

.price-per-piece .price-label {
    font-size: var(--schilcher-text-small);  /* 12px */
    color: var(--schilcher-text-secondary);
    font-weight: var(--schilcher-font-weight-medium);
}

.price-per-piece .piece-weight {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.vpe-info {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);  /* 6px */
    font-size: var(--schilcher-text-small);  /* 13px */
    color: var(--schilcher-text-secondary);
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 6px 10px */
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-xs);  /* 4px */
    margin-top: var(--schilcher-space-xs);
}

/* =======================
   Teilbar Info Badge (Expanded)
   ======================= */

.teilbar-info-expanded {
    background: #e8f5e9;
    border: 2px solid #2e7d32;
    border-radius: var(--schilcher-radius-md);  /* 8px */
    padding: var(--schilcher-space-sm);  /* 12px */
    margin-top: var(--schilcher-space-xs);  /* 6px */
}

.teilbar-badge-header {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-xs);  /* 6px */
    color: #2e7d32;
    margin-bottom: var(--schilcher-space-xs);  /* 6px */
}

.teilbar-badge-header svg {
    stroke: #2e7d32;
    flex-shrink: 0;
}

.teilbar-badge-header strong {
    font-size: var(--schilcher-text-small);  /* 13px */
    font-weight: var(--schilcher-font-weight-bold);
}

.teilbar-info-text {
    font-size: var(--schilcher-text-small);  /* 13px */
    line-height: var(--schilcher-line-height-normal);
    color: #1b5e20;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .teilbar-badge-header strong,
    .teilbar-info-text {
        font-size: 0.875rem;  /* 14px for better readability */
    }
}

/* =======================
   Pre-order Badge
   ======================= */

.preorder-badge {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--schilcher-space-xs);  /* 6px */
    font-size: var(--schilcher-text-small);  /* 13px */
    font-weight: var(--schilcher-font-weight-semibold);
    color: #1976d2;  /* Blue for info */
    background: #e3f2fd;  /* Light blue background */
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 6px 12px */
    border-radius: var(--schilcher-radius-lg);  /* 12px */
    margin: var(--schilcher-space-xs) 0;  /* 6px vertical margin */
    border: 1px solid #1976d2;
}

.preorder-badge svg {
    stroke: #1976d2;
    flex-shrink: 0;
    margin-top: 2px;  /* Align with text */
}

.preorder-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preorder-badge-text strong {
    font-weight: var(--schilcher-font-weight-bold);
    text-transform: uppercase;
    font-size: var(--schilcher-text-small);  /* 13px */
    letter-spacing: 0.3px;
}

.preorder-days {
    font-size: var(--schilcher-text-tiny);  /* 11px */
    font-weight: var(--schilcher-font-weight-normal);
    color: #0d47a1;  /* Darker blue for contrast */
}

/* Pre-order badge in overlay - uses same design as product card */
.overlay-preorder-badge {
    margin-top: var(--schilcher-space-xs);  /* 6px */
    margin-bottom: var(--schilcher-space-xs);  /* 6px */
}

/* =======================
   Expanded Pre-order Badge
   ======================= */

.preorder-badge-expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);  /* 6px 12px */
    border-radius: var(--schilcher-radius-md);  /* 8px */
}

.preorder-badge-expanded .preorder-badge-header {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-xs);  /* 6px */
}

.preorder-badge-expanded .preorder-badge-header svg {
    flex-shrink: 0;
}

.preorder-badge-expanded .preorder-badge-header strong {
    font-weight: var(--schilcher-font-weight-bold);
    text-transform: uppercase;
    font-size: var(--schilcher-text-small);  /* 13px */
    letter-spacing: 0.3px;
    color: #1976d2;
}

.preorder-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding-left: 20px;  /* Align with text after icon */
}

.preorder-info-text {
    font-size: var(--schilcher-text-tiny);  /* 11px */
    color: #0d47a1;
    margin: 0;
    line-height: 1.4;
}

.preorder-delivery-days {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--schilcher-text-tiny);  /* 11px */
    margin: 0;
}

.preorder-delivery-days .delivery-days-label {
    color: #0d47a1;
    font-weight: var(--schilcher-font-weight-normal);
}

.preorder-delivery-days .delivery-days-value {
    color: #1976d2;
    font-weight: var(--schilcher-font-weight-semibold);
    background: rgba(25, 118, 210, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Mehr erfahren with tooltip (click-based) */
.preorder-more-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--schilcher-text-tiny);  /* 11px */
    color: #1976d2;
    text-decoration: underline;
    font-weight: var(--schilcher-font-weight-medium);
    margin-top: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.preorder-more-info:hover {
    color: #0d47a1;
}

.preorder-more-info svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

/* Tooltip container - hidden by default, shown via JavaScript click */
.preorder-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 320px;
    background: #fff;
    border: 2px solid #1976d2;
    border-radius: var(--schilcher-radius-md);  /* 8px */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: var(--schilcher-space-sm);  /* 12px */
    z-index: 10001;  /* Above product-hover-overlay (z-popover: 1060) and overlay-active (10000) */
}

/* Tooltip arrow */
.preorder-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 8px solid transparent;
    border-top-color: #fff;
}

.preorder-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 19px;
    border: 9px solid transparent;
    border-top-color: #1976d2;
}

/* Tooltip content styling */
.preorder-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3f2fd;
}

.preorder-tooltip-header svg {
    stroke: #1976d2;
    flex-shrink: 0;
}

.preorder-tooltip-header strong {
    font-size: var(--schilcher-text-small);  /* 13px */
    color: #1976d2;
    font-weight: var(--schilcher-font-weight-bold);
}

.preorder-tooltip-section {
    margin-bottom: 10px;
}

.preorder-tooltip-section:last-child {
    margin-bottom: 0;
}

.preorder-tooltip-section h5 {
    font-size: var(--schilcher-text-small);  /* ~9.8px - secondary info */
    font-weight: var(--schilcher-font-weight-bold);
    color: var(--schilcher-brown);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.preorder-tooltip-section p {
    font-size: var(--schilcher-text-small);  /* ~9.8px - secondary info */
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.preorder-tooltip-highlight {
    background: #fff3e0;
    border-left: 3px solid #ff9800;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    margin: 8px 0;
}

.preorder-tooltip-highlight p {
    font-size: var(--schilcher-text-small);  /* SMALL - consistent with rest of tooltip */
    color: #e65100;
    font-weight: var(--schilcher-font-weight-semibold);
}

.preorder-tooltip-days {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.preorder-tooltip-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: var(--schilcher-font-weight-semibold);
    border-radius: 4px;
    border: 1px solid #81c784;
}

.preorder-tooltip-day.disabled {
    background: #f5f5f5;
    color: #bdbdbd;
    border-color: #e0e0e0;
    text-decoration: line-through;
}

/* Mobile responsive for expanded preorder badge */
@media (max-width: 768px) {
    .preorder-badge-expanded {
        padding: 8px 10px;
    }

    .preorder-badge-expanded .preorder-badge-header strong {
        font-size: 12px;
    }

    .preorder-badge-content {
        padding-left: 18px;
    }

    .preorder-info-text,
    .preorder-delivery-days,
    .preorder-more-info {
        font-size: 11px;
    }

    /* Tooltip adjustments for mobile */
    .preorder-tooltip {
        width: 280px;
        left: -10px;
    }

    .preorder-tooltip::after,
    .preorder-tooltip::before {
        left: 30px;
    }
}

/* Legacy preorder badge styles for backward compatibility */
@media (max-width: 768px) {
    .preorder-badge:not(.preorder-badge-expanded) {
        padding: 6px 10px;
    }

    .preorder-badge:not(.preorder-badge-expanded) .preorder-badge-text strong {
        font-size: 12px;
    }

    .preorder-badge:not(.preorder-badge-expanded) .preorder-days {
        font-size: 11px;
    }

    .preorder-badge:not(.preorder-badge-expanded) svg {
        width: 14px;
        height: 14px;
    }
}

/* =======================
   Teilbar Piece Selector
   ======================= */

/* ========================================
   HYBRID TEILBAR SELECTOR (VPE + EXTRA)
   ======================================== */

.teilbar-hybrid-selector {
    margin: 12px 0;
}

.teilbar-hybrid-selector .selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.piece-selector-label {
    display: block;
    font-size: var(--schilcher-text-small);
    font-weight: 600;
    color: #49391b;
}

.package-info {
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    font-weight: 400;
}

/* VPE Counter Section */
.vpe-counter-section {
    margin-bottom: 12px;
}

.vpe-counter-section > label {
    display: block;
    font-size: var(--schilcher-text-small);
    font-weight: 600;
    color: #49391b;
    margin-bottom: 8px;
}

.vpe-counter-section .quantity-selector {
    display: flex;
    align-items: center;
    gap: 0;
}

.vpe-input {
    width: 3.75rem;  /* 60px - wider for easier input */
    height: 2.75rem;  /* 44px - mobile-friendly touch target */
    text-align: center;
    border: 1px solid #876c4b;
    font-size: var(--schilcher-text-body);
    color: #49391b;
    background: #ffffff;
    font-weight: 600;
    -moz-appearance: textfield;
    margin: 0;
}

.vpe-input::-webkit-outer-spin-button,
.vpe-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vpe-label {
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    font-weight: 600;
    margin-left: 8px;
}

.vpe-pieces-display {
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    margin-top: 6px;
    font-weight: 500;
}

.vpe-pieces-count {
    font-weight: 700;
    color: #49391b;
}

/* Extra Pieces Toggle */
.extra-pieces-toggle {
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px dashed #bda77f;
    border-bottom: 1px dashed #bda77f;
}

.extra-pieces-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--schilcher-text-small);
    color: #49391b;
    font-weight: 500;
    margin: 0;
}

.extra-pieces-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

/* Extra Pieces Section */
.extra-pieces-section {
    margin-top: 12px;
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #bda77f;
    border-radius: 6px;
}

.extra-pieces-section > label {
    display: block;
    font-size: var(--schilcher-text-small);
    font-weight: 600;
    color: #49391b;
    margin-bottom: 8px;
}

.extra-pieces-section .quantity-selector {
    display: flex;
    align-items: center;
    gap: 0;
}

.extra-pieces-input {
    width: 3.75rem;  /* 60px - wider for easier input */
    height: 2.75rem;  /* 44px - mobile-friendly touch target */
    text-align: center;
    border: 1px solid #876c4b;
    font-size: var(--schilcher-text-body);
    color: #49391b;
    background: #ffffff;
    font-weight: 600;
    -moz-appearance: textfield;
    margin: 0;
}

.extra-pieces-input::-webkit-outer-spin-button,
.extra-pieces-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.extra-max {
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    font-weight: 600;
    margin-left: 8px;
}

/* Calculation Summary */
.piece-summary {
    background: #fff;
    border: 2px solid #876c4b;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    text-align: center;
}

.summary-calculation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.total-pieces-display {
    font-weight: 600;
    color: #49391b;
}

.calculation-symbol {
    color: #876c4b;
    font-weight: 400;
}

.price-per-piece {
    font-weight: 600;
    color: #49391b;
}

.equals {
    color: #876c4b;
    font-weight: 600;
}

.summary-price {
    color: #876c4b;
    font-weight: 700;
    font-size: var(--schilcher-text-body);
}

.vpe-fraction {
    display: block;
    font-size: var(--schilcher-text-small);
    color: #876c4b;
    margin-top: 4px;
    font-weight: 400;
}

/* Disabled Add to Cart Button */
.add-to-cart-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #bda77f;
}

/* =======================
   Overlay Teilbar Indicator
   ======================= */

.detail-item.teilbar-indicator {
    color: #2e7d32;
    font-weight: 600;
}

.detail-item.teilbar-indicator svg {
    stroke: #2e7d32;
    margin-right: 4px;
    vertical-align: middle;
}

/* =======================
   Product Data Error Display
   ======================= */

.product-data-error {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.product-data-error .error-icon {
    margin-bottom: 12px;
}

.product-data-error .error-icon svg {
    stroke: #ff6f00;
}

.product-data-error h3 {
    color: #49391b;
    margin: 12px 0;
}

.product-data-error p {
    color: #876c4b;
    margin: 8px 0;
}

.product-data-error a {
    color: #876c4b;
    font-weight: 600;
    text-decoration: underline;
}

.product-data-error .error-details {
    display: block;
    margin-top: 12px;
    font-size: var(--schilcher-text-small);
    color: #bda77f;
}

/* =======================
   Teilbar Cart & Order Display
   ======================= */

.teilbar-cart-info,
.teilbar-order-info {
    margin-top: 4px;
    font-size: var(--schilcher-text-small);
    color: #876c4b;
}

.teilbar-quantity {
    font-weight: 600;
    color: #49391b;
}

/* =======================
   Mobile Responsive for Teilbar
   ======================= */

@media (max-width: 768px) {
    .vpe-info {
        flex-wrap: wrap;
        font-size: 0.875rem;  /* 14px minimum for readability */
    }

    .teilbar-hybrid-selector {
        margin: 15px 0;
        padding: 15px;
        background: #fafafa;
        border-radius: 8px;
    }

    .selector-header {
        margin-bottom: 15px;
    }

    .piece-selector-label {
        font-size: 0.9375rem;  /* 15px - better readability */
    }

    .package-info {
        font-size: 0.875rem;  /* 14px */
    }

    .vpe-counter-section,
    .extra-pieces-section {
        margin-bottom: 15px;
    }

    .vpe-counter-section > label,
    .extra-pieces-section > label {
        font-size: 0.875rem;  /* 14px minimum */
        margin-bottom: 10px;
        font-weight: 600;
    }

    .extra-pieces-toggle {
        padding: 12px 0;
        margin: 15px 0;
    }

    .extra-pieces-toggle label {
        font-size: 0.875rem;  /* 14px minimum */
        gap: 10px;
    }

    .extra-pieces-toggle input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .vpe-label, .extra-max {
        font-size: 0.875rem;  /* 14px */
    }

    /* Inputs maintain 44px touch targets - DO NOT REDUCE */
    .vpe-input, .extra-pieces-input {
        width: 3.75rem;  /* 60px - keep wide for easy input */
        height: 2.75rem;  /* 44px - maintain touch target */
        font-size: 1rem;  /* 16px - prevent iOS zoom */
    }

    .vpe-pieces-display {
        font-size: 0.875rem;  /* 14px */
        margin-top: 8px;
    }

    .extra-pieces-section {
        padding: 15px;
        margin-top: 0;
    }

    .piece-summary {
        padding: 12px 15px;
        margin-top: 12px;
    }

    .summary-calculation {
        font-size: 0.875rem;  /* 14px minimum */
        gap: 8px;
        margin-bottom: 8px;
    }

    .total-pieces-display,
    .price-per-piece {
        font-size: 0.9375rem;  /* 15px */
    }

    .summary-price {
        font-size: 1rem;  /* 16px for emphasis */
    }

    .vpe-fraction {
        font-size: 0.8125rem;  /* 13px */
        margin-top: 4px;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .teilbar-hybrid-selector {
        padding: 12px;
    }

    .summary-calculation {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .summary-calculation > * {
        display: inline;
    }

    .calculation-symbol,
    .equals {
        margin: 0 4px;
    }
}

/* ========================================
   NON-CATALOG PRODUCT CARDS
   ======================================== */

/* Container for non-catalog product information */
.product-not-in-catalog {
    background: #fff9f0;
    border: 1px solid var(--schilcher-warm-brown);
    border-radius: 6px;
    padding: 16px;
    margin-top: 12px;
}

.not-in-catalog-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--schilcher-light-brown);
}

.not-in-catalog-message svg {
    flex-shrink: 0;
    color: var(--schilcher-warm-brown);
}

.not-in-catalog-message span {
    font-size: var(--schilcher-text-body);
    font-weight: 700;
    color: var(--schilcher-primary-text-brown);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contact-info-text {
    font-size: var(--schilcher-text-small);
    line-height: 1.6;
    color: var(--schilcher-primary-text-brown);
    margin: 0 0 14px 0;
}

.contact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: white;
    border: 2px solid var(--schilcher-warm-brown);
    border-radius: 6px;
    color: var(--schilcher-warm-brown);
    text-decoration: none;
    font-size: var(--schilcher-text-small);
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.contact-btn:hover {
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-primary-teal);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(73, 57, 27, 0.2);
}

.contact-btn svg {
    flex-shrink: 0;
}

.phone-btn {
    border-color: #2e7d32;
    color: #2e7d32;
}

.phone-btn:hover {
    background: #2e7d32;
    color: white;
}

.email-btn {
    border-color: #1976d2;
    color: #1976d2;
}

.email-btn:hover {
    background: #1976d2;
    color: white;
}

/* Mobile responsive for non-catalog cards */
@media (max-width: 768px) {
    .product-not-in-catalog {
        padding: 12px;
    }

    .not-in-catalog-message {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .not-in-catalog-message svg {
        width: 18px;
        height: 18px;
    }

    .not-in-catalog-message span {
        font-size: var(--schilcher-text-small);
    }

    .contact-info-text {
        font-size: var(--schilcher-text-small);
        margin-bottom: 12px;
    }

    .contact-actions {
        flex-direction: column;
        gap: 8px;
    }

    .contact-btn {
        min-width: 100%;
        padding: 9px 12px;
        font-size: var(--schilcher-text-small);
    }

    .contact-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   TAX DISCLAIMER STYLING
   ============================================ */

/* Inline tax disclaimer for individual prices */
.tax-disclaimer {
    font-size: 0.85em;
    color: #666;
    font-weight: normal;
    margin-left: 0.25em;
    white-space: nowrap;
}

/* ============================================
   CONTACT-ONLY PRODUCTS
   Products that cannot be ordered online
   ============================================ */

/* Product Card Contact-Only State */
.product-card.contact-only {
    border-color: var(--schilcher-warm-brown);
    background-color: var(--schilcher-bg-cream);
}

.product-card.contact-only .product-card-image {
    opacity: 0.9;
}

/* Contact-Only Section in Product Card */
.product-contact-only {
    padding: var(--schilcher-space-lg);
    text-align: center;
    background: linear-gradient(135deg, var(--schilcher-bg-cream) 0%, var(--schilcher-primary-teal) 100%);
    border-radius: var(--schilcher-radius-md);
    margin-top: var(--schilcher-space-md);
}

/* Contact-Only Badge */
.contact-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--schilcher-warm-brown);
    color: var(--schilcher-text-light);
    border-radius: var(--schilcher-radius-full);
    font-size: var(--schilcher-font-size-sm);
    font-weight: 600;
    margin-bottom: var(--schilcher-space-md);
}

.contact-only-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Contact-Only Message */
.contact-only-message {
    font-size: var(--schilcher-font-size-sm);
    color: var(--schilcher-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--schilcher-space-md);
}

/* Contact Actions in Contact-Only Section */
.product-contact-only .contact-actions {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    margin-bottom: var(--schilcher-space-md);
}

.product-contact-only .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--schilcher-radius-md);
    font-size: var(--schilcher-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product-contact-only .contact-btn.phone-btn {
    background: var(--schilcher-primary-brown);
    color: var(--schilcher-text-light);
}

.product-contact-only .contact-btn.phone-btn:hover {
    background: var(--schilcher-warm-brown);
    transform: translateY(-1px);
}

.product-contact-only .contact-btn.email-btn {
    background: var(--schilcher-bg-white);
    color: var(--schilcher-primary-brown);
    border: 2px solid var(--schilcher-primary-brown);
}

.product-contact-only .contact-btn.email-btn:hover {
    background: var(--schilcher-primary-brown);
    color: var(--schilcher-text-light);
    transform: translateY(-1px);
}

.product-contact-only .contact-btn svg {
    width: 16px;
    height: 16px;
}

/* Product Page Link in Contact-Only Section */
.product-contact-only .product-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--schilcher-text-secondary);
    font-size: var(--schilcher-font-size-xs);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-contact-only .product-page-link:hover {
    color: var(--schilcher-primary-brown);
}

/* Responsive Contact-Only */
@media (min-width: 768px) {
    .product-contact-only .contact-actions {
        flex-direction: row;
        justify-content: center;
    }

    .product-contact-only .contact-btn {
        flex: 1;
        max-width: 150px;
    }
}

/* ============================================
   WEEKLY SPECIALS SECTION
   ============================================ */

/* Sidebar Navigation - Weekly Specials */
.weekly-specials-item {
    position: relative;
}

.weekly-specials-item .category-nav-item {
    background: linear-gradient(135deg, var(--schilcher-primary-teal) 0%, var(--schilcher-accent-yellow) 100%);
    color: var(--schilcher-text-primary);
    font-weight: 600;
    border: 2px solid var(--schilcher-warm-brown);
}

.weekly-specials-item .category-icon {
    font-size: 1.2em;
    margin-right: 0.5rem;
}

.category-divider {
    height: 1px;
    background: var(--schilcher-light-brown);
    margin: 0.75rem 0;
    opacity: 0.5;
}

/* Weekly Specials Section Header */
.weekly-specials-section {
    margin-bottom: 3rem;
}

.weekly-specials-section .category-header {
    background: linear-gradient(135deg, var(--schilcher-primary-teal) 0%, var(--schilcher-accent-yellow) 100%);
    border: 2px solid var(--schilcher-warm-brown);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.weekly-specials-section .category-title {
    color: var(--schilcher-text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weekly-specials-section .category-title .category-icon {
    font-size: 1.5em;
}

.category-description {
    font-size: 1rem;
    color: var(--schilcher-text-secondary);
    margin: 0.75rem 0 1.5rem 0;
    font-style: italic;
    padding: 0 0.5rem;
}

/* Product Cards in Weekly Specials */
.weekly-specials-grid .product-card {
    border: 2px solid var(--schilcher-accent-yellow);
    box-shadow: 0 4px 12px rgba(253, 253, 252, 0.15);
    transition: all 0.3s ease;
}

.weekly-specials-grid .product-card:hover {
    border-color: var(--schilcher-warm-brown);
    box-shadow: 0 8px 20px rgba(135, 108, 75, 0.25);
    transform: translateY(-2px);
}

/* Enhanced Promotion Badge for Featured Items */
.promotion-badge.featured-promotion {
    background: var(--schilcher-accent-yellow);
    color: var(--schilcher-text-primary);
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(253, 253, 252, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .weekly-specials-section .category-title {
        font-size: 1.5rem;
    }

    .category-description {
        font-size: 0.95rem;
    }

    .weekly-specials-item .category-icon {
        font-size: 1em;
    }
}