/* =========================================================
   1. GLOBAL & RESET
   ========================================================= */
#header, .pageBanner, .banner {
    display: none !important; /* Removes default purple bar */
}

#content {
    max-width: none !important;
    width: auto !important;
    margin-left: 220px !important; /* Sidebar space */
    padding: 20px;
}

#menubar {
    width: 200px !important;
    font-size: 13px;
}

/* =========================================================
   2. ALBUM GRID (5-Column Fix)
   ========================================================= */
body#theCategoryPage ul.thumbnailCategories {
    display: grid !important;
    /* Lowering the minimum width to 180px allows 5 cards to fit across */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 15px !important;
    padding: 0;
}

body#theCategoryPage .thumbnailCategory {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

/* Album Overlay - Forced to bottom */
body#theCategoryPage .thumbnailCategory .description {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important; /* Prevents text from floating high */
    left: 0;
    width: 100%;
    height: auto !important;
    background: rgba(0,0,0,.75) !important; /* Darker for better contrast */
    padding: 8px 10px !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10 !important;
}

body#theCategoryPage .thumbnailCategory .description h3,
body#theCategoryPage .thumbnailCategory .description h3 a {
    color: #fff !important;
    font-size: 13px !important; /* Smaller text for 5-column layout */
    font-weight: 700 !important;
    text-decoration: none;
    margin: 0 !important;
}

body#theCategoryPage .thumbnailCategory .nb_elements {
    display: block !important;
    font-size: 10px !important;
    color: #bdbdbd !important;
    margin-top: 2px !important;
}

/* =========================================================
   3. PRODUCT PAGE (Side-by-Side Restore)
   ========================================================= */
body#thePicturePage #productPage {
    /* Restore the 2-column layout for physical products */
    display: grid !important;
    grid-template-columns: 520px 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    margin-top: 20px !important;
}

body#thePicturePage .product-image img {
    /* Keep the image from getting too big and pushing the button off-screen */
    max-width: 520px !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* Ensure the pricing panel on the right is visible */
body#thePicturePage .product-panel {
    display: block !important;
    visibility: visible !important;
}

/* =========================================================
   4. VIDEO PAGE & BUTTONS
   ========================================================= */
/* Only triggers for videos to switch them to a centered view */
body#thePicturePage:has(.video-js) #productPage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Limit video size */
body#thePicturePage:has(.video-js) .video-js {
    max-width: 360px !important;
    margin: 0 auto !important;
}

.order-button {
    padding: 12px 24px;
    background: #10b981 !important; /* Emerald Green */
    color: white !important;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
}

.order-button.secondary {
    background: #374151 !important;
}