@import url('../../css/menu-drilldown.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,400;1,500&family=Karla:wght@400;500;600;700&display=swap');

/* ============================================================
   TRATTORIA (2026-08-09) — family Italian, pizzeria, meyhane.
   Warm cream, terracotta, italic serif. Framed photos and centred
   category names give it the hand-lettered-board feel.
   ============================================================ */

:root {
    --ym-primary: #b8482c;
    --ym-primary-dark: #94371f;
    --ym-ink: #33291f;
    --ym-muted: #8b7a68;
    --ym-bg: #fbf3e4;
    --ym-card: #fffaf1;
    --ym-border: #e6d6bd;
    --ym-radius: 10px;
    --ym-radius-sm: 8px;
    --ym-shadow: 0 1px 2px rgba(51, 41, 31, .05), 0 4px 12px rgba(51, 41, 31, .06);
    --ym-shadow-lg: 0 -10px 34px rgba(51, 41, 31, .20);

    --cg-font-body: 'Karla', -apple-system, sans-serif;
    --cg-font-display: 'Lora', Georgia, serif;

    --cg-hero-min: 226px;
    --cg-hero-pad: 22px 18px 24px;
    --cg-scrim: linear-gradient(to bottom, rgba(51, 41, 31, .12) 0%, rgba(51, 41, 31, .66) 100%);
    --cg-hero-name-size: 32px;
    --cg-hero-name-weight: 600;
    --cg-hero-name-spacing: 0;
    --cg-logo-size: 54px;
    --cg-logo-radius: 8px;

    --cg-gap: 13px;
    --cg-cat-ratio: 4 / 3;
    --cg-cat-radius: 8px;
    --cg-cat-name-size: 17px;
    --cg-cat-name-weight: 600;
    --cg-cat-name-align: center;

    --cg-card-radius: 10px;
    --cg-card-pad: 12px;
    --cg-card-gap: 10px;
    --cg-thumb: 86px;
    --cg-thumb-radius: 8px;
    --cg-name-size: 18px;
    --cg-name-weight: 600;
    --cg-name-spacing: 0;
    --cg-price-size: 16px;
    --cg-price-color: var(--ym-primary);

    --cg-pill-radius: 8px;
    --cg-pill-active-bg: var(--ym-primary);
    --cg-pill-active-ink: #fffaf1;
    --cg-search-radius: 8px;
    --cg-chip-radius: 8px;
    --cg-badge-radius: 4px;
    --cg-section-title-size: 23px;
    --cg-section-title-weight: 600;
}

/* Photos are framed like prints on a taverna wall. */
.ym-cg-cat-img { border: 3px solid var(--ym-card); }
.ym-card-img { border: 2px solid var(--ym-bg); }
.ym-card-name { line-height: 1.25; }
.ym-card-desc { font-style: italic; font-size: 12.5px; }
.ym-hero-tagline { font-style: italic; }
.ym-cg-title, .ym-cg-crumb { font-family: var(--cg-font-display); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ym-cg-cat-count { background: rgba(184, 72, 44, .92); font-family: var(--cg-font-body); }
.ym-cat-pill { font-family: var(--cg-font-body); }
.ym-badge { background: rgba(184, 72, 44, .10); color: var(--ym-primary); }
.ym-lang-menu a.active { background: rgba(184, 72, 44, .10); }
.ym-sheet-title { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.ym-allergen-chip { background: rgba(184, 72, 44, .08); }