/* WITTY WANDERER CTA COLOUR LOGIC (31 Oct 2026), set on /discover and rolled out site-wide.
   Two buttons always carry their own colour, whatever page skin they sit on:
     free walk (Try Greenwich free, Email my free walk)  green  #2F7D5C  (the site's free-walk / Fox Fam green)
     video (A wander, explained / See how it works)      indigo #3D3B8E  thin 1px pinstripe frame, indigo label + play icon
   Outlined free buttons: green frame, label and icons; the small italic line stays ink.
   Filled free buttons: solid green with white text. Dark mode uses lighter versions of both colours.
   Linked last in <body> on every page so it sits after the page skins (editorial etc.); the !important beats their own !important rules. */
:root{--cta-free:#2F7D5C;--cta-free-h:#266A4D;--cta-video:#3D3B8E;--cta-video-h:#2B2966}

/* ---------- free walk, outlined ---------- */
.btn.btn-free.hero-free-secondary,.btn.btn-free.wf-free-button,
body.ed.greenwich-first #top .hero-paths .btn-free{color:var(--cta-free)!important;border-color:var(--cta-free)!important;background:transparent!important}
.btn.btn-free.hero-free-secondary>.bl,.btn.btn-free.wf-free-button>.bl,
body.ed.greenwich-first #top .hero-paths .btn-free>.bl{color:var(--cta-free)!important}
.btn.btn-free.hero-free-secondary:hover,.btn.btn-free.wf-free-button:hover,
body.ed.greenwich-first #top .hero-paths .btn-free:hover{background:rgba(47,125,92,.06)!important;color:var(--cta-free-h)!important;border-color:var(--cta-free-h)!important}

/* ---------- free walk, filled ---------- */
.btn.btn-free.df-submit,.btn.btn-free.preview-slide-free,.btn.btn-free.btn-full,#buy2.btn-free,
.free-walk .btn.btn-free:not(.hero-free-secondary):not(.wf-free-button){background:var(--cta-free)!important;border-color:var(--cta-free)!important;color:#fff!important}
.btn.btn-free.df-submit:hover,.btn.btn-free.preview-slide-free:hover,.btn.btn-free.btn-full:hover,#buy2.btn-free:hover{background:var(--cta-free-h)!important;border-color:var(--cta-free-h)!important}

/* Walk pages follow /discover under "Try Greenwich free": the small line in italic serif, ink, not small caps. */
.btn.btn-free.wf-free-button small{font:italic 400 15px/1.3 'Newsreader',Georgia,serif!important;letter-spacing:0!important;text-transform:none!important;color:#16130F!important}

/* ---------- Etsy: the bright Etsy orange on every button that leaves for etsy.com (button system rule) ---------- */
a.btn.btn-etsy[href*="etsy.com"]:not(.discover-corner-shop):not(.ww-mast-shop){background:#F1641E!important;border-color:#F1641E!important;color:#fff!important}
a.btn.btn-etsy[href*="etsy.com"]:not(.discover-corner-shop):not(.ww-mast-shop):hover{background:#D5540F!important;border-color:#D5540F!important;color:#fff!important}

/* ---------- promos on walk pages: the coupon (31 Oct 2026) ----------
   Every promo box (first-walk price .firstwalk, spotlight offer .spotlightwalk, coded deal .deal) is a
   soft-yellow coupon with a dashed Etsy-orange edge and two half-circle notches, so a discount always
   looks the same and sits visually with the orange buy button below it. */
.firstwalk,.firstwalk.spotlightwalk,.deal{background:#FBEFC8!important;border:1.5px dashed #F1641E!important;border-radius:4px!important;box-shadow:none!important;padding:10px 16px!important;color:#16130F!important;font:500 14px/1.45 'DM Sans',system-ui,sans-serif!important;position:relative;overflow:visible}
.firstwalk b,.firstwalk strong,.deal b{color:#C4501A!important;font-weight:800!important;letter-spacing:.02em}
.firstwalk::before,.firstwalk::after,.deal::before,.deal::after{content:'';position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ed-paper,#FBFAF6)}
.firstwalk::before,.deal::before{left:-8px;border-right:1.5px dashed #F1641E}
.firstwalk::after,.deal::after{right:-8px;border-left:1.5px dashed #F1641E}
.deal a{color:#C4501A!important}.deal small{color:#3A342C!important}

/* ---------- video ---------- */
body.ed.greenwich-first #top #videoBtn,#heroVideoBtn{border:1px solid var(--cta-video)!important;border-radius:0!important;padding:8px 14px!important;background:transparent!important}
body.ed.greenwich-first #top #videoBtn .cta-label,#heroVideoBtn .hv-text>b{color:var(--cta-video)!important}
body.ed.greenwich-first #top #videoBtn .play,#heroVideoBtn .hv-play{color:var(--cta-video)!important;border:1.5px solid var(--cta-video)!important;background:transparent!important}
body.ed.greenwich-first #top #videoBtn:hover,#heroVideoBtn:hover{border-color:var(--cta-video-h)!important;background:rgba(61,59,142,.05)!important}
/* no underline inside the framed video button (homepage phone view) */
#heroVideoBtn,#heroVideoBtn *{text-decoration:none!important}
/* homepage on phone: the video button runs full width like the buttons above it (and like /discover), with the "20-second introduction" line back */
@media (max-width:700px){
  .hero-ctas > .hero-row > #heroVideoBtn{justify-self:stretch!important;width:100%!important;box-sizing:border-box;justify-content:center!important;gap:12px!important;padding:10px 16px!important;min-height:56px}
  .hero-ctas > .hero-row > #heroVideoBtn .hv-text>b{font-size:17px!important}
  .hero-ctas > .hero-row > #heroVideoBtn .hv-sub{display:block!important;font-size:13px!important;font-weight:500!important;opacity:.85;color:var(--cta-video)!important}
  .hero-ctas > .hero-row > #heroVideoBtn .hv-long{display:inline!important}.hero-ctas > .hero-row > #heroVideoBtn .hv-short{display:none!important}
  .hero-ctas > .hero-row > #heroVideoBtn .hv-play{width:32px!important;height:32px!important}
}
/* every video button: play icon + text centred as one group, the two lines aligned left with each other (31 Oct 2026, option A) */
body.ed.greenwich-first #top #videoBtn,#heroVideoBtn{justify-content:center!important}
body.ed.greenwich-first #top #videoBtn .cta-text,#heroVideoBtn .hv-text{align-items:flex-start!important;text-align:left!important;flex:0 1 auto!important}
/* the "▶ Video" hint on shop cards */
.image-link .video-hint{background:var(--cta-video)!important;color:#fff!important;border-color:var(--cta-video)!important}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--cta-free:#6CC49A;--cta-free-h:#8ED3B1;--cta-video:#A9A7EC;--cta-video-h:#C4C2F4}
  :root:not([data-theme="light"]) .btn.btn-free.df-submit,:root:not([data-theme="light"]) .btn.btn-free.preview-slide-free,
  :root:not([data-theme="light"]) .btn.btn-free.btn-full,:root:not([data-theme="light"]) #buy2.btn-free{background:#2F7D5C!important;border-color:#2F7D5C!important}
  :root:not([data-theme="light"]) .image-link .video-hint{background:#3D3B8E!important}
  :root:not([data-theme="light"]) .btn.btn-free.wf-free-button small{color:#F1ECE1!important}
  :root:not([data-theme="light"]) :is(.firstwalk,.deal){background:#3A3220!important;color:#F1ECE1!important}
  :root:not([data-theme="light"]) :is(.firstwalk,.deal) :is(b,strong){color:#F6B37F!important}
  :root:not([data-theme="light"]) :is(.firstwalk,.deal)::before,:root:not([data-theme="light"]) :is(.firstwalk,.deal)::after{background:var(--ed-paper,#16130F)}
}

/* homepage "How it works": one real photo under the four steps (31 Oct 2026) */
.how-photo{margin:32px auto 0;max-width:760px}
.how-photo img{width:100%;height:auto;display:block;aspect-ratio:8/5;object-fit:cover;border:1px solid #16130F;border-radius:0}
.how-photo figcaption{margin-top:8px;font:italic 400 16px/1.4 'Newsreader',Georgia,serif;color:#615B51;text-align:center}