/* STAGE 19 — MOBILE-FIRST LIGHT RESTYLE (Option A)
   Loaded AFTER kiosk.css / kiosk_phase.css / demo_mode.css / mobile_adaptive.css.
   Scope: real phones only (max-width: 699px). Does not touch panel/tablet rules.
   Does not touch backend, menu data, translations, QR generation, images. */

@media (max-width: 699px) {
  :root {
    --mobile-bg: #ffffff;
    --mobile-bg-soft: #f4f8ff;
    --mobile-surface: #ffffff;
    --mobile-text: #111827;
    --mobile-muted: #64748b;
    --mobile-border: #e5e7eb;
    --mobile-accent: #2563eb;
    --mobile-accent-soft: #dbeafe;
    --mobile-price: #0f766e;
  }

  html, body {
    overflow-x: hidden;
  }

  html,
  body,
  body.page-home,
  body.page-menu,
  body.page-reservation,
  body.page-guest-card {
    background: var(--mobile-bg-soft) !important;
    background-image: none !important;
    color: var(--mobile-text) !important;
  }

  /* ---- kill dark/gold hero + panel backdrops on phone ---- */
  body.page-home .hero,
  body.page-home .hero-row,
  body.page-home .home-hero,
  body.page-home::before,
  body.page-home::after,
  body.page-home .home-hero::before,
  body.page-home .home-hero::after,
  body.page-menu::before,
  body.page-menu::after {
    background: none !important;
    background-image: none !important;
  }

  body.page-home .home-hero {
    background-color: var(--mobile-surface) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
  }
  body.page-home .home-hero-eyebrow,
  body.page-home .home-hero-tagline,
  body.page-home .home-hero-qr-label {
    color: var(--mobile-muted) !important;
    text-shadow: none !important;
  }
  body.page-home .home-hero-title {
    background: none !important;
    -webkit-text-fill-color: var(--mobile-text) !important;
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }
  body.page-home .home-hero-lang {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.page-home .home-hero-btn--primary {
    background: var(--mobile-accent) !important;
    border-color: var(--mobile-accent) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  body.page-home .home-hero-btn--ghost {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
    box-shadow: none !important;
  }
  body.page-home .home-hero-qr {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
  }

  /* ---- top bar / language switcher ---- */
  .lang-switch {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-height: none;
    padding: 4px 0 !important;
  }
  .lang-switch a,
  .lang-switch button,
  .lang-switch .lang-pill,
  .lang-switch [data-lang] {
    background: var(--mobile-surface) !important;
    color: var(--mobile-text) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  .lang-switch a.active,
  .lang-switch button.active,
  .lang-switch .lang-pill.active,
  .lang-switch [data-lang].active,
  .lang-switch [aria-current="true"] {
    background: var(--mobile-accent-soft) !important;
    color: var(--mobile-accent) !important;
    border-color: var(--mobile-accent) !important;
  }

  /* ---- category / home cards: simple 2-column grid, phone-first.
     STAGE 21 FIX: `.categories-row` was accidentally grouped into this
     selector list — it is the vertical WRAPPER around the primary and
     secondary card bands, not a card grid itself. Giving it
     `display:grid; grid-template-columns:repeat(2,...)` turned the
     wrapper into a 2-column grid, making the primary/secondary
     `<section>` bands become its two grid cells — i.e. rendered
     side-by-side instead of stacked, overflowing the viewport. This is
     the real root cause of "home cards broken/overflowing" reported
     across Stages 19C and 21; confirmed via live computed-style
     inspection (getComputedStyle showed `.categories-row` width=470px
     with a 215px/215px column track on a 390px viewport). ---- */
  body.page-home .categories,
  body.page-menu .categories,
  body.page-menu .categories--rich,
  body.page-menu .categories.categories--rich {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    grid-auto-flow: row !important;
  }
  body.page-home .categories-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .cat-card,
  body.page-menu .cat-card {
    /* background-color (longhand), NOT the `background` shorthand: many
       .cat-card elements (e.g. cat-card--primary on home) carry their
       photo as an INLINE background-image on this same element. The
       shorthand implicitly resets background-image to `none`, which
       (combined with !important beating the inline declaration's lack
       of !important) was silently deleting every such photo — STAGE 19C
       fix, found via pixel-sampling a screenshot that should have shown
       a beer photo and was instead flat white. */
    background-color: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    color: var(--mobile-text) !important;
  }

  body.page-home .cat-card *,
  body.page-menu .cat-card * {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }

  body.page-home .cat-card[style*="background-image"],
  body.page-menu .cat-card[style*="background-image"] {
    background-color: var(--mobile-bg-soft) !important;
  }

  /* ---- menu item / promo cards (the actual food cards on /menu) ---- */
  body.page-menu .promo,
  body.page-menu .promo--compact,
  body.page-menu .promo--wine {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  body.page-menu .promo-photo {
    background: var(--mobile-bg-soft) !important;
  }
  body.page-menu .promo-photo-img {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  body.page-menu .promo-title,
  body.page-menu .promo-content .promo-title {
    color: var(--mobile-text) !important;
    font-size: 16px !important;
    text-shadow: none !important;
  }
  body.page-menu .promo-desc {
    color: var(--mobile-muted) !important;
    text-shadow: none !important;
  }
  body.page-menu .promo-price {
    color: var(--mobile-price) !important;
    text-shadow: none !important;
  }
  body.page-menu .promo-price-old {
    color: var(--mobile-muted) !important;
  }
  body.page-menu .promo-tag {
    background: var(--mobile-accent-soft) !important;
    color: var(--mobile-accent) !important;
    border: none !important;
  }

  /* ---- top nav bar (page-topbar / Nazad+Pocetna) ---- */
  body.page-menu .page-topbar,
  body.page-home .page-topbar {
    background: var(--mobile-surface) !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    box-shadow: none !important;
  }
  body.page-menu .topbar-brand,
  body.page-menu .topbar-sub,
  body.page-menu .topbar-page,
  body.page-home .topbar-brand,
  body.page-home .topbar-sub,
  body.page-home .topbar-page {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }
  body.page-menu .topbar-btn,
  body.page-home .topbar-btn {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-text) !important;
    box-shadow: none !important;
  }

  /* ---- brighten baked-in dark gradient overlays on category/photo tiles ----
     The photo + dark gradient are combined in a single inline
     background-image value (kiosk.css multi-layer gradient + url()),
     which cannot be split apart from outside CSS. filter on the element
     lightens the rendered tile (gradient + photo together) so the photo
     reads clearly instead of being crushed to near-black. */
  body.page-home .cat-card[style*="background-image"],
  body.page-menu .cat-card[style*="background-image"],
  body.page-menu .promo-photo-img {
    filter: brightness(1.6) saturate(1.05) !important;
  }

  /* ---- the category/set-entry cards use a dark ::before/::after scrim
     (kiosk.css) rather than a flattened inline gradient — replace the
     black-to-photo scrim with a light-to-photo scrim so the overlaid
     title/sub text (already forced dark above) stays readable on white,
     not white-on-black. */
  body.page-home .cat-card::after,
  body.page-menu .cat-card::after,
  body.page-home .cards-primary .cat-card--primary::after,
  body.page-home .categories--smart .cat-card--primary::after,
  body.page-menu--hubs .menu-set-cards .cat-card--set-media::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.94) 100%) !important;
  }
  body.page-home .cards-primary .cat-card--primary::before {
    filter: brightness(1.6) saturate(1.05) !important;
  }
  body.page-home .cards-primary .cat-card--primary .cat-title {
    text-shadow: none !important;
  }
  body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media img {
    filter: brightness(1.1) !important;
  }
  /* STAGE 19C — the set-entry source photos (generated_sets/groups/*.png)
     are shot on a dark/near-black backdrop (verified: avg pixel ~rgb(78,44,16)
     on beer.png) — no amount of CSS brightness fully whitens them without
     washing the image out. Per "no image generation" scope, the fix is to
     stop relying on a full-height .cat-content overlay (which inherits the
     dark photo behind whatever isn't explicitly painted white) and instead
     anchor a small opaque caption chip to just the bottom strip, like the
     Stage 19B home-card fix — leaving the photo itself visible above it. */
  body.page-menu--hubs.page-menu--hubs .menu-set-cards .cat-card--set-media.cat-card--set-media .cat-content {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid var(--mobile-border) !important;
  }
  body.page-menu--hubs.page-menu--hubs .menu-set-cards .cat-card--set-media.cat-card--set-media .set-entry-media img {
    filter: brightness(1.5) saturate(1.05) !important;
  }
  body.page-menu--hubs.page-menu--hubs .menu-set-cards .cat-card--set-media.cat-card--set-media::before {
    opacity: 0 !important;
  }

  /* ---- buttons / CTAs: replace gold fill with soft blue ---- */
  body.page-home .qr-btn,
  body.page-home .home-hero a.cta,
  body.page-menu .btn-primary,
  body.page-home a.cta-primary {
    background: var(--mobile-accent) !important;
    border-color: var(--mobile-accent) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  body.page-home .qr-btn-install,
  body.page-home a.cta-secondary,
  body.page-menu .btn-secondary {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
    box-shadow: none !important;
  }

  /* ---- hide heavy panel-only promo stacks / hero blocks on phone ---- */
  body.page-home .promo-banners,
  body.page-home .hero-row {
    display: none !important;
  }

  /* ---- PWA install banner: must not block the menu on phone ---- */
  #pwa-install {
    display: none !important;
  }
}

/* STAGE 19B — mobile light cleanup: home primary-card caption chip.
   .cat-card--primary carries its dark photo gradient as an inline
   background-image (kiosk.css template + index.html), which a CSS
   filter brightens but never fully lightens — black gradient stops
   stay black under brightness(). Give the caption text its own
   light chip instead of trying to lighten the photo gradient further. */
@media (max-width: 699px) {
  body.page-home .cards-primary .cat-card--primary .cat-content {
    background: rgba(255, 255, 255, 0.94) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.page-home .cards-primary .cat-card--primary .cat-title {
    color: #111827 !important;
    text-shadow: none !important;
  }
  body.page-home .cards-primary .cat-card--primary .cat-sub {
    color: #64748b !important;
    text-shadow: none !important;
  }
  /* brass top-rule inside the caption chip — drop it, no gold on phone */
  body.page-home .cards-primary .cat-card--primary > .cat-content::before {
    display: none !important;
  }
}

/* ===========================================================
   STAGE 19C — force real mobile light style / remove dark-gold legacy.

   Root cause traced: kiosk.css has an UNGATED
   `@media (orientation: portrait) and (max-aspect-ratio: 0.65)` block
   (no min-width guard) that re-applies dark/gold "panel" card styling
   (black gradient .cat-content / .cat-body, dark .item-view-grid,
   dark .set-card, dark .pivska-card, dark .guest-card-chip, etc) to
   ANY portrait viewport including real phones (390x844 has
   aspect-ratio ~0.46, well under the 0.65 cutoff). Stage 19/19B only
   beat that block by accident where selector specificity happened to
   be higher (e.g. .cards-primary .cat-card--primary .cat-content);
   everywhere else the old dark styling won on pure specificity, with
   no !important conflict, since kiosk.css's portrait block also runs
   late but with fewer compound classes than our STAGE 19 selectors.

   Fix: re-assert every affected selector here with at least one extra
   compounding class/element (the `html body...` prefix pattern kiosk.css
   itself already uses elsewhere to win these same fights) PLUS
   !important, scoped strictly to real phone widths (max-width: 699px),
   so this cannot leak onto kiosk/panel widths. */
@media (max-width: 699px) {

  /* ---- 1. hard phone reset: no overflow, no leftover gold radial ---- */
  html, html body,
  html body.page-home,
  html body.page-menu,
  html body.page-guest-card {
    background: var(--mobile-bg-soft) !important;
    background-image: none !important;
    color: var(--mobile-text) !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  html body * { box-sizing: border-box; }

  /* ---- 1b. the QR+language "utility cluster" wrapper itself
     (kiosk.css STAGE 4E.1, `body.page-home .home-hero-aside`) carries its
     own dark glass background (linear-gradient rgba(28,19,11,.78)→
     rgba(13,8,5,.72)) wrapping BOTH the QR box and the language pills —
     this is the real "huge grey/dark block" the user is seeing; fixing
     .home-hero-qr / .home-hero-lang alone left this outer wrapper dark. ---- */
  html body.page-home .home-hero-aside,
  html body.page-home .home-hero-aside.home-hero-aside {
    background: var(--mobile-surface) !important;
    border: 1px solid var(--mobile-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .08) !important;
  }

  /* ---- 2. language switcher: kill the fixed dark/blur "slab" container.
     Base .lang-switch (kiosk.css line ~150) sets position:fixed +
     background: rgba(20,20,24,.85) + backdrop-filter: blur(12px) with NO
     !important — Stage 19's `.lang-switch{...}` never overrode background,
     so the dark slab survived underneath the lighter buttons. Also
     `body.page-home .home-hero-aside .home-hero-lang` (kiosk.css ~9971)
     sets background: rgba(11,10,9,.55) with 3 compounding classes,
     beating Stage 19's 2-class `body.page-home .home-hero-lang` purely
     on specificity (no !important either side). */
  html body .lang-switch,
  html body .topbar-lang,
  html body .home-hero-lang,
  html body.page-home .home-hero-aside .home-hero-lang {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
    margin: 6px 0 10px !important;
    gap: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .home-hero-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn,
  html body .home-hero-lang .lang-btn {
    background: #ffffff !important;
    color: var(--mobile-text) !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    border-radius: 999px !important;
    min-width: 36px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }
  html body .lang-switch button.active,
  html body .topbar-lang button.active,
  html body .home-hero-lang button.active,
  html body .lang-switch button[aria-pressed="true"],
  html body .topbar-lang button[aria-pressed="true"] {
    background: var(--mobile-accent) !important;
    color: #ffffff !important;
    border-color: var(--mobile-accent) !important;
  }

  /* ---- 3. home: kill horizontal overflow on the card grids ---- */
  html body.page-home .categories-row,
  html body.page-home .cards-primary.categories,
  html body.page-home .cards-secondary.categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-home .pivska-cards-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
  }
  html body.page-home .cards-primary.categories,
  html body.page-home .cards-secondary.categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    padding: 0 !important;
  }

  /* ---- 4. "Naše pivo" beer showcase: oversized dark/gold strip — hide
     on phone rather than restyle (5 black-gradient photo cards with gold
     eyebrow/meta text; not worth a phone-sized restyle, matches the
     original Stage 19 brief to hide heavy panel-only promo strips). ---- */
  html body.page-home .pivska-showcase {
    display: none !important;
  }

  /* ---- 4b. the 3 large dark/gold promo banners ("Danasšnja preporuka" /
     "Izbor kuće" / combo strip): Stage 19's `body.page-home .promo-banners
     { display:none }` (b=2,c=1) loses to kiosk.css's ungated
     `html body.page-home .promo-banners { display:grid; ... }` panel rules
     (b=2,c=2 — extra `html` element) which re-show it as a tiny grid on any
     width including phones. Re-assert the hide at matching/higher
     specificity here. ---- */
  html body.page-home .promo-banners,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    display: none !important;
  }

  /* ---- 5. ALL card content surfaces on phone (home + menu): white,
     not the dark gradient the ungated portrait block re-applies. ---- */
  html body.page-home .cat-content,
  html body.page-home .cat-body,
  html body.page-menu .cat-content,
  html body.page-menu .cat-body {
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--mobile-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body.page-home .cat-title,
  html body.page-menu .cat-title,
  html body.page-home .cat-card .cat-title,
  html body.page-menu .cat-card .cat-title {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }
  html body.page-home .cat-sub,
  html body.page-menu .cat-sub,
  html body.page-home .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-sub {
    color: var(--mobile-muted) !important;
    text-shadow: none !important;
  }

  /* ---- 6. photos: bright, not dimmed by the ungated portrait block's
     own filters/gradients (most photos are inline background-image
     gradients combined with the photo url, so filter:brightness is the
     only lever — image itself stays, only the dark wash lightens). ---- */
  html body.page-home .cat-card[style*="background-image"],
  html body.page-menu .cat-card[style*="background-image"],
  html body.page-menu .promo-photo-img,
  html body.page-menu .cat-photo img,
  html body.page-home .cat-photo img {
    filter: brightness(1.6) saturate(1.05) !important;
    opacity: 1 !important;
  }

  /* ---- 7. /menu category grid: real phone sizing, cancel Stage 17
     panel-density logic (the ungated portrait block forces aspect-ratio
     4/3 + tiny clamp() fonts meant for a 21" kiosk screen). ---- */
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu .menu-set-cards {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body.page-menu .cat-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 150px !important;
    max-height: none !important;
    background: #ffffff !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
  }
  html body.page-menu .cat-photo,
  html body.page-menu .promo-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    aspect-ratio: auto !important;
  }
  html body.page-menu .cat-content,
  html body.page-menu .cat-body,
  html body.page-menu .promo-content {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px !important;
  }
  html body.page-menu .cat-title,
  html body.page-menu .promo-title {
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  /* ---- 8. set/combo cards (/menu set bundles): real selectors are
     .set-card / .set-card-media / .set-card-title / .set-card-desc /
     .set-card-price-now / .set-card-discount / .set-card-details —
     these had a hardcoded dark background (var(--bg-1,#171311)) never
     touched by Stage 19. ---- */
  html body.page-menu .set-card {
    background: #ffffff !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
  }
  html body.page-menu .set-card-media,
  html body.page-menu .set-card-media::after {
    background: #ffffff !important;
  }
  html body.page-menu .set-card-media img {
    filter: none !important;
    opacity: 1 !important;
  }
  html body.page-menu .set-card-title {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }
  html body.page-menu .set-card-desc,
  html body.page-menu .set-card-price-old {
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .set-card-price-now {
    color: var(--mobile-price) !important;
  }
  html body.page-menu .set-card-discount {
    background: var(--mobile-accent-soft) !important;
    border-color: var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
  }
  html body.page-menu .set-card-details > summary {
    background: var(--mobile-bg-soft) !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .set-card-details[open] > summary {
    background: var(--mobile-accent-soft) !important;
    border-color: var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
  }
  html body.page-menu .set-card-details .ci-name,
  html body.page-menu .set-card-details .ci-val {
    color: var(--mobile-text) !important;
  }

  /* ---- 9. item detail view (/menu?...&item=Y): dark gradient card +
     gold price, real selectors .item-view-grid / .item-view-photo /
     .item-view-title / .item-view-price etc. ---- */
  html body.page-menu .item-view-grid {
    background: #ffffff !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
  }
  html body.page-menu .item-view-photo {
    background-color: var(--mobile-bg-soft) !important;
    filter: none !important;
    opacity: 1 !important;
  }
  html body.page-menu .item-view-title,
  html body.page-menu .item-view-desc,
  html body.page-menu .item-view-row-value {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
  }
  html body.page-menu .item-view-crumbs,
  html body.page-menu .item-view-row-label {
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .item-view-price {
    color: var(--mobile-price) !important;
  }
  html body.page-menu .item-view-price-old {
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .item-view-cta-btn--primary {
    background: var(--mobile-accent) !important;
    border-color: var(--mobile-accent) !important;
    color: #ffffff !important;
  }
  html body.page-menu .item-view-cta-btn--ghost {
    background: #ffffff !important;
    border: 1px solid var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
  }

  /* ---- 9b. sets bundle view header + group-switcher tabs
     (/menu?sets=X): real selectors .sets-view-title (gold), .sets-view-sub,
     .sets-nav-chip (dark pill), .sets-nav-chip--active (gold pill). ---- */
  html body.page-menu .sets-view-title {
    color: var(--mobile-text) !important;
  }
  html body.page-menu .sets-view-sub {
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .sets-nav-chip {
    background: #ffffff !important;
    border: 1px solid var(--mobile-border) !important;
    color: var(--mobile-muted) !important;
  }
  html body.page-menu .sets-nav-chip--active {
    background: var(--mobile-accent-soft) !important;
    border-color: var(--mobile-accent) !important;
    color: var(--mobile-accent) !important;
  }

  /* ---- 10. floating "Moja kartica" chip (.guest-card-chip, injected by
     guest_card.js on every page except /guest-card itself): dark/gold
     pill, recolor to blue/white. ---- */
  html body .guest-card-chip {
    background: var(--mobile-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--mobile-accent) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
  }
  html body .guest-card-chip:hover {
    color: #ffffff !important;
  }
}

/* ===========================================================
   STAGE 21 — mobile menu grid normalization + splash removal.

   Root cause traced for "cards not aligned / some tall pills":
   1. .cat-card (categories grid + set-entry tiles) only had
      min-height:150px + height:auto from Stage 19C — total card
      height was content-driven (1-line vs 2-line titles produced
      visibly different heights row-to-row). Fixed here with a
      genuinely FIXED height (180px / 168px <375px) + fixed photo
      (124px) + fixed text strip (56px, 2-line clamp, overflow
      hidden) so every category/set-entry tile is identical.
   2. .promo / .promo--compact (actual menu item tiles, the
      majority of /menu content) were NEVER given a white
      background in Stage 19/19B/19C — only their inner
      .promo-content/.promo-title/.promo-photo got partial
      treatment. The card itself was still rendering kiosk.css's
      base dark gradient (`linear-gradient(180deg,#1d1d24,#141419)`)
      — this is almost certainly what the user is seeing as
      "product cards still black/gold". Fixed: full white card +
      fixed-height system matching .cat-card exactly, so the whole
      /menu grid (categories AND item tiles) reads as one uniform
      card language instead of two different broken systems. */
@media (max-width: 699px) {

  /* ---- 1. categories / set-entry grid: explicit 2-col, no panel 6-col ---- */
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu .menu-set-cards,
  html body.page-home .categories,
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* ---- 1b. ROOT CAUSE of "home cards broken/overflowing": two UNGATED
     "APEX HOTFIX 2026-05-18" blocks in kiosk.css force the 6 primary
     cards into `repeat(6, ...)` and the 7 secondary cards into
     `repeat(7, ...)` with NO media-query scoping at all — meaning a
     desktop "one row of 6/7" layout was applying on every phone width
     this whole time (390px / 7 = ~45px-wide cells), which is what
     rendered as the overlapping/skewed mess. Their selectors compound
     4 classes (.page-home + .categories-row + .cards-primary/secondary
     + .categories), beating Stage 19/19C's lower-class-count phone
     fixes outright regardless of the `html` element-count trick. Beat
     them here by matching their exact 4-class chain plus the extra
     `html` element. ---- */
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .cards-primary.categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    margin: 12px 0 !important;
    padding: 0 14px !important;
  }
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-home .cards-secondary.categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin: 12px 0 !important;
    padding: 0 14px !important;
  }
  /* the hotfix's own per-card height (150px primary / 138px secondary)
     and absolute bottom-anchored .cat-content caption are fine as-is
     once the column count is sane — only the grid needed fixing. */

  /* ---- 2. ONE fixed card-size system: .cat-card (categories/sets) AND
     .promo / .promo--compact (actual item tiles) share identical sizing
     so the whole /menu grid looks like one system, not two. ---- */
  html body.page-menu .cat-card,
  html body.page-home .cat-card,
  html body.page-menu .promo,
  html body.page-menu .promo.promo--compact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--mobile-border) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    transform: none !important;
  }
  @media (max-width: 374px) {
    html body.page-menu .cat-card,
    html body.page-home .cat-card,
    html body.page-menu .promo,
    html body.page-menu .promo.promo--compact {
      height: 168px !important;
      min-height: 168px !important;
      max-height: 168px !important;
    }
  }

  /* ---- 3. photo strip: fixed 124px, cropped, bright, no card-height
     contribution beyond this fixed box. ---- */
  html body.page-menu .cat-photo,
  html body.page-menu .promo-photo,
  html body.page-menu .promo-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    flex: 0 0 124px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 16px 16px 0 0 !important;
    background-color: #f1f5f9 !important;
  }
  html body.page-menu .cat-photo img,
  html body.page-home .cat-card .cat-photo img,
  html body.page-menu .promo-photo img,
  html body.page-menu .promo-photo-img,
  html body.page-menu .promo-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* ---- 4. text strip: fixed 56px, white, 2-line clamp title, no
     subtitle/description (prevents the "Раз...","Бав..." cut-off look). ---- */
  html body.page-menu .cat-content,
  html body.page-menu .cat-body,
  html body.page-menu .promo-content {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 9px 10px !important;
    background: #ffffff !important;
    color: var(--mobile-text) !important;
    border-top: 1px solid var(--mobile-border) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    text-align: left !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html body.page-menu .cat-title,
  html body.page-home .cat-title,
  html body.page-menu .promo-title {
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--mobile-text) !important;
    text-align: left !important;
    max-height: 36px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-shadow: none !important;
  }
  html body.page-menu .cat-sub,
  html body.page-home .cat-sub,
  html body.page-menu .promo-desc,
  html body.page-menu .promo-footer .promo-tag,
  html body.page-menu .promo-tag {
    display: none !important;
  }
  html body.page-menu .promo-footer {
    margin-top: 4px !important;
    padding: 0 !important;
  }
  html body.page-menu .promo-price {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--mobile-price) !important;
    letter-spacing: 0 !important;
  }
  html body.page-menu .promo-price-old {
    color: var(--mobile-muted) !important;
    font-size: 11px !important;
  }
}

/* ====================================================================
   STAGE 22 — mobile home promo landing
   Phone-only (<=699px). Hides the old kiosk-facade tech blocks (QR,
   language switcher, floating guest-card chip, broken category grid)
   from the first mobile screen and replaces it with a simple swipeable
   promo carousel + one clear "Open menu" CTA. Desktop/kiosk facade in
   kiosk.css is untouched; .mobile-promo-landing itself is also hidden
   above 699px so it never appears on the kiosk panel.
   ==================================================================== */
@media (min-width: 700px) {
  html body.page-home .mobile-promo-landing {
    display: none !important;
  }
}

@media (max-width: 699px) {
  /* 1. hide QR + language switcher + legacy hero-row tech bits on home */
  html body.page-home .home-hero-qr,
  html body.page-home .home-hero-lang,
  html body.page-home .lang-switch,
  html body.page-home .qr-image,
  html body.page-home .home-hero-aside,
  html body.page-home .hero-row,
  html body.page-home .qr-block,
  html body.page-home a[href*="/reservation"],
  html body.page-home .reservation-link,
  html body.page-home .reservation-btn,
  html body.page-home .reserve-btn,
  html body.page-home .booking-btn,
  html body.page-home .table-reservation {
    display: none !important;
  }

  /* 2. hide the original hero CTA + tagline/eyebrow text duplicating the
        new promo CTA, but keep .home-hero as a container (no JS unbinds) */
  html body.page-home .home-hero-cta,
  html body.page-home .home-hero-tagline,
  html body.page-home .home-hero-eyebrow {
    display: none !important;
  }
  html body.page-home .home-hero {
    padding-bottom: 6px !important;
  }
  html body.page-home .home-hero-title {
    font-size: 24px !important;
    text-align: center !important;
    margin: 0 0 2px !important;
  }
  html body.page-home .home-hero-content {
    text-align: center !important;
    align-items: center !important;
  }

  /* 3. hide section header + full primary/secondary/beer/promo-banner grid
        and the duplicate footer "Otvori meni" link from the first screen;
        all of this remains reachable via /menu */
  html body.page-home .home-section-header,
  html body.page-home .categories-row,
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .pivska-showcase,
  html body.page-home .promo-banners,
  html body.page-home .phase-ribbon,
  html body.page-home .recos,
  html body.page-home .combos,
  html body.page-home .features,
  html body.page-home section.categories,
  html body.page-home .home-footer {
    display: none !important;
  }

  /* 4. hide the floating "Moja kartica" guest-card chip on home only —
        it blocks the promo CTA at the bottom of the screen */
  html body.page-home .guest-card-chip {
    display: none !important;
  }

  /* 5. promo landing layout */
  html body.page-home .mobile-promo-landing {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-top: 10px !important;
  }

  html body.page-home .mobile-promo-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 0 16px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    list-style: none !important;
  }

  html body.page-home .mobile-promo-slide {
    flex: 0 0 86% !important;
    min-height: 420px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    background-color: #111827 !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  html body.page-home .mobile-promo-slide-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 18px 20px 22px !important;
    color: #ffffff !important;
  }

  html body.page-home .mobile-promo-eyebrow {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    opacity: .85 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
  }

  html body.page-home .mobile-promo-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
  }

  /* 6. single clear CTA into the real menu */
  html body.page-home .mobile-menu-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 32px) !important;
    margin: 14px 16px 22px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.24) !important;
  }
}

/* ====================================================================
   STAGE 23 — mobile azure theme + 3-column menu + no guest-card chip.

   Root cause of "landscape reverts to dark/gold": every Stage 19-22
   rule above (and most of kiosk.css's phone overrides) is gated on
   `max-width: 699px`, a WIDTH query. Rotating a phone to landscape
   widens the viewport past 699px on most devices (e.g. 390x844 -> 844
   wide), so those rules stop matching and the desktop/kiosk dark-gold
   facade in kiosk.css shows through untouched. `(hover: none) and
   (pointer: coarse)` matches touch capability instead of width, so it
   stays true in both orientations on real phones while never matching
   a mouse-driven desktop/kiosk panel — exactly the device split this
   product needs (phone QR-menu vs. in-venue kiosk panel).
   ==================================================================== */

/* ---- 1. guest-card chip: remove from the guest QR flow entirely ----
   .guest-card-chip is injected by guest_card.js on every page except
   /guest-card itself (kiosk.css §STAGE 6). Stage 22 only hid it on
   page-home; it still floats over /menu and blocked the menu grid. */
@media (hover: none) and (pointer: coarse) {
  html body .guest-card-chip,
  html body .floating-card,
  html body .my-card,
  html body .moja-kartica,
  html body .loyalty-floating,
  html body .guest-card-fab,
  html body a[href*="guest-card"].floating,
  html body a[href*="/guest-card"].floating,
  html body a[href*="/guest-card"].guest-card-floating {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ---- 2. azure / blue-white background, portrait + landscape ---- */
@media (hover: none) and (pointer: coarse) {
  html,
  body,
  html body.page-home,
  html body.page-menu,
  html body.page-guest-card {
    background:
      radial-gradient(circle at 15% 0%, rgba(125, 211, 252, 0.38), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.18), transparent 32%),
      linear-gradient(180deg, #eef8ff 0%, #f7fbff 42%, #eaf5ff 100%) !important;
    background-image:
      radial-gradient(circle at 15% 0%, rgba(125, 211, 252, 0.38), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.18), transparent 32%),
      linear-gradient(180deg, #eef8ff 0%, #f7fbff 42%, #eaf5ff 100%) !important;
    color: #0f172a !important;
    overflow-x: hidden !important;
  }
  html body.page-menu main,
  html body.page-home main {
    background: transparent !important;
    background-image: none !important;
  }
}

/* ---- 3. landscape-specific variant + kill leftover text-shadows ----
   Same palette family, slightly different gradient angle so portrait
   and landscape don't look identically flat; the real fix is rule 2
   already applying regardless of orientation — this just removes any
   gold text-shadow baked into kiosk.css headings/cards. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html,
  body,
  html body.page-home,
  html body.page-menu,
  html body.page-guest-card {
    background:
      radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.34), transparent 35%),
      linear-gradient(135deg, #eaf7ff 0%, #f8fcff 52%, #dff2ff 100%) !important;
    background-image:
      radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.34), transparent 35%),
      linear-gradient(135deg, #eaf7ff 0%, #f8fcff 52%, #dff2ff 100%) !important;
    color: #0f172a !important;
  }
  html body.page-home *,
  html body.page-menu *,
  html body.page-guest-card * {
    text-shadow: none !important;
  }
}

/* ---- 4. force 3-column phone menu grid, portrait + landscape ----
   Real grid containers: .categories / .categories--rich (hub + sub-hub
   navigation), .menu-set-cards (combo sets), and .promos / .promos--compact
   (the actual dish tiles inside a section — previously left at kiosk.css's
   2-col default, which is what produced the tall "pill" cards). */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu .menu-set-cards,
  html body.page-menu .promos,
  html body.page-menu .promos.promos--compact {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-items: stretch !important;
    overflow: visible !important;
    transform: none !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu .promos,
  html body.page-menu .promos.promos--compact {
    gap: 7px !important;
    padding: 0 8px !important;
  }
}

/* ---- 5. uniform small card size for the 3-column grid ----
   .cat-card covers hub/sub-hub/set tiles, .promo/.promo--compact covers
   dish tiles. Hub-view cards (root /menu nav) use the extra .cat-body
   wrapper instead of .cat-content — included so both card shapes match. */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-card,
  html body.page-menu .categories--rich .cat-card,
  html body.page-menu .menu-set-card,
  html body.page-menu .set-card,
  html body.page-menu .promo,
  html body.page-menu .promo.promo--compact,
  html body.page-menu .promo--compact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.90) !important;
    background-image: none !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.08) !important;
    transform: none !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-card,
  html body.page-menu .menu-set-card,
  html body.page-menu .promo,
  html body.page-menu .promo--compact {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body.page-menu .cat-card,
  html body.page-menu .menu-set-card,
  html body.page-menu .promo,
  html body.page-menu .promo--compact {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
}

/* ---- 6. photo crop inside the 3-column card ---- */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-photo,
  html body.page-menu .promo-photo,
  html body.page-menu .item-photo,
  html body.page-menu .menu-item-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    flex: 0 0 94px !important;
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
    background: #dff2ff !important;
  }
  html body.page-menu .cat-photo img,
  html body.page-menu .cat-photo-img,
  html body.page-menu .promo-photo img,
  html body.page-menu .promo-photo-img,
  html body.page-menu .item-photo img,
  html body.page-menu .menu-item-photo img,
  html body.page-menu .cat-card img,
  html body.page-menu .promo img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    opacity: 1 !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-photo,
  html body.page-menu .promo-photo {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    flex: 0 0 86px !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body.page-menu .cat-photo,
  html body.page-menu .promo-photo {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex: 0 0 76px !important;
  }
}

/* ---- 7. readable text in the 3-column card ----
   .cat-body is the hub-view sibling of .cat-content (see step 5 note).
   2-line clamp (not 1-line ellipsis) is what stops "BAVARSKE..." /
   "РАЗ..." mid-word truncation — long titles wrap to a 2nd line. */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-content,
  html body.page-menu .cat-body,
  html body.page-menu .promo-content,
  html body.page-menu .item-content,
  html body.page-menu .menu-item-content {
    position: relative !important;
    inset: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    padding: 6px 7px !important;
    background: rgba(255,255,255,0.96) !important;
    color: #0f172a !important;
    border-top: 1px solid rgba(14,165,233,0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  html body.page-menu .cat-title,
  html body.page-menu .promo-title,
  html body.page-menu .item-title,
  html body.page-menu .menu-item-title {
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-shadow: none !important;
    font-family: inherit !important;
  }
  html body.page-menu .cat-sub,
  html body.page-menu .cat-desc,
  html body.page-menu .promo-sub,
  html body.page-menu .item-desc,
  html body.page-menu .promo-desc,
  html body.page-menu .promo-footer .promo-tag,
  html body.page-menu .promo-tag {
    display: none !important;
  }
  html body.page-menu .cat-arrow {
    display: none !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-title,
  html body.page-menu .promo-title {
    font-size: 11px !important;
  }
}

/* ---- 8. remove old dark/gold overlays from menu cards ----
   Only the synthetic overlay layers (::before/::after, inline
   background-image tints); the real <img> photo is untouched. */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .cat-card::before,
  html body.page-menu .cat-card::after,
  html body.page-menu .promo::before,
  html body.page-menu .promo::after,
  html body.page-menu .menu-set-card::before,
  html body.page-menu .menu-set-card::after {
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
  }
  html body.page-menu .cat-card,
  html body.page-menu .promo,
  html body.page-menu .menu-set-card {
    background-image: none !important;
  }
}

/* ---- 9. home promo landing stays azure too, no guest-card chip ----
   .guest-card-chip is already killed globally in rule 1; this just
   makes sure the Stage 22 landing block matches the new palette. */
@media (hover: none) and (pointer: coarse) {
  html body.page-home .mobile-promo-landing {
    background: transparent !important;
  }
  html body.page-home .mobile-promo-slide {
    background-color: #0f3a5f !important;
  }
}

/* ---- 10. topbar (NAZAD/POČETNA + lang pills) on landscape ----
   The existing Stage 19/19B fixes for .page-topbar/.topbar-btn/.lang-switch
   (further up this file) are `max-width: 699px` only, so the dark/gold
   sticky topbar from kiosk.css (line ~1101, `linear-gradient(180deg,
   rgba(15,15,18,.96)...)`, no !important, 2 classes) re-appears in
   landscape once width crosses 699px. Same hardcoded-azure treatment,
   (hover:none)+(pointer:coarse) so it holds in both orientations. */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .page-topbar,
  html body.page-home .page-topbar {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: none !important;
  }
  html body.page-menu .topbar-brand,
  html body.page-menu .topbar-sub,
  html body.page-menu .topbar-page,
  html body.page-home .topbar-brand,
  html body.page-home .topbar-sub,
  html body.page-home .topbar-page {
    color: #0f172a !important;
    text-shadow: none !important;
  }
  html body.page-menu .topbar-btn,
  html body.page-home .topbar-btn {
    background: #ffffff !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    color: #0f172a !important;
    box-shadow: none !important;
  }
  html body .lang-switch,
  html body .topbar-lang {
    background: #ffffff !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html body .lang-switch button.active,
  html body .topbar-lang button.active,
  html body .lang-switch button[aria-pressed="true"],
  html body .topbar-lang button[aria-pressed="true"] {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* ---- 11. home: Stage 22's QR/lang/grid hide + promo-landing display
   were `max-width: 699px` / `min-width: 700px` only — same landscape
   gap as everywhere else: rotate a 390x844 phone and width crosses 699,
   the whole Stage 22 ruleset stops matching, and the full desktop
   facade (QR code, language pills, gold "Otvori meni" hero button,
   category grid) reappears. Re-declare the same hide/show logic here
   under (hover:none)+(pointer:coarse) so it holds in landscape too. */
@media (hover: none) and (pointer: coarse) {
  html body.page-home .home-hero-qr,
  html body.page-home .home-hero-lang,
  html body.page-home .lang-switch,
  html body.page-home .qr-image,
  html body.page-home .home-hero-aside,
  html body.page-home .hero-row,
  html body.page-home .qr-block,
  html body.page-home a[href*="/reservation"],
  html body.page-home .reservation-link,
  html body.page-home .reservation-btn,
  html body.page-home .reserve-btn,
  html body.page-home .booking-btn,
  html body.page-home .table-reservation,
  html body.page-home .home-hero-cta,
  html body.page-home .home-hero-tagline,
  html body.page-home .home-hero-eyebrow,
  html body.page-home .home-section-header,
  html body.page-home .categories-row,
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .pivska-showcase,
  html body.page-home .promo-banners,
  html body.page-home .phase-ribbon,
  html body.page-home .recos,
  html body.page-home .combos,
  html body.page-home .features,
  html body.page-home section.categories,
  html body.page-home .home-footer {
    display: none !important;
  }
  html body.page-home .home-hero {
    padding-bottom: 6px !important;
  }
  html body.page-home .home-hero-title {
    font-size: 24px !important;
    text-align: center !important;
    margin: 0 0 2px !important;
  }
  html body.page-home .home-hero-content {
    text-align: center !important;
    align-items: center !important;
  }
  html body.page-home .mobile-promo-landing {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-top: 10px !important;
  }
  html body.page-home .mobile-promo-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 0 16px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body.page-home .mobile-promo-slide {
    flex: 0 0 86% !important;
    min-height: 320px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    background-color: #111827 !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  html body.page-home .mobile-promo-slide-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 18px 20px 22px !important;
    color: #ffffff !important;
  }
  html body.page-home .mobile-menu-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 32px) !important;
    margin: 14px 16px 22px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.24) !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body.page-home .mobile-promo-slide {
    min-height: 220px !important;
  }
}

/* ---- 11b. home-hero itself carries its own dark/gold background
   (kiosk.css cinematic facade) independent of `body` — killing only
   `body`'s background (rule 2/3) was not enough; this element and its
   ::before/::after scrim still showed through underneath the brand
   title in landscape. Same fix Stage 19 already applies at <=699px;
   mirrored here for (hover:none)+(pointer:coarse). */
@media (hover: none) and (pointer: coarse) {
  html body.page-home .home-hero,
  html body.page-home .home-hero::before,
  html body.page-home .home-hero::after {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(14,165,233,0.20) !important;
  }
  html body.page-home .home-hero-title {
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    text-shadow: none !important;
  }
}

/* ====================================================================
   STAGE 23b — specificity fix for the /menu ROOT HUB page.
   CDP-inspected computed styles found rule 5-8 above being beaten by
   kiosk.css's own 4-class chains:
     body.page-menu--hubs .categories.categories--rich .cat-card   (4 classes)
     body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media (4 classes)
   CSS specificity ranks class-count before element-count, so rule 5-8's
   2-class ".cat-card" selectors (html body.page-menu .cat-card) lost
   outright regardless of !important or source order — this is what kept
   the hub cards at kiosk's own 178-210px height / 15px single-line title
   (the literal cause of the "BAVARSKE..."/"РАЗ..." truncation) and kept
   the landscape dark scrim on the 5 set-shortcut cards. Matching the
   same 4-class depth here (still with the `html` element prefix Stage
   19-22 already established) wins on element-count once class-count
   ties, and applies in both orientations via (hover:none)+(pointer:coarse)
   instead of kiosk's own width-gated `orientation:landscape` queries.
   .cat-card--set-media keeps its own absolute photo-layer layout (it is
   not a stacked photo+caption card like the rest) — only its overlay
   tint is touched, not its box model. ==================================== */
@media (hover: none) and (pointer: coarse) {
  html body.page-menu .categories.categories--rich .cat-card {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: rgba(255,255,255,0.90) !important;
    background-image: none !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.08) !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo {
    position: relative !important;
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    flex: 0 0 94px !important;
    border-radius: 15px 15px 0 0 !important;
    background: #dff2ff !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    opacity: 1 !important;
  }
  html body.page-menu .categories.categories--rich .cat-body {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    padding: 6px 7px !important;
    background: rgba(255,255,255,0.96) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-title {
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    color: #0f172a !important;
    text-shadow: none !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-sub,
  html body.page-menu .categories.categories--rich .cat-card .cat-desc,
  html body.page-menu .categories.categories--rich .cat-card .cat-arrow {
    display: none !important;
  }

  /* .menu-set-cards shortcut tiles: keep their absolute photo-layer
     design, just relight the bottom scrim from black/gold to azure-navy
     and stop forcing it darker than the rest of the new palette. */
  html body.page-menu .menu-set-cards .cat-card--set-media::before {
    background: linear-gradient(
      180deg,
      rgba(15, 58, 95, 0.05) 0%,
      rgba(15, 58, 95, 0.35) 48%,
      rgba(15, 58, 95, 0.72) 100%
    ) !important;
  }
  html body.page-menu .menu-set-cards .cat-card--set-media .cat-title {
    text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .categories.categories--rich .cat-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    flex: 0 0 86px !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body.page-menu .categories.categories--rich .cat-card {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex: 0 0 76px !important;
  }
}

/* ====================================================================
   STAGE 26 — mobile beauty + relevance pass.
   Real selectors confirmed in Stage 23/23b/24 audits: hub cards use
   .categories.categories--rich .cat-card (+ .cat-photo/.cat-photo-img/
   .cat-body), set-shortcuts use .menu-set-cards .cat-card--set-media,
   dish tiles use .promo.promo--compact (+ .promo-photo/-img/-content/
   -title). Topbar is .page-topbar/.topbar-btn; language pills are
   `.lang-switch button[data-lang]` (no `.lang-btn` class exists in this
   codebase — verified by template grep, not guessed). Only refines
   spacing/shadow/centering on top of the Stage 23/23b base; does not
   re-fight the specificity battles already won there. ==================== */
@media (hover: none) and (pointer: coarse) {
  /* softer radius/shadow/centered title polish on top of Stage 23b sizing */
  html body.page-menu .categories.categories--rich .cat-card,
  html body.page-menu .menu-set-cards .cat-card,
  html body.page-menu .promo.promo--compact {
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-title,
  html body.page-menu .promo-title {
    text-align: center !important;
  }
  html body.page-menu .categories.categories--rich .cat-body,
  html body.page-menu .promo-content {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo-img,
  html body.page-menu .promo-photo-img {
    filter: saturate(1.06) contrast(1.03) brightness(1.02) !important;
  }
  html body.page-menu .promo-price {
    color: #0284c7 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  html body.page-menu .promo-footer {
    justify-content: center !important;
  }

  /* top bar: light glass card instead of the dark sticky slab */
  html body.page-menu .page-topbar {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(14,165,233,0.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(15,23,42,0.06) !important;
    margin: 10px 10px 12px !important;
    padding: 10px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: static !important;
  }
  html body.page-menu .lang-switch,
  html body.page-menu .topbar-lang {
    gap: 7px !important;
    justify-content: center !important;
  }
  html body.page-menu .lang-switch button[data-lang],
  html body.page-menu .topbar-lang button[data-lang] {
    min-width: 44px !important;
    height: 34px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }

  /* home promo landing: smoother slide radius + centered overlay text */
  html body.page-home .mobile-promo-slide {
    border-radius: 26px !important;
    box-shadow: 0 14px 30px rgba(15,23,42,0.14) !important;
  }
  html body.page-home .mobile-promo-slide-text {
    text-align: center !important;
    align-items: center !important;
  }
  html body.page-home .mobile-menu-cta {
    box-shadow: 0 14px 30px rgba(37,99,235,.28) !important;
  }

  /* belt-and-suspenders: guest-card chip must never reappear */
  html body .guest-card-chip,
  html body #gc-chip,
  html body .guest-card-floating,
  html body .moja-kartica,
  html body .my-card,
  html body a[href*="/guest-card"].guest-card-chip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .categories.categories--rich .cat-card,
  html body.page-menu .menu-set-cards .cat-card,
  html body.page-menu .promo.promo--compact {
    height: 134px !important;
    min-height: 134px !important;
    max-height: 134px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo,
  html body.page-menu .promo-photo {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    flex: 0 0 86px !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-title,
  html body.page-menu .promo-title {
    font-size: 11px !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html body.page-menu,
  html body.page-home {
    background: linear-gradient(135deg, #eaf7ff 0%, #f8fcff 54%, #dff2ff 100%) !important;
    color: #0f172a !important;
  }
}

/* ====================================================================
   STAGE 27 — mobile card readability and photo fit.
   Real selectors confirmed (no guessing): item detail page is
   `.item-view` with `.item-view-photo`/`.item-view-img`/`.item-view-title`
   (not `.detail-view`/`.item-detail`/`.product-detail`, which don't
   exist in this codebase). Card families unchanged from Stage 23b/26:
   .categories.categories--rich .cat-card (hub), .menu-set-cards
   .cat-card--set-media (set shortcuts), .promo.promo--compact (dish
   tiles). Caption strips become solid near-opaque white so dark-photo
   text never sits low-contrast on bright image. ==================== */
@media (hover: none) and (pointer: coarse) {
  /* ---- shortcut/set cards: solid bottom caption, no white-on-white ---- */
  html body.page-menu .menu-set-cards .cat-card {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  html body.page-menu .menu-set-cards .cat-card--set-media .cat-content {
    background: rgba(255,255,255,0.94) !important;
    border-top: 1px solid rgba(14,165,233,0.18) !important;
    padding: 5px 7px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body.page-menu .menu-set-cards .cat-card--set-media::before {
    /* Stage 23b's gradient scrim is now redundant — caption sits on a
       solid white strip, not over the photo, so drop the photo tint. */
    background: none !important;
  }
  html body.page-menu .menu-set-cards .cat-title {
    color: #0f172a !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ---- hub cards: solid caption strip, brighter photo, no scrim ---- */
  html body.page-menu .categories.categories--rich .cat-card {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    flex: 0 0 96px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo-img {
    filter: saturate(1.04) contrast(1.02) brightness(1.04) !important;
  }
  html body.page-menu .categories.categories--rich .cat-body {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    background: rgba(255,255,255,0.96) !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-title {
    font-size: 10.5px !important;
    letter-spacing: -0.01em !important;
  }
  html body.page-menu .categories.categories--rich .cat-card::before,
  html body.page-menu .categories.categories--rich .cat-card::after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
  }

  /* ---- dish tiles: cleaner frame, photo fully cropped ---- */
  html body.page-menu .promo.promo--compact {
    box-shadow: 0 7px 18px rgba(15,23,42,0.08) !important;
  }
  html body.page-menu .promo-photo-img {
    filter: saturate(1.05) contrast(1.03) brightness(1.02) !important;
  }

  /* ---- item detail view: photo capped, not full-screen ---- */
  html body.page-menu .item-view {
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(14,165,233,0.18) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,0.08) !important;
    overflow: hidden !important;
    margin: 12px 14px 22px !important;
  }
  html body.page-menu .item-view-photo {
    height: 240px !important;
    max-height: 240px !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    background: #dff2ff !important;
  }
  html body.page-menu .item-view-img {
    width: 100% !important;
    height: 100% !important;
    max-height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(1.05) contrast(1.03) brightness(1.02) !important;
  }
  html body.page-menu .item-view-title {
    color: #0f172a !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  /* ---- arrows hurt readability at this card size: hide on mobile ---- */
  html body.page-menu .cat-arrow {
    display: none !important;
    opacity: 0 !important;
  }
}
@media (max-width: 374px) and (hover: none) and (pointer: coarse) {
  html body.page-menu .categories.categories--rich .cat-card,
  html body.page-menu .menu-set-cards .cat-card {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
  html body.page-menu .categories.categories--rich .cat-photo {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    flex: 0 0 88px !important;
  }
  html body.page-menu .categories.categories--rich .cat-body {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
  }
  html body.page-menu .categories.categories--rich .cat-card .cat-title,
  html body.page-menu .menu-set-cards .cat-title {
    font-size: 10px !important;
  }
  html body.page-menu .item-view-photo,
  html body.page-menu .item-view-img {
    height: 210px !important;
    max-height: 210px !important;
  }
}

/* ====================================================================
   STAGE 28 — force real phone-ui styles via a hard `.phone-ui` class
   on <html>, set by an inline script in menu.html/index.html <head>
   (UA sniff + screen-size fallback + ?phone=1 override). Stops
   depending solely on (hover:none)+(pointer:coarse), in case some real
   device/browser/webview doesn't report those media features as
   expected. Does not change panel/desktop styling — `.phone-ui` is only
   added when the inline script detects a phone-class device. ==================== */
html.phone-ui,
html.phone-ui body,
html.phone-ui body.page-home,
html.phone-ui body.page-menu,
html.phone-ui body.page-guest-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.34), transparent 34%),
    linear-gradient(180deg, #eaf7ff 0%, #f8fcff 55%, #dff2ff 100%) !important;
  color: #0f172a !important;
  overflow-x: hidden !important;
}

html.phone-ui .guest-card-chip,
html.phone-ui #gc-chip,
html.phone-ui .guest-card-floating,
html.phone-ui .floating-card,
html.phone-ui .my-card,
html.phone-ui .moja-kartica,
html.phone-ui a[href*="/guest-card"].guest-card-chip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.phone-ui body.page-menu .categories,
html.phone-ui body.page-menu .categories--rich,
html.phone-ui body.page-menu .categories.categories--rich,
html.phone-ui body.page-menu .menu-set-cards,
html.phone-ui body.page-menu .promos,
html.phone-ui body.page-menu .promos.promos--compact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 8px 22px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  transform: none !important;
}

html.phone-ui body.page-menu .cat-card,
html.phone-ui body.page-menu .categories--rich .cat-card,
html.phone-ui body.page-menu .menu-set-card,
html.phone-ui body.page-menu .set-card,
html.phone-ui body.page-menu .promo,
html.phone-ui body.page-menu .promo.promo--compact,
html.phone-ui body.page-menu .promo--compact {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(14,165,233,.22) !important;
  box-shadow: 0 7px 18px rgba(15,23,42,.08) !important;
  transform: none !important;
}

html.phone-ui body.page-menu .cat-photo,
html.phone-ui body.page-menu .promo-photo {
  position: relative !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  flex: 0 0 88px !important;
  overflow: hidden !important;
  background: #dff2ff !important;
}

html.phone-ui body.page-menu .cat-photo img,
html.phone-ui body.page-menu .cat-photo-img,
html.phone-ui body.page-menu .promo-photo img,
html.phone-ui body.page-menu .promo-photo-img,
html.phone-ui body.page-menu .cat-card img,
html.phone-ui body.page-menu .promo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(1.04) contrast(1.03) brightness(1.03) !important;
  opacity: 1 !important;
}

html.phone-ui body.page-menu .cat-content,
html.phone-ui body.page-menu .cat-body,
html.phone-ui body.page-menu .promo-content {
  position: relative !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  padding: 5px 6px !important;
  background: rgba(255,255,255,.98) !important;
  color: #0f172a !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  overflow: hidden !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.phone-ui body.page-menu .cat-title,
html.phone-ui body.page-menu .promo-title {
  font-size: 11px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html.phone-ui body.page-menu .cat-sub,
html.phone-ui body.page-menu .cat-desc,
html.phone-ui body.page-menu .promo-sub,
html.phone-ui body.page-menu .promo-desc,
html.phone-ui body.page-menu .cat-arrow {
  display: none !important;
  opacity: 0 !important;
}

html.phone-ui body.page-menu .cat-card::before,
html.phone-ui body.page-menu .cat-card::after,
html.phone-ui body.page-menu .promo::before,
html.phone-ui body.page-menu .promo::after,
html.phone-ui body.page-menu .menu-set-card::before,
html.phone-ui body.page-menu .menu-set-card::after {
  background: none !important;
  opacity: 0 !important;
}

html.phone-ui body.page-menu .item-view {
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(14,165,233,.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
  margin: 12px 14px 22px !important;
}

html.phone-ui body.page-menu .item-view-photo {
  max-height: 230px !important;
  height: 230px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
}

html.phone-ui body.page-menu .item-view-img {
  width: 100% !important;
  height: 100% !important;
  max-height: 230px !important;
  object-fit: cover !important;
  object-position: center !important;
}

html.phone-ui body.page-menu .item-view-title {
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

@media (max-width: 374px) {
  html.phone-ui body.page-menu .cat-card,
  html.phone-ui body.page-menu .promo,
  html.phone-ui body.page-menu .promo--compact {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
  html.phone-ui body.page-menu .cat-photo,
  html.phone-ui body.page-menu .promo-photo {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }
  html.phone-ui body.page-menu .cat-title,
  html.phone-ui body.page-menu .promo-title {
    font-size: 10px !important;
  }
}

/* ====================================================================
   STAGE 29 — real mobile card rebuild for html.phone-ui only.
   Verified markup (curl /menu?phone=1, this turn):
     - hub/sub-hub cards:  .cat-card > .cat-photo > img.cat-photo-img,
                           .cat-card > .cat-body (caption)
     - set-shortcut cards: .cat-card.cat-card--set-media (no .cat-photo —
                           photo is .set-entry-media > img, absolutely
                           positioned full-bleed; caption is .cat-content,
                           NOT .cat-body); kiosk.css paints a dark
                           ::before scrim over the whole card for this
                           variant specifically — that is the "black
                           gradient caption" the user is still seeing.
     - dish tiles:         .promo.promo--compact > .promo-photo > img,
                           .promo-content (caption)
   Fix: force every caption to a SOLID opaque white strip (not
   text-on-photo), kill the dark ::before/::after scrim outright, and
   set text color directly (not just text-shadow:none) so dark/blue text
   never sits on a dark photo. No (hover/pointer) dependency — gated
   purely on html.phone-ui per Stage 28. ==================== */

/* ---- hub/sub-hub cards: opaque caption strip ---- */
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) {
  display: flex !important;
  flex-direction: column !important;
  background-image: none !important;
  background-color: rgba(255,255,255,.96) !important;
}
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-photo {
  flex: 0 0 96px !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  background: #dff2ff !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.03) brightness(1.04) !important;
  opacity: 1 !important;
}
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-body {
  position: relative !important;
  flex: 0 0 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 4px 6px !important;
  background-color: #ffffff !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* ---- set-shortcut cards: kill the dark scrim, solid caption ---- */
html.phone-ui body.page-menu .cat-card.cat-card--set-media::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
html.phone-ui body.page-menu .cat-card.cat-card--set-media .cat-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 4px 6px !important;
  background-color: #ffffff !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  z-index: 5 !important;
  box-shadow: none !important;
}

/* ---- every caption's text: hard color, no shadow, no gradient-fill ---- */
html.phone-ui body.page-menu .cat-card .cat-title,
html.phone-ui body.page-menu .cat-card .cat-body *,
html.phone-ui body.page-menu .cat-card .cat-content * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .cat-card .cat-sub,
html.phone-ui body.page-menu .cat-card .cat-desc,
html.phone-ui body.page-menu .cat-arrow {
  display: none !important;
  opacity: 0 !important;
}

/* ---- dish tiles: same opaque-caption treatment ---- */
html.phone-ui body.page-menu .promo.promo--compact {
  background-color: rgba(255,255,255,.96) !important;
  background-image: none !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-photo {
  background: #dff2ff !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-photo-img {
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.03) brightness(1.04) !important;
  opacity: 1 !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-content {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  box-shadow: none !important;
}
html.phone-ui body.page-menu .promo-title,
html.phone-ui body.page-menu .promo-content * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html.phone-ui body.page-menu .promo-price {
  color: #0284c7 !important;
  -webkit-text-fill-color: #0284c7 !important;
}

/* ---- detail view: smaller contained photo, dark-free title ---- */
html.phone-ui body.page-menu .item-view-photo,
html.phone-ui body.page-menu .item-view-img {
  height: 220px !important;
  max-height: 220px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px !important;
}
html.phone-ui body.page-menu .item-view-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

/* ====================================================================
   STAGE 30 — readable phone cards, final pass. Stage 30 audit (this
   turn) confirmed data/menu.json's bottle_beer category contains only
   13 beer items, and the live server-rendered /menu?section=bottle_beer
   HTML matches data/menu.json item-for-item (no eggs/food present) —
   no grouping bug in data or backend rendering, and no client-side
   filter/grouping JS exists at all (grep of app/static/js found none).
   This block only re-asserts solid opaque captions + hard text color,
   covering .cat-card--set-media explicitly (it has no .cat-photo, so
   earlier rules scoped to "not(.cat-card--set-media)" never touched
   its own caption/scrim — this is the gap that still showed dark
   gradient text on that specific card family). ==================== */
html.phone-ui body.page-menu .cat-card,
html.phone-ui body.page-menu .cat-card--set-media,
html.phone-ui body.page-menu .categories--rich .cat-card,
html.phone-ui body.page-menu .promo.promo--compact,
html.phone-ui body.page-menu .promo--compact {
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.22) !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .cat-card::before,
html.phone-ui body.page-menu .cat-card::after,
html.phone-ui body.page-menu .cat-card--set-media::before,
html.phone-ui body.page-menu .cat-card--set-media::after,
html.phone-ui body.page-menu .promo.promo--compact::before,
html.phone-ui body.page-menu .promo.promo--compact::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
}
html.phone-ui body.page-menu .cat-card .cat-content,
html.phone-ui body.page-menu .cat-card .cat-body,
html.phone-ui body.page-menu .cat-card--set-media .cat-content,
html.phone-ui body.page-menu .cat-card--set-media .cat-body {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  opacity: 1 !important;
}
html.phone-ui body.page-menu .cat-card .cat-title,
html.phone-ui body.page-menu .cat-card .cat-content *,
html.phone-ui body.page-menu .cat-card .cat-body *,
html.phone-ui body.page-menu .cat-card--set-media .cat-title,
html.phone-ui body.page-menu .cat-card--set-media .cat-content *,
html.phone-ui body.page-menu .cat-card--set-media .cat-body * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-content,
html.phone-ui body.page-menu .promo--compact .promo-content {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-title,
html.phone-ui body.page-menu .promo.promo--compact .promo-content *,
html.phone-ui body.page-menu .promo--compact .promo-title,
html.phone-ui body.page-menu .promo--compact .promo-content * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-price,
html.phone-ui body.page-menu .promo--compact .promo-price,
html.phone-ui body.page-menu [class*="price"] {
  color: #0284c7 !important;
  -webkit-text-fill-color: #0284c7 !important;
}

/* ====================================================================
   STAGE 31 — responsive readable phone cards: portrait priority (2 col,
   bigger), landscape secondary (3 col, compact). Real grid containers
   verified across Stages 23-30: .categories/.categories--rich (hub
   nav), .menu-set-cards (set shortcuts), .promos.promos--compact (dish
   tiles) — NOT .menu-set-grid/.category-grid/.items-grid/.section-grid/
   .promos-grid/.item-card/.menu-item, which don't exist in this
   codebase; kept as harmless no-op extras for forward-compat only.
   ==================================================================== */
html.phone-ui body.page-menu {
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.30), transparent 34%),
    linear-gradient(180deg, #eaf7ff 0%, #f8fcff 54%, #dff2ff 100%) !important;
  color: #0f172a !important;
  overflow-x: hidden !important;
}

/* PORTRAIT (default): 2 readable columns for both card families */
html.phone-ui body.page-menu .categories,
html.phone-ui body.page-menu .categories--rich,
html.phone-ui body.page-menu .categories.categories--rich,
html.phone-ui body.page-menu .menu-set-cards,
html.phone-ui body.page-menu .promos,
html.phone-ui body.page-menu .promos.promos--compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 14px 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
}

/* hub/set cards: bigger frame, photo + solid label */
html.phone-ui body.page-menu .cat-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 174px !important;
  min-height: 174px !important;
  max-height: 174px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(14,165,233,.22) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.08) !important;
  position: relative !important;
  transform: none !important;
}
html.phone-ui body.page-menu .cat-card::before,
html.phone-ui body.page-menu .cat-card::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-photo {
  position: relative !important;
  width: 100% !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  flex: 0 0 118px !important;
  overflow: hidden !important;
  background: #dff2ff !important;
  border-radius: 18px 18px 0 0 !important;
}
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.03) brightness(1.04) !important;
  opacity: 1 !important;
}
/* set-shortcut cards: full-bleed photo layer, no .cat-photo wrapper */
html.phone-ui body.page-menu .cat-card.cat-card--set-media .set-entry-media img {
  filter: saturate(1.04) contrast(1.03) brightness(1.04) !important;
}

/* solid readable label, both card families */
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-body,
html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-content {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  flex: 0 0 56px !important;
  padding: 7px 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  z-index: 50 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.phone-ui body.page-menu .cat-card.cat-card--set-media .cat-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 7px 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  z-index: 50 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.phone-ui body.page-menu .cat-card .cat-title,
html.phone-ui body.page-menu .cat-card .cat-body *,
html.phone-ui body.page-menu .cat-card .cat-content * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .cat-arrow {
  display: none !important;
  opacity: 0 !important;
}

/* dish tiles: portrait 2-col, bigger frame */
html.phone-ui body.page-menu .promo.promo--compact {
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(14,165,233,.20) !important;
  box-shadow: 0 7px 18px rgba(15,23,42,.08) !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-photo {
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  overflow: hidden !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.03) brightness(1.04) !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-content {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-top: 1px solid rgba(14,165,233,.18) !important;
  text-shadow: none !important;
}
html.phone-ui body.page-menu .promo.promo--compact .promo-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* LANDSCAPE PHONE: 3 columns, compact but readable */
@media (orientation: landscape) {
  html.phone-ui body.page-menu .categories,
  html.phone-ui body.page-menu .categories--rich,
  html.phone-ui body.page-menu .categories.categories--rich,
  html.phone-ui body.page-menu .menu-set-cards,
  html.phone-ui body.page-menu .promos,
  html.phone-ui body.page-menu .promos.promos--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px 20px !important;
  }
  html.phone-ui body.page-menu .cat-card,
  html.phone-ui body.page-menu .promo.promo--compact {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }
  html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-photo,
  html.phone-ui body.page-menu .promo.promo--compact .promo-photo {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    flex: 0 0 88px !important;
  }
  html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-body,
  html.phone-ui body.page-menu .cat-card:not(.cat-card--set-media) .cat-content,
  html.phone-ui body.page-menu .cat-card.cat-card--set-media .cat-content {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
  }
  html.phone-ui body.page-menu .cat-card .cat-title,
  html.phone-ui body.page-menu .cat-card .cat-body *,
  html.phone-ui body.page-menu .cat-card .cat-content * {
    font-size: 12px !important;
  }
}