/* ============================================================
   HEADER / NAV / HERO / MOBILE  —  CLEAN BLOCK
   ------------------------------------------------------------
   DELETE all of these from front.css before pasting this in:
     1. The old "/* HEADER *​/" block down through "/* DESKTOP NAV *​/"
        and "/* MOBILE NAV *​/"  (you are replacing them here)
     2. The whole "FIREFOX / LAYOUT JUMP FIX PATCH" section
     3. The whole "FINAL MOBILE HEADER FIX" section
     4. The "HERO OVERLAY FIX" section
     5. The "FIX STUCK MOBILE MENU OVERLAY" section
     6. The STRAY block right after the first @media(max-width:768px)
        that starts with ".logo-box{ gap:10px ... }" and is NOT
        wrapped in any @media — that's the bug breaking desktop.
   Keep everything else (mini-cart, hero text, categories, footer).
   Then bump the CSS version: front.css?v=8016
   ============================================================ */

/* ---------- HEADER SHELL ---------- */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.top-strip{
    background:#111;
    color:#fff;
    font-size:12px;
    letter-spacing:.04em;
}

.top-strip-inner{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.main-header{
    background:#fff;
}

.header-inner{
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
}

/* ---------- LOGO ---------- */
.logo-box{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.main-logo-img{
    height:96px;
    width:auto;
    max-width:420px;
    object-fit:contain;
}

/* ---------- SEARCH ---------- */
.header-search{
    flex:1;
    max-width:420px;
    height:54px;
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.header-search input{
    flex:1;
    border:0;
    outline:0;
    padding:0 18px;
    font-size:14px;
    min-width:0;
    background:transparent;
    color:#111;
}

.header-search button{
    border:0;
    background:#111;
    color:#fff;
    height:44px;
    margin-right:5px;
    padding:0 22px;
    border-radius:14px;
    font-weight:800;
    cursor:pointer;
    transition:opacity .18s ease;
}

.header-search button:hover{ opacity:.9; }

/* ---------- DESKTOP ACTIONS ---------- */
.header-actions{
    display:flex;
    align-items:center;
    gap:16px;
    font-size:14px;
    font-weight:800;
}

.header-link{ white-space:nowrap; }

.cart-link{
    background:#111;
    color:#fff;
    padding:13px 17px;
    border-radius:16px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:opacity .18s ease;
    white-space:nowrap;
}

.cart-link:hover{ opacity:.9; }

.cart-link span{
    background:#fff;
    color:#111;
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:900;
    border-radius:999px;
}

/* ---------- MOBILE ACTIONS (hidden on desktop) ---------- */
.mobile-actions{
    display:none;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.mobile-menu-btn,
.mobile-cart-btn{
    width:50px;
    height:50px;
    border:0;
    border-radius:16px;
    background:#111;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.mobile-menu-btn{ font-size:24px; }

.mobile-cart-btn{ position:relative; padding:0; }

.mobile-cart-btn span{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:22px;
    height:22px;
    background:#22c55e;
    color:#fff;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    padding:0 5px;
    border:2px solid #fff;
}

/* ---------- DESKTOP NAV ---------- */
.main-nav{
    position:relative;
    height:64px;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.main-nav::-webkit-scrollbar{ display:none; }

.nav-inner{
    display:flex;
    align-items:center;
    gap:24px;
    height:64px;
    flex-wrap:nowrap;
    white-space:nowrap;
    min-width:max-content;
    padding-right:24px;
}

.nav-item{ position:relative; flex:0 0 auto; }

.nav-item > a{
    position:relative;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#3f3a35;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    transition:color .18s ease, border-color .18s ease;
}

.nav-item > a:hover,
.nav-item > a.active{
    color:#111;
    border-bottom-color:#111;
}

.has-dropdown > a::after{
    content:"▾";
    font-size:10px;
    margin-left:5px;
    opacity:.7;
}

.dropdown-menu{
    position:absolute;
    top:64px;
    left:0;
    min-width:250px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.14);
    display:none;
    z-index:1001;
}

.dropdown-menu a{
    display:block;
    padding:14px 18px;
    font-size:13px;
    font-weight:800;
    color:#111827;
    border-bottom:1px solid rgba(0,0,0,.05);
    white-space:nowrap;
    transition:background .18s ease;
}

.dropdown-menu a:last-child{ border-bottom:0; }
.dropdown-menu a:hover{ background:#f5f5f5; }
.nav-item:hover .dropdown-menu{ display:block; }

/* ---------- MOBILE NAV PANEL ---------- */
.mobile-menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1090;
}

.mobile-nav-panel{
    position:fixed;
    top:0;
    right:0;
    width:86vw;
    max-width:360px;
    height:100dvh;
    background:#fff;
    z-index:1100;
    overflow-y:auto;
    transform:translateX(110%);
    transition:transform .22s ease;
    box-shadow:-12px 0 40px rgba(0,0,0,.18);
    display:flex;
    flex-direction:column;
}

body.menu-open{ overflow:hidden; }
body.menu-open .mobile-menu-overlay{ display:block; }
body.menu-open .mobile-nav-panel{ transform:translateX(0); }

.mobile-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:72px;
    padding:14px 16px;
    background:#111;
    color:#fff;
    flex-shrink:0;
}

.mobile-logo-img{ height:48px; width:auto; max-width:220px; object-fit:contain; }

.mobile-nav-close{
    background:rgba(255,255,255,.12);
    border:0;
    color:#fff;
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    padding:0;
}

.mobile-search{
    display:flex;
    gap:8px;
    padding:14px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.mobile-search input{
    flex:1;
    height:44px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:0 14px;
    outline:0;
    font-size:14px;
    min-width:0;
}

.mobile-search button{
    height:44px;
    border:0;
    background:#111;
    color:#fff;
    border-radius:14px;
    padding:0 16px;
    font-weight:900;
    cursor:pointer;
}

.mobile-nav-list{ display:flex; flex-direction:column; flex:1; }

.mobile-nav-item{ display:block; border-bottom:1px solid rgba(0,0,0,.06); }

a.mobile-nav-item,
.mobile-nav-toggle{
    padding:15px 20px;
    color:#222;
    font-size:14px;
    font-weight:900;
}

.mobile-nav-toggle{
    width:100%;
    background:none;
    border:0;
    text-align:left;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.mobile-nav-toggle span{
    transition:transform .18s ease;
    font-size:20px;
    line-height:1;
}

.mobile-nav-item.has-children.expanded .mobile-nav-toggle span{
    transform:rotate(90deg);
}

.mobile-nav-sub{ display:none; background:#f7f7f7; }
.mobile-nav-item.has-children.expanded .mobile-nav-sub{ display:block; }

.mobile-nav-sub a{
    display:block;
    padding:13px 32px;
    color:#444;
    font-size:13px;
    border-bottom:1px solid rgba(0,0,0,.05);
}

/* ---------- HERO OVERLAY (the black layer) ---------- */
/* This MUST sit behind the hero text and must NOT capture clicks. */
.pro-hero{ position:relative; }

.pro-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(20,18,16,.68),rgba(20,18,16,.34),rgba(20,18,16,.08));
}

.pro-hero-content{
    position:relative;
    z-index:2;
}

/* ---------- RESPONSIVE SWITCH ---------- */
@media(max-width:980px){
    .top-strip-inner{ justify-content:center; text-align:center; }
    .top-strip-inner span:nth-child(2),
    .top-strip-inner span:nth-child(3){ display:none; }

    .header-inner{
        min-height:auto;
        padding:10px 0;
        gap:10px;
        flex-wrap:wrap;
    }

    .header-actions{ display:none; }
    .mobile-actions{ display:flex; }
    .main-nav{ display:none; }

    .header-search{
        order:3;
        flex-basis:100%;
        width:100%;
        max-width:none;
    }

    .main-logo-img{ height:72px; max-width:280px; }
}

@media(max-width:768px){
    .main-logo-img{ height:56px; max-width:220px; }

    .mobile-menu-btn,
    .mobile-cart-btn{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:20px;
    }

    .header-search{ height:46px; }
    .header-search button{ height:38px; padding:0 16px; font-size:13px; }
}

@media(max-width:480px){
    .main-logo-img{ height:50px; max-width:180px; }
    .mobile-nav-panel{ width:92vw; }
}

/* ---------- MOBILE FRONT PAGE: hide service strip ---------- */
/* On phones, show categories straight after the hero banner.    */
/* The strips still show on desktop.                             */
@media(max-width:980px){
    .service-strip{ display:none; }
    .feature-strip{ display:none; }
}