/* catalog: Today, Gift add-ons, Capacity, Holidays. Cards sit on the admin's grey like Polaris
   sections; one green, one blush, lots of air. Prefix fpc- keeps clear of core styles. */
:root {
  --fpc-green: #1f3d2b;
  --fpc-green-2: #2f6b4a;
  --fpc-blush: #e8a0a8;
  --fpc-rose: #c8475e;
  --fpc-amber: #d08a1c;
  --fpc-line: rgba(0, 0, 0, .08);
  --fpc-muted: #616a63;
  --fpc-soft: #f6f2ec;
  --fpc-card: #fff;
  --fpc-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .08);
}
.fpc-quiet { color: var(--fpc-muted); font-size: 13px; line-height: 1.45; margin: 4px 0 0; }
.fpc-card, .fpc-hero, .fpc-cta, .fpc-mode { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }

/* ---------- hero ---------- */
.fpc-hero {
  display: flex; align-items: center; gap: 24px; padding: 24px 26px; margin-bottom: 16px; border-radius: 16px;
  background: radial-gradient(120% 140% at 0% 0%, #fdf3f1 0%, #f7efe6 45%, #eef4ef 100%); box-shadow: var(--fpc-shadow);
}
.fpc-hero-text { flex: 1; min-width: 0; }
.fpc-hero h2 { margin: 2px 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: #1d221f; }
.fpc-hero p { margin: 0 0 10px; color: #4a524d; font-size: 14px; line-height: 1.55; max-width: 560px; }
.fpc-eyebrow { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--fpc-green-2); }
.fpc-hero-img { width: 150px; height: 150px; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 24px rgba(80, 40, 40, .15); flex: 0 0 auto; }
.fpc-ring {
  --p: 0; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--fpc-green-2) calc(var(--p) * 1%), rgba(31, 61, 43, .1) 0);
}
.fpc-ring > span { width: 84px; height: 84px; border-radius: 50%; background: #fffdfa; display: grid; place-items: center; align-content: center; text-align: center; }
.fpc-ring b { font-size: 22px; letter-spacing: -.02em; display: block; }
.fpc-ring small { font-size: 11px; color: var(--fpc-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- tiles ---------- */
.fpc-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fpc-tile {
  appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: 14px; background: var(--fpc-card); box-shadow: var(--fpc-shadow);
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.fpc-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #c9d1cb; }
.fpc-tile.is-make::before { background: var(--fpc-blush); }
.fpc-tile.is-ready::before { background: #7fb38f; }
.fpc-tile.is-out::before { background: #6c9bd2; }
.fpc-tile.is-done::before { background: var(--fpc-green-2); }
.fpc-tile.is-money::before { background: #d9b46a; }
.fpc-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.fpc-tile:focus-visible { outline: 2px solid var(--fpc-green-2); outline-offset: 2px; }
.fpc-tile-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fpc-tile-label { font-size: 12px; color: var(--fpc-muted); font-weight: 550; }

/* ---------- cards ---------- */
.fpc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.fpc-grid > .fpc-card { margin: 0; }
.fpc-card { background: var(--fpc-card); border-radius: 16px; box-shadow: var(--fpc-shadow); padding: 18px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.fpc-card > s-button { align-self: flex-start; }
.fpc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fpc-card-head h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.fpc-card-head .fpc-quiet { margin: 0; }
.fpc-big { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fpc-big small { font-size: 14px; font-weight: 500; color: var(--fpc-muted); letter-spacing: 0; }

/* meter */
.fpc-meter { height: 8px; border-radius: 99px; background: rgba(31, 61, 43, .08); overflow: hidden; }
.fpc-meter.is-big { height: 12px; }
.fpc-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8f69, var(--fpc-green-2)); transition: width .5s ease; }
.fpc-meter.is-near span { background: linear-gradient(90deg, #e6b25a, var(--fpc-amber)); }
.fpc-meter.is-full span { background: linear-gradient(90deg, #e07b8c, var(--fpc-rose)); }
.fpc-meter.is-open span { background: rgba(47, 107, 74, .35); }

.fpc-windows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.fpc-windows li { display: grid; grid-template-columns: 92px 1fr 48px 34px; gap: 10px; align-items: center; font-size: 13px; }
.fpc-windows b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.fpc-windows em { font-style: normal; font-size: 11px; font-weight: 650; color: var(--fpc-rose); text-transform: uppercase; letter-spacing: .04em; }

/* holiday card on Today */
.fpc-holiday-card { background: linear-gradient(160deg, #fff 0%, #fff7f5 60%, #fdeeee 100%); position: relative; overflow: hidden; }
.fpc-holiday-emoji { position: absolute; right: 14px; top: 8px; font-size: 64px; opacity: .9; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.fpc-countdown { display: flex; align-items: baseline; gap: 10px; padding-right: 80px; }
.fpc-countdown strong { font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--fpc-rose); font-variant-numeric: tabular-nums; }
.fpc-countdown span { font-size: 15px; font-weight: 600; }
.fpc-holiday-card s-badge { align-self: flex-start; }
.fpc-then { margin: auto 0 0; font-size: 13px; color: #4a524d; padding-top: 8px; border-top: 1px dashed var(--fpc-line); }
.fpc-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fpc-names span { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--fpc-soft); color: #4a524d; }

/* attention */
.fpc-list { list-style: none; margin: 0; padding: 0; }
.fpc-attn { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fpc-line); font-size: 14px; }
.fpc-attn:first-child { border-top: 0; }
.fpc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fpc-blush); box-shadow: 0 0 0 4px rgba(232, 160, 168, .2); }
.fpc-attn.is-warn .fpc-dot { background: var(--fpc-amber); box-shadow: 0 0 0 4px rgba(208, 138, 28, .15); }
.fpc-clear { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #eef6f0; color: var(--fpc-green); font-weight: 550; font-size: 14px; }
.fpc-clear span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fpc-green-2); color: #fff; font-size: 12px; }

/* tomorrow list */
.fpc-mini { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; }
.fpc-mini li { display: flex; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--fpc-line); }
.fpc-mini li span { margin-left: auto; color: var(--fpc-muted); }

/* week chart */
.fpc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; padding-top: 6px; }
.fpc-week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.fpc-week-bar { position: relative; width: 100%; max-width: 34px; height: 110px; border-radius: 10px; background: rgba(31, 61, 43, .06); display: flex; align-items: flex-end; overflow: hidden; }
.fpc-week-bar span { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #6aa883, var(--fpc-green-2)); }
.fpc-week-bar i { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(200, 71, 94, .55); }
.fpc-week-day.is-full .fpc-week-bar span { background: linear-gradient(180deg, #ec97a5, var(--fpc-rose)); }
.fpc-week-day b { font-variant-numeric: tabular-nums; }
.fpc-week-day small { color: var(--fpc-muted); }
.fpc-week-day.is-today small { color: var(--fpc-green); font-weight: 650; }

/* quick links */
.fpc-quicks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.fpc-quick { appearance: none; border: 1px solid var(--fpc-line); background: rgba(255, 255, 255, .7); border-radius: 12px; padding: 12px 8px; font: 550 13px/1.3 inherit; color: #1d221f; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; }
.fpc-quick span { font-size: 22px; }
.fpc-quick:hover { background: #fff; }
.fpc-quick:focus-visible { outline: 2px solid var(--fpc-green-2); outline-offset: 2px; }

/* ---------- gift add-ons ---------- */
.fpc-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.fpc-product { position: relative; background: var(--fpc-card); border-radius: 16px; box-shadow: var(--fpc-shadow); overflow: hidden; display: flex; flex-direction: column; transition: opacity .2s ease, filter .2s ease; }
.fpc-product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.fpc-product.is-off img, .fpc-product.is-off .fpc-product-body { opacity: .45; filter: grayscale(.6); }
.fpc-product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fpc-product h3 { margin: 0; font-size: 15px; font-weight: 650; }
.fpc-product .fpc-quiet { margin: 0; }
.fpc-include { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-size: 12px; font-weight: 600; cursor: pointer; }
.fpc-include input { accent-color: var(--fpc-green-2); width: 16px; height: 16px; margin: 0; }
.fpc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fpc-chips span { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--fpc-soft); color: #4a524d; }
.fpc-chips span.is-accent { background: #fdecef; color: #9c3348; }
.fpc-prices { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.fpc-price { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--fpc-muted); flex: 1 1 90px; }
.fpc-money { position: relative; display: block; }
.fpc-money i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--fpc-muted); font-size: 14px; }
.fpc-money .fpc-input { padding-left: 22px; }
.fpc-cta { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: var(--fpc-shadow); margin-bottom: 16px; position: sticky; bottom: 10px; z-index: 2; }
.fpc-cta > div { flex: 1; }
.fpc-cta strong { font-size: 15px; }
.fpc-done-hero { background: radial-gradient(120% 140% at 0% 0%, #eef6f0 0%, #f4f6ee 50%, #fdf3f1 100%); }
.fpc-next-step { border: 1.5px solid rgba(47, 107, 74, .35); }
.fpc-steps-list { margin: 0; padding-left: 20px; line-height: 1.6; font-size: 14px; }
.fpc-steps-list li { margin-bottom: 6px; }
.fpc-made { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fpc-made-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px 6px; border-radius: 14px; background: #fff; box-shadow: var(--fpc-shadow); color: inherit; text-decoration: none; font-size: 12px; font-weight: 550; }
.fpc-made-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.fpc-made-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.fpc-own { list-style: none; margin: 0; padding: 0; }
.fpc-own li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fpc-line); font-size: 14px; }
.fpc-own li:first-child { border-top: 0; }
.fpc-own li > div { flex: 1; }
.fpc-own img, .fpc-own-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--fpc-soft); display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }

/* ---------- forms ---------- */
.fpc-input {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: #1d221f;
  background: #fff; border: 1px solid #c9cccf; border-radius: 8px; transition: border-color .15s, box-shadow .15s;
}
.fpc-input:focus { outline: none; border-color: var(--fpc-green-2); box-shadow: 0 0 0 3px rgba(47, 107, 74, .15); }
.fpc-input-big { min-height: 48px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.fpc-input::placeholder { color: #9aa19c; font-weight: 400; font-size: 14px; }
textarea.fpc-input { resize: vertical; line-height: 1.45; }
.fpc-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.fpc-row-2 { grid-template-columns: 1fr 1fr auto; }
.fpc-limits { grid-template-columns: 1fr 1fr; }
.fpc-row label, .fpc-wide { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 550; color: #4a524d; }
.fpc-wide { margin: 8px 0; }
.fpc-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0; }
.fpc-check input { accent-color: var(--fpc-green-2); width: 16px; height: 16px; }

/* capacity calendar */
.fpc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fpc-cal-day { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; border: 1px solid var(--fpc-line); background: #fcfbf9; min-width: 0; }
.fpc-cal-day small { font-size: 11px; color: var(--fpc-muted); text-transform: uppercase; letter-spacing: .05em; }
.fpc-cal-day strong { font-size: 20px; line-height: 1.1; }
.fpc-cal-count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fpc-cal-count i { font-style: normal; color: var(--fpc-muted); font-weight: 500; }
.fpc-cal-day em { font-style: normal; font-size: 11px; font-weight: 650; color: var(--fpc-rose); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpc-cal-day em.is-part { color: var(--fpc-amber); }
.fpc-cal-day em.is-special { color: var(--fpc-green-2); }
.fpc-cal-day.is-full { background: #fdf1f3; border-color: rgba(200, 71, 94, .3); }
.fpc-cal-day.is-today { border-color: var(--fpc-green-2); box-shadow: inset 0 0 0 1px var(--fpc-green-2); }

/* ---------- holidays ---------- */
.fpc-holiday-hero { background: radial-gradient(120% 160% at 0% 0%, #fff4e8 0%, #fbeee9 50%, #f3f1ea 100%); }
.fpc-holiday-hero.is-peak { background: radial-gradient(120% 160% at 0% 0%, #ffe9ee 0%, #fbeef0 55%, #f6efe9 100%); }
.fpc-big-emoji { font-size: 72px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .12)); }
.fpc-holidays { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.fpc-hcard { background: #fff; border-radius: 16px; box-shadow: var(--fpc-shadow); overflow: hidden; }
.fpc-hcard summary { list-style: none; display: grid; grid-template-columns: 44px 1fr auto 52px; gap: 14px; align-items: center; padding: 14px 18px; cursor: pointer; }
.fpc-hcard summary::-webkit-details-marker { display: none; }
.fpc-hcard summary:focus-visible { outline: 2px solid var(--fpc-green-2); outline-offset: -2px; border-radius: 16px; }
.fpc-hcard-emoji { font-size: 30px; text-align: center; }
.fpc-hcard-title { display: flex; flex-direction: column; }
.fpc-hcard-title strong { font-size: 15px; }
.fpc-hcard-title .fpc-quiet { margin: 0; }
.fpc-hcard-days { font-size: 13px; color: var(--fpc-muted); white-space: nowrap; }
.fpc-hcard-days b { font-size: 20px; color: #1d221f; letter-spacing: -.02em; }
.fpc-hcard.is-peak .fpc-hcard-days b { color: var(--fpc-rose); }
.fpc-hcard-progress {
  --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650;
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--fpc-green-2) calc(var(--p) * 1%), rgba(31, 61, 43, .1) 0);
}
.fpc-hcard-body { padding: 0 18px 16px 76px; }
.fpc-tip { margin: 0 0 8px; font-size: 13px; color: #4a524d; background: var(--fpc-soft); padding: 8px 12px; border-radius: 10px; }
.fpc-checklist { list-style: none; margin: 0 0 10px; padding: 0; }
.fpc-checklist li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--fpc-line); }
.fpc-checklist li:first-child { border-top: 0; }
.fpc-checklist label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.fpc-checklist label > span { display: flex; flex-direction: column; }
.fpc-checklist label .fpc-quiet { margin: 1px 0 0; }
.fpc-checklist input { appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.5px solid #b9c0bb; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.fpc-checklist input::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; opacity: 0; }
.fpc-checklist input:checked { background: var(--fpc-green-2); border-color: var(--fpc-green-2); }
.fpc-checklist input:checked::after { opacity: 1; }
.fpc-checklist input:focus-visible { outline: 2px solid var(--fpc-green-2); outline-offset: 2px; }
.fpc-checklist li.is-done strong { color: var(--fpc-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.fpc-due { font-size: 12px; color: var(--fpc-muted); white-space: nowrap; }
.fpc-checklist li.is-late .fpc-due { color: var(--fpc-rose); font-weight: 600; }
.fpc-suggest { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #f1f7f3; border: 1px dashed rgba(47, 107, 74, .4); }
.fpc-suggest > div { flex: 1; }
.fpc-mode-form { padding: 14px; border-radius: 14px; background: #f8f6f2; border: 1px solid var(--fpc-line); }
.fpc-mode-form h4 { margin: 0; font-size: 15px; }
.fpc-mode-form .fpc-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.fpc-banner-preview { margin: 6px 0 10px; padding: 10px 14px; border-radius: 10px; background: #1f3d2b; color: #fff; font-size: 13px; text-align: center; letter-spacing: .01em; min-height: 18px; }
.fpc-mode { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 16px; border-radius: 16px; background: #fff; box-shadow: var(--fpc-shadow); border-left: 4px solid var(--fpc-amber); }
.fpc-mode.is-on { border-left-color: var(--fpc-green-2); }
.fpc-mode > div:nth-child(2) { flex: 1; }
.fpc-mode .fpc-banner-preview { margin: 8px 0 0; text-align: left; display: inline-block; }
.fpc-mode-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fpc-amber); flex: 0 0 auto; }
.fpc-mode.is-on .fpc-mode-dot { background: #3aa76d; box-shadow: 0 0 0 0 rgba(58, 167, 109, .6); animation: fpc-pulse 2s infinite; }
@keyframes fpc-pulse { 70% { box-shadow: 0 0 0 10px rgba(58, 167, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 167, 109, 0); } }

@media (max-width: 860px) {
  .fpc-tiles, .fpc-quicks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fpc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpc-made { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fpc-row, .fpc-mode-form .fpc-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fpc-grid { grid-template-columns: minmax(0, 1fr); }
  .fpc-hero { flex-direction: column; align-items: flex-start; }
  .fpc-hero-img { width: 100%; height: auto; }
  .fpc-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fpc-products { grid-template-columns: minmax(0, 1fr); }
  .fpc-hcard-body { padding-left: 18px; }
  .fpc-windows li { grid-template-columns: 80px 1fr 44px 30px; }
}
@media (prefers-reduced-motion: reduce) { .fpc-mode.is-on .fpc-mode-dot { animation: none; } .fpc-tile, .fpc-meter span { transition: none; } }