/* Cibomio — large / ultra-wide viewport enhancements (1920px+).
   Loaded globally after km-brand.css; does not affect mobile/tablet. */

@media (min-width: 1920px) {
  :root {
    --km-container: 1680px;
    --km-container-narrow: 1400px;
    --km-page-gutter: clamp(24px, 2.5vw, 48px);
  }

  html {
    font-size: 17px;
  }

  /* Header */
  .km-h1,
  .km-h2-inner,
  .km-mega__inner {
    max-width: var(--km-container);
    padding-left: var(--km-page-gutter);
    padding-right: var(--km-page-gutter);
  }

  .km-logo {
    font-size: clamp(38px, 2.1vw, 44px);
  }

  .km-h2-inner .km-nav-link {
    font-size: 14px;
  }

  .km-header-spacer {
    height: 128px;
  }

  /* Catalog & product grids */
  .km-catalog-page {
    max-width: var(--km-container) !important;
    padding: 24px var(--km-page-gutter);
  }

  .km-rec-grid,
  .km-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }

  .km-browse-sidebar {
    width: 300px;
    top: 156px;
  }

  .km-browse-head__title {
    font-size: clamp(30px, 2.2vw, 38px);
  }

  /* Content pages */
  .km-page,
  .km-pdp,
  .km-pdp-details,
  .km-pdp-recs {
    max-width: var(--km-container-narrow);
    padding-left: var(--km-page-gutter);
    padding-right: var(--km-page-gutter);
  }

  .km-about-page {
    max-width: 1440px;
  }

  .km-info-page {
    max-width: 920px;
  }

  .km-account-page {
    max-width: 1280px;
    padding-left: var(--km-page-gutter);
    padding-right: var(--km-page-gutter);
  }

  .km-business-page {
    max-width: var(--km-container-narrow);
  }

  .km-membership-page .km-membership-plans,
  .km-membership-page .km-membership-benefits {
    max-width: var(--km-container);
  }

  .km-couriers-page,
  .km-courier-page {
    max-width: 960px;
  }

  .km-blog-page {
    max-width: var(--km-container-narrow);
  }

  /* Auth — slightly larger but still narrow */
  .km-auth-page {
    max-width: 520px;
    padding: 40px var(--km-page-gutter) 64px;
  }

  .km-auth-page h1 {
    font-size: clamp(28px, 2vw, 34px);
  }

  /* Footer */
  .km-footer__inner {
    max-width: var(--km-container-narrow);
    padding-left: var(--km-page-gutter);
    padding-right: var(--km-page-gutter);
  }

  .km-footer__logo {
    font-size: 28px;
  }

  /* Homepage (testmain) */
  .km-testmain__main {
    max-width: 840px;
  }

  .km-testmain__stack {
    max-width: clamp(560px, 42vw, 680px);
    padding: clamp(36px, 3vw, 48px) clamp(28px, 2.5vw, 40px) clamp(28px, 2.5vw, 36px);
  }

  .km-testmain__stack::before {
    border-radius: clamp(32px, 2.5vw, 44px);
    width: calc(100% + clamp(48px, 4vw, 72px));
    height: calc(100% + clamp(46px, 4vw, 64px));
    min-width: 0;
    min-height: 0;
  }

  .km-testmain__logo-cibomio-line {
    font-size: clamp(52px, 4vw, 64px);
  }

  .km-testmain__tagline,
  .km-testmain__slogan {
    font-size: clamp(18px, 1.4vw, 22px);
  }

  .km-testmain__voice-hint {
    display: block;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 600;
    line-height: 1.5;
    color: #3d4f3f;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }
}

@media (min-width: 2560px) {
  :root {
    --km-container: 1920px;
    --km-container-narrow: 1600px;
  }

  html {
    font-size: 18px;
  }

  .km-rec-grid,
  .km-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }

  .km-catalog-page {
    max-width: var(--km-container) !important;
  }

  .km-h1,
  .km-h2-inner,
  .km-mega__inner {
    max-width: var(--km-container);
  }

  .km-page,
  .km-pdp,
  .km-pdp-details,
  .km-pdp-recs {
    max-width: var(--km-container-narrow);
  }

  .km-about-page {
    max-width: 1600px;
  }

  .km-account-page {
    max-width: 1440px;
  }

  .km-footer__inner {
    max-width: var(--km-container-narrow);
  }

  .km-testmain__main {
    max-width: min(1100px, 52vw);
  }

  .km-testmain__stack {
    max-width: min(920px, 48vw);
    padding: 48px 40px 40px;
  }

  .km-testmain__logo-cibomio-line {
    font-size: clamp(56px, 3.2vw, 72px);
  }

  .km-testmain__slogan {
    font-size: clamp(18px, 1.2vw, 24px);
  }

  .km-testmain__voice-mascot-wrap {
    width: 128px;
    height: 128px;
  }

  .km-testmain__mic-pulse-wrap,
  .km-testmain__mic {
    width: 112px;
    height: 112px;
  }

  .km-testmain__voice-hint {
    margin-top: 20px;
    font-size: clamp(17px, 0.95vw, 22px);
    font-weight: 650;
    line-height: 1.45;
    color: #2e3d30;
    max-height: none;
    overflow: visible;
  }

  .km-testmain__nav-btn {
    font-size: 17px;
    min-height: 52px;
    padding: 14px 16px;
  }
}

@media (min-width: 3840px) {
  :root {
    --km-container: 2200px;
    --km-container-narrow: 1800px;
    --km-page-gutter: clamp(32px, 2vw, 64px);
  }

  html {
    font-size: 19px;
  }

  .km-rec-grid,
  .km-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px;
  }

  .km-h1,
  .km-h2-inner,
  .km-mega__inner,
  .km-catalog-page,
  .km-page,
  .km-pdp,
  .km-pdp-details,
  .km-pdp-recs,
  .km-footer__inner {
    max-width: var(--km-container);
  }

  .km-page,
  .km-pdp,
  .km-pdp-details,
  .km-pdp-recs,
  .km-account-page,
  .km-about-page,
  .km-business-page {
    max-width: var(--km-container-narrow);
  }

  .km-testmain__main {
    max-width: min(1280px, 40vw);
  }

  .km-testmain__stack {
    max-width: min(1080px, 36vw);
    padding: 56px 48px 44px;
  }

  .km-testmain__logo-cibomio-line {
    font-size: clamp(64px, 2.4vw, 84px);
  }

  .km-testmain__slogan {
    font-size: clamp(20px, 1vw, 26px);
  }

  .km-testmain__voice-mascot-wrap {
    width: 148px;
    height: 148px;
  }

  .km-testmain__mic-pulse-wrap,
  .km-testmain__mic {
    width: 128px;
    height: 128px;
  }

  .km-testmain__mic-icon {
    width: 48px;
    height: 48px;
  }

  .km-testmain__voice-bubble {
    max-width: 320px;
    padding: 14px 16px;
  }

  .km-testmain__voice-bubble-text {
    font-size: 16px;
  }

  .km-testmain__voice-hint {
    margin-top: 22px;
    padding: 0 12px;
    font-size: clamp(20px, 0.75vw, 26px);
    font-weight: 700;
    line-height: 1.4;
    color: #1a2e1c;
    max-height: none;
    overflow: visible;
  }

  .km-testmain__nav-btn {
    font-size: 18px;
    min-height: 56px;
  }
}