/* ===== Brand theme variables (VS-to-Template Roadmap Stage 1) — SINGLE SOURCE OF TRUTH =====
   These were previously re-declared locally inside index.php, shop.php, and product_view.php
   (each with its own `:root { --vs-blue:#1a237e; --vs-orange: #c1501b; }`) — now centralized here.
   Defaults = current site look ("Classic Blue"). A theme picked in Site Settings overrides these
   via a small inline <style> block injected by config/branding/theme.php right after this file
   loads — see header.php. Local re-declarations in index.php/shop.php/product_view.php were
   removed so this central definition (and the theme override after it) always wins. */
:root {
    --vs-blue: #1a237e;
    --vs-blue-dark: #283593;
    --vs-blue-light: #9fa8da;
    --vs-blue-bg: #e8eaf6;
    --vs-orange: #c1501b;
    --vs-gold: #D4AF37;
    /* Footer background is independently switchable (Light/Dark) in Site Settings,
       separate from the 4 color themes above — see admin/site_settings.php "Footer Style".
       Light mode uses Bootstrap's bg-light/text-dark as before (untouched). These variables
       only apply when footer.footer-dark is active. */
    --vs-footer-bg: #1a1a1a;
    --vs-footer-text: #f1f5f9;
    --vs-footer-muted: #94a3b8;
}

footer.footer-dark {
    background: var(--vs-footer-bg) !important;
}
footer.footer-dark,
footer.footer-dark h4,
footer.footer-dark p,
footer.footer-dark strong,
footer.footer-dark .text-dark {
    color: var(--vs-footer-text) !important;
}
footer.footer-dark .small,
footer.footer-dark p.small {
    color: var(--vs-footer-muted) !important;
}
footer.footer-dark hr {
    border-color: rgba(255,255,255,0.15);
}

/* Header — top utility strip + main nav — independently switchable (Light/Dark), same
   pattern as the footer above. Floating popups (language panel, search box, category
   dropdown) intentionally stay light/white in both modes for readability. */
.whatsapp-link { color: #146c43; }
.header-strip-dark .whatsapp-link { color: #4ade80; }
.header-strip-dark .text-dark:not(.btn-light) { color: #f1f5f9 !important; }
.header-strip-dark .text-danger { color: #f87171 !important; }
nav.navbar-dark .header-icon { color: #f1f5f9 !important; }

/*Start code header*/
/* General style */
body { margin: 0; font-family: sans-serif; }
.main-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 5%; background: #fff; border-bottom: 2px solid #f4f4f4; }

.logo { font-size: 24px; font-weight: bold; color: var(--vs-gold); }

/* Menu style */
.nav-menu ul { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-menu ul li { position: relative; }
.nav-menu ul li a { display: block; padding: 10px 15px; text-decoration: none; color: #333; font-weight: 600; }
.nav-menu ul li a:hover { color: var(--vs-gold); }

/* Dropdown style */
.dropdown-content { display: none; position: absolute; background: #fff; min-width: 160px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 1; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content li a { color: #333; padding: 10px; }

/* Button style */
.header-actions a { text-decoration: none; color: #333; margin-left: 15px; font-weight: bold; }
.btn-login { border: 1px solid var(--vs-gold); padding: 8px 15px; border-radius: 4px; color: var(--vs-gold) !important; }
.btn-login:hover { background: var(--vs-gold); color: #fff !important; }
/*End code header*/

/* - Footer social icons Start -- */
/* Footer Links Hover */
footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--vs-orange) !important;
}
/* - Footer social icons End -- */

/* -Startcategory.php for banner -- */
.text-content {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Shows only 3 lines initially */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}
.text-content.expanded {
    -webkit-line-clamp: unset;
}
/* -End category.php for banner -- */


/* --- 1. Base settings --- */
body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
    direction: ltr; 
}

/* --- 2. Product grid (required) --- */
.product-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    padding: 10px; 
}
@media (min-width: 768px) { 
    .product-grid { grid-template-columns: repeat(4, 1fr); } 
}

.product-card { 
    border: 1px solid #ddd; 
    padding: 10px; 
    text-align: center; 
}

.product-card img { 
    width: 100%; 
    height: 150px; 
    object-fit: cover; 
}

/* --- 3. Image ratio (required for all) --- */
.card-img-top {
    aspect-ratio: 1 / 1 !important; 
    object-fit: cover !important;   
    width: 100% !important;
}

/* --- for category image sizing on the homepage --- */
/* For images on mobile */
@media (max-width: 576px) {
    .card-img-top {
        height: 120px !important; /* Reduce height on mobile */
    }
}