/* ============================================================================
   Lunchen – publika sajten. Designtokens från docs/design-handoff/README.md.
   Ingen ramverks-CSS här. Mobil först, desktop från 900px.
   ============================================================================ */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/Public/Static/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/Public/Static/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/Public/Static/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/Public/Static/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --bg: #FBF7F0; --bg2: #F4ECDF; --footer: #F1EADD; --card: #FFFFFF;
    --ink: #211D17; --ink2: #3A352D; --ink3: #4A4438; --muted: #6B6356; --muted2: #8A8174; --muted3: #A39A8A;
    --line: #EAE1D2; --line2: #E6DDCD;
    --accent: #D8593B; --accent-hover: #B5442A;
    --open: #3E8F5B; --open-bg: #EAF3EC; --open-line: #CFE6D5; --open-text: #2F6B45;
    --ad-bg: #FBF0CB; --ad-line: #EEDDA0; --ad-text: #99780F;
    --premium: #F3D24B;
    --head: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --r-card: 16px; --r-btn: 12px; --r-pill: 22px;
    --shadow-hover: 0 12px 26px -14px rgba(33,29,23,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 33px; }
h2 { font-size: 22px; margin-top: 0; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 1em; }
small { font-size: .85em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
.muted { color: var(--muted2); }
.small { font-size: .85rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 100; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--line2); border-radius: var(--r-btn); background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; line-height: 1.2; }
.btn:hover { background: var(--bg2); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); margin-bottom: 8px; }
.lead { font-size: 17px; color: var(--ink3); max-width: 640px; }

/* Header / footer */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 12px; height: 60px; }
.logo { font-family: var(--head); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -.03em; }
.logo span { color: var(--accent); }
.header-search { flex: 1; display: flex; max-width: 420px; }
.header-search input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line2); border-radius: var(--r-pill) 0 0 var(--r-pill); background: #fff; font: inherit; font-size: 14px; }
.header-search button { padding: 0 14px; border: 1px solid var(--line2); border-left: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: #fff; cursor: pointer; font-size: 16px; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.city-pill { padding: 6px 12px; border-radius: var(--r-pill); background: var(--premium); color: var(--ink); font-weight: 700; font-size: 13px; }
.nav-link { color: var(--ink2); font-weight: 600; font-size: 14px; }
@media (max-width: 600px) { .header-search { display: none; } .nav-link { display: none; } }

.site-footer { background: var(--footer); border-top: 1px solid var(--line); margin-top: 48px; padding: 36px 0 24px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: grid; gap: 24px; }
.footer-brand p { max-width: 360px; margin-top: 8px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.footer-cols h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted2); }
.footer-cols a { display: block; color: var(--ink2); padding: 3px 0; }
.footer-legal { font-size: 12px; color: var(--muted3); margin: 0; }

/* Hero / page head */
.hero { padding: 48px 0 32px; background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.hero h1 { font-size: 36px; max-width: 720px; }
.hero-search { display: flex; gap: 8px; max-width: 620px; margin-top: 18px; }
.hero-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--line2); border-radius: var(--r-btn); background: #fff; font: inherit; }
.page-head { padding: 22px 0 10px; }
.crumbs { font-size: 13px; color: var(--muted2); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }
.meta-line { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.open-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--open); display: inline-block; }
.open { color: var(--open-text); font-weight: 600; }
.closed { color: var(--muted3); }
.section { padding: 22px 0; }

/* Städer, chips */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.city-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.city-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--ink); }
.city-card strong { font-family: var(--head); font-size: 19px; }
.city-card span { font-size: 13px; color: var(--muted2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line2); color: var(--ink2); font-size: 14px; font-weight: 600; }
.chip small { color: var(--muted3); font-weight: 500; }
.chip.on, .chip:hover { background: var(--premium); border-color: var(--premium); color: var(--ink); }

/* Lista + karta */
.list-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
.clear-filters { font-size: 13px; color: var(--muted); }
.map-toggle { margin-left: auto; }
.intro { color: var(--ink3); }
.cards { display: grid; gap: 10px; }
.cards-row { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card.highlight { box-shadow: 0 0 0 3px var(--premium); }
.card.premium { border-color: #E4DBCC; }
.card-link { display: flex; gap: 14px; padding: 14px; color: var(--ink); }
.card-link:hover { color: var(--ink); }
.monogram { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--head); font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.monogram.big { width: 72px; height: 72px; border-radius: 18px; font-size: 24px; }
.card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.card-title { font-family: var(--head); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-premium { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--premium); padding: 2px 8px; border-radius: 10px; }
.card-meta { font-size: 13px; color: var(--muted2); }
.card-dish { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.card-foot { display: flex; gap: 12px; align-items: baseline; font-size: 13px; margin-top: 4px; }
.card-foot strong { font-size: 15px; }
.empty { padding: 30px; text-align: center; background: var(--card); border: 1px dashed var(--line2); border-radius: var(--r-card); }
.map-col { display: none; }
.map { width: 100%; height: 60vh; min-height: 320px; border-radius: 18px; border: 1px solid var(--line); background: #E6E8DF; }
.map-note { font-size: 12px; color: var(--muted3); text-align: right; margin: 6px 0 0; }
body.map-open .list-col .cards, body.map-open .list-col .intro, body.map-open .list-col .empty { display: none; }
body.map-open .map-col { display: block; }
.pin { background: transparent; border: 0; }
.pin span { display: inline-block; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font: 700 11px var(--body); padding: 4px 8px; border-radius: 12px; border: 2px solid var(--bg); box-shadow: 0 3px 7px rgba(0,0,0,.28); white-space: nowrap; }
.pin-premium span { background: var(--accent); }
@media (min-width: 900px) {
    h1 { font-size: 40px; }
    .map-col { display: block; }
    .map-toggle { display: none; }
}

/* SEO-text, FAQ, annons */
.seo-section p { color: var(--ink3); }
.faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--head); font-size: 16px; }
.faq p { margin: 8px 0 0; color: var(--ink3); }
.ad-slot { position: relative; background: var(--ad-bg); border: 1px solid var(--ad-line); border-radius: var(--r-card); padding: 14px; }
.ad-label { position: absolute; top: 8px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-text); }

/* Lead-form */
.lead-section { padding-top: 10px; }
.lead-box { background: var(--ad-bg); border: 1px solid var(--ad-line); border-radius: 18px; padding: 24px; }
.lead-box h2 { margin-top: 0; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 14px; }
.lead-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.lead-grid input { padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; font: inherit; }
.lead-grid .span2 { grid-column: 1 / -1; }
.lead-grid .hp { position: absolute; left: -9999px; }
.lead-ok { color: var(--open-text); font-weight: 700; }
.lead-err { color: #C0603F; font-weight: 600; }
@media (max-width: 600px) { .lead-grid { grid-template-columns: 1fr; } }

/* Restaurangsida */
.restaurant-title { display: flex; gap: 16px; align-items: center; margin: 6px 0 12px; }
.restaurant-head h1 { margin-bottom: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.restaurant-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .restaurant-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.description { color: var(--ink3); font-size: 16px; max-width: 640px; }
.menu-box, .info-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 14px; }
.menu-box h2 { font-size: 20px; margin-bottom: 12px; }
.menu-day { padding: 10px 0; border-top: 1px solid var(--line); }
.menu-day:first-of-type { border-top: 0; }
.menu-day h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.menu-day.today h3 { color: var(--accent-hover); }
.today-pill { font-size: 10px; font-weight: 800; letter-spacing: .16em; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 10px; }
.dishes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dish-main { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dish-name { font-weight: 600; }
.dish-price { white-space: nowrap; font-weight: 700; }
.dish-desc { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.dish-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg2); padding: 2px 8px; border-radius: 10px; }
.includes { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.upgrade-hint { margin: 14px 0 0; padding: 10px 12px; background: var(--ad-bg); border: 1px solid var(--ad-line); border-radius: 10px; font-size: 13px; color: var(--ad-text); }
.info-box h3 { margin-bottom: 10px; }
.info-box p { margin: 0 0 8px; font-size: 15px; }
.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: var(--ink3); }
.hours tr.today td { font-weight: 700; color: var(--ink); }
.social a { margin-right: 10px; }

/* Annonser */
.ad-slot .ad-link { display: block; }
.ad-slot picture, .ad-slot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.ad-list-inline { padding: 14px 14px 10px; }
.ad-profile-competitor { margin-top: 14px; padding: 14px; }
.ad-profile-competitor img { max-width: 400px; }
.ad-frontpage-featured { margin-bottom: 24px; padding: 14px; }

/* Logotyp och hero-bild (Premium) */
.monogram.logo { object-fit: contain; background: #fff; border: 1px solid var(--line); }
.hero-image { max-width: 1180px; margin: 16px auto 0; padding: 0 16px; }
.hero-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); }
.menu-readonly { opacity: .85; }

/* Samtyckesruta för Google Analytics (visas bara när ett GA4-ID är inlagt under Inställningar → Integrationer) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-card); padding: 16px 18px; box-shadow: 0 18px 40px -20px rgba(33,29,23,.45); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 720px; margin: 0 auto; }
.consent p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--ink2); }
.consent .btn { padding: 8px 14px; }
.consent .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Annonsera-sidan */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 32px; }
.adv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.adv-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 89, 59, .12); }
.adv-card h3 { margin: 0 0 6px; font-size: 20px; }
.adv-card p { color: var(--ink2); font-size: 15px; margin: 0; }
.adv-card .tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-text); background: var(--ad-bg); padding: 2px 8px; border-radius: 10px; margin-bottom: 10px; }
.adv-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink2); font-size: 14px; }
.adv-card li { margin: 3px 0; }
.adv-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 32px; }
.adv-format { border: 1px solid var(--line2); border-radius: 10px; padding: 8px 12px; background: #fff; font-size: 14px; font-weight: 700; font-family: var(--head); }
.adv-format small { display: block; color: var(--muted2); font-size: 12px; font-weight: 500; font-family: var(--body); }
.adv-steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.adv-steps li { counter-increment: s; background: var(--bg2); border-radius: 14px; padding: 16px; font-size: 14px; color: var(--ink2); }
.adv-steps li strong { display: block; color: var(--ink); margin-bottom: 4px; }
.adv-steps li::before { content: counter(s); display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.lead-grid select, .lead-grid textarea { padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; font: inherit; }
@media (max-width: 760px) { .adv-grid, .adv-steps { grid-template-columns: 1fr; } }

/* Textsidor (Om, Integritet) */
.prose h2 { font-size: 22px; margin: 28px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink2); margin: 0 0 14px; font-size: 16px; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Stadssidan – filterrad, sponsrat kort, annonsplatshållare,
   "Fler lunchställen" och kartbadge (enligt designhandovern)
   ============================================================ */
.meta-line strong { color: var(--ink); font-weight: 700; }
.meta-line .sep { color: var(--muted3); }

/* Sponsrat toppkort */
.card.sponsored { background: var(--ad-bg); border-color: var(--ad-line); }
.card.sponsored:hover { box-shadow: 0 12px 26px -14px rgba(153, 120, 15, .45); }
.card-kicker { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-text); }
.card.sponsored .card-title { font-size: 19px; }

/* Restauranger utan veckomeny */
.nomenu { margin-top: 28px; }
.nomenu h2 { font-size: 20px; margin-bottom: 4px; }
.nomenu h2 small { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--muted3); margin-left: 4px; }
.nomenu > p { margin: 0 0 10px; }
.card.nomenu { background: var(--bg2); border-style: dashed; }
.card.nomenu .monogram { opacity: .75; }
.card.nomenu .card-title { color: var(--ink2); }

/* Annonsplatshållare */
.ad-slot.ad-empty { border-style: dashed; }
.ad-placeholder { display: flex; flex-direction: column; gap: 4px; padding: 10px 2px 2px; color: var(--ink2); }
.ad-placeholder:hover { color: var(--ink); }
.ad-placeholder strong { font-family: var(--head); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.ad-placeholder span { font-size: 13px; color: var(--muted); }

/* Kartbadge + dämpade pins */
.map-col { position: relative; }
.map-note { display: none; }
.pin-muted span { background: var(--muted2); border-color: var(--bg); }
.empty p { margin: 0 0 8px; }
.empty .btn { margin-top: 4px; }


/* Desktop: kartan överst i full bredd, listan under med en klistrad annonskolumn (300px) till höger. Premium-kort markerade i guld. */
@media (min-width: 900px) {
    .list-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px 24px; align-items: start; }
    /* Explicita rader: annars hamnar listan en rad under annonskolumnen (auto-placeringen går framåt) och lämnar ett tomt hål. */
    .map-col { grid-column: 1 / -1; grid-row: 1; order: -1; position: static; }
    .list-col { grid-column: 1; grid-row: 2; min-width: 0; }
    .rail { grid-column: 2; grid-row: 2; position: sticky; top: 76px; }
    .map { height: 420px; }
    .cards { gap: 12px; }
}
@media (min-width: 1100px) {
    .cards { grid-template-columns: 1fr 1fr; }
    .cards > .ad-slot, .cards > .card.sponsored, .cards > .empty { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    .map { height: 460px; }
}
.card.premium { border: 2px solid var(--premium); background: linear-gradient(180deg, #FFFCEF 0%, #fff 70%); }
.card.premium:hover { box-shadow: 0 14px 28px -14px rgba(201, 164, 24, .55); }
.badge-premium { background: var(--premium); color: var(--ink); }
.card.premium .card-title { font-size: 18px; }
.card-more { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }
.card.nomenu .card-more { display: none; }

/* Kort: en rätt per rad, Premium-ikoner, annons under kartan */
.card { position: relative; }
.card-dishes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.card-dishes .card-dish { margin-top: 0; font-size: 15px; line-height: 1.35; }
.card-dishes .card-dish::before { content: '·'; color: var(--accent); font-weight: 800; margin-right: 6px; }
.card-dishes .card-dish.muted::before { color: var(--muted3); }
.card-tools { display: flex; gap: 6px; padding: 0 14px 12px 80px; margin-top: -4px; }
.card.sponsored .card-tools { padding-left: 100px; }
.card-tools a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line2); background: #fff; color: var(--ink2); }
.card-tools a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) { .card-tools { padding-left: 14px; } }

/* Premium-restaurangsida: hero i full bredd med skugga, titelkort, guldaccent på menyn, galleri + lightbox */
.hero-image.premium-hero { position: relative; max-width: none; padding: 0; margin: 0; }
.hero-image.premium-hero img { border-radius: 0; border: 0; aspect-ratio: 21 / 9; max-height: 520px; }
.hero-image.premium-hero .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 29, 23, 0) 45%, rgba(33, 29, 23, .55) 100%); pointer-events: none; }
.restaurant-head.premium.has-hero { position: relative; margin-top: -64px; padding-top: 0; }
.restaurant-head.premium.has-hero .crumbs { color: rgba(255, 255, 255, .9); margin-bottom: 10px; }
.restaurant-head.premium.has-hero .crumbs a { color: rgba(255, 255, 255, .9); }
.restaurant-head.premium .restaurant-title { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; box-shadow: 0 18px 40px -24px rgba(33, 29, 23, .45); }
.restaurant-head.premium .monogram.big { width: 88px; height: 88px; border-radius: 22px; font-size: 30px; }
.restaurant-head.premium .actions { margin-top: 12px; }
.menu-box.premium { border: 2px solid var(--premium); background: linear-gradient(180deg, #FFFCEF, #fff 40%); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gallery-item { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.gallery-item:hover img { transform: scale(1.03); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); overflow: visible; }
.lightbox::backdrop { background: rgba(33, 29, 23, .85); }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 12px; display: block; margin: 0 auto; }
.lightbox-caption { color: #fff; text-align: center; margin: 10px 0 0; font-size: 14px; }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
@media (max-width: 720px) {
    .restaurant-head.premium.has-hero { margin-top: -32px; }
    .hero-image.premium-hero img { aspect-ratio: 16 / 10; }
    .gallery { grid-template-columns: 1fr 1fr; }
}

/* Avhämtningspris */
.card-foot .takeaway { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg2); padding: 2px 8px; border-radius: 10px; }
.includes .takeaway { font-weight: 600; color: var(--ink2); }

/* Menylistan: kompakta taggar på beskrivningsraden, pris i rubriken när alla rätter kostar lika */
.dishes { gap: 6px; }
.dish-desc { margin: 1px 0 0; }
.dish-desc .dish-tags { display: inline; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted3); margin-left: 6px; white-space: nowrap; }
.menu-box h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.menu-price { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Lightbox: bläddring, räknare, ingen vit ram */
.lightbox, .lightbox[open] { background: transparent !important; border: 0; padding: 0; margin: auto; max-width: min(96vw, 1200px); width: auto; overflow: visible; color: #fff; }
.lightbox-frame { position: relative; display: flex; align-items: center; justify-content: center; }
.lightbox-frame img { max-width: min(96vw, 1200px); max-height: 82vh; width: auto; height: auto; border-radius: 12px; display: block; background: transparent; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox.single .lightbox-nav { display: none; }
.lightbox-counter { color: rgba(255, 255, 255, .8); text-align: center; font-size: 13px; margin: 4px 0 0; }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 24px; cursor: pointer; line-height: 1; }
@media (max-width: 720px) { .lightbox-nav { width: 38px; height: 38px; font-size: 26px; } .lightbox-close { top: 6px; right: 6px; } }

/* Premium utan etikett: subtil guldkant och ljus ton räcker */
.card.premium { border-width: 1.5px; }

/* ============================================================
   Stadssidan – filterrad: "Sugen på" och "Område" som chips (vanliga
   länkar, inget skript), övriga val i en lugn verktygsrad under.
   ============================================================ */
.filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.frow { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; }
.flabel { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); line-height: 32px; white-space: nowrap; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 13px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line2); color: var(--ink2); font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .12s, border-color .12s, color .12s; }
.fchip small { font-size: 12px; font-weight: 600; color: var(--muted3); }
.fchip:hover { background: #fff; border-color: var(--muted2); color: var(--ink); }
.fchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip.on:hover { background: var(--ink2); border-color: var(--ink2); color: #fff; }
.fchip.on small { color: rgba(255, 255, 255, .65); }
.ftools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.pill, .filters select {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; min-height: 36px;
    padding: 6px 14px; border: 1px solid var(--line2); border-radius: var(--r-pill);
    background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; line-height: 1.2;
}
.filters select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6356' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.filters select.on { border-color: var(--ink); color: var(--ink); background-color: var(--bg2); }
.filters .toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.filters .toggle.on { background: var(--open-bg); border-color: var(--open-line); color: var(--open-text); }
.filters .toggle input { margin: 0; accent-color: var(--open); }
.filters select:hover, .pill:hover, .filters .toggle:hover { border-color: var(--muted2); }
.filters select:focus, .pill:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 89, 59, .15); }
.filters .toggle:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 89, 59, .15); }
.filters-sort { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.filters-sort label { font-size: 13px; color: var(--muted); }
.clear-filters { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.clear-filters:hover { color: var(--accent); }
.ftools .map-toggle { margin-left: 0; }
@media (max-width: 899px) {
    .filters { padding: 12px; gap: 12px; }
    .flabel { line-height: 1.2; }
    .filters-sort { width: 100%; margin-left: 0; }
    .filters-sort select { flex: 1; }
}
@media (min-width: 900px) {
    .frow { grid-template-columns: 92px 1fr; gap: 12px; }
    .ftools { display: flex; }
    .ftools .map-toggle { display: none; }
}

/* ============================================================
   Annonskolumn ("rail"): överst som banner på mobil, klistrad
   sidokolumn på desktop. Ingress på stads-/områdessidan.
   Restaurangsidans sidokolumn klistras också på desktop.
   ============================================================ */
.rail { min-width: 0; }
.rail .ad-slot { padding: 10px; }
.rail .ad-placeholder { padding: 8px 4px 4px; }
body.map-open .rail { display: none; }
.page-head .lead { margin: 10px 0 0; max-width: 720px; }
.ad-list-sidebar img { max-width: 100%; }
@media (min-width: 900px) {
    .rail .ad-placeholder { min-height: 280px; justify-content: center; text-align: center; }
    .side-col { position: sticky; top: 76px; }
    .side-col .ad-slot { padding: 12px; }
    .side-col .ad-profile-competitor img { max-width: 100%; }
}

/* "Nära mig", avstånd på korten, landningssidornas smak-chips */
.card-dist { font-weight: 700; color: var(--accent); }
.near-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(216, 89, 59, .2); margin-right: 8px; }
.near-pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.near-pill.on::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.near-pill.busy { opacity: .6; pointer-events: none; }
.near-note { font-size: 13px; color: var(--muted); margin: -2px 0 0; }
.near-note:empty { display: none; }
.pin-user { background: transparent; border: 0; }
.pin-user span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2F6FE0; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(47, 111, 224, .25); transform: translate(-50%, -50%); }
.taste-h { margin-top: 20px; }

/* Native-kort (annons i listans kortform) */
.card.native-ad { background: var(--ad-bg); border-color: var(--ad-line); }
.card.native-ad:hover { box-shadow: 0 12px 26px -14px rgba(153, 120, 15, .45); }
.card.native-ad .card-kicker { color: var(--ad-text); }
.card.native-ad .card-more { color: var(--ad-text); }
.card.native-ad .card-dish { color: var(--ink2); }

/* Nyhetsbrev: dagens lunch i mejlen */
.nl-box { margin: 18px 0 6px; padding: 18px 18px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 10px; }
.nl-box h2 { font-size: 20px; margin: 0 0 4px; }
.nl-text p { margin: 0; color: var(--ink3); font-size: 15px; }
.nl-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.nl-field { flex: 1 1 220px; display: flex; }
.nl-field input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 15px; }
.nl-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 89, 59, .15); }
.nl-form .btn { white-space: nowrap; }
.nl-fine { margin: 0; font-size: 12px; color: var(--muted2); }
.nl-fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.nl-box .lead-ok, .nl-box .lead-err { margin: 0; }
@media (min-width: 900px) {
    .nl-box { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 20px 22px; }
    .nl-box .nl-fine, .nl-box .lead-ok, .nl-box .lead-err { grid-column: 2; }
}

/* ============================================================
   Redaktionellt pass (2026-10-06): mindre "mall", mer matguide/tidning.
   Fraunces (serif) för ingress, rätter och löptext; display-rubrik med
   kursiv ortsmarkering; listkänsla med hårlinjer i stället för kort-på-kort;
   inga färgade monogramrutor; lugnare chips; datumrad; svagt papperskorn.
   ============================================================ */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/Public/Static/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/Public/Static/fonts/fraunces-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/Public/Static/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/Public/Static/fonts/fraunces-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --r-card: 10px; --r-btn: 8px; --r-pill: 8px; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1 { font-size: 38px; letter-spacing: -.03em; line-height: 1.05; }
h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); letter-spacing: -.01em; }
.dateline { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); margin: 0 0 6px; }
.page-head .lead { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 700px; }
.meta-line { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Filterraden: typografisk, utan vit låda */
.filters { background: transparent; border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line2); border-radius: 0; padding: 14px 0 12px; }
.flabel { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 15px; color: var(--ink2); }
.fchip { background: transparent; border-radius: 6px; font-size: 13px; padding: 5px 11px; min-height: 30px; }
.fchip:hover { background: #fff; }
.chip { border-radius: 6px; background: transparent; }
.chip.on, .chip:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.on small, .chip:hover small { color: rgba(255, 255, 255, .65); }
.pill, .filters select, .filters .toggle { border-radius: 6px; }
/* Kort blir lista: hårlinjer i stället för ramar, inga monogramrutor */
.cards { gap: 0; }
.card { background: transparent; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; }
.card:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .6); }
.card .monogram:not(.logo), .restaurant-title .monogram:not(.logo) { display: none; }
.card-link { padding: 16px 4px; }
.card-tools, .card.sponsored .card-tools { padding-left: 4px; }
.card-title { font-size: 20px; letter-spacing: -.02em; }
.card-meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }
.card-dishes .card-dish { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink); }
.card-dishes .card-dish.muted { color: var(--muted2); }
.card-foot strong { font-family: var(--head); font-size: 17px; }
.card.premium { border: 0; border-bottom: 1px solid var(--line2); border-left: 3px solid var(--premium); background: transparent; padding-left: 10px; }
.card.premium .card-title { font-size: 21px; }
.card.premium:hover { box-shadow: none; background: rgba(255, 255, 255, .6); }
.card.sponsored, .card.sponsored.premium { background: var(--ad-bg); border: 1px solid var(--ad-line); border-radius: 10px; margin-bottom: 8px; padding-left: 0; }
.card.sponsored .card-link { padding: 16px; }
.card.native-ad { border: 1px solid var(--ad-line); border-radius: 10px; margin: 6px 0; }
.card.native-ad .card-link { padding: 14px 16px; }
.card.nomenu { background: transparent; border-style: solid; opacity: .85; }
.card-more { font-family: var(--serif); font-style: italic; font-weight: 500; }
@media (min-width: 1100px) { .cards { column-gap: 36px; } }
/* Restaurangsidan */
.restaurant-title { gap: 0; }
.dish-name { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.dish-price { font-family: var(--head); }
.menu-day h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; }
.menu-box, .info-box { border-radius: 10px; }
/* Guide, FAQ, områden, nyhetsbrev */
.seo-section p, .faq p, .intro, .nl-text p { font-family: var(--serif); font-size: 17px; line-height: 1.6; }
.seo-section h2, .section > .wrap > h2, .taste-h, .nomenu h2 { font-size: 24px; letter-spacing: -.02em; }
.faq summary { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 17px; }
.nl-box { border-radius: 10px; }
.nl-box h2 { font-size: 22px; }
@media (min-width: 900px) { h1 { font-size: 50px; } }

/* /annonsera: exempelannonser */
.adv-h3 { margin-top: 18px; }
.adv-examples { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 10px 0 24px; }
.adv-examples figure { margin: 0; }
.adv-examples img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.adv-examples figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (min-width: 700px) {
    .adv-examples { grid-template-columns: repeat(4, 1fr); }
    .adv-examples figure:not(.half) { grid-column: 1 / -1; }
    .adv-examples figure.half img { max-width: 300px; }
}

/* ============================================================
   Hela systemet (2026-10-09): samma redaktionella språk på start-,
   sök-, restaurang-, annons- och textsidorna som på stadssidan.
   Struktur och funktioner oförändrade – bara typografi, linjer, radier.
   ============================================================ */
.hero { background: transparent; padding: 34px 0 26px; border-bottom: 1px solid var(--line2); }
.hero h1 { font-size: 44px; max-width: 840px; letter-spacing: -.03em; }
.hero .lead { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 680px; }
.hero-search input { border-radius: 8px; font-size: 16px; }
.hero .dateline { margin-bottom: 8px; }
/* Städer som en lista i stället för kort */
.city-grid { grid-template-columns: 1fr; gap: 0; }
.city-card { background: transparent; border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 14px 4px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.city-card:last-child { border-bottom: 1px solid var(--line2); }
.city-card:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .6); color: var(--ink); }
.city-card strong { font-size: 24px; letter-spacing: -.02em; }
.city-card strong::after { content: ' ›'; color: var(--accent); }
.city-card span { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
@media (min-width: 700px) { .city-grid { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
/* Restaurangsidan */
.restaurant-head .dateline { margin-bottom: 4px; }
.description { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink2); }
.menu-box, .info-box { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 14px 0 6px; }
.menu-box.premium { border-top: 3px solid var(--premium); }
.menu-box h2 { font-size: 22px; letter-spacing: -.02em; }
.menu-price { font-family: var(--head); }
.info-box h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 17px; }
.side-col .ad-slot { border-radius: 10px; }
.hero-image img { border-radius: 10px; }
/* Text- och annonssidor */
.prose p, .prose li { font-family: var(--serif); font-size: 17px; line-height: 1.65; }
.prose h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 26px; }
.adv-card { border-radius: 10px; }
.adv-card p, .adv-card li { font-family: var(--serif); }
.adv-format { border-radius: 6px; }
.adv-steps li { font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.lead-box { border-radius: 10px; }
.lead-box p { font-family: var(--serif); }
.lead-form input { border-radius: 8px; }
/* Sidfot */
.site-footer { border-top: 2px solid var(--ink); }
.footer-brand p { font-family: var(--serif); font-style: italic; color: var(--ink3); }
.adv-steps li { border-radius: 10px; }
.search-section .cards { gap: 0; }

/* Riktiga annonser visas utan gul ram – bara en liten "Annons"-markering ovanför. Den gula rutan är kvar för platshållare. */
.ad-slot:not(.ad-empty) { background: transparent; border: 0; border-radius: 0; padding: 10px 0 0; }
.ad-slot:not(.ad-empty) .ad-label { position: static; display: block; text-align: left; margin: 0 0 6px; color: var(--muted3); }
.ad-slot:not(.ad-empty) picture, .ad-slot:not(.ad-empty) img { border-radius: 8px; width: 100%; max-width: 980px; }
.rail .ad-slot:not(.ad-empty) { padding: 0; }
.ad-profile-competitor:not(.ad-empty) img { max-width: 100%; }
.cards > .ad-slot:not(.ad-empty) { padding: 6px 0 2px; }
@media (max-width: 899px) { .ad-slot:not(.ad-empty) img { width: auto; max-width: 100%; } }