/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://example.com
 Description:  Child theme for GeneratePress
 Author:       Pinar Alsac
 Template:     generatepress
 Version:      1.0.0
*/

/* Import parent theme styles */
@import url("../generatepress/style.css");

/* --- Unified Part Catalog Styles --- */

/* Global font size for all part grids */
:root {
    --part-font-size: 12px;
}

/* --- Page title --- */
.page-title {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.page-title h1,
.page-title h2 {
    margin: 0;
    font-weight: bold;
}

.page-title h1 {
    font-size: 1.8rem; /* main page title */
}

.page-title h2 {
    font-size: 1.4rem; /* subcategory title */
}

/* --- Grid wrapper --- */
.grid-wrapper {
    width: 100%;
    max-width: 1200px;  /* prevents cells from getting huge on large screens */
    margin: 0 auto;     /* center the grid */
}

/* --- Main categories grid --- */
.part-category-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* default desktop */
    gap: 5px;
}

/* --- Subcategory parts grid --- */
.part-grid-8 {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* default desktop */
    gap: 5px;
}

/* --- Individual part items --- */
.part-item-small {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}

.part-item-small img {
    max-width: 100%;
    height: auto;
    margin-bottom: 3px;
}

/* --- Placeholder for missing images --- */
.part-placeholder {
    width: 100%;
    padding-top: 100%; /* perfect square */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* --- Category items --- */
.part-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
}

.part-category-item img {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

/* --- Responsive layout --- */

/* Tablet: 6 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    .part-category-grid,
    .part-grid-8 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Phone: 4 columns */
@media (max-width: 768px) {
    .part-category-grid,
    .part-grid-8 {
        grid-template-columns: repeat(4, 1fr);
    }

    .part-item-small,
    .part-category-item {
        font-size: 10px;
        padding: 2px;
    }
}

.catalog-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}