/* Site header and footer for pages that bring their own styles (the designer).
   Scoped and hard-coded so it never touches the page underneath. */
.site-head{position:relative;z-index:20;background:#f4f4f2;border-bottom:1.5px solid #141414;color:#141414;
  font:16px/1.5 "Outfit","Helvetica Neue",Helvetica,Arial,sans-serif}
.site-head>.wrap,footer.site-foot>.wrap{max-width:1320px;margin:0 auto;padding-inline:16px;min-height:0}
.site-head>.wrap{display:flex;flex-direction:row;align-items:center;gap:20px;height:60px}
.site-head .logo,.site-foot .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.site-head .logo img,.site-foot .logo img{height:24px;width:auto;display:block}
.site-head .wm,.site-foot .wm{font-family:"Outfit",sans-serif;font-size:19px;letter-spacing:.06em;line-height:1}
.site-head .wm b,.site-foot .wm b{font-weight:800}.site-head .wm span,.site-foot .wm span{font-weight:300}
.site-head .nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.site-head .nav a{text-decoration:none;color:#141414;font-size:13.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 12px;border-radius:2px}
.site-head .nav a:hover{background:#e1e2e6}
.site-head .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 #141414}
.site-head .menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid #141414;color:#141414;
  font:600 13px "Outfit",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
@media (max-width:760px){
  .site-head .menu-btn{display:block}
  .site-head .nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;
    background:#f4f4f2;border-bottom:1.5px solid #141414;padding:8px 16px 16px;z-index:30}
  .site-head .nav.open{display:flex}
  .site-head .nav a{padding:12px 4px}
}
footer.site-foot{display:block;border:0;padding:0;background:#141414;color:#bdbdb8;margin-top:48px;
  font:14px/1.6 "Outfit","Helvetica Neue",Helvetica,Arial,sans-serif}
footer.site-foot>.wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-block:44px 26px}
.site-foot .logo{color:#fff}.site-foot .logo img{filter:invert(1)}
.site-foot p{margin:14px 0 0}
.site-foot h4{color:#fff;font:600 12px "Outfit",sans-serif;letter-spacing:.24em;text-transform:uppercase;margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-foot a{text-decoration:none;color:inherit}.site-foot a:hover{color:#fff}
.site-foot .legal{grid-column:1/-1;border-top:1px solid #333;padding-top:18px;font-size:12.5px;color:#8a8a85}
@media (max-width:760px){footer.site-foot>.wrap{grid-template-columns:1fr}}

/* how to send the design, under the Save button */
.sendhint{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted,#6f6f6f)}
.sendhint b{color:var(--ink,#141414)}

/* touch screens: bigger targets (phones and tablets) */
@media (pointer:coarse){
  .site-head .menu-btn{min-height:44px;padding:10px 14px}
  .site-head .nav a{padding-block:12px}
  .site-foot ul a{display:inline-block;padding:9px 0}
  .hud button{min-height:40px}
  .tabs button,.tabs [role=tab]{min-height:40px}
  #cart{min-height:48px}
}
