/* ==========================================================================
   MODA Zuzana – vlastní patička pro Shoptet (paticka.css)
   Mobil: do 767 px (akordeon) · Tablet: 768–1199 px (2 sloupce) · Desktop: 1200 px+
   Písmo se dědí z e-shopu, velikosti odpovídají běžnému textu Shoptetu (14 px).
   ========================================================================== */

.mz-footer {
  --mz-brown: #4b3126;
  --mz-brown-hover: #3a251c;
  --mz-text: #2b2522;
  --mz-muted: #6b625d;
  --mz-line: #ece7e3;
  --mz-star: #f2a01c;
  --mz-bar: 8px;

  background: #fff;
  color: var(--mz-text);
  border-top: var(--mz-bar) solid var(--mz-brown);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

/* Původní patička Shoptetu se skryje až ve chvíli, kdy je nová hotová */
#footer.mz-ready { background: #fff !important; padding: 0 !important; margin-top: 0; border: 0; }
#footer.mz-ready > :not(.mz-footer) { display: none !important; }

.mz-footer *, .mz-footer *::before, .mz-footer *::after { box-sizing: border-box; }
.mz-footer p, .mz-footer ul, .mz-footer h3 { margin: 0; padding: 0; }
.mz-footer ul { list-style: none; }
.mz-footer li::before { display: none; }
.mz-footer a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s; }
.mz-footer a:focus-visible, .mz-footer button:focus-visible { outline: 2px solid var(--mz-brown); outline-offset: 3px; border-radius: 3px; }

.mz-f-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mz-f-ico { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------- Mřížka ---------- */
.mz-f-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1fr;
  padding: 40px 0 36px;
}
.mz-f-grid > * { padding: 0 32px; }
.mz-f-grid > * + * { border-left: 1px solid var(--mz-line); }
.mz-f-grid > :first-child { padding-left: 0; }
.mz-f-grid > :last-child { padding-right: 0; }

/* ---------- Značka ---------- */
.mz-f-logo { display: inline-block; margin: 0 0 16px; }
.mz-f-logo img { display: block; width: 100%; max-width: 170px; height: auto; }
.mz-f-logo span { font-size: 22px; font-weight: 600; }
.mz-f-tagline { color: var(--mz-muted); max-width: 220px; }

/* ---------- Nadpisy sekcí / akordeon ---------- */
.mz-footer .mz-f-title { margin-bottom: 14px; font-size: inherit; line-height: inherit; border: 0; }
.mz-f-toggle {
  all: unset;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mz-text);
  cursor: default;
}
.mz-f-ico--down { display: none; transition: transform .25s; }

/* ---------- Kontakt ---------- */
.mz-f-text { color: var(--mz-muted); max-width: 280px; }
.mz-footer .mz-f-email {
  display: block; width: fit-content; margin: 8px 0 14px;
  font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--mz-brown); overflow-wrap: anywhere;
}
.mz-footer .mz-f-email:hover { text-decoration: underline; text-underline-offset: 3px; }
.mz-footer .mz-f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 20px;
  background: var(--mz-brown); color: #fff; border-radius: 4px;
  font-size: 14px; font-weight: 500;
}
.mz-footer .mz-f-btn:hover { background: var(--mz-brown-hover); color: #fff; }
.mz-f-btn .mz-f-ico { transition: transform .2s; }
.mz-f-btn:hover .mz-f-ico { transform: translateX(2px); }
.mz-f-store { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mz-line); max-width: 260px; }
.mz-f-store strong { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mz-f-store p { color: var(--mz-muted); }

/* ---------- Seznamy odkazů ---------- */
.mz-footer .mz-f-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0; color: var(--mz-text);
}
.mz-footer .mz-f-links a:hover { color: var(--mz-brown); }
.mz-f-links .mz-f-ico { color: #b3aaa4; transition: transform .2s, color .2s; }
.mz-f-links a:hover .mz-f-ico { color: var(--mz-brown); transform: translateX(2px); }

/* ---------- Doprava + Heureka ---------- */
.mz-f-trust {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--mz-line); border-bottom: 1px solid var(--mz-line);
  font-size: 13px; color: var(--mz-muted);
}
.mz-f-ship, .mz-footer .mz-f-heureka { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; color: inherit; }
.mz-f-sep { display: inline-block; width: 1px; height: 14px; background: #d6cfca; }
.mz-f-carrier, .mz-f-heureka__name { font-size: 14px; font-weight: 600; color: #6b4a3d; }
.mz-f-ship a:hover, .mz-footer a.mz-f-heureka:hover { color: var(--mz-brown); }

.mz-f-stars { position: relative; display: inline-flex; line-height: 0; }
.mz-f-stars svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.mz-f-stars__bg { display: inline-flex; color: #e8e2dd; }
.mz-f-stars__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; color: var(--mz-star); white-space: nowrap; }

/* ---------- Spodní lišta ---------- */
.mz-f-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  padding: 16px 0 20px; font-size: 12px; color: var(--mz-muted);
}
.mz-f-legal { display: flex; flex-wrap: wrap; align-items: center; }
.mz-footer .mz-f-legal a:hover { color: var(--mz-brown); text-decoration: underline; text-underline-offset: 3px; }
.mz-f-legal a + a::before {
  content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 14px;
  background: #d6cfca; vertical-align: -1px;
}

/* ==========================================================================
   TABLET 768–1199 px
   ========================================================================== */
@media (max-width: 1199px) {
  .mz-f-grid { grid-template-columns: 1fr 1fr; padding: 32px 0 28px; }
  .mz-f-grid > * { padding: 0 24px; }
  .mz-f-grid > :nth-child(odd) { padding-left: 0; border-left: 0; }
  .mz-f-grid > :nth-child(even) { padding-right: 0; }
  .mz-f-grid > :nth-child(n+3) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mz-line); }
}

/* ==========================================================================
   MOBIL do 767 px
   ========================================================================== */
@media (max-width: 767px) {
  .mz-footer { --mz-bar: 6px; }
  .mz-f-inner { padding: 0 16px; }

  .mz-f-grid { display: block; padding: 24px 0 0; }
  .mz-f-grid > * { padding: 0 !important; margin: 0 !important; border: 0 !important; }
  .mz-f-grid > .mz-f-col { border-top: 1px solid var(--mz-line) !important; }

  .mz-f-brand { padding-bottom: 16px !important; }
  .mz-f-logo { margin-bottom: 10px; }
  .mz-f-logo img { max-width: 140px; }

  .mz-footer .mz-f-title { margin: 0; }
  .mz-f-toggle {
    padding: 12px 0; min-height: 44px;
    font-size: 13px; cursor: pointer;
  }
  .mz-f-ico--down { display: block; width: 16px; height: 16px; }
  .mz-f-col.is-open .mz-f-ico--down { transform: rotate(180deg); }

  .mz-f-panel { display: none; padding: 0 0 14px; }
  .mz-f-col.is-open .mz-f-panel { display: block; }

  .mz-f-text, .mz-f-store { max-width: none; }
  .mz-footer .mz-f-btn { display: flex; width: 100%; min-height: 42px; }
  .mz-footer .mz-f-links a { padding: 8px 0; }

  .mz-f-trust { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; font-size: 12px; }
  .mz-f-ship, .mz-footer .mz-f-heureka { gap: 4px 10px; }
  .mz-f-heureka .mz-f-sep--lead { display: none; }
  .mz-f-stars svg { width: 12px; height: 12px; }
  .mz-f-sep { height: 11px; }

  .mz-f-bottom { flex-direction: column-reverse; gap: 8px; padding: 14px 0 18px; font-size: 11px; text-align: center; }
  .mz-f-legal { justify-content: center; row-gap: 4px; }
  .mz-f-legal a + a::before { margin: 0 10px; }
  .mz-f-legal .mz-f-cookies { flex-basis: 100%; }
  .mz-f-legal .mz-f-cookies::before { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-footer * { transition: none !important; }
}