:root{
  --sh-topbar-height: 38px;     /* change if your topbar height differs */
  --sh-container: 1500px;      /* inner content width */
  --sh-bg: #ffffff;
  --sh-text: #222;
  --sh-accent: #b87939;
  --sh-transition: 260ms ease;
  --sh-z: 10000;
  --sh-height: 64px;           /* header height; adjust if needed */
}

/* --------------------------
   TOPBAR (full width, fixed)
   -------------------------- */
.sh-topbar{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--sh-topbar-height);
  line-height: var(--sh-topbar-height);
  background: #b87939;
  color:#fff;
  text-align:center;
  z-index: calc(var(--sh-z) - 2);
  font-size:14px;
  padding:0 12px;
  box-sizing:border-box;
  transition: opacity 0.30s ease, max-height 0.30s ease, padding 0.30s ease;
  overflow:hidden;
}

/* --------------------------
   HEADER WRAPPER & FIXED HEADER
   (header sits under topbar on load)
   -------------------------- */
.sh-header-wrapper{
  width:100%;
  position:relative;
  z-index: calc(var(--sh-z) + 1);
  /* placeholder height to avoid jump (JS can update this) */
  height: var(--sh-height);
  box-sizing: border-box;
}

/* make header fixed under topbar initially */
.sh-header{
  position: fixed;
  top: var(--sh-topbar-height); /* sits below topbar at page load */
  left:0;
  right:0;
  width:100%;
  z-index: calc(var(--sh-z) + 3);
  background: var(--sh-bg);
  transition: transform var(--sh-transition), background-color var(--sh-transition), box-shadow var(--sh-transition), top var(--sh-transition);
  will-change: transform, top;
  box-sizing: border-box;
}

/* when JS adds .is-sticky -> header moves to very top and gets shadow */
.sh-header.is-sticky{
  top: 0 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  background-color: rgba(255,255,255,0.98);
  backdrop-filter: blur(4px);
}

/* hide on scroll down */
.sh-header.is-hidden{
  transform: translateY(-110%);
}

/* small header variant */
.sh-header.is-small{
  padding-top:6px;
  padding-bottom:6px;
}

/* --------------------------
   INNER (centered 1100px) & layout
   -------------------------- */
/* override to 1100px centered container */
.sh-inner{
  max-width: var(--sh-container);
  margin: 0 auto;
  box-sizing: border-box;
  height: var(--sh-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

/* left / center / right helpers */
.sh-left, .sh-center, .sh-right{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
}

/* center area should center its content */
.sh-center{ justify-self: center; }
.sh-center .sh-menu { margin:0; }

/* small tweak for logo / menu transitions */
.sh-header .sh-inner { transition: padding 260ms ease; }

/* --------------------------
   LOGO / MENU / ICONS STYLES
   -------------------------- */
.sh-logo, .sh-logo-responsive{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color: var(--sh-accent) !important;
  font-weight:600 !important;
  font-size: 20px;
}

/* main menu */
.sh-menu{
  display:flex;
  gap:18px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  font-size:15px;
}
.sh-menu a{
  text-decoration:none;
  color: var(--sh-text);
  padding:6px 8px;
  border-radius:6px;
  transition: background var(--sh-transition), color var(--sh-transition);
}
.sh-menu a:hover{
  background: rgba(12,17,43,0.04);
  color: var(--sh-accent);
}

/* icons/buttons */
.sh-icon-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--sh-text);
  padding:6px;
  border-radius:6px;
  transition: background var(--sh-transition), transform 0.18s ease;
  text-decoration:none;
  position:relative; /* for absolute child counters */
}
.sh-icon-btn:hover{ background: rgba(12,17,43,0.04); transform: translateY(-2px); }

/* specific account link style preserved */
.sh-account-link {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #333 !important;
  padding: 8px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}
.sh-account-link:hover{
  background-color: #f5f5f5 !important;
  color: var(--sh-accent) !important;
  transform: translateY(-2px) !important;
}

/* cart button with counter */
.wc-block-cart__submit-container a {
        background: #A35800 !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.3s 
ease !important;
}
.wc-block-cart__submit-container a:hover {
    background: #A35000 !important;
    transform: translateY(-2px) !important;
}


[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover {
 background-color: #b87939;
}

.sh-cart-btn {   
	display:flex !important;
	justify-content:center !important;
	align-items:center !important;
	background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 8px;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    position: relative;
}
.sh-cart-btn:hover {
    background-color: #f5f5f5 !important;
    color: #b87939;
    transform: translateY(-2px);
}

.sh-cart-count {   
	position: absolute;
    top: 2px;
    right: 2px;
    background-color: #b87939 !important;
    color: white;
    font-size: 10px;
    /*padding: 2px 5px;*/
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.sh-cart-btn { position: relative; }


/* CTA helper */
.sh-cta{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; text-decoration:none; }
.sh-cta:hover{ color:#A35800 !important; transition:0.5s; }
.sh-cta.primary{ background:var(--sh-accent); color:#fff; border-color:transparent }

/* --------------------------
   BURGER / MOBILE SWITCHING
   -------------------------- */
.sh-burger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px;
}

/* responsive rules */
@media (max-width: 900px) {
  /* hide desktop center menu, show responsive logo and burger */
  .sh-center { display:none; }
  .sh-logo { display:none !important; }           /* hide left logo on small screens */
  .sh-center-responsive { display:flex !important; justify-content:center; }
  .sh-menu { display:none; }
  .sh-burger { display:inline-flex; }

  /* layout grid -> burger | logo | icons */
  .sh-inner { grid-template-columns: auto 1fr auto; padding: 8px 12px; }
  .sh-left { justify-content:flex-start; }
  .sh-center-responsive { justify-self: center; }
  .sh-right { justify-content:flex-end; gap:10px; }

  /* shrink header height for mobiles */
  :root { --sh-height: 56px; }
  .sh-inner { height: var(--sh-height); }
}

@media (min-width: 901px) {
  .sh-burger { display:none; }
  .sh-center-responsive { display:none !important; }
}

/* --------------------------
   MOBILE SLIDE-IN MENU
   -------------------------- */
.sh-mobile-overlay{
  position:fixed;
  inset:0;
  background: rgba(8,12,20,0.4);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--sh-transition);
  z-index: calc(var(--sh-z) + 1);
  height: 100vh;
  max-height: 100vh;
}
.sh-mobile-overlay.visible{ opacity:1; pointer-events:auto; z-index: calc(var(--sh-z) + 4); }
.sh-mobile-menu{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width: min(320px,86vw);
  background: var(--sh-bg);
  transform: translateX(-110%);
  transition: transform var(--sh-transition);
  z-index: calc(var(--sh-z) + 4);
  box-shadow: 6px 0 24px rgba(10,15,30,0.08);
  padding: 18px;
  overflow-y:auto;
  height: 100vh;
  max-height: 100vh;
}
.sh-mobile-menu.open{ transform: translateX(0);  z-index: calc(var(--sh-z) + 5);  }
.sh-mobile-menu .sh-mobile-links{ list-style:none; margin:12px 0 0; padding:0; }
.sh-mobile-menu .sh-mobile-links a{ display:block; padding:12px 8px; border-radius:8px; text-decoration:none; color:var(--sh-text); margin-bottom:6px; }
.sh-mobile-menu .sh-mobile-links a:hover{ background: rgba(12,17,43,0.04); }

/* keep mobile/menu buttons clickable on top */
.sh-mobile-menu, .sh-mobile-overlay { z-index: 10000; }

/* --------------------------
   small helpers / utilities
   -------------------------- */
.sh-loading, .sh-empty { padding:24px; text-align:center; color: rgba(12,17,43,0.5); }
.sh-center-responsive { display:none !important; } /* keep default hidden */