/* ============================================================================
 * C&R — LEGACY HEADER dynamic + responsive enhancements
 * (Customizer-driven header in inc/cr-header.php). Loaded after style.css.
 * Adds: WP-menu mega columns, mobile full-screen animated drawer with accordion
 * submenus, responsive top bar + coupon, and the "hide top bar on mobile" toggle.
 * ========================================================================== */

/* Dynamic mega panel — full-width columns + image cards, built from the WP menu + the
   per-item mega-card fields (Appearance ▸ Menus). Reuses the design's .cr-mega__* styles. */
.cr-mega.cr-mega--auto { left: var(--cr-gut); right: var(--cr-gut); border-radius: 0 0 14px 14px; padding: 28px; gap: 28px; flex-wrap: wrap; align-items: stretch; }
.cr-nav__item--full:hover > .cr-mega.cr-mega--auto,
.cr-nav__item--full:focus-within > .cr-mega.cr-mega--auto { display: flex !important; }
.cr-mega--auto > .cr-mega__col { flex: 1 1 160px; min-width: 150px; }
.cr-mega--auto > .cr-mega__card { flex: 0 0 210px; max-width: 240px; }
.cr-mega__card-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-weight: 800; font-size: 12.5px; color: var(--cr-orange); }
.cr-mega__card-txt { display: flex; flex-direction: column; }

/* Full-width mega panels align to the 1280 content container (not the whole viewport):
   anchor them to the centred .cr-nav-row by making the hovered item position:static. */
.cr-nav-row { position: relative; }
.cr-nav__item--full { position: static; }
.cr-mega--grid, .cr-mega--wide, .cr-mega--auto { left: 0 !important; right: 0 !important; }

/* Keep the nav (All Categories + items) on ONE line — never wrap to a second row. */
.cr-nav-row { flex-wrap: nowrap !important; }
.cr-allcats { flex: none !important; white-space: nowrap !important; }
.cr-nav__link, .cr-nav__link--toggle { white-space: nowrap !important; }
.cr-nav__item { flex: none; }
@media (min-width: 1100px) {
  /* tighten spacing so a fuller menu still fits one line */
  .cr-nav-row { gap: 0; }
  .cr-nav__link { padding-left: 11px; padding-right: 11px; }
  .cr-allcats { padding: 0 16px; }
}

/* ---- mobile top bar toggle (Customise ▸ "Show top bar on mobile") ---- */
@media (max-width: 1099px) {
  .cr-chrome--tb-desktop .cr-topbar { display: none; }
}

/* ---- top bar: compact & centred on tablet/mobile ---- */
@media (max-width: 1099px) {
  .cr-topbar__in { justify-content: center; }
  .cr-topbar__left { display: none; }
  .cr-topbar__right { gap: 20px; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .cr-topbar { font-size: 11.5px; }
  .cr-topbar__right { gap: 14px; }
  .cr-topbar__link, .cr-topbar__phone, .cr-topbar__email { font-size: 11.5px; }
}
@media (max-width: 430px) {
  .cr-topbar__link.cr-topbar__email { display: none; }   /* keep delivery + phone on the smallest screens */
}

/* ---- coupon bar: smaller on small screens ---- */
@media (max-width: 760px) {
  .cr-coupon__in { padding-top: 9px; padding-bottom: 9px; gap: 7px; font-size: 12px; flex-wrap: wrap; }
  .cr-coupon__t2 { display: none; }
}
@media (max-width: 430px) {
  .cr-coupon__in { font-size: 11px; gap: 6px; }
  .cr-coupon__code { padding: 3px 9px; }
}

/* ============ MOBILE FULL-SCREEN DRAWER (slide-in + accordion) ============ */
@media (max-width: 1099px) {
  .cr-mobile-overlay { display: block; position: fixed; inset: 0; background: rgba(12,13,26,.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  body.cr-nav-open .cr-mobile-overlay { opacity: 1; visibility: visible; }

  .cr-mobile-nav { display: flex !important; flex-direction: column; position: fixed; top: 0; right: 0; width: min(94vw, 440px); max-width: none; height: 100%; height: 100dvh; background: #fff; z-index: 9999; box-shadow: -24px 0 60px -24px rgba(20,24,43,.5); transform: translateX(105%); transition: transform .34s cubic-bezier(.33, 1, .68, 1); overflow: hidden; }
  body.cr-nav-open .cr-mobile-nav { transform: translateX(0); }
  .cr-mobile-nav__head { flex: none; }
  .cr-mobile-nav__head button { width: 40px; height: 40px; border: 0; background: var(--cr-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--cr-ink); }
  .cr-mobile-nav__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 28px; }

  /* accordion items */
  .cr-mnav__group { border-bottom: 1px solid var(--cr-line-2, #F0F2F7); }
  .cr-mnav__top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 15px 22px; background: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15.5px; color: var(--cr-ink); text-align: left; line-height: 1.3; }
  a.cr-mnav__top { text-decoration: none; border-bottom: 1px solid var(--cr-line-2, #F0F2F7); }
  .cr-mnav__chev { flex: none; color: var(--cr-muted); transition: transform var(--cr-ease); }
  .cr-mnav__group.cr-mnav--open > .cr-mnav__top { color: var(--cr-orange); }
  .cr-mnav__group.cr-mnav--open .cr-mnav__chev { transform: rotate(180deg); }
  .cr-mnav__sub { max-height: 0; overflow: hidden; transition: max-height .32s ease; background: var(--cr-light); }
  .cr-mnav__group.cr-mnav--open .cr-mnav__sub { max-height: 760px; }
  .cr-mnav__link { display: block; padding: 12px 22px 12px 34px; font-size: 14px; font-weight: 600; color: var(--cr-body); border-bottom: 1px solid rgba(20,24,43,.05); }
  .cr-mnav__link:hover { color: var(--cr-orange); }
}

/* =========================================================================
   STICKY HEADER  (Appearance ▸ Customise ▸ C&R Sticky Header)
   The controller JS in cr-header.php pins each .cr-band--sticky band as
   position:fixed and inserts a .cr-sticky-spacer of equal height so the page
   never jumps. Bands pin exactly where they reach the top (zero movement = no
   jerk); a subtle, light-black bottom shadow fades in on the last pinned band.
   z-index sits below the mobile menu (9998/9999) but above page content.
   ========================================================================= */
.cr-chrome--has-sticky .cr-band--pinned { position: fixed; left: 0; right: 0; z-index: 950; }
.cr-chrome--has-sticky .cr-topbar.cr-band--pinned      { z-index: 954; }
.cr-chrome--has-sticky .cr-main-header.cr-band--pinned { z-index: 953; }
.cr-chrome--has-sticky .cr-nav.cr-band--pinned         { z-index: 952; }
.cr-chrome--has-sticky .cr-coupon.cr-band--pinned      { z-index: 951; }
/* smooth shadow transition; subtle premium shadow only on the bottom-most pinned band */
.cr-chrome--has-sticky .cr-band--pinned { transition: box-shadow .3s ease; }
.cr-chrome--has-sticky .cr-band--pinned-last { box-shadow: 0 6px 20px -8px rgba(10, 12, 24, .22); }
.cr-sticky-spacer { width: 100%; }