/* Landing księgi — arkusz szablonu `woocommerce/content-single-product-landing-ksiega.php`.
 *
 * Tylko to, co należy do CAŁEJ strony albo do więcej niż jednego partu:
 * tło dokumentu, plakietka i SKU (hero + punkt zbiegu), trasa 390 (linia
 * biegnie przez dwie drogi I punkt zbiegu, więc stoi na opakowaniu).
 * Wartości: canvas `docs/canvas/landing-ksiega/project/rama.css`
 * i `wariant-b.css` (v11), przełożone na tokeny.
 *
 * Progi: hero przechodzi w układ telefonu poniżej 1200 px (pozycje okładek
 * są liczone na kolumnę 620 px), dwie kolumny dróg poniżej 900 px.
 */

.szewko-landing-ksiega {
  background: var(--color-parchment);
  color: var(--color-smoked-tent);
  font-family: var(--font-body);

  & a {
    color: var(--color-desert-rust);
    text-underline-offset: 4px;
  }

  & :is(a, button, input):focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
    box-shadow: var(--pierscien-ogniskowej);
  }
}

/* Miejsce `woocommerce_single_product_summary` w punkcie zbiegu — bez
   widżetu rat (cena < 100 zł) zostaje puste i nie może dokładać odstępu. */
.szewko-landing-ksiega-zbieg__podsumowanie:empty {
  display: none;
}

/* Stopka nie może chować się pod przyklejonym paskiem (69 px na 1440,
   79 px na 390). Zapas idzie na STOPKĘ, nie na `<body>`: body ma tło
   Pergaminu, więc odstęp na nim prześwitywał jasnym pasem 3 px nad paskiem
   (`Screenshot_75`, 03.10.2026). Ta sama droga co landing flaszy. */
body.szewko-landing-ksiega-body .szewko-stopka {
  padding-bottom: 72px;

  @media (max-width: 899px) {
    padding-bottom: 80px;
  }
}

/* ── plakietka statusu (canvas `rama.css` `.plakietka`) ─────────────────── */

.szewko-landing-ksiega-plakietka {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-oasis-green);
  color: var(--color-parchment);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.szewko-landing-ksiega-plakietka--niedostepny {
  background: var(--color-terracotta);
}

.szewko-landing-ksiega-plakietka--wyczerpany {
  background: var(--color-dark-mahogany);
  color: var(--color-bleached-linen);
}

.szewko-landing-ksiega-sku {
  margin: 0;
  color: var(--color-camel-brown);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ── trasa 390 — pionowa linia z węzłami (canvas B2 `.b-trasa`) ─────────── */

.szewko-landing-ksiega__trasa {
  position: relative;

  @media (max-width: 899px) {
    padding: 32px 24px 0 64px;

    &::before {
      content: "";
      position: absolute;
      top: 40px;
      bottom: 0;
      left: 31px;
      width: 2px;
      background: var(--color-camel-brown);
    }
  }
}

/* Węzeł: kółko na linii + napis obok (canvas `.b-wezel`, `.b-wezel__opis`).
   Tylko na 390 — na 1440 rolę węzłów grają punkty rysunku SVG. */
.szewko-landing-ksiega__wezel {
  position: relative;
  margin: 0;
  color: var(--color-camel-brown);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  &::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -42px;
    z-index: 1;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-camel-brown);
    border-radius: var(--radius-full);
    background: var(--color-parchment);
  }

  @media (min-width: 900px) {
    display: none;
  }
}

.szewko-landing-ksiega__wezel--zbieg {
  margin-bottom: 26px;

  &::before {
    border-color: var(--color-desert-rust);
    background: var(--color-desert-rust);
  }
}