/* ================================================================
   VIMAL TOYS PAGE
   PREMIUM RESPONSIVE DESIGN
   All Toys page styles are scoped under body.toys-page
   ================================================================ */


/* ================================================================
   PAGE BACKGROUND
   ================================================================ */

body.toys-page {
    background: #071a3d !important;
    color: #ffffff !important;
}


/* ================================================================
   HERO
   ================================================================ */

body.toys-page .page-hero {
    position: relative;
    min-height: 410px;
    height: 410px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    overflow: hidden;
    isolation: isolate;

    background: #071a3d;
}


/* ---------- Hero Video ---------- */

body.toys-page .page-hero .toys-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: -2;
}


/* ---------- Hero Overlay ---------- */

body.toys-page .page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(5, 25, 60, 0.88) 0%,
            rgba(8, 65, 92, 0.70) 45%,
            rgba(0, 180, 216, 0.42) 75%,
            rgba(212, 175, 55, 0.25) 100%
        );

    z-index: -1;
}


/* ---------- Gold Glow ---------- */

body.toys-page .page-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -150px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.20);

    filter: blur(10px);

    z-index: -1;
}


/* ================================================================
   HERO CONTENT
   ================================================================ */

body.toys-page .page-hero .hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding: 30px;

    text-align: center;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    transform: none;
}


/* ---------- Hero Heading ---------- */

body.toys-page .page-hero h1 {
    width: 100%;

    margin: 0 0 16px;

    font-size: clamp(44px, 6vw, 72px);
    font-weight: 700;

    line-height: 1.1;
    letter-spacing: -1.5px;

    color: #ffffff !important;

    text-align: center;

    text-shadow:
        0 3px 25px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(0, 180, 216, 0.20);
}


/* ---------- Hero Paragraph ---------- */

body.toys-page .page-hero p {
    width: 100%;
    max-width: 620px;

    margin: 0 auto;

    font-size: clamp(15px, 2vw, 19px);
    line-height: 1.65;

    color: #e7f9ff !important;

    text-align: center;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35);
}


/* ================================================================
   SEARCH BAR
   ================================================================ */

body.toys-page .toys-search-bar {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 680px;

    margin: -30px auto 50px;
    padding: 0 20px;
}


body.toys-page .toys-search-bar input {
    box-sizing: border-box;

    display: block;

    width: 100%;
    height: 62px;

    padding: 0 22px;

    border: 2px solid #e6edf2;
    border-radius: 18px;

    outline: none;

    background: #ffffff !important;
    color: #172b4d !important;

    font-family: "Poppins", sans-serif;
    font-size: 15px;

    box-shadow:
        0 15px 40px rgba(7, 26, 61, 0.14),
        0 0 0 4px rgba(0, 180, 216, 0.04);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


body.toys-page .toys-search-bar input::placeholder {
    color: #6b7280;
}


body.toys-page .toys-search-bar input:focus {
    border-color: #00b4d8;

    box-shadow:
        0 15px 40px rgba(0, 180, 216, 0.20),
        0 0 0 4px rgba(0, 180, 216, 0.08);

    transform: translateY(-1px);
}


/* ================================================================
   SHOP BY AGE
   ================================================================ */

body.toys-page .age-jump {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto 46px;
    padding: 0 20px;
}


body.toys-page .age-jump-label {
    display: block;

    margin: 0 0 15px;

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.02em;
}


body.toys-page .age-jump-chips {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


body.toys-page .age-chip {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 10px 17px;

    border: 1px solid #d9e2ec;
    border-radius: 999px;

    background: #ffffff !important;
    color: #071a3d !important;

    font-size: 13.5px;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


body.toys-page .age-chip:hover,
body.toys-page .age-chip:focus-visible {
    background: linear-gradient(
        135deg,
        #00b4d8,
        #0077b6
    ) !important;

    color: #ffffff !important;

    border-color: #00b4d8;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(0, 180, 216, 0.25);

    outline: none;
}


/* ================================================================
   MAIN CATEGORY GRID
   ================================================================ */

body.toys-page .toy-categories {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto 35px;
    padding: 0 20px;

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(200px, 1fr));

    gap: 20px;

    background: transparent;
}


/* ================================================================
   CATEGORY CARDS
   ================================================================ */

body.toys-page a.toy-category {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 215px;

    padding: 24px 20px 21px;

    overflow: hidden;

    background: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;

    color: #102c50 !important;

    text-decoration: none;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* ---------- Colourful Top Border ---------- */

body.toys-page a.toy-category::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        #00b4d8,
        #48cae4,
        #ffd166
    );

    opacity: 0.9;
}


/* ---------- Decorative Card Glow ---------- */

body.toys-page a.toy-category::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    background: rgba(0, 180, 216, 0.07);

    pointer-events: none;
}


/* ---------- Card Hover ---------- */

body.toys-page a.toy-category:hover,
body.toys-page a.toy-category:focus-visible {
    transform: translateY(-7px);

    border-color: #00b4d8;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.28);

    outline: none;
}


/* ================================================================
   CATEGORY ICONS
   ================================================================ */

body.toys-page .toy-category > span:first-child {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: 9px;

    border-radius: 17px;

    font-size: 27px;

    box-shadow:
        0 4px 10px rgba(7, 26, 61, 0.05);
}


/* ---------- Icon Colour Rotation ---------- */

body.toys-page
.toy-category:nth-child(3n + 1)
> span:first-child {
    background: linear-gradient(
        135deg,
        #e0f7ff,
        #c8f1fa
    );
}


body.toys-page
.toy-category:nth-child(3n + 2)
> span:first-child {
    background: linear-gradient(
        135deg,
        #fff4d6,
        #ffe7a8
    );
}


body.toys-page
.toy-category:nth-child(3n + 3)
> span:first-child {
    background: linear-gradient(
        135deg,
        #f0e9ff,
        #e3d5ff
    );
}


body.toys-page
.toy-category:nth-child(4n)
> span:first-child {
    background: linear-gradient(
        135deg,
        #e0f8ee,
        #c9f2df
    );
}


/* ================================================================
   CATEGORY TEXT
   ================================================================ */

body.toys-page .toy-category h3 {
    position: relative;
    z-index: 1;

    margin: 3px 0 0;

    color: #071a3d !important;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.35;
}


body.toys-page .toy-category p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #364152 !important;

    font-size: 13.5px;
    font-weight: 500;

    line-height: 1.55;
}


/* ================================================================
   CATEGORY AGE BADGE
   ================================================================ */

body.toys-page .toy-category .age-badge {
    position: relative;
    z-index: 1;

    margin-top: 9px;

    padding: 5px 11px;

    border: 1px solid #f1d98a;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #fff5d6,
        #ffe9a8
    ) !important;

    color: #6b4f00 !important;

    font-size: 11.5px;
    font-weight: 700;
}


/* ================================================================
   INFORMATION NOTE
   ================================================================ */

body.toys-page .toys-note {
    width: calc(100% - 40px);
    max-width: 900px;

    box-sizing: border-box;

    margin: 10px auto 45px;
    padding: 16px 22px;

    background: #ffffff !important;

    border: 1px solid #dfe5ea;

    border-radius: 14px;

    color: #364152 !important;

    text-align: center;

    font-size: 13.5px;
    line-height: 1.6;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}


/* ================================================================
   CATEGORY DETAIL GROUPS
   ================================================================ */

body.toys-page #toyGroups {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 0 20px 30px;
}


body.toys-page .toy-group {
    margin: 0 0 8px;

    padding: 34px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


body.toys-page .toy-group:first-child {
    border-top: none;
}


/* ================================================================
   GROUP HEADER
   ================================================================ */

body.toys-page .toy-group-head {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


body.toys-page .toy-group-head h2 {
    margin: 0;

    color: #ffffff !important;

    font-size: 1.4rem;
    font-weight: 700;

    line-height: 1.3;
}


/* ---------- Group Age Badge ---------- */

body.toys-page .toy-group-head .age-badge {
    padding: 5px 11px;

    border: 1px solid #b9eaf3;
    border-radius: 999px;

    background: #e7f7fb !important;

    color: #08728f !important;

    font-size: 11.5px;
    font-weight: 700;
}


/* ---------- Group Description ---------- */

body.toys-page .toy-group-desc {
    margin: 7px 0 17px;

    color: #e5edf5 !important;

    font-size: 14px;

    line-height: 1.55;
}


/* ================================================================
   SUBCATEGORY GRID
   ================================================================ */

body.toys-page .subcat-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(180px, 1fr));

    gap: 11px;

    background: transparent;
}


/* ================================================================
   SUBCATEGORY CHIPS
   ================================================================ */

body.toys-page .subcat-chip {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 46px;

    box-sizing: border-box;

    padding: 12px 14px;

    background: #ffffff !important;

    border: 1px solid #dfe5ea;
    border-radius: 13px;

    color: #1f2937 !important;

    font-size: 13.5px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}


body.toys-page .subcat-chip:hover,
body.toys-page .subcat-chip:focus-visible {
    background: #eefafd !important;

    border-color: #00b4d8;

    color: #086a84 !important;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(0, 180, 216, 0.28);

    outline: none;
}


/* ---------- Subcategory Icon ---------- */

body.toys-page .subcat-icon {
    flex-shrink: 0;

    font-size: 16px;

    filter: saturate(1.15);
}


/* ================================================================
   HIDDEN SEARCH RESULTS
   ================================================================ */

body.toys-page .subcat-chip.is-hidden,
body.toys-page .toy-category.is-hidden,
body.toys-page .toy-group.is-hidden {
    display: none !important;
}


/* ================================================================
   TOYS NAVBAR MEGA MENU
   ================================================================ */

body.toys-page nav.navbar .dropdown {
    position: relative !important;
}

/* Toys dropdown - hidden by default */
.toys-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    z-index: 9999;
}

/* Show ONLY after clicking */
.toys-dropdown.show {
    display: block;
}
body.toys-page nav.navbar .dropdown .mega-menu {
    display: none !important;

    position: absolute !important;

    top: 100% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;

    box-sizing: border-box;

    grid-template-columns:
        1fr 1.15fr 1fr;

    column-gap: 24px;

    padding: 18px 20px 20px !important;

    background: #12294f !important;

    border: none !important;

    border-radius: 0 0 10px 10px !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28);

    z-index: 9999 !important;
}

body.toys-page nav.navbar .dropdown .mega-menu.show {
    display: grid !important;
}
/* ================================================================
   MEGA MENU COLUMNS
   ================================================================ */

body.toys-page nav.navbar
.dropdown
.mega-menu
.menu-column {
    min-width: 0 !important;

    padding: 0 !important;
}


body.toys-page nav.navbar
.dropdown
.mega-menu
.menu-column:not(:last-child) {
    padding-right: 22px !important;

    border-right:
        1px solid rgba(255, 255, 255, 0.16) !important;
}


/* ================================================================
   MEGA MENU HEADINGS
   ================================================================ */

body.toys-page nav.navbar
.dropdown
.mega-menu
h4 {
    margin: 0 0 10px !important;
    padding-bottom: 10px !important;

    color: #ffd166 !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.2;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}


/* ================================================================
   MEGA MENU LINKS
   ================================================================ */

body.toys-page nav.navbar
.dropdown
.mega-menu
a {
    display: block !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    background: transparent !important;

    color: #f4f7fb !important;

    font-size: 13.5px !important;
    font-weight: 500 !important;

    line-height: 1.35;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


body.toys-page nav.navbar
.dropdown
.mega-menu
a:hover {
    background: transparent !important;

    color: #ffd166 !important;

    transform: translateX(3px);
}


/* ================================================================
   MEGA MENU ICONS
   ================================================================ */

body.toys-page nav.navbar
.dropdown
.mega-menu
a span,

body.toys-page nav.navbar
.dropdown
.mega-menu
.menu-icon {
    margin-right: 6px;
}


/* ================================================================
   VIEW ALL TOYS
   ================================================================ */

body.toys-page nav.navbar
.dropdown
.mega-menu
.view-all-toys {
    display: block !important;

    margin-top: 8px !important;
    padding: 7px 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    border-radius: 0 !important;

    text-align: left !important;

    font-weight: 600 !important;
}


body.toys-page nav.navbar
.dropdown
.mega-menu
.view-all-toys:hover {
    background: transparent !important;

    color: #ffd166 !important;

    transform: translateX(3px);
}


/* ================================================================
   MOBILE — TABLET
   ================================================================ */

@media (max-width: 900px) {

    /* ---------- Category Grid ---------- */

    body.toys-page .toy-categories {
        grid-template-columns:
            repeat(auto-fill, minmax(160px, 1fr));

        gap: 14px;
    }


    /* ---------- Subcategory Grid ---------- */

    body.toys-page .subcat-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(150px, 1fr));
    }


body.toys-page nav.navbar .dropdown .mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
    box-sizing: border-box;
    display: none !important;
    grid-template-columns: 1fr 1.15fr 1fr;
    column-gap: 24px;
    padding: 18px 20px 20px !important;
    background: #12294f !important;
    border: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    z-index: 9999 !important;
}
body.toys-page nav.navbar .dropdown .mega-menu.show {
    display: grid !important;
}
    body.toys-page nav.navbar
    .dropdown
    .mega-menu
    .menu-column {
        border-right: none !important;

        padding-right: 0 !important;
    }
}


/* ================================================================
   MOBILE — PHONES
   ================================================================ */

@media (max-width: 640px) {

    /* ---------- Hero ---------- */

    body.toys-page .page-hero {
        min-height: 320px;
        height: 320px;

        padding: 0 18px;
    }


    body.toys-page .page-hero .hero-content {
        width: 100%;
        max-width: 100%;

        padding: 0 10px;
    }


    body.toys-page .page-hero h1 {
        font-size: 40px !important;

        margin-bottom: 12px !important;
    }


    body.toys-page .page-hero p {
        font-size: 15px;

        line-height: 1.55;
    }


    /* ---------- Search ---------- */

    body.toys-page .toys-search-bar {
        margin: -25px auto 38px;

        padding: 0 18px;
    }


    body.toys-page .toys-search-bar input {
        height: 56px;

        padding: 0 18px;

        border-radius: 16px;
    }


    /* ---------- Age Chips ---------- */

    body.toys-page .age-jump {
        margin-bottom: 38px;

        padding: 0 18px;
    }


    body.toys-page .age-jump-chips {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 7px;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    body.toys-page .age-jump-chips::-webkit-scrollbar {
        display: none;
    }


    body.toys-page .age-chip {
        flex-shrink: 0;
    }


    /* ---------- Category Cards ---------- */

    body.toys-page .toy-categories {
        grid-template-columns: repeat(2, 1fr);

        gap: 13px;

        padding: 0 18px;
    }


    body.toys-page a.toy-category {
        min-height: 205px;

        padding: 18px 15px;

        border-radius: 17px;
    }


    body.toys-page .toy-category > span:first-child {
        width: 48px;
        height: 48px;

        font-size: 23px;

        border-radius: 14px;
    }


    body.toys-page .toy-category h3 {
        font-size: 15px;
    }


    body.toys-page .toy-category p {
        font-size: 12.5px;
    }


    /* ---------- Information Note ---------- */

    body.toys-page .toys-note {
        width: calc(100% - 36px);

        padding: 14px 16px;

        font-size: 12.5px;
    }


    /* ---------- Detail Groups ---------- */

    body.toys-page #toyGroups {
        padding: 0 18px 25px;
    }


    body.toys-page .toy-group {
        padding: 28px 0;
    }


    body.toys-page .toy-group-head h2 {
        font-size: 1.1rem;
    }


    body.toys-page .toy-group-desc {
        font-size: 13px;
    }


    /* ---------- Subcategory Grid ---------- */

    body.toys-page .subcat-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 9px;
    }


    body.toys-page .subcat-chip {
        min-height: 44px;

        padding: 10px 11px;

        font-size: 12.5px;
    }


    /* ---------- Mega Menu ---------- */

    body.toys-page nav.navbar
    .dropdown
    .mega-menu {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;

        grid-template-columns: 1fr;

        max-height: 70vh;

        overflow-y: auto;

        padding: 16px !important;

        border-radius: 0 0 10px 10px !important;
    }


    body.toys-page nav.navbar
    .dropdown
    .mega-menu
    .menu-column {
        border-right: none !important;
    }


    body.toys-page nav.navbar
    .dropdown
    .mega-menu
    h4 {
        font-size: 14px !important;
    }


    body.toys-page nav.navbar
    .dropdown
    .mega-menu
    a {
        font-size: 13px !important;
    }
}


/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    body.toys-page .page-hero {
        min-height: 280px;
        height: 280px;
    }


    body.toys-page .page-hero h1 {
        font-size: 34px !important;
    }


    body.toys-page .toy-categories {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

        padding: 0 14px;
    }


    body.toys-page a.toy-category {
        min-height: 195px;

        padding: 16px 12px;
    }


    body.toys-page .subcat-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   ACCESSIBILITY — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    body.toys-page a.toy-category,
    body.toys-page .subcat-chip,
    body.toys-page .age-chip,
    body.toys-page .toys-search-bar input,
    body.toys-page nav.navbar .dropdown .mega-menu a {
        transition: none !important;
    }
}