/* ============================================================
   Rimon Market by MEATOS — page-specific styles.
   Rides on ../css/styles.css + ../css/cinema.css; only the
   supermarket-specific bits live here.
   Palette: pomegranate red (rimon = pomegranate) on the same
   warm cream base as the Le Fournil system.
   ============================================================ */

:root {
  --rim: #9c2a35;
  --rim-deep: #6d1a24;
  --rim-soft: rgba(156, 42, 53, .08);
}

/* hero tint — pomegranate instead of the bakery amber */
.chero-glow { background: radial-gradient(60% 45% at 50% 42%, rgba(190, 60, 70, .30), transparent 70%) !important; }
.rim-wordmark {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700; font-size: 21px; letter-spacing: .04em;
  color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 7px;
}
.rim-wordmark small {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 700;
  font-size: 9.5px; letter-spacing: .22em; opacity: .72; text-transform: uppercase;
}

/* aisle grid — what you can actually buy */
.aisles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 4px; }
.aisle {
  border: 1px solid var(--line, #e8e0d6); border-radius: 14px; background: #fff;
  padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 5px;
}
.aisle .t { font-weight: 800; font-size: 15px; color: #17140f; }
.aisle .d { font-size: 12.5px; line-height: 1.5; color: #6f6763; }
.aisle .ic { font-size: 19px; line-height: 1; margin-bottom: 2px; }

/* the live in-store notice from rimon.ae */
.rim-notice {
  border: 1px solid rgba(156, 42, 53, .22); background: var(--rim-soft);
  border-radius: 14px; padding: 14px 16px; margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.65; color: #5a2a30;
}
.rim-notice b { color: var(--rim-deep); }

/* shabbat block */
.shabbat-card {
  border: 1px solid var(--line, #e8e0d6); border-radius: 18px; overflow: hidden;
  background: linear-gradient(165deg, #fbf8f4, #f3ece2);
  padding: 22px 20px; text-align: center;
}
.shabbat-card .kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rim); margin-bottom: 8px;
}

/* rating strip — real Google numbers, shown honestly */
.rim-rating { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.rim-rating .score { font-family: "Frank Ruhl Libre", serif; font-weight: 700; font-size: 20px; color: #17140f; direction: ltr; }
.rim-rating .stars { color: #c8912b; letter-spacing: .06em; direction: ltr; }
.rim-rating .src { font-size: 11.5px; color: #7b716a; }

@media (max-width: 360px) { .aisles { grid-template-columns: 1fr; } }

/* ---- contrast fixes -------------------------------------------------------
   The base system is a dark theme, so .h-serif / .body inherit cream and
   pale-blue text. These two blocks are LIGHT cards, so they must set their
   own ink explicitly or the copy disappears into the background. */
.shabbat-card .h-serif,
.shabbat-card h3 { color: #17140f !important; }
.shabbat-card .body,
.shabbat-card p { color: #453f39 !important; }
.shabbat-card .kicker { color: var(--rim); }

.rim-notice {
  background: #fdf4f2;                     /* solid, not a tint over dark */
  color: #5a2a30;
  border-color: rgba(156, 42, 53, .28);
}
.rim-notice b { color: var(--rim-deep); }

/* the kosher chip is a label, not a bar — hug the text */
.dark-card .kosher-chip {
  display: inline-flex; align-items: center; width: auto;
  padding: 4px 14px; border-radius: 999px; margin-bottom: 10px;
}

/* primary CTA is now "navigate to the store" — give it the filled treatment
   the WhatsApp button used to have, in the pomegranate red */
.chero-cta--nav {
  background: var(--rim) !important;
  border-color: var(--rim) !important;
  color: #fff !important;
  font-weight: 800;
}
.chero-cta--nav:hover { background: var(--rim-deep) !important; border-color: var(--rim-deep) !important; }

/* real brand mark, white on the dark hero */
.rim-logo { height: 30px; width: auto; display: block; }
@media (max-width: 380px) { .rim-logo { height: 26px; } }