/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/


:root {

    --cc-bg: #050705;
    --cc-bg-dark: #030503;

    --cc-panel: #0b0f0b;
    --cc-panel-hover: #101510;

    --cc-border: #1f271f;
    --cc-border-soft: #171d17;

    --cc-green: #78e52f;
    --cc-green-bright: #67f577;
    --cc-green-dark: #55b91b;

    --cc-text: #f4f6f4;
    --cc-muted: #8f988f;
}


/* =========================================================
   GLOBAL
========================================================= */

html,
body {
    margin: 0;
    background: var(--cc-bg);
}

body {
    color: var(--cc-text);
}

* {
    box-sizing: border-box;
}


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

.cc-site-header {

    position: relative;

    z-index: 9998;

    width: 100%;

    background: var(--cc-bg-dark);

    border-bottom:
        1px solid var(--cc-border-soft);

    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    isolation: isolate;
}


/* TECH GLOW */

.cc-site-header::before {

    content: "";

    position: absolute;

    width: 470px;
    height: 320px;

    left: -200px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(120,229,47,.13),
            rgba(120,229,47,.04) 38%,
            transparent 72%
        );

    filter: blur(26px);

    pointer-events: none;

    z-index: -1;
}


.cc-site-header::after {

    content: "";

    position: absolute;

    width: 430px;
    height: 300px;

    right: -210px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103,245,119,.09),
            rgba(103,245,119,.03) 40%,
            transparent 72%
        );

    filter: blur(26px);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   HEADER TOP
========================================================= */

.cc-header-top {

    position: relative;

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

    height: 100px;

    margin: 0 auto;

    padding: 0 32px;

    display: grid;

    grid-template-columns:
        minmax(250px,1fr)
        auto
        minmax(250px,1fr);

    align-items: center;

    gap: 25px;
}


/* tech grid */

.cc-header-top::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(103,245,119,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103,245,119,.018) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

    pointer-events: none;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.cc-header-left {

    display: flex;

    align-items: center;

    justify-content: flex-start;
}


.cc-header-menu-toggle {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    height: 48px;

    padding: 0 21px;

    border: 1px solid
        rgba(103,245,119,.28);

    background:
        linear-gradient(
            135deg,
            var(--cc-green-dark),
            var(--cc-green)
        );

    color: #071007;

    cursor: pointer;

    box-shadow:
        0 0 20px
        rgba(103,245,119,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.cc-header-menu-toggle:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.05);

    box-shadow:
        0 0 28px
        rgba(103,245,119,.17);
}


.cc-header-menu-toggle strong {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;
}


.cc-hamburger {

    width: 20px;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.cc-hamburger i {

    display: block;

    width: 20px;
    height: 2px;

    background: #071007;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.cc-header-menu-toggle.is-open
.cc-hamburger i:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);
}


.cc-header-menu-toggle.is-open
.cc-hamburger i:nth-child(2) {

    opacity: 0;
}


.cc-header-menu-toggle.is-open
.cc-hamburger i:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* =========================================================
   LOGO
========================================================= */

.cc-header-center {

    display: flex;

    align-items: center;

    justify-content: center;
}


.cc-header-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;
}


.cc-header-logo-img {

    width: auto;

    max-width: 190px;
    max-height: 78px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 12px
            rgba(103,245,119,.11)
        );

    transition:
        transform .2s ease,
        filter .2s ease;
}


.cc-header-logo:hover
.cc-header-logo-img {

    transform:
        translateY(-1px);

    filter:
        drop-shadow(
            0 0 20px
            rgba(103,245,119,.22)
        );
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.cc-header-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.cc-header-action {

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 15px;

    border-right:
        1px solid
        var(--cc-border);

    color: #fff;

    font-size: 12px;

    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .16s ease;
}


.cc-header-action:first-child {

    border-left:
        1px solid
        var(--cc-border);
}


.cc-header-action:hover {

    color:
        var(--cc-green-bright);
}


.cc-header-action svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* CART */

.cc-cart-icon {

    position: relative;

    display: flex;
}


.cc-header-cart-count {

    position: absolute;

    top: -9px;
    right: -10px;

    min-width: 18px;
    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0 4px;

    border-radius: 20px;

    background:
        var(--cc-green);

    color:
        #071007;

    font-size: 9px;

    font-weight: 800;

    box-shadow:
        0 0 12px
        rgba(103,245,119,.25);
}


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

.cc-search-row {

    width: 100%;

    display: flex;

    justify-content: center;

    padding:
        0 32px 18px;
}


.cc-main-search {

    width:
        min(1120px,100%);

    height: 52px;

    display: grid;

    grid-template-columns:
        190px
        minmax(0,1fr)
        60px;

    margin: 0;

    border:
        1px solid #253025;

    background:
        #050805;

    overflow: hidden;

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


.cc-main-search:focus-within {

    border-color:
        rgba(103,245,119,.55);

    box-shadow:
        0 0 22px
        rgba(103,245,119,.08);
}


/* CATEGORY */

.cc-search-category {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        0 18px;

    border-right:
        1px solid #263126;

    background:
        #080c08;

    color:
        var(--cc-green);

    font-size: 12px;

    font-weight: 700;
}


.cc-search-category svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2;
}


/* INPUT */

.cc-search-input {

    display: flex;

    align-items: center;

    background:
        #050805;
}


.cc-search-input input {

    width: 100%;

    height: 100%;

    padding:
        0 22px;

    border: 0;

    outline: 0;

    background:
        #050805;

    color:
        var(--cc-green-bright);

    font-size: 14px;

    box-shadow: none;
}


.cc-search-input input::placeholder {

    color: #6acb31;

    opacity: .7;
}


/* SEARCH BUTTON */

.cc-search-button {

    width: 60px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--cc-green-dark),
            var(--cc-green)
        );

    color: #071007;

    cursor: pointer;
}


.cc-search-button svg {

    width: 22px;
    height: 22px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2;
}


/* =========================================================
   OVERLAY
========================================================= */

.cc-side-overlay {

    position: fixed;

    z-index: 99990;

    inset: 0;

    background:
        rgba(0,0,0,.70);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.cc-side-overlay.is-open {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   OFF CANVAS SIDEBAR
========================================================= */

.cc-side-menu {

    position: fixed;

    z-index: 99999;

    top: 0;
    left: 0;

    width: 355px;
    max-width: 88vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #070b07,
            #030503
        );

    border-right:
        1px solid
        rgba(103,245,119,.38);

    box-shadow:
        20px 0 60px
        rgba(0,0,0,.55),
        5px 0 26px
        rgba(103,245,119,.06);

    transform:
        translateX(-105%);

    transition:
        transform .3s
        cubic-bezier(.4,0,.2,1);

    overflow-y: auto;
}


.cc-side-menu.is-open {

    transform:
        translateX(0);
}


/* subtle circuit effect */

.cc-side-menu::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(103,245,119,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103,245,119,.022) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

    pointer-events: none;
}


/* =========================================================
   SIDE HEADER
========================================================= */

.cc-side-head {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    padding:
        28px 25px 22px;

    border-bottom:
        1px solid
        rgba(103,245,119,.14);
}


.cc-side-kicker {

    display: block;

    margin-bottom: 5px;

    color:
        var(--cc-green-bright);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.2px;
}


.cc-side-head h2 {

    margin: 0;

    color: #fff;

    font-size: 30px;

    font-weight: 600;
}


.cc-side-close {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(103,245,119,.20);

    background:
        rgba(103,245,119,.035);

    color:
        #fff;

    font-size: 25px;

    cursor: pointer;

    transition:
        border-color .16s ease,
        color .16s ease,
        background .16s ease;
}


.cc-side-close:hover {

    border-color:
        var(--cc-green-bright);

    background:
        rgba(103,245,119,.07);

    color:
        var(--cc-green-bright);
}


/* =========================================================
   SIDE NAV
========================================================= */

.cc-side-nav {

    position: relative;

    z-index: 2;

    padding:
        15px 25px 25px;

    flex: 1;
}


.cc-side-menu-list,
.cc-side-menu-list ul {

    margin: 0;

    padding: 0;

    list-style: none;
}


.cc-side-menu-list li {

    margin: 0;

    padding: 0;

    list-style: none;

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


.cc-side-menu-list li::marker {

    content: "";
}


.cc-side-menu-list > li > a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 50px;

    padding:
        0 8px;

    color:
        #bec6be;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .2px;

    text-decoration: none;

    transition:
        padding-left .18s ease,
        color .18s ease,
        background .18s ease;
}


.cc-side-menu-list
> li
> a::before {

    content: "";

    width: 3px;
    height: 0;

    position: absolute;

    left: 0;

    background:
        var(--cc-green-bright);

    box-shadow:
        0 0 10px
        rgba(103,245,119,.35);

    transition:
        height .18s ease;
}


.cc-side-menu-list
> li
> a:hover,

.cc-side-menu-list
> li.current-menu-item
> a {

    padding-left:
        15px;

    color:
        var(--cc-green-bright);

    background:
        rgba(103,245,119,.03);
}


.cc-side-menu-list
> li
> a:hover::before,

.cc-side-menu-list
> li.current-menu-item
> a::before {

    height: 23px;
}


/* =========================================================
   SIDE SUBMENUS
========================================================= */

.cc-side-menu-list .sub-menu {

    padding:
        3px 0 10px 18px;

    border-left:
        1px solid
        rgba(103,245,119,.08);
}


.cc-side-menu-list
.sub-menu li {

    border: 0;
}


.cc-side-menu-list
.sub-menu a {

    display: block;

    padding:
        8px 6px;

    color:
        #7f897f;

    font-size: 12px;

    text-decoration: none;

    transition:
        color .16s ease,
        padding-left .16s ease;
}


.cc-side-menu-list
.sub-menu a:hover {

    padding-left:
        11px;

    color:
        var(--cc-green-bright);
}


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

.cc-side-footer {

    position: relative;

    z-index: 2;

    padding:
        15px 25px 24px;

    border-top:
        1px solid
        rgba(103,245,119,.12);
}


.cc-side-footer a {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    min-height: 42px;

    color:
        #929b92;

    font-size: 12px;

    text-decoration: none;

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


.cc-side-footer a:hover {

    color:
        var(--cc-green-bright);
}


/* NO BODY SCROLL */

body.cc-menu-open {

    overflow: hidden;
}


/* =========================================================
   SHOP PAGE
========================================================= */

body.cybercity-shop-page,
body.cybercity-shop-page #page,
body.cybercity-shop-page .site,
body.cybercity-shop-page .site-content,
body.cybercity-shop-page .content-area,
body.cybercity-shop-page #primary,
body.cybercity-shop-page .site-main,
body.cybercity-shop-page .ast-container,
body.cybercity-shop-page .ast-woocommerce-container {

    background:
        var(--cc-bg);
}


body.cybercity-shop-page
.ast-container {

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0;
}


body.cybercity-shop-page
#primary,

body.cybercity-shop-page
.site-main {

    width: 100%;
    max-width: none;

    margin: 0;
}


body.cybercity-shop-page
#secondary {

    display: none;
}


/* =========================================================
   SHOP
========================================================= */

.cc-shop-shell {

    width: 100%;

    background:
        var(--cc-bg);

    color:
        var(--cc-text);
}


.cc-shop-grid {

    width: 100%;

    max-width: 1820px;

    margin: 0 auto;

    padding:
        46px
        clamp(18px,3.5vw,64px)
        90px;

    display: grid;

    grid-template-columns:
        292px
        minmax(0,1fr);

    gap: 38px;

    align-items: start;
}


/* SIDEBAR */

.cc-shop-sidebar {

    position: sticky;

    top: 24px;

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    padding:
        22px 18px;

    background:
        var(--cc-panel);

    border:
        1px solid
        var(--cc-border);
}


.cc-sidebar-title {

    padding:
        2px 6px 19px;

    border-bottom:
        1px solid
        var(--cc-border-soft);
}


.cc-sidebar-title small {

    color:
        var(--cc-green-bright);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.cc-sidebar-title h2 {

    margin:
        5px 0 0;

    color:
        #fff;

    font-size: 25px;
}


.cc-shop-all {

    display: flex;

    align-items: center;

    min-height: 47px;

    padding:
        0 9px;

    border-bottom:
        1px solid
        var(--cc-border-soft);

    color: #a9b0a9;

    text-decoration: none;
}


/* CATEGORY TREE */

.cc-category-tree,
.cc-category-tree ul,
.cc-category-tree li,
.cc-tree,
.cc-tree ul,
.cc-tree li {

    margin: 0;

    padding: 0;

    list-style: none;
}


.cc-tree-row {

    display: flex;

    align-items: center;

    min-height: 43px;

    border-bottom:
        1px solid
        var(--cc-border-soft);
}


.cc-shop-sidebar
button.cc-tree-toggle {

    appearance: none;

    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 5px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color: #6d756d;

    cursor: pointer;
}


.cc-tree-node.is-open
>
.cc-tree-row
.cc-tree-toggle span {

    transform:
        rotate(90deg);

    color:
        var(--cc-green-bright);
}


.cc-tree-toggle-space {

    flex:
        0 0 35px;
}


.cc-tree-link {

    display: flex;

    align-items: center;

    flex: 1;

    min-height: 43px;

    color: #9da59d;

    font-size: 13px;

    text-decoration: none;
}


.cc-tree-link:hover,
.cc-tree-link.active {

    color:
        var(--cc-green-bright);
}


.cc-tree-children {

    display: none;
}


.cc-tree-node.is-open
>
.cc-tree-children {

    display: block;
}


.cc-level-1 {

    margin-left: 14px;

    padding-left: 7px;

    border-left:
        1px solid
        rgba(103,245,119,.08);
}


/* =========================================================
   PRODUCTS
========================================================= */

.cc-shop-products {

    min-width: 0;
}


.cc-shop-topbar {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 24px;

    margin-bottom: 28px;

    padding-bottom: 19px;

    border-bottom:
        1px solid
        var(--cc-border);
}


.cc-shop-topbar h1 {

    margin: 0;

    color: #fff;

    font-size:
        clamp(30px,3vw,42px);
}


.cc-shop-products
ul.products {

    display: grid;

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

    gap: 18px;

    width: 100%;

    margin: 0;

    padding: 0;
}


.cc-shop-products
ul.products
li.product {

    float: none;

    width: auto;

    margin: 0;

    padding:
        0 0 18px;

    border:
        1px solid
        var(--cc-border-soft);

    background:
        var(--cc-panel);

    overflow: hidden;
}


.cc-shop-products
ul.products
li.product img {

    width: 100%;

    height: 275px;

    margin: 0;

    padding: 20px;

    object-fit: contain;

    background:
        transparent;
}


.cc-shop-products
.woocommerce-loop-product__title {

    min-height: 58px;

    padding:
        12px 17px 7px;

    color: #eef2ee;

    font-size: 15px;
}


.cc-shop-products
ul.products
li.product
.price {

    display: block;

    padding:
        0 17px 13px;

    color:
        var(--cc-green-bright);

    font-size: 17px;

    font-weight: 600;
}


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

@media (max-width: 1000px) {

    .cc-header-top {

        height: 84px;

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

        padding:
            0 18px;
    }


    .cc-header-logo-img {

        max-width: 145px;

        max-height: 64px;
    }


    .cc-header-action
    span:not(.cc-cart-icon):not(.cc-header-cart-count) {

        display: none;
    }


    .cc-header-action {

        width: 42px;

        padding: 0;

        border: 0;
    }


    .cc-main-search {

        grid-template-columns:
            155px
            minmax(0,1fr)
            55px;
    }


    .cc-shop-grid {

        grid-template-columns:
            250px
            minmax(0,1fr);

        gap: 28px;
    }


    .cc-shop-products
    ul.products {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .cc-header-top {

        height: 72px;

        padding:
            0 12px;

        gap: 8px;
    }


    .cc-header-menu-toggle {

        width: 43px;

        height: 43px;

        padding: 0;
    }


    .cc-header-menu-toggle strong {

        display: none;
    }


    .cc-header-logo-img {

        max-width: 120px;

        max-height: 54px;
    }


    .cc-track-order {

        display: none;
    }


    .cc-header-action {

        width: 37px;

        min-height: 40px;

        padding: 0;
    }


    .cc-search-row {

        padding:
            0 12px 12px;
    }


    .cc-main-search {

        height: 46px;

        grid-template-columns:
            1fr
            50px;
    }


    .cc-search-category {

        display: none;
    }


    .cc-search-button {

        width: 50px;

        height: 46px;
    }


    .cc-side-menu {

        width: 320px;
        max-width: 90vw;
    }


    .cc-side-head {

        padding:
            23px 20px 18px;
    }


    .cc-side-nav {

        padding:
            12px 20px 20px;
    }


    .cc-side-footer {

        padding:
            12px 20px 20px;
    }


    .cc-shop-grid {

        display: block;

        padding:
            28px 16px 70px;
    }


    .cc-shop-sidebar {

        position: relative;

        top: auto;

        max-height: none;

        margin-bottom: 28px;
    }


    .cc-shop-products
    ul.products {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 10px;
    }


    .cc-shop-products
    ul.products
    li.product img {

        height: 185px;

        padding: 10px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .cc-header-logo-img {

        max-width: 105px;
    }


    .cc-shop-products
    ul.products {

        grid-template-columns:
            1fr;
    }

}
/* =========================================
   CYBER CITY — MAIN WEBSITE SCROLLBAR
========================================= */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #66F238 #030804;
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 11px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #030804;
    border-left: 1px solid rgba(102, 242, 56, 0.18);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        #8CFF55 0%,
        #66F238 45%,
        #3FCA19 100%
    );

    border-radius: 20px;

    border: 2px solid #030804;

    box-shadow:
        0 0 7px rgba(102, 242, 56, 0.75),
        0 0 14px rgba(102, 242, 56, 0.40);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #8CFF55;

    box-shadow:
        0 0 9px rgba(102, 242, 56, 0.95),
        0 0 18px rgba(102, 242, 56, 0.60);
}