.storefront .header {
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(200px,2.2fr) auto;
  gap:clamp(12px,3vw,42px);
  align-items:center;
  padding-block:14px;
}
.storefront .header > .brand { max-width:100%; }
.storefront .header .site-logo { max-width:100%; max-height:76px; object-position:left center; }
.storefront .header .search {
  width:100%; max-width:none; margin:0; border-radius:14px; overflow:hidden;
  border:1px solid #e3e8e2; background:white; min-height:48px;
}
.storefront .header .search input { min-width:0; }
.storefront .header .search button {
  position:relative; width:48px; min-height:46px; flex:0 0 48px;
  background:var(--green,#285344); color:white; font-size:0;
}
.storefront .header .search button::before {
  content:""; display:block; margin:auto; width:15px; height:15px;
  border:2px solid currentColor; border-radius:50%;
}
.storefront .header .search button::after {
  content:""; position:absolute; width:8px; height:2px; background:currentColor;
  top:calc(50% + 9px); left:calc(50% + 5px); transform:rotate(45deg);
}
.storefront .header-actions { display:flex; gap:8px; margin:0; }
.storefront .header-actions a {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:6px 10px; border-radius:999px; white-space:nowrap;
}
.storefront .header-actions .bag { background:var(--green,#285344); color:white; }
.storefront .nav { border-block:1px solid #e3e8e2; }
.storefront .nav > .wrap {
  display:flex; justify-content:safe center; align-items:center; gap:clamp(10px,1.6vw,24px);
  overflow-x:auto; flex-wrap:nowrap;
}
.storefront .nav a { flex:none; min-height:44px; display:flex; align-items:center; text-transform:uppercase; font-size:11px; font-weight:700; }
.storefront .visual-categories {
  display:flex; justify-content:safe center; gap:clamp(12px,2vw,28px);
  overflow-x:auto; padding:22px 4px 14px; scroll-snap-type:x proximity;
}
.storefront .visual-categories a {
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 105px;
  text-align:center; font-size:13px; font-weight:650; line-height:1.3; scroll-snap-align:start;
}
.visual-category-photo {
  display:block; width:94px; height:94px; border-radius:50%; overflow:hidden;
  background:#eaf0e9; border:3px solid white; box-shadow:0 0 0 1px #dbe5dc;
}
.visual-category-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.visual-categories a:hover .visual-category-photo,
.visual-categories a:focus-visible .visual-category-photo { box-shadow:0 0 0 2px var(--green,#285344); }
@media(max-width:760px) {
  .storefront .header { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .storefront .header > .search { grid-row:2; grid-column:1/-1; }
  .storefront .header > .header-actions { grid-row:1; grid-column:2; }
  .storefront .header-actions a { font-size:11px; padding-inline:7px; }
  .storefront .visual-categories { padding-top:15px; gap:12px; }
  .storefront .visual-categories a { flex-basis:74px; font-size:11px; }
  .visual-category-photo { width:66px; height:66px; }
}
.storefront .header-actions .header-icon {
  justify-content:center; min-width:44px; padding-inline:9px;
  border:1px solid #dce5dc;
}
.storefront .header-actions .bag { border-color:transparent; }
.storefront .header-actions svg { flex:none; }
.storefront .visual-categories { border-top:1px solid #e3e8e2; }
.storefront .visual-categories [aria-current="page"] .visual-category-photo {
  box-shadow:0 0 0 2px var(--green,#285344);
}
@media(max-width:760px) {
  .storefront .header-actions .header-icon span { display:none; }
}

/* Mobile brand visibility and compact storefront spacing. */
@media(max-width:760px) {
  .storefront .header {
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding-block:12px;
  }
  .storefront .header > .brand { margin:0; gap:8px; min-width:0; }
  .storefront .header .site-logo { width:52px; max-width:52px; max-height:52px; flex:none; }
  .storefront .header .brand:has(.site-logo) > span:not(.brand-icon) {
    display:block; font-size:clamp(16px,4.5vw,22px);
    line-height:1.12; letter-spacing:-.6px; overflow-wrap:normal;
  }
  .storefront .header .brand small { font-size:7px; letter-spacing:1px; line-height:1.4; }
  .storefront .header-actions { gap:5px; }
  .storefront .header-actions .header-icon { padding:6px; min-width:38px; min-height:40px; }
  .storefront .header-actions .bag b { margin:0; }
  .storefront .visual-categories { padding-block:10px 12px; gap:12px; }
  .storefront .visual-categories a { flex-basis:72px; }
  .storefront .hero,
  .storefront.layout-banner .hero,
  .storefront.layout-center .hero {
    display:grid; grid-template-columns:minmax(0,1fr);
    min-height:0; margin-top:12px; border-radius:16px;
  }
  .storefront .hero .hero-copy,
  .storefront.layout-banner .hero .hero-copy,
  .storefront.layout-center .hero .hero-copy {
    padding:22px 18px; width:100%; text-align:left;
  }
  .storefront .hero h1 { font-size:clamp(29px,8vw,39px); line-height:1.12; margin:8px 0 12px; }
  .storefront .hero .eyebrow { font-size:10px; letter-spacing:1.5px; }
  .storefront .hero .hero-art,
  .storefront.layout-banner .hero .hero-art,
  .storefront.layout-center .hero .hero-art {
    width:100%; min-height:0; height:220px; overflow:hidden;
  }
  .storefront .hero-art > img { max-height:100%; transform:none; }
  .storefront .hero-stamp { display:none; }
  .storefront .hero-note { margin-top:12px; }
  .storefront .seo-text { padding-block:24px; }
  .storefront .seo-text h2 { font-size:25px; line-height:1.25; overflow-wrap:anywhere; }
  .storefront .seo-text p { font-size:14px; line-height:1.75; }
}
