/* =========================================================
   KANO HEADER — CLEAN STRUCTURE
========================================================= */



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

.kano-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        linear-gradient(
            to bottom,
            rgba(14,24,10,0.55),
            rgba(14,24,10,0.12)
        );

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease;
}

/* =========================================================
   INNER PAGES HEADER
========================================================= */

body:not(.home) .kano-header {

    position: relative;

    background:
        rgba(7,20,10,.94);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}



/* STICKY */

body:not(.home) .kano-header.is-sticky {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
}

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

.kano-header.is-sticky {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    background:
        rgba(7,20,10,.94);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 10px 40px rgba(0,0,0,0.18);
}



/* =========================================================
   INNER
========================================================= */

.kano-header-inner {

    max-width: 1440px;

    margin: 0 auto;

    padding:
        18px
        40px;

    display: flex;

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

    gap: 40px;

    transition:
        padding .35s ease;
}

.kano-header.is-sticky .kano-header-inner {

    padding:
        10px
        40px;
}



/* =========================================================
   LEFT / RIGHT
========================================================= */

.kano-header-left,
.kano-header-right {

    display: flex;

    align-items: center;

    gap: 28px;
}



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

.kano-header-logo img {

    max-height: 80px;

    width: auto;

    display: block;

    transition:
        max-height .35s ease,
        transform .35s ease;
}

.kano-header.is-sticky .kano-header-logo img {

    max-height: 58px;

    transform: scale(.96);
}



/* =========================================================
   DIVIDER
========================================================= */

.kano-header-divider {

    position: relative;

    width: 1px;

    height: 72px;
}

.kano-header-divider::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212,160,23,.75),
            transparent
        );
}




/* =========================================================
   NAVIGATION
========================================================= */

.kano-header-nav {

    display: flex;

    align-items: center;

    gap: 28px;
}

.kano-header-nav a {

    position: relative;

    color: #fff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 400;

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

.kano-header-nav a:hover {

    opacity: .7;
}



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

.kano-header-icons {

    display: flex;

    align-items: center;

    gap: 18px;
}

.kano-header-icon {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: none;
color: #f4ead2;
    background: transparent;

    padding: 0;

    cursor: pointer;
}

.kano-icon-svg {

    width: 40px;
    height: 40px;

    fill: #f4ead2;

    opacity: .96;

    filter: none;

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

.kano-header-icon:hover .kano-icon-svg {

    opacity: 1;

    transform: translateY(-1px);
}



/* =========================================================
   CART COUNT
========================================================= */

.kano-cart-count {

    position: absolute;

    top: -4px;
    right: -4px;

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

    border-radius: 999px;

    background: #d7b46a;

    color: #111;

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

    display: flex;

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

    padding: 0 4px;
}



/* =========================================================
   CATALOG WRAP
========================================================= */

.kano-catalog-wrap {

    position: relative;

    display: flex;

    align-items: center;
}



/* =========================================================
   CATALOG BUTTON
========================================================= */

.kano-catalog-btn {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    height: 44px;

    padding: 0;

    border: none;

    background: transparent;

    color: #f4ead2;

    font-size: 16px;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        color .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.kano-catalog-btn:hover {

    transform: translateY(-1px);
}



/* UNDERLINE */

.kano-catalog-btn::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    transform: translateX(-50%);

    width: 0;

    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            to right,
            transparent,
            #d8b46b,
            transparent
        );

    transition:
        width .35s ease,
        opacity .35s ease;
}

.kano-catalog-btn:hover::after {

    width: 100%;

    opacity: 1;
}

/* =========================================================
   REMOVE BUTTON STATES
========================================================= */

.kano-catalog-btn,
.kano-catalog-btn:hover,
.kano-catalog-btn:focus,
.kano-catalog-btn:active,
.kano-catalog-btn:focus-visible {

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;

    border: none !important;
}


/* Safari / mobile tap */

.kano-catalog-btn {

    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   BURGER
========================================================= */

.kano-burger {

    width: 18px;
    height: 14px;

    position: relative;

    flex-shrink: 0;
}

.kano-burger span {

    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    border-radius: 999px;

    background: #fff;

    transition: .25s ease;
}

.kano-burger span:nth-child(1) {

    top: 0;
}

.kano-burger span:nth-child(2) {

    top: 6px;
}

.kano-burger span:nth-child(3) {

    top: 12px;
}



/* =========================================================
   DROPDOWN
========================================================= */

.kano-catalog-dropdown {

    position: absolute;

    top: calc(100% + 18px);
    left: 0;

    width: min(1380px, calc(100vw - 40px));
max-height:
        calc(100vh - 120px);

    overflow-y: auto;

    overflow-x: hidden;
    z-index: 1100;
overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(14px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;


}

.kano-catalog-dropdown::-webkit-scrollbar {

    width: 6px;
}

.kano-catalog-dropdown::-webkit-scrollbar-track {

    background: transparent;
}

.kano-catalog-dropdown::-webkit-scrollbar-thumb {

    background:
        rgba(198,161,91,.45);

    border-radius: 999px;
}

.kano-catalog-dropdown.open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}



/* =========================================================
   MEGA MENU INNER
========================================================= */

.kano-mega-inner {

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(5,18,10,.985),
            rgba(4,16,8,.98)
        );

    border:
        1px solid rgba(198,161,91,.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);


}



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

.kano-mega-grid {

    display: grid;
align-items: start;
    grid-template-columns:
        1fr
        1fr
        1fr
        1fr
        300px;
}



/* =========================================================
   SECTION
========================================================= */

.kano-mega-section {

    position: relative;

    padding:
        34px
        24px;
}

.kano-mega-section:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 42px;
    right: 0;

    width: 1px;

    height: calc(100% - 84px);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212,160,23,.16),
            transparent
        );
}

.kano-mega-section:hover {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.005)
        );
}

/* =========================================================
   HEADINGS
========================================================= */

.kano-mega-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;
}

.kano-mega-heading.is-second {

    margin-top: 40px;
}

.kano-mega-cat-icon {

    width: 48px;
    height: 48px;
opacity: .95;
    flex-shrink: 0;

    color: #c6a15b;
}

.kano-mega-heading a {

    color: #c6a15b;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    transition:
        color .25s ease,
        transform .25s ease;
}

.kano-mega-heading a:hover {

    color: #fff;

    transform: translateX(3px);
}



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

.kano-mega-links {

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.kano-mega-links a {

    display: flex;

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

    padding:
        9px
        12px;

    border-radius: 12px;

    color: #f5ead2;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.4;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.kano-mega-links a:hover {

    background:
        rgba(212,160,23,.07);

    color: #c6a15b;

    transform: translateX(4px);
}



/* =========================================================
   ARROW
========================================================= */

.kano-arrow {

    font-size: 20px;

    line-height: 1;

    color: rgba(212,160,23,.72);

    transition:
        transform .25s ease,
        color .25s ease;
}

.kano-mega-links a:hover .kano-arrow {

    transform: translateX(4px);

    color: #d4a017;
}



/* =========================================================
   PROMO BLOCK
========================================================= */
/* =========================================================
   RIGHT SIDE COLUMN
========================================================= */

.kano-mega-side {

    display: flex;

    flex-direction: column;
position: relative;
    justify-content: space-between;

padding:
        42px
        34px;
min-width: 0;
    background:
        linear-gradient(
            180deg,
            rgba(198,161,91,.035),
            rgba(198,161,91,.015)
        );

    border-left:
        1px solid rgba(198,161,91,.08);
}



/* =========================================================
   SIDE TITLE
========================================================= */

.kano-mega-side-title {

    display: flex;

    align-items: center;

    min-height: 48px;

    color: #c6a15b;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    margin:
        0
        0
        24px;
}




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


.kano-top-product {

    display: flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

    padding:
        10px
        18px;

    border-radius: 16px;

    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.kano-top-product:hover {

    background:
        rgba(255,255,255,.03);

    transform: translateX(4px);

    opacity: .96;
}



/* =========================================================
   PRODUCT IMAGE
========================================================= */

.kano-top-product-image {

    flex-shrink: 0;
}

.kano-top-product-image img {

    width: 92px;
    height: 92px;

    object-fit: cover;

    display: block;

    border-radius: 14px;

    border:
        1px solid rgba(198,161,91,.12);

    transition:
        transform .35s ease,
        border-color .35s ease;
}

.kano-top-product:hover .kano-top-product-image img {

    transform: scale(1.03);

    border-color:
        rgba(198,161,91,.26);
}



/* =========================================================
   PRODUCT CONTENT
========================================================= */

.kano-top-product-content {

    min-width: 0;
}

.kano-top-product-name {

    color: #f5ead2;

    font-size: 15px;

    line-height: 1.4;

    margin-bottom: 8px;

    transition:
        color .25s ease;
}

.kano-top-product:hover .kano-top-product-name {

    color: #fff;
}



/* =========================================================
   PRODUCT PRICE
========================================================= */

.kano-top-product-price,
.kano-top-product-price span,
.kano-top-product-price bdi,
.kano-top-product-price .woocommerce-Price-amount {

    color: #c6a15b !important;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;
}


/* SALE PRICE */

.kano-top-product-price ins {

    text-decoration: none;

    color: #d7b46a !important;
}


/* OLD PRICE */

.kano-top-product-price del,
.kano-top-product-price del span,
.kano-top-product-price del bdi {

    color: rgba(255,255,255,.35) !important;

    font-size: 13px;
}




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

.kano-mega-bottom {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 30px;

    padding:
        24px
        34px;

    border-top:
        1px solid rgba(212,160,23,.10);

    background:
        rgba(255,255,255,.01);
}

.kano-mega-feature-title {

    color: #f4ead2;

    font-size: 15px;

    margin-bottom: 6px;
}

.kano-mega-feature-text {

    color: rgba(255,255,255,.56);

    font-size: 13px;

    line-height: 1.5;
}



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

.kano-search-panel {

    position: fixed;

    top: 118px;
    left: 50%;
right: auto;
    transform:
        translateX(-50%)
        translateY(-10px);

    width:
        min(680px, calc(100% - 32px));

    z-index: 1200;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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

.kano-search-panel.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events: all;
}

.kano-search-panel.sticky {

    top: 92px;
}

.kano-search-panel form,
.kano-search-panel input {

    position: relative;

    z-index: 2;
}

.kano-search-panel input[type="search"] {

    width: 100%;

    height: 54px;

    padding:
        0
        24px;

    border-radius: 14px;

    border:
        1px solid rgba(212,160,23,.45);

    background:
        rgba(7,20,8,0.82);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    color: #fff;

    font-size: 17px;

    outline: none;
appearance: none;
-webkit-appearance: none;
    box-shadow:
        0 18px 60px rgba(0,0,0,.34);
}

.kano-search-panel input[type="search"]::placeholder {

    color: rgba(255,255,255,.45);
}



/* =========================================================
   REMOVE GLOW
========================================================= */

.kano-header a,
.kano-header button,
.kano-header img,
.kano-header svg {

    text-shadow: none;

    box-shadow: none;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1400px) {

    .kano-mega-grid {

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

    .kano-mega-side {

        grid-column: span 3;
    }
}



@media (max-width: 1100px) {

    .kano-mega-grid {

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

    .kano-mega-side {

        grid-column: span 2;
    }
}



@media (max-width: 992px) {

    .kano-header-inner {

        padding:
            16px
            20px;
    }

    .kano-header-nav {

        display: none;
    }

    .kano-catalog-dropdown {

        width:
            calc(100vw - 32px);

        left: 0;
    }
}



@media (max-width: 768px) {

    .kano-header-left,
    .kano-header-right {

        gap: 14px;
    }

    .kano-header-divider {

        display: none;
    }

    .kano-header-logo img {

        max-height: 42px;
    }

    .kano-catalog-btn {

        font-size: 14px;
    }

    .kano-mega-grid {

        grid-template-columns: 1fr;
    }

    .kano-mega-side {

        grid-column: auto;
    }

    .kano-mega-bottom {

        grid-template-columns: 1fr;
    }

    .kano-mega-section,
    .kano-mega-side {

        padding:
            30px
            24px;
    }

    .kano-mega-side-title {

        font-size: 16px;
    }

    .kano-search-panel {

        top: 90px;
    }

    .kano-search-panel input[type="search"] {

        height: 58px;

        font-size: 16px;
    }

.kano-catalog-text {

        display: none;
    }

    .kano-catalog-btn {

        gap: 0;
    }
}