/* WheelMarket – Mobile responsive styles */
/* Include in every page: <link rel="stylesheet" href="wm-mobile.css"> */

@media (max-width: 768px) {
  /* Nav */
  .nav-inner { padding: 0 12px !important; gap: 8px !important; }
  #notifBtn { width: 30px !important; height: 30px !important; }

  /* Marketplace layout */
  .main { grid-template-columns: 1fr !important; padding: 12px !important; }
  aside { display: none !important; }
  .listings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .listing-card { border-radius: 10px !important; }
  /* Obrázek jako čtverec – vyplní celou šířku karty. Dřív měl pevných
     130 px na kartě široké 178, takže vznikal pruh a fotka byla malá.
     Autíčka jsou detailní, malý náhled jim ubližuje. */
  .card-img { height: auto !important; aspect-ratio: 1 / 1 !important; }
  .card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .card-name { font-size: 13px !important; }
  .card-price { font-size: 15px !important; }

  /* Hero */
  .hero-section { padding: 16px !important; flex-direction: column !important; gap: 12px !important; }
  .hero-visual { display: none !important; }
  .hero-stats { gap: 16px !important; }
  .hero-title { font-size: 22px !important; }
  .hero-sub { font-size: 13px !important; }

  /* Currency switcher – smaller on mobile */
  [id^="cur-"] { padding: 0 7px !important; font-size: 10px !important; height: 24px !important; }

  /* Chat
     POZOR: .sidebar musí být omezené na .chat-wrap! Dřív tu bylo obecné
     `.sidebar{display:none}`, které schovávalo i NÁKUPNÍ PANEL na detailu
     inzerátu (cena + "Add to cart") – zboží tak nešlo koupit. */
  .chat-wrap { grid-template-columns: 1fr !important; }
  .chat-wrap .sidebar { display: none !important; }
  .chat-wrap.show-sidebar .sidebar { display: flex !important; }
  .chat-wrap.show-sidebar .chat-main { display: none !important; }

  /* Dashboard */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .db-grid { grid-template-columns: 1fr !important; }
  .menu-sidebar { display: none !important; }
  .main-content { padding: 12px !important; }

  /* Checkout */
  .page { grid-template-columns: 1fr !important; gap: 16px !important; padding: 12px !important; }

  /* Settings */
  .settings-layout { grid-template-columns: 1fr !important; }
  .snav { display: none !important; }

  /* Seller profile */
  .prof-main { grid-template-columns: 1fr !important; }
  .prof-sidebar { display: none !important; }
  .tabs { overflow-x: auto !important; }

  /* Listing detail */
  .detail-layout { grid-template-columns: 1fr !important; }
  .detail-sidebar { order: -1 !important; }

  /* Tables – scroll horizontally */
  .orders-table { font-size: 12px !important; overflow-x: auto !important; display: block !important; }
  .orders-table th, .orders-table td { padding: 8px 6px !important; white-space: nowrap !important; }

  /* Forms */
  .field-row { grid-template-columns: 1fr !important; }
  .pay-opts { flex-wrap: wrap !important; gap: 6px !important; }
  .pay-opt { flex: 1 !important; min-width: calc(33% - 6px) !important; font-size: 11px !important; padding: 6px 4px !important; }

  /* Filter bar for mobile */
  .mobile-filter-btn { display: flex !important; }
}

/* Mobile filter toggle button */
.mobile-filter-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  height: 42px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(230,48,39,.4);
  z-index: 100;
  gap: 6px;
  align-items: center;
}

/* Small phones */
@media (max-width: 380px) {
  .listings-grid { grid-template-columns: 1fr !important; }
  .hero-stats { flex-direction: column !important; gap: 8px !important; }
  .pay-opt { min-width: calc(50% - 6px) !important; }
}

/* ============================================
   Doplňky: navigace, onboarding, tabulky
   ============================================ */
@media (max-width: 768px) {
  /* Navigace se nesmí roztahovat mimo obrazovku */
  nav { overflow-x: hidden !important; }
  .nav-inner {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }
  .logo-text { font-size: 14px !important; }
  /* Přepínač měn – kompaktní, celý viditelný */
  .nav-inner > div[style*="border-radius:8px"] { flex-shrink: 1 !important; }
  [id^="cur-"] {
    padding: 0 6px !important;
    font-size: 10px !important;
    height: 24px !important;
    min-width: 0 !important;
  }
  /* Tlačítka v navigaci nesmí přetékat */
  .nav-right {
    margin-left: auto !important;
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .nav-right .btn, .btn-ghost, .btn-primary {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* Vyhledávání na celou šířku pod logem */
  .search-bar {
    order: 10 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Onboarding – řádek dopravy pod sebe */
  .ship-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--border, #e4e3e0) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }
  .ship-row .ship-region { grid-column: 1 / -1 !important; }
  .ship-row .ship-days   { grid-column: 1 / -1 !important; }
  .ship-head { display: none !important; }
  .card { padding: 16px !important; }
  .step-title { font-size: 16px !important; }
  .step-sub { font-size: 13px !important; }
  .nav-btns { flex-wrap: wrap !important; gap: 8px !important; }
  .nav-btns .btn { flex: 1 1 auto !important; min-width: 120px !important; }

  /* Stores */
  .stores-grid { grid-template-columns: 1fr !important; }
  .country-chips { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }

  /* Seller profile – rozbalovací doprava */
  .ship-table { font-size: 12px !important; }
  .ship-table th, .ship-table td { padding: 7px 8px !important; }

  /* Modaly na mobilu na skoro celou obrazovku */
  #orderModal, #purchaseModal {
    width: 96% !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }

  /* Hero nadpisy ať nejsou obří */
  .hero-title, .doc-title { font-size: 24px !important; line-height: 1.2 !important; }
}

@media (max-width: 380px) {
  .ship-row { grid-template-columns: 1fr !important; }
  .nav-right .btn, .btn-ghost, .btn-primary {
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  [id^="cur-"] { padding: 0 5px !important; font-size: 9px !important; }
}

/* ============================================
   Mobil v2 – přetékání, dropdowny, layout
   ============================================ */
@media (max-width: 768px) {
  /* Nic nesmí přetéct vodorovně */
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }

  /* Dashboard: postranní menu je skryté → zrušit odsazení obsahu */
  .main-content { margin-left: 0 !important; padding: 16px 12px !important; }
  .dash-layout, .layout { display: block !important; }

  /* Dropdown menu ať nevyjede mimo obrazovku */
  #user-menu, #notifPanel, .dropdown-menu {
    position: fixed !important;
    right: 8px !important;
    left: auto !important;
    top: 60px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 10000 !important;
  }

  /* Karty a mřížky – jeden sloupec, ať se text neláme po slovech */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .grid-2, .db-grid, .dash-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .stat-card { padding: 14px !important; }
  .stat-val { font-size: 20px !important; word-break: break-word !important; }
  .stat-label { font-size: 11px !important; }

  /* Panely a karty na plnou šířku */
  .panel, .card, .box { width: auto !important; max-width: 100% !important; }

  /* Kroky formuláře (add listing) – vodorovný scroll místo přetečení */
  .step-line, .steps, .step-bar, .wizard-steps {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  .step { flex-shrink: 0 !important; }
  .step-label { font-size: 11px !important; }

  /* Záložky profilu – vodorovný scroll */
  .tabs-inner, .tabs, .tab-bar, .prof-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab, .tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 13px !important; }

  /* Seller profile hlavička */
  .profile-header-inner, .prof-head { flex-wrap: wrap !important; gap: 12px !important; }
  .profile-stats, .prof-stats { width: 100% !important; flex-wrap: wrap !important; }

  /* Settings – panel hlavička ať se nezalomí přes tlačítko */
  .panel-header { flex-wrap: wrap !important; gap: 8px !important; }
  .panel-header .btn { flex-shrink: 0 !important; }


  /* Inline dvousloupcové mřížky v modalech (psané přímo v HTML) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Detail objednávky/nákupu – dlaždice pod sebou */
  #omBody [style*="grid-template-columns"],
  #pmBody [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Formuláře na plnou šířku */
  input, select, textarea { max-width: 100% !important; }
  .input, .inp { width: 100% !important; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .main-content { padding: 12px 10px !important; }
}

/* ============================================
   Mobil v4 – vodorovná lišta dashboardu (spolehlivá)
   ============================================ */
/* Lišta skrytá na desktopu */
#mobileTopNav { display: none; }
#mobileMenuBtn { display: none; }
#mobileMenuOverlay { display: none; }

@media (max-width: 768px) {
  /* Na mobilu úplně schovej boční sidebar */
  body .sidenav, aside.sidenav { display: none !important; }
  #mobileMenuBtn, #mobileMenuOverlay { display: none !important; }

  /* Vodorovná posuvná lišta nahoře.
     POZOR: obecné pravidlo `nav { overflow-x: hidden !important }` (výše) jinak
     přebíjí scroll, protože #mobileTopNav je také <nav>. Proto zde MUSÍ být
     overflow-x:auto s !important + touch-action:pan-x pro tažení prstem na iOS. */
  #mobileTopNav {
    display: flex !important;
    gap: 6px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    padding: 10px 12px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e4e3e0);
    position: sticky;
    top: 0;
    z-index: 900;
    scrollbar-width: none;
  }
  #mobileTopNav::-webkit-scrollbar { display: none; }
  #mobileTopNav .mtn-i {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--border, #e4e3e0);
    background: var(--surface2, #f2f1ef);
    color: var(--text2, #575652);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  #mobileTopNav .mtn-i.active {
    background: var(--accent, #e63027);
    color: #fff;
    border-color: var(--accent, #e63027);
  }

  /* Hlavní obsah zabírá plnou šířku (sidebar je pryč) */
  .main-content, .dash-main, main {
    margin-left: 0 !important;
    padding-top: 12px !important;
    width: 100% !important;
  }
}

/* ============================================
   Mobil v3 – settings navigace
   ============================================ */
@media (max-width: 768px) {
  /* Layout settings pod sebe: menu nahoře, obsah dole */
  .layout {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
    margin: 16px auto !important;
    gap: 12px !important;
  }
  /* Menu vodorovně, scrollovatelné */
  .snav {
    position: static !important;
    top: auto !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    border-radius: 10px !important;
    padding: 6px !important;
    gap: 4px !important;
  }
  .snav-s {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  /* Skryj nadpisy sekcí (Account, Selling…) – na úzkém řádku ruší */
  .snav-l { display: none !important; }
  .snav-div { display: none !important; }
  .snav-i {
    flex-shrink: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 14px !important;   /* pohodlnější cíl pro prst (~38px) */
    border-radius: 8px !important;
  }
  /* Náznak, že lišta jde posouvat do strany */
  .layout > .snav, .snav {
    position: relative !important;
  }
  .snav::after {
    content: "›";
    position: sticky;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent, #e63027);
    background: linear-gradient(to right, transparent, var(--surface, #fff) 40%);
    flex-shrink: 0;
    pointer-events: none;
  }
}

/* ============================================
   Mobil – horní lišta marketplace se nevejde
   Zkrátit tlačítka, ať se všechno vejde a nic se neuřízne
   ============================================ */
@media (max-width: 768px) {
  /* Favorites: schovej text, nech jen srdíčko + počítadlo */
  #favBtnLabel { display: none !important; }
  #favNavBtn {
    padding: 8px 10px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  /* Počítadlo oblíbených ať se vejde těsně k srdíčku */
  #favCount {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }
  /* Add listing: zmenši mezery, ať se vejde */
  #addListingBtn, a[href="hotwheels-add-listing.html"].btn-primary {
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* Tlačítko se jménem: neuřezávej, drž vpravo */
  #nav-user-btn {
    flex-shrink: 0 !important;
    max-width: 130px !important;
  }
  #nav-username {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 70px !important;
  }
  /* Celá horní user oblast ať se zalomí/scrolluje, ne uřízne */
  #nav-user-area {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL – FINÁLNÍ KONSOLIDOVANÝ BLOK  (≤768px)
   Řeší 3 obrazovky: Marketplace header · Dashboard sidebar · My profile
   Tento blok je ZÁMĚRNĚ na konci souboru, aby přebil všechna
   předchozí pravidla (vyhrává pořadím i specificitou).
   Cílí na SKUTEČNÉ třídy/id ověřené v HTML.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1) MARKETPLACE HEADER ---------- */
@media (max-width: 768px) {
  /* Marketplace nav (má .search-bar) → grid se 3 řádky:
       řádek 1:  [ Stores vlevo | LOGO uprostřed | user (♥ + účet) vpravo ]
       řádek 2:  search .................................. přes celou šířku
     Měnu (currency switcher) přesuneme do řádku 2 před/za search? Ne –
     necháme ji uvnitř nav-right, ale zmenšíme; user prvky jsou úzké (ikony).
     Grid dá logo na optický střed nezávisle na šířce krajů.
     :has()/:not(:has()) odlišuje marketplace od profilu. iOS Safari 15.4+. */
  /* NEJROBUSTNĚJŠÍ ŘEŠENÍ: flex-wrap, každý hlavní blok dostane order + šířku.
     Logo je samostatný řádek přes 100 % šířky → vždy přesně vycentrované.
       řádek 1:  LOGO (100 %, uprostřed)
       řádek 2:  nav-right (měna + ♥ + účet), zarovnané vpravo
       řádek 3:  Stores (vlevo) + search (zbytek)
     :has(.search-bar) cílí jen marketplace, ne profil. iOS Safari 15.4+. */
  nav:has(.search-bar) .nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    padding: 8px 12px !important;
    height: auto !important;
  }
  /* Logo – vlastní řádek, vycentrované, posunuté o kousek výš */
  nav:has(.search-bar) .nav-inner > .logo {
    order: 1 !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-top: -2px !important;
    margin-bottom: 2px !important;
  }
  /* nav-right – druhý řádek: měna VLEVO, ikony (♥ + add + účet) pohromadě VPRAVO.
     MUSÍ se zalamovat: jakmile přibude košík "🛒 Cart (1)", je obsah širší než
     displej a bez zalomení účet (avatar) vypadne mimo obrazovku – uživatel se
     pak nedostane na dashboard ani nikam z účtového menu. */
  nav:has(.search-bar) .nav-inner > .nav-right {
    order: 2 !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    row-gap: 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  /* Vnitřní skupiny se taky musí umět zalomit, jinak přeteče jen o úroveň níž.
     POZOR: ZDE NESMÍ BÝT `display: flex !important` – skript podle přihlášení
     jednu z těch dvou skupin schovává přes inline style, a !important by to
     přebilo. Pak by se přihlášenému ukazovalo "Sign in" a layout se rozpadl. */
  nav:has(.search-bar) #nav-user-area,
  nav:has(.search-bar) #nav-auth-area {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    row-gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* KOŠÍK vpravo nahoře – symetricky proti "Stores" vlevo.
     Když se přidá zboží, tlačítko se objeví a jinak by roztáhlo spodní řádek
     tak, že se prvky lámaly. Vytáhneme ho tedy do horního řádku.
     Absolutní pozice vůči .nav-inner; JS ho zobrazuje/skrývá inline stylem,
     proto tu ZÁMĚRNĚ nenastavujeme display (jinak by svítil i s prázdným košíkem). */
  nav:has(.search-bar) .nav-inner { position: relative !important; }
  nav:has(.search-bar) #cartNavBtn {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    z-index: 2 !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 30px !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  /* Měna patří do řádku k ostatním ovládacím prvkům (vedle srdíčka),
     ne odtlačená doleva – jinak zůstával vpravo prázdný pruh. */
  nav:has(.search-bar) .nav-right > div:first-child {
    margin-right: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* Celý řádek zarovnat doprava, aby prvky navazovaly na sebe */
  nav:has(.search-bar) .nav-inner > .nav-right { justify-content: flex-end !important; }
  /* Měna kompaktnější, ať se vejde vedle srdíčka a tlačítek */
  nav:has(.search-bar) .nav-right [id^="cur-"] {
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
  /* Stores VLEVO NAHOŘE – symetricky proti košíku vpravo.
     Absolutní pozice, aby nezabíral místo ve spodním řádku. */
  nav:has(.search-bar) .nav-inner > a[href="hotwheels-stores.html"] {
    position: absolute !important;
    top: 6px !important;
    left: 12px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 30px !important;
    padding: 0 8px 0 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  /* Search bar – třetí řádek, vyplní zbytek vedle Stores */
  nav:has(.search-bar) .nav-inner > .search-bar {
    order: 4 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* (Velikost currency switcheru je nastavená výš, u pravidla pro nav-right.) */

  /* --- Účet: jen avatar + šipka, jméno pryč (aby se vše vešlo) --- */
  #nav-username { display: none !important; }
  #nav-user-btn {
    padding: 6px 8px !important;
    gap: 4px !important;
    max-width: none !important;
  }

  /* Favorites: jen srdíčko + počet, text pryč */
  #favBtnLabel { display: none !important; }
  #favNavBtn { padding: 8px 10px !important; gap: 4px !important; }

  /* Add listing: celý text "+ Add listing" (uživatel chce plný popisek) */
  #nav-user-area .btn-primary span { display: inline !important; }
  #nav-user-area .btn-primary {
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Currency switcher kompaktní */
  .nav-right [id^="cur-"] {
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  /* Sign in / Sell (nepřihlášený stav) kompaktní */
  #nav-auth-area .btn { padding: 0 10px !important; font-size: 12px !important; }
  #nav-auth-area .btn-primary span { display: none !important; }
}

/* ---------- 2) DASHBOARD – boční sidebar PRYČ ---------- */
@media (max-width: 768px) {
  /* Aside sidenav a jeho části úplně skrýt (na fotce svítilo velké červené) */
  aside.sidenav,
  .sidenav,
  .sidenav.mobile-open,
  .sidenav-logo,
  .sidenav-user,
  .sidenav-menu,
  .sidenav-bottom {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
  }

  /* Body dashboardu je display:flex → přepnout na blok, ať obsah zabere celou šířku.
     Cílíme JEN na dashboard přes :has(aside.sidenav), aby to nerozbilo chat
     (který má taky body:flex, ale jiný layout). :has() funguje na iOS Safari 15.4+. */
  body:has(aside.sidenav) { display: block !important; }

  /* Hlavní obsah bez levého odsazení 220px */
  .main-content {
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }
}

/* ---------- 3) MY PROFILE ---------- */
@media (max-width: 768px) {
  /* Profilová nav pravidla cílíme přes body:has(.profile-header) – .profile-header
     je unikátní JEN pro profil, takže ostatní stránky bez search-baru
     (stores, checkout, settings, chat, add-listing…) zůstanou nedotčené.
     3sloupcový grid:
       řádek 1:  [ prázdno | LOGO uprostřed | zvoneček vpravo ]
       řádek 2:  [ nav-right (měna, add, marketplace) ......... přes 3 sloupce ]
     Zvoneček je první dítě nav-right; vytáhneme ho do horního řádku přes grid
     tak, že celý nav-right je grid a jeho vnitřek uspořádáme flexem. */

  body:has(.profile-header) nav .nav-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    height: auto !important;
    padding: 8px 12px !important;
  }

  /* Logo do prostředního sloupce, vycentrované */
  body:has(.profile-header) nav .nav-inner > .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  /* nav-right celé pod logo (řádek 2), přes všechny 3 sloupce, zarovnané vpravo */
  body:has(.profile-header) nav .nav-inner > .nav-right {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    row-gap: 6px !important;
  }
  /* Zvoneček (první dítě nav-right) vytáhnout do horního řádku vpravo.
     Grid buňka [sloupec 3, řádek 1]. */
  body:has(.profile-header) nav .nav-inner > .nav-right > div:first-child {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  /* Aby absolutní zvoneček měl kotvu, nav-inner je relativní */
  body:has(.profile-header) nav .nav-inner { position: relative !important; }

  /* "← Marketplace" a "+ Add listing" kompaktní, ať se vejdou (jen profil) */
  body:has(.profile-header) .nav-right a.btn-ghost,
  body:has(.profile-header) .nav-right a.btn-primary {
    padding: 0 10px !important;
    height: 32px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* --- Profile header: vše na střed, sloupec --- */
  .profile-header { padding: 20px 12px !important; }
  .profile-header-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .profile-info {
    width: 100% !important;
    text-align: center !important;
  }
  .profile-tags { justify-content: center !important; }
  .profile-bio { margin: 0 auto !important; }
  #profSellerInfo { display: flex !important; justify-content: center !important; }

  /* --- Staty (reviews / sales / listings) stejně velké, na celou šířku --- */
  .profile-stats {
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
  }
  .profile-stats .pstat {
    flex: 1 1 0 !important;
    width: 0 !important;            /* donutí stejnou šířku i při různém obsahu */
    padding: 14px 4px !important;
    text-align: center !important;
  }

  /* --- Taby profilu scrollovatelné do strany --- */
  .tabs-inner {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tabs-inner::-webkit-scrollbar { display: none !important; }
  .tabs-inner .tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL – CHECKOUT
   Zbytek stránky se skládá správně (mřížka .page i .field-row
   přechází na jeden sloupec). Problém dělá jen horní lišta s kroky:
   "Address & shipping" se láme do tří řádků a lišta přetéká.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .steps-bar { padding: 10px 12px !important; }

  /* Kroky na jeden řádek, vodorovně posuvné, bez zalamování */
  .steps-inner {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .steps-inner::-webkit-scrollbar { display: none !important; }

  .steps-inner .cstep {
    flex-shrink: 0 !important;
    gap: 5px !important;
  }
  .steps-inner .cstep-label {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  .steps-inner .cstep-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  /* Spojovací čáry zkrátit, ať zbyde místo na text */
  .steps-inner .cstep-line {
    min-width: 12px !important;
    flex: 0 0 12px !important;
  }

  /* Souhrn objednávky pod obsah, ne do úzkého sloupce */
  .summary-card { position: static !important; width: 100% !important; }

  /* Platební volby na celou šířku, ať se dobře trefují prstem */
  .pay-opts { display: flex !important; gap: 8px !important; }
  .pay-opt { flex: 1 1 0 !important; justify-content: center !important; min-height: 44px !important; }

  /* Volby dopravy: pohodlný cíl pro prst */
  .ship-option { min-height: 44px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL – CHAT
   Seznam konverzací a samotný chat se vedle sebe nevejdou, proto
   se střídají (třída .show-sidebar na .chat-wrap). Tady se jen
   zobrazí tlačítko ← pro návrat na seznam.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chat-back { display: inline-flex !important; align-items: center !important; }
  /* Hlavička chatu: místo pro tlačítko zpět */
  .chat-head { gap: 8px !important; }
  /* Seznam konverzací přes celou šířku */
  .chat-wrap.show-sidebar .sidebar { width: 100% !important; }
}