.wilo-lp{
  --wilo-dark-a:#0c3b33;
  --wilo-dark-b:#15514a;
  --wilo-green:#00963f;
  --wilo-green-dark:#017a34;
  --wilo-mint:#e9f4ec;
  --wilo-mint-2:#e0f0e5;
  --wilo-ink:#1d2b28;
  --wilo-muted:#44544f;
  --wilo-border:#e1e8e5;
  --wilo-radius:14px;
  --wilo-radius-lg:18px;
  --wilo-shadow:0 6px 24px rgba(16,54,48,.08);
  --wilo-star:#f4a723;
  --wilo-blue:#0b6ab0;
  --wilo-blue-bg:#e6f0fa;
  color:var(--wilo-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.wilo-lp *,.wilo-lp *::before,.wilo-lp *::after{box-sizing:border-box;}
.wilo-lp img{max-width:100%;}
.wilo-lp a{color:inherit;text-decoration:none;}

.wilo-lp section{margin-top:clamp(22px,4.5vw,52px);}
.wilo-lp h2{font-size:clamp(19px,2.4vw,24px);margin:0 0 16px;font-weight:700;}
.wilo-lp h3{margin:0;}

.wilo-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wilo-green);color:#fff;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:9px;transition:background .15s;
}
.wilo-lp .wilo-btn{color:#fff;}
.wilo-btn:hover{background:var(--wilo-green-dark);}
.wilo-btn svg{width:14px;height:14px;fill:currentColor;flex:none;}
.wilo-btn--blue{background:var(--wilo-blue);}
.wilo-btn--blue:hover{background:#0a5896;}

.wilo-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--wilo-green-dark);font-weight:600;font-size:14px;
}
.wilo-link svg{width:12px;height:12px;fill:currentColor;flex:none;}
.wilo-link:hover{text-decoration:underline;}
.wilo-plist .wilo-link,
.wilo-article .wilo-link{color:#009c82;text-decoration:none;}
.wilo-prod:hover .wilo-link,
.wilo-article:hover .wilo-link{text-decoration:underline;}

.wilo-ph{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#eef4f1,#dfeee4);
}
.wilo-ph::after{
  content:"";position:absolute;inset:0;
  background:center/38% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23b9d3c6'><path d='M40 6h-9v6h-8a11 11 0 0 0-11 11v3H6v8h6v11a14 14 0 0 0 14 14h6a14 14 0 0 0 14-14V26h6a4 4 0 0 0 0-8h-6v-6h4a4 4 0 0 0 0-8h-2V6a0 0 0 0 0 0 0zM20 26a3 3 0 0 1 3-3h8v6H20z'/></svg>");
  opacity:.5;
}

.wilo-stars{
  --rate:5;
  display:inline-block;width:85px;height:15px;vertical-align:-2px;
  background:linear-gradient(90deg,var(--wilo-star) calc(var(--rate)/5*100%),#d7e0dd 0);
  -webkit-mask:left center/17px 15px repeat-x url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='15'><text x='0' y='13' font-size='15' fill='white'>★</text></svg>");
          mask:left center/17px 15px repeat-x url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='15'><text x='0' y='13' font-size='15' fill='white'>★</text></svg>");
}
.wilo-rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--wilo-muted);}

.wilo-hero{
  position:relative;overflow:hidden;
  border-radius:var(--wilo-radius-lg);
  color:#fff;
  background:linear-gradient(115deg,var(--wilo-dark-a),var(--wilo-dark-b));
  margin-top:20px!important;
}
.wilo-hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 140% at 82% 20%,rgba(255,255,255,.18),transparent 55%),
    linear-gradient(100deg,var(--wilo-dark-a) 0%,rgba(12,59,51,.82) 38%,rgba(12,59,51,.25) 100%),
    url("/image/wilo/cerpadlo-wilo-na-terase.webp");
  background-size:auto,auto,cover;
  background-position:center,center,center 58%;
  background-repeat:no-repeat;
}
.wilo-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  padding:clamp(24px,4vw,44px);
}
.wilo-hero__title{
  font-size:clamp(30px,5.4vw,52px);line-height:1.08;font-weight:800;margin:0 0 14px;
}
.wilo-hero__title b{color:#6fc99a;font-weight:800;}
.wilo-hero__lead{
  max-width:34ch;font-size:clamp(15px,1.8vw,17px);color:rgba(255,255,255,.85);margin:0 0 10px;
}
.wilo-hero__claim{font-weight:700;letter-spacing:.02em;color:#fff;margin:0;}

.wilo-hero__usp{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:14px;
}
.wilo-hero__usp li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:rgba(255,255,255,.92);}
.wilo-hero__usp .wilo-ico{
  flex:none;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
}
.wilo-hero__usp .wilo-ico::after{
  content:"";width:18px;height:18px;
  background:#c7e9d4;
  -webkit-mask:var(--wilo-m) center / contain no-repeat;
          mask:var(--wilo-m) center / contain no-repeat;
}
/* =========================================================================
   IKONY – načítané ze souborů /image/wilo/*.svg (maska, barvu řeší
   background-color u ::after pravidel). Musí být servírováno přes web
   server; přes file:// se ikony nenačtou.
   ------------------------------------------------------------------------- */
.wilo-ico--quality{--wilo-m:url("/image/wilo/badge-check.svg");}
.wilo-ico--eco{--wilo-m:url("/image/wilo/leaf.svg");}
.wilo-ico--stock{--wilo-m:url("/image/wilo/package-check.svg");}
.wilo-ico--support{--wilo-m:url("/image/wilo/headset.svg");}

/* =========================================================================
   SEGMENTY – Dům a zahrada / Pro profesionály
   ========================================================================= */
.wilo-segments{display:grid;grid-template-columns:1fr;gap:18px;}
.wilo-segment{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--wilo-border);border-radius:var(--wilo-radius);
  box-shadow:var(--wilo-shadow);
  padding:26px;
  min-height:210px;
  display:flex;align-items:stretch;gap:16px;      /* ikona vlevo, text vedle ní */
}
.wilo-segment__media{            /* fotka segmentu, vlevo plynule do bílé */
  position:absolute;top:0;right:0;bottom:0;width:66%;
  background:center right/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 30%,rgba(0,0,0,.6) 55%,#000 80%);
          mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 30%,rgba(0,0,0,.6) 55%,#000 80%);
}
@media (max-width:639px){.wilo-segment__media{width:52%;}}   /* na mobilu užší fotka, ať nejde pod text */
.wilo-segment__media--home{background-image:url("/image/wilo/dum-zahrada-cerpadlo.webp");}
.wilo-segment__media--pro{background-image:url("/image/wilo/pro-profesionaly-cerpadla.webp");}
.wilo-segment__ico{
  width:50px;height:50px;border-radius:50%;flex:none;align-self:flex-start;  /* zůstává v rohu */
  display:grid;place-items:center;background:var(--wilo-green-dark);   /* plný zelený kruh */
  position:relative;                             /* nad obrázkem */
}
.wilo-segment__ico::after{
  content:"";width:24px;height:24px;
  background:#fff;                               /* bílá ikona */
  -webkit-mask:var(--wilo-m) center / contain no-repeat;
          mask:var(--wilo-m) center / contain no-repeat;
}
.wilo-segment__ico--home{--wilo-m:url("/image/wilo/house.svg");}
.wilo-segment__ico--pro{--wilo-m:url("/image/wilo/building-2.svg");}
.wilo-segment__body{
  position:relative;flex:1;min-width:0;          /* nad obrázkem, vedle ikony */
  display:flex;flex-direction:column;align-items:flex-start;
}
.wilo-segment h2{margin:0 0 8px;}
.wilo-segment p{
  margin:0 0 18px;color:var(--wilo-muted);font-size:15px;max-width:30ch;     /* kontrast nad fotkou */
  text-shadow:0 0 6px #fff,0 0 12px #fff;
}

/* =========================================================================
   USP KARTY – prodloužená záruka / atest na pitnou vodu
   ========================================================================= */
.wilo-usps{display:grid;grid-template-columns:1fr;gap:18px;}
.wilo-uspcard{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--wilo-mint);border-radius:var(--wilo-radius);
  padding:22px 24px;
}
.wilo-uspcard__ico{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;background:#fff;
}
.wilo-uspcard__ico::after{
  content:"";width:22px;height:22px;
  background:var(--wilo-green-dark);
  -webkit-mask:var(--wilo-m) center / contain no-repeat;
          mask:var(--wilo-m) center / contain no-repeat;
}
.wilo-uspcard__ico--warranty{--wilo-m:url("/image/wilo/shield.svg");}
.wilo-uspcard__ico--atest{--wilo-m:url("/image/wilo/droplets.svg");}
/* modrá varianta karty – ladí s modrým odznakem ATEST */
.wilo-uspcard--blue{background:var(--wilo-blue-bg);}
.wilo-uspcard--blue .wilo-uspcard__ico::after{background:var(--wilo-blue);}
.wilo-uspcard__body{flex:1 1 200px;}
.wilo-uspcard__body h3{font-size:19px;font-weight:700;margin:0 0 6px;}
.wilo-uspcard__body p{margin:0 0 10px;font-size:14px;color:var(--wilo-muted);}

.wilo-uspcard__img{flex:none;height:90px;width:auto;margin-left:auto;}   /* odznak vpravo */

/* =========================================================================
   KATEGORIE
   ========================================================================= */
.wilo-cats{
  background:#fff;border:1px solid var(--wilo-border);
  border-radius:var(--wilo-radius-lg);box-shadow:var(--wilo-shadow);
  padding:clamp(20px,3.5vw,30px);
}
.wilo-cats__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.wilo-cats__grid a{display:block;text-align:center;}
.wilo-cats__img{                 /* OBRÁZEK: kategorie */
  display:block;aspect-ratio:4/3;border-radius:12px;margin-bottom:10px;
}
.wilo-cats__name{font-size:14px;font-weight:600;}
.wilo-cats__grid a:hover .wilo-cats__name{color:var(--wilo-green-dark);}

/* =========================================================================
   TŘI SLOUPCE – Novinky / Nejprodávanější D+Z / Nejprodávanější PRO
   ========================================================================= */
.wilo-cols{display:grid;grid-template-columns:1fr;gap:18px;}
.wilo-col{
  background:#fff;border:1px solid var(--wilo-border);
  border-radius:var(--wilo-radius);padding:18px 20px;
}
.wilo-col__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:6px;
}
.wilo-col__head h2{font-size:17px;margin:0;}
.wilo-lp .wilo-col__all{font-size:13px;font-weight:600;color:#009c82;white-space:nowrap;}
.wilo-col__all:hover{text-decoration:underline;}

.wilo-plist{list-style:none;margin:0;padding:0;}
.wilo-prod{                                    /* celý řádek je odkaz (klik na celou plochu) */
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;
  padding:14px 10px;margin:0 -10px;border-radius:10px;   /* -10px vrací zarovnání sloupce */
  transition:background .12s;
}
.wilo-prod:hover{background:#f4faf6;}
.wilo-plist li + li{border-top:1px solid var(--wilo-border);}
.wilo-prod--rank{grid-template-columns:18px 64px 1fr;}
.wilo-prod__rank{font-size:20px;font-weight:800;color:#c4d2cd;text-align:center;}
.wilo-prod__thumb{                /* OBRÁZEK: produkt */
  position:relative;aspect-ratio:1/1;border-radius:10px;
}
.wilo-tag{
  position:absolute;top:4px;left:4px;
  background:var(--wilo-green);color:#fff;
  font-size:8px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 5px;border-radius:5px;line-height:1.4;
}
.wilo-prod__body h3{font-size:14px;font-weight:700;margin:0 0 3px;color:#072a2a;}
.wilo-prod:hover h3{text-decoration:underline;}
.wilo-prod__body p{
  margin:0 0 6px;font-size:13px;color:var(--wilo-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wilo-prod__body .wilo-rating{margin-bottom:6px;}

/* =========================================================================
   ČLÁNKY
   ========================================================================= */
.wilo-articles{                       /* bílý orámovaný blok jako Novinky */
  background:#fff;border:1px solid var(--wilo-border);
  border-radius:var(--wilo-radius);padding:clamp(18px,3vw,24px);
}
.wilo-articles__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.wilo-articles__head h2{margin:0;}
.wilo-articles__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:18px;
}
.wilo-article{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--wilo-border);
  border-radius:var(--wilo-radius);overflow:hidden;height:100%;
}
.wilo-article__img{display:block;aspect-ratio:16/10;} /* OBRÁZEK: článek */
.wilo-article__body{flex:1;padding:16px 16px 18px;}
.wilo-article h3{font-size:15px;font-weight:700;margin:0 0 6px;color:#072a2a;}
.wilo-article:hover h3{text-decoration:underline;}
.wilo-article p{margin:0 0 10px;font-size:14px;color:var(--wilo-muted);}
.wilo-article:hover{box-shadow:var(--wilo-shadow);}
img.wilo-article__img{width:100%;object-fit:cover;}

/* =========================================================================
   BREAKPOINT: TABLET  ≥ 640px
   ========================================================================= */
@media (min-width:640px){
  .wilo-segments{grid-template-columns:1fr 1fr;}
  .wilo-cats__grid{grid-template-columns:repeat(3,1fr);}
  .wilo-cols{grid-template-columns:1fr 1fr;}
  .wilo-cols .wilo-col:nth-child(3){grid-column:1 / -1;}
  .wilo-articles__grid{grid-template-columns:1fr 1fr;}
}

/* =========================================================================
   BREAKPOINT: PC  ≥ 1024px
   ========================================================================= */
@media (min-width:1024px){
  .wilo-hero{--hero-pad:48px;--hero-col:220px;}
  .wilo-hero__bg{                     /* foto v původní velikosti 550×340, vpravo těsně před sloupcem USP */
    inset:0 calc(var(--hero-pad) + var(--hero-col)) 0 auto;
    width:550px;
    background:url("/image/wilo/cerpadlo-wilo-na-terase.webp") center/cover no-repeat;
    -webkit-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,rgba(0,0,0,.75) 32%,#000 48%);
            mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,rgba(0,0,0,.75) 32%,#000 48%);
  }
  .wilo-hero__grid{
    grid-template-columns:1fr var(--hero-col);
    align-items:start;
    gap:40px;
    padding:var(--hero-pad);
    min-height:340px;
  }
  .wilo-hero__usp{
    grid-template-columns:1fr;
    align-self:stretch;
    padding-left:26px;
    border-left:1px solid rgba(255,255,255,.16);
  }
  .wilo-usps{grid-template-columns:1fr 1fr;}
  .wilo-cats__grid{grid-template-columns:repeat(6,1fr);}
  .wilo-cols{grid-template-columns:repeat(3,1fr);}
  .wilo-cols .wilo-col:nth-child(3){grid-column:auto;}
  .wilo-articles__grid{grid-template-columns:repeat(4,1fr);}
}