/* =====================================================================
   ProMontáž.cz — kompletní styl webu, verze 1.3
   Tenhle soubor je JEDINÝ zdroj pravdy. V záhlaví Shoptetu už nesmí
   zůstat žádný <style> blok — jinak se to bije.

   OBSAHUJE:
     A) tvoje původní styly z hlavičky (vyhledávání, menu, kontakty,
        kupón, uvítací obrázek, fix slideru, rozcestník) — zachováno
     B) designovou vrstvu (typografie, ceny, štítky, patička, mobil)

   VYŘEŠENÉ KONFLIKTY:
     - Původní pravidlo font-family:'Outfit'!important na body/p/span/
       div/a/li přebíjelo všechno ostatní. Odstraněno. Outfit už se
       ani nenačítá, takže to stejně padalo na systémový font.
     - Tlačítka: 30px (pilulka) vs 8px. Vyhrálo 8px podle mockupu.
     - site-msg byl definovaný dvakrát. Teď jednou.

   NASAZENÍ: nahraj jako promontaz-v3.css a v hlavičce nech jediný
   <link>. Postup je v odpovědi.
   ===================================================================== */


/* =====================================================================
   1. TOKENY
   Staré názvy (--pm-o, --pm-d, --pm-l, --pm-m) zachovány jako aliasy,
   aby rozcestník dál fungoval beze změny HTML.
   ===================================================================== */
:root{
  --pm-or:      #f2800f;
  --pm-or-dk:   #d96f06;
  --pm-or-soft: #fdf1e3;

  --pm-ink:     #23282d;
  --pm-ink-2:   #1a1e21;
  --pm-gr:      #6a7075;

  --pm-line:    #e6e8ea;
  --pm-bg:      #f5f6f7;

  --pm-disp: 'Russo One', sans-serif;
  --pm-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --pm-r:   10px;
  --pm-r-s:  8px;

  /* aliasy pro starý kód rozcestníku */
  --pm-o: var(--pm-or);
  --pm-d: var(--pm-ink);
  --pm-i: #1f1f1f;
  --pm-l: var(--pm-line);
  --pm-m: var(--pm-gr);
}


/* =====================================================================
   2. TYPOGRAFIE

   POZOR: žádný selektor na div/span/a a žádné !important na body.
   Původní verze tím tloukla widgety třetích stran i tenhle soubor.
   ===================================================================== */
body{
  font-family: var(--pm-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-ink);
  -webkit-font-smoothing: antialiased;
}
p, li, td, th, label, input, textarea, select, button{
  font-family: var(--pm-body);
}

h1, h2, h3, h4, h5,
.page-title, .category-title, .section-title, .hero-title,
.homepage-group-title, .h4.homepage-group-title, .shoptet-heading{
  font-family: var(--pm-disp);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.22;
}

/* Russo One MIMO — sem patří čitelnost, ne charakter. */
.p-name, .p-name h1,
.product .name, .product .name a,
.products-block .name, .products-block .name a,
.breadcrumbs, .breadcrumbs a,
.availability-value, .p-code, .p-info-wrapper .p-short-description,
table, table td, table th{
  font-family: var(--pm-body) !important;
  font-weight: 600;
  letter-spacing: 0;
}
.p-name, .p-name h1{ font-size: 27px; line-height: 1.3; font-weight: 700; }
.product .name, .product .name a{ font-size: 15px; line-height: 1.45; }

/* Prózový text */
.description, .basic-description, .p-detail-inner .description-inner,
#content .blog-wrapper, .news-item-detail{
  font-size: 16.5px;
  line-height: 1.7;
  color: #33383d;
}
.description p, .basic-description p{ margin-bottom: 1em; max-width: 74ch; }


/* =====================================================================
   3. VYHLEDÁVÁNÍ  (z původní hlavičky, beze změny funkce)
   ===================================================================== */
.shoptet-search, .header__search, .search-input{
  max-width: 580px !important;
  margin: 0 auto !important;
}
.shoptet-search input{
  border-radius: 50px !important;
  padding: 14px 22px !important;
  font-size: 16px !important;
  border: 2px solid var(--pm-ink) !important;
  font-family: var(--pm-body);
}
.shoptet-search button{
  border-radius: 50px !important;
  background: var(--pm-or) !important;
  padding: 14px 32px !important;
  font-family: var(--pm-disp);
  letter-spacing: .06em;
}
.shoptet-search__suggestions, .autocomplete-suggestions{
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
}


/* =====================================================================
   4. MENU  (z původní hlavičky + zmenšené písmo, ať se položky vejdou)
   ===================================================================== */
@media screen and (min-width: 768px){
  #header::after{ background-color: var(--pm-or); }
  .navigation-in{ background-color: transparent; }
  .navigation-in > ul > li > a,
  .submenu-arrow::after,
  .menu-helper::after{ color: #fff; }

  .navigation-in > ul > li > a{
    font-family: var(--pm-disp);
    font-size: 13px;
    letter-spacing: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
  .navigation-in > ul > li > a:hover{ background: var(--pm-or-dk); }
}
@media screen and (min-width: 1200px){
  .top-navigation-menu{ flex: 0 0 auto !important; width: auto !important; }
}


/* =====================================================================
   5. TLAČÍTKA, KUPÓN, UVÍTACÍ TEXT  (z původní hlavičky)
   Rádius sjednocen na 8px podle mockupu.
   ===================================================================== */
.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a, .pagination > strong,
a.login-btn{
  border-radius: var(--pm-r-s);
}
.btn:not(.cart-count){
  font-family: var(--pm-disp);
  font-weight: 400;
  letter-spacing: .04em;
  transition: background .15s ease, transform .15s ease;
}
.btn-primary, .btn-conversion, .add-to-cart-button,
.btn.btn-cart, .p-to-cart-block .btn{
  background: var(--pm-or);
  border-color: var(--pm-or);
  color: #fff;
}
.btn-primary:hover, .btn-conversion:hover, .add-to-cart-button:hover,
.btn.btn-cart:hover{
  background: var(--pm-or-dk);
  border-color: var(--pm-or-dk);
  transform: translateY(-1px);
}
.btn-default, .btn-secondary{
  background: #fff;
  border: 2px solid var(--pm-line);
  color: var(--pm-ink);
}
.btn-default:hover, .btn-secondary:hover{ border-color: var(--pm-ink); }

.discount-coupon:not(.uplatneno) form{ display: block; margin-top: 0; }
.kupon-odkaz{ display: none; }
.welcome-img{
  position: relative; right: 0; top: 0;
  height: auto; display: block; width: auto;
}
.welcimg-yes.welcome div, .welcimg-yes.welcome h1{ max-width: none; padding: 0; }


/* =====================================================================
   6. KONTAKTY V HORNÍ LIŠTĚ  (z původní hlavičky, beze změny)
   Barvu samotné lišty záměrně NEMĚNÍM — v1.0 to udělala a text
   skončil světle šedý na bílém.
   ===================================================================== */
@media screen and (min-width: 1200px){
  .top-navigation-bar .top-navigation-contacts{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-left: auto !important;
    text-align: right !important;
    gap: 18px; flex-shrink: 0;
  }
  .top-navigation-bar .top-navigation-contacts .project-phone,
  .top-navigation-bar .top-navigation-contacts .project-email{
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .top-navigation-bar .top-navigation-contacts .project-email{
    color: var(--color-primary) !important;
    font-size: 16px; font-weight: 700;
  }
  .top-navigation-bar .top-navigation-contacts .project-phone{
    color: var(--color-primary) !important;
  }
  .top-navigation-bar a.project-email::before{
    content: '\e910'; font-size: 16px; margin-right: 6px;
  }
}
@media screen and (max-width: 767px){
  .top-navigation-bar .top-navigation-contacts{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important;
    gap: 10px; position: relative !important;
  }
  .top-navigation-bar .top-navigation-contacts .project-phone{ display: none !important; }
  .top-navigation-bar .top-navigation-contacts .project-email{
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    margin: 0 !important;
    white-space: nowrap;
    color: #A3A3AF !important;
  }
  .top-navigation-bar a.project-email::before{ content: '\e910'; margin-right: 4px; }
  .top-navigation-bar .top-navigation-contacts .project-email span{ display: none; }
}


/* =====================================================================
   7. INFORMAČNÍ PROUŽEK  (jedna definice, dřív byly dvě)
   ===================================================================== */
.site-msg{
  background: var(--pm-i) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 9px 45px;
}
.site-msg, .site-msg a, .site-msg span, .site-msg p{ color: #fff !important; }
.site-msg a{ text-decoration: underline; text-underline-offset: 3px; }
.site-msg .close, .site-msg .site-msg-close{ color: #fff !important; opacity: 1 !important; }


/* =====================================================================
   8. CENY A ČÍSLA
   Tabulkové číslice = ceny ve sloupci sedí pod sebou.
   ŽÁDNÉ padding/display/background na štítcích — Merkur si je
   pozicuje absolutně a jakýkoli zásah do rozměrů je roztrhne.
   ===================================================================== */
.price, .prices, .price-final, .price-standard,
.price-final-holder, .cart-price, .p-final-price-wrapper,
.availability-amount, .quantity input{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.price-final, .price-final strong{
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--pm-ink);
}


/* =====================================================================
   9. KARTY PRODUKTŮ A ŠTÍTKY
   ===================================================================== */
.products-block .product, .products .product{
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-r);
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.products-block .product:hover, .products .product:hover{
  border-color: var(--pm-or);
  box-shadow: 0 12px 28px rgba(35,40,45,.10);
  transform: translateY(-2px);
}

/* Jen barva a písmo. Novinka byla modrá a tloukla se s oranžovou. */
.flag{ font-family: var(--pm-disp); letter-spacing: .06em; }
.flag.flag-new{ background: var(--pm-ink); }
.flag.flag-tip{ background: var(--pm-or-dk); }
.flag.flag-action{ background: var(--pm-or); }
/* flag-discount záměrně netknutý */

.availability-value{ font-weight: 700; font-size: 13.5px; }


/* =====================================================================
   10. FIX SLIDERU OBLÍBENÝCH KATEGORIÍ  (z původní hlavičky)
   ===================================================================== */
.fav-cat .slick-track{ display: flex !important; }
.fav-cat .slick-slide{ height: auto !important; }


/* =====================================================================
   11. ROZCESTNÍK  (z původní hlavičky, beze změny)
   ===================================================================== */
.pm-fn{ margin: 48px 0; width: 100%; }
.pm-fn h2{ font-size: clamp(20px,3vw,28px); margin: 0 0 18px; }
.pm-fn a{ text-decoration: none; color: inherit; }

.pm-rail{
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 2px 2px 14px; scrollbar-width: thin;
}
.pm-rail::-webkit-scrollbar{ height: 6px; }
.pm-rail::-webkit-scrollbar-thumb{ background: var(--pm-line); border-radius: 99px; }

.pm-card{
  scroll-snap-align: start; flex: 0 0 218px; min-height: 120px;
  background: var(--pm-ink); color: #fff; border-radius: 10px; padding: 18px;
  position: relative; overflow: hidden; transition: transform .18s ease;
}
.pm-card:hover{ transform: translateY(-3px); }
.pm-card b{ display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.pm-card span{ display: block; font-size: 13px; color: var(--pm-or); margin-top: 5px; }
.pm-card img{ display: block; width: 100%; height: 140px; object-fit: contain; margin-top: 12px; }
.pm-card i{
  position: absolute; right: 14px; bottom: 14px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--pm-or);
  display: grid; place-items: center; font-style: normal; color: #fff; font-size: 15px;
}

.pm-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.pm-tile{
  border: 1px solid var(--pm-line); border-radius: 10px;
  overflow: hidden; background: #fafafa; transition: border-color .18s ease;
}
.pm-tile:hover{ border-color: var(--pm-or); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pm-tile img{ display: block; width: 100%; height: 140px; object-fit: cover; }
.pm-tile > div{ padding: 14px 16px 18px; }
.pm-tile strong{ display: block; font-size: 15px; font-weight: 600; color: var(--pm-i); }
.pm-tile em{ display: block; font-style: normal; font-size: 13px; color: var(--pm-gr); margin-top: 3px; }
.pm-tile:not(:has(img)) > div{ padding: 20px 18px; border-left: 3px solid var(--pm-or); }


/* =====================================================================
   12. KÓTA — podpisový prvek
   Použití: <div class="pm-kota"><span class="lbl">Řešení podle práce</span></div>
   ===================================================================== */
.pm-kota{ display: flex; align-items: center; gap: 13px; margin: 9px 0 4px; }
.pm-kota::before{ content:""; flex:0 0 auto; width:2px; height:13px; background:var(--pm-or); }
.pm-kota::after{ content:""; flex:0 0 68px; height:2px; background:var(--pm-or); order:1; }
.pm-kota .lbl{
  order: 2;
  font-family: var(--pm-disp);
  font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pm-gr);
}


/* =====================================================================
   13. PATIČKA
   ===================================================================== */
#footer{ background: var(--pm-ink); color: #c3c7cb; }

/* Nadpisy sloupců. Merkur je nesází jako h4 — proto široký záběr.
   Bez tohohle byly tmavě šedé na tmavém a prakticky neviditelné. */
#footer h2, #footer h3, #footer h4, #footer h5,
#footer .h2, #footer .h3, #footer .h4, #footer .h5,
#footer [class*="title"], #footer [class*="heading"],
#footer [class*="headline"]{
  font-family: var(--pm-disp) !important;
  font-size: 14px;
  color: #fff !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* Kontaktní box je bílý — tam nadpis nechat tmavý. */
#footer .contact-box [class*="title"],
#footer [style*="background:#fff"] [class*="title"]{ color: var(--pm-ink) !important; }

/* Podtržení všech odkazů. Vypadalo to jako rozsypaný čaj. */
#footer a{ color: #c3c7cb; text-decoration: none; }
#footer a:hover{ color: var(--pm-or); text-decoration: underline; text-underline-offset: 3px; }
#footer .copyright, #footer .footer-bottom{ color: #a2a8ad; font-size: 12.5px; }

/* Recenze — dědily tmavou barvu z výpisu produktů, kde je bílé pozadí.
   Bílý kontaktní box zůstává nedotčený. */
#footer [class*="rating"] a,
#footer [class*="rating"] span,
#footer [class*="rating"] strong,
#footer [class*="review"] a,
#footer [class*="review"] span,
#footer .products-block .name,
#footer .products-block .name a{ color: #c3c7cb !important; }
#footer [class*="rating"] .stars,
#footer [class*="star"]{ color: var(--pm-or) !important; }


/* =====================================================================
   14. NEWSLETTER
   Souhlas s podmínkami byl oranžový na oranžovém.
   ===================================================================== */
[class*="newsletter"] small,
[class*="newsletter"] .consent,
[class*="newsletter"] p,
[class*="newsletter"] label{ color: #fff; }
[class*="newsletter"] a{ color: #fff; text-decoration: underline; }


/* =====================================================================
   15. FORMULÁŘE
   ===================================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select,
.form-control{
  font-family: var(--pm-body);
  font-size: 16px;   /* pod 16px zoomuje iOS Safari při kliknutí do pole */
  border-radius: var(--pm-r-s);
}


/* =====================================================================
   16. TLAČÍTKA "NA DOTAZ"
   Sjednoceno na značkovou oranžovou. V zápatí byla #f47b00,
   všude jinde #f2800f — dva odstíny vedle sebe.
   ===================================================================== */
.pm-inquiry-instead-cart, .pm-inquiry-card-button{
  background: var(--pm-or);
}
.pm-inquiry-instead-cart:hover, .pm-inquiry-instead-cart:focus,
.pm-inquiry-card-button:hover, .pm-inquiry-card-button:focus{
  background: var(--pm-or-dk);
}


/* =====================================================================
   17. PŘÍSTUPNOST
   ===================================================================== */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--pm-or);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .pm-card, .pm-tile{ transition: none; }
}


/* =====================================================================
   18. MOBIL
   Cílovka čte tohle na stavbě, na slunci, ve špinavých rukavicích.
   ===================================================================== */
@media (max-width: 991px){
  .pm-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px){
  body{ font-size: 16px; }
  h1, .page-title{ font-size: 25px; }
  h2{ font-size: 20px; }
  .p-name, .p-name h1{ font-size: 21px; }
  .product .name, .product .name a{ font-size: 15px; }

  /* Prst má cca 9 mm. Nic klikacího pod 44 px. */
  .btn:not(.cart-count){
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #footer a{ min-height: 44px; display: flex; align-items: center; }

  .pm-kota .lbl{ font-size: 11px; letter-spacing: .16em; }
  .pm-kota::after{ flex-basis: 46px; }
}
@media (max-width: 575px){
  .pm-card{ flex-basis: 170px; }
  .pm-card img{ height: 110px; }
}

/* =====================================================================
   19. PATIČKA — V5 OPRAVA KONTRASTU A MOBILU
   ===================================================================== */

/* Merkur má v poradně a informačních sloupcích vlastní barvy odkazů.
   Tady je přebijeme jen uvnitř tmavé patičky. */
#footer .custom-footer a,
#footer .footer-rows a,
#footer .footer-links a,
#footer .news-item a,
#footer [class*="news"] a,
#footer [class*="article"] a,
#footer [class*="review"] a,
#footer [class*="rating"] a{
  color:#d5d8db !important;
  text-decoration:none !important;
}

#footer .custom-footer a:hover,
#footer .footer-rows a:hover,
#footer .footer-links a:hover,
#footer .news-item a:hover,
#footer [class*="news"] a:hover,
#footer [class*="article"] a:hover,
#footer [class*="review"] a:hover,
#footer [class*="rating"] a:hover{
  color:var(--pm-or) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* Nadpisové odkazy v Poradně musí být také světlé. */
#footer h2 a,#footer h3 a,#footer h4 a,#footer h5 a,
#footer .h2 a,#footer .h3 a,#footer .h4 a,#footer .h5 a{
  color:#fff !important;
}

/* Bílý kontaktní box: vrátit tmavý text a oranžové odkazy. */
#footer .contact-box,
#footer .contact-box p,
#footer .contact-box span,
#footer .contact-box strong,
#footer [style*="background:#fff"],
#footer [style*="background: #fff"],
#footer [style*="background-color:#fff"],
#footer [style*="background-color: #fff"]{
  color:var(--pm-ink) !important;
}
#footer .contact-box a,
#footer [style*="background:#fff"] a,
#footer [style*="background: #fff"] a,
#footer [style*="background-color:#fff"] a,
#footer [style*="background-color: #fff"] a{
  color:var(--pm-or) !important;
}

/* Původní mobilní pravidlo dělalo flex ze všech odkazů v patičce.
   Reset a 44px necháváme jen u skutečných menu položek. */
@media(max-width:767px){
  #footer a{
    min-height:0;
    display:inline;
    align-items:initial;
  }
  #footer .custom-footer ul a,
  #footer .footer-links a,
  #footer .news-item a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}


/* =====================================================================
   20. HOMEPAGE V6 — CAROUSEL PŘES CELOU ŠÍŘKU + TOP BANNERY POD NÍM
   Všechny doplňkové bannery zůstávají v administraci na pozici TOP.
   ===================================================================== */

body.in-index .banners-row{
  display:block !important;
}

body.in-index .banners-row > .carousel-wrapper,
body.in-index .banners-row > .banners-top,
body.in-index .banners-row .carousel-wrapper,
body.in-index .banners-row .banners-top{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  float:none !important;
}

/* Desktop: čtyři široké bannery v jednom řádku */
@media(min-width:992px){
  body.in-index .banners-row .banners-top{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:16px !important;
  }

  body.in-index .banners-row .banners-top > *{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    float:none !important;
    min-width:0;
    overflow:hidden;
    border-radius:8px;
  }

  body.in-index .banners-row .banners-top a,
  body.in-index .banners-row .banners-top img{
    display:block;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
}

/* Tablet a mobil: bannery 2 × 2 */
@media(max-width:991px){
  body.in-index .banners-row .banners-top{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px !important;
  }

  body.in-index .banners-row .banners-top > *{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    float:none !important;
    min-width:0;
    overflow:hidden;
    border-radius:8px;
  }

  body.in-index .banners-row .banners-top a,
  body.in-index .banners-row .banners-top img{
    display:block;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
}