@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; }

/* 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 20px; margin: 0 20px; width: 300px; 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; }
.search-form button { border: none; background: transparent; cursor: pointer; color: var(--text-light); font-size: 16px; margin-left: 10px; transition: color 0.2s; }
.search-form button:hover { color: var(--primary-red); }

.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); }
.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%;
}

@media (max-width: 1024px) {
    .category-bar-wrap { padding: 20px 0; }
    .category-item { width: 90px; }
    .category-item img { width: 70px; height: 70px; }
    .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; }

.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; }

/* 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) {
    .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; }
    
    /* 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; }
    .hero h1 { font-size: 24px; }
    .hero p { font-size: 13px; max-width: 100%; }
    

    .product-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 4% 60px; }
    .product-card { padding: 15px; }
    .product-img { height: 160px; }
    .product-title { font-size: 15px; }
    .product-price { font-size: 18px; }
    .btn-cart { padding: 10px; font-size: 14px; }
    .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; }
}