/* The public site's navbar (home/_nav): the desktop bar, the phone bar, its drawer and the back button. */

  /* ——— Navigation ——— */

  /* The bar of the landing mockup: the wordmark, the links and a round glass cart button, spread across the page grid.
     On a desktop it lies on the page gradient and scrolls away with the page; on a phone it is a sticky frosted bar
     (the phone section), and above a React application a compact frosted bar that stays on top (spa_site_nav.css).
     The frost lives on a layer under the content, not on the bar itself: an element with a backdrop-filter becomes the
     backdrop root of its descendants, so the blur of the phone menu would see only the bar, never the page behind it.
     Every variant is 73px tall — 14px above and below the 44px cart button plus a 1px bottom border, transparent on
     a desktop and white where the bar is frosted — so the bar keeps its height between the Rails pages and the
     applications. */
  .kl__nav {
    position: relative;
    z-index: 20;
    line-height: normal;
    border-bottom: 1px solid transparent;
  }
  .kl__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .kl__nav-in {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  /* The wordmark: Outfit in spaced capitals. */
  .kl__brand {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .kl__nav-links { display: flex; align-items: center; gap: 30px; font-size: .875rem; letter-spacing: .06em; }
  .kl__nav-link { color: var(--ink); transition: color .15s ease; }
  .kl__nav-link:hover { color: var(--accent); }
  /* The link of the page's section (aria-current — „Biżuteria” on the catalogue and product pages): garnet, as in the
     desktop mockup of the product card. */
  .kl__nav-link[aria-current] { color: var(--accent); }
  .kl__nav-link[aria-current]:hover { color: var(--accent-dark); }
  /* „Zaprojektuj”, the way to the designer: garnet on a garnet hairline. */
  .kl__nav-link--accent {
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
  }
  .kl__nav-link--accent:hover { color: var(--accent-dark); }
  .kl__nav-actions { display: flex; align-items: center; gap: 8px; }

  /* The cart: a round glass button with the mockup's drawn bag (a body with rounded bottom corners and a handle) and,
     while the cart holds something, a garnet badge with the number of pieces (cart_count_controller.js). */
  .kl__cart {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / .9);
    background: rgb(255 255 255 / .55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  /* The bag and its handle keep the mockup's box model — content sizes (16 × 13, 7 × 6) inside a 1.5px stroke — so
     they render exactly like the mockup's, whatever the browser snaps a 1.5px border to (Chrome draws 1px). */
  .kl__cart-icon {
    box-sizing: content-box;
    position: relative;
    width: 16px;
    height: 13px;
    margin-top: 4px;
    border: 1.5px solid var(--ink);
    border-radius: 2px 2px 4px 4px;
  }
  .kl__cart-icon::before {
    content: "";
    box-sizing: content-box;
    position: absolute;
    left: 3px;
    top: -7px;
    width: 7px;
    height: 6px;
    border: 1.5px solid var(--ink);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }
  .kl__cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: var(--white);
    font-size: .65625rem;
  }
  .kl__cart-count[hidden] { display: none; }

  /* The phone menu: a round glass burger and a glass card under the bar (pure CSS, works without JS), shown in the
     phone section. The checkbox exists only for the phone menu: on a desktop it would be an invisible first tab stop. */
  .kl__nav-cb { display: none; position: absolute; opacity: 0; pointer-events: none; }
  .kl__burger {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgb(255 255 255 / .9);
    background: rgb(255 255 255 / .6);
  }
  /* Three 1.5px lines 5px apart; open, the outer two cross. */
  .kl__burger-line, .kl__burger-line::before, .kl__burger-line::after {
    content: "";
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .25s ease, background-color .2s ease;
  }
  .kl__burger-line::before { transform: translateY(-6.5px); }
  .kl__burger-line::after { transform: translateY(5px); }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line { background: transparent; }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::before { transform: translateY(0) rotate(45deg); }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::after { transform: translateY(-1.5px) rotate(-45deg); }
  .kl__nav-cb:focus-visible ~ .kl__nav-in .kl__burger { outline: 2px solid var(--accent); outline-offset: 3px; }
  .kl__nav-drawer { display: none; }
  .kl__nav-drawer-in { display: flex; flex-direction: column; font-size: 1.0625rem; }
  .kl__nav-drawer-link { padding: 14px 16px; color: var(--ink); transition: color .15s ease; }
  .kl__nav-drawer-link:hover { color: var(--accent); }
  .kl__nav-drawer-link--accent, .kl__nav-drawer-link[aria-current] { color: var(--accent); }
  .kl__nav-drawer-link--accent:hover, .kl__nav-drawer-link[aria-current]:hover { color: var(--accent-dark); }
  /* The „Wróć” button of the back-button variant (a view's content_for :nav_back) exists only on a phone (below). */
  .kl__nav-back { display: none; }

  /* The back-button variant on a phone — the header of the product card's mobile mockup: a round glass „Wróć” with
     a blue chevron on the left, the wordmark in the middle, the burger on the right and no cart. The bar lies on the
     page like the desktop one: not sticky, without the frost and its border, so nothing covers the top of the window.
     The selectors name .kl__nav--back to outweigh the phone section at the end of this sheet. */
  @media (max-width: 768px) {
    .kl:has(> .kl__nav--back) { --nav-stuck: 0px; }
    html:has(> body > .kl:not(.spa-site-nav) > .kl__nav--back) { scroll-padding-top: 24px; }
    .kl__nav.kl__nav--back { position: relative; border-bottom: 0; }
    .kl__nav.kl__nav--back::before { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .kl__nav.kl__nav--back * { scroll-margin-top: 0; }
    .kl__nav--back .kl__nav-in { padding-bottom: 10px; }
    .kl__nav--back .kl__brand { font-size: 1.25rem; }
    .kl__nav--back .kl__cart { display: none; }
    .kl__nav--back .kl__nav-back {
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgb(255 255 255 / .9);
      background: rgb(255 255 255 / .55);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    /* An 8px corner of two 1.5px strokes turned to point left, nudged right to sit optically in the middle. */
    .kl__nav-back-icon {
      box-sizing: content-box;
      width: 8px;
      height: 8px;
      margin-left: 3px;
      border-left: 1.5px solid var(--link);
      border-bottom: 1.5px solid var(--link);
      transform: rotate(45deg);
    }
    .kl__nav--back .kl__burger { width: 42px; height: 42px; background: rgb(255 255 255 / .55); }
    .kl__nav--back .kl__burger-line,
    .kl__nav--back .kl__burger-line::before,
    .kl__nav--back .kl__burger-line::after { width: 14px; }
    .kl__nav--back .kl__nav-drawer { top: 66px; }
  }