/* === DREAMY — nová homepage · v1.0 · 2026-10-28 (schválil Michal) ===
   Záhlaví: <link rel="stylesheet" href="/user/documents/upload/styles/hp-nova.css?v=1">
   Patří k hp-nova.js. Staré bloky (růžové dlaždice, Bestsellery) se schovají až po úspěšném sestavení (html.hpn-ok).
   Vrácení: smazat řádek v Záhlaví a v Zápatí. */
:root{--hpn-pink:#D90074;--hpn-pinkd:#B00060;--hpn-tx:#111;--hpn-mu:#6B6470;--hpn-ln:#ECE3E8;--hpn-bg:#F6F3F4;--hpn-bgp:#FFF3F9;--hpn-r:12px}

/* staré bloky — jen když nová HP naběhla */
html.hpn-ok .type-index .custom-home-banners,
html.hpn-ok .type-index .homepage-products-heading-1,
html.hpn-ok .type-index #products-1{display:none!important}

/* 3 dlaždice vedle carouselu: staré obrázky neukazovat, dokud je JS nepřestaví (pojistka: po 3 s se ukážou samy) */
@keyframes hpnShow{to{visibility:visible}}
.type-index .next-to-carousel-banners:not(.hpn-ok){visibility:hidden;animation:hpnShow 0s 3s forwards}

/* společná hlavička sekce */
.hpn{font-family:Rubik,system-ui,sans-serif;color:var(--hpn-tx)}
.hpn-wrap{max-width:1300px;margin:0 auto;padding:0 20px}
.hpn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px}
.hpn-eb{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hpn-pink);margin:0 0 6px}
.hpn-h2{font-size:28px!important;line-height:1.2!important;font-weight:600!important;margin:0!important;padding:0!important;color:var(--hpn-tx)!important;text-transform:none!important}
.hpn-all{font-size:15px;font-weight:600;color:var(--hpn-pink)!important;text-decoration:none!important;white-space:nowrap}
.hpn-all:hover{color:var(--hpn-pinkd)!important}

/* ===== Co hledáte? ===== */
.hpn-kat{padding:32px 0 16px}
.hpn-kgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.hpn-kat a{display:flex;flex-direction:column;text-decoration:none!important;color:var(--hpn-tx)!important}
.hpn-kim{position:relative;aspect-ratio:1/1;background:var(--hpn-bg);border-radius:var(--hpn-r);overflow:hidden}
.hpn-kim img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transition:transform .35s}
.hpn-kim img.pk{object-fit:contain;padding:8%;box-sizing:border-box;mix-blend-mode:multiply}
.hpn-kat a:hover .hpn-kim img{transform:scale(1.03)}
.hpn-knm{font-size:16px;font-weight:600;line-height:1.25;margin:10px 2px 2px}
.hpn-kat a:hover .hpn-knm{color:var(--hpn-pink)}
.hpn-kds{font-size:13px;line-height:1.35;color:var(--hpn-mu);margin:0 2px}
.hpn-kout .hpn-kim{background:var(--hpn-bgp);border:1px solid #F6D3E5;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px;box-sizing:border-box}
.hpn-kout .hpn-kim b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hpn-pink)}
.hpn-kout .hpn-kim span{font-size:22px;font-weight:600;line-height:1.2;margin-top:6px}

/* ===== Nejoblíbenější (karta A jako ve výpisu) ===== */
.hpn-obl{padding:8px 0 40px}
.hpn-tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.hpn-tabs button{font:500 14px Rubik,system-ui,sans-serif;color:var(--hpn-tx);background:#fff;border:1px solid var(--hpn-ln);border-radius:999px;padding:8px 16px;cursor:pointer}
.hpn-tabs button.on{background:var(--hpn-tx);border-color:var(--hpn-tx);color:#fff}
.hpn-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;min-height:340px}
.hpn-c{display:flex;flex-direction:column;text-decoration:none!important;color:var(--hpn-tx)!important}
.hpn-im{position:relative;aspect-ratio:4/3;background:var(--hpn-bg);border-radius:var(--hpn-r);overflow:hidden}
.hpn-im img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:translate(var(--tx,0%),var(--ty,0%)) scale(var(--s,1));transition:transform .35s}
.hpn-im img.pk{mix-blend-mode:multiply}
.hpn-c:hover .hpn-im img{transform:translate(var(--tx,0%),var(--ty,0%)) scale(calc(var(--s,1)*1.03))}
.hpn-fl{position:absolute;left:10px;top:10px;z-index:2}
.hpn-fl span{font-size:11.5px;font-weight:600;line-height:1.3;padding:3px 8px;border-radius:6px;background:#fff;display:inline-block}
.hpn-fl span.sale{background:var(--hpn-pink);color:#fff}
.hpn-in{display:flex;flex-direction:column;gap:3px;padding:12px 2px 4px;flex:1}
.hpn-ln{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a929e}
.hpn-nm{font-size:16px;font-weight:600;line-height:1.25}
.hpn-c:hover .hpn-nm{color:var(--hpn-pink)}
.hpn-sp{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hpn-mu)}
.hpn-seg{display:inline-flex;gap:3px}.hpn-seg i{display:block;width:16px;height:7px;border-radius:2px;background:#EEE6EA}.hpn-seg i.f{background:var(--hpn-pink)}
.hpn-rw{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:6px;margin-top:auto}
.hpn-pz{font-size:18px;font-weight:700;white-space:nowrap}.hpn-pz small{font-size:12px;font-weight:500}
.hpn-pz s{font-size:12.5px;font-weight:400;color:#9a929e;margin-right:6px}.hpn-pz.sale{color:var(--hpn-pink)}
.hpn-st{font-size:12.5px;color:var(--hpn-mu);white-space:nowrap}.hpn-st b{color:#F2A900;font-weight:400}
.hpn-sk .hpn-im{animation:hpnp 1.2s ease-in-out infinite alternate}
@keyframes hpnp{to{opacity:.55}}

/* ===== 3 dlaždice vedle carouselu ===== */
.type-index .next-to-carousel-banners a.hpn-t{position:relative;display:block;border-radius:15px;overflow:hidden;background:var(--hpn-bg);text-decoration:none!important;font-family:Rubik,system-ui,sans-serif}
.hpn-ti{position:relative;display:block;width:100%}
.hpn-ti img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.hpn-ti img.pk{object-fit:contain;mix-blend-mode:multiply;padding:14px 40px 78px;box-sizing:border-box}
.hpn-tbr{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 18px 92px;box-sizing:border-box}
.hpn-tbr img{position:static!important;width:100%!important;height:100%!important;min-height:0;object-fit:contain;background:#fff;border-radius:10px;padding:10px 14px;box-sizing:border-box}
.hpn-tl{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:10px;padding:10px 14px;font:600 16px/1.2 Rubik,system-ui,sans-serif;color:var(--hpn-tx)}
.hpn-tl small{display:block;font-size:12.5px;font-weight:400;color:var(--hpn-mu);margin-top:2px}
.hpn-tl em{font-style:normal;color:var(--hpn-pink);font-size:18px}

/* naznačení posuvu (tečky) a „Číst dál“ — jen mobil */
.hpn-sx{position:relative}
.hpn-dots,.hpn-more{display:none}

@media (hover:none){
  /* na dotyku zůstává po klepnutí :hover → karta vyjede nahoru a posuvná řada ji ořízne */
  .type-index a.dusp__card:hover,.type-index .hpz-grid a:hover{transform:none!important}
}

@media (max-width:767px){
  .hpn-wrap{padding:0 16px}
  .hpn-h2{font-size:22px!important}
  .hpn-head{align-items:flex-start;flex-direction:column;gap:6px}
  .hpn-kat{padding-top:24px}
  .hpn-kgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
  .hpn-knm{font-size:14px;margin-top:8px}
  .hpn-kds{display:none}
  .hpn-kout .hpn-kim{padding:10px}.hpn-kout .hpn-kim span{font-size:15px}.hpn-kout .hpn-kim b{font-size:10px}
  .hpn-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .hpn-tabs button{flex:none;font-size:13px;padding:7px 14px}
  .hpn-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;scrollbar-width:none;min-height:0}
  .hpn-row .hpn-c{flex:0 0 62%;scroll-snap-align:start}
  .hpn-nm{font-size:14px}.hpn-pz{font-size:15.5px}.hpn-sp{font-size:12px}.hpn-seg i{width:12px}
  /* Proč Dreamy: posuv do strany místo 5 karet pod sebou */
  .type-index .dusp__grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;grid-template-columns:none!important;padding:6px 4px 8px!important;margin:-6px -4px 0!important;scrollbar-width:none}
  .type-index .dusp__grid::-webkit-scrollbar{display:none}
  .type-index .dusp,.type-index .dusp__grid{min-width:0!important;max-width:100%!important}
  .type-index .dusp__grid{width:calc(100% + 8px)!important;max-width:none!important}
  .type-index .dusp__grid>li{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .type-index .dusp__grid>li>.dusp__card{height:100%}
  /* značky: víc místa nahoře, ať je vidět celý rámeček */
  .type-index .hpz-grid{padding-top:6px!important}
  /* text pro Google: na mobilu 3 řádky + „Číst dál“ */
  .type-index .hpz-intro:not(.hpn-open) p.hpn-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .type-index .hpz-intro .hpn-more{display:inline-block;margin:4px 0 10px;padding:0;border:0;background:none;font:600 14px Rubik,system-ui,sans-serif;color:var(--hpn-pink);cursor:pointer}
  .type-index .hpz-intro.hpn-open .hpn-more{display:none}
  /* carousel + dlaždice: dnes je řádek flex bez zalomení → dlaždice utečou doprava mimo obrazovku */
  .type-index .banners-row{display:block!important}
  .type-index .banners-row>[class*=col-]{width:100%!important;max-width:100%!important;float:none!important;flex:none!important}
  .type-index .banners-row .col-sm-4{padding:0 16px 0 13px!important;margin-top:12px!important}
  /* dlaždice jako seznam: náhled vlevo, text, šipka */
  .type-index .next-to-carousel-banners.hpn-ok{display:block!important;background:#fff;border:1px solid var(--hpn-ln);border-radius:14px;overflow:hidden}
  html .type-index .next-to-carousel-banners.hpn-ok .banner-wrapper:nth-child(n){width:auto!important;margin:0!important;border-radius:0!important}
  .type-index .next-to-carousel-banners.hpn-ok .banner-wrapper+.banner-wrapper{border-top:1px solid var(--hpn-ln)}
  .type-index .next-to-carousel-banners a.hpn-t{display:flex!important;align-items:center;gap:12px;padding:10px 12px;background:#fff!important;border:0!important;border-radius:0}
  .hpn-t .hpn-ti{flex:0 0 64px;width:64px;height:64px;border-radius:10px;overflow:hidden;aspect-ratio:auto!important}
  .hpn-t .hpn-ti img.pk{object-fit:cover;object-position:30% 45%;padding:0;mix-blend-mode:normal;transform:scale(1.6);transform-origin:30% 45%}
  .hpn-t .hpn-tbr{gap:3px;padding:5px;background:var(--hpn-bg)}
  .hpn-t .hpn-tbr img{border-radius:4px;padding:2px 3px}
  .hpn-t .hpn-tl{display:flex;position:static;flex:1;background:none;padding:0;font-size:15px}
  .hpn-t .hpn-tl em{font-size:20px}
  /* tečky pod posuvnou řadou */
  .hpn-sx.is-scroll .hpn-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .hpn-dots i{width:7px;height:7px;border-radius:999px;background:#E9DCE3;transition:width .25s,background .25s}
  .hpn-dots i.on{width:22px;background:var(--hpn-pink)}
}