/* WITTY WANDERER BUTTON SYSTEM - the one copy. Every page links this file at the end of <head>
   (walk pages get the link from tools/gen_walk_pages.py), so a change here reaches the whole site.
   Before 14 Oct 2026 each page carried its own copy of this block and the copies had drifted.

   One shape: rounded rectangle, 10px corners. Colours by role:
     terracotta   the main action of a section          .btn-primary (and .btn-etsy on an on-site link)
     green        the free walk, wherever it appears    .btn-free
     black        the second action beside the main one .btn-custom, .btn-dark
     grey         quiet links                           .btn-ghost, .btn-outline
     Etsy orange + bag icon: any button whose link leaves for etsy.com, whatever its class, with
                  white text - the brand look, chosen by the owner on 14 Oct 2026 over dark text.
                  (White on Etsy orange is 3.2:1, under the 4.5:1 WCAG asks for normal-size text;
                  #221130 would be 5.5:1 if that ever needs revisiting.)
   To restyle a role, change its --b-* value; to move a button to another role, change its class.
   Do not add a new button colour - give the button one of the roles. */
:root{
  --b-radius:10px;
  --b-terra:#C25518;--b-terra-h:#A8480F;
  --b-free:#2F7D5C;--b-free-h:#266A4D;
  --b-black:#221F2E;--b-black-h:#000000;
  --b-grey:#E6E1D8;--b-grey-h:#D8D2C6;--b-grey-fg:#221F2E;
  --b-etsy:#F1641E;--b-etsy-h:#D5540F;--b-etsy-fg:#FFFFFF
}
/* doubled class so the shape wins over the older per-page .btn rules (some were pills) */
.btn.btn{border-radius:var(--b-radius)}
.btn.btn-primary,.btn.btn-etsy{background:var(--b-terra);color:#fff;border-color:var(--b-terra);box-shadow:0 12px 26px -12px rgba(194,85,24,.7)}
.btn.btn-primary:hover,.btn.btn-etsy:hover{background:var(--b-terra-h);border-color:var(--b-terra-h);color:#fff}
.btn.btn-free{background:var(--b-free);color:#fff;border-color:var(--b-free);box-shadow:0 12px 26px -14px rgba(47,125,92,.7)}
.btn.btn-free:hover{background:var(--b-free-h);border-color:var(--b-free-h);color:#fff}
.btn.btn-custom,.btn.btn-dark{background:var(--b-black);color:#fff;border-color:var(--b-black);box-shadow:0 12px 26px -14px rgba(34,31,46,.7)}
.btn.btn-custom:hover,.btn.btn-dark:hover{background:var(--b-black-h);border-color:var(--b-black-h);color:#fff}
.btn.btn-ghost,.btn.btn-outline{background:var(--b-grey);color:var(--b-grey-fg);border-color:var(--b-grey);box-shadow:none}
.btn.btn-ghost:hover,.btn.btn-outline:hover{background:var(--b-grey-h);border-color:var(--b-grey-h);color:var(--b-grey-fg)}
a.btn[href*="etsy.com"]:not(.btn-ghost){background:var(--b-etsy);color:var(--b-etsy-fg);border-color:var(--b-etsy);box-shadow:0 12px 26px -12px rgba(241,100,30,.7)}
a.btn[href*="etsy.com"]:not(.btn-ghost):hover{background:var(--b-etsy-h);border-color:var(--b-etsy-h);color:var(--b-etsy-fg)}
a.btn[href*="etsy.com"]:not(.btn-ghost):not(.hero-cta)::before{content:"";display:inline-block;flex:none;width:1.3em;height:1.3em;margin-right:.45em;vertical-align:-.28em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.4 11.2a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8L4 8Z'/%3E%3Cpath d='M8.5 8V6.2a3.5 3.5 0 1 1 7 0V8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.4 11.2a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8L4 8Z'/%3E%3Cpath d='M8.5 8V6.2a3.5 3.5 0 1 1 7 0V8'/%3E%3C/svg%3E") center/contain no-repeat}
/* The floating "Free walk" button wears a white outline so it reads as a button on any section behind the bar. */
.btn.btn-free[data-ic="sticky_bar"]{border:2px solid #fff;box-shadow:0 0 0 1px rgba(34,31,46,.18),0 12px 26px -14px rgba(47,125,92,.7)}