/* Relaxiram – новата начална страница за телефон (31.10.2026, сесия „Мобилен дизайн релаксирам“; собственикът одобри и е на живо от 31.10 вечерта).
   Шестият файл в CSS_FILES (rlx.py и tools/cssbuild/build.mjs) – идва след целия CSS на темата и влиза във вградения „използван CSS“;
   след промяна: node build.mjs, качване, node critical.mjs, качване на used/*, rlx_pagecache clear. Шаблоните: {% if rlx_home_v2 %} (settings.RLX_HOME_V2). */

/* 31.10, собственикът: „език иконата е неравна с другите“ – знамето (17 px) стои в кутия 22 px като другите иконки, надписите са на един ред */
.rlx-mbar__lang .rlx-mbar__ico { height: 22px; align-items: center; justify-content: center; }

/* 46 (31.10, собственикът: „на мобилната при отваряне виждам първо супер много текст и нищо, което да грабва окото“): на телефон банерът
   започва с голяма снимка в арката (слайд 1 – снимка „в обстановка“ hero-joy, <picture> в home.html), малкият надпис е етикет върху
   ръба на снимката, под него заглавието и един бутон; дългият текст и бутонът „Всички продукти“ остават за таблет и компютър.
   Лентата с услугите на телефон е една тиха „течаща“ лента (второто копие rlx-services__dup) вместо 4 карти с текст. Компютърът не се променя. */
.rlx-services .rlx-services__dup { display: none; }
/* 31.10, собственикът: „прохлада – премести цветето, не се вижда“ – клонките са цели цветове от GIMP четките (brush/sprig-a|b.webp, тагът sprig в rlx.py) и стоят пред снимката, не зад нея */
.rlx-hero__sprig--1, .rlx-hero__sprig--2 { z-index: 3; }
@media (min-width: 681px) { .rlx-hero__sprig--1 { left: 0; bottom: -2%; transform: rotate(-8deg); } }
@media (max-width: 680px) {
	.rlx-hero { margin-top: 4px; }
	.rlx-hero__slide--design { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 12px 12px 56px; overflow: hidden; } /* клонките на съседния слайд не надничат */
	.rlx-hero__art { order: -1; flex: none; width: 100%; max-width: none; height: clamp(272px, min(84vw, 47svh), 420px); margin: 0; }
	.rlx-hero__arch { inset: 0; border-width: 6px; border-radius: 50% 50% 24px 24px / 44% 44% 24px 24px; box-shadow: 0 30px 50px -30px rgba(60, 40, 25, .6); }
	.rlx-hero__arch picture { display: block; width: 100%; height: 100%; }
	.rlx-hero__slide--design:first-child .rlx-hero__arch img { object-position: 50% 50%; }
	.rlx-hero__arch img { transform-origin: 50% 62%; animation: rlx-kenburns 16s ease-in-out infinite alternate; }
	.rlx-hero__ring { left: -3%; right: -3%; top: -2.5%; bottom: -3%; border-radius: 50% 50% 30px 30px / 44% 44% 30px 30px; transform: rotate(2.5deg); }
	.rlx-hero__badge, .rlx-hero .rlx-hot { display: none; } /* значката и точките са за мебелите от снимката на компютър */
	.rlx-hero__sprig--1 { width: 112px; left: -16px; top: -10px; bottom: auto; z-index: 3; transform: rotate(-8deg); } /* горе вляво – долу е етикетът */
	.rlx-hero__sprig--2 { width: 108px; right: -16px; top: -10px; z-index: 3; }
	.rlx-hero__text { position: relative; z-index: 4; margin-top: -21px; padding: 0 4px; }
	.rlx-hero .rlx-kicker { display: flex; width: max-content; max-width: 100%; margin: 0 auto 14px; padding: 10px 17px 10px 12px; gap: 8px; border-radius: 999px; background: #fff; box-shadow: 0 14px 26px -14px rgba(80, 30, 40, .45), 0 0 0 1px rgba(235, 226, 214, .9); font-size: 11px; letter-spacing: .18em; }
	.rlx-hero .rlx-kicker::before { width: 16px; height: 16px; }
	.rlx-hero__title { margin: 0 0 18px; font-size: clamp(31px, 9.2vw, 38px); line-height: 1.04; }
	.rlx-hero__lead { display: none; }
	.rlx-hero__cta { justify-content: center; }
	.rlx-hero__cta .rlx-btn { flex: 0 1 auto; min-width: min(250px, 100%); min-height: 54px; }
	.rlx-hero__cta .rlx-btn--ghost { display: none; }
	.rlx-hero__controls { bottom: 14px; padding: 2px 8px; gap: 0; }
	.rlx-hero__arrow { display: none; }
	/* услугите – течаща лента под банера */
	.rlx-services { display: flex; width: auto; margin: 12px 0 0; padding: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 16px 34px -24px rgba(60, 40, 25, .45), 0 0 0 1px rgba(235, 226, 214, .9); }
	.rlx-services::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 22px, rgba(255, 255, 255, 0) calc(100% - 22px), #fff 100%); }
	.rlx-services ul, .rlx-services .rlx-services__dup { display: flex; flex: none; grid-template-columns: none; animation: rlx-marquee 34s linear infinite; }
	.rlx-services:hover ul, .rlx-services:active ul, .rlx-services:focus-within ul { animation-play-state: paused; }
	.rlx-services li { flex: none; flex-direction: row; align-items: center; gap: 11px; padding: 11px 22px 11px 11px; border-radius: 0; }
	.rlx-services li + li::before, .rlx-services__dup li:first-child::before { display: block; content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border: 0; border-radius: 50%; background: #e7c9a8; }
	.rlx-services__dup li:first-child { position: relative; }
	.rlx-services__ico { width: 40px; height: 40px; border-radius: 13px; }
	.rlx-services__ico svg { width: 21px; height: 21px; }
	.rlx-services__ico img { width: 30px; height: 30px; }
	.rlx-services strong { font-size: 13.5px; white-space: nowrap; }
	.rlx-services small { margin-top: 1px; font-size: 12px; line-height: 1.35; white-space: nowrap; }
}
@keyframes rlx-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
/* снимките „в обстановка“ на слайдове 2 и 3 бавно „дишат“ и на компютър (слайд 1 там е с точките върху мебелите – стои неподвижно) */
.rlx-hero__slide--design:not(:first-child) .rlx-hero__arch img { transform-origin: 50% 60%; animation: rlx-kenburns 16s ease-in-out infinite alternate; }
@keyframes rlx-marquee { to { transform: translateX(-100%); } }
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
	.rlx-services { overflow-x: auto; scrollbar-width: none; }
	.rlx-services::after { display: none; }
	.rlx-services .rlx-services__dup { display: none; }
}
.rlx-no-anim .rlx-hero__arch img, .rlx-no-anim .rlx-services ul { animation: none !important; }

/* 47 (31.10): „Нашите категории“ на телефон – подкатегориите в 2 колони като малки плочки с по-голяма снимка на бяло (всички остават,
   имената се пренасят на нов ред, не се режат); секцията става с ~40 % по-къса и по-„картинна“ */
@media (max-width: 680px) {
	.rlx-hcards .rlx-hcard .rlx-hcard__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 8px 2px; }
	.rlx-hcards .rlx-hcard__subs li { border: 0; min-width: 0; }
	.rlx-hcards .rlx-hcard__subs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.rlx-hcards .rlx-hcard__subs a { height: 100%; min-height: 54px; gap: 7px; padding: 5px 6px 5px 5px; border-radius: 15px; background: #faf6f0; font-size: clamp(11px, 3.15vw, 12.5px); line-height: 1.25; }
	.rlx-hcards .rlx-hcard__subs a > span { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; }
	.rlx-hcards .rlx-hcard__subs .rlx-cthumb { width: 42px; height: 42px; padding: 3px; border-radius: 12px; background: #fff; mix-blend-mode: normal; box-shadow: 0 6px 12px -8px rgba(60, 40, 25, .35); }
	.rlx-hcards .rlx-hcard__subs .rlx-cthumb.is-photo { padding: 0; }
	.rlx-hcards .rlx-hcard__subs .rlx-cthumb.is-icon { background: var(--t-tint, var(--rlx-blush)); }
	.rlx-section:has(.rlx-hcards) { contain-intrinsic-size: auto 1900px; }
}

/* 48 (31.10): статията „За нас“ на телефон – сгъната до първите ~11 реда с меко избледняване и бутон „Прочети още“
   (отметка + етикет, без скриптове); на таблет и компютър целият текст както досега */
.rlx-story__cb, .rlx-story__more { display: none; }
@media (max-width: 680px) {
	.rlx-story__cb { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
	.rlx-story__cb:not(:checked) + .rlx-content { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
	.rlx-story__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--rlx-bordo); font: 700 14px/1 var(--rlx-sans); box-shadow: 0 12px 24px -16px rgba(80, 30, 40, .5), 0 0 0 1px var(--rlx-line); cursor: pointer; }
	.rlx-story__more .rlx-ico { transform: rotate(90deg); transition: transform .3s var(--rlx-ease); }
	.rlx-story__cb:checked ~ .rlx-story__more .rlx-ico { transform: rotate(-90deg); }
	.rlx-story__more-close, .rlx-story__cb:checked ~ .rlx-story__more .rlx-story__more-open { display: none; }
	.rlx-story__cb:checked ~ .rlx-story__more .rlx-story__more-close { display: inline; }
	.rlx-story__cb:focus-visible ~ .rlx-story__more { outline: 2px solid var(--rlx-bordo); outline-offset: 3px; }
}
/* 31.10, собственикът: „в мобилната версия изтегли всичко за басейн, -20% и сауни за дома под категориите“ – на телефон картите с предложенията
   (rlx-promos) идват след „Нашите категории“; на таблет и компютър редът не се променя. Всички секции на началната използват само margin-top. */
@media (max-width: 680px) {
	.rlx-home { display: flex; flex-direction: column; }
	.rlx-home > * { min-width: 0; }
	.rlx-home > .rlx-promos[data-reveal] { order: 1; margin-top: 40px; } /* [data-reveal]: critical.mjs пази правилото в критичния CSS, иначе картите скачат при зареждане */
	.rlx-home > .rlx-promos[data-reveal] + .rlx-section ~ * { order: 2; }
}