/* ═════════════════════════════════════════════════════════════════════
   AcmeMega — pixel-perfect CSS for ACMEv5 mock (localhost:3000)
   Matches AcmeMega.runtime.ts class names. Three panel layouts:
     1. .am-tabs-panel              — horizontal tabs + featured + content
     2. .am-tabs-panel.am-tabs-news — magazine layout (16:10 featured + 3-col news)
     3. .am-services-panel          — vertical service tabs (col-span-4) + detail (col-span-8)
   ═════════════════════════════════════════════════════════════════════ */

/* ROOT-level fallbacks (not inside .am) so body.preset-* CAN override them
   for .am descendants. Previously `--am-primary` was declared INSIDE `.am`,
   which made the body preset useless — `.am`'s declaration won via the
   cascade for any .am descendant. Moving the defaults to :root lets the
   preset class on body cascade down without being shadowed. */
:root {
  --am-bg: #faf8f5;
  --am-fg: #0f0a09;
  --am-card: #ffffff;
  --am-muted: #f3f1ec;
  --am-muted-30: rgba(243,241,236,0.5);
  --am-muted-fg: #5b5352;
  --am-primary: #df0000;
  --am-primary-50: rgba(223,0,0,0.08);
  --am-primary-fg: #ffffff;
  /* Primary translucent tints - preset-following (see @supports below). */
  --am-primary-05: rgba(223,0,0,0.05);
  --am-primary-10: rgba(223,0,0,0.10);
  --am-primary-12: rgba(223,0,0,0.12);
  --am-primary-20: rgba(223,0,0,0.20);
  --am-primary-30: rgba(223,0,0,0.30);
  --am-primary-40: rgba(223,0,0,0.40);
  --am-border: #dfdeda;
  --am-border-50: rgba(223,222,218,0.5);
  --am-radius: 0.5rem;
  --am-radius-lg: 0.75rem;
  --am-radius-xl: 0.875rem;
  --am-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --am-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --am-shadow-lg: 0 24px 50px -12px rgba(0,0,0,0.18);
  --am-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --am-trans: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.am {
  font-family: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--am-fg);
  font-size: 14px;
}
.am *, .am *::before, .am *::after { box-sizing: border-box; }
:where(.am button) { cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; }
:where(.am ul) { list-style: none; padding: 0; margin: 0; }
:where(.am a) { color: inherit; text-decoration: none; }
:where(.am img) { display: block; max-width: 100%; height: auto; }
.am .am-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--am-muted, #f3f1ec), #e7e5e0);
  color: var(--am-muted-fg, #6a655e);
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; user-select: none;
  border-radius: inherit;
}
:where(.am input) { font: inherit; color: inherit; }
.am .am-ico svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* ─── Eyebrow (only when runtime renders it; skin overrides via data-eyebrow="skin") ─── */
.am-eyebrow { background: var(--am-fg); color: var(--am-bg); font-size: 0.75rem; }
.am-eyebrow-inner { max-width: 1280px; margin: 0 auto; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.am-eyebrow-left { display: inline-flex; align-items: center; gap: 1rem; }
.am-eyebrow-cell { display: inline-flex; align-items: center; gap: 0.375rem; }
.am-eyebrow-cell .am-ico svg { width: 12px; height: 12px; }
.am-eyebrow-hours { display: none; }
@media (min-width: 640px) { .am-eyebrow-hours { display: inline-flex; } }
.am-eyebrow-right { display: inline-flex; align-items: center; gap: 1rem; }
.am-eyebrow-link { color: var(--am-bg); opacity: 0.85; transition: opacity var(--am-trans), color var(--am-trans); }
.am-eyebrow-link:hover { opacity: 1; color: var(--am-primary); }

/* ─── Sticky shell ─── */
.am-sticky { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--am-card); }
.am-header { background: var(--am-card); border-bottom: 1px solid transparent; }
/* min-width:0 lets flex children shrink instead of overflowing the inner.
   Without it, adding the 3-mode toggle (≈92px) pushed .am-actions past the
   right edge → 129px horizontal-scroll overflow. The toggle has since been
   moved into the AcmeMega Builder, so the overflow source is gone — but
   keeping min-width:0 anyway as a safety guard against future toolbar
   additions. */
.am-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; height: 80px; display: flex; align-items: center; gap: 1rem; min-width: 0; }
/* Horizontal-overflow guard + sticky menu (mock-parity):
   Mock behavior: eyebrow scrolls away, ONLY main menu bar sticks to top.
   The hidden mega-menu service panes (.am-service-pane-*) inside the
   absolute-positioned .am-mega panel reach off-viewport when collapsed,
   contributing ~30-70px to document.scrollWidth.
   Previous attempts that didn't work:
   - `html { overflow-x: clip }` clipped DNN personabar pencil.
   - `.am { overflow-x: clip }` made .am a sticky containing-block, so
     the inner sticky never travelled with viewport scroll.
   - `.am { position: sticky }` made eyebrow stick too (off-mock).
   Current fix: put both sticky AND overflow-x clip on .am-sticky (the
   header, NOT including eyebrow). The mega-menu panel lives inside
   .am-sticky so its overflow gets clipped there. Sticky on the same
   element still works — sticky's own overflow doesn't affect its
   containing block (which is body, the scrolling viewport). */
/* Sticky strategy (mock parity):
   .am-sticky's parent is .am (height = eyebrow + menu = ~120px). Sticky
   elements are bounded by their containing-block parent — once .am scrolls
   off-viewport (after ~120px), .am-sticky scrolls off too. To make the
   menu stick forever like the mock, we put `position: sticky` on .am
   itself (not .am-sticky) so its containing block is body (full page).
   Then we HIDE the eyebrow when scrolled, so visually only the menu bar
   remains stuck. The :has() selector reads the existing am-scrolled class
   that initSticky() toggles on .am-sticky.
   Clip on .am-header (child of .am-sticky) handles mega-menu overflow
   without interfering with .am's sticky behavior. */
.am {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--am-card);
}
.acme-theme .am { top: 0; }
/* Eyebrow is NOT sticky: it scrolls away with the page so that, once
   scrolled, only the main menu bar (.am, sticky top:0) stays pinned — the
   single-bar look of the mock's SPA pages. .am is positioned so it paints
   above the static eyebrow as the eyebrow scrolls up behind it, and there
   is no layout jump (the eyebrow stays in normal flow). */
.acme-eyebrow { position: static; }
.am-header { overflow: visible; }
/* Stretch nav-item AND its parent .am-nav to fill the full header-inner
   height (80px). Without this, the absolute-positioned .am-mega panel
   (`top: 100%` of nav-item) starts ~6px ABOVE the menu's bottom edge,
   leaving a horizontal gap where page background shows through —
   especially visible when scrolled and the menu is sticky.
   Two stretches needed: .am-nav stretches inside header-inner (which is
   `align-items: center` by default), then .am-nav-item stretches inside
   .am-nav (which is also `align-items: center`). */
.am-nav { align-self: stretch; }
.am-nav-item { contain: layout; align-self: stretch; display: flex; align-items: center; }

/* ─────────────────────────────────────────────────────────────────
 * PersonaBar shift override — mock parity
 * ───────────────────────────────────────────────────────────────────
 * DNN PersonaBar adds `body.personabar-visible` and an inline
 * `body { margin-left: 80px }` (or 320px when expanded) so DNN's own
 * content area slides clear of the sidebar. The mock has no equivalent
 * sidebar — content sits viewport-edge-to-edge with `max-width:1280` +
 * `margin:0 auto`. The body shift made our header land at x=113 instead
 * of mock's x=80, which the user reported as "trang bi lech sang phai".
 *
 * We undo the shift HERE (skin-scoped) so the .am skin renders identically
 * to the mock. PersonaBar is `position:fixed; z-index:9999999` so it stays
 * pinned to viewport-x=0 and overlays the leftmost 80px. The skin's
 * max-width:1280 + auto margins centers content in the visible region —
 * the wordmark, nav items, hero text all sit safely past x=80 on a normal
 * viewport, so PersonaBar overlap is on empty gutter, not content.
 * ───────────────────────────────────────────────────────────────── */
body[class*="acme-mb-"]:not(.personabar-visible):not(.acme-personabar-visible),
body:has(#cissMenu):not(.personabar-visible):not(.acme-personabar-visible),
body:has(.acme-eyebrow):not(.personabar-visible):not(.acme-personabar-visible) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body[class*="acme-mb-"]:not(.personabar-visible):not(.acme-personabar-visible) #cissMenu,
body[class*="acme-mb-"]:not(.personabar-visible):not(.acme-personabar-visible) .acme-eyebrow,
body[class*="acme-mb-"]:not(.personabar-visible):not(.acme-personabar-visible) .acme-theme {
  margin-left: 0 !important;
}
.am-sticky.am-scrolled .am-header-inner { height: 64px; }

/* ─── Scroll colour shift (mock SPA parity) ───
   The mock's SPA pages fade the nav from clear-over-hero to an opaque,
   blurred, shadowed surface once you scroll. initSticky() already toggles
   .am-scrolled at scrollY>56 — here the menu bar takes on that surface:
   a translucent blurred background + stronger shadow. Applies on every
   page (safe), giving the visible "menu bar đổi màu khi scroll" effect. */
.am-sticky .am-header {
  transition: background var(--am-trans), box-shadow var(--am-trans), border-color var(--am-trans), backdrop-filter var(--am-trans);
}
.am-sticky.am-scrolled .am-header {
  background: rgba(255, 255, 255, 0.82) !important;                      /* fallback */
  background: color-mix(in srgb, var(--am-card) 82%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
}

/* Mobile menu toggle (left of brand) */
.am-mobile-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--am-radius); color: var(--am-fg); transition: background var(--am-trans); }
.am-mobile-toggle:hover { background: var(--am-muted); }
.am-mobile-toggle .am-ico svg { width: 24px; height: 24px; }

/* Brand */
.am-brand { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.am-brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; color: var(--am-fg); }
.am-brand-suffix { font-size: 1.5rem; font-weight: 300; color: var(--am-muted-fg); letter-spacing: -0.025em; }
@media (min-width: 768px) { .am-brand-name, .am-brand-suffix { font-size: 1.875rem; } }
/* Site-logo image (set via PortalSettings.LogoFile / window.__acmeMegaBrandLogo).
   Without explicit sizing, the SVG renders at its natural 155×62 which is too
   big for the 64-80px header. Constrain proportionally per breakpoint. */
.am .am-brand-img { display: block; height: 40px !important; width: auto !important; max-width: 180px; object-fit: contain; }
@media (max-width: 640px) {
  .am .am-brand-img { height: 28px !important; max-width: 120px; }
}

/* ─── Top nav ─── */
.am-nav { display: none; align-items: center; gap: 0; flex: 0 1 auto; }
@media (min-width: 1024px) { .am-nav { display: flex; } }
.am-nav-item { position: relative; }
.am-nav-link { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 1.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: rgba(15,10,9,0.7); transition: color var(--am-trans); white-space: nowrap; }
.am-nav-link::after { content: ""; position: absolute; bottom: 1.25rem; left: 1rem; right: 1rem; height: 2px; background: var(--am-primary); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.am-nav-link:hover { color: var(--am-fg); }
.am-nav-link:hover::after { transform: scaleX(1); }
.am-nav-item.am-expanded > .am-nav-link { color: var(--am-primary); }
.am-nav-item.am-expanded > .am-nav-link::after { transform: scaleX(1); }
.am-nav-trigger { cursor: pointer; }
.am-chev .am-ico, .am-nav-link .am-chev { display: inline-flex; }
.am-chev { width: 14px; height: 14px; transition: transform 300ms ease; opacity: 0.6; }
.am-chev svg { width: 14px !important; height: 14px !important; }
.am-nav-item.am-expanded .am-chev { transform: rotate(180deg); opacity: 1; }
.am-nav-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; background: var(--am-primary); color: var(--am-primary-fg); font-size: 9px; font-weight: 700; line-height: 1; margin-left: 0.25rem; }

/* ─── Mega panel container ─── */
/* Animation strategy (mock parity with Tailwind v4 `animate-in fade-in
   slide-in-from-top-2 duration-200`):
   - Outer `.am-mega` owns POSITION (positionMega rewrites transform/left/
     width on every open). We don't transition its transform — that would
     fight positionMega and produce visible slide-jitter.
   - Inner `.am-mega-card` owns the ENTRANCE animation (opacity 0→1 +
     translateY -8px→0). Inner element has no positioning concerns, so a
     keyframe on transform is safe and matches the mock 1:1. */
.am-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(72rem, calc(100vw - 32px));
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 200ms;
  pointer-events: none;
}
.am-nav-item.am-expanded .am-mega {
  transition: visibility 0s linear 0s;
}

/* IMPORTANT — animation removed 2026-05-12.
   Previously: `animation: am-mega-enter 200ms ease both` on .am-mega-card.
   That keyframe got stuck at the `from` state (opacity 0) in the live
   probe — the panel was technically rendered but invisible, leaving the
   hero text visible THROUGH the panel where it should be covered. Root
   cause: `both` fill-mode on a keyframe attached to a descendant of a
   visibility:hidden parent doesn't progress past `from` reliably.
   The outer .am-mega already fades in via opacity transition (line ~116);
   we accept the slight visual divergence from the mock's slide-in-from-top
   in exchange for a guaranteed-opaque panel background. */
.am-mega.am-mega-left { left: 0; transform: translateX(0); }
.am-mega.am-mega-right { left: auto; right: 0; transform: translateX(0); }
.am-nav-item.am-expanded .am-mega { opacity: 1; visibility: visible; pointer-events: auto; }
/* Invisible hover bridge: extends the hover-active area UP past the trigger
   bottom AND below the panel so cursor transit doesn't trip mouseleave. */
.am-mega::before { content: ""; position: absolute; top: -24px; left: -16px; right: -16px; height: 24px; pointer-events: none; }
.am-nav-item.am-expanded .am-mega::before { pointer-events: auto; }
/* Make the entire nav-item geometrically extend over the panel area while
   expanded, so hover stays anchored to the parent. */
.am-nav-item.am-expanded::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
  z-index: 49;
}
.am-mega-arrow { position: absolute; top: -9px; left: var(--am-mega-arrow-left, 50%); width: 0; height: 0; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--am-border-50); background: transparent; margin: 0; z-index: 2; pointer-events: none; }
.am-mega-arrow::after { content: ""; position: absolute; left: -9px; top: 1px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--am-card); }
.am-mega-card { position: relative; z-index: 0; background: var(--am-card); border: 1px solid var(--am-border-50); border-radius: var(--am-radius-xl); box-shadow: var(--am-shadow-2xl); overflow: hidden; width: min(72rem, calc(100vw - 32px)); }

/* ─── Panel: TABS (About Us / Shop / News) ─── */
.am-tabs-panel { display: flex; flex-direction: column; }

.am-tabs-header { position: relative; padding: 1.25rem 2rem 0; border-bottom: 1px solid var(--am-border); background: linear-gradient(to right, var(--am-muted-30), transparent, var(--am-muted-30)); }
.am-tabs-header.am-overview-hidden { padding-top: 0.75rem; background: var(--am-card); }
.am-tabs-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--am-muted-fg); }
.am-tabs-viewall { float: right; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 500; color: var(--am-primary); transition: color var(--am-trans); }
.am-tabs-viewall:hover { color: var(--am-primary); }
.am-tabs-viewall .am-ico svg { width: 12px; height: 12px; transition: transform var(--am-trans); }
.am-tabs-viewall:hover .am-ico svg { transform: translateX(2px); }

/* Tab strip */
.am-tab-strip { display: flex; gap: 0.25rem; margin-top: 1rem; }
.am-tab { position: relative; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--am-muted-fg); background: transparent; border: 1px solid transparent; border-bottom: 0; border-top-left-radius: var(--am-radius); border-top-right-radius: var(--am-radius); transition: background var(--am-trans), color var(--am-trans); margin-bottom: -1px; }
.am-tab:hover { background: var(--am-muted-30); color: var(--am-fg); }
.am-tab.am-tab-active { background: var(--am-card); color: var(--am-fg); border-color: var(--am-border-50); box-shadow: var(--am-shadow-sm); }

/* Tab body */
.am-tabs-body { position: relative; }
.am-tab-pane { display: none; }
/* Note: previously animation: am-fade-in 200ms ease both, but the keyframe
   got stuck at opacity:0 in the same way the .am-mega-card keyframe did
   (see explanation near line 130). The visible tab pane just renders
   directly — the parent .am-mega already handles the fade-in. */
.am-tab-pane.am-tab-pane-active { display: block; }

.am-tab-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .am-tab-grid { grid-template-columns: repeat(12, 1fr); } }

.am-featured-col { grid-column: span 12 / span 12; padding: 1.5rem; border-right: 1px solid var(--am-border); background: linear-gradient(135deg, var(--am-muted-30), transparent); }
.am-featured-col-news { background: linear-gradient(135deg, var(--am-primary-05), var(--am-muted-30) 50%, transparent); }
@media (min-width: 768px) { .am-featured-col { grid-column: span 4 / span 4; } }

.am-featured-link { display: block; }
.am-featured-img { position: relative; overflow: hidden; border-radius: var(--am-radius-xl); box-shadow: var(--am-shadow-md); aspect-ratio: 4 / 3; }
.am-featured-img-news { aspect-ratio: 16 / 10; margin-bottom: 1rem; }
.am-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.am-featured-link:hover .am-featured-img img { transform: scale(1.06); }
.am-featured-badge { position: absolute; top: 0.75rem; left: 0.75rem; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--am-primary); color: var(--am-primary-fg); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: var(--am-shadow-sm); z-index: 2; }
.am-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,10,9,0.9), rgba(15,10,9,0.4) 60%, transparent); display: flex; align-items: flex-end; }
.am-featured-overlay-inner { padding: 1.25rem; color: #fff; width: 100%; }
.am-featured-overlay-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--am-primary); color: var(--am-primary-fg); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; backdrop-filter: blur(4px); }
.am-featured-title-on-img { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.375rem; color: #fff; }
.am-featured-desc-on-img { font-size: 0.875rem; line-height: 1.4; margin: 0; color: rgba(255,255,255,0.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-featured-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: gap var(--am-trans); }
.am-featured-more .am-ico svg { width: 14px; height: 14px; }
.am-featured-link:hover .am-featured-more { gap: 0.625rem; }

/* News-style featured caption (text below image) */
.am-featured-caption { padding-top: 0.875rem; }
.am-featured-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--am-primary); margin-bottom: 0.5rem; }
.am-featured-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--am-fg); margin: 0 0 0.5rem; transition: color var(--am-trans); }
.am-featured-link:hover .am-featured-title { color: var(--am-primary); }
.am-featured-desc { font-size: 0.875rem; line-height: 1.55; color: var(--am-muted-fg); margin: 0; }
.am-featured-col-news .am-featured-more { color: var(--am-primary); margin-top: 0.625rem; }
.am-featured-col-news .am-featured-more .am-ico svg { width: 16px; height: 16px; }

/* Content column */
.am-content-col { grid-column: span 12 / span 12; padding: 1.5rem; }
@media (min-width: 768px) { .am-content-col { grid-column: span 8 / span 8; } }
/* When the tab has NO featured column (e.g. an embedded DNN module is the
   only content), let the content column fill all 12 cols so the right ~33%
   of the dropdown isn't left blank. :has() is supported in all modern
   browsers (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). */
@media (min-width: 768px) {
  .am-tab-grid:not(:has(> .am-featured-col)) > .am-content-col { grid-column: 1 / -1; }
}

/* News (cards layout) */
.am-news-wrap { display: flex; flex-direction: column; gap: 1rem; }
.am-news-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; }
.am-news-wrap-magazine .am-news-head { border-bottom: 1px solid var(--am-border); }
.am-news-head-title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-fg); }
.am-news-wrap-magazine .am-news-head-title { font-weight: 700; letter-spacing: 0.1em; }
.am-news-head-title .am-ico svg { width: 16px; height: 16px; color: var(--am-primary); }
.am-news-head-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--am-primary); }
.am-news-head-link:hover { text-decoration: underline; }
.am-news-head-link .am-ico svg { width: 12px; height: 12px; }

/* Magazine grid (News & Events) */
.am-news-grid-magazine { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; row-gap: 1rem; }
.am-news-mag-item { display: block; padding: 0 0.5rem 1rem; margin: 0 -0.5rem; border-bottom: 1px solid var(--am-border-50); border-radius: var(--am-radius); transition: background var(--am-trans); }
.am-news-mag-item:hover { background: var(--am-muted-30); }
.am-news-mag-item:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 0; }
.am-news-mag-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.am-news-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-primary); }
.am-news-date { font-size: 10px; color: var(--am-muted-fg); }
.am-news-title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--am-fg); margin: 0 0 0.375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--am-trans); }
.am-news-mag-item:hover .am-news-title { color: var(--am-primary); }
.am-news-excerpt { font-size: 0.75rem; line-height: 1.5; color: var(--am-muted-fg); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Card grid (News appearing under non-news menus) */
.am-news-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.am-news-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--am-radius-xl); border: 1px solid transparent; background: var(--am-muted-30); transition: border-color var(--am-trans), background var(--am-trans), box-shadow var(--am-trans); }
.am-news-card:hover { border-color: var(--am-primary-20); background: var(--am-muted); box-shadow: var(--am-shadow-md); }
.am-news-card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.am-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.am-news-card:hover .am-news-card-img img { transform: scale(1.1); }
.am-news-card-badge { position: absolute; top: 0.5rem; left: 0.5rem; padding: 2px 8px; border-radius: 999px; background: var(--am-primary); color: var(--am-primary-fg); font-size: 9px; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(4px); }
.am-news-card-cap { padding: 0.75rem; }
.am-news-card-title { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--am-trans); }
.am-news-card:hover .am-news-card-title { color: var(--am-primary); }
.am-news-card-date { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--am-muted-fg); }
.am-news-card-date .am-ico svg { width: 12px; height: 12px; }

/* Quick links */
.am-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.am-link-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--am-radius-xl); border: 1px solid transparent; background: var(--am-muted-30); transition: border-color var(--am-trans), background var(--am-trans), box-shadow var(--am-trans); }
.am-link-card:hover { border-color: var(--am-primary-20); background: var(--am-muted); box-shadow: var(--am-shadow-md); }
.am-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--am-radius-xl); background: var(--am-primary-50); color: var(--am-primary); flex-shrink: 0; transition: background var(--am-trans), color var(--am-trans); }
.am-link-icon .am-ico, .am-link-icon svg { width: 20px; height: 20px; }
.am-link-card:hover .am-link-icon { background: var(--am-primary); color: var(--am-primary-fg); }
.am-link-text { flex: 1; min-width: 0; }
.am-link-name { display: block; font-size: 0.875rem; font-weight: 600; color: var(--am-fg); transition: color var(--am-trans); }
.am-link-card:hover .am-link-name { color: var(--am-primary); }
.am-link-desc { font-size: 0.75rem; color: var(--am-muted-fg); margin: 0.125rem 0 0; }
.am-link-arrow { margin-left: auto; opacity: 0; color: var(--am-muted-fg); transition: opacity var(--am-trans), transform var(--am-trans); }
.am-link-arrow svg { width: 16px; height: 16px; }
.am-link-card:hover .am-link-arrow { opacity: 1; transform: translateX(4px); }

/* Embedded DNN/Oqtane HTML module snapshots inside a mega panel. */
.am-embedded-module {
  display: block;
  /* An embedded module is a full content block — span every column of the
     mega grid it sits in (.am-links-grid / .am-service-subs-grid are 2-col)
     and size to its content instead of a cramped fixed-height scroll box. */
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--am-fg);
  box-shadow: none;
}
.am-embedded-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--am-border);
}
.am-embedded-module-kicker {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--am-primary);
  white-space: nowrap;
}
.am-embedded-module-title {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-embedded-module-body {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.am-embedded-module-body *,
.am-embedded-module-body *::before,
.am-embedded-module-body *::after {
  box-sizing: border-box;
  max-width: 100% !important;
}
.am-embedded-module-body img,
.am-embedded-module-body video,
.am-embedded-module-body svg {
  max-width: 100% !important;
  height: auto !important;
}
.am-embedded-module-body section,
.am-embedded-module-body article,
.am-embedded-module-body .container,
.am-embedded-module-body .acme-container,
.am-embedded-module-body [class*="container"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.am-embedded-module-body h1 { font-size: 1.25rem !important; line-height: 1.15 !important; }
.am-embedded-module-body h2 { font-size: 1.1rem !important; line-height: 1.2 !important; }
.am-embedded-module-body h3 { font-size: 1rem !important; line-height: 1.25 !important; }
.am-embedded-module-body p { margin: 0.35rem 0 !important; }

/* Designs mega menu: plaintext tabbed index, no thumbnails/descriptions. */
.am-designs-panel {
  display: flex;
  flex-direction: column;
  min-height: 170px;
}

.am-designs-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--am-border);
  background: linear-gradient(to right, var(--am-muted-30), transparent, var(--am-muted-30));
}
.am-designs-header.am-overview-hidden { padding: 0.75rem 1.5rem; background: var(--am-card); }

.am-designs-kicker {
  margin-bottom: 1rem;
  color: var(--am-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.am-designs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.am-designs-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--am-radius-lg);
  background: transparent;
  color: var(--am-muted-fg);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--am-trans), border-color var(--am-trans), color var(--am-trans), box-shadow var(--am-trans);
}

.am-designs-tab:hover,
.am-designs-tab.am-tab-active {
  border-color: transparent;
  background: var(--am-primary);
  color: var(--am-primary-fg);
  box-shadow: var(--am-shadow-md);
}

.am-designs-tab-ico svg {
  width: 16px;
  height: 16px;
}

.am-designs-body {
  padding: 1.5rem;
}

.am-designs-pane {
  display: none;
}

.am-designs-pane.am-tab-pane-active {
  display: block;
}

.am-designs-pane-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.am-designs-pane-head h3 {
  margin: 0;
  color: var(--am-fg);
  font-size: 1.2rem;
  line-height: 1.2;
}

.am-designs-pane-head p {
  margin: 0;
  color: var(--am-muted-fg);
  font-size: 0.78rem;
  font-weight: 650;
}

.am-designs-link-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem 2rem;
}

.am-designs-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--am-fg) 82%, transparent);
  font-weight: 650;
  transition: color var(--am-trans);
}

.am-designs-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: calc(100% - 1rem);
  height: 1px;
  background: var(--am-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--am-trans);
}

.am-designs-link:hover {
  color: var(--am-primary);
}

.am-designs-link:hover::after {
  transform: scaleX(1);
}

.am-designs-link-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-designs-link-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--am-trans), transform var(--am-trans);
}

.am-designs-link:hover .am-designs-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

.am-designs-link-arrow svg {
  width: 14px;
  height: 14px;
}

.am-mega.am-mega-fullwidth .am-designs-panel {
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .am-designs-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .am-designs-link-grid { grid-template-columns: 1fr; }
}

/* Premium shop mega menu: category rail, detail columns, benefit bar. */
.am-shop-panel { display: flex; flex-direction: column; }
.am-shop-main { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 444px; }
.am-shop-sidebar { padding: 1rem; border-right: 1px solid var(--am-border-50); background: var(--am-muted-30); }
.am-shop-kicker { margin: 0 0 1rem; padding: 0 0.75rem; color: var(--am-muted-fg); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.am-shop-cat-list { display: grid; gap: 0.25rem; }
.am-shop-cat { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) 16px; gap: 0.75rem; align-items: center; padding: 0.75rem; border: 0; border-radius: var(--am-radius-lg); background: transparent; color: var(--am-fg); font: inherit; text-align: left; cursor: pointer; transition: background var(--am-trans), color var(--am-trans), box-shadow var(--am-trans); }
.am-shop-cat:hover { background: var(--am-muted); }
.am-shop-cat.am-tab-active { background: var(--am-primary); color: var(--am-primary-fg); box-shadow: var(--am-shadow-md); }
.am-shop-cat-ico { width: 36px; height: 36px; border-radius: var(--am-radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--am-muted); color: currentColor; transition: background var(--am-trans); }
.am-shop-cat.am-tab-active .am-shop-cat-ico { background: color-mix(in srgb, var(--am-primary-fg) 18%, transparent); }
.am-shop-cat-ico svg { width: 20px; height: 20px; }
.am-shop-cat-copy { min-width: 0; display: block; }
.am-shop-cat-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 750; }
.am-shop-cat-desc { display: block; margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--am-muted-fg); font-size: 0.76rem; }
.am-shop-cat.am-tab-active .am-shop-cat-desc { color: color-mix(in srgb, var(--am-primary-fg) 72%, transparent); }
.am-shop-cat-arrow { opacity: 0.55; transform: rotate(-90deg); }
.am-shop-cat-arrow svg { width: 16px; height: 16px; }
.am-shop-content { padding: 1.5rem; }
.am-shop-pane { display: none; }
.am-shop-pane.am-tab-pane-active { display: block; }
.am-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.am-shop-title { margin: 0; color: var(--am-fg); font-size: 1.12rem; font-weight: 800; line-height: 1.2; }
.am-shop-viewall { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--am-primary); font-size: 0.86rem; font-weight: 650; }
.am-shop-viewall svg { width: 13px; height: 13px; }
.am-shop-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.am-shop-columns[data-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.am-shop-columns[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 260px)); }
.am-shop-columns[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.am-shop-col-title { margin: 0 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--am-border-50); color: var(--am-fg); font-size: 0.86rem; font-weight: 800; }
.am-shop-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.am-shop-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.42rem 0; color: var(--am-muted-fg); font-size: 0.88rem; transition: color var(--am-trans); }
.am-shop-link:hover { color: var(--am-primary); }
.am-shop-link-name { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-shop-link-name::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--am-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--am-trans); }
.am-shop-link:hover .am-shop-link-name::after { transform: scaleX(1); }
.am-shop-badge, .am-dd-badge { flex-shrink: 0; border-radius: 999px; background: #fff3cd; color: #9a6a00; padding: 0.15rem 0.5rem; font-size: 0.7rem; font-weight: 750; }
.am-shop-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--am-border-50); background: var(--am-muted-30); }
.am-shop-benefit { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.am-shop-benefit-ico { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--am-primary-50); color: var(--am-primary); flex: 0 0 auto; }
.am-shop-benefit-ico svg { width: 20px; height: 20px; }
.am-shop-benefit-copy { min-width: 0; display: block; }
.am-shop-benefit-title { display: block; color: var(--am-fg); font-size: 0.86rem; font-weight: 750; }
.am-shop-benefit-desc { display: block; color: var(--am-muted-fg); font-size: 0.76rem; }

@media (max-width: 960px) {
  .am-shop-main { grid-template-columns: 1fr; }
  .am-shop-sidebar { border-right: 0; border-bottom: 1px solid var(--am-border-50); }
  .am-shop-cat-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .am-shop-columns, .am-shop-columns[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-shop-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .am-shop-cat-list, .am-shop-columns, .am-shop-columns[data-cols], .am-shop-benefits { grid-template-columns: 1fr; }
}

/* Categories */
.am-cats-wrap { display: flex; flex-direction: column; gap: 1rem; }
.am-cats-head { display: flex; align-items: center; justify-content: space-between; }
.am-cats-head-title { margin: 0; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-fg); }
.am-cats-head-count { font-size: 0.75rem; color: var(--am-muted-fg); }
.am-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.am-cat-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--am-radius-xl); border: 1px solid transparent; background: var(--am-muted-30); transition: border-color var(--am-trans), background var(--am-trans), box-shadow var(--am-trans); }
.am-cat-card:hover { border-color: var(--am-primary-20); background: var(--am-muted); box-shadow: var(--am-shadow-md); }
.am-cat-img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.am-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.am-cat-card:hover .am-cat-img img { transform: scale(1.1); }
.am-cat-cap { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; }
.am-cat-name { display: block; font-size: 0.875rem; font-weight: 500; color: var(--am-fg); transition: color var(--am-trans); }
.am-cat-card:hover .am-cat-name { color: var(--am-primary); }
.am-cat-desc { font-size: 0.75rem; color: var(--am-muted-fg); margin: 0.125rem 0 0; }
.am-cat-arrow { color: var(--am-muted-fg); opacity: 0; transition: opacity var(--am-trans), transform var(--am-trans), color var(--am-trans); }
.am-cat-arrow svg { width: 16px; height: 16px; }
.am-cat-card:hover .am-cat-arrow { opacity: 1; transform: translateX(2px); color: var(--am-primary); }

/* ─── Panel: SERVICES VERTICAL (Services menu) ─── */
.am-services-panel { display: flex; flex-direction: column; }
.am-services-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--am-border); background: linear-gradient(to right, var(--am-muted-30), transparent, var(--am-muted-30)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.am-services-eyebrow { display: block; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--am-muted-fg); }
.am-services-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--am-muted-fg); }
.am-services-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--am-primary); color: var(--am-primary-fg); font-size: 0.75rem; font-weight: 600; transition: background var(--am-trans); }
.am-services-cta:hover { background: var(--am-primary); }
.am-services-cta .am-ico svg { width: 12px; height: 12px; transition: transform var(--am-trans); }
.am-services-cta:hover .am-ico svg { transform: translateX(2px); }

.am-services-body { display: grid; grid-template-columns: repeat(12, 1fr); }
.am-services-tabs { grid-column: span 4 / span 4; border-right: 1px solid var(--am-border); background: linear-gradient(to bottom, rgba(243,241,236,0.3), rgba(243,241,236,0.1)); padding: 0.5rem 0; }

/* Services tab — mock parity (Digital Agency mega-menu.tsx ~line 2010).
   ALL transitions are 300ms (mock uses `transition-all duration-300`).
   Inactive default → hover → active each have distinct interactive state. */
.am-service-tab {
  position: relative;                       /* host for the .am-service-tab-bar */
  width: 100%; text-align: left;
  padding: 1rem 1rem 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  background: transparent; border: 0; cursor: pointer;
  transition: background-color 300ms ease, box-shadow 300ms ease;
  font: inherit; color: inherit;
}
.am-service-tab:hover { background: rgba(255,255,255,0.6); }
.am-service-tab.am-service-tab-active { background: var(--am-card); box-shadow: var(--am-shadow-md); }

/* Active-bar rail — 4px left rail, scales vertically on active/hover */
.am-service-tab-bar {
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--am-primary);
  border-top-right-radius: 999px; border-bottom-right-radius: 999px;
  transform: scaleY(0); transform-origin: center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms ease;
}
.am-service-tab:hover .am-service-tab-bar { transform: scaleY(0.75); background: var(--am-primary-40); }
.am-service-tab.am-service-tab-active .am-service-tab-bar { transform: scaleY(1); background: var(--am-primary); }

/* Thumbnail — scale on hover/active to match mock */
.am-service-thumb {
  width: 56px; height: 56px; border-radius: var(--am-radius-lg);
  overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(223,222,218,0.3), var(--am-shadow-sm);
  transform: scale(1);
  transition: box-shadow 300ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.am-service-tab:hover .am-service-thumb { box-shadow: 0 0 0 2px var(--am-primary-30), var(--am-shadow-sm); transform: scale(1.02); }
.am-service-tab.am-service-tab-active .am-service-thumb { box-shadow: 0 0 0 2px var(--am-primary), 0 4px 12px var(--am-primary-20); transform: scale(1.05); }
.am-service-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.am-service-tab:hover .am-service-thumb img { transform: scale(1.05); }
.am-service-tab.am-service-tab-active .am-service-thumb img { transform: scale(1.10); }

/* Text body — name slides 2px on active, color shifts on hover/active */
.am-service-tab-text { flex: 1; min-width: 0; }
.am-service-tab-name {
  margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--am-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 300ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.am-service-tab:hover .am-service-tab-name { color: var(--am-primary); }
.am-service-tab.am-service-tab-active .am-service-tab-name { color: var(--am-primary); transform: translateX(2px); }
.am-service-tab-desc {
  margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--am-muted-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 300ms ease;
}

/* Right caret — invisible+offset when inactive, slides in when active/hover */
.am-service-tab-caret {
  flex-shrink: 0; display: inline-flex; align-items: center; color: var(--am-muted-fg);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms ease;
}
.am-service-tab-caret svg { width: 18px; height: 18px; }
.am-service-tab:hover .am-service-tab-caret { opacity: 0.5; transform: translateX(0); }
.am-service-tab.am-service-tab-active .am-service-tab-caret { opacity: 1; transform: translateX(0); color: var(--am-primary); }

.am-services-detail { grid-column: span 8 / span 8; padding: 1.5rem; min-height: 320px; position: relative; }
.am-service-pane { display: none; transition: opacity 300ms ease; opacity: 0; }
.am-service-pane.am-service-pane-active { display: block; opacity: 1; }
.am-service-pane-head { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.am-service-pane-img { position: relative; width: 192px; height: 128px; border-radius: var(--am-radius-xl); overflow: hidden; box-shadow: var(--am-shadow-lg); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 10px 15px -3px rgba(0,0,0,0.1); }
.am-service-pane-img img { width: 100%; height: 100%; object-fit: cover; }
.am-service-pane-body { flex: 1; }
.am-service-pane-eyebrow { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--am-primary); }
.am-service-pane-title { margin: 0.25rem 0 0; font-size: 1.25rem; font-weight: 700; color: var(--am-fg); }
.am-service-pane-desc { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--am-muted-fg); }
.am-service-pane-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--am-primary); transition: gap var(--am-trans); }
.am-service-pane-more .am-ico svg { width: 16px; height: 16px; }
.am-service-pane-more:hover { gap: 0.625rem; }

.am-service-subs { border-top: 1px solid var(--am-border); padding-top: 1.25rem; }
.am-service-subs-title { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-muted-fg); }
.am-service-subs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.am-service-sub { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--am-radius); transition: background var(--am-trans); }
.am-service-sub:hover { background: var(--am-muted-30); }
.am-service-sub-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--am-primary); margin-top: 0.5rem; flex-shrink: 0; }
.am-service-sub-name { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--am-fg); transition: color var(--am-trans); }
.am-service-sub:hover .am-service-sub-name { color: var(--am-primary); }
.am-service-sub-desc { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--am-muted-fg); }

/* ─── Search (desktop) ─── */
.am-search { display: none; flex: 1; max-width: 28rem; margin: 0 1rem; }
@media (min-width: 1024px) { .am-search { display: flex; align-items: center; } }
.am-search-inner { position: relative; width: 100%; }
.am-search-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--am-muted-fg); }
.am-search-ico svg { width: 16px; height: 16px; }
.am-search-input { width: 100%; height: 40px; padding: 0 1rem 0 2.5rem; font: inherit; font-size: 0.875rem; color: var(--am-fg); background: var(--am-muted-30); border: 1px solid var(--am-border); border-radius: 999px; outline: none; transition: border-color var(--am-trans), background var(--am-trans), box-shadow var(--am-trans); }
.am-search-input::placeholder { color: var(--am-muted-fg); }
.am-search-input:focus { background: var(--am-card); border-color: var(--am-primary); box-shadow: 0 0 0 3px var(--am-primary-12); }

/* ─── Action buttons ─── */
.am-actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; margin-left: auto; }
@media (min-width: 768px) { .am-actions { gap: 0.5rem; } }
.am-action-btn { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius); color: var(--am-fg); transition: background var(--am-trans), color var(--am-trans); }
.am-action-btn:hover { background: var(--am-muted); color: var(--am-primary); }
.am-action-btn svg { width: 20px; height: 20px; }
.am-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--am-primary); color: var(--am-primary-fg); border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; }

/* ─── Mobile drawer (off-canvas) ─── */
.am-drawer { position: fixed; inset: 0 0 0 0; width: 100vw; max-width: 100vw; background: var(--am-card); z-index: 60; transform: translateX(-100%); transition: transform var(--am-trans); overflow-y: auto; display: flex; flex-direction: column; }
.am-drawer.am-drawer-open { transform: translateX(0); }
.am-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--am-border); background: rgba(243,241,236,0.3); min-height: 56px; }
.am-drawer-brand { display: inline-flex; align-items: center; gap: 0.25rem; }
.am-drawer-brand .am-brand-name { font-size: 1.25rem; }
.am-drawer-brand .am-brand-suffix { font-size: 1.25rem; }
/* Drawer logo image — same `!important + .am specificity` trick as header
   to defeat the catch-all `:where(.am img) { height: auto }` rule that
   would otherwise let the SVG render at its natural 155×62. */
.am .am-drawer-brand-logo { display: inline-flex; align-items: center; }
.am .am-drawer-brand-img { display: block; height: 28px !important; width: auto !important; max-width: 120px; object-fit: contain; }
.am-drawer-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--am-radius); color: var(--am-fg); flex-shrink: 0; }
.am-drawer-close:hover { background: var(--am-muted); }
.am-drawer-close svg { width: 18px; height: 18px; }
.am-drawer-search { position: relative; padding: 0.5rem 1rem 1rem; border-bottom: 1px solid var(--am-border); background: rgba(243,241,236,0.3); }
.am-drawer-search .am-ico { position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%); color: var(--am-muted-fg); pointer-events: none; }
.am-drawer-search .am-ico svg { width: 16px; height: 16px; }
.am-drawer-search-input { width: 100%; height: 40px; padding: 0 1rem 0 2.5rem; font: inherit; font-size: 0.875rem; background: var(--am-card); border: 1px solid var(--am-border); border-radius: var(--am-radius); outline: none; }

.am-drawer-list { padding: 0; }
.am-drawer-section { border-bottom: 1px solid var(--am-border); }
.am-drawer-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem; font-size: 0.95rem; font-weight: 500; text-align: left; }
.am-drawer-toggle:hover { background: var(--am-muted); }
.am-drawer-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.am-drawer-toggle .am-chev svg { width: 18px; height: 18px; transition: transform var(--am-trans); }
.am-drawer-section.am-expanded .am-drawer-toggle .am-chev svg { transform: rotate(180deg); }
.am-drawer-link { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; font-size: 0.95rem; font-weight: 500; }
.am-drawer-link:hover { background: var(--am-muted); }
.am-drawer-body { display: none; padding: 0 1rem 1rem; background: rgba(243,241,236,0.5); }
.am-drawer-section.am-expanded .am-drawer-body { display: block; }
.am-drawer-tab-title { margin: 0.75rem 0 0.25rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-muted-fg); }
.am-drawer-sub { display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--am-fg); border-radius: var(--am-radius); }
.am-drawer-sub:hover { background: var(--am-muted); color: var(--am-primary); }
.am-drawer-sub-strong { font-weight: 600; }
.am-drawer-sub-nested { padding-left: 1.5rem; font-size: 0.8125rem; color: var(--am-muted-fg); }

/* ─────────────────────────────────────────────────────────────────
 * Mobile drawer — rich expand content (mock parity)
 * Mirrors Digital Agency mega-menu.tsx lines 1126-1430 (Mega/Fullwidth
 * mobile menu): About Us → headline + cards-with-icons + CTA,
 * News & Events → featured + news cards, Services → service cards.
 * ───────────────────────────────────────────────────────────────── */

/* About Us drawer section */
.am-drawer-about-head { padding: 0.875rem 0 1rem; border-bottom: 1px solid var(--am-border-50); margin-bottom: 1rem; }
.am-drawer-about-headline { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--am-fg); }
.am-drawer-about-desc { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--am-muted-fg); line-height: 1.5; }
.am-drawer-about-col { margin-bottom: 1.25rem; }
.am-drawer-about-col-title {
  margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--am-primary);
  padding-bottom: 0.375rem; border-bottom: 1px solid var(--am-primary-20);
}
.am-drawer-about-link {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem; margin-bottom: 0.375rem;
  background: var(--am-card); border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-sm);
  color: inherit; text-decoration: none;
  transition: background var(--am-trans);
}
.am-drawer-about-link:hover { background: var(--am-muted); }
.am-drawer-about-link-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--am-muted); color: var(--am-muted-fg);
}
.am-drawer-about-link-ico svg { width: 16px; height: 16px; }
.am-drawer-about-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.am-drawer-about-link-name { font-size: 0.875rem; font-weight: 500; color: var(--am-fg); }
.am-drawer-about-link-desc { font-size: 0.75rem; color: var(--am-muted-fg); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.am-drawer-about-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 1rem 0 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 999px;
  background: var(--am-primary); color: var(--am-primary-fg);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.am-drawer-about-cta .am-ico svg { width: 14px; height: 14px; }

/* Tab strip at top of expanded tabs section (mock parity — Tailwind TabsList
   shape). The strip uses a MUTED gray background; the active tab pops out
   in WHITE with subtle shadow. Mock equivalent: `bg-muted` on the list +
   `data-[state=active]:bg-background` on the trigger. */
.am-drawer-tabs-list {
  display: flex; gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.25rem;
  background: var(--am-muted);            /* gray strip */
  border-radius: calc(var(--am-radius) + 2px);
  overflow-x: auto;
  scrollbar-width: none;
}
.am-drawer-tabs-list::-webkit-scrollbar { display: none; }
.am-drawer-tab-btn {
  flex: 1 0 auto;
  min-width: 5rem;
  padding: 0.5rem 0.875rem;
  background: transparent; border: 0;
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  color: var(--am-muted-fg); cursor: pointer;
  border-radius: var(--am-radius);
  white-space: nowrap;
  transition: background var(--am-trans), color var(--am-trans), box-shadow var(--am-trans);
}
.am-drawer-tab-btn:hover { color: var(--am-fg); }
.am-drawer-tab-btn.am-drawer-tab-btn-active {
  background: var(--am-card);             /* white pop */
  color: var(--am-fg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
/* Tab panes — only active visible */
.am-drawer-tab-pane { display: none; }
.am-drawer-tab-pane.am-drawer-tab-pane-active { display: block; }

/* Cat grid wrapper inside a tab pane — 2 cols (mock parity, mega-menu.tsx line 1315) */
.am-drawer-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.am-drawer-cat-grid .am-drawer-cat-card { margin-bottom: 0; }

/* Tabs drawer section — featured image + news cards + link cards + categories */
.am-drawer-feat {
  display: block; margin-bottom: 1rem; overflow: hidden;
  border-radius: var(--am-radius-lg); position: relative;
  text-decoration: none; color: inherit;
}
.am-drawer-feat-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--am-muted); }
.am-drawer-feat-img img { width: 100%; height: 100%; object-fit: cover; }
.am-drawer-feat-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(15,10,9,0.92), rgba(15,10,9,0.35) 60%, transparent);
  color: #fff;
}
.am-drawer-feat-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--am-primary); color: var(--am-primary-fg);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}
.am-drawer-feat-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; color: #fff; }
.am-drawer-feat-desc { margin: 0.25rem 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.85); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.am-drawer-news-card {
  display: flex; gap: 0.75rem; padding: 0.625rem;
  margin-bottom: 0.5rem;
  background: var(--am-card); border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-sm);
  color: inherit; text-decoration: none;
  transition: background var(--am-trans);
}
.am-drawer-news-card:hover { background: var(--am-muted); }
.am-drawer-news-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--am-radius); overflow: hidden; background: var(--am-muted); }
.am-drawer-news-img img { width: 100%; height: 100%; object-fit: cover; }
.am-drawer-news-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-drawer-news-cat { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-primary); }
.am-drawer-news-title { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--am-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-drawer-news-date { font-size: 0.75rem; color: var(--am-muted-fg); }

.am-drawer-link-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem; margin-bottom: 0.5rem;
  background: var(--am-card); border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-sm);
  color: inherit; text-decoration: none;
  transition: background var(--am-trans);
}
.am-drawer-link-card:hover { background: var(--am-muted); }
.am-drawer-link-card-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--am-primary-10); color: var(--am-primary);
}
.am-drawer-link-card-ico svg { width: 18px; height: 18px; }
.am-drawer-link-card-name { display: block; font-size: 0.875rem; font-weight: 500; color: var(--am-fg); }
.am-drawer-link-card-desc { display: block; font-size: 0.75rem; color: var(--am-muted-fg); }

.am-drawer-cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.75rem; margin: 0;
  background: var(--am-card); border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-sm);
  color: inherit; text-decoration: none; text-align: center;
  transition: background var(--am-trans);
}
.am-drawer-cat-card:hover { background: var(--am-muted); }
.am-drawer-cat-img { width: 64px; height: 64px; border-radius: var(--am-radius); overflow: hidden; background: var(--am-muted); }
.am-drawer-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.am-drawer-cat-name { font-size: 0.875rem; font-weight: 500; color: var(--am-fg); }

/* Services drawer section — card per service with image, name, sub-items grid */
.am-drawer-svc-card {
  margin-bottom: 0.75rem; overflow: hidden;
  background: var(--am-card); border-radius: var(--am-radius-lg);
  box-shadow: var(--am-shadow-sm);
}
.am-drawer-svc-head {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem;
  color: inherit; text-decoration: none;
  transition: background var(--am-trans);
}
.am-drawer-svc-head:hover { background: var(--am-muted); }
.am-drawer-svc-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--am-radius); overflow: hidden; background: var(--am-muted); }
.am-drawer-svc-img img { width: 100%; height: 100%; object-fit: cover; }
.am-drawer-svc-txt { flex: 1; min-width: 0; }
.am-drawer-svc-name { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--am-fg); }
.am-drawer-svc-desc { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--am-muted-fg); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-drawer-svc-subs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border-top: 1px solid var(--am-border);
  background: var(--am-border);
}
.am-drawer-svc-sub {
  padding: 0.625rem 0.75rem;
  background: var(--am-card);
  color: var(--am-fg); text-decoration: none;
  font-size: 0.75rem;
  transition: background var(--am-trans);
}
.am-drawer-svc-sub:hover { background: var(--am-muted); color: var(--am-primary); }

/* Overlay */
.am-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 55; opacity: 0; visibility: hidden; transition: opacity var(--am-trans), visibility var(--am-trans); }
.am-overlay.am-overlay-active { opacity: 1; visibility: visible; }

/* Mobile breakpoints */
@media (max-width: 1023px) {
  .am-mobile-toggle { display: inline-flex; }
  .am-search { display: none; }
  .am-nav { display: none; }
  /* Push the site brand (logo + name) to the RIGHT side on mobile —
     user feedback: the hamburger is on the left, and a right-aligned brand
     reads as a more typical mobile pattern (matches iOS / Android app bars
     and most modern news sites). .am-actions still uses margin-left:auto
     so it'd compete; on mobile we hide the standalone actions block since
     login/search live inside the drawer anyway. */
  .am-brand { margin-left: auto; }
  .am-actions { display: none !important; }
}

@media (max-width: 640px) {
  .am-eyebrow-inner { padding: 0.375rem 0.75rem; font-size: 0.7rem; }
  .am-eyebrow-right .am-eyebrow-link:not(:last-child) { display: none; }
  .am-header-inner { padding: 0 0.75rem; height: 64px; gap: 0.5rem; }
  /* Compact hamburger + brand to mock-mobile sizes (was 40px / 24px). */
  .am-mobile-toggle { width: 36px; height: 36px; }
  .am-mobile-toggle .am-ico svg { width: 20px; height: 20px; }
  .am-news-grid-magazine, .am-news-grid-cards { grid-template-columns: 1fr; }
  .am-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .am-links-grid { grid-template-columns: 1fr; }
  .am-service-pane-head { flex-direction: column; gap: 1rem; }
  .am-service-pane-img { width: 100%; height: 160px; }
  .am-service-subs-grid { grid-template-columns: 1fr; }
}

/* ─── Menu mode switch (List ↔ Grid) ───────────────────────────────── */
.am-mode-switch {
  display: none; /* desktop only */
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(15,10,9,0.04);
  border: 1px solid rgba(15,10,9,0.08);
}
@media (min-width: 1024px) { .am-mode-switch { display: inline-flex; } }
.am-mode-ico {
  display: inline-flex; align-items: center; color: rgba(15,10,9,0.35);
  transition: color 200ms ease;
}
.am-mode-ico-active { color: var(--am-primary, #df0000); }
.am-mode-ico svg { width: 16px; height: 16px; }
.am-mode-track {
  position: relative; width: 36px; height: 20px; padding: 0; border: 0;
  background: rgba(15,10,9,0.25); border-radius: 999px;
  cursor: pointer; transition: background 200ms ease;
  display: inline-flex; align-items: center;
}
.am-mode-track.am-mode-on { background: var(--am-primary, #df0000); }
.am-mode-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff;
  border-radius: 999px; transition: transform 200ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.am-mode-track.am-mode-on .am-mode-thumb { transform: translateX(16px); }

/* 3-mode toggle (dropdown / mega / fullwidth) — replaces the 2-state above */
.am-mode-switch.am-mode-switch-3 {
  display: none; gap: 0; padding: 3px;
  background: rgba(15,10,9,0.06); border: 1px solid rgba(15,10,9,0.08);
  border-radius: 999px; margin: 0 0.625rem;
}
@media (min-width: 1024px) { .am-mode-switch.am-mode-switch-3 { display: inline-flex; } }
.am-mode-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  background: transparent; border: 0; border-radius: 999px;
  color: rgba(15,10,9,0.55); cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.am-mode-btn:hover { color: var(--am-fg, #0f0a09); }
.am-mode-btn-active {
  background: #fff; color: var(--am-primary, #df0000);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.am-mode-btn svg { width: 13px; height: 13px; }

/* ─── Dropdown mode (cascading menus) ──────────────────────────────── */
.am-nav-dropdown .am-nav-item-dd { position: relative; }
.am-dd {
  position: absolute; top: 100%; left: 0;
  min-width: 14rem;
  padding-top: 4px;
  z-index: 50;
  opacity: 0; visibility: hidden;
  transition: visibility 0s linear 150ms;
  pointer-events: none;
}
.am-nav-item-dd.am-expanded .am-dd {
  transition: visibility 0s linear 0s;
  opacity: 1; visibility: visible; pointer-events: auto;
}
.am-dd-card {
  background: var(--am-card, #fff); border: 1px solid var(--am-border, #dfdeda);
  border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  padding: 0.375rem 0; min-width: 14rem;
}
.am-dd-row { position: relative; }
.am-dd-row-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 1rem; background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 0.875rem; color: rgba(15,10,9,0.85); text-align: left;
  transition: background 150ms ease, color 150ms ease;
}
.am-dd-row-btn:hover, .am-dd-row.am-dd-row-open > .am-dd-row-btn {
  background: var(--am-muted, #f3f1ec); color: var(--am-fg, #0f0a09);
}
.am-dd-row-label { flex: 1; min-width: 0; }
.am-dd-row-arrow { color: var(--am-muted-fg, #5b5352); }
.am-dd-row-arrow svg { width: 14px; height: 14px; }

/* Sub-dropdown (cascade to the right) */
.am-dd-sub {
  position: absolute; left: calc(100% - 1px); top: 0;
  padding-left: 0;
  opacity: 0; visibility: hidden;
  transition: visibility 0s linear 150ms;
  pointer-events: none;
  z-index: 1;
}
.am-dd-row.am-dd-row-open > .am-dd-sub {
  transition: visibility 0s linear 0s;
  opacity: 1; visibility: visible; pointer-events: auto;
}
.am-dd-card-sub { min-width: 13rem; }

/* Leaf links inside sub-dropdown */
.am-dd-leaf {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; color: rgba(15,10,9,0.85);
  transition: background 150ms ease, color 150ms ease;
}
.am-dd-leaf:hover { background: var(--am-muted, #f3f1ec); color: var(--am-fg, #0f0a09); }
.am-dd-leaf-strong {
  font-weight: 600; color: var(--am-primary, #df0000);
  border-bottom: 1px solid var(--am-border, #dfdeda); margin-bottom: 0.25rem;
}
.am-dd-leaf-news { color: rgba(15,10,9,0.75); }
.am-dd-leaf-ico { display: inline-flex; align-items: center; color: var(--am-muted-fg); }
.am-dd-leaf-ico svg { width: 14px; height: 14px; }

/* When dropdown mode is active, hide any mega panels (defensive) */
.am-nav-dropdown .am-mega { display: none; }

/* Edge-detection — same as mega */
.am-nav-item-dd .am-dd.am-dd-right { left: auto; right: 0; }

/* No-script fallback */
.am-noscript-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; background: var(--am-card); border-bottom: 1px solid var(--am-border); }
.am-noscript-nav a { font-size: 0.875rem; font-weight: 500; color: var(--am-fg); padding: 0.25rem 0.625rem; border-radius: var(--am-radius); }
.am-noscript-nav a:hover { background: var(--am-muted); color: var(--am-primary); }

/* ─────────────────────────────────────────────────────────────────
 * 2026-05-12 mock-aligned tokens + 30 color presets
 *
 * Aligns AcmeMega with the new ACME mock at /MENU SPECS/Digital Agency.
 * Modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+) render OKLCH
 * natively; older browsers fall back to the pre-existing #df0000 default
 * defined at the top of this file.
 *
 * Pattern: each preset class sets both --primary and --am-primary so the
 * existing menu CSS picks up the change without rewiring every rule.
 * Apply by adding the class to a parent (e.g. <body class="preset-ocean">).
 * ───────────────────────────────────────────────────────────────── */
:root {
  --background: oklch(0.98 0.005 90);
  --foreground: oklch(0.15 0.01 30);
  --card: oklch(1 0 0);
  --primary: oklch(0.55 0.25 27);
  --primary-foreground: oklch(1 0 0);
  --accent: oklch(0.55 0.25 27);
  --accent-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.005 90);
  --muted: oklch(0.94 0.005 90);
  --muted-foreground: oklch(0.45 0.01 30);
  --border: oklch(0.90 0.005 90);
  --input: oklch(0.90 0.005 90);
  --ring: oklch(0.55 0.25 27);
  --radius: 0.5rem;
}

/* Preset-following primary tints: color-mix resolves var(--am-primary) at use
   time, so body.preset-* recolours every translucent accent. The :root rgba
   defaults above are the fallback when color-mix is unsupported. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --am-primary-05: color-mix(in srgb, var(--am-primary) 5%, transparent);
    --am-primary-10: color-mix(in srgb, var(--am-primary) 10%, transparent);
    --am-primary-12: color-mix(in srgb, var(--am-primary) 12%, transparent);
    --am-primary-20: color-mix(in srgb, var(--am-primary) 20%, transparent);
    --am-primary-30: color-mix(in srgb, var(--am-primary) 30%, transparent);
    --am-primary-40: color-mix(in srgb, var(--am-primary) 40%, transparent);
  }
}
/* Vibrant presets (10) */
.preset-ember   { --primary: oklch(0.55 0.25 27);  --accent: oklch(0.55 0.25 27);  --ring: oklch(0.55 0.25 27);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.55 0.25 27); --am-primary-fg: #fff; }
.preset-ocean   { --primary: oklch(0.50 0.18 250); --accent: oklch(0.50 0.18 250); --ring: oklch(0.50 0.18 250); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.18 250); --am-primary-fg: #fff; }
.preset-forest  { --primary: oklch(0.52 0.17 160); --accent: oklch(0.52 0.17 160); --ring: oklch(0.52 0.17 160); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.17 160); --am-primary-fg: #fff; }
.preset-crimson { --primary: oklch(0.50 0.22 15);  --accent: oklch(0.50 0.22 15);  --ring: oklch(0.50 0.22 15);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.22 15); --am-primary-fg: #fff; }
.preset-violet  { --primary: oklch(0.50 0.20 290); --accent: oklch(0.50 0.20 290); --ring: oklch(0.50 0.20 290); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.20 290); --am-primary-fg: #fff; }
.preset-gold    { --primary: oklch(0.58 0.16 85);  --accent: oklch(0.58 0.16 85);  --ring: oklch(0.58 0.16 85);  --primary-foreground: oklch(0.15 0.02 85); --am-primary: oklch(0.58 0.16 85); --am-primary-fg: #1a140d; }
.preset-teal    { --primary: oklch(0.52 0.14 195); --accent: oklch(0.52 0.14 195); --ring: oklch(0.52 0.14 195); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.14 195); --am-primary-fg: #fff; }
.preset-rose    { --primary: oklch(0.55 0.18 350); --accent: oklch(0.55 0.18 350); --ring: oklch(0.55 0.18 350); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.55 0.18 350); --am-primary-fg: #fff; }
.preset-slate   { --primary: oklch(0.40 0.03 260); --accent: oklch(0.40 0.03 260); --ring: oklch(0.40 0.03 260); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.40 0.03 260); --am-primary-fg: #fff; }
.preset-copper  { --primary: oklch(0.52 0.14 50);  --accent: oklch(0.52 0.14 50);  --ring: oklch(0.52 0.14 50);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.14 50); --am-primary-fg: #fff; }

/* Elegant presets (20) */
.preset-pearl     { --primary: oklch(0.45 0.03 250); --accent: oklch(0.45 0.03 250); --ring: oklch(0.45 0.03 250); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.45 0.03 250); --am-primary-fg: #fff; }
.preset-ivory     { --primary: oklch(0.48 0.06 60);  --accent: oklch(0.48 0.06 60);  --ring: oklch(0.48 0.06 60);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.48 0.06 60); --am-primary-fg: #fff; }
.preset-linen     { --primary: oklch(0.50 0.08 50);  --accent: oklch(0.50 0.08 50);  --ring: oklch(0.50 0.08 50);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.08 50); --am-primary-fg: #fff; }
.preset-frost     { --primary: oklch(0.48 0.08 230); --accent: oklch(0.48 0.08 230); --ring: oklch(0.48 0.08 230); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.48 0.08 230); --am-primary-fg: #fff; }
.preset-ash       { --primary: oklch(0.35 0 0);     --accent: oklch(0.35 0 0);     --ring: oklch(0.35 0 0);     --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.35 0 0); --am-primary-fg: #fff; }
.preset-mist      { --primary: oklch(0.52 0.08 280); --accent: oklch(0.52 0.08 280); --ring: oklch(0.52 0.08 280); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.08 280); --am-primary-fg: #fff; }
.preset-sage      { --primary: oklch(0.48 0.08 145); --accent: oklch(0.48 0.08 145); --ring: oklch(0.48 0.08 145); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.48 0.08 145); --am-primary-fg: #fff; }
.preset-dove      { --primary: oklch(0.42 0.04 60);  --accent: oklch(0.42 0.04 60);  --ring: oklch(0.42 0.04 60);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.42 0.04 60); --am-primary-fg: #fff; }
.preset-cloud     { --primary: oklch(0.50 0.12 250); --accent: oklch(0.50 0.12 250); --ring: oklch(0.50 0.12 250); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.12 250); --am-primary-fg: #fff; }
.preset-sand      { --primary: oklch(0.50 0.10 45);  --accent: oklch(0.50 0.10 45);  --ring: oklch(0.50 0.10 45);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.50 0.10 45); --am-primary-fg: #fff; }
.preset-stone     { --primary: oklch(0.45 0.05 80);  --accent: oklch(0.45 0.05 80);  --ring: oklch(0.45 0.05 80);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.45 0.05 80); --am-primary-fg: #fff; }
.preset-bone      { --primary: oklch(0.38 0.04 40);  --accent: oklch(0.38 0.04 40);  --ring: oklch(0.38 0.04 40);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.38 0.04 40); --am-primary-fg: #fff; }
.preset-parchment { --primary: oklch(0.52 0.08 55);  --accent: oklch(0.52 0.08 55);  --ring: oklch(0.52 0.08 55);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.08 55); --am-primary-fg: #fff; }
.preset-chalk     { --primary: oklch(0.40 0.03 100); --accent: oklch(0.40 0.03 100); --ring: oklch(0.40 0.03 100); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.40 0.03 100); --am-primary-fg: #fff; }
.preset-smoke     { --primary: oklch(0.45 0.06 240); --accent: oklch(0.45 0.06 240); --ring: oklch(0.45 0.06 240); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.45 0.06 240); --am-primary-fg: #fff; }
.preset-cream     { --primary: oklch(0.52 0.10 50);  --accent: oklch(0.52 0.10 50);  --ring: oklch(0.52 0.10 50);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.52 0.10 50); --am-primary-fg: #fff; }
.preset-platinum  { --primary: oklch(0.42 0.04 260); --accent: oklch(0.42 0.04 260); --ring: oklch(0.42 0.04 260); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.42 0.04 260); --am-primary-fg: #fff; }
.preset-seashell  { --primary: oklch(0.55 0.10 15);  --accent: oklch(0.55 0.10 15);  --ring: oklch(0.55 0.10 15);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.55 0.10 15); --am-primary-fg: #fff; }
.preset-marble    { --primary: oklch(0.38 0.05 220); --accent: oklch(0.38 0.05 220); --ring: oklch(0.38 0.05 220); --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.38 0.05 220); --am-primary-fg: #fff; }
.preset-oat       { --primary: oklch(0.55 0.08 60);  --accent: oklch(0.55 0.08 60);  --ring: oklch(0.55 0.08 60);  --primary-foreground: oklch(1 0 0); --am-primary: oklch(0.55 0.08 60); --am-primary-fg: #fff; }

/* Cross-namespace mapping — when any mock preset is active, alias the
   skin-level --acme-primary to the menu-level --am-primary so the footer
   Subscribe button and other .acme-* skin elements also follow the preset.
   Without this, only menu colors flip while the footer stays default. */
/* "CSS preset wins": a chosen site colour preset overrides the menu-bar
   style accent (menubar-presets.css sets --am-primary per acme-mb-*, and
   loads later). !important + body[class*="preset-"] beat those rules so
   the menu + skin accent follow the preset on every menu-bar style. */
/* When a CSS preset is active it must win over site-design-variants.css
   per-page menu colour theming, which pins nav links per SPA page via
   "#cissMenu .am-nav button { color:... !important }". The #cissMenu + the
   extra .am-nav-item class raise specificity (0,1,4,1) above those
   (0,1,3,2) so the menu nav text follows the chosen preset. */
body[class*="preset-"]:not(.acme-mb-top-bold):not(.acme-mb-corporate-dark):not(.acme-mb-ecommerce-luxury):not(.acme-mb-saas-dark):not(.acme-mb-finance-premium):not(.acme-mb-education-academic):not(.acme-mb-restaurant-elegant) #cissMenu .am-nav .am-nav-item .am-nav-link,
body[class*="preset-"]:not(.acme-mb-top-bold):not(.acme-mb-corporate-dark):not(.acme-mb-ecommerce-luxury):not(.acme-mb-saas-dark):not(.acme-mb-finance-premium):not(.acme-mb-education-academic):not(.acme-mb-restaurant-elegant) #cissMenu .am-nav .am-nav-item .am-nav-trigger {
  color: var(--am-primary) !important;
}

body[class*="preset-"] {
  --am-primary: var(--primary) !important;
  --am-primary-fg: var(--primary-foreground) !important;
  --acme-primary: var(--primary) !important;
  --acme-primary-fg: var(--primary-foreground) !important;
  --acme-accent: var(--primary) !important;
  --acme-ring: var(--primary) !important;
}

[class*="preset-"] {
  --acme-primary: var(--am-primary);
  --acme-primary-fg: var(--am-primary-fg);
  --acme-accent: var(--am-primary);
  --acme-ring: var(--am-primary);
}

/* ─────────────────────────────────────────────────────────────────
 * Per-item menu-style variants (matches mock's 3 modes)
 *   data-menu-style="mega"            → .am-mega-standard
 *     floating card, max-width 64rem, arrow, rounded border, shadow
 *   data-menu-style="mega-fullwidth"  → .am-mega-fullwidth
 *     edge-to-edge strip, NO arrow, border-top/bottom only, no radius,
 *     larger inner padding, wider content area
 *   data-menu-style="dropdown"        → .am-nav-item-dd (separate path)
 *     classic vertical cascade, .am-dd / .am-dd-card
 * ───────────────────────────────────────────────────────────────── */

/* Standard mega — explicit class so authors can override it later */
.am-mega.am-mega-standard .am-mega-card {
  border-radius: var(--am-radius-xl);
  box-shadow: var(--am-shadow-2xl);
}
.am-nav-item[data-mega-width="fixed"] .am-mega.am-mega-standard .am-mega-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Fullwidth mega — edge-to-edge strip */
.am-nav-item-mega-fullwidth .am-mega { max-width: none; }
.am-mega.am-mega-fullwidth .am-mega-card {
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--am-border-50);
  border-bottom: 1px solid var(--am-border-50);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.18);
}
/* Roomier inner padding inside fullwidth panels */
.am-mega.am-mega-fullwidth .am-tabs-header { padding: 1.5rem 3rem 0; }
.am-mega.am-mega-fullwidth .am-featured-col,
.am-mega.am-mega-fullwidth .am-content-col { padding: 2rem 3rem; }
/* Constrain content width for readability on very wide viewports */
.am-mega.am-mega-fullwidth .am-tab-grid {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
/* Tighter, square-corner news cards inside fullwidth strip */
.am-mega.am-mega-fullwidth .am-news-mag-item { border-radius: 0; }

/* Hover affordance: subtle inset highlight on the active trigger row
   so the user can tell which nav item owns the open panel. */
.am-nav-item-mega-fullwidth.am-expanded > .am-nav-trigger,
.am-nav-item-mega.am-expanded > .am-nav-trigger {
  color: var(--am-primary);
}

/* ─────────────────────────────────────────────────────────────────
 * Panel: ABOUT-GRID (4-col flat link grid + footer CTA bar)
 * Mirrors the mock's About Us submenu shape exactly.
 * ───────────────────────────────────────────────────────────────── */
.am-about-panel { display: flex; flex-direction: column; }

/* Gradient header band */
.am-about-header {
  padding: 1.5rem 2rem;
  background: linear-gradient(to right, var(--am-primary-05), var(--am-muted-30) 50%, var(--am-primary-05));
  border-bottom: 1px solid var(--am-border);
}
.am-about-headline {
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--am-fg);
  font-family: "Geist", "Playfair Display", serif;
}
.am-about-desc {
  margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--am-muted-fg);
  max-width: 36rem; line-height: 1.5;
}

/* Auto-fit about/corporate columns across the full mega pane. */
.am-about-cols {
  display: grid; gap: 2rem; padding: 1.5rem 2rem;
  grid-template-columns: repeat(var(--am-about-col-count, 4), minmax(0, 1fr));
}
.am-about-cols[data-cols="1"] { --am-about-col-count: 1; }
.am-about-cols[data-cols="2"] { --am-about-col-count: 2; }
.am-about-cols[data-cols="3"] { --am-about-col-count: 3; }
.am-about-cols[data-cols="4"] { --am-about-col-count: 4; }
.am-about-cols[data-cols="5"] { --am-about-col-count: 5; gap: 1.4rem; }
.am-about-cols[data-cols="6"] { --am-about-col-count: 6; gap: 1.1rem; }
@media (max-width: 900px) {
  .am-about-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem; }
}
.am-about-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.am-about-col-title {
  margin: 0; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--am-primary);
  border-bottom: 1px solid var(--am-primary-20);
  padding-bottom: 0.5rem;
}
.am-about-links { display: flex; flex-direction: column; gap: 0.125rem; }
.am-about-link {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.5rem 0.625rem; margin: 0 -0.625rem;
  border-radius: var(--am-radius);
  color: inherit; text-decoration: none;
  transition: background var(--am-trans), color var(--am-trans);
}
.am-about-link:hover { background: var(--am-muted-30); }
.am-about-link-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--am-muted, #f3f1ec); color: var(--am-muted-fg);
  margin-top: 2px;
  transition: background var(--am-trans), color var(--am-trans);
}
.am-about-link:hover .am-about-link-ico {
  background: var(--am-primary-10); color: var(--am-primary);
}
.am-about-link-ico svg { width: 16px; height: 16px; }
.am-about-link-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-about-link-name {
  font-size: 0.875rem; font-weight: 500; color: var(--am-fg);
  transition: color var(--am-trans);
}
.am-about-link:hover .am-about-link-name { color: var(--am-primary); }
.am-about-link-desc {
  font-size: 0.75rem; line-height: 1.45; color: var(--am-muted-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer CTA bar */
.am-about-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 2rem;
  background: var(--am-muted-30);
  border-top: 1px solid var(--am-border);
  flex-wrap: wrap; gap: 0.75rem;
}
.am-about-stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.am-about-stat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; color: var(--am-muted-fg);
}
.am-about-stat-ico { display: inline-flex; align-items: center; color: var(--am-muted-fg); }
.am-about-stat-ico svg { width: 14px; height: 14px; }
.am-about-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem; border-radius: 999px;
  background: var(--am-primary); color: var(--am-primary-fg);
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  transition: background var(--am-trans), box-shadow var(--am-trans);
}
.am-about-cta:hover {
  background: var(--am-primary);
  box-shadow: var(--am-shadow-md);
}
.am-about-cta-arrow { display: inline-flex; align-items: center; transition: transform var(--am-trans); }
.am-about-cta-arrow svg { width: 14px; height: 14px; }
.am-about-cta:hover .am-about-cta-arrow { transform: translateX(2px); }

/* ─────────────────────────────────────────────────────────────────
 * FAB STACK COORDINATION
 * ───────────────────────────────────────────────────────────────────
 * The AcmeMega Builder owns the bottom-right corner with two FABs:
 *   slot 0 (bottom 24px): .amb2-gear        (red, 52×52, z 999999)
 *   slot 1 (bottom 84px): .amb2-theme-fab   (purple, 52×52, z 999999)
 *
 * Any CISS.SideMenu editor (DrawerMenuv0, DrawerNewspaper, Drawer_Animation,
 * Drawer_Animation2, …) ships its own `.<prefix>e-launcher` button that
 * also pins to right:20-24, bottom:18-20 — which collides with .amb2-gear.
 *
 * We override those launcher positions here so they sit ABOVE the amb2
 * stack (slot 2 = bottom 144px). Anything new added later just needs its
 * launcher class added to this list.  Previously this caused the user to
 * see "luc hien luc khong" (sometimes appears, sometimes doesn't) — they
 * were occluded behind the higher-z amb2-gear.
 * ───────────────────────────────────────────────────────────────── */
.dm0e-launcher,
.dnwe-launcher,
.dae-launcher,
.da2e-launcher,
.tme-launcher,
.dae2-launcher,
.daged-launcher {
  bottom: 144px !important;
  right: 24px !important;
  z-index: 999998 !important;  /* below amb2 (999999) so amb2 wins ties */
}

/* ─────────────────────────────────────────────────────────────────
 * Builder gear visibility — REVERSED behavior (user request 2026-05-26)
 *
 * BEFORE: ACME gear visible when published, hidden in edit mode.
 * AFTER:  ACME gear visible ONLY when DNN edit mode is active
 *         (so it lives alongside DNN's edit tooling). Hidden otherwise.
 *
 * The body class `acme-no-builder` is toggled by _eyebrow.ascx based on
 * DNN's dnnEditState/dnnEditPage body class. The CSS rules below hide
 * EVERY Builder element when not in edit mode. Also: any DOM that
 * _eyebrow.ascx already marked with `data-acme-hide-builder` (when the
 * Builder script mounted before edit mode was closed) is hidden too.
 * ───────────────────────────────────────────────────────────────── */
body.acme-no-builder .amb2-gear,
body.acme-no-builder .amb-gear,
body.acme-no-builder .amb2-launcher,
body.acme-no-builder .amb2-panel,
body.acme-no-builder .amb-panel,
body.acme-no-builder [class^="amb2-"][class*="launcher"],
body.acme-no-builder .amb2-overlay,
[data-acme-hide-builder="1"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Also hide the "Edit menu" pill in the eyebrow when not in edit mode,
   since clicking it now requires being in edit mode first. */
body.acme-no-builder .acme-edit-menu-link {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Variant: top-centered  (port of ACMEV35 "centered" menu style)
 *
 * Enable by EITHER:
 *   - adding class `am-variant-top-centered` to the `.am` root, OR
 *   - adding class `acme-mega-variant-top-centered` to `<body>`.
 *
 * The body-class form makes it easy to toggle per-page from a skin
 * setting / menu-builder global option without modifying markup.
 * Layout:
 *   - Logo is positioned absolute-center of the header bar.
 *   - Nav splits visually around the logo by inserting a wide gap.
 *   - Eyebrow height (above the bar) is normal 40px.
 *   - Header height is taller (112px) to accommodate the larger logo.
 *
 * Scroll-shrink (when .am-scrolled is also present):
 *   - Eyebrow collapses to 0 height (hidden).
 *   - Header height 112px → 64px.
 *   - Logo (.am-logo) scales down.
 *   - Logo tagline (.am-logo-corp) fades out.
 *
 * The .am-scrolled toggle already exists (initSticky, threshold 56),
 * so this variant is pure CSS — no new JS needed.
 * ───────────────────────────────────────────────────────────────── */
.am.am-variant-top-centered .am-eyebrow {
  transition: max-height 500ms ease, opacity 500ms ease;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am-eyebrow {
  max-height: 0;
  opacity: 0;
  border-bottom: 0;
}

/* User feedback 2026-05-26: do NOT enlarge the top bar — keep it at compact
   64px and let the oversized centered logo overlap above/below the bar. */
.am.am-variant-top-centered .am-header-inner {
  position: relative;
  height: 64px !important;           /* compact bar — same in both scroll states */
  overflow: visible !important;      /* allow logo to spill vertically */
  transition: none;
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am-header-inner {
  height: 64px !important;
}
.am.am-variant-top-centered .am-header,
.am.am-variant-top-centered .am-sticky { overflow: visible !important; }

/* Center the logo absolutely so left/right nav splits around it. The logo
   is oversized (3rem) so it overflows the 64px bar by ~20px on each side. */
.am.am-variant-top-centered .am-logo,
.am.am-variant-top-centered .am-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 500ms ease, font-size 500ms ease;
  z-index: 5;
  pointer-events: auto;
}
.am.am-variant-top-centered .am-logo-mark,
.am.am-variant-top-centered .am-brand-name {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: font-size 500ms ease;
}
/* IMG brand logos — see menubar-presets.css for details. */
.am.am-variant-top-centered .am-brand img,
.am.am-variant-top-centered .am-logo img,
.am.am-variant-top-centered .am-brand svg,
.am.am-variant-top-centered .am-logo svg {
  height: 100px !important;
  max-height: 100px !important;
  width: auto !important;
  transition: height 500ms ease;
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am-brand img,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-logo img,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-brand svg,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-logo svg {
  height: 48px !important;
  max-height: 48px !important;
}
.am.am-variant-top-centered .am-nav { padding: 0 80px; }
.am.am-variant-top-centered .am-logo-corp,
.am.am-variant-top-centered .am-brand-suffix {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--am-muted-fg);
  transition: opacity 500ms ease, max-height 500ms ease, font-size 500ms ease;
  max-height: 1.5rem;
  opacity: 0.85;
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am-logo-mark,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-brand-name {
  font-size: 1.5rem;                 /* slightly larger than default, still fits in bar */
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am-logo-corp,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-brand-suffix {
  opacity: 0;
  max-height: 0;
  font-size: 0;
}

/* Image logo support — same scroll-shrink applies to <img class="am-brand-img"> */
.am.am-variant-top-centered .am .am-brand-img {
  height: 64px !important;
  max-width: 220px;
  transition: height 500ms ease, max-width 500ms ease;
}
.am.am-variant-top-centered .am-sticky.am-scrolled .am .am-brand-img,
.am.am-variant-top-centered .am-sticky.am-scrolled .am-brand-img {
  height: 36px !important;
  max-width: 140px;
}

/* Nav fills the row, splits visually because logo overlays middle.
   Add padding-inline so nav items don't slide under the logo. */
/* Nav must clear the centered logo. Use CSS grid with two equal columns
   separated by a logo-sized gap so items split visually around the logo. */
.am.am-variant-top-centered .am-nav {
  flex: 1 1 auto;
  display: grid !important;
  grid-template-columns: 1fr minmax(220px, 280px) 1fr;
  align-items: center;
}
.am.am-variant-top-centered .am-nav-list {
  display: contents;
}
.am.am-variant-top-centered .am-nav-item:nth-child(odd) { justify-self: end; padding-inline-end: 1.25rem; }
.am.am-variant-top-centered .am-nav-item:nth-child(even) { justify-self: start; padding-inline-start: 1.25rem; }
/* Reset for items past 4 — wrap to a flat right-aligned row */
.am.am-variant-top-centered .am-nav-item:nth-child(n+5) {
  grid-column: 3;
  justify-self: start;
  padding-inline-start: 1.25rem;
}
.am.am-variant-top-centered .am-actions {
  margin-left: 0;
  position: relative;
  z-index: 2;
}

/* Mobile / narrow viewports: collapse to standard mobile drawer flow.
   Show only the centered logo + mobile toggle + actions; hide desktop nav. */
@media (max-width: 1023px) {
  .am.am-variant-top-centered .am-header-inner {
    height: 80px;
    padding: 0 0.75rem;
  }
  .am.am-variant-top-centered .am-logo,
  .am.am-variant-top-centered .am-brand {
    position: static;
    transform: none;
    flex-direction: row;
    gap: 0.25rem;
  }
  .am.am-variant-top-centered .am-logo-mark,
  .am.am-variant-top-centered .am-brand-name { font-size: 1.4rem; }
  .am.am-variant-top-centered .am-logo-corp,
  .am.am-variant-top-centered .am-brand-suffix { display: none; }
  .am.am-variant-top-centered .am-nav { padding-inline: 0; }
}

/* Body-class shortcut: every rule above is re-emitted with the body-driven
   selector so the variant can be toggled via a <body> class instead of
   editing the menu markup. Keep these in sync with the .am.am-variant-*
   block above whenever it changes. */
body.acme-mega-variant-top-centered .am .am-eyebrow {
  transition: max-height 500ms ease, opacity 500ms ease;
  max-height: 40px; opacity: 1; overflow: hidden;
}
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-eyebrow {
  max-height: 0; opacity: 0; border-bottom: 0;
}
body.acme-mega-variant-top-centered .am .am-header-inner {
  position: relative;
  height: 112px !important;  /* beats body[class*="acme-mb-"] preset !important */
  transition: height 500ms ease;
}
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-header-inner { height: 64px !important; }
body.acme-mega-variant-top-centered .am .am-logo,
body.acme-mega-variant-top-centered .am .am-brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column; align-items: center; gap: 2px; z-index: 2;
  transition: transform 500ms ease;
}
body.acme-mega-variant-top-centered .am .am-logo-mark,
body.acme-mega-variant-top-centered .am .am-brand-name {
  font-size: 2.25rem; font-weight: 800; letter-spacing: 0.02em;
  transition: font-size 500ms ease;
}
body.acme-mega-variant-top-centered .am .am-logo-corp,
body.acme-mega-variant-top-centered .am .am-brand-suffix {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--am-muted-fg);
  transition: opacity 500ms ease, max-height 500ms ease, font-size 500ms ease;
  max-height: 1.5rem; opacity: 0.85;
}
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-logo-mark,
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-brand-name { font-size: 1.25rem; }
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-logo-corp,
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-brand-suffix { opacity: 0; max-height: 0; font-size: 0; }
body.acme-mega-variant-top-centered .am .am-brand-img {
  height: 64px !important; max-width: 220px;
  transition: height 500ms ease, max-width 500ms ease;
}
body.acme-mega-variant-top-centered .am .am-sticky.am-scrolled .am-brand-img {
  height: 36px !important; max-width: 140px;
}
body.acme-mega-variant-top-centered .am .am-nav {
  flex: 1 1 auto;
  display: grid !important;
  grid-template-columns: 1fr minmax(220px, 280px) 1fr;
  align-items: center;
}
body.acme-mega-variant-top-centered .am .am-nav-list { display: contents; }
body.acme-mega-variant-top-centered .am .am-nav-item:nth-child(odd) { justify-self: end; padding-inline-end: 1.25rem; }
body.acme-mega-variant-top-centered .am .am-nav-item:nth-child(even) { justify-self: start; padding-inline-start: 1.25rem; }
body.acme-mega-variant-top-centered .am .am-nav-item:nth-child(n+5) { grid-column: 3; justify-self: start; padding-inline-start: 1.25rem; }
body.acme-mega-variant-top-centered .am .am-actions { margin-left: 0; position: relative; z-index: 2; }
@media (max-width: 1023px) {
  body.acme-mega-variant-top-centered .am .am-header-inner { height: 80px; padding: 0 0.75rem; }
  body.acme-mega-variant-top-centered .am .am-logo,
  body.acme-mega-variant-top-centered .am .am-brand {
    position: static; transform: none; flex-direction: row; gap: 0.25rem;
  }
  body.acme-mega-variant-top-centered .am .am-logo-mark,
  body.acme-mega-variant-top-centered .am .am-brand-name { font-size: 1.4rem; }
  body.acme-mega-variant-top-centered .am .am-logo-corp,
  body.acme-mega-variant-top-centered .am .am-brand-suffix { display: none; }
  body.acme-mega-variant-top-centered .am .am-nav { padding-inline: 0; }
}