/* ════════════════════════════════════════════════════════════════════════
   99-responsive.css — Mobile-first responsive (poslední v pořadí načítání)

   Breakpointy (sdílené s HTML mockupy):
   - 1024px → tablet (nav schovaný, burger zapnutý, topbar zjednodušený,
                      actions kompaktnější, search 1fr middle)
   -  780px → menší tablet / velký mobil (gridy 2 sloupce)
   -  640px → mobil (search na další řádek, actions doprava)
   -  380px → malý mobil (texty schované, ikony menší)

   Container strategie:
   - desktop: max-width 1480 px (var(--container)) bez paddingu
   - tablet : max-width 92 %
   - mobil  : max-width 95 %
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1024px — tablet ────────────────────────────────────────────────── */
@media (max-width: 1024px){

  /* Container 92 % je v base (.container v 12-utilities.css) — beze změny */

  /* Hero bannery — jen layout (font-sizes jsou fluid clamp) */
  .hero .hero-banners{gap:12px;}
  .hero .banner-content{padding:14px 14px;}
  .hero .banner-tag{padding:2px 8px;margin-bottom:6px;}
}


/* ── 980px — bannery se přepnou na 2×2 (cca tablet portrait) ────────── */
@media (max-width: 980px){
  .hero .hero-banners{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
  .hero .banner-content{padding:16px 18px;}

  /* Kategorie 3 → 2 sloupce (poslední karta na nový řádek) */
  .cat-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .cat-card-img{height:200px;}

  /* USP 4 → 2 sloupce */
  .usp-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }

  /* Products 4 → 2 sloupce */
  .products-grid,
  ul.products{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }

  /* Zodiac 6 → 4 sloupců, ikona menší */
  .zodiac-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
  }
  .zodiac-card{padding:22px 12px 18px;}
  .zodiac-card .icon{width:74px;height:74px;margin-bottom:12px;}

  /* Čakry 7 → 4 sloupců (poslední 3 na nový řádek) */
  .chakra-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
  }
  .chakra-card{padding:20px 10px;}
  .chakra-card .icon{width:56px;height:56px;margin-bottom:12px;}

  /* Effects 3 → 2 sloupce (poslední karta přes celou šíři) */
  .effects-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }
  .effect-card{padding:24px 22px;}

  /* Reviews 3 → 2 sloupce */
  .reviews-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }
  .review{padding:22px;}

  /* Blog 3 → 2 sloupce (3. karta zalomená) */
  .blog-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }
  .blog-card-img{height:180px;}

  /* Newsletter — text a form pod sebe, centrovaně */
  .newsletter-grid{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
  .newsletter-form{
    justify-content:center;
    max-width:520px;
    margin:0 auto;
  }

  /* Footer: 5 sloupců → 3 sloupce */
  .footer-top{
    grid-template-columns:1fr 1fr 1fr;
    gap:32px;
  }

  /* Footer bottom: copyright + payment badges na střed */
  .footer-bottom{
    justify-content:center;
    text-align:center;
  }
  .footer-bottom .pay{
    justify-content:center;
  }

  /* Sticky desktop nav vypnut, drawer převezme navigaci */
  .nav{display:none;}

  /* Hamburger v hlavičce zapnut */
  .burger{display:flex;}

  /* Logo menší — z 120px na 60px */
  .site-header .logo img,
  .site-header .logo a img{height:60px;}

  /* ── Topbar — schovat jen pravou stranu (Doprava/Kontakt) ─────────
     Levá strana (email + telefon + free-shipping pill) zůstává viditelná.
     Centrujeme celý topbar — left část se posune doprostřed. */
  .topbar .right{display:none;}
  .topbar .container{justify-content:center;}
  .topbar .left{gap:18px;}

  /* ── Actions kompaktnější (víc místa pro search uprostřed) ────────── */
  .actions{gap:4px;}
  .icon-btn{
    padding:8px 10px;
    font-size:11.5px;
    gap:3px;
    min-width:auto;
  }
  .icon-btn svg{width:22px;height:22px;}
  .icon-btn .badge{
    width:18px;
    height:18px;
    font-size:10px;
    top:3px;
    right:5px;
  }

  /* Burger kompaktnější */
  .burger{
    padding:7px 9px;
    font-size:11.5px;
    gap:3px;
  }
  .burger svg{width:22px;height:22px;}

  /* Header gap zmenšit aby search měl víc prostoru */
  .site-header .container{
    gap:18px;
  }
}


/* ── 700px — schovat free-shipping pill (telefon zůstává) ───────────── */
@media (max-width: 700px){
  .topbar .pill{display:none;}
}


/* ── 640px — mobil (kompaktní header, search na další řádek) ────────── */
@media (max-width: 640px){

  /* Container 95 % obrazovky (přepíše base 92 %) */
  .container{
    width:95%;
  }

  /* Hero — kompaktnější padding (fonty jsou fluid clamp) */
  .hero,
  .hero.et_pb_section{padding:36px 0 40px !important;}
  .hero .hero-banners{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
  .hero .banner-content{padding:16px 16px;}

  /* Kategorie 2 → 1 sloupec */
  .cat-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .cat-card-img{height:220px;}
  .categories,
  .categories.et_pb_section{padding:36px 0 !important;}

  /* USP 2 → 1 sloupec, položky vycentrované — všechny stejně široké
     aby byly ikony na stejné x-pozici (žádné „zubaté" zalomení). */
  .usp-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .usp-item{
    justify-content:flex-start;
    width:fit-content;
    min-width:240px;
    margin:0 auto;
  }

  /* Products 2 → 2 sloupce (drobné: menší gap, menší padding body) */
  .products-grid,
  ul.products{
    gap:14px;
  }
  .product-body{padding:14px;}

  /* Featured section padding zmenšit */
  .featured,
  .featured.et_pb_section{padding:40px 0 !important;}

  /* Atlas sekce — menší padding, stats 3 → 1 sloupec */
  .atlas,
  .atlas.et_pb_section{padding:50px 0 !important;}
  .atlas-stats{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:30px;
    margin-top:18px !important;
  }

  /* Zodiac 4 → 3 sloupců + ještě menší karta */
  .zodiac-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .zodiac-card{padding:18px 8px;}
  .zodiac-card .icon{
    width:62px;
    height:62px;
    margin-bottom:10px;
  }
  .zodiac,
  .zodiac.et_pb_section{padding:40px 0 !important;}

  /* Čakry 4 → 2 sloupců */
  .chakra-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .chakra,
  .chakra.et_pb_section{padding:40px 0 !important;}

  /* Effects 2 → 1 sloupec */
  .effects-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .effects,
  .effects.et_pb_section{padding:40px 0 !important;}

  /* Reviews 2 → 1 sloupec */
  .reviews-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .reviews,
  .reviews.et_pb_section{padding:40px 0 !important;}

  /* Blog 2 → 1 sloupec */
  .blog-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .blog.et_pb_section{padding:40px 0 !important;}

  /* Newsletter — kompaktnější padding + form pod sebou (button block) */
  .newsletter,
  .newsletter.et_pb_section{padding:40px 0 !important;}
  .newsletter-form{
    flex-direction:column;
    gap:8px;
  }
  .newsletter-form .btn,
  .newsletter-form button.btn-primary{
    width:100%;
  }

  /* Tlačítka pod sebe + centrované, vertikální mezera 10 px */
  .hero .et_pb_button_module_wrapper{
    display:block !important;
    width:max-content !important;
    margin:5px auto !important;
  }
  .hero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{
    margin-left:auto !important;   /* zrušit desktop margin-left 14 px */
    margin-top:5px !important;
  }

  /* Footer: 3 → 2 sloupce */
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding-bottom:38px;
  }

  /* Celý footer na střed (sloupce, kontakty, sítě, menu, newsletter) */
  .footer-top > div{
    text-align:center;
  }
  .footer .about{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .footer .contact-line{
    justify-content:center;
  }
  .footer .socials{
    justify-content:center;
  }
  .footer .menu,
  .footer ul{
    align-items:center;
  }
  .footer .footer-newsletter{
    align-items:stretch;
    max-width:320px;
    margin:0 auto;
  }

  /* Footer bottom: copyright + payment badges pod sebou, vše na střed */
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
  }
  .footer-bottom .pay{
    justify-content:center;
  }

  /* Hlavička kompaktnější */
  .site-header{padding:10px 0;}

  /* Grid: logo vlevo, actions vpravo, search pod nimi přes celou šíři */
  .site-header .container{
    grid-template-columns:auto 1fr;
    gap:14px;
  }

  /* Actions zarovnané doprava */
  .site-header .actions{
    justify-self:end;
  }

  /* Search se přesune pod logo+actions na celou šířku */
  .header-search{
    order:3;
    grid-column:1 / -1;
    max-width:none;
  }
  .header-search input[type="search"]{
    height:46px;
    font-size:14px;
    padding:0 56px 0 18px;
  }
  /* DŮLEŽITÉ: stejný selektor jako v 03-header.css (specifičnost) */
  .header-search button[type="submit"]{
    width:38px;
    height:38px;
    top:4px;
    right:4px;
  }
  .header-search button[type="submit"] svg{
    width:18px;
    height:18px;
  }

  /* Actions ještě menší — text + ikona stále viditelné */
  .actions{gap:2px;}
  .icon-btn{
    padding:6px 8px;
    font-size:10.5px;
    gap:2px;
  }
  .icon-btn svg{width:20px;height:20px;}
  .icon-btn .badge{
    width:16px;
    height:16px;
    font-size:10px;
    top:2px;
    right:4px;
  }

  /* Burger ještě menší */
  .burger{
    padding:6px 8px;
    font-size:10.5px;
    gap:2px;
  }
  .burger svg{width:20px;height:20px;}

  /* Topbar — schovat telefon a free-shipping pill, zůstane jen email
     (.right už schované od 1024px) */
  .topbar .left .hide-sm{display:none;}
  .topbar .container{justify-content:center;}

  /* Logo nejmenší */
  .site-header .logo img,
  .site-header .logo a img{height:46px;}
}


/* ── 480px — footer 2 → 1 sloupec ───────────────────────────────────── */
@media (max-width: 480px){
  .footer-top{
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer{
    padding:48px 0 0;
  }
}


/* ── 400px — produktová mřížka přepnout na 1 sloupec ────────────────── */
@media (max-width: 400px){
  .products-grid,
  ul.products{
    grid-template-columns:1fr;
    gap:18px;
  }
  /* Zodiac 3 → 2 sloupců */
  .zodiac-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}


/* ── 380px — nejmenší obrazovky (ikony bez popisků) ─────────────────── */
@media (max-width: 380px){

  /* Ikony v actions bez textových popisků (jen SVG) */
  .icon-btn{font-size:0;}
  .icon-btn span{font-size:0;}
  .icon-btn svg{width:22px;height:22px;}

  /* Burger bez textu „Menu" */
  .burger span{display:none;}
  .burger{padding:8px;}
}


/* ════════════════════════════════════════════════════════════════════════
   VÝPIS KATEGORIE — breakpointy (cat-hero, podkategorie, filter bar)
   Pouze layout — velikosti písma řeší clamp tokeny.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .subcat-grid{grid-template-columns:repeat(3,1fr);}
  /* nav je skrytá → filtr lepí nahoru; reset admin-bar offsetu (na mobilu
     je admin lišta absolutní, ne fixní) */
  .filter-sticky,
  .admin-bar .filter-sticky{top:0;}
  .sort-wrap label{display:none;}
}
@media (max-width:780px){
  .subcat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .cat-hero,
  .cat-hero.et_pb_section{padding:32px 0 36px !important;}

  /* Dlouhý název kategorie nesmí roztáhnout stránku:
     1. zrušit nowrap na zvýrazněném <em> → smí se zalomit
     2. podtržení místo absolutního ::after jako background s clone
        → vykreslí se správně na každém řádku zvlášť
     3. pojistka pro extrémně dlouhé jednoslovné názvy (hyphens/anywhere) */
  .cat-hero h1{overflow-wrap:anywhere;hyphens:auto;}
  .cat-hero h1 em{
    white-space:normal;
    background:linear-gradient(transparent calc(100% - 12px), rgba(234,67,102,.2) calc(100% - 12px), rgba(234,67,102,.2) calc(100% - 3px), transparent calc(100% - 3px));
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    border-radius:4px;
  }
  .cat-hero h1 em::after{content:none;}
  .subcat{padding:30px 0 20px;}
  .subcat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .subcat-tile{padding:10px;}
  .subcat-tile-img{width:54px;height:54px;}

  /* Filter bar — vodorovný scroll chipů + sticky tlačítko */
  .filter-bar{padding:10px 0;}
  .filter-bar .container{
    gap:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  /* Nezmenšovat .filters na flex:1 (base) → jinak se smrští na min-width:0,
     chipy přetečou doprava a podjedou pod „Doporučené" (řazení). flex:0 0 auto
     = šířka dle obsahu, řazení sedí AŽ ZA chipy a celý řádek vodorovně scrolluje. */
  .filters{flex-wrap:nowrap;flex:0 0 auto;}
  .filter-chip{padding:7px 13px;}
  .sort-wrap{margin-left:0;flex:0 0 auto;}
  .sort-select{padding:7px 30px 7px 12px;}
  /* Dropdown panel přes celou šířku na mobilu (spodní sheet) */
  .filter-dd-panel{
    position:fixed;
    left:5%;right:5%;
    top:auto;bottom:0;
    min-width:0;max-width:none;
    max-height:70vh;
    overflow-y:auto;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* Spodní sheet je uvězněný ve stacking kontextu .filter-sticky (z-index:48),
     proto ho překrývá chat widget (z-index ~2147483600). Když je dropdown
     otevřený, vyzvedneme celý sticky obal nad chat; po zavření se vrátí na 48. */
  .filter-sticky:has(.filter-dd.open){z-index:2147483647;}
  .pagination .prev span,
  .pagination .next span{display:none;}
  .pagination .prev,
  .pagination .next{padding:0 12px;}
}
@media (max-width:400px){
  .subcat-grid{grid-template-columns:1fr;}
}


/* ════════════════════════════════════════════════════════════════════════
   DETAIL PRODUKTU — breakpointy (mockup produkt.html)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .product-layout{grid-template-columns:1fr;gap:32px;}
  .product-gallery{position:static;}
  .product-tabs .effects-grid{grid-template-columns:1fr;}
  .atlas-card{grid-template-columns:200px 1fr;gap:20px;padding:18px;}
  .atlas-card .btn{grid-column:2;}
}
@media (max-width:780px){
  .rating-summary{grid-template-columns:1fr;gap:20px;padding:18px;}
  .atlas-card{grid-template-columns:1fr;}
  .atlas-card-img{max-width:280px;}
}
@media (max-width:640px){
  .product-hero{padding:18px 0 32px;}
  .product-info h1{font-size:24px;}
  .thumbs{grid-template-columns:repeat(4,1fr);}
  .price-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .price-main strong,
  .price-main .woocommerce-Price-amount{font-size:30px;}
  .trust{grid-template-columns:1fr;gap:10px;padding:14px;}
  .actions-row{flex-wrap:wrap;}
  .qty{width:auto;}
  .btn-cart{order:3;width:100%;flex-basis:100%;}
  .wishlist-big{order:2;}
  .product-tabs{padding:36px 0;}
  .tabs-nav{margin-bottom:24px;}
  .tab-btn{padding:14px 16px;font-size:13.5px;}
  .related{padding:36px 0;}
  .related-head h2{font-size:20px;}
  /* mobilní sticky CTA on — jen na single-product (body.has-mobile-cta) */
  body.has-mobile-cta .mobile-cta{display:flex;}
  body.has-mobile-cta{padding-bottom:72px;}
}
@media (max-width:380px){
  .variant-chips label{padding:8px 12px;min-width:54px;font-size:13px;}
  .product-badges{flex-wrap:wrap;}
  .cat-hero h1{font-size:24px;}
}


/* ── Košík / pokladna — mobil ───────────────────────────────────────────── */
@media (max-width:640px){
  .woocommerce-cart .cart-collaterals{justify-content:stretch;}
  .woocommerce-cart .cart_totals{max-width:none;padding:22px 18px 24px;}
  .woocommerce-cart table.cart td.actions{display:flex;flex-direction:column;gap:10px;}
  .woocommerce-cart table.cart td.actions .coupon{flex-wrap:wrap;}
  .woocommerce-cart table.cart td.actions .coupon .input-text{max-width:none;flex:1;}
  .woocommerce-cart table.cart td.actions > .button{float:none;width:100%;}
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review{padding:18px;}
}


/* ── Můj účet / děkovná — mobil ─────────────────────────────────────────── */
@media (max-width:860px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){flex-direction:column;gap:18px;}
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{flex-basis:auto;width:auto !important;}
}
@media (max-width:640px){
  .woocommerce-Addresses{grid-template-columns:1fr;}
  .woocommerce-account .u-columns{grid-template-columns:1fr;}
  .woocommerce-customer-details .woocommerce-columns{grid-template-columns:1fr;}
  .woocommerce-MyAccount-content{padding:22px 18px;}
}