:root {
            --orange: #f6981b;
            --orange-dark: #d48a14;
            --orange-light: #fff8ee;
            --navy: #1a1a2e;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Nunito', sans-serif; color: #1a1a2e; background: #fff; }
        h1,h2,h3,h4,h5 { font-family: 'Playfair Display', serif; }

        /* ══ TOP ANNOUNCEMENT BAR ══ */
        .top-bar {
            background: var(--navy);
            color: rgba(255,255,255,.85);
            font-size: .78rem;
            padding: 6px 0;
            text-align: center;
            letter-spacing: .2px;
        }
        .top-bar strong { color: var(--orange); }
        .top-bar .tb-close {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,.4);
            font-size: .9rem;
            cursor: pointer;
        }

        /* ══ STICKY HEADER ══ */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: #fff;
        }

        /* ══ MAIN NAVBAR ══ */
        .main-nav {
            padding: 0;
            border-bottom: 1px solid #f0f0f0;
            box-shadow: 0 1px 0 rgba(0,0,0,.04);
        }
        .main-nav .container {
            display: flex;
            align-items: center;
            gap: 16px;
            height: 64px;
        }

        /* Brand */
        .nav-brand {
            text-decoration: none;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }
        .nav-brand img { max-height: 44px; max-width: 160px; object-fit: contain; }
        .nav-brand-text {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--orange);
            line-height: 1;
        }
        .nav-brand-text small {
            display: block;
            font-family: 'Nunito', sans-serif;
            font-size: .58rem;
            color: #bbb;
            font-weight: 400;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        /* Search */
        .nav-search {
            flex: 1;
            max-width: 480px;
            margin: 0 auto;
        }
        .nav-search form {
            display: flex;
            align-items: center;
            background: #f8f9fa;
            border: 1.5px solid #e9ecef;
            border-radius: 30px;
            overflow: hidden;
            transition: border-color .2s;
        }
        .nav-search form:focus-within {
            border-color: var(--orange);
            background: #fff;
        }
        .nav-search input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 9px 16px;
            font-size: .875rem;
            outline: none;
            font-family: 'Nunito', sans-serif;
            color: #1a1a2e;
        }
        .nav-search input::placeholder { color: #aaa; }
        .nav-search button {
            background: var(--orange);
            border: none;
            padding: 9px 16px;
            color: #fff;
            font-size: .9rem;
            cursor: pointer;
            transition: background .2s;
        }
        .nav-search button:hover { background: var(--orange-dark); }

        /* Nav icons */
        .nav-icons {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .nav-icon {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #444;
            text-decoration: none;
            font-size: 1.15rem;
            transition: all .2s;
            cursor: pointer;
        }
        .nav-icon:hover { background: var(--orange-light); color: var(--orange); }
        .nav-icon .count-badge {
            position: absolute;
            top: 2px; right: 2px;
            background: var(--orange);
            color: #fff;
            font-size: .58rem;
            width: 16px; height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
        }
        .nav-icon.wishlist-icon .count-badge { background: #dc3545; }

        /* Login button */
        .btn-login {
            background: var(--orange);
            color: #fff;
            border: none;
            padding: 8px 18px;
            border-radius: 22px;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background .2s;
            text-decoration: none;
            white-space: nowrap;
        }
        .btn-login:hover { background: var(--orange-dark); color: #fff; }

        /* User dropdown */
        .user-dropdown .dropdown-toggle {
            background: #fff;
            border: 1.5px solid #e9ecef;
            color: #444;
            padding: 6px 14px;
            border-radius: 22px;
            font-size: .82rem;
            font-weight: 700;
        }
        .user-dropdown .dropdown-toggle:hover { border-color: var(--orange); color: var(--orange); }
        .user-dropdown .dropdown-menu { border: none; box-shadow: 0 8px 30px rgba(0,0,0,.12); border-radius: 12px; padding: 6px; }
        .user-dropdown .dropdown-item { border-radius: 8px; font-size: .85rem; padding: 8px 14px; font-weight: 600; }
        .user-dropdown .dropdown-item:hover { background: var(--orange-light); color: var(--orange); }

        /* ══ CATEGORY BAR ══ */
        .cat-bar {
            background: #fff;
            border-bottom: 2px solid #f0f0f0;
            overflow: visible;
            position: relative;
        }
        .cat-bar-inner {
            display: flex;
            align-items: stretch;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .cat-bar-inner::-webkit-scrollbar { display: none; }

        .cat-item { position: relative; flex-shrink: 0; }
        .cat-link {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 11px 16px;
            color: #444;
            font-size: .8rem;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: .3px;
            transition: all .2s;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }
        .cat-link:hover,
        .cat-item:hover > .cat-link {
            color: var(--orange);
            border-bottom-color: var(--orange);
        }
        .cat-link.active-cat { color: var(--orange); border-bottom-color: var(--orange); }
        .cat-link i { font-size: .7rem; opacity: .6; }

        /* Category dropdown */
        .cat-drop {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: #fff;
            border-radius: 0 0 14px 14px;
            box-shadow: 0 10px 30px rgba(0,0,0,.12);
            z-index: 999;
            padding: 8px 0;
            border-top: 2px solid var(--orange);
        }
        .cat-item:hover .cat-drop { display: block; }
        .cat-drop a {
            display: block;
            padding: 9px 18px;
            color: #555;
            text-decoration: none;
            font-size: .83rem;
            font-weight: 600;
            transition: all .15s;
        }
        .cat-drop a:hover { background: var(--orange-light); color: var(--orange); padding-left: 24px; }

        /* Age dropdown toggle */
        .age-toggle {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 11px 16px;
            color: var(--orange);
            font-size: .8rem;
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: .3px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            background: var(--orange-light);
            border-radius: 6px 6px 0 0;
            transition: all .2s;
        }
        .age-toggle:hover,
        .age-toggle.open { background: #ffe8c0; }
        .age-dropdown { display:none; position:absolute; top:calc(100% + 2px); right:0; width:360px; background:#fff; border-radius:0 0 16px 16px; box-shadow:0 12px 40px rgba(0,0,0,.14); z-index:1050; padding:16px; border-top:3px solid var(--orange); }
        .age-dropdown.open { display:block; }
        .age-item-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
        /* hover removed — using JS click instead */
        .age-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }
        .age-pill {
            display: block;
            text-align: center;
            padding: 8px 6px;
            background: var(--orange-light);
            color: var(--orange);
            border-radius: 8px;
            font-size: .75rem;
            font-weight: 700;
            text-decoration: none;
            transition: all .15s;
            border: 1.5px solid transparent;
        }
        .age-pill:hover { background: var(--orange); color: #fff; }
        .age-pill.active-age { background: var(--orange); color: #fff; border-color: var(--orange-dark); }

        /* ══ BUTTONS ══ */
        .btn-primary { background: var(--orange); border-color: var(--orange); }
        .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
        .btn-outline-primary { color: var(--orange); border-color: var(--orange); }
        .btn-outline-primary:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

        /* ══ PRODUCT CARDS ══ */
        .product-card { border: 1px solid #e9ecef; border-radius: 14px; overflow: hidden; transition: all .3s; background: #fff; }
        .product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
        .product-card .card-img-top { height: 280px; object-fit: cover; transition: transform .4s; }
        .product-card:hover .card-img-top { transform: scale(1.04); }
        .product-card .img-wrap { overflow: hidden; position: relative; }
        .badge-sale { position:absolute; top:10px; left:10px; background:#dc3545; color:#fff; font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:700; }
        .badge-new  { position:absolute; top:10px; left:10px; background:#198754; color:#fff; font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:700; }
        .wishlist-btn { position:absolute; top:10px; right:10px; background:#fff; border:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer; transition:all .2s; font-size:1rem; color:#ccc; }
        .wishlist-btn:hover,.wishlist-btn.active { color:#dc3545; }
        .price-current  { color: var(--orange); font-weight: 700; font-size: 1.1rem; }
        .price-original { text-decoration: line-through; color: #aaa; font-size: .9rem; }

        /* ══ SECTION TITLES ══ */
        .section-title { font-size: 1.9rem; color: #1a1a2e; position: relative; padding-bottom: 12px; margin-bottom: 10px; }
        .section-title::after { content:''; position:absolute; bottom:0; left:0; width:44px; height:3px; background:var(--orange); border-radius:2px; }
        .section-title.centered::after { left: 50%; transform: translateX(-50%); }

        /* ══ BREADCRUMB ══ */
        .breadcrumb-section { background: #fafafa; border-bottom: 1px solid #f0f0f0; padding: 10px 0; }

        /* ══ OTP BOXES ══ */
        .otp-box { border: 2px solid #dee2e6 !important; border-radius: 12px !important; transition: border-color .2s; }
        .otp-box:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 .2rem rgba(246,152,27,.15) !important; }

        /* ══ FOOTER ══ */
        .footer { background: var(--navy); color: #aaa; padding: 50px 0 20px; }
        .footer h5 { color: #fff; font-weight: 700; margin-bottom: 14px; font-family: 'Nunito', sans-serif; font-size: 1rem; }
        .footer a { color: #aaa; text-decoration: none; transition: color .2s; font-size: .87rem; }
        .footer a:hover { color: var(--orange); }
        .footer p { font-size: .87rem; }
        .footer-divider { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; margin-top: 30px; text-align: center; font-size: .82rem; }

        /* Mobile toggler */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.4rem;
            color: #444;
            cursor: pointer;
        }
        @media(max-width: 991px) {
            .mobile-menu-btn { display: flex; align-items: center; }
            .cat-bar { display: none; }
            .nav-search { max-width: 100%; }
            .product-card .card-img-top { height: 220px; }
            .section-title { font-size: 1.4rem; }
        }

        /* Search form in navbar */
        .search-form .form-control { border-radius:30px 0 0 30px; border-right:none; }
        .search-form .btn { border-radius:0 30px 30px 0; background:var(--orange); border-color:var(--orange); color:#fff; }





        /* Hero */
.hero-section  { position:relative; }
.hero-slides   { width:100%; height:100%; position:relative; }
.hero-slide    { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.hero-slide.active { opacity:1; z-index:1; }
.hero-img-wrap { position:absolute; inset:0; overflow:hidden; }
.hero-bg-img   { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-overlay  { position:absolute; inset:0; background:rgba(0,0,0,.42); }
.hero-content  { position:relative; z-index:2; animation:heroIn .8s ease both; }
@keyframes heroIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.hero-tag { display:inline-block; background:rgba(246,152,27,.25); color:#f6981b; border:1px solid #f6981b; border-radius:20px; padding:4px 16px; font-size:.8rem; font-weight:700; margin-bottom:16px; }
.hero-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.2rem); font-weight:700; line-height:1.2; margin-bottom:16px; }
.text-gold  { color:#f6981b; }
.hero-desc  { font-size:1.05rem; opacity:.85; margin-bottom:28px; line-height:1.6; }
.btn-gold   { background:#f6981b; border-color:#f6981b; color:#fff; }
.btn-gold:hover { background:#d48a14; border-color:#d48a14; color:#fff; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,.15); border:none; color:#fff; width:50px; height:50px; border-radius:50%; font-size:2rem; backdrop-filter:blur(4px); transition:background .2s; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hero-arrow:hover { background:rgba(255,255,255,.3); }
.hero-prev { left:20px; } .hero-next { right:20px; }
.hero-dots  { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:8px; }
.hero-dot   { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:all .3s; padding:0; }
.hero-dot.active { background:#f6981b; width:28px; border-radius:5px; }

/* Age Group Cards */
.age-card {
    border-radius:20px; padding:28px 20px; text-align:center;
    transition:transform .3s,box-shadow .3s; cursor:pointer;
    height:100%; min-height:220px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.age-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.15); }
.age-icon  { font-size:3rem; margin-bottom:10px; }
.age-range { font-size:1.3rem; font-weight:800; color:#1a1a2e; font-family:'Playfair Display',serif; }
.age-label { font-size:.85rem; font-weight:700; color:#444; margin:4px 0; }
.age-sub   { font-size:.75rem; color:#777; margin-bottom:14px; }
.age-btn   { display:inline-block; background:#1a1a2e; color:#fff; padding:6px 18px; border-radius:20px; font-size:.78rem; font-weight:700; transition:background .2s; }
.age-card:hover .age-btn { background:#f6981b; }

/* Category cards */
.category-card { cursor:pointer; transition:transform .3s,box-shadow .3s; }
.category-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.15); }
.category-card:hover .category-img { transform:scale(1.06); }
.section-title.centered::after { left:50%; transform:translateX(-50%); }

/* ── Age Group Slider ── */
.age-slider-wrap { position:relative; overflow:hidden; padding:0 50px; }
.age-slider-track {
    display:flex;
    gap:16px;
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change:transform;
}
.age-slide-item { flex:0 0 calc(20% - 14px); min-width:160px; }
.age-card-new {
    border-radius:18px; padding:24px 16px; text-align:center;
    transition:transform .3s, box-shadow .3s; cursor:pointer;
    min-height:180px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
}
.age-card-new:hover { transform:translateY(-6px); box-shadow:0 14px 35px rgba(0,0,0,.15); }
.age-card-emoji { font-size:2.4rem; line-height:1; }
.age-card-name  { font-size:.85rem; font-weight:800; line-height:1.3; font-family:'Playfair Display',serif; }
.age-card-btn   { display:inline-block; color:#fff; padding:5px 16px; border-radius:20px; font-size:.72rem; font-weight:700; margin-top:4px; transition:opacity .2s; }
.age-card-new:hover .age-card-btn { opacity:.85; }
.age-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:10;
    background:#fff; border:2px solid #f6981b; color:#f6981b; width:40px; height:40px;
    border-radius:50%; font-size:1.5rem; cursor:pointer; display:flex; align-items:center;
    justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.12); transition:all .2s; padding:0;
}
.age-slider-arrow:hover { background:#f6981b; color:#fff; }
.age-prev { left:4px; }
.age-next { right:4px; }
.age-dots { display:flex; justify-content:center; gap:6px; }
.age-dot  { width:8px; height:8px; border-radius:50%; background:#ddd; border:none; cursor:pointer; padding:0; transition:all .3s; }
.age-dot.active { background:#f6981b; width:22px; border-radius:4px; }

@media(max-width:991px) { .age-slide-item { flex:0 0 calc(33.33% - 12px); } }
@media(max-width:767px) { .age-slide-item { flex:0 0 calc(50% - 10px); } .age-slider-wrap { padding:0 36px; } }
@media(max-width:480px) { .age-slide-item { flex:0 0 calc(50% - 8px); min-width:130px; } }
  

.page-content h2 { color:#8B1A4A; font-size:1.4rem; margin-top:28px; margin-bottom:12px; }
.page-content h3 { color:#1a1a2e; font-size:1.15rem; margin-top:20px; margin-bottom:10px; font-weight:700; }
.page-content ul, .page-content ol { padding-left:24px; margin-bottom:16px; }
.page-content li { margin-bottom:6px; }
.page-content p { margin-bottom:14px; }
.page-content strong { color:#1a1a2e; }
.page-content a { color:#8B1A4A; }