/* Dank Bowls theme, matched to dankbowlsclt.com (read from its live CSS, 2026-10-06):
   tan page #E1D2AE, cream header/sections #F6F0E1, light card #F2EDE0, ink #121212,
   green #3B7B44 for buttons and accents with #FDFBF7 labels, 8px button radius,
   Montserrat body, display headings in Mochiy Pop P One (the face their site serves
   as "DankMochiy"), both from Google Fonts.
   The shared stylesheet was written for a dark header, so its "dark surface" variables
   are pointed at the light cream surface here, with dark text on top. */
@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
    --fc-gold: #3B7B44;
    --fc-gold-hover: #326A3A;
    --fc-gold-soft: #E2EBDB;
    --fc-on-gold: #FDFBF7;
    --fc-brown: #3B7B44;
    --fc-brown-hover: #2F6437;
    --fc-charcoal: #F6F0E1;
    --fc-charcoal-2: #EAE0C6;
    --fc-cream-text: #121212;
    --fc-muted-dark: #3F3C36;
    --fc-page: #E1D2AE;
    --fc-card: #FDFBF7;
    --fc-subtle: #F6F0E1;
    --fc-ink: #121212;
    --fc-muted: #4B4740;
    --fc-line: #D2C296;
    --fc-display: "Mochiy Pop P One", "Arial Rounded MT Bold", system-ui, sans-serif;
    --fc-body: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Header: cream bar with a thin rule, like the client site. */
.fc-storefront .fc-top { border-bottom: 1px solid #D9CBA4; }
.fc-top-logo img { height: 46px; width: auto; aspect-ratio: 1226 / 300; }
@media (max-width: 520px) { .fc-top-logo img { height: 36px; } }
.fc-storefront .fc-nav ul { background: transparent; }
.fc-storefront .fc-nav a:hover { background: rgba(18, 18, 18, .06); color: #121212; }
.fc-storefront .fc-acct-btn { background: transparent; border-color: rgba(18, 18, 18, .25); }
.fc-storefront .fc-acct-btn:hover { background: rgba(18, 18, 18, .06); }

/* Hero sits on the tan page color, as on dankbowlsclt.com. */
.fc-storefront .fc-hero { background: var(--fc-page); }
.fc-storefront .fc-hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.08; }
.fc-storefront .fc-hero h1 em { color: #3B7B44; font-style: normal; }
.fc-storefront .fc-hero-photo { background: transparent; }

/* Rounded display face: mixed case and a little smaller than the condensed original. */
.fc-storefront h1, .fc-storefront h2, .fc-storefront h3, .fc-storefront .fc-display { letter-spacing: 0; }
.fc-storefront h2 { line-height: 1.12; }
.fc-storefront .fc-btn { border-radius: 8px; font-family: var(--fc-body); }
.fc-on-dark .fc-btn.is-ghost, .fc-storefront .fc-on-dark a.fc-btn.is-ghost { color: #121212; border-color: rgba(18, 18, 18, .4); }
.fc-on-dark .fc-btn.is-ghost:hover, .fc-storefront .fc-on-dark a.fc-btn.is-ghost:hover { background: rgba(18, 18, 18, .06); color: #121212; }
.fc-storefront .fc-card { background: #F2EDE0; }
.fc-storefront .fc-pill.is-gold { background: #3B7B44; color: #FDFBF7; }
.fc-dp calendar-month::part(selected) { color: #FDFBF7; }
.fc-storefront .fc-footer { border-top: 1px solid #D9CBA4; }
.fc-footer-logo { display: block; width: 240px; height: auto; margin: 0 auto 14px; }

/* Bowl cards: the second picture (illustration) fades in on hover, or on tap on touch screens. */
.db-swap { position: relative; }
.db-swap .db-v-b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: inherit; opacity: 0; transition: opacity .25s ease; }
/* Without JavaScript: hover shows the first hover photo. With it, dankbowls.js picks the one to show. */
html:not(.db-js) .db-swap:hover .db-v-b.is-first { opacity: 1; }
.db-js .db-swap .db-v-b.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .db-swap .db-v-b { transition: none; } }

/* "Order online" note: dark text on its light panel. */
.fc-storefront .fc-ordering-soon, .fc-storefront .fc-ordering-soon p, .fc-storefront .fc-ordering-soon strong { color: #121212; }

/* Why Charlotte customers choose Dank Bowls (testimonials from dankbowlsclt.com). */
.db-stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.db-story { background: #F6F0E1; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.db-story img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.db-story-body { padding: 16px 18px 20px; display: grid; gap: 8px; }
.db-story-stars { color: #3B7B44; letter-spacing: 2px; font-size: 18px; margin: 0; }
.db-story h3 { font-size: 20px; margin: 0; }
.db-story blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.db-story blockquote p { margin: 0 0 8px; }
.db-story figcaption { font-weight: 700; font-size: 14px; }

/* Auto-Restock plan cards. */
.db-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.db-plan { position: relative; background: #FDFBF7; border: 1px solid #D2C296; border-radius: 12px; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.db-plan.is-pick { border: 2px solid #3B7B44; }
.db-plan-badge { position: absolute; top: -12px; left: 20px; background: #3B7B44; color: #FDFBF7; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.db-plan h3 { font-size: 22px; margin: 0; }
.db-plan-price { margin: 0; font-size: 16px; }
.db-plan-price strong { font-size: 28px; }
.db-plan-bowls { margin: 0; font-weight: 600; }
.db-plan ul { margin: 4px 0 8px; padding-left: 18px; }
.db-plan .fc-btn { margin-top: auto; align-self: flex-start; }

/* Admin brand: the horizontal logo is wide, so in the sidebar "Admin" sits under it
   instead of beside it, and the logo never overflows the column. */
.fc-a-side .fc-a-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.fc-a-side .fc-a-brand img { max-width: 100%; height: auto; max-height: 40px; }
.fc-a-side .fc-a-brand span { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--fc-muted, #6B6560); }
.fc-a-top .fc-a-brand span, .fc-a-drawer-hd .fc-a-brand span { font-size: 16px; }

/* Mochiy Pop P One is taller than the old display face: give wrapped headings room. */
.fc-a-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.18; letter-spacing: 0; }
.fc-a-h2 { line-height: 1.2; letter-spacing: 0; }
.fc-storefront h1, .fc-storefront .fc-display { line-height: 1.15; }
.fc-storefront .fc-hero h1 { line-height: 1.12; }

/* Long email addresses in checkbox labels wrap instead of spilling out of the box. */
.fc-check span, .fc-row > span { min-width: 0; overflow-wrap: anywhere; }
/* Checkbox rows: the box stays beside its words; long wording wraps under itself, not under the box. */
label.fc-row:has(> input[type="checkbox"]), label.fc-row:has(> input[type="radio"]) { flex-wrap: nowrap; align-items: flex-start; }
label.fc-row > input[type="checkbox"], label.fc-row > input[type="radio"] { flex: 0 0 auto; margin-top: .3em; }
label.fc-row:has(> input[type="checkbox"]) > span, label.fc-row:has(> input[type="radio"]) > span { flex: 1 1 auto; }
/* Email addresses sit on their own line and only break at @ or dots, never mid-word. */
.fc-check .db-email, .db-email { display: block; font-size: .92em; overflow-wrap: normal; word-break: normal; }
.fc-check span:has(> .db-email) { overflow-wrap: normal; }

/* Admin page headers: a calmer title and clear space before the description. */
.fc-a-title { font-size: clamp(26px, 3.4vw, 36px); margin: 0; }
.fc-a-lead { margin-top: 10px; font-size: 15px; line-height: 1.55; }

/* Lists inside an edge-to-edge admin card line up with the card's heading. */
.fc-a-card.is-flush > .fc-a-list > li { padding-left: 20px; padding-right: 20px; }

/* Table sorting and search (public/js/table-tools.js). */
.fc-tt-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 4px; }
.fc-tt-sort:hover { text-decoration: underline; text-underline-offset: 3px; }
.fc-tt-sort:focus-visible { outline: 2px solid var(--fc-gold, #3B7B44); outline-offset: 2px; }
.fc-tt-arrow { opacity: .55; font-size: .95em; }
[aria-sort="ascending"] .fc-tt-arrow, [aria-sort="descending"] .fc-tt-arrow { opacity: 1; }
.fc-tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.fc-tt-q { max-width: 320px; flex: 1 1 220px; }
.fc-tt-count { font-size: 13px; color: var(--fc-muted, #4B4740); }
.fc-tt-empty { margin: 10px 0 0; font-size: 14px; color: var(--fc-muted, #4B4740); }
.fc-a-card.is-flush > .fc-tt-bar { padding: 12px 20px 0; }
.fc-a-card.is-flush > .fc-tt-empty { padding: 0 20px 14px; }

/* Drag-and-drop file fields (public/js/dropzone.js). */
.fc-dz { position: relative; border: 2px dashed var(--fc-line, #D2C296); border-radius: 14px; padding: 18px 16px; background: var(--fc-subtle, #F6F0E1); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fc-dz:hover, .fc-dz.is-dragover { border-color: var(--fc-gold, #3B7B44); background: #EEF3E6; }
.fc-dz.has-file { border-style: solid; }
.fc-dz:focus-within { outline: 3px solid var(--fc-gold, #3B7B44); outline-offset: 2px; }
.fc-dz-title { margin: 0; font-weight: 600; }
.fc-dz-pick { all: unset; cursor: pointer; color: var(--fc-gold, #3B7B44); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.fc-dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.fc-dz-picked { margin: 6px 0 0; font-size: 14px; color: var(--fc-muted, #4B4740); overflow-wrap: anywhere; }
.fc-dz-picked:empty { display: none; }
.fc-dz-picked.is-bad { color: var(--fc-bad, #B5462F); font-weight: 600; }
.fc-dz-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.fc-dz-thumbs:empty { display: none; }
.fc-dz-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--fc-line, #D2C296); }
.fc-dz-area.is-dragover { outline: 2px dashed var(--fc-gold, #3B7B44); outline-offset: 6px; border-radius: 10px; }

/* Customer profile photo and selfie widget. */
.db-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--fc-gold, #3B7B44); color: #FDFBF7; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.db-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-avatar.is-lg { width: 96px; height: 96px; font-size: 32px; }
.db-avatar-row { display: flex; align-items: center; gap: 14px; }
.db-selfie { display: grid; gap: 10px; justify-items: center; padding: 14px; border-radius: 14px; background: var(--fc-subtle, #F6F0E1); }
.db-selfie-stage { position: relative; width: min(320px, 100%); aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #121212; }
.db-selfie-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.db-selfie-stage canvas { width: 100%; height: 100%; display: block; }
.db-selfie-ring { position: absolute; inset: 10%; border: 3px dashed rgba(253, 251, 247, .85); border-radius: 50%; pointer-events: none; }

/* "Get the app" box. */
.db-getapp { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--fc-line, #D2C296); border-radius: 14px; background: var(--fc-card, #FDFBF7); text-align: left; }
.db-getapp img { border-radius: 14px; flex: 0 0 auto; }
.db-getapp-txt { min-width: 0; display: grid; gap: 8px; }
.db-getapp-txt p { margin: 0; }
.db-getapp-h { font-weight: 700; font-size: 1.05em; }
.db-getapp-how { display: grid; gap: 4px; font-size: 14px; color: var(--fc-muted, #4B4740); }
.db-getapp.is-compact .db-getapp-how { display: none; }