/**
 * PRODUCT PAGE LAYOUT CSS
 * Plik: assets/css/product-page.css
 * 
 * Struktura:
 * 1. Layout Grid (2 kolumny)
 * 2. Responsive breakpoints
 * 3. Podstawowe style
 */

/* ============================================
   1. LAYOUT GRID - 2 KOLUMNY
   ============================================ */

.custom-product-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
    padding: 10px 0;
}

.woocommerce-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.woocommerce-breadcrumb a:hover {
    color: #FF8C42; /* Pomarańczowy kolor z Twojego designu */
}

/* Kontener główny - 2 kolumny */
.product-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 40px;
    margin-bottom: 60px;
}

/* Lewa kolumna - Galeria */
.product-gallery-column {
    position: relative;
}

/* Prawa kolumna - Info */
.product-info-column {
    display: flex;
    flex-direction: column;
}

.product-info-column .summary {
    position: sticky;
    top: 20px; /* Sticky scroll */
}


/* ============================================
   2. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .product-container {
        gap: 30px;
    }
    
    .custom-product-layout {
        padding: 0 15px;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .product-container {
        grid-template-columns: 1fr; /* Jedna kolumna na mobile */
        gap: 20px;
    }
    
    .product-info-column .summary {
        position: static; /* Wyłącz sticky na mobile */
    }
    
    .woocommerce-breadcrumb {
        font-size: 12px;
    }
}


/* ============================================
   3. PODSTAWOWE STYLE WOOCOMMERCE
   ============================================ */

/* Usunięcie domyślnych marginesów WooCommerce */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    margin: 0;
    width: 100%;
}

/* Reset float layout WooCommerce */
.woocommerce div.product .woocommerce-product-gallery {
    float: none;
    width: 100%;
}

/* Czyszczenie */
.custom-product-layout::after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================
   4. PRZYGOTOWANIE POD KOLEJNE KOMPONENTY
   ============================================ */

/* Te sekcje będą stylowane w następnych krokach */

/* Product Gallery - do customizacji w SESJI 3 */
.woocommerce-product-gallery {
    /* Styles coming in next session */
}

/* Product Info - do customizacji w SESJI 2 */
.summary.entry-summary {
    /* Styles coming in next session */
}

/* Product Tabs - do customizacji w SESJI 4 */
.woocommerce-tabs {
    /* Styles coming in next session */
}

/* Related Products - do customizacji w SESJI 5 */
.related.products {
    /* Styles coming in next session */
}