/* «כותרת אתר» (app/site-header.js, theme.siteHeader). No key → no
   #siteHeader and no html[data-site-header], so nothing here applies.
   In flow at the top of the page, never sticky (AGENTS.md «Storefront layout»). */

.site-header{--sh-bg:var(--ui-page-bg, var(--paper)); --sh-ink:var(--ink); --sh-line:var(--line); --sh-hover:var(--paper-dim); --sh-accent:var(--primary);
  position:relative; z-index:30; background:var(--sh-bg); color:var(--sh-ink);
  border-bottom:1px solid var(--sh-line); font-family:var(--font-body), sans-serif;}
/* A dark ground (the same list as theme.css's dark-ground rules: «אספרסו»,
   «דיו», «שחור» …): a dark bar in the ground's own colour, light text and
   icons, a light keyboard ring. An owner page colour (--ui-page-bg, written
   on <html>) wins: the bar then keeps it and the shop's ink, as before. */
html:is([data-theme-background="deep"],[data-theme-background="black"],
  [data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],
  [data-theme-background="darkfade"]):not([style*="--ui-page-bg"]) .site-header{
  --sh-bg:var(--theme-page-bg, #1D1A18); --sh-ink:#F3F5F3; --sh-line:rgba(255,255,255,.14); --sh-hover:rgba(255,255,255,.1); --sh-accent:#F3F5F3;
  --focus-ring:#F3F5F3;
}
.sh-inner{display:flex; align-items:center; gap:16px; min-height:72px; padding-block:8px;}

/* The logo: the hero's picture, or the shop's name. */
.sh-logo{flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; color:var(--sh-ink); text-decoration:none; border-radius:var(--r-chip);}
.sh-logo img{display:block; height:calc(52px * var(--logo-scale, 1)); max-height:64px; width:auto; max-width:180px; object-fit:contain;}
.sh-name{font-family:var(--font-brand, var(--font-display, var(--font-body))), sans-serif; font-weight:800; font-size:1.375rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:16rem;}

/* The menu: one row; more items than room scroll sideways in it. */
.sh-nav{flex:1 1 auto; min-width:0;}
.sh-list{display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;}
.sh-list::-webkit-scrollbar{display:none;}
.sh-list > li{flex:0 0 auto;}
.sh-link{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:12px; border-radius:var(--r-chip);
  color:var(--sh-ink); text-decoration:none; font-weight:600; font-size:0.9375rem; white-space:nowrap;}
.sh-link:hover{background:var(--sh-hover); color:var(--sh-accent);}
.sh-phone{color:var(--sh-accent);}
.sh-phone-num{unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.sh-phone-item{margin-inline-start:auto;}

/* The tools: WhatsApp, the magnifier and the cart, 44px each. */
.sh-tools{flex:0 0 auto; display:flex; align-items:center; gap:4px;}
.sh-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  border:0; border-radius:999rem; background:transparent; color:var(--sh-ink); cursor:pointer; text-decoration:none;}
.sh-btn:hover{background:var(--sh-hover); color:var(--sh-accent);}
.sh-wa{color:var(--ui-btn-primary-bg, var(--sh-accent));}
.sh-cart{background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff);}
.sh-cart:hover{background:var(--ui-btn-primary-bg, var(--primary)); color:var(--ui-btn-primary-text, #fff); filter:brightness(1.08);}
.sh-count{position:absolute; inset-block-start:-4px; inset-inline-end:-4px; min-width:20px; height:20px; padding-inline:5px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999rem; font-size:0.75rem; font-weight:700; line-height:1;
  background:var(--gold); color:var(--gold-ink, #2A1F08); font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--sh-bg);}
.sh-count[hidden]{display:none;}
.sh-menu-btn{display:none;}

.sh-logo:focus-visible, .sh-link:focus-visible, .sh-btn:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}

/* centred: the logo in the middle of the first row, the menu centred under it. */
.site-header[data-style="centred"] .sh-inner{display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"start logo tools" "nav nav nav"; row-gap:4px; padding-block:12px 4px;}
.site-header[data-style="centred"] .sh-logo{grid-area:logo; justify-self:center;}
.site-header[data-style="centred"] .sh-tools{grid-area:tools; justify-self:end;}
.site-header[data-style="centred"] .sh-menu-btn{grid-area:start;}
.site-header[data-style="centred"] .sh-nav{grid-area:nav; border-top:1px solid var(--sh-line); padding-top:4px;}
.site-header[data-style="centred"] .sh-list{flex-wrap:wrap; justify-content:center; overflow:visible;}
.site-header[data-style="centred"] .sh-phone-item{margin-inline-start:0;}

/* One logo, one cart on screen (site-header.js «the rules»). */
html[data-site-header] #home #heroLogo{display:none;}
@media (max-width:600px){
  html[data-site-header][data-layout-header="centred"] #home:has(> .hero-content > #heroLogo:not([style*="none"])){--mast-h:80px;}
}
html[data-site-header-seen] #cartBar{visibility:hidden;}

/* Phone and narrow screens: ☰ at the start, the logo in the middle, the
   tools at the end; the menu is a panel under the bar. */
@media (max-width:900px){
  .sh-inner, .site-header[data-style="centred"] .sh-inner{display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"start logo tools"; gap:8px; min-height:60px; padding-block:6px; padding-inline:12px;}
  .sh-menu-btn{display:inline-flex; grid-area:start; justify-self:start;}
  .sh-logo, .site-header[data-style="centred"] .sh-logo{grid-area:logo; justify-self:center; min-width:0;}
  .sh-logo img{height:calc(40px * var(--logo-scale, 1)); max-height:48px; max-width:44vw;}
  .sh-name{font-size:1.125rem; max-width:44vw;}
  .sh-tools, .site-header[data-style="centred"] .sh-tools{grid-area:tools; justify-self:end; gap:2px;}
  .sh-nav, .site-header[data-style="centred"] .sh-nav{display:none; position:absolute; inset-inline:0; inset-block-start:100%; z-index:40;
    max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain; padding:8px 12px 12px; border-top:1px solid var(--sh-line);
    background:var(--sh-bg); box-shadow:0 12px 24px -12px rgba(0,0,0,.25);}
  .site-header.is-open{z-index:65;}   /* the open panel over the page's own layers, under the cart bar (70) and the drawer */
  .site-header.is-open .sh-nav{display:block;}
  .sh-list, .site-header[data-style="centred"] .sh-list{display:flex; flex-direction:column; align-items:stretch; flex-wrap:nowrap; justify-content:flex-start; gap:0; overflow:visible;}
  .sh-list > li + li{border-top:1px solid var(--sh-line);}
  .sh-link{display:flex; min-height:48px; font-size:1rem;}
  .sh-phone-item, .site-header[data-style="centred"] .sh-phone-item{margin-inline-start:0;}
}
@media (max-width:360px){
  .sh-wa{display:none;}
}