/* ─── Comida Sanchez: shop-only menu touches ────────────────────────────────
   Loaded by the marketplace shop after chrome.css (the shared header/footer).
   Only what the shop has and the site does not: the menu page. Each brand
   wears its own accent, as on the site: the shop marks the chosen brand on
   [data-menu-group] (chips, cards) and each brand tab with [data-group]. */

:root,
[data-menu-group='comida-sanchez'] {
  --cs-g: #037a7f;
  --cs-g-soft: #e5f2f0;
}
[data-menu-group='texico'] {
  --cs-g: #c24a0a;
  --cs-g-soft: #ffede0;
}
[data-menu-group='dulce'] {
  --cs-g: #b42659;
  --cs-g-soft: #fbe7ee;
}

/* Brand tabs: each in its own colour once chosen. */
[role='tab'][data-group][aria-selected='true'] {
  color: #037a7f;
}
[role='tab'][data-group][aria-selected='true']::after {
  background: #037a7f;
}
[role='tab'][data-group='texico'][aria-selected='true'] {
  color: #c24a0a;
}
[role='tab'][data-group='texico'][aria-selected='true']::after {
  background: #c24a0a;
}
[role='tab'][data-group='dulce'][aria-selected='true'] {
  color: #b42659;
}
[role='tab'][data-group='dulce'][aria-selected='true']::after {
  background: #b42659;
}

/* Category chips: the active one in the brand colour, the rest ink. */
button.rounded-full.bg-foreground.text-background {
  background: var(--cs-g);
  color: #fff;
}
button.rounded-full.text-muted-foreground {
  color: #1f1b17;
}
button.rounded-full.text-muted-foreground:hover {
  background: var(--cs-g-soft);
  color: var(--cs-g);
}

/* Category titles in the site's hand-lettered face, like "Najpopularnije". */
h4.heading-h4 {
  font-family: 'Caveat Brush', var(--font-display, cursive);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
  text-transform: none;
}

/* Product cards: the site's card - hairline, brand-colour "+" and hover. */
button.group.rounded-2xl.bg-card {
  border-color: #ece5da;
}
button.group.rounded-2xl.bg-card:hover {
  border-color: color-mix(in srgb, var(--cs-g) 45%, transparent);
  box-shadow: 0 16px 32px -24px color-mix(in srgb, var(--cs-g) 60%, transparent);
}
button.group.rounded-2xl.bg-card span.size-7.rounded-full {
  background: var(--cs-g);
  border-color: var(--cs-g);
  color: #fff;
  box-shadow: none;
}

/* Brand tabs carry the brand logos (the categories' icons): Texico's mark
   is square, as on the site, and both read a step larger than the default. */
[role='tab'][data-group] > span.rounded-full {
  width: 30px;
  height: 30px;
}
[role='tab'][data-group='texico'] > span.rounded-full {
  border-radius: 5px;
}
@media (min-width: 1024px) {
  [role='tab'][data-group] > span.rounded-full {
    width: 34px;
    height: 34px;
  }
}

/* Product drawer: the shop sets the dish name and the add-on group titles
   in the display face at sizes tuned for heavy display faces (17px dish name
   on desktop). Caveat Brush is a narrow hand face with a small x-height, so at
   those sizes it reads tiny next to the body text: set it at its own scale,
   regular weight (a faux bold smears a brush face). The selectors key on the
   drawer's own heading classes + its inline display-font style (the home
   promotions' display headings carry neither font-semibold nor truncate). */
h2.font-semibold.leading-tight[style*='--font-family-display'] {
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}
h3.font-semibold.truncate[style*='--font-family-display'] {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}
@media (min-width: 1024px) {
  h2.font-semibold.leading-tight[style*='--font-family-display'] {
    font-size: 34px !important;
  }
}