/* ============================================================================
   Тема „maison" — card.css (ОБЩ файл на темата; страниците не го пипат)
   Продуктовата карта (§5.4), цената (§2.2, §7) и рафтът-карусел.
   ========================================================================= */

/* --- Карта ------------------------------------------------------------------ */
.mx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mx-s3);
  min-width: 0;
  color: var(--mx-ink);
}
.mx-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-ivory-2);
}
.mx-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 150ms var(--mx-ease), transform 600ms var(--mx-ease);
}
/* Бял пакшот: потъва в плочката (contain + multiply, поле 16 px) */
.mx-card__media--white .mx-card__img {
  box-sizing: border-box;
  padding: var(--mx-s4);
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* ВРЕМЕННО, докато `media:variants` не е измерил фона (`bg`, К15, §9.2): днес всяка
   снимка е „other" и белите пакшоти стояха бели върху бяло, а вградените бели ленти
   на лайфстайл кадрите — като рамки. multiply потапя БЯЛОТО в --mx-ivory-2, а тъмните
   и цветните кадри почти не се променят (умножение по ~0,98) — безопасно и за тях.
   Мащабът (еднаква заетост ~72 %) и отрязването на лентите са в media:variants. */
.mx-card__media--other .mx-card__img { mix-blend-mode: multiply; }
/* Фонът на „белите" пакшоти е 249–253, не 255 — при multiply остава сив квадрат.
   +2,5 % яркост го изравнява с бялото (като в героя и плочките на началната),
   без видима промяна в бижуто или в тъмните кадри; файлът не се пипа. */
.mx-card__media .mx-card__img { filter: brightness(1.025); }
.mx-card__img--alt { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .mx-card:hover .mx-card__img--alt { opacity: 1; }
  .mx-card__media--other .mx-card__img:not(.mx-card__img--alt) { will-change: auto; }
  .mx-card:hover .mx-card__media--other .mx-card__img:only-of-type { transform: scale(1.03); }
}
.mx-card__ph { position: absolute; inset: 0; background: var(--mx-ivory-2); }

/* Изчерпано: лента долу върху снимката, снимката приглушена (§5.4) */
.mx-card.is-out .mx-card__img { opacity: .7; }
.mx-card__out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--mx-s2) var(--mx-s3);
  background: rgba(255, 255, 255, .9);
  color: var(--mx-ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

/* Значка (ъгъл): „Ново" — контур и текст антично злато, бял фон (§5.4) */
.mx-badge {
  position: absolute;
  top: var(--mx-s3);
  left: var(--mx-s3);
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid var(--mx-gold-700);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
  color: var(--mx-gold-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mx-badge--promo { border-color: var(--mx-gold-100); background: var(--mx-gold-100); color: var(--mx-ink); }

/* „Добави в кошницата" — лента въглен; само десктоп с мишка, при hover/фокус */
.mx-card__add { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .mx-card__add {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    transform: translateY(101%);
    transition: transform var(--mx-dur) var(--mx-ease);
  }
  .mx-card:hover .mx-card__add,
  .mx-card:focus-within .mx-card__add { transform: none; }
}
.mx-card__addbtn {
  display: block;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: var(--mx-ink);
  color: #FFFFFF;
  font-family: var(--mx-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--mx-dur) var(--mx-ease);
}
.mx-card__addbtn:hover { background: #000000; }
body.theme-maison .mx-card__addbtn:focus-visible { outline: 2px solid var(--mx-gold); outline-offset: -5px; }

/* Текст под снимката */
.mx-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Ред с атрибути: един ред, БЕЗ многоточие. Стойностите са кратки (≤ 22 знака,
   ProductData::cardAttrs); ако втората не се побира, тя пада на втори ред,
   който е отрязан (max-height = 1 ред) — остава само първата, цяла. */
.mx-card__attrs {
  display: flex;
  flex-wrap: wrap;
  max-height: 16px;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mx-ink-2);
}
.mx-card__attrs > span { white-space: nowrap; }
.mx-card__attrs > span + span::before { content: "·"; margin: 0 .5em; }
body.theme-maison .mx-card__name {
  margin: 0;
  font-family: var(--mx-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--mx-ink);
  /* 3 реда на телефон, 2 на десктоп — разликата между сходните имена е накрая (§5.4) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  body.theme-maison .mx-card__name { font-size: 15px; line-height: 22px; -webkit-line-clamp: 2; line-clamp: 2; }
}
.mx-card__link { color: inherit; text-decoration: none; }
/* Разпънат линк: цялата карта е връзка; формата „Добави" е над него (z-index 3) */
.mx-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.mx-card:hover .mx-card__link { text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 4px; }
body.theme-maison .mx-card__link:focus-visible { outline: none; }
body.theme-maison .mx-card__link:focus-visible::after { outline: 2px solid var(--mx-gold-700); outline-offset: 4px; }

/* --- Цена --------------------------------------------------------------------- */
.mx-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--mx-s2);
  margin: 0;
  color: var(--mx-ink);
  font-family: var(--mx-sans);
  font-variant-numeric: lining-nums tabular-nums;
}
.mx-price__now { font-weight: 500; white-space: nowrap; }
.mx-price__from { color: var(--mx-ink-2); font-size: .93em; }
.mx-price__old { color: var(--mx-ink-2); font-size: .9em; white-space: nowrap; text-decoration-thickness: 1px; }
.mx-price__off {
  align-self: center;
  padding: 1px 6px;
  border-radius: var(--mx-radius);
  background: var(--mx-gold-100);
  color: var(--mx-ink);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.mx-price--sm { font-size: 14px; line-height: 20px; }
.mx-price--md { font-size: 18px; line-height: 24px; }
.mx-price--lg { font-size: 22px; line-height: 28px; }
@media (min-width: 768px) { .mx-price--sm { font-size: 15px; } }
@media (min-width: 1200px) { .mx-price--lg { font-size: 24px; line-height: 30px; } }
.mx-price--none { font-size: 13px; color: var(--mx-ink-2); }

/* --- Рафт (карусел) ---------------------------------------------------------- */
.mx-shelf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mx-s4);
  margin-bottom: var(--mx-s5);
}
.mx-shelf__all { flex: none; font-size: 14px; }
.mx-carousel { position: relative; container-type: inline-size; }
.mx-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--mx-gap)) / 2.2);
  gap: var(--mx-gap);
  margin: 0;
  padding: 0 0 var(--mx-s2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mx-carousel__track::-webkit-scrollbar { display: none; }
.mx-carousel__track:focus-visible { outline: 2px solid var(--mx-gold-700); outline-offset: 4px; }
.mx-carousel__item { min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) {
  .mx-carousel__track { grid-auto-columns: calc((100% - 2 * var(--mx-gap)) / 3.2); }
}
@media (min-width: 1200px) {
  .mx-carousel__track { grid-auto-columns: calc((100% - 3 * var(--mx-gap)) / 4); }
}
/* Стрелките идват от lumen.js (.lm-carousel__arrow) — в тона на темата и
   центрирани по височината на снимката (1:1 → половин ширина на колоната). */
.mx-carousel .lm-carousel__arrow {
  position: absolute;
  top: calc((100cqw - 3 * var(--mx-gap)) / 8 - 22px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
  color: var(--mx-ink);
  cursor: pointer;
  transition: opacity var(--mx-dur) var(--mx-ease), background-color var(--mx-dur) var(--mx-ease);
}
.mx-carousel .lm-carousel__arrow svg { stroke-width: 1.5; }
.mx-carousel .lm-carousel__arrow:hover { background: var(--mx-ink); color: #FFFFFF; border-color: var(--mx-ink); }
.mx-carousel .lm-carousel__arrow--prev { left: -22px; }
.mx-carousel .lm-carousel__arrow--next { right: -22px; }
.mx-carousel .lm-carousel__arrow.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 1199px) {
  .mx-carousel .lm-carousel__arrow { top: calc((100cqw - 2 * var(--mx-gap)) / 6.4 - 22px); }
}

/* --- Списък: решетка, празно състояние, пагинация (партиал listing) --------- */
.mx-listing > li { min-width: 0; }
.mx-empty { padding: var(--mx-s7) 0; max-width: 640px; }
.mx-empty__text { margin: var(--mx-s3) 0 var(--mx-s5); color: var(--mx-ink-2); }
.mx-pagin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-s2);
  margin-top: var(--mx-s7);
  padding-top: var(--mx-s5);
  border-top: 1px solid var(--mx-line);
  font-variant-numeric: lining-nums tabular-nums;
}
.mx-pagin__pages { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-pagin__page,
.mx-pagin__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  color: var(--mx-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.mx-pagin__page:hover { border-bottom-color: var(--mx-line-strong); }
.mx-pagin__page.is-cur { border-bottom-color: var(--mx-gold); font-weight: 600; }
.mx-pagin__nav { border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius); }
.mx-pagin__nav:hover { background: var(--mx-ink); border-color: var(--mx-ink); color: #FFFFFF; }
.mx-pagin__nav.is-off { opacity: .35; }
.mx-pagin__nav.is-off:hover { background: transparent; color: var(--mx-ink); border-color: var(--mx-line-strong); }
.mx-pagin__gap { min-width: 24px; text-align: center; color: var(--mx-ink-2); }