:root {
  color-scheme: light;
  --ink: #2c1810;
  --deep: #170c08;
  --brown: #3f2a1d;
  --muted: #705b4c;
  --copper: #b87333;
  --gold: #e1a35d;
  --cream: #fff8f0;
  --paper: #f8f1e9;
  --line: #ddc3a7;
  --white: #fff;
  --danger: #9b2c20;
  --success: #28623d;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--brown); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; transform: translateY(-150%); padding: .75rem 1rem; border-radius: .6rem; background: #fff; color: var(--deep); font-weight: 800; }
.skip-link:focus { transform: none; }
.checkout-header { padding-top: env(safe-area-inset-top); background: var(--ink); border-bottom: 3px solid var(--copper); }
.checkout-header__inner { width: min(1180px, calc(100% - 2rem)); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-link img { width: min(230px, 48vw); height: auto; }
.header-assurance { display: flex; align-items: center; gap: .7rem; color: #fff; }
.header-assurance__mark { color: var(--gold); }
.header-assurance span:last-child { display: grid; line-height: 1.2; }
.header-assurance strong { font-size: .82rem; }
.header-assurance small { margin-top: .18rem; color: rgba(255,255,255,.68); font-size: .68rem; }
.checkout-main { min-height: calc(100vh - 160px); padding: clamp(1.2rem, 4vw, 3.5rem) max(1rem, env(safe-area-inset-left)) clamp(3rem, 7vw, 6rem) max(1rem, env(safe-area-inset-right)); background: radial-gradient(circle at 10% 0, rgba(184,115,51,.11), transparent 30rem), var(--paper); }
.checkout-shell { width: min(1180px, 100%); margin: 0 auto; }
.checkout-intro { max-width: 800px; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; color: #855023; font-weight: 800; text-underline-offset: 4px; }
.eyebrow, .step-label { margin: .9rem 0 .5rem; color: #a35722; font-size: .72rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.checkout-intro h1, .checkout-card h2, .order-summary h2, .success-panel h1 { font-family: Cinzel, Georgia, serif; }
.checkout-intro h1 { margin: 0; max-width: 770px; color: var(--ink); font-size: clamp(2rem, 6vw, 4.1rem); line-height: 1.02; letter-spacing: -.045em; }
.checkout-intro > p:last-of-type { max-width: 700px; margin: 1rem 0 0; color: var(--muted); font-size: clamp(.98rem, 2vw, 1.12rem); line-height: 1.65; }
.progress-line { display: flex; align-items: center; max-width: 650px; margin: 1.45rem 0 2rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.progress-line span { display: inline-flex; align-items: center; gap: .42rem; white-space: nowrap; }
.progress-line b { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .68rem; }
.progress-line i { flex: 1; height: 1px; margin: 0 .65rem; background: var(--line); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .72fr); gap: 1.35rem; align-items: start; }
.checkout-content { display: grid; gap: 1.15rem; }
.checkout-card, .order-summary__inner { border: 1px solid var(--line); border-radius: 1.45rem; background: rgba(255,248,240,.92); box-shadow: 0 18px 38px -30px rgba(44,24,16,.55); }
.checkout-card { padding: clamp(1.1rem, 3vw, 1.75rem); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.section-heading .step-label, .order-summary .step-label { margin-top: 0; }
.section-heading h2, .order-summary h2 { margin: 0; color: var(--ink); font-size: clamp(1.22rem, 3vw, 1.7rem); line-height: 1.16; letter-spacing: -.02em; }
.section-heading p:not(.step-label) { margin: .45rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.savings-pill, .flavor-meter { flex: none; padding: .42rem .68rem; border: 1px solid #dba46d; border-radius: 999px; background: #fff1df; color: #88491d; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.pack-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.pack-option { position: relative; min-height: 84px; padding: .8rem .4rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; color: var(--brown); display: grid; place-items: center; align-content: center; gap: .2rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pack-option:hover { border-color: var(--copper); transform: translateY(-2px); }
.pack-option[aria-checked="true"] { border-color: var(--gold); background: var(--ink); color: #fff; box-shadow: 0 0 0 3px rgba(225,163,93,.28), 0 12px 28px -17px #2c1810; }
.pack-option span { font-weight: 800; }
.pack-option strong { font-size: .8rem; color: #945326; }
.pack-option[aria-checked="true"] strong { color: #efbb83; }
.pack-option em { position: absolute; top: -.58rem; padding: .2rem .48rem; border-radius: 999px; background: var(--copper); color: #fff; font-size: .56rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.selected-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; }
.selected-slot { min-height: 62px; padding: .58rem; border: 1px dashed #cba47e; border-radius: .85rem; background: rgba(255,255,255,.55); color: #8b7565; display: flex; align-items: center; gap: .48rem; text-align: left; }
.selected-slot--filled { border-style: solid; background: #fff; color: var(--brown); cursor: pointer; }
.selected-slot img { width: 34px; height: 40px; object-fit: contain; border-radius: .42rem; background: var(--deep); }
.selected-slot img.selected-slot__photo { object-fit: cover; }
.selected-slot span { min-width: 0; font-size: .67rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.selected-slot b { margin-left: auto; color: #a35a24; font-size: 1rem; }
.checkout-flavor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.checkout-flavor { position: relative; min-width: 0; padding: .55rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: .65rem; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.checkout-flavor:hover:not(:disabled) { border-color: var(--copper); transform: translateY(-2px); box-shadow: 0 10px 22px -17px var(--deep); }
.checkout-flavor[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 2px rgba(225,163,93,.25); }
.checkout-flavor:disabled { cursor: default; opacity: .6; }
.checkout-flavor img { width: 50px; height: 61px; object-fit: contain; border-radius: .65rem; background: var(--deep); }
.checkout-flavor img.checkout-flavor__photo { object-fit: cover; }
.checkout-flavor__copy { min-width: 0; }
.checkout-flavor__copy strong, .checkout-flavor__copy small { display: block; }
.checkout-flavor__copy strong { color: var(--ink); font-size: .78rem; line-height: 1.25; }
.checkout-flavor__copy small { margin-top: .2rem; color: var(--muted); font-size: .61rem; line-height: 1.3; }
.flavor-quantity { position: absolute; top: -.38rem; right: -.38rem; display: grid; min-width: 1.55rem; height: 1.55rem; place-items: center; padding: 0 .3rem; border: 2px solid var(--cream); border-radius: 999px; background: var(--copper); color: #fff; font-size: .66rem; font-weight: 800; }
.field-error { margin: .8rem 0 0; padding: .7rem .8rem; border-left: 3px solid var(--danger); background: #fff0ed; color: #76251b; font-size: .8rem; font-weight: 700; line-height: 1.45; }
.fulfillment-choice { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.fulfillment-choice legend, .form-subheading { color: var(--brown); font-size: .78rem; font-weight: 800; }
.fulfillment-choice legend { margin-bottom: .6rem; }
.fulfillment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.fulfillment-option { min-width: 0; min-height: 78px; padding: .85rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.fulfillment-option:hover { border-color: var(--copper); transform: translateY(-1px); }
.fulfillment-option:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(225,163,93,.25); }
.fulfillment-option:has(input:checked) { border-color: var(--copper); background: #fff7ed; box-shadow: inset 0 0 0 2px rgba(184,115,51,.14); }
.fulfillment-option input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--copper); }
.fulfillment-option input:focus-visible { outline: 0; }
.fulfillment-option span, .fulfillment-option strong, .fulfillment-option small { display: block; min-width: 0; }
.fulfillment-option strong { color: var(--ink); font-size: .86rem; }
.fulfillment-option small { margin-top: .24rem; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.form-subheading { margin: 0 0 .65rem; }
.fulfillment-panel { margin-top: 1.2rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.pickup-details { color: var(--brown); }
.pickup-market-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.pickup-market-choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pickup-market-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pickup-market-option { min-width: 0; min-height: 76px; padding: .78rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; cursor: pointer; }
.pickup-market-option:has(input:checked) { border-color: var(--copper); background: #fff7ed; box-shadow: inset 0 0 0 2px rgba(184,115,51,.14); }
.pickup-market-option:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(225,163,93,.25); }
.pickup-market-option input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--copper); }
.pickup-market-option span, .pickup-market-option strong, .pickup-market-option small { display: block; min-width: 0; }
.pickup-market-option strong { color: var(--ink); font-size: .78rem; line-height: 1.3; }
.pickup-market-option small { margin-top: .24rem; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.pickup-date-field { margin-top: .85rem; }
.pickup-market-summary { margin-top: .85rem; padding: .9rem; border: 1px solid #dba46d; border-radius: .9rem; background: #fff1df; }
.pickup-market-summary strong { display: block; color: var(--ink); font-size: .85rem; }
.pickup-market-summary p, .pickup-cutoff-note { margin: .32rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.5; }
.pickup-market-summary p:last-child { color: #7e451e; font-weight: 700; }
.pickup-cutoff-note { padding-left: .15rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span { color: var(--brown); font-size: .75rem; font-weight: 800; }
.field small { color: var(--muted); font-size: .68rem; font-weight: 500; }
.field input, .field select { width: 100%; min-height: 49px; border: 1px solid #cdb090; border-radius: .76rem; background: #fff; padding: .7rem .8rem; color: var(--ink); font-size: .9rem; }
.field input:focus, .field select:focus { border-color: var(--copper); outline: 3px solid rgba(184,115,51,.17); }
.field input:user-invalid, .field select:user-invalid { border-color: var(--danger); }
.payment-loading { min-height: 56px; display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .82rem; }
.payment-loading span { width: 1.05rem; height: 1.05rem; border: 2px solid #dcc0a4; border-top-color: var(--copper); border-radius: 50%; animation: spin .8s linear infinite; }
.card-container { min-height: 90px; padding: .8rem; border: 1px solid #cdb090; border-radius: .85rem; background: #fff; }
.order-summary { position: sticky; top: 1rem; }
.order-summary__inner { padding: 1.35rem; background: radial-gradient(circle at 100% 0, rgba(184,115,51,.23), transparent 43%), var(--deep); color: #fff; border-color: #9b5c2c; box-shadow: 0 26px 45px -27px rgba(23,12,8,.82); }
.order-summary .step-label { color: #e4a663; }
.order-summary h2 { color: #fff; }
.summary-product { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .85rem; align-items: center; margin: 1.15rem 0; padding: .75rem; border: 1px solid rgba(225,163,93,.35); border-radius: 1rem; background: rgba(255,255,255,.06); }
.summary-product img { width: 76px; height: 76px; border-radius: .75rem; object-fit: cover; }
.summary-product strong, .summary-product span { display: block; }
.summary-product strong { font-family: Cinzel, Georgia, serif; font-size: .92rem; line-height: 1.3; }
.summary-product span { margin-top: .28rem; color: rgba(255,255,255,.68); font-size: .69rem; line-height: 1.35; }
.summary-flavors { min-height: 2.4rem; margin: 0; padding: .15rem 0 .8rem; list-style: none; color: rgba(255,255,255,.86); font-size: .75rem; }
.summary-flavors li { display: flex; justify-content: space-between; gap: .8rem; padding: .28rem 0; }
.summary-flavors b { color: #efb575; }
.summary-empty { color: rgba(255,255,255,.57); }
.summary-pickup { margin: 0 0 .8rem; padding: .72rem; border: 1px solid rgba(225,163,93,.32); border-radius: .75rem; background: rgba(255,255,255,.06); }
.summary-pickup strong, .summary-pickup span { display: block; }
.summary-pickup strong { color: #f3bc80; font-size: .72rem; line-height: 1.35; }
.summary-pickup span { margin-top: .24rem; color: rgba(255,255,255,.76); font-size: .66rem; line-height: 1.45; }
.totals { margin: 0; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.totals dt { color: rgba(255,255,255,.67); font-size: .72rem; }
.totals dd { margin: 0; font-size: .76rem; font-weight: 800; }
.totals__grand { margin-top: .45rem; padding-top: .65rem !important; border-top: 1px solid rgba(255,255,255,.11); }
.totals__grand dt { color: #fff; font-weight: 800; }
.totals__grand dd { color: #f3bc80; font-size: 1.22rem; }
.place-order { width: 100%; min-height: 58px; margin-top: 1rem; padding: .75rem 1rem; border: 1px solid #f1bd83; border-radius: 1rem; background: linear-gradient(135deg, #d18a45, #a65b24); color: #fff; display: flex; align-items: center; justify-content: center; gap: .7rem; font-weight: 800; box-shadow: 0 12px 30px -15px #000; }
.place-order:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
.place-order:disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.2); }
.place-order.is-loading span:last-child { animation: pulse 1s infinite; }
.submit-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .72rem 0 0; color: rgba(255,255,255,.62); font-size: .64rem; line-height: 1.4; text-align: center; }
.submit-note span { color: var(--gold); }
.checkout-status { min-height: 1.4rem; margin-top: .65rem; color: #f1c390; font-size: .72rem; font-weight: 700; line-height: 1.4; text-align: center; }
.fallback-panel { margin-top: .9rem; padding: .8rem; border: 1px solid rgba(225,163,93,.42); border-radius: .8rem; background: rgba(255,255,255,.06); }
.fallback-panel p { margin: 0; color: rgba(255,255,255,.75); font-size: .69rem; line-height: 1.45; }
.fallback-panel a { display: inline-flex; min-height: 44px; align-items: center; margin-top: .35rem; color: #f3bd84; font-size: .74rem; font-weight: 800; text-underline-offset: 3px; }
.success-panel { width: min(720px, 100%); margin: 3rem auto; padding: clamp(1.5rem, 5vw, 3.4rem); border: 1px solid var(--line); border-radius: 1.7rem; background: var(--cream); text-align: center; box-shadow: 0 30px 70px -45px var(--deep); }
.success-mark { display: grid; width: 4rem; height: 4rem; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--success); color: #fff; font-size: 1.8rem; }
.success-panel h1 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 5vw, 2.8rem); line-height: 1.1; }
.success-panel > p:not(.eyebrow) { max-width: 560px; margin: 1rem auto; color: var(--muted); line-height: 1.65; }
.success-details { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 450px; margin: 1.4rem auto; }
.success-details div { padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.success-details dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.success-details dd { margin: .25rem 0 0; color: var(--ink); font-weight: 800; }
.success-pickup { max-width: 560px; margin: 0 auto 1.4rem; padding: 1rem; border: 1px solid #dba46d; border-radius: .9rem; background: #fff1df; text-align: left; }
.success-pickup strong, .success-pickup span { display: block; }
.success-pickup strong { color: var(--ink); font-size: .9rem; }
.success-pickup span { margin-top: .35rem; color: var(--brown); font-size: .78rem; line-height: 1.45; }
.success-pickup p { margin: .65rem 0 0; color: #7e451e; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.success-actions a { min-height: 48px; padding: .8rem 1rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.primary-action { background: var(--copper); color: #fff; }
.secondary-action { border: 1px solid var(--copper); color: #824716; }
.checkout-footer { padding: 1.4rem max(1rem, env(safe-area-inset-right)) max(1.4rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .7rem; text-align: center; }
.noscript-note { width: min(900px, 100%); margin: 0 auto 1rem; padding: 1rem; border: 1px solid #e6b5aa; background: #fff0ed; border-radius: .8rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .order-summary__inner { padding-bottom: max(1.35rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .checkout-header__inner { min-height: 68px; }
  .header-assurance small { display: none; }
  .checkout-main { padding-top: 1rem; }
  .checkout-intro h1 { font-size: clamp(1.85rem, 10vw, 2.85rem); }
  .progress-line { margin-bottom: 1.3rem; }
  .pack-options { grid-template-columns: repeat(2, 1fr); }
  .pack-option { min-height: 70px; }
  .selected-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-flavor { grid-template-columns: 42px minmax(0, 1fr); gap: .5rem; padding: .48rem; }
  .checkout-flavor img { width: 42px; height: 52px; }
  .checkout-flavor__copy strong { font-size: .7rem; }
  .checkout-flavor__copy small { font-size: .58rem; }
  .section-heading--flavors { display: block; }
  .flavor-meter { display: inline-flex; margin-top: .7rem; }
  .pickup-market-options { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .brand-link img { width: 150px; }
  .header-assurance strong { font-size: .7rem; }
  .progress-line { font-size: .65rem; }
  .progress-line i { margin: 0 .32rem; }
  .checkout-card { border-radius: 1.05rem; }
  .fulfillment-options { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .checkout-flavor-grid { gap: .48rem; }
  .checkout-flavor { grid-template-columns: 38px minmax(0, 1fr); }
  .checkout-flavor img { width: 38px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}