:root {
  /* Brand colors sampled from the Phoenix Ebra logo */
  --pe-brand-green: #56bc6d;
  --pe-flame: #eda044;
  --pe-ember: #cb4d32;
  --pe-ink-blue: #1d14a6;
  --pe-green: #2f6b3b;
  --pe-green-dark: #234f2c;
  --pe-leaf: #e8f1e6;
  --pe-soil: #3b2f25;
  --pe-ink: #1d2420;
  --pe-muted: #5d6a61;
  --pe-line: #d9e1da;
  --pe-bg: #fbfaf6;
  --pe-card: #ffffff;
  --pe-warn: #9a3412;
  --pe-warn-bg: #fff3e8;
  --pe-ok-bg: #edf7ee;
  --radius: 12px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--pe-ink);
  background: var(--pe-bg);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; background: var(--pe-bg); }
a { color: var(--pe-green); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--pe-line); background: #fff; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .06em; color: var(--pe-soil); text-decoration: none; }
.topbar .brand img { width: 40px; height: 40px; border-radius: 10px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
.topbar nav a { text-decoration: none; font-weight: 600; }
@media (max-width: 520px) { .topbar .brand span { display: none; } }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 4px; color: var(--pe-soil); }
h2 { font-size: 1.15rem; margin: 28px 0 12px; color: var(--pe-soil); }
.lede { color: var(--pe-muted); max-width: 720px; margin: 0 0 16px; }
.notice { border-radius: var(--radius); padding: 12px 14px; background: var(--pe-leaf); border: 1px solid #cfe0cc; margin: 12px 0; }
.notice.warn { background: var(--pe-warn-bg); border-color: #f5cfae; color: var(--pe-warn); }
.notice.ok { background: var(--pe-ok-bg); }
.layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .layout { grid-template-columns: 1fr 340px; align-items: start; } .sticky { position: sticky; top: 16px; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--pe-card); border: 1px solid var(--pe-line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 1.02rem; }
.card .gz { font-size: .78rem; color: var(--pe-muted); }
label { font-size: .85rem; color: var(--pe-muted); display: block; margin-bottom: 4px; }
select, input[type=number], input[type=text], input[type=tel] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--pe-line); border-radius: 8px; font: inherit; background: #fff;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 1px; }
.row { display: flex; gap: 8px; align-items: end; }
.row > * { flex: 1; }
.qty { max-width: 84px; }
button, .btn {
  appearance: none; border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--pe-green); color: #fff; text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .btn:hover { background: var(--pe-green-dark); }
button.secondary { background: #fff; color: var(--pe-green); border: 1px solid var(--pe-green); }
button.link { background: none; color: var(--pe-green); padding: 0; font-weight: 500; text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; }
.panel { background: var(--pe-card); border: 1px solid var(--pe-line); border-radius: var(--radius); padding: 16px; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--pe-line); font-size: .95rem; }
.cart-line .meta { color: var(--pe-muted); font-size: .85rem; }
.cart-line .ctrls { display: flex; gap: 6px; align-items: center; }
.cart-line .ctrls button { padding: 2px 9px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 12px; }
.totals .grand { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--pe-line); padding-top: 8px; }
.muted { color: var(--pe-muted); font-size: .88rem; }
.error { color: var(--pe-warn); font-size: .9rem; min-height: 1.2em; }
table.bulk { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); overflow: hidden; }
table.bulk th, table.bulk td { padding: 10px; border-bottom: 1px solid var(--pe-line); text-align: left; vertical-align: middle; }
table.bulk td.num, table.bulk th.num { text-align: right; white-space: nowrap; }
table.bulk input { max-width: 120px; }
.step { margin: 0 0 18px; }
.step h2 { margin-top: 0; }
.terms { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin: 14px 0; }
.terms input { margin-top: 4px; width: 18px; height: 18px; }
.hidden { display: none !important; }
@media (max-width: 600px) {
  table.bulk th:nth-child(2), table.bulk td:nth-child(2) { display: none; }
}
.mobile-cart { position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--pe-green); color: #fff; text-align: center; padding: 12px; border-radius: 10px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
@media (min-width: 900px) { .mobile-cart { display: none !important; } }

/* Footer */
.site-footer { border-top: 1px solid var(--pe-line); background: #fff; margin-top: 40px; font-size: .92rem; color: var(--pe-muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; padding-bottom: 20px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Home page */
.hero { background: var(--pe-brand-green); color: #0f2a17; }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding-top: 36px; padding-bottom: 36px; }
@media (min-width: 860px) { .hero-inner { grid-template-columns: 1.1fr .9fr; } }
.hero h1 { color: #0f2a17; font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.1; margin: 0 0 12px; }
.hero p { font-size: 1.12rem; max-width: 560px; margin: 0 0 20px; }
.hero img { width: 100%; max-width: min(460px, 80vw); height: auto; justify-self: center; filter: drop-shadow(0 8px 18px rgba(0,0,0,.15)); }
.eyebrow { display: inline-block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; background: rgba(255,255,255,.75); color: var(--pe-ember); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.btn.flame { background: var(--pe-ember); }
.btn.flame:hover { background: #a93c25; }
.btn.light { background: #fff; color: var(--pe-green-dark); }
.btn.light:hover { background: var(--pe-leaf); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.section { padding-top: 40px; padding-bottom: 8px; }
.section h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 8px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.step-card { background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); padding: 18px; }
.step-card .num { width: 32px; height: 32px; border-radius: 50%; background: var(--pe-flame); color: #3a1d06; display: grid; place-items: center; font-weight: 800; margin-bottom: 8px; }
.step-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step-card p { margin: 0; color: var(--pe-muted); }
.crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.crop { background: #fff; border: 1px solid var(--pe-line); border-left: 4px solid var(--pe-flame); border-radius: 10px; padding: 12px 14px; }
.crop strong { display: block; }
.crop span { color: var(--pe-muted); font-size: .9rem; }
.price-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.price-label { font-size: 1rem; margin: 18px 0 0; color: var(--pe-soil); }
@media (max-width: 520px) { .price-strip { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; } .price-strip div { padding: 10px 6px; font-size: .9rem; } }
.price-strip div { background: var(--pe-leaf); border-radius: 10px; padding: 14px; text-align: center; }
.price-strip b { display: block; font-size: 1.5rem; color: var(--pe-green-dark); }
.coming { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.coming span { background: #fff; border: 1px dashed var(--pe-line); border-radius: 999px; padding: 6px 12px; font-size: .92rem; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 32px; }
.prose li { margin-bottom: 6px; }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 14px; max-width: 860px; }
.faq-item { background: #fff; border: 1px solid var(--pe-line); border-radius: 10px; padding: 0 16px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--pe-ember); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin: 0 0 14px; color: var(--pe-muted); }

/* Static (pre-rendered) plant list, replaced by the interactive shop when JavaScript runs */
.static-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.static-list li { background: #fff; border: 1px solid var(--pe-line); border-radius: 10px; padding: 10px 14px; }

/* Cookie consent banner */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000; display: flex; justify-content: center; }
.consent-inner { background: #fff; border: 1px solid var(--pe-line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 14px 16px; max-width: 760px; width: 100%; font-size: .95rem; }
.consent-inner p { margin: 0 0 8px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.consent .terms { margin: 6px 0; }

/* Forms */
input[type=email], textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--pe-line); border-radius: 8px; font: inherit; background: #fff; }
textarea { min-height: 84px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .span2 { grid-column: 1 / -1; } }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-row label { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--pe-line); border-radius: 10px; padding: 10px 14px; color: var(--pe-ink); font-size: .95rem; cursor: pointer; }
.req { color: var(--pe-ember); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.account-no { font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; color: var(--pe-green-dark); background: var(--pe-leaf); border-radius: 10px; padding: 10px 16px; display: inline-block; }
.grecaptcha-badge { visibility: hidden; }

/* Tabs (soil testing) */
.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--pe-line); margin: 12px 0 0; flex-wrap: wrap; }
.tab { background: transparent; color: var(--pe-muted); border-radius: 10px 10px 0 0; padding: 12px 18px; font-size: 1.02rem; border: 2px solid transparent; border-bottom: 0; margin-bottom: -2px; }
.tab:hover { background: var(--pe-leaf); color: var(--pe-green-dark); }
.tab[aria-selected="true"] { background: #fff; color: var(--pe-green-dark); border-color: var(--pe-line); border-bottom: 2px solid #fff; }
.tab-panel { background: #fff; border: 2px solid var(--pe-line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 14px 18px; margin-bottom: 14px; max-width: 760px; }
.tab-panel h3 { margin: 0 0 6px; color: var(--pe-soil); }
.tab-panel ul { margin: 0; padding-left: 20px; }
@media (max-width: 520px) { .tab { flex: 1; padding: 10px 8px; font-size: .95rem; } }

/* Contact page */
.btn.outline { background: #fff; color: var(--pe-green); border: 1px solid var(--pe-green); }
.btn.outline:hover { background: var(--pe-leaf); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card, .guide-card { background: var(--pe-card); border: 1px solid var(--pe-line); border-radius: var(--radius); padding: 22px; }
.contact-card { border-top: 4px solid var(--pe-flame); }
.contact-name { font-size: 1.5rem; font-weight: 800; color: var(--pe-soil); margin: 0; line-height: 1.2; }
.contact-title { margin: 2px 0 0; font-weight: 600; color: var(--pe-green); }
.contact-place { margin: 2px 0 16px; color: var(--pe-muted); }
.contact-lines { margin: 0 0 18px; display: grid; gap: 10px; }
.contact-lines div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--pe-line); }
.contact-lines dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pe-muted); }
.contact-lines dd { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-lines dd a { text-decoration: none; }
.guide-card { display: grid; grid-template-columns: 1fr; gap: 16px; background: var(--pe-leaf); border-color: #cfe0cc; }
@media (min-width: 520px) { .guide-card { grid-template-columns: 170px 1fr; align-items: center; } }
.guide-cover img { width: 100%; max-width: 220px; height: auto; display: block; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.14); background: #fff; }
.guide-card h2 { margin: 0 0 6px; font-size: 1.3rem; }
.guide-card p { margin: 0 0 14px; }

/* Homepage hero: buttons with a PDF download under each */
.hero-ctas { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 12px; align-items: start; }
.hero-cta { display: flex; flex-direction: column; gap: 8px; }
.hero-cta .btn { width: 100%; }
.pdf-link { display: inline-flex; align-items: flex-start; gap: 7px; font-size: .9rem; font-weight: 600; color: #0f2a17; text-decoration: none; line-height: 1.25; }
.pdf-link:hover { text-decoration: underline; }
.pdf-tag { flex: none; margin-top: 1px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; background: #fff; color: var(--pe-ember); border-radius: 4px; padding: 2px 5px; }
@media (max-width: 400px) { .hero-ctas { grid-template-columns: 1fr 1fr; } .pdf-link { font-size: .85rem; } }

/* Homepage hero: gift certificate link */
.gift-link { margin-top: 16px; display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 10px 14px; background: #fff; border-radius: var(--radius); color: var(--pe-ink); text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: .9rem; line-height: 1.3; }
.gift-link:hover { background: var(--pe-leaf); }
.gift-link strong { color: var(--pe-soil); font-size: 1rem; }
.gift-tag { flex: none; font-size: .7rem; font-weight: 800; letter-spacing: .06em; background: var(--pe-ember); color: #fff; border-radius: 6px; padding: 6px 7px; }
.gift-go { margin-left: auto; flex: none; font-weight: 800; font-size: 1.2rem; color: var(--pe-ember); }

/* Gift certificate page */
.gift-layout { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 16px; align-items: start; }
@media (min-width: 900px) { .gift-layout { grid-template-columns: 1fr 340px; } }
.gift-step { font-size: 1.05rem; margin: 18px 0 10px; }
.gift-step:first-child { margin-top: 0; }
.amount-row { display: flex; flex-wrap: wrap; gap: 10px; }
.amount { position: relative; margin: 0; }
.amount input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amount span { display: block; min-width: 76px; text-align: center; padding: 12px 16px; border: 2px solid var(--pe-line); border-radius: 10px; font-weight: 800; font-size: 1.1rem; color: var(--pe-soil); background: #fff; }
.amount input:checked + span { border-color: var(--pe-green); background: var(--pe-leaf); color: var(--pe-green-dark); }
.amount input:focus-visible + span { outline: 2px solid var(--pe-green); outline-offset: 2px; }
.send-switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--pe-flame); background: var(--pe-warn-bg); border-radius: 12px; cursor: pointer; color: var(--pe-ink); font-size: .98rem; }
.send-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 48px; height: 28px; border-radius: 99px; background: #c9d2cb; position: relative; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.send-switch input:checked + .switch { background: var(--pe-green); }
.send-switch input:checked + .switch::after { left: 23px; }
.send-switch input:focus-visible + .switch { outline: 2px solid var(--pe-green); outline-offset: 2px; }
.gift-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--pe-line); font-size: 1.05rem; }
.gift-total strong { font-size: 1.5rem; color: var(--pe-green-dark); }
.gift-preview { text-align: center; background: #fdf6ec; border: 3px solid var(--pe-green-dark); padding: 0 0 14px; overflow: hidden; }
.gp-top { background: var(--pe-green-dark); color: #fff; font-weight: 800; letter-spacing: .12em; padding: 10px; }
.gp-label { margin-top: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; color: var(--pe-ember); }
.gp-amount { font-size: 2.8rem; font-weight: 800; color: var(--pe-green-dark); line-height: 1.1; }
.gp-code { display: inline-block; margin-top: 8px; padding: 6px 12px; border: 2px dashed var(--pe-flame); border-radius: 8px; background: #fff; font-weight: 800; letter-spacing: .08em; color: var(--pe-green-dark); }
.gp-foot { margin-top: 10px; font-size: .82rem; color: var(--pe-muted); }
.gift-terms { margin-top: 20px; max-width: 860px; }
.gift-terms ul { padding-left: 20px; margin: 0 0 10px; }
.gift-terms li { margin-bottom: 4px; }

/* Checkout: gift certificate */
.gift-box { margin-top: 12px; border-top: 1px solid var(--pe-line); padding-top: 10px; }
.gift-box summary { cursor: pointer; font-weight: 600; color: var(--pe-green); }
.gift-minus { color: var(--pe-green-dark); font-weight: 700; }

/* Homepage hero video (click-to-play) */
.hero-video { justify-self: center; text-align: center; }
.yt-facade, .yt-iframe { display: block; width: 300px; aspect-ratio: 9 / 16; border-radius: 22px; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(0,0,0,.25); background: #0f2a17; }
.yt-facade { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.yt-facade:hover { background: #0f2a17; }
/* Thumbnail matches the video's opening frame: the logo, large, on a dark-to-light green gradient. */
.yt-facade, .yt-facade:hover, .vc-thumb { background: linear-gradient(180deg, #1f4a2a 0%, #3c8a4c 55%, #57bd6b 100%); }
.hero .yt-thumb { position: absolute; left: -10%; top: 8%; width: 120%; max-width: none; height: 86%; object-fit: fill; filter: none; }
.yt-facade .yt-play { width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: none; }
.yt-facade .yt-play::after { left: 28px; top: 22px; border-left-width: 24px; border-top-width: 14px; border-bottom-width: 14px; }
.yt-facade:hover .yt-play { background: rgba(0,0,0,.6); }
.yt-fallback { display: block; margin-top: 8px; font-size: .85rem; }
.yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 52px; border-radius: 14px; background: #ff0033; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.yt-play::after { content: ''; position: absolute; left: 29px; top: 15px; border-left: 20px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.yt-play.small { width: 34px; height: 24px; border-radius: 7px; }
.yt-play.small::after { left: 13px; top: 6px; border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
.yt-cap { margin-top: 10px; font-weight: 700; color: #0f2a17; }
.video-card, .video-inline { display: none; }
@media (max-width: 859px) {
  .hero-video { display: none; }
  .video-card { margin-top: 16px; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; padding: 8px 14px 8px 8px; background: #0f2a17; color: #e3efe5; border-radius: var(--radius); text-align: left; font-weight: 400; font-size: .9rem; line-height: 1.3; }
  .video-card:hover { background: #163a20; }
  .video-card strong { color: #fff; font-size: 1rem; }
  .video-card.hidden { display: none !important; }
  .vc-thumb { position: relative; flex: none; width: 56px; height: 76px; border-radius: 8px; overflow: hidden; border: 2px solid #fff; }
  .hero .vc-thumb img { position: absolute; left: -10%; top: 8%; width: 120%; max-width: none; height: 86%; object-fit: fill; filter: none; }
  .vc-thumb .yt-play.small { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: none; }
  .vc-thumb .yt-play.small::after { left: 10px; top: 7px; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
  .video-inline { display: block; margin-top: 16px; }
  .video-inline .yt-iframe { width: min(300px, 100%); margin: 0 auto; }
}

/* Homepage: history timeline, second order section, shop links */
.history { list-style: none; margin: 16px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--pe-line); display: grid; gap: 12px; max-width: 760px; }
.history li { position: relative; padding-left: 4px; }
.history li::before { content: ''; position: absolute; left: -27px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--pe-green); border: 2px solid var(--pe-bg); }
.history li.now::before { background: var(--pe-flame); }
.history b { display: inline-block; min-width: 64px; margin-right: 8px; color: var(--pe-soil); }
.history li.now b { color: var(--pe-ember); }
.order-band { background: var(--pe-green-dark); color: #fff; margin-top: 40px; padding-bottom: 36px; }
.order-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 0; padding-bottom: 0; }
.order-band h2 { color: #fff; margin: 0 0 6px; }
.order-band p { margin: 0; color: #cfe3d3; max-width: 560px; }
.section-shop { margin-top: 18px; }

/* ---------- Coming-later crop waitlist ---------- */
.waitlist .wl-form { max-width: 760px; }
.wl-step { margin: 22px 0 10px; font-size: 1.1rem; }
.wl-step:first-of-type { margin-top: 4px; }
.wl-sub { font-size: .9rem; font-weight: 500; color: var(--pe-muted); }
.crop-picked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--pe-green); border-radius: var(--radius); background: var(--pe-ok-bg); }
.crop-picked strong { display: block; font-size: 1.05rem; color: var(--pe-soil); }
.cp-note { display: block; font-size: .88rem; color: var(--pe-muted); }
.cp-check, .ca-check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; }
.cp-check { background: var(--pe-green); color: #fff; }
.crop-adds { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .crop-adds { grid-template-columns: 1fr 1fr; } }
.crop-add { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border: 2px dashed #a9c4ab; border-radius: var(--radius); background: #fff; cursor: pointer; color: var(--pe-ink); font-size: 1rem; transition: border-color .15s, background .15s; }
.crop-add:hover { border-color: var(--pe-green); background: #f7fbf6; }
.crop-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crop-add .ca-check { border: 2px solid var(--pe-green); color: var(--pe-green); background: #fff; }
.crop-add .ca-check::before { content: '+'; }
.crop-add strong { display: block; font-size: 1.02rem; color: var(--pe-soil); }
.ca-state { display: block; font-size: .9rem; font-weight: 700; color: var(--pe-green); }
.crop-add:has(input:checked) { border-style: solid; border-color: var(--pe-green); background: var(--pe-ok-bg); }
.crop-add:has(input:checked) .ca-check { background: var(--pe-green); color: #fff; }
.crop-add:has(input:checked) .ca-check::before { content: '✓'; }
.crop-add:has(input:focus-visible) { outline: 2px solid var(--pe-green); outline-offset: 2px; }
.role-pick { border: 0; padding: 0; margin: 14px 0 0; }
.role-pick legend { font-size: .85rem; color: var(--pe-muted); margin-bottom: 6px; padding: 0; }
.role-pick .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.role-pick .pill { position: relative; margin: 0; cursor: pointer; }
.role-pick .pill input { position: absolute; opacity: 0; }
.role-pick .pill span { display: inline-block; padding: 9px 16px; border: 2px solid var(--pe-line); border-radius: 999px; background: #fff; color: var(--pe-ink); font-size: .95rem; font-weight: 600; }
.role-pick .pill input:checked + span { border-color: var(--pe-green); background: var(--pe-green); color: #fff; }
.role-pick .pill input:focus-visible + span { outline: 2px solid var(--pe-green); outline-offset: 2px; }
.wl-submit { width: 100%; font-size: 1.05rem; padding: 14px; }
.wl-done { max-width: 760px; }
.waitlist .section-shop { margin-top: 22px; }
.coming a { background: #fff; border: 2px solid var(--pe-green); border-radius: 999px; padding: 8px 14px; font-size: .95rem; font-weight: 700; color: var(--pe-green-dark); text-decoration: none; }
.coming a:hover { background: var(--pe-ok-bg); }
.coming a::after { content: ' →'; }