/* Wave 2 (Issues #185, #186): visible focus, and search + cart links in the home/marketing header. Loaded last by AppAssetNew. Colours are custom properties so a later theme can change them in one place. */
:root{--dc-focus-ring:#1b1b1d;--dc-header-ink:#fefefe;--dc-tap:44px}
header{--dc-focus-ring:#fefefe}
:focus-visible{outline:2px solid var(--dc-focus-ring)!important;outline-offset:2px}
header .dcHdrIcons{position:absolute;top:0;right:16px;display:flex;align-items:center}
header .dcHdrIcon{position:relative;display:block;width:var(--dc-tap);height:var(--dc-tap);color:var(--dc-header-ink);text-decoration:none}
header .dcHdrIcon svg{position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
header .dcHdrCount{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--dc-header-ink);color:#1b1b1d;font:600 11px/16px "Montserrat",sans-serif;text-align:center}
header .siteNav[role=button],header .topSocialLink[role=button]{cursor:pointer}
header .topSocialLink[role=button]:before{content:'';position:absolute;top:-12px;right:-12px;bottom:-12px;left:-2px}

/* Wave 2 follow-up (issue #308): readable text sizes and tap heights on the home/marketing layout, without moving the layout.
   Floors: nav words 13px, other small text 12px, controls 44px tall. */
header .dcHdrCount{font-size:12px}
#subsEmail ~ small,.ftCnt label small{font-size:12px}
@media (max-width:770px){
  /* Footer links (footer.css gives them padding:5px 0 here): 44px tall with the text centred; the hover underline keeps its place under the text
     (it was 7px from a bottom edge 5px below the text, now 7px + 8px). */
  .footernavWrap .footerNav li a{display:inline-block;box-sizing:border-box;min-height:var(--dc-tap);padding:13px 0}
  .footernavWrap .footerNav li a:after{bottom:15px}
}
@media (max-width:768px){
  /* The in-page nav bar (About / Crafts / Discover / Shop / Projects / Login) was 10px words in a 38px strip. At 13px the six words need the
     full width, so the bar spans the screen and the old 18px gaps between words become padding inside each 44px-wide link. */
  /* The bar sits 6px lower (top 36px) and the two header icons 10px higher (top -10px, they were 44px tall from y=10), so the 44px nav links
     (from y=44) and the icons (to y=44) no longer overlap. The bar itself ignores taps and only its words take them, so the empty
     part of the strip never blocks the hamburger, social toggle or icons. */
  .mNavSpy{top:36px;left:50%;width:calc(100% - 8px);height:52px;pointer-events:none}
  .mNavSpy li a,.mNavSpy li span{pointer-events:auto}
  header .dcHdrIcons{top:-10px}
  .mNavSpy ul{display:flex;flex-wrap:nowrap;justify-content:center}
  .mNavSpy li{display:block;margin-left:0;margin-right:0}
  .mNavSpy li a,.mNavSpy li span{font-size:13px;height:var(--dc-tap);min-width:var(--dc-tap);padding-left:3px;padding-right:3px;text-align:center;letter-spacing:0}
  .mNavSpy li a:after,.mNavSpy li span:after{bottom:6px}
  .mNavSpy li a.active:after,.mNavSpy li span.active:after{width:calc(100% - 6px);left:3px}
}
@media (max-width:380px){
  /* narrow phones: 12px words so all six still fit on one line */
  .mNavSpy li a,.mNavSpy li span{font-size:12px;padding-left:2px;padding-right:2px}
}
@media (max-width:340px){
  .mNavSpy li a,.mNavSpy li span{min-width:0;padding-left:1px;padding-right:1px;letter-spacing:-.3px}
}