/* Direction-aware brand lockup. The mark is the first flex item, so it sits on the inline-start. */
.site-header .brand,
.site-footer .brand{
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:flex-start;
  /* The RTL mark stays first. Space is optical: the SVG has internal clear space. */
  gap:.12em;
  min-inline-size:0;
  inline-size:max-content;
  max-inline-size:100%;
  font-family:Fredoka,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1.45rem,.85rem + 1.9vw,2.45rem);
  font-weight:700;
  line-height:1.05;
  text-decoration:none;
  text-align:start;
}
.site-header .brand{color:var(--forest)}
.site-footer .brand{color:var(--paper);margin-block-end:1rem}
html[lang=ru] .brand,
html[lang=ar] .brand{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.brand .brand-mark{
  display:block;
  flex:none;
  /* Approved symbol proportions relative to the live Hebrew wordmark. */
  inline-size:1.5em;
  block-size:1.5em;
  max-inline-size:none;
  transform:translateY(-.08em);
}
.brand-word{
  display:flex;
  flex-direction:column;
  /* The descriptor is optically centered under the name in the approved lockup. */
  align-items:center;
  justify-content:center;
  gap:.23em;
  min-inline-size:0;
  max-inline-size:none;
}
.brand-name,.brand-tagline{display:block;min-inline-size:0;max-inline-size:100%}
.brand-name{
  font-size:1em;
  font-weight:700;
  line-height:1;
  letter-spacing:-.025em;
  text-align:center;
  white-space:nowrap;
  text-box:trim-both cap alphabetic;
}
.brand-tagline{
  font-size:.34em;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  white-space:nowrap;
}
/* Split only the existing descriptor's middle dots; keep the words as live translated text. */
.brand-separator{color:var(--coral)}
@media(width < 42rem){
  .site-header .brand{
    justify-self:center;
    font-size:clamp(1.05rem,4.6vw,1.35rem);
    max-inline-size:100%;
  }
  .site-header .brand .brand-mark{display:block;inline-size:1.5em;block-size:1.5em}
  .site-header .brand-word{max-inline-size:100%}
  .site-header .brand-tagline{display:none}
  .site-footer .brand{max-inline-size:min(100%,17rem)}
}
.site-footer .footer-top .brand{
  font-size:clamp(1.2rem,1rem + .8vw,1.7rem);
  max-inline-size:min(100%,17rem);
}
@media(width < 42rem){
  .single-product .site-header .brand{
    min-inline-size:0;
    inline-size:max-content;
    max-inline-size:100%;
    justify-content:center;
  }
}
.single-product .site-footer .brand{inline-size:auto;min-inline-size:0;max-inline-size:100%}
@container product-header (width < 22em){
  .single-product .site-header .brand{max-inline-size:100%}
}