/* Woodland Firewood – customer accounts. Easy to read, big buttons, works on any phone. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

.wfc { --brand: #26382b; --accent: #e0702a; --bg: #f6f3ee; --paper: #fff; --ink: #1d1a17; --muted: #6b645c; --line: #e6dfd5; --line2: #d3c9bb; --ok: #2f7a45; --okbg: #e5f3e8; --wait: #8a5a00; --waitbg: #fbf1d9; --bad: #b8321c; --badbg: #fcebe7; --r: 16px; --head: "Barlow", "Atkinson Hyperlegible", system-ui, sans-serif;
	font-family: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); text-align: left; }
.wfc *, .wfc *::before, .wfc *::after { box-sizing: border-box; }
.wfc h1, .wfc h2 { font-family: var(--head); font-weight: 800; letter-spacing: 0; text-transform: none; margin: 0; line-height: 1.15; color: inherit; }
.wfc h2 { font-size: 1.25rem; }
.wfc p { margin: 0 0 .6em; }
.wfc a { color: var(--brand); text-underline-offset: 3px; }
.wfc :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.wfc-i { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.wfc-muted, .wfc-small { color: var(--muted); }
.wfc-small { font-size: .9rem; }
.wfc-small .wfc-i { width: 16px; height: 16px; }
.wfc-kicker { margin: 0 0 4px; font-weight: 700; color: var(--muted); font-size: .9rem; }
.wfc-hp { position: absolute; left: -9999px; }

/* Header */
.wfc-top { position: sticky; top: 0; z-index: 20; background: var(--brand); color: #fff; }
.wfc-top__in { display: flex; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto; padding: 10px 16px; }
.wfc-brand { display: flex; align-items: center; margin-right: auto; color: #fff !important; text-decoration: none; }
.wfc-brand img { max-height: 44px; width: auto; }
.wfc-wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 800; font-size: 1.2rem; }
.wfc-wordmark .wfc-i { color: var(--accent); }
.wfc-cta { display: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: #fff !important; font-weight: 700; text-decoration: none; }
.wfc-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand) !important; font-family: var(--head); font-weight: 800; text-decoration: none; }
.wfc-tabs { display: none; background: color-mix(in srgb, var(--brand) 88%, #000); }
.wfc-tabs__in { display: flex; gap: 2px; max-width: 980px; margin: 0 auto; padding: 0 10px; overflow-x: auto; }
.wfc-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; color: rgba(255, 255, 255, .8) !important; text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.wfc-tabs a.is-on { color: #fff !important; border-bottom-color: var(--accent); }
.wfc-tabs a:last-child { margin-left: auto; }
@media (min-width: 820px) { .wfc-cta { display: inline-flex; } .wfc-tabs { display: block; } .wfc-bottom { display: none !important; } }

.wfc-wrap { max-width: 980px; margin: 0 auto; padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }
@media (min-width: 820px) { .wfc-wrap { padding-bottom: 60px; } }
.wfc-h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.wfc-back { font-weight: 700; text-decoration: none; }

/* Bottom bar (phones) */
.wfc-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(0, 0, 0, .05); }
.wfc-bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; color: var(--muted) !important; text-decoration: none; font-size: .74rem; font-weight: 700; }
.wfc-bottom a .wfc-i { width: 24px; height: 24px; }
.wfc-bottom a.is-on { color: var(--brand) !important; }
.wfc-bottom__cta .wfc-i { width: 46px !important; height: 46px !important; padding: 11px; margin-top: -22px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(224, 112, 42, .4); }

/* Cards and buttons */
.wfc-card { display: block; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px rgba(60, 40, 20, .05); }
.wfc-card > h2 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
a.wfc-card { transition: transform .18s ease, box-shadow .18s ease; }
a.wfc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(60, 40, 20, .1); }
.wfc-btn { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 20px; border-radius: 14px; border: 2px solid var(--line2); background: var(--paper); color: var(--ink) !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; transition: transform .12s ease, background-color .15s ease; }
.wfc-btn:active { transform: scale(.97); }
.wfc-btn--main { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.wfc-btn--main:hover { filter: brightness(.95); }
.wfc-btn--small { min-height: 44px; padding: 8px 14px; font-size: .95rem; }
.wfc-btn--ghost { color: var(--bad) !important; }
.wfc-btn small { flex-basis: 100%; font-weight: 400; font-size: .85rem; opacity: .9; }
.wfc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wfc-actions > .wfc-btn, .wfc-actions > form { flex: 1 1 220px; }
.wfc-actions > form .wfc-btn { width: 100%; }
.wfc-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.wfc-alert { padding: 14px 16px; border-radius: 12px; font-weight: 700; border-left: 6px solid; }
.wfc-alert--error { background: var(--badbg); border-color: var(--bad); color: #6d1d10; }
.wfc-alert--success { background: var(--okbg); border-color: var(--ok); color: #164d2a; }
.wfc-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 20px; border: 2px dashed var(--line2); border-radius: 20px; }
.wfc-empty > .wfc-i { width: 40px; height: 40px; color: var(--accent); }

/* Pills */
.wfc-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; background: #eee; }
.wfc-pill--booked, .wfc-pill--requested { background: var(--waitbg); color: var(--wait); }
.wfc-pill--confirmed, .wfc-pill--loaded, .wfc-pill--out { background: #e3ecf6; color: #23466b; }
.wfc-pill--delivered, .wfc-pill--active { background: var(--okbg); color: var(--ok); }
.wfc-pill--cancelled, .wfc-pill--paused { background: var(--badbg); color: var(--bad); }

/* Home */
.wfc-hello h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); }
.wfc-next { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: var(--brand); color: #fff; }
.wfc-next::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 10px, rgba(255, 255, 255, .06) 10px 12px); }
.wfc-next__top { display: flex; gap: 14px; align-items: flex-start; }
.wfc-next__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--accent); color: #fff; }
.wfc-next__icon .wfc-i { width: 28px; height: 28px; }
.wfc-next h2 { font-size: 2rem; color: #fff; }
.wfc-next p { color: rgba(255, 255, 255, .85); margin: 0; }
.wfc-next .wfc-kicker { color: rgba(255, 255, 255, .7); }
.wfc-next .wfc-link { color: #fff !important; margin-top: 12px; position: relative; z-index: 1; }
.wfc-next--none { display: flex; gap: 14px; align-items: center; }
.wfc-next--none h2 { font-size: 1.4rem; }
.wfc-track { list-style: none; margin: 18px 0 4px; padding: 0; display: flex; position: relative; z-index: 1; }
.wfc-track li { position: relative; flex: 1; display: grid; justify-items: center; gap: 6px; font-size: .78rem; font-weight: 700; text-align: center; color: rgba(127, 127, 127, .9); }
.wfc-next .wfc-track li { color: rgba(255, 255, 255, .6); }
.wfc-track li span { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line2); }
.wfc-track li + li::before { content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 4px; background: var(--line2); }
.wfc-track li.is-done span { background: var(--accent); border-color: var(--accent); }
.wfc-track li.is-done { color: inherit; }
.wfc-next .wfc-track li.is-done { color: #fff; }
.wfc-track li.is-done + li.is-done::before { background: var(--accent); }
.wfc-track li.is-now span { box-shadow: 0 0 0 6px rgba(224, 112, 42, .3); animation: wfc-pulse 1.8s ease-in-out infinite; }
@keyframes wfc-pulse { 50% { box-shadow: 0 0 0 10px rgba(224, 112, 42, .1); } }
.wfc-cancelled { font-weight: 700; color: var(--bad); }
.wfc-nudge { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--waitbg); color: var(--ink) !important; text-decoration: none; }
.wfc-nudge > span { flex: 1; display: grid; }
.wfc-nudge > .wfc-i:first-child { color: var(--accent); width: 28px; height: 28px; }
.wfc-review { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wfc-review > .wfc-i { width: 36px; height: 36px; color: #f4b400; }
.wfc-review > div { flex: 1; min-width: 200px; }
.wfc-loyal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wfc-loyal__head .wfc-i { color: var(--accent); width: 26px; height: 26px; }
.wfc-bar { height: 12px; border-radius: 6px; background: #efe8de; overflow: hidden; margin-bottom: 6px; }
.wfc-bar i { display: block; height: 100%; width: var(--p); border-radius: 6px; background: var(--accent); animation: wfc-grow 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wfc-grow { from { width: 0; } }
.wfc-loyal small { color: var(--muted); }
.wfc-tip { display: flex; gap: 14px; }
.wfc-tip > span { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #efe8de; color: var(--brand); }

/* Orders */
.wfc-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wfc-order { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; }
.wfc-order:hover { border-color: var(--brand); }
.wfc-order__main { flex: 1; min-width: 0; display: grid; }
.wfc-order__main small { color: var(--muted); }
.wfc-date { display: grid; place-items: center; align-content: center; width: 54px; height: 58px; flex: none; border-radius: 12px; background: #efe8de; color: var(--brand); font-size: .75rem; font-weight: 700; line-height: 1.1; }
.wfc-date strong { font-family: var(--head); font-weight: 800; font-size: 1.4rem; }
.wfc-dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 14px 0 0; }
.wfc-dl dt { font-weight: 700; color: var(--muted); font-size: .9rem; margin-top: 8px; }
.wfc-dl dd { margin: 0; }
@media (min-width: 600px) { .wfc-dl { grid-template-columns: 150px 1fr; } .wfc-dl dt { margin-top: 0; } }
.wfc-items { width: 100%; border-collapse: collapse; }
.wfc-items td, .wfc-items th { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.wfc-items td:last-child, .wfc-items th:last-child { text-align: right; }
.wfc-items tfoot th { border-bottom: 0; font-size: 1.1rem; }

/* Forms */
.wfc-form { display: grid; gap: 16px; }
.wfc-field { display: grid; gap: 6px; margin: 0; }
.wfc-field label { font-weight: 700; display: grid; gap: 6px; }
.wfc input[type="text"], .wfc input[type="email"], .wfc input[type="tel"], .wfc input[type="number"], .wfc select, .wfc textarea {
	width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line2); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; margin: 0; }
.wfc textarea { min-height: 84px; }
.wfc input:focus, .wfc select:focus, .wfc textarea:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 20%, transparent); }
.wfc-code { font-family: var(--head) !important; font-weight: 800 !important; font-size: 2rem !important; letter-spacing: .4em; text-align: center; }
.wfc-grid2 { display: grid; gap: 14px; }
@media (min-width: 600px) { .wfc-grid2 { grid-template-columns: 1fr 1fr; } }
.wfc-tick, .wfc-switch { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; cursor: pointer; }
.wfc-tick input { width: 22px; height: 22px; accent-color: var(--brand); }
.wfc-switch input { position: absolute; opacity: 0; }
.wfc-switch span { position: relative; width: 50px; height: 30px; flex: none; border-radius: 15px; background: var(--line2); transition: background .2s ease; }
.wfc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.wfc-switch input:checked + span { background: var(--ok); }
.wfc-switch input:checked + span::after { transform: translateX(20px); }
.wfc-switch input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.wfc-more > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; }
.wfc-more > summary::-webkit-details-marker { display: none; }
.wfc-more[open] > summary { margin-bottom: 14px; }
.wfc-plan__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Rewards */
.wfc-stamps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 6px 0 14px; max-width: 420px; }
.wfc-stamps__grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line2); color: var(--muted); font-weight: 700; animation: wfc-stamp .4s both; animation-delay: calc(var(--i) * 50ms); }
.wfc-stamps__grid span.is-on { border: 0; background: var(--accent); color: #fff; }
.wfc-stamps__grid span.is-free { border-style: solid; border-color: var(--accent); color: var(--accent); }
.wfc-stamps__grid .wfc-i { width: 22px; height: 22px; }
@keyframes wfc-stamp { from { transform: scale(.4); opacity: 0; } }
.wfc-copy { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wfc-copy input { flex: 1 1 220px; font-size: 15px !important; }

/* Tips */
.wfc-tips { display: grid; gap: 12px; }
@media (min-width: 700px) { .wfc-tips { grid-template-columns: 1fr 1fr; } }
.wfc-tips .wfc-card { animation: wfc-rise .45s both; animation-delay: calc(var(--i) * 50ms); }
.wfc-tipn { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: var(--accent); color: #fff; font-family: var(--head); font-weight: 800; }

/* Sign in */
.wfc--out { min-height: 100vh; }
.wfc-sign { display: grid; min-height: 100vh; }
@media (min-width: 900px) { .wfc-sign { grid-template-columns: 1fr 1fr; } }
.wfc-sign__side { display: none; flex-direction: column; justify-content: center; gap: 22px; padding: 48px; background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.wfc-sign__side::after { content: ""; position: absolute; right: -200px; bottom: -200px; width: 520px; height: 520px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 18px, rgba(255, 255, 255, .05) 18px 20px); }
@media (min-width: 900px) { .wfc-sign__side { display: flex; } }
.wfc-sign__side h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff; }
.wfc-sign__side h1 span { display: block; color: var(--accent); }
.wfc-sign__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.wfc-sign__side li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.wfc-sign__side li .wfc-i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: var(--accent); }
.wfc-sign__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px 16px; }
@media (max-width: 899px) { .wfc-sign__main { background: linear-gradient(to bottom, var(--brand) 0 200px, var(--bg) 200px); } }
.wfc-sign__card { width: 100%; max-width: 440px; display: grid; gap: 14px; padding: 28px 24px; animation: wfc-rise .5s both; }
.wfc-sign__card h2 { font-size: 1.7rem; }

/* Receipt */
.wfc-receipt { background: #fff; min-height: 100vh; padding: 24px 16px; }
.wfc-receipt__in { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; }
.wfc-receipt header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 3px solid var(--brand); }
.wfc-receipt header img { max-height: 60px; }
.wfc-receipt header .wfc-wordmark { color: var(--brand); }
.wfc-receipt header div { text-align: right; }
@media print { .wfc-noprint, .wfc-bottom, .wfc-top { display: none !important; } .wfc-receipt { padding: 0; } }

@keyframes wfc-rise { from { opacity: 0; transform: translateY(12px); } }
.wfc-wrap > * { animation: wfc-rise .4s both; }
.wfc-wrap > *:nth-child(2) { animation-delay: .05s; } .wfc-wrap > *:nth-child(3) { animation-delay: .1s; } .wfc-wrap > *:nth-child(4) { animation-delay: .15s; } .wfc-wrap > *:nth-child(n+5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .wfc *, .wfc *::after { animation: none !important; transition: none !important; } }

/* Order tab */
.wfc-shop { display: grid; gap: 14px; }
.wfc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
.wfc-steps li { display: flex; align-items: center; gap: 6px; flex: 1; min-width: max-content; padding: 8px 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--muted); }
.wfc-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #efe8de; font-size: .8rem; }
.wfc-steps li.is-now { border-color: var(--accent); color: var(--ink); }
.wfc-steps li.is-now span, .wfc-steps li.is-done span { background: var(--accent); color: #fff; }
@media (max-width: 560px) { .wfc-steps li:not(.is-now) { font-size: 0; gap: 0; padding: 8px; flex: 0; } .wfc-steps li:not(.is-now) span { font-size: .8rem; } }
.wfc-sub { margin: 18px 0 8px; font-family: var(--head); font-weight: 800; font-size: 1.05rem; }
.wfc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wfc-type, .wfc-size, .wfc-slot, .wfc-pills button, .wfc-step button { font: inherit; cursor: pointer; color: var(--ink); }
.wfc-type { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.wfc-type:hover { transform: translateY(-2px); border-color: var(--line2); }
.wfc-type strong { font-family: var(--head); font-weight: 800; font-size: 1.1rem; }
.wfc-type small { color: var(--muted); }
.wfc-type em { font-style: normal; font-weight: 700; color: var(--accent); }
.wfc-type.is-on, .wfc-size.is-on { border-color: var(--accent); background: #fdf1e8; }
.wfc-type.is-out em, .wfc-size.is-out b { color: var(--bad); }
.wfc-size.is-out { opacity: .6; cursor: not-allowed; }
.wfc-sizes, .wfc-addons, .wfc-radios { display: grid; gap: 8px; }
.wfc-size { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); text-align: left; }
.wfc-size b { font-family: var(--head); font-weight: 800; font-size: 1.15rem; }
.wfc-step { display: inline-flex; align-items: stretch; border: 2px solid var(--line2); border-radius: 12px; overflow: hidden; }
.wfc-step button { width: 52px; min-height: 52px; border: 0; background: #f4efe8; font-size: 1.4rem; font-weight: 700; }
.wfc-step output { display: grid; place-items: center; min-width: 56px; font-family: var(--head); font-weight: 800; font-size: 1.3rem; }
.wfc-step--sm button { width: 44px; min-height: 44px; }
.wfc-step--sm output { min-width: 40px; font-size: 1.1rem; }
.wfc-addon { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--line); }
.wfc-addon span { display: grid; }
.wfc-addon em { font-style: normal; color: var(--accent); font-weight: 700; }
.wfc-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.wfc-slot { min-height: 48px; padding: 8px 16px; border-radius: 12px; border: 2px solid var(--line2); background: var(--paper); font-weight: 700; }
.wfc-slot:hover { border-color: var(--accent); color: var(--accent); }
.wfc-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); cursor: pointer; }
.wfc-radio input { width: 22px; height: 22px; accent-color: var(--accent); margin-top: 2px; }
.wfc-radio span { display: grid; }
.wfc-radio:has(input:checked) { border-color: var(--accent); background: #fdf1e8; }
.wfc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wfc-pills button { min-height: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line2); background: var(--paper); font-weight: 700; }
.wfc-pills button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wfc-shopnav { display: flex; gap: 10px; margin-top: 18px; }
.wfc-shopnav .wfc-btn--main { flex: 1; }
.wfc-sum { padding: 14px 16px; border-radius: 14px; background: var(--brand); color: #fff; }
.wfc-sum h3 { margin: 0 0 6px; font-size: .85rem; color: rgba(255, 255, 255, .7); font-family: inherit; }
.wfc-sum p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: .95rem; }
.wfc-sum__t { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 1.1rem !important; }
.wfc-sum__t b { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--accent); }
.wfc-sum small { color: rgba(255, 255, 255, .7); }
.wfc-done { text-align: center; display: grid; justify-items: center; gap: 4px; padding: 30px 18px; }
.wfc-done__tick { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--okbg); color: var(--ok); font-size: 2rem; font-weight: 800; animation: wfc-stamp .5s both; }
.wfc-done__ref { font-family: var(--head); font-weight: 800; font-size: 1.6rem; color: var(--accent); margin: 0; }

.wfc-switch2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #efe8de; margin-bottom: 4px; }
.wfc-switch2 a { display: grid; place-items: center; min-height: 46px; border-radius: 9px; font-weight: 700; text-decoration: none; color: var(--ink) !important; }
.wfc-switch2 a.is-on { background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.wfc-agree { align-items: flex-start; }
.wfc-agree span { font-weight: 400; }
.wfc-agree input { margin-top: 3px; }

/* =====================================================================
   EMBER LOOK: matches dorsetfirewood.com (dark, ember orange, condensed caps)
   ===================================================================== */
.wfc {
	--bg: #0b0807; --paper: #1a1310; --paper2: #241a13; --ink: #f2ece6; --muted: #a58f7e;
	--line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .17);
	--accent2: #f0953f; --glow: rgba(217, 119, 46, .35);
	--ok: #7fd39a; --okbg: rgba(47, 122, 69, .2); --wait: #f0c060; --waitbg: rgba(224, 165, 58, .14); --bad: #f08a80; --badbg: rgba(224, 106, 96, .14);
	--head: "Barlow Condensed", "Barlow", "Atkinson Hyperlegible", system-ui, sans-serif;
	background: var(--bg); color: var(--ink);
}
.wfc h1, .wfc h2, .wfc h3 { font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.wfc h2 { font-size: 1.45rem; }
.wfc a { color: var(--accent2); }
.wfc-muted, .wfc-small, .wfc-kicker { color: var(--muted); }
.wfc-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--accent2); }

/* Edge to edge on the website: no page-inside-a-page */
body.wfc-page { overflow-x: hidden; }
body.wfc-page .wfc:not(.wfc-receipt) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
body.wfc-page .entry-title, body.wfc-page .page-title, body.wfc-page .entry-header, body.wfc-page .wp-block-post-title, body.wfc-page .elementor-page-title { display: none !important; }
body.wfc-page .ast-article-single, body.wfc-page .ast-separate-container .ast-article-single, body.wfc-page article.page { padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.wfc-page .site-content, body.wfc-page #content, body.wfc-page main.site-main, body.wfc-page #primary, body.wfc-page .entry-content, body.wfc-page .wp-site-blocks > main { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
body.wfc-page .site-content > .ast-container, body.wfc-page .ast-container { max-width: none !important; padding: 0 !important; }

/* Header with glowing embers */
.wfc-top { position: relative; overflow: hidden; background: radial-gradient(ellipse at 85% -20%, var(--glow), transparent 60%), radial-gradient(ellipse at 10% 120%, rgba(217, 119, 46, .14), transparent 55%), #120d0b; border-bottom: 1px solid rgba(217, 119, 46, .28); }
body:not(.wfc-body) .wfc-top { position: relative; top: auto; }
.wfc-top__in, .wfc-tabs { position: relative; z-index: 1; }
.wfc-tabs { background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.wfc-tabs a { position: relative; border-bottom: 0; transition: color .2s ease; }
.wfc-tabs a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.wfc-tabs a:hover::after, .wfc-tabs a.is-on::after { transform: scaleX(1); }
.wfc-tabs__in { scrollbar-width: none; }
.wfc-tabs__in::-webkit-scrollbar { display: none; }
.wfc-wordmark { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; }
.wfc-avatar { background: var(--accent); color: #fff !important; box-shadow: 0 0 0 4px rgba(217, 119, 46, .25); }
.wfc-cta { background: var(--accent); box-shadow: 0 6px 20px rgba(217, 119, 46, .35); }
.wfc-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wfc-embers i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffb067; box-shadow: 0 0 10px 3px rgba(240, 149, 63, .65); opacity: 0; animation: wfc-ember var(--t) linear infinite; animation-delay: var(--d); }
@keyframes wfc-ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: .95; } 70% { opacity: .6; } 100% { transform: translate(var(--dx), -260px) scale(.2); opacity: 0; } }

.wfc-wrap { padding-top: 34px; max-width: 1080px; }

/* Hello */
.wfc-hello h1 { font-size: clamp(2.8rem, 8vw, 5rem); line-height: .9; }
.wfc-hello h1 span { color: var(--accent2); text-shadow: 0 0 30px rgba(240, 149, 63, .35); }

/* Cards */
.wfc-card, .wfc-order, .wfc-type, .wfc-size, .wfc-addon, .wfc-radio, .wfc-steps li { background: var(--paper); border-color: var(--line); color: var(--ink) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px rgba(0, 0, 0, .35); }
a.wfc-card, .wfc-order, .wfc-type, .wfc-next { position: relative; transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .25s ease; will-change: transform; }
a.wfc-card::before, .wfc-order::before, .wfc-next::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 149, 63, .16), transparent 45%); }
a.wfc-card:hover::before, .wfc-order:hover::before, .wfc-next:hover::before { opacity: 1; }
a.wfc-card:hover, .wfc-order:hover, .wfc-type:hover { border-color: rgba(217, 119, 46, .55); box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(217, 119, 46, .25); }
.wfc-card > h2 .wfc-i, .wfc-tip > span { color: var(--accent2); }
.wfc-tip > span, .wfc-date, .wfc-steps li span, .wfc-switch2 { background: var(--paper2); color: var(--accent2); }
.wfc-date strong { color: #fff; }

/* Next delivery */
.wfc-next { background: linear-gradient(135deg, #2a1810 0%, #160f0c 60%), #160f0c; border: 1px solid rgba(217, 119, 46, .35); box-shadow: 0 25px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(217, 119, 46, .12) inset; }
.wfc-next h2 { font-size: clamp(2rem, 6vw, 3rem); }
.wfc-next__icon { background: var(--accent); box-shadow: 0 0 0 6px rgba(217, 119, 46, .2), 0 10px 30px rgba(217, 119, 46, .4); animation: wfc-bob 3s ease-in-out infinite; }
@keyframes wfc-bob { 50% { transform: translateY(-4px); } }
.wfc-next--none { background: var(--paper); border: 1px dashed rgba(217, 119, 46, .4); }

/* Tracker with a truck */
.wfc-trackwrap { position: relative; margin: 22px 0 6px; }
.wfc-trackline { position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.wfc-trackline i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 12px rgba(240, 149, 63, .6); animation: wfc-fill 1.4s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wfc-fill { from { width: 0; } }
.wfc-truck { position: absolute; top: -30px; left: var(--p); transform: translateX(-50%); display: grid; place-items: center; width: 30px; height: 26px; color: var(--accent2); animation: wfc-drive 1.4s .3s cubic-bezier(.2, .7, .2, 1) both, wfc-rumble .35s 1.7s ease-in-out infinite alternate; }
.wfc-truck .wfc-i { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(240, 149, 63, .6)); }
@keyframes wfc-drive { from { left: 0; } }
@keyframes wfc-rumble { to { transform: translateX(-50%) translateY(-1px); } }
.wfc-track { margin: 0; position: relative; }
.wfc-track li + li::before { display: none; }
.wfc-track li span { background: #2a1e16; border-color: rgba(255, 255, 255, .25); }
.wfc-track li.is-done span { background: var(--accent); border-color: var(--accent); }
.wfc-track li { color: var(--muted); }
.wfc-next .wfc-track li.is-done { color: #fff; }

/* Buttons with a shine */
.wfc-btn { background: var(--paper2); border-color: var(--line2); color: var(--ink) !important; position: relative; overflow: hidden; font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.wfc-btn--main { background: linear-gradient(135deg, var(--accent), #c1601f); border-color: transparent; color: #fff !important; box-shadow: 0 10px 28px rgba(217, 119, 46, .35); }
.wfc-btn--main::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s ease; }
.wfc-btn--main:hover::after { left: 130%; }
.wfc-btn:hover { transform: translateY(-2px); }
.wfc-btn small { font-family: "Atkinson Hyperlegible", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Refer a friend */
.wfc-refcard { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, rgba(217, 119, 46, .22), rgba(217, 119, 46, .05)) , var(--paper); border-color: rgba(217, 119, 46, .35); }
.wfc-refcard > div { flex: 1; }
.wfc-refcard strong { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; color: #fff; }
.wfc-refcard__gift { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 16px; background: var(--accent); color: #fff; animation: wfc-wiggle 4s ease-in-out infinite; }
.wfc-refcard__gift .wfc-i { width: 30px; height: 30px; }
@keyframes wfc-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.wfc-refer__hero { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.wfc-refer__coin { display: grid; place-items: center; width: 92px; height: 92px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffbe7a, var(--accent) 55%, #9c4a14); color: #fff; font-family: var(--head); font-weight: 900; font-size: 1.9rem; box-shadow: 0 0 0 6px rgba(217, 119, 46, .18), 0 14px 40px rgba(217, 119, 46, .45); animation: wfc-coin 5s ease-in-out infinite; }
@keyframes wfc-coin { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-5px); box-shadow: 0 0 0 10px rgba(217, 119, 46, .12), 0 18px 46px rgba(217, 119, 46, .55); } }
.wfc-how { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .wfc-how { grid-template-columns: repeat(3, 1fr); } }
.wfc-how li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--paper2); }
.wfc-how span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--head); font-weight: 900; font-size: 1.2rem; }
.wfc-refstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wfc-refstats div { padding: 14px; border-radius: 14px; background: var(--paper2); text-align: center; }
.wfc-refstats strong { display: block; font-family: var(--head); font-weight: 900; font-size: clamp(1.1rem, 4.5vw, 1.8rem); color: var(--accent2); overflow-wrap: anywhere; }
.wfc-refstats span { font-size: .85rem; color: var(--muted); }

/* Forms, pills, steps, ordering */
.wfc input[type="text"], .wfc input[type="email"], .wfc input[type="tel"], .wfc input[type="number"], .wfc select, .wfc textarea { background: var(--paper2); color: var(--ink); border-color: var(--line2); }
.wfc input:focus, .wfc select:focus, .wfc textarea:focus { border-color: var(--accent); outline: 3px solid rgba(217, 119, 46, .25); }
.wfc ::placeholder { color: #6e5d50; }
.wfc-type.is-on, .wfc-size.is-on, .wfc-radio:has(input:checked) { background: rgba(217, 119, 46, .14); border-color: var(--accent); }
.wfc-type strong, .wfc-size b { font-family: var(--head); text-transform: uppercase; }
.wfc-step { border-color: var(--line2); }
.wfc-step button { background: var(--paper2); color: var(--ink); }
.wfc-step output { color: #fff; }
.wfc-slot, .wfc-pills button { background: var(--paper2); border-color: var(--line2); color: var(--ink); }
.wfc-slot:hover { border-color: var(--accent); color: var(--accent2); transform: translateY(-2px); }
.wfc-pills button.is-on { background: var(--accent); border-color: var(--accent); }
.wfc-steps li.is-now { border-color: var(--accent); color: #fff; }
.wfc-sum { background: linear-gradient(135deg, #2a1810, #160f0c); border: 1px solid rgba(217, 119, 46, .3); }
.wfc-switch2 a { color: var(--muted) !important; }
.wfc-switch2 a.is-on { background: var(--accent); color: #fff !important; }
.wfc-switch span { background: rgba(255, 255, 255, .2); }
.wfc-items td, .wfc-items th { border-color: var(--line); }
.wfc-bar { background: var(--paper2); }
.wfc-alert--success { background: rgba(47, 122, 69, .2); color: #bdf0cc; }
.wfc-alert--error { background: rgba(224, 106, 96, .15); color: #ffc2bb; }
.wfc-empty { border-color: rgba(217, 119, 46, .35); }
.wfc-tipn { background: var(--accent); }
.wfc-done__tick { background: rgba(47, 122, 69, .25); }
.wfc-done { position: relative; overflow: hidden; }
.wfc-confetti { position: absolute; inset: 0; pointer-events: none; }
.wfc-confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: wfc-fall 2.4s ease-in forwards; }
.wfc-confetti i:nth-child(4n) { background: var(--accent); } .wfc-confetti i:nth-child(4n+1) { background: #ffd166; } .wfc-confetti i:nth-child(4n+2) { background: #7fd39a; } .wfc-confetti i:nth-child(4n+3) { background: #fff; }
.wfc-confetti i:nth-child(n) { left: calc(var(--n, 0) * 1%); }
.wfc-confetti i:nth-child(1){left:4%;animation-delay:.0s}.wfc-confetti i:nth-child(2){left:10%;animation-delay:.15s}.wfc-confetti i:nth-child(3){left:16%;animation-delay:.05s}.wfc-confetti i:nth-child(4){left:22%;animation-delay:.3s}.wfc-confetti i:nth-child(5){left:28%;animation-delay:.1s}.wfc-confetti i:nth-child(6){left:34%;animation-delay:.25s}.wfc-confetti i:nth-child(7){left:40%;animation-delay:.05s}.wfc-confetti i:nth-child(8){left:46%;animation-delay:.35s}.wfc-confetti i:nth-child(9){left:52%;animation-delay:.2s}.wfc-confetti i:nth-child(10){left:58%;animation-delay:0s}.wfc-confetti i:nth-child(11){left:64%;animation-delay:.3s}.wfc-confetti i:nth-child(12){left:70%;animation-delay:.1s}.wfc-confetti i:nth-child(13){left:76%;animation-delay:.25s}.wfc-confetti i:nth-child(14){left:82%;animation-delay:.05s}.wfc-confetti i:nth-child(15){left:88%;animation-delay:.4s}.wfc-confetti i:nth-child(16){left:94%;animation-delay:.15s}.wfc-confetti i:nth-child(17){left:7%;animation-delay:.5s}.wfc-confetti i:nth-child(18){left:37%;animation-delay:.45s}.wfc-confetti i:nth-child(19){left:61%;animation-delay:.55s}.wfc-confetti i:nth-child(20){left:85%;animation-delay:.6s}.wfc-confetti i:nth-child(21){left:25%;animation-delay:.65s}.wfc-confetti i:nth-child(22){left:73%;animation-delay:.7s}.wfc-confetti i:nth-child(23){left:49%;animation-delay:.75s}
@keyframes wfc-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(420px) rotate(600deg); } }

/* Bottom bar (phones) */
.wfc-bottom { background: rgba(18, 13, 11, .92); backdrop-filter: blur(10px); border-top-color: rgba(217, 119, 46, .25); }
.wfc-bottom a { color: var(--muted) !important; }
.wfc-bottom a.is-on { color: var(--accent2) !important; }

/* Sign in */
.wfc-sign__side { background: radial-gradient(ellipse at 80% 0%, var(--glow), transparent 60%), #120d0b; }
.wfc-sign__side h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: .92; }
.wfc-sign__side h1 span { color: var(--accent2); }
.wfc-sign__side > *:not(.wfc-embers) { position: relative; z-index: 1; }
.wfc-sign__main { background: var(--bg); }
@media (max-width: 899px) { .wfc-sign__main { background: radial-gradient(ellipse at 50% -10%, var(--glow), transparent 55%), var(--bg); } }

/* Scroll reveal */
.wfc-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease var(--rd, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--rd, 0ms); }
.wfc-reveal.is-in { opacity: 1; transform: none; }
.wfc-wrap > * { animation: none; }

/* Receipt stays light for printing */
.wfc-receipt { --bg: #fff; --paper: #fff; --ink: #1d1a17; --muted: #6b645c; --line: #e6dfd5; background: #fff; color: #1d1a17; }
.wfc-receipt h1 { color: #1d1a17; }
@media (prefers-reduced-motion: reduce) { .wfc-embers, .wfc-confetti { display: none; } .wfc-reveal { opacity: 1; transform: none; } }

.wfc-card { min-width: 0; max-width: 100%; }
.wfc-refer__coin { width: 76px; height: 76px; font-size: 1.6rem; }
@media (min-width: 700px) { .wfc-refer__coin { width: 92px; height: 92px; font-size: 1.9rem; } }