/* =========================================
   1. DEFAULT THEME (ALWAYS ACTIVE)
   ========================================= */

/*:root {

    --url-logo: url('https://media.prolisto.com/enviromedia/files/default/Horizontal.png');
    
   
    --url-slide-1: url('https://media.prolisto.com/enviromedia/files/default/b0.PNG');
    --url-slide-2: url('https://media.prolisto.com/enviromedia/files/default/b1.PNG');
    --url-slide-3: url('https://media.prolisto.com/enviromedia/files/default/b2.PNG');
    --url-slide-4: url('https://media.prolisto.com/enviromedia/files/default/b3.PNG');
    --url-slide-5: url('https://media.prolisto.com/enviromedia/files/default/b0.PNG');

   
    --url-cat-films: url('https://media.prolisto.com/enviromedia/files/default/Films.JPG');
    --url-cat-games: url('https://media.prolisto.com/enviromedia/files/default/Games.JPG');
    --url-cat-music: url('https://media.prolisto.com/enviromedia/files/default/Music.JPG');
    --url-cat-books: url('https://media.prolisto.com/enviromedia/files/default/AudioBooks.JPG');

  
    --theme-primary: teal;
    --theme-button: #198754;
    --theme-button-hover: #157347;
    --footer-bg: teal;
    --bg-color: #ffffff;
    --text-dark: #212529;
    --text-light: #6c757d;
    --ticker-bg: #dc3545;
    --info-bar-bg: #e8f5e9;
    --info-bar-text: #0f5132;
}
*/
/* =========================================
   2. THEME OVERRIDES (UNCOMMENT TO ACTIVATE)
   ========================================= */

/* --- CHRISTMAS THEME (Remove comments to activate) --- */

:root {
    --theme-primary: #d42426; 
    --theme-button: #165b33;
  	--theme-button-hover: #00000087;
    --footer-bg: #d42426;
    --bg-color: #fffafa; 

    --url-logo: url('https://media.prolisto.com/enviromedia/files/christmas/Horizontal.png');
    --url-slide-1: url('https://media.prolisto.com/enviromedia/files/christmas/b0.PNG');
    --url-slide-2: url('https://media.prolisto.com/enviromedia/files/christmas/b1.PNG');
    --url-slide-3: url('https://media.prolisto.com/enviromedia/files/christmas/b2.PNG');
    --url-slide-4: url('https://media.prolisto.com/enviromedia/files/christmas/b3.PNG');
    --url-slide-5: url('https://media.prolisto.com/enviromedia/files/christmas/b0.PNG');
    --url-cat-films: url('https://media.prolisto.com/enviromedia/files/christmas/Films.JPG');
    --url-cat-games: url('https://media.prolisto.com/enviromedia/files/christmas/Games.JPG');
    --url-cat-music: url('https://media.prolisto.com/enviromedia/files/christmas/Music.JPG');
    --url-cat-books: url('https://media.prolisto.com/enviromedia/files/christmas/AudioBooks.JPG');
}


/* --- BLACK FRIDAY THEME (Remove comments to activate) --- */
/*
:root {
    --theme-primary: #000000;
    --theme-button: #000000;
    --theme-button-hover: #00000087;
    --footer-bg: #000000;
    --bg-color: #f4f4f4;
    --ticker-bg: #dc3545;

    --url-logo: url('https://media.prolisto.com/enviromedia/files/blackfriday/Horizontal.png');
    --url-slide-1: url('https://media.prolisto.com/enviromedia/files/blackfriday/b0.PNG');
    --url-slide-2: url('https://media.prolisto.com/enviromedia/files/blackfriday/b1.PNG');
    --url-slide-3: url('https://media.prolisto.com/enviromedia/files/blackfriday/b2.PNG');
    --url-slide-4: url('https://media.prolisto.com/enviromedia/files/blackfriday/b3.PNG');
    --url-slide-5: url('https://media.prolisto.com/enviromedia/files/blackfriday/b0.PNG');
    --url-cat-films: url('https://media.prolisto.com/enviromedia/files/blackfriday/Films.JPG');
    --url-cat-games: url('https://media.prolisto.com/enviromedia/files/blackfriday/Games.JPG');
    --url-cat-music: url('https://media.prolisto.com/enviromedia/files/blackfriday/Music.JPG');
    --url-cat-books: url('https://media.prolisto.com/enviromedia/files/blackfriday/AudioBooks.JPG');
}*/


/* --- HALLOWEEN THEME (Remove comments to activate) --- */
/*
:root {
    --theme-primary: #eb6123;
    --theme-button: #000000;
	--theme-button-hover: #00000087;
    --footer-bg: #000000;
    --bg-color: #f4f4f4;

    --url-logo: url('https://media.prolisto.com/enviromedia/files/halloween/Horizontal.png');
    --url-slide-1: url('https://media.prolisto.com/enviromedia/files/halloween/b0.PNG');
    --url-slide-2: url('https://media.prolisto.com/enviromedia/files/halloween/b1.PNG');
    --url-slide-3: url('https://media.prolisto.com/enviromedia/files/halloween/b2.PNG');
    --url-slide-4: url('https://media.prolisto.com/enviromedia/files/halloween/b3.PNG');
    --url-slide-5: url('https://media.prolisto.com/enviromedia/files/halloween/b0.PNG');
    --url-cat-films: url('https://media.prolisto.com/enviromedia/files/halloween/Films.JPG');
    --url-cat-games: url('https://media.prolisto.com/enviromedia/files/halloween/Games.JPG');
    --url-cat-music: url('https://media.prolisto.com/enviromedia/files/halloween/Music.JPG');
    --url-cat-books: url('https://media.prolisto.com/enviromedia/files/halloween/AudioBooks.JPG');
}
*/

/* --- VALENTINES THEME (Remove comments to activate) --- */
/*
:root {
    --theme-primary: #ff4d6d;
    --theme-button: #c9184a;
	--theme-button-hover: #00000087;
    --footer-bg: #590d22;
    --bg-color: #fff0f3;

    --url-logo: url('https://media.prolisto.com/enviromedia/files/valentines/Horizontal.png');
    --url-slide-1: url('https://media.prolisto.com/enviromedia/files/valentines/b0.PNG');
    --url-slide-2: url('https://media.prolisto.com/enviromedia/files/valentines/b1.PNG');
    --url-slide-3: url('https://media.prolisto.com/enviromedia/files/valentines/b2.PNG');
    --url-slide-4: url('https://media.prolisto.com/enviromedia/files/valentines/b3.PNG');
    --url-slide-5: url('https://media.prolisto.com/enviromedia/files/valentines/b0.PNG');
    --url-cat-films: url('https://media.prolisto.com/enviromedia/files/valentines/Films.JPG');
    --url-cat-games: url('https://media.prolisto.com/enviromedia/files/valentines/Games.JPG');
    --url-cat-music: url('https://media.prolisto.com/enviromedia/files/valentines/Music.JPG');
    --url-cat-books: url('https://media.prolisto.com/enviromedia/files/valentines/AudioBooks.JPG');
}
*/

/* =========================================
   3. GLOBAL STYLES (DO NOT EDIT BELOW)
   ========================================= */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-color);
}
.main-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* =========================================
   4. LOGO (CSS BACKGROUND)
   ========================================= */
.store-header-logo {
    display: inline-block;
    width: 200px;
    height: 80px;
    background-image: var(--url-logo); /* USES VARIABLE */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 15px 0;
}

/* =========================================
   5. NAVIGATION & INFO BAR
   ========================================= */
.nav-buttons .btn {
    background-color: var(--theme-button);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
}
.nav-buttons .btn:hover { background-color: var(--theme-button-hover); }

.info-bar {
    background-color: var(--info-bar-bg);
    color: var(--info-bar-text);
    border: 1px solid #c3e6cb;
    font-weight: 600;
    border-radius: 0.5rem;
}

/* =========================================
   6. SLIDER (CSS BACKGROUNDS)
   ========================================= */
#slider-container {
    overflow: hidden;
    margin-top: 1.5rem;
    border-radius: 0.5rem;
    /* Aspect Ratio is crucial here because divs don't have intrinsic height */
    aspect-ratio: 3; /*3 for everything else but blackfriday. 4.5 for blackfriday*/
    max-height: 400px;
}
#slider-container figure {
    position: relative;
    width: 500%;
    height: 100%;
    margin: 0;
    left: 0;
    animation: 30s slidy infinite;
}
/* Replaces the <img> tag */
.slider-bg-img {
    width: 20%;
    height: 100%;
    float: left;
    background-size: cover;
    background-position: center;
}
/* Map classes to variables */
.slide-1 { background-image: var(--url-slide-1); }
.slide-2 { background-image: var(--url-slide-2); }
.slide-3 { background-image: var(--url-slide-3); }
.slide-4 { background-image: var(--url-slide-4); }
.slide-5 { background-image: var(--url-slide-5); }

@keyframes slidy {
    0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; }
    45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; }
    75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; }
}
@media (max-width: 768px) { #slider-container { display: none; } }

/* =========================================
   7. CATEGORY IMAGES (CSS BACKGROUNDS)
   ========================================= */
.cat-img-placeholder {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem 0.5rem 0 0;
}
/* Map classes to variables */
.cat-films { background-image: var(--url-cat-films); }
.cat-games { background-image: var(--url-cat-games); }
.cat-music { background-image: var(--url-cat-music); }
.cat-books { background-image: var(--url-cat-books); }

/* =========================================
   8. PRODUCT GALLERY & DETAILS
   ========================================= */
.product-title { font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; }

/* ... (Standard Gallery CSS remains same) ... */
.carousel-image-inner {
    display: grid; grid-template-columns: 1fr; border: 1px solid #dee2e6;
    border-radius: 0.5rem; overflow: hidden; position: relative; min-height: 400px;
}
.image-item {
    grid-area: 1 / 1; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
.carousel-image-open:checked + .image-item { opacity: 1; visibility: visible; }
.image-item img { max-width: 100%; max-height: 500px; object-fit: contain; }
.carousel-image-indicators { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.carousel-image-bullet { cursor: pointer; display: block; border: 2px solid #dee2e6; border-radius: 0.5rem; opacity: 0.7; }
.carousel-image-bullet:hover { opacity: 1; }
.carousel-image-open:checked ~ .carousel-image-indicators label { border-color: #dee2e6; opacity: 0.7; }
input.carousel-image-open { display: none; }
.carousel-image-indicators img { display: block; width: 60px; height: 60px; object-fit: cover; }

.details-table td { padding: 0.5rem 0; border: none; }
.details-table td:first-child { font-weight: 600; color: var(--text-light); padding-right: 1rem; width: 250px; }

/* =========================================
   9. PULSING TICKER
   ========================================= */
.ticker-wrap {
    width: 100%; background-color: var(--ticker-bg); border-radius: 0.5rem;
    padding: 12px 0; text-align: center; margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0, 0.2);
}
.ticker-item {
    display: inline-block; padding: 0 1rem; font-size: 1.35rem; font-weight: 800;
    color: #E91E63; text-transform: uppercase;
    animation: pulse-effect 2s infinite ease-in-out;
}
@keyframes pulse-effect {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.95; }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================
   10. SECTIONS & FOOTER
   ========================================= */
.section-title {
    font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem;
    padding-bottom: 0.5rem; border-bottom: 2px solid var(--theme-primary);
    display: inline-block;
}
.custom-card {
    border: 1px solid #dee2e6; border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.custom-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.custom-card .card-title { font-size: 1rem; font-weight: 500; min-height: 40px; }
.custom-card .btn { background-color: var(--theme-button); }
.custom-card .btn:hover { background-color: var(--theme-button-hover); }

.faq-section { background-color: var(--theme-light); padding: 2rem; border-radius: 0.5rem; }
details { border-bottom: 1px solid #dee2e6; margin-bottom: 1rem; padding-bottom: 1rem; }
details:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
summary { font-size: 1.1rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
summary::-webkit-details-marker { display: none; }
summary::after {
    content: '+'; font-size: 1.5rem; font-weight: 300; position: absolute; right: 0; top: 50%;
    transform: translateY(-50%); transition: transform 0.2s ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.details-content { padding-top: 1rem; line-height: 1.6; color: var(--text-light); }

.store-footer { background-color: var(--footer-bg); color: white; }
.store-footer a img { max-width: 150px; filter: brightness(0) invert(1); }