/* ═══════════════════════════════════════════════════════════════
   FILE: style.css — Royal Time & Bags
   FIXED VERSION — Slower mobile intro, focus-outline fix,
   detailed line-by-line comments added.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (VARIABLES)
   :root = document ka root element. Yahan define kiye gaye
   variables poori file mein var(--name) se accessible hote hain.
═══════════════════════════════════════════════════════════════ */
:root {
    --gold: #d4af37;                          /* Primary luxury gold — buttons, headings, accents */
    --gold-light: #f0d264;                    /* Lighter gold — hover states, highlights */
    --gold-glow: rgba(212, 175, 55, 0.55);    /* Gold shadow glow — box-shadow effects */
    --bg: #0a0a0a;                            /* Deep black — main page background */
    --card-bg: #151515;                       /* Slightly lighter — product card background */
    --text: #ffffff;                          /* White — primary text color */
    --muted-text: #b8b8b8;                    /* Grey — secondary text (descriptions, old prices) */
    --border: #333;                           /* Dark grey — borders and dividers */
    --wa-green: #25d366;                      /* WhatsApp brand green — order buttons */
    --discount-red: #e63946;                  /* Red — discount badges */
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESET — removes browser default margins/paddings
   Har browser apni default styles apply karta hai, jisse layout
   inconsistent ho jata hai. Ye reset sab ko zero karta hai.
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;                                /* All margins zero */
    padding: 0;                               /* All paddings zero */
    box-sizing: border-box;                   /* padding + border width ke ANDAR count */
}

/* ═══════════════════════════════════════════════════════════════
   HTML SETTINGS
═══════════════════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;                  /* Anchor links par smooth scroll */
    -webkit-text-size-adjust: 100%;           /* iOS Safari text auto-resize rokta hai */
    scroll-padding-top: 90px;                 /* Fixed header ke neeche content na chhupe */
}

/* ═══════════════════════════════════════════════════════════════
   BODY — BASE STYLES
═══════════════════════════════════════════════════════════════ */
body {
    background-color: var(--bg);              /* Deep black background */
    color: var(--text);                       /* White text */
    font-family: 'Inter', sans-serif;         /* Clean modern font */
    line-height: 1.7;                         /* Comfortable line height (readability) */
    overflow-x: hidden;                       /* Horizontal scroll prevent — safety */
    -webkit-font-smoothing: antialiased;      /* Font crisper on Mac/iOS */
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY: VISUALLY HIDDEN
   Text ko screen se chhupata hai LEKIN screen readers ke liye
   accessible rakhta hai (accessibility ke liye).
═══════════════════════════════════════════════════════════════ */
.visually-hidden {
    position: absolute !important;            /* Out of normal flow */
    width: 1px;                               /* Tiny size */
    height: 1px;                              /* Tiny height */
    padding: 0;                               /* No padding */
    margin: -1px;                             /* Negative margin removes from view */
    overflow: hidden;                         /* Hide overflow */
    clip: rect(0, 0, 0, 0);                   /* Legacy clip */
    white-space: nowrap;                      /* No wrapping */
    border: 0;                                /* No border */
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK — Accessibility
   Keyboard users "Tab" press karte hain to ye link visible hota
   hai taake wo seedha main content par ja sakein.
═══════════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;                       /* Out of normal flow */
    top: -100px;                              /* Screen ke bahar (upar) */
    left: 20px;                               /* Left side */
    background: var(--gold);                  /* Gold background */
    color: #000;                              /* Black text */
    padding: 10px 18px;                       /* Comfortable padding */
    font-weight: 700;                         /* Bold text */
    border-radius: 4px;                       /* Slightly rounded */
    z-index: 10000;                           /* Sabse upar — kabhi na chhupe */
    text-decoration: none;                    /* No underline */
    transition: top 0.3s ease;                /* Smooth slide-in */
}
.skip-link:focus { top: 20px; }               /* Focus par screen ke andar */

/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — Accessibility
   Keyboard focus ke liye clear outline dikhata hai taake user
   jaane kahan hai.
═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--gold-light);     /* Gold outline for keyboard focus */
    outline-offset: 3px;                      /* Gap between element and outline */
    border-radius: 4px;                       /* Slightly rounded */
}

/* ═══════════════════════════════════════════════════════════════
   ██████  INTRO ANIMATION  ██████
   MOBILE-FIXED VERSION — Slower timings, smoother feel.
   
   NEW TIMELINE:
   0.0s  → Intro appears, background zoom starts
   0.5s  → Brand title fade-in begins (1.6s duration)
   1.3s  → Tagline fade-in begins (1.4s duration)
   2.1s  → Gold line draw begins (1.6s duration)
   6.0s  → Fade-out begins (1.5s duration)
   7.5s  → Intro fully invisible
   7.8s  → JS removes intro from DOM
═══════════════════════════════════════════════════════════════ */

/* ─── INTRO WRAPPER (Full screen overlay) ─────────────────────
   FIX #1: inset:0 ki jagah explicit top/left/right/bottom
   (purane Android browsers mein `inset` support nahi hota)
   
   FIX #2: translateZ(0) GPU acceleration force karta hai
   (mobile par smooth animation ke liye)
   
   FIX #3: will-change browser ko batata hai ke ye element
   animate hoga — browser early optimization karta hai.
   ─────────────────────────────────────────────────────────── */
.intro {
    position: fixed;                          /* Screen ke upar fixed */
    top: 0;                                   /* Top edge */
    left: 0;                                  /* Left edge */
    right: 0;                                 /* Right edge */
    bottom: 0;                                /* Bottom edge */
    z-index: 9999;                            /* Sabse upar layer */
    background: #0a0a0a;                      /* FALLBACK black — image se pehle */
    display: flex;                            /* Flexbox for centering */
    flex-direction: column;                   /* Stack children vertically */
    align-items: center;                      /* Center horizontally */
    justify-content: center;                  /* Center vertically */
    overflow: hidden;                         /* Clip shine animation edges */
    transform: translateZ(0);                 /* Force GPU layer */
    will-change: opacity;                     /* Browser optimize karega */
    /* ★ FIXED: 1.2s→1.5s (smoother fade), 4s→6s (longer visible time) */
    animation: introFadeOut 1.5s ease-in 6s forwards;
}

/* ─── INTRO BACKGROUND (IMAGE + GRADIENT FALLBACK) ────────────
   FIX #4: image se pehle luxury gradient background
   Agar image slow load ho ya fail ho, gradient dikhega —
   user ko black screen NAHI dikhegi.
   
   FIX #5: image-set() different resolutions ke liye.
   ─────────────────────────────────────────────────────────── */
.intro-bg {
    position: absolute;                       /* Positioned within intro */
    top: 0;                                   /* Top edge */
    left: 0;                                  /* Left edge */
    right: 0;                                 /* Right edge */
    bottom: 0;                                /* Bottom edge */
    /* STEP 1: Luxury gradient fallback (image se pehle visible) */
    background:
        radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1208 50%, #0a0a0a 100%);
    /* STEP 2: Watch image (jo load hote hi gradient ke upar aa jayegi) */
    background-image:
        radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.25) 0%, transparent 60%),
        url('https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg?auto=compress&cs=tinysrgb&w=1200');
    background-size: cover;                   /* Fill container */
    background-position: center;              /* Center the image */
    background-repeat: no-repeat;             /* No tiling */
    opacity: 0.9;                             /* Slight transparency */
    transform: scale(1);                      /* Start at normal size */
    transform-origin: center;                 /* Zoom from center */
    filter: brightness(0.85) contrast(1.1);   /* Moody luxury look */
    /* ★ FIXED: 5s→8s (slower, more luxurious zoom) */
    animation: introZoom 8s ease-out forwards;
}

/* MOBILE-SPECIFIC BACKGROUND IMAGE ────────────────────────────
   Choti screen ke liye chhoti image (w=800) — 50% less data
   Isse mobile par image jaldi load hoti hai.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .intro-bg {
        background-image:
            radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.4) 0%, transparent 60%),
            radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.3) 0%, transparent 60%),
            url('https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg?auto=compress&cs=tinysrgb&w=800');
    }
}

/* ─── INTRO GLOW (Golden radial light) ───────────────────────── */
.intro-glow {
    position: absolute;                       /* Positioned within intro */
    top: 0;                                   /* Top edge */
    left: 0;                                  /* Left edge */
    right: 0;                                 /* Right edge */
    bottom: 0;                                /* Bottom edge */
    background: radial-gradient(circle at 50% 50%,
        rgba(212, 175, 55, 0.6) 0%,           /* Strong gold center */
        rgba(212, 175, 55, 0.18) 35%,         /* Fading gold */
        transparent 70%);                      /* Fully transparent edge */
    animation: introGlowPulse 1.6s ease-in-out infinite alternate;  /* Pulse effect */
    pointer-events: none;                     /* Mouse click pass-through */
    will-change: opacity;                     /* Mobile optimization */
}

/* ─── INTRO SHINE (Diagonal light sweep) ─────────────────────── */
.intro-shine {
    position: absolute;                       /* Positioned within intro */
    top: 0;                                   /* Top edge */
    left: -60%;                               /* Start off-screen left */
    width: 60%;                               /* 60% of intro width */
    height: 100%;                             /* Full height */
    background: linear-gradient(115deg,
        transparent 30%,                       /* Transparent start */
        rgba(255, 220, 100, 0.55) 50%,        /* Bright gold center */
        transparent 70%);                      /* Transparent end */
    transform: skewX(-15deg);                 /* Diagonal slant */
    animation: introShine 1.6s ease-in-out 0.6s 2;  /* Sweep twice */
    pointer-events: none;                     /* Mouse pass-through */
    will-change: left;                        /* Mobile optimization */
}

/* ─── INTRO CONTENT BOX ──────────────────────────────────────── */
.intro-content {
    position: relative;                       /* Relative to parent */
    z-index: 2;                               /* Above background layers */
    text-align: center;                       /* Center text */
    padding: 0 20px;                          /* Side padding */
}

/* ─── INTRO BRAND TITLE ──────────────────────────────────────── */
.intro-text {
    display: block;                           /* Block element */
    font-family: 'Playfair Display', serif;   /* Elegant serif font */
    font-size: clamp(1.4rem, 6vw, 3.4rem);    /* Responsive: min 1.4rem, pref 6vw, max 3.4rem */
    color: var(--gold-light);                 /* Light gold text */
    letter-spacing: 12px;                     /* Wide letter spacing (luxury feel) */
    text-transform: uppercase;                /* ALL CAPS */
    opacity: 0;                               /* Initially hidden */
    text-shadow: 0 0 25px var(--gold-glow);   /* Golden glow around text */
    /* ★ FIXED: 1.4s→1.6s duration, 0.4s→0.5s delay */
    animation: introTextIn 1.6s ease-out 0.5s forwards;
    /* forwards = animation khatam hone ke baad final state hold kare */
}

/* ─── INTRO TAGLINE ──────────────────────────────────────────── */
.intro-tagline {
    display: block;                           /* Block element */
    color: #e8e8e8;                           /* Off-white text */
    font-size: clamp(0.7rem, 2vw, 0.95rem);   /* Responsive font size */
    letter-spacing: 6px;                      /* Wide letter spacing */
    text-transform: uppercase;                /* ALL CAPS */
    margin-top: 22px;                         /* Space above */
    opacity: 0;                               /* Initially hidden */
    /* ★ FIXED: 1.2s→1.4s duration, 1.2s→1.3s delay */
    animation: introTextIn 1.4s ease-out 1.3s forwards;
}

/* ─── INTRO BOTTOM LINE ──────────────────────────────────────── */
.intro-line {
    position: absolute;                       /* Positioned within intro */
    bottom: 18%;                              /* 18% from bottom */
    height: 2px;                              /* 2px thin line */
    width: 0;                                 /* Starts at 0 width */
    background: linear-gradient(90deg, transparent, var(--gold), transparent);  /* Fade in-out gold */
    box-shadow: 0 0 15px var(--gold-glow);    /* Gold glow */
    /* ★ FIXED: 1.4s→1.6s duration, 1.8s→2.1s delay */
    animation: introLineDraw 1.6s ease-out 2.1s forwards;
}

/* ─── KEYFRAMES: INTRO ANIMATIONS ──────────────────────────── */

/* Zoom effect: image slowly zoom hoti hai */
@keyframes introZoom {
    from { transform: scale(1); }             /* Start: normal size */
    to   { transform: scale(1.15); }          /* End: 15% larger */
}

/* Glow pulse: light thodi si fade in/out hoti rehti hai */
@keyframes introGlowPulse {
    from { opacity: 0.5; }                    /* Dim */
    to   { opacity: 1; }                      /* Bright */
}

/* Shine sweep: left se right light passes */
@keyframes introShine {
    0%   { left: -60%; }                      /* Off-screen left */
    100% { left: 120%; }                      /* Off-screen right */
}

/* Text entrance: neeche se upar fade-in */
@keyframes introTextIn {
    from { opacity: 0; transform: translateY(24px); }  /* Invisible, below */
    to   { opacity: 1; transform: translateY(0); }     /* Visible, normal */
}

/* Line draw: left se right line grow */
@keyframes introLineDraw {
    from { width: 0;    opacity: 0; }         /* No width */
    to   { width: 62vw; opacity: 1; }         /* 62% viewport width */
}

/* Fade out: intro slowly invisible hoti hai */
@keyframes introFadeOut {
    to {
        opacity: 0;                           /* Fully transparent */
        visibility: hidden;                   /* Screen readers + clicks se hidden */
        pointer-events: none;                 /* Click-through enable */
    }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER & NAVIGATION
═══════════════════════════════════════════════════════════════ */
header {
    position: fixed;                          /* Top par sticky */
    top: 0;                                   /* Top edge */
    left: 0;                                  /* Left edge */
    right: 0;                                 /* Right edge */
    z-index: 1000;                            /* Intro (9999) ke neeche, content ke upar */
    background: rgba(10, 10, 10, 0.92);       /* Semi-transparent black */
    backdrop-filter: blur(12px);              /* Glass morphism blur effect */
    -webkit-backdrop-filter: blur(12px);      /* Safari prefix */
    border-bottom: 1px solid var(--border);   /* Subtle bottom border */
}

/* Header content wrapper */
.header-inner {
    max-width: 1200px;                        /* Max width for readability */
    margin: 0 auto;                           /* Center horizontally */
    padding: 15px 20px;                       /* Padding */
    display: flex;                            /* Flexbox layout */
    align-items: center;                      /* Vertical center */
    justify-content: space-between;           /* Space between logo, nav, search */
    flex-wrap: wrap;                          /* Wrap on smaller screens */
    gap: 15px;                                /* Gap between items */
}

/* ─── BRAND LOGO ─────────────────────────────────────────────── */
.logo {
    font-family: 'Playfair Display', serif;   /* Elegant serif */
    font-size: 1.3rem;                        /* 1.3x root size */
    font-weight: 700;                         /* Bold */
    color: var(--gold);                       /* Gold color */
    letter-spacing: 2px;                      /* Slight letter spacing */
    text-transform: uppercase;                /* ALL CAPS */
    text-decoration: none;                    /* No underline */
    transition: color 0.3s;                   /* Smooth color transition */
}
.logo:hover { color: var(--gold-light); }     /* Lighter gold on hover */

/* ─── NAVIGATION LIST ────────────────────────────────────────── */
nav ul {
    display: flex;                            /* Horizontal layout */
    gap: 22px;                                /* Gap between links */
    list-style: none;                         /* Remove bullets */
    flex-wrap: wrap;                          /* Wrap on small screens */
}

/* ─── NAVIGATION LINKS ───────────────────────────────────────── */
nav a {
    color: var(--text);                       /* White text */
    font-size: 0.85rem;                       /* Small font */
    font-weight: 600;                         /* Semi-bold */
    text-decoration: none;                    /* No underline */
    text-transform: uppercase;                /* ALL CAPS */
    letter-spacing: 0.5px;                    /* Slight spacing */
    position: relative;                       /* For ::after underline */
    padding: 4px 0;                           /* Vertical padding */
    transition: color 0.3s;                   /* Smooth color transition */
}

/* Underline animation — pseudo-element */
nav a::after {
    content: '';                              /* Empty content */
    position: absolute;                       /* Positioned relative to link */
    left: 0;                                  /* Left edge */
    bottom: -2px;                             /* Below text */
    width: 0;                                 /* Initially zero width */
    height: 2px;                              /* 2px thin */
    background: var(--gold);                  /* Gold color */
    transition: width 0.3s ease;              /* Grow on hover */
}

nav a:hover { color: var(--gold); }           /* Gold on hover */
nav a:hover::after { width: 100%; }           /* Full width underline on hover */

/* ─── SEARCH WRAPPER ─────────────────────────────────────────── */
.search-wrap { position: relative; }          /* For absolute suggestions */

/* ─── SEARCH INPUT ──────────────────────────────────────────── */
#searchInput {
    padding: 9px 14px;                        /* Padding inside input */
    background: #1c1c1c;                      /* Dark background */
    border: 1px solid var(--border);          /* Subtle border */
    color: #fff;                              /* White text */
    border-radius: 6px;                       /* Rounded corners */
    outline: none;                            /* ★ BUG: This overrides focus-visible */
    font-family: inherit;                     /* Inherit body font */
    transition: border-color 0.3s, box-shadow 0.3s;  /* Smooth transitions */
}
#searchInput:focus {
    border-color: var(--gold);                /* Gold border on focus */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);  /* Gold focus ring */
}
#searchInput::placeholder { color: #888; }    /* Grey placeholder */

/* ★ FIX #3: Restore keyboard focus outline
   #searchInput { outline: none } has specificity (1,0,0) = 100
   input:focus-visible has specificity (0,1,1) = 11
   So #searchInput wins and removes the outline!
   Fix: add a more specific rule below. */
#searchInput:focus-visible {
    outline: 3px solid var(--gold-light);     /* Gold outline for keyboard users */
    outline-offset: 3px;                      /* Gap between element and outline */
}

/* ─── SUGGESTIONS DROPDOWN ──────────────────────────────────── */
.suggestions {
    position: absolute;                       /* Absolute within search-wrap */
    top: calc(100% + 6px);                    /* Input ke bilkul neeche */
    right: 0;                                 /* Right aligned */
    background: #1c1c1c;                      /* Dark background */
    min-width: 280px;                         /* Minimum width */
    max-width: 340px;                         /* Maximum width */
    max-height: 280px;                        /* Maximum height */
    overflow-y: auto;                         /* Scroll if many items */
    display: none;                            /* Hidden by default (JS toggles) */
    border: 1px solid var(--border);          /* Subtle border */
    border-radius: 6px;                       /* Rounded corners */
    z-index: 10;                              /* Above other content */
    list-style: none;                         /* No bullets */
    box-shadow: 0 8px 30px rgba(0,0,0,0.8);   /* Deep shadow */
    -webkit-overflow-scrolling: touch;        /* iOS smooth scroll */
}
.suggestions.show { display: block; }         /* JS adds .show to display */

.suggestions li {
    padding: 12px 14px;                       /* Comfortable padding */
    cursor: pointer;                          /* Pointer cursor */
    border-bottom: 1px solid #2a2a2a;         /* Divider between items */
    font-size: 0.9rem;                        /* Readable font */
    transition: background 0.2s;              /* Smooth hover */
}
.suggestions li:last-child { border-bottom: none; }  /* No divider on last */
.suggestions li:hover,
.suggestions li.active { background: #262626; }       /* Hover/active highlight */

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════════ */
.hero {
    /* svh = small viewport height (mobile browser bars ke saath) */
    min-height: 100vh;                        /* Fallback for old browsers */
    min-height: 100svh;                       /* Modern: small viewport height */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Stack children */
    justify-content: center;                  /* Center vertically */
    align-items: center;                      /* Center horizontally */
    text-align: center;                       /* Center text */
    /* Background: dark gradient + hero image */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.92)),
                url('https://images.pexels.com/photos/190819/pexels-photo-190819.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat;
    padding: 110px 20px 60px;                 /* Top: header space */
    position: relative;                       /* For absolute scroll hint */
    overflow: hidden;                         /* Clip decorative elements */
}

/* ─── HERO ANIMATIONS DURING INTRO ─────────────────────────────
   ★ FIXED: Updated delays to match new intro timing.
   Intro now fades at 6.0s–7.5s, so hero starts at 6.5s.
   ─────────────────────────────────────────────────────────── */
body.intro-playing .hero {
    opacity: 0;                               /* Hidden initially */
    animation: heroFadeIn 1.2s ease-out 6.5s forwards;  /* Fade in after intro */
}
body.intro-playing .hero-title {
    opacity: 0;                               /* Hidden initially */
    animation: heroTextUp 1.2s ease-out 6.7s forwards;  /* Rise up slightly later */
}
body.intro-playing .hero-subtitle {
    opacity: 0;                               /* Hidden initially */
    animation: heroTextUp 1.2s ease-out 6.9s forwards;  /* Rise up even later */
}
body.intro-playing .hero-btns {
    opacity: 0;                               /* Hidden initially */
    animation: heroTextUp 1.2s ease-out 7.1s forwards;  /* Rise up last */
}

/* ─── HERO TEXT ──────────────────────────────────────────────── */
.hero-title {
    font-family: 'Playfair Display', serif;   /* Elegant serif */
    font-size: clamp(2rem, 8vw, 4rem);        /* Responsive size */
    margin-bottom: 12px;                      /* Space below */
}
.hero-subtitle {
    color: var(--gold);                       /* Gold text */
    font-size: clamp(0.85rem, 3vw, 1.15rem);  /* Responsive size */
    margin-bottom: 32px;                      /* Space below */
    text-transform: uppercase;                /* ALL CAPS */
    letter-spacing: 4px;                      /* Wide spacing */
}
.hero-btns {
    display: flex;                            /* Horizontal layout */
    gap: 15px;                                /* Gap between buttons */
    flex-wrap: wrap;                          /* Wrap on small screens */
    justify-content: center;                  /* Center buttons */
}

/* Scroll hint arrow */
.hero-scroll-hint {
    position: absolute;                       /* Positioned within hero */
    bottom: 24px;                             /* 24px from bottom */
    color: var(--gold);                       /* Gold color */
    font-size: 1.6rem;                        /* Large arrow */
    animation: scrollBounce 1.8s ease-in-out infinite;  /* Bounce animation */
}

/* ─── HERO KEYFRAMES ─────────────────────────────────────────── */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.9; }   /* Start/end: normal */
    50%      { transform: translateY(10px); opacity: 0.4; } /* Middle: down + dim */
}
@keyframes heroFadeIn {
    from { opacity: 0; }                      /* Invisible */
    to   { opacity: 1; }                      /* Visible */
}
@keyframes heroTextUp {
    from { opacity: 0; transform: translateY(28px); }  /* Invisible, below */
    to   { opacity: 1; transform: translateY(0); }     /* Visible, normal */
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
    padding: 13px 26px;                       /* Comfortable padding */
    font-weight: 700;                         /* Bold text */
    font-size: 0.85rem;                       /* Small font */
    letter-spacing: 1px;                      /* Slight spacing */
    text-transform: uppercase;                /* ALL CAPS */
    border-radius: 6px;                       /* Rounded corners */
    transition: all 0.3s ease;                /* Smooth all transitions */
    text-decoration: none;                    /* No underline */
    display: inline-block;                    /* Inline block */
}

/* Outline button (transparent with gold border) */
.btn-outline {
    border: 2px solid var(--gold);            /* Gold border */
    color: var(--gold);                       /* Gold text */
    background: transparent;                  /* Transparent background */
}
.btn-outline:hover {
    background: var(--gold);                  /* Gold background on hover */
    color: #000;                              /* Black text */
    box-shadow: 0 0 25px var(--gold-glow);    /* Gold glow */
    transform: translateY(-2px);              /* Lift effect */
}

/* Solid gold button */
.btn-gold {
    background: var(--gold);                  /* Gold background */
    color: #000;                              /* Black text */
    border: 2px solid var(--gold);            /* Gold border */
}
.btn-gold:hover {
    background: var(--gold-light);            /* Lighter gold */
    box-shadow: 0 0 25px var(--gold-glow);    /* Gold glow */
    transform: translateY(-2px);              /* Lift effect */
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BANNER
═══════════════════════════════════════════════════════════════ */
.trust-banner {
    background: #111;                         /* Dark background */
    border-top: 1px solid var(--border);      /* Top border */
    border-bottom: 1px solid var(--border);   /* Bottom border */
    padding: 18px 20px;                       /* Padding */
}
.trust-banner-inner {
    max-width: 1200px;                        /* Max width */
    margin: 0 auto;                           /* Center */
    display: flex;                            /* Horizontal layout */
    justify-content: space-around;            /* Even spacing */
    align-items: center;                      /* Vertical center */
    flex-wrap: wrap;                          /* Wrap on small screens */
    gap: 20px;                                /* Gap between items */
}
.trust-item {
    display: flex;                            /* Horizontal layout */
    align-items: center;                      /* Vertical center */
    gap: 10px;                                /* Gap between icon and text */
    font-size: 0.9rem;                        /* Readable font */
    font-weight: 600;                         /* Semi-bold */
}
.trust-icon { font-size: 1.3rem; }            /* Larger icons */

/* ═══════════════════════════════════════════════════════════════
   SECTIONS (generic spacing)
═══════════════════════════════════════════════════════════════ */
.section {
    padding: 90px 0;                          /* Top + bottom breathing room */
    scroll-margin-top: 90px;                  /* Anchor jump par header space */
}
.container {
    max-width: 1200px;                        /* Max width for readability */
    margin: 0 auto;                           /* Center horizontally */
    padding: 0 20px;                          /* Side padding */
}

/* ─── SECTION TITLE ──────────────────────────────────────────── */
.section-title {
    font-family: 'Playfair Display', serif;   /* Elegant serif */
    text-align: center;                       /* Center text */
    font-size: clamp(1.6rem, 4vw, 2.2rem);    /* Responsive size */
    margin-bottom: 50px;                      /* Space below */
    position: relative;                       /* For ::after underline */
    padding-bottom: 15px;                     /* Space for underline */
}
/* Underline under title */
.section-title::after {
    content: '';                              /* Empty content */
    position: absolute;                       /* Positioned within title */
    bottom: 0;                                /* At bottom */
    left: 50%;                                /* Center horizontally */
    transform: translateX(-50%);              /* Perfectly centered */
    width: 60px;                              /* 60px wide */
    height: 2px;                              /* 2px thin */
    background: var(--gold);                  /* Gold color */
    box-shadow: 0 0 12px var(--gold-glow);    /* Gold glow */
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════════════════════════════ */
.grid {
    display: grid;                            /* CSS Grid */
    /* auto-fill = jitne cards fit hon, utne columns
       minmax(260px, 1fr) = minimum 260px, maximum 1 fraction */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;                                /* Gap between cards */
    align-items: stretch;                     /* Cards same height */
    margin-bottom: 20px;                      /* Space below grid */
}

/* ─── PRODUCT CARD ──────────────────────────────────────────── */
.card {
    background: var(--card-bg);               /* Dark background */
    border: 1px solid var(--border);          /* Subtle border */
    border-radius: 10px;                      /* Rounded corners */
    overflow: hidden;                         /* Round corners clip children */
    text-align: center;                       /* Center text */
    padding-bottom: 24px;                     /* Space below content */
    position: relative;                       /* For absolute discount badge */
    display: flex;                            /* Flexbox column */
    flex-direction: column;                   /* Stack children vertically */
    justify-content: space-between;           /* Content evenly spread */
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;  /* Smooth hover */
}

/* Hover effect — card lift + golden glow */
.card:hover {
    transform: translateY(-8px) !important;   /* Lift up 8px */
    border-color: var(--gold);                /* Gold border */
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3), 0 8px 20px rgba(0, 0, 0, 0.5);  /* Gold + dark shadow */
}

/* ─── SCROLL REVEAL (JS toggles .visible) ────────────────────── */
.reveal {
    opacity: 0;                               /* Hidden initially */
    transform: translateY(30px);              /* Below final position */
    transition: opacity 0.7s ease, transform 0.7s ease;  /* Smooth reveal */
}
.reveal.visible {
    opacity: 1;                               /* Visible */
    transform: translateY(0);                 /* Normal position */
}

/* ─── DISCOUNT BADGE ────────────────────────────────────────── */
.discount-badge {
    position: absolute;                       /* Positioned within card */
    top: 12px;                                /* 12px from top */
    right: 12px;                              /* 12px from right */
    background: var(--discount-red);          /* Red background */
    color: #fff;                              /* White text */
    padding: 4px 10px;                        /* Padding */
    border-radius: 4px;                       /* Rounded corners */
    font-size: 0.8rem;                        /* Small font */
    font-weight: 700;                         /* Bold */
    z-index: 5;                               /* Above image */
}

/* ─── CARD IMAGE ────────────────────────────────────────────── */
.card-img {
    width: 100%;                              /* Full width */
    height: 220px;                            /* Fixed height */
    object-fit: cover;                        /* Fill space without distortion */
    transition: transform 0.6s ease;          /* Smooth zoom */
}
.card:hover .card-img { transform: scale(1.05); }  /* Zoom on card hover */

/* ─── CARD TEXT ─────────────────────────────────────────────── */
.card-title {
    font-family: 'Playfair Display', serif;   /* Elegant serif */
    margin: 16px 10px 6px;                    /* Margin around title */
    font-size: 1.15rem;                       /* Readable size */
}
.card-price {
    margin-bottom: 12px;                      /* Space below price */
    font-size: 0.95rem;                       /* Readable size */
}
.old-price {
    text-decoration: line-through;            /* Strikethrough old price */
    color: var(--muted-text);                 /* Grey color */
    font-size: 0.85em;                        /* Smaller than new price */
    margin-right: 8px;                        /* Space between prices */
}
.new-price {
    color: var(--gold);                       /* Gold color */
    font-weight: 700;                         /* Bold */
    font-size: 1.08em;                        /* Slightly larger */
}

/* ─── CARD TRUST BADGES ─────────────────────────────────────── */
.card-trust {
    display: flex;                            /* Horizontal layout */
    justify-content: center;                  /* Center badges */
    gap: 8px;                                 /* Gap between badges */
    margin-bottom: 16px;                      /* Space below */
    flex-wrap: wrap;                          /* Wrap if needed */
}
.trust-badge {
    font-size: 0.7rem;                        /* Small font */
    padding: 3px 8px;                         /* Padding */
    border-radius: 4px;                       /* Rounded corners */
    font-weight: 600;                         /* Semi-bold */
}
.trust-badge.cod {                            /* Green — Cash on Delivery */
    background: rgba(37, 211, 102, 0.18);     /* Green background */
    color: #4ade80;                           /* Green text */
}
.trust-badge.return {                         /* Blue — Return policy */
    background: rgba(59, 130, 246, 0.18);     /* Blue background */
    color: #60a5fa;                           /* Blue text */
}

/* ─── WHATSAPP ORDER BUTTON ─────────────────────────────────── */
.btn-wa {
    display: inline-block;                    /* Inline block */
    padding: 11px 22px;                       /* Comfortable padding */
    background: var(--wa-green);              /* WhatsApp green */
    color: #000;                              /* Black text */
    font-weight: 700;                         /* Bold */
    font-size: 0.85rem;                       /* Small font */
    letter-spacing: 0.5px;                    /* Slight spacing */
    text-transform: uppercase;                /* ALL CAPS */
    border-radius: 6px;                       /* Rounded corners */
    text-decoration: none;                    /* No underline */
    margin: 0 auto;                           /* Center horizontally */
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;  /* Smooth transitions */
}
.btn-wa:hover {
    background: #1eb955;                      /* Darker green */
    transform: translateY(-2px);              /* Lift effect */
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);  /* Green glow */
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
footer {
    border-top: 1px solid var(--border);      /* Top border */
    padding: 60px 0;                          /* Vertical padding */
    text-align: center;                       /* Center text */
}
.footer-title {
    font-family: 'Playfair Display', serif;   /* Elegant serif */
    color: var(--gold);                       /* Gold color */
    margin-bottom: 18px;                      /* Space below */
    font-size: 1.5rem;                        /* Readable size */
}
footer p {
    color: var(--muted-text);                 /* Grey text */
    margin-bottom: 10px;                      /* Space below */
}
footer a {
    color: var(--gold);                       /* Gold link */
    text-decoration: none;                    /* No underline */
    transition: color 0.25s;                  /* Smooth color transition */
}
footer a:hover {
    color: var(--gold-light);                 /* Lighter gold on hover */
    text-decoration: underline;               /* Underline on hover */
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING WHATSAPP BUTTON
═══════════════════════════════════════════════════════════════ */
.wa-float {
    position: fixed;                          /* Fixed to viewport */
    bottom: 22px;                             /* 22px from bottom */
    right: 22px;                              /* 22px from right */
    width: 60px;                              /* 60px wide */
    height: 60px;                             /* 60px tall */
    background: var(--wa-green);              /* WhatsApp green */
    border-radius: 50%;                       /* Perfect circle */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Center vertically */
    justify-content: center;                  /* Center horizontally */
    z-index: 1000;                            /* Above content */
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);   /* Deep shadow */
    animation: waPulse 2.4s ease-out infinite;  /* Pulse ring animation */
    transition: transform 0.3s;               /* Smooth scale */
}
.wa-float:hover { transform: scale(1.08); }   /* Grow on hover */

/* Pulse ring animation — "call to action" effect */
@keyframes waPulse {
    0%   { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70%  { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (max-width: 768px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Header stack vertically */
    .header-inner {
        flex-direction: column;               /* Stack children */
        gap: 12px;                            /* Gap between items */
        padding: 14px 16px;                   /* Reduced padding */
    }

    /* Nav center */
    nav ul {
        justify-content: center;              /* Center links */
        gap: 14px;                            /* Tighter gap */
    }
    nav a { font-size: 0.8rem; }              /* Smaller font */

    /* Search full width */
    .search-wrap { width: 100%; }             /* Full width */
    #searchInput { width: 100%; }             /* Full width input */

    /* Section less padding on mobile */
    .section { padding: 60px 0; }             /* Less vertical padding */

    /* Grid: 2 columns on mobile */
    .grid {
        grid-template-columns: repeat(2, 1fr);  /* Two equal columns */
        gap: 15px;                              /* Tighter gap */
        margin-bottom: 30px;                    /* Space below */
    }

    /* Smaller card images */
    .card-img { height: 150px; }              /* Smaller height */
    .card-title { font-size: 0.95rem; }       /* Smaller title */
    .btn-wa { padding: 8px 14px; font-size: 0.75rem; }  /* Smaller button */

    /* Hero less padding */
    .hero { padding: 130px 16px 60px; }

    /* Smaller WhatsApp float */
    .wa-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL (max-width: 380px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .grid { grid-template-columns: 1fr; }     /* Single column */
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT (Accessibility)
   Agar user ne OS mein "reduce motion" on kiya hai,
   animations disable ho jayen (lekin content visible rahe).
   
   ★ FIX: Intro-specific rules added so the intro still shows
   its static content for reduced-motion users (JS handles fade).
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations/transitions globally */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;    /* Instant animations */
        animation-iteration-count: 1 !important;  /* Run only once */
        transition-duration: 0.01ms !important;   /* Instant transitions */
        scroll-behavior: auto !important;         /* No smooth scroll */
    }

    /* ★ INTRO FIX: Ensure static content is visible
       (JS will handle the fade-out manually) */
    .intro-bg {
        transform: scale(1);                      /* No zoom */
    }
    .intro-shine {
        display: none;                            /* Hide shine sweep */
    }
    .intro-glow {
        opacity: 0.8;                             /* Static glow */
    }
    .intro-text,
    .intro-tagline {
        opacity: 1 !important;                    /* Force visible */
        transform: translateY(0) !important;      /* Normal position */
    }
    .intro-line {
        width: 62vw !important;                   /* Force full width */
        opacity: 1 !important;                    /* Force visible */
    }
}