/* ============================================================
   Central Metal — temporary front scaffold styles.
   Structural only (layout, visibility, scroll reveal) so the
   scaffold pages stay legible; the real design is rebuilt from
   Figma. Class prefix: cm-
   ============================================================ */

:root {
  --cm-text: #141926;
  --cm-muted: #606369;
  --cm-line: #e5e7eb;
  --cm-soft: #f1f3f5;
  --cm-dark: #1a2332;
}

body {
  /* Plus Jakarta Sans has no Thai glyphs → IBM Plex Sans Thai renders Thai text on /th pages */
  font-family: "Plus Jakarta Sans", "IBM Plex Sans Thai", "Montserrat", system-ui, sans-serif;
  color: var(--cm-text);
  background: #fcfcfc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }

/* ---------- content column ----------
   Figma uses ONE 1024px column for every page (every element starts at x448 and ends at x1472).
   Bootstrap's .container steps 540/720/960/1140/1320, so it is pinned here instead.
   1048 = 1024 content + the 24px Bootstrap gutter (12px each side), so the CONTENT box is exactly 1024px.
   Declared after bootstrap.min.css in base-layout, so this wins at equal specificity. */
.container { max-width: 1048px; }

/* ---------- navbar (Figma 1:255 — 110px = navy top bar 40px + light bottom bar 70px) + mobile drawer ---------- */
.cm-nav { position: sticky; top: 0; z-index: 1030; }

/* top bar 1:264 — navy gradient, pin + address left, contact icons right */
.cm-topbar { background: linear-gradient(90deg, #000e27, #0b3d73); }
.cm-topbar-inner { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.cm-topbar-addr { display: flex; align-items: center; gap: 5px; min-width: 0; color: #f9f9f9; font-size: 14px; font-weight: 500; }
.cm-topbar-addr img { flex: 0 0 auto; width: 23px; height: 23px; }
.cm-topbar-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-topbar-icons { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.cm-topbar-icons a, .cm-topbar-icons .is-off { display: inline-flex; flex: 0 0 auto; width: 23px; height: 23px; transition: opacity .15s; }
.cm-topbar-icons a:hover { opacity: .75; }
/* no value in General Setting yet → the icon still holds its place, dimmed and not clickable */
.cm-topbar-icons .is-off { opacity: .4; cursor: default; }
.cm-topbar-icons img { display: block; width: 100%; height: 100%; }

/* bottom bar 1:256 — #fdfdfd with the design's soft shadow (no border) */
.cm-navbar { background: #fdfdfd; box-shadow: 0 4px 20px rgba(0, 0, 0, .15); }
.cm-nav-inner { display: flex; align-items: stretch; min-height: 70px; }
.cm-nav-logo { display: flex; flex: 0 0 auto; align-items: center; color: inherit; text-decoration: none; }
.cm-nav-logo img { display: block; width: 66px; height: 55px; object-fit: contain; }
.cm-nav-brand { font-weight: 700; }
/* links 1:257–1:263 — Plus Jakarta Sans Medium 16px #08102c, starting 21px after the logo.
   Every label stays on ONE line in both languages: our container is wider than the Figma 1024px column,
   so the two labels the design wrapped onto two lines fit on one here. line-height 1.5 because Thai
   stacks vowels above and tone marks below — they collide at 1.25. */
/* gap is 26px in Figma, but that design wraps two labels onto two lines; on one line at the same 1024px
   column the 7 labels need the tighter gap. margin-right is a floor that cannot collapse: .cm-nav-cta uses
   margin-left:auto, which drops to 0 when space runs out and lets the button touch the last link. */
.cm-nav-links { display: flex; align-items: stretch; gap: 14px; margin-left: 18px; margin-right: 20px; }
.cm-nav-links a, .cm-nav-links span { position: relative; display: flex; align-items: center; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.5; color: #08102c; text-decoration: none; white-space: nowrap; }
/* designed but the route arrives in step 2 → plain text, not a dead link */
.cm-nav-links span { opacity: .55; cursor: default; }
/* active state 1:172 — a red 61x5 bar on the bottom edge of the navbar, not bold/underline */
.cm-nav-links a.active::after, .cm-nav-links span.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 61px; height: 5px; background: #c71e30; transform: translateX(-50%); }
.cm-nav-cta { display: flex; align-items: center; margin-left: auto; }
/* CTA 1:269/1:270 — red, Bold, square, 44px tall.
   Figma pins it to 222x44, but at the 1024px column that leaves the 7 nav links short of room, so the
   button is sized to its own text instead (user decision). It shrinks a lot on Thai ("ขอใบเสนอราคา")
   and only a little on English ("REQUEST A QUOTATION"), which is inherently ~200px wide. */
.cm-btn-quote { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; white-space: nowrap; color: #fdfdfd; text-decoration: none; background: #c71e30; border: 0; border-radius: 0; }
.cm-btn-quote:hover { color: #fdfdfd; background: #a91827; }
.cm-nav-toggle { display: none; align-self: center; margin-left: auto; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; }
.cm-mnav, .cm-mnav-backdrop { display: none; }
.cm-mnav-links span { display: block; padding: 10px 0; opacity: .55; }
/* The column is now pinned at 1024px, so it no longer widens with the viewport and the old
   1400/1200 step-downs would just shrink the type for no reason. Kept at the Figma values
   (16px, 26px gaps) on purpose: this is the "does it fit at full size?" test. */
@media (max-width: 991.98px) {
  .cm-nav-links, .cm-nav-cta, .cm-desktop-only { display: none; }
  .cm-nav-toggle { display: inline-block; }
  /* the navy top bar is desktop-only on mobile — its address and contact icons move into the drawer */
  .cm-topbar { display: none; }
}
/* the drawer's own styling lives at the very end of this file: the language-switcher rules below
   would otherwise win on source order and repaint it light again. */
@media (max-width: 767.98px) {
  /* keep the pin + address but let the text truncate, so the bar never looks empty; the icons keep
     their size because they are the tap targets */
  .cm-topbar-inner { gap: 10px; }
  .cm-topbar-addr { font-size: 12px; }
  .cm-topbar-icons { gap: 10px; }
}
@media (max-width: 479.98px) {
  /* below this the address cannot truncate to anything readable — the footer and Contact page still show it */
  .cm-topbar-addr { display: none; }
  .cm-topbar-icons { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------- buttons ---------- */
.cm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid var(--cm-dark); border-radius: 4px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cm-btn-primary { background: var(--cm-dark); color: #fff; }
.cm-btn-primary:hover { color: #fff; opacity: .9; }
.cm-btn-secondary { background: transparent; color: var(--cm-dark); }
.cm-btn-block { display: flex; width: 100%; }

/* ---------- sections, heroes, grids ---------- */
.cm-section { padding: 40px 0; }
.cm-hero, .cm-page-hero { padding: 56px 0; background: var(--cm-soft); }
.cm-hero-cta, .cm-404-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cm-section-head, .cm-shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cm-cat-grid, .cm-prod-grid, .cm-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.cm-cat, .cm-pcard, .cm-art { display: block; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--cm-line); border-radius: 6px; }
.cm-cat-media, .cm-pcard-media, .cm-art-media { display: block; aspect-ratio: 4 / 3; background: var(--cm-soft); }
.cm-cat-media img, .cm-pcard-media img, .cm-art-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-cat-body, .cm-pcard-body, .cm-art-body { padding: 12px 14px; }
.cm-cat-name, .cm-pcard-name, .cm-art-title { font-weight: 700; color: inherit; text-decoration: none; }
.cm-cat-count, .cm-pcard-desc, .cm-art-desc, .cm-art-foot { color: var(--cm-muted); font-size: 14px; }
.cm-art-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.cm-empty { grid-column: 1 / -1; padding: 48px 16px; text-align: center; }
.cm-empty .t { font-weight: 700; }
.cm-empty .s { color: var(--cm-muted); font-size: 14px; }
/* (the old .cm-cta scaffold block lived here; the real band is .cm-cta-band further down) */

/* ---------- sidebar, pagination, breadcrumb ---------- */
.cm-side-list a { display: block; padding: 6px 0; color: inherit; text-decoration: none; }
.cm-side-list a.active { font-weight: 700; }
.cm-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.cm-pagination a, .cm-pagination span { min-width: 34px; padding: 6px 10px; text-align: center; color: inherit; text-decoration: none; border: 1px solid var(--cm-line); border-radius: 4px; }
.cm-pagination .active { color: #fff; background: var(--cm-dark); border-color: var(--cm-dark); }
.cm-pagination .dots { border-color: transparent; }
.cm-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; color: var(--cm-muted); font-size: 14px; }
.cm-crumbs a { color: inherit; }

/* ---------- product + article detail ---------- */
.cm-pd-main img, .cm-article-hero img { display: block; width: 100%; border-radius: 6px; }
.cm-pd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cm-pd-thumb { width: 72px; cursor: pointer; border: 2px solid transparent; }
.cm-pd-thumb.active { border-color: var(--cm-dark); }
.cm-pd-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cm-pd-meta { margin: 6px 0; }
.cm-pd-info .cm-btn { margin-top: 16px; }
.cm-article-date { margin-bottom: 12px; color: var(--cm-muted); font-size: 14px; }
.cm-article-hero { margin-bottom: 20px; }

/* ---------- contact ---------- */
.cm-contact-row { display: block; padding: 10px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cm-line); }
.cm-field { margin-bottom: 14px; }
.cm-field label { display: block; margin-bottom: 4px; font-weight: 600; }

/* ---------- 404 ---------- */
.cm-404 { padding: 40px 0; text-align: center; }
.cm-404-code { font-size: 72px; font-weight: 800; line-height: 1; }
.cm-404-actions { justify-content: center; }

/* ---------- CTA band (Figma 1:75, 1920x260) ----------
   Navy #03265a panel, pattern on the left, factory photo on the right. It overlaps the footer by 8px. */
.cm-cta-band {
  position: relative; display: flex; align-items: center; min-height: 260px;
  margin-bottom: -8px; overflow: hidden; color: #fefdfd;
  background: #03265a;   /* 1:80 — solid navy fills everything left of the artwork */
}
/* 1:77 — ONE layer. The artwork file already contains the navy panel, its diagonal edge AND the
   factory photo, pre-cropped to the rows Figma shows. Do not stack a second navy/pattern layer on
   top of it (that was the bug: two offset diagonals) and do not mask it. It starts at x380/1920. */
.cm-cta-art {
  position: absolute; top: 0; right: 0; bottom: 0; left: 19.79%;
  background: url("/front/img/cm/cta-band.webp") left center/cover no-repeat;
}
.cm-cta-band .container { position: relative; z-index: 1; }
.cm-cta-inner { max-width: 620px; }
.cm-cta-title { margin: 0; font-size: clamp(24px, 3vw, 37.662px); font-weight: 800; line-height: 1.15; }
.cm-cta-sub { margin: 10px 0 0; font-size: clamp(16px, 1.6vw, 20px); font-weight: 400; }
/* 1:83/1:84 — red 14px Bold, square */
.cm-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 20px; padding: 0 22px;
  font-size: 14px; font-weight: 700; color: #fdfdfd; text-decoration: none;
  background: #c71e30; border: 0; border-radius: 0;
}
.cm-cta-btn:hover { color: #fdfdfd; background: #a91827; }

/* ---------- footer (Figma 1:196, 1920x326) ---------- */
.cm-footer { position: relative; color: #fdfbfc; background: linear-gradient(90deg, #000e27, #0b3d73); box-shadow: 0 -4px 15px rgba(0, 0, 0, .25); }
.cm-footer a { color: inherit; text-decoration: none; }
.cm-footer a:hover { text-decoration: underline; }
.cm-footer-main { padding: 34px 0 20px; }
.cm-footer-cols { display: grid; grid-template-columns: 1.35fr 1fr 1.1fr 1.15fr; gap: 28px; }
.cm-footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cm-footer-logo img { display: block; width: 76px; height: 63px; object-fit: contain; }
/* 1:203 — Bold 20px */
.cm-footer-name { font-size: 20px; font-weight: 700; line-height: 1.2; color: #f9f9f9; }
/* 1:201 — Light 14px */
.cm-footer-blurb { max-width: 340px; margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; }
/* 1:202/1:204/1:205 Medium 16px, each with the red rule 1:210–1:212 under it */
.cm-footer-head { position: relative; margin: 0 0 22px; padding-bottom: 12px; font-size: 16px; font-weight: 500; color: #f9f9f9; }
.cm-footer-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: #c71e30; }
.cm-footer-list, .cm-footer-contact, .cm-footer-social { margin: 0; padding: 0; list-style: none; }
/* 1:206 is a bulleted list in the design */
.cm-footer-list { padding-left: 18px; list-style: disc; }
.cm-footer-list li, .cm-footer-contact li { margin-bottom: 7px; font-size: 14px; font-weight: 300; }
.cm-footer-contact a, .cm-footer-contact .is-off { display: flex; align-items: center; gap: 10px; }
.cm-footer-contact img { flex: 0 0 auto; width: 24px; height: 24px; }
.cm-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cm-footer-social img { display: block; width: 24px; height: 24px; }
/* designed but not routed / not configured yet — visible, dimmed, not clickable */
.cm-footer .is-off { opacity: .55; cursor: default; }
/* 1:227 — map thumbnail, radius 10. No General Setting field yet, so this is the waiting state. */
.cm-footer-map { aspect-ratio: 250 / 147; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.cm-footer-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.cm-footer-map-soon { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; font-size: 13px; font-weight: 300; text-align: center; opacity: .75; }
/* 1:213 under the cyan line 1:214 */
/* 1:213 under the cyan line 1:214.
   It paints its OWN navy background instead of borrowing the parent gradient: the footer is a flex
   item (body.d-flex + .mt-auto), so the gradient can end short of this last strip and leave white
   text on white. padding-bottom also carries the phone's safe area. */
.cm-footer-bottom {
  display: block; position: relative; z-index: 1;
  padding: 12px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 12px;
  background: #041c46; border-top: 1px solid #3cc9ff;
}
.cm-footer-bottom p { margin: 0; color: #f9f9f9; }
@media (max-width: 991.98px) {
  .cm-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  /* the artwork is a wide left-to-right composition; below tablet the text would sit on the photo,
     so the band grows taller, the art drops to the lower half and dims behind the copy */
  .cm-cta-band { min-height: 300px; padding: 28px 0; }
  .cm-cta-art { left: 0; top: auto; height: 46%; opacity: .35; background-position: center right; }
  .cm-cta-inner { max-width: none; }
}
@media (max-width: 575.98px) {
  /* Quick Links and Contact Us stay SIDE BY SIDE — stacking them makes the footer a long ribbon.
     Brand and map take the full width above and below them. */
  .cm-footer-cols { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .cm-fcol-brand, .cm-fcol-map { grid-column: 1 / -1; }
  .cm-footer-map { aspect-ratio: 16 / 9; }
  .cm-footer-blurb { max-width: none; }
  .cm-footer-head { margin-bottom: 16px; padding-bottom: 10px; }
  .cm-footer-list { padding-left: 16px; }
  .cm-footer-list li, .cm-footer-contact li { font-size: 13px; }
  .cm-footer-contact a, .cm-footer-contact .is-off { gap: 8px; }
  .cm-footer-contact img { width: 20px; height: 20px; }
  /* the copyright line is the last thing on the page — give it room and keep it legible on a phone */
  .cm-footer-bottom { padding: 14px 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.5; }
  .cm-footer-bottom .container { width: 100%; }
  .cm-footer-bottom p { color: #fdfbfc; }
}

/* ---------- subtle scroll reveal (base-layout adds .animatethis, then .revealed in view) ---------- */
.animatethis {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s ease, transform .6s ease;
}
.animatethis.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .animatethis { opacity: 1; transform: none; transition: none; }
}

/* ---------- static copy blocks (hero eyebrow/accent, section text, stats, outline, scope) ---------- */
.cm-hero-eyebrow, .cm-page-hero-eyebrow, .cm-eyebrow { margin-bottom: 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #c71e30; }
.cm-accent { color: #c71e30; }
.cm-hero-sub, .cm-page-hero-sub { max-width: 640px; margin: 12px 0 0; }
.cm-section-desc, .cm-shop-intro { color: var(--cm-muted); }
.cm-section-text { max-width: 820px; }
.cm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 24px; }
.cm-stat-num { font-size: 32px; font-weight: 700; line-height: 1.1; color: #c71e30; }
.cm-stat-label { font-weight: 700; }
.cm-stat-sub, .cm-cat-desc { color: var(--cm-muted); font-size: 14px; }
.cm-outline { margin: 0; }
.cm-outline-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--cm-line); }
.cm-outline-row dt { min-width: 200px; font-weight: 700; }
.cm-outline-row dd { margin: 0; }
.cm-scope { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.cm-scope li { padding: 14px 12px; text-align: center; font-weight: 600; background: #fff; border: 1px solid var(--cm-line); border-radius: 6px; }
.cm-pcard-more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #c71e30; text-decoration: none; }
.cm-side-list a.cm-side-child { padding-left: 16px; font-size: 14px; }
/* NOTE: the old scaffold's `.cm-cta-sub { margin: 4px 0 0 }` lived here and, being later in the file,
   overrode the real CTA band rule above. Removed — do not reintroduce a second .cm-cta-sub. */

/* ---------- language switcher: desktop dropdown (flag + caret) + mobile segmented control ---------- */
.cm-flag { display: inline-flex; flex: 0 0 auto; width: 22px; height: 15px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 3px; }
.cm-flag svg { display: block; width: 100%; height: 100%; }
.cm-lang { position: relative; display: inline-flex; align-items: center; }
/* the switcher sits in the navy top bar, so its trigger is light; the dropdown stays a white popup */
.cm-lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; font: inherit; font-size: 13px; line-height: 1; color: #f9f9f9; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 6px; transition: border-color .15s, background .15s; }
.cm-lang-btn:hover, .cm-lang.open .cm-lang-btn { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); }
.cm-lang-caret { width: 10px; height: 7px; transition: transform .15s; }
.cm-lang.open .cm-lang-caret { transform: rotate(180deg); }
.cm-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1060; display: none; flex-direction: column; min-width: 150px; padding: 6px; background: #fff; border: 1px solid var(--cm-line); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .12); }
.cm-lang.open .cm-lang-menu { display: flex; }
.cm-lang-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 14px; color: var(--cm-text); white-space: nowrap; text-decoration: none; border-radius: 6px; }
.cm-lang-menu a:hover { background: var(--cm-soft); }
.cm-lang-menu a.active { font-weight: 700; background: var(--cm-soft); }
.cm-mnav-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cm-mnav-lang .lbl { font-size: 13px; color: var(--cm-muted); }
.cm-mnav-lang .seg { display: flex; gap: 4px; padding: 4px; background: var(--cm-soft); border: 1px solid var(--cm-line); border-radius: 8px; }
.cm-mnav-lang .seg a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; color: var(--cm-text); text-decoration: none; border-radius: 6px; }
.cm-mnav-lang .seg a.active { font-weight: 700; background: #fff; }
@media (max-width: 991.98px) {
  .cm-lang { display: none; }
}

/* ---------- mobile drawer, themed like the rest of the site ----------
   Placed last on purpose: it overrides the light language-switcher rules above.
   Navy gradient like the navbar top bar and the footer, red accent on the active row. */
@media (max-width: 991.98px) {
  .cm-mnav.open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    width: 86vw; max-width: 340px; padding: 16px 20px 24px; overflow-y: auto;
    color: #fdfbfc; background: linear-gradient(160deg, #000e27 0%, #0b3d73 100%);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .35);
  }
  .cm-mnav-backdrop.open { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background: rgba(0, 14, 39, .55); }

  .cm-mnav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .cm-mnav-logo { display: inline-flex; }
  .cm-mnav-logo img { display: block; width: 52px; height: 43px; object-fit: contain; }
  .cm-mnav-close { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 24px; line-height: 1; color: #fdfbfc; background: rgba(255, 255, 255, .10); border: 0; border-radius: 8px; cursor: pointer; }
  .cm-mnav-close:hover { background: rgba(255, 255, 255, .2); }

  .cm-mnav-links { margin-top: 8px; }
  .cm-mnav-links a, .cm-mnav-links span { display: block; padding: 12px 0 12px 12px; font-size: 15px; color: #fdfbfc; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); border-left: 3px solid transparent; }
  .cm-mnav-links a.active, .cm-mnav-links span.active { font-weight: 700; background: rgba(255, 255, 255, .06); border-left-color: #c71e30; }
  .cm-mnav-links span { opacity: .5; }

  /* contact rows: the same values the desktop top bar shows */
  .cm-mnav-contact { margin: 18px 0 0; padding: 0; list-style: none; }
  .cm-mnav-contact li { margin-bottom: 10px; font-size: 13px; font-weight: 300; line-height: 1.5; }
  .cm-mnav-contact a, .cm-mnav-contact .is-off { display: flex; align-items: flex-start; gap: 10px; color: #fdfbfc; text-decoration: none; }
  .cm-mnav-contact .is-off { opacity: .55; }
  .cm-mnav-contact img { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }

  .cm-mnav-lang { margin-top: 18px; }
  .cm-mnav-lang .lbl { color: rgba(255, 255, 255, .7); }
  .cm-mnav-lang .seg { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); }
  .cm-mnav-lang .seg a { color: #fdfbfc; }
  .cm-mnav-lang .seg a.active { background: rgba(255, 255, 255, .22); }

  .cm-mnav-cta { margin-top: 18px; }
  .cm-mnav-cta .cm-btn-quote { width: 100%; font-size: 16px; }
}