/* =========================================================
   RELIVOO — Design System (makieta HTML/CSS)
   Paleta dopasowana do logo:
     - pomarańcz z wiewiórki → BRAND / CTA / akcenty
     - ciemny szary z napisu "relivoo" → tekst, nagłówki, footer
     - ciepłe kremowe tło → outletowy, przytulny klimat
   ========================================================= */

:root {
  /* Brand — pomarańcz z logo */
  --c-brand:        #ee8420;  /* orange (logo) */
  --c-brand-dark:   #d06a0e;  /* hover / darker */
  --c-brand-deep:   #a9540b;  /* deep for text on light */
  --c-brand-soft:   #fdecd6;  /* bardzo jasne tło */
  --c-brand-tint:   #fff6ea;  /* ledwo widoczny tint */

  /* Ink — ciemny szary z napisu "relivoo" */
  --c-ink:          #3a3a3a;  /* gray jak w logo */
  --c-ink-dark:     #232323;  /* dark surfaces / footer */
  --c-ink-soft:     #e7e6e3;  /* jasny border/separator */

  /* Neutrals */
  --c-bg:           #fdfbf7;  /* warm off-white */
  --c-surface:      #ffffff;
  --c-surface-2:    #f7f3ec;  /* sekcje soft */
  --c-border:       #ebe5d9;
  --c-text:         #2a2a2a;
  --c-text-soft:    #6a6660;
  --c-text-muted:   #9a958c;

  /* Condition colors (stany techniczne) — dostosowane, nie kolidują z brand */
  --cond-new:        #2ea86a;  /* 🟢 Nowy  — zieleń */
  --cond-display:    #2b7fd6;  /* 🔵 Powystawowy — niebieski */
  --cond-return:     #c89020;  /* 🟡 Po zwrocie — ochra (ciemniejsza niż brand) */
  --cond-used:       #7a5230;  /* 🟤 Używany — brąz (żeby nie kłóciło się z brand orange) */

  /* Dla kompatybilności: stare --c-accent aliasowane na brand */
  --c-accent:        var(--c-brand);
  --c-accent-dark:   var(--c-brand-dark);
  --c-accent-soft:   var(--c-brand-soft);

  /* Shape */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30, 25, 15, 0.06);
  --shadow:    0 4px 18px rgba(30, 25, 15, 0.08);
  --shadow-lg: 0 20px 50px rgba(30, 25, 15, 0.12);

  /* Layout */
  --container: 1240px;
  --gap: 24px;

  /* Font */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========== Reset =========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--c-text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

/* =========== Container =========== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========== Top info bar =========== */
.topbar {
  background: var(--c-ink-dark);
  color: #d9d7d3;
  font-size: 13px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.topbar__list {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.95;
}
.topbar__list svg {
  width: 14px; height: 14px; opacity: 0.8;
}
.topbar__contact {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar__contact a:hover { color: var(--c-accent); }

/* =========== Header =========== */
.header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  /* z-index wyższy niż `.nav` (50) i `.nav__mega` (60), żeby dropdown
     live-search zawsze był nad mega-menu głównej nawigacji. */
  z-index: 70;
}
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 16px 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 0;
}
.logo img {
  height: 44px;
  width: auto;
  display: block;
}
.logo--small img { height: 36px; }
.logo--footer {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
}
.logo--footer img { height: 40px; width: auto; }

/* Search */
.search {
  display: flex;
  align-items: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  position: relative;
  max-width: 640px;
  width: 100%;
  justify-self: center;
  transition: border-color .2s, background .2s;
}
.search:focus-within {
  border-color: var(--c-brand);
  background: #fff;
}
.search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
  padding: 8px 0;
  color: var(--c-text);
}
.search__btn {
  background: var(--c-brand);
  color: white;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
}
.search__btn:hover { background: var(--c-brand-dark); }
.search:focus-within { border-color: var(--c-brand); }

/* Header actions */
.header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--c-text);
  background: transparent;
  position: relative;
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-brand); }
.icon-btn__badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--c-accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

/* =========== Nav =========== */
.nav {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.nav__list {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
}
.nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav__list a:hover,
.nav__list a.is-active {
  color: var(--c-brand);
  border-bottom-color: var(--c-accent);
}
.nav__list .nav__sale {
  color: var(--c-accent-dark);
  font-weight: 700;
}

/* =========== Buttons =========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--c-accent-dark); }
.btn--brand {
  background: var(--c-ink-dark);
  color: #fff;
}
.btn--brand:hover { background: #000; }
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-border);
}
.btn--ghost:hover { background: var(--c-brand-tint); border-color: var(--c-brand); color: var(--c-brand-deep); }
.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* =========== Hero =========== */
.hero {
  position: relative;
  padding: 56px 0 64px;
  background:
    radial-gradient(circle at 90% 20%, rgba(238, 132, 32, 0.18), transparent 55%),
    radial-gradient(circle at 10% 95%, rgba(58, 58, 58, 0.08), transparent 55%),
    var(--c-bg);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-ink-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero__eyebrow svg { color: var(--c-brand); }
.hero h1 {
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--c-brand); }
.hero__float strong { color: var(--c-ink-dark); }
.hero__lead {
  color: var(--c-text-soft);
  font-size: 1.15rem;
  margin-bottom: 32px;
  max-width: 56ch;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero__stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hero__stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--c-ink-dark);
  font-weight: 800;
}
.hero__stat strong .brand-emph { color: var(--c-brand); }
.hero__stat span { color: var(--c-text-soft); font-size: 14px; }

.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  /* UWAGA: border-radius i shadow przenosimy na sam <img>, żeby zaokrąglenie
     było na krawędzi ZDJĘCIA (a nie beżowej ramki). `overflow: visible` niżej
     pozwala floating badges wychodzić poza ramkę. Dzięki temu obrazek idealnie
     wypełnia kontener, bez paseczków "contain" i bez wystawania "cover". */
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}
.hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` — obrazek wypełnia CAŁĄ ramkę bez białych pasków. Przy kadrowaniu
     utrzymujemy środek — sensowne dla fot. aranżacyjnych (biuro/dom/meble).
     Jeżeli w przyszłości admin wrzuci produkt "na białym", aspect-ratio 5:4
     i tak pasuje do 900x720 więc cover ≈ contain. */
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--c-surface-2);
}
/* Placeholder (gdy nie ma uploadowanego hero-image) — zachowujemy delikatne
   tło gradientowe, żeby sekcja nie wyglądała "na pusto". */
.hero__visual-placeholder {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__float {
  position: absolute;
  background: white;
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.hero__float--1 { top: 24px; left: -20px; }
.hero__float--2 { bottom: 24px; right: -20px; }

/* =========== Trust bar =========== */
.trustbar {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 24px 0;
}
.trustbar__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trustbar__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--c-surface-2);
  color: var(--c-ink-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
}
.trustbar__item:hover .trustbar__icon {
  background: var(--c-brand-soft);
  color: var(--c-brand-deep);
  border-color: transparent;
}
.trustbar__text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
}
.trustbar__text span {
  font-size: 13px;
  color: var(--c-text-soft);
}

/* =========== Section base =========== */
.section {
  padding: 72px 0;
}
.section--tight { padding: 48px 0; }
.section--surface { background: var(--c-surface); }
.section--soft { background: var(--c-surface-2); }

.section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.section__title h2 { margin-bottom: 8px; }
.section__title p {
  color: var(--c-text-soft);
  margin: 0;
  max-width: 56ch;
}
.section__link {
  color: var(--c-brand);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.section__link:hover { color: var(--c-accent-dark); }

/* =========== How it works (3 steps) =========== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__num {
  position: absolute;
  top: -18px;
  left: 32px;
  width: 44px; height: 44px;
  background: var(--c-accent);
  color: white;
  border-radius: 50%;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  border: 4px solid var(--c-bg);
}
.step__icon {
  width: 56px; height: 56px;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin: 8px 0 20px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--c-text-soft); margin: 0; }

/* =========== Conditions (stany techniczne) =========== */
.conditions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.condition-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.condition-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.condition-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--dot);
}
.condition-card__dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--dot);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dot) 30%, transparent);
}
.condition-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--dot);
}
.condition-card p { color: var(--c-text-soft); font-size: 14.5px; margin: 0 0 16px; }
.condition-card a {
  color: var(--c-text);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid transparent;
}
.condition-card a:hover { border-bottom-color: var(--dot); color: var(--dot); }

/* Stare angielskie + nowe polskie slug-i (PHP generuje sluggi z nazw stanów PL). */
.condition-card.c-new,
.condition-card.c-nowy        { --dot: var(--cond-new); }
.condition-card.c-display,
.condition-card.c-powystawowy { --dot: var(--cond-display); }
.condition-card.c-return,
.condition-card.c-po-zwrocie  { --dot: var(--cond-return); }
.condition-card.c-used,
.condition-card.c-uzywany     { --dot: var(--cond-used); }

/* Widoczny akcent koloru: pasek na górze + kolor labelu + fallback na wypadek gdyby --dot
   nie zostało ustawione dla nieoczekiwanego slug-a. */
.condition-card { --dot: var(--c-brand); }
.condition-card::before { background: var(--dot); height: 4px; display: block; }
.condition-card h3 { color: var(--dot); }
.condition-card .condition-card__link { color: var(--dot); font-weight: 700; }
.condition-card:hover { border-color: var(--dot); }
.condition-card:hover h3 { filter: brightness(.9); }

/* =========== Categories =========== */
.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface-2);
  display: block;
  transition: transform .25s, box-shadow .25s;
}
.category:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.category:hover img { transform: scale(1.05); }
.category::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7));
}
.category__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 1;
}
.category__body h3 {
  color: white;
  font-size: 1.1rem;
  margin: 0;
}
.category__body span {
  opacity: 0.8;
  font-size: 13px;
}
.category__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: white;
  color: var(--c-brand);
  display: grid;
  place-items: center;
  transition: background .2s;
}
.category:hover .category__arrow { background: var(--c-accent); color: white; }

.category--highlight {
  background:
    radial-gradient(circle at 80% 20%, rgba(238,132,32,0.55) 0%, transparent 55%),
    linear-gradient(135deg, var(--c-ink-dark), #141414);
}
.category--highlight::after { content: none; }

/* =========== Product cards ===========
   UWAGA: globalny grid jest zdefiniowany TYLKO dla `ul.products` (patrz niżej).
   `.products` jako klasa łapie też `<section class="related products">` z WooCommerce,
   co łamie layout (robi z <section> grid 4-kolumnowy → H2 + UL = dwie kolumny
   zamiast pełnej szerokości). Dlatego NIE definiujemy tu `display: grid`. */
.product {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.product__image {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--c-surface-2);
  overflow: hidden;
}
.product__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.product:hover .product__image img { transform: scale(1.04); }
.product__badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product__fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-text-soft);
  box-shadow: var(--shadow-sm);
  transition: color .2s, transform .2s;
}
.product__fav:hover { color: var(--c-accent); transform: scale(1.08); }

.product__body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.product__brand {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  font-weight: 600;
}
.product__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product__price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.product__price-current {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-text);
}
.product__price-old {
  font-size: 0.95rem;
  color: var(--c-text-muted);
  text-decoration: line-through;
}
.product__discount {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: var(--c-accent);
  padding: 3px 8px;
  border-radius: 999px;
}
.product__stock {
  font-size: 12px;
  color: var(--c-text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.product__stock::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--cond-new);
  border-radius: 50%;
}
.product__stock--low::before { background: var(--cond-used); }

/* Condition badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: white;
  color: var(--cond);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--cond) 25%, transparent);
}
/* Kropkę renderujemy przez <span class="badge__dot"> w HTML — NIE dubluj jej pseudo-elementem. */
.badge--new     { --cond: var(--cond-new); }
.badge--display { --cond: var(--cond-display); }
.badge--return  { --cond: var(--cond-return); }
.badge--used    { --cond: var(--cond-used); }

.badge--last-chance {
  --cond: #c0392b;
  color: white;
  background: #c0392b;
  border-color: #c0392b;
}

.badge--new-arrival {
  --cond: var(--c-brand);
  color: white;
  background: var(--c-brand);
  border-color: var(--c-brand);
}

/* =========== Brands strip =========== */
.brands {
  background: var(--c-surface);
  padding: 40px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.brands__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 24px;
  align-items: center;
}
.brands__logo {
  text-align: center;
  font-weight: 800;
  color: var(--c-text-muted);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  padding: 12px;
  filter: grayscale(1) opacity(0.65);
  transition: filter .2s, color .2s;
  font-family: Georgia, "Times New Roman", serif;
}
.brands__logo:hover { filter: none; color: var(--c-brand); }

/* =========== Reviews =========== */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px;
}
.review__stars {
  color: #f5b638;
  letter-spacing: 2px;
  font-size: 16px;
  margin-bottom: 12px;
}
.review__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0 0 16px;
}
.review__author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text-soft);
}
.review__avatar {
  width: 36px; height: 36px;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.review__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--c-text-muted);
  font-size: 12px;
}

/* =========== FAQ =========== */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq__item summary {
  list-style: none;
  padding: 20px 24px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-size: 24px;
  color: var(--c-brand);
  transition: transform .2s;
  line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { background: var(--c-surface-2); }
.faq__item p {
  padding: 0 24px 20px;
  color: var(--c-text-soft);
  margin: 0;
  line-height: 1.6;
}

/* =========== CTA banner =========== */
.cta-banner {
  background: linear-gradient(135deg, var(--c-ink-dark), #111);
  color: white;
  border-radius: var(--radius-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--c-brand) 0%, transparent 70%);
  opacity: 0.35;
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--c-brand) 0%, transparent 70%);
  opacity: 0.15;
}
.cta-banner h2 { color: white; margin-bottom: 8px; }
.cta-banner p { opacity: 0.9; margin: 0; max-width: 50ch; }

/* =========== Footer =========== */
.footer {
  background: var(--c-ink-dark);
  color: #b3b1ad;
  padding: 64px 0 24px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr) 1.2fr;
  gap: 32px;
  margin-bottom: 48px;
}
.footer__brand p {
  margin: 16px 0 20px;
  font-size: 14px;
  color: #b3b1ad;
  max-width: 36ch;
}
.footer__social {
  display: flex;
  gap: 8px;
}
.footer__social a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  transition: background .2s;
}
.footer__social a:hover { background: var(--c-accent); }

.footer h4 {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.footer__links a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: #b3b1ad;
  transition: color .2s;
}
.footer__links a:hover { color: var(--c-brand); }

.footer__newsletter p {
  font-size: 14px;
  color: #b3b1ad;
  margin: 0 0 14px;
}
.footer__form {
  display: flex;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
}
.footer__form input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
}
.footer__form input::placeholder { color: #8c8a86; }
.footer__form button {
  background: var(--c-accent);
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #8c8a86;
}
.footer__pay {
  background: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink-dark);
  letter-spacing: 0.02em;
}
.footer__payments {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.breadcrumbs {
  padding: 20px 0;
  font-size: 13px;
  color: var(--c-text-muted);
}
.breadcrumbs a:hover { color: var(--c-brand); }
.breadcrumbs span { margin: 0 8px; color: var(--c-border); }
.breadcrumbs strong { color: var(--c-text); font-weight: 500; }

.product-page {
  padding-bottom: 72px;
}
.product-page__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

/* Gallery */
.gallery {
  position: sticky;
  top: 120px;
}
.gallery__main {
  aspect-ratio: 1/1;
  background: var(--c-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}
.gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery__main .product__badges {
  top: 20px; left: 20px;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gallery__thumb {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--c-surface-2);
  cursor: pointer;
  transition: border-color .2s;
}
.gallery__thumb.is-active { border-color: var(--c-brand); }
.gallery__thumb:hover { border-color: var(--c-accent); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product info */
.p-info__brand {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: 10px;
}
.p-info h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 16px;
}
.p-info__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  color: var(--c-text-soft);
  font-size: 14px;
}
.p-info__meta .stars { color: #f5b638; letter-spacing: 2px; }
.p-info__meta a { color: var(--c-brand); font-weight: 500; }

/* Variants (stany) */
.variants {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.variants__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.variants__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.variant {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.variant:hover { border-color: var(--c-accent); }
.variant.is-selected {
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
}
.variant.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--c-surface-2);
}
.variant__radio {
  width: 20px; height: 20px;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
}
.variant.is-selected .variant__radio {
  border-color: var(--c-brand);
}
.variant.is-selected .variant__radio::after {
  content: '';
  width: 10px; height: 10px;
  background: var(--c-brand);
  border-radius: 50%;
}
.variant__info { display: flex; flex-direction: column; gap: 2px; }
.variant__name { font-weight: 600; font-size: 14px; color: var(--c-text); }
.variant__note { font-size: 12px; color: var(--c-text-muted); }
.variant__price { font-weight: 700; font-size: 16px; color: var(--c-text); text-align: right; }
.variant__price small { font-weight: 400; color: var(--c-text-muted); font-size: 11px; display: block; }
.variant__stock { font-size: 11px; font-weight: 600; color: var(--cond-new); white-space: nowrap; }
.variant__stock--low { color: var(--cond-used); }
.variant__stock--out { color: var(--c-text-muted); }

/* Price & Buy */
.buy-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.buy-box__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.buy-box__price-current {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--c-text);
}
.buy-box__price-old {
  font-size: 1.1rem;
  color: var(--c-text-muted);
  text-decoration: line-through;
}
.buy-box__discount {
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: var(--c-accent);
  padding: 4px 10px;
  border-radius: 999px;
}
.buy-box__tax {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: 20px;
}
.buy-box__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  overflow: hidden;
}
.qty button {
  width: 44px; height: 48px;
  font-size: 18px;
  color: var(--c-brand);
  font-weight: 700;
  transition: background .2s;
}
.qty button:hover { background: var(--c-brand-soft); }
.qty input {
  width: 48px;
  text-align: center;
  border: none;
  font-weight: 700;
  font-size: 15px;
  outline: none;
  background: transparent;
}
.buy-box__buy { flex: 1; }
.buy-box__extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--c-text-soft);
}
.buy-box__extras li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.buy-box__extras svg { color: var(--c-brand); flex-shrink: 0; }

.acorns-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-accent-soft);
  border: 1px dashed var(--c-accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--c-accent-dark);
  margin-top: 14px;
}

/* Info tabs */
.p-tabs {
  margin-top: 72px;
}
.p-tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 32px;
  overflow-x: auto;
}
.p-tabs__nav button {
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-soft);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.p-tabs__nav button:hover { color: var(--c-brand); }
.p-tabs__nav button.is-active {
  color: var(--c-brand);
  border-bottom-color: var(--c-accent);
}
.p-tabs__body { color: var(--c-text); line-height: 1.7; }
.p-tabs__body h3 { margin-bottom: 12px; }
.p-tabs__body p { color: var(--c-text-soft); margin: 0 0 16px; }

/* Specs table */
.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
}
.specs__row {
  display: contents;
}
.specs__row > * {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
.specs__key { color: var(--c-text-soft); font-size: 14px; background: var(--c-surface-2); }
.specs__val { color: var(--c-text); font-size: 14px; font-weight: 500; }
.specs__row:last-child > * { border-bottom: none; }

/* Condition notice on product page */
.cond-notice {
  background: var(--c-accent-soft);
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 14px;
}
.cond-notice__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--c-accent);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.cond-notice h4 { font-size: 14px; margin-bottom: 4px; }
.cond-notice p { font-size: 13.5px; margin: 0; color: var(--c-text-soft); }

/* =========== Responsive =========== */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
  .trustbar__list { grid-template-columns: repeat(2, 1fr); }
  .conditions { grid-template-columns: repeat(2, 1fr); }
  .categories { grid-template-columns: repeat(3, 1fr); }
  ul.products { grid-template-columns: repeat(3, 1fr); }
  .brands__grid { grid-template-columns: repeat(4, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .product-page__grid { grid-template-columns: 1fr; }
  .gallery { position: static; }
}
@media (max-width: 720px) {
  .section { padding: 48px 0; }
  .header__inner { grid-template-columns: 1fr auto; }
  /* search zostaje widoczny, tylko order: 3 i pełna szerokość (ustawione wyżej) */
  .steps { grid-template-columns: 1fr; }
  .categories { grid-template-columns: repeat(2, 1fr); }
  ul.products { grid-template-columns: repeat(2, 1fr); }
  .brands__grid { grid-template-columns: repeat(3, 1fr); }
  .conditions { grid-template-columns: 1fr; }
  .cta-banner { grid-template-columns: 1fr; padding: 32px; text-align: center; }
  .footer__grid { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .buy-box__price-current { font-size: 1.7rem; }
  .topbar__inner { font-size: 12px; }
  .topbar__list { gap: 10px; }
  .topbar__list li:nth-child(n+3) { display: none; }
}

/* =========================================================
   RELIVOO — uzupełnienia dla motywu WordPress
   (te style NIE są w mockupie — dodaję je tylko w theme)
   ========================================================= */

/* Accessibility — skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  background: var(--c-ink-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 9999;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Logo — responsywne rozmiary */
.logo { display: inline-flex; align-items: center; gap: 0; line-height: 0; }
.logo__img { height: 44px; width: auto; display: block; max-width: 200px; }
/* Footer logo — bez filter invert (zamieniał pomarańcz na niebieski). Dajemy subtle background jeśli logo jest ciemne. */
.logo--footer .logo__img { height: 40px; width: auto; filter: none; opacity: 1; }

/* Product card USP & stock info */
.product__brand { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--c-text-muted); margin-bottom: 4px; }
.product__stock { margin-top: 4px; font-size: 13px; color: var(--c-text-soft); }
.product__stock--low { color: var(--c-brand-dark); font-weight: 600; }
.product__stock--out { color: #c05656; }
.product__sale { position: absolute; top: 12px; right: 12px; background: var(--c-brand); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.product__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
.badge--new-arrival { background: #fff; color: var(--c-ink-dark); border: 1px solid var(--c-border); }
.badge--new-arrival .badge__dot { background: var(--c-brand); }
.badge--last-chance { background: #fee8e8; color: #8a2a2a; }
.badge--last-chance .badge__dot { background: #c05656; }

.btn--block { width: 100%; justify-content: center; }
.btn--brand { background: var(--c-brand); color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.btn--brand:hover { background: var(--c-brand-dark); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.24); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Breadcrumbs */
.breadcrumbs { padding: 20px 0 8px; font-size: 14px; color: var(--c-text-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--c-text-soft); }
.breadcrumbs a:hover { color: var(--c-brand); }
.breadcrumbs span { color: var(--c-text-muted); }

/* Archive layout */
.archive-header { padding: 16px 0 28px; }
.archive-title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.archive-description { max-width: 800px; color: var(--c-text-soft); margin-top: 8px; }
/* =========================================================
   Archive — layout / sidebar / toolbar
   ========================================================= */
.archive-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding-bottom: 60px; align-items: start; }

/* --- Sidebar kontener --- */
.archive-filters {
  position: sticky; top: 92px;
  align-self: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 6px 18px 18px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.archive-filters__empty { color: var(--c-text-muted); font-size: 14px; margin: 0; padding: 10px 0; }

/* --- Każdy widget jako karta --- */
.archive-filters .widget {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-border);
}
.archive-filters .widget:last-child { border-bottom: 0; padding-bottom: 4px; }
.archive-filters .widget:first-child { padding-top: 14px; }
/* Tytuły widgetów — pokrywamy też wtyczki filtrujące, które używają własnych klas */
.archive-filters .widget-title,
.archive-filters .widgettitle,
.archive-filters .widget h2,
.archive-filters .widget h3,
.archive-filters .widget h4,
.archive-filters .widget-block__heading,
.archive-filters [class*="filter-title"],
.archive-filters [class*="filter__title"] {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--c-text);
  text-transform: none;
  margin: 0 0 12px;
  line-height: 1.3;
  padding: 0;
  border: 0;
}

/* --- Nagłówek całego bloku filtrów (opcjonalny, przez PHP) --- */
.archive-filters__header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 4px;
}
.archive-filters__header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.archive-filters__clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.archive-filters__clear:hover { color: var(--c-brand); }

/* --- Listy filtrów (kategorie, atrybuty, layered-nav) --- */
.archive-filters ul,
.archive-filters ol,
.archive-filters .woocommerce-widget-layered-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.archive-filters li,
.archive-filters .woocommerce-widget-layered-nav-list__item {
  position: relative;
  padding: 6px 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
}
.archive-filters li a {
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: color .15s;
  text-decoration: none;
}
.archive-filters li a:hover { color: var(--c-brand); }

/* Liczniki "(12)" przy pozycjach */
.archive-filters li .count {
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  padding-left: 6px;
}

/* Drill-down (subkategorie / zagnieżdżone listy) */
.archive-filters li > ul,
.archive-filters li > ol {
  padding-left: 16px;
  margin-top: 4px;
  border-left: 2px solid var(--c-border);
}
.archive-filters .children { padding-left: 16px; margin-top: 4px; border-left: 2px solid var(--c-border); }

/* --- Custom checkbox-look (dla layered-nav w trybie "or"/"and") --- */
.archive-filters .woocommerce-widget-layered-nav-list__item a {
  position: relative;
  padding-left: 26px;
}
.archive-filters .woocommerce-widget-layered-nav-list__item a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  border-radius: 4px;
  transition: background .12s, border-color .12s;
}
.archive-filters .woocommerce-widget-layered-nav-list__item--chosen a::before {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.archive-filters .woocommerce-widget-layered-nav-list__item--chosen a::after {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-75%) rotate(-45deg);
}
.archive-filters .woocommerce-widget-layered-nav-list__item:hover a::before {
  border-color: var(--c-brand);
}
.archive-filters .woocommerce-widget-layered-nav-list__item--chosen a {
  color: var(--c-brand);
  font-weight: 600;
}

/* --- Aktywne filtry: chipy "Stan: Nowy ×" --- */
.archive-filters .widget_layered_nav_filters ul {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.archive-filters .widget_layered_nav_filters li {
  padding: 0;
  margin: 0;
}
.archive-filters .widget_layered_nav_filters li a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-brand-tint, #fff4e8);
  color: var(--c-brand);
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--c-brand) 25%, transparent);
  line-height: 1;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.archive-filters .widget_layered_nav_filters li a::after {
  content: "×";
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: .7;
}
.archive-filters .widget_layered_nav_filters li a:hover {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  transform: translateY(-1px);
}
.archive-filters .widget_layered_nav_filters li a:hover::after { opacity: 1; }

/* --- Native checkbox/radio w widgetach filtrujących (custom look) --- */
.archive-filters input[type="checkbox"],
.archive-filters input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--c-border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin: 0 8px 0 0;
  vertical-align: middle;
  transition: background .12s, border-color .12s;
}
.archive-filters input[type="radio"] { border-radius: 50%; }
.archive-filters input[type="checkbox"]:hover,
.archive-filters input[type="radio"]:hover { border-color: var(--c-brand); }
.archive-filters input[type="checkbox"]:checked,
.archive-filters input[type="radio"]:checked {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.archive-filters input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-75%) rotate(-45deg);
}
.archive-filters input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.archive-filters input[type="checkbox"]:focus-visible,
.archive-filters input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(238,132,32,.25);
}
.archive-filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  color: var(--c-text);
  padding: 5px 0;
  transition: color .15s;
}
.archive-filters label:hover { color: var(--c-brand); }
.archive-filters input[type="checkbox"]:checked + label,
.archive-filters input[type="checkbox"]:checked ~ label,
.archive-filters label:has(input:checked) {
  color: var(--c-text);
  font-weight: 600;
}

/* --- Price filter: input "do" nie może się przycinać, + kolor brandowy --- */
.archive-filters .widget_price_filter .price_slider_wrapper { padding: 4px 2px 0; }
.archive-filters .price_slider {
  position: relative;
  height: 4px;
  background: var(--c-border);
  border-radius: 999px;
  margin: 16px 8px 18px;
  border: 0;
}
.archive-filters .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--c-brand);
  border-radius: 999px;
  border: 0;
}
.archive-filters .ui-slider-handle {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid var(--c-brand);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .1s, box-shadow .15s;
  margin: 0;
}
.archive-filters .ui-slider-handle:hover,
.archive-filters .ui-slider-handle:focus {
  box-shadow: 0 0 0 4px rgba(238,132,32,.18), 0 2px 6px rgba(0,0,0,.12);
  outline: none;
}
.archive-filters .ui-slider-handle:active { cursor: grabbing; }

/* Inputy "od – do" — pełna widoczność "zł" */
.archive-filters .price_slider_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.archive-filters .price_slider_amount .price_label {
  display: block;
  width: 100%;
  order: 2;
  font-size: 13px;
  color: var(--c-text-soft);
  margin-top: 6px;
}
.archive-filters .price_slider_amount .price_label strong {
  color: var(--c-text);
  font-weight: 700;
}
.archive-filters .price_slider_amount input[type="text"],
.archive-filters input[type="number"],
.archive-filters input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--c-text);
  text-align: left;
  box-shadow: none;
}
.archive-filters .price_slider_amount input[type="text"]:focus,
.archive-filters input[type="number"]:focus,
.archive-filters input[type="text"]:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(238,132,32,.18);
}
/* przycisk "Filtruj" */
.archive-filters .price_slider_amount .button,
.archive-filters button.button {
  order: 3;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--c-text);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.archive-filters .price_slider_amount .button:hover,
.archive-filters button.button:hover {
  background: var(--c-brand);
  transform: translateY(-1px);
}

/* --- Rating filter (gwiazdki) --- */
.archive-filters .widget_rating_filter ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.archive-filters .widget_rating_filter .star-rating {
  width: 85px;
}

/* --- Mobile drawer trigger (pokazywany tylko na mobile) --- */
.archive-filters__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--c-text);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
}
.archive-filters__toggle:hover { background: var(--c-brand); }
.archive-filters__toggle svg { color: #fff; }

/* --- Toolbar: licznik + sortowanie --- */
.archive-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.archive-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 13px;
  color: var(--c-text-soft);
}
.archive-toolbar .woocommerce-ordering {
  margin: 0;
  position: relative;
}
.archive-toolbar .woocommerce-ordering::before {
  content: "Sortuj:";
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-soft);
  margin-right: 10px;
}
.archive-toolbar .woocommerce-ordering select {
  padding: 9px 34px 9px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s, box-shadow .15s;
}
.archive-toolbar .woocommerce-ordering select:hover,
.archive-toolbar .woocommerce-ordering select:focus {
  border-color: var(--c-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(238,132,32,.15);
}

.products--archive { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .archive-layout { grid-template-columns: 1fr; }
  .archive-filters {
    position: static;
    max-height: none;
    overflow: visible;
    /* na mobile chowamy sidebar i pokazujemy tylko po kliknięciu w __toggle */
    display: none;
  }
  .archive-filters.is-open { display: block; }
  .archive-filters__toggle { display: inline-flex; }
  .products--archive { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .products--archive { grid-template-columns: repeat(2, 1fr); }
  .archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .archive-toolbar .woocommerce-ordering select { width: 100%; }
}

/* =========================================================
   Performance hints — content-visibility + contain
   Przeglądarka może pominąć render i layout sekcji poza viewportem,
   co przyspiesza initial paint (szczególnie na długich stronach typu homepage).
   `contain-intrinsic-size` trzyma miejsce, żeby scrollbar nie "skakał".
   Stosowane TYLKO do sekcji below-the-fold.
   ========================================================= */

.section--deals,
.how,
.brands,
.reviews,
.club-cta,
.faq,
.trust-bar,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* Single product (theme) */
.product-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 20px 0 40px; }
.product-gallery { min-width: 0; }
.product-summary { min-width: 0; }
.product-brand { display: inline-block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 6px; font-weight: 600; }
.product-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.product-excerpt { color: var(--c-text-soft); margin: 12px 0 20px; font-size: 14px; line-height: 1.55; }

/* "Dlaczego taniej?" — pomarańczowa karta (jak pierwotnie), tylko kompaktowa. */
.outlet-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff3e0 100%);
  border: 1px solid #ffd9b3;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 14px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-text);
}
.outlet-notice__icon {
  /* Grid + place-items = absolutnie pewne centrowanie SVG w środku kółka,
     bez względu na odziedziczone reguły flex/line-height. */
  display: grid !important;
  place-items: center !important;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: #fff;
  border: 0;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  box-shadow: 0 2px 6px rgba(238, 132, 32, 0.22);
}
.outlet-notice__icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0;
  /* Override `currentColor` wynikał z tego, że rodzic miał kolor brand, ale
     na białym tle wyglądało blado. Teraz rodzic ma gradient pomarańczowy,
     więc SVG w bieli = maksymalny kontrast. */
  stroke: #fff !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  /* Zeruje ewentualny pionowy offset od baseline (niektóre silniki SVG
     renderują z małym presetem vertical-align). */
  vertical-align: middle;
  margin: 0 !important;
}
.outlet-notice strong {
  display: inline;
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 4px 0 0;
  color: var(--c-text);
}
.outlet-notice span {
  display: inline;
  font-size: 12.5px;
  color: var(--c-text-soft);
}

/* Condition selector (variants) */
.condition-selector { margin-top: 20px; }
.condition-selector__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.condition-variants { display: grid; gap: 10px; }
.condition-variant {
  display: block;
  position: relative;
  padding: 14px 16px 14px 50px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.condition-variant:hover:not(.is-out) { border-color: color-mix(in srgb, var(--c-brand) 50%, transparent); }
.condition-variant.is-selected { border-color: var(--c-brand); background: var(--c-brand-tint); box-shadow: var(--shadow-sm); }
.condition-variant.is-out { opacity: .55; cursor: not-allowed; }
.condition-variant input[type="radio"] {
  position: absolute; left: 16px; top: 18px;
  width: 20px; height: 20px;
  accent-color: var(--c-brand);
  cursor: inherit;
}
.condition-variant__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.condition-variant__price { font-size: 18px; font-weight: 800; color: var(--c-text); display: flex; align-items: baseline; gap: 8px; }
.condition-variant__price del { font-size: 13px; color: var(--c-text-muted); font-weight: 500; }
.condition-variant__desc { font-size: 13.5px; color: var(--c-text-soft); margin: 0; line-height: 1.5; }
.condition-variant__meta { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-soft); }
.condition-variant__stock.in { color: var(--cond-new); display: inline-flex; align-items: center; gap: 4px; }
.condition-variant__stock.out { color: #c05656; }
.condition-variant__warr { display: inline-flex; align-items: center; gap: 4px; }

/* Buy box */
.buy-box { display: flex; gap: 12px; align-items: stretch; margin-top: 16px; flex-wrap: wrap; }
.buy-box .single_add_to_cart_button { flex: 1 1 auto; min-width: 180px; }
.buy-box__secondary { margin-top: 10px; }
.buy-box__qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); overflow: hidden; }
.buy-box__qty .qty-btn { width: 40px; height: 48px; display: grid; place-items: center; color: var(--c-text-soft); border: none; background: none; cursor: pointer; }
.buy-box__qty .qty-btn:hover { color: var(--c-brand); }
.buy-box__qty .qty { width: 56px; text-align: center; border: none; background: none; font: inherit; font-weight: 700; font-size: 16px; padding: 0; }
.buy-box__qty .qty::-webkit-outer-spin-button,
.buy-box__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-box__qty .qty[type=number] { -moz-appearance: textfield; }

/* USP box */
.usp-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; padding: 16px; background: var(--c-surface-2); border-radius: var(--radius); list-style: none; }
.usp-box li { display: flex; gap: 10px; font-size: 13.5px; }
.usp-box li strong { font-size: 13.5px; }
.usp-box li span { color: var(--c-text-soft); font-size: 12.5px; }
.usp-box__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--c-surface); display: grid; place-items: center; color: var(--c-brand); box-shadow: var(--shadow-sm); }

/* =========================================================
   Product tabs (WooCommerce) — clean, modern underline style
   ========================================================= */
.product-tabs {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
}
.woocommerce-tabs .tabs,
.woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: 0 !important;
  flex-wrap: wrap;
  border: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
.woocommerce-tabs .tabs li,
.woocommerce-tabs ul.tabs li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-block !important;
  list-style: none !important;
}
.woocommerce-tabs .tabs li::before,
.woocommerce-tabs .tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.woocommerce-tabs .tabs li a,
.woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 14px 20px !important;
  color: var(--c-text-soft) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px !important; /* nakładka na border-bottom UL */
}
.woocommerce-tabs .tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--c-text) !important;
  background: transparent !important;
  border-bottom-color: var(--c-border) !important;
}
.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs .tabs li[aria-selected="true"] a {
  color: var(--c-brand) !important;
  background: transparent !important;
  border-bottom-color: var(--c-brand) !important;
}

.woocommerce-tabs .panel {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
}
.woocommerce-tabs .panel h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.005em;
  margin: 0 0 12px;
}
.woocommerce-tabs .panel h3 { font-size: 1.05rem; font-weight: 700; margin: 18px 0 8px; }
.woocommerce-tabs .panel p { margin: 0 0 12px; }
.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol { padding-left: 20px; margin: 0 0 12px; }
.woocommerce-tabs .panel li { margin-bottom: 4px; }

/* Mobile: taby jako scroll horizontal */
@media (max-width: 600px) {
  .woocommerce-tabs .tabs,
  .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .woocommerce-tabs .tabs::-webkit-scrollbar,
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce-tabs .tabs li a,
  .woocommerce-tabs ul.tabs li a { white-space: nowrap; padding: 12px 14px !important; font-size: 13px !important; }
}

.condition-protocol { list-style: none; padding: 0; margin: 10px 0; }
.condition-protocol li { padding: 10px 0; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; gap: 10px; }
.condition-protocol li:last-child { border-bottom: none; }

/* Related & upsells — WC wraps in `<section class="related products">`, dlatego
   resetujemy ewentualny grid na <section> (żeby H2 i UL nie stały obok siebie). */
.related, .upsells {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
  display: block !important; /* kontrargument dla `.products` gdyby ktoś dał display:grid */
  grid-template-columns: none !important;
}
.related > h2, .upsells > h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.005em;
  margin: 0 0 20px;
  color: var(--c-text);
}
.related ul.products,
.upsells ul.products {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .related ul.products, .upsells ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .related ul.products, .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* Stars */
.stars { color: #f0a73a; letter-spacing: 2px; font-size: 14px; }
.stars--empty { color: var(--c-border); }

/* Sticky ATC (mobile) */
.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 90;
  padding: 10px 16px env(safe-area-inset-bottom, 10px);
}
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc__inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.sticky-atc__img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.sticky-atc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sticky-atc__title { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-atc__price { font-size: 15px; font-weight: 800; color: var(--c-brand); }
@media (min-width: 980px) { .sticky-atc { display: none; } }

/* WooCommerce specifics: notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-brand); border-radius: 10px; padding: 14px 18px; margin: 16px 0;
}
.woocommerce-error { border-left-color: #c05656; }
.woocommerce-message { border-left-color: var(--cond-new); }
.woocommerce-message .button, .woocommerce-info .button { float: right; }

/* WooCommerce cart / checkout layout fixes */
.woocommerce-cart-form, .woocommerce-checkout { padding: 20px 0 60px; }
.woocommerce-cart-form__contents { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form__contents th, .woocommerce-cart-form__contents td { padding: 12px; border-bottom: 1px solid var(--c-border); text-align: left; }

/* Footer payments */
.footer__pay {
  display: inline-block; padding: 4px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  font-size: 11px;
  color: #d9d7d3;
}
.footer__social { display: flex; gap: 8px; margin-top: 12px; }
.footer__social a { display: grid; place-items: center; width: 32px; height: 32px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #d9d7d3; transition: background .2s, color .2s; }
.footer__social a:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.footer__form { display: flex; gap: 8px; }
.footer__form input { flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.2); color: #fff; font: inherit; }
.footer__form input::placeholder { color: rgba(255,255,255,.5); }
.footer__form button { padding: 10px 18px; border-radius: 999px; background: var(--c-brand); color: #fff; font-weight: 700; font: inherit; border: none; cursor: pointer; }
.footer__form button:hover { background: var(--c-brand-dark); }

/* Mobile menu */
.icon-btn--menu { display: none; }
@media (max-width: 960px) { .icon-btn--menu { display: inline-grid; } .nav { display: none; } .nav.is-open { display: block; } }

/* 404 */
.section--404 { text-align: center; padding: 80px 0; }
.section--404 h1 { margin-bottom: 10px; }

/* Posts grid fallback (blog) */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 20px 0; }
@media (max-width: 1100px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .posts-grid { grid-template-columns: 1fr; } }
.post-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; padding: 20px; }
.post-card__image img { border-radius: 10px; margin-bottom: 12px; }

/* Hero floating badges (uzupełnienie dla homepage hero).
   UWAGA: stare definicje `.hero__visual` i `.hero__visual img` z tego bloku
   zostały usunięte — kolidowały z głównymi (ln ~370) nadpisując
   `object-fit: contain` i wymuszając `min-height: 360px` + `height: auto`,
   co na mobilu rozpierało obrazek poza viewport. */
.hero__visual-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--c-brand-tint), var(--c-brand-soft)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__float { position: absolute; background: var(--c-surface); padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hero__float--1 { left: -16px; top: 32%; }
.hero__float--2 { right: -16px; bottom: 24%; }
.hero__float strong { font-weight: 700; }

/* Eyebrow dark variant */
.hero__eyebrow--dark { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

/* Category sale card */
.category--sale { background: linear-gradient(135deg, var(--c-brand), var(--c-brand-dark)); color: #fff; min-height: 220px; display: grid; place-items: center; text-align: center; padding: 24px; }
.category--sale h3 { color: #fff; }
.category--sale .category__body span { color: rgba(255,255,255,.9); }
.category__body--centered { display: grid; place-items: center; justify-content: center; text-align: center; }
.category__cta { margin-top: 14px; }

/* Print — podstawowe optimizacje */
@media print {
  .topbar, .header__actions, .nav, .sticky-atc, .footer { display: none !important; }
  body { background: #fff; }
  .product-top { grid-template-columns: 1fr 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   LIVE SEARCH — dropdown podpowiedzi pod paskiem
   ========================================================= */
.live-search {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Najwyższy w headerze — nie może być przykryty przez mega-menu nawigacji. */
  z-index: 9999;
  max-height: 70vh;
  overflow-y: auto;
  font-size: 14px;
}
.live-search[hidden] { display: none; }

.live-search__section { padding: 12px 14px; }
.live-search__section + .live-search__section { border-top: 1px solid var(--c-border); }

.live-search__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.live-search__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.live-search__list--compact { gap: 0; }

.live-search__item a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  color: var(--c-text);
  transition: background .15s;
}
.live-search__item a:hover,
.live-search__item a.is-active {
  background: var(--c-brand-tint);
  outline: none;
}
.live-search__item img,
.live-search__ph {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-surface-2);
}
.live-search__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.live-search__brand {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-text-muted);
}
.live-search__title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-search__title mark {
  background: color-mix(in srgb, var(--c-brand) 25%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.live-search__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.live-search__meta .badge { padding: 2px 7px; font-size: 10px; }
.live-search__price { font-weight: 700; color: var(--c-text); }
.live-search__price .price-from { font-weight: 500; color: var(--c-text-muted); font-size: 11px; margin-right: 3px; }
.live-search__price del { color: var(--c-text-muted); font-weight: 500; margin-right: 4px; font-size: 12px; }
.live-search__price ins { text-decoration: none; color: var(--c-brand); }

.live-search__cat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--c-text);
}
.live-search__cat:hover, .live-search__cat.is-active { background: var(--c-brand-tint); }
.live-search__count { color: var(--c-text-muted); font-size: 12px; }

.live-search__chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.live-search__chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.live-search__chip:hover,
.live-search__chip.is-active {
  background: var(--c-brand-tint);
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
}
.live-search__chip mark { background: transparent; font-weight: 700; color: var(--c-brand-deep); }

.live-search__footer {
  display: block;
  text-align: center;
  padding: 12px 16px;
  background: var(--c-brand);
  color: #fff;
  font-weight: 700;
  border-top: 1px solid var(--c-border);
  transition: background .2s;
}
.live-search__footer:hover,
.live-search__footer.is-active {
  background: var(--c-brand-dark);
  color: #fff;
}

.live-search__empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--c-text-soft);
  font-size: 14px;
}
.live-search__empty strong { color: var(--c-text); }

.live-search__loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 14px;
  color: var(--c-text-soft);
}
.live-search__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: relivoo-ls-spin .7s linear infinite;
}
@keyframes relivoo-ls-spin { to { transform: rotate(360deg); } }

/* Mobile — live search jako pełny overlay poniżej search */
@media (max-width: 720px) {
  .live-search { max-height: 60vh; font-size: 13px; }
  .live-search__title { font-size: 13px; }
}

/* =========================================================
   SEARCH — mniejszy placeholder + więcej spacingu (poprawka UX)
   ========================================================= */
.search > svg, .search svg:first-child {
  margin-left: 18px;
  margin-right: 4px;
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.search input {
  padding-left: 12px;
  font-size: 14px;
}
.search input::placeholder {
  color: #a8a39a;
  font-size: 13px;
  font-weight: 400;
}

/* =========================================================
   PRODUCT LOOP — <ul class="products"> naprawiony grid
   (WC owija w <ul>, nasze content-product.php renderuje <li>)
   ========================================================= */
ul.products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
ul.products > li.product {
  /* nadpisujemy inline-width które WC/JS może dodać */
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
ul.products > li.product:hover {
  box-shadow: var(--shadow);
  border-color: var(--c-brand);
  transform: translateY(-2px);
}
ul.products > li.product .product__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
ul.products > li.product .product__title { font-size: 15px; line-height: 1.35; margin: 2px 0 4px; font-weight: 600; }
ul.products > li.product .product__title a { color: var(--c-text); }
ul.products > li.product .product__title a:hover { color: var(--c-brand); }
ul.products > li.product .product__brand { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); font-weight: 600; }
ul.products > li.product .product__image { position: relative; aspect-ratio: 1 / 1; background: var(--c-surface-2); overflow: hidden; }
ul.products > li.product .product__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
ul.products > li.product:hover .product__image img { transform: scale(1.04); }
ul.products > li.product .product__price { margin-top: auto; font-size: 18px; font-weight: 700; color: var(--c-brand-deep); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
ul.products > li.product .price-from { font-size: 12px; color: var(--c-text-muted); font-weight: 500; }
ul.products > li.product .product__actions { margin-top: 10px; }
ul.products > li.product .product__actions .btn { width: 100%; justify-content: center; }
ul.products > li.product .product__sale {
  position: absolute; top: 10px; left: 10px;
  background: #e04646; color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

@media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; } ul.products > li.product .product__body { padding: 10px 12px 12px; } ul.products > li.product .product__title { font-size: 13px; } ul.products > li.product .product__price { font-size: 15px; } }

/* =========================================================
   SINGLE PRODUCT — galeria większa i proporcjonalna
   ========================================================= */
.product-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  padding: 24px 0 48px;
}
@media (max-width: 991px) { .product-top { grid-template-columns: 1fr; gap: 28px; } }

/* =========================================================
   WooCommerce product gallery — FlexSlider-compatible.

   WAŻNE: FlexSlider (ładowany przez WooCommerce) ustawia inline:
     - height na .flex-viewport
     - position: absolute + opacity na slides
     - width % na każdy <li class="woocommerce-product-gallery__image">
   Dlatego NIE wolno forsować height/width/display na tych elementach
   (chyba że CELOWO łamiemy slider — ale tego nie chcemy).
   Stylujemy tylko WIZUALNE warstwy: kontener, obrazki, thumbnaile.
   ========================================================= */

.product-gallery,
.woocommerce-product-gallery {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
  position: relative;
}

/* Kontener z obrazkiem głównym — wizualny "ramka", bez forsowania wysokości.
   FlexSlider sam zajmuje się dopasowaniem wysokości na podstawie obrazka. */
.woocommerce-product-gallery__wrapper {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface-2);
}

/* Każdy slide — zachowanie domyślne FlexSlider.
   Tylko dopasowanie tła (gdy pierwszy slide jeszcze się ładuje). */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
  background: var(--c-surface-2);
}

/* Obrazek w slajdzie — wypełnia szerokość, zachowuje proporcje,
   lekko większa minimalna wysokość dla spójności (slidy różnych rozmiarów). */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Gdy WC dodaje wrapper `no-js` (przed załadowaniem JS), pokazujemy tylko 1 obrazek
   żeby nie wyświetlić stosu 4 zdjęć pod sobą. */
.woocommerce-product-gallery--with-images:not(.woocommerce-product-gallery--columns-1) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-of-type) {
  /* Zostawiamy — FlexSlider w JS obsłuży. Ale jak JS-a brak (no-js), ukrywamy.
     Klasa .no-js na <html> to standard WP. */
}
.no-js .woocommerce-product-gallery__image:not(:first-of-type) { display: none; }

/* Przycisk "zoom" w prawym górnym rogu */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  background: #fff;
  border-radius: 50%;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  font-size: 0; /* WC wrzuca emoji 🔍 — ukrywamy */
}
.woocommerce-product-gallery__trigger::before {
  content: "";
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/><path d='M11 8v6M8 11h6'/></svg>") center/contain no-repeat;
  display: block;
}
.woocommerce-product-gallery__trigger:hover { transform: scale(1.05); box-shadow: var(--shadow); }

/* Thumbnaile pod głównym obrazkiem — FlexSlider renderuje je jako <ol class="flex-control-nav flex-control-thumbs"> */
.flex-control-thumbs {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.flex-control-thumbs li {
  margin: 0;
  width: auto;
  float: none; /* nadpisujemy default WC float */
}
.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, transform .15s, opacity .15s;
  opacity: .7;
  display: block;
}
.flex-control-thumbs img:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--c-brand) 60%, transparent);
}
.flex-control-thumbs img.flex-active {
  border-color: var(--c-brand);
  opacity: 1;
}

/* Strzałki nawigacji (jeśli FlexSlider je pokazuje) */
.flex-direction-nav {
  list-style: none; padding: 0; margin: 0;
  position: absolute; inset: 0; pointer-events: none;
}
.flex-direction-nav li {
  position: absolute; top: 50%; transform: translateY(-50%);
  margin: 0;
}
.flex-direction-nav .flex-prev { left: 12px; }
.flex-direction-nav .flex-next { right: 12px; }
.flex-direction-nav a {
  pointer-events: auto;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
  opacity: 0;
  transition: opacity .2s, transform .15s;
  font-size: 0;
}
.woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.flex-direction-nav a:hover { transform: scale(1.08); }
.flex-direction-nav .flex-prev::before,
.flex-direction-nav .flex-next::before {
  content: "";
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>") center/contain no-repeat;
}
.flex-direction-nav .flex-prev::before { transform: rotate(180deg); }

/* Mobile — thumbnaile mniejsze, zdjęcie główne kwadratowe dla spójności */
@media (max-width: 767px) {
  .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery__image--placeholder img {
    max-height: 420px;
  }
  .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

/* Kategorie meta (zastępują SKU meta) */
.product-cats { margin: 18px 0; font-size: 13px; color: var(--c-text-soft); padding-top: 14px; border-top: 1px solid var(--c-border); }
.product-cats__label { font-weight: 600; color: var(--c-text); margin-right: 6px; }
.product-cats a { color: var(--c-text-soft); text-decoration: underline; text-decoration-color: var(--c-border); text-underline-offset: 3px; }
.product-cats a:hover { color: var(--c-brand); }

/* Variant description (opis wariantu w tabie "Opis") */
.relivoo-desc--variant { transition: opacity .2s; }
.relivoo-desc__defects { margin-top: 20px; padding: 16px 18px; background: var(--c-brand-tint); border-left: 3px solid var(--c-brand); border-radius: var(--radius-sm); }
.relivoo-desc__defects h4 { margin: 0 0 8px; font-size: 14px; color: var(--c-brand-deep); }
.relivoo-desc__defects p:last-child { margin-bottom: 0; }
.relivoo-desc__empty { color: var(--c-text-muted); font-style: italic; }

/* =========================================================
   MINI-CART slide-in (off-canvas)
   ========================================================= */
.mini-cart {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.mini-cart.is-open { pointer-events: auto; opacity: 1; }
.mini-cart__backdrop { position: absolute; inset: 0; background: rgba(35, 35, 35, .5); backdrop-filter: blur(2px); }
.mini-cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.mini-cart.is-open .mini-cart__panel { transform: translateX(0); }
.mini-cart__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.mini-cart__header h3 { margin: 0; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--c-text); }
.mini-cart__header h3 svg { color: var(--c-brand); }
.mini-cart__close {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text); background: var(--c-surface-2);
  transition: background .15s, transform .15s;
}
.mini-cart__close:hover { background: var(--c-border); transform: rotate(90deg); }
.mini-cart__body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* =========================================================
   WC mini-cart ITEMS (v3 — FLEX + !important, bulletproof)

   Musimy bijać się ze stylami WooCommerce core `.woocommerce .mini_cart_item`
   (które ustawiają float, wąski img width, padding-left na content).
   Dlatego: flex + !important + agresywny reset na default WC property.
   ========================================================= */
.mini-cart__body .woocommerce-mini-cart,
.mini-cart__body .cart_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

.mini-cart__body .woocommerce-mini-cart-item,
.mini-cart__body .mini_cart_item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-top: 0 !important;
  position: relative !important;
  list-style: none !important;
  width: auto !important;
  float: none !important;
}
.mini-cart__body .mini_cart_item:first-child { padding-top: 6px !important; }
.mini-cart__body .mini_cart_item:last-child { border-bottom: 0 !important; padding-bottom: 10px !important; }

/* Thumbnail — 64x64 box, fixed, nie rośnie */
.mini-cart__body .mc-item__thumb {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  flex: 0 0 64px !important;
  overflow: hidden;
  background: var(--c-surface-2, #f5f2ed);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-decoration: none;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.mini-cart__body .mc-item__thumb img,
.mini-cart__body .mini_cart_item a:first-child img,
.mini-cart__body .mini_cart_item > img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: 9px;
  background: transparent;
}

/* Body — reszta szerokości, może się skurczyć */
.mini-cart__body .mc-item__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.mini-cart__body .mc-item__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mini-cart__body .mc-item__title:hover { color: var(--c-brand) !important; }
.mini-cart__body .mc-item__variant {
  display: block !important;
  margin-top: 1px !important;
  font-size: 11px !important;
  color: var(--c-text-muted) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.mini-cart__body .mc-item__meta {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: var(--c-text-soft) !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
  line-height: 1.2;
}
.mini-cart__body .mc-item__qty {
  color: var(--c-text-muted) !important;
  font-weight: 500 !important;
}
.mini-cart__body .mc-item__price {
  font-weight: 700 !important;
  color: var(--c-text) !important;
}
.mini-cart__body .mc-item__price .woocommerce-Price-amount { font-weight: 700; }

/* dl.variation — gdy WC wrzuci extra meta */
.mini-cart__body .mini_cart_item dl.variation {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 11px;
  color: var(--c-text-muted);
  line-height: 1.3;
}
.mini-cart__body .mini_cart_item dl.variation dt,
.mini-cart__body .mini_cart_item dl.variation dd {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400;
}
.mini-cart__body .mini_cart_item dl.variation dt::after { content: ": "; }
.mini-cart__body .mini_cart_item dl.variation dd + dt::before { content: " · "; }
.mini-cart__body .mini_cart_item dl.variation p { margin: 0 !important; }

/* Remove "×" — okrągły, po prawej, NIE pod obrazkiem */
.mini-cart__body .mc-item__remove,
.mini-cart__body .mini_cart_item .remove,
.mini-cart__body .mini_cart_item a.remove {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  flex: 0 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c-text-muted) !important;
  background: transparent !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, transform .15s;
  align-self: flex-start !important;
  margin: -2px 0 0 0 !important;
  padding: 0 !important;
  float: none !important;
  order: 3;
}
.mini-cart__body .mc-item__remove:hover,
.mini-cart__body .mini_cart_item .remove:hover {
  background: #fee8e8 !important;
  color: #c05656 !important;
  transform: rotate(90deg);
}
.mini-cart__body .woocommerce-mini-cart__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--c-border);
  font-size: 16px;
  margin-top: 8px;
}
.mini-cart__body .woocommerce-mini-cart__total strong { font-weight: 700; }
.mini-cart__body .woocommerce-mini-cart__buttons {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0 4px;
  margin: 0; list-style: none;
}
.mini-cart__body .woocommerce-mini-cart__buttons .button {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 10px;
  font-weight: 600; text-align: center;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.mini-cart__body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: var(--c-surface-2); color: var(--c-text);
}
.mini-cart__body .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--c-brand); color: #fff;
  font-size: 16px; padding: 14px 20px;
  box-shadow: 0 4px 12px rgba(238, 132, 32, .25);
}
.mini-cart__body .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--c-brand-dark); }
.mini-cart__body .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--c-text-muted); font-size: 15px; }

body.mini-cart-open { overflow: hidden; }

/* =========================================================
   CART PAGE — nowy premium layout
   ========================================================= */
.relivoo-cart { margin: 24px 0 60px; }
.relivoo-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 991px) { .relivoo-cart__grid { grid-template-columns: 1fr; } }
.relivoo-cart__title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 20px; font-weight: 800; letter-spacing: -0.01em; }
.relivoo-cart__items { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; }
.relivoo-cart__list { list-style: none; padding: 0; margin: 0; }
.relivoo-cart__item {
  display: grid;
  grid-template-columns: 84px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}
.relivoo-cart__item:last-child { border-bottom: 0; }
.relivoo-cart__thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); background: var(--c-surface-2); }
.relivoo-cart__info { min-width: 0; }
.relivoo-cart__name { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.relivoo-cart__name a { color: var(--c-text); }
.relivoo-cart__name a:hover { color: var(--c-brand); }
.relivoo-cart__badge { margin: 4px 0 6px; }
.relivoo-cart__price-each { font-size: 13px; color: var(--c-text-muted); }
.relivoo-cart__qty .quantity { display: flex; align-items: center; gap: 0; background: var(--c-surface-2); border-radius: 999px; padding: 2px; }
.relivoo-cart__qty .quantity input { width: 44px; text-align: center; border: 0; background: transparent; font-weight: 600; font-size: 14px; -moz-appearance: textfield; }
.relivoo-cart__qty .quantity input::-webkit-outer-spin-button,
.relivoo-cart__qty .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.relivoo-cart__subtotal { font-weight: 700; font-size: 16px; color: var(--c-text); min-width: 80px; text-align: right; }
.relivoo-cart__remove .remove {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text-muted); background: var(--c-surface-2);
  transition: background .15s, color .15s;
}
.relivoo-cart__remove .remove:hover { color: #e04646; background: #fee; }

@media (max-width: 767px) {
  .relivoo-cart__item { grid-template-columns: 72px 1fr auto; grid-template-rows: auto auto auto; gap: 10px 12px; }
  .relivoo-cart__thumb { grid-row: 1 / span 3; }
  .relivoo-cart__info { grid-column: 2 / span 2; }
  .relivoo-cart__qty { grid-column: 2; }
  .relivoo-cart__subtotal { grid-column: 3; text-align: right; }
  .relivoo-cart__remove { grid-column: 3; grid-row: 1; justify-self: end; }
  .relivoo-cart__thumb img { width: 72px; height: 72px; }
}

.relivoo-cart__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.relivoo-cart__coupon { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; }
.relivoo-cart__coupon label { font-size: 13px; font-weight: 600; color: var(--c-text); }
.relivoo-cart__coupon-row { display: flex; gap: 8px; }
.relivoo-cart__coupon-row input { flex: 1; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 8px; font-size: 14px; }
.relivoo-cart__coupon-row input:focus { outline: 0; border-color: var(--c-brand); }
.btn--link { background: transparent; color: var(--c-text-soft); font-weight: 500; padding: 10px 16px; }
.btn--link:hover { color: var(--c-brand); }

.relivoo-cart__totals-sticky { position: sticky; top: 92px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.relivoo-cart__totals-sticky > h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.relivoo-cart__totals-inner { margin-bottom: 18px; }
.relivoo-cart__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; border-bottom: 1px dashed var(--c-border); }
.relivoo-cart__row strong { font-weight: 700; }
.relivoo-cart__row--coupon { color: #2ea86a; }
.relivoo-cart__row--tax { color: var(--c-text-soft); font-size: 13px; }
.relivoo-cart__shipping { padding: 10px 0; border-bottom: 1px dashed var(--c-border); }
.relivoo-cart__shipping li { list-style: none; padding: 4px 0; font-size: 13px; }
.relivoo-cart__total { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 6px; font-size: 18px; border-top: 2px solid var(--c-ink); margin-top: 6px; }
.relivoo-cart__total strong { font-size: 22px; color: var(--c-brand-deep); font-weight: 800; }

.wc-proceed-to-checkout { margin: 8px 0 0 !important; padding: 0 !important; }
.wc-proceed-to-checkout .checkout-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  background: var(--c-brand); color: #fff;
  padding: 16px 24px; border-radius: 12px;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(238, 132, 32, .3);
  text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--c-brand-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(238, 132, 32, .4); }

.relivoo-cart__trust { list-style: none; padding: 14px 0 0; margin: 18px 0 0; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--c-text-soft); }
.relivoo-cart__trust li { display: inline-flex; align-items: center; gap: 8px; }
.relivoo-cart__trust svg { color: var(--c-brand); flex-shrink: 0; }

/* =========================================================
   FOOTER v2 — premium layout
   ========================================================= */
.footer { background: #fff; color: var(--c-text); margin-top: 60px; }

/* Newsletter strip */
.footer__newsletter-strip {
  background: linear-gradient(135deg, var(--c-brand) 0%, #d4711a 100%);
  color: #fff;
  padding: 40px 0;
}
.footer__newsletter-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 767px) { .footer__newsletter-inner { grid-template-columns: 1fr; text-align: center; } }
.footer__newsletter-copy h3 { margin: 0 0 8px; font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; line-height: 1.2; color: #fff; }
.footer__newsletter-copy p { margin: 0; opacity: .92; font-size: 15px; }
.footer__newsletter-form { display: flex; gap: 10px; background: #fff; padding: 6px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.footer__newsletter-form input { flex: 1; border: 0; background: transparent; padding: 12px 18px; font-size: 15px; outline: 0; min-width: 0; color: var(--c-text); }
.footer__newsletter-form button { padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 500px) { .footer__newsletter-form { flex-direction: column; border-radius: 12px; } .footer__newsletter-form button { width: 100%; } }

/* Main grid */
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 40px;
}
@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

.footer__brand .logo--footer img { height: 40px; margin-bottom: 14px; }
.footer__about { color: var(--c-text-soft); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.footer__contact { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.footer__contact li { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-text-soft); }
.footer__contact svg { color: var(--c-brand); flex-shrink: 0; }
.footer__contact a { color: var(--c-text); font-weight: 500; }
.footer__contact a:hover { color: var(--c-brand); }

.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); color: var(--c-text);
  transition: background .15s, color .15s, transform .15s;
}
.footer__social a:hover { background: var(--c-brand); color: #fff; transform: translateY(-2px); }

.footer__col h4 { margin: 0 0 14px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text); }
.footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__links a { color: var(--c-text-soft); font-size: 14px; text-decoration: none; transition: color .15s; }
.footer__links a:hover { color: var(--c-brand); }

/* Trust row */
.footer__trust { background: var(--c-surface-2); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 20px 0; }
.footer__trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__trust-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer__trust-label { font-size: 13px; font-weight: 700; color: var(--c-text); text-transform: uppercase; letter-spacing: .05em; }
.footer__trust-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.footer__chip { background: #fff; color: var(--c-text); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--c-border); }

/* Legal bottom */
.footer__bottom { padding: 20px 0; background: #fff; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__copy { font-size: 13px; color: var(--c-text-muted); }
.footer__legal { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.footer__legal a { font-size: 13px; color: var(--c-text-muted); }
.footer__legal a:hover { color: var(--c-brand); }
@media (max-width: 600px) { .footer__bottom-inner { flex-direction: column; text-align: center; } }

/* =========================================================
   GENERIC BUTTONS — upewniamy się, że .btn klasy są dobrze stylowane
   ========================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .1s, box-shadow .15s; border: 1.5px solid transparent; line-height: 1; }
.btn--brand { background: var(--c-brand); color: #fff; }
.btn--brand:hover { background: var(--c-brand-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(238,132,32,.25); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn--block { width: 100%; }

/* =========================================================
   POPRAWKI drobne — usunięcie bloat WC na froncie
   ========================================================= */
.woocommerce-breadcrumb a, .woocommerce-breadcrumb { font-size: 13px; color: var(--c-text-muted); }
.woocommerce-breadcrumb a { color: var(--c-text-soft); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--c-brand); }
/* WC "out of stock", "sale" overlay — discretno */
.woocommerce span.onsale { display: none; } /* mamy własny .product__sale */

/* =========================================================
   BADGE REFINEMENT (v2) — mniejsze, subtelniejsze na karcie
   ========================================================= */
ul.products > li.product .product__badges {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none; /* żeby nie blokować klika na link produktu */
  max-width: calc(100% - 20px);
}
ul.products > li.product .product__badges .badge {
  pointer-events: auto;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
  border: 0;
}
ul.products > li.product .product__badges .badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
/* Kolory kropek per stan */
.badge--new .badge__dot     { background: var(--cond-new); }
.badge--display .badge__dot { background: var(--cond-display); }
.badge--return .badge__dot  { background: var(--cond-return); }
.badge--used .badge__dot    { background: var(--cond-used); }
.badge--new .badge__text, .badge--new     { color: var(--cond-new); }
.badge--display              { color: var(--cond-display); }
.badge--return               { color: var(--cond-return); }
.badge--used                 { color: var(--cond-used); }
.badge--new-arrival          { color: var(--c-brand-deep); }
.badge--new-arrival .badge__dot { background: var(--c-brand); }
.badge--last-chance          { color: #e04646; }
.badge--last-chance .badge__dot { background: #e04646; }

/* MULTI-CONDITION badge: kompaktowy stack kropek + label */
.badge.badge--multi {
  padding: 4px 10px 4px 6px;
  gap: 6px;
  color: var(--c-text);
}
.badge-multi__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot-color, var(--c-brand));
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px #fff;
}
.badge-multi__dot + .badge-multi__dot { margin-left: -3px; } /* subtle overlap */
.badge-multi__label {
  margin-left: 2px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* =========================================================
   KARTA PRODUKTU — cena pogrubiona, mniejszy tekst CTA
   ========================================================= */
ul.products > li.product .product__price {
  font-size: 19px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
ul.products > li.product .product__price .price {
  font-weight: 800;
  color: var(--c-ink);
}
ul.products > li.product .product__price .price-from {
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
  text-transform: lowercase;
}
ul.products > li.product .product__price del {
  font-size: 13px; color: var(--c-text-muted); font-weight: 500; margin-left: 4px;
}
ul.products > li.product .product__price ins {
  text-decoration: none; color: var(--c-brand-deep);
}

/* CTA "Wybierz stan" — mniejsze */
.btn.btn--compact {
  font-size: 13px;
  padding: 9px 14px;
  letter-spacing: .01em;
}
.btn.btn--compact svg { width: 14px; height: 14px; }
ul.products > li.product .product__actions .btn { font-size: 13px; padding: 10px 14px; }
ul.products > li.product .product__actions .added_to_cart { font-size: 12px; }

/* Info "Dostępny" — mniejsza, mniej nachalna */
ul.products > li.product .product__stock {
  font-size: 12px;
  color: var(--c-text-soft);
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0;
}
ul.products > li.product .product__stock::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #2ea86a;
  flex-shrink: 0;
}
ul.products > li.product .product__stock--out { color: #d34444; }
ul.products > li.product .product__stock--out::before { background: #d34444; }
ul.products > li.product .product__stock--low { color: #c89020; }
ul.products > li.product .product__stock--low::before { background: #c89020; }

/* Brand name w karcie — mniejszy i subtelniejszy */
ul.products > li.product .product__brand {
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--c-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* =========================================================
   MY ACCOUNT — custom grid layout (v2, deterministic)
   Używa wrappera .relivoo-account z woocommerce/myaccount/my-account.php
   ========================================================= */

/* Reset domyślnych float-ów WC — bez tego WC wymusza własny layout */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Page wrapper: usuwamy zbędny H1 "Szczegóły konta" — endpoint sam ma swoje heading */
.woocommerce-account .page-header { display: none; }
.woocommerce-account .page-body { padding: 0; }

/* Główny grid: sidebar + content, oba na tej samej linii od samej góry */
.relivoo-account {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
  margin: 32px 0 60px;
}
.relivoo-account__nav {
  position: sticky;
  top: 92px;
}
.relivoo-account__content {
  min-width: 0; /* prevents grid overflow from tables */
}
/* Jeśli user NIE jest zalogowany (forms login/register) — 1 kolumna, wycentrowane */
.woocommerce-account:not(.logged-in) .relivoo-account {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .relivoo-account {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .relivoo-account__nav { position: static; }
}

/* Sidebar nav — sticky/layout jest już na .relivoo-account__nav;
   tutaj tylko styling ramki/zawartości */
.woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 12px;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--c-text); text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a::before {
  content: ''; display: inline-block;
  width: 18px; height: 18px;
  background: currentColor;
  opacity: .55;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
/* Ikonki per endpoint (inline SVG jako mask-image — zero dodatkowych requestów) */
.woocommerce-MyAccount-navigation-link--dashboard a::before         { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>"); }
.woocommerce-MyAccount-navigation-link--orders a::before            { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/></svg>"); }
.woocommerce-MyAccount-navigation-link--downloads a::before         { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M12 3v12m0 0-5-5m5 5 5-5M3 21h18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M12 3v12m0 0-5-5m5 5 5-5M3 21h18'/></svg>"); }
.woocommerce-MyAccount-navigation-link--edit-address a::before      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.woocommerce-MyAccount-navigation-link--edit-account a::before      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='12' cy='7' r='4'/><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='12' cy='7' r='4'/><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/></svg>"); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>"); }

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--c-brand-tint);
  color: var(--c-brand-deep);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a[aria-current="page"],
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--c-brand);
  color: #fff;
}
.woocommerce-MyAccount-navigation li.is-active a::before { opacity: 1; }
.woocommerce-MyAccount-navigation li a:hover::before { opacity: 1; }

/* Content area */
.woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px 32px;
  min-height: 400px;
}
.woocommerce-MyAccount-content > h2, .woocommerce-MyAccount-content > h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.woocommerce-MyAccount-content > p { line-height: 1.6; color: var(--c-text); }
.woocommerce-MyAccount-content a:not(.button):not(.wc-reset-variations) {
  color: var(--c-brand-deep); text-decoration: underline; text-decoration-color: var(--c-brand-tint); text-underline-offset: 3px;
}
.woocommerce-MyAccount-content a:not(.button):hover { color: var(--c-brand); text-decoration-color: var(--c-brand); }
@media (max-width: 600px) { .woocommerce-MyAccount-content { padding: 20px; } }

/* Orders table */
.woocommerce table.my_account_orders,
.woocommerce table.shop_table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.woocommerce table.shop_table thead th {
  background: var(--c-surface-2);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-soft);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  vertical-align: middle;
}
.woocommerce table.shop_table tr:first-child td { border-top: 0; }
.woocommerce table.shop_table .button, .woocommerce .woocommerce-MyAccount-content a.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border);
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.woocommerce table.shop_table .button:hover,
.woocommerce .woocommerce-MyAccount-content a.button:hover {
  background: var(--c-brand); color: #fff; border-color: var(--c-brand);
}
.woocommerce table.shop_table .button.view {
  background: var(--c-brand); color: #fff; border-color: var(--c-brand);
}
.woocommerce table.shop_table .button.view:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }

/* Status pills */
.woocommerce .order-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--c-surface-2); color: var(--c-text-soft);
}
.woocommerce .order-status.status-processing { background: #e8f4ff; color: #2b7fd6; }
.woocommerce .order-status.status-completed  { background: #e8f7ee; color: #1f8a52; }
.woocommerce .order-status.status-on-hold,
.woocommerce .order-status.status-pending    { background: #fff3d6; color: #8a5a00; }
.woocommerce .order-status.status-cancelled,
.woocommerce .order-status.status-failed     { background: #ffe6e6; color: #c23a3a; }

/* Login / register forms */
.woocommerce .u-columns, .woocommerce #customer_login {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  max-width: 980px; margin: 40px auto 60px;
}
@media (max-width: 767px) { .woocommerce .u-columns, .woocommerce #customer_login { grid-template-columns: 1fr; margin-top: 20px; } }

.woocommerce #customer_login .u-column1, .woocommerce #customer_login .u-column2,
.woocommerce form.login, .woocommerce form.register {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100% !important; float: none !important;
}
.woocommerce #customer_login h2 { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.woocommerce form.login p.form-row, .woocommerce form.register p.form-row, .woocommerce-MyAccount-content p.form-row {
  margin: 0 0 14px;
  display: flex; flex-direction: column;
}
.woocommerce form .form-row label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--c-text);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: 11px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 0;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}
.woocommerce form .button, .woocommerce .woocommerce-MyAccount-content .button:not(.wc-reset-variations) {
  background: var(--c-brand); color: #fff !important;
  padding: 12px 20px; border-radius: 10px;
  font-weight: 600; font-size: 14px;
  border: 0; cursor: pointer;
  transition: background .15s, transform .1s;
}
.woocommerce form .button:hover { background: var(--c-brand-dark); transform: translateY(-1px); }
.woocommerce .lost_password { margin-top: 6px; font-size: 13px; }
.woocommerce .lost_password a { color: var(--c-text-soft); text-decoration: underline; }

/* Checkboxes w loginie ("Zapamiętaj") */
.woocommerce form .form-row.woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.woocommerce form .form-row.woocommerce-form__label-for-checkbox input { margin: 0; }

/* My Account forms — reset floatów WC + 2-kolumnowy grid dla form-row-first/last */
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.woocommerce-address-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.woocommerce-MyAccount-content form .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-content form .form-row-first { grid-column: 1; }
.woocommerce-MyAccount-content form .form-row-last  { grid-column: 2; }
.woocommerce-MyAccount-content form .form-row-wide,
.woocommerce-MyAccount-content form fieldset,
.woocommerce-MyAccount-content form p:not(.form-row):not(.form-row-first):not(.form-row-last),
.woocommerce-MyAccount-content form .woocommerce-form-row--wide,
.woocommerce-MyAccount-content form > p:last-of-type {
  grid-column: 1 / -1;
}
.woocommerce-MyAccount-content form fieldset {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2, #faf8f5);
}
.woocommerce-MyAccount-content form fieldset legend {
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
}
.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form textarea,
.woocommerce-MyAccount-content form select {
  width: 100%;
}
.woocommerce-MyAccount-content form .button {
  justify-self: start;
}
@media (max-width: 600px) {
  .woocommerce-MyAccount-content form.edit-account,
  .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
  .woocommerce-MyAccount-content form.woocommerce-address-fields {
    grid-template-columns: 1fr;
  }
  .woocommerce-MyAccount-content form .form-row-first,
  .woocommerce-MyAccount-content form .form-row-last { grid-column: 1; }
}

/* Orders — empty state "brak zamówień" */
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-info {
  padding: 20px;
  background: var(--c-brand-tint, #fef3e8);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.woocommerce-MyAccount-content .woocommerce-Message .button,
.woocommerce-MyAccount-content .woocommerce-info .button {
  margin-left: auto;
}

/* Addresses */
.woocommerce .woocommerce-Addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 20px;
}
@media (max-width: 600px) { .woocommerce .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce .woocommerce-Address {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
}
.woocommerce .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.woocommerce .woocommerce-Address-title h2, .woocommerce .woocommerce-Address-title h3 { margin: 0; font-size: 15px; font-weight: 700; }
.woocommerce .woocommerce-Address-title .edit { font-size: 13px; color: var(--c-brand-deep); text-decoration: underline; }
.woocommerce .woocommerce-Address address { font-style: normal; font-size: 14px; color: var(--c-text); line-height: 1.7; }

/* WC notices (info/error/success) */
.woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: #fff;
  border-left: 4px solid var(--c-brand);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 12px;
  list-style: none;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.woocommerce-message { border-left-color: #2ea86a; }
.woocommerce-info    { border-left-color: #2b7fd6; }
.woocommerce-error   { border-left-color: #e04646; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message .button, .woocommerce-info .button {
  background: var(--c-brand); color: #fff !important;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
}

/* =========================================================
   HERO FLOATING BADGES — fix przycinania przy krawędzi kontenera
   (nadpisanie wcześniejszych reguł `.hero__float--1/2`)
   ========================================================= */

/* 1) Wizualny wrapper NIE przycina floating badges — wrapper ma
   `overflow: visible`, natomiast sam <img> ma border-radius + box-shadow
   (zdefiniowane wyżej, ln ~370). Dzięki temu badge-e mogą wystawać poza
   krawędź, a obrazek zachowuje zaokrąglenia. */
.hero__visual { overflow: visible !important; }

/* 2) Badge-e pozycjonowane WEWNĄTRZ obrazka (żeby nie wchodzić w overflow .hero) */
.hero__float {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px 10px 12px;
  box-shadow: 0 8px 24px rgba(30, 25, 15, 0.12), 0 2px 6px rgba(30, 25, 15, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  /* nie pozwalamy rozlać się badge-om na wąskich ekranach */
  max-width: calc(100% - 24px);
}
.hero__float--1 { top: 20px;    left: 16px;  right: auto; bottom: auto; }
.hero__float--2 { bottom: 24px; right: 16px; left: auto;  top: auto; }

.hero__float svg { flex-shrink: 0; }
.hero__float strong { font-weight: 700; color: var(--c-ink); }

/* Mobile — badge-e jeszcze mniejsze i pewniej wewnątrz obrazka */
@media (max-width: 767px) {
  .hero__float { font-size: 12px; padding: 8px 14px 8px 10px; gap: 8px; }
  .hero__float svg { width: 18px; height: 18px; }
  .hero__float--1 { top: 12px; left: 12px; }
  .hero__float--2 { bottom: 12px; right: 12px; }
}

/* =========================================================
   v3 FIXES — topbar, hero CTA, product titles, paginacja,
   "Pokaż więcej" button, badge deduplication (2025-04)
   ========================================================= */

/* -------- 1) Topbar — ikony OBOK tekstu (nie pod) -------- */
.topbar__contact { display: inline-flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.topbar__contact a svg { flex-shrink: 0; opacity: .8; }
.topbar__hours { opacity: .7; font-size: 12px; margin-left: 2px; }
.topbar__list li { white-space: nowrap; }
.topbar__list li svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .topbar__hours { display: none; }
  .topbar__contact { gap: 12px; font-size: 12px; }
  .topbar__contact a:last-child { display: none; } /* na bardzo małych ekranach ukryj email, zostaw telefon */
}

/* -------- 2) Hero CTA — nowy look, bez "prostokąta jak gówno" -------- */
.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 28px 0 32px;
  padding: 0;
  background: transparent; /* reset na wszelki wypadek gdyby ktoś nałożył tło */
}
.hero .btn.btn--primary,
.hero__cta .btn--primary {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-brand-dark, #c96a10) 100%);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(238, 132, 32, 0.32),
    0 2px 6px rgba(238, 132, 32, 0.18);
  font-weight: 700;
  letter-spacing: .01em;
  border: 0;
  padding: 16px 28px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hero .btn.btn--primary:hover,
.hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(238, 132, 32, 0.42),
    0 3px 8px rgba(238, 132, 32, 0.22);
  color: #fff;
}
.hero .btn.btn--primary svg,
.hero__cta .btn--primary svg { transition: transform .2s ease; }
.hero .btn.btn--primary:hover svg,
.hero__cta .btn--primary:hover svg { transform: translateX(3px); }
.hero__cta .btn--ghost {
  background: transparent;
  color: var(--c-ink, #1a1a1a);
  border: 1.5px solid var(--c-border);
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 600;
}
.hero__cta .btn--ghost:hover {
  background: #fff;
  border-color: var(--c-ink, #1a1a1a);
  color: var(--c-ink, #1a1a1a);
}

/* -------- 3) Product title — 3 linie max z "…" na końcu --------
   `-webkit-line-clamp: 3` natywnie obsługiwany w Chrome/Safari/Firefox/Edge.
   Długie nazwy outletowe (model, wymiar, wariant) potrzebują zapasu. */
ul.products > li.product .product__title {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  margin: 2px 0 6px;
  /* `-webkit-line-clamp: 3` + `overflow: hidden` samo obcina do 3 linii.
     Zamiast `max-height` (który obcinał descendery „ł", „p", „g") używamy
     tylko `min-height` dla wyrównania wysokości kart w rzędzie. */
  min-height: calc(1.4em * 3);
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  padding-bottom: 2px; /* zapas dla descenderów na ostatniej linii */
}
ul.products > li.product .product__title a {
  color: var(--c-text);
  display: inline;
  text-decoration: none;
}
@media (max-width: 767px) {
  ul.products > li.product .product__title { font-size: 12px !important; min-height: calc(1.4em * 3); }
}

/* -------- 4) "Pokaż więcej produktów" button — odstęp od gridu -------- */
.section-products__more,
.products-more,
.home-products__more,
.products + .section-products__more,
ul.products + .section-products__more,
ul.products + p,
ul.products + div.section-actions,
.products-grid + .section-actions {
  margin-top: 28px;
}
/* Najbezpieczniej — cokolwiek z klasą przycisku "Pokaż więcej" */
.btn--more,
.btn.btn--show-more {
  margin-top: 28px;
}
/* Sekcja listy produktów na homepage (template-parts/homepage/products.php) */
.section__footer {
  margin-top: 32px;
  text-align: center;
  padding: 8px 0 4px;
}
.section__footer .btn { min-width: 220px; }

/* -------- 5) Paginacja — premium look (bez brzydkich szarych kwadratów) -------- */
.woocommerce-pagination { padding: 28px 0 8px; }
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0 auto;
  list-style: none;
  border: 0 !important;
}
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--c-text) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: background .15s, color .15s, transform .1s;
  text-decoration: none;
}
.woocommerce-pagination ul.page-numbers li a:hover,
nav.woocommerce-pagination ul li a:hover {
  background: var(--c-brand-tint, rgba(238,132,32,.1)) !important;
  color: var(--c-brand, #ee8420) !important;
}
.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li .current,
nav.woocommerce-pagination ul li span.current {
  background: var(--c-brand, #ee8420) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(238,132,32,.28);
}
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li span.dots {
  color: var(--c-text-muted) !important;
}

/* -------- 6) Archive — lepszy odstęp pod gridem (nad paginacją) -------- */
.archive-main .woocommerce-pagination { margin-top: 20px; }
.archive-main ul.products { margin-bottom: 8px; }

/* -------- 7) ul.products::before / ::after — kasujemy WC-core clearfix --------
   WooCommerce core wstawia:
     .woocommerce ul.products::before,
     .woocommerce ul.products::after { content: " "; display: table; }
   jako stary float-based clearfix. W CSS Grid te pseudo-elementy stają się pełnoprawnymi
   grid items i zajmują sloty (stąd pusty pierwszy kafelek w archiwum + tylko 1 produkt
   w ostatnim rzędzie, bo ::after też zjada slot na końcu).

   Zabijamy je TRIPLE-insurance:
     1) content: none  → spec: pseudo-element w ogóle nie jest generowany
     2) display: none  → fallback jeśli ktoś nadpisze content
     3) position: absolute + w:0 + h:0 → nuclear: nawet gdyby się wyrenderowały,
        wypadają z grida i mają zero wymiaru.
   Prefix `html body` podbija specyficzność ponad wszystko co core WC czy pluginy mogą robić. */
html body ul.products::before,
html body ul.products::after,
html body .woocommerce ul.products::before,
html body .woocommerce ul.products::after,
html body .woocommerce-page ul.products::before,
html body .woocommerce-page ul.products::after,
html body .products::before,
html body .products::after {
  content: none !important;
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* ====================================================================
   Block 8 — Homepage "Jak to działa?" — horizontal timeline (v2)
   Layout: eyebrow + tytuł + podtytuł; pod spodem <ol> timeline.
   Desktop: 5 kroków w linii, z poziomym connectorem (gradient).
   Mobile (<=768px): przełącza na pion, connector pionowy po lewej.
   ==================================================================== */
.how { padding: 56px 0 72px; }
.how__header { flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; }
.how__header .section__title { max-width: 680px; }

.how__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(238, 132, 32, 0.1);
  color: var(--c-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Timeline poziomy (desktop) */
.how__timeline {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
/* Linia łącząca kroki — gradient (poziomy) */
.how__timeline::before {
  content: "";
  position: absolute;
  top: 28px; /* po środku .how__marker (56/2) */
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent 0, var(--c-accent) 15%, var(--c-accent) 85%, transparent 100%);
  opacity: 0.25;
  z-index: 0;
}

.how__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}

.how__marker {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--c-accent);
  box-shadow: 0 8px 20px rgba(42, 45, 60, 0.08), 0 0 0 6px #fff;
  border: 2px solid var(--c-accent);
  margin-bottom: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.how__step:hover .how__marker {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(238, 132, 32, 0.25), 0 0 0 6px #fff;
}
.how__num {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(238, 132, 32, 0.35);
}
.how__icon { display: inline-flex; }

.how__content { max-width: 220px; }
.how__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--c-text, #2a2d3c);
}
.how__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text-soft, #64656d);
  margin: 0 0 12px;
}
.how__usp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(163, 194, 73, 0.12);
  color: #5a7a1a;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
.how__usp svg { flex-shrink: 0; }

@media (max-width: 1024px) {
  .how__timeline { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
  .how__timeline::before { display: none; }
}
@media (max-width: 640px) {
  .how__timeline {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 24px;
    border-left: 2px dashed rgba(238, 132, 32, 0.3);
  }
  .how__step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
  }
  .how__marker {
    margin-bottom: 0;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(42, 45, 60, 0.08), 0 0 0 4px #fff;
  }
  .how__marker::after {
    content: "";
    position: absolute;
    left: -27px; /* 24px padding + 4px shadow - 1 */
    top: 21px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
  }
  .how__content { max-width: none; flex: 1; }
  .how__title { font-size: 16px; }
}

/* ====================================================================
   Block 9 — Main nav + mega menu
   ==================================================================== */
.nav { background: #fff; border-bottom: 1px solid #ece8e3; position: relative; z-index: 50; }
.nav__container { position: relative; }
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap; /* zapobiega zawijaniu "Ostatnie sztuki" do 2 linii */
  min-height: 54px;
}
.nav__item { position: static; }
.nav__item--push { margin-left: auto; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text, #2a2d3c);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav__link:hover,
.nav__item.is-open > .nav__link {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.nav__chevron {
  transition: transform .2s ease;
  opacity: 0.6;
}
.nav__item.is-open .nav__chevron { transform: rotate(180deg); opacity: 1; }

/* "Ostatnie sztuki" — subtelna pozycja na równi z menu:
   czerwony tekst + pulsująca kropka. Hover = delikatne tło, BEZ gradientu,
   BEZ przycisku. Wszystko w linii z resztą pozycji. */
.nav__item--hot .nav__link,
.nav__link--hot {
  color: #d4341a;
  font-weight: 700;
  padding: 16px 16px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link--hot:hover {
  color: #d4341a;
  background: rgba(212, 52, 26, 0.06);
  border-bottom-color: #d4341a;
}
.nav__hot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  animation: nav-hot-pulse 1.6s infinite;
}
@keyframes nav-hot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.nav__item--push { margin-left: auto; }

/* Na bardzo wąskich desktopach, jeśli i tak się nie mieści — pozwalamy zawinąć,
   ale tylko gdy absolutnie konieczne. */
@media (max-width: 1100px) and (min-width: 961px) {
  .nav__link { padding: 16px 12px; font-size: 13.5px; }
  .nav__item--hot .nav__link,
  .nav__link--hot { padding: 16px 12px; }
}

/* Mega menu panel — full-width, pozycjonowany absolutnie względem .nav */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid #ece8e3;
  box-shadow: 0 20px 40px rgba(42, 45, 60, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 60;
  pointer-events: none;
}
.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mega__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  padding: 28px 0;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}
.mega__col { list-style: none; margin: 0; padding: 0; }
.mega__col li { margin: 0; }
.mega__col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--c-text, #2a2d3c);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mega__col a:hover {
  background: rgba(238, 132, 32, 0.08);
  color: var(--c-accent);
}
.mega__name { font-weight: 500; }
.mega__count {
  font-size: 11px;
  font-weight: 700;
  color: #9a9a9a;
  background: #f5f2ee;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 8px;
}
.mega__col a:hover .mega__count { background: rgba(238, 132, 32, 0.15); color: var(--c-accent); }

.mega__promo {
  border-left: 1px solid #ece8e3;
  padding-left: 28px;
}
.mega__promo-card {
  background: linear-gradient(135deg, rgba(238, 132, 32, 0.08) 0%, rgba(163, 194, 73, 0.08) 100%);
  border-radius: 14px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mega__promo-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mega__promo-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--c-text, #2a2d3c);
  line-height: 1.3;
}
.mega__promo-desc {
  font-size: 13px;
  color: var(--c-text-soft, #64656d);
  margin: 0 0 14px;
  line-height: 1.5;
  flex: 1;
}
.mega__promo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
}
.mega__promo-link:hover { gap: 10px; }

/* Mobile: burger-opened nav */
@media (max-width: 960px) {
  .nav__list { display: none; flex-direction: column; padding: 8px 0 16px; }
  .nav.is-open .nav__list { display: flex; }
  .nav__item--push { margin-left: 0; }
  .nav__link { padding: 12px 0; width: 100%; justify-content: space-between; border-bottom: 1px solid #ece8e3; }
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    pointer-events: auto;
  }
  .nav__item.is-open .mega { max-height: 1200px; }
  .mega__inner { grid-template-columns: 1fr; gap: 16px; padding: 8px 0 16px; }
  .mega__cols { grid-template-columns: 1fr; gap: 2px; }
  .mega__promo { border-left: 0; padding-left: 0; }
}

/* ====================================================================
   Block 10 — Payment/shipping logos (v2: unified white chips)
   Strategia: wszystkie logo w białych "chipsach" 56x34 z borderem,
   SVG wklejone w środku jako pure content (bez własnych rect-bg).
   Na ciemnym tle footera wyglądają spójnie, jak znaczki na Allegro/Amazon.
   ==================================================================== */
.pay-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 56px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.pay-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}
.pay-logo svg {
  height: 28px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* Dla brandów gdzie SVG ma własne pełne tło (InPost/DPD/DHL/GLS/Poczta) —
   pozwalamy mu wypełnić całego chipa, bez wewnętrznego paddingu. */
.pay-logo[data-brand="inpost"],
.pay-logo[data-brand="dpd"],
.pay-logo[data-brand="dhl"],
.pay-logo[data-brand="gls"],
.pay-logo[data-brand="poczta"] {
  padding: 0;
  border-color: transparent;
}
.pay-logo[data-brand="inpost"] svg,
.pay-logo[data-brand="dpd"] svg,
.pay-logo[data-brand="dhl"] svg,
.pay-logo[data-brand="gls"] svg,
.pay-logo[data-brand="poczta"] svg {
  height: 100%;
  width: 100%;
}

/* Custom-uploaded logo (z Customizera) — zawsze dopasowany do chipsa,
   proporcje zachowane przez object-fit: contain. Max-width zapobiega
   super-szerokim obrazkom rozciągającym chipsa. */
.pay-logo--custom {
  min-width: 56px;
  max-width: 110px;
  padding: 4px 10px;
}
.pay-logo--custom img {
  height: 100%;
  max-height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Footer: poprawki trust row — chipsy zastąpione logotypami */
.footer__trust-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted, #a0a4b0);
}

/* Footer credit bar — na samym dole footera, cała szerokość, subtelny top-border */
.footer__credit-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 0;
  font-size: 11px;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
  text-align: center;
}
.footer__credit-bar a {
  color: var(--c-text-muted);
  text-decoration: none;
  font-weight: 600;
  margin-left: 3px;
  transition: color .15s ease;
}
.footer__credit-bar a:hover { color: var(--c-accent); }

/* ====================================================================
   Block 11 — Strona "Ostatnie sztuki"
   ==================================================================== */
.last-chance__hero {
  background: linear-gradient(135deg, #2a2d3c 0%, #3a3f52 100%);
  color: #fff;
  padding: 64px 0 56px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.last-chance__hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(238, 132, 32, 0.25) 0%, transparent 70%);
  z-index: 0;
}
.last-chance__hero > .container { position: relative; z-index: 1; }
.last-chance__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(238, 132, 32, 0.2);
  color: #ffb764;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.last-chance__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.1;
}
.last-chance__lead {
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
}
.last-chance__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.last-chance__perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.last-chance__perks svg { color: #a3c249; }

.last-chance__body { padding-bottom: 64px; }
.last-chance__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ece8e3;
}
.last-chance__count {
  font-size: 14px;
  color: var(--c-text-soft, #64656d);
  font-weight: 500;
}
.last-chance__count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  margin-right: 8px;
  animation: lc-pulse 1.6s infinite;
  vertical-align: middle;
}
@keyframes lc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

.last-chance__empty {
  text-align: center;
  padding: 80px 20px;
  background: #faf8f5;
  border-radius: 16px;
}
.last-chance__empty h2 { font-size: 24px; margin: 0 0 10px; }
.last-chance__empty p { color: var(--c-text-soft); margin: 0 0 24px; }

/* ====================================================================
   Block 12 — Cart page (redesign pod konwersję)
   Skupione: sticky summary, trust strip, big CTA, dyskretny kod rabatowy.
   ==================================================================== */
.relivoo-cart { padding: 32px 0 64px; }
.relivoo-cart__header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ece8e3;
}
.relivoo-cart__header h1 {
  font-size: 28px;
  margin: 0 0 6px;
}
.relivoo-cart__header p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: 14px;
}
/* Steps na górze (1. Koszyk → 2. Dostawa → 3. Płatność) */
.relivoo-cart__steps {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  background: #faf8f5;
  border-radius: 12px;
  padding: 6px;
}
.relivoo-cart__step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-soft);
  border-radius: 8px;
  position: relative;
}
.relivoo-cart__step--active {
  background: #fff;
  color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(42,45,60,0.06);
}
.relivoo-cart__step-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e3dc;
  color: var(--c-text-soft);
  font-size: 12px;
  font-weight: 800;
}
.relivoo-cart__step--active .relivoo-cart__step-num {
  background: var(--c-accent);
  color: #fff;
}

.relivoo-cart__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.relivoo-cart__main { min-width: 0; }
.relivoo-cart__aside { position: sticky; top: 20px; }

/* Items list */
.relivoo-cart__items {
  background: #fff;
  border: 1px solid #ece8e3;
  border-radius: 14px;
  overflow: hidden;
}
.relivoo-cart__item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #f3efe9;
  align-items: center;
}
.relivoo-cart__item:last-child { border-bottom: 0; }
.relivoo-cart__item-thumb {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: #faf8f5;
  border: 1px solid #ece8e3;
  overflow: hidden;
}
.relivoo-cart__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.relivoo-cart__item-body { min-width: 0; }
.relivoo-cart__item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 4px;
  text-decoration: none;
  display: block;
  line-height: 1.4;
}
.relivoo-cart__item-title:hover { color: var(--c-accent); }
.relivoo-cart__item-variant {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}
.relivoo-cart__item-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.relivoo-cart__item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e0dcd4;
  border-radius: 8px;
  overflow: hidden;
}
.relivoo-cart__item-qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: #faf8f5;
  color: var(--c-text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.relivoo-cart__item-qty button:hover { background: #ece8e3; }
.relivoo-cart__item-qty input {
  width: 40px;
  border: 0;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 0;
  background: #fff;
}
.relivoo-cart__item-remove {
  background: none;
  border: 0;
  color: var(--c-text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.relivoo-cart__item-remove:hover { color: #ef4444; }
.relivoo-cart__item-price {
  text-align: right;
  min-width: 100px;
}
.relivoo-cart__item-price .amount {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
}

/* Summary card */
.relivoo-cart__summary {
  background: #fff;
  border: 1px solid #ece8e3;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(42,45,60,0.04);
}
.relivoo-cart__summary h3 {
  font-size: 18px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ece8e3;
}
.relivoo-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--c-text-soft);
}
.relivoo-cart__summary-row--total {
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid #ece8e3;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
}
.relivoo-cart__summary-row--total .amount { font-size: 22px; color: var(--c-accent); }

.relivoo-cart__cta {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--c-brand) 0%, #c96a10 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  box-shadow: 0 10px 24px rgba(238, 132, 32, 0.32);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.relivoo-cart__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(238, 132, 32, 0.4);
  color: #fff;
}
.relivoo-cart__cta-note {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-text-muted);
}
.relivoo-cart__cta-note svg {
  vertical-align: -2px;
  color: #22c55e;
  margin-right: 4px;
}
.relivoo-cart__accepted {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--c-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.relivoo-cart__accepted .pay-logos {
  justify-content: center;
  gap: 6px;
}
.relivoo-cart__accepted .pay-logo {
  transform: scale(0.82);
  transform-origin: center;
  margin: -4px;
}

/* Trust strip w summary */
.relivoo-cart__trust {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ece8e3;
  display: grid;
  gap: 10px;
}
.relivoo-cart__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--c-text-soft);
  list-style: none;
}
.relivoo-cart__trust svg { color: #a3c249; flex-shrink: 0; }

/* Coupon (discreet) */
.relivoo-cart__coupon {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #ece8e3;
}
.relivoo-cart__coupon-toggle {
  background: none;
  border: 0;
  color: var(--c-text-soft);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.relivoo-cart__coupon-form { display: none; gap: 8px; margin-top: 10px; }
.relivoo-cart__coupon.is-open .relivoo-cart__coupon-form { display: flex; }
.relivoo-cart__coupon-form input {
  flex: 1;
  border: 1px solid #e0dcd4;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Empty state */
.relivoo-cart__empty {
  text-align: center;
  padding: 80px 20px;
  background: #faf8f5;
  border-radius: 16px;
}
.relivoo-cart__empty h2 { font-size: 22px; margin: 0 0 10px; }

@media (max-width: 900px) {
  .relivoo-cart__grid { grid-template-columns: 1fr; }
  .relivoo-cart__aside { position: static; }
  .relivoo-cart__item { grid-template-columns: 72px 1fr; grid-template-areas: "thumb body" "price price"; }
  .relivoo-cart__item-thumb { grid-area: thumb; width: 72px; height: 72px; }
  .relivoo-cart__item-body { grid-area: body; }
  .relivoo-cart__item-price { grid-area: price; text-align: left; padding-top: 8px; border-top: 1px dashed #ece8e3; }
}

/* ====================================================================
   Block 12b — Cart page UPSELLS ("Dorzuć do zamówienia")
   ==================================================================== */
.relivoo-cart-upsells {
  margin: 20px 0 60px;
  padding: 40px 0 48px;
  background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
  border-top: 1px solid #ece8e3;
  border-bottom: 1px solid #ece8e3;
}
.relivoo-cart-upsells__head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}
.relivoo-cart-upsells__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--c-brand);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #ffd9b3;
  margin-bottom: 12px;
}
.relivoo-cart-upsells__eyebrow svg {
  width: 13px;
  height: 13px;
  color: var(--c-brand);
}
.relivoo-cart-upsells__head h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--c-ink-dark);
}
.relivoo-cart-upsells__head p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: 14px;
  line-height: 1.55;
}
.relivoo-cart-upsells__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 991px) {
  .relivoo-cart-upsells__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .relivoo-cart-upsells { padding: 28px 0 32px; margin: 16px 0 40px; }
  .relivoo-cart-upsells__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .relivoo-cart-upsells__head { margin-bottom: 20px; }
}

/* ====================================================================
   Block 13 — Checkout page (v2, redesign pod konwersję)
   Struktura:
     .relivoo-checkout-wrap (container)
       > .relivoo-checkout__header + .relivoo-checkout__steps + free-ship bar
       > form.relivoo-checkout
         > .relivoo-checkout__grid
            .relivoo-checkout__main  (customer_details)
            .relivoo-checkout__aside (sticky summary, order review, trust, płatności)
   ==================================================================== */
.woocommerce-checkout .site-main { padding: 24px 0 64px; }
.woocommerce-checkout h1.entry-title { display: none; } /* ukrywamy domyślny tytuł strony — mamy własny header */
.relivoo-checkout-wrap { padding: 8px 0 56px; }

.relivoo-checkout__header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ece8e3;
  text-align: left;
}
.relivoo-checkout__header h1 {
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.relivoo-checkout__header p {
  margin: 0;
  color: var(--c-text-soft);
  font-size: 14px;
}

.relivoo-checkout__steps {
  display: flex;
  gap: 0;
  margin: 0 0 24px;
  background: #faf8f5;
  border-radius: 12px;
  padding: 6px;
}
.relivoo-checkout__step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-soft);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.relivoo-checkout__step--done { color: #2ea86a; }
.relivoo-checkout__step--active {
  background: #fff;
  color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(42,45,60,0.06);
}
.relivoo-checkout__step-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e3dc;
  color: var(--c-text-soft);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.relivoo-checkout__step--done .relivoo-checkout__step-num {
  background: #2ea86a;
  color: #fff;
}
.relivoo-checkout__step--active .relivoo-checkout__step-num {
  background: var(--c-accent);
  color: #fff;
}

/* GŁÓWNY GRID — wymusza 2 kolumny i neutralizuje domyślne floaty WC */
.relivoo-checkout .relivoo-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  align-items: start;
}
.relivoo-checkout__main { min-width: 0; }
.relivoo-checkout__aside { position: sticky; top: 20px; }

/* Reset starego WC grid (ten z linii 4944 musimy unieważnić — `form.checkout`
   ma teraz display: block, a grid robi wewnętrzny .relivoo-checkout__grid). */
.woocommerce-checkout form.checkout.relivoo-checkout {
  display: block !important;
  grid-template-columns: unset !important;
}
.woocommerce-checkout form.checkout.relivoo-checkout #customer_details,
.woocommerce-checkout form.checkout.relivoo-checkout #order_review_heading,
.woocommerce-checkout form.checkout.relivoo-checkout #order_review {
  grid-column: auto !important;
  position: static;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  background: #fff;
  border: 1px solid #ece8e3;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
  float: none !important;
  width: 100% !important;
}

/* Billing + shipping: obok siebie, jeśli oba widoczne; stackują się na mobile. */
.relivoo-checkout__main #customer_details.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.relivoo-checkout__main #customer_details .col-1,
.relivoo-checkout__main #customer_details .col-2 {
  grid-column: 1 / -1;
}
.woocommerce-checkout h3 {
  font-size: 18px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ece8e3;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection--single {
  width: 100%;
  border: 1px solid #e0dcd4;
  border-radius: 10px;
  padding: 12px 14px !important;
  font-size: 14px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  height: auto !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--c-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(238, 132, 32, 0.15);
}
.woocommerce-checkout .form-row label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

/* Order review — w nowym layoucie jesteśmy W ŚRODKU .relivoo-checkout__summary,
   więc zerujemy pudełkowate style (border/padding/shadow idą na summary). */
.relivoo-checkout .relivoo-checkout__summary {
  background: #fff;
  border: 1px solid #ece8e3;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 24px rgba(42, 45, 60, 0.06);
}
.relivoo-checkout__summary-title {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #ece8e3 !important;
  color: var(--c-ink-dark);
}
.relivoo-checkout__summary-title svg { color: var(--c-brand); flex-shrink: 0; }

.relivoo-checkout #order_review_heading {
  display: none; /* mamy własny nagłówek summary-title */
}
.relivoo-checkout #order_review {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Fallback — jeżeli ktoś nie ma custom form-checkout (nieprawdopodobne, ale): */
.woocommerce-checkout:not(.has-relivoo-checkout) #order_review_heading {
  font-size: 18px;
  margin: 0 0 12px;
  padding: 24px 24px 0;
  background: #fff;
  border: 1px solid #ece8e3;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.woocommerce-checkout:not(.has-relivoo-checkout) #order_review {
  background: #fff;
  border: 1px solid #ece8e3;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 8px 24px 24px;
  box-shadow: 0 4px 20px rgba(42,45,60,0.04);
}
.woocommerce-checkout .shop_table {
  width: 100%;
  border: 0;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  padding: 10px 0;
  border-bottom: 1px dashed #ece8e3;
  background: transparent !important;
  font-size: 13.5px;
}
.woocommerce-checkout .shop_table .order-total td,
.woocommerce-checkout .shop_table .order-total th {
  font-size: 17px;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px solid #ece8e3;
  border-bottom: 0;
}
.woocommerce-checkout .shop_table .order-total .amount { color: var(--c-accent); font-size: 22px; }

/* Payment methods — redesigned */
.woocommerce-checkout #payment {
  background: transparent;
  padding: 0;
  margin: 16px 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: #faf8f5;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  list-style: none;
  transition: border-color .18s ease, background .18s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--c-accent);
  background: #fff;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--c-accent); margin-right: 8px; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; display: inline; }

.woocommerce-checkout #place_order {
  width: 100%;
  background: linear-gradient(135deg, var(--c-accent) 0%, #c96a10 100%);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(238, 132, 32, 0.32);
  transition: transform .18s ease, box-shadow .18s ease;
  text-transform: none;
}
.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(238, 132, 32, 0.4);
}

/* Trust strip w summary checkoutu */
.relivoo-checkout__trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #ece8e3;
  display: grid;
  gap: 9px;
}
.relivoo-checkout__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--c-text-soft);
  line-height: 1.4;
}
.relivoo-checkout__trust svg { color: #a3c249; flex-shrink: 0; }

/* Akceptowane płatności */
.relivoo-checkout__accepted {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed #ece8e3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.relivoo-checkout__accepted-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}
.relivoo-checkout__accepted .pay-logos {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.relivoo-checkout__accepted .pay-logo {
  transform: scale(0.85);
  transform-origin: center;
  margin: -3px;
}

/* Mini-miniatury produktów w order review */
.relivoo-checkout .shop_table td.product-name {
  padding: 12px 0 !important;
  line-height: 1.45;
}
.relivoo-checkout .shop_table td.product-name .product-quantity {
  font-weight: 700;
  color: var(--c-accent);
  font-size: 12px;
}
.relivoo-checkout .shop_table td.product-name dl.variation {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 4px 0 0;
  padding: 0;
}
.relivoo-checkout .shop_table td.product-name dl.variation dt,
.relivoo-checkout .shop_table td.product-name dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 500;
}
.relivoo-checkout .shop_table td.product-name dl.variation dt::after { content: ": "; }
.relivoo-checkout .shop_table td.product-name dl.variation dd + dt { margin-left: 6px; }
.relivoo-checkout .shop_table td.product-name dl.variation p { display: inline; margin: 0; }

@media (max-width: 991px) {
  .relivoo-checkout .relivoo-checkout__grid { grid-template-columns: 1fr; gap: 20px; }
  .relivoo-checkout__aside { position: static; order: -1; }
  /* Na mobile summary na górę — user widzi kwotę zanim wypełni formularz */
  .relivoo-checkout__main { order: 0; }
}

@media (max-width: 767px) {
  .relivoo-checkout-wrap { padding: 4px 0 40px; }
  .relivoo-checkout__header { margin-bottom: 14px; padding-bottom: 14px; }
  .relivoo-checkout__header h1 { font-size: 22px !important; }
  .relivoo-checkout__header p { font-size: 13px; }
  .relivoo-checkout__steps { padding: 4px; margin-bottom: 16px; }
  .relivoo-checkout__step { padding: 10px 6px; font-size: 11.5px; gap: 5px; }
  .relivoo-checkout__step-num { width: 20px; height: 20px; font-size: 10.5px; }
  .relivoo-checkout__step-num svg { width: 11px; height: 11px; }

  .relivoo-checkout .relivoo-checkout__summary { padding: 16px; }
  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 { padding: 16px; border-radius: 12px; }
}

/* FALLBACK (gdy ktoś nie używa form-checkout.php) — stare reguły */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout:not(.relivoo-checkout) { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout:not(.relivoo-checkout) #order_review_heading,
  .woocommerce-checkout form.checkout:not(.relivoo-checkout) #order_review { grid-column: 1; position: static; }
}

/* =========================================================
   Najlepsze okazje (homepage + 404) — mocny badge -%
   ========================================================= */

.section--deals { padding: 56px 0 72px; }
.section--deals .section__header { margin-bottom: 28px; }

.deals__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #fff1e7 0%, #ffe3c9 100%);
  color: #c34a11;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  margin-bottom: 10px;
}
.deals__eyebrow svg { color: #ee8420; }

/* Lepszy, bardziej "promocyjny" badge -% na karcie produktu. Działa globalnie. */
ul.products > li.product .product__sale,
.product__sale {
  background: linear-gradient(135deg, #e5342b 0%, #ee8420 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(229, 52, 43, .28);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
}

/* =========================================================
   404 — "Tej strony nie ma, ale mamy super przeceny"
   ========================================================= */

.notfound { padding: 0 0 72px; }
.notfound__hero {
  padding: 72px 24px 40px;
  text-align: center;
  background:
    radial-gradient(1200px 400px at 50% -100px, rgba(238,132,32,.12), transparent 60%),
    linear-gradient(180deg, #fff9f2 0%, #fff 100%);
  border-radius: var(--radius);
  margin: 32px auto 48px;
}
.notfound__copy { max-width: 640px; margin: 0 auto; }
.notfound__code {
  display: inline-block;
  font-size: 14px; font-weight: 900; letter-spacing: .2em;
  color: var(--c-brand);
  background: #fff; border: 1px solid #ffd9b3;
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.notfound__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--c-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.notfound__lead {
  font-size: 17px;
  color: var(--c-text-soft);
  margin: 0 0 26px;
  line-height: 1.55;
}

.notfound__search { max-width: 520px; margin: 0 auto 20px; }
.notfound__search form { margin: 0; }

.notfound__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.notfound__ctas .btn {
  padding: 14px 22px;
  font-weight: 700;
  border-radius: 12px;
}
.notfound__ctas .btn--ghost {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.notfound__ctas .btn--ghost:hover {
  background: var(--c-surface-2);
}

.notfound__perks {
  display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center;
  list-style: none; padding: 0; margin: 0;
  color: var(--c-text-soft); font-size: 13px;
}
.notfound__perks li {
  display: inline-flex; align-items: center; gap: 6px;
}
.notfound__perks svg { color: var(--c-brand); }

@media (max-width: 600px) {
  .notfound__hero { padding: 56px 18px 32px; margin: 20px 12px 36px; }
  .notfound__ctas .btn { width: 100%; justify-content: center; }
}

/* ====================================================================
   Block 13 — MOBILE POLISH (master pass)
   Całościowe, defensywne poprawki na mobile: usuwamy poziomy scroll,
   skalujemy nagłówki, kompaktujemy header/topbar/footer, dopasowujemy
   przyciski i grid, upewniamy się że burger + drawer działają wizualnie.
   ==================================================================== */

/* 1) Żaden element nie może rozpychać viewportu */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }

/* 2) Kontener — mniej paddingu na małych ekranach */
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding: 40px 0; }
  .section__head { margin-bottom: 24px; }
  .section__head h2,
  .section h2 { font-size: clamp(22px, 5.5vw, 28px); }
  .section__head p { font-size: 14px; }
}
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .section { padding: 32px 0; }
}

/* 3) Topbar — skompaktowany, tylko telefon na bardzo wąskich */
@media (max-width: 768px) {
  .topbar { font-size: 12px; }
  .topbar__inner { gap: 10px; padding: 6px 0; justify-content: center; }
  .topbar__list { display: none; }
  .topbar__hours { display: none; }
  .topbar__contact { gap: 14px; font-size: 12px; }
  .topbar__contact a { gap: 5px; }
  .topbar__contact svg { width: 12px; height: 12px; }
}
@media (max-width: 400px) {
  .topbar__contact a[href^="mailto"] { display: none; }
}

/* 4) Header — mobile: logo + akcje w jednym rzędzie, search ukryty za ikoną lupy
   (dropdown nad headerem po kliknięciu .js-search-toggle). */
@media (max-width: 960px) {
  /* .header musi być position:relative żeby absolute .search-wrap pozycjonował się względem niego */
  .header { position: sticky; }
  .header__inner {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px;
    padding: 10px 16px;
    position: relative;
  }
  .header__inner .logo { justify-self: start; grid-column: 1; }
  .header__actions { grid-column: 3; justify-self: end; gap: 2px; }

  /* Wrapper → absolute dropdown pod headerem. display: none -> block on .is-open */
  .header__inner .search-wrap {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 12px 16px 14px !important;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 6;
    animation: relivoo-slide-down 180ms ease-out;
  }
  .header__inner .search-wrap.is-open { display: block !important; }
  .header__inner .search-wrap .search {
    max-width: none !important;
    margin: 0 !important;
    justify-self: stretch !important;
    border-radius: 999px;
  }

  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn__badge { min-width: 16px; height: 16px; font-size: 9px; }
  .icon-btn--search { display: inline-flex !important; }
  .logo img { height: 34px !important; }
}
@keyframes relivoo-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .icon-btn--search ukryta na desktop */
@media (min-width: 961px) {
  .icon-btn--search { display: none !important; }
  /* .search-wrap jest jak przezroczysty — wewnętrzny .search dziedziczy grid od header__inner */
  .search-wrap { display: contents; }
}

/* 4b) Ładniejszy przycisk "Szukaj" — spójny, brandowy, z gradientem i cieniem */
.search__btn {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(238, 132, 32, 0.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.search__btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(238, 132, 32, 0.32);
  transform: translateY(-1px);
}
.search__btn:active { transform: translateY(0); }

@media (max-width: 480px) {
  .header__inner .search-wrap { padding: 10px 14px 12px !important; }
  .search input { padding: 10px 12px; font-size: 14px; }
  .search svg { margin-left: 14px; width: 16px; height: 16px; }
  .search__btn { padding: 9px 16px; font-size: 13px; }
}

/* 5) Mobile drawer dla nav — pełnoekranowe menu z animacją */
@media (max-width: 960px) {
  .nav { display: block; }
  .nav > .container,
  .nav .nav__container {
    padding: 0;
  }
  .nav__list {
    position: fixed;
    top: 0; right: 0;
    width: min(88vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0,0,0,.15);
    padding: 72px 20px 40px;
    margin: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 80;
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }
  .nav.is-open .nav__list { transform: translateX(0); }
  /* Backdrop */
  body.nav-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 79;
    animation: relivooFadeIn .2s ease;
  }
  body.nav-open { overflow: hidden; }
  /* Header musi być nad backdropem, żeby burger pozostał klikalny (do zamknięcia drawera) */
  body.nav-open .header { z-index: 81; }
  body.nav-open .header .icon-btn--menu { position: relative; z-index: 82; }
  .nav__list > li { width: 100%; border-bottom: 1px solid var(--c-border); }
  .nav__list > li:last-child { border-bottom: 0; }
  .nav__link {
    padding: 14px 4px !important;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    justify-content: space-between;
    border-bottom: 0 !important;
  }
  .nav__link .nav__chevron { transition: transform .2s; }
  .nav__item.is-open > .nav__link .nav__chevron { transform: rotate(180deg); }
  .nav__item--push { margin-left: 0 !important; margin-top: auto; }
  /* Mega w drawerze — accordion */
  .mega { background: transparent !important; }
  .mega__inner { padding: 4px 0 12px !important; }
  .mega__cols { grid-template-columns: 1fr !important; gap: 0 !important; }
  .mega__col { padding: 0; margin: 0; list-style: none; }
  .mega__col a {
    padding: 10px 12px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
    border-radius: 8px;
    color: var(--c-text);
  }
  .mega__col a:hover { background: var(--c-surface-2); }
  .mega__count { font-size: 12px; color: var(--c-text-muted); }
  .mega__promo { display: none; }
}
@keyframes relivooFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 6) Hero — mobile (dużo lepszy wygląd na telefonach) */
@media (max-width: 960px) {
  .hero {
    padding: 24px 0 28px !important;
    /* Delikatniejszy background-gradient na mobile, żeby tekst był czytelny. */
    background:
      radial-gradient(circle at 85% 10%, rgba(238, 132, 32, 0.14), transparent 50%),
      var(--c-bg) !important;
    /* Hero NIGDY nie może wypchnąć się poza viewport na mobile. */
    overflow: hidden !important;
  }
  /* Container w hero — zachowuje padding 16/14px (nie resetujemy tu), żeby
     content miał oddech od krawędzi ekranu. */
  .hero > .container.hero__grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero__grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
    max-width: 100%;
  }
  /* Visual NAD tekstem — przyciąga uwagę jako pierwszy element.
     Hardguard na overflow: !important zmusza wymiary, żeby nie rozpierał
     się przez stare reguły `min-height: 360px` / `height: auto` / 
     `overflow: visible`. */
  .hero__visual {
    order: -1;
    aspect-ratio: 16 / 10 !important;
    max-height: 280px !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Zostawiamy `visible`, żeby floating badges mogły wystawać za ramkę
       zdjęcia (sam <img> ma border-radius + overflow działa wewnątrz img). */
    overflow: visible !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .hero__visual img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: var(--radius-lg) !important;
  }
  .hero__text {
    order: 0;
    text-align: left;
    min-width: 0;
    max-width: 100%;
  }

  .hero__eyebrow {
    font-size: 10.5px;
    padding: 4px 11px;
    margin-bottom: 12px;
    gap: 6px;
    letter-spacing: 0.02em;
  }
  .hero__eyebrow svg { width: 11px; height: 11px; }
  .hero h1 {
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
    /* Zabezpieczenie przed wystaniem poza viewport na wąskich ekranach */
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
    max-width: 100%;
  }
  .hero__lead {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    max-width: 100%;
  }
  .hero__cta {
    display: flex !important;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
  }
  .hero__cta .btn {
    flex: 1 1 50%;
    min-width: 0;
    justify-content: center;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    gap: 6px;
  }
  .hero__cta .btn svg { width: 14px !important; height: 14px !important; }

  /* Stats — siatka 3 kolumn, równe kafelki z subtelnym tłem */
  .hero__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px !important;
    margin-top: 4px;
  }
  .hero__stat {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
  }
  .hero__stat > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
  .hero__stat strong {
    font-size: 14.5px !important;
    line-height: 1.1;
    color: var(--c-ink-dark);
  }
  .hero__stat span {
    font-size: 10px !important;
    line-height: 1.25;
    margin-top: 2px;
    display: block;
    color: var(--c-text-soft);
  }

  /* Floating badges — mniejsze, przyczepione do rogów, nigdy poza ramką */
  .hero__float {
    font-size: 10.5px;
    padding: 6px 10px;
    gap: 6px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(42, 45, 60, 0.12);
  }
  .hero__float svg { width: 13px; height: 13px; }
  .hero__float--1 { top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; }
  .hero__float--2 { bottom: 10px !important; right: 10px !important; top: auto !important; left: auto !important; }
}

@media (max-width: 480px) {
  .hero { padding: 18px 0 22px !important; }
  .hero__visual { aspect-ratio: 5 / 4 !important; max-height: 240px !important; padding: 0 !important; }

  .hero h1 { font-size: clamp(20px, 6.8vw, 26px) !important; }
  .hero__lead { font-size: 13.5px !important; }

  /* CTA buttons — nadal obok siebie ale mniejsze */
  .hero__cta .btn { padding: 11px 10px !important; font-size: 13px !important; }

  /* Stats — na bardzo wąskim ekranie jeszcze kompaktowe */
  .hero__stats { gap: 6px !important; }
  .hero__stat  { padding: 8px 4px; border-radius: 10px; }
  .hero__stat strong { font-size: 13px !important; }
  .hero__stat span   { font-size: 9.5px !important; }

  /* Floats schowane na mikro ekranach — zbyt się tłoczyły */
  .hero__float--2 { display: none !important; }
}

@media (max-width: 360px) {
  .hero__float { display: none !important; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { flex: 1 1 auto; width: 100%; }
}

/* 7) Trust bar, conditions, categories, how-it-works — responsive grid */
@media (max-width: 768px) {
  .trustbar { padding: 16px 0; }
  .trustbar__list { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .trustbar__item { font-size: 13px; gap: 8px; }
  .trustbar__item svg { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .trustbar__list { grid-template-columns: 1fr !important; }
}

/* 8) Steps / How it works */
@media (max-width: 768px) {
  .steps, .how__grid, .how__timeline { grid-template-columns: 1fr !important; gap: 16px; }
  .step, .how__step { padding: 20px; }
}

/* 9) Product grid — 2 kolumny do 480, 1 kolumna niżej (tylko wybranie) */
@media (max-width: 768px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .product__title { font-size: 12px !important; }
  .product__price { font-size: 15px; }
}
@media (max-width: 380px) {
  ul.products { gap: 10px; }
  .product-card__body, .product__body { padding: 12px !important; }
}

/* 10) Brands + reviews */
@media (max-width: 768px) {
  .brands__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
  .brand-card { padding: 14px 8px; font-size: 13px; }
  .reviews { grid-template-columns: 1fr !important; }
}

/* 11) Buttons — fullwidth tylko w newsletterach / CTA banerach */
@media (max-width: 480px) {
  .cta-banner .btn,
  .club-cta .btn,
  .section__footer .btn { width: 100%; justify-content: center; }
}

/* 12) Footer — mniejsze fonty, scalony layout */
@media (max-width: 991px) {
  .footer__newsletter-strip { padding: 28px 0; }
  .footer__newsletter-inner { gap: 20px; }
  .footer__newsletter-copy h3 { font-size: 20px; }
  .footer__newsletter-copy p { font-size: 13px; }
  .footer__grid { padding: 32px 0 !important; gap: 28px !important; }
}
@media (max-width: 768px) {
  .footer { margin-top: 40px; font-size: 13px; }
  .footer__newsletter-strip { padding: 22px 0; }
  .footer__newsletter-copy h3 { font-size: 18px; }
  .footer__newsletter-copy p { font-size: 12.5px; }
  .footer__newsletter-form input { padding: 10px 14px; font-size: 14px; }
  .footer__newsletter-form button { padding: 10px 18px; font-size: 13px; }
  .footer__grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding: 28px 0 !important; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand .logo--footer img { height: 34px; }
  .footer__about { font-size: 13px; margin-bottom: 14px; }
  .footer__contact li { font-size: 13px; }
  .footer__col h4 { font-size: 12px; margin-bottom: 10px; }
  .footer__links a { font-size: 13px; }
  .footer__trust { padding: 14px 0; }
  .footer__trust-inner { gap: 16px; justify-content: flex-start; }
  .footer__trust-group { gap: 10px; }
  .footer__trust-label { font-size: 11px; }
  .pay-logo { transform: scale(.88); transform-origin: left center; }
  .footer__bottom { padding: 14px 0; }
  .footer__copy { font-size: 12px; text-align: center; }
  .footer__legal { font-size: 12px; gap: 14px; justify-content: center; }
  .footer__credit-bar { font-size: 10.5px; padding: 8px 0; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .footer__trust-inner { flex-direction: column; align-items: flex-start; }
  .pay-logos { flex-wrap: wrap; }
}

/* 12.5) Homepage sekcje — mobile polish (kompleksowy redesign) */
@media (max-width: 768px) {
  /* Sekcje — kompaktowe paddingi pionowe, strona nie jest "za długa" */
  .section { padding: 36px 0 !important; }
  .section__header { margin-bottom: 18px !important; text-align: left; }
  .section__title h2,
  .section h2 { font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.2 !important; margin-bottom: 6px; }
  .section__subtitle,
  .section__title p { font-size: 13.5px !important; line-height: 1.5; }
  .section__eyebrow,
  .deals__eyebrow { font-size: 10.5px !important; padding: 4px 10px !important; }
  .section__eyebrow svg,
  .deals__eyebrow svg { width: 11px !important; height: 11px !important; }

  /* Kategorie — 2 kolumny, kompaktowe kafelki z ładnym borderem */
  .categories__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .category-card {
    padding: 14px 10px !important;
    border-radius: 14px;
    text-align: center;
  }
  .category-card__title { font-size: 13px !important; line-height: 1.3; }
  .category-card__count { font-size: 10.5px !important; }
  .category-card svg,
  .category-card img,
  .category-card__icon { width: 34px !important; height: 34px !important; margin: 0 auto 8px !important; }

  /* Conditions (stany techniczne) — 2x2 grid */
  .conditions__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .condition-card { padding: 14px 12px !important; border-radius: 12px; }
  .condition-card h3,
  .condition-card__title { font-size: 13px !important; margin-bottom: 4px; }
  .condition-card p,
  .condition-card__desc { font-size: 12px !important; line-height: 1.45; }
  .condition-card__badge { font-size: 10px !important; padding: 2px 8px !important; }

  /* How it works / timeline — kompaktowe kroki */
  .how, .how__grid, .how__timeline { gap: 14px !important; }
  .how__step, .step { padding: 16px 14px !important; border-radius: 14px; }
  .how__step-number,
  .step__num,
  .how__step-num { width: 32px !important; height: 32px !important; font-size: 15px !important; margin-bottom: 10px !important; }
  .how__step h3,
  .step__title,
  .how__step-title { font-size: 14.5px !important; margin-bottom: 6px; }
  .how__step p,
  .step__desc,
  .how__step-desc { font-size: 13px !important; line-height: 1.5; }

  /* Best deals — eyebrow + sekcja */
  .section--deals { padding: 36px 0 !important; }

  /* Brands — 3 kolumny z mniejszymi logotypami */
  .brands__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .brand-card { padding: 14px 8px !important; border-radius: 12px; min-height: 60px; }
  .brand-card img { max-height: 26px !important; max-width: 100%; }
  .brand-card span { font-size: 12px !important; }

  /* Reviews — 1 kolumna, komfortowe karty */
  .reviews__grid, .reviews { grid-template-columns: 1fr !important; gap: 12px !important; }
  .review-card { padding: 18px 16px !important; border-radius: 14px; }
  .review-card__stars { font-size: 13px !important; margin-bottom: 8px; }
  .review-card__body,
  .review-card p { font-size: 13.5px !important; line-height: 1.55; }
  .review-card__author { font-size: 12px !important; margin-top: 10px; }

  /* Club CTA — centrum uwagi */
  .club-cta__inner,
  .club-cta { padding: 28px 20px !important; border-radius: 18px; text-align: center; }
  .club-cta h2 { font-size: 20px !important; margin-bottom: 8px !important; }
  .club-cta p  { font-size: 13.5px !important; margin-bottom: 14px !important; }
  .club-cta .btn { width: 100%; justify-content: center; }

  /* FAQ — read-friendly, pełna szerokość */
  .faq { max-width: 100%; }
  .faq__grid,
  .faq__list { grid-template-columns: 1fr !important; gap: 8px; }
  .faq__item,
  .faq details {
    border-radius: 12px;
    border: 1px solid var(--c-border);
  }
  .faq__item summary,
  .faq details summary {
    font-size: 14px !important;
    padding: 14px 16px !important;
    line-height: 1.4;
  }
  .faq__item[open] summary,
  .faq details[open] summary { padding-bottom: 8px !important; }
  .faq__answer,
  .faq details > *:not(summary) {
    font-size: 13.5px !important;
    line-height: 1.55;
    padding: 0 16px 14px !important;
  }

  /* Pokaż więcej — na pełną szerokość */
  .section__footer .btn,
  .section-products__more { width: 100%; justify-content: center; }

  /* Zapobiegnij horizontal-scroll na mobile */
  body, html { overflow-x: clip; }
  .container { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 480px) {
  .section { padding: 28px 0 !important; }
  .section__header { margin-bottom: 14px !important; }
  .section__title h2,
  .section h2 { font-size: clamp(19px, 5.8vw, 23px) !important; }

  .categories__grid { gap: 8px !important; }
  .category-card { padding: 12px 8px !important; }
  .category-card__title { font-size: 12px !important; }
  .category-card svg,
  .category-card__icon { width: 30px !important; height: 30px !important; }

  .conditions__grid { grid-template-columns: 1fr !important; }

  .brands__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .brand-card { padding: 12px 6px !important; min-height: 54px; }
  .brand-card img { max-height: 22px !important; }

  .club-cta h2 { font-size: 18px !important; }

  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* 13) Product page — dopasowanie na mobile */
@media (max-width: 768px) {
  .product-page__grid { grid-template-columns: 1fr !important; gap: 24px; }
  .product-title, .product_title { font-size: clamp(20px, 5vw, 26px) !important; }
  .outlet-notice { padding: 12px 14px; font-size: 12px; }
  .buy-box { padding: 18px; }
  .buy-box__price-current { font-size: 1.6rem !important; }
  .woocommerce-tabs .tabs li a { font-size: 13px !important; padding: 10px 12px !important; }
  .related.products, .upsells.products { padding-top: 28px !important; margin-top: 28px !important; }
  .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 14) Mini-cart slide-in — pełna szerokość na małych ekranach */
@media (max-width: 480px) {
  .mini-cart__panel { width: 100vw !important; max-width: 100vw !important; }
  .mini-cart__header { padding: 14px 16px; }
  .mini-cart__body { padding: 12px 16px; }
  .mini-cart__footer { padding: 12px 16px; }
}

/* 15) Archive (shop) — toolbar + filters na mobile */
@media (max-width: 960px) {
  .archive-layout { grid-template-columns: 1fr !important; }
  .archive-filters { position: static !important; max-height: none !important; height: auto !important; }
  .archive-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .archive-toolbar .woocommerce-result-count { font-size: 12px; }
}

/* 16) My Account — single column na mobile */
@media (max-width: 768px) {
  .relivoo-account { grid-template-columns: 1fr !important; gap: 18px; }
  .woocommerce-MyAccount-navigation { position: static !important; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100% !important; float: none !important; }
}

/* 17) Cart / checkout — pełna szerokość, sticky total bottom */
@media (max-width: 768px) {
  .woocommerce-cart-form__contents { display: block; }
  .woocommerce-cart-form__contents tr { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
  .woocommerce-cart-form__contents thead { display: none; }
  .woocommerce-cart-form__contents td { border: 0 !important; padding: 0 !important; display: flex; align-items: center; }
  .woocommerce-cart-form__contents td.product-thumbnail { grid-row: 1 / 3; }
  .woocommerce-cart-form__contents td.product-name { grid-column: 2 / 4; font-weight: 600; }
  .woocommerce-cart-form__contents td.product-price { display: none; }
  .woocommerce-cart-form__contents td.product-subtotal { grid-column: 2; color: var(--c-brand); font-weight: 700; }
  .woocommerce-cart-form__contents td.product-quantity { grid-column: 3; }
  .cart-collaterals { float: none !important; width: 100% !important; }
}

/* 18) Tap targets — minimum 44x44 (a11y / iOS guideline) */
@media (max-width: 768px) {
  .btn, button.btn, a.btn { min-height: 44px; }
  .nav__link { min-height: 44px; }
}

/* ====================================================================
   Block 14 — Page header (Ostatnie sztuki + podobne strony)
   Lekki, jasny header w stylu homepage/archive, bez ciemnego gradientu.
   ==================================================================== */
.page-header--last-chance {
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border-bottom: 1px solid var(--c-border);
  padding: 48px 0 36px;
}
.page-header--last-chance .container { position: relative; }
.page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--c-brand);
  border: 1px solid #ffd9b3;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(238, 132, 32, 0.08);
}
.page-header__eyebrow svg { color: var(--c-brand); }
.page-header__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.page-header__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-text-soft);
  max-width: 640px;
  margin: 0 0 22px;
}
.page-header__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-header__perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
}
.page-header__perks svg { color: var(--c-brand); }
@media (max-width: 768px) {
  .page-header--last-chance { padding: 32px 0 24px; }
  .page-header__lead { font-size: 14px; }
  .page-header__perks li { font-size: 12px; padding: 5px 10px; }
}

/* ====================================================================
   Block 15 — Free shipping progress bar (cart + mini-cart)
   ==================================================================== */
.relivoo-shipbar {
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border: 1px solid #ffd9b3;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: 13.5px;
  color: var(--c-text);
}
.relivoo-shipbar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  line-height: 1.4;
}
.relivoo-shipbar__head strong { color: var(--c-text); }
.relivoo-shipbar__head .amount { font-weight: 700; color: var(--c-brand); }
.relivoo-shipbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-brand);
  border: 1px solid #ffd9b3;
  flex-shrink: 0;
}
.relivoo-shipbar__track {
  width: 100%;
  height: 6px;
  background: #ffe8cf;
  border-radius: 3px;
  overflow: hidden;
}
.relivoo-shipbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-brand) 0%, #f7a24b 100%);
  border-radius: 3px;
  transition: width .4s ease;
}
.relivoo-shipbar.is-reached {
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
  border-color: #bbf7d0;
}
.relivoo-shipbar.is-reached .relivoo-shipbar__icon {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}
.relivoo-shipbar.is-reached .relivoo-shipbar__fill {
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}
/* W mini-cart bar jest węższy i bardziej kompaktowy */
.relivoo-shipbar--mini-cart {
  margin: 4px 18px 10px;
  padding: 10px 12px;
  font-size: 12.5px;
}
.relivoo-shipbar--mini-cart .relivoo-shipbar__icon {
  width: 24px; height: 24px;
}

/* ====================================================================
   Block 16 — Pusty koszyk (cart-empty.php)
   ==================================================================== */
.relivoo-cart-empty { padding: 48px 0 80px; }
.relivoo-cart-empty__hero {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
  padding: 40px 24px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border: 1px solid var(--c-border);
  border-radius: 20px;
}
.relivoo-cart-empty__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-brand);
  border: 2px dashed #ffd9b3;
  margin: 0 auto 20px;
}
.relivoo-cart-empty__hero h1 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  margin: 0 0 10px;
}
.relivoo-cart-empty__hero p {
  font-size: 15.5px;
  color: var(--c-text-soft);
  margin: 0 0 24px;
  line-height: 1.55;
}
.relivoo-cart-empty__ctas {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 22px;
}
.relivoo-cart-empty__ctas .btn { min-width: 200px; }
.relivoo-cart-empty__perks {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px;
  font-size: 12.5px;
  color: var(--c-text-soft);
}
.relivoo-cart-empty__perks li {
  display: inline-flex; align-items: center; gap: 6px;
}
.relivoo-cart-empty__perks svg { color: var(--c-brand); }
.relivoo-cart-empty__deals h2 {
  text-align: center;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  margin: 0 0 24px;
}
@media (max-width: 600px) {
  .relivoo-cart-empty__hero { padding: 28px 16px; border-radius: 16px; }
  .relivoo-cart-empty__icon { width: 72px; height: 72px; }
  .relivoo-cart-empty__icon svg { width: 40px; height: 40px; }
  .relivoo-cart-empty__ctas .btn { width: 100%; justify-content: center; }
}

/* ====================================================================
   Block 17 — Checkout polish (dopełnienie block 13)
   ==================================================================== */
.woocommerce-checkout { background: #faf8f5; }
.woocommerce-checkout .site-main > .container,
.woocommerce-checkout .entry-content { max-width: var(--container, 1240px); }

/* Większa przestrzeń + subtelny przegląd przed formularzem */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

/* Checkout review card: miniaturki produktów w tabeli */
.woocommerce-checkout .shop_table .product-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--c-text);
}
.woocommerce-checkout .shop_table .product-name .product-quantity {
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 13px;
}
.woocommerce-checkout .shop_table tbody td,
.woocommerce-checkout .shop_table tfoot td,
.woocommerce-checkout .shop_table tfoot th {
  padding: 12px 0 !important;
}

/* Payment box — chip-cards */
.woocommerce-checkout #payment {
  background: transparent !important;
}
.woocommerce-checkout #payment .payment_box {
  background: #fff7ed !important;
  border: 1px solid #ffd9b3 !important;
  border-radius: 10px;
  padding: 12px 14px !important;
  font-size: 13px;
  color: var(--c-text);
  margin: 8px 0 12px !important;
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; }

/* Terms + privacy */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0;
  font-size: 13px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 12px; color: var(--c-text-soft); margin: 0 0 8px; }

/* Form errors */
.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
  border-radius: 10px;
  padding: 14px 18px;
  list-style: none;
  font-size: 14px;
  margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-message {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 20px;
}
.woocommerce-checkout .form-row .required { color: #dc2626; }

/* Checkout coupon link "Masz kupon? Kliknij" → zamień na chip */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  padding: 10px 14px;
  font-size: 13px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon { font-weight: 700; color: var(--c-brand); }

/* Login box */
.woocommerce-checkout .woocommerce-form-login {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px;
  margin: 12px 0 20px;
}

/* Wymuszony solid summary header */
.woocommerce-checkout #order_review {
  box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
}

/* CTA place order — dodaj lock icon w kwadracie */
.woocommerce-checkout #place_order::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
}

/* Section header wariant z licznikiem (Ostatnie sztuki) */
.section__header--simple { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.section__count {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-text-soft);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section__count-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: lc-pulse 1.6s infinite;
}