/* ==========================================================
   Oprava hlavičky — TLAPKA (načítá se až za vloženými styly)
   1) vodorovné odsazení, které se ztrácelo zkráceným zápisem
   2) rozbalovací nabídka podle počtu sloupců (Ptáci, Hlodavci…)
   3) mobilní horní lišta na dva řádky
   ========================================================== */

/* --- 1) odsazení po stranách --- */
.util .in  { padding: 9px 26px; }
.mhead .in { padding: 16px 26px; }
.mcat .in  { padding-left: 26px; padding-right: 26px; }

/* --- 2) rozbalovací nabídka --- */
.mcat .item .mega {
  display: none;
  grid-template-columns: none;
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.mcat .item:hover .mega { display: flex; gap: 30px; }
.mega .col   { flex: 0 0 auto; min-width: 156px; }
.mega .promo { flex: 0 0 auto; width: 232px; }
/* poslední dvě položky s nabídkou se rozbalují doleva, ať nevyjedou z okna */
.mcat .item:nth-last-child(2) .mega,
.mcat .item:nth-last-child(3) .mega { left: auto; right: 0; }

/* --- 3) mobilní hlavička --- */
@media (max-width: 1024px) {
  .mhead .in {
    grid-template-columns: auto auto;
    grid-template-areas: "brand acts" "search search";
    column-gap: 14px;
    row-gap: 12px;
    justify-content: space-between;
    align-items: center;
  }
  .mbrand  { grid-area: brand; }
  .macts   { grid-area: acts; }
  .msearch { grid-area: search; max-width: none; width: 100%; }
}

@media (max-width: 760px) {
  .util           { font-size: 12px; }
  .util .in       { padding: 7px 18px; justify-content: center; }
  .util .l        { gap: 10px; }
  .util .r        { display: none; }

  .mhead .in      { padding: 12px 18px; }
  .mbrand         { gap: 10px; }
  .mbrand .mk     { width: 40px; height: 40px; font-size: 21px; border-radius: 11px; }
  .mbrand .tx     { display: block; }
  .mbrand .tx b   { font-size: 19px; }
  .mbrand .tx span{ display: none; }

  .macts          { gap: 16px; }
  .macts svg      { width: 23px; height: 23px; }
  .macts .burger  { display: grid; place-items: center; padding: 0; }
  .macts .burger svg { width: 26px; height: 26px; stroke-width: 2; }
  .macts .cbubble { right: -6px; }

  .msearch input  { padding: 11px 16px; font-size: 14.5px; }
  .msearch button { padding: 0 17px; }
  .msearch button .sl { display: none; }

  .mcat .in       { padding-left: 18px; padding-right: 18px; }
}

/* --- 4) rozbalená mobilní nabídka --- */
#mnav        { padding: 6px 0 14px; box-shadow: 0 16px 26px -20px rgba(0,0,0,.5); }
#mnav a      { padding: 13px 18px; font-weight: 700; font-size: 15.5px; border-bottom: 1px solid var(--line); }
#mnav a:last-child { border-bottom: 0; }
#mnav .mtel  { display: flex; align-items: center; gap: 9px; color: var(--brand); font-weight: 800; }
#mnav .mtel svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- 5) hvězdičky v hero se na mobilu nesmí zalomit --- */
.zmain .stars   { flex-wrap: nowrap; }
.zmain .stars .s{ flex: 0 0 auto; white-space: nowrap; display: inline-flex; gap: 2px; }
@media (max-width: 560px) {
  .zmain .stars    { font-size: 12.5px; gap: 7px; }
  .zmain .stars .s svg { width: 14px; height: 14px; }
}