/* Four fixed 30px corners, repeating edges, seamless tiled leather center.
   120 source pixels / 30 CSS pixels: same stitch and edge scale at every width.
   Deliberately use repeat, never round or stretch, for the stitched edges. */
.compact-shop .shop-header{
  position:sticky;top:12px;z-index:100;
  width:calc(100% - 32px);max-width:1160px;margin:16px auto;
  min-height:104px;padding:28px 38px;border:0;
  display:flex;align-items:center;gap:24px;isolation:isolate;
  color:#412819;filter:drop-shadow(0 8px 10px #3b241f40);
}
.shop-header::before,.shop-header::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
}
.shop-header::before{
  inset:18px;border-radius:15px;
  background:#f3c498 url('./assets/leather-center.svg') repeat;
  background-size:128px 128px;
}
.shop-header::after{
  inset:0;border:30px solid transparent;
  /* The repeated lower tile otherwise protrudes beyond the corner silhouette. */
  clip-path:inset(0 0 3px 0 round 22px);
  border-image-source:url('./assets/leather-frame.svg');
  border-image-slice:120;border-image-width:30px;border-image-repeat:repeat;
}
.compact-shop .shop-header a,.compact-shop .shop-header button{color:#412819}
.shop-header .shop-brand{margin-right:auto;font-weight:800;white-space:nowrap}
.shop-header .shop-navigation{display:flex;gap:24px;align-items:center}
.shop-header a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
.shop-header a:hover{text-decoration-thickness:2px}
.shop-header .shop-cart{font-weight:700}
.shop-header .shop-menu-toggle{display:none}
.compact-shop .sheep-row{scroll-margin-top:132px}
.compact-shop .shop-header :is(a,button):focus-visible{outline:3px solid #58311f;outline-offset:3px;border-radius:4px}
@media(max-width:639px){
  .compact-shop .shop-header{
    top:8px;width:calc(100% - 16px);margin:12px auto;
    min-height:96px;padding:25px 22px;gap:4px;
    display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .shop-header .shop-menu-toggle{
    display:grid;place-content:center;width:44px;height:44px;
    padding:10px;border:0;background:transparent;cursor:pointer;
  }
  .shop-menu-toggle span{display:block;width:20px;height:2px;background:currentColor;margin:2px 0}
  .shop-header .shop-brand{justify-self:center;margin:0;font-size:12px;white-space:normal;text-align:center;line-height:1.3}
  .shop-header .shop-cart{justify-content:center;font-size:13px}
  .shop-header .shop-navigation{display:none;grid-column:1/-1;grid-row:2;justify-content:center;gap:28px;padding-top:8px}
  .shop-header[data-menu-open] .shop-navigation{display:flex}
  .compact-shop .sheep-row{scroll-margin-top:120px}
}
@media(prefers-reduced-motion:no-preference){.shop-header a{transition:color .15s ease}}