/* Alika Home — стили сайта по дизайну «Cozey-стиль» (холст NRoTidKKUUG3u8uhaB9xeY). */
/* Шрифты Lora и Onest (SIL Open Font License) — с нашего сервера, не с Google Fonts: иначе IP посетителя уходит за границу. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/lora-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/lora-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/lora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --page: #F8F6F2; --cream: #F4F1EC; --cream2: #ECE6DE; --ink: #1F1C19; --muted: #5E5852; --faint: #8B847C;
  --line: #E2DCD3; --line2: #D6CFC5; --frame: #EFE9E0; --acc: #B0435A; --ok: #1E7A47; --dark: #1A1714;
  --serif: 'Lora', Georgia, serif; --sans: 'Onest', system-ui, sans-serif; --gutter: 54px; --hdr: 72px; --radius: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.1; text-wrap: balance; }
/* абзацы без висячих слов в последней строке; название бренда с моделью не разрывается */
.hero-text p, .hero-cat-text p, .banner-text p, .feat-t, .cat-tile-t, .series-name, .step-note, .about-text p, .page-head p { text-wrap: pretty; }
.feat-t, .cat-tile-t, .series-name, .promo-text { text-wrap: balance; }
.nobr { white-space: nowrap; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--muted); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* кнопки и чипсы */
.btn { height: 44px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.btn-acc { background: var(--acc); color: #fff; }
.btn-acc:hover { background: #9c3a50; }
.btn-white { background: #fff; color: var(--ink); }
.btn-line { background: transparent; border: 1px solid var(--line2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-xl { height: 56px; min-height: 56px; font-size: 17px; width: 100%; line-height: 1; }
.btn .dot { opacity: .7; }
.link-btn { color: var(--acc); font-weight: 600; text-decoration: underline; }
.link-more { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chip { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--frame); border: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; position: relative; flex: none; }
.chip-line { background: transparent; border: 1px solid var(--line2); }
.chip.on, .chip[aria-pressed="true"] { border-color: var(--ink); }
.chip.chip-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-n { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.chip-wide { justify-content: space-between; height: 52px; width: 100%; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; background: #fff; flex: none; }
.pill-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.22); border-radius: 999px; padding: 6px 12px; }
.pill-free { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: #fff; border-radius: 999px; padding: 3px 8px; }

/* шапка */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--page); color: var(--ink); transition: background .2s, color .2s; }
.hdr-bar { height: var(--hdr); max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.hdr-logo { display: flex; align-items: center; flex: none; margin-right: 8px; }
.hdr-logo img { height: 32px; width: auto; }
.hdr-logo .logo-white { display: none; }
.hdr-nav { display: flex; gap: 4px; flex: 1 1 auto; }
.hdr-nav a { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 17px; font-weight: 500; }
.hdr-nav a.on { background: var(--acc); color: #fff; }
.hdr-search { position: relative; flex: none; margin: 0; }
.hdr-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; }
.hdr-search input { width: 190px; height: 40px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; padding: 0 16px 0 38px; font-size: 14px; color: inherit; }
.hdr-search input::placeholder { color: inherit; opacity: .75; }
.hdr-salons { height: 40px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line2); display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; flex: none; }
.hdr-icons { display: flex; gap: 2px; flex: none; }
/* переключатель языка, как у Cozey: пилюля 40 px с глобусом и названием, меню карточками; на телефоне — нижняя шторка */
.lang { position: relative; flex: none; }
.lang-btn { height: 40px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: inherit; }
.hdr-hero:not(.solid) .lang-btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.14); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 270px; background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(31,28,25,.45); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lang-menu[hidden], .lang-bg[hidden] { display: none; }
.lang-menu-head { display: flex; flex: none; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; padding: 2px 8px 2px 10px; }
.lang-menu-head .round-btn { display: none; }
.lang-opt { display: flex; flex: none; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.lang-opt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line2); flex: none; }
.lang-opt.on { background: var(--cream); border-color: var(--cream); }
.lang-opt.on::before { background: var(--acc); }
.lang-opt:hover { border-color: var(--ink); }
.lang-bg { display: none; }
.footer .lang-btn { height: 34px; font-size: 14px; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }
.footer .lang-menu { top: auto; bottom: calc(100% + 10px); }
.drawer-lang { padding: 0 16px 20px; }
.drawer-lang .lang-btn { width: 100%; justify-content: center; }
/* в боковой шторке кнопка языка стоит внизу, поэтому меню раскрывается вверх, во всю ширину шторки */
.drawer-lang .lang-menu { top: auto; bottom: calc(100% + 10px); left: 0; right: 0; width: auto; max-height: calc(100vh - 120px); overflow-y: auto; }
.hdr-icons a, .hdr-icons button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.hdr-fav-n { position: absolute; right: 4px; top: 4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.hdr-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: -8px; }
/* шапка над фото: прозрачная, белая */
.hdr-hero:not(.solid) { background: transparent; color: #fff; }
.hdr-hero:not(.solid) .logo-dark { display: none; }
.hdr-hero:not(.solid) .logo-white { display: block; }
.hdr-hero:not(.solid) .hdr-search input, .hdr-hero:not(.solid) .hdr-salons { border-color: rgba(255,255,255,.75); }
body.has-hero main { margin-top: calc(-1 * var(--hdr)); }

/* панели меню */
.panels { position: absolute; left: 0; right: 0; top: var(--hdr); }
.panel { background: var(--page); border-radius: 0 0 28px 28px; box-shadow: 0 50px 70px -30px rgba(31,28,25,.5); padding: 22px 0 44px; color: var(--ink); }
.panel-in { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 40px; }
.panel[hidden] { display: none; }
.panel-left { width: 250px; flex: none; display: flex; flex-direction: column; }
.panel-left .gap { height: 18px; }
.panel .big { font-family: var(--serif); font-size: 28px; line-height: 1.2; display: block; padding: 10px 0; }
.panel .small { font-size: 15px; line-height: 1.4; display: block; padding: 6px 0; color: var(--muted); }
.panel-mid { width: 330px; flex: none; display: flex; flex-direction: column; }
.panel-sub { font-family: var(--serif); font-size: 26px; line-height: 1.2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.panel-sub.on { color: var(--acc); }
.panel-right { flex: 1 1 auto; min-width: 0; }
.panel-promo { display: flex; justify-content: flex-end; }
.promo { position: relative; display: block; width: 320px; height: 240px; flex: none; border-radius: 16px; overflow: hidden; color: #fff; background: var(--cream2); }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,28,25,.45), rgba(31,28,25,0) 60%); }
.promo-text { position: absolute; left: 16px; right: 16px; top: 14px; font-family: var(--serif); font-size: 22px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.promo-cap { position: absolute; left: 16px; bottom: 14px; font-size: 13px; font-weight: 600; }
.tiles-md { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tiles-md[hidden] { display: none; }
.tile-md { display: block; min-width: 0; }
.tile-md-img { display: block; position: relative; border-radius: 14px; overflow: hidden; background: var(--cream); aspect-ratio: 4 / 3; }
.tile-md-img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.tile-cover .tile-md-img img { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.tile-md-cap { display: block; font-size: 15px; font-weight: 500; padding: 8px 2px 0; }

/* мобильное меню */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(31,28,25,.55); }
.drawer-box { position: absolute; top: 0; right: 0; bottom: 0; width: min(330px, 88vw); background: var(--page); display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(0,0,0,.5); overflow-y: auto; }
.drawer-top { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; }
.drawer-search { position: relative; flex: 1 1 auto; margin: 0; }
.drawer-search > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; }
.drawer-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; padding: 0 14px 0 38px; font-size: 14px; }
.drawer-nav { padding: 10px 24px 0; display: flex; flex-direction: column; }
.drawer-nav > a, .drawer-nav summary { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 30px; line-height: 1.2; padding: 10px 0; }
.drawer-nav details > div { display: flex; flex-direction: column; padding: 0 0 10px 12px; }
.drawer-nav details > div a { font-size: 17px; padding: 7px 0; }
.drawer-nav details > div b { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 10px 0 2px; }
.drawer-bottom { margin-top: auto; padding: 16px 24px 22px; display: flex; align-items: center; justify-content: space-between; }
.drawer-bottom img { height: 24px; width: auto; }
.drawer-bottom div { display: flex; gap: 2px; }
.drawer-bottom div a, .drawer-bottom div button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* первые экраны */
.hero { position: relative; overflow: hidden; background: var(--cream2); color: #fff; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-picture { position: absolute; inset: 0; display: block; }
.hero-picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-home { height: 744px; overflow: clip; }
.home-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .75s ease, visibility .75s; }
.home-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.home-slide .hero-picture img { object-position: 50% 50%; }
.home-dots { position: absolute; z-index: 3; right: var(--gutter); bottom: 34px; display: flex; align-items: center; }
.home-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.home-dot span { width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: transparent; box-sizing: border-box; }
.home-dot.is-active span { background: #fff; }
.home-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .home-slide { transition: none; } }
.hero-series { height: 560px; }
.hero-stands { height: 520px; margin-top: 64px; }
.hero-cat { height: 292px; }
.hero-cat > img { object-position: 65% 50%; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,28,25,.55), rgba(31,28,25,0) 45%); }
.hero-grad-left { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,28,25,.55), rgba(31,28,25,0) 65%); }
.hero-top { position: absolute; left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(180deg, rgba(31,28,25,.55), rgba(31,28,25,0)); }
.hero-text { position: absolute; left: var(--gutter); right: auto; max-width: calc(100% - 2 * var(--gutter)); bottom: 48px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero-text h1 { font-size: 60px; line-height: 1.05; max-width: 760px; }
.hero-text h2 { font-size: 54px; line-height: 1.05; }
.hero-text p { font-size: 18px; max-width: 640px; }
.hero-text-left { gap: 14px; max-width: 720px; right: auto; bottom: 56px; }
.hero-cat-text { position: absolute; left: var(--gutter); right: auto; max-width: calc(100% - 2 * var(--gutter)); top: 88px; display: flex; flex-direction: column; gap: 6px; }
.hero-cat-text h1 { font-size: 64px; line-height: 1.2; }
.hero-cat-text p { font-size: 15px; max-width: 720px; }
/* тень в углу под текстом поверх фото: размер зависит от текстового блока, край мягкий */
.hero-text, .hero-cat-text, .banner-text, .feat-t, .switcher-name, .series-text, .modal-side-text { z-index: 1; }
.hero-text::before, .hero-cat-text::before, .banner-text::before, .feat-t::before, .switcher-name::before, .series-text::before, .modal-side-text::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -36px -90px -220px -220px; border-radius: 60px; background: rgba(31,28,25,.48); filter: blur(40px); }
.hero-cat-text::before { inset: -220px -90px -36px -220px; }
.feat-t::before, .switcher-name::before, .series-text::before, .modal-side-text::before { inset: -22px -50px -120px -120px; border-radius: 36px; filter: blur(26px); }
.series-generated .hero-text::before { display: none; }
.crumbs { font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs-page { padding-top: 16px; padding-bottom: 4px; color: var(--muted); }
.page-head { padding-top: 40px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 1440px; }
.page-head h1 { font-size: 56px; }
.page-head p { font-size: 17px; color: var(--muted); max-width: 720px; }

/* плитки категорий */
.cat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 8px; padding-bottom: 32px; }
.cat-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 0; padding-bottom: 8px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 22px; color: var(--acc); padding: 28px 16px 24px; }
.cat-tile-img { display: block; width: 100%; height: 240px; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-tile-t { font-family: var(--serif); font-size: 34px; line-height: 1.1; text-align: center; }
.cat-tile-sm { gap: 14px; padding: 24px 12px 20px; }
.cat-tile-sm .cat-tile-img { height: 150px; }
.cat-tile-sm .cat-tile-t { font-size: 24px; }
.cat-tile-n { font-size: 13px; color: var(--muted); margin-top: -8px; }

/* переключатели «по комнатам», «салоны» */
.switcher { padding-top: 72px; padding-bottom: 0; display: flex; gap: 48px; align-items: center; }
.switcher-salons { padding-top: 80px; padding-bottom: 72px; align-items: flex-start; }
.switcher-list { width: 380px; flex: none; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.switcher-h { font-size: 26px; font-weight: 500; color: var(--muted); }
.switcher-links { display: flex; flex-direction: column; gap: 6px; }
.switcher-links a { font-family: var(--serif); font-size: 44px; line-height: 1.15; display: inline-flex; align-items: center; gap: 18px; color: var(--faint); }
.switcher-links a svg { opacity: 0; }
.switcher-links a.on { color: var(--ink); }
.switcher-links a.on svg { opacity: 1; }
.switcher-pic { position: relative; flex: 1 1 auto; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; color: #fff; background: var(--cream2); }
.switcher-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.switcher-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,28,25,.55), rgba(31,28,25,0) 45%); }
.switcher-name { position: absolute; left: 28px; bottom: 24px; font-family: var(--serif); font-size: 34px; }
.switcher-name-up { bottom: 54px; }
.switcher-addr { position: absolute; left: 28px; bottom: 24px; font-size: 16px; font-weight: 600; }

/* ряды карточек */
.row { padding-top: 56px; display: flex; flex-direction: column; gap: 22px; }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.row-head h2 { font-size: 36px; }
.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* карточка товара */
.pc { position: relative; min-width: 0; background: #fff; border-radius: var(--radius); border: 1px solid var(--frame); display: flex; flex-direction: column; transition: box-shadow .18s, border-radius .18s; }
.pc-link { display: flex; flex-direction: column; min-width: 0; }
.pc-img { display: block; position: relative; background: var(--cream); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pc-cover .pc-img img { mix-blend-mode: normal; }
.pc-studio .pc-img { aspect-ratio: 16 / 9; background: #F4F1EC; }
.pc-studio .pc-img img { object-fit: contain; mix-blend-mode: normal; }
.pc-nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); }
.pc-tag, .pc-badge { position: absolute; top: 12px; font-size: 12px; font-weight: 600; background: #fff; border-radius: 999px; padding: 5px 10px; }
.pc-tag { left: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pc-tag-ok { color: var(--ok); }
.pc-badge { right: 12px; }
.pc-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.pc-tags span { font-size: 12px; background: #fff; color: var(--muted); border-radius: 999px; padding: 4px 9px; }
.pc-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.pc-name { font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.pc-desc { font-size: 14px; color: var(--muted); }
.pc-price { font-size: 15px; font-weight: 600; margin-top: 2px; }
.pc-colors { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pc-colors i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); display: inline-block; }
.pc-colors span { font-size: 13px; color: var(--muted); }
.pc-heart { position: absolute; right: 12px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; }
.pc-heart.on { color: var(--acc); }
.pc-more { position: absolute; left: -1px; right: -1px; top: 100%; background: #fff; border: 1px solid var(--frame); border-top: 0; padding: 0 16px 16px; border-radius: 0 0 var(--radius) var(--radius); opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s; pointer-events: none; box-shadow: 0 14px 36px rgba(31,28,25,.16); clip-path: inset(0 -60px -60px -60px); }
.pc-more .btn { width: 100%; height: 50px; border-radius: var(--radius); }
@media (hover: hover) {
  .pc:hover { z-index: 5; box-shadow: 0 14px 36px rgba(31,28,25,.16); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
  .pc:hover .pc-more { opacity: 1; transform: none; pointer-events: auto; }
}
/* размеры карточек по числу колонок */
.grid-3 .pc { --radius: 22px; }
.grid-3 .pc-body { padding: 18px 20px 20px; }
.grid-3 .pc-name { font-size: 24px; }
.grid-3 .pc-price { font-size: 17px; }
.grid-3 .pc-colors i { width: 20px; height: 20px; }
.grid-3 .pc-more { padding: 2px 20px 20px; }
.grid-3 .pc-more .btn { height: 60px; font-size: 16px; }
.grid-6 .pc { --radius: 14px; }
.grid-6 .pc-body { padding: 10px 12px 12px; }
.grid-6 .pc-name { font-size: 15px; }
.grid-6 .pc-price { font-size: 14px; }
.grid-6 .pc-desc, .grid-6 .pc-tags, .grid-6 .pc-badge { display: none; }
.grid-6 .pc-colors i { width: 14px; height: 14px; }
.grid-6 .pc-more { padding: 0 12px 12px; }
.grid-6 .pc-more .btn { height: 40px; font-size: 14px; }
.pc.hide { display: none; }

/* категория: пилюли, строка фильтров */
.subs { position: relative; z-index: 1; margin-top: -30px; padding-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; }
.sub-pill { height: 60px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--frame); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.15; text-align: left; min-width: 0; }
.sub-pill.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sub-pill-img { width: 56px; height: 42px; flex: none; display: block; overflow: hidden; border-radius: 999px; background: #fff; }
.sub-pill-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sub-cover .sub-pill-img img { object-fit: cover; mix-blend-mode: normal; }
.fbar { position: sticky; top: var(--hdr); z-index: 20; background: var(--page); padding: 14px 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; display: flex; flex-direction: column; gap: 12px; }
.fbar.stuck { border-color: var(--frame); }
.fbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; width: 100%; }
.fbar-sep { width: 1px; height: 28px; background: var(--line2); margin: 0 6px; flex: none; }
.fbar-count { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
.fbar-cols { display: inline-flex; flex: none; gap: 2px; background: var(--frame); border-radius: 999px; padding: 3px; }
.fbar-cols button { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.fbar-cols button.on { background: var(--ink); color: var(--cream); }
.fbar-applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbar-applied[hidden] { display: none; }
.cat-grid { padding-top: 14px; overflow-anchor: none; } /* без якорения прокрутки: при подгрузке скрипт переставляет карточки, и браузер иначе откатывает страницу вверх (15.10.2026) */
.series-filtered { overflow-anchor: none; }
/* рекламные модули в сетке (как у Cozey): плитка на две колонки с фото или видео, подписью и кнопкой-пилюлей */
.promo-tile { grid-column: span 2; position: relative; min-width: 0; min-height: 280px; border-radius: var(--radius); overflow: hidden; background: var(--dark); color: #fff; }
.promo-tile-1 { grid-column: span 1; }
.promo-tile img, .promo-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-tile-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,28,25,0) 40%, rgba(31,28,25,.7)); }
.promo-tile-text { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.promo-tile-text b { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; text-wrap: balance; text-shadow: 0 1px 8px rgba(31,28,25,.5); }
.promo-tile-1 .promo-tile-text b { font-size: 18px; }
.btn-ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.8); color: #fff; backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.26); }
.promo-fill { min-height: 240px; }
.promo-fill[style*="span 1"] .promo-tile-text b { font-size: 18px; }
.grid-6 .promo-tile-text { left: 12px; right: 12px; bottom: 12px; gap: 8px; }
.grid-6 .promo-tile-text b { font-size: 16px; }
.cat-empty { padding: 40px 0; text-align: center; color: var(--muted); }
.cat-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 16px; font-size: 14px; color: var(--muted); }
.cat-more .btn { height: 50px; padding: 0 30px; }
/* панель фильтров */
.fdrawer { position: fixed; inset: 0; z-index: 70; }
.fdrawer[hidden] { display: none; }
.fdrawer-bg { position: absolute; inset: 0; background: rgba(31,28,25,.45); }
.fdrawer-box { position: absolute; left: 0; top: 0; bottom: 0; width: min(520px, 92vw); background: var(--page); display: flex; flex-direction: column; box-shadow: 30px 0 60px -30px rgba(0,0,0,.5); }
.fdrawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px 12px; }
.fdrawer-head h2 { font-size: 30px; }
.fdrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 28px; }
.fsec { border-bottom: 1px solid var(--line); }
.fsec summary { display: flex; align-items: center; gap: 10px; padding: 16px 0; font-size: 18px; font-weight: 500; }
.fsec summary svg { margin-left: auto; transition: transform .18s; }
.fsec[open] summary svg { transform: rotate(180deg); }
.fsec summary .chip-n { position: static; }
.fopts { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 22px; }
.opt { height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.opt.on { background: var(--cream); border-color: var(--ink); }
.opt-color i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line2); }
.fdrawer-foot { display: flex; gap: 10px; padding: 14px 28px 24px; border-top: 1px solid var(--line); background: var(--page); }
.fdrawer-foot .btn { flex: 1 1 auto; height: 52px; }
/* боковая панель карточки «Доставка / Сборка / Гарантия»: справа, как Shipping/Returns у Cozey */
.idrawer { position: fixed; inset: 0; z-index: 70; }
.idrawer[hidden] { display: none; }
.idrawer-bg { position: absolute; inset: 0; background: rgba(31,28,25,.45); }
.idrawer-box { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 92vw); background: var(--page); box-shadow: -30px 0 60px -30px rgba(0,0,0,.5); overflow-y: auto; }
.idrawer-pane[hidden] { display: none; }
.idrawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 28px 12px; }
.idrawer-head h2 { font-size: 30px; }
.idrawer-body { padding: 4px 28px 32px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.55; }
.idrawer-body p b { font-weight: 600; }
.idrawer-body .btn { align-self: flex-start; margin-top: 8px; }

/* страница товара */
/* сетка карточки как у Cozey (замер 15.10.2026 при окне 1471): поля 74/62 (у Cozey справа 62 до края страницы без полосы прокрутки), миниатюры 64 с шагом 10, зазор 24, фото 822×584 (радиус 24), зазор 27, панель 383,5 */
.prod { max-width: 1600px; padding: 24px 62px 0 74px; display: flex; gap: 24px; align-items: flex-start; } /* поля считаются от краёв окна, как у Cozey, а не от контейнера 1440 */
.prod-thumbs { width: 64px; flex: none; display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--hdr) + 16px); }
.thumb { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; background: var(--cream); flex: none; }
.thumb.on { border: 2px solid var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gal-item { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 822 / 584; background: var(--cream); scroll-margin-top: calc(var(--hdr) + 16px); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; }
/* пакшоты на белом показываем целиком, без обрезки под пропорцию рамки (замечание 16.10.2026: у Bibendum резались края) */
.gal-pack { background: #fff; }
.gal-pack img { object-fit: contain; padding: 4%; }
.thumb-pack { background: #fff; }
.thumb-pack img { object-fit: contain; padding: 3px; }
.gal-dots { display: none; }
.gal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--faint); }
.prod-panel { width: 391.5px; flex: none; position: sticky; top: calc(var(--hdr) + 12px); max-height: calc(100vh - var(--hdr) - 12px); overflow-y: auto; scrollbar-width: none; padding: 4px 4px 24px; margin: -4px -4px 0 -1px; display: flex; flex-direction: column; gap: 14px; } /* видимая ширина 383,5: поля 4 px под обводку фокуса вынесены отрицательными полями, зазор до фото 24 − 1 + 4 = 27 */
.prod-panel::-webkit-scrollbar { display: none; }
.prod-panel > * { flex: none; }
.prod-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.prod-title h1 { font-size: 30px; line-height: 1.1; min-width: 0; }
.prod-title h1 .nobr { white-space: normal; } /* длинное название (Saloni Panamera Comfort) переносится, а не выталкивает цену за край */
.prod-title h1.h1-long { font-size: 26px; } /* названия длиннее 34 знаков мельче, чтобы уложиться в две строки */
.prod-price { font-size: 17px; font-weight: 600; white-space: nowrap; }
.prod-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.prod-stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.prod-stock i.ok, .ok { color: var(--ok); }
.prod-stock i.ok { background: var(--ok); }
.prod-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 66px; gap: 8px; }
.prod-feat { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 8px 12px; height: 66px; overflow: hidden; min-width: 0; }
.prod-feat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* нечётная последняя плашка — во всю ширину, пустой ячейки нет */
.prod-feat > span:first-child { color: var(--acc); flex: none; display: flex; }
.prod-feat > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prod-feat b { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-feat i { font-style: normal; font-size: 13px; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.step summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; }
.step summary > svg { transition: transform .18s; flex: none; }
.step[open] summary > svg { transform: rotate(180deg); }
.step-img { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--cream); flex: none; display: flex; align-items: center; justify-content: center; color: var(--acc); }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.step-img i { width: 28px; height: 28px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--line2); }
.step-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.step-text b { font-weight: 600; font-size: 16px; }
.step-text span { font-size: 13px; color: var(--muted); }
.step-body { padding: 0 12px 14px; font-size: 14px; }
.step-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.radios { display: flex; flex-direction: column; gap: 6px; }
.radio-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.radio-row:has(input:checked) { background: var(--cream); border-color: var(--ink); }
.radio-row input { accent-color: var(--acc); width: 18px; height: 18px; margin: 0; flex: none; }
.radio-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.radio-text b { font-weight: 600; font-size: 14px; }
.radio-text span { font-size: 12px; color: var(--muted); }
.radio-stand { font-size: 11px; font-weight: 600; color: var(--ok); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.radio-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 64px; }
.swatch input { position: absolute; opacity: 0; }
.swatch i { width: 52px; height: 52px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--line2); border: 3px solid #fff; }
.swatch:has(input:checked) i { box-shadow: 0 0 0 2px var(--ink); }
.swatch span { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
/* комплектация: предметы серии с галочкой и количеством */
.addons { display: flex; flex-direction: column; gap: 6px; }
.addon { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.addon.on { background: var(--cream); border-color: var(--ink); }
.addon-main { display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; cursor: pointer; position: relative; }
.addon-main input { position: absolute; opacity: 0; pointer-events: none; }
.addon-box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line2); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .15s, border-color .15s; }
.addon.on .addon-box { background: var(--ink); border-color: var(--ink); color: #fff; }
.addon-main:has(input:focus-visible) .addon-box { outline: 2px solid var(--acc); outline-offset: 2px; }
.addon-more { display: flex; align-items: center; gap: 12px; padding: 0 12px 10px 8px; }
.addon-sum { font-size: 14px; font-weight: 600; white-space: nowrap; }
.addon-link { margin-left: auto; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.addon-link:hover { color: var(--ink); }
.qty { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line2); border-radius: 999px; background: #fff; flex: none; }
.qty button { width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.qty button:hover { background: var(--cream); }
.qty [data-qn] { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; }
.btn-list { width: 100%; height: 48px; }
.btn-list.on { color: var(--acc); border-color: var(--acc); }
.btn-list.on svg { fill: currentColor; }
.mini-img { width: 64px; height: 52px; flex: none; border-radius: 8px; overflow: hidden; background: var(--cream); display: block; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.mini-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mini-text b { font-weight: 600; font-size: 13px; line-height: 1.25; }
.mini-text span { font-size: 12px; color: var(--muted); }
.prod-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 6px 2px 0; white-space: nowrap; }
.prod-line > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prod-line b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.prod-checks { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 0 2px; white-space: nowrap; }
.prod-checks span { display: inline-flex; align-items: center; gap: 4px; }
.prod-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.about { padding-top: 64px; display: flex; gap: 48px; align-items: flex-start; }
.about-text { flex: 1 1 560px; display: flex; flex-direction: column; gap: 16px; }
.about-text h2 { font-size: 36px; }
.about-text p { font-size: 17px; line-height: 1.6; max-width: 62ch; }
.about-specs { flex: 1 1 420px; min-width: 0; }
.about-specs dl { margin: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); font-size: 15px; }
.about-specs dt { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.about-specs dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-group { border-top: 1px solid var(--line); }
.spec-group summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-family: var(--serif); font-size: 22px; }
.spec-group[open] summary svg { transform: rotate(180deg); }
.photos { padding-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.series-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; color: #fff; background: var(--cream2); }
.series-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* подпись в верхнем левом углу: там обычно стена, а мебель стоит внизу кадра */
.series-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,28,25,.6), rgba(31,28,25,0) 50%); }
.series-text { position: absolute; left: 20px; right: auto; max-width: calc(100% - 40px); top: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.series-text::before { inset: -120px -50px -22px -120px; }
.series-name { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.series-info { position: absolute; left: 20px; right: 20px; bottom: 16px; font-size: 14px; z-index: 1; text-shadow: 0 1px 6px rgba(31,28,25,.55); }
/* страница серий: живая сетка, каждая первая и шестая плитка из десяти крупная, 2×2 */
.series-mosaic { grid-auto-flow: dense; }
.series-mosaic > :nth-child(10n+1), .series-mosaic > :nth-child(10n+6) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; align-self: stretch; }
.series-mosaic > :nth-child(10n+6) { grid-column: 3 / span 2; }
.series-mosaic > :nth-child(10n+1) .series-text, .series-mosaic > :nth-child(10n+6) .series-text { left: 26px; top: 24px; }
.series-mosaic > :nth-child(10n+1) .series-name, .series-mosaic > :nth-child(10n+6) .series-name { font-size: 40px; }
.series-mosaic > :nth-child(10n+1) .series-info, .series-mosaic > :nth-child(10n+6) .series-info { left: 26px; bottom: 22px; font-size: 15px; }
/* страница серий с фильтрами: крупные плитки назначает скрипт по видимым (классы big / big-r), скрытые не считаются */
.series-tile.hide { display: none; }
.series-filtered > :nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.series-filtered > :nth-child(n) .series-text { left: 20px; top: 18px; }
.series-filtered > :nth-child(n) .series-name { font-size: 28px; }
.series-filtered > :nth-child(n) .series-info { left: 20px; bottom: 16px; font-size: 14px; }
.series-filtered > .big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; align-self: stretch; }
.series-filtered > .big-r { grid-column: -3 / -1; } /* две последние колонки: и при четырёх, и при трёх */
.series-filtered > .big .series-text { left: 26px; top: 24px; }
.series-filtered > .big .series-name { font-size: 40px; }
.series-filtered > .big .series-info { left: 26px; bottom: 22px; font-size: 15px; }

/* баннер, три карточки, подвал */
.banner-wrap { padding-top: 64px; padding-bottom: 72px; }
.banner { position: relative; border-radius: 20px; overflow: hidden; height: 360px; background: var(--cream2); color: #fff; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,28,25,.6), rgba(31,28,25,0) 70%); }
.banner-text { position: absolute; left: 40px; bottom: 40px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 560px; }
.banner-text h2 { font-size: 40px; }
.banner-text p { font-size: 17px; }
.feats { padding-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; color: #fff; background: var(--cream2); }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,28,25,.55), rgba(31,28,25,0) 55%); }
.feat-t { position: absolute; left: 26px; right: 84px; bottom: 22px; font-family: var(--serif); font-size: 36px; line-height: 1.1; }
.feat-arrow { position: absolute; z-index: 2; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.footer { background: var(--dark); color: #CFC7BD; margin-top: 72px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: 15px; }
.footer-h { font-family: var(--serif); font-size: 24px; color: #fff; margin-bottom: 6px; }
.footer-bottom { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 14px; color: #9C948A; padding-bottom: 24px; }
.footer-bottom .lang-footer { margin-left: auto; }
.bottom-bar { display: none; }

/* салоны, формы */
.salons { display: flex; flex-direction: column; gap: 18px; }
.salon { display: flex; gap: 28px; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--frame); }
.salon-img { width: 420px; flex: none; aspect-ratio: 4 / 3; background: var(--cream2); }
.salon-img img { width: 100%; height: 100%; object-fit: cover; }
.salon-text { padding: 28px 28px 28px 0; display: flex; flex-direction: column; gap: 10px; }
.salon-text h2 { font-size: 34px; }
.salon-addr { font-size: 18px; font-weight: 500; }
.forms { padding-top: 56px; display: grid; grid-template-columns: minmax(0, 860px); gap: 18px; align-items: start; }
.form-card { background: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--frame); }
.form-card h2 { font-size: 30px; }
.bk-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.bk-salons { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-salons legend, .bk-label { font-size: 13px; color: var(--muted); padding: 0 0 8px; }
.bk-salon { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: #fff; }
.bk-salon:has(input:checked) { border-color: var(--ink); background: var(--cream); }
.bk-salon input { accent-color: var(--acc); width: 18px; height: 18px; margin: 0; flex: none; }
.bk-salon-img { width: 56px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--cream); flex: none; }
.bk-salon-img img { width: 100%; height: 100%; object-fit: cover; }
.bk-salon-text { display: flex; flex-direction: column; }
.bk-salon-text b { font-weight: 600; font-size: 14px; }
.bk-salon-text span { font-size: 12px; color: var(--muted); }
.bk-when { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips .chip { height: 40px; }
.chips .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk-fields label, .bk-fields-wide { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.bk-form input[type="text"], .bk-form input[type="tel"], .bk-form textarea { height: 46px; border-radius: 12px; border: 1px solid var(--line2); padding: 0 14px; font-size: 15px; color: var(--ink); background: #fff; }
.bk-form textarea { height: auto; padding: 10px 14px; resize: vertical; }
.bk-form input.invalid { border-color: var(--acc); }
.field-err { font-size: 12px; color: var(--acc); font-weight: 600; }
.bk-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bk-note { font-size: 12px; color: var(--muted); max-width: 320px; }
.form-done, .form-error { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--cream); font-size: 15px; }
.form-done[hidden], .form-error[hidden] { display: none; }
.form-error { color: var(--acc); }
.bk-form.sent .bk-salons, .bk-form.sent .bk-when, .bk-form.sent .bk-fields, .bk-form.sent .bk-fields-wide, .bk-form.sent .bk-actions { display: none; }
.info { padding-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.info h2 { font-size: 36px; }
.info-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.info h3 { font-size: 22px; margin-bottom: 8px; }
.search-big { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 6px 6px 18px; max-width: 720px; margin: 0; }
.search-big input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 17px; outline: none; }
/* живой поиск: список найденного под полем в шапке и в боковом меню */
.search-drop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: 400px; max-width: calc(100vw - 2 * var(--gutter)); background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(31,28,25,.45); padding: 8px; display: flex; flex-direction: column; text-align: left; }
.search-drop[hidden] { display: none; }
.sd-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; }
.sd-row:hover { background: var(--cream); }
.sd-row img, .sd-noimg { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--cream); flex: none; }
.sd-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sd-t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-p { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sd-all { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--acc); }
.sd-empty { padding: 14px; font-size: 14px; color: var(--muted); text-align: center; }
/* в узком боковом меню список шире поля, название в две строки, цена под подписью */
.drawer-search .search-drop { left: -16px; right: -64px; width: auto; max-width: none; }
.drawer-search .sd-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.drawer-search .sd-row img, .drawer-search .sd-noimg { grid-row: 1 / 3; }
.drawer-search .sd-t { white-space: normal; line-height: 1.25; }
.drawer-search .sd-p { grid-column: 2; }

/* окно записи */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(31,28,25,.55); backdrop-filter: blur(2px); }
.modal-box { position: relative; width: 880px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--page); border-radius: 24px; box-shadow: 0 60px 90px -40px rgba(0,0,0,.6); display: flex; overflow: hidden; }
.modal-side { width: 320px; flex: none; position: relative; background: var(--cream2); color: #fff; }
.modal-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-side-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,28,25,.7), rgba(31,28,25,0) 55%); }
.modal-side-text { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.modal-side-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.modal-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { font-size: 30px; }
.modal-head span { font-size: 14px; color: var(--muted); }
body.modal-open { overflow: hidden; }

/* Обложки коллекций 4:3: показываем весь комплект рядом с описанием. */
.series-generated { height: auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; color: var(--ink); background: var(--cream); }
.series-generated > img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; grid-column: 2; grid-row: 1; }
.series-generated .hero-grad, .series-generated .hero-top, .series-generated .hero-cat-text::before { display: none; }
.series-generated .hero-cat-text { position: static; width: auto; max-width: none; padding: 32px var(--gutter); grid-column: 1; grid-row: 1; }
.series-generated .hero-cat-text h1 { font-size: clamp(32px, 3.4vw, 52px); }
.series-generated .crumbs { color: var(--muted); }
@media (max-width: 760px) {
  .hero-cat.series-generated { height: auto; grid-template-columns: minmax(0, 1fr); }
  .series-generated > img { grid-column: 1; grid-row: 1; }
  .series-generated .hero-cat-text { grid-column: 1; grid-row: 2; padding: 24px 16px; }
}

/* ---------- ноутбук: пилюли подкатегорий в строку с прокруткой ---------- */
@media (max-width: 1399px) {
  .subs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .subs::-webkit-scrollbar { display: none; }
  .sub-pill { flex: none; max-width: 220px; }
}

/* ---------- планшет ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .hdr-bar { gap: 12px; }
  .hdr-search input { width: 140px; }
  .hdr-salons { display: none; }
  .hdr-nav a { padding: 0 10px; font-size: 16px; }
  .fbar-row { flex-wrap: wrap; }
  .fbar-count { margin-left: 0; }
  .promo { width: 260px; height: 200px; }
  .prod-panel { width: 368px; }
  .prod { padding-left: var(--gutter); padding-right: var(--gutter); }
  .prod-title h1 { font-size: 26px; }
  .hero-text h1 { font-size: 48px; }
  .hero-cat-text h1 { font-size: 56px; }
  .cat-tile-t { font-size: 26px; }
  .switcher-links a { font-size: 34px; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .series-mosaic > :nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-mosaic > :nth-child(n) .series-text { left: 20px; top: 18px; }
  .series-mosaic > :nth-child(n) .series-name { font-size: 28px; }
  .series-mosaic > :nth-child(n) .series-info { left: 20px; bottom: 16px; font-size: 14px; }
  .series-mosaic > :nth-child(6n+1), .series-mosaic > :nth-child(6n+4) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .series-mosaic > :nth-child(6n+4) { grid-column: 2 / span 2; }
  .series-mosaic > :nth-child(6n+1) .series-name, .series-mosaic > :nth-child(6n+4) .series-name { font-size: 36px; }
  .series-filtered > :nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-filtered > :nth-child(n) .series-name { font-size: 28px; }
  .series-filtered > .big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .series-filtered > .big-r { grid-column: -3 / -1; }
  .series-filtered > .big .series-name { font-size: 36px; }
  .grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .salon-img { width: 320px; }
}

/* ---------- планшет: бургер и шторка вместо меню, поле поиска остаётся ---------- */
@media (max-width: 1080px) {
  .hdr-burger { display: inline-flex; }
  .hdr-nav, .hdr-salons, .panels { display: none; }
  .hdr-search { margin-left: auto; }
  .hdr-search input { width: 200px; }
  .lang-hdr { display: none; }
}

@media (max-width: 980px) {
  .panel-in { gap: 24px; }
  .panel-left { width: 200px; }
  .panel-mid { width: 270px; }
  .panel-sub { font-size: 22px; }
  .promo { width: 220px; height: 170px; }
  .promo-text { font-size: 18px; }
  .tiles-md { gap: 10px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --hdr: 60px; }
  body { font-size: 15px; padding-bottom: 76px; }
  .hdr-bar { gap: 4px; padding: 0 8px 0 8px; }
  .hdr-burger { display: inline-flex; }
  .hdr-logo img { height: 26px; }
  .hdr-nav, .hdr-search, .hdr-salons, .panels { display: none; }
  .hdr-icons { margin-left: auto; }
  .hero-home { height: 580px; }
  .home-dots { bottom: 24px; }
  .hero-series, .hero-stands { height: 440px; }
  .hero-cat { height: 240px; }
  .hero-text { bottom: 24px; gap: 14px; }
  .hero-text::before, .hero-cat-text::before, .banner-text::before { filter: blur(28px); }
  .feat-t::before, .switcher-name::before { inset: -16px -36px -90px -90px; filter: blur(20px); }
  .series-text::before { inset: -60px -20px -8px -60px; filter: blur(14px); background: rgba(31,28,25,.36); }
  .hero-text h1 { font-size: 40px; }
  .hero-text h2 { font-size: 32px; }
  .hero-text p { font-size: 15px; }
  .hero-cat-text { top: 72px; gap: 4px; }
  .hero-cat-text h1 { font-size: 40px; }
  .hero-cat-text p { font-size: 14px; }
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; padding-bottom: 8px; }
  .cat-tiles-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tile { gap: 12px; padding: 18px 8px; }
  .cat-tile-img, .cat-tile-sm .cat-tile-img { height: 110px; }
  .cat-tile-t, .cat-tile-sm .cat-tile-t { font-size: 22px; }
  .switcher, .switcher-salons { flex-direction: column; gap: 16px; padding-top: 28px; padding-bottom: 0; align-items: stretch; }
  .switcher-list { width: auto; gap: 14px; }
  .switcher-h { font-size: 20px; }
  .switcher-links a { font-size: 30px; gap: 12px; }
  .switcher-pic { aspect-ratio: 4 / 3; }
  .switcher-name { font-size: 24px; left: 16px; bottom: 14px; }
  .switcher-name-up { bottom: 40px; }
  .switcher-addr { left: 16px; bottom: 14px; font-size: 13px; }
  .row { padding-top: 28px; gap: 12px; }
  .row-head h2 { font-size: 24px; }
  .grid, .grid-4, .grid-3, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .series-mosaic > :nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-mosaic > :nth-child(n) .series-name { font-size: 22px; }
  .series-mosaic > :nth-child(5n+1) { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-mosaic > :nth-child(5n+1) .series-name { font-size: 30px; }
  .series-filtered > :nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-filtered > :nth-child(n) .series-name { font-size: 22px; }
  .series-filtered > .big { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .series-filtered > .big .series-name { font-size: 30px; }
  .series-text { left: 14px; top: 14px; }
  .series-info { left: 14px; right: 14px; bottom: 12px; font-size: 12px; }
  .series-stock { display: none; }
  /* нижняя шторка языков только у переключателя в подвале; в боковом меню языки раскрываются внутри него */
  .footer .lang-bg { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(31,28,25,.55); }
  .footer .lang-menu { position: fixed; inset: auto 0 0 0; top: auto; bottom: 0; width: auto; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 22px 22px 0 0; padding: 16px 16px 24px; gap: 10px; box-shadow: none; }
  .footer .lang-menu-head { font-size: 16px; padding: 0 0 6px 4px; }
  .footer .lang-menu-head .round-btn { display: inline-flex; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
  .pc { --radius: 14px; }
  .promo-tile { grid-column: 1 / -1; min-height: 200px; --radius: 14px; }
  .promo-tile-1 { grid-column: span 1; min-height: 0; }
  .promo-tile-text { left: 14px; right: 14px; bottom: 14px; }
  .promo-tile-text b { font-size: 20px; }
  .pc-body, .grid-3 .pc-body, .grid-6 .pc-body { padding: 10px 12px 48px; }
  .pc-name { font-size: 15px; }
  .pc-price { font-size: 13px; }
  .pc-desc { font-size: 12px; }
  .pc-tags, .pc-badge { display: none; }
  .pc-heart { width: 30px; height: 30px; right: 8px; bottom: 10px; }
  .pc-colors i { width: 14px; height: 14px; }
  .pc-more { display: none; }
  .subs { display: flex; gap: 10px; overflow-x: auto; margin-top: -25px; padding-bottom: 10px; scrollbar-width: none; }
  .subs::-webkit-scrollbar { display: none; }
  .sub-pill { flex: none; height: 50px; font-size: 13px; padding: 0 12px 0 4px; }
  .sub-pill-img { width: 48px; height: 36px; }
  .fbar { padding: 10px 0; }
  .fbar-row { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; padding-top: 10px; margin-top: -10px; }
  .fbar-row::-webkit-scrollbar { display: none; }
  .fbar-sep, .fbar-count, .fbar-cols { display: none; }
  .fbar-row .chip { height: 38px; }
  .feats { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; }
  .feat { aspect-ratio: 16 / 9; }
  .feat-t { font-size: 26px; left: 18px; right: 74px; bottom: 16px; }
  .hero-stands { margin-top: 28px; }
  .banner-wrap { padding-top: 32px; padding-bottom: 32px; }
  .banner { height: 320px; }
  .banner-text { left: 18px; right: 18px; bottom: 20px; }
  .banner-text h2 { font-size: 26px; }
  .banner-text p { font-size: 14px; }
  .page-head { padding-top: 20px; }
  .page-head h1 { font-size: 36px; }
  .prod { flex-direction: column; align-items: stretch; gap: 14px; } /* stretch: иначе галерея растягивается по ширине всех фото и страница уезжает вбок */
  .prod-thumbs { display: none; }
  .prod-gallery { flex-direction: row; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .prod-gallery::-webkit-scrollbar { display: none; }
  .gal-item { flex: none; width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; scroll-snap-align: start; } /* фото во всю ширину контейнера, вровень с остальными блоками */
  .gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
  .gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); transition: background .15s, transform .15s; }
  .gal-dots i.on { background: var(--ink); transform: scale(1.25); }
  .prod-panel { width: auto; position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .prod-title { flex-direction: column; gap: 4px; align-items: flex-start; }
  .prod-title h1 { font-size: 24px; }
  .prod-checks { justify-content: flex-start; gap: 6px 14px; }
  .prod-chips { grid-template-columns: 1fr; }
  .btn-xl { position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 30; width: auto; box-shadow: 0 10px 30px -10px rgba(31,28,25,.6); }
  body.has-cta .bottom-bar { display: none; }
  /* в колонку размер из компьютерной вёрстки (flex-basis 560/420px) стал бы высотой, а ширина — по содержимому */
  .about { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 32px; }
  .about-text, .about-specs { flex: none; width: 100%; }
  .about-text h2 { font-size: 26px; }
  .about-text p { font-size: 15px; }
  .photos { grid-template-columns: 1fr; padding-top: 28px; gap: 10px; }
  .footer { margin-top: 40px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 32px; padding-bottom: 24px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-h { font-size: 20px; }
  .bottom-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px 14px; background: linear-gradient(0deg, var(--page) 70%, rgba(248,246,242,0)); }
  .bottom-bar .btn { flex: 1 1 0; height: 48px; }
  .bottom-bar .btn-white { border: 1px solid var(--line2); }
  .salon { flex-direction: column; gap: 0; }
  .salon-img { width: auto; }
  .salon-text { padding: 16px; }
  .salon-text h2 { font-size: 26px; }
  .forms { grid-template-columns: 1fr; padding-top: 28px; }
  .form-card { padding: 18px; }
  .form-card h2 { font-size: 24px; }
  .bk-fields { grid-template-columns: 1fr; }
  .info-cols { grid-template-columns: 1fr; }
  .info h2 { font-size: 26px; }
  .modal { padding: 0; align-items: flex-end; }
  /* dvh — видимая высота экрана: со 100vh мобильный браузер прячет верх окна (и крестик) под свою панель */
  .modal-box { border-radius: 24px 24px 0 0; max-height: 92vh; max-height: 92dvh; }
  .modal-side { display: none; }
  .modal-main { padding: 20px 16px 28px; }
  .modal-head h2 { font-size: 24px; }
  .series-name { font-size: 22px; }
  .fdrawer-box { width: 100%; }
  .idrawer-box { width: 100%; }
  .idrawer-head { padding: 18px 16px 8px; }
  .idrawer-head h2 { font-size: 24px; }
  .idrawer-body { padding: 0 16px 28px; }
}

/* мой список */
.list-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px 48px; align-items: start; padding-bottom: 40px; }
.list-shared { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; background: var(--cream); border-radius: 14px; padding: 10px 10px 10px 18px; font-size: 15px; }
.list-lines { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; }
.list-lines:empty { display: none; }
.lline { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.lline:first-child { border-top: 0; }
.lline-img { width: 112px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--cream); flex: none; display: block; }
.lline-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.lline-studio img { object-fit: contain; }
.lline-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lline-name { font-weight: 600; font-size: 16px; line-height: 1.3; }
.lline-name:hover { color: var(--acc); }
.lline-opt { font-size: 13px; color: var(--muted); }
.lline-unit { font-size: 14px; }
.lline-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.lline-sum { font-size: 15px; font-weight: 600; }
.list-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; color: var(--muted); }
.list-empty b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); }
.list-empty .btn { margin-top: 8px; }
.list-sum { position: sticky; top: calc(var(--hdr) + 16px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.list-sum h2 { font-size: 28px; }
.list-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--muted); padding-top: 6px; }
.list-sum-row b { font-size: 22px; color: var(--ink); white-space: nowrap; }
.list-sum-note { font-size: 13px; color: var(--muted); margin-bottom: 6px; text-wrap: pretty; }
.list-sum .btn { width: 100%; }

/* плашка «Добавлено в ваш список» */
.toast { position: fixed; right: 24px; top: calc(var(--hdr) + 12px); z-index: 80; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); background: var(--dark); color: #fff; border-radius: 16px; padding: 12px 10px 12px 14px; box-shadow: 0 24px 60px -24px rgba(31,28,25,.6); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: none; pointer-events: auto; }
.toast-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--ok); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.toast-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.toast-text b { font-size: 15px; font-weight: 600; }
.toast-text a { color: #F3CBD4; text-decoration: underline; }
.toast-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: .75; flex: none; }
.toast-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

@media (max-width: 760px) {
  .addon-more { flex-wrap: wrap; }
  .list-page { grid-template-columns: 1fr; gap: 16px; }
  .list-sum { position: static; padding: 18px; }
  .list-lines { padding: 0 14px; }
  .lline { gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  .lline-img { width: 84px; height: 68px; }
  .lline-text { flex-basis: calc(100% - 96px); }
  .lline-side { flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%; padding-left: 96px; }
  .toast { left: 16px; right: 16px; top: 12px; }
}

/* ---------- 3D и примерка в комнате ---------- */
.ar-pill { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font: 600 14px/1 var(--sans); box-shadow: 0 10px 26px -12px rgba(0,0,0,.4); cursor: pointer; }
.ar-pill:hover { background: #fff; }
.ar-box { width: 1080px; height: min(640px, calc(100vh - 32px)); }
.ar-view { flex: 1 1 auto; min-width: 0; position: relative; background: var(--cream); }
.ar-view model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.ar-view model-viewer::part(default-ar-button) { display: none; }
.ar-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.ar-load[hidden] { display: none; }
.ar-hint { position: absolute; left: 50%; bottom: 16px; z-index: 1; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--muted); font-size: 13px; white-space: nowrap; pointer-events: none; }
.ar-side { width: 340px; flex: none; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.ar-what { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.ar-what b { color: var(--ink); font-size: 16px; font-weight: 600; }
.ar-phone[hidden], .ar-desk[hidden], .ar-none[hidden] { display: none; }
.ar-none { margin: 0; font-size: 14px; color: var(--muted); }
.ar-phone .btn { width: 100%; justify-content: center; gap: 10px; }
.ar-phone p, .ar-desk p { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.ar-qr { width: 200px; aspect-ratio: 1; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); text-align: center; }
.ar-qr svg { width: 100%; height: 100%; display: block; }
.ar-note { margin: auto 0 0; font-size: 13px; color: var(--faint); }
@media (max-width: 760px) {
  .ar-pill { left: 12px; bottom: 12px; height: 40px; font-size: 13px; }
  .modal-box.ar-box { flex-direction: column; width: 100%; height: 92vh; max-height: 92vh; height: 92dvh; max-height: 92dvh; }
  .ar-view { min-height: 0; }
  .ar-side { width: auto; flex: none; padding: 16px 16px 24px; gap: 12px; }
  .ar-phone .btn-xl { position: static; width: 100%; box-shadow: none; }  /* не прилипает к низу экрана, как кнопка записи */
  .ar-side .round-btn { position: absolute; top: 12px; right: 12px; z-index: 3; background: #fff; box-shadow: 0 2px 10px rgba(31,28,25,.14); }  /* «закрыть» над моделью, а не под ней */
  .ar-note { margin: 0; }
}

/* ---------- ткани и образцы (/tkani/): квадраты образцов, страница коллекции ---------- */
.fab-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fab-tile.hide { display: none; }
.fab-img { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(31,28,25,.06); }
.fab-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
@media (hover: hover) { .fab-tile:hover .fab-img img { transform: scale(1.05); } }
.fab-name { font-size: 15px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-sub { font-size: 13px; color: var(--muted); margin-top: -3px; }
.fab-note { padding-top: 48px; }
.fab-note-box { background: var(--cream); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fab-note-box h2 { font-size: 28px; }
.fab-note-box p { color: var(--muted); max-width: 72ch; }
.fab-note-box .btn { margin-top: 6px; }
.step-link { margin-top: 12px; }
.fab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding-top: 28px; align-items: start; }
.fab-view { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--hdr) + 16px); }
.fab-big { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.fab-big img { width: 100%; height: 100%; object-fit: cover; }
.fab-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fab-photo[hidden] { display: none; }
.fab-photo img { width: 100%; border-radius: var(--radius); background: var(--cream); }
.fab-photo figcaption { font-size: 14px; color: var(--muted); }
.fab-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.fab-side h1 { font-size: 48px; line-height: 1.05; }
.fab-meta { color: var(--muted); font-size: 16px; margin-top: -8px; }
.fab-cur { font-size: 15px; }
.fab-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; width: 100%; }
.fab-sw { aspect-ratio: 1; border-radius: 12px; overflow: hidden; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.fab-sw img { width: 100%; height: 100%; object-fit: cover; }
.fab-sw.on { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink); }
.fab-hint { font-size: 14px; color: var(--muted); max-width: 52ch; margin-top: -4px; }
.fab-props { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 24px; width: 100%; font-size: 15px; }
.fab-props dt { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.fab-props dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 980px) {
  .fab { gap: 28px; }
  .fab-side h1 { font-size: 36px; }
}
@media (max-width: 760px) {
  .fab { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 12px; }
  .fab-view { position: static; }
  .fab-big { aspect-ratio: 4 / 3; }
  .fab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .fab-img { border-radius: 10px; }
  .fab-name { font-size: 13px; }
  .fab-sub { font-size: 12px; }
  .fab-note-box { padding: 22px; }
  .fab-note-box h2 { font-size: 22px; }
  .fab-colors { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
  .fab-book { width: 100%; }
}

/* ---------- доставка, сборка и гарантия (/dostavka/, вариант A с холста FhMsEKNdtDN9oTEZCxhBSt) ---------- */
.dlv-hero { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 24px; }
.dlv-hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 16px 0; }
.dlv-hero-text h1 { font-size: 64px; line-height: 1.05; }
.dlv-hero-text p { font-size: 19px; color: var(--muted); max-width: 520px; text-wrap: pretty; }
.dlv-hero-img { flex: 1 1 520px; min-width: 0; }
.dlv-hero-img img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius); background: var(--cream2); }
.dlv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 40px; }
.dlv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s; }
.dlv-card:hover { border-color: var(--ink); }
.dlv-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; }
.dlv-card-h { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.dlv-card-t { color: var(--muted); text-wrap: pretty; }
.dlv-card .link-more { margin-top: auto; padding-top: 6px; }
.dlv-sec { padding-top: 96px; scroll-margin-top: calc(var(--hdr) + 8px); }
.dlv-sec h2 { font-size: 46px; margin-top: 10px; }
.dlv-sec h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin-bottom: 14px; }
.dlv-split { display: flex; flex-wrap: wrap; gap: 48px; }
.dlv-split-mid { align-items: center; }
.dlv-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.dlv-split-mid .dlv-main { gap: 20px; }
.dlv-side { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dlv-photo { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius); background: var(--cream2); }
.dlv-photo-tall { flex: 1 1 420px; min-width: 0; width: auto; height: 420px; }
.dlv-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dlv-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.dlv-box h3 { font-size: 24px; margin-bottom: 12px; }
.dlv-box p { text-wrap: pretty; }
.dlv-box ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.dlv-box-cream { background: var(--cream); border-color: var(--cream); }
.dlv-tag { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dlv-tag-ok { color: var(--ok); }
.dlv-tag-acc { color: var(--acc); }
.dlv-big { font-family: var(--serif); font-size: 28px; line-height: 1.15; margin: 8px 0; }
.dlv-when p { color: var(--muted); }
.dlv-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.dlv-checks li, .dlv-note { display: flex; gap: 10px; align-items: flex-start; }
.dlv-checks svg, .dlv-note svg { flex: none; color: var(--ok); margin-top: 2px; }
.dlv-lead { font-size: 18px; color: var(--muted); text-wrap: pretty; }
.dlv-note { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.dlv-h3.dlv-h3 { font-size: 30px; margin: 48px 0 16px; }
.dlv-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dlv-price-h { font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.dlv-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dlv-row b { white-space: nowrap; }
.dlv-table .dlv-row:last-child { border-bottom: 1px solid var(--line); }
.dlv-foot { margin-top: 14px; font-size: 14px; color: var(--muted); }
.dlv-dark { background: var(--dark); color: var(--cream); border-radius: 24px; padding: 56px; display: flex; flex-wrap: wrap; gap: 48px; }
.dlv-dark-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.dlv-dark .kicker, .dlv-dark .dlv-lead { color: #D9CFC3; }
.dlv-dark h2 { margin-top: 0; }
.dlv-dark-box { background: #2A2622; border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dlv-dark-box h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; margin: 0; }
.dlv-dark-box p { color: #D9CFC3; }
.dlv-small { font-size: 14px; color: #BDB2A6; }
.dlv-war { flex: 1 1 520px; min-width: 0; }
.dlv-war-head { display: flex; justify-content: space-between; gap: 16px; padding: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #BDB2A6; }
.dlv-war-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 16px 0; border-top: 1px solid #3A342E; }
.dlv-war-row:last-child { border-bottom: 1px solid #3A342E; }
.dlv-war-row > div { display: flex; flex-direction: column; min-width: 0; }
.dlv-war-row b { font-size: 18px; }
.dlv-war-row > div > span { color: #BDB2A6; font-size: 14px; }
.dlv-war-term { font-family: var(--serif); font-size: 28px; line-height: 1.15; text-align: right; flex: none; max-width: 55%; }
.dlv-war-ask { color: #D9CFC3; text-align: right; flex: none; }
.dlv-salons-head { flex-wrap: wrap; }
.dlv-salons-head h2 { font-size: 40px; margin-top: 0; }
.dlv-salons-head p { font-size: 18px; margin-top: 10px; }
.dlv-salons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.dlv-salon { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dlv-salon img { width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 240px; object-fit: cover; background: var(--cream2); }
.dlv-salon-text { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.dlv-salon-text h3 { font-size: 24px; margin: 0; }
.dlv-salon-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-weight: 600; }
.dlv-salon-links a:hover { color: var(--acc); }
@media (max-width: 1180px) {
  .dlv-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .dlv-hero-text h1 { font-size: 48px; }
  .dlv-cards, .dlv-salons { grid-template-columns: minmax(0, 1fr); }
  .dlv-dark { padding: 36px; }
}
@media (max-width: 760px) {
  .dlv-hero { gap: 20px; padding-top: 16px; }
  .dlv-hero-text h1 { font-size: 38px; }
  .dlv-hero-text p { font-size: 17px; }
  .dlv-hero-text .btn { width: 100%; }
  .dlv-hero-img { flex-basis: 100%; }
  .dlv-hero-img img, .dlv-photo, .dlv-photo-tall { height: 260px; }
  .dlv-photo-tall { flex-basis: 100%; }
  .dlv-cards { padding-top: 24px; }
  .dlv-card { padding: 22px; }
  .dlv-sec { padding-top: 64px; }
  .dlv-sec h2, .dlv-salons-head h2 { font-size: 32px; }
  .dlv-split { gap: 28px; }
  .dlv-main, .dlv-side { flex-basis: 100%; }
  .dlv-when, .dlv-checks, .dlv-prices { grid-template-columns: minmax(0, 1fr); }
  .dlv-dark { padding: 24px 20px; border-radius: 20px; gap: 32px; }
  .dlv-dark-text, .dlv-war { flex-basis: 100%; }
  .dlv-war-term { font-size: 22px; }
  .dlv-salons-head .btn { width: 100%; }
}

/* ---------- согласие на обработку персональных данных в формах ---------- */
.bk-consent { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.bk-check { display: flex; flex-direction: column; gap: 2px; }
.bk-check label a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.bk-check label a:hover { color: var(--ink); }
.bk-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--ink); }
.bk-consent input[type="checkbox"] { accent-color: var(--acc); width: 20px; height: 20px; margin: 0; flex: none; }
.bk-consent-err { padding-left: 30px; font-size: 13px; color: var(--acc); font-weight: 600; }
.bk-check.invalid label { color: var(--acc); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-form.sent .bk-consent { display: none; }

/* ---------- политика и согласие (/politika/, /soglasie/) ---------- */
.legal-head h1 { font-size: 44px; max-width: 900px; }
.legal-head .link-btn { font-weight: 500; }
.page-head .legal-lang { font-size: 14px; }
.legal { max-width: 860px; padding-bottom: 40px; font-size: 16px; line-height: 1.65; }
.legal h2 { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: .02em; margin: 32px 0 12px; }
.legal p { margin: 0 0 12px; text-wrap: pretty; }
.legal ul { margin: 0 0 14px; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) {
  .legal-head h1 { font-size: 30px; }
  .legal { font-size: 15px; }
}

/* ---------- окно записи и форма на телефоне ---------- */
@media (max-width: 760px) {
  /* крестик закреплён в углу окна и не уезжает при прокрутке формы; подзаголовок — на всю ширину */
  #booking .modal-head { display: block; }
  #booking .modal-head .round-btn { position: absolute; top: 12px; right: 12px; z-index: 3; background: #fff; box-shadow: 0 2px 10px rgba(31,28,25,.14); }
  #booking .modal-head h2 { padding-right: 48px; }
  #booking .modal-head span { display: block; margin-top: 6px; font-size: 13px; }
  .bk-salon-img { display: none; }
  .bk-salon { padding: 10px 12px; }
  .bk-when .chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .bk-when .chip { height: 38px; padding: 0 4px; justify-content: center; font-size: 13px; }
  .bk-consent { font-size: 13px; gap: 8px; }
  .bk-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .bk-actions .btn { width: 100%; }
  .bk-note { max-width: none; text-align: center; }
}