/* ============================================================
   Xiaomi Market – Shoptet header & footer core CSS
   ============================================================ */

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

/* ArtNest alias vrstva: orange→korál, palette→ArtNest (z tokens.css). */
:root {
  --xm-orange:      var(--color-coral);
  --xm-orange-600:  var(--color-coral-press);
  --xm-orange-tint: var(--color-coral-soft);
  --xm-ink:         var(--color-ink);
  --xm-ink-2:       var(--color-ink-2);
  --xm-muted:       var(--color-ink-2);
  --xm-ink-soft:    var(--color-ink-3);
  --xm-line:        var(--color-line);
  --xm-line-2:      var(--color-line);
  --xm-soft:        var(--color-surface-2);
  --xm-radius:      var(--radius-md);
  --xm-radius-sm:   var(--radius-sm);
  --xm-container:   1440px;
  --xm-gutter:      24px;   /* jednotné boční odsazení: header, navigace i obsah lícují */
  --xm-t:           var(--dur) var(--ease);
  --xm-font:        var(--font-body);
  --xm-display:     var(--font-display);
}

body.xm-enhanced {
  font-family: var(--xm-font);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   GLOBÁLNÍ TYPOGRAFIE — Inter (text) + Outfit (nadpisy)
   Konzistentně na celém webu, vč. nativních Shoptet stránek.
   ============================================================ */
body.xm-enhanced,
body.xm-enhanced p,
body.xm-enhanced a,
body.xm-enhanced li,
body.xm-enhanced span,
body.xm-enhanced div,
body.xm-enhanced td,
body.xm-enhanced th,
body.xm-enhanced label,
body.xm-enhanced input,
body.xm-enhanced button,
body.xm-enhanced select,
body.xm-enhanced textarea {
  font-family: var(--xm-font);
}
body.xm-enhanced h1,
body.xm-enhanced h2,
body.xm-enhanced h3,
body.xm-enhanced h4,
body.xm-enhanced .p-detail-inner-header h1,
body.xm-enhanced .price-final,
body.xm-enhanced .price-final-holder {
  font-family: var(--xm-display);
}

/* ============================================================
   GLOBÁLNÍ TMAVÉ GRADIENTNÍ POZADÍ (na všech stránkách)
   Světlé sekce/karty si zachovávají vlastní bílé pozadí —
   gradient prosvítá jen tam, kde není obsah.
   ============================================================ */
.page-dark-bg,
body.xm-enhanced.page-dark-bg {
  background: #0D0D0D;
  background-image:
    radial-gradient(ellipse 600px 500px at 0% 100%, rgba(180, 60, 0, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 400px 400px at 100% 0%, rgba(30, 30, 40, 0.8) 0%, transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* ============================================================
   ZAROVNÁNÍ CELÉHO WEBU (Roztažení na šířku hlavičky 1440px)
   ============================================================ */
body.xm-enhanced .container {
    max-width: var(--xm-container) !important;
    padding-left: var(--xm-gutter) !important;
    padding-right: var(--xm-gutter) !important;
}

/* ============================================================
   GLOBÁLNÍ RESET SHOPTET OBALŮ
   ============================================================ */
body.xm-enhanced .top-navigation-bar, body.xm-enhanced .top-navigation-bar *,
body.xm-enhanced #header .header-top, body.xm-enhanced .xm-catbar { float: none !important; }

body.xm-enhanced #header > .container,
body.xm-enhanced #header > .navigation-wrapper,
body.xm-enhanced #header > .navigation-wrapper > .container {
  max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important; box-sizing: border-box !important;
}

body.xm-enhanced #content-wrapper {
  max-width: var(--xm-container) !important;
  width: 100% !important;
  margin: 32px auto 64px auto !important;
  background: #ffffff !important;
  padding: 32px 40px !important;
  border-radius: var(--xm-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05) !important;
  box-sizing: border-box !important;
}

body.xm-enhanced.is-homepage #content-wrapper,
body.xm-enhanced.is-homepage .content-wrapper,
body.xm-enhanced.is-homepage #content,
body.xm-enhanced.is-homepage .content,
body.xm-enhanced.is-homepage #main,
body.xm-enhanced.is-homepage .main,
body.xm-enhanced.is-homepage .content-inner {
  max-width: var(--xm-container) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.xm-enhanced #xm-root {
  margin: 0 auto !important;
  max-width: var(--xm-container) !important;
  width: 100% !important;
  border-radius: var(--xm-radius) !important;
  overflow: hidden !important;
}

body.xm-enhanced #left-column,
body.xm-enhanced .sidebar {
    display: none !important;
}

/* ============================================================
   ZÓNA 1 — HORNÍ UTILITY LIŠTA
   ============================================================ */
body.xm-enhanced .top-navigation-bar { 
  background: #f8f8f8 !important; 
  border-bottom: 1px solid var(--xm-line) !important; 
  padding: 0 !important; 
  width: 100% !important; 
}

body.xm-enhanced .top-navigation-bar > .container { 
  display: flex !important; 
  align-items: center !important; 
  justify-content: space-between !important; 
  width: 100% !important; 
  max-width: var(--xm-container) !important; 
  margin: 0 auto !important;
  padding-left: 24px !important; 
  padding-right: 24px !important;
  min-height: 40px !important; 
  box-sizing: border-box !important;
}

body.xm-enhanced .top-navigation-contacts,
body.xm-enhanced .top-navigation-tools { 
  display: flex !important; 
  align-items: center !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  flex: 0 0 auto !important; 
}

body.xm-enhanced .top-navigation-contacts strong,
body.xm-enhanced .top-navigation-menu,
body.xm-enhanced .top-navigation-tools .responsive-tools,
body.xm-enhanced .top-navigation-tools .dropdown > span { display: none !important; }

body.xm-enhanced .top-navigation-bar a, 
body.xm-enhanced .top-navigation-bar button,
body.xm-enhanced .top-navigation-bar .dropdown { 
  display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #637381 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; background: transparent !important; border: 0 !important; padding: 0 16px !important; border-right: 1px solid #e0e0e0 !important; transition: color var(--xm-t) !important; cursor: pointer; height: 16px !important; 
}

body.xm-enhanced .top-navigation-bar .dropdown button { padding: 0 !important; border: 0 !important; height: auto !important; color: inherit !important; font-weight: inherit !important; font-size: inherit !important; display: inline-flex !important; align-items: center !important; }
body.xm-enhanced .top-navigation-bar a:hover, body.xm-enhanced .top-navigation-bar button:hover, body.xm-enhanced .top-navigation-bar .dropdown:hover > button { color: var(--xm-orange) !important; }

body.xm-enhanced .top-navigation-contacts > *:last-child,
body.xm-enhanced .top-navigation-tools > *:last-child { border-right: none !important; padding-right: 0 !important; }
body.xm-enhanced .top-navigation-contacts > *:first-child { padding-left: 0 !important; }

body.xm-enhanced .top-navigation-bar svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; opacity: 0.8 !important; }
body.xm-enhanced .top-navigation-contacts a::before { display: none !important; }

body.xm-enhanced .top-navigation-tools .dropdown { position: relative !important; }
body.xm-enhanced .top-navigation-tools .dropdown-menu { position: absolute !important; top: calc(100% + 12px); right: 0; background: #fff; border: 1px solid var(--xm-line); border-radius: var(--xm-radius-sm); padding: 4px 0; margin: 0; list-style: none; min-width: 100px; box-shadow: 0 8px 24px -10px rgba(17, 17, 17, 0.18); display: none; z-index: 60; }
body.xm-enhanced .top-navigation-tools .dropdown.open .dropdown-menu, body.xm-enhanced .top-navigation-tools .dropdown-menu.show { display: block; }
body.xm-enhanced .top-navigation-tools .dropdown-menu a { display: block !important; padding: 8px 16px !important; color: var(--xm-ink-2) !important; border: none !important; height: auto !important; }
body.xm-enhanced .top-navigation-tools .dropdown-menu a:hover { background: var(--xm-soft) !important; color: var(--xm-orange) !important; }

body.xm-enhanced .top-navigation-bar .dropdown button { gap: 6px !important; }
body.xm-enhanced .top-navigation-bar .dropdown button .caret { display: none !important; }


/* ============================================================
   ZÓNA 2 — HLAVNÍ HLAVIČKA (LOGO | SEARCH | CART)
   ============================================================ */
body.xm-enhanced #header {
  background: #fff !important;
  border-bottom: 1px solid var(--xm-line-2) !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.xm-enhanced #header .header-top {
  display: grid !important;
  /* Sdílená mřížka s kategoriovou lištou: 1. sloupec (logo) má stejnou šířku
     jako sloupec "Všechny kategorie" pod ním (264px), stejný gap (32px) i
     stejné boční odsazení (var(--xm-gutter)). Levé i pravé okraje headeru tak
     přesně lícují s navigací i obsahem (container 1440px). */
  grid-template-columns: 264px minmax(0, 1fr) max-content !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 32px !important;
  max-width: var(--xm-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--xm-gutter) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 86px !important;
}

body.xm-enhanced #header .header-top::before,
body.xm-enhanced #header .header-top::after { display: none !important; content: none !important; }

/* ── 1. POZICE: Logo ── */
body.xm-enhanced #header .header-top > .site-name-wrapper,
body.xm-enhanced #header .header-top > .site-name { grid-column: 1 / 2 !important; grid-row: 1 !important; justify-self: start !important; margin: 0 !important; padding: 0 !important; }

body.xm-enhanced #header .header-top .site-name a,
body.xm-enhanced #header .header-top .site-name-wrapper a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-decoration: none !important; height: 60px !important; }

body.xm-enhanced #header .header-top .site-name img:not(.xm-logo-img) { width: 56px !important; height: 56px !important; object-fit: contain !important; display: block !important; flex-shrink: 0 !important; border-radius: 12px !important; margin: 0 !important; padding: 0 !important; }
body.xm-enhanced #header .header-top .site-name img.xm-logo-img { width: auto !important; height: 48px !important; object-fit: contain !important; display: block !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
body.xm-enhanced .xm-logo-text { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; height: 100% !important; }
body.xm-enhanced .xm-logo-img { display: block !important; height: 48px !important; width: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
body.xm-enhanced .xm-logo-title { font-family: var(--xm-display) !important; font-size: 31px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.04em !important; }
body.xm-enhanced .xm-logo-black { color: var(--xm-ink) !important; }
body.xm-enhanced .xm-logo-orange { color: var(--xm-orange) !important; }
/* Podtitulek loga (STAVEBNICE · NEON · DÁRKY) byl odstraněn — viz enhanceLogo() v JS. */
body.xm-enhanced .xm-logo-subtitle { display: none !important; }


/* ── 2. POZICE: Hledání ── */
body.xm-enhanced #header .header-top > .search,
body.xm-enhanced #header .header-top > .search-wrapper { grid-column: 2 / 3 !important; grid-row: 1 !important; justify-self: center !important; width: 100% !important; max-width: 600px !important; margin: 0 24px !important; display: block !important; position: relative !important; }

body.xm-enhanced #header .header-top .search form { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
body.xm-enhanced #header .header-top .search form::before, body.xm-enhanced #header .header-top .search form::after, body.xm-enhanced #header .header-top .search fieldset::before, body.xm-enhanced #header .header-top .search fieldset::after { display: none !important; content: none !important; }

body.xm-enhanced #header .header-top .search fieldset { display: block !important; width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #cbd5e1 !important; border-radius: 999px !important; transition: box-shadow var(--xm-t), border-color var(--xm-t) !important; box-sizing: border-box !important; position: relative !important; }
body.xm-enhanced #header .header-top .search fieldset:focus-within { border-color: var(--xm-orange) !important; box-shadow: 0 0 0 3px rgba(237, 77, 110, 0.15) !important; }

body.xm-enhanced #header .header-top .search input[type="text"],
body.xm-enhanced #header .header-top .search input[type="search"],
body.xm-enhanced #header .header-top .search input.search-input { display: block !important; width: 100% !important; height: 50px !important; border: none !important; outline: none !important; background: transparent !important; font: 400 15px/50px var(--xm-font) !important; color: var(--xm-ink) !important; box-shadow: none !important; padding: 0 155px 0 46px !important; margin: 0 !important; box-sizing: border-box !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 16px center !important; background-size: 18px !important; }
body.xm-enhanced #header .header-top .search input::placeholder { color: #999999 !important; opacity: 1 !important; }

body.xm-enhanced #header .header-top .search button[type="submit"],
body.xm-enhanced #header .header-top .search button.btn { position: absolute !important; top: 5px !important; right: 5px !important; bottom: 5px !important; height: 40px !important; background: var(--xm-orange) !important; color: #fff !important; font: 600 14px/40px var(--xm-font) !important; padding: 0 34px !important; border: 0 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 999px !important; margin: 0 !important; width: auto !important; min-width: max-content !important; box-sizing: border-box !important; transition: background var(--xm-t) !important; -webkit-appearance: none !important; z-index: 10 !important; }
body.xm-enhanced #header .header-top .search button[type="submit"]::before, body.xm-enhanced #header .header-top .search button.btn::before { content: "" !important; display: inline-block !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
body.xm-enhanced #header .header-top .search button[type="submit"]:hover, body.xm-enhanced #header .header-top .search button.btn:hover { background: var(--xm-orange-600) !important; }

/* Našeptávač PRODUKTŮ */
body.xm-enhanced .search-whisperer, body.xm-enhanced #header .search-whisperer { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999999 !important; background: #ffffff !important; border: 1px solid var(--xm-line) !important; border-radius: var(--xm-radius-sm) !important; box-shadow: 0 12px 32px rgba(17, 17, 17, 0.15) !important; }


/* ── 3. POZICE: Košík a ikony ── */
body.xm-enhanced #header .header-top > .navigation-buttons,
body.xm-enhanced #header .header-top > #cart-wrapper,
body.xm-enhanced #header .header-top > .header-buttons {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;            /* těsnější seskupení akcí (R2 — ÚPRAVA 2) */
  margin: 0 !important; padding: 0 !important;
  flex-shrink: 0 !important;       /* košík se nikdy neořízne */
  position: static !important;     /* theme ho jinak lepí absolutně na okraj okna */
  float: none !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
/* Texty akcí (Můj účet, Oblíbené) se nesmí lámat do dvou řádků */
body.xm-enhanced #header .header-top .top-nav-button-login,
body.xm-enhanced #header .header-top .top-nav-button-login span,
body.xm-enhanced #header .header-top .xm-fav-btn,
body.xm-enhanced #header .header-top .xm-fav-btn span { white-space: nowrap !important; }

/* Můj účet a Oblíbené - Společný luxusní vzhled */
body.xm-enhanced #header .header-top .top-nav-button-login,
body.xm-enhanced #header .header-top .xm-fav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--xm-ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color var(--xm-t) !important;
}

body.xm-enhanced #header .header-top .top-nav-button-login:hover,
body.xm-enhanced #header .header-top .xm-fav-btn:hover { color: var(--xm-orange) !important; }

body.xm-enhanced #header .header-top .top-nav-button-login svg,
body.xm-enhanced #header .header-top .xm-fav-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  transition: transform var(--xm-t), fill var(--xm-t) !important;
}

body.xm-enhanced #header .header-top .top-nav-button-login:hover svg,
body.xm-enhanced #header .header-top .xm-fav-btn:hover svg { transform: scale(1.1) !important; }

/* Vybarvené srdíčko */
body.xm-enhanced #header .header-top .xm-fav-btn:hover svg { fill: #fff0e6 !important; }

/* Obal ikony pro počítadlo (badge) */
body.xm-enhanced #header .header-top .xm-fav-icon-wrap {
  position: relative;
  display: inline-flex;
}

/* Červená bublina (Badge) pro oblíbené */
body.xm-enhanced #header .header-top .xm-fav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--xm-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Dropdown okno Oblíbené */
body.xm-enhanced #header .header-top .xm-favorites { position: relative; }
body.xm-enhanced #header .header-top .xm-fav-dropdown {
  position: absolute !important;
  top: calc(100% + 18px);
  right: -10px;
  background: #fff;
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius-sm);
  padding: 16px;
  width: 280px; /* Širší pro fotky a texty */
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.15);
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 60;
}

body.xm-enhanced #header .header-top .xm-favorites:hover .xm-fav-dropdown { display: flex; }

/* Most, aby dropdown nezmizel */
body.xm-enhanced #header .header-top .xm-favorites::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }

/* Pokožka dropdownu (samotné produkty) */
body.xm-enhanced #header .header-top .xm-fav-content {
  display: flex;
  flex-direction: column;
}

body.xm-enhanced .xm-fav-empty { font-size: 13px; color: var(--xm-ink-soft); text-align: center; padding: 12px 0; line-height: 1.5; }

body.xm-enhanced .xm-fav-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
body.xm-enhanced .xm-fav-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--xm-ink); transition: opacity var(--xm-t); }
body.xm-enhanced .xm-fav-item:hover { opacity: 0.7; }
body.xm-enhanced .xm-fav-item-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--xm-soft); flex-shrink: 0; }
body.xm-enhanced .xm-fav-item-info { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: hidden; }
body.xm-enhanced .xm-fav-item-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.xm-enhanced .xm-fav-item-price { font-size: 12px; font-weight: 700; color: var(--xm-orange); }
body.xm-enhanced .xm-fav-more { font-size: 11px; color: var(--xm-muted); text-align: center; padding-top: 8px; border-top: 1px solid var(--xm-line); margin-bottom: 0px; }

/* Tlačítko Vstoupit do seznamu */
body.xm-enhanced #header .header-top .xm-fav-link {
  display: block; background: var(--xm-orange); color: #fff !important; text-align: center; padding: 10px; border-radius: var(--xm-radius-sm); font-weight: 600; font-size: 13px; text-decoration: none; transition: background var(--xm-t), transform var(--xm-t);
}
body.xm-enhanced #header .header-top .xm-fav-link:hover { background: var(--xm-orange-600); transform: translateY(-1px); }

/* Tlačítko košíku */
body.xm-enhanced #header .header-top .btn.cart-count,
body.xm-enhanced #header .header-top a.cart-count { display: inline-flex !important; align-items: center !important; gap: 10px !important; height: 44px !important; padding: 0 16px !important; background: var(--xm-ink) !important; color: #fff !important; border-radius: var(--xm-radius-sm) !important; font: 600 13px/1 var(--xm-font) !important; text-decoration: none !important; border: 0 !important; transition: background-color var(--xm-t), transform var(--xm-t) !important; white-space: nowrap !important; }
body.xm-enhanced #header .header-top .cart-count > span { white-space: nowrap !important; }
body.xm-enhanced #header .header-top .btn.cart-count::after { display: none !important; content: none !important; }
/* Bílá ikona košíku vlevo od textu (prázdný i s počtem) */
body.xm-enhanced #header .header-top .btn.cart-count::before {
  content: "" !important;
  display: inline-block !important;
  width: 19px !important;
  height: 19px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
body.xm-enhanced #header .header-top .btn.cart-count:hover { background: #000 !important; transform: translateY(-1px) !important; }
body.xm-enhanced #header .header-top a[data-target="navigation"] { display: none !important; }

/* ── Dokonalé vycentrování košíku (i jeho obalu) v header řádku ── */
body.xm-enhanced #header .header-top > .navigation-buttons,
body.xm-enhanced #header .header-top > #cart-wrapper,
body.xm-enhanced #header .header-top > .header-buttons {
  height: 100% !important;
  align-self: center !important;
}
body.xm-enhanced #header .header-top .navigation-buttons > *,
body.xm-enhanced #header .header-top #cart-wrapper,
body.xm-enhanced #header .header-top .cart,
body.xm-enhanced #header .header-top .cart-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: none !important;
  height: auto !important;
}
/* Košíkové tlačítko: žádný svislý posun, čisté vystředění obsahu */
body.xm-enhanced #header .header-top .btn.cart-count,
body.xm-enhanced #header .header-top a.cart-count {
  margin: 0 !important;
  vertical-align: middle !important;
  align-self: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
body.xm-enhanced #header .header-top .btn.cart-count > * {
  display: inline-flex !important;
  align-items: center !important;
}

/* ── PEVNÁ ŠÍŘKA KOŠÍKU: stejná velikost prázdný i plný ──────────
   Bez pevné min-šířky se tlačítko po přidání produktu stahuje a text
   "1 000 Kč" se láme na více řádků (zmačkaný vzhled). Pevná min-šířka
   + nezalamování drží tlačítko konzistentní; pravý okraj je díky
   justify-self:end vždy zarovnaný s pravým okrajem kategoriové lišty. */
body.xm-enhanced #header .header-top .btn.cart-count,
body.xm-enhanced #header .header-top a.cart-count {
  min-width: 132px !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
body.xm-enhanced #header .header-top .btn.cart-count > *,
body.xm-enhanced #header .header-top .btn.cart-count span,
body.xm-enhanced #header .header-top a.cart-count > *,
body.xm-enhanced #header .header-top a.cart-count span {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Uvnitř Shoptet tlačítka bývají prázdné spany a vlastní ikona — obojí by
   s gapem dělalo mezery navíc. Ikonu dodáváme přes ::before, zbytek pryč.
   (Musí být AŽ ZA pravidly `.cart-count > *` výše — stejná specificita,
   rozhoduje pořadí v souboru.) */
body.xm-enhanced #header .header-top .btn.cart-count > span:empty,
body.xm-enhanced #header .header-top a.cart-count > span:empty,
body.xm-enhanced #header .header-top .btn.cart-count .cart-icon,
body.xm-enhanced #header .header-top a.cart-count .cart-icon,
body.xm-enhanced #header .header-top .btn.cart-count .icon,
body.xm-enhanced #header .header-top .btn.cart-count svg,
body.xm-enhanced #header .header-top .btn.cart-count img,
body.xm-enhanced #header .header-top .btn.cart-count i { display: none !important; }


/* ============================================================
   ZÓNA 3 — KATEGORIOVÁ LIŠTA (DOKONALÉ ROZTAŽENÍ MENU)
   ============================================================ */
body.xm-enhanced .xm-catbar { 
  background: #fff !important; 
  border-bottom: 1px solid var(--xm-line) !important; 
  height: 56px !important;
  overflow: visible !important; 
  display: block !important;
  width: 100% !important;
  clear: both !important;
}

body.xm-enhanced .xm-catbar > .container { 
  display: grid !important; 
  grid-template-columns: 264px 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 32px !important;
  max-width: var(--xm-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--xm-gutter) !important;
  width: 100% !important; 
  height: 100% !important;
  min-height: 56px !important;
  max-height: 56px !important;
  box-sizing: border-box !important; 
}

body.xm-enhanced .xm-catbar > .container::before,
body.xm-enhanced .xm-catbar > .container::after { display: none !important; content: none !important; }

/* TLAČÍTKO VŠECHNY KATEGORIE */
body.xm-enhanced .xm-allcats-wrap { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 100% !important; height: 48px !important; position: relative !important; display: flex !important; align-items: center !important; overflow: visible !important; }
body.xm-enhanced .xm-allcats { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; padding: 0 22px !important; background: var(--xm-orange) !important; color: #fff !important; font: 600 14px/1 var(--xm-font) !important; border: 0 !important; border-radius: var(--xm-radius-sm) !important; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(237, 77, 110, 0.55); transition: background-color var(--xm-t), transform var(--xm-t); }
body.xm-enhanced .xm-allcats:hover, body.xm-enhanced .xm-allcats.is-open { background: var(--xm-orange-600) !important; transform: translateY(-1px); }
body.xm-enhanced .xm-allcats .xm-allcats-l { display: inline-flex; align-items: center; gap: 10px; }
body.xm-enhanced .xm-allcats svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
body.xm-enhanced .xm-allcats .xm-chev { display: inline-flex; transition: transform var(--xm-t); }
body.xm-enhanced .xm-allcats.is-open .xm-chev { transform: rotate(180deg); }

/* VLASTNÍ ODKAZY KATEGORIÍ */
body.xm-enhanced .xm-catbar #navigation { grid-column: 2 / 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; position: static !important; float: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; }
body.xm-enhanced .xm-catbar #navigation .navigation-in { display: flex !important; align-items: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }

body.xm-enhanced .xm-catbar ul.menu-level-1 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 28px !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 > li { display: inline-flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 100% !important; font: 600 14px/1 var(--xm-font) !important; color: var(--xm-ink) !important; text-decoration: none !important; padding: 0 !important; white-space: nowrap !important; background: transparent !important; transition: color var(--xm-t) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 > li > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 2px; background: var(--xm-orange); transition: right var(--xm-t); }
body.xm-enhanced .xm-catbar ul.menu-level-1 > li > a:hover { color: var(--xm-orange) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 > li > a:hover::after { right: 0 !important; }

body.xm-enhanced .xm-catbar .menu-level-2, body.xm-enhanced .xm-catbar .menu-level-3, body.xm-enhanced .xm-catbar [class*="submenu"], body.xm-enhanced .xm-catbar .submenu-arrow { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* ============================================================
   SPECIÁLNÍ PROMO ODKAZY V MENU (Pravá strana s ikonami)
   ============================================================ */
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-item { display: inline-flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-item--first { margin-left: auto !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 100% !important; font: 600 14px/1 var(--xm-font) !important; color: var(--xm-ink-soft) !important; text-decoration: none !important; padding: 0 !important; white-space: nowrap !important; background: transparent !important; transition: color var(--xm-t) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link svg { width: 15px !important; height: 15px !important; transition: transform var(--xm-t) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 2px; background: var(--xm-orange); transition: right var(--xm-t); }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link:hover { color: var(--xm-orange) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link:hover svg { transform: scale(1.1); }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-link:hover::after { right: 0 !important; }

body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-orange { color: var(--xm-orange) !important; }
body.xm-enhanced .xm-catbar ul.menu-level-1 .xm-promo-orange::after { right: 0 !important; }

/* ============================================================
   RESPONSIVE BREAKPOINT SYSTÉM — HEADER / NAVIGACE (ÚKOL 1)
   ≥1920 4K · 1440–1920 FullHD · 1280–1440 velké laptopy ·
   1024–1280 MacBook 13" (PRIORITA) · 768–1024 tablet land. ·
   600–768 tablet portrait · 390–600 velké mobily ·
   320–390 std. mobily · <320 malé mobily
   Logo se nikdy nepřekrývá s hledáním (grid s pevným 1. sloupcem).
   ============================================================ */

/* ── Full HD a větší: jen zajistíme klidné maximum ─────────── */
@media (min-width: 1920px) {
  body.xm-enhanced #header .header-top { gap: 28px !important; }
}

/* ── Velké laptopy (1280–1440): zúžit mezery a vyhledávání ─── */
@media (max-width: 1439px) {
  /* Header i kategoriová lišta sdílí stejný 1. sloupec a gap → levé okraje lícují */
  body.xm-enhanced #header .header-top { grid-template-columns: 240px minmax(0, 1fr) max-content !important; gap: 24px !important; }
  body.xm-enhanced .xm-catbar > .container { grid-template-columns: 240px 1fr !important; gap: 24px !important; }
  body.xm-enhanced #header .header-top > .search,
  body.xm-enhanced #header .header-top > .search-wrapper { max-width: 560px !important; margin: 0 16px !important; }
  body.xm-enhanced .xm-catbar ul.menu-level-1 { gap: 22px !important; }
}

/* ── MacBook 13" M-series (1024–1280) — PRIORITA OPRAVY ────── */
@media (max-width: 1279px) and (min-width: 1024px) {
  /* Užší gutter, ale STEJNÝ pro header i lištu (přes proměnnou) → okraje lícují */
  body.xm-enhanced { --xm-gutter: 18px; }
  body.xm-enhanced #header .header-top { grid-template-columns: 210px minmax(0, 1fr) max-content !important; gap: 18px !important; }
  body.xm-enhanced .xm-catbar > .container { grid-template-columns: 210px 1fr !important; gap: 18px !important; }
  body.xm-enhanced #header .header-top > .search,
  body.xm-enhanced #header .header-top > .search-wrapper { max-width: 460px !important; margin: 0 8px !important; }
  /* Logo zmenšit, aby se nikdy nepřekrývalo s hledáním */
  body.xm-enhanced .xm-logo-title { font-size: 26px !important; }
  body.xm-enhanced #header .header-top > .navigation-buttons,
  body.xm-enhanced #header .header-top > #cart-wrapper,
  body.xm-enhanced #header .header-top > .header-buttons { gap: 14px !important; }
  /* Kategoriová lišta: odkazy se mohou horizontálně scrollovat */
  body.xm-enhanced .xm-catbar ul.menu-level-1 { overflow-x: auto; gap: 18px !important; padding-bottom: 4px !important; }
}

/* ── Tablet landscape (768–1024): mega menu → hamburger ────── */
@media (max-width: 1023px) {
  /* Skryjeme horizontální odkazy kategorií, zůstane jen tlačítko
     "Všechny kategorie" fungující jako hamburger (otevře mega menu). */
  body.xm-enhanced .xm-catbar #navigation { display: none !important; }
  body.xm-enhanced .xm-allcats-wrap { width: auto !important; }
  body.xm-enhanced .xm-allcats { width: auto !important; flex: 0 0 auto !important; }
  body.xm-enhanced #header .header-top a[data-target="navigation"] { display: inline-flex !important; }
  /* Skrytí pomocných odkazů v top liště */
  body.xm-enhanced .xm-top-location, body.xm-enhanced .xm-top-tracking, body.xm-enhanced .xm-top-help { display: none !important; }
  /* Zúžení vyhledávání */
  body.xm-enhanced #header .header-top { grid-template-columns: 190px 1fr max-content !important; gap: 14px !important; }
  body.xm-enhanced #header .header-top > .search { max-width: 420px !important; margin: 0 8px !important; }
}

/* ── Tablet portrait a níže (<768): hledání do 2. řádku ─────── */
@media (max-width: 767px) {
  body.xm-enhanced { --xm-gutter: 16px; }
  body.xm-enhanced .top-navigation-menu { display: none !important; }
  /* Header: 1. řádek logo + ikony, 2. řádek vyhledávání přes celou šířku */
  body.xm-enhanced #header .header-top {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 12px var(--xm-gutter) !important;
  }
  body.xm-enhanced #header .header-top > .site-name-wrapper,
  body.xm-enhanced #header .header-top > .site-name { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  body.xm-enhanced #header .header-top > .navigation-buttons,
  body.xm-enhanced #header .header-top > #cart-wrapper,
  body.xm-enhanced #header .header-top > .header-buttons {
    grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; gap: 16px !important;
  }
  body.xm-enhanced #header .header-top > .search,
  body.xm-enhanced #header .header-top > .search-wrapper {
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    max-width: 100% !important; width: 100% !important; margin: 0 !important;
  }
  /* Ikony účtu/oblíbených bez textových popisků (jen ikona) */
  body.xm-enhanced #header .header-top .top-nav-button-login span,
  body.xm-enhanced #header .header-top .xm-fav-btn > span { display: none !important; }
  /* Kategoriová lišta jako sloupec */
  body.xm-enhanced .xm-catbar { height: auto !important; }
  body.xm-enhanced .xm-catbar > .container { display: flex !important; flex-direction: column !important; min-height: 0 !important; padding-bottom: 12px !important; }
  body.xm-enhanced .xm-allcats { height: 44px !important; padding: 0 16px !important; font-size: 13px !important; }
}

/* ── Velké mobily (390–600): košík zkrátit na ikonu ─────────── */
@media (max-width: 599px) {
  body.xm-enhanced .top-navigation-contacts .project-email { display: none !important; }
  /* Tlačítko košíku: skryjeme textový popisek, ponecháme ikonu + počet */
  body.xm-enhanced #header .header-top .btn.cart-count,
  body.xm-enhanced #header .header-top a.cart-count {
    padding: 0 12px !important; height: 40px !important; gap: 6px !important;
    font-size: 0 !important; /* skryje textový popisek "Prázdný košík" */
    min-width: 0 !important;  /* na mobilu kompaktní (ikona + počet) */
    justify-content: center !important;
  }
  /* Počet kusů a cena uvnitř košíku zůstanou čitelné */
  body.xm-enhanced #header .header-top .cart-count .count,
  body.xm-enhanced #header .header-top .cart-count .price,
  body.xm-enhanced #header .header-top .cart-count [class*="count"],
  body.xm-enhanced #header .header-top .cart-count [class*="price"] { font-size: 13px !important; }
  body.xm-enhanced #header .header-top .btn.cart-count svg,
  body.xm-enhanced #header .header-top a.cart-count svg { width: 20px !important; height: 20px !important; }
}

/* ── Standardní mobily (320–390) ───────────────────────────── */
@media (max-width: 389px) {
  body.xm-enhanced { --xm-gutter: 12px; }
  body.xm-enhanced .xm-logo-title { font-size: 25px !important; }
  body.xm-enhanced #header .header-top { padding: 10px var(--xm-gutter) !important; gap: 10px !important; }
  body.xm-enhanced #header .header-top > .navigation-buttons { gap: 12px !important; }
}

/* ── Malé mobily (<320) ────────────────────────────────────── */
@media (max-width: 319px) {
  body.xm-enhanced .xm-logo-title { font-size: 21px !important; }
}

/* ============================================================
   SKRYTÍ NATIVNÍHO SHOPTET FOOTERU (R2 — ÚPRAVA 1)
   ------------------------------------------------------------
   Nativní šedý Shoptet footer (Kontakt, „Přijímáme online platby",
   „Vytvořil Shoptet" …) vždy nahrazujeme vlastním tmavým .xm-footer.
   Skrýváme ho přes CSS (ne jen JS inline), takže zmizí spolehlivě
   i na stránce košíku, kterou Shoptet překresluje AJAXem — pravidlo
   platí, kdykoli se element objeví. Náš .xm-footer (jiná třída)
   tím dotčen není.
   ============================================================ */
body.xm-enhanced #footer,
body.xm-enhanced #page-footer,
body.xm-enhanced .footer-wrapper,
body.xm-enhanced .shoptet-footer,
body.cart #footer,
body.cart .shoptet-footer { display: none !important; }

/* ============================================================
   CUSTOM DARK FOOTER — 3 vrstvy (jako Alza.cz)
   ============================================================ */
.xm-footer {
  background: #111111;
  color: rgba(255,255,255,0.72);
  font-family: var(--xm-font);
}

/* ── VRSTVA 1: Hlavní footer ── */
.xm-footer__wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--xm-container);
  margin: 0 auto;
  padding: 60px 24px 40px;
  box-sizing: border-box;
}

.xm-footer__logo { margin-bottom: 14px; }
.xm-footer__logo-text {
  font-family: var(--xm-display);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.xm-footer__logo-accent { color: var(--xm-orange); }

.xm-footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin: 0 0 20px;
  line-height: 1.55;
}

.xm-footer__contact-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.xm-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--xm-t);
}
.xm-footer__contact-link:hover { color: var(--xm-orange); }
.xm-footer__contact-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}
.xm-footer__hours {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin: 0 0 18px;
}
.xm-footer__hours strong { color: rgba(255,255,255,0.6); font-weight: 600; }

.xm-footer__social { display: flex; align-items: center; gap: 10px; }
.xm-footer__social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  transition: background var(--xm-t), color var(--xm-t), transform var(--xm-t);
}
.xm-footer__social a:hover { background: var(--xm-orange); color: #fff; transform: translateY(-2px); }
.xm-footer__social svg { width: 17px; height: 17px; }

.xm-footer__col h4 {
  font-family: var(--xm-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 16px;
}

.xm-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.xm-footer__col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--xm-t), padding-left var(--xm-t);
  display: inline-block;
}
.xm-footer__col ul li a:hover { color: var(--xm-orange); padding-left: 4px; }

/* Platby a dopravci */
.xm-footer__pay-row, .xm-footer__ship-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.xm-footer__pay-badge, .xm-footer__ship-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.4;
  white-space: nowrap;
}
.xm-footer__ship-badge { color: rgba(255,255,255,0.45); }
.xm-footer__sub-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 8px;
}

/* ── VRSTVA 2: Právní lišta ── */
.xm-footer__legal {
  background: #0A0A0A;
  border-top: 1px solid #222;
  padding: 20px 0;
}
.xm-footer__legal-inner {
  max-width: var(--xm-container);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.xm-footer__legal-inner a {
  font-size: 13px;
  color: #999;
  text-decoration: none;
  transition: color var(--xm-t);
}
.xm-footer__legal-inner a:hover { color: var(--xm-orange); }

/* ── VRSTVA 3: Copyright lišta ── */
.xm-footer__copybar {
  background: #080808;
  padding: 14px 0;
  text-align: center;
}
.xm-footer__copy {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.7;
}
.xm-footer__copy a,
.xm-footer__cookie-link {
  color: #888;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--xm-t);
}
.xm-footer__copy a:hover,
.xm-footer__cookie-link:hover { color: var(--xm-orange); }
.xm-footer__credit { display: block; font-size: 12px; color: #555; margin-top: 4px; }

@media (max-width: 1100px) {
  .xm-footer__wrap { grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .xm-footer__wrap { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 24px 32px; }
}
@media (max-width: 480px) {
  .xm-footer__wrap { grid-template-columns: 1fr; }
  .xm-footer__legal-inner { gap: 14px; }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */
.xm-contact-root {
  font-family: var(--xm-font);
  -webkit-font-smoothing: antialiased;
}

.xm-contact-hero {
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  color: #fff;
  padding: 60px 24px;
  text-align: center;
  border-radius: var(--xm-radius) var(--xm-radius) 0 0;
  margin-bottom: 0;
}
.xm-contact-hero h1 {
  font-family: var(--xm-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: #fff;
}
.xm-contact-hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.xm-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 32px 0 24px;
}

.xm-contact-card {
  background: #fff;
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow var(--xm-t), transform var(--xm-t);
}
.xm-contact-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }

.xm-contact-card__icon {
  width: 52px;
  height: 52px;
  background: var(--xm-orange-tint);
  border-radius: var(--xm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--xm-orange);
}
.xm-contact-card__icon svg { width: 22px; height: 22px; stroke: currentColor; }

.xm-contact-card h3 { font-size: 15px; font-weight: 700; color: var(--xm-ink); margin: 0 0 8px; }
.xm-contact-card a {
  display: block;
  font-size: 14px;
  color: var(--xm-orange);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 6px;
}
.xm-contact-card p { font-size: 13px; color: var(--xm-muted); margin: 0; line-height: 1.5; }

.xm-contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 0 0 32px;
}

.xm-contact-form-wrap h2,
.xm-contact-hours h2 {
  font-family: var(--xm-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--xm-ink);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.xm-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.xm-contact-field { display: flex; flex-direction: column; gap: 6px; }
.xm-contact-field--full { grid-column: 1 / -1; }

.xm-contact-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--xm-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xm-contact-field input,
.xm-contact-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius-sm);
  font-family: var(--xm-font);
  font-size: 14px;
  color: var(--xm-ink);
  background: var(--xm-soft);
  transition: border-color var(--xm-t), box-shadow var(--xm-t), background var(--xm-t);
  box-sizing: border-box;
  resize: vertical;
}
.xm-contact-field input:focus,
.xm-contact-field textarea:focus {
  outline: none;
  border-color: var(--xm-orange);
  box-shadow: 0 0 0 3px rgba(237, 77, 110, 0.12);
  background: #fff;
}

.xm-contact-submit {
  grid-column: 1 / -1;
  background: var(--xm-orange);
  color: #fff;
  border: 0;
  padding: 13px 28px;
  border-radius: var(--xm-radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--xm-font);
  cursor: pointer;
  transition: background var(--xm-t), transform 0.15s;
  letter-spacing: 0.01em;
}
.xm-contact-submit:hover { background: var(--xm-orange-600); transform: translateY(-1px); }

.xm-contact-hours__grid {
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.xm-contact-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xm-line-2);
  font-size: 14px;
}
.xm-contact-hours__row:last-child { border-bottom: none; }
.xm-contact-hours__day { font-weight: 500; color: var(--xm-ink); }
.xm-contact-hours__time { color: var(--xm-orange); font-weight: 600; }
.xm-contact-hours__row--closed .xm-contact-hours__time { color: var(--xm-muted); font-weight: 400; }

.xm-contact-address {
  background: var(--xm-soft);
  border-radius: var(--xm-radius-sm);
  padding: 20px;
}
.xm-contact-address h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--xm-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.xm-contact-address address {
  font-style: normal;
  font-size: 14px;
  color: var(--xm-ink-2);
  line-height: 1.65;
  margin-bottom: 14px;
}
.xm-contact-map-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--xm-orange);
  text-decoration: none;
  transition: text-decoration var(--xm-t);
}
.xm-contact-map-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .xm-contact-cards { grid-template-columns: 1fr; gap: 14px; }
  .xm-contact-body { grid-template-columns: 1fr; }
  .xm-contact-form { grid-template-columns: 1fr; }
  .xm-contact-hero { padding: 40px 16px; }
}


/* ============================================================
   GLOBÁLNÍ UX — STICKY HEADER (celý header jako JEDEN blok)
   ------------------------------------------------------------
   Wrapper .xm-header-sticky (vytváří buildStickyHeader v JS) obaluje
   utility lištu + #header + lištu kategorií. Sticky dáváme na NĚJ, takže
   při scrollu zůstává nahoře celý header, ne jen jedna jeho část.
   ============================================================ */
body.xm-enhanced .xm-header-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff !important;        /* zachová podklad pod průhlednými částmi */
  overflow: visible !important;       /* NESMÍ oříznout rozbalené megamenu */
  transition: box-shadow var(--xm-t) !important;
}
/* Shadow při scrollu (>50px → třída .xm-scrolled na <body>) na celý blok. */
body.xm-enhanced.xm-scrolled .xm-header-sticky {
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
  transition: box-shadow 0.3s ease !important;
}

/* #header zůstává sticky jako fallback (kdyby wrapper nevznikl), ale jakmile
   je uvnitř wrapperu, lepí se wrapper a #header je statický. */
body.xm-enhanced #header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: box-shadow var(--xm-t), background-color var(--xm-t) !important;
}
body.xm-enhanced .xm-header-sticky #header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* ============================================================
   PERFORMANCE — ANIMACE PŘI SCROLLU (R2 — ÚPRAVA 3D)
   ------------------------------------------------------------
   Univerzální opt-in třída: prvek je skrytý a animuje se až ve chvíli,
   kdy vstoupí do viewportu (viz IntersectionObserver v JS). Žádný stávající
   prvek tuto třídu zatím nemá → nic se vizuálně nemění, jen přidáváme
   mechanismus. (Homepage už scroll-reveal řeší přes .xm-reveal.)
   Bez JS / IntersectionObserveru se obsah nikdy neztratí — JS má fallback,
   který prvkům rovnou přidá .visible.
   ============================================================ */
body.xm-enhanced .animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
body.xm-enhanced .animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.xm-enhanced .animate-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   GLOBÁLNÍ UX — BACK TO TOP
   ============================================================ */
.xm-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--xm-orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Neutrální stín pro hloubku (žádné barevné halo, které vypadalo jako druhý
     žlutý kruh pod oranžovým tlačítkem). */
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--xm-t), transform var(--xm-t), background var(--xm-t);
  z-index: 1200;
}
.xm-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.xm-to-top:hover { background: var(--xm-orange-600); transform: translateY(-3px); }
.xm-to-top svg { width: 22px; height: 22px; stroke: #fff; }

/* Čistá animace „nahoru": šipka uvnitř jemně pluje vzhůru a zpět.
   Na hover zrychlí — naznačuje akci. Reduced-motion řeší tokens.css. */
.xm-to-top.is-visible svg { animation: xmToTopFloat 2.2s ease-in-out infinite; }
.xm-to-top:hover svg { animation-duration: 1s; }
@keyframes xmToTopFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ============================================================
   PLOVOUCÍ BUBLINA "24h AKCE" — pravý okraj, svisle vystředěná
   ============================================================ */
.xm-akce-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1150;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 9px;
  background: var(--xm-orange);
  color: #fff;
  text-decoration: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -8px 8px 26px -8px rgba(237, 77, 110,0.65);
  transition: padding-right var(--xm-t), background var(--xm-t), box-shadow var(--xm-t);
}
.xm-akce-fab:hover {
  background: var(--xm-orange-600);
  padding-right: 14px;
  box-shadow: -10px 10px 30px -8px rgba(237, 77, 110,0.8);
}
.xm-akce-fab__ico {
  display: inline-flex;
  animation: xmAkcePulse 2s ease-in-out infinite;
}
.xm-akce-fab__ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.xm-akce-fab__txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--xm-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1;
}
@keyframes xmAkcePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@media (max-width: 640px) {
  .xm-akce-fab { padding: 12px 7px; gap: 6px; }
  .xm-akce-fab__ico svg { width: 18px; height: 18px; }
  .xm-akce-fab__txt { font-size: 11px; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .xm-akce-fab__ico { animation: none; }
}

/* ============================================================
   GLOBÁLNÍ UX — COOKIE BANNER
   ============================================================ */
.xm-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #111;
  border-top: 1px solid #2a2a2a;
  padding: 18px 24px;
  z-index: 1300;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
}
.xm-cookie.is-open { transform: translateY(0); }
.xm-cookie__inner {
  max-width: var(--xm-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.xm-cookie__text { flex: 1; min-width: 240px; font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; }
.xm-cookie__text strong { color: #fff; display: block; font-size: 14px; margin-bottom: 3px; }
.xm-cookie__text a { color: var(--xm-orange); text-decoration: none; }
.xm-cookie__text a:hover { text-decoration: underline; }
.xm-cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.xm-cookie__btn {
  border: 0;
  cursor: pointer;
  font: 600 13px/1 var(--xm-font);
  padding: 11px 22px;
  border-radius: var(--xm-radius-sm);
  transition: background var(--xm-t), transform var(--xm-t), border-color var(--xm-t);
}
.xm-cookie__btn--accept { background: var(--xm-orange); color: #fff; }
.xm-cookie__btn--accept:hover { background: var(--xm-orange-600); transform: translateY(-1px); }
.xm-cookie__btn--settings { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.22); }
.xm-cookie__btn--settings:hover { border-color: #fff; color: #fff; }

@media (max-width: 600px) {
  .xm-cookie__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .xm-cookie__actions { justify-content: stretch; }
  .xm-cookie__btn { flex: 1; }
  .xm-to-top { right: 16px; bottom: 16px; }
}

/* ============================================================
   GLOBÁLNÍ UX — HOVER PRODUKTOVÝCH KARET (Shoptet nativní)
   ============================================================ */
body.xm-enhanced .products .product,
body.xm-enhanced .product-list .product,
body.xm-enhanced .p-list .p {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
body.xm-enhanced .products .product:hover,
body.xm-enhanced .product-list .product:hover,
body.xm-enhanced .p-list .p:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}

/* ============================================================
   ÚKOL 1 — SKRYTÍ NEWSLETTER SEKCE
   Vlastní homepage newsletter byl odstraněn z Xiaomi.js.
   Níže defenzivně skryjeme i případnou Shoptetem generovanou
   newsletter sekci (Shoptet ji vykresluje jako .newsletter /
   .newsletter-box / blok s přihlášením k odběru novinek).
   ============================================================ */
body.xm-enhanced .newsletter,
body.xm-enhanced .newsletter-box,
body.xm-enhanced .newsletter-section,
body.xm-enhanced .newsletter-wrapper,
body.xm-enhanced [class*="newsletter"],
body.xm-enhanced .xm-newsletter {
  display: none !important;
}
/* ============================================================
   BREADCRUMB — JEDNOTNÝ NA CELÉM WEBU
   Styl převzatý z produktové stránky a aplikovaný globálně
   (body.xm-enhanced) — stejné bílé pozadí, písmo, výška i zarovnání
   na Kontaktech, listinzích, CMS stránkách i produktu. Breadcrumb je
   bílé zaoblené "víčko" karty, na které plynule navazuje #content-wrapper.
   Kategorie mají vlastní drobečkovou navigaci (nativní je skrytá),
   homepage breadcrumb nemá — na obou se proto karta nezplošťuje.
   ============================================================ */
body.xm-enhanced .breadcrumbs-wrapper {
  max-width: var(--xm-container) !important;
  width: 100% !important;
  margin: 32px auto 0 !important;
  padding: 16px 40px 4px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: var(--xm-radius) var(--xm-radius) 0 0 !important;
  box-shadow: 0 -6px 24px -12px rgba(0,0,0,0.05) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}
body.xm-enhanced .breadcrumbs-wrapper > .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.xm-enhanced .breadcrumbs,
body.xm-enhanced .breadcrumbs-wrapper .breadcrumbs {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--xm-muted) !important;
}
body.xm-enhanced .breadcrumbs a {
  color: var(--xm-muted) !important;
  text-decoration: none !important;
  transition: color var(--xm-t) !important;
}
body.xm-enhanced .breadcrumbs a:hover { color: var(--xm-orange) !important; }

/* Karta navazuje přímo pod breadcrumb (společný bílý blok).
   Jen tam, kde breadcrumb reálně je (adjacency) a mimo kategorie. */
html:not([data-xm-category="1"]) body.xm-enhanced .breadcrumbs-wrapper + #content-wrapper {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
@media (max-width: 768px) {
  body.xm-enhanced .breadcrumbs-wrapper {
    margin-top: 16px !important;
    padding: 14px 18px 2px !important;
  }
}
@media (max-width: 480px) {
  body.xm-enhanced .breadcrumbs-wrapper {
    padding: 12px 14px 2px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   ARTNEST — utility lišta (.xm-utility, vkládá ji xiaomi-shoptet.js).
   Statický inkoustový proužek s benefity, vycentrovaný
   (1:1 podle utility lišty v design-reference).
   ============================================================ */
.xm-utility {
  background: var(--color-ink, #1E1B19);
  color: #F3EDE2;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 13px;
  line-height: 1.2;
}
.xm-utility__in {
  max-width: var(--xm-container, 1440px);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.xm-utility span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.xm-utility b { color: var(--color-coral, #ED4D6E); font-weight: 600; }
@media (max-width: 680px) {
  .xm-utility__in { gap: 14px; font-size: 12px; padding: 8px 14px; }
  .xm-utility span:nth-child(3) { display: none; } /* na mobilu schovej třetí benefit */
}

/* ============================================================
   ARTNEST — oznamovací lišta (.xm-anno) ZRUŠENA.
   Duplikovala benefit lištu .xm-utility ve sticky headeru a přes
   admin kód se renderovala nad footerem. Skrýváme ji všude;
   z DOMu ji maže cleanStrayUI() v JS. Benefit lišta zůstává jen
   jedna — v headeru.
   ============================================================ */
.xm-anno { display: none !important; }
/* .xm-utility kdekoli mimo sticky header (zatoulaná kopie) — skrýt hned,
   JS ji pak odstraní z DOMu. */
.xm-utility:not(.xm-header-sticky .xm-utility) { display: none !important; }

/* ============================================================
   CIZÍ TLAČÍTKA „NAHORU" (nativní šablona apod.) — skrýt.
   Jediné tlačítko zpět nahoru je naše růžové .xm-to-top.
   ============================================================ */
#scrollToTop, .scroll-to-top, .scrollToTop, #toTop, .to-top,
.back-to-top, #back-to-top, .go-to-top, .totop, .top-button,
.shp-scroll-top { display: none !important; }