/*
 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: 3rem;   main page title 
    } */

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

/* --- 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;
}


.part-placeholder-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
}

/* --- 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;
}

.catalog-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
    font-family: 'Delius', cursive;
    font-weight: bold;
}

.ba-part-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.ba-part-card {
    display: block;
    text-align: center;
}

.ba-part-card img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
}

.no-img {
    width: 70px;
    height: 70px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 11px;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ba-part-id {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.7;
}

/* Missing BL ID */
.ba-missing-bl-id {
    background: #fff3b0; /* soft yellow */
    padding: 2px 4px;
    border-radius: 4px;
}

/* Missing BL Name */
.ba-missing-bl-name {
    background: #ffd6d6; /* soft red/pink */
    padding: 2px 4px;
    border-radius: 4px;
}

/* Optional: make found values subtle gray */
.ba-has-bl-data {
    color: #555;
}

.single-part-colors {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-thumb {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    cursor: pointer;
    overflow: hidden;
}

.color-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.color-thumb.is-active {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.3);
}

.swatch-fallback {
    width: 100%;
    height: 100%;
    background: #ddd;
}

.ba-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ba-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
}

.ba-modal-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    background: #fff;
    padding: 10px;
    border-radius: 8px;

}


#ba-lightbox img {
    max-width: 90%;
    max-height: 90%;
    background: #fff;
    border-radius: 6px;
}

.ba-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

.ba-lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.ba-lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

body.ba-lightbox-open {
  overflow: hidden;
}

/* =========================
   Atlas Container
   ========================= */

.ba-container,
.grid-wrapper,
.part-category-container,
.part-list-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* =========================
   Atlas Card Grids
   ========================= */

.part-category-grid,
.part-grid,
.part-grid-8 {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* Desktop */
    gap: 10px;
    width: 100%;
}

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

/* Safeguard: small & medium tablets should not jump to 10 columns */
@media (min-width: 769px) and (max-width: 1100px) {
    .part-category-grid,
    .part-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

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

/* Phones in landscape: restore density */
@media (max-width: 768px) and (orientation: landscape) {
    .part-category-grid,
    .part-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .part-category-grid,
    .part-grid,
    .part-grid-8 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================
   Atlas Cards
   ========================= */

.part-item,
.part-category-item {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    transition: 0.2s;
    text-decoration: none;
    color: #333;
}

.part-item:hover,
.part-category-item:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.part-item img,
.part-category-item img,
.part-placeholder,
.part-category-placeholder {
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    object-fit: contain;
}

.part-placeholder,
.part-category-placeholder {
    background: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.part-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

.part-meta,
.part-category-count {
    font-size: 11px;
    color: #666;
    line-height: 1.2;
    margin: 2px 0;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================
    Atlas Single Page Styling
    Used by single parts, minifigs and sets pages
    ======================== */
    
/* --- CONTAINER --- */
.single-part-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px;
    font-size: 14px;
}

/* --- BREADCRUMBS --- */
.part-breadcrumb {
    font-size: 15px;
    margin-bottom: 20px;
}
.part-breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}
.part-breadcrumb a:hover {
    text-decoration: underline;
}

.ba-view-all {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* --- GRID LAYOUT --- */
.single-part-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width:1050px){
    .single-part-main{
        grid-template-columns: 300px 520px 280px;
        align-items: start;
    }
}

/* --- MAIN IMAGE FRAME --- */
.single-part-image-frame {
    width: min(60vw, 280px);
    aspect-ratio: 1 / 1;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.single-part-image-frame > a.part-image-lightbox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-part-image-frame img.part-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- COLOR SWATCHES --- */
.single-part-colors {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.color-thumb {
    width: 42px;
    height: 42px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #f2f2f2;
    cursor: pointer;
    padding: 0;
}
.color-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.color-thumb.is-active {
    outline: 2px solid #0073aa;
}

/* --- TEXT SECTIONS --- */
.single-part-title h1 {
    font-size: 18px;
    font-weight:bold;
    margin-bottom: 12px;
}
.single-part-section {
    margin-bottom: 25px;
}
.single-part-section h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}
.single-part-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}
.single-part-section p {
    margin: 2px 0;
}
.bb-spacer {
    height: 10px;
}
.bb-divider {
    border-bottom: 1px solid #bbb;
    margin: 24px 0;
    height: 0;
    clear: both;
}  
    
/* --- RELATIONSHIP LISTS --- */
.appears-in-list {
    padding-left: 18px;
    margin: 5px 0;
}
.appears-in-list li {
    margin-bottom: 2px;
}

/* --- VARIANT GRID (prints / molds / alternates) --- */
/* Variant grid: 5 per row on mobile, 7 per row on desktop */
.ba-part-variant-grid {
    display: grid;
    grid-template-columns: repeat(5, 50px);
    justify-content: start;
    gap: 4px; /* tighter spacing */
    margin: 8px 0 10px;
}

@media (min-width: 900px) {
    .ba-part-variant-grid {
        grid-template-columns: repeat(7, 50px);
    }
}

.ba-part-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.ba-part-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px;
}
.ba-part-card .ba-part-id {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

/* hidden variants for collapsed state */
.ba-variant-hidden {
    display: none !important;
}

/* Show all / show fewer button */
.ba-variant-toggle {
    margin: 2px 0 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #0073aa;
    cursor: pointer;
    font-size: 13px;
}
.ba-variant-toggle:hover {
    text-decoration: underline;
}

/* =========================
   Atlas Inventory (SQL-based)
   Used by: set parts, set minifigs,
            part appears-in, minifig contains, etc.
   ========================= */

/* =========================
   Atlas Inventory (Tables)
   ========================= */

.ba-inventory {
    width: 100%;
}

.ba-inventory .inv-table {
    display: table;
}


/* Container */
.ba-inventory .inv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px;
    font-size: 14px;
}

/* Title */
.ba-inventory .inv-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.inv-title-context {
    color: #555;
    font-weight: 500;
}

.inv-title-item {
    color: #111;
    font-weight: 600;
}

/* Table */
.ba-inventory .inv-table {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Headers */
.ba-inventory .inv-table th {
    text-align: left;
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
}

/* Cells */
.ba-inventory .inv-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Count column */
.ba-inventory .inv-count {
    text-align: center;
    width: 80px;
    font-weight: 600;
}

/* Thumbnail box */
.ba-inventory .inv-thumb-box {
    width: 70px;
    height: 70px;
    padding: 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumbnail image */
.ba-inventory .inv-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* Name links */
.ba-inventory .inv-name a {
    text-decoration: none;
    color: #0073aa;
}

.ba-inventory .inv-name a:hover {
    text-decoration: underline;
}

/* Hide table header (used everywhere) */
.ba-inventory .inv-table thead {
    display: none;
}

/* Breadcrumb */

.ba-inventory .inv-breadcrumb {
    margin-bottom: 15px;
    font-size: 15px;
}

.ba-inventory .inv-breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.ba-inventory .inv-breadcrumb a:hover {
    text-decoration: underline;
}

.ba-inventory .inv-empty {
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: #666;
}

/* Inventory column widths */
.ba-inventory .inv-image {
    width: 90px;
}

.ba-inventory .inv-qty {
    width: 80px;
    text-align: center;
}

.ba-inventory .inv-setnum,
.ba-inventory .inv-rb,
.ba-inventory .inv-bl {
    width: 120px;
    white-space: nowrap;
}

.ba-inventory .inv-name {
    width: auto;
}

.ba-inventory .inv-thumb.placeholder {
    opacity: 0.6;
    cursor: default;
}

.ba-inventory .inv-table thead {
    display: none;
}