/* AllDiscGolf design system, sandbox v1 (2026-09-18).
   One file for every product. Product hue is set per page via body[data-product]. */

:root{
  --chalk:#F5F3EE; --card:#FFFFFF; --line:#E3DFD6; --line2:#C9C4B8;
  --ink:#14201B; --ink2:#3B443F; --mut:#5E6660; --field:#FFFFFF;
  --hue-prices:#E8600A; --hue-market:#0F7C6F; --hue-caddy:#6D4FC4; --hue-rs:#177245;
  --putter:#B7322A; --mid:#6F3B8F; --fairway:#1F5F9E; --distance:#1E7A45; --special:#B8860B;
  --good:#1E7A45; --warn:#B8860B; --bad:#B7322A;
  --hue:var(--hue-prices); --hue-soft:rgba(232,96,10,.10);
  --r-ctl:8px; --r-card:16px; --shadow:0 8px 24px rgba(20,32,27,.10);
  --display:'Bricolage Grotesque',sans-serif; --ui:'Instrument Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}
body[data-product="market"]{--hue:var(--hue-market);--hue-soft:rgba(15,124,111,.10)}
body[data-product="caddy"]{--hue:var(--hue-caddy);--hue-soft:rgba(109,79,196,.10)}
body[data-product="rs"]{--hue:var(--hue-rs);--hue-soft:rgba(23,114,69,.10)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chalk:#0F1613; --card:#18211C; --line:#27332C; --line2:#3A4740; --ink:#EEF2EC; --ink2:#C9D2CC; --mut:#9DAAA2; --field:#121A16;
    --shadow:0 8px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --chalk:#0F1613; --card:#18211C; --line:#27332C; --line2:#3A4740; --ink:#EEF2EC; --ink2:#C9D2CC; --mut:#9DAAA2; --field:#121A16;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 16px/1.5 var(--ui);}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hue)}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.1;margin:0}
h1{font-weight:800;font-size:clamp(30px,4.5vw,44px)}
h2{font-weight:700;font-size:clamp(20px,2.6vw,26px)}
h3{font-weight:700;font-size:18px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 32px}}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1 1 auto}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--chalk) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand svg{width:30px;height:30px}
.brand .wm{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1}
.brand .sfx{font-weight:600;font-size:14px;color:var(--hue);margin-left:2px}
.tabs{display:none;gap:4px;margin-left:8px}
.tabs a{padding:8px 12px;border-radius:var(--r-ctl);font-weight:600;font-size:14px;color:var(--ink2);position:relative}
.tabs a:hover{background:var(--card);color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:2px;background:var(--hue)}
.hd .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:13px;cursor:pointer}
.pill:hover{border-color:var(--line2)}
.pill svg{width:16px;height:16px}
@media(min-width:900px){.tabs{display:flex}}

/* ---- bottom nav (phones) ---- */
.bn{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.bn a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mut);padding:4px 0;min-height:44px}
.bn a svg{width:22px;height:22px}
.bn a[aria-current="page"]{color:var(--hue)}
body.has-bn{padding-bottom:76px}
@media(min-width:900px){.bn{display:none}body.has-bn{padding-bottom:0}}

/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--card);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn.primary:hover{background:var(--ink2);color:var(--chalk)}
.btn.hue{background:var(--hue);border-color:var(--hue);color:#fff}
.btn.hue:hover{filter:brightness(.92);color:#fff}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--line2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.chip .n{color:var(--mut);font-weight:500}
.chip[aria-pressed="true"] .n{color:var(--line)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.field{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--field)}
.field:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--hue-soft)}
.field input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-width:0}
.field svg{width:20px;height:20px;color:var(--mut);flex:0 0 auto}
select.sel{height:36px;padding:0 10px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--card);font-weight:600;font-size:13px}

/* ---- surfaces ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.card.pad{padding:20px}
.sheet{box-shadow:var(--shadow)}
.sep{height:1px;background:var(--line);margin:8px 0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot.putter,.t-putter{background:var(--putter)} .dot.mid,.t-mid{background:var(--mid)} .dot.fairway,.t-fairway{background:var(--fairway)} .dot.distance,.t-distance{background:var(--distance)} .dot.special,.t-special{background:var(--special)}
.type{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink2)}
.cc{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 6px;border-radius:5px;background:var(--chalk);border:1px solid var(--line);font:600 11px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600}
.badge.good{background:rgba(30,122,69,.12);color:var(--good)}
.badge.hue{background:var(--hue-soft);color:var(--hue)}
.badge.mut{background:var(--chalk);color:var(--mut);border:1px solid var(--line)}
.disc-img{width:100%;aspect-ratio:1;border-radius:12px;background:#FFFFFF;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.disc-img img{width:82%;height:82%;object-fit:contain}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}

/* disc cards */
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.dcard{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);color:inherit}
.dcard:hover{border-color:var(--line2);box-shadow:var(--shadow);color:inherit}
.dcard .b{font-size:12px;color:var(--mut)}
.dcard .n{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.15}
.dcard .from{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.dcard .from .price{font-size:16px}
.dcard .from .mut{font-size:12px}

/* sections */
.sec{padding:28px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-h a.more{font-weight:600;font-size:14px;color:var(--hue)}

/* product rows */
.prow{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);color:inherit}
.prow:hover{border-color:var(--line2);color:inherit}
.prow .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.prow .ic svg{width:22px;height:22px}
.prow .t{font-family:var(--display);font-weight:700;font-size:18px}
.prow .d{font-size:14px;color:var(--mut)}
.prow .chev{margin-left:auto;color:var(--mut);width:20px;height:20px;flex:0 0 auto}

/* footer */
.ft{border-top:1px solid var(--line);padding:28px 0 36px;color:var(--mut);font-size:13px}
.ft .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.ft a{color:var(--ink2);font-weight:600}

/* search dropdown */
.sr{position:relative}
.sr .drop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:none;z-index:15}
.sr .drop.on{display:block}
.sr .drop a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);color:inherit}
.sr .drop a:first-child{border-top:0}
.sr .drop a:hover{background:var(--chalk)}
.sr .drop .im{width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.sr .drop .im img{width:80%;height:80%;object-fit:contain}
.sr .drop .price{margin-left:auto;font-size:14px}