/* =======================================
   CONTAINER
======================================= */

.container{

    max-width:1600px;

    margin:auto;

    padding:0 18px;

}


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

header{

    position:sticky;

    top:0;

    z-index:100;

    width:100%;

    height:90px;

    background:#fff;

    border-bottom:1px solid #eee;

}

.header-container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    display:block;

    height:50px;

}

.header-account{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.header-account img{

    width:28px;

    height:28px;

}

/* =========================================================
   WINCHELL'S GUAM BRAND THEME — VISUAL ONLY
   No application/payment/order logic is changed here.
   ========================================================= */
:root{
    --winchells-black:#090909;
    --winchells-black-2:#141414;
    --winchells-burgundy:#8b004b;
    --winchells-burgundy-dark:#70003c;
    --winchells-gold:#e7c96b;
    --winchells-cream:#fbfaf6;
    --winchells-page:#f4f4f2;
}

/* Customer-facing global header */
header{
    background:var(--winchells-black) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 4px 18px rgba(0,0,0,.12);
}

.header-container{
    max-width:1600px;
}

.logo img{
    height:52px !important;
    width:auto;
    object-fit:contain;
}

.header-account{
    background:#fff !important;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

body{
    background:var(--winchells-page);
}

/* Brand-consistent focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(231,201,107,.75);
    outline-offset:2px;
}

/* Customer authentication pages */
.auth-logo{
    content:url("/assets/images/logo-transparent.png");
    max-height:72px;
    width:auto;
    object-fit:contain;
}


/* =========================================================
   WINCHELL'S HEADER DIMENSIONS — VISUAL ONLY
   Desktop: 70px | Mobile: 100px
   ========================================================= */
header{
    height:70px !important;
}

.logo img{
    height:44px !important;
}

@media (max-width:768px){
    header{
        height:100px !important;
    }

    .logo img{
        height:58px !important;
    }

    .header-account{
        width:50px;
        height:50px;
    }

    .header-account img{
        width:28px;
        height:28px;
    }
}

/* =========================================================
   WINCHELL'S HEADER POLISH — VISUAL ONLY
   Compact account control to better match the logo scale.
   ========================================================= */
@media (min-width:769px){
    .header-account{
        width:42px !important;
        height:42px !important;
    }

    .header-account img{
        width:22px !important;
        height:22px !important;
    }
}

@media (max-width:768px){
    .header-account{
        width:44px !important;
        height:44px !important;
    }

    .header-account img{
        width:24px !important;
        height:24px !important;
    }
}