@import url('../../css/menu-drilldown.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   COFFEE HOUSE (2026-08-09) — specialty coffee, brunch, bakeries.
   Warm paper, hairline borders, no shadows anywhere. Quiet and
   editorial: wide category strips, small caps, generous whitespace.
   ============================================================ */

:root {
    --ym-primary: #8a5a30;
    --ym-primary-dark: #6d4523;
    --ym-ink: #2e2419;
    --ym-muted: #8a7b6a;
    --ym-bg: #f4efe6;
    --ym-card: #fbf8f2;
    --ym-border: #e0d6c6;
    --ym-radius: 6px;
    --ym-radius-sm: 4px;
    --ym-shadow: none;
    --ym-shadow-lg: 0 -10px 34px rgba(46, 36, 25, .18);

    --cg-font-body: 'Inter', -apple-system, sans-serif;
    --cg-font-display: 'Fraunces', Georgia, serif;

    --cg-hero-min: 220px;
    --cg-hero-pad: 22px 20px 24px;
    --cg-scrim: linear-gradient(to bottom, rgba(46, 36, 25, .10) 0%, rgba(46, 36, 25, .62) 100%);
    --cg-hero-name-size: 30px;
    --cg-hero-name-weight: 600;
    --cg-hero-name-spacing: -.01em;
    --cg-logo-size: 50px;
    --cg-logo-radius: 4px;

    --cg-gap: 14px;
    --cg-cat-ratio: 3 / 2;
    --cg-cat-radius: 4px;
    --cg-cat-name-size: 12px;
    --cg-cat-name-weight: 700;
    --cg-cat-name-transform: uppercase;
    --cg-cat-name-spacing: .12em;

    --cg-card-radius: 4px;
    --cg-card-pad: 14px 0;
    --cg-card-gap: 0;
    --cg-thumb: 76px;
    --cg-thumb-radius: 4px;
    --cg-name-size: 17px;
    --cg-name-weight: 600;
    --cg-name-spacing: -.01em;
    --cg-price-size: 14.5px;

    --cg-pill-radius: 4px;
    --cg-pill-bg: transparent;
    --cg-pill-active-bg: var(--ym-ink);
    --cg-pill-active-ink: var(--ym-bg);
    --cg-search-radius: 4px;
    --cg-chip-radius: 4px;
    --cg-badge-radius: 3px;
    --cg-section-title-size: 20px;
    --cg-section-title-weight: 600;
}

/* Rows sit straight on the paper, divided by a hairline — no cards. */
.ym-card { background: none; border-bottom: 1px solid var(--ym-border); }
.ym-list > .ym-card:last-child { border-bottom: none; }
.ym-card-desc { font-size: 12.5px; }
.ym-search { background: transparent; }
.ym-cg-back, .ym-icon-btn.ym-lang-toggle { background: transparent; border: 1px solid var(--ym-border); border-radius: 4px; }
.ym-cg-title, .ym-cg-crumb { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.ym-cg-cat-count { background: rgba(46, 36, 25, .78); border-radius: 3px; font-family: var(--cg-font-body); }
.ym-cg-cat-img { border: 1px solid var(--ym-border); }
.ym-badge { background: rgba(138, 90, 48, .10); color: var(--ym-primary); }
.ym-sticky-head.is-stuck { box-shadow: 0 1px 0 var(--ym-border); }
.ym-sheet-title { font-size: 22px; font-weight: 600; }
.ym-allergen-chip { background: rgba(138, 90, 48, .08); }