/* Direction: bright editorial picnic — cream paper, tomato red, navy ink, gingham */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fffaf0;
  --surface: #ffffff;
  --surface-2: #fdf0d9;
  --border: #e6d6b8;
  --border-strong: #bbb1aa;
  --ink: #1f2b47;
  --muted: #55607c;
  --accent: #cf3b27;
  --accent-hover: #b03221;
  --accent-ink: #ffffff;
  --accent-text: #b02c1a;
  --accent-strong: #be3624;
  --accent-soft: #fde4dd;
  --accent-border: #e9a496;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3ebdb;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e6d4;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dfd7;
  --danger-strong: #b91c1c;
  --chart-1: #cf3b27;
  --chart-2: #a8891a;
  --chart-3: #14743a;
  --chart-4: #1f9db0;
  --chart-5: #3b4dc6;
  --chart-6: #cd5cc3;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.025em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --x-navy: #1f2b47;
  --x-red: #d8402c;
  --x-sun: #f7c948;
  --x-leaf: #5aa469;
  --x-sky: #86c5e8;
  --x-pink: #f5aaa0;
  --x-wood: #cc8f50;
  --x-wood-deep: #9a6431;
  --x-cream: #fff6e0;
  --x-steel: #dde5ea;
  --x-berry: #8e2e4a;
  --x-glass: #d4eef7;
  --x-on-photo: #fffaf0;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #120503;
  --surface: #2a1e1c;
  --surface-2: #1e1210;
  --border: #332826;
  --border-strong: #59504f;
  --ink: #fffaf0;
  --muted: #a09891;
  --accent: #cf3b27;
  --accent-hover: #d65847;
  --accent-ink: #ffffff;
  --accent-text: #da6657;
  --accent-strong: #da6657;
  --accent-soft: #3c110b;
  --accent-border: #671d13;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #132010;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #361604;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #370a09;
  --danger-strong: #d16969;
  --chart-1: #cf3b27;
  --chart-2: #b18e02;
  --chart-3: #099a4b;
  --chart-4: #1f9db0;
  --chart-5: #5972ef;
  --chart-6: #cd5cc3;
}

/* Field Day — gingham, cutout stickers, the basket, the unfolding blanket */

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

/* ---------- gingham ---------- */
.gingham, .cut::before, .gift-tape {
  --x-gc: var(--accent);
  --x-gs: 28px;
  background-color: var(--canvas);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--x-gc) 30%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--x-gc) 30%, transparent) 50%, transparent 50%);
  background-size: var(--x-gs) var(--x-gs);
}
.gingham-on-dark { --x-gc: var(--x-on-photo); background-color: var(--x-navy); }
.gift-tape { --x-gs: 14px; height: 12px; margin: -1px -1px 14px; border-radius: 12px 12px 0 0; background-color: var(--surface-2); }

.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text);
}
.kicker::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 3px;
  --x-gs: 9px; --x-gc: var(--accent);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 50%, transparent 50%);
  background-size: 9px 9px;
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.kicker-on { color: var(--x-sun); }
.kicker-on::before { outline-color: var(--x-sun); }

.navlink { padding: .25rem 0; border-bottom: 2px solid transparent; }
.navlink:hover { border-bottom-color: var(--accent); }

.cart-count {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: var(--x-navy); color: var(--x-cream);
}
.cart-count.bump, .bk-fig.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1); } }

/* ---------- hero ---------- */
main > section:first-child { overflow: clip; }
.hero-sun {
  position: absolute; right: 0; top: -5rem; width: min(34rem, 80vw); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--x-sun) 55%, transparent);
}
@media (min-width: 768px) { .hero-sun { right: -9rem; top: -7rem; } }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.sticker .art, .cut .art, .detail-art .art, .fly .art, .ghost .art {
  filter:
    drop-shadow(2px 0 0 var(--x-cream)) drop-shadow(-2px 0 0 var(--x-cream))
    drop-shadow(0 2px 0 var(--x-cream)) drop-shadow(0 -2px 0 var(--x-cream))
    drop-shadow(0 10px 8px color-mix(in srgb, var(--x-navy) 24%, transparent));
}
.sticker { flex: 0 1 auto; width: clamp(5.5rem, 24vw, 15rem); margin-inline: -.5rem; }
.sticker-0 { transform: rotate(-5deg); width: clamp(6rem, 28vw, 18rem); }
.sticker-1 { transform: rotate(4deg) translateY(6%); }
.sticker-2 { transform: rotate(-3deg); width: clamp(5rem, 22vw, 13rem); }
.sticker-3 { transform: rotate(6deg); }
.sticker-4 { transform: rotate(-4deg); }
.sticker:nth-child(n + 4) { display: none; }
@media (min-width: 640px) { .sticker:nth-child(n + 4) { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: sticker-in .9s cubic-bezier(.2, .9, .3, 1.2) both; }
  .sticker-1 { animation-delay: .08s; } .sticker-2 { animation-delay: .16s; }
  .sticker-3 { animation-delay: .24s; } .sticker-4 { animation-delay: .32s; }
}
@keyframes sticker-in { from { translate: 0 60px; } to { translate: 0 0; } }

/* ---------- the blanket that unfolds ---------- */
.unfold {
  --a1: 0; --a2: 0; --a3: 0; --p: 1; --t: 1;
  position: relative; height: 210vh;
  background: color-mix(in srgb, var(--x-leaf) 22%, var(--canvas));
}
@media (min-width: 768px) { .unfold { height: 250vh; } }
.unfold-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 1rem 0;
}
.bl-scene {
  perspective: 1600px; flex: none; aspect-ratio: 4 / 3; min-width: 230px;
  width: min(88vw, 720px, calc((100svh - 340px) * 1.3333));
}
.bl {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: translate(calc(-25% * (1 - var(--p))), calc(-25% * (1 - var(--p))));
}
.bl-grid { position: absolute; inset: 0; display: grid; grid-template: 1fr 1fr / 1fr 1fr; transform-style: preserve-3d; }
.bl-top {
  grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; transform-style: preserve-3d;
  transform-origin: 50% 100%; transform: translateZ(6px) rotateX(calc(var(--a2) * -1deg));
}
.bl-p {
  position: relative; transform-style: preserve-3d; --x-gc: var(--x-red);
  background-color: var(--x-cream);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--x-red) 42%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--x-red) 42%, transparent) 50%, transparent 50%);
  background-size: 12.5% 16.6667%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x-navy) 22%, transparent), 0 6px 18px color-mix(in srgb, var(--x-navy) 18%, transparent);
}
.bl-p::after { content: ""; position: absolute; inset: 0; background: var(--x-navy); opacity: calc(var(--sh, 0) * .28); pointer-events: none; }
.bl-bl { --sh: calc(var(--a1) / 180); transform-origin: 100% 50%; transform: translateZ(3px) rotateY(calc(var(--a1) * 1deg)); }
.bl-tl { --sh: calc(var(--a3) / 180); transform-origin: 100% 50%; transform: translateZ(3px) rotateY(calc(var(--a3) * 1deg)); }
.bl-items { position: absolute; inset: 0; transform: translateZ(24px); pointer-events: none; }
.bl-items span { position: absolute; transform: rotate(var(--r)) scale(var(--t)); transition: transform .12s linear; }
.bl-items .art { filter: drop-shadow(0 8px 6px color-mix(in srgb, var(--x-navy) 28%, transparent)); }
html.reduced-motion .unfold { height: auto; }
html.reduced-motion .unfold-stage { position: static; height: auto; padding: 4rem 0; }

/* ---------- filters + product grid ---------- */
.filters { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 1rem; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.chip { white-space: nowrap; cursor: pointer; flex: none; }
.chip[aria-pressed="true"] { background: var(--x-navy); border-color: var(--x-navy); color: var(--x-cream); }

.pcard {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-card);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.pcard:hover { transform: translateY(-4px); border-color: var(--x-navy); box-shadow: 6px 6px 0 color-mix(in srgb, var(--x-navy) 85%, transparent); }
.pcard[hidden] { display: none; }
.pname { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.pname:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cut {
  position: relative; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; padding: 13%;
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--tint) 80%, var(--surface)) 0 54%, color-mix(in srgb, var(--tint) 28%, var(--surface)) 54.5%);
}
.cut::before {
  content: ""; position: absolute; left: -18px; top: 12px; width: 84px; height: 24px; z-index: 1;
  transform: rotate(-36deg); --x-gs: 12px; --x-gc: var(--x-navy);
  background-color: var(--x-cream); opacity: .9; box-shadow: 0 1px 3px color-mix(in srgb, var(--x-navy) 25%, transparent);
}
.cut .art { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); position: relative; }
.pcard:hover .cut .art { transform: rotate(-5deg) scale(1.07); }
.cut.is-lifted .art { opacity: .3; }
.ptag {
  position: absolute; top: .6rem; right: .6rem; z-index: 2; padding: .15rem .6rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; background: var(--x-navy); color: var(--x-cream);
}
.grab {
  position: absolute; left: .6rem; bottom: .6rem; padding: .15rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--x-navy); opacity: 0; transform: translateY(6px); transition: .2s;
}
.pcard:hover .grab { opacity: 1; transform: none; }
@media (hover: none) { .grab { display: none; } }

body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
.ghost { position: fixed; left: 0; top: 0; width: 96px; height: 96px; z-index: 95; pointer-events: none; touch-action: none; will-change: transform; }
.fly { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; will-change: transform; }

/* ---------- the basket ---------- */
.bk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 .5rem calc(.5rem + env(safe-area-inset-bottom));
  transform: translateY(135%); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.bk.on { transform: none; }
.bk-card {
  display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 0 .75rem;
  background: var(--surface); border: 2px solid var(--x-navy); border-radius: var(--radius-card);
  box-shadow: 0 -6px 24px color-mix(in srgb, var(--x-navy) 22%, transparent);
  padding: .5rem .9rem; max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  transition: background .2s, transform .2s;
}
.bk-top { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bk-fig { grid-column: 1; grid-row: 1; position: relative; }
.bk-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.bk-body { grid-column: 1 / -1; grid-row: 2; display: none; padding-top: .5rem; }
.bk[data-open="true"] .bk-card { grid-template-columns: 1fr; }
.bk[data-open="true"] .bk-top { grid-column: 1; }
.bk[data-open="true"] .bk-fig { grid-column: 1; grid-row: 2; width: min(240px, 70%); margin: .25rem auto; }
.bk[data-open="true"] .bk-body { display: block; grid-row: 3; }
.bk-hint {
  position: absolute; left: 50%; bottom: 2%; translate: -50% 0; padding: .1rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; background: var(--accent); color: var(--x-cream); opacity: 0; transition: opacity .2s; white-space: nowrap;
}
body.dragging .bk-hint { opacity: 1; }
body.dragging .bk-card { outline: 3px dashed var(--accent); outline-offset: 4px; }
.bk-card.over { background: var(--accent-soft); transform: scale(1.025); }

@media (min-width: 1024px) {
  .bk { position: sticky; top: 1.25rem; transform: none; padding: 0; z-index: 5; transition: none; }
  .bk-card { display: block; padding: 1.1rem; max-height: calc(100dvh - 2.5rem); }
  .bk-top { margin-bottom: .25rem; }
  .bk-toggle { display: none; }
  .bk .bk-body, .bk[data-open] .bk-body { display: block; }
  .bk .bk-fig, .bk[data-open] .bk-fig { width: auto; max-width: 280px; margin: .25rem auto; }
}

.bk-slots { transition: transform .6s cubic-bezier(.5, 0, .3, 1); }
.bk[data-view="wrap"] .bk-slots { transform: translateY(90px); }
.slot-pop { animation: slot-pop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes slot-pop { from { transform: translateY(-60px) scale(.5) rotate(-20deg); } to { transform: none; } }
.lid { transform-box: fill-box; transition: transform .75s cubic-bezier(.3, 1.4, .5, 1); }
.lid-l { transform-origin: 0% 50%; transform: rotate(-112deg); }
.lid-r { transform-origin: 100% 50%; transform: rotate(112deg); }
.bk[data-view="wrap"] .lid { transform: none; }
.bk-ribbon { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.02); opacity: 0; transition: transform .5s .5s cubic-bezier(.3, 1.3, .5, 1), opacity .2s .5s; }
.bk[data-view="wrap"] .bk-ribbon { transform: none; opacity: 1; }

.bk-meter { display: flex; gap: 4px; margin: .25rem 0 .75rem; }
.bk-meter i { flex: 1; height: 8px; border-radius: 99px; background: var(--border); transition: background .3s, transform .3s; }
.bk-meter i.on { background: var(--accent); transform: scaleY(1.25); }
.bk-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bk-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.bk-row .art { width: 40px; height: 40px; }
.bk-row b { display: block; font-size: .85rem; line-height: 1.25; }
.bk-row small, .cl small { color: var(--muted); font-size: .78rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); }
.qty button { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 999px; cursor: pointer; }
.qty button:hover { background: var(--surface-2); }
.qty button:active { transform: scale(.9); }
.qty span { min-width: 1.2rem; text-align: center; font-size: .85rem; font-weight: 700; }
.bk-note { font-size: .82rem; color: var(--muted); margin-top: .75rem; }
.bk-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: .75rem; padding-top: .75rem; border-top: 1.5px dashed var(--border); font-weight: 700; }

.gift-card { position: relative; background: var(--surface-2); border: 1.5px dashed var(--x-navy); border-radius: 16px; padding: 0 1rem 1rem; transform-origin: 50% 0; }
.bk-wrap { perspective: 800px; }
.bk-wrap.unfold-in .gift-card { animation: gift-unfold .85s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes gift-unfold { from { transform: rotateX(-86deg) scaleY(.5); } to { transform: none; } }
.gift-rows { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; }
.gift-rows li { display: grid; grid-template-columns: 32px 1fr auto; gap: .5rem; align-items: center; font-size: .9rem; }
.gift-rows .art { width: 32px; height: 32px; }
.bk-wrap.unfold-in .gift-rows li { animation: row-in .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.4s + var(--i) * 70ms); }
@keyframes row-in { from { translate: -14px 0; } to { translate: 0 0; } }
.gift-sum { margin: 0 0 .75rem; padding-top: .6rem; border-top: 1.5px dashed var(--border); display: grid; gap: .25rem; font-size: .9rem; }
.gift-sum div { display: flex; justify-content: space-between; }
.gift-sum dd { margin: 0; }
.gift-sum .save { color: var(--success, var(--accent-text)); font-weight: 700; }
.gift-sum .tot { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin-top: .25rem; }

/* ---------- dark band ---------- */
.band-dark { background: var(--x-navy); color: var(--x-on-photo); }
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-steps li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid color-mix(in srgb, var(--x-on-photo) 22%, transparent); }
.how-steps li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--x-on-photo) 22%, transparent); }
.how-steps li > span {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--x-sun); color: var(--x-navy); font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
}

/* ---------- dialogs ---------- */
dialog.modal::backdrop { background: color-mix(in srgb, var(--x-navy) 55%, transparent); }
dialog#detail {
  width: min(880px, 94vw); max-height: 92dvh; padding: 0; overflow: auto; border: 2px solid var(--x-navy);
  border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
}
dialog#detail[open] { display: grid; grid-template-columns: 1fr; animation: pop-in .35s cubic-bezier(.2, 1, .3, 1.1); }
@media (min-width: 720px) { dialog#detail[open] { grid-template-columns: 1fr 1fr; } }
@keyframes pop-in { from { transform: translateY(24px) scale(.97); } to { transform: none; } }
.detail-art {
  position: relative; display: grid; place-items: center; padding: 14%; min-height: 260px;
  background: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--tint) 80%, var(--surface)) 0 56%, color-mix(in srgb, var(--tint) 28%, var(--surface)) 56.5%);
}
.detail-art .art { width: min(100%, 360px); }
.detail-x { position: absolute; right: .6rem; top: .6rem; z-index: 3; background: var(--surface); }
.detail-dl { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.detail-dl li { display: flex; gap: .6rem; font-size: .95rem; }
.detail-dl .icon { color: var(--accent-text); flex: none; margin-top: .2rem; }

dialog#cart {
  margin: 0 0 0 auto; padding: 0; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); max-width: 100vw;
  border: 0; border-left: 2px solid var(--x-navy); border-radius: var(--radius-card) 0 0 var(--radius-card);
  background: var(--surface); color: var(--ink); overflow: hidden;
}
dialog#cart[open] { display: flex; flex-direction: column; animation: slide-in .38s cubic-bezier(.2, .9, .3, 1); }
@keyframes slide-in { from { transform: translateX(48px); } to { transform: none; } }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1.5px solid var(--border); }
.cart-body { flex: 1; overflow: auto; padding: 0 1.25rem; }
.cart-foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--border); background: var(--surface-2); }
.cl { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cl .art { width: 56px; height: 56px; }
.cl b { font-size: .95rem; line-height: 1.3; display: block; }
.cl-tools { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.cl-rm { font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; background: none; border: 0; }
.cl-rm:hover { color: var(--accent-text); }
.ship { height: 10px; border-radius: 99px; background: var(--border); overflow: hidden; margin: .4rem 0 .75rem; }
.ship i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: 99px; transition: width .5s cubic-bezier(.2, .9, .3, 1); }
.tot-row { display: flex; justify-content: space-between; font-size: .95rem; padding: .15rem 0; }
.tot-row.big { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin-top: .4rem; }

/* ---------- toasts ---------- */
#toasts {
  position: fixed; inset: auto auto 1.5rem 50%; transform: translateX(-50%); margin: 0; padding: 0; border: 0;
  background: transparent; overflow: visible; width: max-content; max-width: 92vw; color: inherit;
}
@media (max-width: 1023px) { #toasts { bottom: 8rem; } }
.fd-toast {
  margin-top: .5rem; padding: .65rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--x-navy); color: var(--x-cream); text-align: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--x-navy) 30%, transparent); animation: toast-in .35s cubic-bezier(.2, 1, .3, 1.2);
}
@keyframes toast-in { from { transform: translateY(14px); } to { transform: none; } }

/* ---------- reduced motion ---------- */
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}