:root{
    --maroon:#7A1421;
    --maroon-dark:#5C0F19;
    --gold:#D9A400;
    --gold-light:#F2C230;
    --ink:#1B1B1B;
    --navy:#0F1A2B;
    --navy-2:#16233A;
    --cream:#FDF8F0;
    --grey:#5B5B5B;
    --green:#25A244;
    --green-dark:#1C7F35;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Poppins',sans-serif;background:#EFEFEF;}

  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;}

  /* ============ TOP UTILITY BAR ============ */
  .topbar{
    background:var(--maroon-dark);
    color:var(--cream);
    font-size:12.5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 24px;
    gap:12px;
    border-bottom:2px solid var(--gold);
  }
  .topbar .contact-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .topbar .contact-group span{display:flex;align-items:center;gap:6px;white-space:nowrap;}
  .topbar .socials{display:flex;align-items:center;gap:14px;}
  .topbar .socials a{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.12);
    font-size:11px;
    transition:background .2s, transform .2s;
  }
  .topbar .socials a:hover{background:var(--gold);color:var(--maroon-dark);transform:translateY(-2px);}
  .topbar .acct{display:flex;align-items:center;gap:16px;}
  .topbar .acct span{display:flex;align-items:center;gap:5px;white-space:nowrap;}

  /* ============ MAIN HEADER ============ */
  .mainheader{
    background:var(--cream);
    display:flex;
    align-items:center;
    gap:20px;
    padding:14px 24px;
    position:relative;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
  }
  .brand img{
    width:58px;height:58px;
    border-radius:8px;
    box-shadow:0 3px 8px rgba(0,0,0,0.25);
    flex-shrink:0;
  }
  .brand .names{display:flex;flex-direction:column;line-height:1.05;}
  .brand .shopname{
    font-family:'Anton',sans-serif;
    letter-spacing:0.5px;
    font-size:26px;
    color:var(--maroon);
    position:relative;
    display:inline-block;
  }
  .brand .shopname::after{
    content:"";
    position:absolute;
    left:0;bottom:-3px;
    height:3px;width:70%;
    background:linear-gradient(90deg,var(--gold),transparent);
    border-radius:2px;
  }
  .brand .slogan{
    font-size:11px;
    font-weight:600;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:var(--grey);
    margin-top:6px;
  }

  .search-wrap{
    flex:1;
    display:flex;
    max-width:560px;
    margin:0 auto;
  }
  .search-wrap select{
    background:#EDEDED;
    border:1px solid #DBDBDB;
    border-right:none;
    padding:0 12px;
    font-size:13px;
    color:var(--ink);
    border-radius:6px 0 0 6px;
  }
  .search-wrap input{
    flex:1;
    border:1px solid #DBDBDB;
    border-left:none;
    border-right:none;
    padding:0 14px;
    font-size:14px;
    outline:none;
  }
  .search-wrap input::placeholder{color:#9A9A9A;}
  .search-wrap button{
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    border:none;
    width:46px;
    border-radius:0 6px 6px 0;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--maroon-dark);
    font-size:16px;
  }
  .search-wrap select, .search-wrap input{height:42px;}

  .header-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
  }
  .icon-btn{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    cursor:pointer;
  }
  .icon-btn .badge{
    position:absolute;top:-2px;right:-2px;
    background:var(--gold);
    color:var(--maroon-dark);
    font-size:10px;font-weight:700;
    width:16px;height:16px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .cart-total{display:flex;flex-direction:column;line-height:1.1;font-size:12px;color:var(--grey);}
  .cart-total b{font-size:14px;color:var(--ink);}

  .whatsapp-btn{
    display:flex;align-items:center;gap:8px;
    background:linear-gradient(180deg,var(--green),var(--green-dark));
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    padding:10px 18px;
    border-radius:24px;
    box-shadow:0 4px 10px rgba(37,162,68,0.35);
    white-space:nowrap;
  }

  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px;height:34px;
    cursor:pointer;
    background:none;border:none;
  }
  .hamburger span{
    display:block;height:3px;width:100%;
    background:var(--maroon);
    border-radius:2px;
    transition:transform .25s, opacity .25s;
  }
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* ============ NAV ============ */
  nav.mainnav{
    background:linear-gradient(180deg,var(--navy-2),var(--navy));
    border-top:1px solid rgba(255,255,255,0.06);
  }
  nav.mainnav ul{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  nav.mainnav li a{
    display:block;
    padding:14px 18px;
    color:#EDEDED;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.3px;
    text-transform:uppercase;
    transition:color .2s, background .2s;
    border-bottom:3px solid transparent;
  }
  nav.mainnav li a:hover, nav.mainnav li a.active{
    color:var(--gold-light);
    background:rgba(255,255,255,0.04);
    border-bottom:3px solid var(--gold);
  }
  nav.mainnav li.new-item a{
    color:var(--gold-light);
  }
  nav.mainnav li.new-item a::after{
    content:"NEW";
    font-size:8px;
    background:var(--maroon);
    color:#fff;
    padding:2px 5px;
    border-radius:3px;
    margin-left:6px;
    vertical-align:2px;
    letter-spacing:0.5px;
  }

  /* ============ MOBILE ============ */
  @media (max-width: 900px){
    .search-wrap{display:none;}
    .header-actions .whatsapp-btn span.wa-text{display:none;}
    .whatsapp-btn{padding:10px;border-radius:50%;width:38px;height:38px;justify-content:center;}
    .cart-total{display:none;}
    .topbar .contact-group span.hide-sm{display:none;}
  }

  @media (max-width: 700px){
    .topbar{padding:6px 14px;font-size:11px;gap:8px;}
    .topbar .acct span.hide-sm-2{display:none;}
    .topbar .socials{display:none;}
    .mainheader{padding:10px 14px;flex-wrap:wrap;}
    .brand img{width:46px;height:46px;}
    .brand .shopname{font-size:20px;}
    .brand .slogan{font-size:9.5px;}
    .hamburger{display:flex;order:3;margin-left:auto;}
    .header-actions{order:2;margin-left:auto;gap:10px;}

    nav.mainnav ul{
      flex-direction:column;
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease;
    }
    nav.mainnav ul.open{max-height:600px;}
    nav.mainnav li a{
      padding:13px 20px;
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    nav.mainnav li a:hover, nav.mainnav li a.active{border-bottom:1px solid rgba(255,255,255,0.06);}
  }

  @media (max-width: 420px){
    .brand .names{max-width:150px;}
    .brand .shopname{font-size:17px;}
  }