/* ============================================================
   DEKORAN — schemat kolorystyczny + Layout B (strona produktu)
   Marka: pomarańcz #e87818 + oliwka #608838 (z logo)
   Wgrać jako pojedynczy plik motywu (patrz WDROZENIE.md, krok 0).
   Wkleić/załadować PO Bootstrapie, żeby nadpisania miały pierwszeństwo.
   ============================================================ */

:root {

  /* ---------- FONTY ---------- */
  --dk-font-sans:  'Outfit', 'Inter', sans-serif;
  --dk-font-serif: 'Playfair Display', Georgia, serif;

  /* ---------- KOLORY MARKI (z logo) ---------- */
  --dk-orange:        #e87818;   /* płaski jasny pomarańcz — badge/akcenty (ciemny tekst!) */
  --dk-orange-hover:  #cf680f;
  --dk-on-orange:     #21242c;   /* ciemny tekst na PŁASKIM pomarańczu (5.24:1) */

  /* Gradient CTA — przesunięty w głąb, by BIAŁY tekst przeszedł WCAG
     (góra #b85b0c + biały = 4.62:1, dół #8f4407 = 6.5:1). */
  --dk-orange-grad:        linear-gradient(135deg, #b85b0c 0%, #8f4407 100%);
  --dk-orange-grad-hover:  linear-gradient(135deg, #a4500a 0%, #7d3b06 100%);

  --dk-olive:         #608838;   /* oliwka marki */
  --dk-olive-deep:    #56802f;   /* pod biały tekst / linki (4.64:1) */
  --dk-olive-hover:   #4f7330;
  --dk-on-olive:      #ffffff;

  /* ---------- NEUTRALE ---------- */
  --dk-ink:    #21242c;   /* główny tekst + ciemne tła */
  --dk-muted:  #6a707c;   /* tekst drugorzędny (4.97:1) */
  --dk-border: #e6e6e6;
  --dk-white:  #ffffff;

  /* ---------- CIEPŁE TŁA ---------- */
  --dk-bg-subtle: #f9f7f6;
  --dk-bg-warm:   #f5efe6;   /* krem: hero, sekcje wyróżnione */

  /* ---------- STANY ---------- */
  --dk-danger:  #d92d20;     /* WYŁĄCZNIE błędy/walidacja */
  --dk-success: #188251;

  /* ---------- PROMIENIE ---------- */
  --dk-radius-sm: 6px;
  --dk-radius-md: 12px;
  --dk-radius-lg: 24px;

  --dk-transition: all .25s cubic-bezier(.165, .84, .44, 1);

  /* Wysokości sticky-headera (zmierzone na żywo).
     --dk-header-h      = stan ZWINIĘTY (body.dekoran-scrolled): sam pasek nawigacji.
     --dk-header-h-full = stan ROZWINIĘTY (przed progiem 240px): banner+top+main+nav.
     Offset przyklejonych elementów przełącza się między nimi (patrz reguły niżej),
     żeby buy-box/filtry nie chowały się pod headerem w oknie przejściowym 169–240px. */
  --dk-header-h: 56px;
  --dk-header-h-full: 220px;
}

/* ============================================================
   MOSTEK DO BOOTSTRAPA — stockowy niebieski (#0b69f6) -> marka
   ============================================================ */
:root {
  --bs-primary:          var(--dk-orange);
  --bs-primary-rgb:      232, 120, 24;
  --bs-link-color:       var(--dk-olive-deep);
  --bs-link-color-rgb:   86, 128, 47;
  --bs-link-hover-color: var(--dk-orange);
  --bs-body-color:       var(--dk-ink);
  --bs-body-color-rgb:   33, 36, 44;
  --bs-border-color:     var(--dk-border);
  --bs-danger:           var(--dk-danger);
  --bs-success:          var(--dk-success);
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.btn-primary,
button[type="submit"],
.add-to-cart,
.dek-btn-cart {
  background: var(--dk-orange-grad);
  border: none;
  color: var(--dk-white);
  border-radius: var(--dk-radius-sm);
  font-weight: 500;
  transition: var(--dk-transition);
}
.btn-primary:hover,
button[type="submit"]:hover,
.add-to-cart:hover,
.dek-btn-cart:hover {
  background: var(--dk-orange-grad-hover);
  color: var(--dk-white);
}

.btn-secondary,
.btn-olive {
  background-color: var(--dk-olive-deep);
  border-color:     var(--dk-olive-deep);
  color:            var(--dk-on-olive);
  border-radius:    var(--dk-radius-sm);
  font-weight:      500;
  transition:       var(--dk-transition);
}
.btn-secondary:hover,
.btn-olive:hover {
  background-color: var(--dk-olive-hover);
  border-color:     var(--dk-olive-hover);
}

/* Bootstrapowe outline-primary (productcomments używa .btn-outline-primary) -> oliwka */
.btn-outline-primary,
.btn-outline-olive {
  background-color: transparent;
  border: 1.5px solid var(--dk-olive-deep);
  color: var(--dk-olive-deep);
  border-radius: var(--dk-radius-sm);
  font-weight: 500;
}
.btn-outline-primary:hover,
.btn-outline-olive:hover {
  background-color: var(--dk-olive-deep);
  border-color: var(--dk-olive-deep);
  color: var(--dk-white);
}

/* ============================================================
   LINKI / NAGŁÓWKI
   ============================================================ */
a        { color: var(--dk-olive-deep); }
a:hover  { color: var(--dk-orange); }

h1, h2, h3, .h1, .h2, .h3,
.dek-product__name,
.section-title {
  font-family: var(--dk-font-serif);
  color: var(--dk-ink);
}

/* ============================================================
   CENY / FLAGI
   ============================================================ */
.price, .product__price, .product-miniature__price,
.current-price { color: var(--dk-ink); font-weight: 500; }

.regular-price, .price-old { color: var(--dk-muted); text-decoration: line-through; }

/* badge -% w oliwce, żeby NIE konkurował z pomarańczowym CTA */
.product-flags .badge.discount,
.product-flag.discount,
.product-flag.on-sale {
  background-color: var(--dk-olive-deep);
  color: var(--dk-white);
}
/* "Nowy" w pomarańczu z ciemnym tekstem */
.product-flags .badge.new,
.dek-product__badge--new,
.product-flag.new {
  background-color: var(--dk-orange);
  color: var(--dk-on-orange);
}

/* ============================================================
   ===================  LAYOUT  B  ============================
   ============================================================ */

/* --- 1. Dwie kolumny + przyklejony buy-box ---------------- */
@media (min-width: 992px) {
  .dek-product {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  /* lewa kolumna = galeria + opis/akordeon (wrapper .dek-product__main, patrz WDROZENIE.md) */
  .dek-product__main { min-width: 0; }

  .dek-product__info {
    position: sticky;
    top: calc(var(--dk-header-h) + 12px);   /* stan zwinięty: tuż pod paskiem nawigacji */
    align-self: start;                 /* KLUCZOWE dla sticky w gridzie */
    transition: top 0.4s ease;         /* sync ze zwijaniem headera (max-height 0.4s) */
    /* bez max-height/overflow — brak wewnętrznego scrollbara; buy-box naturalnej wysokości */
  }
  /* Header jeszcze rozwinięty (przed progiem 240px) → offset pełnej wysokości,
     żeby przyklejony buy-box nie chował się za nim. */
  body:not(.dekoran-scrolled) .dek-product__info {
    top: calc(var(--dk-header-h-full) + 12px);
  }

  /* "Podobne / Ostatnio przeglądane" — pełna szerokość, poza gridem produktu */
  .ps-categoryproducts,
  .ps-viewedproduct { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  .dek-product__info { position: static; max-height: none; overflow: visible; }
}

/* --- 2. Karta zakupu (wygląd) ----------------------------- */
.dek-product__info {
  background: var(--dk-bg-subtle);
  border: 1px solid #ece5da;
  border-radius: var(--dk-radius-md);
  padding: 16px;
}

/* --- 2a. Spinner przeliczania ceny (zmiana wariantu, AJAX) ---
   Klasę .dek-price-loading dodaje/zdejmuje dekoran-product.js
   (updateProduct -> updatedProduct). Cena przygasa, na wierzchu kręci się spinner. */
.dek-product__price { position: relative; }
.dek-product__price.dek-price-loading > * {
  opacity: 0.3;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.dek-product__price.dek-price-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2.5px solid rgba(86, 128, 47, 0.25);
  border-top-color: var(--dk-olive-deep);
  border-radius: 50%;
  animation: dek-price-spin 0.6s linear infinite;
}
@keyframes dek-price-spin { to { transform: rotate(360deg); } }

/* --- 3. Podpowiedź materiału — anty-skok w sticky karcie --- */
.dek-variant__hint {
  min-height: 42px;                    /* rezerwuje miejsce -> karta nie skacze */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--dk-muted);
  font-size: 13px;
  line-height: 1.45;
  background: var(--dk-white);
  border: 1px solid #ece5da;
  border-radius: var(--dk-radius-sm);
  padding: 8px 10px;
}
.dek-variant__spec-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--dk-olive-deep);
  text-decoration: none;
}
.dek-variant__spec-link:hover { color: var(--dk-orange); }

/* --- 4. Tabela specyfikacji na tokenach ------------------- */
.dek-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dek-spec-table th {
  text-align: left;
  font-weight: 400;
  color: var(--dk-muted);
  padding: 8px 10px;
  width: 42%;
}
.dek-spec-table td {
  color: var(--dk-ink);
  font-weight: 500;
  padding: 8px 10px;
}
.dek-spec-table tr:nth-child(odd) { background: var(--dk-bg-subtle); }

/* --- 5. Recolor ikon reassurance (zaszyte #0b69f6) -------- */
/* CSS 'fill' wygrywa z atrybutem prezentacyjnym fill="#0b69f6" */
.blockreassurance .reassurance__image svg path { fill: var(--dk-olive-deep); }

/* --- 6. USP-y (pasek pod CTA) ----------------------------- */
.dek-product__usps i,
.dek-product__usp-item svg { color: var(--dk-olive-deep); stroke: var(--dk-olive-deep); }

/* --- 7. Ukrycie pustego bloku opinii (asekuracja CSS) ----- */
.dek-reviews-empty { display: none !important; }

/* --- 8. Mobilny przyklejony pasek "Do koszyka" ------------ */
#dek-mobile-cart {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--dk-white);
  border-top: 1px solid var(--dk-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
#dek-mobile-cart .dek-mc__price { font-size: 17px; font-weight: 500; color: var(--dk-ink); white-space: nowrap; }
#dek-mobile-cart .dek-mc__btn {
  flex: 1;
  background: var(--dk-orange-grad);
  color: var(--dk-white);
  border: none;
  border-radius: var(--dk-radius-sm);
  padding: 11px;
  font-size: 14px;
  font-weight: 500;
}
#dek-mobile-cart.is-visible { display: flex; }
@media (min-width: 992px) { #dek-mobile-cart { display: none !important; } }

/* ============================================================
   ===================  KATEGORIA  ============================
   Lista produktów + filtry + opis SEO/FAQ.
   Ta sekcja PRZEJMUJE strukturę z inline'owego <style> w stopce
   kategorii — po jej wgraniu ten <style> można USUNĄĆ (WDROZENIE-KATEGORIA.md).
   ============================================================ */

/* --- Layout: rezygnacja z full-bleed + sticky filtry ------- */
.category__footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--dk-border);
  margin-top: 3rem;
}
@media (min-width: 992px) {
  /* full-bleed wyłączony, żeby sticky sidebar nie nachodził na opis */
  .category__footer { margin-left: 0; width: auto; }

  #left-column {
    position: sticky;
    top: calc(var(--dk-header-h) + 12px);   /* stan zwinięty: tuż pod paskiem nawigacji */
    align-self: flex-start;
    max-height: calc(100vh - var(--dk-header-h) - 24px);
    overflow: auto;
    scrollbar-width: thin;
    transition: top 0.4s ease;              /* sync ze zwijaniem headera */
  }
  /* Header jeszcze rozwinięty → offset pełnej wysokości (jak buy-box). */
  body:not(.dekoran-scrolled) #left-column {
    top: calc(var(--dk-header-h-full) + 12px);
  }
}

/* --- Karty produktów -------------------------------------- */
.product-miniature__title { color: var(--dk-ink); text-decoration: none; }
.product-miniature__title:hover { color: var(--dk-orange); }
.product-miniature__price { color: var(--dk-ink); font-weight: 500; }
/* flaga "Nowy" -> pomarańcz + ciemny tekst (już w sekcji globalnej, tu dla pewności) */
.product-flags .badge.new { background: var(--dk-orange); color: var(--dk-on-orange); }

/* --- Filtry (faceted) ------------------------------------- */
.dek-filters__title,
.dek-filters__section-btn { color: var(--dk-ink); }
.dek-filters__section-btn { font-weight: 500; }
.search-filters__magnitude { color: var(--dk-muted); }
.search-filters__link { color: var(--dk-ink); text-decoration: none; }
.search-filters__link:hover { color: var(--dk-orange); }
.dek-filters .form-check-input,
.dek-cattree .form-check-input { accent-color: var(--dk-olive-deep); }
.dek-filters .form-check-input:checked {
  background-color: var(--dk-olive-deep);
  border-color: var(--dk-olive-deep);
}

/* swatche kolorów (filtr "Kolor dominujący") */
.dek-color-swatch {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  margin-right: 8px;
  vertical-align: -3px;
}
.dek-color-label { color: var(--dk-ink); }

/* --- Suwaki rozmiaru (szer × wys) — zastępują listę checkboxów ROZMIAR --- */
.dek-size-slider { padding: 4px 4px 6px; }
.dek-size-slider__row { margin-bottom: 18px; }
.dek-size-slider__row:last-child { margin-bottom: 6px; }
.dek-size-slider__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; color: var(--dk-muted); margin-bottom: 8px;
}
.dek-size-slider__val { color: var(--dk-olive-deep); font-weight: 600; font-size: 0.85rem; }
.dek-size-slider__track { position: relative; height: 22px; }
.dek-size-slider__track::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 3px;
  transform: translateY(-50%); background: var(--dk-border); border-radius: 3px;
}
.dek-size-slider__track input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 0; left: 0; width: 100%; height: 22px;
  margin: 0; background: none; pointer-events: none;
}
.dek-size-slider__track input[type="range"]:focus { outline: none; }
.dek-size-slider__track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--dk-olive-deep); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.dek-size-slider__track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dk-olive-deep); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.dek-size-slider__track input[type="range"]::-moz-range-track { background: none; }

/* --- Drzewo kategorii: scroll na liście KATEGORIE (pełny filar = długie wszędzie) --- */
.dek-cattree > .dek-cattree__section:not(.dek-cattree__section--landing) > .collapse > .dek-cattree__list {
  max-height: 20rem;           /* ~12 wierszy, reszta przewijana */
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Sekcje landingowe (Pomieszczenie/Styl/Kolor) — krótkie listy linków, BEZ scrolla */
.dek-cattree__section--landing .dek-cattree__list {
  max-height: none;
  overflow: visible;
}
/* Kolory — same kolorowe kółka w rzędzie, bez tekstowych etykiet (nazwa w title/hover) */
.dek-cattree__section--colors .dek-cattree__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0.3rem 2px 0.6rem;
}
.dek-cattree__section--colors .dek-cattree__item { line-height: 1; }
.dek-cattree__section--colors .dek-cattree__link {
  padding: 0;
  font-size: 0;                 /* chowa tekst — zostaje samo kółko */
  line-height: 0;
}
.dek-cattree__section--colors .dek-color-swatch {
  width: 26px; height: 26px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.dek-cattree__section--colors .dek-cattree__link:hover .dek-color-swatch {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(86,128,47,.4);
}
.dek-cattree__search {
  width: 100%;
  box-sizing: border-box;
  margin: 0.1rem 0 0.55rem;
  padding: 7px 10px;
  border: 1px solid #d8d2c8;
  border-radius: 6px;
  font: inherit;
  font-size: 0.82rem;
  background: #fff;
}
.dek-cattree__search:focus {
  outline: none;
  border-color: var(--dk-olive-deep);
  box-shadow: 0 0 0 3px rgba(86, 128, 47, .15);
}
.dek-cattree__search::-webkit-search-cancel-button { cursor: pointer; }
.dek-cattree__empty { font-size: 0.8rem; color: var(--dk-muted); padding: 4px 2px; display: none; }

/* przycisk "Zastosuj filtry" (jeśli zostaje — patrz WDROZENIE: zalecane usunięcie) */
.dek-filters__apply-btn {
  display: inline-block;
  background: var(--dk-olive-deep);
  color: var(--dk-white);
  border-radius: var(--dk-radius-sm);
  padding: 9px 16px;
  font-weight: 500;
  text-decoration: none;
}
.dek-filters__apply-btn:hover { background: var(--dk-olive-hover); color: var(--dk-white); }

/* aktywne filtry (chipy) */
#js-active-search-filters .js-search-filters-clear-all,
#js-active-search-filters a {
  color: var(--dk-olive-deep);
}

/* --- Drzewo kategorii ------------------------------------- */
.dek-cattree__toggle { color: var(--dk-ink); font-weight: 500; }
.dek-cattree__link { color: var(--dk-ink); text-decoration: none; }
.dek-cattree__link:hover { color: var(--dk-orange); }
.dek-cattree__item--current > .dek-cattree__link { color: var(--dk-olive-deep); font-weight: 500; }

/* --- Pasek sortowania / liczba ---------------------------- */
.products__count { color: var(--dk-muted); }
/* .btn-outline-primary / outline-tertiary przemapowane w sekcji PRZYCISKI */

/* --- Opis SEO (struktura + paleta) ------------------------ */
.category__main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 991px) {
  .category__main-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.category__additional-description-wrapper {
  position: relative;
  background: var(--dk-bg-subtle);
  border: 1px solid #ece5da;
  border-radius: var(--dk-radius-md);
  padding: 1.5rem;
}
.category__additional-description h2 {
  font-family: var(--dk-font-serif);
  color: var(--dk-ink);
}
.category__additional-description a { color: var(--dk-olive-deep); }
.category__additional-description a:hover { color: var(--dk-orange); }
.category__additional-description.collapsed {
  max-height: 250px;
  overflow: hidden;
  position: relative;
}
.category__additional-description.expanded { max-height: none; }
.category__additional-description.collapsed .seo-text-fade {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
  pointer-events: none;
  /* fade gaśnie do NOWEGO tła (krem), nie do #fafafa */
  background: linear-gradient(to bottom, rgba(249,247,246,0) 0%, var(--dk-bg-subtle) 100%);
}
/* dedup: ukryj zdublowany FAQ (dl) wewnątrz opisu — zostaje akordeon niżej */
#category-seo-text .faq-section { display: none; }

.category__additional-description-btn-container {
  display: flex; justify-content: center; margin-top: 1.5rem;
}
.seo-read-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.6rem 1.8rem;
  font-weight: 500; font-size: 0.9rem;
  background: transparent;
  border: 1.5px solid var(--dk-olive-deep);
  color: var(--dk-olive-deep);
  border-radius: 50rem;
  cursor: pointer;
  transition: var(--dk-transition);
}
.seo-read-more-btn:hover {
  background: var(--dk-olive-deep);
  border-color: var(--dk-olive-deep);
  color: var(--dk-white);
}
.seo-read-more-btn .icon-chevron { transition: transform 0.3s ease; }
.seo-read-more-btn.active .icon-chevron { transform: rotate(180deg); }

/* --- FAQ (struktura + paleta) ----------------------------- */
.faq-section-title,
.category__faq-section > h2 {
  font-family: var(--dk-font-serif);
  font-size: 1.6rem;
  color: var(--dk-ink);
  border-bottom: 2px solid var(--dk-olive-deep);
  padding-bottom: 0.5rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.faq-item {
  background: var(--dk-white);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-sm);
  margin-bottom: 0.8rem;
  overflow: hidden;
  transition: border-color 0.3s;
}
.faq-item:hover { border-color: var(--dk-olive-deep); }
.faq-question-btn {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.5rem;
  background: none; border: none; text-align: left;
  font-size: 1.05rem; font-weight: 500;
  color: var(--dk-ink);
  cursor: pointer;
  transition: background-color 0.2s;
}
.faq-question-btn:hover { background: var(--dk-bg-subtle); }
.faq-answer-pane { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-answer-content {
  padding: 0 1.5rem 1.2rem 1.5rem;
  font-size: 0.95rem; line-height: 1.6;
  color: var(--dk-muted);
}
.faq-icon { font-size: 1.2rem; font-weight: 400; color: var(--dk-olive-deep); transition: transform 0.3s; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* --- Internal linking grid (jeśli używany) ---------------- */
.linking-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.linking-col { background: var(--dk-white); border: 1px solid var(--dk-border); padding: 1.2rem; border-radius: var(--dk-radius-sm); }
.linking-col-title {
  display: block; font-size: 0.95rem; font-weight: 500; text-transform: uppercase;
  color: var(--dk-muted); letter-spacing: 0.05em; margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--dk-border); padding-bottom: 0.4rem;
}
.linking-list { list-style: none; padding-left: 0; margin: 0; }
.linking-list li { margin-bottom: 0.5rem; }
.linking-list a { font-size: 0.92rem; color: var(--dk-ink); text-decoration: none; transition: color 0.2s, padding-left 0.2s; display: inline-block; }
.linking-list a:hover { color: var(--dk-orange); padding-left: 4px; }   /* było #007bff */
@media (max-width: 991px) { .linking-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 575px) { .linking-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ============================================================
   ===================  NAGŁÓWEK  =============================
   ============================================================ */

/* Hover linków: górny pasek, menu, mega-menu, menu mobilne */
.dekoran-header-top__links a:hover,
.dekoran-menu__list > .dekoran-menu__item > a:hover,
.dekoran-megamenu__list a:hover,
.dekoran-menu-mobile__list a:hover { color: var(--dk-orange); }

/* Tytuły grup w mega-menu */
.dekoran-megamenu__group-title { color: var(--dk-ink); font-weight: 500; }
.dekoran-megamenu__group-title:hover { color: var(--dk-orange); }

/* Badge koszyka -> głęboki pomarańcz + biały (kontrast OK na małym kółku) */
.dekoran-cart-badge,
.dekoran-cart-badge-mobile,
.dekoran-nav-cart__badge {
  background: #b85b0c;
  color: var(--dk-white);
}

/* Wyszukiwarka: lupa + fokus inputu na oliwce */
.dekoran-search-submit { color: var(--dk-ink); }
.dekoran-search-submit:hover { color: var(--dk-olive-deep); }
.dekoran-search-input:focus {
  border-color: var(--dk-olive-deep);
  box-shadow: 0 0 0 3px rgba(86,128,47,.15);
  outline: none;
}

/* Akcje (konto / ulubione / koszyk): hover */
.dekoran-action-btn:hover { color: var(--dk-orange); }

/* ============================================================
   ===================  STOPKA  ===============================
   ============================================================ */

/* Newsletter (ps_emailsubscription, hook displayFooterBefore) — ukryty na życzenie.
   Moduł nadal zainstalowany; by usunąć całkiem, odepnij go z hooka w BO. */
.ps-emailsubscription { display: none !important; }

/* Help banner — CTA "Skontaktuj się" jako drugorzędne -> oliwka.
   Zaokrąglenie + waga jak reszta przycisków marki (custom.css ma border-radius:0). */
.btn-dekoran-contact {
  background: var(--dk-olive-deep);
  border-color: var(--dk-olive-deep);
  color: var(--dk-white);
  border-radius: var(--dk-radius-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.btn-dekoran-contact:hover {
  background: var(--dk-olive-hover);
  border-color: var(--dk-olive-hover);
  color: var(--dk-white);
}

/* Stopka — ciemniejszy beż (było #F6F4F0) + logo mniejsze i mono */
.dekoran-footer,
.dekoran-bottom-bar { background-color: #e7dfd0; }
.dekoran-footer__logo-img {
  max-height: 34px;                          /* było 52px */
  /* logo w pełnym kolorze marki (bez mono) */
}
/* Kolumna brand: wyrównanie do lewej (logo, tekst, social) */
.dekoran-footer__col--brand { text-align: left; }
.dekoran-footer__logo { align-items: flex-start; }   /* flex-column z custom.css → logo do lewej */
.dekoran-footer__col--brand .dekoran-footer__socials { justify-content: flex-start; }

/* Kolumny stopki */
.dekoran-footer__title { color: var(--dk-ink); }
.dekoran-footer__links a { color: var(--dk-muted); text-decoration: none; }
.dekoran-footer__links a:hover { color: var(--dk-orange); }
.dekoran-contact-link { color: var(--dk-ink); text-decoration: none; }
.dekoran-contact-link:hover { color: var(--dk-orange); }
.dekoran-footer__socials a:hover { color: var(--dk-orange); }

/* Tekst SEO stopki: linki oliwkowe, hover pomarańcz */
.dekoran-footer__seo-text a { color: var(--dk-olive-deep); }
.dekoran-footer__seo-text a:hover { color: var(--dk-orange); }

/* Dolny pasek / copyright */
.dekoran-copyright-text a { color: var(--dk-muted); text-decoration: none; }
.dekoran-copyright-text a:hover { color: var(--dk-orange); }

/* Powrót na górę -> oliwka */
.dekoran-back-to-top {
  background: var(--dk-olive-deep);
  color: var(--dk-white);
}
.dekoran-back-to-top:hover { background: var(--dk-olive-hover); }

/* NIE RUSZAMY: .dekoran-payment-icon / .dekoran-delivery-icon — kolory marek płatności/dostawy. */

/* ============================================================
   ============  DOPASOWANIE DO MOCKUPU (typografia + kontrolki)  ============
   ============================================================ */

/* Fonty marki — wymuszenie nad fallbackami motywu */
body, .dek-page, input, select, textarea, button, .dek-variant__select { font-family: var(--dk-font-sans); }
h1, h2, h3, .h1, .h2, .h3,
.dek-product__name, .section-title, .cat-header__title { font-family: var(--dk-font-serif); }
h1, h2, h3 { font-weight: 500; }

/* Kategoria — H1 do skali marki (custom.css dawało clamp do 3.2rem/51px + uppercase). */
.cat-header__title {
  font-size: clamp(1.5rem, 2.4vw, 1.85rem) !important;  /* ~24–30px */
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px) {
  .cat-header__title { font-size: clamp(1.4rem, 5vw, 1.7rem) !important; }
}

/* Eyebrow/kicker kategorii — delikatna etykieta NAD H1: wersaliki, sans, rozstrzelona, oliwka. */
.cat-header__eyebrow {
  font-family: var(--dk-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dk-olive);
  line-height: 1.3;
  margin: 0 0 6px;
}

/* Karta produktu — typografia wg mockupu (h1 ~24px/500, cena ~28px/600) */
.dek-product__name { font-size: clamp(1.4rem, 2.2vw, 1.6rem) !important; font-weight: 500 !important; line-height: 1.2; }
.dek-product__price .product__price,
.dek-product__price .current-price { font-size: 1.8rem; font-weight: 600; color: var(--dk-ink); }
.dek-product__price .regular-price,
.dek-product__price .product__regular-price { color: var(--dk-muted); }

/* Etykiety wariantów — lżejsze (mockup .pd-field label) */
.dek-variant__label { font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; }

/* Listy rozwijane — własny CHEVRON + zaokrąglenie 6px + fokus oliwkowy */
.dek-variant__select,
.dek-variants select.form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: 1px solid #d8d2c8 !important;
  border-radius: var(--dk-radius-sm) !important;
  padding: 0.7rem 2.4rem 0.7rem 0.85rem !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2321242c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
.dek-variant__select:focus,
.dek-variants select.form-select:focus {
  border-color: var(--dk-olive-deep) !important;
  box-shadow: 0 0 0 3px rgba(86,128,47,.15) !important;
  outline: none !important;
}

/* Akordeon — nagłówki wg mockupu (waga 500) */
.dek-accordion-btn { font-weight: 500; }

/* USP — drobny, stonowany tekst */
.dek-product__usp-item { font-size: 0.82rem; }

/* ── Zwężenie odstępów w buy-boxie: SKU → cena → „Wybierz materiał" ── */
.dek-product__sku { margin: 0 0 0.1rem !important; }
.dek-product__reviews { margin: 0.1rem 0 !important; }
.dek-product__reviews:empty { display: none !important; }
.dek-product__price { margin: 0.15rem 0 0.1rem !important; }
.dek-product__info .product__actions { margin-top: 0.4rem !important; }
.dek-variants { gap: 0.8rem !important; }
.dek-variants__grid { gap: 0.65rem 0.9rem !important; }
.dek-variant__label { margin-bottom: 0.35rem !important; }

/* ── Zerowanie margin-block-end elementów produktu (desktop) ──── */
@media (min-width: 1200px) {
  .page-product .product__actions,
  .page-product .product__add-to-cart-container,
  .page-product .product__availability,
  .page-product .product__customization,
  .page-product .product__description-short,
  .page-product .product__discounts,
  .page-product .product__manufacturer,
  .page-product .product__minimal-quantity,
  .page-product .product__name,
  .page-product .product__pack,
  .page-product .product__prices,
  .page-product .product__variants {
    margin-block-end: 0;
  }
}

/* ── Zakładki produktu (taby poziome — karty w rzędzie) ──────── */
.dek-product__tabs { margin-top: 28px; }
.dek-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  padding: 0; margin: 0 0 18px; border: none;
}
.dek-tabs__item { margin: 0; }
.dek-tab {
  border: 1px solid var(--dk-border); background: #fff; color: var(--dk-ink);
  border-radius: var(--dk-radius-sm); padding: 9px 16px; font: inherit;
  font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: var(--dk-transition);
}
.dek-tab:hover { border-color: var(--dk-olive-deep); color: var(--dk-olive-deep); }
.dek-tab.active {
  background: var(--dk-bg-warm); border-color: var(--dk-olive-deep); color: var(--dk-ink);
}
.dek-tabs__content { line-height: 1.7; color: var(--dk-ink); padding: 2px; }

/* ── FAQ w opisie — wskaźnik zwijania ─────────────────────────── */
.product-faq .dek-faq-q { cursor: pointer; }
.product-faq .dek-faq-toggle { float: right; color: var(--dk-olive-deep); font-weight: 700; margin-left: 10px; }
.product-faq .faq-item { cursor: default; padding: 1rem 1.25rem; }
.product-faq .faq-item > p { margin: 0; }
.product-faq .faq-item .dek-faq-q + p { margin-top: 0.6rem !important; }
/* „Udostępnij" przeniesione pod FAQ (dekMoveShare) ląduje w .rich-text opisu,
   który stylizuje listy punktorami — zdejmij je z listy social. */
.rich-text .ps-sharebuttons__list,
.ps-sharebuttons__list { list-style: none; padding-left: 0; margin-left: 0; }

/* ===================== MEGA-MENU (dek-mega) — wg Layout/menu-glowne ===================== */
.dekoran-navigation-bar { position: relative; }          /* kontekst dla pełnoszerokościowego panelu */
.dekoran-menu__item.dek-nav__item--mega { position: static; }
.dek-caret { font-size: 1.05em; opacity: 0.85; margin-left: 4px; line-height: 1; transition: transform 0.18s; display: inline-block; }
.dek-nav__item--mega:hover > a .dek-caret,
.dek-nav__item--mega:focus-within > a .dek-caret { transform: rotate(180deg); }

.dek-mega {
  position: absolute; top: 100%; left: 50%;
  width: min(1180px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--dekoran-border);
  border-top: 2px solid var(--dekoran-gold);
  border-radius: 0 0 14px 14px; box-shadow: 0 24px 52px rgba(33,36,44,.14);
  opacity: 0; visibility: hidden; z-index: 1000;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dek-mega::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }  /* mostek hover */
.dek-nav__item--mega:hover .dek-mega,
.dek-nav__item--mega:focus-within .dek-mega {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* reset dziedziczonych styli linków top-menu wewnątrz panelu */
.dek-mega a { text-transform: none; letter-spacing: 0; font-weight: 400; display: block; padding: 0; }
.dek-mega a::after { display: none !important; }

.dek-mega__in {
  padding: 22px; display: grid; gap: 26px;
  grid-template-columns: minmax(0,1fr) 300px;
  grid-template-areas: "content aside" "strip strip";
}
.dek-mega__in--rail { grid-template-columns: 240px minmax(0,1fr); grid-template-areas: "rail content" "strip strip"; }
.dek-mega__content { grid-area: content; min-width: 0; }
.dek-mega__aside   { grid-area: aside; display: flex; flex-direction: column; gap: 11px; }
.dek-mega__rail    { grid-area: rail; }
.dek-mega__strip   { grid-area: strip; }

.dek-mega__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--dekoran-gold); margin: 0 0 12px; }
.dek-mega__themes { column-count: 3; column-gap: 16px; max-width: 600px; }
.dek-mega__themes a { color: #6a707c; font-size: 15.5px; padding: 4px 0 !important; break-inside: avoid; }
.dek-mega__themes a:hover { color: var(--dekoran-gold); }
.dek-mega__aside-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #6a707c; margin: 0; }

/* karty obrazkowe */
.dek-mega__card { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; text-decoration: none; }
.dek-mega__card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .45s; }
.dek-mega__card-img--ph { background: linear-gradient(135deg,#c4b9a4,#9a8d76); }
.dek-mega__card:hover .dek-mega__card-img { transform: scale(1.06); }
.dek-mega__card::after { content:''; position:absolute; inset:0;
  background: linear-gradient(180deg,rgba(33,36,44,0) 28%,rgba(33,36,44,.82) 100%),
              linear-gradient(75deg,rgba(33,36,44,.66) 0%,rgba(33,36,44,.14) 42%,rgba(33,36,44,0) 64%); }
.dek-mega__cap { position: absolute; left: 12px; bottom: 12px; z-index: 1; color: #fff;
  background: rgba(26,28,36,.82); padding: 7px 12px 8px; border-radius: 9px; }
.dek-mega__cap b { display: block; font-family: var(--dekoran-font-serif,'Playfair Display',serif); font-size: 15px; font-weight: 500; }
.dek-mega__cap span { font-size: 12px; opacity: .92; }
.dek-mega__card--cta { display: flex; align-items: center; justify-content: center; text-align: center;
  background: #f5efe6; border: 1px dashed #d3c7b3; color: #56802f; font-weight: 500; font-size: 13px; aspect-ratio: 16/10; }
.dek-mega__card--cta::after { display: none; }

/* szyna pokoje/style */
.dek-mega__rooms { list-style: none; margin: 0 0 12px; padding: 0; }
.dek-mega__room { display: flex; align-items: center; gap: 8px; padding: 9px 10px !important; border-radius: 8px; color: var(--dekoran-text-dark); font-size: 14px; }
.dek-mega__room .dek-chev { margin-left: auto; color: #6a707c; transition: transform .15s; }
.dek-mega__room:hover { background: #f5efe6; color: var(--dekoran-gold); }
.dek-mega__room:hover .dek-chev { transform: translateX(3px); }
.dek-mega__all { display: inline-block; font-size: 13px; font-weight: 500; color: #56802f; }
.dek-mega__all:hover { color: var(--dekoran-gold); }
.dek-mega__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.dek-mega__also { grid-column: 1/-1; font-size: 13px; color: #6a707c; margin: 12px 0 0; }
.dek-mega__also a { display: inline; color: #56802f; }
.dek-mega__also a:hover { color: var(--dekoran-gold); }

/* pasek USP */
.dek-mega__strip { border-top: 1px solid var(--dekoran-border); padding-top: 16px; display: flex; gap: 28px; flex-wrap: wrap; }
.dek-mega__feat { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.dek-mega__feat > svg { color: #56802f; flex-shrink: 0; }
.dek-mega__feat b { display: block; color: var(--dekoran-text-dark); font-weight: 500; }
.dek-mega__feat small { color: #6a707c; }

@media (max-width: 1100px) { .dek-mega__themes { column-count: 2; } .dek-mega__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 991.98px) { .dek-mega { display: none; } }   /* desktop-only; mobile = offcanvas */

/* === Header kompaktowy + menu do lewej (override custom.css, wg Layout/menu-glowne) === */
.dekoran-header-main { padding: 0.8rem 0; }
.dekoran-header-main__row { gap: 1.4rem; }
.dekoran-header-main__logo img { max-height: 38px; }
.dekoran-search-input { border-radius: 8px; padding: 0.56rem 3rem 0.56rem 1rem; background: #fff; font-size: 0.9rem; }
.dekoran-search-submit { background: transparent; color: var(--dekoran-text-muted); width: 34px; height: 34px; right: 5px; border-radius: 6px; }
.dekoran-search-submit:hover { background: transparent; color: var(--dekoran-gold); }
.dekoran-search-submit svg { width: 20px; height: 20px; stroke-width: 2px; }
.dekoran-header-main__actions { gap: 1.5rem; }
.dekoran-action-btn__icon { width: auto; height: auto; background: transparent; border-radius: 0; margin-bottom: 0.18rem; }
.dekoran-action-btn__icon svg { width: 23px; height: 23px; }
.dekoran-action-btn:hover .dekoran-action-btn__icon { background: transparent; color: var(--dekoran-gold); transform: none; }
.dekoran-action-btn__label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; }
.dekoran-cart-badge { top: -5px; right: -7px; border-width: 1px; }
/* Menu główne do LEWEJ */
.dekoran-navigation-wrapper { justify-content: flex-start; }
.dekoran-menu__list { justify-content: flex-start; }

/* Sekcja KOLORY w mega katalogowym (landingi encji) */
.dek-mega__colors { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dekoran-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 600px; }
.dek-mega__colors-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--dekoran-gold); margin-right: 2px; }
.dek-mega__swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6a707c; text-decoration: none; }
.dek-mega__swatch > span { width: 16px; height: 16px; border-radius: 50%; background: var(--sw,#ccc);
  border: 1px solid rgba(0,0,0,.18); flex-shrink: 0; }
.dek-mega__swatch:hover { color: var(--dekoran-gold); }

/* --- Mega: fix swatchy + kompaktacja (sparse jak Plakaty) --- */
.dek-mega__colors .dek-mega__swatch { display: inline-flex; align-items: center; gap: 7px; }
.dek-mega__swatch > span { display: inline-block; }
.dek-mega--catalog .dek-mega__in { padding: 18px 22px; grid-template-columns: minmax(0,1fr) 264px; gap: 22px; }
.dek-mega--catalog .dek-mega__aside .dek-mega__card { aspect-ratio: 16 / 9; }
.dek-mega--catalog .dek-mega__aside { gap: 10px; }
.dek-mega__themes { max-width: 520px; column-gap: 14px; }
.dek-mega__colors { max-width: 520px; margin-top: 14px; padding-top: 12px; }

/* Lupa wyszukiwarki: szara, bez pomarańczowego tła (bije button[type=submit]) */
.dekoran-header-main .dekoran-search-submit,
.dekoran-header-main .dekoran-search-submit:hover {
  background: transparent; box-shadow: none; color: #9aa0a6;
}
.dekoran-header-main .dekoran-search-submit:hover { color: #6a707c; }

/* ===================== WISHLIST GOŚCIA (localStorage) ===================== */
.product-miniature__top { position: relative; }
.dek-fav-btn { position: absolute; top: 8px; right: 8px; z-index: 5; width: 36px; height: 36px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #6a707c;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: color .18s, transform .18s, background .18s; }
.dek-fav-btn svg { width: 19px; height: 19px; transition: fill .18s; }
.dek-fav-btn:hover { color: var(--dk-orange); transform: scale(1.08); }
.dek-fav-btn.is-fav { color: #e0457a; }
.dek-fav-btn.is-fav svg { fill: #e0457a; }

.dek-wish-offcanvas { width: 380px; max-width: 90vw; }
.dek-wish__list { display: flex; flex-direction: column; gap: 12px; }
.dek-wish__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--dk-border); }
.dek-wish__img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; background:#f0ece6; }
.dek-wish__name { font-size: 14px; color: var(--dk-ink); text-decoration: none; display: block; line-height: 1.3; }
.dek-wish__name:hover { color: var(--dk-orange); }
.dek-wish__price { font-weight: 600; color: var(--dk-ink); margin-top: 4px; font-size: 14px; }
.dek-wish__remove { border: none; background: none; font-size: 24px; line-height: 1; color: var(--dk-muted); cursor: pointer; padding: 0 4px; align-self: start; }
.dek-wish__remove:hover { color: var(--dk-danger); }
.dek-wish__empty { text-align: center; color: var(--dk-muted); padding: 44px 12px; font-size: 14px; line-height: 1.7; }
.dek-wish__empty span { font-size: 13px; opacity: .85; }

/* Panel wishlist (samodzielny offcanvas, bez zależności od Bootstrap JS) */
.dek-wish-offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw;
  background: #fff; z-index: 1500; display: flex; flex-direction: column; visibility: hidden;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.18); }
.dek-wish-offcanvas.show { transform: none; visibility: visible; }
.dek-wish-offcanvas .offcanvas-header { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--dk-border); flex-shrink: 0; }
.dek-wish-offcanvas .offcanvas-title { font-family: var(--dk-font-serif); font-size: 18px; margin: 0; color: var(--dk-ink); }
.dek-wish-offcanvas .offcanvas-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.dek-wish__close { border: none; background: none; font-size: 28px; line-height: 1; color: var(--dk-muted); cursor: pointer; padding: 0 4px; }
.dek-wish__close:hover { color: var(--dk-ink); }
.dek-wish-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1490; animation: dekWishFade .2s ease; }
@keyframes dekWishFade { from { opacity: 0 } to { opacity: 1 } }
body.dek-wish-open { overflow: hidden; }

/* Sticky: grupa ulubione+koszyk po prawej */
.dekoran-nav-right { display: flex; align-items: center; gap: 1.1rem; }
.dekoran-nav-fav { position: relative; }

/* Mega katalogowe: wypełnij puste pole — POLECANE rozciągnięte na wysokość, kolory do dołu */
.dek-mega--catalog .dek-mega__in { grid-template-columns: minmax(0,1fr) 320px; align-items: stretch; }
.dek-mega--catalog .dek-mega__content { display: flex; flex-direction: column; }
.dek-mega--catalog .dek-mega__colors { margin-top: auto; }
.dek-mega--catalog .dek-mega__aside { gap: 12px; }
.dek-mega--catalog .dek-mega__aside .dek-mega__card { aspect-ratio: auto; flex: 1 1 0; min-height: 150px; }

/* Mega katalogowe: szerokość = dopasowana do treści (koniec rezerwacji 1180px) → POLECANE tuż obok motywów */
.dek-mega--catalog { width: max-content; max-width: calc(100vw - 32px); }
.dek-mega--catalog .dek-mega__in { grid-template-columns: 480px 300px; }
.dek-mega--catalog .dek-mega__themes,
.dek-mega--catalog .dek-mega__colors { max-width: none; }

/* Mega katalogowe: zakotwiczone POD najechaną pozycją (nie wyśrodkowane) */
.dek-nav__item--catalog { position: relative; }
.dek-mega--catalog { left: 0; transform: translateY(-6px); }
.dek-nav__item--catalog:hover .dek-mega--catalog,
.dek-nav__item--catalog:focus-within .dek-mega--catalog { transform: translateY(0); }

/* override: katalogowe li musi być relative (bije .dekoran-menu__item.dek-nav__item--mega{static}) */
.dekoran-menu__item.dek-nav__item--catalog { position: relative; }

/* zwężenie panelu katalogowego, by najdalsza pozycja (Plakaty) mieściła się w viewport */
.dek-mega--catalog .dek-mega__in { grid-template-columns: 460px 280px; }

/* Catalog mega: USP w czystej siatce 2×2 (panel węższy) */
.dek-mega--catalog .dek-mega__strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }

/* ── Podkategorie (hub→spoke) — pigułki nawigacyjne na stronie kategorii ── */
.cat-header__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}
.cat-subcat-pill {
  display: inline-block;
  padding: 7px 15px;
  font-family: var(--dk-font-sans);
  font-size: .9rem;
  line-height: 1.2;
  color: var(--dk-ink);
  background: var(--dk-bg-subtle);
  border: 1px solid var(--dk-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.cat-subcat-pill:hover,
.cat-subcat-pill:focus {
  background: var(--dk-olive);
  border-color: var(--dk-olive);
  color: #fff;
}

/* ── dek-cattree: zagnieżdżone podkategorie (KATEGORIE = pełne drzewo filaru) ── */
.dek-cattree__list .dek-cattree__list {
  padding-left: 12px;
  margin-top: 2px;
  border-left: 1px solid var(--dk-border);
}
.dek-cattree__item--parent > .dek-cattree__link {
  font-weight: 600;
}
.dek-cattree__list .dek-cattree__list .dek-cattree__link {
  font-weight: 400;
  font-size: .92em;
  opacity: .9;
}

/* ═══ BLOG / PORADNIK ═══════════════════════════════════════════════ */
/* Układ artykułu: lewy sidebar produktów + treść (pełna szerokość strony) */
.dek-article-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 44px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 0 48px;
  align-items: start;
}
.dek-article { min-width: 0; }
/* Desktop: sidebar przyklejony (sticky) — podąża, nie zostawia pustki gdy produkty się skończą. */
@media (min-width: 992px) {
  .dek-article-aside { position: sticky; top: calc(var(--dk-header-h) + 16px); align-self: start; }
}
@media (max-width: 991px) {
  .dek-article-layout { grid-template-columns: 1fr; gap: 28px; }
  .dek-article { order: 1; }
  .dek-article-aside { order: 2; }
  /* Mobile: tylko 3 produkty pod artykułem */
  .dek-aside-prod:nth-of-type(n+4) { display: none; }
}
/* Sidebar — powiązane produkty (stałe) */
.dek-article-aside__sticky { /* wrapper — sticky przeniesiony na .dek-article-aside (desktop) */ }
.dek-article-aside__title {
  font-family: var(--dk-font-sans); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--dk-muted);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--dk-border);
}
/* Karta produktu w sidebarze — pionowa: obrazek pełnej szerokości, tytuł pod spodem */
.dek-aside-prod {
  display: block; text-decoration: none; color: inherit;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--dk-border);
}
.dek-aside-prod:last-child { border-bottom: none; margin-bottom: 0; }
.dek-aside-prod__thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 9px;
  border-radius: 10px; overflow: hidden; background: var(--dk-bg-warm);
}
.dek-aside-prod__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dek-aside-prod:hover .dek-aside-prod__thumb img { transform: scale(1.04); }
.dek-aside-prod__name {
  display: block; font-size: .9rem; line-height: 1.4; color: var(--dk-ink);
}
.dek-aside-prod:hover .dek-aside-prod__name { color: var(--dk-orange); }
.dek-article__breadcrumb { font-size: .85rem; margin-bottom: 14px; }
.dek-article__hero {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 14px; margin-bottom: 28px; display: block;
}
.dek-article__body { font-size: 1.05rem; line-height: 1.75; color: var(--dk-ink); }
.dek-article__body h1 {
  font-family: var(--dk-font-serif); font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.15; margin: 0 0 18px;
}
.dek-article__body h2 {
  font-family: var(--dk-font-serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 36px 0 12px; padding-top: 8px;
}
.dek-article__body h3 { font-size: 1.2rem; margin: 24px 0 8px; }
.dek-article__body p { margin: 0 0 16px; }
.dek-article__body ul, .dek-article__body ol { margin: 0 0 16px; padding-left: 22px; }
.dek-article__body li { margin-bottom: 6px; }
.dek-article__body a { color: var(--dk-olive-deep); text-decoration: underline; }

/* Hub bloga */
.dek-blog { max-width: 1100px; margin: 0 auto; padding: 8px 0 48px; }
.dek-blog__title { font-family: var(--dk-font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 12px; }
.dek-blog__intro { color: var(--dk-muted); max-width: 760px; margin-bottom: 28px; }
.dek-blog__sections { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.dek-blog__section-card {
  padding: 10px 18px; border: 1px solid var(--dk-border); border-radius: 999px;
  font-weight: 600; color: var(--dk-ink); text-decoration: none; background: var(--dk-bg-subtle);
  transition: background .15s, color .15s, border-color .15s;
}
.dek-blog__section-card:hover { background: var(--dk-olive); border-color: var(--dk-olive); color: #fff; }

/* Karty artykułów */
.dek-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.dek-article-card { border: 1px solid var(--dk-border); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.dek-article-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-3px); }
.dek-article-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.dek-article-card__thumb { display: block; aspect-ratio: 16/9; background: var(--dk-bg-warm); overflow: hidden; }
.dek-article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dek-article-card__thumb.is-empty { background: linear-gradient(135deg, var(--dk-bg-warm), var(--dk-bg-subtle)); }
.dek-article-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.dek-article-card__title { font-family: var(--dk-font-serif); font-size: 1.12rem; line-height: 1.3; color: var(--dk-ink); }
.dek-article-card__excerpt { font-size: .92rem; color: var(--dk-muted); line-height: 1.5; }

/* Blok „Powiązany poradnik" na stronie kategorii (kategoria -> artykuł) */
.dek-cat-guide { display:flex; align-items:center; gap:10px; margin:0 0 20px; padding:11px 16px; background:var(--dk-bg-warm); border-radius:10px; font-size:.95rem; flex-wrap:wrap; }
.dek-cat-guide__label { font-weight:600; color:var(--dk-olive-deep); white-space:nowrap; }
.dek-cat-guide__link { color:var(--dk-ink); text-decoration:underline; }
.dek-cat-guide__link:hover { color:var(--dk-orange); }
/* CTA w artykule (interlinking artykuł -> sklep) */
.dek-article__cta { margin:34px 0 0; padding:16px 20px; background:var(--dk-bg-warm); border-radius:12px; border-left:3px solid var(--dk-olive); }
.dek-article__cta a { color:var(--dk-olive-deep); font-weight:600; }

/* Hub bloga — grupy działów z artykułami */
.dek-blog__group { margin-bottom: 46px; scroll-margin-top: 80px; }
.dek-blog__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--dk-border); }
.dek-blog__group-title { font-family: var(--dk-font-serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 0; }
.dek-blog__group-all { font-size: .9rem; white-space: nowrap; color: var(--dk-olive-deep); text-decoration: none; font-weight: 600; }
.dek-blog__group-all:hover { color: var(--dk-orange); }

/* Klauzula RODO w formularzu kontaktu */
.dek-rodo__info { font-size: .8rem; color: var(--dk-muted); line-height: 1.5; margin-top: 8px; }
.dek-rodo .form-check-label { font-size: .9rem; }

/* Strony informacyjne/prawne CMS (Regulamin, Polityka, Dostawa…) — czytelny pełny układ */
.cms-info-page{max-width:900px;margin:0 auto;padding:1.5rem 1rem 3.5rem;line-height:1.7}
.cms-info-page h1{font-size:2rem;margin:.2em 0 .8em}
.cms-info-page h2{font-size:1.25rem;margin:1.8em 0 .5em;color:var(--dk-olive-deep)}
.cms-info-page h3{font-size:1.05rem;margin:1.2em 0 .4em}
.cms-info-page p{margin:.6em 0}
.cms-info-page ul,.cms-info-page ol{padding-left:1.4em;margin:.4em 0}
.cms-info-page li{margin:.3em 0}
.cms-info-page table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95em}
.cms-info-page th,.cms-info-page td{border:1px solid #e3ddd2;padding:.5em .7em;text-align:left;vertical-align:top}
.cms-info-page th{background:#faf7f2}
.cms-info-page a{color:var(--dk-orange);word-break:break-word}
.cms-info-page hr{border:0;border-top:1px solid #e3ddd2;margin:2.2em 0}
.cms-info-page blockquote{border-left:3px solid var(--dk-orange);margin:1em 0;padding:.5em 1em;background:#faf7f2;font-style:italic}

/* Menu mobilne — akordeon z podkategoriami */
.dek-mmenu{display:flex;flex-direction:column}
.dek-mmenu__group{border-bottom:1px solid #eee}
.dek-mmenu__toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:14px 2px;font-size:15px;font-weight:600;color:var(--dk-ink);text-align:left;cursor:pointer}
.dek-mmenu__chev{transition:transform .2s;color:var(--dk-orange);font-size:12px}
.dek-mmenu__toggle:not(.collapsed) .dek-mmenu__chev{transform:rotate(180deg)}
.dek-mmenu__all{display:block;padding:8px 2px 8px 14px;font-size:13px;font-weight:600;color:var(--dk-orange);text-decoration:none}
.dek-mmenu__sub{display:block;padding:9px 2px 9px 14px;font-size:14px;color:#555;text-decoration:none}
.dek-mmenu__sub:hover{color:var(--dk-orange)}
.dek-mmenu__link{display:block;padding:14px 2px;font-size:15px;font-weight:600;color:var(--dk-ink);text-decoration:none;border-bottom:1px solid #eee}
.dekoran-mobile-menu-offcanvas .offcanvas-title img{display:block}

/* Mobile: mniejsze logo w nagłówku (−30%), by zmieściły się ikony konto/ulubione/koszyk */
@media (max-width:767.98px){
  .dekoran-header-main__logo img{max-height:27px}
  .dekoran-mobile-menu-offcanvas .offcanvas-title img{height:26px}
}

/* Nagłówek mobilny: logo (lewo) | ikony + hamburger zgrupowane po prawej (nie nachodzą na logo) */
@media (max-width:767.98px){
  .dekoran-header-main__mobile-controls{margin-left:auto;display:flex;align-items:center;gap:16px}
  .dek-mobile-icons{display:flex;align-items:center;gap:16px}
}

/* Karta produktu na listingu: pełniejsza nazwa (desktop 3 wiersze; mobile 4) */
.product-miniature__title{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
  height:auto !important;
  min-height:4.05rem !important;
  overflow:hidden !important;
}
@media (max-width:767.98px){
  .product-miniature__title{ -webkit-line-clamp:4 !important; line-clamp:4 !important; min-height:5.4rem !important; }
}

/* Stopka na mobile: kolumny linków 2-up (PRODUKTY|INSPIRACJE, STYLE|POMOC);
   brand + kontakt na całą szerokość i wyśrodkowane */
@media (max-width:767.98px){
  .dekoran-footer__links{list-style:none;padding-left:0}
  .dekoran-footer__col:not(.dekoran-footer__col--brand):not(.dekoran-footer__col--contact){
    flex:0 0 50%;max-width:50%;text-align:left;margin-bottom:1.25rem;
  }
  .dekoran-footer__col--brand,
  .dekoran-footer__col--contact{flex:0 0 100%;max-width:100%;text-align:center}
  .dekoran-footer__col--brand .dekoran-footer__socials,
  .dekoran-footer__col--contact .dekoran-footer__contact-item,
  .dekoran-footer__col--contact .dekoran-footer__contact-content{justify-content:center}
  .dekoran-footer__col--brand .dekoran-footer__brand-text{margin-left:auto;margin-right:auto}
}

/* Toast „Dodano do koszyka" (AJAX, motyw ma własny koszyk bez blockcart) */
.dek-cart-toast{position:fixed;top:90px;right:20px;z-index:3000;display:flex;align-items:center;gap:10px;background:#fff;border-left:4px solid var(--dk-olive,#56802f);box-shadow:0 10px 34px rgba(0,0,0,.16);border-radius:12px;padding:14px 18px;max-width:340px;transform:translateX(120%);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none}
.dek-cart-toast--show{transform:translateX(0);opacity:1;pointer-events:auto}
.dek-cart-toast svg{color:var(--dk-olive,#56802f);flex-shrink:0}
.dek-cart-toast__msg{font-weight:600;color:var(--dk-ink)}
.dek-cart-toast__link{margin-left:6px;color:var(--dk-orange);font-weight:600;text-decoration:none;white-space:nowrap}
@media(max-width:767.98px){.dek-cart-toast{top:auto;bottom:16px;right:12px;left:12px;max-width:none}}