*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FBF8FC;color:#241C2B;
 font:16px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:antialiased}
/* ⚠ height:auto обязателен. Атрибуты width/height на <img> — презентационные подсказки,
   и пока обе величины заданы, браузер игнорирует aspect-ratio: плитки обложки
   растягивались до 500 px вместо квадрата. */
img{max-width:100%;height:auto;display:block}
a{color:#634880;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Century Gothic","Futura","Avenir Next","Trebuchet MS",sans-serif;
 font-weight:400;line-height:1.2;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:34px}h2{font-size:26px}h3{font-size:19px}
p{margin:0 0 1em}
.tm-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.tm-narrow{max-width:760px}

/* ——— шапка ——— */
.tm-top{background:#fff;border-bottom:1px solid #E9E1EE}
.tm-top-in{display:flex;align-items:center;gap:24px;min-height:72px}
.tm-mark{font-family:"Century Gothic","Futura","Avenir Next","Trebuchet MS",sans-serif;
 font-size:23px;letter-spacing:.30em;color:#241C2B;white-space:nowrap;
 text-decoration:none;text-transform:uppercase}
.tm-mark:hover{text-decoration:none;color:#8767A8}
.tm-mark b{font-weight:400}
.tm-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:22px}
.tm-nav a{color:#241C2B;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.tm-nav a:hover{color:#8767A8;text-decoration:none}
.tm-nav a.on{border-bottom:2px solid #FA925B;padding-bottom:2px}
/* фирменная полоса баннера — сквозной мотив сайта */
.tm-stripe{height:5px;display:flex}
.tm-stripe i{display:block;height:100%}
.tm-stripe i:nth-child(1){background:#C6A2CE;flex:5}
.tm-stripe i:nth-child(2){background:#8767A8;flex:3}
.tm-stripe i:nth-child(3){background:#E6BEE0;flex:3}
.tm-stripe i:nth-child(4){background:#FA925B;flex:2}
.tm-stripe i:nth-child(5){background:#8DD6DC;flex:2}
.tm-stripe i:nth-child(6){background:#C6A2CE;flex:11}

/* ——— хлебные крошки ——— */
/* ⚠ padding здесь пишется в четыре стороны: элемент несёт и класс .tm-wrap,
   и сокращённая запись «16px 0 0» обнулила бы его боковые поля — крошки уезжали
   к левому краю экрана. То же и у .tm-top-in ниже. */
.tm-crumbs{font-size:13px;color:#6B6274;padding:16px 20px 0}
.tm-crumbs a{color:#6B6274}
.tm-crumbs em{font-style:normal;color:#241C2B}
.tm-crumbs span{padding:0 6px;opacity:.6}

/* ——— главная: обложка ——— */
.tm-hero{position:relative;overflow:hidden;padding:60px 0 96px;color:#fff;
 background:linear-gradient(134deg,#4E3868 0%,#634880 42%,#8767A8 78%,#C6A2CE 100%)}
.tm-hero h1{font-size:46px;margin:0 0 16px;color:#fff;max-width:13ch}
.tm-hero h1 em{font-style:normal;display:block;color:#E6BEE0}
.tm-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;
 position:relative;z-index:2}
.tm-eyebrow{font-size:12px;letter-spacing:.20em;text-transform:uppercase;margin:0 0 16px;
 color:#8DD6DC}
.tm-hero-sub{max-width:52ch;font-size:17px;line-height:1.7;color:#EEE6F3;margin:0 0 26px}
.tm-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:34px}
.tm-btn{display:inline-block;background:#fff;color:#634880;padding:15px 32px;
 font-size:14px;letter-spacing:.10em;text-transform:uppercase;font-weight:700}
.tm-btn:hover{background:#E6BEE0;color:#241C2B;text-decoration:none}
.tm-hero-alt{color:#fff;font-size:14px;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.5);
 padding-bottom:2px}
.tm-hero-alt:hover{color:#8DD6DC;border-color:#8DD6DC;text-decoration:none}
.tm-hero-counts{display:flex;flex-wrap:wrap;gap:34px;list-style:none;padding:22px 0 0;margin:0;
 border-top:1px solid rgba(255,255,255,.22)}
.tm-hero-counts b{display:block;font-family:"Century Gothic","Futura","Avenir Next",sans-serif;
 font-size:30px;font-weight:400;line-height:1.1}
.tm-hero-counts span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#DCCFE6}
/* карточка-«витрина» справа: белый прямоугольник под лёгким наклоном */
.tm-hero-card{background:#fff;color:#241C2B;padding:18px 18px 20px;transform:rotate(-2.2deg);
 box-shadow:0 26px 56px rgba(30,18,44,.34);position:relative;max-width:360px;
 margin-left:auto;width:100%}
.tm-hero-card .tm-shot{background:#F6F1F8}
.tm-hero-card h3{font-size:16px;margin:14px 0 4px;line-height:1.35}
.tm-hero-card .tm-card-f{margin-top:8px}
.tm-hero-tag{position:absolute;top:-13px;left:-13px;background:#FA925B;color:#fff;
 font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:6px 12px;
 transform:rotate(-3deg);z-index:2}
/* волна отделяет обложку от следующего блока — фирменный мотив вместо прямого реза */
.tm-hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:64px;z-index:1;display:block}

/* ——— бегущая строка фактов ——— */
.tm-ticker{background:#241C2B;color:#fff;overflow:hidden;padding:13px 0;white-space:nowrap}
.tm-ticker-in{display:inline-block;animation:tm-run 42s linear infinite}
.tm-ticker span{font-size:13px;letter-spacing:.07em;text-transform:uppercase;padding:0 26px}
.tm-ticker i{color:#FA925B;font-style:normal}
@keyframes tm-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tm-ticker-in{animation:none}}

/* ——— плитки разделов со снимком ——— */
.tm-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px;
 list-style:none;padding:0;margin:0}
/* Плитка — колонка флекса, чтобы «N pairs →» прижималось к низу: лиды разной длины,
   и без margin-top:auto ссылка гуляет по высоте от плитки к плитке. */
.tm-shelf-tile{background:#fff;border:1px solid #E9E1EE;padding:0 22px 22px;position:relative;
 display:flex;flex-direction:column}
.tm-shelf-tile>i{display:block;height:5px;margin:0 -22px 20px}
.tm-shelf-thumb{width:96px;height:96px;background:#F6F1F8;position:relative;overflow:hidden;
 margin-bottom:14px}
.tm-shelf-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}
.tm-shelf-tile h3{margin-bottom:6px}
.tm-shelf-tile p{font-size:14px;color:#6B6274;margin:0 0 14px}
.tm-shelf-tile a.tm-more{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
 margin-top:auto;align-self:flex-start}
.tm-shelf-thumb{flex:none}

/* ——— тёмный блок-спотлайт ——— */
.tm-spot{background:#241C2B;color:#fff;padding:56px 0}
.tm-spot-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.tm-spot-media{position:relative;background:#2F2639;aspect-ratio:1/1}
.tm-spot-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 padding:34px;z-index:1}
/* ⚠ Призрачная цифра живёт в текстовой колонке, а НЕ в рамке со снимком: снимок товара —
   непрозрачный белый квадрат на всю рамку, и цифра за ним видна только огрызком по краю. */
.tm-spot-body{position:relative}
.tm-spot-body>*{position:relative;z-index:1}
.tm-spot-num{position:absolute;right:0;top:-38px;font-family:"Century Gothic","Futura",sans-serif;
 font-size:150px;line-height:1;color:rgba(198,162,206,.13);z-index:0;user-select:none}
.tm-spot h2{color:#fff;font-size:30px}
.tm-spot-body .tm-eyebrow{color:#E6BEE0}
.tm-spot p{color:#D9D0E1}
.tm-spot-facts{display:flex;flex-wrap:wrap;gap:26px;list-style:none;padding:0;margin:0 0 24px}
.tm-spot-facts b{display:block;font-size:22px;font-family:"Century Gothic","Futura",sans-serif;
 font-weight:400}
.tm-spot-facts span{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#B7A8C4}
.tm-spot .tm-hero-alt{display:inline-block;margin-left:20px}

/* ——— линейка высот каблука ——— */
.tm-ruler{background:#fff;border:1px solid #E9E1EE;padding:28px 26px 22px}
.tm-ruler-rows{display:flex;align-items:flex-end;gap:16px;list-style:none;padding:0;margin:0;
 min-height:210px}
.tm-ruler-rows li{flex:1;text-align:center;display:flex;flex-direction:column;
 justify-content:flex-end;gap:8px}
.tm-ruler-bar{background:linear-gradient(180deg,#C6A2CE,#8767A8);display:block;
 border-radius:3px 3px 0 0}
.tm-ruler-n{font-family:"Century Gothic","Futura",sans-serif;font-size:20px}
.tm-ruler-lab{font-size:12px;color:#6B6274;letter-spacing:.05em}
.tm-ruler-note{font-size:13px;color:#6B6274;margin:18px 0 0;border-top:1px solid #E9E1EE;
 padding-top:14px}

/* ——— полоса чисел ——— */
.tm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;
 list-style:none;padding:0;margin:0}
.tm-stat{background:#fff;border:1px solid #E9E1EE;border-top:4px solid #8767A8;
 padding:22px 22px 20px}
.tm-stat b{display:block;font-family:"Century Gothic","Futura",sans-serif;font-size:38px;
 font-weight:400;line-height:1.05;color:#634880}
.tm-stat span{display:block;font-size:13px;color:#6B6274;margin-top:8px}
.tm-stat:nth-child(2){border-top-color:#E6BEE0}
.tm-stat:nth-child(3){border-top-color:#FA925B}
.tm-stat:nth-child(4){border-top-color:#8DD6DC}

/* ——— шесть поводов ——— */
.tm-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;
 list-style:none;padding:0;margin:0}
.tm-who-card{background:#fff;border:1px solid #E9E1EE;padding:22px 24px 20px}
.tm-who-ico{display:inline-block;font-family:"Century Gothic","Futura",sans-serif;font-size:13px;
 letter-spacing:.10em;color:#fff;background:#8767A8;padding:4px 9px;margin-bottom:12px}
.tm-who-card h3{font-size:17px;margin-bottom:6px}
.tm-who-card p{font-size:14px;color:#6B6274;margin:0}
.tm-who-card a{font-size:13px;letter-spacing:.05em;text-transform:uppercase}

/* ——— ценовые коридоры ——— */
.tm-band{background:#F6F1F8;border:1px solid #E9E1EE;padding:26px 28px}
.tm-band-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;
 list-style:none;padding:0;margin:0}
.tm-band-rows li{background:#fff;border:1px solid #E9E1EE;padding:16px 18px}
.tm-band-rows b{display:block;font-size:24px;font-family:"Century Gothic","Futura",sans-serif;
 font-weight:400;color:#634880}
.tm-band-rows em{font-style:normal;display:block;font-size:13px;color:#6B6274;margin-top:4px}
.tm-band-rows p{font-size:13px;margin:10px 0 0;color:#6B6274}

/* ——— шаги выбора ——— */
.tm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;
 list-style:none;padding:0;margin:0;counter-reset:tmstep}
/* Колонка флекса — та же причина, что у плиток разделов: тексты шагов разной длины,
   и без margin-top:auto у последнего абзаца ссылки стоят на разной высоте. */
.tm-step{background:#fff;border:1px solid #E9E1EE;padding:22px 24px 20px;position:relative;
 display:flex;flex-direction:column}
.tm-step p:last-child{margin-top:auto;margin-bottom:0}
.tm-step::before{counter-increment:tmstep;content:counter(tmstep);
 font-family:"Century Gothic","Futura",sans-serif;font-size:44px;color:#E9E1EE;
 position:absolute;right:16px;top:8px;line-height:1}
.tm-step h3{font-size:17px;margin-bottom:6px;position:relative;padding-right:34px}
.tm-step p{font-size:14px;color:#6B6274;margin:0 0 10px}

/* ——— миссия, баннер бренда, SEO, финальный призыв ——— */
.tm-mission{background:#fff;border-left:5px solid #FA925B;padding:28px 30px}
.tm-mission h2{font-size:22px}
.tm-mission p:last-child{margin-bottom:0}
/* ⚠ Снимка баннера тут нет намеренно (причина — комментарий в generate.js): полоса собрана
   из фирменного плама и НАШЕЙ цветной ленты во всю ширину. */
.tm-brand-band{background:linear-gradient(96deg,#634880,#8767A8)}
/* ⚠ Селектор именно по классу: внизу полосы лежит ещё один div — фирменная лента .tm-stripe,
   и правило по тэгу раздувало её паддингом до сотни пикселей плама. */
.tm-brand-in{display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;padding:42px 20px;color:#fff}
.tm-brand-band h2{color:#fff;margin-bottom:6px}
.tm-brand-band p{max-width:60ch;color:#EFE7F4;margin:0;font-size:15px}
.tm-seo{columns:2;column-gap:40px;font-size:15px;color:#3B3345}
.tm-seo p:first-child{margin-top:0}
.tm-cta-band{background:linear-gradient(96deg,#634880,#8767A8);color:#fff;
 padding:44px 0;text-align:center}
.tm-cta-band h2{color:#fff;font-size:28px}
.tm-cta-band p{max-width:58ch;margin:0 auto 22px;color:#EFE7F4}

/* ——— сетка карточек ——— */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:24px;
 list-style:none;padding:0;margin:0}
.tm-card{background:#fff;border:1px solid #E9E1EE;display:flex;flex-direction:column;
 transition:box-shadow .16s,transform .16s}
.tm-card:hover{box-shadow:0 10px 26px rgba(103,72,128,.14);transform:translateY(-2px)}
.tm-card>a{display:flex;flex-direction:column;height:100%;color:inherit}
.tm-card>a:hover{text-decoration:none}
/* ⚠ снимки бренда родом не крупнее 500 px и разных пропорций (от 0.46 до 1.27):
   только contain на квадратной подложке, cover режет каблуки и голенища. */
/* ⚠ Снимок вынут из потока (position:absolute) намеренно. Пока <img> с height:100%
   лежит в потоке блока с aspect-ratio, высота считается по кругу — блок берёт её
   у картинки, и квадрат превращается в пропорции снимка: в ряду стояли плитки
   530, 330, 285 и 340 px. Вне потока высоту задаёт только aspect-ratio. */
.tm-shot{background:#F6F1F8;aspect-ratio:1/1;display:block;position:relative;overflow:hidden}
.tm-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px}
.tm-card-b{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.tm-card-t{font-size:15px;line-height:1.35;margin:0 0 6px;color:#241C2B}
.tm-card-d{font-size:13px;color:#6B6274;margin:0 0 12px;flex:1}
.tm-card-f{display:flex;align-items:baseline;gap:10px}
.tm-price{font-size:18px;color:#634880;font-weight:700;letter-spacing:.01em}
.tm-stars{font-size:12px;color:#6B6274;margin-left:auto;white-space:nowrap}
.tm-stars b{color:#FA925B;font-weight:700}
.tm-flag{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;letter-spacing:.09em;
 text-transform:uppercase;padding:4px 9px;background:#8767A8;color:#fff}
.tm-flag.aqua{background:#2E7F86}

/* ——— разделы и полки ——— */
.tm-sec{padding:46px 0}
.tm-sec-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px}
.tm-sec-h h2{margin:0}
.tm-sec-h a{margin-left:auto;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
 white-space:nowrap}
.tm-lede{color:#6B6274;max-width:66ch;margin:-8px 0 26px}

/* ——— карточка товара ——— */
.tm-pdp{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:44px;padding:26px 0 10px;
 align-items:start}
.tm-pdp-shot{background:#F6F1F8;border:1px solid #E9E1EE;aspect-ratio:1/1;
 position:relative;overflow:hidden}
.tm-pdp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:26px}
.tm-pdp h1{font-size:31px;margin-bottom:10px}
.tm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:#6B6274;
 font-size:14px;margin-bottom:18px}
.tm-meta .tm-price{font-size:27px}
.tm-buy{display:inline-block;background:#634880;color:#fff;padding:15px 34px;
 font-size:15px;letter-spacing:.10em;text-transform:uppercase;border:0;cursor:pointer;
 font-family:inherit}
.tm-buy:hover{background:#241C2B;text-decoration:none;color:#fff}
.tm-note{font-size:13px;color:#6B6274;margin:10px 0 0}
.tm-intro{font-size:17px;line-height:1.7;margin:18px 0 0}
.tm-feat{margin:26px 0 0}
.tm-feat h3{font-size:17px;margin:0 0 4px}
.tm-feat div{margin-bottom:18px}
.tm-feat p{margin:0;color:#3B3345}
.tm-specs{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:14px}
.tm-specs th,.tm-specs td{text-align:left;padding:9px 12px;border-bottom:1px solid #E9E1EE;
 vertical-align:top}
.tm-specs th{width:44%;font-weight:400;color:#6B6274}
/* зебру красим чётные: таблица лежит на белой .tm-box, и подсветка белым не видна */
.tm-specs tr:nth-child(even){background:#FBF8FC}
.tm-box{background:#fff;border:1px solid #E9E1EE;padding:22px 24px;margin:34px 0 0}
.tm-box h2{font-size:20px}
.tm-box p:last-child{margin-bottom:0}
.tm-swatch{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:12px 0 0}
.tm-swatch a{display:block;border:1px solid #E9E1EE;background:#fff;padding:6px 12px 6px 8px;
 font-size:13px;color:#241C2B;display:flex;align-items:center;gap:8px}
.tm-swatch a:hover{border-color:#8767A8;text-decoration:none}
.tm-swatch a.on{border-color:#8767A8;background:#F6F1F8}
.tm-swatch em{width:34px;height:34px;background:#F6F1F8;display:block}
.tm-swatch em img{width:100%;height:100%;object-fit:contain}

/* ——— текстовые страницы ——— */
.tm-doc{background:#fff;border:1px solid #E9E1EE;padding:34px 38px;margin:26px 0 46px}
.tm-doc h2{font-size:22px;margin-top:32px}
.tm-doc h2:first-child{margin-top:0}
.tm-doc ul{padding-left:20px}
.tm-doc li{margin-bottom:8px}
.tm-doc dt{font-weight:700;margin-top:16px}
.tm-doc dd{margin:4px 0 0}
.tm-qa{border-top:1px solid #E9E1EE;padding-top:18px;margin-top:18px}
.tm-qa h3{margin-bottom:4px}

/* ——— подвал ——— */
.tm-foot{background:#fff;border-top:1px solid #E9E1EE;margin-top:auto;padding:38px 0 30px}
.tm-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.tm-foot h4{font-size:13px;letter-spacing:.10em;text-transform:uppercase;color:#6B6274;
 margin:0 0 12px;font-weight:400}
.tm-foot ul{list-style:none;padding:0;margin:0}
.tm-foot li{margin-bottom:8px}
.tm-foot a{font-size:14px;color:#241C2B}
.tm-foot a:hover{color:#8767A8}
.tm-foot-p{font-size:13px;color:#6B6274;max-width:38ch;margin:12px 0 0}
.tm-foot-b{border-top:1px solid #E9E1EE;margin-top:28px;padding-top:18px;font-size:13px;
 color:#6B6274;display:flex;flex-wrap:wrap;gap:14px}
.tm-foot-b span{margin-left:auto}

body{display:flex;flex-direction:column;min-height:100vh}
.tm-main{flex:1}

@media (max-width:900px){
 .tm-hero-grid{grid-template-columns:1fr;gap:34px}
 .tm-hero h1{font-size:36px;max-width:none}
 .tm-hero-card{margin:0 auto;transform:rotate(-1.4deg)}
 .tm-spot-grid{grid-template-columns:1fr;gap:30px}
 .tm-spot-media{max-width:400px}
 .tm-pdp{grid-template-columns:1fr;gap:26px}
 .tm-seo{columns:1}
 .tm-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
 h1{font-size:27px}.tm-hero h1{font-size:30px}
 .tm-hero{padding:42px 0 76px}
 .tm-top-in{flex-wrap:wrap;gap:10px;padding:14px 20px}
 .tm-nav{margin-left:0;width:100%;gap:16px}
 .tm-nav a{font-size:13px}
 .tm-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
 .tm-card-b{padding:11px 12px 13px}
 .tm-hero-counts{gap:22px}
 .tm-hero-counts b{font-size:25px}
 /* ⚠ бары линейки на узком экране становятся тонкими: снижаем высоту и убираем подписи-«ступени» */
 .tm-ruler{padding:20px 16px 16px}
 .tm-ruler-rows{gap:7px;min-height:150px}
 .tm-ruler-n{font-size:15px}
 .tm-ruler-lab{font-size:10px;letter-spacing:0}
 .tm-spot-num{font-size:96px}
 /* Заголовок полки на узком экране переносится в две строки, и «See all» цеплялся к нижней
    строке сбоку. Ниже 620 ссылка уходит под заголовок отдельной строкой. */
 .tm-sec-h{flex-direction:column;align-items:flex-start;gap:8px}
 .tm-sec-h a{margin-left:0}
 .tm-band{padding:18px 16px}
 .tm-mission{padding:22px 20px}
 .tm-doc{padding:22px 20px}
 .tm-foot-grid{grid-template-columns:1fr}
 .tm-buy{display:block;text-align:center}
}