/* STAR2CO-LIFE-MENU-R10 | Shared by every page using the global navigation. */
html.star2-life-ui:root { --star2-life-menu-build: R10; }
/* STAR2CO R10 | Life services: one icon family and a quiet, brand-led palette.
   Scoped to public life-service cards and the life submenu. Load after R8. */
html.star2-life-ui:root .star2-life-card {
  --life-ink: #245e49;
  --life-tint: #edf5e9;
  --life-line: #d7e5d8;
  --life-muted: #586d60;
}
html.star2-life-ui:root .star2-life-card[data-life-category="food"] { --life-tint: #f7f2df; --life-line: #e9dfbd; }
html.star2-life-ui:root .star2-life-card[data-life-category="fashion"] { --life-tint: #f2f3e9; --life-line: #e0e3cc; }
html.star2-life-ui:root .star2-life-card[data-life-category="transport"] { --life-tint: #eaf4f0; --life-line: #d3e5dc; }
html.star2-life-ui:root .star2-life-card[data-life-category="learn"] { --life-tint: #eef4e5; --life-line: #dce6cb; }
html.star2-life-ui:root .star2-life-card[data-life-category="travel"] { --life-tint: #f6f1df; --life-line: #e8dfbf; }
html.star2-life-ui:root .r9-life-svg { display: block; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: none; stroke: currentColor; }

/* Desktop: illustrated cards, green headings, readable service descriptions. */
html.star2-life-ui:root .site-header .nav-life .mega-menu.star2-life-menu {
  padding: 1rem;
  gap: .7rem;
  border: 1px solid #dce8de;
  border-radius: 1.1rem;
  background: #f8fbf6;
  box-shadow: 0 18px 45px #163e281a;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
html.star2-life-ui:root .site-header .nav-life .mega-menu > .mega-col.star2-life-card {
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) !important;
  grid-template-areas: 'art art' 'icon title' 'list list' !important;
  grid-template-rows: auto auto 1fr;
  gap: .65rem .55rem;
  align-items: start;
  min-width: 0;
  padding: .7rem;
  border: 1px solid #e0e9dd;
  border-radius: .85rem;
  background: #fff;
  color: var(--life-ink);
  text-align: left !important;
  box-shadow: 0 3px 10px #183d2805;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu > .mega-col.star2-life-card:hover,
html.star2-life-ui:root .site-header .nav-life .mega-menu > .mega-col.star2-life-card:focus-visible {
  border-color: #91baa0;
  background: #fcfefb;
  box-shadow: 0 5px 16px #275d3412;
  transform: none;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card > .mega-icon {
  grid-area: icon;
  display: grid !important;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  border: 1px solid var(--life-line);
  border-radius: .7rem;
  background: var(--life-tint) !important;
  color: var(--life-ink) !important;
  box-shadow: none;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card > img.r9-life-art {
  grid-area: art;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 0 0 .1rem;
  border-radius: .6rem;
  background: #f3f7ef;
  box-shadow: none;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card > em.mega-title {
  grid-area: title;
  align-self: center;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  gap: .2rem .35rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  color: #245e49 !important;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card > em.mega-title > strong,
html.star2-life-ui:root main .life-card.star2-life-card > em > strong {
  display: inline-flex !important;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  min-width: 1.55em;
  padding: .1em .3em !important;
  margin: 0 !important;
  border-radius: .35em;
  background: var(--life-tint) !important;
  color: #245e49 !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card > em.mega-title > span {
  color: #245e49 !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 0;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card ul {
  grid-area: list;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .45rem;
  align-content: start;
  margin: .1rem 0 0;
  padding: 0;
  color: var(--life-muted);
  font-size: .85rem !important;
  line-height: 1.7 !important;
  list-style: none;
}
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card li { min-width: 0; max-width: 100%; padding: .1rem .3rem; border-radius: .3rem; background: #f4f7f2; }
html.star2-life-ui:root .site-header .nav-life .mega-menu .star2-life-card li::before { content: none; }

/* Phone drawer: the same icon and title, with all service labels kept visible. */
html.star2-life-ui:root[data-star2-nav="compact"] .site-header .nav-life .mega-menu.star2-life-menu { padding: .55rem 0 0; gap: .6rem; background: transparent; border: 0; box-shadow: none; }
html.star2-life-ui:root[data-star2-nav="compact"] .site-header .nav-life .mega-menu > .mega-col.star2-life-card {
  grid-template-columns: 2.6rem minmax(0, 1fr) !important;
  grid-template-areas: 'icon title' 'list list' !important;
  grid-template-rows: auto auto;
  padding: .8rem;
  gap: .55rem .7rem;
  border-radius: .85rem;
}
html.star2-life-ui:root[data-star2-nav="compact"] .site-header .nav-life .mega-menu .star2-life-card > .mega-icon { width: 2.6rem; height: 2.6rem; }
html.star2-life-ui:root[data-star2-nav="compact"] .site-header .nav-life .mega-menu .star2-life-card > img.r9-life-art { display: none; }
html.star2-life-ui:root[data-star2-nav="compact"] .site-header .nav-life .mega-menu .star2-life-card ul { margin: 0; }

/* Life landing pages and category pages use the same card components. */
html.star2-life-ui:root main .life-cards > .life-card.star2-life-card {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-areas: 'art art' 'icon title' 'description description';
  grid-template-rows: auto auto 1fr;
  gap: .85rem .7rem;
  padding: 1rem;
  align-content: start;
  align-items: start;
  min-width: 0;
  border: 1px solid #dae7d8;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 7px 22px #244b3310;
  text-align: left !important;
}
html.star2-life-ui:root main a.life-card.star2-life-card:hover { border-color: #92bca0; box-shadow: 0 10px 26px #244b3317; transform: translateY(-2px); }
html.star2-life-ui:root main .life-card.star2-life-card > img.r9-life-art { grid-area: art; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin: 0; border-radius: .75rem; box-shadow: none; }
html.star2-life-ui:root main .life-card.star2-life-card > .r9-life-card-icon { grid-area: icon; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--life-line); border-radius: .8rem; color: var(--life-ink); background: var(--life-tint); }
html.star2-life-ui:root main .life-card.star2-life-card > em { grid-area: title; align-self: center; display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; min-width: 0; margin: 0 !important; gap: .25rem .45rem; color: #245e49 !important; font-weight: 700 !important; font-size: 1.15rem !important; line-height: 1.6 !important; }
html.star2-life-ui:root main .life-card.star2-life-card .r9-life-label { min-width: 0; color: #245e49; }
html.star2-life-ui:root main .life-card.star2-life-card > p { grid-area: description; margin: 0; color: #586d60; text-align: left !important; }
html.star2-life-ui:root main .life-card.star2-life-card:not(:has(> img.r9-life-art)) { grid-template-areas: 'icon title' 'description description'; grid-template-rows: auto 1fr; }
html.star2-life-ui:root main .page-hero-img.r9-life-hero { height: auto; aspect-ratio: 16 / 9; border: 1px solid #e0e9d9; border-radius: 1.25rem; box-shadow: 0 10px 30px #34583812; background: #f3f7ef; }
html.star2-life-ui:root main .page-hero-img.r9-life-hero img { height: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  html.star2-life-ui:root .star2-life-card { transition: none !important; }
  html.star2-life-ui:root main a.life-card.star2-life-card:hover { transform: none; }
}