/* ================================================================
   Mini košík (drawer) — vlastní, v našem minimalistickém designu.
   Monochrom (naše tokeny), Archivo (dědí z body), theme-aware.
   Řídí assets/blog-cart.js, data z CART_V1.
   ================================================================ */
/* z-index pod headerem (200) — stejná vrstva jako .site-nav/.hh-login (195),
   ať header zůstane viditelný nahoře stejně jako u ostatních panelů.
   --header-current-h (počítá header.css) místo pevné --header-h-compact —
   na desktopu tak drawer sedí správně i když je header v "top" stavu
   (dvouřádkový, vyšší), bez nutnosti header kvůli tomu zužovat. */
.mini-cart { position: fixed; inset: var(--header-current-h, var(--header-h-compact)) 0 0 0; z-index: 195; visibility: hidden; }
.mini-cart.is-open { visibility: visible; }

/* Jen neviditelná klikací plocha (zavře drawer kliknutím mimo) — bez
   ztmavení zbytku stránky, stejně jako .header-backdrop u menu. */
.mini-cart__overlay { position: absolute; inset: 0; background: transparent; }

.mini-cart__panel {
  display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-ink);
  outline: none;
}

/* Desktop (>=1024px, stejný práh jako mega-menu v header.css): boční
   drawer zůstává — checkout má jiný charakter než dropdown menu, boční
   zajíždění dává smysl a nic tu nekoliduje s jiným panelem. */
@media (min-width: 1024px) {
  .mini-cart__panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: min(420px, 92vw);
    /* Jemné sklo — ladí s headerem (ten má rgba(255,255,255,.8)+blur(12px)),
       ale míň průhledné, ať zůstane čitelný obsah (ceny, tlačítka). */
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: -12px 0 44px rgba(0,0,0,.14);
    transform: translateX(100%); transition: transform .3s var(--ease);
  }
  .mini-cart.is-open .mini-cart__panel { transform: translateX(0); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .mini-cart__overlay, .mini-cart__panel { transition: none; }
}

/* Mobil (<1024px): stejný vzhled a pohyb jako .site-nav/.hh-search__field/
   .hh-login (header.css) — fade + jemný sjezd shora, žádné boční
   zajíždění. Panel je neprůhledný přes celou šířku → vlastní dimování
   pozadí (.mini-cart__overlay) tu není potřeba. */
@media (max-width: 1023px) {
  .mini-cart__overlay { display: none; }
  /* bez prolínání: panel je hned celý neprůhledný (prolínání v Safari na mobilu nechalo prosvítat stránku
     a vypadalo jako zpoždění), jen krátký jemný sjezd shora */
  .mini-cart__panel {
    position: absolute; inset: 0;
    visibility: hidden; transform: translateY(-6px);
    transition: none;   /* zavření okamžitě: dojezd animace se v Safari potkal s odemčením stránky a problikl */
  }
  .mini-cart.is-open .mini-cart__panel {
    visibility: visible; transform: translateY(0);
    transition: transform .18s var(--ease), visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .mini-cart__panel, .mini-cart.is-open .mini-cart__panel { transition: none; transform: none; }
  }
}

.mini-cart__head {
  flex: 0 0 auto;
  position: relative;   /* kotva pro .mini-cart__close, stejně jako u hledání */
  padding: 20px clamp(16px, 4vw, 28px);
  border-bottom: 1px solid var(--c-line);
}
/* Search/login pod headerem taky nemají žádnou linku — sjednoceno (mobil). */
@media (max-width: 1023px) {
  .mini-cart__head { border-bottom: none; }
}
.mini-cart__title { margin: 0; padding-right: 40px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
/* Přesně stejná pozice, velikost a glyf jako .hh-search__close — sjednocený
   křížek napříč panely (mobil i desktop). */
.mini-cart__close {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 12px; right: 10px;
  width: 40px; height: 40px;
  background: none; border: none; border-radius: 999px; cursor: pointer;
  color: var(--c-muted); font-size: 26px; line-height: 1;
}
.mini-cart__close:hover { color: var(--c-ink); }

.mini-cart__list {
  list-style: none; margin: 0; padding: 4px clamp(16px, 4vw, 28px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto;
}
.mini-cart__empty {
  flex: 1 1 auto; display: grid; place-items: center;
  margin: 0; padding: 40px; color: var(--c-muted); font-size: 15px; text-align: center;
}

.mc-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--c-line);
}
.mc-item:last-child { border-bottom: none; }
.mc-item__media { width: 64px; height: 64px; border-radius: 6px; background: var(--c-field); overflow: hidden; }
.mc-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-item__info { min-width: 0; }
.mc-item__name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.mc-item__variant { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); }
.mc-item__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }

.mc-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }
.mc-qty__btn {
  width: 30px; height: 30px; background: none; border: none; color: var(--c-ink);
  font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s var(--ease);
}
.mc-qty__btn:hover { background: var(--c-hover); }
.mc-qty__num { min-width: 28px; text-align: center; font-size: 14px; }
.mc-item__price { font-size: 14px; font-weight: 500; white-space: nowrap; }

.mc-item__remove {
  align-self: start; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--c-muted);
  border-radius: 6px; cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.mc-item__remove:hover { color: var(--c-ink); background: var(--c-hover); }
.mc-item__remove svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.mini-cart__foot {
  flex: 0 0 auto;
  padding: 16px clamp(16px, 4vw, 28px) clamp(16px, 4vw, 24px);
  border-top: 1px solid var(--c-line); background: var(--c-bg);
}
.mini-cart__lines { display: grid; gap: 6px; margin-bottom: 10px; }
.mini-cart__lines[hidden] { display: none; }
.mc-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.mc-line span { color: var(--c-buy, #2f6b4f); }
.mc-line strong { font-weight: 600; color: var(--c-buy, #2f6b4f); }
.mc-line.is-muted span, .mc-line.is-muted strong { color: var(--c-muted); font-weight: 400; }
.mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.mini-cart__total span { font-size: 15px; color: var(--c-muted); }
.mini-cart__total strong { font-size: 20px; font-weight: 600; }
.mini-cart__actions { display: flex; gap: 10px; }
.mini-cart__btn-quiet {
  flex: 1 1 auto; padding: 13px 16px; text-align: center;
  background: none; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 6px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.mini-cart__btn-quiet:hover { border-color: var(--c-ink); background: var(--c-hover); }
.mini-cart__btn-primary {
  flex: 1 1 auto; padding: 13px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-buy, #2d6a4f); color: #fff; border: none; border-radius: 6px;   /* zelená nákupní, jako „Do košíku“ */
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease);
}
.mini-cart__btn-primary:hover { background: #24573f; }

/* rezervuj místo pro scrollbar → zamčení košíku layout neposune */
html { scrollbar-gutter: stable; }
html.mc-lock, body.mc-lock { overflow: hidden; }

/* hidden atribut musí přebít flex/grid display */
.mini-cart__empty[hidden], .mini-cart__foot[hidden] { display: none; }
.mc-qty__btn:disabled { opacity: .35; cursor: default; }
.mc-item__sklad { margin: 4px 0 0; font-size: 12.5px; color: var(--c-muted); }