/* =========================================================
   MOBILE NAV (hamburger) + UNIFORM ORANGE BUTTONS
   ========================================================= */

/* ---- Uniform button color: match the "Shop Now" orange everywhere ---- */
:root{ --brand-orange:#fcb71c; --brand-orange-2:#ffc940; --brand-orange-dark:#c98a08; }

/* Shop Now nav button -> orange (was gold) */
nav .nav-cta{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-2)) !important;
  color:#fff !important;}

/* all primary buttons share the same orange */
.btn-gold,.btn-shop,.btn-review,.nav-cta{
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-2)) !important;
  color:#fff !important;
  box-shadow:0 6px 0 var(--brand-orange-dark),0 12px 24px rgba(252,183,28,.4) !important;}
.btn-gold:hover,.btn-shop:hover,.btn-review:hover{
  transform:translateY(-3px);
  box-shadow:0 9px 0 var(--brand-orange-dark),0 16px 30px rgba(252,183,28,.5) !important;}
.btn-gold:active,.btn-shop:active,.btn-review:active{
  transform:translateY(3px);box-shadow:0 2px 0 var(--brand-orange-dark) !important;}

/* ---- Hamburger button (hidden on desktop) ---- */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-2));
  box-shadow:0 4px 0 var(--brand-orange-dark);padding:0 11px;margin-left:auto}
.hamburger span{display:block;height:3px;width:100%;border-radius:3px;background:#fff;
  transition:.28s ease}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- Mobile layout ---- */
@media(max-width:900px){
  nav{flex-wrap:nowrap;justify-content:space-between}
  .nav-logo{margin-right:0}
  .hamburger{display:flex}

  /* menu becomes a dropdown drawer */
  .menu{position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;width:100%;margin-top:0;
    padding:6px 0;border-top:3px solid var(--brand-orange);
    box-shadow:0 16px 30px rgba(13,31,92,.18);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .35s ease,opacity .25s ease,visibility .25s}
  .menu.open{max-height:80vh;opacity:1;visibility:visible;overflow:auto}

  .menu a,.menu .dropbtn{display:block;width:100%;text-align:center;
    border-radius:0;padding:15px 18px;font-size:1.1rem}
  .menu a:hover,.menu .dropbtn:hover{transform:none}

  /* dropdown opens inline (no hover) */
  .dropdown{width:100%}
  .dropdown-content{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;min-width:0;background:rgba(127,208,255,.14);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .dropdown.open-sub .dropdown-content{max-height:300px}
  .dropdown-content a{padding:13px 18px;text-align:center}

  /* Shop Now full-width inside the drawer */
  .menu .nav-cta{margin:8px 16px;text-align:center}
}