@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary-dark: #151515;
    --primary-red: #cc0000;
    --accent-red: #e60000;
    --light-red: #fff0f0;
    --dark-red: #a30000;
    --text-dark: #333333;
    --text-light: #777777;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --border-color: #eaeaea;

    /* Legacy aliases so footer/old code still works */
    --primary-green: #cc0000;
    --accent-green: #e60000;
    --light-green: #fff0f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

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

body {
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Top bar (tagline + help + language switcher) */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5%;
    background-color: var(--primary-dark);
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    letter-spacing: 0.5px;
}
.top-bar-tagline { font-weight: 600; }
.top-bar-links { display: flex; align-items: center; gap: 20px; }
.top-bar-links a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.top-bar-links a:hover { color: var(--primary-red); }
.lang-switcher {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: none;
    font-size: 12.5px;
    cursor: pointer;
    outline: none;
}
.lang-switcher option { color: var(--text-dark); }

/* Browse Categories dropdown button */
.browse-categories-wrap { position: relative; }
.browse-categories-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-red);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.browse-categories-btn:hover { background: var(--dark-red); }
.browse-categories-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1001;
    padding: 8px 0;
}
.browse-categories-dropdown.open { display: block; }
.browse-categories-dropdown a {
    display: block;
    padding: 10px 18px;
    color: var(--text-dark);
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}
.browse-categories-dropdown a:hover { background: var(--light-red); color: var(--primary-red); }

/* Need Help? Call Us box */
.call-box {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
}
.call-box-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--light-red);
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.call-box-text { display: flex; flex-direction: column; line-height: 1.3; }
.call-box-label { font-size: 11px; color: var(--text-light); }
.call-box-number { font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.call-box-number:hover { color: var(--primary-red); }

html.dark-mode .top-bar { background-color: #0a0a0a; }
html.dark-mode .call-box { border-color: rgba(255,255,255,0.12); }
html.dark-mode .call-box-number { color: var(--white); }
html.dark-mode .browse-categories-dropdown { background: #1f1f1f; }
html.dark-mode .browse-categories-dropdown a { color: rgba(255,255,255,0.85); }

@media (max-width: 1250px) {
    .call-box { display: none; }
}
@media (max-width: 1024px) {
    .top-bar { display: none; }
}

/* Two-row header: top row = logo/browse-categories/nav, bottom row = search/icons */
header#mainHeader { flex-direction: column; align-items: stretch; gap: 12px; }
.header-row-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; }
.header-row-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }
.header-row-bottom .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.header-row-bottom .header-icons { width: 100%; justify-content: flex-end; }
.header-row-bottom .search-form { margin-right: auto; }
.search-form input { text-align: center; }
.search-form input:focus { text-align: left; }
.mobile-header-icons { display: flex; align-items: center; gap: 18px; }

@media (max-width: 1024px) {
    header#mainHeader { flex-direction: row; }
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--primary-red);
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

/* Navbar shrinks slightly once the page is scrolled */
header.scrolled {
    padding: 8px 5%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}

header.scrolled .logo-icon {
    font-size: 15px;
    transform: scale(0.92);
}

header.scrolled .logo-text-shimmer {
    font-size: 18px !important;
}

.logo-icon {
    transition: font-size 0.3s ease, transform 0.3s ease;
    display: inline-flex;
}

/* Logo text: red/white shimmer sweep, matching the site's red & white theme */
.logo-text-shimmer {
    background: linear-gradient(
        to right,
        #cc0000 0%,
        #e60000 20%,
        #ffffff 50%,
        #e60000 80%,
        #cc0000 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: redShimmer 4s linear infinite;
    transition: font-size 0.3s ease;
}

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; color: var(--primary-dark); }
.logo span { color: var(--primary-red); margin-right: 0; font-size: 28px; }

.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links a {
    font-weight: 500;
    color: var(--text-dark);
    transition: color 0.3s;
    text-decoration: none;
    position: relative;
    padding-bottom: 6px;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--primary-red);
    transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary-red); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: white; min-width: 200px; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); z-index: 1001; border-radius: 8px; overflow: hidden; top: 100%; left: 0; border: 1px solid #eee; }
.dropdown-content a { color: var(--text-dark) !important; padding: 12px 20px !important; display: block; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.dropdown-content a:hover { background-color: var(--bg-light); color: var(--primary-red) !important; }
.dropdown:hover .dropdown-content { display: block; }

/* Search Form */
.search-form { display: flex; align-items: center; background: #f5f5f5; border-radius: 30px; padding: 5px 8px 5px 5px; margin: 0 20px; width: 460px; border: 1px solid transparent; transition: 0.3s; }
.search-form:focus-within { background: white; border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.1); }
.search-form input { border: none; background: transparent; padding: 8px 0; width: 100%; outline: none; font-size: 14px; font-family: inherit; min-width: 0; }
.search-form button { border: none; background: transparent; cursor: pointer; color: var(--text-light); font-size: 16px; margin-left: 10px; transition: color 0.2s; flex-shrink: 0; }
.search-form button:hover { color: var(--primary-red); }

/* Category selector attached to the left side of the search bar */
.search-category-select {
    border: none;
    border-right: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    padding: 8px 18px 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-light);
    outline: none;
    cursor: pointer;
    width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    border-radius: 30px 0 0 30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23888'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.search-category-select:hover,
.search-category-select:focus { color: var(--primary-red); }
.search-form:focus-within .search-category-select { border-right-color: rgba(204, 0, 0, 0.2); }

.mobile-search-form { padding: 15px; display: flex; align-items: center; gap: 5px; background: #f5f5f5; border-radius: 6px; margin: 0 15px; }
.mobile-search-category-select {
    width: 90px;
    max-width: 90px;
    padding: 10px 18px 10px 8px;
    font-size: 12px;
    border-right: 1px solid rgba(0,0,0,0.12);
    background-position: right 2px center;
}
.mobile-search-input { flex: 1; min-width: 0; padding: 10px; border-radius: 4px; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14px; }
.mobile-search-btn { padding: 10px 14px; border-radius: 4px; }

/* Dark mode support for the header search bar + category selector */
html.dark-mode .search-form { background: #171717; }
html.dark-mode .search-form:focus-within { background: #1f1f1f; border-color: var(--primary-red); }
html.dark-mode .search-form input { color: #ffffff; }
html.dark-mode .search-form input::placeholder { color: rgba(255,255,255,0.4); }
html.dark-mode .search-form button { color: rgba(255,255,255,0.6); }
html.dark-mode .search-form button:hover { color: var(--primary-red); }
html.dark-mode .search-category-select {
    color: rgba(255,255,255,0.75);
    border-right-color: rgba(255,255,255,0.15);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23ffffff'/></svg>");
}
html.dark-mode .search-category-select option { background: #171717; color: #ffffff; }
html.dark-mode .search-category-select:hover,
html.dark-mode .search-category-select:focus { color: var(--primary-red); }
html.dark-mode .search-form:focus-within .search-category-select { border-right-color: rgba(204, 0, 0, 0.35); }
html.dark-mode .mobile-search-form { background: #171717; }
html.dark-mode .mobile-search-input { color: #ffffff; }
html.dark-mode .mobile-search-input::placeholder { color: rgba(255,255,255,0.4); }



.header-icons { display: flex; gap: 20px; align-items: center; }
.icon-btn { font-size: 20px; color: var(--text-dark); cursor: pointer; position: relative; transition: color 0.2s; }
.icon-btn:hover { color: var(--primary-red); }

.account-dropdown-wrap { position: relative; }
.account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    right: -10px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    min-width: 200px;
    padding: 8px 0;
    z-index: 200;
    font-size: 14px;
}
.account-dropdown.open { display: block; }
.account-dropdown-name {
    padding: 10px 18px 8px;
    font-weight: 700;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--text-dark);
    transition: background 0.15s;
    white-space: nowrap;
}
.account-dropdown a:hover { background: var(--light-red); color: var(--primary-red); }

/* Shared auth form styling (register / login / account pages) */
.auth-wrap { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.auth-card { background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; color: var(--primary-dark); }
.auth-card .auth-sub { color: var(--text-light); font-size: 14px; margin-bottom: 25px; }
.auth-form-group { margin-bottom: 18px; }
.auth-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.auth-form-group input, .auth-form-group textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 8px;
    font-size: 14px; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s;
}
.auth-form-group input:focus, .auth-form-group textarea:focus { border-color: var(--primary-red); }
.auth-submit-btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.auth-alert-error { background: #fdecea; border: 1px solid #f5c2be; color: #b3261e; }
.auth-alert-success { background: #eaf7ea; border: 1px solid #bfe5bf; color: #256029; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-light); }
.auth-switch a { color: var(--primary-red); font-weight: 600; }

/* My Account page */
.account-tabs { display: flex; gap: 10px; border-bottom: 2px solid var(--border-color); margin-bottom: 25px; flex-wrap: wrap; }
.account-tab-btn { padding: 12px 20px; background: none; border: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-light); border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: 'Inter', sans-serif; }
.account-tab-btn.active { color: var(--primary-red); border-bottom-color: var(--primary-red); }
.account-tab-panel { display: none; }
.account-tab-panel.active { display: block; }
.order-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 20px; margin-bottom: 15px; }
.order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.order-status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.order-status-Pending { background: #fff3cd; color: #856404; }
.order-status-Confirmed { background: #d1ecf1; color: #0c5460; }
.order-status-Delivered { background: #d4edda; color: #155724; }
.order-status-Cancelled { background: #f8d7da; color: #721c24; }
.order-items-list { font-size: 14px; color: var(--text-light); }
.order-items-list div { padding: 3px 0; }
.cart-count { position: absolute; top: -8px; right: -8px; background: var(--primary-red); color: white; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; }

/* Buttons */
.btn-primary { background: var(--primary-red); color: white; padding: 12px 24px; border-radius: 6px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--dark-red); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(204,0,0,0.3); }
.btn-outline { background: transparent; color: var(--primary-red); padding: 12px 24px; border-radius: 6px; font-weight: 600; border: 2px solid var(--primary-red); display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; cursor: pointer; }
.btn-outline:hover { background: var(--light-red); border-color: var(--dark-red); color: var(--dark-red); }

/* Hero Section */
/* FIX: removed the viewport-height dependency (calc(100vh - 75px)) and
   overflow:hidden. Height was previously locked to the *screen's* height,
   while the banner grid below sizes itself from the *screen's width*.
   On monitors with a different aspect ratio those two numbers disagreed,
   so the banner grid no longer fit inside .hero and got clipped/pushed,
   which is what shoved the category icons on top of the banner in the
   broken screenshot. Letting .hero size itself from its content (height:
   auto / overflow: visible) means it will always be exactly as tall as
   the banner grid inside it, on any monitor. */
.hero {
    padding: 0 5% 60px 5%;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%, #ffeaea 100%);
    height: auto;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-end;
}

/* Hero Banner Grid: 1 big banner (left, 16:9) + 2 smaller banners (right), all sharing the same row height */
.hero-slider {
    display: grid;
    grid-template-columns: 745fr 360fr 360fr;
    grid-template-areas: "a b c";
    gap: 16px;
    padding: 20px 20px;
    max-width: 100%;
    margin: 0 auto;
    /* Explicit, deterministic height instead of relying on CSS aspect-ratio
       interacting with grid fr-track sizing (which doesn't reliably keep
       gaps out of the ratio math and caused each column's visible crop to
       drift at different screen widths).
       Formula: contentWidth = 100vw - (left+right padding, 40px)
                usableWidth  = contentWidth - (2 gaps, 32px)   <- actual pixels the 3 columns share
                height       = usableWidth * 419 / 1465        <- 419/1465 is the original design ratio
       With this, EVERY column's own width/height ratio stays exactly
       constant (745:419, 360:419, 360:419) no matter the screen width.
       This is the ONLY place hero height comes from now, so .hero above
       must NOT impose its own height (see fix note above). */
    height: calc((100vw - 40px - 32px) * 419 / 1465);
}

.hero.slide:nth-child(1) { grid-area: a; }
.hero.slide:nth-child(2) { grid-area: b; }
.hero.slide:nth-child(3) { grid-area: c; }

.hero.slide {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    align-items: normal;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.hero.slide .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hero.slide:hover .hero-image {
    transform: scale(1.03);
}

.hero-slider:has(.hero.slide:only-child) {
    grid-template-columns: 1fr;
    grid-template-areas: "a";
    height: calc((100vw - 40px) * 6 / 16);
}

.hero-content { 
    position: relative; 
    z-index: 2; 
    max-width: 650px;
}
.hero-subtitle { color: var(--primary-red); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; display: flex; align-items: center; gap: 15px;}
.hero-subtitle::after { content: ''; width: 40px; height: 2px; background: var(--primary-red); }
.hero h1 { font-size: 56px; font-weight: 800; color: #1a1a1a; line-height: 1.1; margin-bottom: 15px; }
.hero h1 span { color: var(--primary-red); }
.hero p { color: #444; font-size: 18px; margin-bottom: 30px; max-width: 450px; }
.hero-actions { display: flex; gap: 20px; margin-bottom: 30px;}
.hero-features { display: flex; gap: 30px; font-size: 12px; color: #333; font-weight: 500;}
.hero-feature-item { display: flex; align-items: center; gap: 10px; color: #1a1a1a; }
.hero-feature-icon { width: 40px; height: 40px; background: var(--light-red); color: var(--primary-red); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; }

.mobile-only { display: none !important; }

.hero-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

.hero-image { width: 100%; height: 100%; object-fit: cover; }

/* Homepage Category Bar - JS-driven auto-scroll + drag (see index.php script) */
.category-bar-wrap {
    background: #ffffff;
    padding: 30px 0;
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
    user-select: none;
    position: relative;
    z-index: 1;
}

.category-bar-wrap.dragging {
    cursor: grabbing;
}

.category-bar-wrap.dragging .category-item {
    pointer-events: none; /* stop link navigating while dragging */
}

.category-track {
    display: flex;
    width: max-content;
    gap: 40px;
    will-change: transform;
    /* transform is driven by JS in index.php for a seamless loop + drag support */
}

.category-item {
    flex: 0 0 auto;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.category-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #f7f7f7;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.category-item:hover img {
    transform: scale(1.08);
    border-color: var(--primary-red);
}

.category-item span {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.category-bar-static {
    cursor: default;
}

.category-bar-static .category-track {
    justify-content: center;
    width: 100%;
}

/* Homepage Brand Bar - same auto-scroll/drag mechanism, logo cards instead of circular icons */
.brand-bar-wrap {
    background: #fafafa;
    padding: 30px 0;
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
    user-select: none;
    position: relative;
    z-index: 1;
}
.brand-bar-wrap.dragging { cursor: grabbing; }
.brand-bar-wrap.dragging .brand-item { pointer-events: none; }

.brand-track {
    display: flex;
    width: max-content;
    gap: 50px;
    align-items: center;
    will-change: transform;
}

.brand-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 70px;
    text-decoration: none;
}
.brand-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}
.brand-item.in-focus img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}

html.dark-mode .brand-bar-wrap {
    background: linear-gradient(120deg, #0d0d0d 0%, #2a0000 40%, #3a0000 60%, #0d0d0d 100%);
    background-size: 300% 300%;
    animation: categoryBgFlow 12s ease-in-out infinite;
    border-color: rgba(255,255,255,0.08);
}
html.dark-mode .brand-item img { filter: none; opacity: 1; }
html.dark-mode .brand-item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
html.dark-mode .brand-item.in-focus img { filter: none; opacity: 1; transform: scale(1.06); }



@media (max-width: 1024px) {
    .brand-bar-wrap { padding: 18px 0; }
    .brand-track { gap: 30px; }
    .brand-item { width: 100px; height: 54px; }
}

@media (max-width: 1024px) {
    .category-bar-wrap { padding: 20px 0; }
    .category-item { width: 100px; }
    .category-item img { width: 82px; height: 82px; transform: scale(1.12); }
    .category-item span { font-size: 12px; margin-top: 8px; }
}

/* Product Grid */
.section-header { padding: 60px 5% 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.section-title h2 { font-size: 32px; font-weight: 700; color: var(--primary-dark); }
.section-title p { color: var(--text-light); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; padding: 20px 5% 60px; }
.related-grid.product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related-grid .product-card { padding: 12px; }
.related-grid .product-img { height: 130px; margin-bottom: 10px; }
.related-grid .product-title { font-size: 14px; min-height: 36px; margin-bottom: 3px; }
.related-grid .product-rating { font-size: 11px; margin-bottom: 6px; }
.related-grid .product-price { font-size: 16px; margin-bottom: 10px; }
.related-grid .product-badge { padding: 3px 10px; font-size: 10px; margin-bottom: 10px; }
.related-grid .btn-cart { padding: 8px; font-size: 13px; }

.product-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    transition: 0.3s;
    position: relative;
    background: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card:hover { box-shadow: 0 10px 30px rgba(204,0,0,0.1); transform: translateY(-5px); border-color: rgba(204,0,0,0.2); }
.product-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.product-rating span { color: var(--text-light); margin-left: 5px; }
.product-price { font-size: 20px; font-weight: 700; color: var(--primary-dark); margin-bottom: 15px; }
.product-price del { font-size: 14px; color: var(--text-light); font-weight: 400; margin-left: 10px; }
.btn-cart { width: 100%; text-align: center; justify-content: center; background: white; color: var(--primary-red); border: 1.5px solid var(--primary-red); margin-top: auto; }
.btn-cart:hover { background: var(--primary-red); color: white; }
.product-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-bottom: 15px; width: fit-content; }
.product-img { width: 100%; height: 200px; object-fit: contain; margin-bottom: 15px; }
.product-rating { color: #f5b301; font-size: 12px; margin-bottom: 10px; }

/* Product Details */
.product-details { display: flex; gap: 50px; padding: 60px 5%; }
.product-gallery { flex: 1; background: var(--bg-light); border-radius: 12px; padding: 40px; text-align: center; position: relative;}
.product-main-img { max-width: 100%; height: 400px; object-fit: contain; }
.product-info { flex: 1; }
.stock-status { display: inline-block; background: #e8f5e9; color: #2e7d32; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-bottom: 15px;}
.product-info h1 { font-size: 36px; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.product-desc { color: var(--text-light); margin-bottom: 30px; font-size: 15px;}
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }
.feature-list li { display: flex; align-items: center; gap: 10px; color: var(--text-dark); font-weight: 500;}
.feature-list i { color: var(--primary-red); }
.action-row { display: flex; gap: 20px; margin-bottom: 30px; align-items: center; }
.qty-input { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.qty-btn { background: var(--bg-light); border: none; padding: 12px 15px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.qty-btn:hover { background: var(--light-red); color: var(--primary-red); }
.qty-input input { width: 50px; text-align: center; border: none; font-weight: 600; outline: none; }
.info-bar { display: flex; gap: 30px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.info-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.info-item i { font-size: 20px; color: var(--primary-red); }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--border-color); margin: 40px 5% 20px; }
.tab { padding: 15px 30px; font-weight: 600; color: var(--text-light); cursor: pointer; transition: color 0.2s; }
.tab.active { color: var(--primary-red); border-bottom: 2px solid var(--primary-red); }
.tab:hover:not(.active) { color: var(--primary-dark); }
.tab-content { padding: 0 5% 60px; display: none; }
.tab-content.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); }
.spec-table .spec-key { font-weight: 600; width: 35%; color: var(--text-dark); }
.spec-table .spec-value { color: var(--text-light); }
.spec-table .spec-row-even { background: var(--bg-light); }
.spec-table .spec-row-odd { background: transparent; }

/* Product page bottom layout: tabs on the left, "You May Also Like" on the right */
.product-bottom-row { display: flex; gap: 40px; padding: 40px 5% 60px; align-items: flex-start; flex-wrap: wrap; }
.product-tabs-col { flex: 2 1 480px; min-width: 300px; }
.product-tabs-col .tabs { margin: 0 0 20px 0; }
.product-tabs-col .tab-content { padding: 0; }
.related-col { flex: 1 1 360px; min-width: 0; max-width: 420px; overflow: hidden; }
.related-header { padding: 0; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }

/* "You May Also Like" — single scrollable row, 4 small cards, works left-to-right on any screen size */
.related-col .related-grid.product-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: unset;
    gap: 15px;
    padding: 4px 2px 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.related-col .related-grid.product-grid::-webkit-scrollbar { height: 6px; }
.related-col .related-grid.product-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.related-col .related-grid .product-card {
    flex: 0 0 150px;
    width: 150px;
    scroll-snap-align: start;
}
.related-col .related-grid .product-img { height: 100px; margin-bottom: 8px; }
.related-col .related-grid .product-title { font-size: 13px; height: 18px; -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.related-col .related-grid .product-rating { font-size: 11px; height: 16px; margin-bottom: 6px; overflow: hidden; }
.related-col .related-grid .product-price { font-size: 14px; margin-bottom: 8px; height: 38px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.related-col .related-grid .product-price del { display: block; margin-left: 0 !important; }
.related-col .related-grid .btn-cart { font-size: 12px; padding: 7px; height: 34px; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }

.related-scroll-arrows { display: flex; gap: 6px; }
.related-arrow-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--primary-red);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s;
}
.related-arrow-btn:hover { background: var(--primary-red); color: white; border-color: var(--primary-red); }

/* Reviews */
.review-form { margin-bottom: 40px; background: var(--bg-light); padding: 30px; border-radius: 8px; }
.review-form input, .review-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; font-family: 'Inter'; transition: border-color 0.2s; }
.review-form input:focus, .review-form textarea:focus { border-color: var(--primary-red); outline: none; box-shadow: 0 0 0 3px rgba(204,0,0,0.1); }
.star-rating { color: #ccc; font-size: 24px; cursor: pointer; margin-bottom: 15px; display: inline-block; direction: rtl;}
.star-rating input { display: none; }
.star-rating label { cursor: pointer; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #f5b301; }
.review-list { border-top: 1px solid var(--border-color); padding-top: 20px;}
.review-item { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;}
.review-header { display: flex; justify-content: space-between; margin-bottom: 5px;}
.review-name { font-weight: 600; }
.review-stars { color: #f5b301; font-size: 14px; }
.review-text { color: var(--text-light); font-size: 14px; }

/* Mobile Menu Defaults */
.mobile-menu-btn { display: none; cursor: pointer; font-size: 20px; color: var(--primary-dark); }
.mobile-sidebar { position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: white; z-index: 2000; transition: 0.3s; display: flex; flex-direction: column; overflow-y: auto;}
.mobile-sidebar.open { left: 0; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; display: none; }
.mobile-overlay.open { display: block; }
.mobile-sidebar-header { background: var(--primary-red); padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.close-menu { color: white; font-size: 20px; cursor: pointer; }
.mobile-nav-links { display: flex; flex-direction: column; padding: 20px 0; }
.mobile-nav-links a { padding: 15px 20px; border-bottom: 1px solid #eee; color: var(--primary-dark); font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 15px; transition: color 0.2s, background 0.2s;}
.mobile-nav-links a:hover { color: var(--primary-red); background: var(--light-red); }
.mobile-nav-links a i { width: 20px; color: var(--text-light); text-align: center; }
.mobile-sidebar-footer { background: var(--primary-red); padding: 20px; margin-top: auto; }

/* Responsive */
@media (max-width: 1024px) {
    .related-grid.product-grid { grid-template-columns: repeat(2, 1fr); }
    .mobile-dropdown-content a { border-bottom: 1px solid rgba(0,0,0,0.05) !important; color: var(--primary-dark) !important; padding: 12px 40px !important; }
    .mobile-dropdown-content a:hover { color: var(--primary-red) !important; background: var(--bg-light) !important; }
    .fa-chevron-down { transition: transform 0.3s ease; }

    header { flex-direction: row; justify-content: space-between; padding: 15px 5%; align-items: center; }
    .logo { width: auto; margin-bottom: 0; font-size: 20px;}
    .logo span { font-size: 22px; margin-right: 5px; }
    .desktop-nav { display: none; }
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    .mobile-menu-btn { display: block; }
    .header-icons { width: auto; margin-top: 0; gap: 15px; }
    .search-form { display: none; }
    
    .hero, .hero-slider { padding: 10px 2%; text-align: left; background: transparent; position: relative; height: auto !important; min-height: auto !important; }
    .hero-slider {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "a a" "b c";
        gap: 8px;
        aspect-ratio: unset;
    }
    .hero.slide { border-radius: 12px; height: auto; }
    .hero.slide:nth-child(1) { aspect-ratio: 16 / 9; }
    .hero.slide:nth-child(2), .hero.slide:nth-child(3) { aspect-ratio: 4 / 3; }
    .hero-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; margin-top: 0; }
    .hero-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0; object-position: right center;}
    
    .hero-content { position: relative; z-index: 2; left: auto; bottom: auto; width: 58%; padding: 65px 0 0 4%; margin-bottom: 0; }
    .hero-subtitle { justify-content: flex-start; margin-bottom: 3px; font-size: 7px; color: var(--primary-red); letter-spacing: 1.5px;}
    .hero-subtitle::after { display: block; width: 16px; background: var(--primary-red);}
    .hero h1 { font-size: 16px; text-align: left; margin-bottom: 3px; color: #1a1a1a; line-height: 1.15; }
    .hero h1 span { color: var(--primary-red); }
    .hero p { text-align: left; font-size: 8px; margin: 0 0 6px 0; max-width: 160px; color: #444; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
    
    .hero-actions { flex-direction: row; gap: 5px; width: auto; display: flex; }
    .hero-actions a { flex: none; padding: 5px 9px; font-size: 8px; justify-content: center; border-radius: 4px;}
    
    .hero-features.mobile-only { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 5px; width: 100%; align-items: flex-start; box-shadow: 0 4px 6px rgba(0,0,0,0.05);}
    .hero-features.mobile-only .hero-feature-item { width: 32%; flex-direction: column; text-align: center; gap: 5px; justify-content: center; max-width: none; color: var(--primary-dark);}
    .hero-features.mobile-only .hero-feature-icon { width: 30px; height: 30px; font-size: 12px; background: var(--light-red); color: var(--primary-red); margin: 0 auto;}
    .hero-features.mobile-only .hero-feature-item div:last-child { font-size: 9px; line-height: 1.2; color: var(--text-light);}
    
    .product-details { flex-direction: column; padding: 30px 5%; gap: 30px;}
    .product-info h1 { font-size: 28px; }
    .action-row { flex-direction: column; width: 100%; }
    .action-row .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
    .qty-input { width: 100%; justify-content: center; margin-bottom: 15px;}
    .info-bar { flex-direction: column; gap: 15px; align-items: flex-start; }
    
    .tabs { margin: 20px 5%; flex-wrap: wrap; }
    .tab { padding: 10px 15px; font-size: 14px; width: 50%; text-align: center; }
    
    #tab-reviews > div { flex-direction: column; gap: 30px; }
    
    footer > div { grid-template-columns: 1fr; text-align: center; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    
    /* You May Also Like — keep 4 small cards in one swipeable row on mobile */
    .related-col .related-grid .product-card { flex: 0 0 130px; width: 130px; }
    .related-col .related-grid .btn-cart { font-size: 10.5px; padding: 6px 4px; gap: 4px; height: 32px; }
    .related-col .related-grid .product-img { height: 80px; }
    .related-col .related-grid .product-title { font-size: 12px; min-height: 28px; }

    /* Shop Page */
    .shop-layout { flex-direction: column !important; padding: 20px 5% !important; }
    .shop-sidebar { width: 100% !important; margin-bottom: 30px; display: flex; overflow-x: auto; white-space: nowrap; gap: 15px;}
    .shop-sidebar h3 { display: none; }
    .shop-sidebar ul { display: flex; gap: 15px; }
    .shop-sidebar li { margin-bottom: 0 !important; }
}

@media (max-width: 480px) {
    .logo { font-size: 18px; }
    .logo span { font-size: 20px; }
    .logo-icon { width: 44px !important; height: 30px !important; }
    .logo-icon img { height: 44px !important; width: 44px !important; }
    .header-row-top { gap: 6px; }
    .mobile-header-icons { gap: 10px; }
    .theme-toggle-btn-mobile { width: 34px; height: 19px; }
    .theme-toggle-btn-mobile .toggle-knob { width: 14px; height: 14px; font-size: 8px; }
    html.dark-mode .theme-toggle-btn-mobile .toggle-knob { transform: translateX(15px); }
    .mobile-header-icons .icon-btn { font-size: 17px; }
    .hero h1 { font-size: 24px; }
    .hero p { font-size: 13px; max-width: 100%; }
    

    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 20px 4% 60px; }
    .product-card { padding: 8px; }
    .product-img { height: 90px; margin-bottom: 8px; }
    .product-badge { margin-bottom: 8px; padding: 3px 9px; font-size: 10px; }
    .product-title { font-size: 12px; min-height: 30px; margin-bottom: 3px; }
    .product-rating { font-size: 10px; margin-bottom: 4px; }
    .product-price { font-size: 13px; margin-bottom: 8px; }
    .btn-cart { padding: 4px 2px; font-size: 9.5px; gap: 3px; white-space: nowrap; }
    .shop-hero-banner { padding: 20px 5% !important; }
    .shop-hero-title { font-size: 22px !important; margin-bottom: 6px !important; }
    .shop-hero-sub { font-size: 13px !important; }
    .related-grid.product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .related-grid .product-card { padding: 10px; }
    .related-grid .btn-cart { font-size: 12px; padding: 8px; }
    .btn-primary, .btn-outline { padding: 10px 20px; font-size: 14px; }
    
    /* Product details gallery */
    .product-main-img { max-height: 250px; }
    .product-gallery { padding: 15px; }
    .feature-list { grid-template-columns: 1fr; }
    .info-bar { gap: 10px; }
    
    /* Tabs */
    .tab { padding: 8px 12px; font-size: 13px; }
}

/* Wectomedia footer link styling with red shimmer */
.wectomedia-link {
    background: linear-gradient(
        to right,
        #cc0000 0%,
        #e60000 25%,
        #ff6666 50%,
        #e60000 75%,
        #cc0000 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    animation: redShimmer 3s linear infinite;
    transition: all 0.3s ease;
    filter: drop-shadow(0px 0px 1px rgba(204, 0, 0, 0.5));
}

.wectomedia-link:hover {
    filter: drop-shadow(0px 0px 8px rgba(230, 0, 0, 0.9)) drop-shadow(0px 0px 15px rgba(204, 0, 0, 0.6));
    transform: scale(1.05) translateY(-1px);
}

@keyframes redShimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center;
    }
}

/* ===== Hero Group Auto-Fade Slideshow =====
   Each .hero.slide can now contain MULTIPLE .hero-fade-slide layers
   (one per uploaded image in that group). They stack on top of each
   other and cross-fade via the .is-active class, which is toggled by
   the JS timer in index.php. */

.hero-fade-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-fade-slide .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   THEME ANIMATIONS
   ============================================================ */

/* ---- 1. Category Section: subtle animated gradient background ---- */
.category-bar-wrap {
    background: linear-gradient(120deg, #ffffff 0%, #fff5f5 40%, #ffeaea 60%, #ffffff 100%);
    background-size: 300% 300%;
    animation: categoryBgFlow 12s ease-in-out infinite;
}

@keyframes categoryBgFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- 2. Category items: fade + rise in on page load ---- */
.category-item {
    opacity: 0;
    animation: categoryItemIn 0.6s ease forwards;
}

/* Stagger each icon so they pop in one after another instead of all at once */
.category-item:nth-child(1)  { animation-delay: 0.05s; }
.category-item:nth-child(2)  { animation-delay: 0.10s; }
.category-item:nth-child(3)  { animation-delay: 0.15s; }
.category-item:nth-child(4)  { animation-delay: 0.20s; }
.category-item:nth-child(5)  { animation-delay: 0.25s; }
.category-item:nth-child(6)  { animation-delay: 0.30s; }
.category-item:nth-child(7)  { animation-delay: 0.35s; }
.category-item:nth-child(8)  { animation-delay: 0.40s; }
.category-item:nth-child(9)  { animation-delay: 0.45s; }
.category-item:nth-child(10) { animation-delay: 0.50s; }

@keyframes categoryItemIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 3. Category icon circle: soft red glow pulse on hover (theme-matched) ---- */
.category-item img {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.category-item:hover img {
    transform: scale(1.08);
    border-color: var(--primary-red);
    box-shadow: 0 4px 20px rgba(204, 0, 0, 0.25), 0 0 0 4px rgba(204, 0, 0, 0.06);
}

/* ---- 4. Category label: small red underline grows in on hover ---- */
.category-item span {
    position: relative;
}

.category-item span::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--primary-red);
    transition: width 0.3s ease, left 0.3s ease;
}

.category-item:hover span::after {
    width: 100%;
    left: 0;
}

/* ---- 5. Cart icon: gentle bounce whenever cart-count updates (adds life to header) ---- */
.icon-btn .cart-count {
    animation: cartPulse 2.5s ease-in-out infinite;
}

@keyframes cartPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .category-bar-wrap,
    .category-item,
    .icon-btn .cart-count {
        animation: none !important;
    }
    .category-item { opacity: 1; }
}

/* ============================================================
   HERO BANNER SECTION ANIMATIONS
   ============================================================ */

/* ---- 1. Hero banners: fade + rise in on page load, staggered ---- */
.hero.slide {
    opacity: 0;
    animation: heroSlideIn 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.hero.slide:nth-child(1) { animation-delay: 0.1s; }
.hero.slide:nth-child(2) { animation-delay: 0.25s; }
.hero.slide:nth-child(3) { animation-delay: 0.4s; }

@keyframes heroSlideIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 2. Hero banner border: soft red glow ring that breathes gently ---- */
.hero.slide::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
    pointer-events: none;
    animation: heroGlowPulse 5s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes heroGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0); }
    50%      { box-shadow: 0 0 24px 2px rgba(204, 0, 0, 0.18); }
}

/* ---- 3. Hero image: slow, subtle ambient zoom (adds life even without hover) ---- */
.hero.slide .hero-image {
    animation: heroAmbientZoom 14s ease-in-out infinite alternate;
}

@keyframes heroAmbientZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* Hover still gets its own faster zoom - overrides the ambient one while hovering */
.hero.slide:hover .hero-image {
    animation-play-state: paused;
    transform: scale(1.08);
    transition: transform 0.5s ease;
}

/* ---- 4. Corner accent shimmer sweeping across each banner (ties into logo shimmer style) ---- */
.hero.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    animation: heroShimmerSweep 7s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
    z-index: 3;
}

@keyframes heroShimmerSweep {
    0%   { left: -60%; }
    12%  { left: 130%; }
    100% { left: 130%; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero.slide,
    .hero.slide::after,
    .hero.slide::before,
    .hero.slide .hero-image {
        animation: none !important;
    }
    .hero.slide { opacity: 1; }
}

/* ============================================================
   ROTATING HERO SLIDES + NAV MENU ANIMATIONS
   ============================================================ */

/* ================= 1. Auto-rotating hero images (multi-image groups) ================= */
/* Gives the slide that's leaving AND the slide that's arriving their own
   motion, instead of a plain fade - a soft slide+fade+scale combo. */

.hero-fade-slide {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s ease-in-out, transform 1.2s ease-in-out;
    z-index: 1;
}

.hero-fade-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.hero-fade-slide.is-active .hero-image {
    animation: heroRotateReveal 1.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes heroRotateReveal {
    from { transform: scale(1.1); filter: brightness(0.9); }
    to   { transform: scale(1); filter: brightness(1); }
}

/* Thin red progress bar along the bottom edge of each rotating group,
   fills up over the rotation interval so people can see the countdown */
.hero.slide .hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--primary-red);
    z-index: 4;
    border-radius: 0 2px 2px 0;
}

.hero.slide .hero-progress.animate {
    animation: heroProgressFill 4s linear;
}

@keyframes heroProgressFill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ================= 2. Nav menu (Home / Shop / About Us / Contact) ================= */

.nav-links a {
    padding: 8px 4px;
    transition: color 0.3s ease, transform 0.25s ease;
}

.nav-links a:hover {
    transform: translateY(-2px);
}

/* Replace the simple underline with a red pill background that grows from
   the center on hover - matches the rounded, red-accented button style
   used elsewhere on the site (btn-primary, category items) */
.nav-links a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 0%;
    height: 100%;
    background: var(--light-red);
    border-radius: 6px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
    z-index: -1;
}

.nav-links a:hover::before {
    width: 100%;
}

/* Keep the original underline too, but make it a bit livelier */
.nav-links a::after {
    height: 2px;
    background: linear-gradient(90deg, var(--primary-red), var(--dark-red));
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active page link gets a subtle continuous glow so it's obviously "current" */
.nav-links a.active {
    animation: navActiveGlow 3s ease-in-out infinite;
}

@keyframes navActiveGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(204, 0, 0, 0); }
    50%      { text-shadow: 0 0 8px rgba(204, 0, 0, 0.35); }
}

/* Logo icon: gentle breathing scale to draw the eye on load, matches the
   shimmer text next to it */
.logo-icon i {
    display: inline-block;
    animation: logoBreathe 4s ease-in-out infinite;
}

@keyframes logoBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fade-slide,
    .hero-fade-slide.is-active .hero-image,
    .hero.slide .hero-progress.animate,
    .nav-links a,
    .nav-links a.active,
    .logo-icon i {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   HEADER BACKGROUND - SOFT DRIFTING RED MIST (full-width coverage)
   Uses several large, soft, blurred radial-gradient "mist clouds" that
   drift slowly and independently across the header, instead of one hard
   moving bar. Feels like light red fog gently rolling behind the navbar.
   A 4th cloud was added anchored near the right edge (near the cart icon)
   so the mist now covers the FULL width of the header, not just up to
   the cart icon.
   ============================================================ */

header {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(204,0,0,0.10) 0%, rgba(204,0,0,0) 55%),
        radial-gradient(circle at 60% 30%, rgba(230,0,0,0.08) 0%, rgba(230,0,0,0) 60%),
        radial-gradient(circle at 85% 70%, rgba(204,0,0,0.09) 0%, rgba(204,0,0,0) 55%),
        radial-gradient(circle at 98% 45%, rgba(204,0,0,0.09) 0%, rgba(204,0,0,0) 55%);
    background-repeat: no-repeat;
    background-size: 160% 300%, 150% 300%, 160% 300%, 140% 300%;
    background-position: 0% 50%, 30% 50%, 55% 50%, 85% 50%;
    animation: mistDrift1 14s ease-in-out infinite,
               mistDrift2 18s ease-in-out infinite,
               mistDrift3 22s ease-in-out infinite,
               mistDrift4 16s ease-in-out infinite;
}

@keyframes mistDrift1 {
    0%, 100% { background-position: -5% 45%, 30% 50%, 55% 50%, 85% 50%; }
    50%      { background-position: 5% 55%, 30% 50%, 55% 50%, 85% 50%; }
}

@keyframes mistDrift2 {
    0%, 100% { background-position: 0% 50%, 24% 42%, 55% 50%, 85% 50%; }
    50%      { background-position: 0% 50%, 36% 58%, 55% 50%, 85% 50%; }
}

@keyframes mistDrift3 {
    0%, 100% { background-position: 0% 50%, 30% 50%, 49% 58%, 85% 50%; }
    50%      { background-position: 0% 50%, 30% 50%, 61% 42%, 85% 50%; }
}

@keyframes mistDrift4 {
    0%, 100% { background-position: 0% 50%, 30% 50%, 55% 50%, 79% 44%; }
    50%      { background-position: 0% 50%, 30% 50%, 55% 50%, 91% 56%; }
}

header.scrolled {
    background-color: #ffffff;
    background-image: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    header {
        animation: none;
        background-image: none;
        background-color: #ffffff;
    }
}
/* =======================================================================
   SHOP PAGE — FILTER SYSTEM
======================================================================= */

.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 5%;
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
    flex-wrap: wrap;
}
.shop-toolbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-results-count { color: var(--text-dark); font-size: 14px; }
.shop-results-count strong { color: var(--primary-dark); }

.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--primary-red);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}
.filter-count-badge {
    background: white;
    color: var(--primary-red);
    font-size: 11px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sort-form { display: flex; align-items: center; }
.sort-select {
    padding: 9px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}
.sort-select:focus { outline: none; border-color: var(--primary-red); }

/* ---- Active filter chips ---- */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 15px 5%;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}
.filter-chip:hover { border-color: var(--primary-red); color: var(--primary-red); }
.filter-chip i { font-size: 11px; color: var(--text-light); }
.filter-chip:hover i { color: var(--primary-red); }
.filter-clear-all {
    color: var(--primary-red);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 5px;
}

/* ---- Layout ---- */
.shop-layout {
    padding: 30px 5% 60px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
}
.shop-products { width: 100%; }
#productResults { transition: opacity 0.25s ease; }

.no-products-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}
.no-products-msg i { font-size: 40px; margin-bottom: 15px; color: var(--border-color); }
.no-products-msg p { margin-bottom: 20px; font-size: 15px; }

/* ---- Filter sidebar / drawer ---- */
.filter-drawer {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle, rgba(204,0,0,0.08) 0%, rgba(204,0,0,0) 60%),
        radial-gradient(circle, rgba(230,0,0,0.07) 0%, rgba(230,0,0,0) 65%),
        radial-gradient(circle, rgba(204,0,0,0.08) 0%, rgba(204,0,0,0) 60%);
    background-repeat: no-repeat;
    background-size: 220% 220%, 200% 200%, 240% 240%;
    background-position: 0% 0%, 50% 50%, 100% 100%;
    animation: sidebarMist1 16s ease-in-out infinite,
               sidebarMist2 20s ease-in-out infinite,
               sidebarMist3 24s ease-in-out infinite;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    position: sticky;
    top: 20px;
    overflow: hidden;
}

@keyframes sidebarMist1 {
    0%, 100% { background-position: -20% -20%, 50% 50%, 100% 100%; }
    50%      { background-position: 20% 30%, 50% 50%, 100% 100%; }
}
@keyframes sidebarMist2 {
    0%, 100% { background-position: 0% 0%, 30% 70%, 100% 100%; }
    50%      { background-position: 0% 0%, 70% 20%, 100% 100%; }
}
@keyframes sidebarMist3 {
    0%, 100% { background-position: 0% 0%, 50% 50%, 80% 60%; }
    50%      { background-position: 0% 0%, 50% 50%, 120% 140%; }
}
.filter-drawer-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-red);
    color: white;
    padding: 18px 20px;
}
.filter-drawer-header h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.filter-drawer-close { cursor: pointer; font-size: 18px; }

.filter-block {
    border-bottom: 1px solid var(--border-color);
    padding: 18px 20px;
}
.filter-block:last-child { border-bottom: none; }
.filter-block-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
    transition: color 0.3s ease;
}
.filter-block-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--primary-red);
    transition: width 0.35s ease;
}
.filter-block:not(.collapsed) .filter-block-title { color: var(--primary-red); }
.filter-block:not(.collapsed) .filter-block-title::after { width: 100%; }
.filter-block-title i {
    font-size: 12px;
    color: var(--primary-red);
    transition: transform 0.35s ease;
}
.filter-block.collapsed .filter-block-title i { transform: rotate(180deg); }
.filter-block-title:hover { color: var(--primary-red); }
.filter-block-title:hover i { color: var(--dark-red); }

.filter-block-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.filter-block.collapsed .filter-block-body {
    max-height: 0;
    opacity: 0;
    gap: 0;
}

.filter-checkbox, .filter-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-dark);
    cursor: pointer;
}
.filter-checkbox input, .filter-radio input {
    accent-color: var(--primary-red);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.filter-count { margin-left: auto; color: var(--text-light); font-size: 12px; }

.price-slider {
    width: 100%;
    accent-color: var(--primary-red);
    margin-bottom: 14px;
    cursor: pointer;
}
.price-inputs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.price-input-group { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.price-input-group label { font-size: 11px; color: var(--text-light); text-transform: uppercase; }
.price-input-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.price-input-group input:focus { outline: none; border-color: var(--primary-red); }
.price-sep { color: var(--text-light); margin-top: 16px; }
.filter-apply-price-btn { width: 100%; justify-content: center; padding: 10px; font-size: 13px; }

.filter-drawer-footer { display: none; padding: 15px 20px; border-top: 1px solid var(--border-color); }

.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}
.filter-overlay.open { display: block; }

/* =======================================================================
   MOBILE — filters become a slide-in drawer
======================================================================= */
@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
        padding: 20px 5% 50px;
    }
    .filter-toggle-btn { display: inline-flex; }

    .filter-drawer {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100%;
        width: 85%;
        max-width: 340px;
        z-index: 999;
        border-radius: 0;
        transition: left 0.3s ease;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .filter-drawer.open { left: 0; }
    .filter-drawer-header { display: flex; }
    .filter-drawer-footer { display: block; margin-top: auto; }

    .shop-toolbar { padding: 15px 5%; }
    .shop-toolbar-right { width: 100%; }
    .sort-form { width: 100%; }
    .sort-select { width: 100%; }
    .active-filter-chips { padding: 12px 5%; }
}

@media (max-width: 480px) {
    .filter-drawer { width: 90%; }
}

/* =======================================================================
   SHOP PAGE — PAGINATION
======================================================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
    background: white;
}
.page-btn:hover:not(.disabled):not(.active) { border-color: var(--primary-red); color: var(--primary-red); }
.page-btn.active { background: var(--primary-red); border-color: var(--primary-red); color: white; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.page-btn.page-nav { gap: 8px; padding: 0 16px; }
.page-ellipsis { color: var(--text-light); padding: 0 4px; }

@media (max-width: 480px) {
    .page-btn.page-nav span { display: none; }
    .page-btn { min-width: 36px; height: 36px; font-size: 13px; }
}

/* =======================================================================
   HOMEPAGE — Featured Products grid (fixed column counts so 12 products
   always fill complete rows on any screen width, no dangling half-row)
======================================================================= */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 1100px) {
    .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 700px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
@media (max-width: 420px) {
    .featured-grid { grid-template-columns: 1fr; }
}














/* ============================================================
   PRODUCT PAGE — BLACK + RED ANIMATED DARK BACKGROUND
   Scoped to <body class="product-page-dark"> only (set in product.php),
   so every other page keeps its white background untouched.
   Add this to the END of style.css.
   ============================================================ */

body.product-page-dark {
    /* Base layer: one smooth diagonal black->red->black blend that always
       covers the ENTIRE viewport edge-to-edge, so there's no bare black
       patch anywhere regardless of screen size. */
    background-color: #0d0d0d;
    background-image:
        linear-gradient(135deg, #1a0000 0%, #3a0000 25%, #0d0d0d 50%, #3a0000 75%, #1a0000 100%),
        radial-gradient(circle at 50% 50%, rgba(204,0,0,0.35) 0%, rgba(204,0,0,0) 70%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 150% 150%;
    animation: darkMistBaseShift 18s ease-in-out infinite,
               darkMistGlow 12s ease-in-out infinite;
}

@keyframes darkMistBaseShift {
    0%, 100% { background-position: 0% 0%, 30% 30%; }
    50%      { background-position: 100% 100%, 70% 70%; }
}

@keyframes darkMistGlow {
    0%, 100% { background-position: 0% 0%, 20% 60%; }
    50%      { background-position: 0% 0%, 80% 40%; }
}

/* Header stays white/light as normal — only the page body behind it goes dark */
body.product-page-dark header {
    background-color: #ffffff;
}

/* Breadcrumb text needs to be visible against the dark page background */
body.product-page-dark > div:first-of-type,
body.product-page-dark .breadcrumb {
    color: rgba(255,255,255,0.55) !important;
}
body.product-page-dark > div:first-of-type a {
    color: rgba(255,255,255,0.75) !important;
}
body.product-page-dark > div:first-of-type span {
    color: #ffffff !important;
}

/* Product gallery stays WHITE (photos need a light background) even though
   the page behind it is dark - only add a subtle red glow border so it
   still feels tied into the black+red theme */
body.product-page-dark .product-gallery {
    background: #ffffff;
    border: 1px solid rgba(204,0,0,0.25);
    box-shadow: 0 0 30px rgba(204,0,0,0.15);
}

/* Quantity selector (- / input / +): black+red themed instead of plain white */
body.product-page-dark .qty-input {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.35);
}
body.product-page-dark .qty-btn {
    background: #1f1f1f;
    color: #ffffff;
}
body.product-page-dark .qty-btn:hover {
    background: var(--primary-red);
    color: #ffffff;
}
body.product-page-dark .qty-input input {
    background: #171717;
    color: #ffffff;
}

body.product-page-dark .product-info h1 {
    color: #ffffff;
}

body.product-page-dark .product-desc {
    color: rgba(255,255,255,0.65);
}

body.product-page-dark .price-highlight {
    color: #ffffff;
}

body.product-page-dark .price-old {
    color: rgba(255,255,255,0.45);
}

body.product-page-dark .feature-list li {
    color: rgba(255,255,255,0.85);
}

body.product-page-dark .info-bar {
    border-top-color: rgba(255,255,255,0.15);
}

body.product-page-dark .info-item {
    color: rgba(255,255,255,0.85);
}

body.product-page-dark .info-sub-text {
    color: rgba(255,255,255,0.5) !important;
}

body.product-page-dark .product-rating span {
    color: rgba(255,255,255,0.7) !important;
}

/* Tabs section */
body.product-page-dark .tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}
body.product-page-dark .tab {
    color: rgba(255,255,255,0.5);
}
body.product-page-dark .tab:hover:not(.active) {
    color: rgba(255,255,255,0.8);
}
body.product-page-dark .tab-content h3 {
    color: #ffffff;
}
body.product-page-dark .tab-content p,
body.product-page-dark .review-text {
    color: rgba(255,255,255,0.65);
}
body.product-page-dark .spec-table td {
    border-bottom-color: rgba(255,255,255,0.1);
}
body.product-page-dark .spec-table .spec-key {
    color: #ffffff;
}
body.product-page-dark .spec-table .spec-value {
    color: rgba(255,255,255,0.65);
}
body.product-page-dark .spec-table .spec-row-even {
    background: rgba(255,255,255,0.04);
}
body.product-page-dark .spec-table .spec-row-odd {
    background: transparent;
}

/* Review list + form become dark cards too */
body.product-page-dark .review-form {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.2);
}
body.product-page-dark .review-form label {
    color: rgba(255,255,255,0.85);
}

/* The rule above (body.product-page-dark .review-form label) was overriding
   the star-rating's hover/checked color because it matches the SAME label
   elements. Force the star color back with higher specificity so clicking/
   hovering a star still turns it (and the stars after it) yellow. */
body.product-page-dark .review-form .star-rating label {
    color: #ccc;
}
body.product-page-dark .review-form .star-rating label:hover,
body.product-page-dark .review-form .star-rating label:hover ~ label,
body.product-page-dark .review-form .star-rating input:checked ~ label {
    color: #f5b301 !important;
}
body.product-page-dark .review-form input,
body.product-page-dark .review-form textarea {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
body.product-page-dark .review-item {
    border-bottom-color: rgba(255,255,255,0.1);
}
body.product-page-dark .review-name {
    color: #ffffff;
}
body.product-page-dark .stock-status {
    background: rgba(255,255,255,0.08);
}

body.product-page-dark .related-arrow-btn {
    background: #171717;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
body.product-page-dark .related-arrow-btn:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #ffffff;
}
html.dark-mode .related-arrow-btn {
    background: #171717;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
html.dark-mode .related-arrow-btn:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #ffffff;
}

/* "You May Also Like" cards on the dark product page: swap the white
   card shell for a dark one that matches the page's black+red theme.
   The photo itself stays on its own small light patch (product photos
   are shot on white/transparent), only the surrounding card goes dark. */
body.product-page-dark .related-col .product-card {
    background: #171717;
    border-color: rgba(204,0,0,0.25);
    box-shadow: 0 0 16px rgba(204,0,0,0.10);
}
body.product-page-dark .related-col .product-card:hover {
    box-shadow: 0 10px 26px rgba(204,0,0,0.28);
    border-color: rgba(204,0,0,0.4);
}
body.product-page-dark .related-col .product-title a {
    color: #ffffff;
}
body.product-page-dark .related-col .product-price {
    color: #ffffff;
}
body.product-page-dark .related-col .product-price del {
    color: rgba(255,255,255,0.45);
}
body.product-page-dark .related-col .product-rating span {
    color: rgba(255,255,255,0.55) !important;
}
body.product-page-dark .related-col .product-img {
    background: #ffffff;
    border-radius: 6px;
    padding: 6px;
}

html.dark-mode .related-col .product-card {
    background: #171717;
    border-color: rgba(204,0,0,0.25);
    box-shadow: 0 0 16px rgba(204,0,0,0.10);
}
html.dark-mode .related-col .product-card:hover {
    box-shadow: 0 10px 26px rgba(204,0,0,0.28);
    border-color: rgba(204,0,0,0.4);
}
html.dark-mode .related-col .product-title a {
    color: #ffffff;
}
html.dark-mode .related-col .product-price {
    color: #ffffff;
}
html.dark-mode .related-col .product-price del {
    color: rgba(255,255,255,0.45);
}
html.dark-mode .related-col .product-rating span {
    color: rgba(255,255,255,0.55) !important;
}
html.dark-mode .related-col .product-img {
    background: #ffffff;
    border-radius: 6px;
    padding: 6px;
}

body.product-page-dark .related-col .product-card,
html.dark-mode .related-col .product-card {
    border-radius: 14px;
}
body.product-page-dark .related-col .product-badge,
html.dark-mode .related-col .product-badge {
    border-radius: 20px !important;
    background: transparent !important;
    border: 1.5px solid currentColor;
    padding: 4px 14px !important;
}

body.product-page-dark .related-col .btn-cart,
html.dark-mode .related-col .btn-cart {
    background: var(--primary-red) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
}
body.product-page-dark .related-col .btn-cart:hover:not([disabled]),
html.dark-mode .related-col .btn-cart:hover:not([disabled]) {
    background: var(--dark-red) !important;
}
body.product-page-dark .related-col .btn-cart[disabled],
html.dark-mode .related-col .btn-cart[disabled] {
    background: #3a3a3a !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 6px !important;
}

/* Footer often expects a light section above it - keep footer readable
   even though the page above it is now dark */
body.product-page-dark footer {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.product-page-dark {
        animation: none;
        background-position: 0% 0%, 50% 50%;
    }
}




/* ============================================================
   SHOP PAGE — BLACK + RED ANIMATED DARK BACKGROUND
   Scoped to <body class="shop-page-dark"> only, so nothing else
   on the site is affected. Same base look as product-page-dark,
   plus theming for the shop toolbar / filter chips / filter
   sidebar / sort select / pagination.
   ============================================================ */

body.shop-page-dark {
    background-color: #0d0d0d;
    background-image:
        linear-gradient(135deg, #1a0000 0%, #3a0000 25%, #0d0d0d 50%, #3a0000 75%, #1a0000 100%),
        radial-gradient(circle at 50% 50%, rgba(204,0,0,0.35) 0%, rgba(204,0,0,0) 70%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 150% 150%;
    animation: darkMistBaseShift 18s ease-in-out infinite,
               darkMistGlow 12s ease-in-out infinite;
}

/* Header stays white as normal */
body.shop-page-dark header {
    background-color: #ffffff;
}

/* Breadcrumb / top intro banner text */
body.shop-page-dark .breadcrumb {
    color: rgba(255,255,255,0.55) !important;
}

/* The dark "Shop Power Tools" intro banner already has its own
   --primary-dark background; keep it, just tie the edges in */
body.shop-page-dark > div[style*="background: var(--primary-dark)"] {
    background: transparent !important;
}

/* ---- Toolbar (results count + sort) ---- */
body.shop-page-dark .shop-toolbar {
    border-bottom-color: rgba(255,255,255,0.15);
}
body.shop-page-dark .shop-results-count {
    color: rgba(255,255,255,0.75);
}
body.shop-page-dark .shop-results-count strong {
    color: #ffffff;
}
body.shop-page-dark .sort-select {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.35);
    color: #ffffff;
}
body.shop-page-dark .sort-select:focus {
    border-color: var(--primary-red);
}
body.shop-page-dark .filter-toggle-btn {
    box-shadow: 0 0 15px rgba(204,0,0,0.25);
}

/* ---- Active filter chips bar ---- */
body.shop-page-dark .active-filter-chips {
    background: #171717;
    border-bottom-color: rgba(255,255,255,0.1);
}
body.shop-page-dark .filter-chip {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
body.shop-page-dark .filter-chip:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}
body.shop-page-dark .filter-chip i {
    color: rgba(255,255,255,0.4);
}

/* ---- Filter sidebar / drawer ---- */
body.shop-page-dark .filter-drawer {
    background-color: #171717;
    background-image:
        radial-gradient(circle, rgba(204,0,0,0.12) 0%, rgba(204,0,0,0) 60%),
        radial-gradient(circle, rgba(230,0,0,0.10) 0%, rgba(230,0,0,0) 65%),
        radial-gradient(circle, rgba(204,0,0,0.12) 0%, rgba(204,0,0,0) 60%);
    border: 1px solid rgba(204,0,0,0.25);
    box-shadow: 0 0 30px rgba(204,0,0,0.12);
}
body.shop-page-dark .filter-block {
    border-bottom-color: rgba(255,255,255,0.1);
}
body.shop-page-dark .filter-block-title {
    color: rgba(255,255,255,0.85);
}
body.shop-page-dark .filter-block:not(.collapsed) .filter-block-title {
    color: var(--primary-red);
}
body.shop-page-dark .filter-checkbox,
body.shop-page-dark .filter-radio {
    color: rgba(255,255,255,0.75);
}
body.shop-page-dark .filter-count {
    color: rgba(255,255,255,0.4);
}
body.shop-page-dark .price-input-group label {
    color: rgba(255,255,255,0.45);
}
body.shop-page-dark .price-input-group input {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
body.shop-page-dark .price-sep {
    color: rgba(255,255,255,0.4);
}
body.shop-page-dark .filter-drawer-footer {
    border-top-color: rgba(255,255,255,0.1);
}

/* Mobile drawer header keeps the solid red bar (already themed) */

/* ---- Product cards: keep white cards for photo clarity, just
   add a subtle red-glow edge so they feel tied into the dark page ---- */
body.shop-page-dark .product-card {
    background: #ffffff;
    border-color: rgba(204,0,0,0.2);
    box-shadow: 0 0 20px rgba(204,0,0,0.08);
}
body.shop-page-dark .product-card:hover {
    box-shadow: 0 12px 30px rgba(204,0,0,0.25);
}
body.shop-page-dark .no-products-msg {
    color: rgba(255,255,255,0.6);
}

/* ---- Pagination ---- */
body.shop-page-dark .page-btn {
    background: #171717;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
body.shop-page-dark .page-btn:hover:not(.disabled):not(.active) {
    border-color: var(--primary-red);
    color: var(--primary-red);
}
body.shop-page-dark .page-btn.active {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #ffffff;
}
body.shop-page-dark .page-ellipsis {
    color: rgba(255,255,255,0.4);
}

/* Footer stays readable above the dark body */
body.shop-page-dark footer {
    position: relative;
    z-index: 1;
}




/* Cart page (cart.php) */
html.dark-mode #cart-container,
html.dark-mode #cart-container table,
html.dark-mode #cart-container th,
html.dark-mode #cart-container td {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode #cart-container tr {
    border-bottom-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode h1[style*="color: var(--primary-dark)"] {
    color: #ffffff !important;
}
html.dark-mode #cart-summary {
    border-top-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode #cart-summary h3[style*="color: var(--primary-dark)"] {
    color: #ffffff !important;
}



@media (prefers-reduced-motion: reduce) {
    body.shop-page-dark {
        animation: none;
        background-position: 0% 0%, 50% 50%;
    }
}










/* ============================================================
   HOME PAGE — BLACK + RED ANIMATED DARK BACKGROUND
   Scoped to <body class="home-page-dark"> only, so nothing else
   on the site is affected. Same base look as product-page-dark /
   shop-page-dark, plus theming for the hero banners, category
   bar, and featured products section so the whole homepage reads
   as one consistent black+red theme.
   ============================================================ */

body.home-page-dark {
    background-color: #0d0d0d;
    background-image:
        linear-gradient(135deg, #1a0000 0%, #3a0000 25%, #0d0d0d 50%, #3a0000 75%, #1a0000 100%),
        radial-gradient(circle at 50% 50%, rgba(204,0,0,0.35) 0%, rgba(204,0,0,0) 70%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 150% 150%;
    animation: darkMistBaseShift 18s ease-in-out infinite,
               darkMistGlow 12s ease-in-out infinite;
}

/* Header stays white as normal */
body.home-page-dark header {
    background-color: #ffffff;
}

/* ---- Hero banner section: drop the light pink gradient, let the
   dark body show through behind/around the banner images ---- */
body.home-page-dark .hero {
    background: transparent;
}
body.home-page-dark .hero-slider:has(.hero.slide:only-child) .hero.slide {
    background: linear-gradient(135deg, #1a0000 0%, #3a0000 50%, #1a0000 100%);
}

/* Mobile "features" strip below the hero (Trusted Quality / Top Brands / Fast Delivery) */
body.home-page-dark .hero-features.mobile-only {
    background: #171717 !important;
    box-shadow: 0 4px 20px rgba(204,0,0,0.15) !important;
}
body.home-page-dark .hero-features.mobile-only .hero-feature-item {
    color: #ffffff !important;
}
body.home-page-dark .hero-features.mobile-only .hero-feature-item span,
body.home-page-dark .hero-features.mobile-only .hero-feature-item div:last-child {
    color: rgba(255,255,255,0.55) !important;
}
body.home-page-dark .hero-feature-icon {
    background: rgba(204,0,0,0.15) !important;
    color: var(--primary-red) !important;
}

/* ---- Category bar: swap the light pink flowing gradient for a dark
   red/black one, keep the same drifting animation ---- */
body.home-page-dark .category-bar-wrap {
    background: linear-gradient(120deg, #0d0d0d 0%, #2a0000 40%, #3a0000 60%, #0d0d0d 100%);
    background-size: 300% 300%;
    border-top-color: rgba(255,255,255,0.08);
    border-bottom-color: rgba(255,255,255,0.08);
}
body.home-page-dark .category-item span {
    color: #ffffff;
}
body.home-page-dark .category-item img {
    border-color: #2a2a2a;
    box-shadow: 0 4px 14px rgba(204,0,0,0.2);
}
body.home-page-dark .category-item:hover img {
    border-color: var(--primary-red);
    box-shadow: 0 4px 20px rgba(204, 0, 0, 0.4), 0 0 0 4px rgba(204, 0, 0, 0.15);
}

/* ---- Featured Products section header ---- */
body.home-page-dark .section-title h2 {
    color: #ffffff;
}
body.home-page-dark .section-title p {
    color: rgba(255,255,255,0.55);
}
body.home-page-dark .section-header a {
    color: var(--primary-red) !important;
}

/* ---- Product cards: keep white cards for photo clarity, add the
   same subtle red-glow edge used on shop.php ---- */
body.home-page-dark .product-card {
    background: #ffffff;
    border-color: rgba(204,0,0,0.2);
    box-shadow: 0 0 20px rgba(204,0,0,0.08);
}
body.home-page-dark .product-card:hover {
    box-shadow: 0 12px 30px rgba(204,0,0,0.25);
}

/* Fallback "Add hero banners from admin panel" placeholder block —
   restyle so it doesn't clash with the dark page if no banners exist yet */
body.home-page-dark .hero-slider .hero.slide.active[style*="fff5f5"] {
    background: linear-gradient(135deg, #1a0000 0%, #3a0000 50%, #1a0000 100%) !important;
}
body.home-page-dark .hero-slider .hero.slide.active[style*="fff5f5"] span {
    color: rgba(255,255,255,0.5) !important;
}

/* Footer stays readable above the dark body */
body.home-page-dark footer {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.home-page-dark {
        animation: none;
        background-position: 0% 0%, 50% 50%;
    }
}



/* ============================================================
   FIX — Category icons losing contrast on dark backgrounds
   The icon images are transparent-background line icons, so on a
   dark red page they became invisible (black lines on dark red).
   Give the circle a permanent light backdrop regardless of theme.
   ============================================================ */
.category-item img {
    background-color: #f7f7f7;
    padding: 18px;
}

html.dark-mode .category-item img {
    background-color: #ffffff;
    border-color: rgba(255,255,255,0.15);
}

/* ============================================================
   SITE-WIDE DARK / LIGHT MODE TOGGLE
   Controlled by JS (adds/removes "dark-mode" on <html>), saved to
   localStorage, applies to EVERY page (home, shop, product, etc.)
   instead of being tied to a specific page.
   ============================================================ */

/* ---- Toggle switch button (placed in header) ---- */
.theme-toggle-btn {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 20px;
    background: #e8e8e8;
    border: 1px solid #ddd;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}
.theme-toggle-btn .toggle-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #f5b301;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transform: translateX(0);
    transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
}
html.dark-mode .theme-toggle-btn {
    background: var(--primary-red);
    border-color: var(--dark-red);
}
html.dark-mode .theme-toggle-btn .toggle-knob {
    transform: translateX(20px);
    background: #171717;
    color: #ffffff;
}
.theme-toggle-btn-mobile { width: 40px; height: 22px; }
.theme-toggle-btn-mobile .toggle-knob { width: 16px; height: 16px; font-size: 9px; }
html.dark-mode .theme-toggle-btn-mobile .toggle-knob { transform: translateX(18px); }

/* ---- Base dark background (applies everywhere: home / shop / product) ---- */
html.dark-mode body {
    background-color: #0d0d0d;
    background-image:
        linear-gradient(135deg, #1a0000 0%, #3a0000 25%, #0d0d0d 50%, #3a0000 75%, #1a0000 100%),
        radial-gradient(circle at 50% 50%, rgba(204,0,0,0.35) 0%, rgba(204,0,0,0) 70%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 150% 150%;
    animation: darkMistBaseShift 18s ease-in-out infinite,
               darkMistGlow 12s ease-in-out infinite;
}
html.dark-mode header {
    background: linear-gradient(120deg, #1a0000 0%, #000000 40%, #2a0000 70%, #000000 100%);
    background-size: 300% 300%;
    animation: headerRedBlackShift 12s ease-in-out infinite;
    border-bottom-color: #cc0000;
    box-shadow: 0 2px 20px rgba(204,0,0,0.25);
}
@keyframes headerRedBlackShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
html.dark-mode .nav-links a { color: rgba(255,255,255,0.85); }
html.dark-mode .nav-links a:hover { color: var(--primary-red); }
html.dark-mode .logo span:not(.logo-text-shimmer) { color: rgba(255,255,255,0.6); }
html.dark-mode .icon-btn { color: rgba(255,255,255,0.85); }
html.dark-mode .icon-btn:hover { color: var(--primary-red); }
html.dark-mode .mobile-menu-btn { color: rgba(255,255,255,0.85); }
html.dark-mode footer {
    position: relative;
    z-index: 1;
}

/* ---- Home page: hero + category bar + featured products ---- */
html.dark-mode .hero {
    background: transparent;
}
html.dark-mode .hero-slider:has(.hero.slide:only-child) .hero.slide {
    background: linear-gradient(135deg, #1a0000 0%, #3a0000 50%, #1a0000 100%);
}
html.dark-mode .hero-features.mobile-only {
    background: #171717 !important;
    box-shadow: 0 4px 20px rgba(204,0,0,0.15) !important;
}
html.dark-mode .hero-features.mobile-only .hero-feature-item {
    color: #ffffff !important;
}
html.dark-mode .hero-features.mobile-only .hero-feature-item span,
html.dark-mode .hero-features.mobile-only .hero-feature-item div:last-child {
    color: rgba(255,255,255,0.55) !important;
}
html.dark-mode .hero-feature-icon {
    background: rgba(204,0,0,0.15) !important;
    color: var(--primary-red) !important;
}
html.dark-mode .category-bar-wrap {
    background: linear-gradient(120deg, #0d0d0d 0%, #2a0000 40%, #3a0000 60%, #0d0d0d 100%);
    background-size: 300% 300%;
    border-top-color: rgba(255,255,255,0.08);
    border-bottom-color: rgba(255,255,255,0.08);
}
html.dark-mode .category-item span {
    color: #ffffff;
}
html.dark-mode .category-item:hover img {
    border-color: var(--primary-red);
    box-shadow: 0 4px 20px rgba(204, 0, 0, 0.4), 0 0 0 4px rgba(204, 0, 0, 0.15);
}
html.dark-mode .section-title h2 {
    color: #ffffff;
}
html.dark-mode .section-title p {
    color: rgba(255,255,255,0.55);
}
html.dark-mode .section-header a {
    color: var(--primary-red) !important;
}
html.dark-mode .hero-slider .hero.slide.active[style*="fff5f5"] {
    background: linear-gradient(135deg, #1a0000 0%, #3a0000 50%, #1a0000 100%) !important;
}
html.dark-mode .hero-slider .hero.slide.active[style*="fff5f5"] span {
    color: rgba(255,255,255,0.5) !important;
}

/* ---- Product cards (shared by home + shop) ---- */
html.dark-mode .product-card {
    background: #ffffff;
    border-color: rgba(204,0,0,0.2);
    box-shadow: 0 0 20px rgba(204,0,0,0.08);
}
html.dark-mode .product-card:hover {
    box-shadow: 0 12px 30px rgba(204,0,0,0.25);
}

/* ---- Shop page: toolbar / chips / filter drawer / pagination ---- */
html.dark-mode .breadcrumb {
    color: rgba(255,255,255,0.55) !important;
}
html.dark-mode .shop-toolbar {
    border-bottom-color: rgba(255,255,255,0.15);
}
html.dark-mode .shop-results-count {
    color: rgba(255,255,255,0.75);
}
html.dark-mode .shop-results-count strong {
    color: #ffffff;
}
html.dark-mode .sort-select {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.35);
    color: #ffffff;
}
html.dark-mode .sort-select:focus {
    border-color: var(--primary-red);
}
html.dark-mode .filter-toggle-btn {
    box-shadow: 0 0 15px rgba(204,0,0,0.25);
}
html.dark-mode .active-filter-chips {
    background: #171717;
    border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .filter-chip {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
html.dark-mode .filter-chip:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}
html.dark-mode .filter-chip i {
    color: rgba(255,255,255,0.4);
}
html.dark-mode .filter-drawer {
    background-color: #171717;
    background-image:
        radial-gradient(circle, rgba(204,0,0,0.12) 0%, rgba(204,0,0,0) 60%),
        radial-gradient(circle, rgba(230,0,0,0.10) 0%, rgba(230,0,0,0) 65%),
        radial-gradient(circle, rgba(204,0,0,0.12) 0%, rgba(204,0,0,0) 60%);
    border: 1px solid rgba(204,0,0,0.25);
    box-shadow: 0 0 30px rgba(204,0,0,0.12);
}
html.dark-mode .filter-block {
    border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .filter-block-title {
    color: rgba(255,255,255,0.85);
}
html.dark-mode .filter-block:not(.collapsed) .filter-block-title {
    color: var(--primary-red);
}
html.dark-mode .filter-checkbox,
html.dark-mode .filter-radio {
    color: rgba(255,255,255,0.75);
}
html.dark-mode .filter-count {
    color: rgba(255,255,255,0.4);
}
html.dark-mode .price-input-group label {
    color: rgba(255,255,255,0.45);
}
html.dark-mode .price-input-group input {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
html.dark-mode .price-sep {
    color: rgba(255,255,255,0.4);
}
html.dark-mode .filter-drawer-footer {
    border-top-color: rgba(255,255,255,0.1);
}
html.dark-mode .no-products-msg {
    color: rgba(255,255,255,0.6);
}
html.dark-mode .page-btn {
    background: #171717;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
html.dark-mode .page-btn:hover:not(.disabled):not(.active) {
    border-color: var(--primary-red);
    color: var(--primary-red);
}
html.dark-mode .page-btn.active {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #ffffff;
}
html.dark-mode .page-ellipsis {
    color: rgba(255,255,255,0.4);
}

/* ---- Product page: gallery / info / tabs / reviews ---- */
html.dark-mode > div:first-of-type {
    color: rgba(255,255,255,0.55) !important;
}
html.dark-mode .product-gallery {
    background: #ffffff;
    border: 1px solid rgba(204,0,0,0.25);
    box-shadow: 0 0 30px rgba(204,0,0,0.15);
}
html.dark-mode .qty-input {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.35);
}
html.dark-mode .qty-btn {
    background: #1f1f1f;
    color: #ffffff;
}
html.dark-mode .qty-btn:hover {
    background: var(--primary-red);
    color: #ffffff;
}
html.dark-mode .qty-input input {
    background: #171717;
    color: #ffffff;
}
html.dark-mode .product-info h1 {
    color: #ffffff;
}
html.dark-mode .product-desc {
    color: rgba(255,255,255,0.65);
}
html.dark-mode .price-highlight {
    color: #ffffff;
}
html.dark-mode .price-old {
    color: rgba(255,255,255,0.45);
}
html.dark-mode .feature-list li {
    color: rgba(255,255,255,0.85);
}
html.dark-mode .info-bar {
    border-top-color: rgba(255,255,255,0.15);
}
html.dark-mode .info-item {
    color: rgba(255,255,255,0.85);
}
html.dark-mode .info-sub-text {
    color: rgba(255,255,255,0.5) !important;
}
html.dark-mode .product-rating span {
    color: rgba(255,255,255,0.7) !important;
}
html.dark-mode .tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}
html.dark-mode .tab {
    color: rgba(255,255,255,0.5);
}
html.dark-mode .tab:hover:not(.active) {
    color: rgba(255,255,255,0.8);
}
html.dark-mode .tab-content h3 {
    color: #ffffff;
}
html.dark-mode .tab-content p,
html.dark-mode .review-text {
    color: rgba(255,255,255,0.65);
}
html.dark-mode .spec-table td {
    border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .spec-table .spec-key {
    color: #ffffff;
}
html.dark-mode .spec-table .spec-value {
    color: rgba(255,255,255,0.65);
}
html.dark-mode .spec-table .spec-row-even {
    background: rgba(255,255,255,0.04);
}
html.dark-mode .spec-table .spec-row-odd {
    background: transparent;
}
html.dark-mode .review-form {
    background: #171717;
    border: 1px solid rgba(204,0,0,0.2);
}
html.dark-mode .review-form label {
    color: rgba(255,255,255,0.85);
}
html.dark-mode .review-form .star-rating label {
    color: #ccc;
}
html.dark-mode .review-form .star-rating label:hover,
html.dark-mode .review-form .star-rating label:hover ~ label,
html.dark-mode .review-form .star-rating input:checked ~ label {
    color: #f5b301 !important;
}
html.dark-mode .review-form input,
html.dark-mode .review-form textarea {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
html.dark-mode .review-item {
    border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .review-name {
    color: #ffffff;
}
html.dark-mode .stock-status {
    background: rgba(255,255,255,0.08);
}


/* ---- Auth pages (register / login) + My Account page ---- */
html.dark-mode .auth-card {
    background: #171717;
    border-color: rgba(255,255,255,0.1);
}
html.dark-mode .auth-card h1 {
    color: #ffffff;
}
html.dark-mode .auth-card .auth-sub {
    color: rgba(255,255,255,0.55);
}
html.dark-mode .auth-form-group label {
    color: rgba(255,255,255,0.75);
}
html.dark-mode .auth-form-group input,
html.dark-mode .auth-form-group textarea {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}
html.dark-mode .auth-switch {
    color: rgba(255,255,255,0.55);
}
html.dark-mode .auth-alert-error {
    background: rgba(244,67,54,0.12);
    border-color: rgba(244,67,54,0.35);
    color: #ff6b60;
}
html.dark-mode .auth-alert-success {
    background: rgba(76,175,80,0.12);
    border-color: rgba(76,175,80,0.35);
    color: #6fdd75;
}

/* My Account page heading + tabs */
html.dark-mode div > h1[style*="color: var(--primary-dark)"] {
    color: #ffffff !important;
}
html.dark-mode .account-tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}
html.dark-mode .account-tab-btn {
    color: rgba(255,255,255,0.55);
}
html.dark-mode .account-tab-btn.active {
    color: #ff6b60;
    border-bottom-color: #ff6b60;
}
html.dark-mode .order-card {
    background: #171717;
    border-color: rgba(255,255,255,0.1);
}
html.dark-mode .order-items-list {
    color: rgba(255,255,255,0.6);
}
html.dark-mode .order-card-head > div,
html.dark-mode .order-card div[style*="color: var(--primary-dark)"] {
    color: #ffffff !important;
}




@media (prefers-reduced-motion: reduce) {
    html.dark-mode body {
        animation: none;
        background-position: 0% 0%, 50% 50%;
    }
}

/* ============================================================
   GALLERY PAGE (gallery.php)
   ============================================================ */

/* ---- Banner ---- */
.gallery-banner {
    background: var(--primary-dark);
    padding: 60px 5%;
    color: white;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gallery-banner-inner { max-width: 800px; z-index: 2; position: relative; }
.gallery-banner-inner h1 { font-size: 44px; font-weight: 800; margin-bottom: 12px; }
.gallery-banner-inner h1 span { color: var(--primary-red); }
.gallery-banner-inner p { color: #ccc; font-size: 17px; line-height: 1.6; max-width: 560px; }
.gallery-banner-icon {
    font-size: 220px;
    color: rgba(255,255,255,0.04);
    position: absolute;
    right: -20px;
    bottom: -50px;
    z-index: 1;
    pointer-events: none;
}

/* ---- Category filter chips ---- */
.gallery-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 25px 5%;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}
.gallery-filter-chip {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: 0.2s;
}
.gallery-filter-chip:hover { border-color: var(--primary-red); color: var(--primary-red); }
.gallery-filter-chip.active { background: var(--primary-red); border-color: var(--primary-red); color: white; }

/* ---- Masonry-style responsive grid ---- */
.gallery-grid {
    columns: 4 220px;
    column-gap: 20px;
    padding: 40px 5% 60px;
}
.gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(204,0,0,0.15);
    border-color: rgba(204,0,0,0.25);
}
.gallery-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; transform: translateY(0); }
.gallery-item-name { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-item-cat { color: rgba(255,255,255,0.75); font-size: 11px; }
.gallery-item-zoom {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--primary-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover .gallery-item-zoom { opacity: 1; transform: scale(1); }

/* ---- Lightbox ---- */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.94);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox-content {
    max-width: 88vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gallery-lightbox-content img {
    max-width: 88vw;
    max-height: 74vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    background: #fff;
}
.gallery-lightbox-caption {
    margin-top: 16px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#galleryLightboxName { font-size: 16px; font-weight: 700; }
#galleryLightboxCat { font-size: 13px; color: rgba(255,255,255,0.55); }
.gallery-lightbox-close {
    position: absolute;
    top: 20px; right: 24px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.gallery-lightbox-close:hover { background: var(--primary-red); }
.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.gallery-lightbox-nav:hover { background: var(--primary-red); }
.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .gallery-banner { padding: 40px 5%; }
    .gallery-banner-inner h1 { font-size: 30px; }
    .gallery-banner-inner p { font-size: 14px; }
    .gallery-banner-icon { font-size: 130px; right: -10px; bottom: -30px; }
    .gallery-grid { columns: 3 180px; column-gap: 14px; padding: 25px 5% 40px; }
    .gallery-item { margin-bottom: 14px; }
    .gallery-lightbox-nav { width: 38px; height: 38px; font-size: 15px; }
    .gallery-lightbox-prev { left: 10px; }
    .gallery-lightbox-next { right: 10px; }
    .gallery-lightbox-close { top: 12px; right: 12px; width: 36px; height: 36px; }
}
@media (max-width: 640px) {
    .gallery-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .gallery-banner-icon { display: none; }
    .gallery-filter-bar { padding: 15px 5%; gap: 8px; }
    .gallery-filter-chip { padding: 7px 14px; font-size: 12px; }
    .gallery-grid { columns: 2 140px; column-gap: 10px; padding: 20px 4% 40px; }
    .gallery-item { border-radius: 8px; margin-bottom: 10px; }
    .gallery-item-overlay { padding: 22px 10px 8px; }
    .gallery-item-name { font-size: 11.5px; }
    .gallery-item-cat { font-size: 10px; }
    .gallery-item-zoom { width: 26px; height: 26px; font-size: 11px; top: 6px; right: 6px; }
    .gallery-lightbox-content img { max-height: 62vh; }
}

/* ---- Dark mode ---- */
html.dark-mode .gallery-banner { background: #171717; border-bottom-color: rgba(204,0,0,0.4); }
html.dark-mode .gallery-filter-bar {
    background: #171717;
    border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .gallery-filter-chip {
    background: #0d0d0d;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
}
html.dark-mode .gallery-filter-chip:hover { border-color: var(--primary-red); color: var(--primary-red); }
html.dark-mode .gallery-filter-chip.active { background: var(--primary-red); border-color: var(--primary-red); color: #fff; }
html.dark-mode .gallery-item {
    background: #171717;
    border-color: rgba(204,0,0,0.2);
}
html.dark-mode .gallery-item:hover {
    box-shadow: 0 12px 28px rgba(204,0,0,0.3);
    border-color: rgba(204,0,0,0.4);
}
html.dark-mode .no-products-msg { color: rgba(255,255,255,0.6); }

/* =====================================================================
   OUR BRANCHES PAGE — matches the site's red/dark theme, works with
   both light and dark mode, and is fully responsive.
===================================================================== */
.branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px 5% 60px;
}

.branch-card {
    display: block;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(204,0,0,0.15);
    border-color: rgba(204,0,0,0.25);
}
.branch-card-img { height: 190px; overflow: hidden; }
.branch-card-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.branch-card:hover .branch-card-img img { transform: scale(1.06); }

.branch-card-body { padding: 18px 20px 22px; }
.branch-card-body h3 { font-size: 18px; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.branch-card-address,
.branch-card-phone {
    font-size: 13.5px;
    color: var(--text-light);
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.branch-card-address i, .branch-card-phone i { color: var(--primary-red); margin-top: 2px; }
.branch-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-red);
}

/* ---- Branch details modal ---- */
.branch-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.75);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.branch-modal.open { display: flex; }
.branch-modal-box {
    background: white;
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.branch-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 15px;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.branch-modal-close:hover { background: var(--primary-red); }
.branch-modal-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.branch-modal-content { padding: 24px 26px 28px; }
.branch-modal-content h2 { font-size: 22px; font-weight: 800; color: var(--primary-dark); margin-bottom: 10px; }
.branch-modal-address {
    font-size: 14px; color: var(--text-light); margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start;
}
.branch-modal-address i { color: var(--primary-red); margin-top: 2px; }
.branch-modal-desc { font-size: 14.5px; color: var(--text-dark); line-height: 1.6; margin-bottom: 20px; }
.branch-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.branch-whatsapp-btn { background: #25D366; }
.branch-whatsapp-btn:hover { background: #1ebe57; }

/* ---- Dark mode ---- */
html.dark-mode .branch-card {
    background: #171717;
    border-color: rgba(255,255,255,0.1);
}
html.dark-mode .branch-card:hover {
    box-shadow: 0 14px 32px rgba(204,0,0,0.3);
    border-color: rgba(204,0,0,0.4);
}
html.dark-mode .branch-card-body h3 { color: #ffffff; }
html.dark-mode .branch-card-address,
html.dark-mode .branch-card-phone { color: rgba(255,255,255,0.65); }
html.dark-mode .branch-modal-box { background: #171717; }
html.dark-mode .branch-modal-content h2 { color: #ffffff; }
html.dark-mode .branch-modal-address { color: rgba(255,255,255,0.65); }
html.dark-mode .branch-modal-desc { color: rgba(255,255,255,0.8); }

/* ---- Branch Detail Page ---- */
.branch-detail-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 5% 70px; }

.branch-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-light); margin-bottom: 24px; }
.branch-breadcrumb a { color: var(--text-light); text-decoration: none; }
.branch-breadcrumb a:hover { color: var(--primary-red); }
.branch-breadcrumb i { font-size: 10px; color: #ccc; }
.branch-breadcrumb span { color: var(--primary-dark); font-weight: 600; }

.branch-detail-hero-img { width: 100%; height: 340px; border-radius: 14px; overflow: hidden; margin-bottom: 32px; box-shadow: 0 8px 28px rgba(0,0,0,0.08); }
.branch-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.branch-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }

.branch-detail-main h2 { font-size: 26px; font-weight: 800; color: var(--primary-dark); margin-bottom: 18px; }
.branch-detail-desc { font-size: 15.5px; line-height: 1.85; color: var(--text-dark); margin-bottom: 36px; }
.branch-detail-desc p { margin-bottom: 14px; }
.branch-detail-desc h2, .branch-detail-desc h3 { color: var(--primary-dark); margin: 22px 0 12px; font-weight: 700; }
.branch-detail-desc ul, .branch-detail-desc ol { margin: 0 0 14px 22px; }
.branch-detail-desc a { color: var(--primary-red); text-decoration: underline; }
.branch-detail-desc strong { font-weight: 700; }

.branch-detail-subhead { font-size: 19px; font-weight: 700; color: var(--primary-dark); margin-bottom: 14px; }
.branch-detail-map { width: 100%; height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }

.branch-detail-card { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 14px; padding: 26px 22px; position: sticky; top: 100px; }
.branch-detail-card h3 { font-size: 17px; font-weight: 700; color: var(--primary-dark); margin-bottom: 16px; }
.branch-detail-card p { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-dark); margin-bottom: 12px; line-height: 1.5; }
.branch-detail-card p i { color: var(--primary-red); margin-top: 2px; }
.branch-detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.branch-detail-actions a { justify-content: center; }

.branch-detail-back { margin-top: 40px; }
.branch-detail-back a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--primary-dark); text-decoration: none; }
.branch-detail-back a:hover { color: var(--primary-red); }

/* Dark mode */
html.dark-mode .branch-breadcrumb { color: rgba(255,255,255,0.5); }
html.dark-mode .branch-breadcrumb a { color: rgba(255,255,255,0.5); }
html.dark-mode .branch-breadcrumb span { color: #ffffff; }
html.dark-mode .branch-detail-main h2 { color: #ffffff; }
html.dark-mode .branch-detail-desc { color: rgba(255,255,255,0.8); }
html.dark-mode .branch-detail-desc h2, html.dark-mode .branch-detail-desc h3 { color: #ffffff; }
html.dark-mode .branch-detail-subhead { color: #ffffff; }
html.dark-mode .branch-detail-card { background: #171717; border-color: rgba(255,255,255,0.1); }
html.dark-mode .branch-detail-card h3 { color: #ffffff; }
html.dark-mode .branch-detail-card p { color: rgba(255,255,255,0.75); }
html.dark-mode .branch-detail-back a { color: #ffffff; }

/* ---- Mobile responsive ---- */
@media (max-width: 900px) {
    .branch-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 30px 5% 45px; }
    .branch-detail-grid { grid-template-columns: 1fr; }
    .branch-detail-card { position: static; }
}
@media (max-width: 640px) {
    .branch-grid { grid-template-columns: 1fr; padding: 20px 4% 40px; gap: 16px; }
    .branch-card-img { height: 170px; }
    .branch-modal-img { height: 170px; }
    .branch-modal-content { padding: 20px 18px 24px; }
    .branch-modal-content h2 { font-size: 19px; }
    .branch-modal-actions { flex-direction: column; }
    .branch-modal-actions a { justify-content: center; }
    .branch-detail-hero-img { height: 220px; }
    .branch-detail-main h2 { font-size: 21px; }
}


/* ---- Desktop only: make product gallery box a tight square instead of extra white space ---- */
@media (min-width: 901px) {
    .product-gallery {
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        height: auto;
        max-width: 550px;
        width: 100%;
        align-self: flex-start;
    }
    .product-main-img {
        flex: 1;
        min-height: 0;
        max-height: 100%;
        width: 100%;
        object-fit: contain;
    }
    .product-gallery .thumbnail-container {
        flex-shrink: 0;
    }
}




/* Free Delivery tag on product page */
.free-delivery-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
html.dark-mode .free-delivery-tag,
body.product-page-dark .free-delivery-tag {
    background: rgba(76,175,80,0.15);
    color: #6fdd75;
}





/* Free Delivery badge — top-right corner of product cards, next to In Stock/Out of Stock badge */
.product-card { position: relative; }
.product-free-delivery-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #e8f5e9;
    color: #4CAF50;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
html.dark-mode .product-free-delivery-badge {
    background: rgba(76,175,80,0.15);
    color: #6fdd75;
}
.related-grid .product-free-delivery-badge {
    top: 12px;
    right: 12px;
    font-size: 9px;
    padding: 3px 8px;
}
@media (max-width: 480px) {
    .product-free-delivery-badge {
        top: 8px;
        right: 8px;
        font-size: 10px;
        padding: 3px 9px;
        gap: 4px;
        border-radius: 4px;
    }
    .product-free-delivery-badge i {
        font-size: 9px;
    }
}



/* Small logo watermark on product images — bottom-left corner */
.product-img-wrap { position: relative; display: block; }
.product-logo-watermark {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    object-fit: contain;
    z-index: 2;
}
.product-gallery .product-logo-watermark {
    width: 46px;
    height: 46px;
    bottom: 18px;
    left: 18px;
}
@media (max-width: 480px) {
    .product-img-wrap .product-logo-watermark {
        width: 24px;
        height: 24px;
        bottom: 6px;
        left: 6px;
    }
}