/* Narrower screens: the media queries that adjust several sections of the public pages at once. */

@layer pages {
  /* Below 1024px the „O Moonstory” card stacks its heading over the values, and the navbar's links close up so they
     stay next to the wordmark down to the phone bar (768px). (The product page has its own blocks after its section.) */
  @media (max-width: 1023px) {
    .kl__nav-links { gap: 22px; }
    .kl__values-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "list" "link"; grid-template-rows: none; row-gap: 28px; }
  }

  /* Below ~900px the two-column sections return to one column: the landing's product cards go two by two, the
     „Nr 1” card rises above the other bestsellers. */
  @media (max-width: 900px) {
    .kl__split { grid-template-columns: 1fr; gap: 26px; }
    /* A full-width portrait would push the copy a whole screen down — crop to the bracelets. */
    .kl__about-img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 80%; }
    .kl__newest-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .kl__bestsellers-layout { grid-template-columns: minmax(0, 1fr); }
    /* The category sidebar moves above the tiles and its categories flow in a wrapping row. */
    .kl__catalog-layout { grid-template-columns: 1fr; gap: 26px; }
    .kl__catalog-nav { position: static; }
    .kl__catalog-categories { display: flex; flex-wrap: wrap; column-gap: 28px; }
    .kl__catalog-categories li + li { border-top: 0; }
  }

  @media (max-width: 860px) {
    .kl__contact-grid { grid-template-columns: 1fr; gap: 30px; }
  }

  /* Phone (the landing mockup at 390px). The navbar becomes a sticky frosted bar with the cart and a burger, whose
     menu is a glass card hidden (visibility) while closed, so its links leave the tab order and the accessibility
     tree. The bar is 73px tall: the scrollport starts under it, while the bar's own contents are exempt — the checkbox
     the burger focuses and the links reached with Shift+Tab would otherwise make the browser scroll to "clear" them
     and send a scrolled page back to the top. The negative margin equals the scroll padding, not more: WebKit reads a
     margin far beyond the item's height (e.g. -100vh) as a box below the item and scrolls the page down on every focus
     move in the open menu. Keep it equal to the paddings under the bar (here and in checkout.css) when they change.
     The landing: the photo band above the statement, the values in one column, „Nowości” swiped sideways, the
     bestsellers under the „Nr 1” card, the footer's columns side by side under the wordmark. */
  @media (max-width: 768px) {
    .kl { --nav-stuck: 73px; }
    html:has(> body > .kl:not(.spa-site-nav)) { scroll-padding-top: 88px; }
    body > .kl:has(> .kl__landing) { background: var(--atmosphere-landing-phone), var(--paper); }

    .kl__nav { position: sticky; top: 0; border-bottom-color: var(--glass-edge); }
    .kl__nav::before {
      background: color-mix(in srgb, var(--mist) 80%, transparent);
      backdrop-filter: var(--glass-blur-sm);
      -webkit-backdrop-filter: var(--glass-blur-sm);
    }
    .kl__nav * { scroll-margin-top: -88px; }
    .kl__nav-in { padding: 14px 18px; gap: 12px; }
    .kl__brand { font-size: var(--heading-xs); }
    .kl__nav-links { display: none; }
    .kl__nav-cb { display: block; }
    .kl__burger { display: inline-flex; }
    .kl__nav-actions .ms-icon-button { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .kl__nav-drawer {
      display: block;
      position: absolute;
      top: 68px;
      left: 12px;
      right: 12px;
      padding: 8px;
      border-radius: var(--radius-sheet);
      border: 1px solid var(--glass-edge);
      background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 95%, transparent), color-mix(in srgb, var(--blush-card) 90%, transparent));
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: var(--shadow-xl);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
    }
    .kl__nav-cb:checked ~ .kl__nav-drawer { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

    .kl__kicker { font-size: var(--text-2xs); }
    .kl__landing-section { padding: 0 16px 56px; }
    .kl__landing-heading { gap: 6px; }
    .kl__landing-h2 { font-size: var(--heading-xl); }
    .kl__landing-head { gap: 12px; }
    .kl__landing-head .kl__landing-link { font-size: var(--text-md); }
    .kl__landing-link-more { display: none; }

    .kl__hero { flex-direction: column; align-items: stretch; min-height: 0; margin-bottom: 0; padding: 0; overflow: visible; background: none; }
    .kl__hero-media { position: relative; inset: auto; order: -1; height: 400px; background: var(--sky); }
    .kl__hero-img { object-position: 12% 50%; transform: none; }
    .kl__hero-media::after { top: auto; height: 120px; background: linear-gradient(180deg, transparent 0%, var(--blush) 100%); }
    .kl__hero-caption { top: 14px; right: 14px; bottom: auto; gap: 2px; padding: 10px 13px; box-shadow: none; }
    .kl__hero-caption-label { font-size: var(--text-3xs); }
    .kl__hero-caption-text { font-size: var(--text-md); }
    .kl__hero-copy { max-width: none; margin-top: -56px; padding: 0 20px 56px; gap: 16px; }
    .kl__hero-title { font-size: var(--heading-3xl); line-height: 1.06; }
    .kl__hero-lead { max-width: none; font-size: var(--text-lg); line-height: 1.6; }
    .kl__hero-cta { align-self: stretch; margin-top: 4px; padding: 16px 20px; }

    .kl__values-card { display: flex; flex-direction: column; gap: 22px; padding: 26px 22px; }
    .kl__values-intro { gap: 10px; }
    .kl__values-title { font-size: var(--heading-xl); }
    .kl__values-list { display: flex; flex-direction: column; gap: 18px; }
    .kl__value { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-top: 14px; }
    .kl__value-num { padding-top: 3px; }
    .kl__value-body { gap: 5px; }
    .kl__value-title { font-size: var(--heading-xs); }
    .kl__value-text { font-size: var(--text-md); line-height: 1.55; }

    /* „Nowości” runs to the window's edges: a row swiped sideways, cards snapping to the 20px margin. */
    .kl__newest { padding-left: 0; padding-right: 0; gap: 20px; }
    .kl__newest .kl__landing-head { padding: 0 20px; }
    .kl__newest-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 20px;
      padding: 0 20px 4px;
      scrollbar-width: none;
    }
    .kl__newest-row::-webkit-scrollbar { display: none; }
    .kl__newest-item { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
    .kl__product-card { gap: 10px; }
    .kl__product-card-badge { left: 10px; top: 10px; }
    .kl__product-card-cart { left: 10px; right: 10px; bottom: 10px; min-height: 44px; padding: 10px 12px; }
    .kl__product-card-name { font-size: var(--text-xl); }
    .kl__product-card-stones { font-size: var(--text-xs); }
    .kl__product-card-price { font-size: var(--text-base); }

    .kl__bestsellers { gap: 18px; }
    .kl__bestsellers .kl__landing-head { padding: 0 4px; }
    .kl__bestsellers-layout { display: flex; flex-direction: column; gap: 18px; }
    .kl__bestseller-lead { min-height: 0; aspect-ratio: 4 / 5; max-height: 520px; }
    .kl__bestseller-rank { left: 12px; top: 12px; padding: 4px 11px; font-size: var(--text-3xs); }
    .kl__bestseller-panel {
      left: 12px;
      right: 12px;
      bottom: 12px;
      gap: 12px;
      padding: 14px 16px;
      background: var(--glass-fill-strong);
      box-shadow: none;
    }
    .kl__bestseller-panel-main { gap: 3px; }
    .kl__bestseller-lead-name { font-size: var(--heading-sm); }
    .kl__bestseller-lead-stones, .kl__bestseller-lead-more { display: none; }
    .kl__bestseller-lead-price { font-size: var(--heading-xs); }
    .kl__bestseller-list { gap: 10px; }
    .kl__bestseller { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .kl__bestseller-photo { width: 96px; height: 96px; }
    .kl__bestseller-body { gap: 4px; padding-right: 0; }
    .kl__bestseller-head { gap: 8px; }
    .kl__bestseller-name { font-size: var(--text-xl); }
    .kl__bestseller-price { font-size: var(--text-base); }
    .kl__bestseller-stones { font-size: var(--text-xs); }
    .kl__bestseller-cart { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; }

    .kl__footer-in { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 28px 20px 40px; }
    .kl__footer-brand { grid-column: 1 / -1; justify-self: start; font-size: var(--text-xl); }
    .kl__footer-col { gap: 8px; }
    .kl__footer-payments { grid-column: 1 / -1; max-width: none; }
  }

  @media (max-width: 600px) {
    .kl__catalog-grid { grid-template-columns: 1fr 1fr; }
  }

  /* The narrowest phones (320px, e.g. iPhone SE 1st gen). The phone bar's wordmark and its three 44px buttons (cart,
     account, burger) need ~306px between the 18px paddings, more than such a screen has, and the bar would push the
     page sideways. The buttons keep their tap size: the wordmark, the paddings and the gaps give way instead. */
  @media (max-width: 359px) {
    .kl__nav-in { padding-inline: 14px; gap: 8px; }
    .kl__nav-actions { gap: 6px; }
    .kl__brand { font-size: var(--text-xl); }
  }

  @media (prefers-reduced-motion: reduce) {
    .kl__product-slides, .kl__newest-row { scroll-behavior: auto; }
    .kl__disclosure-summary::after, .kl__product-dot, .kl__product-dot::before, .kl__product-perk::after { transition: none; }
    .kl__nav-drawer { transition: none; }
  }
}