/* ============================================================
   chrome.css — shared PDP chrome: mega-menu dropdown
   ------------------------------------------------------------
   Grabbed verbatim from PLP/plp.css (lines 884–1090).
   The topbar / header / nav strip / mobile-nav / footer styles
   already live in ../Home/styles-v2.css (the design system) and
   are reused as-is. This file only carries the mega-menu, which
   was the one chrome piece defined outside the design system.

   Desktop-only (≥1024px); tablet/mobile keep the #mobileNav.
   NOTE: `.header__nav ul/li/a` from the home design system have
   specificity (0,1,1) and would force the inner lists horizontal
   + nowrap — every inner rule below is scoped `.mega-panel …`
   (≥ 0,2,0) so it wins and the lists stack/wrap correctly.
   ============================================================ */
.header__nav { position: relative; }          /* positioning context for the panel */
.hnav-item   { position: static; }             /* panel anchors to .header__nav, not the li */

/* ── Drop-panel: full nav width, GPU-friendly hide/show ── */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-white);
  border-top: 1px solid var(--color-graphite-300);
  box-shadow: var(--shadow-lg);
  /* Never taller than the space below the header → won't block the page on short laptops;
     overflow scrolls internally when the content is taller. */
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  /* Hidden state: animatable (no display:block jump). visibility + aria-hidden
     keep it out of the a11y tree and tab order; transitions ride opacity/transform only. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  will-change: opacity, transform;
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
/* Invisible bridge over the nav→panel seam — kills diagonal hover-tunneling */
.mega-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px;
  height: 8px;
}
/* Keep the trigger visually active while its panel is open */
[data-mega-trigger][aria-expanded="true"] {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}

/* ── Asymmetric 75/25 split ──
   Left zone = subcategory tile grid; right zone = persistent featured promo.
   align-items:stretch makes the promo card full-height regardless of row count. */
.mega-panel .mega-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24%, 340px);   /* ~75 / ~25 */
  gap: 46px;                      /* tuned so the tiles→Konfigurator gap reads ~62px */
  align-items: stretch;
  padding-block: var(--sp-6);   /* keep .container's horizontal gutter so content isn't flush to the panel edges */
}

/* ── Left zone: live-style image-tile grid ──
   Fixed column COUNT per breakpoint, so tiles (and the product images
   inside them) get visibly LARGER as the screen widens.
   `.mega-grid` is scoped-reset because it's a <ul> inside `.header__nav`. */
.mega-panel .mega-grid {
  display: grid;
  /* 5-up, fixed-width columns distributed edge-to-edge so the first tile sits flush
     with the header's left edge and the last with the zone's right — gaps auto-adjust
     with the viewport (minmax shrinks the tiles on narrower screens). */
  grid-template-columns: repeat(5, minmax(0, 146px));
  justify-content: space-between;
  column-gap: var(--sp-4);        /* minimum inner gap; space-between distributes the rest */
  row-gap: var(--sp-5);          /* minimum row gap; space-between grows it so the last row's bottom meets the promo card's bottom */
  align-items: start;        /* override inherited `.header__nav ul{align-items:center}` so all tiles top-align */
  align-content: space-between;  /* grid is stretched to the taller feature card → top-align row 1, bottom-align row 2, gap auto-fills so tile-grid bottom aligns with the promo's */
  overflow: visible;         /* override inherited `.header__nav ul{overflow:auto}` so hover-lifted first-row cards aren't clipped */
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-panel .mega-grid > li { display: block; margin: 0; padding: 0; }

/* ── Tile: large product image on top, centered caption beneath ── */
.mega-panel .mega-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;                                  /* reset inherited `.header__nav a{padding:6px 0}` (added 12px slack/row) */
  border: 0;                                   /* drop inherited nav underline */
  white-space: normal;                         /* override inherited nowrap */
  text-align: center;
  color: var(--color-digital-black);
}
.mega-card__media {
  position: relative;
  display: block;
  align-self: center;
  width: 100%;
  max-width: 146px;                            /* keep the menu compact so it doesn't fill the screen */
  aspect-ratio: 1 / 1;                         /* square frame */
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);                        /* breathing room around the product cut-out */
  border-radius: var(--r-l);
  background: var(--color-white);                    /* product photos sit on white, like the live menu */
  box-shadow: inset 0 0 0 1px var(--color-graphite-100);  /* faint frame so white tiles stay defined */
  overflow: hidden;
  transition: box-shadow 0.22s ease;
}
.mega-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;                         /* show the whole product, no crop */
  display: block;
}
/* Hover — consistent with .pcard/.subtile: teal frame + shadow only, no lift, no zoom */
.mega-card:hover .mega-card__media,
.mega-card:focus-visible .mega-card__media { box-shadow: inset 0 0 0 1px rgba(1,82,83,0.3), var(--shadow-md); }
.mega-card__label {
  /* DS Body SM Medium — labels / nav items: 0.875rem · 500 · line-height 1.5 */
  min-height: 3em;              /* reserve 2 lines (1.5 × 2) so 1- and 2-line tiles are equal height → uniform rows */
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.5;
  transition: color .14s ease;
}
.mega-card:hover .mega-card__label,
.mega-card:focus-visible .mega-card__label { color: var(--color-teal); }

/* Both dropdowns: cards fill their 5 columns with a fixed 20px gap, and the
   Sprechanlage cards match the Briefkasten ones (its 8 tiles → 5+3). The tile media
   is capped (max-width) so the square tiles don't balloon on wide monitors — without
   the cap, a 1fr column on a 2560px screen makes each square ~264px tall (the whole
   menu reads "stretched"). align-content:start packs the rows to the top so a taller
   poster doesn't spread them apart vertically (the grid still stretches to the
   poster's height, leaving empty space below rather than gapping the rows). */
#mm-panel-briefkasten .mega-grid,
#mm-panel-sprechanlagen .mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-5); align-content: start; }
#mm-panel-briefkasten .mega-card__media,
#mm-panel-sprechanlagen .mega-card__media { max-width: 176px; }

/* ── Right-zone variant: XDM10 product POSTER (Sprechanlage) ──
   Premium split layout: scaled device photo in the UPPER section, copy on a solid
   dark panel BELOW (fully legible — no text over the image). No pills/paragraph/seal. */
.mega-panel .mega-poster {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* Anchor the device image to the top and the copy/CTA to the bottom. When the
     poster stretches taller than its content (tile column taller than the poster —
     e.g. a narrower browser window), the leftover height becomes a gap BETWEEN the
     image and the copy instead of piling up under the button, so the banner's top
     and bottom padding stay small and equal. */
  justify-content: space-between;
  height: 100%; min-height: 360px;
  border-radius: var(--r-l);
  /* premium surface: soft cool gradient + faint teal hairline + depth */
  background: linear-gradient(165deg, #F8F9FC 0%, #E8EFEF 100%);
  color: var(--color-digital-black);
  border: 1px solid rgba(1,82,83,0.10);
  box-shadow: 0 1px 2px rgba(26,23,27,0.05);
  transition: box-shadow .35s ease, border-color .22s ease;
}
.mega-panel .mega-poster:hover { box-shadow: 0 14px 30px rgba(26,23,27,0.13); border-color: rgba(1,82,83,0.25); }
/* Upper section: scaled-down device photo.
   flex:1 1 0 + min-height:0 lets it grow to fill the space ABOVE the copy; the img is
   absolutely positioned so its (very tall) intrinsic size can't drive the poster height. */
.mega-panel .mega-poster__media {
  position: relative; flex: 0 0 auto; overflow: hidden;   /* height hugs the (square) image — no forced square box. A fixed 1/1 box was taller than the contained image and centred it, so the gap above the device came out larger than the copy's bottom padding; letting the box hug the image makes the banner's top gap == bottom gap. */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 6%, 22px) clamp(14px, 6%, 22px) 0;   /* no bottom padding → image sits close to the copy */
  background: radial-gradient(ellipse 76% 64% at 50% 44%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 72%);   /* soft spotlight behind the device */
}
.mega-panel .mega-poster__bg {
  display: block;
  max-width: 100%; max-height: 100%; width: auto; height: auto;   /* whole image fits — never clipped */
  object-fit: contain;
  border-radius: var(--r-m);                    /* subtly rounded photo corners (4px) */
}
/* Both poster images are square (1024²), so the shared `contain` rule fills the
   square media identically on both dropdowns — no panel-specific override needed. */
/* Lower section: copy on solid dark, vertically centred so it stays balanced
   whatever height the poster stretches to (matching the tile grid). */
.mega-panel .mega-poster__content {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: var(--sp-2) var(--sp-5) var(--sp-5);   /* tighter top gap to the image */
}
.mega-panel .mega-poster__eyebrow {
  margin-bottom: 8px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-graphite-600);                   /* DS §19: section kicker is graphite-600 on light */
}
.mega-panel .mega-poster__title {
  margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--color-digital-black);
}
.mega-panel .mega-poster__features {
  margin: 10px 0 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-60);
}
/* Full-width filled teal CTA */
.mega-panel .mega-poster__cta {
  margin-top: var(--sp-4); width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.15rem;
  border: 0; border-radius: var(--r-m);
  background: var(--color-teal); color: #fff;
  font-size: var(--text-body-sm); font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(1,82,83,0.25);
  transition: background .18s ease, box-shadow .18s ease;
}
.mega-panel .mega-poster__cta:hover,
.mega-panel .mega-poster__cta:focus-visible { background: var(--color-teal-600); box-shadow: 0 4px 12px rgba(1,82,83,0.30); }

/* ============================================================
   QUICKBAR + BREADCRUMB — grabbed verbatim from the PLP (plp.css).
   Uses canonical Metzler tokens (--color-digital-black / --color-graphite-200).
   ============================================================ */

/* ── Breadcrumb ── */
.crumb { background: var(--color-white); padding-top: 14px; }
.crumb ol { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-body-sm); color: var(--ink-60); list-style: none; margin: 0; padding: 0; }
.crumb a { color: var(--ink-60); text-decoration: none; }
.crumb a:hover { color: var(--color-teal); }
.crumb li { display: inline-flex; align-items: center; }
.crumb li svg { width: 14px; height: 14px; color: var(--color-graphite-500); }
.crumb [aria-current] { color: var(--color-digital-black); font-weight: 500; }

/* ── Quickbar (contact / quick actions) ── */
.quickbar { background: var(--color-teal); color: rgba(255,255,255,.85); position: relative; overflow: hidden; }
.qa-mobile-toggle {
  display: none;
  align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 0;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.85);
  font-family: inherit; font-size: var(--text-body-sm); font-weight: 400; line-height: 1; letter-spacing: .005em;
}
.qa-mobile-toggle .chev { width: 20px; height: 20px; color: rgba(255,255,255,.85); stroke-width: 1.6; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.quickbar.is-open .qa-mobile-toggle .chev { transform: rotate(180deg); }
.quickbar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 10px; font-size: var(--text-caption); font-weight: 400; }
.qa-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: -14px; }
.qa-panel { display: contents; }
.qa { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 4px; color: rgba(255,255,255,.85); text-decoration: none; font-weight: 400; -webkit-tap-highlight-color: transparent; transition: background .25s ease, color .25s ease, transform .25s ease; line-height: 1; }
.qa svg { width: 15px; height: 15px; stroke-width: 1.6; color: #7cc6b9; transition: color .25s; }
.qa:hover { background: rgba(255,255,255,.1); color: #fff; }
.qa:hover svg { color: #fff; }
.qa strong { font-weight: 700; letter-spacing: -.005em; }
.qa-divider { width: 1px; height: 16px; background: rgba(255,255,255,.18); margin: 0 4px; }
.qa-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 4px; background: #fff; color: var(--color-teal); font-weight: 700; font-size: var(--text-caption); letter-spacing: -.005em; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; line-height: 1; }
.qa-cta svg { width: 14px; height: 14px; stroke-width: 2; }
.qa-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.qa.termin { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: 7px 13px; }
.qa.termin:hover { background: rgba(255,255,255,.16); }
.qa.termin svg { color: #7cc6b9; }
.qa-ico, .qa-body { display: contents; }
.qa-meta, .qa-arrow { display: none; }
.qa[href^="tel:"] .qa-meta { display: inline; }
@media (max-width: 900px) and (min-width: 768px) {
  .qa-divider { display: none; }
  .qa { padding: 6px 10px; }
}
@media (max-width: 767px) {
  .quickbar { overflow: visible; }
  .quickbar-inner { flex-direction: column; align-items: stretch; gap: 0; padding-block: 0; }
  .qa-mobile-toggle { display: flex; }
  /* Panel stays in the DOM (absolute overlay) and is revealed with a transition,
     so it eases smoothly both opening AND closing (no display:none jump). */
  .qa-panel {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 39;
    background: #fff; padding: 4px clamp(24px,4vw,56px) 14px; box-shadow: 0 16px 28px -18px rgba(1,40,40,.30);
    opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
    transition: opacity .26s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .36s;
  }
  .quickbar.is-open { z-index: 40; }
  .quickbar.is-open .quickbar-inner { position: relative; z-index: 1; }
  .quickbar.is-open .qa-panel {
    opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
    transition: opacity .26s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .quickbar.is-open .qa-mobile-toggle { width: calc(100% + 2 * clamp(24px,4vw,56px)); margin: 0 calc(-1 * clamp(24px,4vw,56px)); padding: 10px clamp(24px,4vw,56px); background: var(--color-teal); }
  .quickbar.is-open .qa-divider { display: none; }
  .quickbar.is-open .qa-group { display: contents; }
  .quickbar.is-open .qa,
  .quickbar.is-open .qa-cta { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; margin: 0; padding: 13px 0; border-radius: 0; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--color-graphite-200); color: var(--color-digital-black); font-weight: 400; letter-spacing: 0; box-shadow: none; transform: none; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
  .quickbar.is-open .qa[href^="tel:"] { order: 1; }
  .quickbar.is-open .qa-cta { order: 2; }
  .quickbar.is-open .qa.termin { order: 3; }
  .quickbar.is-open .qa[href="#partner"] { order: 4; border-bottom: 0; }
  .quickbar.is-open .qa-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: linear-gradient(135deg,#f0f6f6 0%,#e2edec 100%); box-shadow: inset 0 0 0 1px rgba(1,82,83,.08), inset 0 1px 0 rgba(255,255,255,.8); color: var(--color-teal); }
  .quickbar.is-open .qa-ico svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--color-teal); }
  .quickbar.is-open .qa-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .quickbar.is-open .qa-label { font-size: 0.875rem; font-weight: 700; line-height: 1.375; letter-spacing: -.008em; color: var(--color-digital-black); }
  .quickbar.is-open .qa-meta { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: #5a6565; letter-spacing: .005em; }
  .quickbar.is-open .qa-arrow { display: grid; place-items: center; color: var(--color-teal); }
  .quickbar.is-open .qa-arrow svg { width: 22px; height: 22px; stroke-width: 1.5; color: var(--color-teal); }
  .quickbar.is-open .qa[href^="tel:"] .qa-meta { color: var(--color-teal); }
  .quickbar.is-open .qa[href^="tel:"] .qa-meta strong { font-weight: 700; }
  .quickbar.is-open .qa:hover,
  .quickbar.is-open .qa-cta:hover { background: #fff; border-color: rgba(1,82,83,.1); }
  .quickbar.is-open .qa:active,
  .quickbar.is-open .qa-cta:active { border-color: rgba(1,82,83,.35); background: linear-gradient(120deg, rgba(1,82,83,0) 0%, rgba(1,82,83,.04) 45%, rgba(124,198,185,.08) 100%); }
  .quickbar.is-open .qa:active .qa-label,
  .quickbar.is-open .qa-cta:active .qa-label { color: var(--color-teal); }
  .quickbar.is-open .qa:active .qa-arrow { transform: translateX(2px); }
}

/* ============================================================
   Quickbar hotline notice — Sprechanlagen-Pause (direction A)
   ------------------------------------------------------------
   State-aware hotline: the item flags the closure and a "Details"
   toggle expands a full-width strip down from the bar. Injected
   and date-gated by chrome.js — dormant outside the window.
   ============================================================ */

/* Keeps the "Details" toggle beside the hotline item. Collapses to
   display:contents on mobile so the dropdown-panel grid row is untouched. */
.qa-notice-host { display: inline-flex; align-items: center; gap: 6px; }

/* Paused hotline item ------------------------------------------------ */
.qa.is-paused svg { color: var(--color-star); }                 /* gold = attention, not alarm */
/* Number stays readable (not struck); availability hours sit after it */
.qa-hours { margin-left: 8px; color: rgba(255,255,255,.6); font-weight: 400; white-space: nowrap; }

/* Gold "Pause" chip IS the Details toggle — badge + trigger stay one unit,
   sitting tight to the number (no floating link). */
.qa-pausebtn {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border: 1px solid var(--color-star); border-radius: 20px; cursor: pointer;
  background: transparent; color: var(--color-star);
  font-family: inherit; font-size: 0.6875rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: background .2s ease;
}
.qa-pausebtn:hover { background: rgba(255,192,65,.14); }
.qa-pausebtn .chev { width: 12px; height: 12px; stroke-width: 2.2; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.quickbar.is-notice-open .qa-pausebtn .chev { transform: rotate(180deg); }
.qa-notice-host > .qa { padding-right: 6px; }        /* tighten the chip to the number */

/* Pill on the collapsed mobile toggle (lives inside .qa-mobile-toggle, which is
   desktop-hidden, so it only shows on mobile) */
.qa-mobile-toggle > span { display: inline-flex; align-items: center; }   /* vertically centre label + pill */
.qa-togglepill {
  display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 9px; border-radius: 20px;
  background: transparent; border: 1px solid var(--color-star); color: var(--color-star);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}

/* Full-width strip that expands down from the bar. Soft cream/amber (not the
   bar's petrol) so it reads as a distinct notice, and matches the mobile banner. */
/* Height is animated to the REAL content height by JS (measure → transition →
   release to auto), so it eases exactly to the content — no max-height guess,
   no fr edge cases. Enter decelerates (longer), exit accelerates (quicker). */
.qa-expand {
  height: 0; overflow: hidden; will-change: height;
  background: var(--color-orange-50); border-bottom: 1px solid rgba(224,123,0,0);
  transition: height .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.qa-expand.is-closing { transition: height .28s cubic-bezier(.4,0,1,1), border-color .28s ease; }
.quickbar.is-notice-open .qa-expand { border-bottom-color: rgba(224,123,0,.28); }
.qa-expand__inner { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
/* content settles in a touch after the strip has begun opening */
.qa-expand__icon, .qa-expand__text, .qa-expand__close {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .24s ease, transform .32s cubic-bezier(.16,1,.3,1);
}
.quickbar.is-notice-open .qa-expand__icon,
.quickbar.is-notice-open .qa-expand__text,
.quickbar.is-notice-open .qa-expand__close { opacity: 1; transform: none; transition-delay: .1s; }
.qa-expand__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--color-orange); }
.qa-expand__icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.qa-expand__text { min-width: 0; }
.qa-expand__title { font-size: 0.875rem; font-weight: 700; letter-spacing: -.008em; line-height: 1.35; color: var(--color-digital-black); }
.qa-expand__body { font-size: 0.8125rem; line-height: 1.5; color: var(--color-graphite-800); margin-top: 3px; }  /* ~12:1 on cream — WCAG AAA */
.qa-expand__body strong { color: var(--color-digital-black); font-weight: 700; }
.qa-expand__close {
  flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--color-graphite-500); border-radius: 6px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.qa-expand__close:hover { background: rgba(224,123,0,.12); color: var(--color-digital-black); }
.qa-expand__close svg { width: 18px; height: 18px; stroke-width: 2; }

/* Respect reduced-motion: snap open/closed, no slide */
@media (prefers-reduced-motion: reduce) {
  .qa-expand, .qa-expand__icon, .qa-expand__text, .qa-expand__close, .qa-pausebtn .chev, .qa-panel { transition: none !important; }
  .qa-expand__icon, .qa-expand__text, .qa-expand__close { opacity: 1; transform: none; }
}

/* Mobile: banner inside the dropdown panel; toggle + strip are desktop-only */
.qa-notice-mobile { display: none; }
@media (max-width: 767px) {
  .qa-notice-host { display: contents; }
  .qa-pausebtn, .qa-expand { display: none !important; }         /* on mobile the pill lives on the toggle */
  .quickbar.is-open .qa-hours { color: #5a6565; }               /* readable on the white panel */
  .quickbar.is-open .qa-notice-mobile {
    display: block; margin: 2px 0 8px; padding: 12px 14px 13px; border-radius: 10px;
    background: var(--color-orange-50); border: 1px solid rgba(224,123,0,.28);
  }
  .qa-notice-mobile__head { display: flex; gap: 8px; align-items: flex-start; }
  .qa-notice-mobile__head svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--color-orange); stroke-width: 1.8; }
  .qa-notice-mobile__title { font-size: 0.875rem; font-weight: 700; line-height: 1.35; letter-spacing: -.008em; color: var(--color-digital-black); }
  .qa-notice-mobile__body { font-size: 0.8125rem; line-height: 1.5; color: var(--color-graphite-800); margin: 6px 0 0; padding-left: 26px; }
  .qa-notice-mobile__body strong { color: var(--color-digital-black); font-weight: 700; }
}