/* === DREAMY — /nase-prodejny/: hero s fotkami prodejen (rolovátko) + mobilní úpravy  ·  v1 · 2026-10-08 ===
 * Nahrát:  /user/documents/upload/styles/prodejny-hero.css
 * Záhlaví (POD 01-prodejny-dreamy.css):  <link rel="stylesheet" href="/user/documents/upload/styles/prodejny-hero.css?v=1">
 * Patří k:  prodejny-hero.js (tečky, šipky, autoplay) + HTML sekce .dmp-hero se .dmp-slider (prodejny-hero.html)
 * Vše je pod #dmp-prodejny → jiné stránky to neovlivní. Bez JS rolovátko pořád funguje (swipe / posuvník).
 */

/* ---------- 1) Rolovátko fotek ---------- */
#dmp-prodejny .dmp-hero-visual.dmp-slider{aspect-ratio:4/3;padding:0;display:block;background:#EDEAE6;color:#fff;box-shadow:0 30px 70px -34px rgba(20,17,24,.55)}
#dmp-prodejny .dmp-slides{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;outline:none}
#dmp-prodejny .dmp-slides::-webkit-scrollbar{display:none}
#dmp-prodejny .dmp-slide{position:relative;flex:0 0 100%;width:100%;height:100%;margin:0;padding:0;scroll-snap-align:start;scroll-snap-stop:always}
#dmp-prodejny .dmp-slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;margin:0}
#dmp-prodejny .dmp-slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(20,17,24,.55),rgba(20,17,24,0));pointer-events:none}
#dmp-prodejny .dmp-slide figcaption{position:absolute;left:18px;bottom:18px;z-index:1;max-width:calc(100% - 150px);margin:0;padding:7px 12px;border-radius:8px;background:rgba(20,17,24,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:700;line-height:1.3;color:#fff;text-align:left}

/* tečky + šipky (vkládá prodejny-hero.js) */
#dmp-prodejny .dmp-dots{position:absolute;right:18px;bottom:24px;z-index:2;display:flex;gap:7px;align-items:center}
#dmp-prodejny .dmp-dot{width:8px;height:8px;padding:0;margin:0;border:0;border-radius:99px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .25s ease,background .25s ease}
#dmp-prodejny .dmp-dot[aria-current="true"]{width:22px;background:#fff}
#dmp-prodejny .dmp-arrow{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dmp-ink);box-shadow:0 8px 20px -8px rgba(20,17,24,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease,transform .2s ease}
#dmp-prodejny .dmp-arrow svg{display:block}
#dmp-prodejny .dmp-arrow--prev{left:14px}
#dmp-prodejny .dmp-arrow--next{right:14px}
#dmp-prodejny .dmp-slider:hover .dmp-arrow,#dmp-prodejny .dmp-arrow:focus-visible{opacity:1}
#dmp-prodejny .dmp-arrow:hover{transform:scale(1.06)}
#dmp-prodejny .dmp-dot:focus-visible,#dmp-prodejny .dmp-arrow:focus-visible,#dmp-prodejny .dmp-slides:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:none){#dmp-prodejny .dmp-arrow{display:none}}

/* ---------- 2) Tablet + mobil ---------- */
@media (max-width:1000px){
  /* prázdný pruh drobečkové navigace a <p>&nbsp;</p> nad blokem — pryč (odsazení pod pevnou hlavičkou zůstává) */
  /* !important: šablona Shoptetu (CSS z CDN) nastavuje odsazení drobečků i nadpisu s vysokou prioritou */
  /* margin-top 70px (globálně 120px): hlavička + lišta ikon = 116 px, stránka už má 56 px nahoře → nadpis ~30 px pod lištou */
  body:has(#dmp-prodejny) .breadcrumbs-wrapper{margin-top:70px !important;height:0 !important;min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;overflow:hidden !important;background:none !important}
  body:has(#dmp-prodejny) .pageArticleDetail [itemprop="about"] > p:has(+ #dmp-prodejny){display:none}

  /* pořadí: nadpis → fotky → text → tlačítka → čísla */
  #dmp-prodejny .dmp-hero{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:0}
  #dmp-prodejny .dmp-hero-text{display:contents}
  #dmp-prodejny .dmp-h1{order:1;padding:0 !important;margin:0 0 16px !important}
  #dmp-prodejny .dmp-hero-visual.dmp-slider{order:2;width:100%;max-width:none;padding:0;margin:0 0 20px;border-radius:18px}
  #dmp-prodejny .dmp-lead{order:3;margin-bottom:20px}
  #dmp-prodejny .dmp-btns{order:4}
  #dmp-prodejny .dmp-stats{order:5;margin-top:24px}
}
@media (max-width:560px){
  #dmp-prodejny .dmp-h1{font-size:31px;line-height:1.1}
  #dmp-prodejny .dmp-slide figcaption{left:12px;bottom:12px;font-size:12px;padding:6px 10px;max-width:calc(100% - 120px)}
  #dmp-prodejny .dmp-dots{right:12px;bottom:18px;gap:6px}
  #dmp-prodejny .dmp-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #dmp-prodejny .dmp-btn{padding:14px 10px}
  /* tři čísla vedle sebe místo pod sebou */
  #dmp-prodejny .dmp-stats{display:grid;grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:0}
  #dmp-prodejny .dmp-stat + .dmp-stat{border-left:1px solid rgba(20,17,24,.12);padding-left:14px}
  #dmp-prodejny .dmp-stat{padding-right:10px}
  #dmp-prodejny .dmp-stat-num{font-size:24px}
  #dmp-prodejny .dmp-stat-lbl{font-size:12px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  #dmp-prodejny .dmp-dot,#dmp-prodejny .dmp-arrow{transition:none}
}