.catalog-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(215, 174, 70, .16), transparent 28rem),
        linear-gradient(180deg, #fff, #f8fafc);
    min-height: auto;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
}

/* Store-card mobile layout used by both category pages */
@media (max-width: 1023px) {
    .catalog-hero ~ section.bg-blue-600 {
        padding: 3rem 1rem !important;
    }

    .catalog-hero ~ section.bg-blue-600 > a {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 1.25rem !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 2rem !important;
        font-size: 0 !important;
    }

    .catalog-hero ~ section.bg-blue-600 > a::before {
        content: "OFFICIAL GOOLEE STORE" !important;
        max-width: 100%;
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .catalog-hero ~ section.bg-blue-600 > a::after {
        content: "Visit official store \2197";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.9rem 1.25rem;
        border-radius: 0.5rem;
        background: #1d3557;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.25rem;
        text-align: center;
    }
}

.catalog-hero > div { width: 100%; }
.catalog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-bottom: 1.5rem;
    padding: .375rem .75rem;
    border-radius: .375rem;
    background: #f1f5f9;
    color: #475569;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.catalog-eyebrow span { width: .5rem; height: .5rem; border-radius: 999px; background: #d7ae46; }
.catalog-card {
    border-width: 2px !important;
    border-color: #f1f5f9 !important;
    border-radius: 1rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.catalog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -25px rgba(15, 23, 42, .35); border-color: #d7ae46; }
.catalog-card img { transition: transform .6s ease; }
.catalog-card:hover img { transform: scale(1.04); }
.group:hover .group-hover\:block { display: block; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.hero-image-rotated { transform: rotate(2deg); transition: transform .3s ease; }
.hero-image-rotated:hover { transform: rotate(0) scale(1.02); }
main > section:not(.catalog-hero) { padding-top: 8rem; padding-bottom: 8rem; }
.catalog-hero + section { padding-top: 4rem !important; }
main h1, main h2, main h3 { letter-spacing: -.025em; }
main h1 { line-height: 1.1; }
.catalog-hero h1 span { color: #b7791f !important; }
.catalog-hero > div > a[href="/products-games"] { display: none; }
.catalog-hero .grid > div:first-child > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-bottom: 1.5rem;
    padding: .375rem .75rem;
    border-radius: .375rem;
    background: #f1f5f9;
    color: #475569 !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25rem;
    text-transform: uppercase;
}
.catalog-hero .grid > div:first-child > p:first-child::before {
    content: "";
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #d7ae46;
}
.catalog-card h2, .catalog-card h3 { color: #1d3557; }
.catalog-card span.font-bold { color: #9a6818 !important; }
.store-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(215, 174, 70, .65);
    border-radius: 1rem;
    background: linear-gradient(125deg, #1d3557 0%, #10294d 68%, #76500f 100%);
    box-shadow: 0 24px 60px -30px rgba(15,23,42,.55);
}
.store-panel::after { content: ""; position: absolute; right: -6rem; top: -8rem; width: 22rem; height: 22rem; border-radius: 999px; background: rgba(215,174,70,.2); }
.store-panel-content { position: relative; z-index: 2; }

.store-panel-content > span {
    border: 1px solid rgba(215, 174, 70, .42);
    background: rgba(215, 174, 70, .12) !important;
    color: #f3dfae !important;
}

.store-panel .bg-blue-600,
.store-panel a.bg-blue-600 {
    background: #d7ae46 !important;
    color: #172238 !important;
}

.store-panel .bg-blue-600:hover,
.store-panel a.bg-blue-600:hover {
    background: #e5c46f !important;
}

.category-store-section .store-panel img {
    border-left: 1px solid rgba(215, 174, 70, .35);
}
.catalog-motion {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .75s ease var(--motion-delay, 0ms),
        transform .75s cubic-bezier(.2, .7, .2, 1) var(--motion-delay, 0ms);
}
.catalog-motion.is-visible {
    opacity: 1;
    transform: none;
}
.catalog-card.catalog-motion.is-visible:hover {
    transform: translateY(-6px);
}
.catalog-hero ~ section.bg-blue-600 {
    padding: 5rem 1.5rem !important;
    background: #fff !important;
}
.catalog-hero ~ section.bg-blue-600 > a {
    display: flex;
    max-width: 72rem;
    min-height: 15rem;
    margin: 0 auto;
    padding: 3rem;
    align-items: flex-end;
    justify-content: space-between;
    border-radius: 1rem;
    background: linear-gradient(120deg, #1d3557 0%, #1d3557 68%, #76500f 100%);
    color: #fff !important;
    text-align: left;
    box-shadow: 0 24px 60px -30px rgba(15,23,42,.55);
}
.catalog-hero ~ section.bg-blue-600 > a::before {
    content: "OFFICIAL GOOLEE STORE\A Authentic games and learning products, directly from Goolee.";
    max-width: 36rem;
    white-space: pre-line;
    font-family: "DM Sans", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.35;
}
@media (max-width: 767px) {
    .catalog-hero { min-height: auto; padding-top: 8rem !important; padding-bottom: 5rem !important; }
    main > section:not(.catalog-hero) { padding-top: 5rem; padding-bottom: 5rem; }

    .catalog-motion {
        transform: translateY(18px) scale(.985);
        transition-duration: .6s;
    }

    .catalog-motion.is-visible {
        transform: none;
    }

    .category-store-section .store-panel img {
        border-top: 1px solid rgba(215, 174, 70, .35);
        border-left: 0;
    }

    /* Compact store promotion on category pages */
    .catalog-hero ~ section.bg-blue-600 {
        padding: 3rem 1rem !important;
    }

    .catalog-hero ~ section.bg-blue-600 > a {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.75rem;
        width: 100%;
        min-height: auto;
        padding: 2rem;
        border-radius: 1rem;
        font-size: 0;
    }

    .catalog-hero ~ section.bg-blue-600 > a::before {
        content: "OFFICIAL GOOLEE STORE";
        max-width: 100%;
        font-size: 1.35rem;
        line-height: 1.45;
    }

    .catalog-hero ~ section.bg-blue-600 > a::after {
        content: "Visit official store \2197";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.9rem 1.25rem;
        border-radius: 0.5rem;
        background: #1d3557;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.25rem;
        text-align: center;
    }
}

/* Shared navy-and-gold controls across the product family */
main .text-blue-600,
main .text-brand-700 {
    color: #9a6818 !important;
}

main .bg-blue-600 {
    background-color: #1d3557 !important;
}

main .bg-blue-600:hover,
main .hover\:bg-blue-700:hover {
    background-color: #0b2a66 !important;
}

main .border-blue-300,
main .border-blue-400,
main .border-blue-500 {
    border-color: #d7ae46 !important;
}

main .text-blue-200 {
    color: #f3dfae !important;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-motion,
    .catalog-motion.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}