@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   SoftLegal – ZÁHLAVÍ podle mockupu (Shoptet, šablona Classic)
   Stylováno na NATIVNÍ záhlaví → košík zůstává živý.
   Vložit do: Vzhled a obsah → Editor vzhledu → Vlastní CSS.

   Prvky: levandulová horní lišta • tmavé tlačítko „Hledat" v poli •
   bílý orámovaný košík • MENU V ZAOBLENÉ KAPSLI (pill kontejner).

   Barvy měníte na jednom místě zde:
   ===================================================================== */
:root{
  --sl-green:      #37a04a;   /* akční zelená (hover, logo) */
  --sl-green-dark: #2c8a3d;
  --sl-ink:        #1f2733;   /* hlavní text */
  --sl-dark-btn:   #1c2024;   /* tmavé tlačítko Hledat */
  --sl-muted:      #3a3f4a;   /* horní lišta */
  --sl-line:       #e6e9ee;   /* jemné linky / rámečky */
  --sl-field:      #f1f3f7;   /* pozadí vyhledávání */
  --sl-capsule:    #f7f8fa;   /* pozadí kapsle menu */
  --sl-capsule-bd: #e8eaed;   /* rámeček kapsle menu */
}

/* Font Montserrat pro celé záhlaví */
.top-navigation-bar, .top-navigation-bar *,
#header, #header *,
.menu-helper, .menu-helper *{
  font-family:'Montserrat', -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* jednotný font i pro zbytek webu (jemně, přes dědičnost) */
body{ font-family:'Montserrat', -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* ---------------------------------------------------------------------
   1) HORNÍ LIŠTA – levandulové pozadí, telefon + odkazy
   --------------------------------------------------------------------- */
.top-navigation-bar{
  background:#f4f5fb !important;
  border-bottom:0 !important;
  font-size:13px !important;
}
.top-navigation-bar,
.top-navigation-bar a,
.top-navigation-bar .top-navigation-menu a{
  color:var(--sl-muted) !important;
  font-weight:500 !important;
  text-decoration:none !important;
}
.top-navigation-bar a:hover{ color:var(--sl-green) !important; }

/* ---------------------------------------------------------------------
   2) HORNÍ ŘADA – logo | vyhledávání | košík
   --------------------------------------------------------------------- */
#header{ background:#fff !important; }

/* CELÉ ROZVRŽENÍ HORNÍ ŘADY (logo/hledání/košík) JEN NA DESKTOPU (>=992px).
   Na mobilu (<992px) ponecháme nativní Shoptet mobilní záhlaví
   (body má ums_mobile_header_v1) – jinak vznikaly bílé pruhy při scrollování. */
@media (min-width:992px){
#header{ box-shadow:0 1px 0 var(--sl-line); }
#header .container.navigation-wrapper{ padding-top:6px; padding-bottom:2px; }

#header .header-top{
  display:flex !important; align-items:center !important;
  gap:28px; padding:16px 0; flex-wrap:nowrap;
}
#header .site-name-wrapper{ flex:0 0 auto; margin:0; }
#header .site-name img{ max-height:50px !important; width:auto; }

/* vyhledávání */
#header .search{ flex:1 1 auto; max-width:680px; margin:0; }
#header .search .search-form fieldset{ position:relative; margin:0; padding:0; border:0; }
#header .search .search-input{
  width:100% !important; height:52px !important;
  padding:0 118px 0 22px !important;      /* místo pro tmavé tlačítko */
  background:var(--sl-field) !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  font-size:14px !important; color:var(--sl-ink) !important;
  box-shadow:none !important;
  transition:border-color .18s ease, background .18s ease;
}
#header .search .search-input:focus{ background:#fff !important; border-color:var(--sl-line) !important; outline:none; }
#header .search .search-input::placeholder{ color:#9aa3b2 !important; }

/* tmavé tlačítko „Hledat" vpravo v poli */
#header .search .search-form button[type="submit"]{
  position:absolute !important; top:50% !important; right:6px !important; left:auto !important;
  transform:translateY(-50%);
  height:40px !important; min-width:0 !important;
  padding:0 22px !important; border:0 !important; border-radius:9px !important;
  background:var(--sl-dark-btn) !important; color:#fff !important;
  font-size:14px !important; font-weight:600 !important; cursor:pointer;
  transition:background .16s ease;
}
#header .search .search-form button[type="submit"]:hover{ background:#000 !important; }

/* ---------------------------------------------------------------------
   3) KOŠÍK – bílé orámované „pill" tlačítko s ikonou (živá cena)
   --------------------------------------------------------------------- */
#header .navigation-buttons{ flex:0 0 auto; margin:0; }
#header .navigation-buttons .cart-count{
  display:inline-flex !important; align-items:center !important; gap:10px;
  height:52px !important; padding:0 24px !important;
  border-radius:999px !important;
  background:#fff !important; color:var(--sl-ink) !important;
  border:1px solid var(--sl-line) !important;
  font-weight:600 !important; font-size:14px; text-decoration:none !important;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition:background .18s ease, border-color .18s ease;
}
#header .navigation-buttons .cart-count:hover{
  background:#f7f8fa !important; border-color:#dfe3e8 !important;
}
#header .navigation-buttons .cart-count::before{
  content:""; width:22px; height:22px; flex:0 0 auto;
  background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231f2733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
#header .navigation-buttons .cart-count .cart-price{ color:var(--sl-ink) !important; }
#header .navigation-buttons .cart-count .count,
#header .navigation-buttons .cart-count .cart-count-value{
  background:var(--sl-green) !important; color:#fff !important; font-weight:800;
  border-radius:999px; padding:1px 7px; font-size:12px;
}
} /* konec @media (min-width:992px) – horní řada jen desktop */

/* ---------------------------------------------------------------------
   4) NAVIGACE – MENU V ZAOBLENÉ KAPSLI, vystředěné
   --------------------------------------------------------------------- */
/* KAPSLE MENU jen na DESKTOPU (>=992px).
   Na mobilu (<992px) se nic z toho neaplikuje → Shoptet použije
   své nativní vysouvací menu (čistý svislý seznam). */
@media (min-width:992px){
  #header nav#navigation{
    background:transparent !important; border:0 !important;
    padding:10px 0 16px; overflow:visible !important;
  }
  /* přebití rozbité šířky navigace (konflikt) + vystředění kapsle */
  #header .navigation-in.menu{
    background:transparent !important;
    display:flex !important; justify-content:center !important;
    width:100% !important; max-width:100% !important; overflow:visible !important;
  }
  /* kapsle = ul.menu-level-1 */
  #header #navigation .navigation-in.menu > ul.menu-level-1{
    display:inline-flex !important; align-items:center !important; gap:2px;
    margin:0 !important; padding:6px 12px !important; list-style:none;
    background:var(--sl-capsule) !important;
    border:1px solid var(--sl-capsule-bd) !important;
    border-radius:40px !important;
    box-shadow:0 1px 2px rgba(17,24,39,.03);
  }
  #header #navigation ul.menu-level-1 > li{
    margin:0 !important; background:transparent !important;
    border-left:0 !important; border-right:0 !important;   /* pryč modré oddělovače */
    visibility:visible !important;                          /* přebití Shoptetího skrývání */
  }
  #header #navigation ul.menu-level-1 > li > a{
    display:block; padding:10px 18px !important;
    color:var(--sl-ink) !important;
    font-weight:600 !important; font-size:14px !important;
    text-transform:none !important; letter-spacing:0 !important;
    text-decoration:none !important; border-radius:999px;
    visibility:visible !important;
    transition:color .16s ease, background .16s ease;
  }
  #header #navigation ul.menu-level-1 > li > a b{ font-weight:600 !important; visibility:visible !important; }
  #header #navigation ul.menu-level-1 > li > a:hover,
  #header #navigation ul.menu-level-1 > li.active > a{
    color:var(--sl-green) !important; background:rgba(55,160,74,.10) !important;
  }
  /* skrýt přetečené „Více" – všech 8 položek se vejde do kapsle */
  #header .menu-helper{ display:none !important; }
}

/* ---------------------------------------------------------------------
   5) MOBIL – ponecháme nativní chování (burger), jen sjednotíme velikosti
   --------------------------------------------------------------------- */
/* MOBIL (<992px): do rozvržení záhlaví ani menu vůbec nezasahujeme.
   Necháváme nativní mobilní záhlaví Shoptetu (žádné bílé pruhy při scrollu).
   Globálně zůstává jen font Montserrat – žádné layoutové úpravy. */