/* ========== RESPONSIVE (3 breakpoints: 980 / 640 / 480) ========== */


/* =========================================================
   ≤980px — TABLET A MENŠÍ (1. stupeň zhuštění layoutu)
   ========================================================= */
@media (max-width: 980px) {

  /* --- HLAVIČKA / HEADER --- */
  #zahlavi .zh_wrap { gap: 16px; padding: 22px 0; max-width: 95%; }
  #zahlavi .zh_wrap {  }
  #zahlavi .zh_logo img { max-height: 44px; }
  #zahlavi .zh_search { width: min(520px, 100%); }

  /* Top lišta */
  #zahlavi_lista .zl_wrap { padding: 10px 12px; gap: 10px; }
  #zahlavi_lista .zl_center { position: static; left: auto; transform: none; order: 2; width: 100%; display: flex; justify-content: center; }
  #zahlavi_lista .zl_left { order: 1; flex-wrap: wrap; gap: 10px; }
  #zahlavi_lista .zl_right { order: 3; gap: 12px; }

  /* Layout hlavičky */
  #zahlavi .zh_wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
  #zahlavi .zh_left { order: 1; }
  #zahlavi .zh_right { order: 2; display: flex; align-items: center; gap: var(--zh-icons-gap, 20px); margin-left: 0; }
  #zahlavi .zh_center { order: 3; flex: 1 1 100%; width: 100%; }
  #zahlavi .zh_search { width: 100%; }

  /* Burger menu */
  #zahlavi_menu nav { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #zahlavi_menu .nav_toggle { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: #fff; padding: 8px; cursor: pointer; }
  #zahlavi_menu .nav_toggle_box { display: grid; gap: 4px; }
  #zahlavi_menu .nav_toggle_bar { display: block; width: 22px; height: 2px; margin: 0; background: #393e46; transition: transform .2s, opacity .2s; }
  #zahlavi_menu .nav_toggle[aria-expanded="true"] .nav_toggle_bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #zahlavi_menu .nav_toggle[aria-expanded="true"] .nav_toggle_bar:nth-child(2) { opacity: 0; }
  #zahlavi_menu .nav_toggle[aria-expanded="true"] .nav_toggle_bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  #zahlavi_menu .category,
  #zahlavi_menu .menu,
  #zahlavi_menu .menu_right { display: none !important; }

  /* Drawer */
  #zahlavi_menu .nav_drawer { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.55); }
  #zahlavi_menu .nav_drawer[hidden] { display: none !important; }
  #zahlavi_menu .nav_drawer_inner { position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 420px); padding: 16px 18px 28px; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.2); overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--font-dark); font-weight: 400; font-size: 14px; line-height: 1.3; }
  #zahlavi_menu .nav_drawer.open .nav_drawer_inner { transform: translateX(0); }
  #zahlavi_menu .nav_close { border: 0; background: transparent; color: var(--font-dark); font-size: 30px; line-height: 1; position: absolute; right: 10px; top: 6px; cursor: pointer; }

  /* Menu v draweru */
  #zahlavi_menu .menu_all { list-style: none; margin: 44px 0 0; padding: 0; }
  #zahlavi_menu .menu_all li { border-bottom: 1px solid #f3f4f6; }
  #zahlavi_menu .menu_all li:last-child { border-bottom: 0; }
  #zahlavi_menu .menu_all li.h { border: 0; padding: 8px 4px 4px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--dark-red); }
  #zahlavi_menu .menu_all a { display: block; padding: 8px 4px; text-decoration: none; color: var(--font-dark); }
  #zahlavi_menu .menu_all a:hover { background: #f7f7f7; }
  #zahlavi_menu .menu_all a:active { background: #efefef; }
  #zahlavi_menu .menu_all a:focus-visible { outline: 2px solid var(--dark-red); outline-offset: 2px; }

  #cart_modal { max-width: 90%; margin: 0px auto; }

  .breadcrumbs { max-width: 100%; margin: 0px auto; }
  .produkt.produkt_uvod .breadcrumbs { max-width: 90%; margin: 0px auto; }
  .breadcrumbs .crumb { white-space: normal; }

  /* --- OBSAH / ŠÍŘKY TEXTU --- */
  .obsah.obsah_uvod { max-width: 95%; }
  .obsah.obsah_blogmag { max-width: 95%; }
  .obsah.kategorie { max-width: 95%; }
  #blog_hp .in { max-width: 95%; }

  .produkt.produkt_uvod { max-width: 95%; margin-bottom: 0px; }

  /* --- FOOTER / PATIČKA --- */
  #paticka .in { padding: 24px 0; }
  #paticka .in { max-width: 95%; }
  #paticka .ft_info { margin-bottom: 32px; }
  #paticka .ft_info span { display: block; line-height: 150%; }
  #paticka .ft_grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; column-gap: 40px; row-gap: 22px; }
  #copyright .in { padding: 24px 0; gap: 6px 14px; }

  #paticka .column h4 { margin: 0 0 25px 0; padding-top: 25px; }

  /* --- HP SEKCE / KATEGORIE / ZNAČKY --- */
  #featured_cats .fc_grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  #featured_cats_new .fc_grid { grid-template-columns: 1fr 1fr; }
  #products .in { grid-template-columns: repeat(2, 1fr); }
  #brands .brands_grid { grid-template-columns: repeat(3, 1fr); }

  /* Produkt */  
  #produkt_detail { max-width: 100%; }
  #produkt_detail .produkt_mainimg { border-top: 2px solid var(--grey-light); min-height: auto; }
  #produkt_detail .produkt_mainimg img { padding: 20px 0px; max-width: 90%; max-height: 90%; }
  #produkt_detail { grid-template-columns: 1fr; gap: 20px; }

  #produkt_popis { max-width: 95%; margin: 0px auto 20px auto; padding: 0px; }
  #produkt_popis .produkt_tabs_body { padding: 0px 20px; }
  #produkt_popis .tab_panel { padding: 20px 0px }

  /* z původního max-width:991px */
  #featured_cats .fc_grid { grid-template-columns: 1fr; gap: 24px; }
  #featured_cats .fc_item { grid-template-columns: 30% 1fr; gap: 16px; }

  /* --- PRODUKTY - LIST / ŘÁDKY --- */

  .products_lines .item { gap: 12px; padding: 12px; }
  .products_lines .item_img { flex: 0 0 80px; max-width: 80px; min-width: 80px; }
  .products_lines .item_body { gap: 8px; }
  .products_lines .title { font-size: 16px; margin: 0 0 6px 0; }
  .products_lines .item_meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .products_lines .item_meta_right { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
  .products_lines .price { font-size: 18px; }
  .products_lines .produkt_form { flex-direction: row; align-items: center; gap: 10px; width: auto; }
  .products_lines .qty_box { height: 38px; }
  .products_lines .qty_btn { width: 30px; font-size: 16px; }
  .products_lines .qty_input { width: 42px; font-size: 14px; }
  .products_lines .btn_buy { height: 38px; padding: 0 16px; font-size: 14px; width: auto; }
  .products_lines .item_extra { margin-top: 8px; }

  /* --- KATEGORIE - SEZNAM / GRID --- */
  ul.kategorie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  ul.kategorie li { padding: 14px 16px; }

  /* --- SLIDER HP --- */
  #hp_prm .prm_slide img { max-height: 420px; }
  #hp_prm .prm_dots { position: static; transform: none; margin-top: 10px; padding-bottom: 12px; }
  #hp_prm .prm_nav { width: 44px; height: 44px; border-width: 1.5px; }
  #hp_prm .prm_nav svg { width: 20px; height: 20px; }
  #hp_brand_cars { display: none; }

  /* --- BLOG HP --- */
  #blog_hp .blog_grid_top { grid-template-columns: 1fr; }
  #blog_hp .blog_grid_bottom { grid-template-columns: 1fr; }

  /* --- BENEFITY --- */
  #benefits .in { grid-template-columns: 1fr; gap: 24px; }

  /* --- CHECKOUT FORM --- */
  #checkout_form .form_line { grid-template-columns: 1fr; gap: 10px; }
  #checkout_form .form_line label { padding-top: 0; }
  #checkout_form #ship_box { padding: 12px 10px 14px 10px; }

  /* --- KOSÍK / CART LAYOUT (z původního 1024px) --- */
  .cart-layout { max-width: 95%; grid-template-columns: 1fr; gap: 24px; }
  .cart-layout .cart-right { position: static; }
  .cart-steps__list { gap: 40px; }
  .cart-steps__item:not(:last-child)::after { width: 28px; }

}


/* =========================================================
   ≤640px — MOBIL (jednokolonový layout + větší tlačítka)
   ========================================================= */
@media (max-width: 640px) {

  /* --- TOP LIŠTA / HEADER --- */
  #zahlavi_lista .zl_wrap { max-width: 100%; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; }
  #zahlavi_lista .zl_center { order: 1; width: 100%; display: flex; justify-content: center; }
  #zahlavi_lista .zl_left,
  #zahlavi_lista .zl_right { order: 2; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
  #zahlavi_lista .zl_item,
  #zahlavi_lista .zl_link { white-space: nowrap; }
  #zahlavi_lista .icon { width: 14px; height: 14px; flex: 0 0 14px; }
  #zahlavi_lista .zl_center .zl_label { font-size: 14px; }

  #zahlavi .zh_wrap { padding: 18px 0; gap: 12px; max-width: 85%; }
  #zahlavi .icon { width: 30px; height: 30px; }
  #zahlavi .zh_label { font-size: 12px; }

  /* --- FOOTER --- */
  #paticka .ft_grid { grid-template-columns: 1fr; row-gap: 18px; }
  #paticka .ft_news_form { flex-direction: column; }
  #paticka .ft_news_form .btn_red { padding: 10px 14px; }
  #paticka .social { width: 32px; height: 32px; }
  #paticka .social svg { width: 18px; height: 18px; }
  #copyright .in { padding: 20px 0; gap: 6px 10px; }

  /* --- HP SEKCE → 1 sloupec --- */
  #featured_cats .fc_grid,
  #featured_cats_new .fc_grid { grid-template-columns: 1fr; }
  #featured_cats .fc_item { grid-template-columns: 1fr; }
  #featured_cats .fc_img { aspect-ratio: 16/9; }
  #featured_cats .fc_head { margin-bottom: 22px; }

  /* z původního max-width:767px */
  #featured_cats .in { padding: 30px 0; }
  #featured_cats .fc_head { margin: 0 0 40px; }
  #featured_cats .fc_item { gap: 12px; }

  /* --- PRODUKTY GRID / ZNAČKY --- */
  #products .in { grid-template-columns: 1fr; }
  #brands .brands_grid { grid-template-columns: repeat(2, 1fr); }

  /* --- KATEGORIE SEZNAM (na mobilu 1 sloupec) --- */
  ul.kategorie { grid-template-columns: 1fr; gap: 14px; }
  ul.kategorie li { padding: 16px 18px; font-size: 16px; }
  ul.kategorie li a { font-size: 16px; }

  /* --- CHECKOUT FORM --- */
  #checkout_form .box { padding: 16px 12px 18px 12px; border-radius: 8px; gap: 14px; }
  #checkout_form .box legend { font-size: 16px; margin-bottom: 4px; }
  #checkout_form .form_line { gap: 8px; }
  #checkout_form .form_line input[type="text"],
  #checkout_form .form_line input[type="email"],
  #checkout_form .form_line input[type="tel"],
  #checkout_form .form_line select,
  #checkout_form .form_line textarea { padding: 9px 11px; font-size: 14px; }
  .terms-note { font-size: 12px; padding: 8px 9px; }

  /* --- KOSÍK / CART (MOBIL) --- */
  .cart-layout { max-width: 95%; }
  .cart-layout .cart-row { grid-template-columns: 60px minmax(0,1fr) 100px 50px; gap: 12px; }
  .cart-layout .cart-col--unit { display: none; }
  .cart-layout .cart-col--qty { grid-column: 1 / 3; grid-row: 2; justify-content: flex-start; margin-top: 8px; }
  .cart-layout .cart-col--sum { grid-column: 3 / 5; grid-row: 2; margin-top: 8px; align-items: flex-end; text-align: right; }
  .cart-layout .cart-col--rm { grid-row: 1 / 3; }

  .cart-steps__list { gap: 20px; }
  .cart-steps__label { display: none; }
  .cart-steps__item:not(:last-child)::after { width: 16px; }

}


/* =========================================================
   ≤480px — MINI MOBIL (extra zhuštění, šířka obsahu)
   ========================================================= */
@media (max-width: 480px) {

  /* --- KOSÍK MINI --- */
  .cart-layout { max-width: 95%; }
  .cart-heading { font-size: 22px; }
  .qty { width: 100%; }
  .qty__btn { flex: 1; }

}


/* =========================================================
   DESKTOP DROPDOWN MENU (≥981px)
   ========================================================= */
@media (min-width: 981px) {
  #zahlavi_menu .nav_toggle { display: none !important; }
  #zahlavi_menu .category { display: inline-block; }
  #zahlavi_menu .menu,
  #zahlavi_menu .menu_right { display: block; }
  #zahlavi_menu .cat_panel { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 1000; }
  #zahlavi_menu .category:hover .cat_panel,
  #zahlavi_menu .category:focus-within .cat_panel,
  #zahlavi_menu .category.open .cat_panel { display: block; }
}