/* Flow Foundation shop (shop.html). Redesigned 24 Oct 2026.
   Idea: "every rand has an address". The one bold device is the yellow address tag (notched, with a punched hole)
   that carries each item's amount and fund code. Everything else stays quiet: brand cream, forest and serif.
   Tokens from flow-home.css: --ink --forest --sun --cream --paper --serif --sans. */
.shop-page{--red:#91c363;--slate:#0b1726;--muted:#5d6773;--rule:rgba(11,23,38,.14);--radius:14px;background:var(--paper);color:var(--ink)}
.shop-page main{padding-top:72px}
.shop-page .ff-header{background:rgba(11,23,38,.97)}
.shop-page h1,.shop-page h2,.shop-page h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
.shop-page section[id]{scroll-margin-top:136px}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.4rem;border-radius:999px;border:1.5px solid var(--forest);background:var(--forest);color:#fff;font:600 .92rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--forest)}
.btn--ghost:hover{background:var(--forest);color:#fff}
.btn--small{padding:.6rem 1rem;font-size:.84rem}
.btn--full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.shop-page a:focus-visible,.shop-page button:focus-visible,.shop-page summary:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.more{font-weight:600;color:var(--forest);text-underline-offset:4px}
.fine{font-size:.86rem;color:var(--muted)}
.lead{font-size:1.06rem;line-height:1.7;max-width:60ch}
.code{display:inline-block;margin-top:.5rem;font-size:.74rem;letter-spacing:.04em;color:var(--muted)}

/* The address tag */
.tag{--h:2.6rem;position:relative;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--h);padding:.35rem .9rem .35rem 1.7rem;background:var(--sun);color:var(--ink);clip-path:polygon(.9rem 0,100% 0,100% 100%,.9rem 100%,0 50%);line-height:1.15}
.tag::before{content:"";position:absolute;left:.75rem;top:50%;width:.42rem;height:.42rem;margin-top:-.21rem;border-radius:50%;background:var(--paper)}
.tag b{font:500 1.15rem var(--serif);font-variant-numeric:tabular-nums}
.tag small{font:600 .66rem var(--sans);letter-spacing:.04em;opacity:.8}
.tag--line{background:transparent;padding-left:1.4rem;clip-path:none;border-left:3px solid var(--sun);margin-top:.7rem;min-height:0}
.tag--line::before{display:none}
.tag--line b{font-size:1.05rem}

/* Hero */
.sp-hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sp-hero h1{font-size:clamp(3rem,7vw,5.8rem);line-height:.95;margin-bottom:1.4rem;max-width:9ch}
.hero__copy p{font-size:1.1rem;line-height:1.7;max-width:46ch;margin:0 0 1.8rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__art{position:relative;margin:0}
.hero__art img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--cream)}
.hero__art figcaption{margin-top:.7rem;font-size:.84rem;color:var(--muted)}
.tag--hero{position:absolute;left:-1.6rem;bottom:3.4rem;--h:5rem;padding:.7rem 1.4rem .7rem 2.4rem;clip-path:polygon(1.4rem 0,100% 0,100% 100%,1.4rem 100%,0 50%);transform:rotate(-4deg);transform-origin:left center;box-shadow:0 10px 30px rgba(11,23,38,.18)}
.tag--hero::before{left:1.05rem;width:.6rem;height:.6rem;margin-top:-.3rem}
.tag--hero b{font-size:1.6rem}
@media (prefers-reduced-motion:no-preference){.tag--hero{animation:swing 1.2s cubic-bezier(.3,1.6,.5,1) .3s both}@keyframes swing{from{transform:rotate(-14deg)}to{transform:rotate(-4deg)}}}

/* Section nav */
.shopnav{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-block:1px solid var(--rule)}
.shopnav__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px}
.shopnav__links{display:flex;gap:1.4rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.shopnav__links::-webkit-scrollbar{display:none}
.shopnav__links a{flex:none;padding:1rem 0;font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.shopnav__links a:hover{border-color:var(--sun)}
.bag-btn{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;border:0;background:var(--sun);color:var(--ink);font:600 .9rem var(--sans);cursor:pointer}
.bag-btn span{display:grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.74rem}

/* Sections */
.block{padding:clamp(3.5rem,7vw,6rem) 0}
.block--cream{background:var(--cream)}
.head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem 3rem;align-items:end;margin-bottom:2.2rem}
.head h2,.feature h2,.jersey h2,.track h2,.sponsor h2,.faq h2{font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.05}
.head p{margin:0;line-height:1.7;max-width:60ch}
.head--split{grid-template-columns:1fr auto}
.head--split p{margin-top:.6rem}

/* Sunbeam feature */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.feature__img{margin:0;position:sticky;top:150px}
.feature__img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.feature__img figcaption{margin-top:.6rem;font-size:.84rem;color:var(--muted)}
.feature .lead{margin:1rem 0 1.6rem}
.goals{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--rule)}
.goals li{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.goals h3{font-size:1.6rem;margin-bottom:.35rem}
.goals p{margin:0;line-height:1.6;max-width:52ch}

/* Amount chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chips a{min-width:4.2rem;text-align:center;padding:.62rem .9rem;border-radius:999px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);font:600 .88rem var(--sans);text-decoration:none;font-variant-numeric:tabular-nums}
.chips a:hover{border-color:var(--forest);background:var(--forest);color:#fff}
.chips a.is-primary{border-color:var(--sun);background:var(--sun)}
.chips a.is-primary:hover{background:var(--forest);border-color:var(--forest);color:#fff}

/* Classroom kits */
.kits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2rem}
.kit{display:grid;grid-template-rows:auto 1fr auto;gap:.9rem}
.kit__mark{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;color:#fff}
.kit__mark svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kit__mark--sun{background:var(--sun);color:var(--ink)}
.kit__mark--red{background:var(--red);color:var(--ink)}
.kit__mark--blue{background:var(--slate)}
.kit h3{font-size:1.45rem;margin-bottom:.35rem}
.kit p{margin:0;line-height:1.6;color:var(--muted);max-width:36ch}
.kit__buy{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:1rem;border-top:1px solid var(--rule)}
.kit .tag small{display:block}

/* Project gifts */
.freq{display:inline-flex;padding:4px;border-radius:999px;background:var(--cream)}
.freq button{border:0;background:transparent;padding:.6rem 1.1rem;border-radius:999px;font:600 .88rem var(--sans);color:var(--ink);cursor:pointer}
.freq button[aria-pressed="true"]{background:var(--forest);color:#fff}
.gifts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gift{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:center;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.gift h3{font-size:1.5rem;margin-bottom:.3rem}
.gift p{margin:0;line-height:1.6;color:var(--muted);max-width:56ch}
.gift .chips{margin:0;justify-content:flex-end}
.pillar-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.pillar-pick button{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:999px;border:1.5px solid var(--rule);background:transparent;font:600 .85rem var(--sans);color:var(--ink);cursor:pointer}
.pillar-pick svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pillar-pick button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Jersey */
.jersey{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.jersey__img{margin:0}
.jersey__img img{display:block;width:100%;aspect-ratio:1400/736;object-fit:contain;background:#fff;border-radius:var(--radius)}
.jersey__img figcaption{margin-top:.6rem;font-size:.84rem;color:var(--muted)}
.jersey .lead{margin:1rem 0 1.4rem}
.jersey__buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.jersey h3{font-size:1.5rem;margin:2.2rem 0 .4rem}
.jersey h3 + p{margin:0 0 1rem;line-height:1.6;color:var(--muted);max-width:52ch}
.placements{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.placements li{display:grid;grid-template-columns:1fr auto auto;gap:1.5rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.placements b{font:500 1.15rem var(--serif);font-variant-numeric:tabular-nums}
.placements a{font-weight:600;color:var(--forest);text-underline-offset:4px}

/* OCF */
.sponsor{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--forest);color:#fff}
.sponsor__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.sponsor p{line-height:1.7;max-width:52ch;color:rgba(255,255,255,.88)}
.sponsor h2{margin-bottom:1rem}
.sponsor .fine{color:rgba(255,255,255,.7)}
.sponsor__opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);overflow:hidden}
.sponsor__opts a{display:flex;flex-direction:column;gap:.15rem;height:100%;padding:1.5rem;background:var(--forest);color:#fff;text-decoration:none;transition:background .15s,color .15s}
.sponsor__opts a:hover{background:var(--sun);color:var(--ink)}
.sponsor__opts b{font:400 2.1rem/1.05 var(--serif);font-variant-numeric:tabular-nums}
.sponsor__opts span{font-size:.9rem;opacity:.85}
.sponsor__opts em{font-style:normal;margin-top:.8rem;font-size:.92rem;line-height:1.45}

/* Tracking */
.track{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.track .lead{margin:1rem 0 1.8rem}
.funds{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 2rem;margin:0}
.funds div{display:flex;gap:.9rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.funds dt{flex:none;width:2.8rem;font-weight:600;letter-spacing:.06em}
.funds dd{margin:0;color:var(--muted)}
.slip{position:relative;margin:0;padding:2rem 1.8rem 1.6rem 2.6rem;background:var(--sun);color:var(--ink);clip-path:polygon(1.4rem 0,100% 0,100% 100%,1.4rem 100%,0 50%);transform:rotate(2deg)}
.slip__hole{position:absolute;left:1.05rem;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--paper)}
.slip dl{margin:0;display:grid;gap:.55rem}
.slip div{display:grid;grid-template-columns:6.5rem 1fr;gap:.5rem;border-bottom:1px dashed rgba(11,23,38,.3);padding-bottom:.5rem}
.slip dt{font-size:.85rem;opacity:.75}
.slip dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.slip figcaption{margin-top:1rem;font-size:.82rem;opacity:.8}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,4rem)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font:400 1.3rem var(--serif);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem var(--sans);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.3rem;line-height:1.7;max-width:62ch}

/* Bag drawer */
.cart{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(420px,100%);display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--paper);box-shadow:-16px 0 40px rgba(11,23,38,.22);transform:translateX(105%);transition:transform .3s ease;overflow-y:auto}
.cart.is-open{transform:none}
.cart__head{display:flex;justify-content:space-between;align-items:center}
.cart__head h2{font-size:2rem}
.cart__head button{border:0;background:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink)}
.cart__item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.cart__item b{display:block;font-weight:600}
.cart__item code{font:500 .72rem var(--sans);color:var(--muted)}
.cart__item strong{font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:.45rem}
.qty button{width:1.9rem;height:1.9rem;border-radius:50%;border:1.5px solid var(--rule);background:#fff;cursor:pointer;color:var(--ink)}
.cart__empty{margin:0;color:var(--muted)}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.cart__total strong{font:400 1.9rem var(--serif)}
.cart__note{margin:0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.scrim{position:fixed;inset:0;z-index:110;border:0;background:rgba(11,23,38,.45)}

@media (max-width:1000px){.kits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .hero__grid,.feature,.jersey,.sponsor__grid,.track,.faq,.head{grid-template-columns:1fr}
  .feature__img{position:static}.feature__img img{aspect-ratio:4/3}
  .gift{grid-template-columns:1fr}.gift .chips{justify-content:flex-start}
  .tag--hero{left:.8rem;bottom:2.8rem}
  .slip{transform:none;max-width:30rem}
}
@media (max-width:560px){
  .kits,.funds,.sponsor__opts{grid-template-columns:1fr}
  .head--split{grid-template-columns:1fr}
  .shopnav__links{gap:1rem}
  .tag--hero{--h:4rem}.tag--hero b{font-size:1.25rem}
  .placements li{grid-template-columns:1fr auto auto;gap:.9rem}
}
.shopnav__links{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:1.5rem}@media (min-width:900px){.shopnav__links{-webkit-mask-image:none;mask-image:none}}