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

  /* ——— Narrower screens ——— */

  /* 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:
        radial-gradient(500px 360px at 90% 4%, var(--blush-glow) 0%, transparent 70%),
        linear-gradient(180deg, var(--sky) 0%, var(--blush) 40%, var(--paper) 100%),
        var(--paper);
    }

    .kl__nav { position: sticky; top: 0; border-bottom-color: rgb(255 255 255 / .9); }
    .kl__nav::before {
      background: color-mix(in srgb, var(--mist) 80%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .kl__nav * { scroll-margin-top: -88px; }
    .kl__nav-in { padding: 14px 18px; gap: 12px; }
    .kl__brand { font-size: 1.1875rem; }
    .kl__nav-links { display: none; }
    .kl__nav-cb { display: block; }
    .kl__burger { display: inline-flex; }
    .kl__cart { background: rgb(255 255 255 / .6); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .kl__nav-drawer {
      display: block;
      position: absolute;
      top: 68px;
      left: 12px;
      right: 12px;
      padding: 8px;
      border-radius: 24px;
      border: 1px solid var(--glass-edge);
      background: linear-gradient(145deg, rgb(255 255 255 / .95), color-mix(in srgb, var(--blush-card) 90%, transparent));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 55%, transparent);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    .kl__nav-cb:checked ~ .kl__nav-drawer { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

    .kl__kicker { font-size: .6875rem; }
    .kl__landing-section { padding: 0 16px 56px; }
    .kl__landing-heading { gap: 6px; }
    .kl__landing-h2 { font-size: 1.75rem; }
    .kl__landing-head { gap: 12px; }
    .kl .kl__landing-head .kl__landing-link { font-size: .84375rem; }
    .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: .59375rem; }
    .kl__hero-caption-text { font-size: .875rem; }
    .kl__hero-copy { max-width: none; margin-top: -56px; padding: 0 20px 56px; gap: 16px; }
    .kl__hero-title { font-size: 2.5rem; line-height: 1.06; }
    .kl__hero-lead { max-width: none; font-size: .96875rem; 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: 1.75rem; }
    .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: 1.09375rem; }
    .kl__value-text { font-size: .875rem; 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; font-size: .625rem; }
    .kl__product-card-cart { left: 10px; right: 10px; bottom: 10px; min-height: 44px; padding: 10px 12px; background: rgb(255 255 255 / .65); }
    .kl__product-card-name { font-size: 1.0625rem; }
    .kl__product-card-stones { font-size: .78125rem; }
    .kl__product-card-price { font-size: .9375rem; }

    .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: .65625rem; }
    .kl__bestseller-panel {
      left: 12px;
      right: 12px;
      bottom: 12px;
      gap: 12px;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgb(255 255 255 / .85), rgb(255 255 255 / .55));
      box-shadow: none;
    }
    .kl__bestseller-panel-main { gap: 3px; }
    .kl__bestseller-lead-name { font-size: 1.25rem; }
    .kl__bestseller-lead-stones, .kl__bestseller-lead-more { display: none; }
    .kl__bestseller-lead-price { font-size: 1.125rem; }
    .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: 1.0625rem; }
    .kl__bestseller-price { font-size: .9375rem; }
    .kl__bestseller-stones { font-size: .78125rem; }
    .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: 1.0625rem; }
    .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; }
  }

  @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; }
  }