/* === Responsive additions for hamburger + horizontal scroll nav === */
:root{ --gold:#d4af37; }

.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#fff; border-bottom:1px solid #eee;
}

.nav-toggle{
  background:transparent; border:0; padding:8px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center;
}
.nav-toggle .bar{ width:22px; height:2px; background:#111; display:block; }

.logo{ height:40px; width:auto; }
.logo-wrap{ display:flex; gap:10px; align-items:center; text-decoration:none; }
.brand-title{ font-weight:800; color:var(--gold); }
.brand-sub{ font-size:12px; opacity:.7; color:#444; }

.actions{ display:flex; gap:12px; align-items:center; }
.cart-count{ background:var(--gold); color:#000; padding:2px 6px; border-radius:10px; margin-inline-start:6px; }
.lang-switch a{ color:var(--gold); text-decoration:none; font-weight:700; }
.lang-switch a.active{ text-decoration:underline; }

/* Horizontal scrollable nav */
.mainnav{ 
  position:sticky; top:60px; z-index:900;
  background:#fff; border-bottom:1px solid #eee;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mainnav::-webkit-scrollbar{ height:0; }
.mainnav .menu-scroll{ display:flex; gap:16px; list-style:none; padding:10px 16px; margin:0; flex-wrap:nowrap; }
.mainnav .menu-scroll > li{ flex:0 0 auto; }
.mainnav a{ display:inline-block; padding:10px 12px; color:#222; text-decoration:none; border-radius:999px; border:1px solid transparent; }
.mainnav a:hover{ border-color:rgba(0,0,0,.08); }

/* Drawer behavior for small screens */
@media (max-width: 768px){
  .mainnav{
    position:fixed; left:0; right:0; top:56px;
    transform:translateY(-120%); transition:transform .25s ease;
  }
  body.nav-open .mainnav{ transform:translateY(0); }
}

/* Desktop tweaks */
@media (min-width: 769px){
  .nav-toggle{ display:none; }
  .mainnav{ position:sticky; top:64px; }
}


/* RESP_CSS_PATCH_V3 */
@media (max-width:768px){
  .topbar{ height:56px; }
  .mainnav{
    position:fixed; left:0; right:0; top:56px;
    max-height:calc(100vh - 56px);
    overflow-x:auto; overflow-y:auto;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    z-index:999;
    transform:translateY(-120%);
    transition:transform .25s ease;
    pointer-events:none;
  }
  body.nav-open .mainnav{
    transform:translateY(0);
    pointer-events:auto;
  }
  body.nav-open{ overflow:hidden; }
  .mainnav .menu-scroll{ gap:6px; padding:12px 10px; }
  .mainnav .menu-scroll a{ padding:12px 14px; font-size:16px; }
  .nav-toggle{ position:relative; z-index:1000; }
}


/* RESP_CSS_PATCH_V4 */
@media (max-width:768px){
  .nav-toggle{
    position:relative; z-index:1001; /* above drawer */
    -webkit-tap-highlight-color: transparent;
    padding:10px; margin:-6px; /* larger hit area */
  }
  .nav-toggle .bar{ height:3px; }

  .mainnav{
    position:fixed; left:0; right:0; top:var(--nav-top,56px);
    max-height:calc(100vh - var(--nav-top,56px));
    overflow-x:auto; overflow-y:auto;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    z-index:1000;
    transform:translateY(-120%);
    opacity:0;
    transition:transform .25s ease, opacity .2s ease;
    pointer-events:none;
    visibility:hidden;
  }
  body.nav-open .mainnav,
  .mainnav.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
    visibility:visible;
  }
  body.nav-open{ overflow:hidden; }
  .mainnav .menu-scroll{ gap:8px; padding:14px 12px; }
  .mainnav .menu-scroll a{ padding:14px 16px; font-size:16px; }
}