/* ==========================================================================
 GLOBAL RESPONSIVE SYSTEM
 Final mobile and viewport guardrails for every HTML page.
 ========================================================================== */

 :root {
  --rg-gutter: clamp(16px, 4vw, 48px);
  --rg-gutter-tight: clamp(10px, 3vw, 18px);
  --rg-radius: clamp(14px, 3.8vw, 28px);
  --rg-touch: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

:where(img, video, canvas, svg, iframe) {
  max-width: 100%;
}

:where(img, video, canvas) {
  height: auto;
}

:where(iframe) {
  display: block;
  border: 0;
}

:where(input, select, textarea, button) {
  max-width: 100%;
  font: inherit;
}

:where(h1, h2, h3, h4, h5, h6, p, li, td, th, .card-text, .hero-subtitle, .idx-hero-tagline) {
  overflow-wrap: anywhere;
}

:where(table) {
  width: 100%;
}

:where(.comparison-table, .menu-table, .table-wrap, .table-responsive, .po-today-list, .pos-today-list, .member-history-list) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.comparison-table table, .menu-table table) {
  min-width: min(680px, 100%);
}

@media (max-width: 1440px) {
  :root {
    --rg-gutter: clamp(20px, 4vw, 56px);
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell, .member-card) {
    max-width: calc(100vw - (var(--rg-gutter) * 2)) !important;
  }
}

@media (max-width: 1200px) {
  :root {
    --rg-gutter: clamp(18px, 3.6vw, 42px);
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: min(100%, calc(100vw - (var(--rg-gutter) * 2))) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell, .po-workspace) {
    padding-left: var(--rg-gutter) !important;
    padding-right: var(--rg-gutter) !important;
  }

  :where(.project-card) {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 34vw) !important;
    gap: clamp(24px, 4vw, 48px) !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --rg-gutter: clamp(16px, 4vw, 32px);
  }

  :where(.idx-hero-split, .branch-card, .nf-stage, .po-main) {
    grid-template-columns: 1fr !important;
  }

  :where(.idx-grid-3, .idx-grid-4, .features-grid, .process-grid, .values-grid, .mnu-grid, .footer-grid, .po-stats-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(.timeline-item, .profile-section, .project-card, .branch-card, .nf-stage) {
    gap: clamp(16px, 4vw, 28px) !important;
  }

  :where(.project-card, .profile-section, .branch-card, .nf-stage) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  :root {
    --rg-gutter: clamp(14px, 4vw, 24px);
    --rg-radius: clamp(14px, 4vw, 22px);
  }

  :where(body) {
    min-width: 0 !important;
  }

  :where(.idx-nav-island) {
    max-width: calc(100vw - 24px) !important;
  }

  :where(.idx-nav-link, .idx-nav-cta-btn, .nav-item, .loyalty-nav-link, .hero-3d-link) {
    min-height: var(--rg-touch) !important;
    touch-action: manipulation;
    white-space: nowrap;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - (var(--rg-gutter) * 2)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :where(.idx-section, .page-hero, .gal-hero, .lgl-hero, .nf-stage, .idx-cta-band, .feedback-section, .cta-section, .quote-card, .disclaimer-card, .project-card, .profile-card, .po-card, .pl-card, .member-card-inner) {
    border-radius: var(--rg-radius) !important;
  }

  :where(.page-hero, .gal-hero, .lgl-hero, .nf-stage) {
    overflow: hidden !important;
  }

  :where(.hero-actions, .idx-hero-actions, .idx-cta-band > div:last-child, .cta-buttons, .branch-actions, .button-group, .customer-actions, .po-actions, .hero-3d-buttons) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  :where(.footer-grid, .process-grid, .values-grid, .features-grid, .profile-section, .project-card, .branch-card, .po-main, .pos-config-row, .form-grid-2, .checkbox-grid) {
    grid-template-columns: 1fr !important;
  }

  :where(.nav-container) {
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translateX(-50%) !important;
  }

  :where(.nav-pill) {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-pill::-webkit-scrollbar {
    display: none;
  }

  :where(.loyalty-nav) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .loyalty-nav::-webkit-scrollbar {
    display: none;
  }

  :where(.po-workspace, .po-today) {
    padding-left: var(--rg-gutter) !important;
    padding-right: var(--rg-gutter) !important;
  }

  :where(.project-visual, .hero-decoration) {
    display: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --rg-gutter: 16px;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - 32px) !important;
  }

  :where(.hero, .page-hero, .gal-hero, .lgl-hero, .nf-stage) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  :where(.hero-title, .idx-hero-title, .gal-title, .lgl-title, .nf-title) {
    font-size: clamp(2rem, 11vw, 3.6rem) !important;
    line-height: 1.08 !important;
  }

  :where(.section-title, .idx-title-lg, .timeline-title, .values-title, .process-title, .cta-title, .feedback-title, .contact-title) {
    font-size: clamp(1.45rem, 7vw, 2.35rem) !important;
    line-height: 1.18 !important;
  }

  :where(.hero-subtitle, .idx-hero-tagline, .gal-desc, .lgl-hero p, .nf-subtitle, .card-text, .project-desc, .quote-text) {
    font-size: clamp(0.92rem, 3.8vw, 1.05rem) !important;
    line-height: 1.72 !important;
  }

  :where(.home-link, .hero-menu-link, .idx-btn, .idx-hero-btn-primary, .idx-hero-btn-ghost, .btn, .btn-cta-primary, .btn-cta-secondary, .mnu-cta a, .branch-actions a, .btn-directions, .btn-today, .btn-submit, .project-link, .po-phone-btn, .po-btn-main, .po-btn-cancel, .pl-btn, .member-lookup-btn, .hero-3d-btn) {
    min-height: var(--rg-touch) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  :where(.hero-actions, .idx-hero-actions, .button-group, .branch-actions, .cta-buttons, .po-phone-row, .po-actions, .member-lookup-form, .customer-note-row, .hero-3d-buttons) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  :where(.home-link, .hero-menu-link, .idx-btn, .idx-hero-btn-primary, .idx-hero-btn-ghost, .btn, .btn-cta-primary, .btn-cta-secondary, .mnu-cta a, .btn-directions, .btn-today, .btn-submit, .project-link, .po-phone-btn, .po-btn-main, .po-btn-cancel, .pl-btn, .member-lookup-btn) {
    width: 100% !important;
  }

  :where(.branch-tabs, .mnu-filter-row, .gal-controls) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 10px !important;
  }

  :where(.comparison-table table, .menu-table table) {
    min-width: 620px !important;
  }

  :where(.po-main) {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  :root {
    --rg-gutter: 14px;
    --rg-radius: 18px;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - 28px) !important;
  }

  :where(.idx-grid-3, .idx-grid-4, .bento-grid, .features-grid, .process-grid, .values-grid, .footer-grid, .po-stats-summary, .member-stats-grid, .customer-stats) {
    grid-template-columns: 1fr !important;
  }

  :where(.mnu-grid, .branch-tabs, .mnu-filter-row, .gal-controls, .po-amount-grid, .pos-redeem-options) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(.idx-hero-actions) {
    grid-template-columns: 1fr !important;
  }

  :where(.idx-hero-meta, .hero-stats) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  :where(.idx-hero-stat, .stat-item) {
    min-width: 0 !important;
  }

  :where(.stat-number, .idx-hero-stat-num, .member-points-number, .po-cust-points-num) {
    font-size: clamp(1.25rem, 8vw, 2rem) !important;
  }

  :where(.stat-label, .idx-hero-stat-label, .member-stat-label, .customer-stat-label) {
    font-size: clamp(0.58rem, 2.6vw, 0.72rem) !important;
    letter-spacing: 0.05em !important;
  }

  :where(.pl-wrap) {
    min-height: 100dvh !important;
    padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
  }

  :where(.pl-card, .po-card, .pos-input-card, .customer-card, .new-member-card, .pos-recent, .pos-today-customers, .pos-redeem-card, .pos-config-card) {
    padding: 18px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 520px) {
  :root {
    --rg-gutter: 12px;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - 24px) !important;
  }

  :where(.branch-tabs, .mnu-filter-row, .gal-controls) {
    grid-template-columns: 1fr !important;
  }

  :where(.hero-title, .idx-hero-title, .gal-title, .lgl-title, .nf-title) {
    font-size: clamp(1.85rem, 12vw, 3rem) !important;
    letter-spacing: -0.035em !important;
  }

  :where(.idx-hero-brand, .member-brand, .pl-brand, .footer-logo) {
    flex-wrap: wrap !important;
  }

  :where(.info-card, .customer-card-header, .new-member-header, .member-history-item, .pos-transaction-item, .po-cust-head) {
    align-items: flex-start !important;
  }

  :where(.customer-card-header, .po-cust-head, .new-member-header) {
    flex-wrap: wrap !important;
  }

  :where(.customer-card-header-right, .po-cust-pts-block) {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 420px) {
  :root {
    --rg-gutter: 10px;
    --rg-radius: 16px;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - 20px) !important;
  }

  :where(.mnu-grid) {
    gap: 10px !important;
  }

  :where(.mnu-item-body, .idx-pad, .bezel-inner, .value-card, .process-step, .faq-item, .po-card, .pl-card, .member-card-body, .member-lookup-section, .member-history-section) {
    padding: 14px !important;
  }

  :where(.idx-hero-meta, .hero-stats) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  :where(.stat-divider, .idx-hero-stat-sep) {
    display: none !important;
  }

  :where(.idx-hero-stat, .stat-item) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  :where(.gal-grid) {
    columns: 2 !important;
    column-gap: 8px !important;
  }

  :where(.footer-bottom-links, .kt-partner-actions) {
    gap: 8px !important;
  }
}

@media (max-width: 360px) {
  :root {
    --rg-gutter: 8px;
  }

  :where(.main-wrapper, .idx-main, .abt-shell, .cnt-shell, .mnu-shell, .gal-shell, .lgl-shell, .nf-shell, .pos-shell) {
    width: calc(100vw - 16px) !important;
  }

  :where(.mnu-grid, .gal-controls, .branch-tabs, .mnu-filter-row, .po-amount-grid, .pos-redeem-options, .member-stats-grid, .customer-stats) {
    grid-template-columns: 1fr !important;
  }

  :where(.gal-grid) {
    columns: 1 !important;
  }

  :where(.nav-item, .idx-nav-link, .loyalty-nav-link) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.72rem !important;
  }

  :where(.hero-title, .idx-hero-title, .gal-title, .lgl-title, .nf-title) {
    font-size: clamp(1.7rem, 12vw, 2.45rem) !important;
  }
}

@media (max-height: 760px) and (max-width: 900px) {
  :where(.hero, .page-hero, .gal-hero, .lgl-hero, .nf-stage, #hero-3d-container) {
    min-height: auto !important;
  }

  :where(.hero, .page-hero, .gal-hero, .lgl-hero, .nf-stage) {
    padding-top: clamp(88px, 18vh, 118px) !important;
    padding-bottom: clamp(28px, 8vh, 48px) !important;
  }

  :where(.branch-image, .timeline-image) {
    max-height: 42vh !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  :where(.idx-nav-island, .nav-container, .loyalty-nav, .hero-3d-nav) {
    position: absolute !important;
  }

  :where(.hero, .page-hero, .gal-hero, .lgl-hero, .nf-stage, #hero-3d-container) {
    min-height: 100vh !important;
  }

  :where(.idx-hero-split, .hero-3d-content) {
    padding-top: 84px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(a, button, .idx-btn, .mnu-item, .gal-item, .idx-bezel, .value-card, .process-step, .project-card, .profile-card, .hero-3d-btn):hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    :where(.idx-mobile-header, .nav-container, .loyalty-nav, .hero-3d-nav) {
      top: max(10px, env(safe-area-inset-top)) !important;
    }

    :where(.site-footer, .loyalty-footer, footer) {
      padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ==========================================================================
   GLOBAL NAVBAR RESPONSIVE
   Covers every navbar/header pattern used by the current HTML pages.
   ========================================================================== */

:where(.idx-nav-island, .idx-mobile-header, .nav-container, .nav-pill, .loyalty-nav, .hero-3d-nav, .tv-head) {
  max-width: 100vw;
}

:where(.idx-nav-link, .idx-nav-cta-btn, .idx-mobile-trigger, .idx-nav-toggle, .nav-item, .loyalty-nav-link, .hero-3d-nav-links a, .hero-3d-nav-toggle, .tv-head-back) {
  touch-action: manipulation;
}

:where(.nav-pill, .loyalty-nav, .hero-3d-nav-links) {
  scrollbar-width: none;
}

.nav-pill::-webkit-scrollbar,
.loyalty-nav::-webkit-scrollbar,
.hero-3d-nav-links::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1180px) and (min-width: 901px) {
  :where(.idx-nav-island) {
    gap: 4px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 9px 10px !important;
  }

  :where(.idx-nav-link) {
    padding: 10px 12px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.045em !important;
  }

  :where(.hero-3d-nav) {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  :where(.hero-3d-nav-links) {
    gap: 1.35rem !important;
  }
}

@media (max-width: 1024px) {
  :where(.hero-3d-nav) {
    min-height: 64px !important;
    padding: 12px 18px !important;
  }

  :where(.hero-3d-nav-toggle) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(196, 138, 74, 0.38) !important;
    border-radius: 14px !important;
    background: rgba(26, 15, 10, 0.58) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  :where(.hero-3d-nav-toggle span) {
    width: 20px !important;
  }

  :where(.nav-container) {
    width: min(720px, calc(100vw - 28px)) !important;
  }
}

@media (max-width: 900px) {
  :where(.idx-mobile-header) {
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    z-index: 210 !important;
    min-height: 58px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(196, 87, 10, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(255, 250, 244, 0.94) !important;
    box-shadow: 0 12px 34px rgba(59, 34, 16, 0.13) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }

  :where(.idx-mobile-header .idx-nav-brand) {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  :where(.idx-mobile-header .idx-nav-brand img) {
    width: auto !important;
    height: 34px !important;
  }

  :where(.idx-mobile-trigger) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  :where(.idx-nav-island) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: max(18px, calc(env(safe-area-inset-top) + 14px)) 18px max(24px, calc(env(safe-area-inset-bottom) + 20px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 0 0 24px 24px !important;
  }

  :where(.idx-nav-island.is-open) {
    transform: translateY(0) !important;
  }

  :where(.idx-nav-top) {
    min-height: 44px !important;
    margin-bottom: 10px !important;
  }

  :where(.idx-nav-links-wrap) {
    width: 100% !important;
    gap: 8px !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    font-size: clamp(0.92rem, 3.7vw, 1rem) !important;
    line-height: 1.25 !important;
  }

  :where(.idx-nav-cta) {
    margin-top: 12px !important;
    padding-top: 16px !important;
  }

  :where(.idx-nav-cta-btn) {
    min-height: 48px !important;
    border-radius: 14px !important;
  }

  :where(.idx-nav-overlay) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 148 !important;
    background: rgba(18, 10, 5, 0.38) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  :where(.nav-container) {
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    width: min(680px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    transform: translateX(-50%) !important;
  }

  :where(.nav-pill) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    padding: 6px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    -webkit-overflow-scrolling: touch;
  }

  :where(.nav-item) {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
  }

  :where(.hero-3d-nav) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px !important;
    background: linear-gradient(to bottom, rgba(26, 15, 10, 0.94) 0%, rgba(26, 15, 10, 0.58) 78%, transparent 100%) !important;
  }

  :where(.hero-3d-logo) {
    min-width: 0 !important;
  }

  :where(.hero-3d-logo-text) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :where(.hero-3d-nav-links[style*="display: flex"]) {
    top: calc(100% + 6px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 10px !important;
    gap: 6px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(196, 138, 74, 0.24) !important;
    border-radius: 18px !important;
    background: rgba(26, 15, 10, 0.96) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  :where(.hero-3d-nav-links[style*="display: flex"] a) {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  :where(.loyalty-nav) {
    top: max(10px, env(safe-area-inset-top)) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }

  :where(.loyalty-nav-link) {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
  }

  :where(.tv-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  :where(.tv-head > :last-child) {
    width: auto !important;
    min-width: 44px !important;
  }

  :where(.tv-head-back) {
    justify-self: start !important;
    min-height: 44px !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  :where(.tv-head-brand) {
    justify-self: center !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  :where(.idx-mobile-header) {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
  }

  :where(.idx-nav-island) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    min-height: 46px !important;
    padding: 13px 14px !important;
  }

  :where(.hero-3d-nav) {
    min-height: 60px !important;
  }

  :where(.hero-3d-logo img) {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 520px) {
  :where(.idx-mobile-header) {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    min-height: 54px !important;
    border-radius: 16px !important;
  }

  :where(.idx-mobile-header .idx-nav-brand img) {
    height: 30px !important;
  }

  :where(.idx-mobile-trigger) {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  :where(.idx-nav-island) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 0 0 20px 20px !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    min-height: 44px !important;
    padding: 12px 13px !important;
    font-size: 0.9rem !important;
  }

  :where(.nav-container) {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  :where(.nav-pill) {
    min-height: 50px !important;
    padding: 5px !important;
  }

  :where(.nav-item) {
    min-height: 40px !important;
    padding: 9px 13px !important;
    font-size: 0.72rem !important;
  }

  :where(.hero-3d-nav) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :where(.hero-3d-nav-links[style*="display: flex"]) {
    left: 10px !important;
    right: 10px !important;
  }

  :where(.tv-head) {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 12px 12px !important;
  }

  :where(.tv-head-brand-text) {
    display: none !important;
  }
}

@media (max-width: 420px) {
  :where(.idx-mobile-header) {
    min-height: 52px !important;
    padding: 7px 10px !important;
  }

  :where(.idx-mobile-trigger) {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  :where(.idx-nav-toggle) {
    width: 40px !important;
    height: 40px !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    font-size: 0.86rem !important;
  }

  :where(.hero-3d-logo-text) {
    display: none !important;
  }

  :where(.tv-head-back) {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 360px) {
  :where(.idx-mobile-header) {
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    min-height: 50px !important;
    padding: 6px 8px !important;
  }

  :where(.idx-mobile-header .idx-nav-brand img) {
    height: 28px !important;
  }

  :where(.idx-mobile-trigger) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  :where(.idx-nav-island) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    min-height: 42px !important;
    padding: 11px 12px !important;
    font-size: 0.82rem !important;
  }

  :where(.nav-item) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.68rem !important;
  }

  :where(.hero-3d-nav-toggle) {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  :where(.tv-head-back) {
    max-width: 44px !important;
    overflow: hidden !important;
    color: transparent !important;
  }

  :where(.tv-head-back svg) {
    color: var(--mut, currentColor) !important;
    flex: 0 0 auto !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  :where(.idx-nav-island, .idx-mobile-header, .hero-3d-nav, .nav-container, .loyalty-nav) {
    position: fixed !important;
  }

  :where(.idx-nav-island) {
    max-height: 100dvh !important;
  }

  :where(.idx-nav-island .idx-nav-link) {
    min-height: 40px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  :where(.idx-nav-cta) {
    margin-top: 8px !important;
    padding-top: 10px !important;
  }
}

@media print {
  :where(.idx-nav-island, .idx-mobile-header, .nav-container, .loyalty-nav, .hero-3d-nav, .ph, .tv-head, .hiring-popup-card, #hiring-popup-overlay) {
    display: none !important;
  }
}