/* button/input по умолчанию НЕ наследуют шрифт страницы (UA-стили браузера) — без этого сброса они молча падают на системный Arial/Times New Roman вместо Onest. Одна строка на весь сайт. */ .cs-wrap button,.cs-wrap input,.ctg-page button,.ctg-page input,.crx-page button,.crx-page input, .mcat button,.mcat input,.mbanner2 button,.mbanner2 input,.musp button,.musp input, .wb-card button,.wb-card input,#rec3509007801 button,.pdp-wrap button,.pdp-wrap input, .cs-drawer button,.cs-drawer input,.cs-prod button,.cs-prod input,.crx-modal button,.crx-modal input, .cs-search button,.cs-search input{font-family:inherit} /* Crabs store-блоки (наши данные) внутри Tilda-оболочки. Префикс cs- чтобы не конфликтовать с t-store. */ .cs-wrap{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box;font-family:'Onest',Arial,sans-serif;color:#242328} .cs-sec{padding-top:10px;padding-bottom:60px} .cs-h{font-family:'Tenor Sans','Onest',serif;color:#e96570;font-weight:400;text-align:center;font-size:var(--h2-size);letter-spacing:.5px;margin:0 0 8px} .cs-lead{text-align:center;color:#8b8790;font-size:var(--body-size);line-height:1.2;margin:0 0 26px} /* герой-баннер (rec3387908801) — по макету Figma. Родной коллаж/текст Tilda для этого блока прячем целиком одной строкой ниже и строим свою простую вёрстку (.chero*, собирается в store.js:wireHero()) — фиксированная композиция, адаптив обычным CSS без JS-расчётов позиций */ #rec3387908801 .t396__artboard, #rec3387908801 .t396__filter, #rec3387908801 .t396__carrier{ height:auto!important; min-height:0!important; } #rec3387908801 .t396__artboard>*:not(.chero){display:none!important} #rec3387908801 .t396__artboard{ position:relative; overflow:hidden; background:#fefbfa; padding:0; display:block; box-sizing:border-box; } /* .chero держит пропорцию рамки живой Tilda-страницы (1425x752 при 1440px вьюпорта) — так left/top% у краба и фото всегда считаются от одной и той же системы координат, а не от изменчивой auto-высоты по контенту. ВАЖНО: на живой странице у автора ВООБЩЕ ничего не ограничено шириной 1440 — и decor/фото, и текст/кнопка/отступы масштабируются линейно с шириной экрана без потолка (проверено вплоть до 2400px), поэтому здесь тоже везде % / vw без max-width. Такая раскладка (краб слева на уровне заголовка, фото бликом справа) у автора работает от 640px и шире — на мобильных (<640px) совсем другая раскладка (см. ниже) */ .chero{position:relative;width:100%;margin:0 auto;aspect-ratio:1425/752} /* волнистая розовая плашка доставки — во всю ширину артборда, фон — тот же SVG, что и на живой странице (1440x50, растягивается без тайлинга) */ /* два слоя: сама волна прижата к низу, а выше — сплошная заливка тем же цветом (нужна на мобильных, где плашку тянем вверх под меню). Заливку нельзя делать background-color на весь блок — она закрасила бы и вырезы самой волны */ .chero-wave{position:absolute;left:50%;top:0;transform:translateX(-50%);width:100vw;height:max(26px,3.47vw);background-image:url(/img/hero-wave.svg),linear-gradient(#fbe1e2,#fbe1e2);background-repeat:repeat-x,no-repeat;background-position:bottom center,top center;background-size:1690px max(26px,3.47vw),100% calc(100% - max(26px,3.47vw) + 1px);pointer-events:none} .chero-strip{position:absolute;left:50%;top:1.45%;transform:translateX(-50%);z-index:1;margin:0;color:#dc5c67;font-family:'Onest',Arial,sans-serif;font-size:max(13px,1.04vw);white-space:nowrap} /* краб — по правке пользователя (11.09.26): весь блок поднят к центру экрана, краб/сердечко подняты чуть меньше остального — специально ниже строгого выравнивания по тексту/кнопке */ .chero-crab{position:absolute;left:19.38%;top:36%;transform:translate(-50%,-50%) rotate(-45deg);width:8.48%;min-width:60px;aspect-ratio:120.8/110.2;pointer-events:none} .chero-crab img{display:block;width:100%;height:100%} /* фото — придвинуто ближе к тексту (было 68.09%), но не вплотную. По макету Figma картинка внутри рамки увеличена и обрезана (а не вписана целиком), плюс сильно скруглён левый верхний угол — за счёт этого цветок выглядит крупным. Значения (136.45%/148.23% со сдвигом) — из Figma */ .chero-photo{position:absolute;left:69%;top:24.10%;width:43.56%;min-width:280px;aspect-ratio:620.7/571.2;overflow:hidden;border-top-left-radius:58% 62%;pointer-events:none} .chero-photo img{position:absolute;width:136.45%;height:148.23%;left:-35.91%;top:-35.58%;max-width:none;object-fit:fill} /* колонка текста поднята к центру экрана по правке пользователя (было 31.73%, из-за чего блок сидел заметно ниже центра) */ .chero-body{position:absolute;left:50%;top:22.5%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:max-content;max-width:94vw} /* ракушка — повёрнута 30deg (мордой в правый верх); по правке пользователя приподнята относительно заголовка (сдвиг через position:relative, чтобы заголовок при этом остался на месте) */ .chero-shell{position:relative;top:-1vw;width:4.79vw;min-width:40px;aspect-ratio:68.3/60.7;margin-bottom:6px;transform:rotate(30deg)} .chero-shell img{display:block;width:100%;height:100%} /* шрифт растёт линейно с шириной экрана без потолка (проверено на живой странице вплоть до 2400px — там ВСЁ, включая текст, кнопку и отступы, масштабируется вместе с decor/фото, ничего не зафиксировано в px) */ .chero-title{margin:0;display:flex;flex-direction:column;gap:.15em;font-family:'Tenor Sans','Onest',serif;font-weight:400;font-size:max(24px,3.75vw);line-height:1.111;letter-spacing:normal} .chero-l1,.chero-l3{color:#e96570} .chero-l2{color:#abc4dc} .chero-sub{margin:1.88vw 0 0;color:#242328;font-family:'Onest',Arial,sans-serif;font-size:max(13px,1.04vw);line-height:1.667;letter-spacing:normal} .chero-btn{display:inline-flex;align-items:center;justify-content:center;height:max(40px,3.47vw);margin-top:1.74vw;padding:0 4.31vw;border-radius:999px;background:#ea6873;color:#fff;font-family:'Onest',sans-serif;font-weight:600;font-size:max(13px,1.04vw);line-height:1;letter-spacing:normal;text-transform:uppercase;text-decoration:none;transition:background-color .2s;white-space:nowrap} .chero-btn:hover{background:#f27f89} /* сердечко — повёрнуто -60deg (мордой в левый верх); по правке пользователя опущено чуть ниже кнопки (было 84.30%, привязано строго к тексту) */ /* сердечко левее и ниже кнопки: на планшетных ширинах у кнопки минимальный размер шрифта, из-за чего она шире в процентах и раньше накрывала сердечко */ .chero-heart{position:absolute;left:33%;top:89%;transform:translate(-50%,-50%) rotate(-60deg);width:3.61%;min-width:26px;aspect-ratio:51.5/48.2;pointer-events:none} .chero-heart img{display:block;width:100%;height:100%} @media(min-width:1000px){ /* на десктопе кнопка уже (шрифт не упирается в минимум), поэтому сердечко можно вернуть чуть правее и выше — ближе к кнопке, как в макете */ .chero-heart{left:36.6%;top:82%} } @media(max-width:999px){ /* мобильное/бургерное меню (Tilda) в этом диапазоне ширин фиксированное поверх контента (z-index 991, ~78px) — без отступа плашка доставки первого блока страницы прячется под ним */ #rec3387908801 .t396__artboard{padding-top:86px} /* розовую плашку тянем вверх до самого верха блока (под меню), чтобы между меню и плашкой не оставалось белой полосы; сама волна рисуется по нижнему краю, выше — заливка тем же цветом. Волна здесь чаще, чем на десктопе (шаг 950/54 ≈ 17.6px). Важно: высота слоя с волной задаёт ГЛУБИНУ выреза (верх слоя — сплошная заливка, сливающаяся с фоном), поэтому её нельзя сильно сплющивать — иначе волна перестаёт читаться. Нижний край плашки при этом остаётся на месте */ .chero-wave{top:-86px;height:calc(86px + 33px);background-size:950px 33px,100% calc(100% - 33px + 1px)} } /* у автора на живой странице раскладка от 640px и шире одна (десктопная, краб слева/фото справа), а при <640px — совсем другая: краб и сердечко становятся мелкими иконками по бокам подзаголовка/кнопки, а фото уходит вниз обычным блоком (не бликом за край). Переключаем на том же 640px, что и у автора */ @media(max-width:640px){ .chero{aspect-ratio:auto} .chero-strip{position:relative;left:auto;transform:none;display:block;text-align:center;white-space:normal;padding:0 16px;margin-bottom:36px} .chero-body{position:relative;left:auto;transform:none;margin:0 auto} .chero-title{font-size:clamp(22px,7vw,30px)} /* краб и сердечко теперь висят на уровне подзаголовка/кнопки по бокам — проценты посчитаны от .chero (auto-высота), не идеально на любых промежуточных пропорциях контента, но в реальной вёрстке достаточно точно, т.к. текст/отступы у нас фиксированы */ .chero-crab{width:14.79%;max-width:71px;left:16.35%;top:44.52%} .chero-heart{width:6.875%;max-width:33px;left:84.9%;top:36.07%} .chero-photo{position:relative;left:auto;top:auto;transform:none;width:50%;max-width:240px;margin:12px auto 0} .chero-sub{margin-top:18px} .chero-btn{margin-top:20px;padding:0 32px} } /* чипы категорий */ .cs-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px} .cs-chip{background:#fff;border:1px solid #f0dcdc;border-radius:20px;padding:9px 17px;font:inherit;font-size:14px;color:#242328;cursor:pointer;transition:.2s} .cs-chip:hover{border-color:#e96570;color:#e96570} .cs-chip.on{background:#e96570;border-color:#e96570;color:#fff} /* сетка — контейнер для унифицированных карточек .ctg-card (см. блок «каталог» ниже) */ .cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} /* «Выбирают чаще всего» на главной — вёрстка 1:1 по Figma (node 3292:1319), карточки те же .ctg-card, что и в каталоге (каталог не трогаем), тут только заголовок + своя раскладка сетки/цвета текста */ .cs-featured.mwrap-wide{margin-bottom:60px} .cs-featured-h{font-family:'Tenor Sans',serif;font-weight:400;text-align:center;color:#e96570;font-size:40px;letter-spacing:-0.2px;text-transform:uppercase;margin:0 0 28px} .cs-grid--featured{grid-template-columns:repeat(6,1fr);gap:15px} .cs-grid--featured .ctg-card-name{color:#1b2028;font-size:15px;font-weight:500} .cs-grid--featured .ctg-card-price{color:#1b2028;font-size:16px;font-weight:600} .cs-grid--featured .ctg-card-btn{color:#e96570;border-color:#e96570;font-size:13px;font-weight:600} .cs-grid--featured .ctg-card-btn:hover,.cs-grid--featured .ctg-card-btn.added{background:#e96570;color:#fff} .cs-btn{background:transparent;color:#e96570;border:1.5px solid #e96570;border-radius:20px;padding:9px 15px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap} .cs-btn:hover,.cs-btn.added{background:#e96570;color:#fff} .cs-empty{text-align:center;color:#8b8790;padding:40px 0} /* каталог — вёрстка по Figma (crabs-catalog-real-products), 5 карточек в ряд */ .ctg-page{margin:0 auto;padding:32px var(--edge-pad) 64px;box-sizing:border-box;font-family:'Onest',Arial,sans-serif} .ctg-head{text-align:center;margin:0 0 24px} .ctg-title{font-family:'Tenor Sans',serif;font-weight:400;color:#ec6072;font-size:var(--h1-size);letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase} .ctg-subtitle{font-size:var(--body-size);line-height:1.2;color:#555;margin:0} .ctg-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 32px} .ctg-chip{font:inherit;font-size:12.5px;color:#222;background:#fff;border:1px solid #bfc3c6;border-radius:20px;padding:9px 18px;cursor:pointer;white-space:nowrap;transition:.2s} .ctg-chip:hover{border-color:#ec6072;color:#ec6072} .ctg-chip.on{background:#ec6072;border-color:#ec6072;color:#fff} .ctg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px} .ctg-card{background:#fffdfc;border:1px solid #f4c3c9;border-radius:14px;padding:8px;display:flex;flex-direction:column;transition:box-shadow .25s,transform .2s;font-family:'Onest',Arial,sans-serif} .ctg-card:hover{box-shadow:0 12px 26px rgba(236,96,114,.14);transform:translateY(-2px)} .ctg-card-media{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid #f4c3c9;background:#f7f2ee} .ctg-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .ctg-card:hover .ctg-card-media img{transform:scale(1.05)} .ctg-card-noimg{position:absolute;inset:0;display:grid;place-items:center;color:#908a88;font-size:12px} .ctg-badge{position:absolute;top:8px;left:8px;background:#ec6072;color:#fff;font-size:10.5px;padding:3px 10px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;z-index:1} .ctg-card-body{padding:12px 8px 6px;display:flex;flex-direction:column;flex:1} .ctg-card-name{font-size:14px;color:#222;line-height:1.35;letter-spacing:.1px;margin:0 0 5px;min-height:2.6em;text-decoration:none} .ctg-card-name:hover{color:#ec6072} .ctg-card-size{font-size:11.5px;color:#555;margin:0 0 12px} .ctg-card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px} .ctg-card-price-wrap{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .ctg-card-price{font-weight:700;font-size:17px;color:#222} .ctg-card-oldprice{font-weight:400;font-size:13px;color:#a9a19d;text-decoration:line-through} .ctg-card-btn{font:inherit;font-size:10.5px;letter-spacing:.2px;text-transform:uppercase;color:#ef6677;background:#fff;border:1px solid #ef6677;border-radius:20px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:.2s} .ctg-card-btn:hover,.ctg-card-btn.added{background:#ef6677;color:#fff} .ctg-card--soon{opacity:.85} .ctg-card-media--soon{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#faf1ee,#faf1ee 12px,#f6eae5 12px,#f6eae5 24px);color:#908a88;font-size:12px} .ctg-card-btn:disabled{border-color:#e2e2e2;color:#aaa;cursor:default} .ctg-card-btn:disabled:hover{background:#fff;color:#aaa} .ctg-empty{grid-column:1/-1;text-align:center;color:#908a88;padding:40px 0} @media(max-width:1220px){.ctg-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:980px){.ctg-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.ctg-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.ctg-grid{gap:12px}} @media(max-width:480px){.ctg-card-bottom{flex-direction:column;align-items:stretch;gap:10px}.ctg-card-btn{width:100%;text-align:center;padding:10px 14px}} /* баннер «Морская коллекция» — раньше был родной Zero Block Тильды, который не тянется на всю ширину монитора (только собственный tn-artboard-скейл до ~1440px); пересобрано на mwrap-wide, как и остальные блоки, чтобы отступы совпадали и он растягивался так же */ .mbanner-sea{padding:0 0 44px;font-family:'Onest',Arial,sans-serif} .mbanner-sea-card{display:grid;grid-template-columns:1fr 2fr;align-items:stretch;background:#f0dcda;border-radius:24px;overflow:hidden} .mbanner-sea-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--pad-md) 0 var(--pad-md) var(--pad-lg)} .mbanner-sea-text h2{font-family:'Tenor Sans',serif;font-weight:400;font-size:36px;color:#e96570;letter-spacing:.5px;margin:0 0 10px;text-transform:uppercase;line-height:1.15} .mbanner-sea-text p{font-size:15px;line-height:1.2;color:#242328;margin:0 0 22px;max-width:26ch} .mbanner-sea-text .mbtn{text-transform:uppercase;letter-spacing:.5px} .mbanner-sea-media img{display:block;width:100%;height:100%;object-fit:cover} @media(max-width:760px){.mbanner-sea-card{grid-template-columns:1fr}.mbanner-sea-text{padding:28px}.mbanner-sea-media{order:-1}} /* баннер «Собери свой набор» — пересобрано на mwrap-wide (50/20/10px) */ .mbanner2{padding:16px 0 16px;font-family:'Onest',Arial,sans-serif} .mbanner2-card{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:var(--gap-md);background:#fbddde;border-radius:24px;padding:var(--pad-md) var(--pad-lg);overflow:hidden} .mbanner2-text h2{font-family:'Tenor Sans',serif;font-weight:400;font-size:32px;color:#e96570;letter-spacing:.5px;margin:0 0 10px;text-transform:uppercase} .mbanner2-text h2 span{font-size:40px} .mbanner2-text p{font-size:15px;line-height:1.2;color:#514c4a;margin:0 0 22px} .mbanner2-text .mbtn{background:transparent;color:#e96570;border-color:#e96570;text-transform:uppercase;letter-spacing:.5px} .mbanner2-text .mbtn:hover{background:#e96570;color:#fff} .mbanner2-media{display:flex;align-items:center;justify-content:center} .mbanner2-media img{width:100%;height:auto;object-fit:contain} @media(max-width:760px){.mbanner2-card{grid-template-columns:1fr}.mbanner2-media{order:-1}} /* полоса преимуществ (лёгкие и прочные / упаковка / доставка / возврат) — пересобрано на mwrap-wide (50/20/10px) */ .musp{padding:var(--pad-md) 0;font-family:'Onest',Arial,sans-serif} .musp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:65px} .musp-item{display:flex;align-items:center;gap:36px} .musp-icon{width:54px;height:54px;flex:none;object-fit:contain} .musp-item>div{max-width:190px} .musp-item b{display:block;font-size:18px;color:#242328;margin-bottom:3px;font-weight:500} .musp-item span{display:block;font-size:14px;color:#242328;line-height:1.3} /* сверху/снизу тут не общий отступ секции, а компенсация под соседей с их собственными фиксированными паддингами (mbanner2 сверху, msec снизу), чтобы визуальный зазор до и после блока получался тем же, что и везде на странице (60px) */ @media(max-width:640px){.musp{padding:24px 0 0}.musp-grid{flex-direction:column;align-items:center;gap:30px}} /* мозаика категорий на главной — вёрстка по Figma (node 5189-2) */ .mcat{padding:56px 0 60px;font-family:'Onest',Arial,sans-serif} .mcat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px} .mcat-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s} .mcat-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12)} /* герой-плитка того же цикла плиток: без своего aspect-ratio она просто тянется (align-self:stretch по умолчанию) на высоту ряда, которую задают квадратные соседи — иначе с фиксированным 2:1 герой оказывался выше остальных плиток в ряду */ .mcat-tile--hero{grid-column:span 2;aspect-ratio:auto} .mcat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .mcat-badge{position:absolute;top:16px;left:16px;background:#e0616d;color:#fff;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:4px 12px;border-radius:20px;z-index:2} .mcat-scrim{display:none} .mcat-hero-info{position:absolute;top:52px;left:18px;right:18px;z-index:2;display:flex;flex-direction:column;gap:4px} .mcat-hero-name{font-weight:600;font-size:var(--h3-size);color:#242328} .mcat-hero-sub{font-size:var(--body-size);line-height:1.2;color:#242328} .mcat-hero-info .mcat-arrow{color:#242328;margin-top:4px} .mcat-label{position:absolute;top:18px;left:18px;right:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:var(--h3-size);font-weight:600;color:#242328;z-index:1} .mcat-arrow{font-size:15px;color:#242328} .mcat-tile--cta,.mcat-tile--empty{background:#fdf6f7;border:1.5px solid #e96570;display:flex;flex-direction:column;justify-content:flex-start;padding:18px} .mcat-tile--empty .mcat-label{position:static} .mcat-tile--cta .mcat-label{position:static;color:#242328} /* на этих брейкпоинтах герой занимает ряд целиком (не делит его с квадратными плитками), тянуться тут не от чего — возвращаем явное соотношение сторон */ @media(max-width:1100px){.mcat-grid{grid-template-columns:repeat(3,1fr)}.mcat-tile--hero{grid-column:span 3;aspect-ratio:2.6/1}} @media(max-width:680px){.mcat-grid{grid-template-columns:repeat(2,1fr)}.mcat-tile--hero{grid-column:span 2;aspect-ratio:2/1}} @media(max-width:420px){.mcat-grid{gap:12px}} /* конфигуратор набора */ .cs-combo-h1{font-family:'Tenor Sans','Onest',serif;color:#e96570;font-weight:400;text-align:center;font-size:var(--h1-size);letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase} .cs-combo{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;text-align:left} .cs-steps{min-width:0} .cs-step{margin-bottom:26px} .cs-step-h{display:flex;align-items:center;gap:12px;font-family:'Tenor Sans',serif;font-size:var(--h3-size);color:#e96570;margin-bottom:14px} .cs-step-n{flex:none;width:28px;height:28px;border-radius:50%;background:#fbeef0;color:#e96570;display:grid;place-items:center;font-size:14px} .cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .cs-chips .ctg-chip{font-size:13px;padding:7px 15px} .cs-row-wrap{position:relative;width:fit-content;max-width:100%;margin-bottom:26px;box-sizing:border-box} .cs-row-wrap.fill{width:100%} .cs-row-wrap{padding:0 40px} .cs-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;cursor:grab;user-select:none; scrollbar-width:none;-ms-overflow-style:none} .cs-row::-webkit-scrollbar{display:none} .cs-row.dragging{cursor:grabbing;scroll-snap-type:none} .cs-row-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#fff; border:1.5px solid #f0dcdc;color:#e96570;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center; box-shadow:0 4px 14px rgba(36,35,40,.14);z-index:2;transition:.2s;padding:0} .cs-row-arrow:hover{border-color:#e96570;background:#fef1f2} .cs-row-arrow.prev{left:0} .cs-row-arrow.next{right:0} .cs-row-wrap.no-scroll .cs-row-arrow{display:none} .cs-row-wrap.no-scroll .cs-row{cursor:default} .cs-variant-picker:empty{display:none} .cs-variant-picker{margin-bottom:14px;padding:12px 14px;background:#fef6f7;border-radius:14px} .cs-opt{flex:0 0 178px;scroll-snap-align:start;background:#fff;border:1.5px solid #f0dcdc;border-radius:12px;padding:9px;text-align:left;cursor:pointer;transition:.2s;position:relative;font:inherit;min-width:0} .cs-row.fill .cs-opt{flex-basis:calc((100% - 5*10px)/6)} @media(max-width:1000px){.cs-row.fill .cs-opt{flex-basis:calc((100% - 3*10px)/4)}} @media(max-width:640px){.cs-row.fill .cs-opt{flex-basis:calc((100% - 1*10px)/2)}} .cs-row.match-fill .cs-opt{flex-basis:var(--cs-card-w,178px)} /* тот же ряд-карусель (.cs-row-wrap/.cs-row), но с полноценной карточкой товара (.ctg-card, с кнопкой "В корзину") — блок "Добавить к заказу" в корзине */ .cs-row .ctg-card{flex:0 0 220px;scroll-snap-align:start;box-sizing:border-box} .cs-row.fill .ctg-card{flex-basis:calc((100% - 5*10px)/6)} @media(max-width:1000px){.cs-row.fill .ctg-card{flex-basis:calc((100% - 3*10px)/4)}} @media(max-width:640px){.cs-row .ctg-card{flex-basis:150px}.cs-row.fill .ctg-card{flex-basis:calc((100% - 1*10px)/2)}.cs-row.match-fill .ctg-card{flex-basis:var(--cs-card-w,150px)}} .cs-row.match-fill .ctg-card{flex-basis:var(--cs-card-w,220px)} .cs-opt:hover{border-color:#f4c4c4} .cs-opt.sel{border-color:#e96570;box-shadow:0 0 0 3px rgba(233,101,112,.14)} .cs-opt-media{aspect-ratio:1;background:#f7f2ee;border-radius:9px;overflow:hidden;margin-bottom:8px;display:grid;place-items:center;font-size:22px} .cs-opt-media img{width:100%;height:100%;object-fit:cover} .cs-opt-n{font-size:13.5px;font-weight:500;line-height:1.3;display:block;color:#242328;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs-opt-p{color:#ff8562;font-weight:600;font-size:14px} .cs-opt-tick{position:absolute;top:6px;right:6px;width:19px;height:19px;background:#e96570;color:#fff;border-radius:50%;display:none;place-items:center;font-size:11px} .cs-opt.sel .cs-opt-tick{display:grid} .cs-side{position:sticky;top:90px} .cs-panel{background:#fff;border:1px solid #f0dcdc;border-radius:16px;padding:22px} .cs-panel-t{font-family:'Tenor Sans',serif;font-size:var(--h3-size);color:#e96570;margin-bottom:16px} .cs-lines{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;min-height:40px} .cs-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding-bottom:10px;border-bottom:1px dashed #fbeef0} .cs-line span{color:#8b8790}.cs-line.on span{color:#242328} .cs-line b{color:#ff8562;font-weight:600;white-space:nowrap} .cs-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:2px solid #fbeef0;font-size:16px} .cs-total b{font-size:23px;color:#ff8562} .cs-add{width:100%;margin-top:6px;background:#e96570;color:#fff;border:1.5px solid #e96570;border-radius:20px;padding:13px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:.2s} .cs-add:hover:not(:disabled){background:#fff;color:#e96570;box-shadow:0 8px 22px rgba(233,101,112,.28)} .cs-add:disabled{opacity:.5;cursor:default;box-shadow:none} .cs-note{color:#8b8790;font-size:12.5px;text-align:center;margin-top:10px} /* мини-корзина */ .cs-ov{position:fixed;inset:0;background:rgba(40,30,32,.45);opacity:0;visibility:hidden;transition:.25s;z-index:100000} .cs-ov.on{opacity:1;visibility:visible} .cs-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:100001;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.12);font-family:'Onest',Arial,sans-serif} .cs-drawer.open{transform:none} .cs-dh{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #f0dcdc} .cs-dh b{font-family:'Tenor Sans',serif;font-size:var(--h3-size);color:#e96570} .cs-dx{border:0;background:transparent;font-size:28px;line-height:1;color:#8b8790;cursor:pointer} .cs-db{flex:1;overflow:auto;padding:16px 22px} .cs-df{padding:18px 22px;border-top:1px solid #f0dcdc} .cs-ci{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #fbeef0} .cs-ci-img{width:60px;height:60px;border-radius:10px;background:#f7f2ee;overflow:hidden;flex:none} .cs-ci-img img{width:100%;height:100%;object-fit:cover} .cs-ci-n{font-size:14px;font-weight:500;line-height:1.3} .cs-ci-meta{color:#8b8790;font-size:12px} .cs-ci-price{color:#ff8562;font-weight:600;font-size:14px;margin-top:2px} .cs-qty{display:inline-flex;align-items:center;gap:10px;margin-top:6px;border:1px solid #f0dcdc;border-radius:20px;padding:3px 8px} .cs-qty button{border:0;background:transparent;font-size:16px;color:#e96570;width:20px;cursor:pointer} .cs-ci-del{border:0;background:transparent;color:#8b8790;font-size:12px;cursor:pointer;margin-left:auto;align-self:flex-start} .cs-cart-empty{text-align:center;color:#8b8790;padding:50px 10px} .cs-cart-total{display:flex;justify-content:space-between;font-size:17px;margin-bottom:14px} .cs-cart-total b{color:#ff8562;font-size:22px} .cs-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:#2b2a2e;color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;opacity:0;transition:.3s;z-index:100002;font-family:'Onest',sans-serif} .cs-toast.on{opacity:1;transform:translateX(-50%)} /* быстрый просмотр товара */ .cs-prod{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);opacity:0;visibility:hidden;transition:.25s;z-index:100001; width:min(880px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;padding:26px;font-family:'Onest',Arial,sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.25)} .cs-prod.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .cs-prod-x{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:30px;line-height:1;color:#8b8790;cursor:pointer;z-index:2} .cs-prod-in{display:grid;grid-template-columns:1fr 1fr;gap:28px} .cs-prod-main{aspect-ratio:1;background:#f7f2ee;border-radius:16px;overflow:hidden} .cs-prod-main img{width:100%;height:100%;object-fit:cover} .cs-prod-thumbs{display:flex;gap:10px;margin-top:12px} .cs-prod-thumb{width:66px;height:66px;border-radius:10px;overflow:hidden;background:#f7f2ee;border:2px solid transparent;cursor:pointer;padding:0} .cs-prod-thumb.on{border-color:#e96570} .cs-prod-thumb img{width:100%;height:100%;object-fit:cover} .cs-prod-cat{display:inline-block;background:#fbeef0;color:#dc5c67;font-size:12.5px;padding:4px 12px;border-radius:999px;margin-bottom:14px} .cs-prod-name{font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h3-size);color:#242328;margin:0 0 12px} .cs-prod-price{font-size:30px;color:#ff8562;font-weight:600;margin-bottom:6px} .cs-prod-size{color:#8b8790;margin-bottom:20px} .cs-prod-feats{list-style:none;padding:20px 0 0;margin:20px 0 0;border-top:1px solid #f0dcdc;display:flex;flex-direction:column;gap:10px;font-size:14px} @media(max-width:640px){.cs-prod-in{grid-template-columns:1fr;gap:18px}.cs-prod{padding:18px}} /* модалка оформления заказа (доставка + контакты) */ .crx-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);opacity:0;visibility:hidden;transition:.25s;z-index:100001; width:min(460px,92vw);max-height:88vh;overflow:auto;background:#fff;border-radius:20px;padding:28px;font-family:'Onest',Arial,sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.25)} .crx-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .crx-modal-x{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:28px;line-height:1;color:#8b8790;cursor:pointer;z-index:2} .crx-modal h3{font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h3-size);color:#ff7184;margin:0 0 18px} @media(max-width:1000px){.cs-grid{grid-template-columns:repeat(3,1fr)}.cs-combo{grid-template-columns:1fr}.cs-side{position:static}} @media(max-width:640px){.cs-grid{grid-template-columns:repeat(2,1fr);gap:14px}.cs-opt{flex-basis:144px}.cs-row.match-fill .cs-opt{flex-basis:var(--cs-card-w,144px)}.cs-name{min-height:auto} .cs-row-wrap{padding:0 32px} .cs-row-arrow{width:26px;height:26px;font-size:14px}} /* ============ ЕДИНАЯ СЕТКА ОТСТУПОВ: 50px ПК / 20px планшет / 10px телефон ============ */ /* ============ ЕДИНАЯ ТИПОГРАФИКА: плавно зависит от ширины экрана (не скачками по брейкпоинтам). Откалибровано по эталону — родному описанию в блоке «Морская коллекция» (Tilda): там текст держится ровно 15px от 1200px и шире и не растёт дальше. Поэтому здесь тоже якорь «десктопного» значения стоит на 1200px (а не 1440), чтобы на любом типичном мониторе ПК (1200px и шире) размер совпадал с этим эталоном 1:1, а не был чуть меньше. Ниже 1200px — плавная интерполяция вниз до «телефонного» значения на ~480px. */ :root{ --edge-pad:50px;--grid-width:1200px; --h1-size:clamp(25px, calc(2.778vw + 11.67px), 45px); --h2-size:clamp(22px, calc(2.5vw + 10px), 40px); --h3-size:clamp(15px, calc(0.6944vw + 11.67px), 20px); --body-size:clamp(12px, calc(0.4167vw + 10px), 15px); --pad-lg:clamp(24px, calc(3.611vw + 6.67px), 50px); --pad-md:clamp(20px, calc(3.333vw + 4px), 44px); --gap-md:clamp(16px, calc(1.111vw + 10.67px), 24px); --icon-size:clamp(28px, calc(1.667vw + 20px), 40px); } @media(max-width:1024px){:root{--edge-pad:20px}} @media(max-width:640px){:root{--edge-pad:10px}} /* единый контейнер: без потолка по ширине — растягивается на весь экран, отступы от края 50/20/10px (edge-pad). Никакого max-width: контент масштабируется вместе с монитором, как в нативном Zero Block Тильды, а не упирается в фиксированную колонку. */ .mgrid{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box} /* ============ ПЕРЕСОБРАННЫЕ БЛОКИ TILDA (mir-) ============ */ .mwrap{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box} .mwrap-wide{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box} .msec{padding:60px 0} .msec--tint{background:#fdf5f2} .msec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px;gap:16px} .msec-head--c{flex-direction:column;align-items:center;text-align:center;gap:6px} .msec-head h2{font-family:'Tenor Sans',serif;font-weight:400;color:#e96570;font-size:var(--h2-size);letter-spacing:.5px;margin:0;text-transform:uppercase} .msec-sub{color:#8b8790;font-size:16px;margin:0} .msec-all{color:#e96570;font-size:15px;white-space:nowrap} .msec-more{text-align:center;margin-top:32px} .mbtn{display:inline-flex;align-items:center;justify-content:center;background:#e96570;color:#fff;border:1.5px solid #e96570;border-radius:20px;padding:13px 28px;font:500 15px 'Onest',sans-serif;cursor:pointer;transition:.18s;text-decoration:none} .mbtn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(233,101,112,.28);background:#fff;color:#e96570} .mbtn--ghost{background:transparent;color:#e96570} .mbtn--ghost:hover{background:#e96570;color:#fff} /* custom-шапка (появляется по скроллу) */ .mh-top{background:#fbeef0;color:#dc5c67;text-align:center;font-size:13.5px;padding:8px 12px;letter-spacing:.3px} .mh{position:sticky;top:0;z-index:9000;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #f0dcdc;transition:transform .3s,box-shadow .3s} .mh.hide{transform:translateY(-100%)} .mh.solid{box-shadow:0 6px 20px rgba(233,101,112,.1)} .mh-in{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box;display:flex;align-items:center;gap:26px;height:70px} .mh-logo{display:flex;align-items:center} .mh-logo-img{height:44px;width:auto} .mh-nav{display:flex;gap:26px;margin-left:8px} .mh-nav a{font:15px 'Onest',sans-serif;color:#242328;transition:color .2s} .mh-nav a:hover{color:#e96570} .mh-ico{margin-left:auto;display:flex;align-items:center;gap:4px} .mh-i{width:42px;height:42px;border:0;background:transparent;border-radius:12px;color:#242328;display:grid;place-items:center;transition:.2s;position:relative;cursor:pointer} .mh-i svg{width:22px;height:22px} .mh-i:hover{background:#fbeef0;color:#e96570} /* реальное меню сайта (нативный Tilda .t-menu) — активная вкладка = цвет hover, но ярче фирменного розового. Правила Tilda скопированы с префиксом #rec3474486801 (id записи меню), поэтому у них специфичность с ID — без такого же префикса наши правила проигрывают, несмотря на !important. */ html #rec3474486801 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover, html #rec3474486801 .t-menu__link-item:not(.t-active):not(.tooltipstered):focus-visible{color:#e96570!important} html #rec3474486801 .t-menu__link-item.t-active:not(.t978__menu-link){color:#e96570!important;font-weight:600} html #rec3474486801 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover::after, html #rec3474486801 .t-menu__link-item.t-active::after{box-shadow:inset 0 -2px 0 0 #e96570!important} html #rec3474486801 .t-menu__link-item{transition:color .2s!important} .mh-cc{position:absolute;top:5px;right:5px;min-width:17px;height:17px;background:#e96570;color:#fff;font-size:11px;border-radius:9px;display:grid;place-items:center;padding:0 4px} .mh-cc[data-z="0"]{display:none} .mh-burger{display:none} .mh-mnav{display:none;flex-direction:column;overflow:hidden;max-height:0;transition:max-height .3s;background:#fff} .mh-mnav a{padding:13px 24px;border-top:1px solid #fbeef0} .mh-mnav.open{max-height:320px} /* мозаика */ .mmosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:200px} .mtile{position:relative;border-radius:16px;overflow:hidden;display:block;background:#f7f2ee} .mtile--big{grid-column:span 2;grid-row:span 2} .mt-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s} .mtile:hover .mt-img{transform:scale(1.06)} .mt-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;background:linear-gradient(180deg,transparent 45%,rgba(60,30,30,.5) 100%)} .mtile--big .mt-ov{padding:24px} .mt-tag{align-self:flex-start;background:#e96570;color:#fff;font-size:10px;padding:2px 9px;border-radius:999px;margin-bottom:auto;letter-spacing:.5px;text-transform:uppercase} .mt-name{font-family:'Tenor Sans',serif;font-size:19px} .mtile--big .mt-name{font-size:28px} .mt-sub{font-size:12.5px;opacity:.92;margin-top:2px;max-width:24ch} .mt-go{position:absolute;top:14px;right:14px;width:32px;height:32px;background:rgba(255,255,255,.9);color:#e96570;border-radius:50%;display:grid;place-items:center;font-size:16px;opacity:0;transform:translateY(-4px);transition:.25s} .mtile:hover .mt-go{opacity:1;transform:none} /* баннеры */ .mbanner{padding:26px 0} .mbanner-in{margin:0 auto;display:grid;grid-template-columns:1.5fr .5fr;align-items:center;gap:24px;background:linear-gradient(120deg,#fbeef0,#fff);border-radius:24px;padding:40px 46px;box-sizing:border-box} .mbanner--combo .mbanner-in{background:linear-gradient(120deg,#ffeede,#fff)} .mbanner-k{color:#dc5c67;font-size:12.5px;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px} .mbanner-txt h2{font-family:'Tenor Sans',serif;font-weight:400;font-size:clamp(23px,2.8vw,32px);color:#e96570;letter-spacing:.5px;margin:0 0 12px;max-width:18ch} .mbanner-txt p{color:#242328;opacity:.8;margin:0 0 22px;max-width:46ch} .mbanner-art{font-size:56px;text-align:center;letter-spacing:6px} /* преимущества (4 в ряд, влезают) */ .madvs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .madv{background:#fdf5f2;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px} .madv-i{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:18px;border:1px solid #f0dcdc;margin-bottom:6px} .madv b{font-weight:600;font-size:16px} .madv-d{color:#8b8790;font-size:13.5px} /* UGC в одну линию (6) */ .mugc{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .mug{aspect-ratio:1;border-radius:14px;overflow:hidden;background:#f7f2ee} .mug img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .mug:hover img{transform:scale(1.08)} /* где купить (розовая карточка, города в ряд) */ .mstores-card{background:linear-gradient(160deg,#fbeef0,#fdf5f2);border-radius:24px;padding:32px} .mstores{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .mst-city-t{font-family:'Tenor Sans',serif;font-size:19px;color:#e96570;letter-spacing:.5px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f0d2d2} .mst-shop{padding:9px 0;border-bottom:1px dashed #f0d2d2} .mst-shop:last-child{border-bottom:0} .mst-shop b{display:block;font-weight:600;font-size:14.5px} .mst-shop span{display:block;color:#8b8790;font-size:13px} .mst-shop i{color:#dc5c67;font-size:12px;font-style:normal} /* форма с подчёркиванием (как в Tilda) */ .mform-sec{padding:64px 0;background:linear-gradient(160deg,#fbeef0,#fdf5f2)} .mform-in{max-width:1000px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .mform-txt h2{font-family:'Tenor Sans',serif;font-weight:400;font-size:clamp(26px,3vw,36px);color:#e96570;letter-spacing:.5px;margin:0 0 12px} .mform-txt p{color:#242328;opacity:.8;max-width:38ch} .mform{display:flex;flex-direction:column;gap:22px;background:#fff;padding:32px;border-radius:18px} .mfield{position:relative} .mfield input{width:100%;border:0;border-bottom:1.5px solid #e7d4d4;background:transparent;padding:10px 2px;font:16px 'Onest',sans-serif;color:#242328} .mfield input:focus{outline:none;border-color:#e96570} .mfield label{position:absolute;left:2px;top:10px;color:#a99;pointer-events:none;transition:.2s;font-size:16px} .mfield input:focus+label,.mfield input:not(:placeholder-shown)+label{top:-12px;font-size:12px;color:#e96570} .mchk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#8b8790} .mchk input{width:16px;height:16px;margin-top:2px;accent-color:#e96570} /* PDP (страница товара) */ .pdp-wrap{margin:0 auto;padding:40px var(--edge-pad) 20px;box-sizing:border-box;font-family:'Onest',Arial,sans-serif} .pdp-grid{display:grid;grid-template-columns:minmax(280px,480px) 1fr;gap:44px;align-items:start} .pdp-gal{position:sticky;top:100px} .pdp-main{aspect-ratio:1;background:#f7f2ee;border-radius:20px;overflow:hidden} .pdp-main img{width:100%;height:100%;object-fit:cover} .pdp-th{display:flex;gap:10px;margin-top:12px} .pdp-th button{width:72px;height:72px;border-radius:12px;overflow:hidden;background:#f7f2ee;border:2px solid transparent;cursor:pointer;padding:0} .pdp-th button.on{border-color:#e96570} .pdp-th img{width:100%;height:100%;object-fit:cover} .pdp-crumbs{color:#8b8790;font-size:13.5px;margin-bottom:16px} .pdp-crumbs a:hover{color:#e96570} .pdp-cat{display:inline-block;background:#fbeef0;color:#dc5c67;font-size:12.5px;padding:4px 12px;border-radius:999px;margin-bottom:14px} .pdp-h{font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h1-size);color:#242328;letter-spacing:.5px;margin:0 0 12px} .pdp-price{font-size:32px;color:#ff8562;font-weight:600;margin-bottom:20px} .pdp-oldprice{font-size:18px;font-weight:400;color:#a9a19d;text-decoration:line-through;margin-left:4px} .pdp-group-label{display:block;font-size:12px;color:#8b8790;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px} .pdp-variants{margin-bottom:18px} .pdp-variant-pills{display:flex;flex-wrap:wrap;gap:8px} .pdp-variant-pill{background:#fff;border:1.5px solid #f0dcdc;border-radius:20px;padding:9px 18px;font:14px 'Onest',sans-serif;color:#242328;cursor:pointer;transition:.2s;display:inline-flex;align-items:center} .pdp-variant-dot{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:8px;border:1px solid rgba(0,0,0,.15);flex:none} .pdp-variant-pill:hover{border-color:#e96570} .pdp-variant-pill.on{background:#e96570;border-color:#e96570;color:#fff} .pdp-variant-pill.out{opacity:.45;text-decoration:line-through;cursor:not-allowed} .pdp-variant-pill.out:hover{border-color:#f0dcdc} .pdp-options{margin-bottom:18px;display:flex;flex-direction:column;gap:10px} .pdp-option{display:flex;align-items:center;gap:9px;font-size:14px;color:#242328;cursor:pointer} .pdp-option input[type="checkbox"]{width:17px;height:17px;accent-color:#e96570;cursor:pointer;margin:0} .pdp-option b{color:#e96570;font-weight:600} .pdp-actions{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap} .pdp-actions .cs-btn:disabled{background:#e9e2e2!important;border-color:#e9e2e2!important;color:#a9a19d!important;cursor:default} .pdp-specs{width:100%;border-collapse:collapse;margin:8px 0 24px} .pdp-specs th{text-align:left;color:#8b8790;font-weight:400;font-size:14px;padding:9px 0;width:45%;border-bottom:1px solid #f0dcdc} .pdp-specs td{text-align:right;font-size:14px;padding:9px 0;border-bottom:1px solid #f0dcdc;font-weight:500} .pdp-feats{list-style:none;padding:18px 0 0;margin:0;border-top:1px solid #f0dcdc;display:flex;flex-direction:column;gap:10px;font-size:14px} .pdp-desc{margin-top:18px;color:#242328;opacity:.85;font-size:var(--body-size);line-height:1.65} @media(max-width:1000px){.pdp-grid{grid-template-columns:1fr;gap:24px}.pdp-gal{position:static}.mform-in{grid-template-columns:1fr;gap:24px}} @media(max-width:820px){.mmosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.mtile--big{grid-row:span 1} .madvs{grid-template-columns:1fr 1fr}.mugc{grid-template-columns:repeat(3,1fr)}.mstores{grid-template-columns:1fr 1fr} .mbanner-in{grid-template-columns:1fr;padding:28px}.mbanner-art{display:none}.mh-nav{display:none}.mh-burger{display:grid}.mh-mnav{display:flex}} @media(max-width:520px){.mugc{grid-template-columns:repeat(2,1fr)}.mstores{grid-template-columns:1fr}.madvs{grid-template-columns:1fr}} /* футер (страница товара) */ .mf{background:#2b2a2e;color:#e9e6ea;padding:48px 0 22px;margin-top:40px} .mf-in{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} .mf-logo-img,.mf-logo img{height:42px;filter:brightness(0) invert(1);opacity:.92} .mf-desc{color:#b3adb4;font-size:14px;margin:14px 0;max-width:34ch} .mf-soc{display:flex;gap:10px} .mf-soc a{width:36px;height:36px;border-radius:50%;background:#3a383e;display:grid;place-items:center;transition:.2s} .mf-soc a svg{width:18px;height:18px;fill:#e9e6ea} .mf-soc a:hover{background:#e96570} .mf-col-t{font-family:'Tenor Sans',serif;font-size:16px;margin-bottom:12px;color:#fff} .mf-col a{display:block;color:#b3adb4;font-size:14px;padding:5px 0;transition:.2s} .mf-col a:hover{color:#e96570} .mf-bot{margin:32px auto 0;padding:18px var(--edge-pad) 0;border-top:1px solid #3a383e;color:#8a848c;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;box-sizing:border-box} @media(max-width:820px){.mf-in{grid-template-columns:1fr 1fr}} /* UGC в одну линию (переложено под оригинал) */ .mugc--wide{grid-template-columns:repeat(6,1fr);gap:16px} .mugc--wide .mug{aspect-ratio:1;border-radius:16px} /* Где купить (переложено под оригинал: розовая карточка, города-чипы, магазины в ряд, картинка справа) */ .wb-card{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;background:#fdf0f0;border-radius:28px;padding:30px 111px 30px 40px;align-items:start;overflow:hidden;font-family:'Onest',Arial,sans-serif} .wb-left{position:relative;z-index:1} .wb-hpin{display:block;width:44px;height:44px;margin-bottom:8px} .wb-hpin svg{width:44px;height:44px} .wb-title{font-family:'Tenor Sans',serif;font-weight:400;color:#e96570;font-size:var(--h2-size);margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px} .wb-sub{color:#4a4750;font-size:var(--body-size);line-height:1.2;margin:0 0 16px} .wb-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px} .wb-chip{background:#fff;border:1px solid #eab9bd;border-radius:16px;padding:7px 14px;font:13px 'Onest',sans-serif;color:#4a4750;cursor:pointer;transition:.2s} .wb-chip:hover{border-color:#e96570;color:#e96570} .wb-chip.on{background:#e0616d;border-color:#e0616d;color:#fff} .wb-panel{display:none;grid-template-columns:repeat(2,minmax(0,290px));justify-content:start;gap:12px} .wb-panel.on{display:grid} .wb-shop{background:#fff;border-radius:14px;padding:13px 16px;display:flex;gap:10px;align-items:flex-start} .wb-pin{flex:none;width:26px;height:26px}.wb-pin svg{width:26px;height:26px} .wb-shop-info{flex:1;min-width:0} .wb-shop b{display:block;font-family:'Tenor Sans',serif;font-size:17px;color:#242328;margin-bottom:4px} .wb-shop span{display:block;color:#8b8790;font-size:13px} .wb-shop i{color:#4a4750;font-size:13px;font-style:normal} .wb-right{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:flex-end} .wb-right img{display:block;width:417px;max-width:100%;aspect-ratio:417/390;height:auto;object-fit:cover; -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 55%,transparent 100%)} @media(max-width:900px){.wb-card{grid-template-columns:1fr;padding:28px}.wb-panel{grid-template-columns:1fr}.mugc--wide{grid-template-columns:repeat(3,1fr)}.wb-right{justify-content:center}} @media(max-width:520px){.mugc--wide{grid-template-columns:repeat(2,1fr)}} /* корзина: доставка (как в ReSale) */ .cs-sum{display:flex;justify-content:space-between;font-size:14.5px;color:#4a4750;margin-bottom:8px} .cs-dl-sec{margin-top:18px;border-top:1px solid #f0dcdc;padding-top:16px} .cs-dl-sec h4{margin:0 0 12px;font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h3-size);color:#242328} .cs-dl-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .cs-dl-chip{background:#fff;border:1.5px solid #f0dcdc;border-radius:20px;padding:10px 12px;cursor:pointer;text-align:left;transition:.2s;font:inherit} .cs-dl-chip:hover{border-color:#f4c4c4} .cs-dl-chip.on{border-color:#e96570;background:#fef4f5;box-shadow:0 0 0 2px rgba(233,101,112,.12)} .cs-dl-chip b{display:block;font-size:14px;font-weight:600;color:#242328} .cs-dl-chip s{display:block;text-decoration:none;font-size:12px;color:#8b8790;margin-top:2px} .cs-dl-detail{display:flex;flex-direction:column;gap:10px;margin-top:4px} .cs-dl-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#8b8790} .cs-dl-field input{border:1px solid #e7d4d4;border-radius:10px;padding:11px 13px;font:15px 'Onest',sans-serif;color:#242328} .cs-dl-field input:focus{outline:none;border-color:#e96570} .cs-dl-addr b{display:block;font-size:14.5px;color:#242328} .cs-dl-addr span{color:#8b8790;font-size:13px} .cs-dl-hint{font-size:12px;color:#8b8790;margin:2px 0 0} #tildacopy{display:none!important} /* поиск */ .cs-search{position:fixed;top:0;left:0;right:0;background:#fff;z-index:100001;transform:translateY(-100%);transition:transform .3s; box-shadow:0 10px 40px rgba(0,0,0,.12);padding:20px 24px 26px;max-height:88vh;overflow:auto;font-family:'Onest',Arial,sans-serif} .cs-search.open{transform:none} .cs-search-top{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px} .cs-search-top input{flex:1;border:0;border-bottom:2px solid #f0dcdc;font:22px 'Tenor Sans',serif;padding:10px 2px;background:transparent} .cs-search-top input:focus{outline:none;border-color:#e96570} .cs-search-x{border:0;background:transparent;font-size:30px;color:#8b8790;cursor:pointer;line-height:1} .cs-search-res{max-width:1200px;margin:18px auto 0} .cs-search-hint{color:#8b8790;padding:24px 2px} /* карточка товара: кнопки разного цвета */ .pdp-actions .cs-btn{background:#e96570!important;color:#fff!important;border-color:#e96570!important} .pdp-actions .cs-btn:hover:not(:disabled){background:#fff!important;color:#e96570!important} .pdp-actions .mbtn--ghost{background:#fff!important;color:#ff8562!important;border:1.5px solid #ff8562!important} .pdp-actions .mbtn--ghost:hover{background:#ff8562!important;color:#fff!important} /* страница корзины /cart — вёрстка по Figma (cart-crabs-figma) */ .crx-page{margin:0 auto;padding:32px var(--edge-pad) 64px;box-sizing:border-box;font-family:'Onest',Arial,sans-serif} .crx-crumbs{font-size:13px;color:#908a88;margin:0 0 28px} .crx-crumbs a{color:#908a88;text-decoration:none} .crx-crumbs a:hover{color:#ff7184} .crx-crumbs span{color:#33302f} .crx-title-wrap{position:relative;text-align:center;margin:0 0 40px} .crx-title{font-family:'Tenor Sans',serif;font-weight:400;color:#ff7184;font-size:var(--h1-size);letter-spacing:.5px;margin:0;text-transform:uppercase} .crx-shell{position:absolute;width:64px;height:auto;pointer-events:none;user-select:none} .crx-shell--title{left:286px;top:15px;transform:rotate(27deg)} .crx-crab--title{left:50%;top:-47px;width:40px;transform:translateX(317px) rotate(-6deg)} .crx-heart--recs{right:74px;top:2px;width:30px;transform:rotate(14deg)} .crx-cols{display:grid;grid-template-columns:1fr 411px;gap:32px;align-items:start} .crx-items-col{display:flex;flex-direction:column;gap:20px;min-width:0} .crx-items{background:#fffefd;border:1px solid #f4d5d9;border-radius:18px;overflow:hidden} .crx-giftwrap{display:flex;align-items:center;gap:20px;background:#fff5f6;border:1px solid #f4d5d9;border-radius:18px;padding:20px 24px} .crx-giftwrap-media{width:120px;height:120px;border-radius:14px;overflow:hidden;flex:none;background:#f7f2ee} .crx-giftwrap-media img{width:100%;height:100%;object-fit:cover;display:block} .crx-giftwrap-info{flex:1;min-width:0} .crx-giftwrap-name{font-size:16px;color:#33302f;margin:0 0 4px;font-weight:500} .crx-giftwrap-note{font-size:12px;color:#908a88;margin:0} .crx-giftwrap-price{font-size:18px;font-weight:700;color:#ff7184;flex:none} .crx-giftwrap-btn{flex:none;height:42px;box-sizing:border-box;border:1.5px solid #ff536d;border-radius:20px;background:#ff536d;color:#fff;font:600 14px 'Onest',sans-serif;letter-spacing:.2px;cursor:pointer;padding:0 20px;white-space:nowrap} .crx-giftwrap-btn:hover{background:#fff;color:#ff536d} .crx-giftwrap-btn.added{background:#f3ece9;border-color:#f3ece9;color:#908a88} .crx-giftwrap-btn.added:hover{background:#fff;color:#908a88;border-color:#e6dcd9} @media(max-width:640px){.crx-giftwrap{flex-wrap:wrap}.crx-giftwrap-price{order:1;margin-left:auto}.crx-giftwrap-btn{order:2;width:100%}} .crx-item{display:flex;align-items:center;gap:24px;padding:24px;border-bottom:1px solid #f4d5d9} .crx-item:last-child{border-bottom:none} .crx-item-thumb{width:112px;height:112px;border-radius:16px;overflow:hidden;flex:none;background:#f7f2ee} .crx-item-thumb img{width:100%;height:100%;object-fit:cover;display:block} .crx-item-info{flex:1;min-width:0} .crx-item-name{font-size:17px;color:#33302f;margin:0 0 6px;font-weight:400} .crx-item-note,.crx-item-size{font-size:12px;color:#908a88;margin:0 0 4px} .crx-set-toggle{border:0;background:none;padding:0;margin-left:4px;font:12.5px 'Onest',sans-serif;color:#ff7184;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .crx-set-toggle:hover{opacity:.8} .crx-set-toggle span{text-decoration:none;display:inline-block} .crx-set-parts{display:none;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #f4d5d9} .crx-set-parts.open{display:flex} .crx-set-part{display:flex;align-items:center;gap:10px;font-size:13px;color:#33302f} .crx-set-part span{flex:1;min-width:0} .crx-set-part b{font-weight:600;color:#908a88;flex:none} .crx-set-part-del{border:0;background:#fff5f6;color:#ff7184;width:20px;height:20px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;flex:none;display:grid;place-items:center} .crx-set-part-del:hover{background:#ffe3e6} .crx-qty{display:inline-flex;align-items:center;gap:0;height:40px;border:1px solid #ff7184;border-radius:20px;background:#fff;flex:none} .crx-qty button{width:38px;height:40px;border:0;background:transparent;color:#ff7184;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center} .crx-qty span{min-width:22px;text-align:center;font-size:15px;color:#33302f} .crx-item-price{font-size:18px;font-weight:700;color:#ff7184;flex:none;min-width:88px;text-align:right} .crx-item-del{border:0;background:transparent;color:#ff7184;font-size:11px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none} .crx-item-del:hover{opacity:.75} .crx-summary{background:#fff5f6;border:1px solid #f4d5d9;border-radius:18px;padding:32px;position:sticky;top:90px} .crx-summary-title{font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h2-size);color:#ff7184;margin:0 0 24px} .crx-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#33302f;margin-bottom:16px} .crx-summary-row .muted{font-size:12px;color:#908a88} .crx-summary-divider{height:1px;background:#f4d5d9;border:0;margin:8px 0 20px} .crx-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px} .crx-total-row span{font-size:18px;color:#33302f} .crx-total-row b{font-size:23px;font-weight:700;color:#ff7184} .crx-ship-note{display:flex;justify-content:space-between;font-size:13px;color:#33302f;margin-bottom:10px} .crx-ship-note b{color:#ff7184;font-weight:700} .crx-progress{height:7px;border-radius:4px;background:#fff;border:1px solid #ff7184;overflow:hidden;margin-bottom:10px} .crx-progress-fill{height:100%;background:#ff7184;border-radius:4px;transition:width .3s} .crx-ship-caption{font-size:12px;color:#908a88;margin:0 0 8px} .crx-gift-progress{margin-top:14px} .crx-surprise-price{color:#33302f;font-size:14px;font-weight:600} .crx-checkout-btn{width:100%;height:42px;box-sizing:border-box;border:1.5px solid #ff536d;border-radius:20px;background:#ff536d;color:#fff;font:600 16px 'Onest',sans-serif;letter-spacing:.3px;cursor:pointer;text-transform:uppercase;margin-top:16px} .crx-checkout-btn:hover:not(:disabled){background:#fff;color:#ff536d} .crx-checkout-btn:disabled{opacity:.6;cursor:default} .crx-empty{color:#908a88;padding:60px 0;font-size:16px;text-align:center} .crx-empty a{color:#ff7184} .crx-recs{margin-top:56px;position:relative} .crx-recs-title{font-family:'Tenor Sans',serif;font-weight:400;font-size:var(--h2-size);color:#ff7184;letter-spacing:.5px;text-align:center;margin:0 0 32px;text-transform:uppercase} @media(max-width:1060px){.crx-cols{grid-template-columns:1fr}.crx-summary{position:static}.crx-shell{display:none}} @media(max-width:560px){ .crx-item{flex-wrap:wrap;row-gap:12px;padding:18px} .crx-item-thumb{width:84px;height:84px} .crx-item-info{flex:1 1 160px} .crx-item-price{order:1;min-width:0} .crx-item-del{order:2;margin-left:auto} .crx-summary{padding:22px} } /* счётчик-кружок на иконке корзины */ .cs-cart-badge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;background:#e96570;color:#fff; font:600 11px 'Onest',sans-serif;border-radius:9px;display:grid;place-items:center;padding:0 5px;z-index:5;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.15)} .t-menuwidgeticons__icon-counter{background:#e96570!important;color:#fff!important} .nlm_removeall,.nlm_removeallCartPage{font-family:'Onest',Arial,sans-serif!important} /* пустой Tilda-спейсер перед заголовком страницы (каталог/собери набор/корзина/товар) — на мобильных у Tilda свои классы t-rec_*-res-480_* с !important, которые перебивают инлайновый style="padding..."; тут свой отступ, но уже с !important и по id, поэтому одинаково маленький отступ на любой ширине экрана */ #rec3379700701,#rec3473989201{padding-top:20px!important;padding-bottom:10px!important} /* «Хочу консультацию» (rec3509007801) — тот же отступ 1560/32, что у остальных секций + аккуратные поля */ #rec3509007801 .t823__container{margin:0 auto;padding:0 var(--edge-pad);box-sizing:border-box} #rec3509007801 .t823__col_form{padding:56px 56px 56px 0!important;box-sizing:border-box!important} #rec3509007801 .t823__main-wrapper{max-width:460px} #rec3509007801 .t823__title{font-size:var(--h2-size)!important;line-height:1.15!important} #rec3509007801 .t823__descr{font-size:var(--body-size)!important;line-height:1.4!important;margin-bottom:26px!important} #rec3509007801 .t-input-group{margin-bottom:16px!important} /* только настоящие /