/* ============================================================================
   Тема „maison" — home.css (началната страница, дизайн спецификация §4)
   Зарежда се САМО от themes/maison/home.blade.php (@push('mx-css'), бюджетът
   за CSS §9.3). Мобилно първо: 360 px → 768 → 1200.
   Тих лукс: слонова кост, въглен, злато само като акцент (текст в злато на
   светло = --mx-gold-700), хеърлайни, нулеви радиуси, без сенки. Без слайдери
   и автоматично въртене; reduced-motion спира преходите (base.css).
   ========================================================================= */

.mx-home { display: block; }

/* Съседни бели секции не трупат двойно разстояние (56 + 56 / 96 + 96). */
.mx-home > .mx-section:not(.mx-section--ivory) + .mx-section:not(.mx-section--ivory) { padding-top: 0; }
/* …освен след плочките „по вид", които на телефон са скрити (там са кръговете):
   същата специфичност, по-късно правило — печели. */
@media (max-width: 767px) {
  .mx-home > .mx-kinds.mx-section + .mx-section:not(.mx-section--ivory) { padding-top: var(--mx-section); }
}

/* --- Кръговете „по вид" (само телефон, над героя — §4 т. 1, т. 3) ---------- */
.mx-circles { padding: var(--mx-s4) 0 var(--mx-s5); }
.mx-circles__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76px, 1fr);
  gap: var(--mx-s3);
  margin: 0;
  padding: 0 var(--mx-gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mx-circles__list::-webkit-scrollbar { display: none; }
.mx-circles__list > li { min-width: 0; scroll-snap-align: start; }
.mx-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mx-s2);
  color: var(--mx-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mx-circle__img {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--mx-line);
  border-radius: 50%;
  background: var(--mx-ivory-2);
  overflow: hidden;
}
.mx-circle__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-circle__img.is-white img { box-sizing: border-box; padding: 9px; object-fit: contain; mix-blend-mode: multiply; }
.mx-circle__ph { font-family: var(--mx-serif); font-weight: 500; font-size: 28px; line-height: 1; color: var(--mx-gold-700); }
.mx-circle__name {
  display: -webkit-box;
  max-width: 88px;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mx-circle:focus-visible { outline-offset: 4px; }
@media (min-width: 768px) {
  .mx-circles { display: none; }
}

/* --- Герой (§4 т. 1) ------------------------------------------------------- */
/* Телефон: снимката отгоре на цялата ширина (3:2, до 42svh), текстът отдолу
   на слонова кост; от 768 px — разделено (6/6, а от 1200 — 5/7). */
.mx-hero__in { display: flex; flex-direction: column; padding-inline: 0; }
.mx-hero__media { order: -1; }
.mx-hero__panel {
  display: flex;
  align-items: center;
  padding: var(--mx-s5) var(--mx-gutter) var(--mx-s7);
  background: var(--mx-ivory);
}
.mx-hero__copy { max-width: 560px; }
.mx-hero__eyebrow { margin-bottom: var(--mx-s3); }
.mx-hero__slogan {
  margin: var(--mx-s3) 0 0;
  font-family: var(--mx-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  color: var(--mx-gold-700);
}
.mx-hero__text { margin: var(--mx-s3) 0 0; font-size: 16px; line-height: 26px; color: var(--mx-ink); max-width: 46ch; }
.mx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mx-s3) var(--mx-s5);
  margin-top: var(--mx-s5);
}
/* Вторият бутон на телефон е текстова връзка (§4 т. 1); от 768 px — вторичен бутон. */
.mx-hero__alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mx-ink);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--mx-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.mx-hero__alt:hover { text-decoration-thickness: 2px; }

/* Натюрморт от реални пакшоти (вариант А): един голям + два малки на ЕДНО поле
   слонова кост — същият тон като панела, без фуги (бели фуги между два различни
   крема изглеждаха „на кръпки"); бялото на снимката потъва в него (multiply).
   Телефон: САМО главният кадър, 3:2 и до 42svh — така H1 и бутонът влизат в
   първия екран под кръговете (прегледът 18.10: H1 започваше около 700 px). */
.mx-still {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 42svh;
  background: var(--mx-ivory);
}
.mx-still__cell:not(.mx-still__cell--main) { display: none; }
.mx-still__cell {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: var(--mx-ivory);
}
.mx-still__cell img {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 600ms var(--mx-ease);
}
.mx-still__cell--main img { top: 9%; left: 9%; width: 82%; height: 82%; }
.mx-still__cell:hover img { transform: scale(1.03); }
.mx-still__cell:focus-visible { outline-offset: -4px; }

.mx-hero__media--photo { aspect-ratio: 3 / 2; max-height: 42svh; overflow: hidden; background: var(--mx-ivory-2); }
.mx-hero__media--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Само текст: панелът е целият герой, центриран. */
.mx-hero--text .mx-hero__panel { justify-content: center; text-align: center; padding-block: var(--mx-s8); }
.mx-hero--text .mx-hero__copy { margin-inline: auto; }
.mx-hero--text .mx-hero__text { margin-inline: auto; }
.mx-hero--text .mx-hero__actions { justify-content: center; }

@media (min-width: 768px) {
  .mx-hero { padding-top: var(--mx-s5); }
  .mx-hero__in { display: grid; grid-template-columns: 1fr 1fr; padding-inline: var(--mx-gutter); }
  .mx-hero--text .mx-hero__in { grid-template-columns: 1fr; }
  .mx-hero__media { order: 0; }
  .mx-hero__panel { padding: var(--mx-s7) var(--mx-s6); }
  /* На телефон отстоянията са по-стегнати (бутонът — в първия екран); тук — пълните. */
  .mx-hero__eyebrow { margin-bottom: var(--mx-s4); }
  .mx-hero__text { margin-top: var(--mx-s4); }
  .mx-still,
  .mx-hero__media--photo { aspect-ratio: auto; max-height: none; height: 100%; min-height: 460px; }
  /* От таблет — пълният натюрморт: голям кадър + два малки. */
  .mx-still__cell:not(.mx-still__cell--main) { display: block; }
  .mx-still--2 { grid-template-columns: 1fr 1fr; }
  .mx-still--3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
  .mx-still--3 .mx-still__cell--main { grid-row: 1 / span 2; }
  .mx-hero__alt {
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid var(--mx-ink);
    border-radius: var(--mx-radius);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--mx-dur) var(--mx-ease), color var(--mx-dur) var(--mx-ease);
  }
  .mx-hero__alt:hover { background: var(--mx-ink); color: #FFFFFF; }
  /* Двата бутона на един ред и в тесния панел 5/12 (≈ 450 px съдържание). */
  .mx-hero__actions { gap: var(--mx-s3) var(--mx-s4); }
  .mx-hero__cta,
  .mx-hero__alt { padding-inline: 24px; }
}
@media (min-width: 1200px) {
  .mx-hero__in { grid-template-columns: 5fr 7fr; }
  .mx-hero__panel { padding: var(--mx-s8) var(--mx-s7); }
  .mx-hero__slogan { font-size: 30px; line-height: 36px; }
  .mx-hero__text { font-size: 17px; line-height: 28px; }
  .mx-still,
  .mx-hero__media--photo { min-height: 600px; }
}

/* --- „Пазарувайте по вид" — плочки (от 768 px, §4 т. 3) ------------------- */
.mx-kinds { display: none; }
@media (min-width: 768px) {
  .mx-kinds { display: block; }
}
.mx-kinds__grid {
  display: grid;
  grid-template-columns: repeat(var(--mx-kinds-n, 4), minmax(0, 1fr));
  gap: var(--mx-s6) 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx-kind { display: block; color: var(--mx-ink); text-decoration: none; }
.mx-kind__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-ivory-2);
}
.mx-kind__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--mx-ease);
}
.mx-kind__media--white img { top: 14%; left: 14%; width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.mx-kind:hover .mx-kind__media img { transform: scale(1.04); }
.mx-kind__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mx-serif);
  font-weight: 400;
  font-size: 64px;
  color: var(--mx-gold-700);
}
.mx-kind__name {
  display: block;
  margin-top: var(--mx-s4);
  font-family: var(--mx-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--mx-dur) var(--mx-ease);
}
.mx-kind:hover .mx-kind__name { text-decoration-color: var(--mx-gold); }
.mx-kind:focus-visible { outline-offset: 4px; }
@media (min-width: 1200px) {
  .mx-kind__name { font-size: 24px; line-height: 30px; }
}

/* --- Рафтове: бележката „Подбрани ръчно" ---------------------------------- */
.mx-home-shelf__note { margin: var(--mx-s4) 0 0; }
.mx-home-shelf__note .mx-link { margin-left: var(--mx-s2); color: var(--mx-ink-2); }

/* --- Редакционен блок (§4 т. 5) ------------------------------------------- */
.mx-ed { display: grid; grid-template-columns: 1fr; background: var(--mx-ivory); }
.mx-ed__media--photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mx-ivory-2); }
.mx-ed__media--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-ed__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mx-paper); }
.mx-ed__media--n1 { grid-template-columns: 1fr; }
.mx-ed__shot { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--mx-ivory-2); }
.mx-ed__shot img { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.mx-ed__panel { padding: var(--mx-s6) var(--mx-gutter) var(--mx-s7); }
.mx-ed__intro { margin: var(--mx-s4) 0 0; max-width: 60ch; }
.mx-ed__cols { display: grid; grid-template-columns: 1fr; gap: var(--mx-s5); margin-top: var(--mx-s5); }
.mx-ed__coltitle {
  margin: 0 0 var(--mx-s2);
  padding-bottom: var(--mx-s2);
  border-bottom: 1px solid var(--mx-line);
  font-family: var(--mx-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
}
.mx-ed__lines { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; }
.mx-ed__lines li { position: relative; padding: 6px 0 6px 22px; }
.mx-ed__lines li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 1px; background: var(--mx-gold); }
.mx-ed__more { display: inline-block; margin-top: var(--mx-s6); font-size: 15px; }
@media (min-width: 768px) {
  /* minmax(0, …) и без aspect-ratio в редицата: иначе височината на панела се
     пренася през съотношението в минимална ширина и снимката избутва текста. */
  .mx-ed { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mx-ed--nomedia { grid-template-columns: minmax(0, 1fr); }
  .mx-ed__media--photo { aspect-ratio: auto; min-height: 480px; }
  .mx-ed__shot { aspect-ratio: auto; min-height: 420px; }
  .mx-ed__panel { display: flex; flex-direction: column; justify-content: center; padding: var(--mx-s7); }
  .mx-ed__cols { grid-template-columns: 1fr 1fr; gap: var(--mx-s6); }
}
@media (min-width: 1200px) {
  .mx-ed__panel { padding: var(--mx-s8); }
}

/* --- Подаръци по бюджет (§4 т. 6) ----------------------------------------- */
.mx-budgets {
  display: grid;
  grid-template-columns: repeat(var(--mx-budgets-n, 3), minmax(0, 1fr));
  gap: var(--mx-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx-budget {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 136px;
  box-sizing: border-box;
  padding: var(--mx-s4) var(--mx-s3);
  background: var(--mx-ivory);
  color: var(--mx-ink);
  text-decoration: none;
  transition: box-shadow var(--mx-dur) var(--mx-ease);
}
/* Посочване: хеърлайн въглен по ръба (рамка, не сянка). */
.mx-budget:hover { box-shadow: inset 0 0 0 1px var(--mx-ink); }
.mx-budget__upto {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mx-gold-700);
}
.mx-budget__amount {
  margin-top: var(--mx-s1);
  font-family: var(--mx-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  white-space: nowrap;
}
.mx-budget__meta { margin-top: auto; padding-top: var(--mx-s3); font-size: 12px; line-height: 18px; color: var(--mx-ink-2); }
.mx-budget__go { position: absolute; top: var(--mx-s4); right: var(--mx-s3); color: var(--mx-gold-700); transition: transform var(--mx-dur) var(--mx-ease); }
.mx-budget:hover .mx-budget__go { transform: translateX(3px); }
.mx-gifts__shelf { margin-top: var(--mx-s7); }
.mx-gifts__shelf .mx-shelf__head { align-items: baseline; }
@media (max-width: 479px) {
  .mx-budget__go { display: none; }
}
@media (min-width: 768px) {
  .mx-budgets { gap: var(--mx-gap); }
  .mx-budget { min-height: 200px; padding: var(--mx-s6) var(--mx-s5); }
  .mx-budget__amount { font-size: 52px; line-height: 56px; }
  .mx-budget__meta { font-size: 14px; line-height: 22px; }
  .mx-budget__go { top: var(--mx-s6); right: var(--mx-s5); }
}
@media (min-width: 1200px) {
  .mx-budget__amount { font-size: 60px; line-height: 64px; }
  .mx-gifts__shelf { margin-top: var(--mx-s8); }
}

/* --- Колекции (§4 т. 7) ---------------------------------------------------- */
.mx-colls { display: grid; grid-template-columns: 1fr; gap: var(--mx-s5); margin: 0; padding: 0; list-style: none; }
.mx-coll { display: block; color: var(--mx-ink); text-decoration: none; }
.mx-coll__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mx-ivory-2); }
.mx-coll__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mx-ease); }
.mx-coll__media--white img { top: 12%; left: 12%; width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.mx-coll:hover .mx-coll__media img { transform: scale(1.03); }
.mx-coll__panel { display: flex; flex-direction: column; gap: var(--mx-s2); padding: var(--mx-s5); background: var(--mx-ivory); }
.mx-coll__name { font-family: var(--mx-serif); font-weight: 600; font-size: 22px; line-height: 28px; }
.mx-coll__text { font-size: 14px; line-height: 22px; color: var(--mx-ink-2); }
.mx-coll__cta { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 5px; }
@media (min-width: 768px) {
  .mx-colls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mx-gap); }
}

/* --- Магазините (вариант А, §8.4): ред с плъзгане → 5 колони ------------------ */
.mx-stores {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 0;
  margin: 0 calc(-1 * var(--mx-gutter));
  padding: 0 var(--mx-gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mx-gutter);
  scrollbar-width: none;
}
.mx-stores::-webkit-scrollbar { display: none; }
.mx-store {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--mx-s1) var(--mx-s5) var(--mx-s1) var(--mx-s5);
  border-left: 1px solid var(--mx-line);
  scroll-snap-align: start;
}
.mx-store:first-child { padding-left: 0; border-left: 0; }
.mx-store__ic { margin-bottom: var(--mx-s3); color: var(--mx-gold-700); }
.mx-store__name { margin: 0; font-family: var(--mx-serif); font-weight: 600; font-size: 22px; line-height: 28px; }
.mx-store__addr { margin: var(--mx-s2) 0 var(--mx-s3); font-size: 14px; line-height: 22px; color: var(--mx-ink-2); }
.mx-store__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; font-size: 14px; }
.mx-store__ext { flex: none; color: var(--mx-gold-700); }
.mx-stores__note { margin: var(--mx-s5) 0 0; }
@media (min-width: 768px) {
  .mx-stores { grid-auto-columns: 38%; }
}
@media (min-width: 1200px) {
  .mx-stores {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--mx-stores-n, 5), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* --- За марката (§4 т. 11) ------------------------------------------------- */
.mx-about__in { max-width: 640px; text-align: center; }
.mx-about__text { margin: var(--mx-s4) 0 var(--mx-s5); }

/* --- SEO текст (§4 т. 12): сгънат без JS ----------------------------------- */
.mx-seo { max-width: 820px; }
.mx-prose { font-size: 14px; line-height: 22px; color: var(--mx-ink); }
.mx-prose > :first-child { margin-top: 0; }
.mx-prose h2 { margin: 0 0 var(--mx-s3); font-family: var(--mx-serif); font-weight: 500; font-size: 26px; line-height: 32px; }
.mx-prose h3 { margin: var(--mx-s5) 0 var(--mx-s2); font-family: var(--mx-serif); font-weight: 600; font-size: 22px; line-height: 28px; }
.mx-prose p,
.mx-prose ul,
.mx-prose ol { margin: 0 0 var(--mx-s3); }
.mx-prose ul,
.mx-prose ol { padding-left: 1.25em; }
.mx-prose strong,
.mx-prose b { font-weight: 600; }
/* Затворено: въведението е до 2 реда; отворено — целият текст. */
.mx-seo.has-more:has(> .mx-seo__more:not([open])) .mx-seo__lead > p:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mx-seo__lead > p:last-child { margin-bottom: 0; }
.mx-seo__more > .mx-prose { margin-top: var(--mx-s3); }
.mx-seo__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--mx-gold);
  text-underline-offset: 5px;
}
.mx-seo__toggle::-webkit-details-marker { display: none; }
.mx-seo__toggle::marker { content: ""; }
.mx-seo__close { display: none; }
.mx-seo__more[open] .mx-seo__close { display: inline; }
.mx-seo__more[open] .mx-seo__open { display: none; }
@media (min-width: 1200px) {
  .mx-prose { font-size: 15px; line-height: 24px; }
  .mx-prose h2 { font-size: 34px; line-height: 40px; }
}

/* --- Белите пакшоти: фонът им е 250–253, не 255 — при multiply върху слоновата
   кост се вижда квадрат. +2,5 % яркост го изравнява с бялото, без да мени бижуто
   видимо (само показване; файлът не се пипа). ---------------------------------- */
.mx-still__cell img,
.mx-kind__media--white img,
.mx-ed__shot img,
.mx-coll__media--white img,
.mx-circle__img.is-white img { filter: brightness(1.025); }

/* SEO текстът е последен преди лентата с обещанията — без двойно празно поле. */
.mx-home > .mx-seo-sec:last-child { padding-bottom: var(--mx-s7); }