/* 19Fairways site chrome v2 (2026-10-31) — the Last Call look.
   ONE file for the announcement bar, header, footer, buttons and type tokens,
   shared by the home page, every marketing page and the store pages.
   Every class is prefixed sx- so it can never collide with a page's own
   .wrap / .btn / .card / header / footer rules. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --sx-ink:#14231A; --sx-green:#1C6B45; --sx-green-hi:#155636; --sx-deep:#16321E;
  --sx-navy:#1F2E5C; --sx-gold:#F2D06B; --sx-cream:#FBF8F1; --sx-sand:#F4EFE3;
  --sx-line:#E8E2D4; --sx-line-2:#DCD4C2; --sx-muted:#4A574F; --sx-soft:#5B6A61;
  --sx-serif:Fraunces,Georgia,serif; --sx-sans:'DM Sans',system-ui,-apple-system,sans-serif;
}
.sx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sx-serif{font-family:var(--sx-serif);font-weight:300;letter-spacing:-.015em}
.sx-eyebrow{font-family:var(--sx-sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sx-green)}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;font-family:var(--sx-sans);font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease}
.sx-btn:hover{transform:translateY(-1px)}
.sx-btn-green{background:var(--sx-green);color:#fff}.sx-btn-green:hover{background:var(--sx-green-hi)}
.sx-btn-line{border:1.5px solid var(--sx-ink);color:var(--sx-ink);background:transparent}.sx-btn-line:hover{background:var(--sx-ink);color:#fff}
.sx-btn-ink{background:var(--sx-ink);color:#fff}
.sx-btn-gold{background:var(--sx-gold);color:var(--sx-ink);font-weight:700}

/* announcement bar. When the page runs under the iPhone status bar (safe-area
   inset > 0), iOS 26 fades/blurs a band just BELOW the status bar too — the
   extra min(inset, 26px) drops the text clear of it (Cody 2026-10-31: "The top
   gradient is overlapping the blue bar and text"). Zero inset = no change. */
.sx-announce{background:var(--sx-navy);color:#F0E9D6;text-align:center;padding:calc(9px + env(safe-area-inset-top,0px) + min(env(safe-area-inset-top,0px),26px)) 16px 9px;font-family:var(--sx-sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.sx-announce a{color:inherit;text-decoration:none}

/* header */
.sx-hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--sx-line);font-family:var(--sx-sans);color:var(--sx-ink)}
.sx-hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.sx-hdr-l{display:flex;align-items:center;gap:6px;min-width:0}
.sx-nav{display:flex;gap:26px;font-size:14px;font-weight:500}
.sx-nav a,.sx-hdr-r a.sx-txt{color:inherit;text-decoration:none;white-space:nowrap}
.sx-nav a:hover,.sx-hdr-r a.sx-txt:hover,.sx-nav a[aria-current="page"]{color:var(--sx-green)}
.sx-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
.sx-nav .sx-mob{display:none}
.sx-brand{display:flex;align-items:center;gap:12px;text-decoration:none;justify-self:center}
.sx-brand .sx-mk{height:36px;width:auto;display:block}
.sx-brand .sx-wm{height:16px;width:auto;display:block}
.sx-hdr-r{display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:14px;font-weight:500}
.sx-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--sx-ink);background:none;border:0;cursor:pointer;padding:0;position:relative}
.sx-icon:hover{background:var(--sx-sand)}
.sx-hdr-r .sx-btn{min-height:40px;padding:0 18px;font-size:14px}
/* Sign in + basket get the same pill shape as Get the app (outlined, so the green CTA still leads) */
.sx-hdr-r a.sx-txt{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1.5px solid var(--sx-ink);border-radius:999px;font-weight:600;font-size:14px;transition:background .15s ease,color .15s ease}
.sx-hdr-r a.sx-txt:hover{background:var(--sx-ink);color:#fff}
.sx-hdr-r a.sx-icon{width:40px;height:40px;border:1.5px solid var(--sx-ink);transition:background .15s ease,color .15s ease}
.sx-hdr-r a.sx-icon:hover{background:var(--sx-ink);color:#fff}
.sx-menu-btn{display:none}
@media (max-width:900px){
  .sx-hdr-in{grid-template-columns:auto 1fr auto}
  .sx-nav{display:none}
  .sx-menu-btn{display:inline-flex}
  .sx-hdr-r .sx-txt,.sx-hdr-r .sx-btn{display:none}
  .sx-brand .sx-mk{height:32px}.sx-brand .sx-wm{height:14px}
  .sx-hdr.open .sx-nav{display:flex;flex-direction:column;gap:0;grid-column:1/-1;grid-row:2;font-size:17px;border-top:1px solid var(--sx-line);margin-top:8px}
  .sx-hdr.open .sx-nav a{padding:14px 0;border-bottom:1px solid var(--sx-line)}
  .sx-hdr.open .sx-nav .sx-mob{display:block}
}
@media (max-width:330px){.sx-brand .sx-wm{display:none}}

/* footer */
.sx-ftr{border-top:1px solid var(--sx-line);padding:48px 0 32px;background:var(--sx-cream);font-family:var(--sx-sans);color:var(--sx-ink);margin-top:0}
.sx-ftr .sx-top{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between;margin-bottom:36px}
.sx-ftr .sx-about{display:flex;flex-direction:column;gap:14px;max-width:300px}
.sx-ftr .sx-about p{font-size:14px;line-height:1.6;color:var(--sx-soft);margin:0}
.sx-ftr .sx-brand{justify-self:auto}
.sx-ftr .sx-cols{display:flex;flex-wrap:wrap;gap:32px 64px}
.sx-ftr .sx-col{display:flex;flex-direction:column;gap:9px;font-size:14px}
.sx-ftr .sx-col a{color:inherit;text-decoration:none}.sx-ftr .sx-col a:hover{color:var(--sx-green)}
.sx-ftr .sx-col h4{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-soft)}
.sx-ftr .sx-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--sx-soft);border-top:1px solid var(--sx-line);padding-top:20px}

/* Inside the native app the visitor already has the app: hide "get the app" asks. */
html.in-native-app .web-only{display:none !important}
@media (display-mode:standalone){.web-only{display:none !important}}

/* ── Push drawer (Cody 2026-10-31): slides in from the left at the width it
   needs (min(380px, 86vw)) and PUSHES the page right by the same amount. Tap
   the pushed page to close. The store's own menu (.st-menu) does the same. ── */
:root{--sx-dw:min(380px,86vw)}
.sx-drawer{position:fixed;top:0;bottom:0;left:0;width:var(--sx-dw);z-index:200;box-shadow:12px 0 32px rgba(20,35,26,.12);background:var(--sx-cream);color:var(--sx-ink);font-family:var(--sx-sans);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 24px calc(env(safe-area-inset-bottom,0px) + 28px);
  transform:translateX(-100%);visibility:hidden;transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s}
html.in-native-app .sx-drawer{padding-top:calc(max(env(safe-area-inset-top),59px) + 12px)}
html.sx-drawer-open .sx-drawer{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s}
.sx-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px;border-bottom:1px solid var(--sx-line)}
.sx-drawer-top .sx-brand{justify-self:auto}
.sx-drawer-nav{display:flex;flex-direction:column;padding:8px 0}
.sx-drawer-nav a{font-family:var(--sx-serif);font-weight:300;font-size:26px;letter-spacing:-.015em;color:var(--sx-ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--sx-line)}
.sx-drawer-nav a[aria-current="page"]{color:var(--sx-green);font-style:italic}
.sx-drawer-ctas{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.sx-drawer-ctas .sx-btn{width:100%;min-height:50px}
.sx-drawer-foot{margin-top:auto;padding-top:28px;font-family:var(--sx-serif);font-style:italic;font-weight:300;color:var(--sx-green);font-size:18px}
body>*{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
html.sx-drawer-open body>:not(.sx-drawer):not(script):not(style){transform:translateX(var(--sx-dw))}
html:has(.st-menu.open) body>:not(.st-menu):not(.st-scrim):not(script):not(style){transform:translateX(var(--sx-dw))}
html.sx-drawer-open,html.sx-drawer-open body,html:has(.st-menu.open),html:has(.st-menu.open) body{overflow:hidden !important}
.st-menu{width:var(--sx-dw) !important;max-width:none !important;transition:transform .34s cubic-bezier(.2,.8,.2,1) !important}
.st-scrim{background:rgba(10,22,15,.18) !important}
@media (min-width:901px){html.sx-drawer-open .sx-drawer{display:flex}}