:root{
    /* Bridged to assets/css/design-system.css tokens — see that
       file for the source palette. Kept here so the ~20 existing
       rules in this file (header, footer, mobile drawer) upgrade
       automatically without each needing individual edits. */
    --primary:var(--marine-teal, #3D7A82);
    --dark:var(--deep-teal, #1B4954);
    --light:var(--marine-teal-light, #5C969D);
    --white:#ffffff;
    --bg:var(--steel-50, #F4F6F7);
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body, 'Public Sans', sans-serif);
    background:var(--bg);
    overflow-x:hidden;
    color:#222;

    background-image:
    radial-gradient(circle at top left,
    rgba(79,127,134,0.08),
    transparent 25%),

    radial-gradient(circle at bottom right,
    rgba(47,95,102,0.08),
    transparent 25%);
}

a{
    text-decoration:none;
}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar{
    background:var(--dark);
    color:white;

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

    padding:8px 30px;

    font-size:13px;
}

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

.desktop-header{

    position:sticky;
    top:0;

    z-index:999;

    background:
    rgba(255,255,255,0.78);

    backdrop-filter:blur(18px);

    box-shadow:
    0 8px 25px rgba(0,0,0,0.05);
}

/* MAIN */

.header-main{

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

    padding:16px 40px;
}

/* LOGO */

.logo img{

    width:220px;
}

/* SEARCH */

.search-box{

    width:48%;

    display:flex;

    background:white;

    border-radius:50px;

    overflow:hidden;

    border:1px solid #e5e5e5;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.05);

    transition:0.4s;
}

.search-box:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);
}

.search-box input{

    flex:1;

    border:none;
    outline:none;

    padding:15px 20px;

    font-size:14px;

    font-family:var(--font-body, 'Public Sans', sans-serif);
}

.search-box button{

    width:52px;

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

    border:none;

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

    color:white;

    cursor:pointer;
}

/* ACTIONS */

.header-actions{

    display:flex;
    align-items:center;
    gap:15px;
}

.help-btn{

    border:none;

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

    color:white;

    padding:12px 22px;

    border-radius:50px;

    cursor:pointer;

    font-weight:600;

    transition:0.4s;
}

.help-btn:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 12px 25px rgba(79,127,134,0.3);
}


/* ACCOUNT MENU */

.account-menu{
    position:relative;
}

.account-menu-trigger{
    display:flex;
    align-items:center;
    gap:8px;
    border:1.5px solid var(--steel-200, #DCE2E5);
    background:#fff;
    padding:10px 16px;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    color:var(--dark);
    transition:.2s ease;
}

.account-menu-trigger:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.account-menu-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    background:#fff;
    border-radius:12px;
    box-shadow:0 18px 40px rgba(15,32,39,.14);
    padding:8px;
    min-width:180px;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:200;
}

.account-menu-dropdown.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.account-menu-dropdown a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    color:#1f2933;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.account-menu-dropdown a:hover{
    background:var(--bg);
    color:var(--primary);
}

.account-menu-dropdown a.danger{
    color:var(--signal-red, #C23B33);
}

/* CART */

.cart-box{

    position:relative;

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

    width:44px;
    height:44px;

    border-radius:50%;
    border:1.5px solid var(--steel-200, #DCE2E5);
    background:#fff;
    color:var(--dark);

    cursor:pointer;

    transition:.2s ease;
}

.cart-box:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.cart-count{

    position:absolute;

    top:-6px;
    right:-10px;

    background:red;

    color:white;

    width:18px;
    height:18px;

    border-radius:50%;

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

    font-size:10px;
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{

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

    gap:45px;

    padding:16px;

    background:white;

    border-top:1px solid #eee;
}

.navbar a,
.nav-item{

    position:relative;

    color:#333;

    font-size:15px;
    font-weight:500;

    transition:0.4s ease;

    cursor:pointer;
}

/* HOVER */

.navbar a:hover,
.nav-item:hover{

    color:var(--primary);

    transform:translateY(-2px);
}

/* LINE EFFECT */

.navbar a::after,
.nav-item::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:2px;

    background:
    linear-gradient(
        to right,
        var(--primary),
        var(--light)
    );

    transition:0.4s ease;
}

.navbar a:hover::after,
.nav-item:hover::after{

    width:100%;
}

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

.nav-item{
    position:relative;
}

.dropdown{

    position:absolute;

    top:45px;
    left:0;

    width:220px;

    background:white;

    border-radius:18px;

    padding:12px;

    box-shadow:
    0 18px 40px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:0.35s ease;

    z-index:999;
}

/* SHOW */

.nav-item:hover .dropdown{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

/* LINKS */

.dropdown a{

    display:block;

    padding:12px 15px;

    border-radius:12px;

    color:#444;

    transition:0.3s ease;
}

.dropdown a:hover{

    background:#f3f7f9;

    color:var(--primary);

    padding-left:20px;
}

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

.mega-parent{
    position:relative;
}

.mega-menu{

    position:absolute;

    top:45px;
    left:50%;

    transform:
    translateX(-50%)
    translateY(20px);

    width:900px;

    background:white;

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

    gap:12px;

    padding:30px;

    border-radius:24px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.12);

    opacity:0;
    visibility:hidden;

    transition:0.4s ease;

    z-index:999;
}

.mega-parent:hover .mega-menu{

    opacity:1;
    visibility:visible;

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

.mega-menu a{

    color:#333;

    padding:10px;

    border-radius:12px;

    transition:0.3s;
}

.mega-menu a:hover{

    background:#f5f7f8;

    color:var(--primary);

    transform:translateX(5px);
}

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

.mobile-header{
    display:none;
}

.mobile-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
}

.mobile-top .logo img{
    width:150px;
}

.mobile-actions{
    display:flex;
    align-items:center;
    gap:16px;
}

.mobile-account{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--dark);
    text-decoration:none;
    line-height:0;
}

.mobile-account svg{
    display:block;
}

.mobile-cart{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--dark);
    text-decoration:none;
    line-height:0;
}

.mobile-cart svg{
    display:block;
}

.mobile-search{
    padding:0 16px 14px;
}

.mobile-search form{
    display:flex;
    gap:8px;
}

.mobile-search input{
    flex:1;
    border:1px solid #e3e8eb;
    border-radius:10px;
    padding:11px 14px;
    font-size:14px;
    outline:none;
}

.mobile-search input:focus{
    border-color:var(--primary);
}

.mobile-search button{
    background:linear-gradient(135deg,var(--primary),var(--dark));
    color:#fff;
    border:0;
    border-radius:10px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/* MOBILE DRAWER MENU */

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(11,31,42,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:1099;
}

.mobile-overlay.open{
    opacity:1;
    visibility:visible;
}

.side-menu{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(320px,84vw);
    background:#fff;
    z-index:1100;
    transform:translateX(-100%);
    transition:transform .3s ease;
    overflow-y:auto;
    box-shadow:0 0 40px rgba(0,0,0,.2);
}

.side-menu.open{
    transform:translateX(0);
}

.side-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 18px 14px;
    border-bottom:1px solid #eef1f3;
}

.side-menu-head .logo img{
    width:140px;
}

.side-menu-close{
    background:#f4f7fb;
    border:0;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--dark);
    cursor:pointer;
}

.side-menu-links{
    display:flex;
    flex-direction:column;
    padding:10px 8px;
    border-bottom:1px solid #eef1f3;
}

.side-menu-links a{
    padding:13px 14px;
    color:#1f2933;
    font-weight:600;
    border-radius:10px;
}

.side-menu-links a:hover{
    background:#f4f7fb;
    color:var(--primary);
}

.side-menu-group{
    padding:14px 18px;
    border-bottom:1px solid #eef1f3;
}

.side-menu-group-title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8d9aa3;
    margin-bottom:8px;
}

.side-menu-group a{
    display:block;
    padding:9px 4px;
    color:#1f2933;
    font-size:14.5px;
}

.side-menu-group a:hover{
    color:var(--primary);
}

.side-menu-contact{
    padding:18px;
    font-size:13.5px;
    color:#5c6b74;
    line-height:1.8;
}

@media(max-width:768px){

.top-bar{
    display:none;
}

.desktop-header{
    display:none;
}

.mobile-header{

    display:block;

    position:sticky;
    top:0;

    z-index:999;

    background:white;
}

.menu-toggle{
    background:transparent;
    border:0;
    color:var(--dark);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px;
    cursor:pointer;
}

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

.site-footer{
    background:#13262c;
    color:#cfd9db;
    margin-top:60px;
}

.footer-top{
    padding:48px 0 32px;
}

.footer-container{
    width:min(1180px,94%);
    margin:0 auto;
}

.footer-top .footer-container{
    display:grid;
    grid-template-columns:1.5fr 0.9fr 0.9fr 1.1fr 0.9fr 1.1fr;
    gap:28px;
}

.footer-col h4{
    color:#fff;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin:0 0 16px;
}

.footer-col a{
    display:block;
    color:#aab8bb;
    text-decoration:none;
    font-size:14px;
    margin-bottom:11px;
    transition:color .2s ease;
}

.footer-col a:hover{
    color:#fff;
}

.footer-logo{
    /* NOTE: images/logo.png is a flattened, fully opaque PNG
       (no alpha channel) with its own near-white background
       baked in — not a transparent black-on-white mark. The
       previous filter:brightness(0) invert(1) here assumed a
       transparent silhouette logo: it turned every opaque pixel
       black then inverted the whole image to solid white,
       which is why the logo was rendering as an empty white
       block on this dark footer instead of showing the actual
       mark. Displaying the logo's real colors on a light card
       is the correct fix — not swapping the image file, which
       was never the actual problem. */
    width:190px;
    margin-bottom:14px;
    padding:10px 14px;
    background:#fff;
    border-radius:8px;
    display:inline-block;
}

.footer-brand p{
    font-size:13.5px;
    line-height:1.7;
    color:#aab8bb;
    margin-bottom:16px;
}

.footer-trust-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.footer-trust-badges span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#cfe3e6;
    font-size:12px;
    font-weight:600;
    padding:7px 12px;
    border-radius:30px;
}

.footer-marketplace-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:14px;
}

.footer-marketplace-label{
    font-size:12px;
    color:#8fa6ab;
}

.footer-marketplace-links a{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    color:#cfe3e6;
    text-decoration:underline;
    text-underline-offset:2px;
    margin-bottom:0;
}
.footer-marketplace-links a:hover{
    color:#fff;
}

.footer-contact-line{
    display:flex !important;
    align-items:center;
    gap:9px;
}

.footer-contact-line.muted{
    color:#8a9799;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:18px 0;
}

.footer-bottom-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:12.5px;
    color:#8a9799;
}

@media(max-width:900px){
    .footer-top .footer-container{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:560px){
    .footer-top .footer-container{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-bottom-inner{
        flex-direction:column;
        text-align:center;
    }
}