/* ==========================================================================
   stilwohn.de — warstwa projektowa na motywie hummingbird
   Baza: valendy.css v17 z produkcyjnego valendy24 (te same moduły Anvanto,
   ta sama struktura sekcji). Paleta stilwohn: czerwień #dd0000 z logo/starego
   sklepu (decyzja Artura 2026-08-05) — celowo INNA niż valendy (#e5312e).
   Wszystko w HTML+CSS, zero page-buildera.
   Uwaga na kontrast: do drobnego tekstu na jasnym tle używać --v-red-dark.
   ========================================================================== */

:root {
  --v-red: #dd0000;
  --v-red-dark: #a30000;
  /* tło przycisków z białym napisem: #dd0000 daje 4,67:1 (AA na styk),
     #d40000 daje 5,5:1 i dla oka jest nie do odróżnienia */
  --v-red-cta: #d40000;
  --v-yellow: #ffc400;
  --v-ink: #16181c;
  --v-ink-soft: #4a4f57;
  --v-line: #e3e6ea;
  --v-bg: #f5f6f8;
  --v-green: #1a7f37;
  --v-radius: 14px;
  --v-shadow: 0 2px 10px rgba(22, 24, 28, .06);
  --v-shadow-hover: 0 10px 28px rgba(22, 24, 28, .13);
}

/* --------------------------------------------------------- pasek nad logo */
.v-topbar {
  background: var(--v-ink);
  color: #f0f1f3;
  font-size: 13px;
  line-height: 1.4;
}
.v-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  flex-wrap: wrap;
}
.v-topbar__claim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: .01em;
}
.v-topbar__claim::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--v-red);
  -webkit-mask: var(--v-ico-truck) center / contain no-repeat;
  mask: var(--v-ico-truck) center / contain no-repeat;
}
.v-topbar__contact { display: flex; align-items: center; gap: 18px; }
.v-topbar a.v-topbar__phone,
.v-topbar__phone {
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.v-topbar a.v-topbar__phone:hover { color: var(--v-red) !important; }
.v-topbar__hours { color: #c6cad1; white-space: nowrap; }

/* ------------------------------------------------------------------ hero
   Baner PROMOCYJNY — wzór: „DOSTAWA GRATIS" z tapczany24, podkręcony:
   promienie w tle, żółty starburst, pochylony stempel. Wszystko to
   PRAWDZIWE warunki (dostawa gratis bez minimum), zero fikcji.
   ---------------------------------------------------------------------- */
.v-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--v-radius);
  margin: 26px 0 48px;
  background: linear-gradient(118deg, #a30000 0%, #c40000 38%, var(--v-red) 72%, #f13a2e 100%);
  isolation: isolate;
}
/* delikatne promienie „promocyjne" zza tekstu */
.v-hero::after {
  content: "";
  position: absolute;
  left: -18%;
  top: -60%;
  width: 90%;
  height: 220%;
  background: repeating-conic-gradient(from 0deg at 30% 50%,
    rgba(255, 255, 255, .05) 0deg 7deg,
    rgba(255, 255, 255, 0) 7deg 16deg);
  z-index: 0;
  pointer-events: none;
}
/* biała fala — nawiązanie do kreski w logo (tylko desktop) */
.v-hero::before {
  content: "";
  position: absolute;
  /* -14% zamiast -8%: przy 992-1199 px fala wchodzila pod bialy tekst */
  right: -14%;
  top: -30%;
  width: 62%;
  height: 160%;
  background: #fff;
  border-radius: 46% 54% 40% 60% / 50% 44% 56% 50%;
  opacity: .97;
  z-index: 1;
}
.v-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  min-height: 400px;
}
.v-hero__text { padding: 44px 24px 44px 52px; color: #fff; }
.v-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--v-red-dark);
  background: #fff;
  padding: 7px 15px;
  border-radius: 100px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.v-hero__title {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .2);
}
.v-hero__title span { display: block; font-size: .52em; letter-spacing: .01em; margin-top: 8px; }
.v-hero__lead {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  margin: 0 0 24px;
  max-width: 26em;
}
.v-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* pochylony stempel — jak przybity tuszem */
.v-hero__stamp {
  display: inline-block;
  margin-top: 22px;
  padding: 7px 14px;
  border: 2px dashed rgba(255, 255, 255, .75);
  border-radius: 6px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
  opacity: .95;
}

/* żółty starburst nad zdjęciem */
.v-hero__burst {
  position: absolute;
  z-index: 5;
  left: -34px;
  top: 30px;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--v-yellow);
  color: var(--v-ink);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 16px;
  transform: rotate(-9deg);
  clip-path: polygon(50% 0%, 59% 9%, 71% 4%, 76% 15%, 89% 14%, 89% 27%, 100% 32%, 95% 43%, 103% 52%, 93% 60%, 97% 72%, 85% 75%, 84% 88%, 71% 86%, 65% 98%, 54% 91%, 43% 99%, 36% 88%, 23% 91%, 21% 78%, 8% 76%, 12% 63%, 2% 55%, 10% 46%, 4% 34%, 16% 30%, 15% 17%, 28% 17%, 32% 5%, 43% 10%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
}
.v-hero__media { position: relative; z-index: 2; height: 100%; min-height: 400px; }
.v-hero__media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 58%;
  width: calc(100% - 52px);
  height: calc(100% - 64px);
  margin: 32px 30px 32px 22px;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}
.v-hero__tag {
  position: absolute;
  z-index: 4;
  right: 26px;
  top: 26px;
  background: var(--v-yellow);
  color: var(--v-ink);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  /* bez uppercase — psuł zapis „Kč" (KČ); wersaliki piszemy w treści */
  text-transform: none;
  padding: 9px 16px;
  border-radius: 8px;
  transform: rotate(6deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------- przyciski */
.v-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.v-btn:focus-visible { outline: 3px solid var(--v-yellow); outline-offset: 2px; }
.v-btn--primary { background: var(--v-ink); color: #fff; }
.v-btn--primary:hover { background: #000; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
/* biały przycisk promocyjny na czerwieni */
.v-btn--light { background: #fff; color: var(--v-red-dark); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.v-btn--light:hover { background: var(--v-yellow); color: var(--v-ink); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.v-btn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .65); background: rgba(0, 0, 0, .14); }
.v-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(0, 0, 0, .26); }
.v-btn__arrow { font-size: 18px; line-height: 1; }

/* ------------------------------------------------------------ pasek atutów */
.v-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 28px 18px;
  margin-bottom: 48px;
  box-shadow: var(--v-shadow);
}
.v-usp__i { text-align: center; padding: 4px 14px; }
.v-usp__ico {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  background: var(--v-red);
}
.v-usp__ico--truck { -webkit-mask: var(--v-ico-truck) center / contain no-repeat; mask: var(--v-ico-truck) center / contain no-repeat; }
.v-usp__ico--factory { -webkit-mask: var(--v-ico-factory) center / contain no-repeat; mask: var(--v-ico-factory) center / contain no-repeat; }
.v-usp__ico--box { -webkit-mask: var(--v-ico-box) center / contain no-repeat; mask: var(--v-ico-box) center / contain no-repeat; }
.v-usp__ico--phone { -webkit-mask: var(--v-ico-phone) center / contain no-repeat; mask: var(--v-ico-phone) center / contain no-repeat; }
.v-usp__t { font-weight: 700; font-size: 16px; color: var(--v-ink); margin-bottom: 5px; }
.v-usp__d { font-size: 14px; line-height: 1.5; color: var(--v-ink-soft); margin: 0; }

/* ------------------------------------------------------ nagłówki sekcji */
.v-head { text-align: center; margin-bottom: 26px; }
.v-head__t {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--v-ink);
  margin: 0 0 10px;
}
.v-head__t::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  background: var(--v-red);
  border-radius: 3px;
  margin: 12px auto 0;
}
.v-head__d { color: var(--v-ink-soft); font-size: 15.5px; margin: 0; }

/* ------------------------------------------------------ kafelki kategorii */
.v-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
.v-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v-cat:hover { transform: translateY(-4px); box-shadow: var(--v-shadow-hover); border-color: #d6dade; }
.v-cat:focus-visible { outline: 3px solid var(--v-red); outline-offset: 2px; }
.v-cat__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--v-bg); }
.v-cat__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v-cat:hover .v-cat__ph img { transform: scale(1.045); }
.v-cat__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--v-red-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: 100px;
}
.v-cat__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.v-cat__t { font-size: 17px; font-weight: 700; color: var(--v-ink); margin: 0 0 7px; }
.v-cat__d { font-size: 13.5px; line-height: 1.5; color: var(--v-ink-soft); margin: 0 0 16px; flex: 1; }
/* CTA kafelka jako pełny przycisk (wzór t24), nie goły link */
.v-cat__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--v-red-cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 100px;
  transition: background-color .15s ease, gap .15s ease;
}
.v-cat:hover .v-cat__cta { background: var(--v-red-dark); gap: 11px; }

/* --------------------------------- siatka produktów na listingu kategorii
   Od 2026-08-03 kafelek listingu to TA SAMA karta co na stronie głównej
   (`v-pcard`, sekcja 7 niżej) — decyzja Artura: „kafelki mają być jak na
   głównej". Dawne reguły `.product-miniature .card` zostały usunięte razem
   z markupem motywu; jeśli szukasz stylu kafelka, jest w sekcji 7. */
/* Karty w JEDNYM wierszu muszą być równej wysokości, żeby przyciski stały
   w linii — tak jest na głównej, gdzie robi to grid. Tu `.products` jest
   flexem, więc <article> rozciąga się sam, ale samo `height:100%` na karcie
   NIE WYSTARCZA (procent nie rozwiązuje się na elemencie flex — zmierzone:
   article 694 px, karta w środku 674 px). Dlatego <article> jest flexem,
   a karta jego rozciąganym dzieckiem. */
#js-product-list .products > .product-miniature { display: flex; margin-bottom: 18px; }
.product-miniature > .v-pcard { width: 100%; }
/* Ramki i „Novinka/Sleva" motyw wstawia w kontener zdjęcia; bez pozycjonowania
   flaga wypycha zdjęcie w dół zamiast leżeć na nim. */
.v-pcard__ph { position: relative; }
.v-pcard__ph .product-flags {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  margin: 0; padding: 0; list-style: none;
}
/* Cena przed obniżką — dziś żaden produkt jej nie ma, ale kafelek musi ją
   unieść, gdyby ruszyła promocja (inaczej wyszłaby jako druga zielona kwota). */
.v-pcard__old {
  display: inline-block; margin-left: 8px;
  color: var(--v-ink-soft); font-size: 15px; font-weight: 600;
  text-decoration: line-through;
}

/* ------------------------------------- sekcja 7: karty bestsellerów
   Własny szablon modułu ps_featuredproducts (v-pcard) — zdjęcie, nazwa,
   teaser, zielona cena, linia atutów, przycisk. BEZ gwiazdek (brak
   prawdziwych recenzji — wrócą z modułem opinii po starcie).
   ------------------------------------------------------------------- */
.v-best { position: relative; padding: 48px 0 52px; margin-bottom: 56px; }
/* pełnoszerokie jasne pasmo pod sekcją — rytm jak na t24 */
.v-best::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--v-bg);
  z-index: -1;
}
.v-best__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.v-pcard {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v-pcard:hover { transform: translateY(-4px); box-shadow: var(--v-shadow-hover); border-color: #d6dade; }
.v-pcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.v-pcard__link:focus-visible { outline: 3px solid var(--v-red); outline-offset: -3px; }
.v-pcard__ph { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.v-pcard__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v-pcard:hover .v-pcard__ph img { transform: scale(1.04); }
.v-pcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 20px; text-align: center; }
.v-pcard__name {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--v-ink);
  margin: 0 0 8px;
}
.v-pcard:hover .v-pcard__name { color: var(--v-red-dark); }
.v-pcard__teaser { font-size: 13.5px; line-height: 1.5; color: var(--v-ink-soft); margin-bottom: 10px; }
.v-pcard__price {
  margin-top: auto;
  color: var(--v-green);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.v-pcard__perks { font-size: 13px; color: var(--v-ink-soft); margin: 6px 0 14px; }
.v-pcard__btn {
  display: inline-block;
  align-self: center;
  background: var(--v-red-cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 100px;
  transition: background-color .15s ease;
}
.v-pcard:hover .v-pcard__btn { background: var(--v-red-dark); }
.v-best__more { text-align: center; margin-top: 26px; }

/* --------------------------------------- sekcja 8: proč od výrobce */
.v-why {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 38px 42px;
  margin-bottom: 56px;
  box-shadow: var(--v-shadow);
}
.v-why__t { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; color: var(--v-ink); margin: 0 0 14px; }
.v-why__t::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  background: var(--v-red);
  border-radius: 3px;
  margin-top: 12px;
}
.v-why__intro { color: var(--v-ink-soft); font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; }
.v-why__list { list-style: none; margin: 0 0 16px; padding: 0; }
.v-why__list li {
  position: relative;
  padding: 6px 0 6px 32px;
  color: var(--v-ink);
  font-size: 15px;
  line-height: 1.5;
}
.v-why__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--v-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.5-4-4 1.7-1.7 2.3 2.3 5-5 1.7 1.7-6.7 6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.5-4-4 1.7-1.7 2.3 2.3 5-5 1.7 1.7-6.7 6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v-why__close { color: var(--v-ink-soft); font-size: 15px; line-height: 1.6; margin: 0; font-style: italic; }
.v-why__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: var(--v-shadow); }

/* ---------------------------------------- sekcja 9: aranżacje wnętrz */
.v-insp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
.v-insp__i {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  overflow: hidden;
  text-align: center;
  padding-bottom: 22px;
}
.v-insp__ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--v-bg); margin-bottom: 16px; }
.v-insp__ph img { width: 100%; height: 100%; object-fit: cover; }
.v-insp__t { font-size: 17px; font-weight: 700; color: var(--v-ink); margin: 0 0 7px; padding: 0 18px; }
.v-insp__d { font-size: 14px; line-height: 1.55; color: var(--v-ink-soft); margin: 0 0 16px; padding: 0 18px; flex: 1; }
.v-btn--red { background: var(--v-red-cta); color: #fff; align-self: center; font-size: 14px; padding: 10px 22px; }
.v-btn--red:hover { background: var(--v-red-dark); color: #fff; transform: translateY(-1px); }

/* -------------------------------------------------- sekcja 10: FAQ */
.v-faq { max-width: 900px; margin: 0 auto 56px; }
.v-faq__i {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  margin-bottom: 10px;
  box-shadow: var(--v-shadow);
  overflow: hidden;
}
.v-faq__i summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--v-ink);
}
.v-faq__i summary::-webkit-details-marker { display: none; }
.v-faq__i summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--v-bg);
  color: var(--v-red-dark);
  font-size: 18px;
  font-weight: 700;
  transition: transform .2s ease;
}
.v-faq__i[open] summary::after { transform: rotate(45deg); background: var(--v-red); color: #fff; }
.v-faq__i summary:hover { color: var(--v-red-dark); }
.v-faq__i p { margin: 0; padding: 0 20px 18px; color: var(--v-ink-soft); font-size: 14.5px; line-height: 1.65; }
.v-faq__i p strong { color: var(--v-ink); }

/* -------------------------------------------- sekcja 11: tekst SEO */
.v-seo {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 34px 38px;
  max-width: 900px;
  margin: 0 auto 56px;
  box-shadow: var(--v-shadow);
}
.v-seo h2 { font-size: 25px; font-weight: 800; color: var(--v-ink); margin: 0 0 14px; }
.v-seo p { color: var(--v-ink-soft); line-height: 1.65; font-size: 15.5px; margin: 0 0 12px; }
.v-seo p:last-child { margin-bottom: 0; }
.v-seo strong { color: var(--v-ink); }
.v-seo a { color: var(--v-red-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v-seo a:hover { color: var(--v-red); }

/* nagłówki sekcji modułów — wyśrodkowane jak .v-head (jeden styl na całej stronie) */
.page-home .section-title,
.page-home h2.h2.section-title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--v-ink);
  margin: 6px 0 26px;
  position: relative;
  padding-bottom: 0;
  text-align: center;
}
.page-home .section-title::after {
  content: "";
  position: static;
  display: block;
  width: 52px;
  height: 4px;
  background: var(--v-red);
  border-radius: 3px;
  margin: 12px auto 0;
}

/* ------------------------------------------------------------- blok tekstu */
.page-home .custom-text,
.page-home #custom-text {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 34px 38px;
  margin-bottom: 48px;
  box-shadow: var(--v-shadow);
}
.page-home .custom-text h2 { font-size: 25px; font-weight: 800; color: var(--v-ink); margin-bottom: 14px; }
.page-home .custom-text p { color: var(--v-ink-soft); line-height: 1.65; font-size: 15.5px; }
.page-home .custom-text strong.dark { color: var(--v-ink); }

/* ---------------------------------------------------------------- ikony */
:root {
  --v-ico-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v2h3.4a1 1 0 0 1 .8.4l2.6 3.4a1 1 0 0 1 .2.6V16a1 1 0 0 1-1 1h-1.2a2.8 2.8 0 0 1-5.6 0H9.8a2.8 2.8 0 0 1-5.6 0H4a1 1 0 0 1-1-1V6Zm11 4v3.5h5.6L17.4 10H14ZM7 15.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Zm10 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z'/%3E%3C/svg%3E");
  --v-ico-factory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20V9.6l5 3V9.6l5 3V9.6l5 3V5h3v15H3Zm2-2h14v-3H5v3Z'/%3E%3C/svg%3E");
  --v-ico-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6.2v11.6L12 22l9-4.2V6.2L12 2Zm0 2.2 6.3 2.9L12 10 5.7 7.1 12 4.2ZM5 8.8l6 2.8v7.7l-6-2.8V8.8Zm8 10.5v-7.7l6-2.8v7.7l-6 2.8Z'/%3E%3C/svg%3E");
  --v-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1l-2.22 2.2Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------- stopka: pasek gwarancji */
.v-guar { background: var(--v-bg); border-top: 1px solid var(--v-line); padding: 36px 0 30px; }
.v-guar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v-guar__i { text-align: center; padding: 0 12px; }
.v-guar__i .v-usp__ico { margin-bottom: 12px; }
.v-guar__t { font-weight: 700; font-size: 15.5px; color: var(--v-ink); margin-bottom: 6px; }
.v-guar__d { font-size: 13.5px; line-height: 1.5; color: var(--v-ink-soft); margin: 0; }
.v-guar__d a { color: var(--v-ink); font-weight: 700; text-decoration: none; }
.v-guar__d a:hover { color: var(--v-red-dark); }

/* --------------------------------------------- stopka: część ciemna */
.v-foot { background: #1f1f1f; color: #d9dbdf; }
.v-foot__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 34px;
  padding: 44px 0 36px;
}
.v-foot__logo {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.v-foot__logo img { display: block; width: 180px; height: auto; }
.v-foot__operator { font-size: 13.5px; line-height: 1.65; color: #b9bcc2; margin: 0; }
.v-foot__operator strong { color: #fff; }
.v-foot__h {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.v-foot__links { list-style: none; margin: 0; padding: 0; }
.v-foot__links li { margin-bottom: 8px; }
.v-foot__links a { color: #d9dbdf; font-size: 14px; text-decoration: none; transition: color .15s ease; }
.v-foot__links a:hover { color: var(--v-red); }
.v-foot__contact { font-size: 14px; line-height: 1.6; color: #b9bcc2; margin: 0 0 14px; }
.v-foot__contact a { color: #d9dbdf; text-decoration: none; }
.v-foot__contact a:hover { color: var(--v-red); }
a.v-foot__phone { color: #fff; font-size: 17px; font-weight: 800; }
.v-foot__bottom { background: #171717; border-top: 1px solid #2c2c2c; }
.v-foot__bottom-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.v-foot__copy { font-size: 13px; color: #9a9da3; margin: 0; }
/* płatności jako informacja, nie „przyciski" */
.v-foot__pay { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.v-foot__paybadge {
  position: relative;
  color: #9aa0a6;
  font-size: 12.5px;
  font-weight: 600;
}
.v-foot__paybadge + .v-foot__paybadge::before {
  content: "·";
  position: absolute;
  left: -12px;
  color: #5a5d63;
}
/* domyślna stopka motywu nie renderuje hooków, ale gdyby coś się wcisnęło */
.footer__before, .footer__main { display: none; }

/* -------------------------------------- nagłówek: konto+koszyk przy logo
   Rząd motywu: logo order-xl-1, wyszukiwarka order-2 + ms-auto — nasz blok
   dostaje order 3, żeby siedział NA KOŃCU rzędu (wzór t24: konto+koszyk
   po prawej za wyszukiwarką). */
.v-headnav { gap: 4px; margin-left: 12px; order: 3; }
.v-headnav .header-block__action-btn { white-space: nowrap; }
/* licznik koszyka w kolorze marki (motyw daje niebieski bootstrap) */
.header-block__badge { background-color: var(--v-red-cta) !important; }

/* ------------------------------------------------------------ responsywność */
@media (max-width: 1199px) {
  .v-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .v-best__grid { grid-template-columns: repeat(2, 1fr); }
  .v-insp { grid-template-columns: 1fr; }
  .v-why { grid-template-columns: 1fr; padding: 28px 24px; }
  .v-why__media { order: -1; }
  .v-why__media img { max-height: 320px; }
  .v-guar__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .v-foot__grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  /* biała fala zostaje tylko na desktopie — na mobile robiła białe-na-białym */
  .v-hero::before { display: none; }
  .v-hero__grid { grid-template-columns: 1fr; }
  .v-hero__media { min-height: 250px; order: -1; }
  .v-hero__media img { width: calc(100% - 32px); height: calc(100% - 32px); margin: 16px; }
  .v-hero__text { padding: 26px 24px 36px; }
  .v-hero__burst { left: auto; right: 18px; top: auto; bottom: -34px; width: 104px; height: 104px; font-size: 11.5px; }
  .v-hero__tag { right: auto; left: 26px; }
  .v-usp { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
}
@media (max-width: 767px) {
  .v-topbar__in { padding-inline: 16px; }
  /* logo + ikony konta i koszyka w JEDNEJ linii */
  .header-bottom__row { flex-wrap: nowrap; }
  .header-bottom .logo img { max-width: 150px; height: auto; }
  /* JEDNA KOLUMNA na telefonie — próg jak na tapczany24 (do 767 px).
     Wcześniej stało to na 575 px, więc przy 607 px karty szły po dwie
     i nazwy łamały się na trzy wiersze. */
  .v-best__grid { grid-template-columns: 1fr; }
  .v-cats { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .v-usp { grid-template-columns: 1fr; }
  .v-topbar__hours { display: none; }
  .page-home .custom-text { padding: 24px 20px; }
  .v-guar__grid { grid-template-columns: 1fr; }
  /* przyciski hero w równej szerokości — bez poszarpanej krawędzi */
  .v-hero__actions { flex-direction: column; align-items: stretch; }
  .v-hero__actions .v-btn { width: 100%; justify-content: center; }
  .v-foot__grid { grid-template-columns: 1fr; gap: 24px; padding: 34px 0 28px; }
  .v-foot__bottom-in { justify-content: center; text-align: center; }
  .v-seo { padding: 24px 20px; }
  .v-why { padding: 24px 18px; }
}

/* ======================================================== menu główne
   Wzór: poziomy pasek kategorii z tapczany24 — wersalikami, ciemny,
   czerwony na najechaniu, rozwijane jako panel na całą szerokość.
   Klasy z motywu: .main-menu__tree / __item / __link, .js-sub-menu
   ==================================================================== */
.header-bottom__row { flex-wrap: wrap; }
.header-bottom .main-menu {
  order: 10;
  flex: 0 0 100%;
  max-width: 100%;
  /* bez tego justify-content w .main-menu__tree nie ma czego rozdzielac
     i caly pasek siedzi ~100 px w lewo */
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--v-line);
  margin-top: 8px;
}

.main-menu__tree {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.main-menu__tree__item { position: static; }
.main-menu__tree__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* niemieckie nazwy kategorii są długie (Led-Beleuchtung, Schlafzimmer) —
     ciaśniej niż na valendy, inaczej 7 pozycji nie mieści się w 1280 px */
  padding: 15px 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--v-ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
}
/* ⚠️ Padding MUSI iść przez `.main-menu__tree > li > a`, nie przez samą klasę.
   Motyw ma `.main-menu__tree > li > a { padding: 1.5rem 1rem }` — specyficzność
   0,1,2 kontra nasze 0,1,0, więc `padding` z bloku wyżej NIGDY nie wchodził
   (zmierzone 3.08: computed 24px 16px zamiast 15px 14px, przy prawidłowo
   zastosowanym `font-size` z tej samej reguły — stąd myląca diagnoza, że reguła
   działa). To samo dotyczy zwężenia menu na tablecie niżej. */
.main-menu__tree > li > a { padding: 15px 9px; }
.main-menu__tree__link:hover,
.main-menu__tree__link:focus { color: var(--v-red-dark); }
.main-menu__tree__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--v-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}
.main-menu__tree__link:hover::after,
.main-menu__tree__link:focus-visible::after { transform: scaleX(1); }
.main-menu__tree__link:focus-visible { outline: none; }
.main-menu__tree__link.dropdown-toggle::before {
  content: "";
  order: 2;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
}

/* panel rozwijany na całą szerokość */
.menu-container.js-sub-menu {
  background: #fff;
  border-top: 3px solid var(--v-red);
  box-shadow: 0 18px 40px rgba(22, 24, 28, .16) !important;
  padding: 24px 0 28px;
}
.menu-container.js-sub-menu .main-menu__tree__link,
.main-menu__tree__link.dropdown-item {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14.5px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--v-ink-soft);
}
.menu-container.js-sub-menu .main-menu__tree__link:hover {
  background: var(--v-bg);
  color: var(--v-red-dark);
}
.menu-container.js-sub-menu .main-menu__tree__link::after { display: none; }

@media (max-width: 1199px) {
  .header-bottom .main-menu { order: 0; flex: 0 0 auto; border-top: 0; margin-top: 0; }
}


/* ==========================================================================
   POPRAWKI PO AUDYCIE 2026-08-01
   Kolejność bloków jest istotna: ten arkusz wchodzi po theme.css motywu,
   więc nadpisuje jego siatki bez !important (poza jednym miejscem w nagłówku).
   ========================================================================== */

/* B5 — pasmo bestsellerów ma width:100vw, co przy widocznym pasku przewijania
   robiło 8 px poziomego scrolla na całej stronie. MUSI być `clip`, nie
   `hidden` — `hidden` zabiłby position:sticky nagłówka. */
body { overflow-x: clip; }

/* --------------------------------------------------- A2 · listing kategorii
   Motyw daje kartom `col-12 col-xs-6 col-xl-4`, a jego breakpoint `xs` to
   360 px — więc dwie kolumny łapały KAŻDY telefon. tapczany24 ma na tej
   szerokości jedną kolumnę. */
@media (max-width: 767.98px) {
  #js-product-list .products > .product-miniature { flex: 0 0 auto; width: 100%; }

  /* A7 — po rozszerzeniu karty jest miejsce na palec: spinner ilości
     i przycisk koszyka miały 38–40 px przy wymaganych 44 px. */
  #js-product-list .quantity-button .btn { min-width: 44px; min-height: 44px; }
  #js-product-list [data-button-action="add-to-cart"] { min-height: 44px; }
}

/* B29 — serduszka „ulubione" na kartach listingu: funkcja ślepa (sklep nie
   zbiera kont), a markup ma <button> wewnątrz <a>. Wstrzykuje je JS modułu,
   więc odpięcie hooka nic nie daje — chowamy w CSS. */
.product-miniature .wishlist-button-add { display: none; }

/* B3 — baner kategorii: kwadratowe zdjęcie wklejone w pas 2000×400, w 80%
   biała pustka. Do czasu zrobienia własnych pasów sekcja się nie pokazuje. */
.category-cover { display: none; }

/* ------------------------------- listing bez pustej lewej kolumny (decyzja 3.08)
   Motyw rezerwuje na kategorii `#left-column` (col-md-4 col-lg-3), ale nie jest do
   niej podpięty ŻADEN moduł — kolumna była pusta i zabierała 285 z 1140 px, przez co
   kafelki miały 261 px zamiast 360 px jak na stronie głównej. Artur: „usuń ten pasek
   po lewej, niech będzie jak t24; chodzi żeby kafelki były duże jak na głównej".

   Reguła celowo stoi na `:not(:has(*))`, a nie na `body#category`: kolumna znika
   TYLKO wtedy, gdy jest naprawdę pusta. Gdy kiedyś dojdą filtry (osobny temat, ma
   być robiony razem z t24), pasek wróci sam i nie trzeba pamiętać o cofaniu CSS.
   `:empty` by tu nie zadziałało — w środku są białe znaki, więc liczą się jako
   węzeł tekstowy (zmierzone: innerHTML 42 znaki, 0 elementów).

   ⚠️ Szerokość treści MUSI iść przez selektor rodzeństwa `+`. Pierwsza wersja
   brzmiała `.row:has(> #left-column:not(:has(*))) > #content-wrapper` i była
   nieważna, bo `:has()` NIE MOŻE być zagnieżdżone w innym `:has()` — przeglądarka
   odrzuca całą regułę, a objaw jest mylący: kolumna znika (ta reguła jest osobna
   i poprawna), ale treść zostaje przy starej szerokości. */
#left-column:not(:has(*)) { display: none; }
#left-column:not(:has(*)) + #content-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Trzy karty w rzędzie na desktopie — tak jak na stronie głównej. Motyw daje
   kategorii `col-xl-4` (3 w rzędzie), ale WYNIKOM WYSZUKIWANIA `col-xl-3`
   (4 w rzędzie, karta 261 px zamiast 356 px). Bez tej reguły ten sam kafelek
   wychodzi na dwóch listingach w dwóch rozmiarach. */
@media (min-width: 1200px) {
  .products > .product-miniature { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* ------------------------------------------------- teksty kategorii (etap 5)
   Wstęp nad listą motyw wkłada w `#category-description.rich-text`, tekst pod
   listą jest nasz (`.v-cattext`). Arkusz opisów produktu `valendy-popis.css`
   ładuje się TYLKO na karcie produktu, więc te style muszą być tutaj. */
#category-description { max-width: 70ch; color: var(--v-ink-soft); }
#category-description p { margin: 0 0 10px; line-height: 1.6; }
#category-description p:last-child { margin-bottom: 0; }

.v-cattext {
  max-width: 78ch;
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--v-line);
  color: var(--v-ink-soft);
  font-size: 15px;
  line-height: 1.65;
}
.v-cattext h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--v-ink);
  margin: 24px 0 10px;
}
.v-cattext h2:first-child { margin-top: 0; }
.v-cattext p { margin: 0 0 12px; }
.v-cattext strong { color: var(--v-ink); font-weight: 600; }
.v-cattext__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}
.v-cattext__links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--v-line);
  border-radius: 100px;
  background: #fff;
  color: var(--v-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.v-cattext__links a:hover { border-color: var(--v-red); color: var(--v-red-dark); }
@media (max-width: 767px) {
  .v-cattext { margin-top: 26px; font-size: 14.5px; }
  .v-cattext h2 { font-size: 17.5px; }
}

/* B28 — na telefonie znikała etykieta „Seřadit podle" i select stawał NAD
   licznikiem produktów. */
@media (max-width: 767.98px) {
  .sort-by-row .sort-by { display: block !important; font-size: 14px; }
  .products-selections-filters .total-products { order: 1; }
}

/* B8 — między logo a wyszukiwarką rosła pustka (pole miało sztywne 267 px,
   przy 1920 px zostawało ~495 px dziury). */
@media (min-width: 992px) {
  .header-bottom__row > .order-2 {
    flex: 1 1 auto !important;
    max-width: none;
    margin-left: 32px !important;
    margin-right: 20px;
  }
  .header-bottom__row .search-widgets,
  .header-bottom__row .js-search-input { width: 100%; }
}

/* B22 — godziny i numer telefonu łamały się w połowie */
.v-guar__d a,
a.v-foot__phone { white-space: nowrap; }

/* B26 + C2 — sekcja tekstu SEO wypadała z systemu: mniejszy nagłówek niż
   reszta i bez czerwonej kreski; wiersz miał ~105 znaków zamiast 55–75. */
.v-seo h2,
.page-home .custom-text h2 { font-size: clamp(22px, 2.2vw, 30px); }
.v-seo h2::after,
.page-home .custom-text h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--v-red);
}
.v-seo { max-width: 700px; }
.v-seo p { font-size: 16px; line-height: 1.7; }

/* B27 — pasek gwarancji przy 992–1199 px: pierwszy tytuł łamał się na dwie
   linie, więc opisy startowały na dwóch różnych wysokościach. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .v-guar__t { min-height: 39px; }
}

/* C3 — rytm pionowy miał dwie skale (48 i 56 px), a wokół szarego pasma
   bestsellerów wychodziło 104–108 px. */
.v-hero { margin: 26px 0 56px; }
.v-usp { margin-bottom: 56px; }
.page-home .custom-text { margin-bottom: 56px; }
.v-best { padding: 40px 0 44px; }

/* ---------------------------------------------- karta produktu: przyciski
   Motyw daje .btn-primary w bootstrapowym błękicie, więc „Přidat do košíku"
   i „Koupit hned" odstawały od czerwieni marki widocznej wszędzie indziej.
   Kolor tła jak na pozostałych przyciskach z białym napisem (--v-red-cta). */
.product__actions .btn-primary,
.custom-addtocart-wrapper .btn-primary,
.product-actions__button .btn-primary {
  background-color: var(--v-red-cta);
  border-color: var(--v-red-cta);
  color: #fff;
}
.product__actions .btn-primary:hover,
.product__actions .btn-primary:focus,
.custom-addtocart-wrapper .btn-primary:hover,
.custom-addtocart-wrapper .btn-primary:focus,
.product-actions__button .btn-primary:hover,
.product-actions__button .btn-primary:focus {
  background-color: var(--v-red-dark);
  border-color: var(--v-red-dark);
  color: #fff;
}
/* serduszko „ulubione" — na listingu już schowane (funkcja jest ślepa),
   na karcie produktu z tego samego powodu */
.product__actions .wishlist-button-add { display: none; }

/* ── galeria produktu (ets_product_slideshow) ─────────────────────────────────
   Moduł liczy na regułę bazową `.product-cover .layer`, którą ma motyw classic,
   a hummingbird nie — bez niej lupa wypadała jako czarny kwadrat 70×70 POD
   zdjęciem i była widoczna zawsze, zamiast na najechaniu. */
.ets-psl-images-siticks .product-cover { position: relative; }
.ets-psl-images-siticks .product-cover .layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s; cursor: pointer;
}
.ets-psl-images-siticks .product-cover .layer .zoom-in,
.ets-psl-images-siticks .product-cover .layer .zoom-in svg { color: #fff; fill: currentColor; }
.ets-psl-images-siticks .product-cover:hover .layer,
.ets-psl-images-siticks-medium:hover .product-cover .layer { opacity: 1; }
@media (max-width: 767px) { .ets-psl-images-siticks .product-cover .layer { display: none; } }

/* rezerwacja miejsca pod zdjęcie i miniatury — bez tego karta produktu skacze
   o ~630 px przy każdym wejściu (oba typy obrazków są kwadratowe) */
.ets-psl-images-siticks .product-cover img.js-qv-product-cover { aspect-ratio: 1 / 1; width: 100%; height: auto; }
.ets-psl-images-siticks .thumb-container img.ets-psl-thumb,
.ets-psl-modal-images-siticks .thumb-container img.ets-psl-thumb { aspect-ratio: 1 / 1; width: 100%; height: auto; }

/* ── strony CMS (dokumenty prawne, etap 0) ─────────────────────────────────
   Motyw drukuje tytuł strony jako <h1 class="h4">, więc wygląda jak podtytuł,
   a treść dokumentów <h1> już nie ma (dwa <h1> na stronie to był błąd).
   Tu nadajemy temu nagłówkowi rangę tytułu i ograniczamy długość wiersza —
   regulamin na 1920 px miał ~200 znaków w linii, czyli nieczytelnie. */
body.page-cms .page-header h1 {
  font-size: 2rem; line-height: 1.2; font-weight: 700;
  margin: 0 0 1.5rem; max-width: 46rem;
}
body.page-cms .page-cms { max-width: 46rem; }
body.page-cms .page-cms h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
body.page-cms .page-cms h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
body.page-cms .page-cms p,
body.page-cms .page-cms li { line-height: 1.65; }
body.page-cms .page-cms ol,
body.page-cms .page-cms ul { padding-left: 1.25rem; margin-bottom: 1rem; }
body.page-cms .page-cms li { margin-bottom: .4rem; }
/* tabele w treści CMS (np. cennik dostawy): na wąskim ekranie nagłówek
   „Übliche Lieferzeit" wystawał poza komórkę i był ucinany krawędzią okna —
   poniżej 575 px tabela przewija się we WŁASNYM kontenerze, strona nie. */
body.page-cms .page-cms td,
body.page-cms .page-cms th { vertical-align: top; }
@media (max-width: 574.98px) {
  body.page-cms .page-cms table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* bez min-width kolumny zaciskają się do szerokości okna i tekst łamie się
     po jednym słowie w wierszu — z min-width tabela dostaje naturalny układ,
     a przewija się tylko ona, nie strona */
  body.page-cms .page-cms table thead,
  body.page-cms .page-cms table tbody { display: table; min-width: 540px; width: 100%; }
}
body.page-cms .page-cms table { width: 100%; margin: 1rem 0 1.5rem; }
body.page-cms .page-cms th { text-align: left; }
@media (max-width: 767.98px) {
  body.page-cms .page-header h1 { font-size: 1.5rem; }
  /* tabela cennika dopravy nie mieści się na telefonie — pozwalamy jej scrollować
     poziomo w SWOIM kontenerze, zamiast rozpychać całą stronę */
  body.page-cms .page-cms table { display: block; overflow-x: auto; }
}

/* blok .v-madetoorder usunięty 2026-08-02 (decyzja Artura) — patrz product.tpl */

/* ---------------------------------------------- menu przy 992–1199 px
   Motyw pokazuje poziome menu dopiero od 1200 px (`d-none d-xl-block` na
   `.js-menu-desktop`, bootstrapowy breakpoint `xl`), więc na tablecie
   w poziomie i na mniejszym laptopie osiem pozycji chowało się w hamburgerze,
   mimo że w wierszu zostawało ~200 px wolnego miejsca. Zmierzone: przy 1100 px
   nagłówek łamał się na dwa piętra, a menu było dostępne tylko po kliknięciu.
   Obniżamy próg do 992 px i ściskamy odstępy, żeby osiem pozycji zmieściło się
   w jednym wierszu. Hamburger w tym zakresie znika — zostaje poniżej 992 px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-menu > .js-menu-desktop { display: block !important; }
  /* dwa selektory celowo: `:has()` chowa cały blok (bez niego zostaje pusty
     odstęp flexa), a reguła na samym linku działa też tam, gdzie `:has()` nie */
  .header-block > a[data-bs-toggle="offcanvas"][data-bs-target="#mobileMenu"] { display: none !important; }
  .header-block:has(> a[data-bs-target="#mobileMenu"]) { display: none !important; }
  /* padding przez selektor motywu — patrz ostrzeżenie przy regule bazowej.
     Wartości zmierzone 5.08 po dołożeniu kategorii „Sofas und Ecksofas" do menu:
     przy 15px 7px / 12,5px pasek miał 1014 px w kontenerze 944 px i strona
     dostawała poziomy scroll (defekt był i wcześniej — 1136 px przy 7 pozycjach). */
  .main-menu__tree { gap: 0 2px; }
  .main-menu__tree > li > a { padding: 14px 4px; }
  .main-menu__tree__link { font-size: 11.5px; letter-spacing: .01em; gap: 4px; }
  .main-menu__tree__link::after { left: 4px; right: 4px; }
}

/* koszyk: zrodlo szuflady ma byc niewidoczne (classic mial hidden-xs-up) */
.js-cart-source { display: none !important; }

/* ---------------------------------------- koszyk w nagłówku: rozmiar ikony
   Moduł an_sidebarcart wstawia własny <svg class="cart-icon"> BEZ atrybutów
   width/height. Sklejki CCC różnią się między stronami, więc na karcie ikona
   dostawała rozmiar, a na stronie głównej renderowała się w 60 px i rozpychała
   nagłówek. Pozostałe ikony nagłówka motywu mają 24 px — wyrównujemy do nich. */
.blockcart .cart-icon { width: 24px; height: 24px; flex: 0 0 auto; }
/* Szablon an_sidebarcart chowa podpis koszyka klasą `hidden-sm-down` z BOOTSTRAPA 4,
   której hummingbird (Bootstrap 5) NIE definiuje — ta sama pułapka co `hidden-xs-up`
   przy .js-cart-source. Bez tego napis „Košík" zostaje na telefonie, rząd nagłówka
   nie mieści się w 375 px i koszyk zawija się do drugiej linii pod logo. */
.blockcart .cart-text { display: none; }
@media (min-width: 768px) { .blockcart .cart-text { display: inline; } }

/* ------------------------------------- szuflada koszyka: przyciski w kolorze marki
   `an_sidebarcart.tpl` daje `btn btn-primary` (bootstrapowy błękit). Poprzednia
   reguła obejmowała tylko kartę produktu (.product__actions), więc w szufladzie
   „Pokračovat do pokladny" i „Pokračovat v nákupu" zostawały niebieskie.
   Na t24 to samo rozwiązuje nadpisanie btn-primary w custom.css motywu classic. */
.cart-action .btn-primary,
.cart-dropdown .btn-primary,
.blockcart .btn-primary {
  background-color: var(--v-red-cta) !important;
  border-color: var(--v-red-cta) !important;
  color: #fff !important;
}
.cart-action .btn-primary:hover, .cart-action .btn-primary:focus, .cart-action .btn-primary:active,
.cart-dropdown .btn-primary:hover, .cart-dropdown .btn-primary:focus,
.blockcart .btn-primary:hover, .blockcart .btn-primary:focus {
  background-color: var(--v-red-dark) !important;
  border-color: var(--v-red-dark) !important;
  color: #fff !important;
  outline: none !important;
}
/* drugi przycisk („Pokračovat v nákupu") jako wariant pomocniczy — biały z czerwoną
   ramką, żeby dwa pełne czerwone kafle nie konkurowały ze sobą */
.cart-action .btn-primary.js-ansidebarcart-close {
  background-color: #fff !important;
  color: var(--v-red-cta) !important;
  margin-top: 8px;
}
.cart-action .btn-primary.js-ansidebarcart-close:hover {
  background-color: var(--v-red-cta) !important;
  color: #fff !important;
}

/* ==============================================
   AN Product Fields – fix na dotyk (1:1 z t24 custom.css)
   ============================================== */
@media (hover: none) and (pointer: coarse) {
    .anpf-select-dropdown-wrap select {
        display: block !important;
        width: 100% !important;
    }

    .anpf-select-dropdown {
        display: none !important;
    }
}

/* ============================================================
   2026-08-07: zdjęcie niebieskiego Bootstrapa (spadek po starym
   szablonie hummingbird — primary #0d6efd) na paletę marki #dd0000.
   Obejmuje: linki, paginację, przyciski btn-primary/outline,
   checkboxy/radia, focusy pól formularzy, badge/tekst primary.
   Ceny (zielone, --bs-success) celowo NIETKNIĘTE.
   ============================================================ */
:root,
[data-bs-theme=light] {
    --bs-primary: #dd0000;
    --bs-primary-rgb: 221, 0, 0;
    --bs-primary-text-emphasis: #8a0000;
    --bs-primary-bg-subtle: #fdeaea;
    --bs-primary-border-subtle: #f5bcbc;
    --bs-link-color: #dd0000;
    --bs-link-color-rgb: 221, 0, 0;
    --bs-link-hover-color: #b00000;
    --bs-link-hover-color-rgb: 176, 0, 0;
    --bs-focus-ring-color: rgba(221, 0, 0, .25);
}
.btn-primary {
    --bs-btn-bg: #dd0000;
    --bs-btn-border-color: #dd0000;
    --bs-btn-hover-bg: #b00000;
    --bs-btn-hover-border-color: #b00000;
    --bs-btn-active-bg: #a00000;
    --bs-btn-active-border-color: #a00000;
    --bs-btn-disabled-bg: #dd0000;
    --bs-btn-disabled-border-color: #dd0000;
    --bs-btn-focus-shadow-rgb: 221, 0, 0;
}
.btn-outline-primary {
    --bs-btn-color: #dd0000;
    --bs-btn-border-color: #dd0000;
    --bs-btn-hover-bg: #dd0000;
    --bs-btn-hover-border-color: #dd0000;
    --bs-btn-active-bg: #b00000;
    --bs-btn-active-border-color: #b00000;
    --bs-btn-focus-shadow-rgb: 221, 0, 0;
}
.pagination {
    --bs-pagination-color: #dd0000;
    --bs-pagination-hover-color: #b00000;
    --bs-pagination-focus-color: #b00000;
    --bs-pagination-active-bg: #dd0000;
    --bs-pagination-active-border-color: #dd0000;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(221, 0, 0, .25);
}
.form-check-input:checked {
    background-color: #dd0000;
    border-color: #dd0000;
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #e88;
    box-shadow: 0 0 0 .25rem rgba(221, 0, 0, .15);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #dd0000;
}
.nav-link {
    --bs-nav-link-color: #dd0000;
    --bs-nav-link-hover-color: #b00000;
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: #dd0000;
}
.progress,
.progress-stacked {
    --bs-progress-bar-bg: #dd0000;
}

/* ============================================================
   2026-08-07: strzałka rozwijania na selectach konfiguratora.
   BS5 przez .form-control zdejmuje z <select> natywny appearance,
   a bez .form-select nie ma zastępczej karetki — na telefonie pole
   wyglądało jak nierozwijalne (t24 na BS4 ma strzałkę natywną).
   ============================================================ */
.anpf-select-dropdown-wrap select.form-control-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}