/* ============================================================
   MICHALOVYTRUBKY-SHOP.CZ — SROVNÁVAČ PRODUKTŮ — mt-compare-1.css v1
   PRODUCTION CSS pro porovnání 2-4 produktů vedle sebe.

   PÁR s mt-compare-1.js (v1). Záhlaví: vložit PŘED mt-width-1.css.

   ARCHITEKTURA:
   - Vše scopováno pod vlastní namespace .mt-cmp-* (žádné generické
     selektory, žádný bleed do type-page / mt-width-1.css).
   - Jediná výjimka mimo namespace: body.mt-cmp-open (scroll lock
     otevřeného overlay) — bezpečné, třídu přidává jen náš JS.
   - Tokeny z globálního style.css (--mt-primary, --mt-radius, ...).
   - Easing VŽDY literal cubic-bezier(.4,0,.2,1) — nikdy var(--ss-ease)
     (lekce z mt-category-17: kombinovaný token = nechtěný delay).

   VRSTVY:
   1) Tlačítko na kartě výpisu (.mt-cmp-cardbtn) — kruhové, pod srdíčkem
   2) Tlačítko na detailu produktu (.mt-cmp-pdpbtn)
   3) Plovoucí lišta dole (.mt-cmp-bar) + složený chip (.mt-cmp-chip)
   4) Srovnávací overlay (.mt-cmp-overlay) s tabulkou (.mt-cmp-table)

   Z-INDEXY (kontext webu): PDP sticky cart = 80, header lišty ~990-1003,
   mobilní menu 9200. Lišta = 890 (nad sticky cart, pod header vrstvami),
   overlay = 2000 (modál překrývá vše kromě mobilního menu).
   ============================================================ */


/* ============================================================
   1) TLAČÍTKO NA PRODUKTOVÉ KARTĚ VÝPISU
   Kruhové tlačítko pod wish srdíčkem (.mt-cat-card__wish je
   top:10px; right:10px; 34px) — stejná rodina: bílý kruh, ikona.
   ============================================================ */
.mt-cat-root .mt-cmp-cardbtn {
  position: absolute;
  top: 52px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-text-2, #4C5165);
  z-index: 2;
  cursor: pointer;
  padding: 0;
  transition:
    color .25s cubic-bezier(.4, 0, .2, 1),
    transform .25s cubic-bezier(.4, 0, .2, 1),
    background-color .25s cubic-bezier(.4, 0, .2, 1);
}

.mt-cat-root .mt-cmp-cardbtn:hover {
  color: var(--mt-primary, #0052DA);
  transform: scale(1.08);
}

.mt-cat-root .mt-cmp-cardbtn.is-active {
  background: var(--mt-primary, #0052DA);
  color: #FFFFFF;
}

.mt-cat-root .mt-cmp-cardbtn svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mt-cat-root .mt-cmp-cardbtn:focus-visible {
  outline: 2px solid var(--mt-primary, #0052DA);
  outline-offset: 2px;
}


/* ============================================================
   2) TLAČÍTKO NA DETAILU PRODUKTU
   Textové sekundární tlačítko pod CTA řádkem (.mt-pdp-cta),
   ladí s outline stylem .mt-btn.secondary ze style.css.
   ============================================================ */
.mt-pdp-root .mt-cmp-pdprow {
  margin: 10px 0 0;
}

.mt-pdp-root .mt-cmp-pdpbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--mt-text, #253041);
  border: 1.5px solid var(--mt-border, rgba(37, 48, 65, .14));
  border-radius: var(--mt-radius, 8px);
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 9px 16px;
  cursor: pointer;
  transition:
    color .22s cubic-bezier(.4, 0, .2, 1),
    border-color .22s cubic-bezier(.4, 0, .2, 1),
    background-color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-pdp-root .mt-cmp-pdpbtn:hover {
  border-color: var(--mt-primary, #0052DA);
  color: var(--mt-primary, #0052DA);
}

.mt-pdp-root .mt-cmp-pdpbtn.is-active {
  background: var(--mt-primary-bg, #DBEAFE);
  border-color: var(--mt-primary, #0052DA);
  color: var(--mt-primary, #0052DA);
}

.mt-pdp-root .mt-cmp-pdpbtn svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.mt-pdp-root .mt-cmp-pdpbtn:focus-visible {
  outline: 2px solid var(--mt-primary, #0052DA);
  outline-offset: 2px;
}


/* ============================================================
   3) PLOVOUCÍ LIŠTA (dole, centrovaný ostrov)
   Ostrov (ne full-bleed) — vpravo dole nechává místo Smartsupp
   bublině. Nad PDP sticky cartem (z 80). --lifted = posun nahoru,
   když je PDP sticky cart viditelný.
   ============================================================ */
.mt-cmp-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 890;
  width: min(920px, calc(100vw - 32px));
  background: #FFFFFF;
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  border-radius: var(--mt-radius-md, 12px);
  box-shadow: var(--mt-shadow-lg, 0 16px 40px rgba(37, 48, 65, .14));
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    transform .25s cubic-bezier(.4, 0, .2, 1),
    bottom .25s cubic-bezier(.4, 0, .2, 1),
    opacity .25s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar.mt-cmp-bar--lifted {
  bottom: 88px;   /* PDP sticky cart je viditelný — uhni nad něj */
}

.mt-cmp-bar__items {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.mt-cmp-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0;
  max-width: 190px;
  background: var(--mt-bg-soft, #F5F7FB);
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  border-radius: var(--mt-radius, 8px);
  padding: 5px 8px 5px 5px;
  position: relative;
}

.mt-cmp-bar__thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-cmp-bar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mt-cmp-bar__name {
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 12px;
  line-height: 1.3;
  color: var(--mt-text, #253041);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mt-cmp-bar__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--mt-accent, #253041);
  color: #FFFFFF;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar__remove:hover {
  background: var(--mt-danger, #EF4444);
}

.mt-cmp-bar__remove svg {
  width: 9px;
  height: 9px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Prázdný slot — naznačuje kapacitu do 4 */
.mt-cmp-bar__slot {
  flex: 1 1 0;
  max-width: 190px;
  min-height: 52px;
  border: 1.5px dashed var(--mt-border, rgba(37, 48, 65, .14));
  border-radius: var(--mt-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 11.5px;
  text-align: center;
  padding: 4px 6px;
}

.mt-cmp-bar__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: 0 0 auto;
}

.mt-cmp-bar__go {
  background: var(--mt-primary, #0052DA);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--mt-radius, 8px);
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar__go:hover {
  background: var(--mt-primary-deep, #003BA8);
}

.mt-cmp-bar__go[disabled] {
  background: var(--mt-border, rgba(37, 48, 65, .14));
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  cursor: not-allowed;
}

.mt-cmp-bar__clear {
  background: transparent;
  border: 0;
  color: var(--mt-text-2, #4C5165);
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar__clear:hover {
  color: var(--mt-danger, #EF4444);
}

/* Minimalizace lišty (šipka dolů v rohu) */
.mt-cmp-bar__minimize {
  position: absolute;
  top: -10px;
  left: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  background: #FFFFFF;
  color: var(--mt-text-2, #4C5165);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--mt-shadow-sm, 0 1px 2px rgba(37, 48, 65, .06));
  transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar__minimize:hover {
  color: var(--mt-primary, #0052DA);
}

.mt-cmp-bar__minimize svg {
  width: 10px;
  height: 10px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Zpráva v liště (nápověda / limit 4) */
.mt-cmp-bar__msg {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mt-accent, #253041);
  color: #FFFFFF;
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 12px;
  border-radius: var(--mt-radius, 8px);
  padding: 6px 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-bar__msg.is-visible {
  opacity: 1;
}

.mt-cmp-bar__hint {
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 11px;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  text-align: center;
  white-space: nowrap;
}

/* Složený chip (minimalizovaná lišta) — vlevo dole, mimo Smartsupp */
.mt-cmp-chip {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 890;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mt-primary, #0052DA);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--mt-radius-pill, 999px);
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: var(--mt-shadow-md, 0 6px 18px rgba(37, 48, 65, .10));
  transition:
    background-color .22s cubic-bezier(.4, 0, .2, 1),
    bottom .25s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-chip:hover {
  background: var(--mt-primary-deep, #003BA8);
}

.mt-cmp-chip.mt-cmp-bar--lifted {
  bottom: 88px;
}

.mt-cmp-chip svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   4) SROVNÁVACÍ OVERLAY
   Fullscreen modál: tmavý backdrop + bílý panel. Tabulka
   s lepivým prvním sloupcem (popisky řádků) a horizontálním
   scrollem uvnitř panelu (stránka nikdy nescrolluje do boku).
   ============================================================ */
body.mt-cmp-open {
  overflow: hidden !important;
}

.mt-cmp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(8px, 3vh, 40px) clamp(8px, 3vw, 40px);
  background: rgba(26, 35, 51, .55);
}

.mt-cmp-panel {
  background: #FFFFFF;
  border-radius: var(--mt-radius-lg, 16px);
  box-shadow: var(--mt-shadow-lg, 0 16px 40px rgba(37, 48, 65, .14));
  width: 100%;
  max-width: 1180px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mt-cmp-panel__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  flex: 0 0 auto;
}

.mt-cmp-panel__title {
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mt-accent, #253041);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Přepínač "jen rozdíly" */
.mt-cmp-diff {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 13px;
  color: var(--mt-text-2, #4C5165);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.mt-cmp-diff input {
  accent-color: var(--mt-primary, #0052DA);
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
}

.mt-cmp-panel__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  background: #FFFFFF;
  color: var(--mt-text, #253041);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition:
    color .22s cubic-bezier(.4, 0, .2, 1),
    border-color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-panel__close:hover {
  color: var(--mt-primary, #0052DA);
  border-color: var(--mt-primary, #0052DA);
}

.mt-cmp-panel__close svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.mt-cmp-panel__body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stav načítání */
.mt-cmp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 24px;
  color: var(--mt-text-2, #4C5165);
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  font-size: 14px;
}

.mt-cmp-loading__spin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  border-top-color: var(--mt-primary, #0052DA);
  animation: mt-cmp-spin .8s linear infinite;
}

@keyframes mt-cmp-spin {
  to { transform: rotate(360deg); }
}

/* ---- Tabulka ---- */
.mt-cmp-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 640px;
  font-family: var(--mt-body, 'Helvetica', sans-serif);
}

.mt-cmp-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #FFFFFF;
  text-align: left;
  vertical-align: top;
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mt-text-2, #4C5165);
  padding: 13px 16px 13px 22px;
  min-width: 130px;
  max-width: 180px;
  border-bottom: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  box-shadow: 1px 0 0 var(--mt-border-subtle, rgba(37, 48, 65, .08));
}

.mt-cmp-table td {
  vertical-align: top;
  padding: 13px 18px;
  min-width: 200px;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mt-text, #253041);
  border-bottom: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
}

/* Zebra — sudé datové řádky do soft podkladu (i sticky th) */
.mt-cmp-table tr:nth-child(even) td,
.mt-cmp-table tr:nth-child(even) th[scope="row"] {
  background: var(--mt-bg-soft, #F5F7FB);
}

.mt-cmp-table tr:nth-child(odd) th[scope="row"] {
  background: #FFFFFF;
}

/* Hlavičkový řádek s produkty */
.mt-cmp-table .mt-cmp-prodrow th[scope="row"],
.mt-cmp-table .mt-cmp-prodrow td {
  background: #FFFFFF !important;   /* zebra na hlavičku nepatří */
  border-bottom: 2px solid var(--mt-border, rgba(37, 48, 65, .14));
  vertical-align: bottom;
}

.mt-cmp-prodcell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}

.mt-cmp-prodcell__imglink {
  display: block;
  width: 100%;
}

.mt-cmp-prodcell__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--mt-radius, 8px);
  border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mt-cmp-prodcell__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mt-cmp-prodcell__name {
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mt-accent, #253041);
  text-decoration: none;
  display: block;
  transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-prodcell__name:hover {
  color: var(--mt-primary, #0052DA);
  text-decoration: underline;
}

.mt-cmp-prodcell__remove {
  background: transparent;
  border: 0;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  font-size: 12px;
  font-family: var(--mt-body, 'Helvetica', sans-serif);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-prodcell__remove:hover {
  color: var(--mt-danger, #EF4444);
}

/* Cena */
.mt-cmp-price {
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--mt-accent, #253041);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mt-cmp-price-note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  margin-top: 2px;
  white-space: nowrap;
}

.mt-cmp-price-old {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  text-decoration: line-through;
  margin-top: 2px;
  white-space: nowrap;
}

/* Dostupnost */
.mt-cmp-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
}

.mt-cmp-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mt-success, #10B981);
  flex: 0 0 auto;
}

.mt-cmp-stock--out::before {
  background: var(--mt-danger, #EF4444);
}

/* Neuvedená hodnota parametru */
.mt-cmp-na {
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  font-size: 13px;
}

/* Chybové sdělení ve sloupci */
.mt-cmp-err {
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  font-size: 13px;
  font-style: normal;
}

/* CTA řádek */
.mt-cmp-table .mt-cmp-ctarow td,
.mt-cmp-table .mt-cmp-ctarow th[scope="row"] {
  background: #FFFFFF !important;
  border-bottom: 0;
}

.mt-cmp-goto {
  display: inline-block;
  background: var(--mt-primary, #0052DA);
  color: #FFFFFF !important;
  border-radius: var(--mt-radius, 8px);
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 20px;
  text-decoration: none !important;
  transition: background-color .22s cubic-bezier(.4, 0, .2, 1);
}

.mt-cmp-goto:hover {
  background: var(--mt-primary-deep, #003BA8);
  color: #FFFFFF !important;
}

/* "Jen rozdíly" — skryj řádky, kde jsou všechny hodnoty stejné */
.mt-cmp-panel.mt-cmp-panel--diff .mt-cmp-row--same {
  display: none;
}


/* ============================================================
   5) MOBIL (do 680 px)
   Lišta: kompaktní (jen thumby + CTA), overlay: panel edge-to-edge,
   užší sloupce, sticky popisky řádků zůstávají.
   ============================================================ */
@media (max-width: 680px) {
  .mt-cmp-bar {
    width: calc(100vw - 16px);
    bottom: 84px;   /* nad Smartsupp bublinou (sedí vpravo dole, ~72px vysoká zóna) */
    padding: 10px;
    gap: 10px;
  }

  .mt-cmp-bar.mt-cmp-bar--lifted {
    bottom: 96px;   /* nad PDP sticky cart i bublinou */
  }

  .mt-cmp-chip {
    bottom: 84px;
  }

  .mt-cmp-chip.mt-cmp-bar--lifted {
    bottom: 96px;
  }

  .mt-cmp-bar__item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px;
    max-width: 74px;
  }

  .mt-cmp-bar__thumb {
    width: 38px;
    height: 38px;
  }

  .mt-cmp-bar__name {
    display: none;   /* na mobilu jen thumby — jména nemají místo */
  }

  .mt-cmp-bar__slot {
    max-width: 74px;
    min-height: 48px;
    font-size: 10px;
  }

  .mt-cmp-bar__go {
    font-size: 13px;
    padding: 9px 14px;
  }

  .mt-cmp-bar__hint {
    white-space: normal;
    max-width: 110px;
  }

  .mt-cmp-overlay {
    padding: 0;
    align-items: stretch;
  }

  .mt-cmp-panel {
    border-radius: 0;
    max-width: none;
  }

  .mt-cmp-panel__head {
    padding: 12px 14px 10px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mt-cmp-diff {
    order: 3;
    width: 100%;
  }

  .mt-cmp-table {
    min-width: 0;
  }

  .mt-cmp-table th[scope="row"] {
    min-width: 92px;
    max-width: 110px;
    padding: 10px 10px 10px 14px;
    font-size: 11px;
  }

  .mt-cmp-table td {
    min-width: 150px;
    max-width: 210px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .mt-cmp-price {
    font-size: 16px;
  }

  .mt-cmp-prodcell__name {
    font-size: 13.5px;
  }
}


/* ============================================================
   6) REDUCE MOTION — scopovaně (jen naše prvky)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mt-cmp-bar,
  .mt-cmp-chip,
  .mt-cmp-bar__msg,
  .mt-cmp-cardbtn,
  .mt-cmp-pdpbtn,
  .mt-cmp-goto,
  .mt-cmp-loading__spin {
    transition: none !important;
    animation: none !important;
  }
}