/* =========================================
   GAMERFICIAL DESKTOP NAV - POLISHED
   ========================================= */

@media (min-width: 1025px) {

    /* Menu items */
    #menu-primary > li > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        gap: 9px !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1px !important;
        color: #ffffff !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        /* Remove previous low underline */
        box-shadow: none !important;
    }


    /* Your existing custom icons */
    #menu-primary > li > a::before {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;

        background-color: #ffffff !important;
        opacity: 0.9 !important;

        transition:
            background-color 0.2s ease,
            transform 0.2s ease,
            opacity 0.2s ease !important;
    }


    /* Red icon on hover/current section */
    #menu-primary > li > a:hover::before,
    #menu-primary > li.current-menu-item > a::before,
    #menu-primary > li.current-post-parent > a::before {
        background-color: #ff5159 !important;
        opacity: 1 !important;
    }


    /* New underline - positioned close to text */
    #menu-primary > li > a::after {
        content: "" !important;
        position: absolute !important;

        left: 18px !important;
        right: 18px !important;

        /* Positions line just underneath menu text */
        top: calc(50% + 16px) !important;

        height: 2px !important;
        background: #ff5159 !important;
        border-radius: 2px !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;

        transition: transform 0.2s ease !important;
    }


    /* Show underline */
    #menu-primary > li > a:hover::after,
    #menu-primary > li.current-menu-item > a::after,
    #menu-primary > li.current-post-parent > a::after {
        transform: scaleX(1) !important;
    }
}

This should give you:

    slightly bigger 17px icons
    white icons normally
    red icons when hovered
    better icon/text spacing
    slightly larger navigation text
    no line at the bottom of the entire header
    a small red line sitting directly beneath the menu item

I much prefer that positioning for your header. The line in your screenshot was around 30–35px too low and looked more like a random divider than a menu hover effect.

Also, now that I've seen how you've built those icons in your existing CSS, I'd definitely keep them. They're custom SVG masks and actually fit Gamerficial nicely; they just needed to be given a bit more presence.
User attachment
i want the layout that vice uses

Yes — and looking at that Vice screenshot, I think that layout would suit Gamerficial better than your current centred-menu layout.

The key difference is this:

Current Gamerficial

LOGO NEWS UPCOMING LEAKS SEARCH

Vice-style

☰ LOGO NEWS UPCOMING LEAKS SEARCH

Everything important starts from the left as one group. That's what makes Vice's header feel much more substantial.
Do this in SmartMag first

Go to:

Appearance → Customize → Header & Nav Menu → Layout: Main Header

For the Main Row, set it up as:
Left	Centre	Right
Off-Canvas/Hamburger	Empty	Search
Logo		
Navigation Menu		

The order in the left column should be:

Hamburger → Gamerficial logo → Navigation Menu

SmartMag's header builder specifically supports moving its header elements between the left, centre and right columns, so this is much cleaner than trying to force the centre column into position entirely with CSS.

Then I'd style it roughly like this:
☰   GAMERFICIAL    ▣ NEWS    ▣ UPCOMING GAMES    ◉ LEAKS                 🔍

Keep your icons.
Then add this CSS

Once you've moved the Navigation Menu into the left column, use:
/* =========================================
   GAMERFICIAL - VICE STYLE DESKTOP HEADER
   ========================================= */

@media (min-width: 1025px) {

    /* Main header */
    #smart-head .smart-head-mid {
        height: 86px !important;
    }

    /* Wider inner header like Vice */
    #smart-head .smart-head-mid > .inner {
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
    }

    /* Left side: hamburger + logo + navigation */
    #smart-head .items-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Logo */
    #smart-head .items-left .logo-link {
        margin-right: 32px !important;
    }

    /* Navigation immediately follows logo */
    #smart-head .nav-wrap {
        margin: 0 !important;
    }

    #menu-primary {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #menu-primary > li {
        margin: 0 !important;
    }

    #menu-primary > li > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        padding: 12px 14px !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;

        box-shadow: none !important;

        transition: color .2s ease !important;
    }

    /* Your custom menu icons */
    #menu-primary > li > a::before {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;

        background-color: #ffffff !important;
        opacity: .85 !important;

        transition:
            background-color .2s ease,
            opacity .2s ease,
            transform .2s ease !important;
    }

    /* Red icon on hover */
    #menu-primary > li > a:hover::before,
    #menu-primary > li.current-menu-item > a::before,
    #menu-primary > li.current-post-parent > a::before {
        background-color: #ff5159 !important;
        opacity: 1 !important;
    }

    /* Short red underline directly below item */
    #menu-primary > li > a::after {
        content: "" !important;

        position: absolute !important;
        left: 14px !important;
        right: 14px !important;
        top: calc(50% + 17px) !important;

        height: 2px !important;

        background: #ff5159 !important;
        border-radius: 2px !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;

        transition: transform .2s ease !important;
    }

    #menu-primary > li > a:hover::after,
    #menu-primary > li.current-menu-item > a::after,
    #menu-primary > li.current-post-parent > a::after {
        transform: scaleX(1) !important;
    }

    /* Right-side search */
    #smart-head .items-right {
        margin-left: auto !important;
        padding-left: 30px !important;
    }
}

I wouldn't copy Vice's black-and-white appearance, though. Copy the layout principle, keep Gamerficial's identity.

Your navy header + Gamerficial logo + red hover details + your little category icons would essentially give you a Gamerficial version of the Vice header.

And I'd definitely add the hamburger on desktop like Vice does. It gives you somewhere to put secondary stuff like Reviews, Features, About, Contact, social links, etc., while keeping the main header limited to your three strongest sections. That would clean up the site nicely.
User attachment
i put the menu on the left and it doesnt? can you check my ccs to see if thats what is preventing it from showing?

I checked the CSS you're currently serving, and your custom CSS is not hiding the desktop menu. There isn't a rule like display:none on the desktop navigation. Your relevant custom CSS only adds the icons and styles them.

I think the cleaner solution is: put Main Nav back in the Centre box in SmartMag, where we already know it renders correctly, and then use CSS to make that centre box sit immediately beside the logo.

That gives you the Vice layout without fighting SmartMag's header builder.

Set the Customizer back to:

    Elements Left → Site Logo
    Elements Centre → Main Nav
    Elements Right → Search

Then add this:
/* =========================================
   GAMERFICIAL - VICE STYLE HEADER LAYOUT
   ========================================= */

@media (min-width: 1025px) {

    /* Change SmartMag's 3-column header into one flex row */
    #smart-head .smart-head-row-3 > .inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }


    /* LOGO */
    #smart-head .items-left {
        flex: 0 0 auto !important;
        width: auto !important;
        justify-content: flex-start !important;
    }

    #smart-head .items-left .logo-link {
        margin: 0 !important;
    }


    /* NAVIGATION - move it directly beside logo */
    #smart-head .items-center {
        flex: 0 0 auto !important;
        width: auto !important;

        margin-left: 30px !important;
        padding: 0 !important;

        justify-content: flex-start !important;
    }

    #smart-head .items-center .nav-wrap {
        width: auto !important;
        justify-content: flex-start !important;
    }


    /* SEARCH - push all the way to right */
    #smart-head .items-right {
        flex: 1 1 auto !important;

        margin-left: auto !important;
        padding-left: 30px !important;

        justify-content: flex-end !important;
    }
}

That should change your header from:
LOGO                NEWS   UPCOMING   LEAKS                SEARCH

to:
LOGO   NEWS   UPCOMING   LEAKS                              SEARCH

which is much closer to the Vice structure you're after.

And importantly, don't move Main Nav into Elements Left. Leave it in Centre and let the CSS reposition that entire centre section. This works with the actual SmartMag HTML structure you're using and lets us keep all of your existing custom SVG menu icons.

Once you've done that, send me another screenshot. Then we can tackle the next bit: adding the hamburger before the Gamerficial logo and getting the exact Vice-like spacing.
Continued from
RuneScape 4 Overview
Pasted text(20261004-163810).txtDocument
make those changes to my css

Replace your Additional CSS with this file’s contents. It adds the navigation alignment beside your logo and keeps your existing icons and styling.

Set SmartMag’s header builder to:

    Left: Site Logo
    Centre: Main Nav
    Right: Search

The changes haven’t been previewed on your live site.
gamerficial-updated-css.txtDocument


/* =========================================================
   GAMERFICIAL — CLEAN MOBILE CSS
   Mobile header + burger menu + mobile article hero
   ========================================================= */

:root {
    --gf-navy: #081826;
    --gf-red: #fb5f58;
    --gf-panel: #132636;
    --gf-social: #182c3d;
    --gf-white: #ffffff;
    --gf-text: #202731;
    --gf-muted: rgba(255, 255, 255, 0.55);
    --gf-divider: rgba(255, 255, 255, 0.055);
}



/* =========================================================
   1. MOBILE HEADER — CONSOLIDATED
   ========================================================= */

@media (max-width: 767px) {
    #smart-head-mobile,
    #smart-head-mobile .smart-head-row,
    #smart-head-mobile .smart-head-mid {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        background: var(--gf-navy) !important;
        border: 0 !important;
        box-shadow: none !important;
        --head-h: 64px !important;
    }

    #smart-head-mobile .smart-head-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #smart-head-mobile > .smart-head-row > .inner.wrap,
    #smart-head-mobile .smart-head-mid > .inner.wrap {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) max-content !important;
        column-gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    #smart-head-mobile .items-left,
    #smart-head-mobile .items-center,
    #smart-head-mobile .items-right {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        align-items: center !important;
    }

    #smart-head-mobile .items-left {
        display: flex !important;
        justify-content: flex-start !important;
        grid-column: 1 !important;
    }

    #smart-head-mobile .items-center {
        display: flex !important;
        justify-content: flex-start !important;
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    #smart-head-mobile .items-right {
        display: flex !important;
        justify-content: flex-end !important;
        grid-column: 3 !important;
        white-space: nowrap !important;
    }

    /* Header logo */
    #smart-head-mobile .logo,
    #smart-head-mobile .logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile .logo-link {
        width: 145px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #smart-head-mobile .logo-link > span {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        line-height: 0 !important;
    }

    #smart-head-mobile .logo-image,
    #smart-head-mobile .logo img,
    #smart-head-mobile .logo-link img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
        transform: none !important;
    }

    /* Hamburger */
    #smart-head-mobile .offcanvas-toggle {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        color: var(--gf-white) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #smart-head-mobile .offcanvas-toggle::before,
    #smart-head-mobile .offcanvas-toggle::after {
        content: none !important;
        display: none !important;
    }

    #smart-head-mobile .hamburger-icon {
        position: relative !important;
        display: block !important;
        width: 26px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    #smart-head-mobile .hamburger-icon .inner,
    #smart-head-mobile .hamburger-icon .inner::before,
    #smart-head-mobile .hamburger-icon .inner::after {
        position: absolute !important;
        left: 0 !important;
        width: 26px !important;
        height: 3px !important;
        background: var(--gf-white) !important;
        border: 0 !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #smart-head-mobile .hamburger-icon .inner { top: 9px !important; }
    #smart-head-mobile .hamburger-icon .inner::before { content: "" !important; top: -8px !important; }
    #smart-head-mobile .hamburger-icon .inner::after { content: "" !important; top: 8px !important; }

    /* Search control, if present */
    #smart-head-mobile .search-link,
    #smart-head-mobile .search-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--gf-white) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #smart-head-mobile .items-right i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    #smart-head-mobile .items-right svg {
        width: 25px !important;
        height: 25px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
    }

    #smart-head-mobile .offcanvas-toggle:hover,
    #smart-head-mobile .search-link:hover,
    #smart-head-mobile .search-toggle:hover {
        color: var(--gf-red) !important;
    }

    #smart-head-mobile::after,
    #smart-head-mobile .smart-head-row::after,
    #smart-head-mobile .smart-head-mid::after {
        content: none !important;
        display: none !important;
    }

    /* Header subscribe link */
    #smart-head-mobile .items-right .h-text {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile a[href*="/Gamerficial/subscribe"] {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        color: var(--gf-red) !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.4px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    #smart-head-mobile .hamburger-icon,
    #smart-head-mobile .hamburger-icon .inner,
    #smart-head-mobile .hamburger-icon .inner::before,
    #smart-head-mobile .hamburger-icon .inner::after {
        width: 24px !important;
    }
}


/* =========================================================
   2. OFF-CANVAS / BURGER MENU
   ========================================================= */

#off-canvas {
    position: fixed !important;

    display: flex !important;
    flex-direction: column !important;

    width: 330px !important;
    max-width: 88vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow-x: hidden !important;

    background: var(--gf-navy) !important;
    color: var(--gf-white) !important;

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

    box-shadow: 20px 0 45px rgba(0, 0, 0, 0.34) !important;
}

#off-canvas .off-canvas-head,
#off-canvas .off-canvas-content,
#off-canvas .off-canvas-inner {
    background: var(--gf-navy) !important;
}


/* Drawer header */
#off-canvas .off-canvas-head {
    position: relative !important;

    flex: 0 0 auto !important;

    height: 88px !important;
    min-height: 88px !important;

    padding: 12px 22px 0 !important;

    border: 0 !important;
}


/* Drawer logo */
#off-canvas .off-canvas-head .ts-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;
}

#off-canvas .off-canvas-head .ts-logo img,
#off-canvas .off-canvas-head img.logo-image,
#off-canvas .off-canvas-head img.logo-mobile {
    display: block !important;

    width: 225px !important;
    max-width: 225px !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;
}


/* Drawer close */
#off-canvas .off-canvas-head .close {
    position: absolute !important;

    top: 24px !important;
    right: 22px !important;

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

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: var(--gf-white) !important;

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

    box-shadow: none !important;

    font-size: 21px !important;
    line-height: 1 !important;

    opacity: 0.94 !important;

    transition: color 0.18s ease, opacity 0.18s ease !important;
}

#off-canvas .off-canvas-head .close:hover,
#off-canvas .off-canvas-head .close:focus {
    color: var(--gf-red) !important;
    opacity: 1 !important;
}


/* Drawer content */
#off-canvas .off-canvas-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    min-height: 0 !important;

    gap: 0 !important;

    padding: 8px 20px 64px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#off-canvas .off-canvas-widgets {
    display: contents !important;
}


/* =========================================================
   3. BURGER MENU LINKS + ICONS
   ========================================================= */

#off-canvas .menu,
#off-canvas .mobile-menu,
#off-canvas .off-canvas-menu {
    order: -10 !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    border: 0 !important;

    transform: none !important;
}

#off-canvas .menu > li,
#off-canvas .mobile-menu > li,
#off-canvas .off-canvas-menu > li {
    position: relative !important;

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

    border: 0 !important;

    box-sizing: border-box !important;
}

#off-canvas .menu > li > a,
#off-canvas .mobile-menu > li > a,
#off-canvas .off-canvas-menu > li > a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    width: 100% !important;
    min-height: 52px !important;

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

    background: transparent !important;
    color: rgba(255, 255, 255, 0.90) !important;

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

    box-shadow: none !important;

    box-sizing: border-box !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;

    text-decoration: none !important;
    text-transform: none !important;

    transition: background 0.18s ease, color 0.18s ease !important;
}


/* Custom menu icons */
#off-canvas .menu > li > a::before,
#off-canvas .mobile-menu > li > a::before,
#off-canvas .off-canvas-menu > li > a::before {
    content: "" !important;

    display: block !important;

    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;

    background: currentColor !important;

    -webkit-mask-image: var(--drawer-icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-image: var(--drawer-icon);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    opacity: 0.98 !important;
}


/* 1. Home */
#off-canvas .menu > li:nth-child(1),
#off-canvas .mobile-menu > li:nth-child(1),
#off-canvas .off-canvas-menu > li:nth-child(1) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2.5 11v10h6v-6h7v6h6V11L12 3z'/%3E%3C/svg%3E");
}

/* 2. News */
#off-canvas .menu > li:nth-child(2),
#off-canvas .mobile-menu > li:nth-child(2),
#off-canvas .off-canvas-menu > li:nth-child(2) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3h8l4 4v14H6zM14 3v5h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
}

/* 3. Upcoming Games */
#off-canvas .menu > li:nth-child(3),
#off-canvas .mobile-menu > li:nth-child(3),
#off-canvas .off-canvas-menu > li:nth-child(3) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 8h8a5 5 0 014.8 6.4l-1.1 3.7a2 2 0 01-3.4.8L14 16h-4l-2.3 2.9a2 2 0 01-3.4-.8l-1.1-3.7A5 5 0 018 8zM8 12v4M6 14h4M16.5 12.5h.01M18.5 14.5h.01'/%3E%3C/svg%3E");
}

/* 4. Leaks */
#off-canvas .menu > li:nth-child(4),
#off-canvas .mobile-menu > li:nth-child(4),
#off-canvas .off-canvas-menu > li:nth-child(4) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 12s3.6-6 9.5-6 9.5 6 9.5 6-3.6 6-9.5 6-9.5-6-9.5-6zM12 9.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3C/svg%3E");
}

/* 5. Reviews */
#off-canvas .menu > li:nth-child(5),
#off-canvas .mobile-menu > li:nth-child(5),
#off-canvas .off-canvas-menu > li:nth-child(5) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m12 3 2.75 5.57 6.15.9-4.45 4.33 1.05 6.12L12 17.03l-5.5 2.89 1.05-6.12L3.1 9.47l6.15-.9L12 3z'/%3E%3C/svg%3E");
}

/* 6. Features */
#off-canvas .menu > li:nth-child(6),
#off-canvas .mobile-menu > li:nth-child(6),
#off-canvas .off-canvas-menu > li:nth-child(6) {
    --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3l1.25 3.75L17 8l-3.75 1.25L12 13l-1.25-3.75L7 8l3.75-1.25L12 3zM18.5 14l.75 2.25L21.5 17l-2.25.75L18.5 20l-.75-2.25L15.5 17l2.25-.75L18.5 14zM5.5 13l.65 1.85L8 15.5l-1.85.65L5.5 18l-.65-1.85L3 15.5l1.85-.65L5.5 13z'/%3E%3C/svg%3E");
}


/* Remove old theme accents */
#off-canvas .menu > li::before,
#off-canvas .mobile-menu > li::before,
#off-canvas .off-canvas-menu > li::before,
#off-canvas .menu > li > a::after,
#off-canvas .mobile-menu > li > a::after,
#off-canvas .off-canvas-menu > li > a::after {
    content: none !important;
    display: none !important;
}


/* Active / hover row */
#off-canvas .menu > li.current-menu-item,
#off-canvas .menu > li.current_page_item,
#off-canvas .mobile-menu > li.current-menu-item,
#off-canvas .mobile-menu > li.current_page_item,
#off-canvas .off-canvas-menu > li.current-menu-item,
#off-canvas .off-canvas-menu > li.current_page_item,
#off-canvas .menu > li:hover,
#off-canvas .mobile-menu > li:hover,
#off-canvas .off-canvas-menu > li:hover {
    margin-left: -20px !important;
    width: calc(100% + 20px) !important;

    padding-left: 16px !important;

    background: var(--gf-panel) !important;

    border-left: 4px solid var(--gf-red) !important;
    border-radius: 0 11px 11px 0 !important;

    box-sizing: border-box !important;
}

#off-canvas .menu > li.current-menu-item > a,
#off-canvas .menu > li.current_page_item > a,
#off-canvas .mobile-menu > li.current-menu-item > a,
#off-canvas .mobile-menu > li.current_page_item > a,
#off-canvas .off-canvas-menu > li.current-menu-item > a,
#off-canvas .off-canvas-menu > li.current_page_item > a,
#off-canvas .menu > li:hover > a,
#off-canvas .mobile-menu > li:hover > a,
#off-canvas .off-canvas-menu > li:hover > a {
    width: 100% !important;

    background: transparent !important;
    color: var(--gf-red) !important;

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

    box-shadow: none !important;
    transform: none !important;

    font-weight: 600 !important;
}


/* Submenus */
#off-canvas .sub-menu {
    margin: 4px 0 8px 39px !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}

#off-canvas .sub-menu a {
    display: block !important;

    padding: 9px 13px !important;

    color: rgba(255, 255, 255, 0.68) !important;

    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
}

#off-canvas .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--gf-red) !important;
}


/* =========================================================
   4. BURGER SEARCH
   ========================================================= */

#off-canvas #jetpack-search-filters-3 {
    order: -20 !important;

    width: 100% !important;

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

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

#off-canvas #jetpack-search-filters-3-wrapper,
#off-canvas .jetpack-search-form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}

#off-canvas #jetpack-search-filters-3 .widget-title,
#off-canvas #jetpack-search-filters-3 .wp-block-heading {
    display: none !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 58px !important;

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

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;
    border-top: 1px solid var(--gf-divider) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form::before {
    content: "" !important;

    position: absolute !important;

    top: 25px !important;
    left: 14px !important;

    width: 23px !important;
    height: 23px !important;

    background: rgba(255, 255, 255, 0.90) !important;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;

    pointer-events: none !important;

    transition: background 0.18s ease !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form label {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

#off-canvas #jetpack-search-filters-3 input.search-field {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 0 15px 0 54px !important;

    background: transparent !important;
    color: var(--gf-white) !important;

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

    outline: 0 !important;
    box-shadow: none !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 48px !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition: background 0.18s ease, color 0.18s ease !important;
}

#off-canvas #jetpack-search-filters-3 input.search-field::placeholder {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
}

#off-canvas #jetpack-search-filters-3 input.search-submit {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    margin: -1px !important;
    padding: 0 !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form:hover input.search-field {
    background: rgba(255, 255, 255, 0.035) !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form:focus-within input.search-field {
    background: var(--gf-panel) !important;
    color: var(--gf-red) !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form:focus-within::before {
    background: var(--gf-red) !important;
}

#off-canvas #jetpack-search-filters-3 form.search-form:focus-within input.search-field::placeholder {
    color: var(--gf-red) !important;
}


/* =========================================================
   5. FOLLOW US
   ========================================================= */

#off-canvas details.gamerficial-follow-us,
#off-canvas .gamerficial-follow-us {
    margin-top: auto !important;
    margin-bottom: 0 !important;

    padding: 12px 0 0 !important;

    border-top: 1px solid var(--gf-divider) !important;
}

#off-canvas .gamerficial-follow-row {
    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    min-height: 52px !important;

    padding: 0 15px !important;

    color: rgba(255, 255, 255, 0.90) !important;

    border-radius: 10px !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    list-style: none !important;

    cursor: pointer !important;
    user-select: none !important;

    transition: background 0.18s ease, color 0.18s ease !important;
}

#off-canvas .gamerficial-follow-row::-webkit-details-marker {
    display: none !important;
}

#off-canvas .gamerficial-follow-row:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

#off-canvas .gamerficial-follow-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;

    background: currentColor !important;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='18' cy='5' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='19' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.2 10.8 7.6-4.5M8.2 13.2l7.6 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='18' cy='5' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='19' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.2 10.8 7.6-4.5M8.2 13.2l7.6 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#off-canvas .gamerficial-follow-label {
    flex: 1 1 auto !important;
}

#off-canvas .gamerficial-follow-arrow {
    margin-left: auto !important;

    color: rgba(255, 255, 255, 0.38) !important;

    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    transform: rotate(0deg) !important;

    transition: transform 0.22s ease, color 0.18s ease !important;
}

#off-canvas details.gamerficial-follow-us[open] .gamerficial-follow-arrow {
    color: var(--gf-red) !important;
    transform: rotate(90deg) !important;
}

#off-canvas details.gamerficial-follow-us[open] .gamerficial-follow-row {
    color: var(--gf-red) !important;
}

#off-canvas .gamerficial-social-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    margin: 10px 0 4px !important;
    padding: 8px 0 4px !important;
}

#off-canvas .gamerficial-social-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    background: var(--gf-social) !important;
    color: var(--gf-white) !important;

    border-radius: 50% !important;

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

    text-decoration: none !important;

    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

#off-canvas .gamerficial-social-links a:hover {
    background: var(--gf-red) !important;
    color: var(--gf-navy) !important;

    transform: translateY(-2px) !important;
}


/* Hide SmartMag's own social circles */
#off-canvas .spc-social-block.smart-head-social,
#off-canvas .spc-social,
#off-canvas .smart-head-social,
#off-canvas .social-follow,
#off-canvas .social-icons,
#off-canvas .social-links {
    display: none !important;
}



/* =========================================================
   6. SUBSCRIBE — CONSOLIDATED
   ========================================================= */

#off-canvas #custom_html-3 {
    margin-bottom: 0 !important;
}

#off-canvas .gamerficial-subscribe-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 19px !important;
    box-sizing: border-box !important;
    background: var(--gf-navy) !important;
    color: var(--gf-red) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, color 0.18s ease !important;
}

#off-canvas .gamerficial-subscribe-star {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    margin-right: 17px !important;
    background: var(--gf-red) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2.5 2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.56l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96L12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2.5 2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.56l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96L12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#off-canvas .gamerficial-subscribe-text {
    flex: 1 1 auto !important;
    color: var(--gf-red) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#off-canvas .gamerficial-subscribe-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    color: var(--gf-red) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

#off-canvas .gamerficial-subscribe-button:hover {
    transform: translateY(-1px) !important;
}

#off-canvas .gamerficial-subscribe-button:active {
    transform: translateY(0) scale(0.99) !important;
}


/* =========================================================
   7. PRIVACY POLICY
   Always at the bottom of the drawer
   ========================================================= */

#off-canvas .gamerficial-privacy-link {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 8px 20px !important;

    box-sizing: border-box !important;

    color: rgba(255, 255, 255, 0.34) !important;

    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1px !important;

    text-align: center !important;
    text-decoration: none !important;

    z-index: 20 !important;
}

#off-canvas .gamerficial-privacy-link:hover {
    color: var(--gf-red) !important;
}


/* =========================================================
   8. SMALL PHONE DRAWER ADJUSTMENTS
   ========================================================= */

@media (max-width: 420px) {

    #off-canvas {
        width: 305px !important;
        max-width: 90vw !important;
    }

    #off-canvas .off-canvas-head {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #off-canvas .off-canvas-head .ts-logo img,
    #off-canvas .off-canvas-head img.logo-image,
    #off-canvas .off-canvas-head img.logo-mobile {
        width: 195px !important;
        max-width: 195px !important;
    }

    #off-canvas .off-canvas-content {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #off-canvas .menu > li > a,
    #off-canvas .mobile-menu > li > a,
    #off-canvas .off-canvas-menu > li > a {
        min-height: 50px !important;

        padding-right: 14px !important;
        padding-left: 14px !important;

        font-size: 16px !important;
    }

    #off-canvas .menu > li.current-menu-item,
    #off-canvas .menu > li.current_page_item,
    #off-canvas .mobile-menu > li.current-menu-item,
    #off-canvas .mobile-menu > li.current_page_item,
    #off-canvas .off-canvas-menu > li.current-menu-item,
    #off-canvas .off-canvas-menu > li.current_page_item,
    #off-canvas .menu > li:hover,
    #off-canvas .mobile-menu > li:hover,
    #off-canvas .off-canvas-menu > li:hover {
        margin-left: -18px !important;
        width: calc(100% + 18px) !important;

        padding-left: 14px !important;
    }

    #off-canvas .gamerficial-subscribe-button {
        min-height: 56px !important;
    }
}

/* =========================================================
   9. MOBILE ARTICLE HERO — SMARTMAG MODERN LAYOUT
   Structure checked on the live article:
   #breadcrumb > .inner
   .main > .ts-row > .main-content.s-post-contain
     > .the-post-header
     > .single-featured > .featured
     > .the-post
   ========================================================= */

@media (max-width: 767px) {

    /* Remove the theme's 35px gap below the breadcrumbs. */
    body.single-post.post-layout-modern .main-wrap > .main.ts-contain {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: var(--gf-white) !important;
    }

    body.single-post.post-layout-modern .main-wrap > .main > .ts-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Each section below supplies its own 20px content inset. */
    body.single-post.post-layout-modern .main-content.s-post-contain {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
        padding: 0 !important;
        background: var(--gf-white) !important;
    }

    /* Breadcrumbs: one line, with the current title truncated. */
    body.single-post.post-layout-modern #breadcrumb {
        display: block !important;
        margin: 0 !important;
        padding: 16px 0 8px !important;
        background: var(--gf-navy) !important;
        color: rgba(255, 255, 255, 0.58) !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body.single-post.post-layout-modern #breadcrumb > .inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
    }

    body.single-post.post-layout-modern #breadcrumb > .inner > span {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    body.single-post.post-layout-modern #breadcrumb > .inner > .current {
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.single-post.post-layout-modern #breadcrumb a,
    body.single-post.post-layout-modern #breadcrumb span {
        color: inherit !important;
    }

    body.single-post.post-layout-modern #breadcrumb a:hover {
        color: var(--gf-red) !important;
    }

    /* Actual SmartMag title/author wrapper. */
    body.single-post.post-layout-modern .s-post-contain > .the-post-header {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 18px 20px 22px !important;
        background: var(--gf-navy) !important;
        color: var(--gf-white) !important;
    }

    body.single-post.post-layout-modern .the-post-header > .post-meta {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.single-post.post-layout-modern .the-post-header h1.post-title {
        margin: 0 0 18px !important;
        padding: 0 !important;
        color: var(--gf-white) !important;
        line-height: 1.06 !important;
        text-decoration: none !important;
    }

    body.single-post.post-layout-modern .the-post-header h1.post-title::after {
        content: none !important;
        display: none !important;
    }

    body.single-post.post-layout-modern .the-post-header .post-meta-items {
        margin: 0 !important;
        color: var(--gf-muted) !important;
    }

    body.single-post.post-layout-modern .the-post-header .post-meta-items a,
    body.single-post.post-layout-modern .the-post-header .post-meta-items time,
    body.single-post.post-layout-modern .the-post-header .read-time {
        color: var(--gf-muted) !important;
    }

    body.single-post.post-layout-modern .the-post-header .post-author,
    body.single-post.post-layout-modern .the-post-header .post-author a {
        color: var(--gf-white) !important;
    }

    body.single-post.post-layout-modern .the-post-header .post-subtitle {
        color: rgba(255, 255, 255, 0.72) !important;
    }

    /* Outer image wrapper owns the navy and the bottom spacing. */
    body.single-post.post-layout-modern .s-post-contain > .single-featured {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 24px !important;
        background: var(--gf-navy) !important;
    }

    /* Inner image wrapper supplies only the rounded corners. */
    body.single-post.post-layout-modern .single-featured > .featured {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    body.single-post.post-layout-modern .single-featured .image-link,
    body.single-post.post-layout-modern .single-featured img {
        display: block !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    body.single-post.post-layout-modern .single-featured > .featured::after {
        content: none !important;
        display: none !important;
    }

    /* White begins at the complete body/tags/related-posts wrapper. */
    body.single-post.post-layout-modern .s-post-contain > .the-post {
        box-sizing: border-box !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 26px 20px 0 !important;
        background: var(--gf-white) !important;
        color: var(--gf-text) !important;
    }

    body.single-post.post-layout-modern .the-post .post-content {
        margin: 0 !important;
        padding: 0 !important;
        background: var(--gf-white) !important;
        color: var(--gf-text) !important;
        font-size: 17px !important;
        line-height: 1.62 !important;
    }

    body.single-post.post-layout-modern .the-post .post-content p {
        color: var(--gf-text) !important;
        font-size: 17px !important;
        line-height: 1.62 !important;
    }


    body.single-post.post-layout-modern .the-post > .related-posts {
        padding-top: 22px !important;
        padding-bottom: 24px !important;
    }

}

/* Keep YouTube embeds inside the article's side padding */
body.single-post .post-content .wp-block-embed-youtube,
body.single-post .post-content .wp-block-embed-youtube .fluid-width-video-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

/* Rounded video corners */
body.single-post .post-content .wp-block-embed-youtube .fluid-width-video-wrapper,
body.single-post .post-content .wp-block-embed-youtube iframe {
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* =========================================================
   GAMERFICIAL FOOTER — CONSOLIDATED
   ========================================================= */

footer.main-footer {
    margin-top: 40px !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: #081826 !important;
    color: #a8b4bf !important;
    border: 0 !important;
    box-shadow: none !important;
}

footer.main-footer .upper-footer,
footer.main-footer .lower-footer {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

footer.main-footer .upper-footer > .ts-contain,
footer.main-footer .lower-footer > .ts-contain {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1270px !important;
    margin: 0 auto !important;
}

footer.main-footer .upper-footer > .ts-contain {
    padding: 12px 55px 8px !important;
}

footer.main-footer .upper-footer .widgets.row,
footer.main-footer .widget,
footer.main-footer .widget_text,
footer.main-footer .textwidget {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

footer.main-footer .widget_media_image {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer.main-footer .widget_media_image img {
    display: block !important;
    width: 220px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
}

footer.main-footer p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
}

footer.main-footer .lower-footer {
    margin-top: 8px !important;
}

footer.main-footer .lower-footer > .inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 20px 32px !important;
    padding: 28px 55px 38px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer.main-footer .links {
    margin: 0 !important;
    text-align: left !important;
}

footer.main-footer .links .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

footer.main-footer .links .menu > li {
    margin: 0 !important;
    padding: 0 !important;
}

footer.main-footer .links .menu > li > a {
    display: inline-block !important;
    padding: 6px 0 !important;
    color: var(--gf-red) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    text-decoration: none !important;
}

footer.main-footer .links .menu > li > a:hover {
    color: var(--gf-white) !important;
}

footer.main-footer .copyright,
footer.main-footer .copyright-text {
    justify-self: end !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #a8b4bf !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

@media (max-width: 767px) {
    footer.main-footer {
        margin: 0 !important;
    }

    footer.main-footer .upper-footer > .ts-contain {
        padding: 10px 40px 6px !important;
    }

    footer.main-footer .widget_media_image img {
        width: 200px !important;
        margin-bottom: 5px !important;
    }

    footer.main-footer .lower-footer {
        margin-top: 6px !important;
    }

    footer.main-footer .lower-footer > .inner {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 25px 40px 32px !important;
    }

    footer.main-footer .copyright,
    footer.main-footer .copyright-text {
        justify-self: start !important;
        max-width: 100% !important;
        text-align: left !important;
    }
}




/* =========================================================
   DESKTOP ARTICLE HERO
   ========================================================= */

@media (min-width: 1024px) {
    body.single-post .main-content {
        position: relative;
        background: #081b2a !important;
        padding: 22px 16px 0 !important;
        box-shadow: 0 0 0 100vmax #081b2a;
        clip-path: inset(0 -100vmax);
    }

    body.single-post .post-title,
    body.single-post h1.post-title {
        color: #ffffff !important;
    }

    body.single-post .post-meta,
    body.single-post .post-meta span,
    body.single-post .post-meta time {
        color: #b8c5cf !important;
    }

    body.single-post .post-meta a {
        color: #ffffff !important;
    }

    body.single-post .featured,
    body.single-post .post-featured,
    body.single-post .featured-media,
    body.single-post .post-thumb {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.single-post .featured img,
    body.single-post .post-featured img,
    body.single-post .featured-media img,
    body.single-post .post-thumb img {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    body.single-post .post-content,
    body.single-post .entry-content {
        position: relative;
        width: calc(100% + 32px) !important;
        max-width: none !important;
        margin: 0 -16px !important;
        padding: 32px 40px 50px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 100vmax #ffffff;
        clip-path: inset(0 -100vmax);
    }

    body.single-post .post-content p,
    body.single-post .entry-content p {
        color: #222831 !important;
    }
}


/* =========================================================
   DESKTOP HEADER + BREADCRUMBS — CONSOLIDATED
   ========================================================= */

#smart-head,
.smart-head,
.smart-head-main,
.smart-head-main .smart-head-row,
.smart-head-main .inner,
.smart-head-main .ts-contain,
#smart-head .smart-head-row,
#smart-head .inner {
    background-color: #081b2a !important;
    background-image: none !important;
}

#smart-head,
.smart-head-main {
    border: 0 !important;
    box-shadow: none !important;
}

#smart-head .search-field,
#smart-head input[type="search"] {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

#smart-head .search-field::placeholder,
#smart-head input[type="search"]::placeholder {
    color: #a7b4bf !important;
}

body.single-post #breadcrumb,
body.single-post .breadcrumbs {
    background: #081b2a !important;
    color: #728999 !important;
    margin: 0 !important;
    padding-top: 17px !important;
    padding-bottom: 12px !important;
    border: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.single-post #breadcrumb a,
body.single-post .breadcrumbs a {
    color: #9fb2c0 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.single-post #breadcrumb a:hover,
body.single-post .breadcrumbs a:hover {
    color: #f0444c !important;
}

body.single-post #breadcrumb span,
body.single-post .breadcrumbs span {
    color: #728999 !important;
}

body.single-post #breadcrumb .delim,
body.single-post #breadcrumb .separator,
body.single-post .breadcrumbs .delim,
body.single-post .breadcrumbs .separator {
    color: #526b7b !important;
    margin: 0 7px !important;
}

body.single-post #breadcrumb + *,
body.single-post .breadcrumbs + * {
    margin-top: 0 !important;
}


/* =========================================
   GAMERFICIAL DESKTOP NAV ICONS
   Exact SmartMag menu targeting
   ========================================= */

/* Align icon + text */
#menu-primary > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

/* Base icon styling */
#menu-primary > li > a::before {
    content: "" !important;

    display: inline-block !important;

    width: 14px !important;
    height: 14px !important;

    flex: 0 0 14px !important;

    background-color: currentColor !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;

    opacity: .85;

    transition:
        background-color .2s ease,
        opacity .2s ease,
        transform .2s ease;
}


/* =========================================
   HOME
   ========================================= */

#menu-item-857 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 2.5 11h2.7v10h5.2v-6h3.2v6h5.2V11h2.7L12 3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 2.5 11h2.7v10h5.2v-6h3.2v6h5.2V11h2.7L12 3z'/%3E%3C/svg%3E");
}


/* =========================================
   NEWS
   ========================================= */

#menu-item-1325 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h14v3h2v15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 4v2h8V7H6zm0 4v2h8v-2H6zm0 4v2h5v-2H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3h14v3h2v15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 4v2h8V7H6zm0 4v2h8v-2H6zm0 4v2h5v-2H6z'/%3E%3C/svg%3E");
}


/* =========================================
   UPCOMING GAMES
   ========================================= */

#menu-item-1586 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2zm11 8H6v10h12V10zM8 12h3v3H8v-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2zm11 8H6v10h12V10zM8 12h3v3H8v-3z'/%3E%3C/svg%3E");
}


/* =========================================
   LEAKS
   ========================================= */

#menu-item-1326 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5C6.4 5 2.1 9.3 1 12c1.1 2.7 5.4 7 11 7s9.9-4.3 11-7c-1.1-2.7-5.4-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5C6.4 5 2.1 9.3 1 12c1.1 2.7 5.4 7 11 7s9.9-4.3 11-7c-1.1-2.7-5.4-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
}


/* =========================================
   REVIEWS
   ========================================= */

#menu-item-1471 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2.5 3 6.1 6.7 1-4.9 4.7 1.2 6.7-6-3.2-6 3.2 1.2-6.7-4.9-4.7 6.7-1 3-6.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2.5 3 6.1 6.7 1-4.9 4.7 1.2 6.7-6-3.2-6 3.2 1.2-6.7-4.9-4.7 6.7-1 3-6.1z'/%3E%3C/svg%3E");
}


/* =========================================
   FEATURES
   ========================================= */

#menu-item-1584 > a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 2 5 13h6l-1 9 9-12h-6.2l.7-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 2 5 13h6l-1 9 9-12h-6.2l.7-8z'/%3E%3C/svg%3E");
}


/* Gamerficial red interaction */
#menu-primary > li > a:hover::before,
#menu-primary > li.current-menu-item > a::before,
#menu-primary > li.current-post-parent > a::before {
    background-color: #ff5159 !important;
    opacity: 1;
}


/* Tiny movement on hover */
#menu-primary > li > a:hover::before {
    transform: translateY(-1px);
}


/* =========================================================
   ARTICLE IMAGE STYLING
   ========================================================= */

.single-post .post-content .wp-block-image {
    border-radius: 6px !important;
    overflow: hidden !important;
}

.single-post .post-content .wp-block-image img {
    display: block !important;
    border-radius: 6px !important;
    border-bottom: 4px solid #ff5159 !important;
    box-sizing: border-box !important;
}


/* =========================================================
   RELATED POSTS — CONSOLIDATED
   ========================================================= */

/* Hide tags everywhere on single articles. */
.single-post .the-post-tags,
.single-post #the-post-tags,
.single-post article .the-post-tags {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Shared related-post heading. */
.single-post .related-posts > .block-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e1e5e8 !important;
    border-left: 4px solid #ff5159 !important;
    border-radius: 6px !important;
}

.single-post .related-posts > .block-head::before,
.single-post .related-posts > .block-head::after,
.single-post .related-posts > .block-head .heading::before,
.single-post .related-posts > .block-head .heading::after {
    content: none !important;
    display: none !important;
}

.single-post .related-posts > .block-head .heading {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #081f2d !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.single-post .related-posts > .block-head .heading .color {
    color: #ff5159 !important;
}

/* Mobile: compact horizontal cards. */
@media (max-width: 767px) {
    .single-post .related-posts {
        position: relative !important;
        z-index: 2 !important;
        margin: 0 -20px !important;
        padding: 24px 20px 32px !important;
        background: #f4f6f8 !important;
    }

    .single-post .related-posts .block-content,
    .single-post .related-posts .block-wrap {
        margin: 0 !important;
        padding: 0 !important;
    }

    .single-post .related-posts .loop,
    .single-post .related-posts .posts,
    .single-post .related-posts .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .single-post .related-posts article,
    .single-post .related-posts .l-post {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(8,31,45,0.08) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03) !important;
    }

    .single-post .related-posts article .media,
    .single-post .related-posts .l-post .media {
        position: relative !important;
        flex: 0 0 118px !important;
        width: 118px !important;
        height: 118px !important;
        max-width: 118px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 3px solid #ff5159 !important;
        border-radius: 0 !important;
    }

    .single-post .related-posts .media > a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .single-post .related-posts .media img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
    }

    .single-post .related-posts article .content,
    .single-post .related-posts .l-post .content {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px 13px !important;
    }

    .single-post .related-posts .post-meta {
        margin: 0 !important;
        padding: 0 !important;
    }

    .single-post .related-posts .post-title {
        margin: 0 0 8px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }

    .single-post .related-posts .post-title a {
        color: #081f2d !important;
        text-decoration: none !important;
    }

    .single-post .related-posts .post-meta-items,
    .single-post .related-posts .post-meta-items *,
    .single-post .related-posts time {
        color: #81909a !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* Desktop/tablet: three vertical cards. */
@media (min-width: 768px) {
    .single-post .related-posts {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        padding: 24px !important;
        background: #f4f6f8 !important;
        border-radius: 8px !important;
    }

    .single-post .related-posts .loop,
    .single-post .related-posts .grid,
    .single-post .related-posts .posts {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .single-post .related-posts article,
    .single-post .related-posts .l-post {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(8,31,45,0.08) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03) !important;
        transition: transform .2s ease, box-shadow .2s ease !important;
    }

    .single-post .related-posts article:hover,
    .single-post .related-posts .l-post:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.04) !important;
    }

    .single-post .related-posts article .media,
    .single-post .related-posts .l-post .media {
        position: relative !important;
        display: block !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 3px solid #ff5159 !important;
        border-radius: 0 !important;
    }

    .single-post .related-posts .media > a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .single-post .related-posts .media img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        transition: transform .3s ease !important;
    }

    .single-post .related-posts article:hover .media img {
        transform: scale(1.025) !important;
    }

    .single-post .related-posts article .content,
    .single-post .related-posts .l-post .content {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 16px 16px !important;
        box-sizing: border-box !important;
    }

    .single-post .related-posts .post-meta {
        margin: 0 !important;
        padding: 0 !important;
    }

    .single-post .related-posts .post-title {
        margin: 0 0 10px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        font-weight: 800 !important;
    }

    .single-post .related-posts .post-title a {
        color: #081f2d !important;
        text-decoration: none !important;
    }

    .single-post .related-posts .post-title a:hover {
        color: #ff5159 !important;
    }

    .single-post .related-posts .post-meta-items,
    .single-post .related-posts .post-meta-items *,
    .single-post .related-posts time {
        margin: 0 !important;
        color: #82919b !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }
}

/* Bottom-of-article cleanup. */
.single-post .comments:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.single-post .main.ts-contain,
.single-post .main.ts-contain > .ts-row,
.single-post .main-content,
.single-post .the-post-modern,
.single-post .the-post.s-post-modern.the-post-modern {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.single-post .the-post.s-post-modern.the-post-modern,
.single-post .the-post-modern > article,
.single-post .the-post-modern .post-content,
.single-post .the-post-modern .post-content-wrap {
    background-color: #ffffff !important;
}

.single-post .the-post.s-post-modern.the-post-modern::before,
.single-post .the-post.s-post-modern.the-post-modern::after,
.single-post .the-post-modern > article::before,
.single-post .the-post-modern > article::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

.single-post .main-footer {
    margin-top: 0 !important;
}


/* =========================================
   RELATED POSTS - FOOTER NAVY BACKGROUND
   ========================================= */

.single-post .related-posts,
.single-post .the-post-modern .related-posts {
    background: #081826 !important;
}

/* Related Posts heading on navy */
.single-post .related-posts > .block-head {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 4px solid #fb5f58 !important;
}

.single-post .related-posts > .block-head .heading {
    color: #ffffff !important;
}

.single-post .related-posts > .block-head .heading .color {
    color: #fb5f58 !important;
}

/* =========================================
   FIX DESKTOP RELATED POSTS NAVY BACKGROUND
   ========================================= */

@media (min-width: 768px) {

    .single-post .related-posts,
    .single-post .the-post-modern .related-posts {
        background: transparent !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding: 24px !important;

        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================
   RELATED POSTS - FULL WIDTH NAVY BAND
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

    .single-post .related-posts,
    .single-post .the-post-modern .related-posts {
        position: relative !important;

        background: #081826 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding: 28px 24px 30px !important;

        border-radius: 0 !important;

        /* Extend navy to both edges without widening cards */
        box-shadow: 0 0 0 100vmax #081826 !important;
        clip-path: inset(0 -100vmax) !important;
    }


    /* Heading */
    .single-post .related-posts > .block-head {
        background: rgba(255,255,255,0.06) !important;

        border: 1px solid rgba(255,255,255,0.10) !important;
        border-left: 4px solid #fb5f58 !important;

        border-radius: 6px !important;

        padding: 13px 16px !important;
        margin: 0 0 18px !important;

        box-shadow: none !important;
    }


    /* Remove SmartMag heading decorations */
    .single-post .related-posts > .block-head::before,
    .single-post .related-posts > .block-head::after,
    .single-post .related-posts .heading::before,
    .single-post .related-posts .heading::after {
        content: none !important;
        display: none !important;
    }


    /* RELATED */
    .single-post .related-posts > .block-head .heading {
        color: #ffffff !important;
    }


    /* POSTS */
    .single-post .related-posts > .block-head .heading .color {
        color: #fb5f58 !important;
    }


    /* Cards stay white */
    .single-post .related-posts article,
    .single-post .related-posts .l-post {
        background: #ffffff !important;
    }


    /* Flow straight into footer */
    .single-post .main-footer {
        margin-top: 0 !important;
    }
}

/* =========================================
   FIX ARTICLE → RELATED POSTS TRANSITION
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

    /* Parent wrapper becomes navy */
    .single-post .the-post.s-post-modern.the-post-modern {
        background: #081826 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-shadow: none !important;
    }


    /* Actual article body stays white */
    .single-post .the-post-modern > article {
        position: relative !important;

        background: #ffffff !important;

        margin: 0 !important;
        padding-bottom: 32px !important;

        /* Extend article white to full browser width */
        box-shadow: 0 0 0 100vmax #ffffff !important;
        clip-path: inset(0 -100vmax) !important;
    }


    /* Related Posts begins immediately after article */
    .single-post .the-post-modern > .related-posts {
        position: relative !important;

        background: #081826 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding: 28px 24px 30px !important;

        border-radius: 0 !important;

        /* Extend navy to full browser width */
        box-shadow: 0 0 0 100vmax #081826 !important;
        clip-path: inset(0 -100vmax) !important;
    }


    /* No invisible comments block creating space */
    .single-post .the-post-modern > .comments:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
}


/* =========================================
   FOOTER LOGO + DESCRIPTION SPACING
   ========================================= */

@media (min-width: 768px) {

    .main-footer .upper-footer .widgets.row {
        display: grid !important;
        grid-template-columns: 220px minmax(380px, 500px) !important;
        align-items: center !important;
        justify-content: start !important;

        column-gap: 36px !important;

        margin: 0 !important;
    }

    /* Logo column */
    .main-footer .upper-footer .widget_media_image {
        width: 220px !important;
        max-width: 220px !important;
        margin: 0 !important;
    }

    /* Description column */
    .main-footer .upper-footer .widget_text,
    .main-footer .upper-footer .textwidget {
        width: 100% !important;
        max-width: 500px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .main-footer .upper-footer .widget_text p,
    .main-footer .upper-footer .textwidget p {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        max-width: 500px !important;
    }
}

/* =========================================================
   GAMERFICIAL TABLET LAYOUT
   768px - 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    /* =====================================================
       TABLET HEADER
       ===================================================== */

    #smart-head-mobile,
    #smart-head-mobile .smart-head-row,
    #smart-head-mobile .smart-head-mid,
    #smart-head-mobile .inner {
        background: #081826 !important;
        background-color: #081826 !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }

    #smart-head-mobile {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }

    #smart-head-mobile > .smart-head-row > .inner.wrap,
    #smart-head-mobile .smart-head-mid > .inner.wrap {
        display: grid !important;

        grid-template-columns: 40px minmax(0, 1fr) max-content !important;
        align-items: center !important;

        gap: 14px !important;

        width: 100% !important;
        max-width: none !important;
        height: 64px !important;

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

        box-sizing: border-box !important;
    }


    /* Burger */
    #smart-head-mobile .items-left {
        grid-column: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile .hamburger-icon,
    #smart-head-mobile .hamburger-icon .inner,
    #smart-head-mobile .hamburger-icon .inner::before,
    #smart-head-mobile .hamburger-icon .inner::after {
        color: #ffffff !important;
    }


    /* Logo */
    #smart-head-mobile .items-center {
        grid-column: 2 !important;

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

        min-width: 0 !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile .logo-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 165px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile .logo-link img,
    #smart-head-mobile img.logo-image {
        display: block !important;

        width: 165px !important;
        max-width: 165px !important;

        height: auto !important;
        max-height: 38px !important;

        object-fit: contain !important;
    }


    /* Subscribe */
    #smart-head-mobile .items-right {
        grid-column: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #smart-head-mobile a[href*="/Gamerficial/subscribe"] {
        color: #fb5f58 !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: .3px !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       MAIN ARTICLE WIDTH
       ===================================================== */

    body.single-post.post-layout-modern .main-wrap > .main.ts-contain {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.single-post.post-layout-modern .main > .ts-row {
        margin: 0 !important;
    }

    body.single-post.post-layout-modern .main-content.s-post-contain {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }


    /* =====================================================
       BREADCRUMBS
       ===================================================== */

    body.single-post.post-layout-modern #breadcrumb,
    body.single-post.post-layout-modern .breadcrumbs {
        width: 100% !important;

        margin: 0 !important;
        padding: 14px 0 10px !important;

        background: #081826 !important;
        color: #7895a8 !important;

        border: 0 !important;

        font-size: 12px !important;
    }

    body.single-post.post-layout-modern #breadcrumb > .inner {
        width: 100% !important;
        max-width: none !important;

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

        box-sizing: border-box !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.single-post.post-layout-modern #breadcrumb a {
        color: #8eabbc !important;
    }

    body.single-post.post-layout-modern #breadcrumb a:hover {
        color: #fb5f58 !important;
    }


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

    body.single-post.post-layout-modern
    .s-post-contain > .the-post-header {
        width: 100% !important;

        margin: 0 !important;
        padding: 22px 40px 24px !important;

        background: #081826 !important;
        color: #ffffff !important;

        box-sizing: border-box !important;
    }


    /* Article title */
    body.single-post.post-layout-modern
    .the-post-header h1.post-title {
        max-width: 900px !important;

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

        color: #ffffff !important;

        font-size: clamp(34px, 4.4vw, 44px) !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
    }


    /* Author/meta */
    body.single-post.post-layout-modern
    .the-post-header .post-meta-items,
    body.single-post.post-layout-modern
    .the-post-header .post-meta-items a,
    body.single-post.post-layout-modern
    .the-post-header .post-meta-items time,
    body.single-post.post-layout-modern
    .the-post-header .read-time {
        color: rgba(255,255,255,.62) !important;
    }

    body.single-post.post-layout-modern
    .the-post-header .post-author,
    body.single-post.post-layout-modern
    .the-post-header .post-author a {
        color: #ffffff !important;
    }


    /* =====================================================
       FEATURED IMAGE
       ===================================================== */

    body.single-post.post-layout-modern
    .s-post-contain > .single-featured {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 40px 30px !important;

        background: #081826 !important;

        box-sizing: border-box !important;
    }

    body.single-post.post-layout-modern
    .single-featured > .featured {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: transparent !important;

        border-radius: 10px !important;
        box-shadow: none !important;
    }

    body.single-post.post-layout-modern
    .single-featured img,
    body.single-post.post-layout-modern
    .single-featured .image-link {
        display: block !important;

        width: 100% !important;

        border-radius: 10px !important;
        box-shadow: none !important;
    }


    /* =====================================================
       ARTICLE BODY
       ===================================================== */

    body.single-post.post-layout-modern
    .s-post-contain > .the-post {
        width: 100% !important;

        margin: 0 !important;
        padding: 32px 40px 0 !important;

        background: #ffffff !important;
        color: #202731 !important;

        box-sizing: border-box !important;
    }

    body.single-post.post-layout-modern
    .the-post .post-content {
        margin: 0 auto !important;

        background: #ffffff !important;

        color: #202731 !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    body.single-post.post-layout-modern
    .the-post .post-content p {
        color: #202731 !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }


    /* Gutenberg images */
    body.single-post .post-content .wp-block-image {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.single-post .post-content .wp-block-image img {
        width: 100% !important;
        height: auto !important;

        border-radius: 6px !important;
        border-bottom: 3px solid #fb5f58 !important;
    }


    /* =====================================================
       HIDE TAGS
       ===================================================== */

    body.single-post .the-post-tags,
    body.single-post #the-post-tags {
        display: none !important;
    }


    /* =====================================================
       RELATED POSTS - TABLET
       Keep 3 cards rather than trying to squeeze 4
       ===================================================== */

    body.single-post .related-posts .loop,
    body.single-post .related-posts .grid,
    body.single-post .related-posts .posts,
    body.single-post .related-posts .loop-grid {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 14px !important;
    }

    body.single-post .related-posts article:nth-child(4),
    body.single-post .related-posts .l-post:nth-child(4) {
        display: none !important;
    }

    body.single-post .related-posts .post-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .main-footer {
        margin-top: 0 !important;
        background: #081826 !important;
    }
}

/* =========================================================
   GAMERFICIAL MOBILE FOOTER — FINAL SPACING FIX
   ========================================================= */

@media (max-width: 767px) {

    /* Main footer */
    footer.main-footer {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* =========================
       LOGO + DESCRIPTION AREA
       ========================= */

    footer.main-footer .upper-footer {
        padding: 34px 0 28px !important;
        margin: 0 !important;
    }

    footer.main-footer .upper-footer > .ts-contain {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    footer.main-footer .upper-footer .widgets.row {
        display: block !important;
        margin: 0 !important;
    }

    /* Logo widget */
    footer.main-footer .upper-footer .widget_media_image {
        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    footer.main-footer .upper-footer .widget_media_image img {
        display: block !important;
        width: auto !important;
        max-width: 240px !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Description widget */
    footer.main-footer .upper-footer .widget_text,
    footer.main-footer .upper-footer .textwidget {
        margin: 0 !important;
        padding: 0 !important;
    }

    footer.main-footer .upper-footer .widget_text p,
    footer.main-footer .upper-footer .textwidget p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.48 !important;
    }


    /* =========================
       LOWER FOOTER
       ========================= */

    footer.main-footer .lower-footer {
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.10) !important;
    }

    footer.main-footer .lower-footer > .inner {
        padding: 27px 38px 30px !important;
        margin: 0 !important;
        display: block !important;
    }


    /* =========================
       FOOTER LINKS
       ========================= */

    footer.main-footer .menu-secondary-container {
        margin: 0 0 26px !important;
        padding: 0 !important;
    }

    footer.main-footer #menu-secondary {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        justify-content: start !important;
        column-gap: 36px !important;
        row-gap: 18px !important;

        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    footer.main-footer #menu-secondary > li {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    footer.main-footer #menu-secondary > li > a {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }


    /* =========================
       COPYRIGHT
       ========================= */

    footer.main-footer .copyright {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.45 !important;
    }

    footer.main-footer .copyright p,
    footer.main-footer .copyright-text {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 767px) {
    footer.main-footer .upper-footer .widget_media_image img {
        margin-left: -8px !important;
    }
}

/* Gamerficial comment form */
body.single-post .comments #respond {
    background: #fff !important;
    border: 1px solid #e4e9ed !important;
    border-top: 4px solid #fb5f58 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 12px 32px rgba(8, 24, 38, 0.10) !important;
}

body.single-post .comments #reply-title {
    color: #081826 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

body.single-post .comments .logged-in-as,
body.single-post .comments label {
    color: #526575 !important;
}

body.single-post .comments a {
    color: #081826 !important;
}

body.single-post .comments a:hover {
    color: #fb5f58 !important;
}

body.single-post .comments textarea,
body.single-post .comments input[type="text"],
body.single-post .comments input[type="email"],
body.single-post .comments input[type="url"] {
    background: #f6f8fa !important;
    color: #081826 !important;
    border: 1px solid #dce3e8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.single-post .comments textarea:focus,
body.single-post .comments input:focus {
    border-color: #fb5f58 !important;
    outline: 2px solid rgba(251, 95, 88, 0.15) !important;
}

body.single-post .comments input[type="submit"] {
    background: #081826 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 14px 22px !important;
    font-weight: 800 !important;
}

body.single-post .comments input[type="submit"]:hover {
    background: #fb5f58 !important;
}

@media (max-width: 767px) {
    body.single-post .comments #respond {
        padding: 22px 18px !important;
    }
}

/* Gamerficial Steam Button */

.gamerficial-steam-button {
    display: flex !important;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    max-width: 520px;
    min-height: 76px;

    margin: 30px 0 15px;
    padding: 15px 20px;

    background: linear-gradient(
        135deg,
        #1b2838 0%,
        #171f28 55%,
        #101820 100%
    );

    border: 1px solid rgba(102, 192, 244, 0.25);
    border-radius: 8px;

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

    color: #ffffff !important;
    text-decoration: none !important;

    position: relative;
    overflow: hidden;

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

/* Blue accent */
.gamerficial-steam-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;
    background: #66c0f4;
}

/* Arrow */
.gamerficial-steam-button::after {
    content: "→";

    position: absolute;
    right: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: #66c0f4;
    font-size: 24px;
}

/* View on Steam */
.gamerficial-steam-button-label {
    display: block;

    margin-bottom: 5px;

    color: #66c0f4 !important;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Game title */
.gamerficial-steam-button-title {
    display: block;

    padding-right: 40px;

    color: #ffffff !important;

    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

/* Hover */
.gamerficial-steam-button:hover {
    color: #ffffff !important;
    text-decoration: none !important;

    transform: translateY(-2px);

    border-color: rgba(102, 192, 244, 0.6);

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Stop theme colours overriding it */
.gamerficial-steam-button:visited,
.gamerficial-steam-button:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mobile */
@media (max-width: 767px) {

    .gamerficial-steam-button {
        max-width: 100%;
        min-height: 70px;

        margin: 25px 0 12px;
        padding: 14px 17px;
    }

    .gamerficial-steam-button-title {
        font-size: 17px;
    }

    .gamerficial-steam-button::after {
        right: 17px;
        font-size: 22px;
    }
}
/* POPULAR NOW — ARTICLE PAGES ONLY */

/* Navy panel */
body.single-post #smartmag-block-posts-small-4 {
    box-sizing: border-box !important;
    padding: 18px !important;
    background: #102b3d !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

body.single-post #smartmag-block-posts-small-4 .block,
body.single-post #smartmag-block-posts-small-4 .block-wrap,
body.single-post #smartmag-block-posts-small-4 .block-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Heading */
body.single-post #smartmag-block-posts-small-4 .block-head {
    margin: 0 0 6px !important;
    padding: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid #ff4f59 !important;
}

body.single-post #smartmag-block-posts-small-4 .heading {
    color: #fff !important;
    font-size: 14px !important;
    margin: 0 !important;
}

body.single-post #smartmag-block-posts-small-4 .block-head::before,
body.single-post #smartmag-block-posts-small-4 .block-head::after,
body.single-post #smartmag-block-posts-small-4 .heading::before,
body.single-post #smartmag-block-posts-small-4 .heading::after {
    display: none !important;
}

/* Horizontal rows */
body.single-post #smartmag-block-posts-small-4 .loop-small {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 .loop-small > article.l-post.small-post {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Square thumbnail */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 article.l-post.small-post > .media {
    position: relative !important;
    flex: 0 0 86px !important;
    width: 86px !important;
    height: 86px !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

body.single-post #smartmag-block-posts-small-4 .media > a,
body.single-post #smartmag-block-posts-small-4 .media .img,
body.single-post #smartmag-block-posts-small-4 .media img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
}

body.single-post #smartmag-block-posts-small-4 .media > a::before {
    display: none !important;
}

/* Headline beside the image */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 article.l-post.small-post > .content {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-post #smartmag-block-posts-small-4 .post-meta {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title,
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

body.single-post #smartmag-block-posts-small-4 h4.post-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    max-height: 84px !important;
}

body.single-post #smartmag-block-posts-small-4 .post-title::after,
body.single-post #smartmag-block-posts-small-4 .post-meta-items {
    display: none !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title a:hover {
    color: #ff737b !important;
}

/* Show four posts */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 .loop-small > article.l-post.small-post:nth-child(4) {
    display: flex !important;
    border-bottom: 0 !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 .loop-small > article.l-post.small-post:nth-child(n+5) {
    display: none !important;
}

/* Disable sticky sidebar */
body.single-post .main-sidebar {
    position: relative !important;
    align-self: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
}

body.single-post .main-sidebar .theiaStickySidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* GAMERFICIAL — RELATED POSTS AND COMMENTS
   Add below your existing Additional CSS. Article pages only.
*/

/* Related Posts heading: match Popular Now */
html body.single-post .related-posts > .block-head {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid #ff4f59 !important;
    border-radius: 0 !important;
    padding: 0 0 12px !important;
    margin: 0 0 18px !important;
    box-shadow: none !important;
}
html body.single-post .related-posts > .block-head .heading,
html body.single-post .related-posts > .block-head .heading .color {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
html body.single-post .related-posts > .block-head::before,
html body.single-post .related-posts > .block-head::after,
html body.single-post .related-posts > .block-head .heading::before,
html body.single-post .related-posts > .block-head .heading::after {
    display: none !important;
}

/* Navy article cards */
html body.single-post .related-posts article.l-post,
html body.single-post .related-posts article.l-post:hover {
    background: #102b3d !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transform: none !important;
}
html body.single-post .related-posts article.l-post .content {
    background: #102b3d !important;
}
html body.single-post .related-posts article.l-post .media {
    border-bottom: 2px solid #ff4f59 !important;
    box-shadow: none !important;
}
html body.single-post .related-posts article.l-post .post-title,
html body.single-post .related-posts article.l-post .post-title a {
    color: #fff !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}
html body.single-post .related-posts article.l-post .post-title a:hover {
    color: #ff737b !important;
}
html body.single-post .related-posts .post-meta-items,
html body.single-post .related-posts .post-meta-items *,
html body.single-post .related-posts .post-date {
    color: #a9bdca !important;
}

/* Comment panel */
html body.single-post .comments #respond {
    background: #102b3d !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 24px !important;
    box-shadow: none !important;
}
html body.single-post .comments #reply-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 0 14px !important;
    margin: 0 0 20px !important;
    border: 0 !important;
    border-bottom: 2px solid #ff4f59 !important;
}
html body.single-post .comments #reply-title .heading {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
html body.single-post .comments #reply-title::before,
html body.single-post .comments #reply-title::after,
html body.single-post .comments #reply-title .heading::after {
    display: none !important;
}
html body.single-post .comments #respond p,
html body.single-post .comments #respond label {
    color: #b9cbd7 !important;
}
html body.single-post .comments #respond a {
    color: #fff !important;
}
html body.single-post .comments #respond a:hover {
    color: #ff737b !important;
	
}

@media (max-width: 767px) {
    html body.single-post .the-post > .comments {
        background: #081826 !important;
        margin: 0 !important;
        padding: 24px 0 !important;
        border: 0 !important;
        box-shadow: 0 0 0 100vmax #081826 !important;
        clip-path: inset(0 -100vmax) !important;
    }

    html body.single-post .comments #comments,
    html body.single-post .comments .comments-area {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body.single-post .comments #respond {
        margin: 0 !important;
        border: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Hide article title and its preceding separator */
    html body.single-post #breadcrumb > .inner > .current,
    html body.single-post #breadcrumb > .inner > .delim:nth-last-child(2) {
        display: none !important;
    }

    html body.single-post.post-layout-modern #breadcrumb {
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    html body.single-post.post-layout-modern #breadcrumb > .inner {
        gap: 7px !important;
    }

    html body.single-post.post-layout-modern #breadcrumb > .inner > .delim {
        margin: 0 !important;
        opacity: .5;
    }
}

/* =========================================
   GAMERFICIAL - VICE STYLE HEADER LAYOUT
   SmartMag builder: Left = Site Logo,
   Centre = Main Nav, Right = Search.
   ========================================= */

@media (min-width: 1025px) {
    #smart-head .smart-head-row-3 > .inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #smart-head .smart-head-row-3 > .inner > .items-left {
        flex: 0 0 auto !important;
        width: auto !important;
        justify-content: flex-start !important;
    }

    #smart-head .smart-head-row-3 .items-left .logo-link {
        margin: 0 !important;
    }

    #smart-head .smart-head-row-3 > .inner > .items-center {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 30px !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    #smart-head .smart-head-row-3 .items-center .nav-wrap {
        width: auto !important;
        justify-content: flex-start !important;
    }

    #smart-head .smart-head-row-3 > .inner > .items-right {
        flex: 1 1 auto !important;
        margin-left: auto !important;
        padding-left: 30px !important;
        justify-content: flex-end !important;
    }
}

/* =========================================
   GAMERFICIAL DESKTOP NAV - POLISHED
   ========================================= */

@media (min-width: 1025px) {

    /* Menu items */
    #menu-primary > li > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        gap: 9px !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1px !important;
        color: #ffffff !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        /* Remove previous low underline */
        box-shadow: none !important;
    }


    /* Your existing custom icons */
    #menu-primary > li > a::before {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;

        background-color: #ffffff !important;
        opacity: 0.9 !important;

        transition:
            background-color 0.2s ease,
            transform 0.2s ease,
            opacity 0.2s ease !important;
    }


    /* Red icon on hover/current section */
    #menu-primary > li > a:hover::before,
    #menu-primary > li.current-menu-item > a::before,
    #menu-primary > li.current-post-parent > a::before {
        background-color: #ff5159 !important;
        opacity: 1 !important;
    }


    /* New underline - positioned close to text */
    #menu-primary > li > a::after {
        content: "" !important;
        position: absolute !important;

        left: 18px !important;
        right: 18px !important;

        /* Positions line just underneath menu text */
        top: calc(50% + 16px) !important;

        height: 2px !important;
        background: #ff5159 !important;
        border-radius: 2px !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;

        transition: transform 0.2s ease !important;
    }


    /* Show underline */
    #menu-primary > li > a:hover::after,
    #menu-primary > li.current-menu-item > a::after,
    #menu-primary > li.current-post-parent > a::after {
        transform: scaleX(1) !important;
    }
}


/* Solid navy background for the menu drawer */
#off-canvas,
.off-canvas {
    background: #081826 !important;
    opacity: 1 !important;
}

#off-canvas .off-canvas-head,
#off-canvas .off-canvas-content,
.off-canvas .off-canvas-head,
.off-canvas .off-canvas-content {
    background: #081826 !important;
}

/* Restore mobile header background */
@media (max-width: 767px) {
    #smart-head-mobile,
    #smart-head-mobile .smart-head-row,
    #smart-head-mobile .smart-head-mid,
    #smart-head-mobile .smart-head-row > .inner {
        background: #081826 !important;
        background-image: none !important;
    }
}

/* Mobile article: navy through to below featured image */
@media (max-width: 767px) {
    body.single-post.post-layout-modern .s-post-contain > .the-post-header,
    body.single-post.post-layout-modern .s-post-contain > .single-featured {
        background: #081826 !important;
        margin: 0 !important;
    }

    body.single-post.post-layout-modern .s-post-contain > .single-featured {
        padding-bottom: 24px !important;
    }

    body.single-post.post-layout-modern .the-post-header h1.post-title {
        color: #ffffff !important;
    }

    body.single-post.post-layout-modern .the-post-header .post-meta-items,
    body.single-post.post-layout-modern .the-post-header .post-meta-items a,
    body.single-post.post-layout-modern .the-post-header .post-meta-items time,
    body.single-post.post-layout-modern .the-post-header .read-time {
        color: #b4bec7 !important;
    }

    body.single-post.post-layout-modern .s-post-contain > .the-post {
        background: #ffffff !important;
    }
}

/* Mobile breadcrumbs */
@media (max-width: 767px) {
    html body.single-post #breadcrumb,
    html body.single-post #breadcrumb > .inner {
        background: #081826 !important;
        color: #a7b4bf !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body.single-post #breadcrumb {
        margin: 0 !important;
        padding: 12px 0 8px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    html body.single-post #breadcrumb > .inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        padding: 0 20px !important;
    }

    html body.single-post #breadcrumb a,
    html body.single-post #breadcrumb span {
        color: #a7b4bf !important;
    }

    /* Keep Home and category; hide the article title */
    html body.single-post #breadcrumb > .inner > .current,
    html body.single-post #breadcrumb > .inner > .delim:nth-last-child(2) {
        display: none !important;
    }
}

/* Mobile breadcrumbs: navy across the entire padded area */
@media (max-width: 767px) {
    html body.single-post .main-wrap > nav#breadcrumb.breadcrumbs {
        background: #081826 !important;
        background-clip: border-box !important;
        background-origin: border-box !important;

        margin: 0 !important;
        padding: 12px 0 8px !important;
        border: 0 !important;
        box-shadow: none !important;

        color: #a7b4bf !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    html body.single-post nav#breadcrumb > .inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;

        margin: 0 !important;
        padding: 0 20px !important;
        background: transparent !important;
    }

    html body.single-post nav#breadcrumb a,
    html body.single-post nav#breadcrumb span {
        color: #a7b4bf !important;
    }

    html body.single-post nav#breadcrumb > .inner > .current,
    html body.single-post nav#breadcrumb > .inner > .delim:nth-last-child(2) {
        display: none !important;
    }
}

/* Make the mobile hamburger bars white */
#smart-head-mobile .offcanvas-toggle {
    color: #ffffff !important;
    opacity: 1 !important;
}

#smart-head-mobile .hamburger-icon .inner,
#smart-head-mobile .hamburger-icon .inner::before,
#smart-head-mobile .hamburger-icon .inner::after {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Restore original burger menu theme colours */
#off-canvas {
    --gf-navy: #081826;
    --gf-red: #fb5f58;
    --gf-panel: #132636;
    --gf-social: #182c3d;
    --gf-white: #ffffff;
    --gf-text: #202731;
    --gf-muted: rgba(255, 255, 255, 0.55);
    --gf-divider: rgba(255, 255, 255, 0.055);
}

/* Align Follow Us and Subscribe rows */
#off-canvas .gamerficial-follow-row,
#off-canvas .gamerficial-subscribe-button {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    gap: 16px !important;
}

#off-canvas .gamerficial-follow-icon,
#off-canvas .gamerficial-subscribe-star {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    margin: 0 !important;
}

#off-canvas .gamerficial-follow-label,
#off-canvas .gamerficial-subscribe-text {
    flex: 1 1 auto !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}

#off-canvas .gamerficial-follow-arrow,
#off-canvas .gamerficial-subscribe-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    flex: 0 0 24px !important;
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
}
/* Smaller mobile hamburger */
#smart-head-mobile .hamburger-icon {
    width: 22px !important;
    height: 16px !important;
}

#smart-head-mobile .hamburger-icon .inner,
#smart-head-mobile .hamburger-icon .inner::before,
#smart-head-mobile .hamburger-icon .inner::after {
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
}

#smart-head-mobile .hamburger-icon .inner {
    top: 7px !important;
}

#smart-head-mobile .hamburger-icon .inner::before {
    top: -6px !important;
}

#smart-head-mobile .hamburger-icon .inner::after {
    top: 6px !important;
}

/* Collapsible comments */
.gf-comments-toggle {
    margin: 24px 0;
    background: #081826;
    color: #fff;
    border: 1px solid #253e4e;
    border-radius: 6px;
}

.gf-comments-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.gf-comments-toggle > summary::-webkit-details-marker {
    display: none;
}

.gf-comments-toggle > summary::after {
    content: "+";
    color: #fb5f58;
    font-size: 24px;
    line-height: 1;
}

.gf-comments-toggle[open] > summary::after {
    content: "−";
}

.gf-comments-toggle > summary:focus-visible {
    outline: 2px solid #fb5f58;
    outline-offset: 3px;
}

html body.single-post .gf-comments-toggle > .comments,
html body.single-post .gf-comments-toggle > #comments,
html body.single-post .gf-comments-toggle > #respond {
    margin: 0 !important;
    padding: 0 16px 16px !important;
    box-shadow: none !important;
    clip-path: none !important;
}


/* Article heading spacing */
.single-post .the-post-header .post-meta {
  row-gap: 0 !important;
}

.single-post .the-post-header .meta-above {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Category label above the title */
.single-post .the-post-header .meta-above .post-cat {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.single-post .the-post-header .meta-above .post-cat a.category {
  display: inline-block !important;
  color: #ff5149 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.single-post .the-post-header .meta-above .post-cat a.category:hover {
  color: #ffffff !important;
}

/* Title and author spacing */
.single-post .the-post-header h1.post-title {
  margin: 0 !important;
  line-height: 1.12 !important;
}

.single-post .the-post-header .meta-below {
  margin-top: 22px !important;
}

/* Keep category text compact */
.single-post .the-post-header .post-meta .meta-above,
.single-post .the-post-header .post-meta .post-cat,
.single-post .the-post-header .post-meta .post-cat a.category {
  line-height: 1.2 !important;
}

/* Add space beneath the category only */
.single-post .the-post-header .post-meta .meta-above {
  margin-bottom: 0 !important;
}

.single-post .the-post-header .post-meta .meta-above .post-cat {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
}

/* Remove any title spacing that could interfere */
.single-post .the-post-header .post-meta h1.post-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Article Subscribe button */
body.single-post .the-post a.gf-article-subscribe {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 28px 0 !important;
  padding: 18px 20px !important;

  background: #081826 !important;
  border: 1px solid #304858 !important;
  border-radius: 10px !important;

  color: #fb5f58 !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

body.single-post .the-post a.gf-article-subscribe > span {
  color: inherit !important;
}

body.single-post .the-post .gf-subscribe-arrow {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  font-size: 26px !important;
}

body.single-post .the-post a.gf-article-subscribe:hover {
  background: #102536 !important;
  border-color: #fb5f58 !important;
}

body.single-post .the-post a.gf-article-subscribe:focus-visible {
  outline: 2px solid #fb5f58 !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  body.single-post .the-post a.gf-article-subscribe {
    padding: 16px !important;
    font-size: 16px !important;
  }
}

/* Related posts: compact rows */
body.single-post .related-posts .loop {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.single-post .related-posts article.l-post {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: #102c3c !important;
  border: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Landscape thumbnails */
body.single-post .related-posts article.l-post > .media {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.single-post .related-posts .media > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.single-post .related-posts .media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove decorative image edges */
body.single-post .related-posts .media::before,
body.single-post .related-posts .media::after,
body.single-post .related-posts .media > a::before,
body.single-post .related-posts .media > a::after {
  display: none !important;
}

/* Title and date */
body.single-post .related-posts article.l-post > .content {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-post .related-posts h4.post-title {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
}

body.single-post .related-posts h4.post-title a {
  color: #ffffff !important;
}

body.single-post .related-posts .meta-below {
  margin-top: 7px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #a8bbc7 !important;
}

@media (max-width: 600px) {
  body.single-post .related-posts article.l-post {
    gap: 12px !important;
    padding: 10px !important;
  }

  body.single-post .related-posts article.l-post > .media {
    flex-basis: 110px !important;
    width: 110px !important;
  }

  body.single-post .related-posts h4.post-title {
    font-size: 14px !important;
  }
}

/* Coral footer menu links */
.main-footer .lower-footer #menu-secondary a {
  color: #fb5f58 !important;
  opacity: 1 !important;
}

.main-footer .lower-footer #menu-secondary a:hover,
.main-footer .lower-footer #menu-secondary a:focus-visible {
  color: #ffffff !important;
}

/* Remove navy space below the mobile article image */
@media (max-width: 767px) {
    body.single-post.post-layout-modern .s-post-contain > .single-featured {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /* White backgrounds below the site header */
    html body.single-post.post-layout-modern .main-wrap > nav#breadcrumb.breadcrumbs,
    html body.single-post.post-layout-modern #breadcrumb > .inner,
    html body.single-post.post-layout-modern .s-post-contain > .the-post-header,
    html body.single-post.post-layout-modern .s-post-contain > .single-featured {
        background: #ffffff !important;
    }

    /* Dark article title */
    html body.single-post.post-layout-modern .the-post-header,
    html body.single-post.post-layout-modern .the-post-header h1.post-title {
        color: #202731 !important;
    }

    /* Readable breadcrumbs and author details */
    html body.single-post.post-layout-modern #breadcrumb,
    html body.single-post.post-layout-modern #breadcrumb a,
    html body.single-post.post-layout-modern #breadcrumb span,
    html body.single-post.post-layout-modern .the-post-header .post-meta-items,
    html body.single-post.post-layout-modern .the-post-header .post-meta-items a,
    html body.single-post.post-layout-modern .the-post-header .post-meta-items time,
    html body.single-post.post-layout-modern .the-post-header .read-time,
    html body.single-post.post-layout-modern .the-post-header .post-author,
    html body.single-post.post-layout-modern .the-post-header .post-author a,
    html body.single-post.post-layout-modern .the-post-header .post-subtitle {
        color: #52606d !important;
    }

    /* Remove extra space beneath the image */
    html body.single-post.post-layout-modern .s-post-contain > .single-featured {
        padding-bottom: 0 !important;
    }
}

/* White article wrapper above the footer */
html body.single-post .the-post.s-post-modern.the-post-modern {
    background: #ffffff !important;
}

/* Remove the navy band behind Related Posts */
html body.single-post .the-post-modern > .related-posts,
html body.single-post .related-posts {
    background: #ffffff !important;
    box-shadow: none !important;
    clip-path: none !important;
}

/* Keep the heading readable on white */
html body.single-post .related-posts > .block-head .heading,
html body.single-post .related-posts > .block-head .heading .color {
    color: #081826 !important;
}

@media (max-width: 767px) {
    footer.main-footer .upper-footer {
        padding: 24px 0 !important;
    }

    footer.main-footer .upper-footer > .ts-contain {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    footer.main-footer .upper-footer .widget_media_image {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    footer.main-footer .upper-footer .widget_media_image img {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    footer.main-footer .upper-footer {
        padding-top: 12px !important;
    }

    footer.main-footer .upper-footer .widget_media_image img {
        width: 240px !important;
        height: 32px !important;
        object-fit: cover !important;
        object-position: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    footer.main-footer #menu-secondary {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    footer.main-footer #menu-secondary > li {
        flex: 0 0 auto !important;
    }

    footer.main-footer #menu-secondary > li > a {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    footer.main-footer .lower-footer > .inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 767px) {
    footer.main-footer #menu-secondary {
        justify-content: flex-start !important;
        gap: 16px !important;
    }
}

/* Centre footer content */
footer.main-footer .upper-footer,
footer.main-footer .lower-footer {
    text-align: center !important;
}

footer.main-footer .upper-footer .widget_media_image {
    margin-left: auto !important;
    margin-right: auto !important;
}

footer.main-footer .upper-footer .widget_media_image img {
    margin-left: auto !important;
    margin-right: auto !important;
}

footer.main-footer .lower-footer .links {
    text-align: center !important;
}

footer.main-footer #menu-secondary {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

footer.main-footer .copyright,
footer.main-footer .copyright-text {
    text-align: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
footer.main-footer .upper-footer .widget_media_image img {
    position: relative;
    top: -14px;
}

footer.main-footer .upper-footer .widget_media_image img {
    position: static !important;
    top: auto !important;
}

footer.main-footer .upper-footer .widget_media_image {
    transform: translateY(-14px);
    overflow: visible !important;
}

/* Related posts: lighter editorial layout */
html body.single-post .related-posts .loop {
    gap: 0 !important;
}

html body.single-post .related-posts article.l-post,
html body.single-post .related-posts article.l-post:hover {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e9ed !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    gap: 16px !important;
    box-shadow: none !important;
}

html body.single-post .related-posts article.l-post:last-child {
    border-bottom: 0 !important;
}

html body.single-post .related-posts article.l-post .content {
    background: transparent !important;
}

html body.single-post .related-posts article.l-post .media {
    border: 0 !important;
    border-radius: 6px !important;
}

html body.single-post .related-posts article.l-post .post-title,
html body.single-post .related-posts article.l-post .post-title a {
    color: #081826 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

html body.single-post .related-posts article.l-post .post-title a:hover {
    color: #c93632 !important;
}

html body.single-post .related-posts .meta-below,
html body.single-post .related-posts .post-meta-items,
html body.single-post .related-posts .post-meta-items *,
html body.single-post .related-posts .post-date {
    color: #596875 !important;
}

html body.single-post .related-posts > .block-head {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    /* White page area between header and footer */
    html body.single-post .main-wrap,
    html body.single-post .main-wrap > .main,
    html body.single-post .main-content.s-post-contain,
    html body.single-post .s-post-contain > .the-post-header,
    html body.single-post .s-post-contain > .single-featured,
    html body.single-post .the-post.s-post-modern.the-post-modern,
    html body.single-post .the-post-modern > .related-posts {
        background: #ffffff !important;
        box-shadow: none !important;
    }

    /* Remove the full-width navy extension */
    html body.single-post .main-content.s-post-contain,
    html body.single-post .the-post-modern > .related-posts,
    html body.single-post .related-posts {
        box-shadow: none !important;
        clip-path: none !important;
    }

    /* White breadcrumbs */
    html body.single-post .main-wrap > nav#breadcrumb.breadcrumbs,
    html body.single-post #breadcrumb > .inner {
        background: #ffffff !important;
        box-shadow: none !important;
    }

    html body.single-post #breadcrumb,
    html body.single-post #breadcrumb a,
    html body.single-post #breadcrumb span {
        color: #52606d !important;
    }

    /* Dark article heading */
    html body.single-post.post-layout-modern .the-post-header,
    html body.single-post.post-layout-modern .the-post-header h1.post-title {
        color: #081826 !important;
    }

    /* Readable author, date and reading time */
    html body.single-post.post-layout-modern .the-post-header .post-meta-items,
    html body.single-post.post-layout-modern .the-post-header .post-meta-items *,
    html body.single-post.post-layout-modern .the-post-header .post-author,
    html body.single-post.post-layout-modern .the-post-header .post-author a,
    html body.single-post.post-layout-modern .the-post-header .read-time,
    html body.single-post.post-layout-modern .the-post-header .post-subtitle {
        color: #52606d !important;
    }
}
/* Popular Now — clean white list */
html body.single-post #smartmag-block-posts-small-4 {
    background: #ffffff !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body.single-post #smartmag-block-posts-small-4 .heading {
    color: #081826 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

html body.single-post #smartmag-block-posts-small-4 .block-head {
    background: transparent !important;
    border-bottom: 2px solid #fb5f58 !important;
    margin-bottom: 0 !important;
}

/* Rows and dividers */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 .loop-small > article.l-post.small-post {
    background: transparent !important;
    border-bottom: 1px solid #e5e9ed !important;
    padding: 16px 0 !important;
    gap: 14px !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 .loop-small > article.l-post.small-post:nth-child(4) {
    border-bottom: 0 !important;
}

/* Landscape thumbnails */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 article.l-post.small-post > .media {
    flex: 0 0 110px !important;
    width: 110px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* Dark headlines */
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title,
html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title a {
    color: #081826 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

html body.single-post .main-sidebar
#smartmag-block-posts-small-4 h4.post-title a:hover {
    color: #c93632 !important;
}