/* ============================================================
   Revolife Product Cards — front
   ============================================================ */
.revolife-cards {
  --rvf-bg: #ececec;
  --rvf-card: #e3e3e3;
  --rvf-ink: #1a1a1d;
  --rvf-muted: #7a7a80;
  --rvf-sale: #e0252b;
  --rvf-radius: 26px;

  /* mocno wymuszamy siatkę niezależnie od motywu */
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;     /* gdy rodzic to flex — wymuś nowy, pełny wiersz */
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  list-style: none !important;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  color: var(--rvf-ink);
}
/* usuń ewentualne clearfixy motywu na kontenerze */
.revolife-cards::before,
.revolife-cards::after { content: none !important; display: none !important; }

.revolife-cards *,
.revolife-cards *::before,
.revolife-cards *::after { box-sizing: border-box; }

/* reset stylów motywu na pojedynczej karcie (gdy motyw celuje w produkty) */
.revolife-cards .rvf-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px !important;
  float: none !important;
  list-style: none !important;
  text-align: center;
  background: var(--rvf-card) !important;
  border: 0 !important;
  border-radius: var(--rvf-radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.revolife-cards .rvf-card::before,
.revolife-cards .rvf-card::after { content: none !important; }
/* zdjęcie produktu — wymuszamy duży rozmiar mimo stylów motywu/WooCommerce */
.revolife-cards .rvf-box-link { display: block !important; width: 100% !important; border: 0 !important; }
.revolife-cards .rvf-box {
  width: 124% !important;
  max-width: none !important;
  height: auto !important;
  margin: -30px -12% 0 !important;
  box-shadow: none !important;
}

/* ---------- karta ---------- */
.rvf-card {
  position: relative;
  background: var(--rvf-card);
  border-radius: var(--rvf-radius);
  padding: 24px 24px 24px;
  overflow: hidden;
  isolation: isolate;
  /* wejście */
  opacity: 0;
  transform: translateY(40px) scale(.97);
  animation: rvf-cardIn .8s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * .08s);
}

/* kaskadowe wejście elementów */
.rvf-bag, .rvf-badge, .rvf-visual, .rvf-title, .rvf-price {
  opacity: 0;
  transform: translateY(16px);
  animation: rvf-fadeUp .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.rvf-bag    { animation-delay: calc(var(--i,0) * .08s + .15s); }
.rvf-badge  { animation-delay: calc(var(--i,0) * .08s + .22s); }
.rvf-visual { animation-delay: calc(var(--i,0) * .08s + .28s); transform: none; }
.rvf-title  { animation-delay: calc(var(--i,0) * .08s + .40s); }
.rvf-price  { animation-delay: calc(var(--i,0) * .08s + .48s); }

/* ---------- ikona koszyka (Add to cart) ---------- */
.rvf-bag {
  position: absolute; top: 24px; left: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #d6d6d6;
  display: grid; place-items: center; z-index: 6;
  color: #2a2a2e; cursor: pointer; text-decoration: none;
  transition: background .2s ease, transform .2s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.rvf-bag:hover { background: var(--rvf-ink); color: #fff; transform: scale(1.1); }
.rvf-bag:active { transform: scale(.92); }
.rvf-bag.added, .rvf-bag.loading { background: #1a8f4a; color: #fff; }
.rvf-bag svg { width: 20px; height: 20px; }
/* ukryj domyślny link „Zobacz koszyk", który WooCommerce dokleja po dodaniu */
.rvf-bag + .added_to_cart { display: none !important; }

/* ---------- pastylka promocji (tylko gdy jest promocja) ---------- */
.revolife-cards .rvf-badge {
  position: absolute; top: 24px; right: 24px;
  background: #111114; color: #fff;
  font-family: "Fira Code", monospace !important;
  font-weight: 500 !important; font-size: 14px !important; line-height: 1;
  padding: 9px 16px; border-radius: 999px; z-index: 7;
  letter-spacing: -.02em;
}

/* ---------- obszar wizualny ---------- */
.revolife-cards .rvf-visual { position: relative !important; padding-top: 78px !important; overflow: visible !important; }

/* ornament — wrapper robi wejście, .rvf-blob kręci się w nieskończoność */
.rvf-blob-wrap {
  position: absolute; top: 13%; right: 3%;
  width: 44%; aspect-ratio: 1; z-index: 1;
  opacity: 0; transform: scale(.6) translateY(10px);
  animation: rvf-ornIn .7s cubic-bezier(.2,.9,.3,1.2) forwards;
  animation-delay: calc(var(--i,0) * .08s + .34s);
}
.rvf-blob {
  width: 100%; height: 100%;
  animation: rvf-spin 16s linear infinite;   /* ciągły obrót wokół własnej osi */
  will-change: transform;
}
.rvf-blob img { width: 100%; height: 100%; object-fit: contain; display: block; }

.rvf-halo {
  position: absolute; top: 8%; right: 1%;
  width: 48%; aspect-ratio: 1; border-radius: 50%;
  z-index: 0; filter: blur(42px); opacity: .4;
  animation: rvf-pulse 6s ease-in-out infinite;
}

/* główne zdjęcie — duże, podciągnięte ujemnym marginesem */
.rvf-box-link { display: block; position: relative; z-index: 3; }
.rvf-box {
  display: block;
  width: 124%;
  margin: -30px -12% 0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.rvf-card:hover .rvf-box { transform: translateY(-5px); }

/* ---------- teksty ---------- */
.revolife-cards .rvf-title {
  position: relative; z-index: 5;
  text-align: center !important;
  font-family: "Archivo Black", sans-serif !important;
  font-size: 16px !important; font-weight: 400 !important;
  letter-spacing: -.02em !important; line-height: 1.1 !important;
  color: var(--rvf-ink) !important;
  white-space: nowrap;                 /* zawsze jedna linia (JS dopasowuje rozmiar) */
  overflow: hidden;                    /* fallback zanim JS dopasuje */
  text-overflow: ellipsis;
  margin: -22px -14px 0 !important;
  padding: 0 !important;
}
.revolife-cards .rvf-title a { color: inherit !important; text-decoration: none !important; font: inherit !important; }

.revolife-cards .rvf-price { text-align: center !important; margin: 6px 0 0 !important; font-family: "Archivo Black", sans-serif !important; font-weight: 400 !important; font-size: 22px !important; color: var(--rvf-ink) !important; }
.revolife-cards .rvf-price del, .revolife-cards .rvf-price ins, .revolife-cards .rvf-price .amount { font-family: "Archivo Black", sans-serif !important; font-weight: 400 !important; }
.revolife-cards .rvf-price del { color: #8a8a90 !important; text-decoration: line-through !important; font-weight: 600 !important; font-size: 19px !important; margin-right: 10px !important; opacity: 1 !important; }
.revolife-cards .rvf-price del .amount { color: inherit !important; }
.revolife-cards .rvf-price ins { color: var(--rvf-sale) !important; text-decoration: none !important; background: none !important; }
.revolife-cards .rvf-price ins .amount { color: inherit !important; }
.revolife-cards .rvf-price .amount { font-weight: 700 !important; }

/* linia od skryptu „najniższa cena z 30 dni" (jeśli wepnie się w hook) */
.rvf-card .rvf-lowest,
.rvf-card .wc-30-day-lowest { text-align: center; color: var(--rvf-muted); font-size: 11px; margin-top: 5px; }

/* ---------- przycisk (hover, zarezerwowane miejsce — karta się nie rozciąga) ---------- */
.revolife-cards .rvf-cta.button {
  display: block; width: 100%;
  margin-top: 8px; padding: 10px;
  border: none; border-radius: 999px;
  background: var(--rvf-ink); color: #fff;
  font-family: "Fira Code", monospace !important; font-weight: 500; font-size: 13px;
  letter-spacing: -.01em; text-align: center; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.rvf-card:hover .rvf-cta.button { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rvf-cta.button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.rvf-cta.button:hover::after { animation: rvf-shine .9s ease; }
.rvf-cta.button.loading { opacity: .7; }
.rvf-cta.button.added { background: #1a8f4a; }
/* ukryj doklejony link „Zobacz koszyk" przy CTA */
.rvf-cta + .added_to_cart { display: none !important; }

/* ---------- toast ---------- */
.rvf-toast {
  position: fixed; top: 24px; right: 24px; z-index: 99999;
  background: #1a8f4a; color: #fff;
  padding: 12px 18px; border-radius: 14px;
  font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  transform: translateX(140%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.rvf-toast.show { transform: translateX(0); }

/* ---------- keyframes ---------- */
@keyframes rvf-spin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes rvf-pulse  { 0%,100% { transform: scale(1); opacity:.4; } 50% { transform: scale(1.1); opacity:.6; } }
@keyframes rvf-cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rvf-fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes rvf-ornIn  { to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes rvf-shine  { to { transform: translateX(120%); } }

/* ---------- responsywność ---------- */
@media (max-width: 1024px) { .revolife-cards { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 680px) {
  .revolife-cards { grid-template-columns: 1fr !important; max-width: 460px; margin-inline: auto; }
  /* na mobilu CTA zawsze widoczne (większe pole dotykowe) */
  .revolife-cards .rvf-cta.button {
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
    padding: 14px !important; font-size: 14px; min-height: 48px;
  }
  .revolife-cards .rvf-bag { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .revolife-cards * { animation-duration: .001ms !important; animation-delay: 0s !important; }
  .rvf-blob { animation: none; }
}

/* ============================================================
   v1.4.0 — konwersja / UX
   ============================================================ */

/* wydajność: karty poza ekranem nie liczą layoutu */
.revolife-cards .rvf-card { content-visibility: auto; contain-intrinsic-size: 520px; }

/* focus dostępność */
.revolife-cards a:focus-visible,
.revolife-cards button:focus-visible,
.rvf-modal a:focus-visible,
.rvf-modal button:focus-visible {
  outline: 3px solid #2a7fff !important; outline-offset: 2px; border-radius: 8px;
}

/* ---------- badge'y na zdjęciu (bestseller / UMŁ) ---------- */
.revolife-cards .rvf-onimg {
  position: absolute; left: 0; right: 0; top: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  z-index: 4; pointer-events: none;
}
.revolife-cards .rvf-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Fira Code", monospace !important;
  font-size: 11.5px; font-weight: 500; letter-spacing: -.02em;
  padding: 6px 12px; border-radius: 999px; line-height: 1;
  background: #111114; color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  transition-delay: .1s;
}
.revolife-cards .rvf-tag svg { width: 13px; height: 13px; }
.revolife-cards .rvf-tag--uml { background: #0d5c63; }
/* pojawiają się płynnie po najechaniu na kartę/zdjęcie */
.revolife-cards .rvf-card:hover .rvf-tag { opacity: 1; transform: translateY(0) scale(1); }
.revolife-cards .rvf-card:hover .rvf-tag:nth-child(2) { transition-delay: .18s; }
/* na dotyku pokazane od razu */
@media (hover: none) {
  .revolife-cards .rvf-tag { opacity: 1; transform: none; }
}

/* ---------- oceny (czarne gwiazdki) ---------- */
.revolife-cards .rvf-rating {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; min-height: 18px;
}
.revolife-cards .rvf-stars { display: inline-flex; gap: 2px; }
.revolife-cards .rvf-star {
  width: 15px; height: 15px; display: inline-block;
  background: #d4d4d6;
  -webkit-mask: var(--rvf-star) center/contain no-repeat;
          mask: var(--rvf-star) center/contain no-repeat;
  --rvf-star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.8 5.9 20.3l1.3-6.7-5-4.6 6.8-.8z'/></svg>");
}
.revolife-cards .rvf-star.is-full { background: #1a1a1d; }
.revolife-cards .rvf-star.is-half { background: linear-gradient(90deg,#1a1a1d 50%,#d4d4d6 50%); }
.revolife-cards .rvf-rating-num { font-family: "Fira Code", monospace; font-size: 12.5px; font-weight: 600; color: #1a1a1d; }
.revolife-cards .rvf-rating-count { font-family: "Poppins", sans-serif; font-size: 12px; color: #7a7a80; }
/* gdy używany jest widget TrustMate — próbujemy zczernić jego gwiazdki */
.revolife-cards .rvf-rating--tm { justify-content: center; }
.revolife-cards .rvf-rating--tm svg [fill]:not([fill="none"]),
.revolife-cards .rvf-rating--tm svg path { fill: #1a1a1d; }

/* ---------- pasek zaufania ---------- */
.rvf-trustbar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px;
  margin-top: 28px; padding: 18px 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  font-family: "Poppins", sans-serif;
}
.rvf-trust { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: #3a3a40; }
.rvf-trust svg { width: 20px; height: 20px; color: #1a1a1d; }

/* ---------- modal cross-sell ---------- */
.rvf-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 18px; font-family: "Poppins", sans-serif; }
.rvf-modal[hidden] { display: none; }
.rvf-modal__overlay { position: absolute; inset: 0; background: rgba(15,15,18,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.rvf-modal.is-open .rvf-modal__overlay { opacity: 1; }
.rvf-modal__box {
  position: relative; width: min(560px, 100%);
  background: #fff; border-radius: 22px; padding: 26px 26px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  transform: translateY(16px) scale(.97); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  max-height: 90vh; overflow: auto;
}
.rvf-modal.is-open .rvf-modal__box { transform: none; opacity: 1; }
.rvf-modal__x { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 26px; line-height: 1; color: #9a9aa1; cursor: pointer; }
.rvf-modal__head { display: flex; align-items: center; gap: 12px; }
.rvf-modal__check { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #1a8f4a; color: #fff; display: grid; place-items: center; font-size: 18px; }
.rvf-modal__title { font-family: "Archivo Black", sans-serif; font-size: 17px; display: block; }
.rvf-modal__sub { font-size: 13px; color: #7a7a80; }
.rvf-modal__xtitle { font-family: "Archivo Black", sans-serif; font-size: 14px; margin: 20px 0 12px; }
.rvf-modal__xsell { display: grid; gap: 10px; }
.rvf-xitem { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid #ececec; border-radius: 14px; }
.rvf-xitem img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #f4f4f4; flex: none; }
.rvf-xitem__info { flex: 1; min-width: 0; }
.rvf-xitem__name { font-size: 13.5px; font-weight: 600; color: #1a1a1d; display: block; text-decoration: none; line-height: 1.25; }
.rvf-xitem__price { font-family: "Archivo Black", sans-serif; font-size: 13px; color: #1a1a1d; }
.rvf-xitem__price del { color: #9a9aa1; font-weight: 400; margin-right: 6px; }
.rvf-xitem__add { font-family: "Fira Code", monospace; font-size: 12px; border: 0; background: #1a1a1d; color: #fff; padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.rvf-xitem__add.added { background: #1a8f4a; }
.rvf-modal__actions { display: flex; gap: 10px; margin-top: 22px; }
.rvf-modal__cont { flex: 1; border: 1.5px solid #e0e0e0; background: #fff; color: #1a1a1d; border-radius: 999px; padding: 13px; font-weight: 600; font-size: 14px; cursor: pointer; }
.rvf-modal__checkout { flex: 1.4; text-align: center; background: #1a1a1d; color: #fff; border-radius: 999px; padding: 13px; font-family: "Fira Code", monospace; font-size: 13.5px; text-decoration: none; }
.rvf-modal__checkout:hover { background: #000; }

/* ---------- skeleton (gdy .revolife-cards.is-loading) ---------- */
.revolife-cards.is-loading .rvf-card { position: relative; }
.revolife-cards.is-loading .rvf-card > * { visibility: hidden; }
.revolife-cards.is-loading .rvf-card::after {
  content: ""; position: absolute; inset: 0; visibility: visible;
  background: linear-gradient(100deg,#e6e6e6 30%,#efefef 50%,#e6e6e6 70%);
  background-size: 200% 100%; animation: rvf-shimmer 1.2s infinite;
  border-radius: var(--rvf-radius);
}
@keyframes rvf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }