@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
/* Resseler (Jumlo) catalogue — v3.
   One flat brand hero, a segmented filter and two clean tiles per row on phones. Everything is driven by the
   company's own brand colour (--jv-a) + logo; a provider's colour (--pc) only tints its own tile.
   Short phones shrink hero + tiles so ALL providers stay on one screen. */
.jvs, .jvs *{ box-sizing:border-box; }
.jvs{ --a:var(--jv-a,#6d28d9); --a2:var(--jv-a-2,#4c1d95); position:relative; max-width:760px; margin:0 auto 96px; padding:14px 14px 0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--jv-ink,#0f172a);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
@media (min-width:900px){ .jvs{ margin-bottom:64px; padding-top:22px; } }
.jvs a{ -webkit-tap-highlight-color:transparent; text-decoration:none; color:inherit; }
.jvs button{ font-family:inherit; }
.jvs-orb{ display:none; }

body.jumlo-catalog-page{ background:
    radial-gradient(60% 34% at 100% 0%, color-mix(in oklab, var(--jv-a) 16%, transparent), transparent 70%),
    radial-gradient(54% 30% at 0% 46%, color-mix(in oklab, var(--jv-a-2) 11%, transparent), transparent 70%),
    var(--bg,#f6f7fb); background-attachment:fixed; }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────── */
.jvs-hero{ container-type:inline-size; position:relative; overflow:hidden; isolation:isolate; border-radius:26px; padding:16px; color:#fff;
  background:linear-gradient(135deg, color-mix(in oklab, var(--a) 88%, #fff) 0%, var(--a) 45%, var(--a2) 100%);
  box-shadow:0 18px 36px color-mix(in oklab, var(--a) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.28); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) both; }
.jvs-hero::before{ content:''; position:absolute; z-index:-1; top:-90px; right:-70px; width:280px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.42), transparent 66%); animation:jvsAurora 11s ease-in-out infinite alternate; }
.jvs-hero::after{ content:''; position:absolute; z-index:-1; left:-40px; bottom:-70px; width:240px; height:240px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--a2) 80%, #000) 0%, transparent 68%); opacity:.5; }
.jvs-top{ position:absolute; top:16px; right:16px; z-index:2; display:block; }
.jvs-eyebrow{ display:none; }
.jvs-live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 11px; border-radius:99px;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.jvs-live i{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:jvsDot 2s ease-out infinite; }
.jvs-live.off i{ background:#fca5a5; animation:none; }

.jvs-brand{ display:flex; align-items:center; gap:14px; padding-right:86px; }
.jvs-logo{ position:relative; flex:none; width:58px; height:58px; padding:6px; border-radius:19px; background:rgba(255,255,255,.97);
  box-shadow:0 12px 24px rgba(10,6,50,.3), 0 0 0 4px rgba(255,255,255,.18); animation:jvsLogoIn .9s cubic-bezier(.34,1.56,.64,1) both, jvsFloat 5.5s ease-in-out 1.2s infinite; }
.jvs-logo img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; border-radius:12px; }
.jvs-logo::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat; animation:jvsGloss 5s ease-in-out 1.8s infinite; }
.jvs-ping{ position:absolute; inset:-3px; border-radius:22px; border:2px solid rgba(255,255,255,.6); pointer-events:none; animation:jvsPing 3.4s ease-out infinite; }
.jvs-ping.p2{ animation-delay:1.5s; }
.jvs-hi{ margin:0; min-width:0; font-size:calc(clamp(19px, 8.4cqw, 28px) * var(--k,1)); font-weight:800; line-height:1.12; letter-spacing:-.3px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#fff;
  text-shadow:0 2px 14px rgba(10,6,50,.22); animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .1s both; }

.jvs-best{ position:relative; display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 14px 10px 10px; border-radius:20px; overflow:hidden; color:#fff;
  background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 20px rgba(10,6,50,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .2s, background .2s; animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .2s both; }
.jvs-best:active{ transform:scale(.98); background:rgba(255,255,255,.24); }
.jvs-best::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation:jvsGloss 6s ease-in-out 2.4s infinite; }
.jvs-av{ flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4), 0 6px 14px rgba(10,6,50,.2); }
.jvs-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.jvs-best-t{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:none; }
.jvs-best-t small{ font-size:clamp(8.5px, 2.9cqw, 10px); font-weight:700; letter-spacing:.08em; opacity:.88; white-space:nowrap; }
.jvs-best[data-mode="sales"] .jvs-best-t small::before{ content:'🔥 '; letter-spacing:0; }
.jvs-best[data-mode="rate"] .jvs-best-t small::before{ content:'★ '; letter-spacing:0; }
.jvs-best-t b{ display:inline-flex; align-items:center; gap:2px; font-size:calc(clamp(20px, 9cqw, 28px) * var(--k,1)); font-weight:800; line-height:1.05; letter-spacing:-.2px; white-space:nowrap; }
.jvs-best-t b em{ align-self:center; margin-left:.4em; font-style:normal; font-size:max(9.5px, .42em); font-weight:800; letter-spacing:0; padding:.32em .7em; border-radius:99px; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.jvs-best-r{ flex:1; margin-left:auto; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:6px; text-align:right; }
.jvs-best-r span{ font-size:clamp(11px, 3.9cqw, 13px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.jvs-best-r em{ display:none; font-style:normal; font-size:11px; font-weight:800; padding:4px 9px; border-radius:99px; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); white-space:nowrap; }

/* ── filter ─────────────────────────────────────────────────────────────────────────────────── */
.jvs-sheet{ position:relative; margin-top:14px; }
.jvs-tabs{ container-type:inline-size; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:18px; background:rgba(255,255,255,.78);
  box-shadow:0 6px 18px color-mix(in oklab, var(--a) 12%, rgba(15,23,42,.06)), inset 0 0 0 1px rgba(255,255,255,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) .3s both; }
.jvs-tabs button{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 8px; border:0; border-radius:14px; background:transparent;
  font-size:clamp(10px, 3.5cqw, 12px); font-weight:700; letter-spacing:.03em; white-space:nowrap; color:var(--jv-mute,#64748b); cursor:pointer; transition:color .25s, background .25s, box-shadow .25s, transform .2s; }
.jvs-tabs button i{ display:none; }
.jvs-tabs button span{ min-width:1.7em; padding:.15em .5em; border-radius:99px; font-size:.92em; font-weight:800; letter-spacing:0; color:var(--a); background:color-mix(in oklab, var(--a) 14%, #fff); }
.jvs-tabs button:active{ transform:scale(.96); }
.jvs-tabs button.on{ color:#fff; background:linear-gradient(135deg, var(--a), var(--a2)); box-shadow:0 8px 16px color-mix(in oklab, var(--a) 38%, transparent); animation:jvsTabOn .4s cubic-bezier(.34,1.56,.64,1); }
.jvs-tabs button.on span{ color:var(--a); background:#fff; }

/* ── tiles ──────────────────────────────────────────────────────────────────────────────────── */
.jvs-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (min-width:640px){ .jvs-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
.jvs-card{ --pc:var(--a); container-type:inline-size; position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic em" "info info" "rate rate"; align-items:start; row-gap:8px; column-gap:8px;
  padding:13px 13px 14px; border-radius:22px; overflow:hidden; cursor:pointer; color:var(--jv-ink,#0f172a);
  background:linear-gradient(165deg, color-mix(in oklab, var(--pc) 13%, #fff) 0%, #fff 62%);
  box-shadow:0 10px 24px color-mix(in oklab, var(--pc) 17%, rgba(15,23,42,.08)), 0 1px 2px rgba(15,23,42,.05), inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 26%, #fff);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.jvs-card::after{ content:''; position:absolute; right:-26px; top:-26px; width:92px; height:92px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--pc) 24%, transparent), transparent 70%); }
.jvs-card.best{ box-shadow:0 14px 28px color-mix(in oklab, var(--pc) 26%, rgba(15,23,42,.08)), inset 0 0 0 2px color-mix(in oklab, var(--pc) 58%, #fff); }
@media (hover:hover){ .jvs-card:not(.off):hover{ transform:translateY(-4px); box-shadow:0 18px 34px color-mix(in oklab, var(--pc) 28%, rgba(15,23,42,.1)), inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 45%, #fff); } }
.jvs-card:not(.off):active{ transform:scale(.97); }
.jvs-ic{ grid-area:ic; position:relative; z-index:1; width:calc(clamp(34px, 30cqw, 46px) * var(--k,1)); height:calc(clamp(34px, 30cqw, 46px) * var(--k,1)); border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px color-mix(in oklab, var(--pc) 58%, transparent), 0 8px 16px color-mix(in oklab, var(--pc) 28%, transparent); }
.jvs-ic img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.jvs-ic::before{ content:''; position:absolute; right:-3px; bottom:-3px; z-index:2; width:13px; height:13px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2.5px #fff; animation:jvsDot 2.4s ease-out infinite; }
.jvs-card.off .jvs-ic::before{ background:#ef4444; animation:none; }
.jvs-info{ grid-area:info; position:relative; z-index:1; min-width:0; }
.jvs-info b{ display:block; font-size:calc(clamp(12px, 10.6cqw, 15.5px) * var(--k,1)); font-weight:700; line-height:1.25; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jvs-sub, .jvs-bar, .jvs-btn, .jvs-chip{ display:none; }
.jvs-rt{ display:contents; }
.jvs-rt b{ grid-area:rate; justify-self:start; position:relative; z-index:1; display:inline-flex; align-items:center; gap:.24em; max-width:100%; min-width:0; overflow:hidden; padding:.26em .28em .26em .42em; border-radius:.6em;
  font-size:calc(clamp(11px, 100cqw / (.58 * var(--nl,5) + .27 * var(--pl,6) + 1.9), 25px) * var(--k,1)); font-weight:800; line-height:1; letter-spacing:0; color:color-mix(in oklab, var(--pc) 64%, #0f172a);
  background:linear-gradient(180deg, color-mix(in oklab, var(--pc) 16%, #fff), color-mix(in oklab, var(--pc) 8%, #fff));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--pc) 24%, #fff), 0 4px 10px color-mix(in oklab, var(--pc) 14%, transparent); }
.jvs-rt b em{ display:inline-block; font-style:normal; font-size:max(9px, .43em); font-weight:800; letter-spacing:0; padding:.32em .62em; border-radius:99px; color:color-mix(in oklab, var(--pc) 70%, #0f172a); background:#fff; box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--pc) 26%, #fff); white-space:nowrap; }

/* unavailable: neutral grey, not tappable, "Lama heli karo" where the rate would be */
.jvs-card.off{ --pc:#94a3b8; cursor:not-allowed; background:linear-gradient(165deg,#f1f3f7,#f8f9fb 70%); box-shadow:0 4px 12px rgba(15,23,42,.05), inset 0 0 0 1.5px #e3e6ee; }
.jvs-card.off .jvs-ic{ filter:grayscale(1); opacity:.7; box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px #d5d9e3; }
.jvs-card.off .jvs-info b{ color:#8a90a6; }
.jvs-card.off .jvs-rt b.jvs-na{ padding:2px 0 0; overflow:visible; background:none; box-shadow:none; font-size:calc(clamp(10.5px, 8.8cqw, 13px) * var(--k,1)); font-weight:700; letter-spacing:0; color:#8a90a6; line-height:1.25; white-space:normal; }

/* ── motion ─────────────────────────────────────────────────────────────────────────────────── */
.jvs-card.jvs-pop{ animation:jvsPop .5s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) both; }
@keyframes jvsRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes jvsPop{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes jvsLogoIn{ from{ opacity:0; transform:scale(.4) rotate(-14deg); } to{ opacity:1; transform:none; } }
@keyframes jvsFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -4px; } }
@keyframes jvsGloss{ 0%,55%{ background-position:-160% 0; } 100%{ background-position:160% 0; } }
@keyframes jvsPing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes jvsAurora{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-50px,40px) scale(1.2); } }
@keyframes jvsDot{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2.5px #fff; } 70%,100%{ box-shadow:0 0 0 7px rgba(34,197,94,0), 0 0 0 2.5px #fff; } }
@keyframes jvsTabOn{ from{ transform:scale(.9); } to{ transform:scale(1); } }
.jvs-live i{ animation-name:jvsLiveDot; }
@keyframes jvsLiveDot{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.7); } 70%,100%{ box-shadow:0 0 0 7px rgba(74,222,128,0); } }

/* ── short phones: everything must still fit on one screen ──────────────────────────────────── */
@media (max-width:639px) and (max-height:780px){
  .jvs{ padding-top:10px; --k:.88; }
  .jvs-hero{ padding:12px; border-radius:22px; }
  .jvs-top{ top:12px; right:12px; }
  .jvs-brand{ gap:11px; padding-right:78px; }
  .jvs-logo{ width:46px; height:46px; padding:5px; border-radius:15px; } .jvs-ping{ border-radius:18px; }
  .jvs-best{ margin-top:10px; padding:8px 12px 8px 8px; border-radius:17px; }
  .jvs-av{ width:36px; height:36px; }
  .jvs-sheet{ margin-top:10px; } .jvs-tabs button{ min-height:36px; }
  .jvs-list{ gap:10px; margin-top:10px; }
  .jvs-card{ padding:11px 11px 12px; row-gap:6px; border-radius:19px; }
  .jvs-ic::before{ width:11px; height:11px; }
}
@media (max-width:639px) and (min-height:781px) and (max-height:920px){
  .jvs.jv-dense{ padding-top:10px; --k:.88; }
  .jvs.jv-dense .jvs-hero{ padding:12px; border-radius:22px; }
  .jvs.jv-dense .jvs-top{ top:12px; right:12px; }
  .jvs.jv-dense .jvs-brand{ gap:11px; padding-right:78px; }
  .jvs.jv-dense .jvs-logo{ width:46px; height:46px; padding:5px; border-radius:15px; } .jvs.jv-dense .jvs-ping{ border-radius:18px; }
  .jvs.jv-dense .jvs-best{ margin-top:10px; padding:8px 12px 8px 8px; border-radius:17px; }
  .jvs.jv-dense .jvs-av{ width:36px; height:36px; } .jvs.jv-dense
  .jvs.jv-dense .jvs-sheet{ margin-top:10px; } .jvs.jv-dense .jvs-tabs button{ min-height:36px; }
  .jvs.jv-dense .jvs-list{ gap:10px; margin-top:10px; }
  .jvs.jv-dense .jvs-card{ padding:11px 11px 12px; row-gap:6px; border-radius:19px; }
  .jvs.jv-dense .jvs-ic::before{ width:11px; height:11px; }
}
@media (max-width:639px) and (max-height:700px){
  .jvs{ --k:.8; }
  .jvs.jv-dense .jvs-best{ display:none; }
  .jvs-hero{ padding:10px 12px; }
  .jvs-logo{ width:40px; height:40px; border-radius:13px; }
  .jvs-list{ gap:8px; } .jvs-card{ padding:9px 10px 10px; row-gap:5px; }
}
/* roomier layouts when there are only a few providers */
@media (max-width:639px) and (min-height:781px){ .jvs.jv-roomy .jvs-card{ padding-block:18px; } }

/* the install pill sits in the hero corner: keep the company name clear of it */
.jvs.has-install .jvs-brand{ padding-right:92px; }

@media (prefers-reduced-motion:reduce){
  .jvs *, .jvs *::before, .jvs *::after{ animation:none !important; transition:none !important; }
}