/* 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; }
.db-swap:hover .db-v-b, .db-swap.is-alt .db-v-b { 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; }