/* Przyklejony pasek zakupowy — arkusz `template-parts/landing-ksiega-pasek.php`.
 *
 * Canvas B1 `.b-pasek-pozycja .pasek` (1440: miniatura 44, nazwa, cena,
 * przycisk; boki 80 px) i B2/B3 `.pasek` (390: nazwa nad ceną, „Dodaj").
 * Wjeżdża klasą `--widoczny` (`landing-ksiega.js`), z dołu.
 */

.szewko-landing-ksiega-pasek {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);
  background: var(--color-smoked-tent);
  transform: translateY(100%);
  transition: transform var(--duration-mid) var(--ease-sand);
  visibility: hidden;

  &[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.szewko-landing-ksiega-pasek--widoczny {
  transform: none;
  visibility: visible;
}

.szewko-landing-ksiega-pasek__w {
  display: grid;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 80px;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;

  @media (max-width: 1279px) {
    padding-inline: 48px;
  }

  @media (max-width: 899px) {
    padding: 10px 16px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
  }

  & p {
    margin: 0;
  }
}

.szewko-landing-ksiega-pasek__miniatura {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);

  @media (max-width: 899px) {
    grid-row: 1 / 3;
  }
}

.szewko-landing-ksiega-pasek__nazwa {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-parchment);
  font-family: var(--font-product);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  @media (max-width: 899px) {
    grid-column: 2;
    grid-row: 1;
  }
}

.szewko-landing-ksiega-pasek__cena {
  color: var(--color-sand-gold);
  font-family: var(--font-cena);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;

  @media (max-width: 899px) {
    grid-column: 2;
    grid-row: 2;
  }
}

.szewko-landing-ksiega .szewko-landing-ksiega-pasek__cta,
.szewko-landing-ksiega-pasek__cta {
  display: inline-flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-sunrise-glow);
  color: var(--color-parchment);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  @media (max-width: 899px) {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  /* Woo dokłada „Zobacz koszyk" za przyciskiem po dodaniu — szuflada już to mówi. */
  & + .added_to_cart {
    display: none;
  }
}

.szewko-landing-ksiega-pasek__dopisek {
  @media (max-width: 899px) {
    display: none;
  }
}

/* Zakup z dłuższą dostawą (canvas PGc B5/B6) — linia pod ceną. Pasek niczego
   nie umawia, ale kupuje się z niego jednym kliknięciem, więc informacja
   z płyty stoi i tu (art. 18 u.p.k.). Dwa brzmienia: 1440 „wysyłka do N dni
   później" pod ceną, 390 „· do N dni później" w wierszu ceny — pasek nie
   rośnie o trzeci wiersz. */
.szewko-landing-ksiega-pasek__opoznienie {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-parchment) 78%, transparent);

  @media (max-width: 899px) {
    display: none;
  }

  &.szewko-landing-ksiega-pasek__opoznienie--waski {
    display: none;

    @media (max-width: 899px) {
      display: inline;
      margin: 0 0 0 6px;
    }
  }
}