/* Join page and member portal. Single column, bigger type, phone first. */
body.page-join, body.page-portal, body.page-apply, body.page-shop { font-size: 16px; }
.page-join #app, .page-portal #app, .page-apply #app, .page-shop #app { display: block; }
.pub-head { background: linear-gradient(100deg, var(--navy) 0%, var(--brand-solid) 100%); color: #fff; padding: 0.7rem 16px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-bottom: 4px solid var(--red); box-shadow: 0 2px 0 var(--gold); position: relative; z-index: 2; }
.pub-head a { color: #fff; }
.pub-org { font-stretch: 80%; font-weight: 850; font-size: 1.3rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 0.7rem; }
.pub-org img { height: 52px; border-radius: 8px; }
.pub-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; }
.pub-nav a { text-decoration: none; opacity: 0.9; }
.pub-nav a:hover, .pub-nav a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.pub-head :focus-visible { outline-color: var(--gold); }
.pub-user { font-size: 0.85rem; color: #cdd8ff; }
.pub-user .link { color: #fff; }
.pub-main { max-width: 860px; margin: 0 auto; padding: 2rem 16px 4rem; display: grid; gap: 1.5rem; }
.pub-main h1 { font-size: clamp(2rem, 6vw, 3.1rem); font-stretch: 78%; font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.02; color: var(--navy); }
.pub-main h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 0.6rem; border-radius: 3px; background: linear-gradient(90deg, var(--red) 0 62%, var(--gold) 62%); }
.pub-main h2 { font-stretch: 85%; font-weight: 850; text-transform: uppercase; font-size: 1.25rem; color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pub-main h1, :root:not([data-theme="light"]) .pub-main h2 { color: var(--ink); } }
.pub-main .btn.primary { background: var(--red); box-shadow: 0 2px 0 var(--red-2); font-size: 1rem; padding: 0.7rem 1.3rem; }
.pub-main .btn.primary:hover { background: var(--red-2); }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 62ch; margin: 0; }
.auth-card.inline { border: 1px solid var(--line); justify-self: start; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; flex-wrap: wrap; counter-reset: s; }
.steps li { counter-increment: s; font-size: 0.85rem; color: var(--muted); padding: 0.3rem 0.75rem 0.3rem 0; display: flex; align-items: center; gap: 0.4rem; }
.steps li::before { content: counter(s); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-weight: 700; font-size: 0.75rem; }
.steps li.now { color: var(--ink); font-weight: 700; }
.steps li.now::before { background: var(--red); border-color: var(--red); color: #fff; }
.steps li.done::before { content: "✓"; background: var(--good-bg); border-color: var(--good); color: var(--good); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; border: 0; padding: 0; margin: 0; }
.plan { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem 1.1rem; background: var(--surface); border: 2px solid var(--line); border-radius: 8px; cursor: pointer; }
.plan:hover { border-color: var(--line-strong); }
.plan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plan:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan { border-top: 6px solid var(--brand-solid); transition: transform .12s ease, box-shadow .12s ease; }
.plan:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 30, 91, .12); }
.plan:last-child { border-top-color: var(--gold); }
.plan.picked { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red), 0 10px 24px rgba(215, 24, 42, .15); }
.plan-name { font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.03em; color: var(--navy); }
.plan-price { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-name { color: var(--ink); } }
.plan-name { font-stretch: 118%; font-weight: 800; font-size: 1.2rem; }
.plan-price { font-stretch: 120%; font-weight: 800; font-size: 2rem; line-height: 1; }
.plan-price small { font-stretch: 100%; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.plan .holes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 0.25rem; }
.plan .holes i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--brand-2); }
.plan.picked .holes i { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px var(--surface); }
.plan-req { font-weight: 600; font-size: 0.9rem; }
.plan-tag { color: var(--muted); font-size: 0.875rem; }
.pub-actions { display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap; }
.pub-actions .btn { padding: 0.75rem 1.25rem; font-size: 1rem; }

.pub-form { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--brand-solid); border-radius: 8px; padding: 1.5rem; display: grid; gap: 1.1rem; }
.pub-form h2 { font-size: 1.3rem; }
.consents { display: grid; gap: 0.7rem; }
.consents legend { font-weight: 700; margin-bottom: 0.6rem; }
.check span { line-height: 1.45; }

.pay { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.75rem; display: grid; gap: 1rem; justify-items: start; }
.big-price { font-stretch: 122%; font-weight: 800; font-size: 3rem; margin: 0; line-height: 1; }
.big-price small { font-size: 1rem; font-weight: 500; color: var(--muted); font-stretch: 100%; }

.member-card { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 8px; padding: 1.5rem; display: grid; gap: 0.75rem; justify-items: start; }
.member-card.warn { border-left-color: var(--warn); }
.mc-top { display: flex; gap: 0.75rem; align-items: center; }
.my-requests ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.my-requests li { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); }
.my-requests li:last-child { border-bottom: 0; }
.rq-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.my-requests p { margin: 0.25rem 0 0; }

/* Apprenticeship form and request examples */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.trades legend { font-weight: 600; margin-bottom: 0.4rem; }
.trades .chip span { padding: 0.5rem 1rem; font-size: 1rem; }
.examples { margin: 0.25rem 0 0.75rem; }
.examples .chips { margin-top: 0.3rem; }
button.chip { padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: 0.85rem;
  background: transparent; color: inherit; cursor: pointer; }
button.chip:hover { border-color: var(--brand); color: var(--brand); }
button.chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- shop ---------- */
.page-shop .pub-main { max-width: 1120px; }
.shop-hero { background: radial-gradient(circle at 85% 20%, var(--navy-2), var(--navy) 65%); color: #fff; border-radius: 12px; padding: 2rem 1.5rem; display: grid; gap: 0.6rem;
  position: relative; overflow: hidden; border-bottom: 5px solid var(--red); }
.shop-hero::before { content: ""; position: absolute; right: -40px; top: 18px; width: 260px; height: 16px; background: var(--red); transform: rotate(-4deg); opacity: .9; }
.shop-hero::after { content: ""; position: absolute; right: -30px; top: 42px; width: 220px; height: 10px; background: var(--gold); transform: rotate(-4deg); }
.shop-hero h1 { color: #fff; font-size: clamp(2.2rem, 7vw, 3.6rem); }
.shop-hero h1 em { font-style: normal; color: var(--gold); }
.shop-hero h1::after { display: none; }
.shop-hero p { margin: 0; max-width: 60ch; color: #dfe6ff; }
.shop-hero .facts { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; color: #fff; }
.shop-hero .facts span::before { content: "★ "; color: var(--gold); }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .12s ease, box-shadow .12s ease; }
.product:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 30, 91, .14); }
.product .ph { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 35%, #1d3fae, var(--navy) 75%); position: relative; overflow: hidden; }
.product .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product .price-tag { position: absolute; left: 10px; bottom: 10px; background: var(--gold); color: #1a1300; font-weight: 900; font-stretch: 85%; font-size: 1.15rem; padding: 0.15rem 0.55rem; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.product .body { padding: 0.9rem; display: grid; gap: 0.6rem; align-content: start; }
.product h3 { font-stretch: 85%; font-weight: 850; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.02em; }
.product .desc { margin: 0; color: var(--muted); font-size: 0.875rem; }
.opt-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.swatches { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem 0.25rem 0.3rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.82rem; }
.swatch span i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.swatch input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 700; }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.buy-row { display: flex; gap: 0.5rem; align-items: end; }
.buy-row select { width: auto; min-width: 5.5rem; }
.buy-row .btn { flex: 1; }
.product .btn.cta { width: 100%; }
.product .btn.card-pay { width: 100%; margin-top: 0.5rem; }
.product .btn.card-pay[hidden] { display: none; }
.bag { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 10px; padding: 1.1rem; display: grid; gap: 0.8rem; }
.bag h2 { display: flex; justify-content: space-between; align-items: baseline; }
.bag h2 .n { background: var(--red); color: #fff; border-radius: 999px; font-size: 0.85rem; padding: 0.05rem 0.55rem; }
.bag ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bag li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.bag li .sub { grid-column: 1; }
.bag .total { display: flex; justify-content: space-between; font-weight: 850; font-stretch: 85%; font-size: 1.35rem; text-transform: uppercase; }
.bag .total span:last-child { color: var(--brand); }
.bag .btn.cta { width: 100%; padding: 0.75rem; font-size: 1rem; }
.checkout { scroll-margin-top: 1rem; }
.fulfill { display: grid; gap: 0.4rem; }
.done-card { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--gold); border-radius: 12px; padding: 1.75rem; display: grid; gap: 0.75rem; justify-items: start; }
.done-card .ref { font-stretch: 85%; font-weight: 900; font-size: 1.6rem; color: var(--red); letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .bag { position: static; }
  .shop-hero::before, .shop-hero::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .product, .plan { transition: none; } .product:hover, .plan:hover { transform: none; } }
/* Shop hero: slogan and facts left, the gear flyer right; stacks on phones. */
.shop-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 480px); align-items: center; gap: 1.5rem; }
.shop-hero-copy { display: grid; gap: 0.6rem; position: relative; z-index: 1; }
.shop-hero h1.slogan { display: grid; gap: .05em; line-height: 1; font-size: clamp(2rem, 5.4vw, 3.2rem); }
.shop-hero h1.slogan span:nth-child(2) { color: #ff6b77; }
.shop-flyer { position: relative; z-index: 1; display: block; }
.shop-flyer img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(231,181,40,.5), 0 14px 30px rgba(0,0,0,.4); }
@media (max-width: 900px) { .shop-hero { grid-template-columns: 1fr; } }
/* Round DFS seal in the shop / join / apply page header. */
.pub-org img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
/* Shop hero, per Do For Self: gear picture on the left, slogan on the right (stacks picture-first on phones). */
.shop-hero { grid-template-columns: minmax(240px, 480px) minmax(0, 1fr); }
.shop-hero .shop-flyer { order: -1; }
@media (max-width: 900px) { .shop-hero { grid-template-columns: 1fr; } }
/* "Buy now" on items sold through a Stripe payment link */
.product a.btn { text-decoration: none; display: block; text-align: center; margin-top: auto; }
.product .body { display: flex; flex-direction: column; }