/* Shared header (shop + every generated page): blue announcement bar, a rounded "capsule" holding the logo,
   the category tabs and cart/WhatsApp/Instagram, and the hover menu that drops down under it. Google-Store style. */
:root{--brand:#513951;} /* the signature purple from the logo */
.announce{background:var(--brand,#513951); color:#fff; text-align:center; font-size:14px; font-weight:500; padding:10px 16px; line-height:1.4;}
.announce a{color:#fff; text-decoration:underline; text-underline-offset:3px;}

.site-header{position:sticky; top:0; z-index:60; background:#fff; padding:10px 16px 8px;}
.capsule{position:relative; max-width:1400px; margin:0 auto; min-height:64px; background:var(--tile,#F1F3F4); border-radius:34px; padding:6px 10px 6px 22px; display:flex; align-items:center; gap:10px;}

.logo{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right:8px; font-weight:700; font-size:18px; letter-spacing:-.04em; color:var(--ink,#191C1D); text-decoration:none;}
.logo img{width:30px; height:30px; object-fit:contain;}

/* categories: one line, slides sideways when there are too many for the width */
.cat-scroll{position:relative; flex:1; min-width:0;}
.cat-nav-inner, .subcat-nav{display:flex; flex-wrap:nowrap; gap:2px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}
.subcat-nav{gap:4px;}
.cat-nav-inner::-webkit-scrollbar, .subcat-nav::-webkit-scrollbar{display:none;}
.cat-tab, .subcat-tab{flex-shrink:0; display:inline-flex; align-items:center; background:none; border:none; border-radius:12px; font-family:var(--font); color:var(--muted,#5F6368); white-space:nowrap; cursor:pointer; font-weight:500; text-decoration:none; transition:background .15s, color .15s;}
.cat-tab{padding:11px 14px; font-size:14px;}
.subcat-tab{padding:8px 12px; font-size:13px;}
.cat-tab:hover, .cat-tab.hovering{background:#fff; color:var(--ink,#191C1D);}
.subcat-tab:hover{background:var(--tile,#F1F3F4); color:var(--ink,#191C1D);}
.cat-tab.active, .subcat-tab.active{background:var(--blue-tonal,#D3E3FD); color:var(--blue-ink,#041E49); font-weight:700;}
.cat-tab:focus-visible, .subcat-tab:focus-visible{outline:2px solid var(--blue,#0B57D0); outline-offset:2px;}

/* little arrows that appear at the edge when there is more to slide to */
.cat-arrow{position:absolute; top:0; bottom:0; width:46px; border:none; display:none; align-items:center; z-index:3; color:var(--ink,#191C1D); cursor:pointer; padding:0;}
.cat-arrow.show{display:flex;}
.cat-arrow.left{left:0; justify-content:flex-start; background:linear-gradient(to right,#fff 45%,rgba(255,255,255,0));}
.cat-arrow.right{right:0; justify-content:flex-end; background:linear-gradient(to left,#fff 45%,rgba(255,255,255,0));}
.capsule .cat-arrow.left{background:linear-gradient(to right,#F1F3F4 45%,rgba(241,243,244,0));}
.capsule .cat-arrow.right{background:linear-gradient(to left,#F1F3F4 45%,rgba(241,243,244,0));}
.cat-arrow svg{width:18px; height:18px; stroke-width:2;}
.cat-arrow:hover{color:var(--blue,#0B57D0);}
@media (hover:none){ .cat-arrow{display:none!important;} }

/* right side of the capsule */
.nav-right{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.nav-cta, .cart-btn{display:inline-flex; align-items:center; gap:8px; border:none; background:none; color:var(--ink,#191C1D); padding:11px 14px; border-radius:var(--r-btn,14px); font-family:var(--font); font-size:14px; font-weight:500; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background .15s;}
.nav-cta:hover, .cart-btn:hover{background:#fff;}
.nav-wa{background:#25D366; color:#0A3D1E; padding:11px 18px;} /* WhatsApp green; dark text because white on this green is only 2:1 */
.nav-wa:hover{background:#1FBF5B;}
.nav-ig{padding:11px;}
.cart-btn{position:relative;}
.cart-btn.bump svg{animation:cartBump .4s cubic-bezier(.25,1,.5,1);}
.cart-count-label{font-weight:700;}
@keyframes cartBump{0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);}}

/* hover menu that drops down under the capsule */
.mega{display:none; position:absolute; top:calc(100% - 6px); left:50%; transform:translateX(-50%); width:min(1400px, calc(100% - 32px)); background:#fff; border:1px solid var(--hair,#E3E3E3); border-radius:26px; box-shadow:0 24px 48px -12px rgba(25,28,29,.22); padding:26px 28px; z-index:70; grid-template-columns:270px 1fr; gap:32px;}
.mega.open{display:grid;}
.mega-side h3{font-size:22px; font-weight:700; letter-spacing:-.04em; line-height:1.2;}
.mega-count{color:var(--muted,#5F6368); font-size:13px; margin:4px 0 16px;}
.mega-subs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.mega-sub{padding:8px 12px; background:var(--tile,#F1F3F4); border-radius:10px; font-size:13px; text-decoration:none; color:var(--ink,#191C1D);}
.mega-sub:hover{background:var(--blue-tonal,#D3E3FD); color:var(--blue-ink,#041E49);}
.mega-all{display:inline-flex; align-items:center; background:var(--blue,#0B57D0); color:#fff; padding:12px 18px; border-radius:var(--r-btn,14px); font-size:14px; text-decoration:none;}
.mega-all:hover{background:var(--blue-dark,#0842A0);}
.mega-items{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-content:start;}
.mega-tile{display:block; text-decoration:none; color:var(--ink,#191C1D);}
.mega-tile .well{aspect-ratio:1/1; background:#fff; border:1px solid var(--hair,#E3E3E3); border-radius:18px; padding:14px; display:flex; align-items:center; justify-content:center; transition:border-color .2s;}
.mega-tile:hover .well{border-color:var(--blue,#0B57D0);}
.mega-tile img{width:100%; height:100%; object-fit:contain;}
.mega-tile .noimg{font-size:13px; color:var(--muted,#5F6368);}
.mega-name{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:10px 4px 0; font-size:14px; font-weight:700; letter-spacing:-.03em; line-height:1.25;}

/* phones / tablets: the categories move onto their own line inside the capsule; no hover menu (tap filters instead) */
@media (max-width:999px){
  .site-header{padding:8px 10px 6px;}
  .capsule{flex-wrap:wrap; border-radius:28px; padding:8px 8px 6px 16px; row-gap:2px;}
  .logo{margin-right:auto; font-size:16px;}
  .cat-scroll{order:3; flex:1 1 100%; margin:0 -2px 2px;}
  .cat-tab{padding:10px 13px; font-size:15px;}
  .mega{display:none!important;}
}
@media (max-width:640px){
  .nav-wa span, .nav-ig span{display:none;}
  .nav-wa{padding:11px 12px;}
  .cart-btn, .nav-cta{padding:10px 11px;}
}
@media (hover:none){ .mega{display:none!important;} }