/* ==========================================================================
   GadgetGhor — components.css  (organized, de-duplicated)

   TABLE OF CONTENTS
   -----------------
   00. SHARED ANIMATIONS
   01. GLOBAL / SHARED COMPONENTS
       Buttons · Chips · Form Controls · Badges · Skeleton · Toast ·
       Breadcrumbs · Section Head · Page Hero · Count Badge · Back Link
   02. DEVICE CARD
   03. SEARCH SUGGESTIONS
   04. LAYOUT — AD BANNERS
   05. LAYOUT — FLOATING ACTION BUTTONS + BACK TO TOP
   06. LAYOUT — COMPARE BAR
   07. LAYOUT — LOCATION PROMPT
   08. HOME PAGE
   09. DEVICE LIST / ADVANCED SEARCH
   10. LIST PAGES (Toolbar, View Toggle, Table)
   11. COMPARE PAGE / MODAL (basic table, enhanced table, insights, cards, print)
   12. DEVICE DETAIL (Hero, Specs, User Reviews, Similar Devices)
   13. BRANDS LIST + BRAND DETAIL
   14. CATEGORIES
   15. NEWS LIST
   16. NEWS / POST DETAIL (+ Comments)
   17. REVIEWS LIST
   18. ABOUT
   19. CONTACT
   20. CONTENT PAGES (Advertise, Terms, Privacy)
   21. ERROR PAGE
   22. SHOPS + SERVICE CENTERS
   23. TRENDING
   24. UPCOMING DEVICES
   25. SHORT LINKS
   26. PRICE BANDS

   NOTE: keyframes ggFadeDown, ggFadeUp, ggShimmer, ggToastIn, ggScaleIn,
   ggBounce and ggPulse are used here but defined in your base/layout CSS.
   ========================================================================== */


/* ==========================================================================
   00. SHARED ANIMATIONS
   ========================================================================== */
@keyframes ggSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   01. GLOBAL / SHARED COMPONENTS
   ========================================================================== */

/* ---- Buttons ---- */
.gg-btn {
    --gg-btn-bg: var(--gg-primary);
    --gg-btn-fg: #ffffff;
    --gg-btn-hover: var(--gg-primary-dark);
    padding: .6rem 1.15rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .92rem;
    border: 0;
    background: var(--gg-btn-bg);
    color: var(--gg-btn-fg);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
    line-height: 1.1;
}

    .gg-btn:hover {
        background: var(--gg-btn-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(99,102,241,.35);
    }

    .gg-btn:active {
        transform: translateY(0);
    }

    .gg-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.gg-btn-outline {
    background: transparent;
    color: var(--gg-primary);
    border: 1.5px solid var(--gg-primary);
}

    .gg-btn-outline:hover {
        background: rgba(99,102,241,.08);
        color: var(--gg-primary-dark);
        box-shadow: none;
    }

.gg-btn-ghost {
    background: rgba(99,102,241,.08);
    color: var(--gg-primary);
}

    .gg-btn-ghost:hover {
        background: rgba(99,102,241,.16);
        box-shadow: none;
    }

.gg-btn-sm {
    padding: .4rem .8rem;
    font-size: .82rem;
    border-radius: 10px;
}

.gg-btn-lg {
    padding: .85rem 1.5rem;
    font-size: 1rem;
}

/* ---- Chips ---- */
.gg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.gg-chip {
    padding: .38rem .85rem;
    background: var(--gg-card-bg);
    border: 1px solid rgba(15,23,42,.1);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--gg-text);
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
}

    .gg-chip:hover {
        border-color: var(--gg-primary);
        color: var(--gg-primary);
        background: rgba(99,102,241,.06);
    }

    .gg-chip.is-active {
        background: var(--gg-primary);
        color: #fff;
        border-color: var(--gg-primary);
    }

    .gg-chip i {
        font-size: .9rem;
    }

.gg-sort-chips {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .5rem 0;
}

/* ---- Form Controls ---- */
.gg-input,
.gg-select {
    width: 100%;
    padding: .65rem .9rem;
    border-radius: 12px;
    border: 1.5px solid rgba(15,23,42,.1);
    background: var(--gg-card-bg);
    color: var(--gg-text);
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
}

    .gg-input:focus,
    .gg-select:focus {
        outline: none;
        border-color: var(--gg-primary);
        box-shadow: 0 0 0 4px rgba(99,102,241,.15);
    }

.gg-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(99,102,241,.2);
    border-radius: 4px;
    outline: none;
}

    .gg-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--gg-primary);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(99,102,241,.5);
    }

    .gg-range::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 50%;
        background: var(--gg-primary);
        cursor: pointer;
    }

/* ---- Badges ---- */
.gg-badge-discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: #fff;
    padding: .22rem .55rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(239,68,68,.35);
}

.gg-badge-sponsored {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    padding: .22rem .55rem;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 4px 12px rgba(245,158,11,.35);
}

.gg-badge-status {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
}

    .gg-badge-status.is-coming {
        background: #fef3c7;
        color: #92400e;
    }

    .gg-badge-status.is-avail {
        background: #d1fae5;
        color: #065f46;
    }

    .gg-badge-status.is-rumor {
        background: #fee2e2;
        color: #991b1b;
    }

/* ---- Skeleton Loader ---- */
.gg-skel {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: ggShimmer 1.4s infinite;
    border-radius: 8px;
}

[data-theme="dark"] .gg-skel {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
}

.gg-skel-card {
    height: 320px;
    border-radius: var(--gg-radius);
}

.gg-skel-line {
    height: 12px;
    margin-bottom: .5rem;
}

    .gg-skel-line.short {
        width: 60%;
    }

/* ---- Toast ---- */
.gg-toast-wrap {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.gg-toast {
    background: var(--gg-text);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 500;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: .5rem;
    pointer-events: auto;
    animation: ggToastIn .3s cubic-bezier(.2,.9,.3,1);
}

    .gg-toast.gg-toast-success {
        background: #10b981;
    }

    .gg-toast.gg-toast-error {
        background: #ef4444;
    }

    .gg-toast.gg-toast-info {
        background: var(--gg-primary);
    }

/* ---- Breadcrumbs ---- */
.gg-breadcrumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--gg-muted);
    padding: .75rem 0;
}

    .gg-breadcrumbs a {
        color: var(--gg-muted);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

        .gg-breadcrumbs a:hover {
            color: var(--gg-primary);
        }

    .gg-breadcrumbs i {
        font-size: .7rem;
    }

    .gg-breadcrumbs span {
        color: var(--gg-text);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 280px;
    }

/* ---- Section Head ---- */
.gg-section {
    margin-bottom: 2.5rem;
}

.gg-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

    .gg-section-head h2 {
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

/* ---- Generic Page Hero ---- */
.gg-page-hero {
    padding: 3rem 0 2rem;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.04));
    margin-bottom: 2rem;
}

    .gg-page-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        font-weight: 900;
        margin: .5rem 0;
    }

    .gg-page-hero p {
        color: var(--gg-muted);
        max-width: 640px;
    }

/* ---- Count Badge ---- */
.gg-count-badge {
    display: inline-block;
    background: rgba(99,102,241,.12);
    color: var(--gg-primary);
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

/* ---- Back Link ---- */
.gg-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--gg-muted);
    text-decoration: none;
    font-size: .85rem;
    margin-bottom: .5rem;
    transition: color .15s;
}

    .gg-back-link:hover {
        color: var(--gg-primary);
    }


/* ==========================================================================
   02. DEVICE CARD
   ========================================================================== */
.gg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    border: 1px solid rgba(15,23,42,.05);
}

    .gg-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display: grid;
    place-items: center;
    padding: 1rem;
}

    .gg-card-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform .5s cubic-bezier(.2,.9,.3,1);
    }

.gg-card:hover .gg-card-img img {
    transform: scale(1.08);
}

.gg-card-body {
    padding: .85rem 1rem .5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.gg-brand {
    font-size: .72rem;
    color: var(--gg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.gg-device-name {
    font-weight: 700;
    color: var(--gg-text);
    text-decoration: none;
    font-size: .98rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .gg-device-name:hover {
        color: var(--gg-primary);
    }

.gg-price {
    font-weight: 800;
    color: var(--gg-primary);
    font-size: 1.05rem;
    margin-top: .15rem;
}

.gg-price-original {
    font-size: .82rem;
    color: var(--gg-muted);
    text-decoration: line-through;
    margin-left: .35rem;
    font-weight: 500;
}

.gg-rating {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--gg-muted);
}

.gg-card-actions {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
}

/* Wishlist button + view count */
.gg-wishlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border: 0;
    border-radius: 999px;
    padding: .35rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 3;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

    .gg-wishlist-btn:hover {
        transform: scale(1.06);
    }

    .gg-wishlist-btn.is-wishlisted {
        color: #ef4444;
        background: #fff;
    }

        .gg-wishlist-btn.is-wishlisted i {
            animation: ggHeartPop .4s;
        }

    .gg-wishlist-btn.pulse {
        animation: ggWishPulse .4s;
    }

    .gg-wishlist-btn:disabled {
        opacity: .6;
    }

@keyframes ggHeartPop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ggWishPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239,68,68,.6);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(239,68,68,0);
    }
}

.gg-view-count {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(15,23,42,.7);
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    z-index: 3;
}

@media (max-width: 576px) {
    .gg-card-actions {
        flex-direction: column;
    }

        .gg-card-actions .btn {
            width: 100%;
        }
}


/* ==========================================================================
   03. SEARCH SUGGESTIONS  (Header search box)
   ========================================================================== */
.gg-search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    border: 1px solid rgba(15,23,42,.06);
}

    .gg-search-suggest.show {
        display: block;
        animation: ggFadeDown .18s ease;
    }

.gg-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
    border-bottom: 1px solid rgba(15,23,42,.04);
}

    .gg-suggest-item:last-child {
        border-bottom: 0;
    }

    .gg-suggest-item:hover,
    .gg-suggest-item.is-active {
        background: rgba(99,102,241,.08);
        color: var(--gg-primary);
    }

    .gg-suggest-item img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        border-radius: 8px;
        background: #f1f5f9;
    }

    .gg-suggest-item .gg-suggest-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .gg-suggest-item .gg-suggest-name {
        font-weight: 600;
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gg-suggest-item .gg-suggest-meta {
        font-size: .75rem;
        color: var(--gg-muted);
    }

    .gg-suggest-item .gg-suggest-price {
        font-weight: 700;
        color: var(--gg-primary);
        font-size: .85rem;
        white-space: nowrap;
    }

.gg-suggest-loading,
.gg-suggest-empty,
.gg-suggest-error {
    padding: 12px 14px;
    color: #64748b;
    font-size: .85rem;
}

.gg-suggest-empty {
    text-align: center;
}

.gg-suggest-loader {
    padding: 1rem;
    text-align: center;
}

    .gg-suggest-loader .spinner-border {
        width: 1.25rem;
        height: 1.25rem;
        border-width: 2px;
    }


/* ==========================================================================
   04. LAYOUT — AD BANNERS  (Header, Footer, Strip, Sidebar, Inline)
   ========================================================================== */

/* ---- Shared tags ---- */
.gg-banner-sponsored-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .6rem;
    padding: .18rem .45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.gg-ad-label {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: .6rem;
    padding: 2px 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---- Header banner ---- */
.gg-banner-header {
    background: rgba(99,102,241,.04);
    border-bottom: 1px solid rgba(15,23,42,.06);
    padding: .5rem 0;
}

.gg-banner-header-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.gg-banner-header-link {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s;
    width: 100%;
}

    .gg-banner-header-link:hover {
        transform: translateY(-1px);
    }

    .gg-banner-header-link img {
        display: block;
        width: 100%;
        height: 84px;
        object-fit: cover;
        border-radius: 12px;
    }

.gg-banner-header-full {
    width: 100%;
}

    .gg-banner-header-full img {
        height: 100px;
        object-fit: cover;
    }

/* ---- Footer banner ---- */
.gg-banner-footer-wrap {
    margin-top: 1rem;
}

.gg-banner-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    background: rgba(99,102,241,.04);
    padding: 1rem 0;
    margin-top: 1rem;
}

.gg-banner-footer-item {
    display: block;
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
}

    .gg-banner-footer-item img {
        width: 100%;
        display: block;
    }

.gg-banner-footer-link {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s;
}

    .gg-banner-footer-link:hover {
        transform: translateY(-2px);
    }

    .gg-banner-footer-link img {
        display: block;
        width: 100%;
        height: 90px;
        object-fit: cover;
        border-radius: 12px;
    }

/* ---- Horizontal strip ---- */
.gg-banner-strip-wrap {
    margin: .75rem 0;
}

.gg-banner-strip {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .25rem;
    margin-bottom: 1rem;
}

    .gg-banner-strip::-webkit-scrollbar {
        display: none;
    }

.gg-banner-link {
    flex: 0 0 auto;
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
    transition: transform .25s;
}

    .gg-banner-link:hover {
        transform: translateY(-2px) scale(1.01);
    }

    .gg-banner-link img {
        display: block;
        max-height: 140px;
        width: auto;
        border-radius: var(--gg-radius);
    }

/* ---- Sidebar ---- */
.gg-banner-sidebar {
    position: relative;
}

.gg-banner-side {
    display: block;
    position: relative;
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
    margin-bottom: .75rem;
}

    .gg-banner-side img {
        width: 100%;
        display: block;
    }

/* ---- Inline ---- */
.gg-banner-inline {
    margin: 1.25rem 0;
    display: flex;
    justify-content: center;
}

.gg-banner-inline-item {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    transition: transform .25s;
    max-width: 100%;
}

    .gg-banner-inline-item:hover {
        transform: translateY(-2px);
    }

    .gg-banner-inline-item img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
    }

.gg-banner-inline .gg-ad-label {
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.6);
    font-size: .6rem;
    letter-spacing: .06em;
    padding: .18rem .5rem;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

@media (max-width: 767.98px) {
    .gg-banner-header-split {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .gg-banner-header-link img {
        height: 60px;
    }

    .gg-banner-header-full img {
        height: 70px;
    }

    .gg-banner-footer-link img {
        height: 70px;
    }
}


/* ==========================================================================
   05. LAYOUT — FLOATING ACTION BUTTONS + BACK TO TOP
   ========================================================================== */
.gg-fab-stack {
    position: fixed;
    right: 20px;
    bottom: 88px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1040;
    pointer-events: none;
    transition: opacity .3s ease;
}

    .gg-fab-stack > * {
        pointer-events: auto;
    }

/* Hide FABs while the boot loader is active */
body:has(#ggBootLoader:not(.is-hidden)) .gg-fab-stack {
    opacity: 0;
    pointer-events: none;
}

/* .gg-fab starts hidden; shown by adding .is-visible */
.gg-fab {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 8px 24px rgba(99,102,241,.35), 0 2px 6px rgba(15,23,42,.1);
    transition: transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease, opacity .3s ease;
    opacity: 0;
    transform: translateY(20px) scale(.85);
    overflow: visible;
}

    .gg-fab.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .gg-fab:hover {
        transform: translateY(-3px) scale(1.08);
        box-shadow: 0 14px 34px rgba(99,102,241,.45), 0 4px 12px rgba(15,23,42,.15);
    }

    .gg-fab:active {
        transform: translateY(-1px) scale(1.02);
    }

/* Back-to-top (inside FAB stack) */
.gg-fab-top {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    opacity: 0;
    transform: translateY(20px) scale(.85);
    pointer-events: none;
}

    .gg-fab-top.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .gg-fab-top.is-scrolling i {
        animation: ggSpin 1s linear infinite;
    }

    .gg-fab-top.is-visible::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139,92,246,.5), transparent 70%);
        z-index: -1;
        animation: ggPulseGlow 2.4s ease-in-out infinite;
    }

    .gg-fab-top:hover .gg-fab-ring {
        opacity: 1;
        animation: ggSpin 1s linear infinite;
    }

.gg-fab-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255,255,255,.9);
    opacity: 0;
    transition: opacity .2s;
}

@keyframes ggPulseGlow {
    0%, 100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.2);
        opacity: .25;
    }
}

.gg-fab-chat {
    background: linear-gradient(135deg, #25D366, #128C7E);
}
/* WhatsApp */
.gg-fab-compare {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}
    /* Compare */
    .gg-fab-compare .gg-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ef4444;
        color: #fff;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        font-size: .7rem;
        font-weight: 800;
        display: grid;
        place-items: center;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(239,68,68,.4);
    }

/* Stand-alone back-to-top button (shifts up when compare bar is visible) */
.gg-fab-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 0 8px 24px rgba(99,102,241,.4), 0 2px 6px rgba(15,23,42,.1);
    z-index: 1040; /* above compare bar (1030) */
    opacity: 0;
    transform: translateY(20px) scale(.85);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease, bottom .35s cubic-bezier(.2,.9,.3,1);
}

    .gg-fab-top-btn.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .gg-fab-top-btn:hover {
        transform: translateY(-3px) scale(1.08);
        box-shadow: 0 14px 34px rgba(99,102,241,.5), 0 4px 12px rgba(15,23,42,.15);
    }

    .gg-fab-top-btn:active {
        transform: translateY(-1px) scale(1.02);
    }

    .gg-fab-top-btn.is-scrolling i {
        animation: ggSpin 1s linear infinite;
    }

.gg-compare-bar.show ~ .gg-fab-top-btn,
body:has(.gg-compare-bar.show) .gg-fab-top-btn {
    bottom: 100px !important;
}

@media (max-width: 575.98px) {
    .gg-fab-stack {
        right: 14px;
        bottom: 80px;
        gap: 10px;
    }

    .gg-fab {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .gg-fab-top-btn {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
        font-size: .95rem;
    }

    body:has(.gg-compare-bar.show) .gg-fab-top-btn {
        bottom: 88px !important;
    }
}


/* ==========================================================================
   06. LAYOUT — COMPARE BAR
   ========================================================================== */
.gg-compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gg-card-bg, #fff);
    box-shadow: 0 -4px 24px rgba(0,0,0,.1);
    padding: .75rem 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.9,.3,1);
    z-index: 1030;
    pointer-events: none;
    border-top: 1px solid rgba(15,23,42,.06);
}

    .gg-compare-bar.show {
        transform: translateY(0);
        pointer-events: auto;
    }

.gg-compare-bar-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.gg-compare-bar-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--gg-primary, #6366f1);
    flex-shrink: 0;
}

    .gg-compare-bar-label i {
        font-size: 1.05rem;
    }

.gg-compare-bar-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--gg-primary, #6366f1);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.gg-compare-items {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}

    .gg-compare-items .badge {
        font-size: .78rem;
        padding: .4rem .7rem;
        font-weight: 600;
    }

        .gg-compare-items .badge i[data-remove] {
            opacity: .7;
            transition: opacity .15s;
        }

            .gg-compare-items .badge i[data-remove]:hover {
                opacity: 1;
            }

.gg-compare-bar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.gg-compare-bar-clear {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    background: transparent;
    border: 1.5px solid rgba(15,23,42,.1);
    border-radius: 10px;
    color: var(--gg-muted, #64748b);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

    .gg-compare-bar-clear:hover {
        background: rgba(239,68,68,.08);
        border-color: rgba(239,68,68,.3);
        color: #ef4444;
    }

.gg-compare-bar-go {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
    font-weight: 700;
    padding: .5rem 1rem;
}

    .gg-compare-bar-go:hover {
        box-shadow: 0 6px 20px rgba(99,102,241,.5) !important;
    }

.gg-compare-bar-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(15,23,42,.06);
    color: var(--gg-muted, #64748b);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, color .15s, transform .15s;
}

    .gg-compare-bar-close:hover {
        background: rgba(239,68,68,.12);
        color: #ef4444;
        transform: rotate(90deg);
    }

@media (max-width: 767.98px) {
    .gg-compare-bar {
        padding: .65rem 0;
    }

    .gg-compare-bar-inner {
        gap: .5rem;
    }

    .gg-compare-bar-label span:not(.gg-compare-bar-count) {
        display: none;
    }

    .gg-compare-items {
        order: 3;
        flex: 1 1 100%;
    }

    .gg-compare-bar-actions {
        margin-left: auto;
    }

    .gg-compare-bar-close {
        width: 34px;
        height: 34px;
    }
}


/* ==========================================================================
   07. LAYOUT — LOCATION PROMPT
       Desktop: bottom-right · Tablet/Mobile: centered bottom
   ========================================================================== */
.gg-location-prompt {
    position: fixed;
    left: 50%;
    bottom: 24px;
    padding: 1rem;
    width: min(92vw, 520px);
    z-index: 1060;
    opacity: 0;
    transform: translate(-50%, 150%);
    transition: opacity .35s ease, transform .4s cubic-bezier(.2,.9,.3,1);
    pointer-events: none;
}

    .gg-location-prompt.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

.gg-location-card {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    background: var(--gg-card-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
    padding: .65rem .75rem;
    text-align: center;
    border: 1px solid rgba(99,102,241,.15);
}

.gg-location-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--gg-muted);
    font-size: .75rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s;
}

    .gg-location-close:hover {
        background: rgba(15,23,42,.06);
    }

/* Compact inline layout */
.gg-location-inline {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-right: 1.5rem;
}

.gg-location-icon-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
    animation: ggPulse 2.4s ease-in-out infinite;
}

.gg-location-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

    .gg-location-text strong {
        display: block;
        font-size: .88rem;
        color: var(--gg-text);
        margin-bottom: 2px;
    }

    .gg-location-text small {
        font-size: .74rem;
        color: var(--gg-muted);
    }

.gg-location-actions-sm {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

/* Legacy (large card) pieces */
.gg-location-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin: 0 auto .75rem;
    animation: ggPulse 2s ease-in-out infinite;
}

.gg-location-card h5 {
    font-weight: 800;
    margin-bottom: .5rem;
}

.gg-location-msg {
    font-size: .88rem;
    color: var(--gg-muted);
    margin-bottom: .5rem;
}

.gg-location-msg-bn {
    font-size: .82rem;
    color: var(--gg-muted);
    margin-bottom: 1rem;
    font-family: 'Hind Siliguri', sans-serif;
}

.gg-location-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.gg-location-privacy {
    font-size: .72rem;
    color: var(--gg-muted);
    margin: 0;
}

    .gg-location-privacy a {
        color: var(--gg-primary);
    }

/* Desktop */
@media (min-width: 992px) {
    .gg-location-prompt {
        right: 24px;
        bottom: 24px;
        left: auto;
        width: 380px;
        max-width: calc(100vw - 48px);
        transform: translateY(30px);
    }

        .gg-location-prompt.is-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .gg-location-prompt {
        left: 50%;
        right: auto;
        bottom: 24px;
        transform: translate(-50%, 30px);
        width: 480px;
        max-width: calc(100vw - 32px);
    }

        .gg-location-prompt.is-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }
}
/* Mobile */
@media (max-width: 575.98px) {
    .gg-location-prompt {
        left: 50%;
        right: auto;
        bottom: 16px;
        transform: translate(-50%, 30px);
        width: calc(100vw - 24px);
        max-width: 420px;
    }

        .gg-location-prompt.is-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }

    .gg-location-card {
        padding: .5rem .65rem;
    }

    .gg-location-inline {
        gap: .5rem;
        padding-right: 1.25rem;
    }

    .gg-location-icon-sm {
        width: 34px;
        height: 34px;
        font-size: .9rem;
    }

    .gg-location-text strong {
        font-size: .82rem;
    }

    .gg-location-text small {
        font-size: .68rem;
    }

    .gg-location-actions-sm .gg-btn {
        padding: .3rem .55rem;
        font-size: .72rem;
    }
}


/* ==========================================================================
   08. HOME PAGE
   ========================================================================== */

/* ---- Hero ---- */
.gg-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05));
    border-radius: var(--gg-radius);
    padding: 2.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.gg-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(99,102,241,.15);
    color: var(--gg-primary);
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.gg-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 .75rem;
    line-height: 1.1;
}

.gg-gradient-text {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gg-hero p {
    color: var(--gg-muted);
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

.gg-hero-visual {
    position: relative;
    height: 260px;
}

.gg-hero-card {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: var(--gg-card-bg);
    box-shadow: var(--gg-shadow-lg);
    font-size: 3rem;
    color: var(--gg-primary);
    animation: ggFloat 4s ease-in-out infinite;
}

.gg-hero-card-1 {
    top: 20px;
    left: 0;
    animation-delay: 0s;
    color: #6366f1;
}

.gg-hero-card-2 {
    top: 100px;
    left: 110px;
    animation-delay: .6s;
    color: #ec4899;
}

.gg-hero-card-3 {
    top: 40px;
    left: 220px;
    animation-delay: 1.2s;
    color: #f59e0b;
}

@keyframes ggFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@media (max-width: 768px) {
    .gg-hero {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .gg-hero-visual {
        display: none;
    }
}

/* ---- Category Cards ---- */
.gg-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.1rem .75rem;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    text-decoration: none;
    color: var(--gg-text);
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-cat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
        color: var(--gg-primary);
    }

    .gg-cat-card span {
        font-weight: 600;
        font-size: .85rem;
        text-align: center;
    }

.gg-cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cat-color) 15%, transparent);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--cat-color);
}

/* ---- Brands Strip ---- */
.gg-brands-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .75rem;
}

.gg-brand-tile {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--gg-text);
    box-shadow: var(--gg-shadow);
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-brand-tile:hover {
        transform: translateY(-3px);
        box-shadow: var(--gg-shadow-lg);
        color: var(--gg-primary);
    }

    .gg-brand-tile img {
        width: 56px;
        height: 56px;
        object-fit: contain;
    }

    .gg-brand-tile span {
        font-size: .78rem;
        font-weight: 600;
        text-align: center;
    }


/* ==========================================================================
   09. DEVICE LIST / ADVANCED SEARCH PAGE
   ========================================================================== */
.gg-filter-panel {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.25rem;
    box-shadow: var(--gg-shadow);
    position: sticky;
    top: 130px;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
}

    .gg-filter-head h5 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

.gg-filter-group {
    margin-bottom: 1rem;
}

.gg-filter-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gg-muted);
    margin-bottom: .4rem;
}

.gg-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gg-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gg-muted);
}

    .gg-empty-state i {
        font-size: 3.5rem;
        color: var(--gg-primary);
        margin-bottom: 1rem;
        display: block;
    }

    .gg-empty-state h4 {
        font-weight: 700;
    }

@media (max-width: 991px) {
    .gg-filter-panel {
        position: static;
        margin-bottom: 1rem;
    }
}


/* ==========================================================================
   10. LIST PAGES — Toolbar, View Toggle, Table View
   ========================================================================== */
.gg-list-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--gg-card-bg);
    padding: .75rem 1rem;
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    margin-bottom: 1rem;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-toolbar-search {
    flex: 1 1 240px;
    position: relative;
    display: flex;
    align-items: center;
}

    .gg-toolbar-search i {
        position: absolute;
        left: .85rem;
        color: var(--gg-muted);
    }

    .gg-toolbar-search input {
        width: 100%;
        padding: .6rem .85rem .6rem 2.35rem;
        border-radius: 12px;
        border: 1.5px solid rgba(15,23,42,.1);
        background: var(--gg-bg);
        font-size: .9rem;
        color: var(--gg-text);
    }

        .gg-toolbar-search input:focus {
            outline: none;
            border-color: var(--gg-primary);
            box-shadow: 0 0 0 4px rgba(99,102,241,.15);
        }

.gg-view-toggle {
    display: inline-flex;
    background: rgba(99,102,241,.08);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

.gg-view-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--gg-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}

    .gg-view-btn:hover {
        background: rgba(99,102,241,.15);
        color: var(--gg-primary);
    }

    .gg-view-btn.is-active {
        background: var(--gg-primary);
        color: #fff;
    }

.gg-table-wrap {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
}

.gg-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    .gg-data-table thead th {
        background: rgba(99,102,241,.06);
        padding: .75rem 1rem;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--gg-muted);
        font-weight: 700;
        border-bottom: 1px solid rgba(15,23,42,.06);
        text-align: left;
    }

    .gg-data-table tbody td {
        padding: .65rem 1rem;
        border-bottom: 1px solid rgba(15,23,42,.04);
        vertical-align: middle;
    }

    .gg-data-table tbody tr:hover {
        background: rgba(99,102,241,.04);
    }

.gg-table-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    background: #f1f5f9;
}


/* ==========================================================================
   11. COMPARE PAGE / MODAL
   ========================================================================== */

/* ---- Viewport + modal ---- */
.gg-compare-viewport {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    padding: .5rem;
    min-height: 400px;
}

.gg-compare-modal .modal-content {
    border-radius: 0;
    background: var(--gg-bg);
    animation: ggScaleIn .35s cubic-bezier(.2,.9,.3,1);
}

.gg-compare-modal .modal-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: 0;
    padding: 1rem 1.5rem;
}

.gg-compare-modal .modal-title {
    font-weight: 700;
}

.gg-compare-modal .btn-close {
    filter: invert(1) brightness(2);
}

/* ---- Basic compare table ---- */
.gg-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
}

    .gg-compare-table thead th {
        background: linear-gradient(180deg, rgba(99,102,241,.06), transparent);
        position: sticky;
        top: 0;
        z-index: 5;
        text-align: center;
        padding: 1rem .75rem;
        border-bottom: 2px solid rgba(99,102,241,.2);
        min-width: 180px;
    }

        .gg-compare-table thead th:first-child {
            text-align: left;
            min-width: 140px;
            background: transparent;
            border-bottom: 0;
        }

    .gg-compare-table thead img {
        width: 90px;
        height: 90px;
        object-fit: contain;
        margin-bottom: .5rem;
    }

    .gg-compare-table tbody th.gg-group-row {
        background: rgba(99,102,241,.06);
        color: var(--gg-primary);
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: .6rem .85rem;
        font-weight: 700;
    }

    .gg-compare-table tbody td,
    .gg-compare-table tbody th {
        padding: .65rem .85rem;
        border-bottom: 1px solid rgba(15,23,42,.05);
        vertical-align: top;
    }

    .gg-compare-table tbody th {
        font-weight: 500;
        color: var(--gg-muted);
        font-size: .85rem;
    }

    .gg-compare-table tbody tr:hover td,
    .gg-compare-table tbody tr:hover th {
        background: rgba(99,102,241,.035);
    }

    .gg-compare-table .gg-winner {
        background: rgba(16,185,129,.08);
        color: #059669;
        font-weight: 700;
        border-radius: 6px;
        padding: .35rem .55rem;
    }

    .gg-compare-table .gg-loser {
        color: var(--gg-muted);
        font-size: .85rem;
    }

.gg-compare-sticky-col {
    position: sticky;
    left: 0;
    background: var(--gg-card-bg);
    z-index: 3;
}

/* ---- Basic insights panel ---- */
.gg-insights {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08));
    border-radius: var(--gg-radius);
    padding: 1rem 1.15rem;
    border: 1px solid rgba(99,102,241,.15);
}

    .gg-insights h5 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 .75rem;
        display: flex;
        align-items: center;
        gap: .4rem;
        color: var(--gg-primary);
    }

    .gg-insights ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .gg-insights li {
        font-size: .88rem;
        line-height: 1.5;
        padding-left: 1.4rem;
        position: relative;
    }

        .gg-insights li::before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--gg-primary);
            font-weight: 700;
        }

/* ---- Enhanced compare table ---- */
.gg-compare-wrapper {
    padding: 1rem;
}

.gg-compare-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .65rem 1rem;
    background: rgba(99,102,241,.04);
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: .78rem;
    color: var(--gg-muted);
}

.gg-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .gg-legend-item i {
        color: #f59e0b;
    }

.gg-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(15,23,42,.1);
}

.gg-legend-winner {
    background: rgba(16,185,129,.2);
}

.gg-legend-diff {
    background: rgba(99,102,241,.08);
}

.gg-compare-table-wrap {
    background: var(--gg-card-bg);
    border-radius: 16px;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.06);
    overflow: hidden;
    position: relative;
}

.gg-compare-table-enhanced {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    background: var(--gg-card-bg);
}

    .gg-compare-table-enhanced thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--gg-card-bg);
        box-shadow: 0 2px 8px rgba(15,23,42,.06);
    }

        .gg-compare-table-enhanced thead th {
            padding: 1rem .75rem;
            vertical-align: top;
            background: var(--gg-card-bg);
            border-bottom: 2px solid rgba(99,102,241,.15);
            min-width: 180px;
        }

.gg-compare-corner {
    min-width: 140px !important;
    width: 140px;
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04)) !important;
    border-bottom: 2px solid rgba(99,102,241,.15) !important;
}

/* Header cards */
.gg-compare-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.gg-compare-header-img {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    display: grid;
    place-items: center;
    padding: .5rem;
    margin-bottom: .35rem;
    overflow: hidden;
}

    .gg-compare-header-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gg-compare-header-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--gg-text);
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .gg-compare-header-name:hover {
        color: var(--gg-primary);
    }

.gg-compare-header-price {
    font-weight: 800;
    color: var(--gg-primary);
    font-size: .92rem;
}

.gg-compare-header-rating {
    display: flex;
    align-items: center;
    gap: .15rem;
    color: #f59e0b;
    font-size: .78rem;
}

.gg-compare-rating-val {
    color: var(--gg-muted);
    margin-left: .35rem;
    font-size: .75rem;
}

.gg-compare-header-badges {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .35rem;
}

.gg-compare-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.gg-badge-cheap {
    background: rgba(16,185,129,.15);
    color: #059669;
}

.gg-badge-rated {
    background: rgba(245,158,11,.15);
    color: #d97706;
}

/* Group row */
.gg-compare-group-row td,
.gg-compare-group-row th {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05)) !important;
    border-top: 1px solid rgba(99,102,241,.12);
    border-bottom: 1px solid rgba(99,102,241,.12);
}

.gg-compare-group-header {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gg-primary);
    font-weight: 800;
    padding: .65rem 1rem !important;
    text-align: left !important;
}

    .gg-compare-group-header i {
        margin-right: .35rem;
    }

/* Spec rows */
.gg-compare-spec-row {
    transition: background .12s;
}

    .gg-compare-spec-row:hover td,
    .gg-compare-spec-row:hover th {
        background: rgba(99,102,241,.03);
    }

.gg-compare-spec-name {
    font-weight: 500;
    font-size: .82rem;
    color: var(--gg-muted);
    padding: .65rem .85rem;
    border-bottom: 1px solid rgba(15,23,42,.04);
    text-align: left;
    vertical-align: top;
    background: rgba(15,23,42,.01);
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 140px;
}

.gg-compare-cell {
    padding: .65rem .85rem;
    border-bottom: 1px solid rgba(15,23,42,.04);
    vertical-align: top;
    text-align: center;
    font-size: .85rem;
    color: var(--gg-text);
    position: relative;
    transition: background .15s;
}

.gg-compare-cell-empty {
    color: var(--gg-muted);
}

.gg-empty-dash {
    color: rgba(15,23,42,.2);
    font-weight: 400;
}

.gg-compare-cell-diff {
    background: rgba(99,102,241,.04);
}

.gg-compare-cell-winner {
    background: rgba(16,185,129,.08);
    color: #059669;
    font-weight: 700;
}

.gg-winner-crown {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: .7rem;
    color: #f59e0b;
    opacity: .85;
}

/* Enhanced insights panel */
.gg-insights-panel {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05));
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid rgba(99,102,241,.15);
    position: sticky;
    top: 100px;
}

.gg-insights-title {
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--gg-primary);
}

.gg-insights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.gg-insight-item {
    background: rgba(255,255,255,.7);
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--gg-text);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    border-left: 3px solid var(--gg-primary);
}

    .gg-insight-item i {
        color: #f59e0b;
        flex-shrink: 0;
        font-size: .85rem;
        margin-top: 2px;
    }

/* Saved/shared compare cards + actions bar + share */
.gg-compare-card {
    background: var(--gg-card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    transition: transform .25s, box-shadow .25s;
}

    .gg-compare-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-compare-card-title {
    font-weight: 700;
    color: var(--gg-text);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .gg-compare-card-title:hover {
        color: var(--gg-primary);
    }

.gg-compare-card-meta {
    display: flex;
    gap: .75rem;
    font-size: .78rem;
    color: var(--gg-muted);
}

    .gg-compare-card-meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

.gg-compare-card-date {
    font-size: .72rem;
    color: var(--gg-muted);
    margin-top: auto;
}

.gg-compare-actions-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--gg-card-bg);
    border-radius: 16px;
    box-shadow: var(--gg-shadow);
}

.gg-share-note {
    font-size: .82rem;
    color: var(--gg-muted);
    padding: 0 0 .5rem;
    text-align: left;
    font-weight: 600;
}

.gg-share-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--gg-card-bg);
    border: 1px solid rgba(16,185,129,.3);
    border-radius: 12px;
    padding: .5rem .75rem;
}

    .gg-share-row i {
        color: #10b981;
        font-size: 1.1rem;
    }

    .gg-share-row input {
        flex: 1;
        border: 0;
        background: transparent;
        font-size: .82rem;
        padding: .25rem .5rem;
        outline: none;
        color: var(--gg-text);
    }

/* Responsive */
@media (max-width: 991.98px) {
    .gg-compare-table-enhanced {
        font-size: .8rem;
    }

        .gg-compare-table-enhanced thead th {
            min-width: 140px;
            padding: .75rem .5rem;
        }

    .gg-compare-header-img {
        width: 64px;
        height: 64px;
    }

    .gg-compare-header-name {
        font-size: .8rem;
    }

    .gg-insights-panel {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .gg-compare-table {
        font-size: .8rem;
    }

        .gg-compare-table thead th {
            min-width: 130px;
            padding: .75rem .5rem;
        }

        .gg-compare-table thead img {
            width: 60px;
            height: 60px;
        }
}

@media (max-width: 575.98px) {
    .gg-compare-wrapper {
        padding: .5rem;
    }

    .gg-compare-legend {
        font-size: .7rem;
        padding: .5rem .65rem;
        gap: .65rem;
    }

    .gg-compare-spec-name {
        font-size: .75rem;
        padding: .5rem .6rem;
        min-width: 100px;
    }

    .gg-compare-cell {
        padding: .5rem .6rem;
        font-size: .78rem;
    }

    .gg-compare-header-img {
        width: 52px;
        height: 52px;
    }

    .gg-compare-header-name {
        font-size: .75rem;
    }

    .gg-compare-header-price {
        font-size: .82rem;
    }
}

/* Dark theme */
[data-theme="dark"] .gg-compare-table-wrap {
    background: var(--gg-card-bg);
    border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .gg-compare-spec-name {
    background: rgba(255,255,255,.02);
    border-bottom-color: rgba(255,255,255,.05);
}

[data-theme="dark"] .gg-compare-cell {
    border-bottom-color: rgba(255,255,255,.05);
}

[data-theme="dark"] .gg-compare-cell-diff {
    background: rgba(99,102,241,.08);
}

[data-theme="dark"] .gg-compare-cell-winner {
    background: rgba(16,185,129,.12);
}

[data-theme="dark"] .gg-insight-item {
    background: rgba(255,255,255,.05);
}

/* Print (compare only) */
@media print {
    body * {
        visibility: hidden;
    }

    #ggCompareBody,
    #ggCompareBody * {
        visibility: visible;
    }

    #ggCompareBody {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20px;
    }

        #ggCompareBody::before {
            content: "DeviceChamp.com — Compare Phones, Laptops & Gadgets in Bangladesh";
            display: block;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            color: #6366f1;
            padding-bottom: 12px;
            margin-bottom: 12px;
            border-bottom: 2px solid #6366f1;
        }

        #ggCompareBody::after {
            content: "Shared from devicechamp.com — Explore. Compare. Choose.";
            display: block;
            text-align: center;
            font-size: 11px;
            color: #64748b;
            margin-top: 20px;
            padding-top: 12px;
            border-top: 1px dashed #94a3b8;
        }
}


/* ==========================================================================
   12. DEVICE DETAIL PAGE
   ========================================================================== */

/* ---- Hero ---- */
.gg-detail-hero {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2rem;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 2rem;
    box-shadow: var(--gg-shadow);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-detail-img-wrap {
    position: relative;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-radius: var(--gg-radius);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.gg-detail-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gg-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(99,102,241,.12);
    color: var(--gg-primary);
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: .75rem;
}

.gg-detail-meta h1 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 .75rem;
}

.gg-detail-price {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.gg-price-lg {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--gg-primary);
}

.gg-detail-rating {
    color: #f59e0b;
    margin-bottom: 1rem;
}

.gg-detail-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gg-detail-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
}

.gg-quick-tile {
    background: rgba(99,102,241,.06);
    border-radius: 12px;
    padding: .65rem .8rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .gg-quick-tile i {
        font-size: 1.5rem;
        color: var(--gg-primary);
    }

    .gg-quick-tile small {
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--gg-muted);
    }

    .gg-quick-tile strong {
        font-size: .88rem;
        font-weight: 700;
    }

/* ---- Spec tabs + list ---- */
.gg-detail-specs {
    margin-top: 1rem;
}

.gg-spec-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    scrollbar-width: thin;
}

.gg-spec-tab {
    flex: 0 0 auto;
    padding: .55rem 1rem;
    background: var(--gg-card-bg);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gg-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: all .15s;
}

    .gg-spec-tab:hover {
        border-color: var(--gg-primary);
        color: var(--gg-primary);
    }

    .gg-spec-tab.is-active {
        background: var(--gg-primary);
        color: #fff;
        border-color: var(--gg-primary);
    }

    /* "All Specs" tab accent */
    .gg-spec-tab[data-target="spec-all"] {
        background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
        border-color: rgba(99,102,241,.25);
        font-weight: 700;
    }

        .gg-spec-tab[data-target="spec-all"].is-active {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            border-color: #6366f1;
            box-shadow: 0 4px 12px rgba(99,102,241,.35);
        }

.gg-spec-group-pane {
    display: none;
}

    .gg-spec-group-pane.is-active {
        display: block;
        animation: ggFadeUp .35s ease;
    }

#spec-all {
    animation: ggFadeUp .35s cubic-bezier(.2,.9,.3,1);
}

.gg-spec-group {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
    scroll-margin-top: 100px; /* sticky header offset for tab anchors */
}

.gg-spec-group-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--gg-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .65rem;
    padding-bottom: .55rem;
    border-bottom: 1px dashed rgba(99,102,241,.25);
}

.gg-spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gg-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed rgba(15,23,42,.06);
    font-size: .88rem;
}

    .gg-spec-row:last-child {
        border-bottom: 0;
    }

.gg-spec-key {
    color: var(--gg-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 130px;
}

.gg-spec-val {
    font-weight: 600;
    text-align: right;
    flex: 1 1 auto;
    word-break: break-word;
}

/* ---- User Reviews section (also provides shared .gg-review-* rules used by Reviews List) ---- */
.gg-reviews-section {
    margin-top: 2rem;
    background: var(--gg-card-bg);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
}

.gg-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
}

    .gg-reviews-head h2,
    .gg-reviews-head h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.gg-review-form-wrap {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: rgba(99,102,241,.05);
    border-radius: 16px;
}

.gg-review-form-msg {
    font-size: .9rem;
}

.gg-star-input {
    display: flex;
    gap: .25rem;
    margin-top: .35rem;
}

.gg-star-btn {
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .15s, transform .15s;
}

    .gg-star-btn:hover,
    .gg-star-btn.is-active {
        color: #f59e0b;
        transform: scale(1.1);
    }

.gg-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gg-review-item {
    background: rgba(99,102,241,.03);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-review-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem;
}

    .gg-review-header time {
        font-size: .78rem;
        color: var(--gg-muted);
        white-space: nowrap;
    }

.gg-review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.gg-review-author {
    flex: 1 1 auto;
    min-width: 0;
}

    .gg-review-author strong {
        display: block;
        font-size: .95rem;
    }

.gg-verified {
    font-size: .7rem;
    color: #10b981;
    margin-left: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

/* Shared by user-review items AND review cards (Section 17) */
.gg-review-body {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
    color: var(--gg-text);
    font-size: .9rem;
    margin: 0 0 .65rem;
    line-height: 1.6;
}

.gg-review-title {
    margin: .25rem 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
}

    .gg-review-title a {
        color: var(--gg-text);
        text-decoration: none;
    }

        .gg-review-title a:hover {
            color: var(--gg-primary);
        }

.gg-review-stars {
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: .1rem;
    font-size: .82rem;
}

    .gg-review-stars span {
        color: var(--gg-muted);
        margin-left: .35rem;
        font-size: .8rem;
    }

.gg-review-pros, .gg-review-cons {
    font-size: .85rem;
    padding: .4rem .65rem;
    border-radius: 8px;
    margin-bottom: .35rem;
}

.gg-review-pros {
    background: rgba(16,185,129,.08);
    color: #047857;
}

.gg-review-cons {
    background: rgba(239,68,68,.08);
    color: #b91c1c;
}

.gg-review-footer {
    margin-top: .65rem;
}

.gg-helpful-btn {
    background: transparent;
    border: 1px solid rgba(99,102,241,.25);
    color: var(--gg-primary);
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: background .15s, color .15s;
}

    .gg-helpful-btn:hover:not(:disabled) {
        background: var(--gg-primary);
        color: #fff;
    }

    .gg-helpful-btn.is-active {
        background: var(--gg-primary);
        color: #fff;
    }

    .gg-helpful-btn:disabled {
        opacity: .6;
    }

.gg-empty-reviews {
    text-align: center;
    padding: 2rem;
    color: var(--gg-muted);
}

    .gg-empty-reviews i {
        font-size: 3rem;
        color: var(--gg-primary);
        display: block;
        margin-bottom: .65rem;
    }

    .gg-empty-reviews h5 {
        font-weight: 700;
        margin-bottom: .35rem;
    }

/* ---- Similar devices rail (Views/Shared/Components/SimilarDevices/Default.cshtml) ---- */
.gg-similar-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
}

.gg-similar-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    position: relative;
}

    .gg-similar-card .gg-similar-compare {
        position: absolute;
        top: 8px;
        right: 8px;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        background: rgba(15,23,42,.75);
        color: #fff;
        display: grid;
        place-items: center;
        opacity: 0;
        transition: opacity .2s;
    }

    .gg-similar-card:hover .gg-similar-compare {
        opacity: 1;
    }

@media (max-width: 768px) {
    .gg-detail-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .gg-price-lg {
        font-size: 1.5rem;
    }
}

@media (max-width: 575px) {
    .gg-similar-card {
        flex-basis: 150px;
    }
}


/* ==========================================================================
   13. BRANDS LIST + BRAND DETAIL
   ========================================================================== */
.gg-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem 1rem;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    text-decoration: none;
    color: var(--gg-text);
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(15,23,42,.04);
    height: 100%;
}

    .gg-brand-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
        color: var(--gg-primary);
    }

    .gg-brand-card h3 {
        font-size: .95rem;
        font-weight: 700;
        margin: 0;
        text-align: center;
    }

.gg-brand-card-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(99,102,241,.06);
    display: grid;
    place-items: center;
    padding: .75rem;
}

    .gg-brand-card-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gg-brand-count {
    font-size: .75rem;
    color: var(--gg-muted);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.gg-brand-hero {
    padding: 2rem 0;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.04));
    margin-bottom: 1.5rem;
}

.gg-brand-hero-logo {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: var(--gg-card-bg);
    display: grid;
    place-items: center;
    padding: 1rem;
    box-shadow: var(--gg-shadow);
}

    .gg-brand-hero-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gg-brand-hero h1 {
    font-size: 1.9rem;
    font-weight: 900;
    margin: 0;
}

.gg-brand-hero p {
    color: var(--gg-muted);
    margin: .35rem 0 0;
}


/* ==========================================================================
   14. CATEGORIES PAGE
   ========================================================================== */
.gg-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.5rem 1rem;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    text-decoration: none;
    color: var(--gg-text);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-cat-tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
        color: var(--cat-color);
    }

    .gg-cat-tile h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        text-align: center;
    }

.gg-cat-tile-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cat-color) 15%, transparent);
    display: grid;
    place-items: center;
    color: var(--cat-color);
    font-size: 2rem;
}

.gg-cat-tile-count {
    font-size: .78rem;
    color: var(--gg-muted);
}

.gg-cat-icon-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cat-color) 15%, transparent);
    color: var(--cat-color);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}


/* ==========================================================================
   15. NEWS LIST PAGE
   ========================================================================== */
.gg-news-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-news-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-news-img {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    overflow: hidden;
    display: block;
}

    .gg-news-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s;
    }

.gg-news-card:hover .gg-news-img img {
    transform: scale(1.05);
}

.gg-news-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--gg-primary);
    color: #fff;
    padding: .22rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gg-news-body {
    padding: .9rem 1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.gg-news-meta {
    display: flex;
    gap: .75rem;
    font-size: .72rem;
    color: var(--gg-muted);
    flex-wrap: wrap;
}

    .gg-news-meta span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

.gg-news-title {
    font-weight: 700;
    font-size: .98rem;
    color: var(--gg-text);
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .gg-news-title:hover {
        color: var(--gg-primary);
    }

.gg-news-summary {
    font-size: .85rem;
    color: var(--gg-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   16. NEWS / POST DETAIL PAGE
   ========================================================================== */
.gg-post-hero {
    margin-bottom: 2rem;
}

.gg-post-hero-content {
    text-align: center;
    margin-bottom: 1.5rem;
}

.gg-post-labels {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gg-post-cat {
    background: var(--gg-primary);
    color: #fff;
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gg-post-brand {
    background: rgba(99,102,241,.12);
    color: var(--gg-primary);
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
}

.gg-post-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 auto 1rem;
    max-width: 860px;
}

.gg-post-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--gg-muted);
}

    .gg-post-meta span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

.gg-post-hero-image {
    margin: 0 auto;
    max-width: 960px;
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow-lg);
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}

    .gg-post-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ---- Content ---- */
.gg-post-content {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 2rem 2.25rem;
    box-shadow: var(--gg-shadow);
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--gg-text);
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-post-content h2 {
        font-size: 1.4rem;
        font-weight: 800;
        margin: 2rem 0 1rem;
        padding-bottom: .5rem;
        border-bottom: 1px dashed rgba(99,102,241,.25);
        color: var(--gg-text);
    }

    .gg-post-content h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin: 1.5rem 0 .75rem;
    }

    .gg-post-content p {
        margin-bottom: 1rem;
    }

    .gg-post-content a {
        color: var(--gg-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .gg-post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin: 1rem 0;
        display: block;
    }

    .gg-post-content ul, .gg-post-content ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    .gg-post-content li {
        margin-bottom: .35rem;
    }

    .gg-post-content blockquote {
        border-left: 4px solid var(--gg-primary);
        padding: .5rem 1rem;
        background: rgba(99,102,241,.06);
        border-radius: 0 8px 8px 0;
        font-style: italic;
        color: var(--gg-muted);
        margin: 1.25rem 0;
    }

    .gg-post-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: .9rem;
    }

        .gg-post-content table th,
        .gg-post-content table td {
            border: 1px solid rgba(15,23,42,.08);
            padding: .5rem .75rem;
        }

        .gg-post-content table th {
            background: rgba(99,102,241,.06);
        }

/* ---- Tags / CTA / Share / Source ---- */
.gg-post-tags {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(15,23,42,.08);
}

    .gg-post-tags i {
        color: var(--gg-muted);
    }

.gg-post-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.06));
    border-radius: var(--gg-radius);
}

    .gg-post-cta h5 {
        font-weight: 800;
        margin: 0 0 .25rem;
    }

    .gg-post-cta p {
        margin: 0;
        color: var(--gg-muted);
        font-size: .9rem;
    }

.gg-post-share {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(15,23,42,.08);
}

    .gg-post-share > span {
        font-weight: 600;
        color: var(--gg-muted);
        margin-right: .25rem;
    }

    .gg-post-share a, .gg-post-share button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(99,102,241,.1);
        color: var(--gg-primary);
        text-decoration: none;
        border: 0;
        cursor: pointer;
        transition: background .15s, transform .15s;
    }

        .gg-post-share a:hover, .gg-post-share button:hover {
            background: var(--gg-primary);
            color: #fff;
            transform: translateY(-2px);
        }

    .gg-post-share button {
        width: auto;
        padding: 0 .9rem;
        border-radius: 12px;
        display: inline-flex;
        gap: .35rem;
        font-size: .85rem;
    }

.gg-post-source {
    margin-top: 1rem;
    font-size: .78rem;
    color: var(--gg-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}

    .gg-post-source a {
        color: var(--gg-primary);
    }

/* ---- Sidebar ---- */
.gg-post-side {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.25rem;
    box-shadow: var(--gg-shadow);
    position: sticky;
    top: 90px;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-side-title {
    font-size: .92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
}

.gg-post-side-item {
    display: flex;
    gap: .75rem;
    padding: .55rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--gg-text);
    transition: background .15s;
    margin-bottom: .35rem;
}

    .gg-post-side-item:hover {
        background: rgba(99,102,241,.08);
        color: var(--gg-primary);
    }

    .gg-post-side-item small {
        color: var(--gg-muted);
        font-size: .72rem;
    }

.gg-post-side-thumb {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eef2ff;
}

    .gg-post-side-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gg-post-side-title {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Comments ---- */
.gg-comments-section {
    margin-top: 2rem;
    background: var(--gg-card-bg);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--gg-shadow);
}

    .gg-comments-section h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

.gg-comment-form {
    background: rgba(99,102,241,.04);
    padding: 1rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
}

.gg-comment-item {
    padding: .75rem 0;
    border-bottom: 1px solid rgba(15,23,42,.05);
}

    .gg-comment-item:last-child {
        border-bottom: 0;
    }

    .gg-comment-item p {
        margin: 0;
        font-size: .88rem;
        line-height: 1.5;
    }

.gg-comment-head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}

    .gg-comment-head time {
        font-size: .72rem;
        color: var(--gg-muted);
    }

@media (max-width: 991px) {
    .gg-post-side {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .gg-post-content {
        padding: 1.25rem;
        font-size: .96rem;
    }

        .gg-post-content h2 {
            font-size: 1.2rem;
        }
}


/* ==========================================================================
   17. REVIEWS LIST PAGE  (shared .gg-review-body/title/stars live in Section 12)
   ========================================================================== */
.gg-review-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    overflow: hidden;
    box-shadow: var(--gg-shadow);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-review-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-review-img {
    position: relative;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    display: grid;
    place-items: center;
    padding: 1rem;
}

    .gg-review-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.gg-review-score {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: .35rem .65rem;
    border-radius: 10px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 800;
}

    .gg-review-score strong {
        font-size: 1.1rem;
    }

    .gg-review-score span {
        font-size: .72rem;
        opacity: .85;
    }

.gg-review-brand {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gg-muted);
    font-weight: 600;
}

.gg-review-verdict {
    font-size: .85rem;
    color: var(--gg-muted);
    margin: .25rem 0 .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.gg-review-actions {
    display: flex;
    gap: .4rem;
    margin-top: .35rem;
}

    .gg-review-actions .gg-btn {
        flex: 1;
        justify-content: center;
    }


/* ==========================================================================
   18. ABOUT PAGE
   ========================================================================== */
.gg-about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.gg-stat-tile {
    background: var(--gg-card-bg);
    padding: 1.5rem 1rem;
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    text-align: center;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-stat-tile strong {
        display: block;
        font-size: 1.9rem;
        font-weight: 900;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .gg-stat-tile span {
        font-size: .85rem;
        color: var(--gg-muted);
    }

.gg-about-block {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.75rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-about-block h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: .5rem;
    }

    .gg-about-block p {
        color: var(--gg-muted);
        margin: 0;
        line-height: 1.6;
    }

.gg-about-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
    color: var(--gg-primary);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: .85rem;
}

.gg-feature-mini {
    background: rgba(99,102,241,.05);
    border-radius: 12px;
    padding: 1rem;
    height: 100%;
}

    .gg-feature-mini i {
        font-size: 1.5rem;
        color: var(--gg-primary);
        display: block;
        margin-bottom: .5rem;
    }

    .gg-feature-mini h6 {
        font-weight: 700;
        margin: 0 0 .35rem;
    }

    .gg-feature-mini p {
        font-size: .85rem;
    }

.gg-team-card {
    background: rgba(99,102,241,.04);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}

    .gg-team-card h6 {
        font-weight: 700;
        margin: 0;
    }

    .gg-team-card small {
        color: var(--gg-muted);
    }

.gg-team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto .75rem;
    font-size: 1.6rem;
}

.gg-cta-strip {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: var(--gg-radius);
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.08));
    text-align: center;
}

    .gg-cta-strip h3 {
        font-weight: 800;
        margin-bottom: .35rem;
    }

    .gg-cta-strip p {
        color: var(--gg-muted);
        margin-bottom: 1rem;
    }


/* ==========================================================================
   19. CONTACT PAGE
   ========================================================================== */

/* ---- 1. Legacy contact cards (used with .gg-page-hero) ---- */
.gg-contact-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.25rem;
    box-shadow: var(--gg-shadow);
    margin-bottom: 1rem;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-contact-card h5 {
        font-weight: 700;
        margin-bottom: .35rem;
    }

    .gg-contact-card p {
        margin: 0;
        color: var(--gg-muted);
        font-size: .9rem;
    }

    .gg-contact-card a {
        color: var(--gg-primary);
        text-decoration: none;
    }

.gg-contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(99,102,241,.12);
    color: var(--gg-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: .75rem;
}

.gg-form-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 2rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-form-card h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

/* ---- 2. Hero ---- */
.gg-contact-hero {
    position: relative;
    padding: 4rem 0 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05));
    isolation: isolate;
}

    .gg-contact-hero::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(circle at 15% 40%, rgba(99,102,241,.18), transparent 55%), radial-gradient(circle at 85% 60%, rgba(139,92,246,.14), transparent 55%), radial-gradient(circle at 50% 100%, rgba(236,72,153,.08), transparent 60%);
        pointer-events: none;
        z-index: 0;
        animation: ggContactHeroDrift 22s ease-in-out infinite alternate;
    }

    .gg-contact-hero::after {
        content: "";
        position: absolute;
        top: 10%;
        right: 8%;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139,92,246,.22), transparent 70%);
        filter: blur(24px);
        pointer-events: none;
        z-index: 0;
        animation: ggContactOrb 12s ease-in-out infinite;
    }

    .gg-contact-hero .container-xxl {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .gg-contact-hero .gg-hero-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .4rem 1rem;
        background: rgba(99,102,241,.12);
        color: var(--gg-primary, #6366f1);
        border: 1px solid rgba(99,102,241,.18);
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        backdrop-filter: blur(6px);
    }

        .gg-contact-hero .gg-hero-pill i {
            font-size: .9rem;
        }

    .gg-contact-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        font-weight: 900;
        margin: 0 0 .65rem;
        letter-spacing: -.02em;
        line-height: 1.1;
    }

    .gg-contact-hero .gg-gradient-text {
        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: ggGradientShift 6s ease-in-out infinite alternate;
    }

    .gg-contact-hero p {
        color: var(--gg-muted, #64748b);
        font-size: 1.05rem;
        margin: 0 auto 2rem;
        max-width: 640px;
    }

@keyframes ggContactHeroDrift {
    from {
        transform: translate3d(0,0,0) scale(1);
    }

    to {
        transform: translate3d(-2%,-1%,0) scale(1.06);
    }
}

@keyframes ggContactOrb {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: .7;
    }

    50% {
        transform: translateY(-24px) scale(1.08);
        opacity: 1;
    }
}

@keyframes ggGradientShift {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

/* ---- 3. Quick contact tiles ---- */
.gg-contact-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 820px;
    margin: 0 auto;
}

.gg-contact-quick-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: var(--gg-card-bg, #fff);
    border-radius: 16px;
    text-decoration: none;
    color: var(--gg-text, #0f172a);
    box-shadow: 0 4px 20px rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.04);
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .2s ease, color .2s ease;
    overflow: hidden;
}

    .gg-contact-quick-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(99,102,241,.08) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform .6s ease;
        pointer-events: none;
    }

    .gg-contact-quick-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(99,102,241,.18);
        border-color: rgba(99,102,241,.22);
        color: var(--gg-primary, #6366f1);
    }

        .gg-contact-quick-item:hover::after {
            transform: translateX(100%);
        }

.gg-contact-quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(99,102,241,.28);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}

.gg-contact-quick-item:hover .gg-contact-quick-icon {
    transform: rotate(-6deg) scale(1.06);
}

.gg-contact-quick-item.gg-contact-quick-wa .gg-contact-quick-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 6px 14px rgba(37,211,102,.28);
}

.gg-contact-quick-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

    .gg-contact-quick-text small {
        font-size: .72rem;
        color: var(--gg-muted, #64748b);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 600;
    }

    .gg-contact-quick-text strong {
        font-size: .92rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---- 4. Main wrap + form card ---- */
.gg-contact-wrap {
    padding: 3rem 0;
}

.gg-contact-form-card {
    position: relative;
    background: var(--gg-card-bg, #fff);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 44px -20px rgba(15,23,42,.18);
    border: 1px solid rgba(15,23,42,.05);
    transition: box-shadow .3s ease;
}

    .gg-contact-form-card:focus-within {
        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 54px -22px rgba(99,102,241,.35);
    }

.gg-contact-form-head {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
}

    .gg-contact-form-head h2 {
        font-size: 1.35rem;
        font-weight: 800;
        margin: 0 0 .35rem;
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .gg-contact-form-head p {
        margin: 0;
        color: var(--gg-muted, #64748b);
        font-size: .88rem;
    }

.gg-contact-form-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(99,102,241,.35);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.gg-contact-form-card:focus-within .gg-contact-form-icon {
    transform: rotate(-6deg) scale(1.05);
}

/* ---- 5. Form labels + inputs ---- */
.gg-form-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gg-muted, #64748b);
    margin-bottom: .4rem;
}

    .gg-form-label i {
        color: var(--gg-primary, #6366f1);
        font-size: .9rem;
    }

.gg-contact-form .gg-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid rgba(15,23,42,.1);
    border-radius: 12px;
    background: var(--gg-card-bg, #fff);
    color: var(--gg-text, #0f172a);
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

    .gg-contact-form .gg-input:hover {
        border-color: rgba(99,102,241,.28);
    }

    .gg-contact-form .gg-input:focus {
        outline: none;
        border-color: var(--gg-primary, #6366f1);
        box-shadow: 0 0 0 4px rgba(99,102,241,.12);
        transform: translateY(-1px);
        background: #fff;
    }

    .gg-contact-form .gg-input.input-validation-error,
    .gg-contact-form .gg-input.is-invalid {
        border-color: #ef4444;
        background: #fef2f2;
    }

        .gg-contact-form .gg-input.input-validation-error:focus,
        .gg-contact-form .gg-input.is-invalid:focus {
            box-shadow: 0 0 0 4px rgba(239,68,68,.14);
        }

.gg-contact-form textarea.gg-input {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.gg-form-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--gg-muted, #64748b);
    margin-top: .5rem;
}

    .gg-form-hint i {
        color: #0ea5e9;
    }

.gg-contact-submit {
    position: relative;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 8px 24px rgba(99,102,241,.35);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

    .gg-contact-submit::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform .7s ease;
        pointer-events: none;
    }

    .gg-contact-submit:hover {
        box-shadow: 0 14px 34px rgba(99,102,241,.5) !important;
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

        .gg-contact-submit:hover::after {
            transform: translateX(100%);
        }

    .gg-contact-submit:active {
        transform: translateY(0);
    }

    .gg-contact-submit:disabled,
    .gg-contact-submit.is-loading {
        cursor: progress;
        opacity: .9;
        filter: saturate(.9);
    }

/* ---- 6. Captcha (Contact, Shop Request, Reviews form…) ---- */
.gg-captcha {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(99,102,241,.06);
    padding: .75rem 1rem;
    border-radius: 12px;
    border: 1px dashed rgba(99,102,241,.25);
}

.gg-captcha-box {
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04));
    border: 1.5px dashed rgba(99,102,241,.3);
    border-radius: 14px;
    padding: 1rem 1.15rem;
}

.gg-captcha-question {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    font-size: .92rem;
    color: var(--gg-text);
}

    .gg-captcha-question i {
        color: var(--gg-primary);
        font-size: 1.1rem;
    }

.gg-captcha-num {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .75rem;
    background: var(--gg-card-bg, #fff);
    color: var(--gg-primary, #6366f1);
    border: 2px solid rgba(99,102,241,.25);
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .2s ease, border-color .2s ease;
}

    .gg-captcha-num:hover {
        transform: translateY(-1px);
        border-color: rgba(99,102,241,.45);
    }

.gg-captcha-op {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gg-muted, #64748b);
}

.gg-captcha-input {
    width: 80px;
    height: 42px;
    padding: 0 .75rem;
    border: 2px solid rgba(99,102,241,.25);
    border-radius: 10px;
    background: var(--gg-card-bg);
    color: var(--gg-primary, #6366f1);
    font-weight: 800;
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

    .gg-captcha-input:focus {
        outline: none;
        border-color: var(--gg-primary, #6366f1);
        box-shadow: 0 0 0 4px rgba(99,102,241,.15);
        transform: translateY(-1px);
    }

    .gg-captcha-input.input-validation-error {
        border-color: #ef4444;
        background: #fef2f2;
    }

.gg-captcha-hint {
    margin-top: .65rem;
    font-size: .75rem;
    color: var(--gg-muted, #64748b);
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ---- 7. Info sidebar ---- */
.gg-contact-info {
    background: var(--gg-card-bg, #fff);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 8px 40px rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.04);
    position: sticky;
    top: 100px;
}

.gg-contact-info-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
    padding-bottom: .85rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .gg-contact-info-title i {
        color: var(--gg-primary, #6366f1);
    }

.gg-contact-info-item {
    display: flex;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(15,23,42,.04);
}

    .gg-contact-info-item:last-of-type {
        border-bottom: 0;
    }

.gg-contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(99,102,241,.1);
    color: var(--gg-primary, #6366f1);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

.gg-contact-info-item:hover .gg-contact-info-icon {
    background: var(--gg-primary, #6366f1);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

.gg-contact-info-icon-wa {
    background: rgba(37,211,102,.12);
    color: #25D366;
}

.gg-contact-info-item:hover .gg-contact-info-icon-wa {
    background: #25D366;
    color: #fff;
}

.gg-contact-info-body h5 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.gg-contact-info-body p {
    margin: 0;
    font-size: .88rem;
    color: var(--gg-muted, #64748b);
    line-height: 1.55;
}

.gg-contact-info-body a {
    color: var(--gg-primary, #6366f1);
    text-decoration: none;
    transition: color .15s ease;
}

    .gg-contact-info-body a:hover {
        color: var(--gg-primary-dark, #4f46e5);
        text-decoration: underline;
    }

/* ---- 8. Social ---- */
.gg-contact-social {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(15,23,42,.08);
}

    .gg-contact-social h6 {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--gg-muted, #64748b);
        font-weight: 700;
        margin: 0 0 .75rem;
    }

.gg-contact-social-links {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

    .gg-contact-social-links a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(99,102,241,.1);
        color: var(--gg-primary, #6366f1);
        display: grid;
        place-items: center;
        font-size: 1rem;
        text-decoration: none;
        transition: background .22s ease, color .22s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    }

        .gg-contact-social-links a:hover {
            background: var(--gg-primary, #6366f1);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 10px 22px -10px rgba(99,102,241,.65);
        }

        .gg-contact-social-links a[aria-label="Facebook"]:hover {
            background: #1877F2;
        }

        .gg-contact-social-links a[aria-label="X"]:hover,
        .gg-contact-social-links a[aria-label="Twitter"]:hover {
            background: #0f172a;
        }

        .gg-contact-social-links a[aria-label="YouTube"]:hover {
            background: #FF0000;
        }

        .gg-contact-social-links a[aria-label="Instagram"]:hover {
            background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
        }

        .gg-contact-social-links a[aria-label="Telegram"]:hover {
            background: #229ED9;
        }

/* ---- 9. Map ---- */
.gg-contact-map-section {
    margin-top: 3rem;
}

.gg-contact-map-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .gg-contact-map-head h3 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 .35rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

        .gg-contact-map-head h3 i {
            color: var(--gg-primary, #6366f1);
        }

    .gg-contact-map-head p {
        margin: 0;
        color: var(--gg-muted, #64748b);
        font-size: .95rem;
    }

.gg-contact-map-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15,23,42,.1);
    border: 1px solid rgba(15,23,42,.05);
    background: #eef2f7;
    min-height: 300px;
}

    .gg-contact-map-wrap iframe {
        display: block;
        width: 100%;
        filter: grayscale(.2) contrast(1.02) brightness(1.02);
        transition: filter .35s ease;
    }

    .gg-contact-map-wrap:hover iframe {
        filter: grayscale(0) contrast(1.03) brightness(1);
    }

.gg-map-consent {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 0;
    cursor: pointer;
    background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.14), transparent 65%), linear-gradient(135deg, #f8fafc, #eef2ff);
    color: var(--gg-text, #0f172a);
    font: inherit;
    text-align: center;
    padding: 2rem;
    transition: background .25s ease, transform .25s ease;
}

    .gg-map-consent:hover {
        background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.22), transparent 65%), linear-gradient(135deg, #eef2ff, #e0e7ff);
    }

    .gg-map-consent strong {
        font-size: 1rem;
        font-weight: 700;
    }

    .gg-map-consent small {
        font-size: .78rem;
        color: var(--gg-muted, #64748b);
    }

.gg-map-consent-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 12px 28px -12px rgba(99,102,241,.7);
    margin-bottom: .75rem;
}

/* ---- 10. Alert banners ---- */
.gg-contact-banner {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    font-size: .92rem;
    border: 1px solid transparent;
    animation: ggContactFadeUp .35s ease both;
}

    .gg-contact-banner strong {
        display: block;
        font-weight: 700;
        margin-bottom: .15rem;
    }

.gg-contact-banner-ok {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #a7f3d0;
    color: #064e3b;
}

    .gg-contact-banner-ok > i:first-child {
        color: #10b981;
        font-size: 1.15rem;
    }

.gg-contact-banner-err {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
    color: #7f1d1d;
}

    .gg-contact-banner-err > i:first-child {
        color: #ef4444;
        font-size: 1.15rem;
    }

.gg-contact-banner-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s ease;
}

    .gg-contact-banner-close:hover {
        opacity: 1;
    }

@keyframes ggContactFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 11. Responsive ---- */
@media (max-width: 1199.98px) {
    .gg-contact-form-card {
        padding: 1.75rem;
    }

    .gg-contact-info {
        padding: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .gg-contact-info {
        position: static;
        margin-top: 1rem;
        padding: 1.5rem;
    }

    .gg-contact-form-card {
        padding: 1.5rem;
    }

    .gg-contact-map-wrap iframe {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    .gg-contact-hero {
        padding: 3rem 0 2.25rem;
    }

        .gg-contact-hero p {
            font-size: .98rem;
            margin-bottom: 1.5rem;
        }

    .gg-contact-quick {
        gap: .75rem;
    }

    .gg-contact-quick-item {
        padding: .85rem 1rem;
    }

    .gg-contact-wrap {
        padding: 2rem 0;
    }
}

@media (max-width: 575.98px) {
    .gg-contact-hero {
        padding: 2.5rem 0 2rem;
    }

    .gg-contact-quick {
        grid-template-columns: 1fr;
    }

    .gg-contact-form-card,
    .gg-contact-info {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .gg-contact-map-wrap iframe {
        height: 260px;
    }

    .gg-captcha {
        gap: .65rem;
        padding: .65rem .85rem;
    }

    .gg-captcha-num {
        min-width: 36px;
        height: 36px;
        font-size: 1rem;
        padding: 0 .5rem;
    }

    .gg-captcha-input {
        width: 64px;
        height: 36px;
        font-size: 1rem;
        letter-spacing: .05em;
    }

    .gg-contact-form-head h2 {
        font-size: 1.15rem;
    }

    .gg-contact-info-title {
        font-size: 1.05rem;
    }
}

/* ---- 12. Dark mode ---- */
[data-theme="dark"] .gg-contact-quick-item,
[data-theme="dark"] .gg-contact-form-card,
[data-theme="dark"] .gg-contact-info {
    background: rgba(30,41,59,.85);
    border-color: rgba(148,163,184,.15);
}

[data-theme="dark"] .gg-contact-form .gg-input,
[data-theme="dark"] .gg-captcha-num,
[data-theme="dark"] .gg-captcha-input {
    background: rgba(15,23,42,.6);
    color: #e2e8f0;
    border-color: rgba(148,163,184,.25);
}

    [data-theme="dark"] .gg-contact-form .gg-input:focus {
        background: rgba(15,23,42,.85);
    }

[data-theme="dark"] .gg-contact-quick-item:hover,
[data-theme="dark"] .gg-contact-form-card:focus-within {
    box-shadow: 0 16px 40px -18px rgba(0,0,0,.6);
}

[data-theme="dark"] .gg-contact-hero {
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
}

[data-theme="dark"] .gg-contact-map-wrap {
    background: #1e293b;
}

/* ---- 13. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .gg-contact-hero::before,
    .gg-contact-hero::after,
    .gg-contact-hero .gg-gradient-text,
    .gg-contact-quick-item::after,
    .gg-contact-submit::after,
    .gg-contact-banner {
        animation: none !important;
        transition: none !important;
    }

    .gg-contact-quick-item:hover,
    .gg-contact-quick-icon,
    .gg-contact-info-icon,
    .gg-contact-submit:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   20. CONTENT PAGES  (Advertise, Terms, Privacy)
   ========================================================================== */
.gg-content-hero {
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #6366f1) 15%, transparent), color-mix(in srgb, var(--g2, #8b5cf6) 8%, transparent));
}

    .gg-content-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 15% 40%, color-mix(in srgb, var(--g1) 25%, transparent), transparent 55%), radial-gradient(circle at 85% 60%, color-mix(in srgb, var(--g2) 20%, transparent), transparent 55%);
    }

    .gg-content-hero .container-xxl {
        position: relative;
        z-index: 1;
    }

    .gg-content-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        font-weight: 900;
        margin: 0 0 .75rem;
        letter-spacing: -.02em;
        color: var(--gg-text);
    }

    .gg-content-hero p {
        font-size: 1.1rem;
        color: var(--gg-muted);
        max-width: 640px;
        margin: 0 0 1rem;
        line-height: 1.55;
    }

.gg-content-hero-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--g1), var(--g2));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--g1) 40%, transparent);
    animation: ggScaleIn .6s cubic-bezier(.2,.9,.3,1);
}

.gg-content-updated {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    background: rgba(255,255,255,.6);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--gg-muted);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .gg-content-updated {
    background: rgba(22,28,51,.6);
}

.gg-content-wrap {
    padding: 2rem 0 4rem;
}

/* ---- Stats ---- */
.gg-content-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

.gg-content-stat {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--gg-shadow);
    text-align: center;
    border: 1px solid rgba(15,23,42,.04);
    border-top: 3px solid var(--accent, #6366f1);
    transition: transform .25s, box-shadow .25s;
}

    .gg-content-stat:hover {
        transform: translateY(-3px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-content-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    margin: 0 auto .75rem;
}

.gg-content-stat-value {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .35rem;
}

.gg-content-stat-label {
    font-size: .82rem;
    color: var(--gg-muted);
    font-weight: 500;
}

/* ---- Section ---- */
.gg-content-section {
    margin-bottom: 3rem;
}

.gg-content-section-title {
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid rgba(99,102,241,.12);
    color: var(--gg-text);
}

    .gg-content-section-title i {
        color: var(--gg-primary);
        font-size: 1.35rem;
    }

/* ---- Rich text ---- */
.gg-content-richtext {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.75rem 2rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--gg-text);
}

    .gg-content-richtext p {
        margin: 0 0 1rem;
    }

        .gg-content-richtext p:last-child {
            margin-bottom: 0;
        }

    .gg-content-richtext a {
        color: var(--gg-primary);
    }

/* ---- Cards ---- */
.gg-content-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1.5rem 1.35rem;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

    .gg-content-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent, #6366f1);
    }

    .gg-content-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--gg-shadow-lg);
    }

    .gg-content-card h3 {
        font-size: 1.05rem;
        font-weight: 800;
        margin: 0 0 .5rem;
    }

    .gg-content-card p {
        color: var(--gg-muted);
        font-size: .9rem;
        line-height: 1.55;
        flex: 1;
        margin: 0 0 .85rem;
    }

    .gg-content-card a.gg-link-sweep {
        align-self: flex-start;
        font-weight: 600;
        font-size: .9rem;
    }

.gg-content-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: .85rem;
}

.gg-content-card-price {
    font-size: .85rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: .65rem;
}

/* ---- Table ---- */
.gg-content-table-wrap {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.04);
}

.gg-content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

    .gg-content-table thead th {
        background: linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.03));
        padding: .85rem 1.1rem;
        text-align: left;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        font-weight: 700;
        color: var(--gg-primary);
        border-bottom: 1px solid rgba(99,102,241,.15);
    }

    .gg-content-table tbody td {
        padding: .85rem 1.1rem;
        border-bottom: 1px solid rgba(15,23,42,.05);
        color: var(--gg-text);
    }

    .gg-content-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .gg-content-table tbody tr:hover {
        background: rgba(99,102,241,.04);
    }

/* ---- FAQ ---- */
.gg-content-faq .accordion-item {
    background: var(--gg-card-bg);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--gg-radius) !important;
    margin-bottom: .5rem;
    overflow: hidden;
}

.gg-content-faq .accordion-button {
    background: transparent;
    color: var(--gg-text);
    font-weight: 600;
    padding: 1rem 1.25rem;
    font-size: .95rem;
    box-shadow: none;
}

    .gg-content-faq .accordion-button:not(.collapsed) {
        background: rgba(99,102,241,.06);
        color: var(--gg-primary);
    }

    .gg-content-faq .accordion-button:focus {
        box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    }

.gg-content-faq .accordion-body {
    padding: 1rem 1.25rem 1.25rem;
    color: var(--gg-muted);
    font-size: .92rem;
    line-height: 1.65;
}

/* ---- CTA ---- */
.gg-content-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 2rem 2.25rem;
    border-radius: var(--gg-radius);
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.06));
    border: 1px solid rgba(99,102,241,.15);
}

    .gg-content-cta h3 {
        font-size: 1.35rem;
        font-weight: 800;
        margin: 0 0 .35rem;
    }

    .gg-content-cta p {
        margin: 0;
        color: var(--gg-muted);
        font-size: .95rem;
    }

.gg-content-cta-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .gg-content-hero {
        padding: 2.5rem 0 2rem;
    }

    .gg-content-richtext {
        padding: 1.25rem;
    }

    .gg-content-table {
        font-size: .82rem;
    }

        .gg-content-table thead th,
        .gg-content-table tbody td {
            padding: .6rem .75rem;
        }

    .gg-content-cta {
        padding: 1.5rem;
    }

    .gg-content-cta-actions {
        width: 100%;
    }

        .gg-content-cta-actions .gg-btn {
            flex: 1;
            justify-content: center;
        }
}


/* ==========================================================================
   21. ERROR PAGE
   ========================================================================== */
.gg-error-wrap {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
}

.gg-error-card {
    max-width: 620px;
    width: 100%;
    text-align: center;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-lg);
    padding: 3rem 2rem;
    border: 1px solid rgba(15,23,42,.04);
    animation: ggScaleIn .45s cubic-bezier(.2,.9,.3,1);
    position: relative;
    overflow: hidden;
}

    .gg-error-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent, #6366f1) 12%, transparent), transparent 60%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent, #6366f1) 8%, transparent), transparent 55%);
    }

.gg-error-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    animation: ggBounce 2.4s ease-in-out infinite;
    display: inline-block;
}

.gg-error-code {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: .75rem;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--accent, #6366f1), color-mix(in srgb, var(--accent, #6366f1) 60%, #000));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gg-error-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 .65rem;
    color: var(--gg-text);
    position: relative;
    z-index: 1;
}

.gg-error-message {
    color: var(--gg-muted);
    font-size: .98rem;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 1.75rem;
    position: relative;
    z-index: 1;
}

.gg-error-retry {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    background: rgba(99,102,241,.08);
    color: var(--gg-primary);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

    .gg-error-retry i {
        animation: ggSpin 1s linear infinite;
    }

.gg-error-trace {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    background: rgba(15,23,42,.04);
    border-radius: 8px;
    font-size: .78rem;
    color: var(--gg-muted);
    margin-bottom: 1.5rem;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

[data-theme="dark"] .gg-error-trace {
    background: rgba(255,255,255,.06);
}

.gg-error-trace code {
    color: var(--gg-text);
    font-weight: 600;
}

.gg-trace-copy {
    border: 0;
    background: transparent;
    color: var(--gg-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

    .gg-trace-copy:hover {
        background: rgba(99,102,241,.15);
        color: var(--gg-primary);
    }

.gg-error-actions {
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.gg-error-stack {
    max-width: 900px;
    width: 100%;
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    padding: 1rem 1.25rem;
    font-size: .82rem;
}

    .gg-error-stack summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--gg-primary);
        padding: .25rem 0;
    }

    .gg-error-stack pre {
        background: #0f172a;
        color: #e2e8f0;
        padding: 1rem;
        border-radius: 10px;
        overflow: auto;
        max-height: 420px;
        font-size: .75rem;
        margin-top: .75rem;
        line-height: 1.5;
    }

.gg-error-path {
    margin-top: .5rem;
    padding: .35rem .6rem;
    background: rgba(99,102,241,.06);
    border-radius: 6px;
    font-size: .8rem;
}

@media (max-width: 575px) {
    .gg-error-card {
        padding: 2rem 1.25rem;
    }

    .gg-error-code {
        font-size: 3.25rem;
    }

    .gg-error-emoji {
        font-size: 3.5rem;
    }

    .gg-error-title {
        font-size: 1.25rem;
    }
}


/* ==========================================================================
   22. SHOPS (List, Modal, Request) + SERVICE CENTERS
   ========================================================================== */

/* ---- Shop list ---- */
.gg-shop-toolbar {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    padding: 1rem;
    box-shadow: var(--gg-shadow);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gg-shop-toolbar-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

    .gg-shop-toolbar-row > * {
        flex: 1 1 160px;
        min-width: 0;
    }

.gg-shop-card {
    background: var(--gg-card-bg);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow);
    padding: 1.15rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15,23,42,.04);
    transition: transform .25s, box-shadow .25s;
}

    .gg-shop-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--gg-shadow-lg);
    }

.gg-shop-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .65rem;
}

    .gg-shop-head h3 {
        font-size: 1rem;
        font-weight: 800;
        margin: 0;
        line-height: 1.25;
    }

.gg-shop-distance {
    background: rgba(99,102,241,.12);
    color: var(--gg-primary);
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.gg-shop-body {
    flex: 1;
}

    .gg-shop-body p {
        font-size: .85rem;
        color: var(--gg-muted);
        margin: .25rem 0;
        display: flex;
        gap: .4rem;
        align-items: flex-start;
    }

    .gg-shop-body i {
        color: var(--gg-primary);
        flex-shrink: 0;
    }

    .gg-shop-body a {
        color: var(--gg-primary);
        text-decoration: none;
    }

.gg-shop-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed rgba(15,23,42,.08);
}

    .gg-shop-actions .gg-btn {
        flex: 1;
        justify-content: center;
    }

/* ---- Shop modal ---- */
.gg-shop-modal .modal-content {
    border-radius: var(--gg-radius);
    border: 0;
    box-shadow: var(--gg-shadow-lg);
}

.gg-shop-modal .modal-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: var(--gg-radius) var(--gg-radius) 0 0;
}

    .gg-shop-modal .modal-header .btn-close {
        filter: invert(1) brightness(2);
    }

.gg-shop-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(15,23,42,.1);
}

    .gg-shop-modal-header h4 {
        font-weight: 800;
        margin: 0;
        font-size: 1.15rem;
    }

.gg-shop-modal-row {
    display: flex;
    gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px dashed rgba(15,23,42,.06);
    font-size: .9rem;
}

    .gg-shop-modal-row:last-of-type {
        border-bottom: 0;
    }

    .gg-shop-modal-row > i {
        color: var(--gg-primary);
        font-size: 1.15rem;
        width: 22px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .gg-shop-modal-row strong {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--gg-muted);
        font-weight: 700;
    }

    .gg-shop-modal-row a {
        color: var(--gg-primary);
    }

.gg-shop-modal-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15,23,42,.08);
}

    .gg-shop-modal-actions .gg-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

/* ---- Shop request page ---- */
.gg-instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: gg-step;
}

    .gg-instructions-list li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: .65rem;
        font-size: .85rem;
        line-height: 1.6;
        color: var(--gg-text);
        counter-increment: gg-step;
    }

        .gg-instructions-list li::before {
            content: counter(gg-step);
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            font-size: .72rem;
            font-weight: 800;
            display: grid;
            place-items: center;
        }

/* "List your shop" CTA in navbar */
.gg-shop-cta {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    padding: .35rem .85rem !important;
    border-radius: 999px !important;
}

    .gg-shop-cta:hover {
        color: #fff !important;
    }

/* ---- Service centers ---- */
.gg-sc-card {
    border-left: 3px solid #10b981;
}

.gg-sc-authorized {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .65rem;
    margin-left: .25rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.gg-sc-services {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
}

@media (max-width: 575px) {
    .gg-shop-toolbar-row > * {
        flex: 1 1 100%;
    }
}


/* ==========================================================================
   23. TRENDING PAGE
   ========================================================================== */
.gg-trending-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.gg-trending-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--gg-card-bg);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gg-text);
    box-shadow: var(--gg-shadow);
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(15,23,42,.04);
}

    .gg-trending-row:hover {
        transform: translateX(4px);
        box-shadow: var(--gg-shadow-lg);
        color: var(--gg-primary);
    }

.gg-trending-rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.gg-trending-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    background: #f1f5f9;
    flex-shrink: 0;
}

.gg-trending-info {
    flex: 1;
    min-width: 0;
}

.gg-trending-name {
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gg-trending-stats {
    display: flex;
    gap: .5rem;
}

.gg-stat-pill {
    background: rgba(99,102,241,.1);
    color: var(--gg-primary);
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .gg-trending-row {
        gap: .5rem;
        padding: .5rem .75rem;
    }

    .gg-trending-img {
        width: 46px;
        height: 46px;
    }

    .gg-trending-name {
        font-size: .85rem;
    }

    .gg-trending-stats .gg-stat-pill {
        font-size: .7rem;
        padding: .2rem .5rem;
    }
}


/* ==========================================================================
   24. UPCOMING DEVICES
   ========================================================================== */
.gg-section-upcoming {
    background: linear-gradient(135deg, rgba(245,158,11,.04), rgba(249,115,22,.02));
    border-radius: 24px;
    padding: 1.5rem;
    border: 1px solid rgba(245,158,11,.15);
}

.gg-upcoming-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 999px;
    margin-left: .5rem;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(245,158,11,.35);
    animation: ggPulse 2.4s ease-in-out infinite;
}

.gg-upcoming-category-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(245,158,11,.25);
}

.gg-upcoming-tab {
    background: rgba(255,255,255,.9);
    border: 1.5px solid rgba(245,158,11,.2);
    color: var(--gg-text);
    font-weight: 600;
}

    .gg-upcoming-tab:hover {
        background: rgba(245,158,11,.1);
        border-color: rgba(245,158,11,.4);
        color: #d97706;
    }

    .gg-upcoming-tab.is-active {
        background: linear-gradient(135deg, #f59e0b, #f97316);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(245,158,11,.35);
    }

    .gg-upcoming-tab .gg-chip-count {
        background: rgba(0,0,0,.15);
        color: inherit;
        font-size: .65rem;
        font-weight: 800;
        padding: .05rem .35rem;
        border-radius: 999px;
        margin-left: .35rem;
    }

    .gg-upcoming-tab.is-active .gg-chip-count {
        background: rgba(255,255,255,.25);
    }

.gg-upcoming-pane {
    display: none;
    animation: ggFadeUp .35s cubic-bezier(.2,.9,.3,1);
}

    .gg-upcoming-pane.is-active {
        display: block;
    }

@media (max-width: 575.98px) {
    .gg-section-upcoming {
        padding: 1rem;
        border-radius: 16px;
    }

    .gg-upcoming-category-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .75rem;
        scrollbar-width: thin;
    }

    .gg-upcoming-tab {
        flex-shrink: 0;
    }
}


/* ==========================================================================
   25. SHORT LINKS — related content tiles
   ========================================================================== */
.gg-shortlinks {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--gg-card-bg);
    border-radius: 20px;
    box-shadow: var(--gg-shadow);
    border: 1px solid rgba(15,23,42,.04);
}

.gg-shortlinks-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed rgba(15,23,42,.08);
}

    .gg-shortlinks-title i {
        color: var(--gg-primary);
    }

.gg-shortlinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
}

.gg-shortlink {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    background: rgba(99,102,241,.03);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gg-text);
    border: 1px solid rgba(15,23,42,.04);
    transition: transform .2s, background .2s, box-shadow .2s;
}

    .gg-shortlink:hover {
        transform: translateY(-2px);
        background: rgba(99,102,241,.08);
        box-shadow: 0 8px 20px rgba(99,102,241,.12);
        color: var(--gg-primary);
    }

.gg-shortlink-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: #fff;
}

.gg-shortlink-icon-service {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.gg-shortlink-icon-shop {
    background: linear-gradient(135deg, #10b981, #059669);
}

.gg-shortlink-icon-brand {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.gg-shortlink-icon-price {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.gg-shortlink-icon-rated {
    background: linear-gradient(135deg, #eab308, #ca8a04);
}

.gg-shortlink-icon-trend {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.gg-shortlink-body {
    flex: 1;
    min-width: 0;
}

    .gg-shortlink-body strong {
        display: block;
        font-size: .9rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .gg-shortlink-body small {
        display: block;
        font-size: .75rem;
        color: var(--gg-muted);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.gg-shortlink-arrow {
    color: var(--gg-muted);
    font-size: .85rem;
    transition: transform .2s, color .2s;
}

.gg-shortlink:hover .gg-shortlink-arrow {
    transform: translateX(4px);
    color: var(--gg-primary);
}

@media (max-width: 575.98px) {
    .gg-shortlinks {
        padding: 1rem;
    }

    .gg-shortlinks-grid {
        grid-template-columns: 1fr;
    }

    .gg-shortlink {
        padding: .75rem .85rem;
    }

    .gg-shortlink-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}


/* ==========================================================================
   26. PRICE BANDS  (Views/Shared/_PriceBands.cshtml)
   ========================================================================== */
.gg-price-bands {
    margin: 24px 0;
    padding: 18px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.gg-band-group + .gg-band-group {
    margin-top: 14px;
}

.gg-band-group h4 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.gg-band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gg-band-chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    text-decoration: none;
    transition: all .15s;
}

    .gg-band-chip:hover {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
        transform: translateY(-2px);
    }




/* ═══════════════════════════════════════════════════════════════════════
 * DEVICECHAMP APP SLIDE
 * ═══════════════════════════════════════════════════════════════════════ */

.gg-slide-app {
    background: radial-gradient(1200px 500px at 80% 30%, rgba(139,92,246,.35), transparent 60%), radial-gradient(900px 400px at 20% 70%, rgba(99,102,241,.35), transparent 60%), linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
    overflow: hidden;
}

    /* Animated aurora sweep */
    .gg-slide-app::before {
        background: conic-gradient(from 0deg at 50% 50%, rgba(99,102,241,.15), rgba(236,72,153,.18), rgba(139,92,246,.15), rgba(99,102,241,.15));
        background-size: 200% 200%;
        animation: ggAppAurora 18s linear infinite;
        opacity: .8;
    }

@keyframes ggAppAurora {
    to {
        background-position: 200% 0;
    }
}

/* Floating orbs */
.gg-slide-app::after {
    background: radial-gradient(circle, rgba(236,72,153,.35), transparent 65%);
    width: 420px;
    height: 420px;
    top: 20%;
    right: -140px;
    animation: ggAppOrb 12s ease-in-out infinite;
}

@keyframes ggAppOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 20px) scale(1.1);
    }
}

/* ─── Eyebrow: neon chip ──────────────────────────────────────────────── */
.gg-slide-app .gg-slide-eyebrow {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(167,139,250,.4);
    color: #c4b5fd;
    box-shadow: 0 0 0 4px rgba(167,139,250,.08), 0 0 24px -6px rgba(167,139,250,.5);
    animation: ggAppPulse 2.6s ease-in-out infinite;
}

    .gg-slide-app .gg-slide-eyebrow i {
        color: #a5f3fc;
        animation: ggAppIconSpin 4s linear infinite;
    }

@keyframes ggAppPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(167,139,250,.08), 0 0 24px -6px rgba(167,139,250,.5);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(167,139,250,.04), 0 0 40px -4px rgba(167,139,250,.75);
    }
}

@keyframes ggAppIconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ─── Title & description ────────────────────────────────────────────── */
.gg-slide-app .gg-slide-title {
    background: linear-gradient(90deg, #ffffff 0%, #e9d5ff 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ggAppTitleShift 6s ease-in-out infinite alternate;
}

@keyframes ggAppTitleShift {
    to {
        background-position: 100% 50%;
    }
}

/* ─── Primary CTA: the DOWNLOAD button ────────────────────────────────── */
.gg-btn-app-download {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    box-shadow: 0 8px 24px -8px rgba(34,197,94,.75), 0 0 0 0 rgba(34,197,94,.55);
    animation: ggAppCtaPulse 2.4s ease-out infinite;
    overflow: hidden;
    isolation: isolate;
}

    .gg-btn-app-download:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow: 0 12px 32px -8px rgba(34,197,94,.85), 0 0 0 0 rgba(34,197,94,.55);
    }

    .gg-btn-app-download:active {
        transform: translateY(0);
    }

@keyframes ggAppCtaPulse {
    0% {
        box-shadow: 0 8px 24px -8px rgba(34,197,94,.75), 0 0 0 0 rgba(34,197,94,.55);
    }

    70% {
        box-shadow: 0 8px 24px -8px rgba(34,197,94,.75), 0 0 0 18px rgba(34,197,94,0);
    }

    100% {
        box-shadow: 0 8px 24px -8px rgba(34,197,94,.75), 0 0 0 0 rgba(34,197,94,0);
    }
}

/* Shine sweep */
.gg-btn-app-download::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: ggAppShine 3.2s ease-in-out infinite;
}

@keyframes ggAppShine {
    0%, 55% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

/* Small "APK" badge next to the label */
.gg-btn-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

/* ─── Trust strip below CTAs ─────────────────────────────────────────── */
.gg-app-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    color: rgba(255,255,255,.75);
    font-size: .8rem;
}

    .gg-app-trust li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .gg-app-trust i {
        color: #a5f3fc;
        font-size: .95rem;
    }

/* ─── Floating phone mockup ─────────────────────────────────────────── */
.gg-app-visual {
    position: absolute;
    top: 50%;
    right: clamp(20px, 6vw, 90px);
    transform: translateY(-50%);
    width: clamp(140px, 18vw, 220px);
    filter: drop-shadow(0 40px 60px rgba(139,92,246,.45));
    animation: ggAppFloat 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

    .gg-app-visual svg {
        display: block;
        width: 100%;
        height: auto;
    }

@keyframes ggAppFloat {
    0%, 100% {
        transform: translateY(-50%) rotate(-2deg);
    }

    50% {
        transform: translateY(calc(-50% - 16px)) rotate(2deg);
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gg-slide-app::before,
    .gg-slide-app::after,
    .gg-slide-app .gg-slide-eyebrow,
    .gg-slide-app .gg-slide-eyebrow i,
    .gg-slide-app .gg-slide-title,
    .gg-btn-app-download,
    .gg-btn-app-download::after,
    .gg-app-visual {
        animation: none !important;
    }
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .gg-app-visual {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .gg-slide-app .gg-slide-desc {
        font-size: .9rem;
    }

    .gg-btn-app-download {
        padding: 12px 18px;
        font-size: .9rem;
    }

    .gg-app-trust {
        gap: 10px;
        font-size: .75rem;
    }
}



.gg-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(20px);
    max-width: min(90vw, 420px);
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(15,23,42,.92);
    color: #fff;
    font-size: .88rem;
    line-height: 1.4;
    box-shadow: 0 20px 48px -20px rgba(15,23,42,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
    text-align: center;
}

    .gg-toast.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }