/* Mobile storefront and installed app. Keep scrolling on the document so sticky
   headers still work; only galleries and table wrappers scroll horizontally. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --compact-control-height: 44px;
  --compact-control-padding: 12px;
  --compact-control-gap: 6px;
  --compact-control-icon: 16px;
}

/* Installed apps keep the full store directory on Home. */
html.is-standalone body:not(.home-page) .nk-footer { display: none; }
@media (display-mode: standalone) {
  body:not(.home-page) .nk-footer { display: none; }
}

@media (max-width: 1080px) {
  :root { --gutter: max(24px, var(--safe-left), var(--safe-right)); }
  html { overflow-x: hidden; overscroll-behavior-x: none; }
  body { width: 100%; min-width: 0; overflow-x: clip; overscroll-behavior-x: none; }
  @supports (overflow: clip) {
    html { overflow-x: clip; }
  }
  #main { min-width: 0; }
  .nk-card, .nk-card-body, .nk-section-head, .nk-catalog-results { min-width: 0; }
  .nk-card h3 { overflow-wrap: anywhere; }
  .nk-thumbs, .nk-size-table-wrap, .table-scroll, .nk-table-wrap, .nk-policy-nav {
    max-width: 100%; overscroll-behavior-x: contain;
  }
}

/* Secondary actions share a compact size and a full touch target. */
@media (max-width: 900px) {
  body :is(.nk-chip, .nk-btn-sm, .nk-toolbar-button, .nk-pill-button,
    .nk-pill-option > span:not(.sr-only), .nk-segment-tabs a, .nk-active-filters a,
    .nk-ct .nk-segment > a, .nk-ct .nk-segment label span, .nk-ck .nk-order-item .nk-chip) {
    min-height: var(--compact-control-height);
    padding: 0 var(--compact-control-padding);
    gap: var(--compact-control-gap);
    justify-content: center;
    font-size: 14px; font-weight: 600; line-height: 1.4;
  }
  body :is(.nk-chip, .nk-btn-sm, .nk-toolbar-button, .nk-pill-button) > .icon {
    flex: none; width: var(--compact-control-icon); height: var(--compact-control-icon);
  }
}

@media (max-width: 800px) {
  :root {
    --gutter: max(16px, var(--safe-left), var(--safe-right));
    --header-height: calc(65px + var(--safe-top));
    --tabbar-height: calc(72px + var(--safe-bottom));
  }

  /* One action on either side of the wordmark. The bag is in the bottom bar. */
  .nk-header { padding-top: var(--safe-top); }
  .nk-header .nk-header-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px; min-height: 64px; padding: 10px var(--gutter);
  }
  .nk-header .nk-header-row > .nk-brand {
    position: static; justify-self: center; min-width: 0; transform: none;
  }
  .nk-header .nk-header-actions { margin: 0; gap: 0; }
  .nk-header .bag-button { display: none; }
  .nk-header .nk-brand strong { font-size: 16px; letter-spacing: .16em; }
  body:has(.nk-page-bar) .nk-header, body.nk-immersive .nk-header { padding-top: 0; }
  .nk-page-bar { padding: calc(8px + var(--safe-top)) var(--gutter) 8px; }
  .nk-page-bar-title { flex: 1; }
  .nk-mobile-search { padding-inline: var(--gutter); }
  .nk-mobile-menu {
    max-height: calc(100dvh - var(--header-height) - var(--tabbar-height));
    padding-inline: var(--gutter); overflow-y: auto; overscroll-behavior: contain;
  }
  .nk-search-panel.is-mobile:not([hidden]) {
    min-height: 0;
    max-height: calc(100dvh - var(--header-height) - var(--tabbar-height) - 64px);
    overscroll-behavior: contain;
  }

  /* Fixed controls stay clear of the home indicator and content stays reachable. */
  .mobile-bottom-nav.nk-tabbar {
    height: var(--tabbar-height);
    padding: 6px max(8px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(8px, var(--safe-left));
  }
  .nk-tabbar > a { min-height: 56px; gap: 5px; }
  .nk-tab-icon { width: 44px; height: 28px; }
  .nk-tab-icon .icon { width: 21px; height: 21px; }
  .nk-tabbar > a[aria-current] { font-weight: 700; }
  .nk-footer { padding-bottom: calc(var(--tabbar-height) + 24px); }
  body:not(.home-page) .nk-footer { display: none; }
  body:not(.home-page) #main { padding-bottom: calc(var(--tabbar-height) + 24px); }
  body.nk-immersive #main { padding-bottom: calc(112px + var(--safe-bottom)); }
  body.nk-immersive .nk-footer { padding-bottom: calc(112px + var(--safe-bottom)); }
  .nk-gallery-action { top: calc(14px + var(--safe-top)); }
  .sticky-purchase:not([hidden]), .nk-look-bar { padding-inline: var(--gutter); }
  .cookie-choice { bottom: var(--tabbar-height); }
  body.nk-immersive .cookie-choice { bottom: 0; }
  body:has([data-cookie-panel]:not([hidden])) .nk-footer { padding-bottom: calc(var(--tabbar-height) + 120px); }

  /* Filters wrap into readable choices instead of requiring sideways swipes. */
  .nk-faq-tabs, .nk-wish-filters, .nk-review-chips, .nk-segment-tabs {
    flex-wrap: wrap; max-width: 100%; overflow: visible;
  }
  .nk-toolbar-button, .nk-sort-select { min-width: 0; }
  .nk-sort-select select { min-width: 0; max-width: 100%; }
  .nk-card h3 { font-size: 17px; line-height: 1.6; }
  .nk-card-size { font-size: 14px; }
  .nk-card-row { gap: 6px; }
  .nk-price { max-width: 100%; gap: 2px 6px; }
  .nk-price b { font-size: 17px; white-space: normal; }
  .nk-price s { font-size: 14px; }
  .nk-card-tag { max-width: calc(100% - 68px); padding: 4px 8px; font-size: 14px; }
}

@media (max-width: 640px) {
  .home-page .nk-section { padding-top: 28px; }
  #age-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nk-section-head .nk-chips {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%; margin: 0; padding: 0; gap: 8px; overflow: visible;
  }
  .nk-section-head .nk-chip { --compact-control-padding: 8px; justify-content: center; min-width: 0; }
  .nk-grid { gap: 20px 12px; }
  .nk-catalog-grid { gap: 24px 12px; }
  .nk-new-arrivals .nk-section-head { align-items: flex-start; gap: 8px; }
  .nk-section-caption { max-width: 24ch; margin-top: 4px; font-size: 14px; }
  .nk-faq-tabs .nk-chip, .nk-wish-filters .nk-chip { flex: 1 1 auto; justify-content: center; }
}