@font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('шрифты/onest-кириллица.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 800; font-display: swap;
    src: url('шрифты/onest-латиница.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
  }

  :root {
    --акцент: #b8c655;          
    --акцент-глубокий: #64731a;
    --крем: #feffeb;            
    --голубой: #b4d3e9;         
    --голубой-светлый: #eaf3fa;
    --пудра: #f3d6d3;
    --пудра-светлая: #fbe9e7;
    --чернила: #2b2e26;
    --чернила-мягкая: #3a3e33;
    --фон: #fdfdf2;
    --плитка: #ffffff;
    --плитка-край: #e8e8dc;
    --текст: #34362e;
    --текст-тихий: #8d9085;
    --белый-на-чернилах: #f4f4ec;
  }
  html.тёмная {
    --крем: #1d2015;
    --фон: #16180f;
    --плитка: #21231a;
    --плитка-край: #2f3226;
    --текст: #eceade;
    --текст-тихий: #8f9285;
    --чернила: #21231a;
    --чернила-мягкая: #2f3226;
    --акцент-глубокий: #c9d76a;
    --голубой: #2a3b4a;
    --голубой-светлый: #1d242b;
    --пудра-светлая: #2b211f;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--фон);
    color: var(--текст);
    -webkit-font-smoothing: antialiased;
  }
  button { font-family: inherit; }

  .лист { display: none; padding-bottom: 110px; }   
  

  @media (min-width: 900px) {
    .лист[data-лист="товар"] { padding-bottom: 24px; }
  }
  .лист.виден { display: block; }
  

  

  html, body { max-width: 100%; overflow-x: clip; }
  img, video { max-width: 100%; }

  .узкий { max-width: 620px; margin: 0 auto; }
  .широкий { max-width: 1120px; margin: 0 auto; padding: 0 14px; }

  a { color: var(--акцент-глубокий); }

  
  .шапка-сайта {
    position: sticky; top: 0; z-index: 30;
    background: var(--крем);
    border-bottom: 1px solid var(--плитка-край);
  }
  


  .шапка-сайта .ряд {
    max-width: 1220px; margin: 0 auto; padding: 10px 14px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .шапка-право { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .шапка-черта { width: 1px; height: 26px; background: var(--плитка-край); flex: none; }
  .лого { display: flex; align-items: center; flex: none; }
  .лого img { height: 44px; width: auto; display: block; }
  html.тёмная .лого img { filter: brightness(1.08); }
  .шапка-телефон {
    text-decoration: none; color: var(--текст);
    font-size: 14.5px; font-weight: 700; white-space: nowrap; line-height: 1.25;
  }
  .шапка-телефон span { display: block; font-size: 10.5px; font-weight: 500; color: var(--текст-тихий); }
  

  .шапка-кнопка {
    position: relative; flex: none; cursor: pointer;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: transform .1s, border-color .15s;
  }
  .шапка-кнопка:active { transform: scale(.95); }
  .шапка-кнопка:hover { border-color: var(--акцент); }
  .шапка-кнопка .число-в-шапке {
    position: absolute; top: -4px; right: -4px;
    background: var(--акцент); color: #22260c; border-radius: 12px;
    font-size: 11px; font-weight: 700; padding: 1px 6px;
  }
  .шапка-кнопка .число-в-шапке[hidden] { display: none; }

  
  .меню-строка {
    display: flex; align-items: center; gap: 4px 20px;
    overflow-x: auto; scrollbar-width: none; min-width: 0;
  }
  .меню-строка::-webkit-scrollbar { height: 0; }
  .меню-строка a {
    flex: none; text-decoration: none; color: var(--текст);
    font-size: 15.5px; font-weight: 600; padding: 4px 2px; cursor: pointer;
  }
  .меню-строка a:hover { color: var(--акцент-глубокий); }
  

  .меню-строка a.акцентный {
    color: var(--акцент-глубокий); font-weight: 700;
    background: transparent; border: 1.5px solid var(--акцент);
    border-radius: 999px; padding: 8px 15px; margin-right: 2px;
  }
  .меню-строка a.акцентный:hover { background: var(--акцент); color: #22260c; }
  

  @media (max-width: 1100px) {
    .меню-строка { order: 3; width: 100%; padding-top: 4px; }
    .шапка-сайта .ряд { padding-bottom: 8px; row-gap: 2px; }
  }
  @media (max-width: 640px) {
    .меню-строка a { font-size: 14.5px; }
    .меню-строка a.акцентный { padding: 6px 12px; }
    .шапка-телефон span { display: none; }
    .шапка-телефон { font-size: 13px; }
    .лого img { height: 34px; }
    .шапка-кнопка { width: 36px; height: 36px; font-size: 15px; }
    .шапка-черта { display: none; }
  }

  
  .назад-строка {
    max-width: 1120px; margin: 0 auto; padding: 12px 14px 0;
    display: flex; align-items: center; gap: 12px;
  }
  .назад-строка[hidden] { display: none; }
  .назад-строка button {
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    border-radius: 22px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .назад-строка span { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }

  
  .акции-строка { background: var(--чернила); overflow: hidden; }
  .бегущая {
    display: flex; width: max-content; padding: 7px 0;
    animation: бег 26s linear infinite;
  }
  .бегущая span {
    flex: none; padding: 0 36px; color: var(--акцент);
    font-size: 11.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
    white-space: nowrap;
  }
  @keyframes бег { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .бегущая { animation: none; } }

  
  .герой { background: var(--голубой); position: relative; overflow: hidden; }
  
  .герой::before {
    content: ""; position: absolute; left: -140px; bottom: -220px;
    width: 460px; height: 460px; border-radius: 50%;
    background: rgba(254,255,235,.3);
  }
  .герой::after {
    content: ""; position: absolute; right: 16%; top: -180px;
    width: 380px; height: 380px; border-radius: 50%;
    background: rgba(255,255,255,.22);
  }
  .герой .внутри {
    max-width: 1120px; margin: 0 auto; padding: 46px 14px;
    display: flex; gap: 48px; align-items: center;
    position: relative; z-index: 1;
  }
  .герой-текст { flex: 1; min-width: 0; color: #2b2e26; }
  html.тёмная .герой-текст { color: var(--текст); }
  .герой h1, .герой .заголовок-героя {
    margin: 0 0 14px; font-size: clamp(27px, 3.6vw, 46px); font-weight: 800;
    letter-spacing: -1.2px; line-height: 1.08; max-width: 620px;
  }
  .герой-доводы { margin: 0 0 26px; font-size: 15.5px; font-weight: 600; line-height: 1.6; opacity: .85; }
  .герой-кнопки { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
  .кнопка-героя {
    padding: 16px 30px; border: none; border-radius: 40px; cursor: pointer;
    background: var(--чернила); color: var(--белый-на-чернилах);
    font-size: 16px; font-weight: 700; transition: transform .12s;
  }
  .кнопка-героя:hover { transform: translateY(-2px); }
  .кнопка-героя.втор { background: var(--крем); color: #2b2e26; }
  html.тёмная .кнопка-героя.втор { background: var(--акцент); color: #22260c; }
  .герой-фото {
    flex: 0 0 auto; width: min(380px, 34vw); border-radius: 24px; display: block;
    aspect-ratio: 3/4; max-height: 500px; object-fit: cover;
    box-shadow: 0 18px 48px rgba(30,50,70,.28);
  }
  @media (max-width: 840px) {
    .герой .внутри { flex-direction: column; align-items: stretch; padding: 26px 14px 30px; gap: 22px; }
    .герой h1, .герой .заголовок-героя { font-size: 27px; }
    .герой-фото { width: 100%; max-width: none; max-height: none; flex: none; aspect-ratio: 4/3; }
  }

  .доверие { display: flex; gap: 8px; max-width: 640px; }
  .доверие button {
    flex: 1; background: var(--крем); border: 1px solid rgba(43,46,38,.15);
    border-radius: 12px; padding: 9px 6px; text-align: center; cursor: pointer;
    font-size: 11px; line-height: 1.35; color: var(--текст-тихий);
    transition: transform .1s, border-color .15s;
  }
  .доверие button:active { transform: scale(.96); }
  .доверие button:hover { border-color: var(--акцент-глубокий); }
  .доверие b { display: block; font-size: 13.5px; color: var(--текст); margin-bottom: 1px; }
  html.тёмная .доверие button { background: var(--плитка); border-color: var(--плитка-край); }
  @media (min-width: 841px) {
    .доверие button { padding: 13px 8px; font-size: 12.5px; }
    .доверие b { font-size: 15.5px; margin-bottom: 3px; }
  }

  
  .раздел { max-width: 1120px; margin: 0 auto; padding: 40px 14px 0; scroll-margin-top: 104px; }
  .раздел-шапка { margin-bottom: 18px; }
  .раздел-шапка .надзаголовок {
    font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--акцент-глубокий); margin-bottom: 6px;
  }
  .раздел-шапка h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
  @media (min-width: 700px) { .раздел-шапка h2 { font-size: 30px; } }

  
  .о-нас { display: flex; gap: 26px; align-items: center; }
  .о-нас .текст { flex: 1; min-width: 0; }
  .о-нас h2 span { color: var(--акцент-глубокий); }
  .о-нас p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--текст-тихий); max-width: 560px; }
  .о-нас img {
    flex: 0 0 34%; width: 34%; max-width: 380px; border-radius: 20px;
    aspect-ratio: 1/1; object-fit: cover; display: block;
  }
  .видео-коробка {
    flex: 0 0 34%; width: 34%; max-width: 340px; border-radius: 20px;
    aspect-ratio: 9/16; object-fit: cover; display: block; background: var(--плитка);
  }
  
  .в-коробке { margin-top: 18px; }
  .строка-коробки {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 9px 0; border-bottom: 1px solid var(--плитка-край);
  }
  .строка-коробки b { font-size: 14.5px; font-weight: 700; color: var(--текст); }
  .строка-коробки span { font-size: 13.5px; color: var(--текст-тихий); }
  .в-коробке .бесплатно {
    margin: 12px 0 0 !important; font-size: 14.5px !important; font-weight: 700;
    color: var(--акцент-глубокий) !important;
  }
  @media (max-width: 760px) {
    .о-нас { flex-direction: column; align-items: stretch; }
    .о-нас img { width: 100%; max-width: none; flex: none; }
    .видео-коробка { width: 100%; max-width: none; flex: none; aspect-ratio: 3/4; }
  }

  
  .в-каталог {
    display: block; margin: 22px auto 0; padding: 14px 34px; border: none; border-radius: 40px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .12s;
  }
  .в-каталог:hover { transform: translateY(-2px); }

  
  .отзывы-обёртка { display: flex; gap: 26px; align-items: stretch; }
  .отзывы-карта {
    flex: 1; min-width: 0; background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .отзывы-цифры { display: flex; gap: 10px; flex-wrap: wrap; }
  .цифра {
    flex: 1; min-width: 120px; background: var(--крем); border: 1px solid var(--плитка-край);
    border-radius: 14px; padding: 14px; text-align: center;
  }
  .цифра b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.8px; }
  .цифра span { font-size: 12px; color: var(--текст-тихий); }
  .цифра .звёзды { color: #f5a623; font-size: 14px; letter-spacing: 2px; }
  .отзывы-текст { font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); margin: 0; }
  .к-отзывам {
    align-self: flex-start; display: inline-block; text-decoration: none;
    padding: 12px 22px; border-radius: 40px; background: var(--акцент); color: #22260c;
    font-size: 14px; font-weight: 700;
  }
  .отзывы-фото {
    flex: 0 0 32%; max-width: 360px; border-radius: 20px; object-fit: cover; display: block;
  }
  @media (max-width: 760px) {
    .отзывы-обёртка { flex-direction: column; }
    .отзывы-фото { width: 100%; max-width: none; flex: none; aspect-ratio: 4/3; }
  }

  
  .faq details {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 14px; padding: 0 18px; margin-bottom: 10px;
  }
  .faq summary {
    cursor: pointer; list-style: none; padding: 16px 0;
    font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--акцент-глубокий); }
  .faq details[open] summary::after { content: "−"; }
  .faq .ответ { padding: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .faq .ответ b { color: var(--текст); }

  
  .звонок-карта {
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 22px; padding: 28px 22px; position: relative; overflow: hidden;
  }
  .звонок-карта::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--акцент), transparent 68%); opacity: .4;
  }
  .звонок-карта h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; position: relative; }
  .звонок-карта p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; opacity: .75; position: relative; max-width: 480px; }
  .звонок-поля { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
  .звонок-поля input {
    flex: 1 1 200px; padding: 14px; border-radius: 12px; border: none;
    background: var(--чернила-мягкая); color: var(--белый-на-чернилах);
    font: inherit; font-size: 15px;
  }
  .звонок-поля input::placeholder { color: rgba(244,244,236,.5); }
  .звонок-поля input:focus { outline: 2px solid var(--акцент); }
  .звонок-поля button {
    flex: 1 1 160px; padding: 14px 22px; border: none; border-radius: 12px; cursor: pointer;
    background: var(--акцент); color: #22260c; font-size: 15px; font-weight: 700;
  }
  .звонок-согласие {
    position: relative; margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; opacity: .6;
  }
  .звонок-согласие a { color: inherit; }

  
  .контакты-обёртка { display: flex; gap: 26px; }
  .контакты-карта {
    flex: 1; background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 24px;
  }
  .контакты-карта .строка-контакта {
    display: flex; gap: 12px; padding: 10px 0; font-size: 15px; line-height: 1.5;
    border-bottom: 1px solid var(--плитка-край); align-items: baseline;
  }
  .контакты-карта .строка-контакта:last-child { border-bottom: none; }
  .контакты-карта .строка-контакта b { font-weight: 700; }
  .контакты-карта a { color: var(--акцент-глубокий); text-decoration: none; font-weight: 700; }
  .карта-кнопка {
    display: inline-block; margin-top: 14px; text-decoration: none;
    padding: 12px 22px; border-radius: 40px;
    background: var(--чернила); color: var(--белый-на-чернилах) !important;
    font-size: 14px; font-weight: 700;
  }

  
  .прощание {
    margin: 42px 14px 8px; text-align: center;
    font-size: 24px; font-weight: 700; letter-spacing: -.4px; color: var(--акцент-глубокий);
  }
  @media (min-width: 700px) { .прощание { font-size: 30px; margin-top: 56px; } }

  
  .баннеры { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
  @media (min-width: 700px) { .баннеры { gap: 14px; } }
  .баннер {
    padding: 16px; cursor: pointer; min-height: 150px;
    display: flex; flex-direction: column;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 16px; position: relative; overflow: hidden;
    transition: transform .12s;
  }
  .баннер:hover { transform: translateY(-2px); }
  .баннер:active { transform: scale(.985); }
  .баннер::after {
    content: ""; position: absolute; right: -30px; top: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--акцент), transparent 68%); opacity: .5;
  }
  .баннер h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; position: relative; }
  .баннер p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; opacity: .72; position: relative; max-width: 300px; }
  .баннер .кн {
    display: inline-block; align-self: flex-start; margin-top: auto;
    background: var(--акцент); color: #22260c;
    padding: 9px 16px; border-radius: 40px; font-size: 13px; font-weight: 700; position: relative;
  }
  .баннер .метка-баннера {
    align-self: flex-start; margin: auto 0 7px; position: relative;
    padding: 4px 9px; border-radius: 20px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  }
  .баннер .метка-баннера + .кн { margin-top: 0; }
  
  .баннер .метка-баннера.скидка {
    white-space: normal; text-transform: none; letter-spacing: 0;
    font-size: 11px; line-height: 1.25; text-align: left;
    background: rgba(184, 198, 85, .22); border-color: rgba(184, 198, 85, .6);
  }
  .баннер.светлый { background: var(--акцент); color: #22260c; }
  .баннер.светлый::after { background: radial-gradient(circle at 30% 30%, #ffffff, transparent 68%); opacity: .45; }
  .баннер.светлый p { opacity: .78; }
  .баннер.светлый .кн { background: #22260c; color: var(--акцент); }
  @media (min-width: 700px) {
    .баннер h3 { font-size: 19px; }
    .баннер p { font-size: 13.5px; }
  }

  .поиск-обёртка { margin: 18px 0 0; position: relative; max-width: 640px; }
  .поиск {
    width: 100%; padding: 13px 40px 13px 14px;
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--текст);
  }
  .поиск::placeholder { color: var(--текст-тихий); }
  .поиск:focus { outline: none; border-color: var(--акцент); }
  .очистить {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--текст-тихий); font-size: 20px;
    padding: 4px 8px; cursor: pointer; display: none;
  }
  .очистить.видна { display: block; }

  .заголовок-блока { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin: 22px 0 10px; }
  .узкий .заголовок-блока, .узкий .лента, .узкий .промо, .узкий .промо-ответ,
  .узкий .итоги, .узкий .сноска, .узкий .бонусы-строка,
  .узкий .сверка { margin-left: 14px; margin-right: 14px; }   

  

  .лента { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
  .лента::-webkit-scrollbar { height: 0; }
  .чип {
    flex: none; cursor: pointer;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font-size: 13.5px; font-weight: 500; padding: 9px 14px; border-radius: 40px; white-space: nowrap;
    transition: border-color .15s;
  }
  .чип:hover { border-color: var(--акцент); }
  .чип.выбран { background: var(--акцент); border-color: var(--акцент); color: #22260c; font-weight: 600; }
  

  .чип.поздно, .сегмент.поздно {
    opacity: .35; cursor: default; text-decoration: line-through;
  }
  .чип.поздно:active, .сегмент.поздно:active { transform: none; }
  


  .чип.с-промо { position: relative; }
  .чип.с-промо .промо-ярлык {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    padding: 2px 8px; border-radius: 20px; white-space: nowrap;
    background: var(--акцент-глубокий); color: var(--крем);
    font-size: 9px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  }

  

  .баннер { position: relative; }
  .баннер .значок-новых, .значок-новых {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #e05740; color: #fff; font-size: 13px; font-weight: 700;
    line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }
  .значок-новых[hidden] { display: none; }

  
  .выбор-фон {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
  }
  .выбор-фон.видна { opacity: 1; }
  .выбор-панель {
    width: min(420px, calc(100% - 32px)); background: var(--фон); color: var(--текст);
    border-radius: 18px; padding: 20px 20px 22px;
    transform: translateY(14px); transition: transform .18s;
  }
  .выбор-фон.видна .выбор-панель { transform: translateY(0); }
  .выбор-панель h3 { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
  .выбор-кнопка {
    display: block; width: 100%; margin-bottom: 9px; padding: 14px 16px;
    border: 1.5px solid var(--плитка-край); border-radius: 14px; background: var(--плитка);
    color: var(--текст); font: inherit; font-size: 15px; font-weight: 700;
    text-align: left; cursor: pointer;
  }
  .выбор-кнопка span {
    display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--текст-тихий);
  }
  .выбор-кнопка.главная { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  .выбор-кнопка.главная span { color: rgba(34, 38, 12, .7); }
  


  .выбор-кнопка .значок-новых.в-кнопке {
    position: static; display: inline-flex; vertical-align: middle;
    margin: 0 0 0 9px; min-width: 24px; height: 24px; padding: 0 7px;
    color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  }

  
  

  .архив-ряд { display: grid; gap: 12px; margin-bottom: 18px; }
  @media (min-width: 760px)  { .архив-ряд { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .архив-ряд { grid-template-columns: repeat(3, 1fr); } }
  .архив-пояснение { margin: 0 0 14px; font-size: 13px; color: var(--текст-тихий); line-height: 1.5; }
  .архив-шапка {
    display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline;
    margin: 18px 0 10px; font-size: 13px;
  }
  .архив-когда { font-weight: 700; color: var(--текст); }
  .архив-бриф { color: var(--текст-тихий); }

  
  .карточка { position: relative; }
  .счёт-плитки {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: flex; align-items: center;
  }
  .счёт-плитки .кнопка-класть {
    width: 33px; height: 33px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--акцент); color: #22260c; cursor: pointer;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
    transition: transform .12s ease;
  }
  .счёт-плитки .кнопка-класть:active { transform: scale(.9); }
  .счёт-плитки.есть {
    gap: 0; border-radius: 40px; background: var(--акцент);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2); overflow: hidden;
  }
  .счёт-плитки .шаг-кол {
    width: 30px; height: 33px; padding: 0; border: none; background: transparent;
    color: #22260c; font: inherit; font-size: 17px; font-weight: 700;
    line-height: 1; cursor: pointer;
  }
  .счёт-плитки .шаг-кол:hover { background: rgba(0, 0, 0, .08); }
  .счёт-плитки .сколько {
    min-width: 16px; text-align: center; color: #22260c;
    font-size: 14px; font-weight: 700;
  }
  
  .карточка .подпись { padding-right: 46px; }

  
  .корзина-угол {
    position: fixed; z-index: 40;
    right: 18px; bottom: 18px;
    display: flex; align-items: center; gap: 7px;
    padding: 12px 18px; border: none; border-radius: 40px;
    background: var(--акцент); color: #22260c;
    font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform .12s ease;
  }
  .корзина-угол:hover { transform: scale(1.03); }
  .корзина-угол:active { transform: scale(.95); }
  .корзина-угол[hidden] { display: none; }

  
  .кол-в-корзине {
    


    display: inline-flex; align-items: center; align-self: flex-start;
    width: fit-content; margin-top: 6px;
    border: 1px solid var(--плитка-край); border-radius: 40px; overflow: hidden;
  }
  .кол-в-корзине .шаг-кол {
    width: 30px; height: 28px; padding: 0; border: none; background: transparent;
    color: var(--текст); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .кол-в-корзине .шаг-кол:hover { background: rgba(0, 0, 0, .06); }
  
  .кол-в-корзине .шаг-кол:disabled { opacity: .35; cursor: default; background: transparent; }
  .кол-в-корзине .сколько { min-width: 20px; text-align: center; font-size: 14px; font-weight: 700; }

  
  @media (max-width: 400px) {
    .позиция { gap: 9px; padding: 11px 12px; }
    .позиция img, .авторский-значок { width: 76px; height: 96px; }
    .позиция .н { font-size: 13px; }
    .позиция .ц { font-size: 13.5px; }
    .кол-в-корзине .шаг-кол { width: 27px; }
    .плитка-товаров { gap: 9px; }
    .карточка .подпись { padding-right: 42px; }
    .корзина-угол { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 14px; }
    .кнопка-героя { padding: 14px 22px; font-size: 15px; }
    .бриф-вопрос { font-size: 20px; }
  }

  

  #категории { min-height: 49px; }
  #ценник { min-height: 161px; }

  .плитка-товаров { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  @media (min-width: 700px)  { .плитка-товаров { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
  @media (min-width: 1000px) { .плитка-товаров { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

  .карточка {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; text-align: left; padding: 0;
    font-family: inherit; color: inherit;
    transition: transform .12s, box-shadow .12s;
  }
  .карточка:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,46,38,.08); }
  .карточка:active { transform: scale(.985); }
  .карточка .фото { aspect-ratio: 3/4; background: var(--плитка-край); position: relative; overflow: hidden; }
  .карточка .фото .полоса {
    display: flex; height: 100%; width: 100%;
    will-change: transform;
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    touch-action: pan-y;
  }
  .карточка .фото .полоса.тянут { transition: none; }
  .карточка .фото .б28-кадр { display: block; width: 100%; height: 100%; flex: 0 0 100%; }
  .карточка .фото img {
    width: 100%; height: 100%; flex: 0 0 100%;
    object-fit: cover; display: block; pointer-events: none;
  }
  .точки-мини {
    position: absolute; bottom: 7px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 4px; pointer-events: none;
  }
  .точки-мини i {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.35);
    transition: width .2s;
  }
  .точки-мини i.активна { width: 13px; border-radius: 3px; background: #fff; }
  .карточка .подпись { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
  .карточка .название {
    font-size: 12.5px; line-height: 1.35; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 34px;
  }
  .карточка .цена { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
  .карточка .цена s { font-size: 12.5px; font-weight: 500; color: var(--текст-тихий); margin-left: 3px; }

  .метка {
    position: absolute; left: 7px; top: 7px; z-index: 1;
    background: var(--акцент); color: #22260c;
    font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px; letter-spacing: .2px;
  }
  .метка.скидка { background: #d94f3d; color: #fff; }

  .пусто { padding: 50px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; line-height: 1.6; }

  

  .витрина { margin-top: 34px; }
  .витрина .строка-подписи {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 6px;
  }
  .витрина h2 { margin: 0; }
  .придумать-свой {
    flex: none; background: var(--акцент); color: #22260c; border: 0;
    border-radius: 999px; padding: 9px 16px; font-family: inherit;
    font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .1s;
  }
  .придумать-свой:active { transform: scale(.95); }
  .витрина .пояснение { margin: 0 0 16px; font-size: 14px; color: var(--текст-тихий); line-height: 1.5; max-width: 720px; }
  .витрина-лента {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  }
  @media (max-width: 1100px) { .витрина-лента { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 700px) {
    .витрина-лента {
      display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .витрина-лента::-webkit-scrollbar { display: none; }
    .витрина-карточка { flex: none; width: 140px; }
  }
  .витрина-карточка {
    cursor: pointer; background: none; border: 0; padding: 0;
    font-family: inherit; text-align: left; transition: transform .12s;
  }
  .витрина-карточка:hover { transform: translateY(-3px); }
  .витрина-карточка img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px;
    background: var(--плитка); display: block;
  }
  .витрина-карточка .цена {
    display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--текст);
  }

  .букет-дня {
    margin-top: 22px; border-radius: 20px; overflow: hidden; position: relative;
    cursor: pointer; max-width: 560px;
  }
  .букет-дня img { width: 100%; height: 320px; object-fit: cover; display: block; background: var(--плитка); }
  .букет-дня .поверх {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px;
    background: linear-gradient(to top, rgba(10, 11, 7, .95) 32%, transparent);
  }
  .букет-дня .ярлык {
    display: inline-block; background: var(--акцент); color: #22260c;
    padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase; margin-bottom: 9px;
  }
  .букет-дня h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.4px; color: #fff; }
  .букет-дня .цена { font-size: 23px; font-weight: 800; color: var(--акцент); }

  .промо-подсказка {
    margin: 0 0 8px; padding: 10px 12px; border-radius: 10px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 13.5px; line-height: 1.4;
  }
  html.тёмная .промо-подсказка { color: var(--акцент); }
  .промо-подсказка b { font-weight: 700; }

  

  .подбор-карточка .цена.со-скидкой {
    text-decoration: line-through; text-decoration-thickness: 1.5px;
    color: var(--текст-тихий); font-size: 15px; font-weight: 600;
  }
  .подбор-карточка .цена-со-скидкой {
    font-size: 19px; font-weight: 700; letter-spacing: -.5px; color: var(--акцент-глубокий);
  }
  html.тёмная .подбор-карточка .цена-со-скидкой { color: var(--акцент); }
  .подбор-карточка .подбор-промо {
    margin: -4px 0 2px; padding: 7px 10px; border-radius: 9px;
    background: rgba(184, 198, 85, .16); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 13px; line-height: 1.3;
  }
  html.тёмная .подбор-карточка .подбор-промо { color: var(--акцент); }

  
  .подарки {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 14px;
    background: rgba(184, 198, 85, .12); border: 1px solid rgba(184, 198, 85, .4);
  }
  .подарки img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
  @media (min-width: 700px) {
    .подарки img { width: 86px; height: 86px; }
    .подарки-текст b { font-size: 16px; }
    .подарки-текст span { font-size: 13.5px; }
    .подарки-цена { font-size: 16px; }
  }
  .подарки-текст { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .подарки-текст b { font-size: 14px; font-weight: 700; }
  .подарки-текст span { font-size: 12px; color: var(--текст-тихий); line-height: 1.35; }
  .подарки-цена { font-size: 14px; font-weight: 700; color: var(--акцент-глубокий); white-space: nowrap; }
  html.тёмная .подарки-цена { color: var(--акцент); }

  
  .сверка { display: flex; flex-direction: column; gap: 0; }
  .сверка-строка {
    display: flex; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--плитка-край); font-size: 13.5px; line-height: 1.4;
  }
  .сверка-строка:last-child { border-bottom: 0; }
  .сверка-что { flex: none; width: 110px; color: var(--текст-тихий); }
  .сверка-как { flex: 1; min-width: 0; }
  
  .сверка-товар { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .сверка-товар:last-child { margin-bottom: 0; }
  .сверка-товар img { width: 46px; height: 58px; object-fit: cover; border-radius: 8px; flex: none; }
  .сверка-значок {
    width: 46px; height: 58px; border-radius: 8px; flex: none;
    background: var(--чернила); color: var(--акцент);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
  }

  
  .допродажа img { width: 100%; height: 108px; object-fit: cover; display: block; margin-bottom: 6px; }
  .допродажа .имя { font-size: 13.5px; font-weight: 700; line-height: 1.25; padding: 0 10px; }
  .допродажа .подпись { font-size: 11.5px; color: var(--текст-тихий); padding: 0 10px; line-height: 1.3; }
  .допродажа .цена { font-size: 13px; font-weight: 600; padding: 2px 10px 0; }
  .допродажа.выбран .цена { color: var(--акцент-глубокий); }
  .допродажа.выбран .цена::after { content: ' ✓'; }

  
  .цена-была {
    text-decoration: line-through; text-decoration-thickness: 1.5px;
    opacity: .6; font-weight: 600; margin-right: 4px;
  }
  .ярлык-дня {
    display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 8px;
    background: rgba(184, 198, 85, .18); border: 1px solid rgba(184, 198, 85, .45);
    color: var(--акцент-глубокий); font-size: 12px; font-weight: 700;
    vertical-align: middle; letter-spacing: .2px;
  }
  html.тёмная .ярлык-дня { color: var(--акцент); }
  .букет-дня .цена .цена-была { color: #fff; font-size: 18px; }

  
  .витрина-крупно { max-width: 560px; }
  .витрина-крупно img { width: 100%; border-radius: 18px; display: block; background: var(--плитка); }

  .витрина-цена { margin-top: 14px; font-size: 26px; font-weight: 800; color: var(--акцент-глубокий); }
  .витрина-состав { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--текст-тихий); }
  


  
  .лист[data-лист="витрина-букет"] .узкий { padding-left: 14px; padding-right: 14px; }
  @media (min-width: 900px) {
    .лист[data-лист="витрина-букет"] .узкий { max-width: 1000px; }
    .витрина-крупно { max-width: none; display: flex; gap: 32px; align-items: flex-start; }
    .витрина-крупно img { flex: 0 0 46%; width: 46%; }
    .витрина-справа { flex: 1; min-width: 0; }
    .витрина-справа .витрина-цена { margin-top: 4px; }
  }

  


  .что-в-цену {
    

    margin: 16px 0 18px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(184, 198, 85, .13), rgba(184, 198, 85, .03));
    border: 1px solid rgba(184, 198, 85, .35); max-width: 560px;
  }
  .что-в-цену summary {
    list-style: none; cursor: pointer; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; color: var(--акцент-глубокий);
  }
  .что-в-цену summary::-webkit-details-marker { display: none; }
  .что-в-цену summary::after { content: "▾"; font-size: 12px; opacity: .7; }
  .что-в-цену[open] summary::after { content: "▴"; }
  .что-в-цену .внутри { padding: 0 16px 14px; }
  .что-в-цену .строка {
    display: flex; align-items: center; gap: 11px; padding: 8px 0;
    font-size: 14px; line-height: 1.4; color: var(--текст);
  }
  .что-в-цену .строка + .строка { border-top: 1px solid rgba(184, 198, 85, .18); }
  .что-в-цену .строка b { display: block; font-weight: 600; }
  .что-в-цену .строка i { font-style: normal; display: block; font-size: 12.5px; color: var(--текст-тихий); }
  .что-в-цену svg {
    flex: none; width: 21px; height: 21px; stroke: var(--акцент-глубокий); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }

  


  .шторка .что-в-цену {
    background: linear-gradient(135deg, rgba(184, 198, 85, .16), rgba(184, 198, 85, .04));
    border-color: rgba(184, 198, 85, .42);
  }
  .шторка .что-в-цену summary { color: var(--акцент); }
  .шторка .что-в-цену .строка,
  .шторка .что-в-цену .строка b { color: var(--белый-на-чернилах); }
  .шторка .что-в-цену .строка i { color: rgba(244, 244, 236, .62); }
  .шторка .что-в-цену .строка + .строка { border-top-color: rgba(184, 198, 85, .22); }
  .шторка .что-в-цену svg { stroke: var(--акцент); }
  

  .шторка .что-в-цену .текстом,
  .шторка .что-в-цену .текстом li,
  .шторка .что-в-цену .вопрос { color: var(--белый-на-чернилах); }
  .шторка .что-в-цену .текстом .ответ { color: rgba(244, 244, 236, .68); }
  .шторка .что-в-цену .текстом ul li::marker { color: var(--акцент); }

  



  

  .цена-руками {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap;
  }
  .цена-руками label { font-size: 13px; color: var(--текст-тихий); }
  .цена-руками input {
    width: 104px; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--плитка-край); background: var(--фон); color: var(--текст);
    font: inherit; font-size: 14px; font-weight: 600;
  }
  .цена-руками input:focus { outline: 2px solid var(--акцент); outline-offset: 1px; }
  .цена-руками .тире { color: var(--текст-тихий); }

  
  .бюджет-поле {
    width: 190px; margin: 0 auto; display: block; text-align: center;
    padding: 6px 10px; border-radius: 12px;
    border: 1px solid var(--плитка-край); background: var(--фон); color: var(--текст);
    font: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.8px;
  }
  .бюджет-поле:focus { outline: 2px solid var(--акцент); outline-offset: 1px; }

  .ценник { padding: 2px 14px 0; }
  .ценник-строка {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
  }
  .ценник-цифры { font-size: 15px; font-weight: 700; color: var(--текст); }
  .ценник-порядок {
    flex: none; background: none; border: 0; padding: 6px 2px;
    font-family: inherit; font-size: 13px; color: var(--текст-тихий);
    cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
  }
  

  .ценник-порядок svg { flex: none; display: block; }
  .ценник-порядок svg path { fill: currentColor; opacity: .35; }
  .ценник-порядок svg path.горит { opacity: 1; }
  .ценник-порядок.выбран { color: var(--акцент); font-weight: 600; }
  .ценник-порядок:active { opacity: .6; }

  .ценник-гист { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
  .ценник-гист div {
    flex: 1; background: var(--плитка-край); border-radius: 2px 2px 0 0;
    min-height: 3px; transition: background .15s;
  }
  .ценник-гист div.внутри { background: var(--акцент); }

  

  .ценник-дорожка { position: relative; height: 42px; touch-action: none; user-select: none; cursor: pointer; }
  .ценник-рельс {
    position: absolute; top: 19px; left: 0; right: 0; height: 4px;
    background: var(--плитка-край); border-radius: 999px;
  }
  .ценник-заливка { position: absolute; top: 19px; height: 4px; background: var(--акцент); border-radius: 999px; }
  .ценник-бегунок {
    position: absolute; top: 10px; width: 22px; height: 22px; margin-left: -11px;
    background: var(--акцент); border: 3px solid var(--фон); border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    transition: transform .12s;
  }
  .ценник-бегунок.тянут { transform: scale(1.25); }

  



  .мессенджеры { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
  .мессенджер {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    text-decoration: none; color: var(--текст) !important;
    background: var(--фон); border: 1px solid var(--плитка-край);
    transition: border-color .15s, background .15s;
  }
  .мессенджер:hover { border-color: var(--акцент); background: var(--крем); }
  .мессенджер::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
  .мессенджер.тг::before { background: #2aabee; }
  .мессенджер.вк::before { background: #0077ff; }
  .мессенджер.вотсап::before { background: #25d366; }

  


  @media (max-width: 760px) {
    

    .меню-строка { flex-wrap: wrap; overflow-x: visible; gap: 6px 18px; justify-content: center; }
    .меню-строка a { flex: 0 0 auto; font-size: 14px; padding: 6px 0; }
    .меню-строка a.акцентный { padding: 4px 12px; }
  }

  
  .галерея-сетка { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
  @media (min-width: 700px)  { .галерея-сетка { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) { .галерея-сетка { grid-template-columns: repeat(4, 1fr); } }
  .галерея-сетка .кадр-галереи {
    border: none; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
    aspect-ratio: 3/4; background: var(--плитка-край); transition: transform .12s;
  }
  .галерея-сетка .кадр-галереи:hover { transform: translateY(-2px); }
  .галерея-сетка img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .галерея-ещё {
    display: block; margin: 20px auto 0; padding: 12px 26px; border-radius: 40px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }

  
  .подвал { margin-top: 48px; background: var(--крем); border-top: 1px solid var(--плитка-край); }
  .подвал .внутри {
    max-width: 1120px; margin: 0 auto; padding: 30px 14px 90px;
    font-size: 12.5px; line-height: 1.6; color: var(--текст-тихий);
  }
  .подвал .колонки { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-bottom: 22px; }
  .подвал .колонка { min-width: 150px; }
  .подвал .колонка .шапка-колонки {
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--текст); margin-bottom: 10px;
  }
  .подвал .колонка a {
    display: block; padding: 3px 0; color: var(--текст-тихий);
    text-decoration: none; cursor: pointer;
  }
  .подвал .колонка a:hover { color: var(--акцент-глубокий); }
  .подвал img { height: 34px; width: auto; display: block; margin-bottom: 12px; }
  .подвал .контакты-подвала a { color: var(--текст-тихий); display: inline; padding: 0; }
  .подвал .подборки-подвала {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 16px;
    font-size: 11px; line-height: 1.7; opacity: .6;
  }
  .подвал .подборки-подвала a { display: inline; padding: 0; color: var(--текст-тихий); }
  .подвал .реквизиты { opacity: .72; border-top: 1px solid var(--плитка-край); padding-top: 14px; }

  
  .товар-обёртка { max-width: 1000px; margin: 0 auto; }
  @media (min-width: 900px) {
    

    .товар-обёртка { display: flex; gap: 24px; padding: 20px 14px 0; align-items: flex-start; }
    


    .товар-обёртка > .лево {
      flex: 0 0 46%; display: flex; flex-direction: column; min-width: 0;
      

      position: sticky; top: 14px;
    }
    .товар-обёртка .галерея { flex: none; height: min(72vh, 700px); border-radius: 18px; overflow: hidden; }
    .товар-обёртка .галерея .полоса { height: 100%; }
    .товар-обёртка .галерея img { height: 100%; aspect-ratio: auto; }
    .товар-обёртка .шторка {
      flex: 1; margin-top: 0 !important; border-radius: 20px !important;
      display: flex; flex-direction: column;
    }
    
    .товар-обёртка .шторка > .габариты { margin-top: auto; }
    


    .товар-обёртка .шторка > #блокРазмеров,
    .товар-обёртка .шторка > .габариты,
    .товар-обёртка .шторка > #опции,
    .товар-обёртка .шторка > .кол-во,
    .товар-обёртка .шторка > #главнаяКнопка { order: 1; }
  }
  
  @media (max-width: 899px) {
    .шторка > #блокРазмеров { margin-top: 14px; }
  }
  .галерея { position: relative; background: var(--плитка); }
  .галерея .полоса { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .галерея .полоса::-webkit-scrollbar { height: 0; }
  .галерея img { width: 100%; flex: none; aspect-ratio: 1/1; object-fit: cover; scroll-snap-align: center; display: block; }
  

  .миниатюры { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
  .миниатюры::-webkit-scrollbar { height: 0; }
  .миниатюры[hidden] { display: none; }
  .миниатюра {
    flex: none; width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
    border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--плитка);
  }
  .миниатюра img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .миниатюра.выбрана { border-color: var(--акцент); }
  @media (max-width: 899px) {
    
    .миниатюры { padding: 0 14px; margin-bottom: 22px; }
    .миниатюра { width: 62px; height: 62px; }
  }

  .точки { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
  .точка { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s; }
  .точка.активна { width: 18px; border-radius: 4px; background: #fff; }
  .стрелка-галереи {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.85); color: #2b2e26; font-size: 17px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .стрелка-галереи.лево { left: 10px; }
  .стрелка-галереи.право { right: 10px; }
  @media (hover: hover) and (pointer: fine) { .галерея:hover .стрелка-галереи { display: flex; } }

  .шторка {
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 20px 20px 0 0; margin-top: -20px; position: relative; padding: 16px 16px 24px;
  }
  .ручка { width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); margin: 0 auto 14px; }
  @media (min-width: 900px) { .ручка { display: none; } }
  .шторка h1, .шторка h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
  .шторка .название-с-размером { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
  .шторка .название-с-размером h1, .шторка .название-с-размером h2 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; }
  .шторка .цена-крупно { font-size: 24px; font-weight: 700; letter-spacing: -.6px; display: block; margin-bottom: 14px; }
  .шторка .цена-крупно s { font-size: 16px; font-weight: 500; opacity: .5; margin-left: 6px; }
  .шторка .описание { font-size: 14px; line-height: 1.65; opacity: .74; margin: 0 0 18px; white-space: pre-line; }
  .подзаголовок { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; opacity: .5; margin-bottom: 9px; }
  .размеры { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; scrollbar-width: none; }
  .размеры::-webkit-scrollbar { height: 0; }
  .размер {
    flex: 1 0 auto; min-width: 74px; cursor: pointer;
    background: var(--чернила-мягкая); border: 1.5px solid transparent;
    color: var(--белый-на-чернилах); border-radius: 12px; padding: 10px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .размер.выбран { border-color: var(--акцент); background: rgba(184,198,85,.15); }
  .размер .б { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
  .размер .м { font-size: 11.5px; opacity: .65; white-space: nowrap; }

  .габариты { font-size: 13px; opacity: .6; margin-bottom: 16px; }

  .опция {
    display: flex; align-items: center; gap: 11px; cursor: pointer; width: 100%;
    background: var(--чернила-мягкая); border: 1.5px solid transparent; color: var(--белый-на-чернилах);
    border-radius: 12px; padding: 12px 13px; margin-bottom: 16px; text-align: left;
  }
  .опция.выбран { border-color: var(--акцент); background: rgba(184,198,85,.15); }
  .опция .бокс {
    width: 20px; height: 20px; border-radius: 6px; flex: none;
    border: 1.5px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #22260c;
  }
  .опция.выбран .бокс { background: var(--акцент); border-color: var(--акцент); }
  .опция .т { font-size: 14px; font-weight: 600; }
  .опция .ц { margin-left: auto; font-size: 14px; font-weight: 700; }

  .кол-во { display: flex; align-items: center; gap: 14px; }
  .кол-во .лейбл { font-size: 13px; opacity: .6; }
  .кол-во .кнопки { display: flex; align-items: center; gap: 4px; margin-left: auto; background: var(--чернила-мягкая); border-radius: 40px; padding: 4px; }
  .кол-во button {
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: none; color: var(--белый-на-чернилах); font-size: 19px;
  }
  .кол-во button:active { background: rgba(255,255,255,.1); }
  .кол-во .число { min-width: 26px; text-align: center; font-size: 16px; font-weight: 700; }

  
  .позиция { display: flex; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--плитка-край); align-items: center; }
  

  .позиция img { width: 92px; height: 116px; object-fit: cover; border-radius: 12px; flex: none; }
  .позиция .тело { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .позиция .н { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .позиция .д { font-size: 12.5px; color: var(--текст-тихий); }

  

  @media (min-width: 700px) {
    .позиция { gap: 18px; padding: 18px 16px; }
    .позиция img, .авторский-значок { width: 150px; height: 190px; border-radius: 14px; }
    .позиция .н { font-size: 17px; }
    .позиция .д { font-size: 14px; }
    .позиция .ц { font-size: 18px; }
    .позиция .убрать { font-size: 24px; }
  }
  .позиция .убрать { background: none; border: 0; color: var(--текст-тихий); font-size: 20px; padding: 6px; cursor: pointer; }
  .авторский-значок {
    width: 58px; height: 72px; border-radius: 10px; flex: none;
    background: var(--чернила); color: var(--акцент);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
  }
  .позиция .ц { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

  .поле-ввода {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--текст);
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; padding: 13px 14px; margin-bottom: 8px;
  }
  .поле-ввода::placeholder { color: var(--текст-тихий); }
  .поле-ввода:focus { outline: none; border-color: var(--акцент); }
  textarea.поле-ввода { resize: none; min-height: 76px; line-height: 1.5; }

  .блок-поля { margin: 0 14px; }
  .блок-поля .поле-ввода { width: 100%; }

  .допродажа {
    flex: none; width: 106px; cursor: pointer; color: inherit;
    background: var(--плитка); border: 1.5px solid var(--плитка-край);
    border-radius: 14px; padding: 12px 11px; text-align: left;
    display: flex; flex-direction: column; gap: 4px;
  }
  .допродажа.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .допродажа .э { font-size: 21px; line-height: 1; }
  .допродажа .н { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .допродажа .ц { font-size: 12.5px; color: var(--текст-тихий); }
  .допродажа.выбран .ц { color: var(--акцент-глубокий); font-weight: 600; }

  .промо { display: flex; gap: 8px; }
  .промо .поле-ввода { margin-bottom: 0; text-transform: uppercase; }
  .промо .поле-ввода::placeholder { text-transform: none; }
  .кнопка-промо {
    flex: none; cursor: pointer; font-size: 14px; font-weight: 600;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border: 0; border-radius: 12px; padding: 0 18px;
  }
  .кнопка-промо:disabled { opacity: .5; }
  .промо-ответ { margin-top: 8px; font-size: 13px; line-height: 1.45; display: none; }
  .промо-ответ.виден { display: block; }
  .промо-ответ.удача { color: var(--акцент-глубокий); font-weight: 600; }
  .промо-ответ.мимо { color: #d94f3d; }

  .итоги { margin-top: 16px; padding: 14px; background: var(--плитка); border: 1px solid var(--плитка-край); border-radius: 14px; }
  .итоги .р.скидка b { color: var(--акцент-глубокий); }
  .итоги [hidden] { display: none !important; }
  .итоги .р { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--текст-тихий); }
  .итоги .р b { color: var(--текст); font-weight: 500; }
  .итоги .всего {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--плитка-край);
    font-size: 15px; font-weight: 600;
  }
  .итоги .всего b { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }

  
  .группа { margin: 18px 14px 0; }
  .группа > .лейбл {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--текст-тихий); margin-bottom: 9px; font-weight: 600;
  }
  
  

  .весть-выходного {
    position: sticky; top: 0; z-index: 40;   
    background: var(--акцент); color: #22260c;
    padding: 13px 16px; text-align: center; line-height: 1.4;
  }
  .весть-выходного[hidden] { display: none; }
  .весть-выходного b { display: block; font-size: 14.5px; font-weight: 700; }
  .весть-выходного span { display: block; font-size: 12.5px; font-weight: 500; opacity: .8; margin-top: 3px; }

  
  


  .кассы { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .касса {
    position: relative; cursor: pointer; text-align: left; font-family: inherit;
    background: var(--плитка); border: 1.5px solid var(--плитка-край); border-radius: 12px;
    padding: 12px 34px 12px 12px; color: var(--текст);
    display: flex; flex-direction: column; gap: 6px; min-height: 78px;
  }
  .касса.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .касса .т { font-size: 14px; font-weight: 600; line-height: 1.25; }
  .касса .п { font-size: 11.5px; line-height: 1.35; color: var(--текст-тихий); }
  .касса .кружок-выбора {
    position: absolute; top: 12px; right: 12px;
    width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--плитка-край);
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent;
  }
  .касса.выбран .кружок-выбора { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  .касса .лого { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; }
  .касса .знак {
    height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; letter-spacing: .2px;
  }
  .знак.сбп { background: linear-gradient(90deg,#1f8fff,#8f4bd8); color: #fff; }
  .знак.карты { background: rgba(0,0,0,.07); color: var(--текст-тихий); }

  

  .касса-япэй {
    position: relative; min-height: 78px; display: flex; cursor: pointer;
    border: 1.5px solid transparent; border-radius: 14px; padding: 2px;
  }
  .касса-япэй[hidden] { display: none; }
  .касса-япэй .место-кнопки { width: 100%; height: 100%; }
  
  .касса-япэй .ya-pay-button { height: 100% !important; width: 100% !important; }
  .касса-япэй .ya-pay-button iframe { height: 100% !important; width: 100% !important; }
  .касса-япэй .ловушка { position: absolute; inset: 0; z-index: 2; border-radius: 12px; }
  .касса-япэй .кружок-выбора {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 18px; height: 18px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 11px;
    display: none;   
  }
  .касса-япэй.выбран { border-color: var(--акцент); }
  .касса-япэй.выбран .кружок-выбора {
    display: flex; background: var(--акцент); color: #22260c;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  }

  .бейдж-сплита { margin: 8px 0 0; }
  .бейдж-сплита:empty { display: none; }

  .сегменты { display: flex; gap: 8px; }
  .сегмент {
    flex: 1; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--текст);
    background: var(--плитка); border: 1.5px solid var(--плитка-край); border-radius: 12px; padding: 12px 8px;
  }
  .сегмент.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); font-weight: 600; }
  
  .сегменты.ждёт-выбора .сегмент { border-color: var(--пудра); border-style: dashed; }
  .подпись-выбора {
    margin: 7px 2px 0; font-size: 12.5px; line-height: 1.45;
    color: var(--акцент-глубокий); font-weight: 500;
  }
  .подпись-доставки {
    margin: 9px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий);
  }

  .галка {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%;
    background: var(--плитка); border: 1.5px solid var(--плитка-край); color: inherit;
    border-radius: 12px; padding: 12px 13px; text-align: left; margin-top: 2px;
  }
  .галка.выбран { border-color: var(--акцент); background: rgba(184,198,85,.13); }
  .галка .бокс {
    width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px;
    border: 1.5px solid var(--текст-тихий);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent;
  }
  .галка.выбран .бокс { background: var(--акцент); border-color: var(--акцент); color: #22260c; }
  #поляПолучателя { margin-top: 8px; }
  .галка .т { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
  .галка .п { display: block; font-size: 12.5px; color: var(--текст-тихий); line-height: 1.45; margin-top: 2px; }

  .ошибка-поля { border-color: #d9534f !important; }
  .подсказка-самовывоз {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 12px; padding: 13px 14px;
    font-size: 13.5px; line-height: 1.55; color: var(--текст-тихий);
  }
  .подсказка-самовывоз b { color: var(--текст); }

  .сноска { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--текст-тихий); }
  .сноска a { color: var(--акцент-глубокий); text-decoration: underline; text-underline-offset: 2px; }

  
  .готово { padding: 48px 24px 24px; text-align: center; }
  .кружок {
    width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 18px;
    background: var(--акцент); color: #22260c;
    display: flex; align-items: center; justify-content: center; font-size: 34px;
  }
  .готово .номер { font-size: 23px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 10px; }
  .готово .текст { font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .готово .к-оплате {
    display: inline-block; margin-top: 20px; padding: 14px 26px; border-radius: 12px;
    background: var(--акцент); color: #22260c; text-decoration: none;
    font-size: 15px; font-weight: 700;
  }
  

  .готово .к-оплате[hidden] { display: none; }

  

  

  #чтоВЦенуТовар .что-в-цену { margin: 16px 0 12px; }
  #блокиТовара .что-в-цену { margin: 0 0 12px; }
  #блокиТовара .что-в-цену:last-child { margin-bottom: 18px; }
  .что-в-цену .текстом { font-size: 14px; line-height: 1.55; color: var(--текст); }
  .что-в-цену .текстом p { margin: 0 0 8px; }
  .что-в-цену .текстом p:last-child { margin-bottom: 0; }
  .что-в-цену .текстом ul { margin: 0; padding-left: 18px; }
  .что-в-цену .текстом li { padding: 3px 0; }
  .что-в-цену .вопрос { font-weight: 600; margin-top: 10px; }
  .что-в-цену .вопрос:first-child { margin-top: 0; }
  .что-в-цену .ответ { color: var(--текст-тихий); margin: 2px 0 0; }

  

  .для-поиска { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
  .для-поиска h1 { font-size: 26px; line-height: 1.2; margin: 10px 0 6px; }
  .для-поиска h2 { font-size: 18px; margin: 18px 0 6px; }
  .для-поиска img { width: 100%; max-width: 560px; border-radius: 18px; display: block; margin: 12px 0; }
  .для-поиска .цена-крупно { font-size: 22px; font-weight: 800; color: var(--акцент-глубокий); }
  .для-поиска ul { margin: 0; padding-left: 20px; }
  .для-поиска .хлебные { font-size: 13.5px; color: var(--текст-тихий); }
  .для-поиска .кнопка {
    display: inline-block; margin-top: 14px; padding: 12px 22px; border-radius: 40px;
    background: var(--акцент); color: #22260c; text-decoration: none; font-weight: 700;
  }

  
  .оценка-товара { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; flex-wrap: wrap; }
  .оценка-товара[hidden] { display: none; }
  .звёзды { display: inline-flex; gap: 2px; font-size: 19px; line-height: 1; color: #d8d8c8; }
  .звёзды .звезда { cursor: default; }
  .звёзды .звезда.горит { color: #f0a92b; }
  .звёзды.можно .звезда { cursor: pointer; }
  .звёзды.можно .звезда:hover { transform: scale(1.12); }
  .оценка-подпись { font-size: 13.5px; color: var(--текст-тихий); }
  
  .карточка .оценка-мини {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--текст-тихий); margin-top: 2px;
  }
  .карточка .оценка-мини b { color: var(--текст); font-weight: 700; }
  .карточка .оценка-мини .звезда { color: #f0a92b; font-size: 13px; }
  .связь-после {
    margin: 22px auto 0; max-width: 380px; padding: 16px 16px 14px;
    border: 1px solid var(--плитка-край); border-radius: 16px;
  }
  .связь-после p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--текст-тихий); }
  .телефон-после {
    display: inline-block; font-size: 21px; font-weight: 700; letter-spacing: -.3px;
    color: var(--текст); text-decoration: none;
  }
  .связь-после .мессенджеры { justify-content: center; margin: 12px 0 0; }

  
  .загрузка { padding: 80px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; }
  .колесо {
    width: 28px; height: 28px; margin: 0 auto 14px;
    border: 3px solid var(--плитка-край); border-top-color: var(--акцент);
    border-radius: 50%; animation: вращение .8s linear infinite;
  }
  @keyframes вращение { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .колесо { animation: none; } }

  






  @media (max-width: 699px) {
    body.печатает .главная-кнопка:not(.в-потоке),
    body.печатает .корзина-угол { display: none; }
  }

  
  .главная-кнопка {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 14px; z-index: 50;
    width: min(592px, calc(100% - 28px));
    padding: 16px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--акцент); color: #22260c;
    font-size: 16px; font-weight: 700; letter-spacing: -.2px;
    box-shadow: 0 8px 26px rgba(43,46,38,.28);
    display: none; align-items: center; justify-content: center; gap: 10px;
    transition: transform .1s;
  }
  .главная-кнопка.видна { display: flex; }
  

  .главная-кнопка.в-потоке {
    position: static; transform: none;
    width: 100%; margin: 14px 0 0; box-shadow: none;
  }
  .главная-кнопка.в-потоке:active { transform: scale(.985); }
  .главная-кнопка:active { transform: translateX(-50%) scale(.985); }
  .главная-кнопка:disabled { opacity: .6; cursor: default; }
  .главная-кнопка .колесо { width: 18px; height: 18px; border-width: 2px; margin: 0; border-color: rgba(34,38,12,.25); border-top-color: #22260c; }

  
  .справка-фон {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity .18s;
  }
  .справка-фон.видна { opacity: 1; }
  .справка-панель {
    width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto;
    background: var(--фон); color: var(--текст);
    border-radius: 20px 20px 0 0; padding: 8px 18px 24px;
    transform: translateY(14px); transition: transform .18s;
  }
  @media (min-width: 700px) {
    .справка-фон { align-items: center; }
    .справка-панель { border-radius: 20px; }
  }
  .справка-фон.видна .справка-панель { transform: translateY(0); }
  .справка-панель .ручка-справки { width: 36px; height: 4px; border-radius: 4px; background: var(--плитка-край); margin: 6px auto 14px; }
  .справка-панель h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
  .справка-панель ul { margin: 0; padding: 0; list-style: none; }
  .справка-панель li { font-size: 14px; line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--плитка-край); }
  .справка-панель li:last-child { border-bottom: none; }
  .справка-панель li a { color: var(--акцент-глубокий); text-decoration: underline; text-underline-offset: 3px; }
  .справка-панель .сноска-справки { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий); }
  .справка-панель .закрыть-справку {
    margin-top: 16px; width: 100%; padding: 13px; border: none; border-radius: 12px;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }

  
  .бриф-шапка { position: sticky; top: 92px; z-index: 5; padding: 14px 14px 10px; background: var(--фон); }
  .бриф-полоса { height: 3px; background: var(--плитка-край); border-radius: 2px; overflow: hidden; }
  .бриф-полоса i { display: block; height: 100%; background: var(--акцент); border-radius: 2px; transition: width .3s ease; }
  .бриф-счётчик { margin-top: 7px; font-size: 11.5px; color: var(--текст-тихий); letter-spacing: .3px; }

  .бриф-вопрос {
    position: relative; z-index: 1;
    margin: 6px 14px 0; font-size: 22px; line-height: 1.25;
    font-weight: 700; letter-spacing: -.5px; color: var(--текст);
  }
  .бриф-подсказка { margin: 7px 14px 0; font-size: 13.5px; line-height: 1.5; color: var(--текст-тихий); }
  .бриф-тело { margin: 18px 14px 0; display: flex; flex-direction: column; gap: 9px; }

  .вариант {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 15px; border: 1.5px solid var(--плитка-край); background: var(--плитка);
    border-radius: 13px; font: inherit; color: var(--текст); cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
  }
  .вариант:hover { border-color: var(--акцент); }
  .вариант:active { transform: scale(.985); }
  .вариант .знак { font-size: 21px; line-height: 1; flex: 0 0 auto; }
  .вариант .подпись { font-size: 15px; font-weight: 600; }
  .вариант .пояснение { display: block; font-size: 12.5px; font-weight: 400; color: var(--текст-тихий); margin-top: 2px; }
  .вариант.выбран { border-color: var(--акцент); background: rgba(184,198,85,.14); }

  
  @media (min-width: 900px) { .бриф-колонка { max-width: 980px; } }
  @media (min-width: 700px) {
    .бриф-выбор { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .бриф-фото { grid-template-columns: repeat(3, 1fr) !important; }
    .бриф-подбор { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .бриф-подбор .ранняя-доставка,
    .бриф-подбор .подбор-ждём,
    .бриф-подбор .бриф-ещё,
    .бриф-подбор .бриф-в-корзину,
    .бриф-подбор .бриф-заново { grid-column: 1 / -1; }
    .бриф-бюджет { max-width: 560px; }
    .бриф-важное { max-width: 660px; }
  }

  .бриф-фото { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .бриф-фото .кадр {
    position: relative; aspect-ratio: 3/4; border-radius: 13px; overflow: hidden;
    border: 2.5px solid transparent; background: var(--плитка); cursor: pointer;
  }
  .бриф-фото .кадр img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .бриф-фото .кадр.выбран { border-color: var(--акцент); }
  .бриф-фото .кадр .галка-фото {
    position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--акцент); color: #22260c; font-size: 14px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .бриф-фото .кадр.выбран .галка-фото { display: flex; }

  .бюджет-сумма { text-align: center; font-size: 34px; font-weight: 700; letter-spacing: -1px; color: var(--текст); margin-bottom: 2px; }
  .бюджет-реакция { text-align: center; font-size: 16px; font-weight: 600; color: var(--акцент-глубокий); min-height: 22px; margin-bottom: 18px; }
  .бюджет-ползунок { width: 100%; margin: 0; accent-color: var(--акцент); }
  .бюджет-края { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--текст-тихий); }

  .бриф-метки { display: flex; flex-wrap: wrap; gap: 8px; }
  .бриф-метки .метка-брифа {
    padding: 9px 13px; border-radius: 20px; border: 1.5px solid var(--плитка-край);
    background: var(--плитка); font-size: 13.5px; font-weight: 600; color: var(--текст); cursor: pointer;
  }
  .бриф-метки .метка-брифа.выбран { border-color: var(--акцент); background: rgba(184,198,85,.14); }
  .бриф-поле {
    width: 100%; margin-top: 12px; padding: 13px 14px; border-radius: 13px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
    font: inherit; font-size: 15px; resize: vertical; min-height: 84px;
  }
  .бриф-поле:focus { outline: none; border-color: var(--акцент); }

  .подбор-карточка {
    border: 1.5px solid var(--плитка-край); background: var(--плитка);
    border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 9px;
  }
  .подбор-карточка .шапка { display: flex; align-items: baseline; gap: 10px; }
  .подбор-карточка .номер { font-size: 12px; font-weight: 700; color: var(--текст-тихий); letter-spacing: .4px; }
  .подбор-карточка .цена { margin-left: auto; font-size: 19px; font-weight: 700; letter-spacing: -.5px; }
  .подбор-карточка .состав { display: flex; flex-direction: column; gap: 5px; }
  .подбор-карточка .строка-состава { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
  .подбор-карточка .строка-состава span:last-child { color: var(--текст-тихий); white-space: nowrap; }
  .подбор-карточка .примечание { font-size: 12.5px; color: var(--текст-тихий); line-height: 1.45; }
  .подбор-карточка .взять {
    margin-top: 3px; padding: 12px; border-radius: 11px; border: none;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 15px;
    font-weight: 700; cursor: pointer;
  }
  
  .подбор-карточка .взять.взят { background: var(--плитка); border: 1.5px solid var(--акцент); color: var(--текст); }
  
  .подбор-карточка .похожие {
    margin-top: 7px; padding: 10px; border-radius: 11px;
    border: 1px solid var(--плитка-край); background: transparent;
    color: var(--текст-тихий); font: inherit; font-size: 14px; cursor: pointer;
  }
  .подбор-карточка .похожие:hover { background: rgba(127, 127, 127, .1); }
  
  .бриф-ещё {
    display: block; width: 100%; margin: 22px 0 0; padding: 15px 22px; border-radius: 14px;
    border: 1.5px solid var(--акцент); background: transparent; color: var(--акцент-глубокий);
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .бриф-ещё:disabled { opacity: .55; cursor: default; }
  .бриф-в-корзину {
    display: block; width: 100%; margin: 18px 0 0; padding: 15px 22px; border-radius: 14px;
    border: none; background: var(--акцент); color: #22260c;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .подбор-ждём { padding: 40px 14px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; }

  .эскиз-место { position: relative; border-radius: 11px; overflow: hidden; background: var(--фон); min-height: 92px; }
  .эскиз-место .эскиз { width: 100%; display: block; }
  


  .эскиз-ждём {
    position: relative; overflow: hidden;
    min-height: 168px; padding: 26px 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  }
  .эскиз-ждём .налив {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
    background: linear-gradient(to top, rgba(184, 198, 85, .34), rgba(184, 198, 85, .08));
    border-top: 1px solid rgba(184, 198, 85, .55);
    transition: height .9s ease;
  }
  .эскиз-ждём .доля {
    position: relative; font-size: 34px; font-weight: 800; letter-spacing: -1.3px;
    line-height: 1; color: var(--акцент-глубокий);
  }
  html.тёмная .эскиз-ждём .доля { color: var(--акцент); }
  .эскиз-ждём .чем-занят { position: relative; font-size: 14px; font-weight: 700; color: var(--текст); }
  .эскиз-ждём .мелко-ждём { position: relative; font-size: 12px; color: var(--текст-тихий); }
  .эскиз-метка {
    position: absolute; left: 9px; bottom: 9px; padding: 3px 9px; border-radius: 6px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
  }

  .бонусы-строка {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; background: var(--плитка); border: 1.5px solid var(--плитка-край);
    border-radius: 13px;
  }
  .бонусы-текст { flex: 1; min-width: 0; }
  .бонусы-текст b { display: block; font-size: 15px; font-weight: 700; }
  .бонусы-текст span { font-size: 12.5px; color: var(--текст-тихий); }
  .переключатель { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
  .переключатель input { position: absolute; opacity: 0; width: 0; height: 0; }
  .переключатель .ползун {
    position: absolute; inset: 0; background: var(--плитка-край); border-radius: 20px;
    transition: background .18s; cursor: pointer;
  }
  .переключатель .ползун::before {
    content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }
  .переключатель input:checked + .ползун { background: var(--акцент); }
  .переключатель input:checked + .ползун::before { transform: translateX(20px); }

  .телефон-блок { display: flex; gap: 8px; margin: 10px 14px 0; }
  .телефон-блок .поле-ввода { flex: 1; margin-bottom: 0; }
  .кн-телефон {
    padding: 0 16px; border-radius: 11px; border: none; background: var(--акцент);
    color: #22260c; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }

  .готово-плашка {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 55;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 13px 15px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
    font-size: 14.5px; font-weight: 600;
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  html.тёмная .готово-плашка { background: var(--акцент); color: #22260c; }
  
  .плашка-оплаты {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 56;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 13px 12px 13px 15px;
    background: var(--чернила); color: var(--белый-на-чернилах);
    border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  .плашка-оплаты .текст { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .плашка-оплаты .текст b { font-size: 14.5px; font-weight: 700; }
  .плашка-оплаты .текст span { font-size: 12.5px; line-height: 1.4; opacity: .78; }
  .плашка-оплаты .оплатить {
    margin-left: auto; padding: 9px 16px; border-radius: 10px;
    background: var(--акцент); color: #22260c; font-size: 14px; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex: none;
  }
  .плашка-оплаты .закрыть {
    flex: none; width: 28px; height: 28px; border: none; background: transparent;
    color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  }
  html.тёмная .плашка-оплаты { background: #2f3226; }
  @keyframes всплыть { from { transform: translate(-50%, 24px); opacity: 0; } }
  .готово-плашка .открыть {
    margin-left: auto; padding: 7px 14px; border-radius: 9px; border: none;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 13.5px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  html.тёмная .готово-плашка .открыть { background: #22260c; color: var(--акцент); }
  .готово-плашка .закрыть {
    border: none; background: transparent; color: inherit; opacity: .6;
    font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px;
  }

  .ранняя-доставка {
    margin: 0 0 16px; padding: 14px; border-radius: 15px;
    background: var(--плитка); border: 1px solid var(--плитка-край);
  }
  .ранняя-доставка.готово { border-color: var(--акцент); }
  .ранняя-доставка .статус { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
  .ранняя-доставка .статус .колесо { width: 15px; height: 15px; border-width: 2px; margin: 0; }
  .ранняя-доставка .пояснение { font-size: 12.5px; line-height: 1.45; color: var(--текст-тихий); margin-bottom: 12px; }
  .ранняя-доставка .лейбл { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--текст-тихий); margin: 12px 0 7px; }
  .ранняя-доставка .поле-ввода { margin-bottom: 8px; width: 100%; }
  .ранняя-доставка .поле-ввода:last-child { margin-bottom: 0; }
  .ранняя-доставка .лента { padding: 0; }
  .ранняя-доставка .самовывоз-подсказка { font-size: 12.5px; line-height: 1.5; color: var(--текст-тихий); margin-top: 10px; }

  .кабинет-шапка {
    margin: 14px 14px 0; padding: 16px; border-radius: 14px;
    background: linear-gradient(100deg, var(--акцент) 0%, #cdd97e 100%); color: #22260c;
  }
  .кабинет-шапка .имя { font-size: 17px; font-weight: 700; }
  .кабинет-шапка .баллы { margin-top: 9px; font-size: 27px; font-weight: 700; letter-spacing: -.8px; }
  .кабинет-шапка .подпись { font-size: 12.5px; opacity: .75; margin-top: 2px; }

  .заказ-карточка {
    display: flex; gap: 12px; padding: 13px; margin: 0 14px 9px;
    border: 1.5px solid var(--плитка-край); background: var(--плитка); border-radius: 13px;
  }
  .заказ-карточка .миниатюра { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: var(--фон); }
  .заказ-карточка .значок-вместо-фото {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--акцент-глубокий); background: var(--плитка);
  }
  .заказ-карточка .данные { flex: 1; min-width: 0; }
  .заказ-карточка .строка-1 { display: flex; align-items: baseline; gap: 8px; }
  .заказ-карточка .номер { font-size: 14.5px; font-weight: 700; }
  .заказ-карточка .сумма { margin-left: auto; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
  .заказ-карточка .состав {
    font-size: 12.5px; color: var(--текст-тихий); margin-top: 3px; line-height: 1.4;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .заказ-карточка .низ { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
  .заказ-карточка .дата { font-size: 11.5px; color: var(--текст-тихий); }
  .ярлык { padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
  .ярлык.оплачен { background: rgba(120,170,60,.18); color: var(--акцент-глубокий); }
  .ярлык.ждёт { background: rgba(200,140,40,.16); color: #a4700f; }
  html.тёмная .ярлык.ждёт { color: #d8a13f; }
  .повторить {
    margin-left: auto; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--плитка-край);
    background: transparent; color: var(--текст); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .кабинет-пусто { padding: 50px 24px; text-align: center; color: var(--текст-тихий); font-size: 14.5px; line-height: 1.6; }

  .бриф-заново {
    display: block; margin: 20px auto 0; padding: 12px 22px; border-radius: 12px;
    border: 1.5px solid var(--плитка-край); background: transparent; color: var(--текст-тихий);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }

  .авторский-шапка { padding: 20px 14px 0; }
  .авторский-шапка h2 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
  .авторский-шапка p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--текст-тихий); }

  




  .похожие { max-width: 1120px; margin: 30px auto 0; padding: 0 14px; }
  .похожие[hidden] { display: none; }
  .похожие h3 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.3px; }
  .похожие a { text-decoration: none; color: inherit; }
  .похожие-строка { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .похожие-все { font-size: 13.5px; font-weight: 700; color: var(--акцент-глубокий); white-space: nowrap; }
  .похожие .цена { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
  .похожие .цена s { font-size: 12.5px; font-weight: 500; color: var(--текст-тихий); margin-left: 3px; }

  
  .похожие.в2 .похожие-место { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .похожие.в2 .похожий {
    display: flex; flex-direction: column; background: var(--плитка);
    border: 1px solid var(--плитка-край); border-radius: 14px; overflow: hidden;
    transition: transform .12s, box-shadow .12s;
  }
  .похожие.в2 .похожий:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,46,38,.08); }
  .похожие.в2 .похожий img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--плитка-край);
  }
  .похожие.в2 .низ { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
  .похожие.в2 .имя {
    font-size: 12.5px; line-height: 1.35; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px;
  }

  
  .похожие.сбоку { max-width: none; margin: 0; padding: 0; }
  .похожие.сбоку h3 { font-size: 15px; margin: 0 0 10px; color: var(--текст-тихий); font-weight: 700; }
  .похожие.сбоку .похожие-место { display: flex; flex-direction: column; gap: 14px; }
  .похожие.сбоку .похожий img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; display: block;
    background: var(--плитка-край); transition: transform .12s;
  }
  .похожие.сбоку .похожий:hover img { transform: translateY(-2px); }
  .похожие.сбоку .низ { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
  .похожие.сбоку .имя {
    font-size: 12px; line-height: 1.3; color: var(--текст-тихий);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .похожие.сбоку .цена { font-size: 14px; }
  .похожие.сбоку .похожие-все { display: block; margin-top: 10px; font-size: 12.5px; }

  @media (min-width: 1280px) {
    
    .товар-обёртка.с-боком { max-width: 1210px; }
    

    .товар-обёртка.с-боком .похожие.сбоку {
      flex: 0 0 176px; position: sticky; top: 14px;
      height: min(72vh, 700px); display: flex; flex-direction: column; min-height: 0;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место {
      overflow-y: auto; min-height: 0; padding-right: 6px;
      scrollbar-width: thin; scrollbar-color: var(--плитка-край) transparent;
      

      scroll-snap-type: y proximity; scroll-behavior: smooth;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожий { scroll-snap-align: start; }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место::-webkit-scrollbar { width: 6px; }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место::-webkit-scrollbar-thumb {
      background: var(--плитка-край); border-radius: 3px;
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-низ {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-верх {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px);
              mask-image: linear-gradient(to bottom, transparent, #000 40px);
    }
    .товар-обёртка.с-боком .похожие.сбоку .похожие-место.тает-верх.тает-низ {
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
              mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }
  }
  @media (max-width: 1279px) { .похожие.сбоку { display: none !important; } }
  @media (max-width: 1000px) { .похожие.в2 .похожие-место { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px) {
    .похожие { margin-top: 24px; }
    .похожие-строка { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; }
    .похожие.в2 .похожие-место { grid-template-columns: 1fr 1fr; gap: 11px; }
    
    .похожие.в2 .похожий:nth-child(n+5) { display: none; }
  }

  @media (max-width: 899px) {
    

    body[data-экран="товар"] .назад-строка {
      position: relative; z-index: 6; height: 0; padding: 0; overflow: visible;
      
      align-items: flex-start;
    }
    body[data-экран="товар"] .назад-строка span { display: none; }
    body[data-экран="товар"] .назад-строка button {
      position: relative; top: 12px; left: 12px;
      width: 38px; height: 38px; padding: 0; border-radius: 50%;
      font-size: 0; border-color: transparent;
      background: rgba(255,255,255,.92); color: #2b2e26;
      box-shadow: 0 2px 10px rgba(43,46,38,.2);
      display: flex; align-items: center; justify-content: center;
    }
    body[data-экран="товар"] .назад-строка button::before {
      content: '←'; font-size: 19px; font-weight: 700; line-height: 1;
    }

    


    .лист[data-лист="товар"] { padding-bottom: 18px; }
    .подвал { padding-bottom: 104px; }
    

    .лист[data-лист="главная"] { padding-bottom: 0; }
  }


  

  .текст-раздела { max-width: 860px; padding: 16px 0 6px; }
  .текст-раздела[hidden] { display: none; }
  .текст-раздела .хлебные { font-size: 13px; color: var(--текст-тихий); }
  .текст-раздела .хлебные a { color: var(--текст-тихий); }
  .текст-раздела h1 { font-size: 27px; line-height: 1.18; margin: 8px 0 8px; letter-spacing: -.6px; }
  .текст-раздела p { font-size: 14.5px; line-height: 1.62; color: var(--текст-тихий); margin: 0 0 10px; }
  .текст-раздела.низ { padding-top: 38px; }
  .текст-раздела.низ h2 { font-size: 19px; margin: 24px 0 8px; letter-spacing: -.3px; color: var(--текст); }
  .текст-раздела.низ p { color: var(--текст); opacity: .82; }
  .текст-раздела details { border-bottom: 1px solid var(--плитка-край); padding: 11px 0; }
  .текст-раздела summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--текст); }
  .текст-раздела details p { margin: 8px 0 2px; }
  .текст-раздела .подборки { display: flex; flex-wrap: wrap; gap: 8px; }
  .текст-раздела .подборки a {
    border: 1px solid var(--плитка-край); border-radius: 999px; padding: 7px 13px;
    font-size: 13.5px; text-decoration: none; color: var(--текст); background: var(--плитка);
  }
  .текст-раздела .подборки a:hover { border-color: var(--акцент); }
  @media (max-width: 640px) { .текст-раздела h1 { font-size: 23px; } }

  


  .плашка-корзины {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 55;
    width: min(560px, calc(100% - 28px));
    display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
    background: var(--чернила); color: var(--белый-на-чернилах);
    animation: всплыть .28s cubic-bezier(.22,.61,.36,1);
  }
  html.тёмная .плашка-корзины { background: #2f3226; }
  .плашка-корзины img, .плашка-корзины .значок {
    width: 46px; height: 56px; border-radius: 10px; object-fit: cover; flex: none;
  }
  .плашка-корзины .значок { display: flex; align-items: center; justify-content: center;
    background: var(--чернила-мягкая); color: var(--акцент); font-size: 20px; }
  .плашка-корзины .текст { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .плашка-корзины .текст > b { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
  .плашка-корзины .текст span { font-size: 12.5px; line-height: 1.4; opacity: .8; }
  .плашка-корзины .текст span b { color: var(--акцент); }
  .плашка-корзины .оформить {
    margin-left: auto; padding: 10px 15px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--акцент); color: #22260c; font: inherit; font-size: 14px; font-weight: 700;
    white-space: nowrap; flex: none;
  }
  .плашка-корзины .закрыть {
    flex: none; width: 26px; height: 26px; border: none; background: transparent;
    color: inherit; opacity: .55; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  }

  
  #спроситьФлориста { margin: 6px 14px 4px; }
  .флорист { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px; border-radius: 14px; background: var(--голубой-светлый); }
  html.тёмная .флорист { background: #2f3226; }
  .флорист-лицо { width: 42px; height: 42px; border-radius: 50%; background: var(--плитка);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
  .флорист .текст { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
  .флорист .текст b { font-size: 14.5px; }
  .флорист .текст span { font-size: 12.5px; color: var(--текст-тихий); line-height: 1.4; }
  .флорист-кнопки { display: flex; gap: 8px; width: 100%; }
  .флорист-кнопки a {
    flex: 1; justify-content: center;
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--плитка-край); background: var(--плитка); color: var(--текст);
  }
  .флорист-кнопки a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
  .флорист-кнопки a.вотсап::before { background: #25d366; }
  .флорист-кнопки a.тг::before { background: #2aabee; }
  .флорист-кнопки a:hover { border-color: var(--акцент); }

  






  @media (min-width: 1280px) {
    .товар-обёртка.с-боком .шторка { min-width: 0; }
    .товар-обёртка.с-боком .размеры:has(> .размер:nth-child(5)) {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    }
  }

  




  a.карточка { text-decoration: none; }   
  .подб-низ { padding-top: 44px; }
  .подб-низ[hidden] { display: none; }
  .подб-статья {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .подб-абзац {
    background: var(--плитка); border: 1px solid var(--плитка-край);
    border-radius: 20px; padding: 22px 22px 16px;
  }
  .подб-абзац h2 {
    margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25;
  }
  .подб-абзац p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--текст-тихий); }
  .подб-абзац a { color: var(--акцент-глубокий); font-weight: 700; text-decoration: none; }
  .подб-блок { margin-top: 44px; }
  .подб-блок .заголовок-блока { margin: 0 0 4px; }
  .подб-блок .заголовок-блока ~ .заголовок-блока { margin-top: 22px; }
  .подб-ссылки { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  .подб-ссылки .чип { text-decoration: none; display: inline-block; }
  




  #ценник.кат-цена { min-height: 0; }
  .кат-цена {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-top: 12px;
  }
  .кат-цена .цена-руками { margin: 0; gap: 6px; flex-wrap: nowrap; }
  .кат-цена .цена-руками label { font-size: 13.5px; color: var(--текст-тихий); white-space: nowrap; }
  .кат-цена .цена-руками input {
    width: 96px; padding: 8px 14px; border-radius: 40px;
    background: var(--плитка); font-size: 13.5px; font-weight: 600;
  }
  .кат-порядок { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
  .кат-порядок svg { flex: none; display: block; }
  .кат-порядок svg path { fill: currentColor; opacity: .35; }
  .кат-порядок svg path.горит { opacity: 1; }
  


  html.экран-не-главная .лист[data-лист="главная"] { display: none; }
  html.экран-не-главная #загрузка[hidden] { display: block; }
  @media (max-width: 640px) {
    .подб-низ { padding-top: 34px; }
    .подб-абзац { padding: 18px 18px 12px; border-radius: 16px; }
    .подб-блок { margin-top: 34px; }
    .подб-ссылки .чип { padding: 8px 12px; font-size: 13px; }
    .кат-полно { display: none; }   
    
    .кат-цена .цена-руками input { width: 74px; padding: 7px 10px; font-size: 16px; font-weight: 500; }
    .кат-цена .цена-руками label { font-size: 13px; }
  }
  





  @media (min-width: 900px) {
    .товар-обёртка .шторка { min-width: 0; }
    .товар-обёртка .размеры:has(> .размер:nth-child(5)) {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    }
  }












:root {
  --акцент: #b8c655;            
  --акцент-глубокий: #5f6d1c;
  --крем: #ffffff;
  --фон: #ffffff;
  --голубой: #ffffff;
  --голубой-светлый: #f6f6f4;
  --пудра: #f4f4f2;
  --пудра-светлая: #f6f6f4;
  --плитка: #ffffff;
  --плитка-край: #e9e9e6;
  --чернила: #1a1a1a;
  --чернила-мягкая: #333333;
  --текст: #1a1a1a;
  --текст-тихий: #777773;
  --белый-на-чернилах: #ffffff;
  --серая-плитка: #f4f4f1;
}


.шапка-сайта { background: #ffffff; }
.меню-строка a.акцентный { border-color: var(--плитка-край); color: var(--текст); }
.меню-строка a.акцентный:hover { background: #f6f6f4; color: var(--текст); }


@media (max-width: 640px) {
  .шапка-сайта .меню-строка {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 0 18px; padding: 4px 0 2px;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .шапка-сайта .ряд { padding-bottom: 6px; row-gap: 6px; }
}



.шапка-право { gap: 8px; }
.шапка-телефон { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; margin-right: 10px; text-align: right; }
.шапка-телефон span { font-size: 12px; font-weight: 500; color: var(--текст-тихий); margin-top: 2px; }
.шапка-телефон .б-часы { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.шапка-кнопка {
  width: 42px; height: 42px; border: 0;
  background: var(--серая-плитка); color: var(--текст); transition: background .15s;
}
.шапка-кнопка:hover { background: #e8e8e4; }
.шапка-кнопка svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.шапка-кнопка .число-в-шапке {
  top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--текст); color: #ffffff; font-size: 11px; font-weight: 700;
  border-radius: 9px; box-shadow: 0 0 0 2px #ffffff;
}
@media (max-width: 640px) {
  .шапка-кнопка { width: 38px; height: 38px; }
  .шапка-кнопка svg { width: 19px; height: 19px; }
  .шапка-телефон { font-size: 14px; margin-right: 4px; }
  .шапка-телефон .б-часы { display: none; }
}




.связь { position: relative; display: flex; align-items: center; flex: none; margin-right: 10px; }
.связь .шапка-телефон { margin-right: 0; cursor: pointer; }
.связь-меню {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 214px; padding: 6px;
  background: #ffffff; border: 1px solid var(--плитка-край); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(26, 26, 26, .14);
}
.связь-меню[hidden] { display: none; }
.связь-заголовок { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--текст-тихий); }
.связь-пункт {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px;
  text-decoration: none; color: var(--текст); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.связь-пункт:hover, .связь-пункт:focus-visible { background: var(--серая-плитка); color: var(--текст); }
.связь-пункт i {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.связь-пункт svg { width: 15px; height: 15px; fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.связь-пункт.ва i { background: #25d366; }
.связь-пункт.тг i { background: #2aabee; }
.связь-пункт.макс i { background: linear-gradient(135deg, #3d8bff, #8b3dff); }
.связь-пункт.звонок i { background: #1a1a1a; }
@media (max-width: 640px) {
  .связь { margin-right: 4px; }
}


.б-часы i { width: 7px; height: 7px; border-radius: 50%; background: #3bb54a; flex: none; }
.б-часы.закрыто i { background: #c9c9c4; }


.акции-строка { background: #f6f6f4; border-bottom: 1px solid var(--плитка-край); }
.бегущая { animation: none; width: auto; justify-content: center; flex-wrap: wrap; gap: 2px 28px; padding: 9px 14px; }
.бегущая span {
  flex: 0 1 auto; padding: 0; color: var(--текст); text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; white-space: normal; text-align: center;
}
.акция-кратко { display: none; }
@media (max-width: 699px) {
  .бегущая > span:nth-child(2) { display: none; }
  
  .акция-полно { display: none; }
  .бегущая .акция-кратко { display: inline; }
  .бегущая > span:first-child, .бегущая .акция-кратко { white-space: nowrap; }
}
@media (max-width: 350px) { .бегущая > span:first-child { font-size: 12px; } }
.б-код {
  font: inherit; font-weight: 800; cursor: pointer; color: var(--текст);
  background: #ffffff; border: 1px dashed #b9b9b4; border-radius: 6px;
  padding: 1px 7px; margin: 0 2px; transition: background .15s, border-color .15s;
}
.б-код:hover { border-color: var(--текст); }
.б-код.скопирован { background: #e3f5e1; border-color: #3bb54a; border-style: solid; }




.бенто-обёртка { max-width: 1120px; margin: 16px auto 0; padding: 0 14px; }
.бенто { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 12px; }
.б-плитка {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--серая-плитка); color: var(--текст);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.б-плитка, button.б-плитка { text-decoration: none; cursor: pointer; border: 0; font: inherit; text-align: left; }

a.б-плитка:hover, button.б-плитка:hover, .б-дня:hover, .бенто .баннер:hover {
  transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
}

.б-главная {
  grid-column: 1 / 3; grid-row: 1 / 3;
  padding: 30px 32px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.б-главная h1 {
  margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800;
  letter-spacing: -2px; line-height: 1.02;
}
.б-главная .герой-кнопки { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.кнопка-героя { border-radius: 12px; padding: 17px 30px; }
.кнопка-героя.втор { background: transparent; color: var(--текст); box-shadow: inset 0 0 0 1px #d6d6d2; }
.кнопка-героя:hover { transform: none; opacity: .9; }


.б-статус {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: #ffffff; border-radius: 14px; padding: 8px 14px 8px 12px;
  line-height: 1.3; text-wrap: balance; font-size: 13.5px; font-weight: 600;
}
.б-статус[hidden] { display: none; }
.б-статус i {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: #3bb54a;
  animation: б-пульс 1.8s infinite;
}
.б-статус.жёлтый i { background: #e8a33a; animation: none; }
@keyframes б-пульс {
  0% { box-shadow: 0 0 0 0 rgba(59, 181, 74, .5); }
  70% { box-shadow: 0 0 0 9px rgba(59, 181, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 181, 74, 0); }
}


.б-дня { grid-column: 3 / 5; grid-row: 1 / 3; min-height: 440px; background: #ecece8; cursor: pointer; }
.б-заглушка {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--текст-тихий); font-weight: 600;
}
.б-дня .букет-дня {
  position: absolute; inset: 0; margin: 0; max-width: none;
  display: block; border: 0; border-radius: 0; background: none;
}
.б-дня .букет-дня[hidden] { display: none; }
.б-дня .букет-дня img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s ease;
}
.б-дня:hover .букет-дня img { transform: scale(1.04); }
.б-дня .букет-дня .поверх {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}
.б-дня .букет-дня .ярлык { background: #ffffff; color: var(--текст); }
.б-дня .букет-дня h3 { color: #ffffff; font-size: 22px; max-width: 460px; }
.б-дня .букет-дня .цена { color: #ffffff; font-size: 26px; }
.б-дня .букет-дня .цена .цена-была { color: rgba(255, 255, 255, .65); font-size: 17px; font-weight: 500; }
.б-дня .букет-дня .поверх::after {
  content: "Смотреть букет →"; margin-top: 12px; font-size: 14px; font-weight: 700; color: #ffffff;
}
.б-таймер {
  position: absolute; top: 16px; right: 16px; z-index: 2; pointer-events: none;
  background: rgba(20, 20, 20, .72); color: #ffffff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.б-таймер[hidden] { display: none; }


.бенто .баннер {
  min-height: 0; margin: 0; padding: 22px; border: 0; border-radius: 24px;
  display: flex; flex-direction: column;
}
.бенто .баннер::after { display: none; }
.бенто .баннер h3 { font-size: 20px; }
.бенто .баннер p { opacity: 1; }
.бенто .б-бриф { background: #1a1a1a; color: #ffffff; }
.бенто .б-бриф p { color: rgba(255, 255, 255, .68); }
.бенто .б-бриф .кн { background: #ffffff; color: #1a1a1a; border-radius: 10px; }
.бенто .б-бриф .метка-баннера.скидка { background: rgba(184, 198, 85, .2); border-color: transparent; color: #d4e07c; }
.бенто .б-бюджет { background: var(--серая-плитка); color: var(--текст); }
.бенто .б-бюджет p { color: var(--текст-тихий); }
.бенто .б-бюджет .кн { background: #1a1a1a; color: #ffffff; border-radius: 10px; }


.б-рейтинг, .б-гарантия { padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.б-рейтинг { background: #f1f5d8; }
.б-рейтинг b, .б-гарантия b { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.б-звёзды { color: #f0a92b; letter-spacing: 2px; font-size: 15px; }
.б-рейтинг span:last-child, .б-гарантия span { font-size: 13.5px; color: var(--текст-тихий); line-height: 1.4; }


.б-разделы { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.б-разделы::-webkit-scrollbar { display: none; }
.б-разделы a {
  flex: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--плитка-край);
  color: var(--текст); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.б-разделы a:hover { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }



@media (min-width: 900px) {
  .б-разделы { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 760px) {
  .бенто { grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: auto; }
  .б-главная, .б-дня { grid-column: 1 / -1; grid-row: auto; }
  .б-главная { padding: 22px 20px; gap: 18px; }
  .б-главная h1 { font-size: 34px; letter-spacing: -1.4px; }
  .б-главная .герой-кнопки { flex-direction: column; align-items: stretch; }
  .б-дня { min-height: 0; aspect-ratio: 4 / 5; }
  .б-статус { font-size: 12.5px; }
  .бенто .баннер, .б-рейтинг, .б-гарантия { padding: 16px; border-radius: 20px; min-height: 150px; }
  .бенто .баннер h3 { font-size: 17px; }
  .бенто .баннер p { font-size: 12.5px; }
  .б-рейтинг b, .б-гарантия b { font-size: 32px; }
  .б-плитка { border-radius: 20px; }
  a.б-плитка:hover, button.б-плитка:hover, .б-дня:hover, .бенто .баннер:hover { transform: none; box-shadow: none; }
}



@media (max-width: 379px) {
  .б-рейтинг b, .б-гарантия b { font-size: 26px; letter-spacing: -1px; }
}


.раздел-шапка .надзаголовок { display: none; }
.раздел-шапка h2 { letter-spacing: -1px; }
@media (min-width: 700px) { .раздел-шапка h2 { font-size: 36px; } }


.б-цены { display: flex; gap: 8px; margin: -4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.б-цены::-webkit-scrollbar { display: none; }
.б-цена {
  flex: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--плитка-край);
  background: #ffffff; color: var(--текст); transition: background .15s, color .15s, border-color .15s;
}
.б-цена:hover { border-color: var(--текст); }
.б-цена.выбрана { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }
.плитка-товаров[hidden] { display: none !important; }
.б-пусто { grid-column: 1 / -1; color: var(--текст-тихий); margin: 8px 0; }
@media (max-width: 699px) {
  #хиты > .карточка:nth-child(n+5), .б-подбор > .карточка:nth-child(n+5) { display: none; }
}
.карточка { border: 0; border-radius: 0; background: transparent; }
.карточка:hover { box-shadow: none; transform: none; }
.карточка .фото { border-radius: 12px; }
.карточка .подпись { padding: 9px 2px 6px; }
.карточка .название { color: var(--текст); }
.в-каталог { border-radius: 12px; }


#o_nas .в-коробке { margin-top: 0; }
@media (min-width: 700px) {
  #o_nas .в-коробке { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; }
  #o_nas .строка-коробки { border-bottom: 0; border-top: 2px solid var(--текст); padding-top: 12px; }
}


.кор-блок { display: grid; gap: 22px; }
.кор-фото { margin: 0; min-width: 0; }
.кор-фото img {
  display: block; width: 100%; height: min(420px, 105vw);
  object-fit: cover; object-position: center 65%; border-radius: 12px;
}
.кор-фото figcaption { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--текст-тихий); }
@media (min-width: 700px) {
  .кор-блок { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .кор-фото img { height: 390px; }
  #o_nas .кор-блок .в-коробке { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
}


.отзывы-карта { border: 0; padding: 0; background: transparent; }
.цифра { background: transparent; border: 0; border-radius: 0; text-align: left; padding: 0 0 0 16px; border-left: 2px solid var(--текст); }
.цифра b { font-size: 34px; }
.к-отзывам { background: transparent; color: var(--текст); padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 4px; }


.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--плитка-край); border-radius: 0; padding: 0 2px; margin: 0; }
.faq details:first-of-type { border-top: 1px solid var(--плитка-край); }
.faq summary::after { color: var(--текст); }


.звонок-карта { background: #f6f6f4; color: var(--текст); border-radius: 24px; }
.звонок-карта::after { display: none; }
.звонок-карта p { opacity: 1; color: var(--текст-тихий); }
.звонок-карта .звонок-согласие a { color: var(--текст-тихий); }
.звонок-поля input { background: #ffffff; color: var(--текст); box-shadow: inset 0 0 0 1px #dcdcd8; }
.звонок-поля input::placeholder { color: #9a9a96; }
.звонок-поля input:focus { outline: 2px solid var(--текст); }
.звонок-поля button { background: var(--чернила); color: #ffffff; }


.б-контакты { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.б-адрес {
  grid-column: 1 / 3; grid-row: 1 / 3; padding: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.б-звонок { grid-column: 3 / 5; padding: 24px; display: flex; flex-direction: column; gap: 6px; background: #1a1a1a; color: #ffffff; }
.б-написать { grid-column: 3 / 5; padding: 24px; }
.б-ярлык { font-size: 13px; font-weight: 600; color: var(--текст-тихий); margin-bottom: 4px; }
.б-крупно { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.б-метро { font-size: 16px; font-weight: 600; }
.б-адрес p { color: var(--текст-тихий); margin: 8px 0 18px; max-width: 420px; line-height: 1.5; font-size: 14.5px; }
.б-кнопка {
  margin-top: auto; background: #1a1a1a; color: #ffffff; border-radius: 12px;
  padding: 14px 22px; font-weight: 700; font-size: 15px; text-decoration: none;
}
.б-кнопка:hover { opacity: .9; }
.б-звонок .б-ярлык, .б-звонок .б-мелко { color: rgba(255, 255, 255, .62); }
.б-звонок .б-часы { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.б-мелко { font-size: 13px; }
.б-мессенджеры { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.б-мсг {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px;
  border-radius: 999px; background: #ffffff; color: var(--текст);
  text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .15s;
}
.б-мсг:hover { transform: translateY(-2px); }
.б-мсг i {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: -.3px;
}
.б-мсг svg { width: 15px; height: 15px; fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.б-мсг.тг i { background: #2aabee; }
.б-мсг.ва i { background: #25d366; }
.б-мсг.вк i { background: #0077ff; }
.б-почта { color: var(--текст); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .б-контакты { grid-template-columns: 1fr; gap: 10px; }
  .б-адрес, .б-звонок, .б-написать { grid-column: auto; grid-row: auto; padding: 22px 20px; }
  .б-звонок { order: -1; }   
}


.подвал { background: #ffffff; }
.чип { border-radius: 10px; }
.чип.выбран { background: var(--чернила); border-color: var(--чернила); color: #ffffff; }
.придумать-свой { background: var(--чернила); color: #ffffff; }
.главная-кнопка { background: var(--чернила); color: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }


.шторка { background: #ffffff; color: var(--текст); box-shadow: 0 -10px 30px rgba(0, 0, 0, .07); }
@media (min-width: 900px) {
  .товар-обёртка .шторка { box-shadow: none; border: 1px solid var(--плитка-край); }
}
.ручка { background: #dcdcd8; }
.шторка .описание { opacity: 1; color: var(--текст-тихий); }
.размер, .опция { background: #f6f6f4; color: var(--текст); }
.размер.выбран, .опция.выбран { background: #ffffff; border-color: var(--текст); }
.опция .бокс { border-color: rgba(0, 0, 0, .3); color: #ffffff; }
.опция.выбран .бокс { background: var(--текст); border-color: var(--текст); }
.кол-во .кнопки { background: #f6f6f4; }
.кол-во button { color: var(--текст); }
.кол-во button:active { background: rgba(0, 0, 0, .06); }
.шторка .что-в-цену { background: #ffffff; border-color: var(--плитка-край); }
.шторка .что-в-цену summary { color: var(--текст); }
.шторка .что-в-цену .строка,
.шторка .что-в-цену .строка b,
.шторка .что-в-цену .текстом,
.шторка .что-в-цену .текстом li,
.шторка .что-в-цену .вопрос { color: var(--текст); }
.шторка .что-в-цену .строка i,
.шторка .что-в-цену .текстом .ответ { color: var(--текст-тихий); }
.шторка .что-в-цену .строка + .строка { border-top-color: var(--плитка-край); }
.шторка .что-в-цену svg { stroke: var(--текст); }
.шторка .что-в-цену .текстом ul li::marker { color: var(--текст-тихий); }
.миниатюра.выбрана { border-color: var(--текст); }


@keyframes б-появление {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .бенто > * { animation: б-появление .6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .бенто > :nth-child(2) { animation-delay: .07s; }
  .бенто > :nth-child(3) { animation-delay: .14s; }
  .бенто > :nth-child(4) { animation-delay: .2s; }
  .бенто > :nth-child(5) { animation-delay: .26s; }
  .бенто > :nth-child(6) { animation-delay: .32s; }
  .б-разделы { animation: б-появление .6s .38s cubic-bezier(.2, .7, .2, 1) backwards; }
  .б-подбор .б-появись { animation: б-появление .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .б-подбор .б-появись:nth-child(2) { animation-delay: .04s; }
  .б-подбор .б-появись:nth-child(3) { animation-delay: .08s; }
  .б-подбор .б-появись:nth-child(4) { animation-delay: .12s; }
  .б-подбор .б-появись:nth-child(n+5) { animation-delay: .16s; }
  

  .раздел.б-прячь { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .раздел.б-прячь.б-видно { opacity: 1; transform: none; }
}

@media print { .раздел.б-прячь { opacity: 1; transform: none; transition: none; } }


@keyframes б-появление-фото { from { transform: translateY(16px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .бенто > .б-дня { animation: б-появление-фото .6s .07s cubic-bezier(.2, .7, .2, 1) backwards; }
}








@media (hover: hover) and (pointer: fine) {
  .карточка { overflow: visible; min-width: 0; transition: transform .2s ease; }
  .карточка .фото { transition: box-shadow .2s ease; }
  .карточка:hover .фото { box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
  .счёт-плитки .кнопка-класть {
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .счёт-плитки .кнопка-класть:hover { background: #a3b13f; box-shadow: 0 4px 12px rgba(0, 0, 0, .26); }
  .похожие.в2 .похожий { transition: transform .2s ease, box-shadow .2s ease; }
  .похожие.в2 .похожий:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .12); }
  .похожие.сбоку .похожий img { transition: transform .2s ease, box-shadow .2s ease; }
  
  .похожие.сбоку .похожий:hover img { box-shadow: 0 10px 14px -8px rgba(0, 0, 0, .3); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .карточка:hover { transform: translateY(-4px) scale(1.02); }
  .счёт-плитки .кнопка-класть:hover { transform: scale(1.1); }
  .счёт-плитки .кнопка-класть:active { transform: scale(.92); }
  .похожие.в2 .похожий:hover { transform: translateY(-4px); }
  .похожие.сбоку .похожий:hover img { transform: translateY(-3px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .карточка:hover, .карточка:active,
  .похожие.в2 .похожий:hover, .похожие.сбоку .похожий:hover img,
  .счёт-плитки .кнопка-класть:hover, .счёт-плитки .кнопка-класть:active { transform: none; }
}










.подпись-получения {
  margin: 10px 14px 0; font-size: 13px; line-height: 1.45; color: var(--текст-тихий);
}


#корзинаНиз > .главная-кнопка.в-потоке { width: calc(100% - 28px); margin: 14px 14px 0; }


.шаг-оформления > .главная-кнопка.в-потоке { width: calc(100% - 28px); margin: 22px 14px 0; }




body[data-экран="корзина"] .подвал,
body[data-экран="доставка"] .подвал,
body[data-экран="к-букету"] .подвал,
body[data-экран="оформление"] .подвал { display: none; }
.лист[data-лист="корзина"],
.лист[data-лист="доставка"],
.лист[data-лист="к-букету"],
.лист[data-лист="оформление"] { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

.шаг-оформления > #спроситьФлориста { margin-top: 18px; }


.прогресс-шага { margin: 2px 14px 0; }
.прогресс-шага-текст {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: var(--текст-тихий); margin-bottom: 6px;
}
.прогресс-шага-полоса { height: 4px; border-radius: 4px; background: var(--плитка-край); overflow: hidden; }
.прогресс-шага-полоса i { display: block; height: 100%; border-radius: 4px; background: var(--чернила); }

.прогресс-шага + .заголовок-блока { margin-top: 18px; }

.прогресс-шага + .группа { margin-top: 18px !important; }


.шаг-оформления .подарки { margin-left: 14px; margin-right: 14px; }


#промоПодсказка { margin: 18px 14px 0; }
.есть-промокод {
  display: inline-block; margin: 16px 14px 0; padding: 6px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--текст);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.есть-промокод:active { opacity: .6; }

.есть-промокод[hidden] { display: none; }
.промо-раскрыто { margin-top: 18px; }
.промо-раскрыто[hidden] { display: none; }



#сверка .сверка-что { width: 92px; }
#сверка .сверка-товар img,
#сверка .сверка-значок { width: 34px; height: 42px; border-radius: 6px; }


.ошибка-выбора { outline: 2px solid #d9534f; outline-offset: 4px; border-radius: 14px; }
.текст-ошибки { margin: 8px 2px 4px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #d9534f; }
.шаг-оформления > .текст-ошибки { margin-left: 14px; margin-right: 14px; }

.ошибка-выбора ~ .подпись-выбора { display: none; }







.подвал .контакты-кратко, .подвал .шапка-разделов { display: none; }

@media (max-width: 899px) {
  .подвал .внутри { padding: 18px 16px 18px; }
  
  @supports selector(:has(a)) {
    .подвал { padding-bottom: 0; }
    body:has(.главная-кнопка.видна:not(.в-потоке)) .подвал {
      padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
  }

  
  .подвал .колонки { display: block; margin: 0; }
  .подвал .колонка { min-width: 0; }
  .подвал .колонка:first-child { margin-bottom: 14px; }
  .подвал img { height: 26px; margin-bottom: 8px; }
  .подвал .контакты-подвала { display: none; }
  .подвал .контакты-кратко { display: block; font-size: 12.5px; line-height: 1.55; }
  
  .подвал .контакты-кратко a {
    display: inline; padding: 0; color: var(--текст); text-decoration: none; white-space: nowrap;
  }

  
  .подвал .шапка-колонки.шапка-раскрытия {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; margin: 0; padding: 0;
    border-top: 1px solid var(--плитка-край);
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--текст);
    cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .подвал .шапка-раскрытия::after {
    content: ''; width: 7px; height: 7px; margin-right: 4px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
  }
  .подвал .шапка-раскрытия[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .подвал .шапка-раскрытия:focus-visible { outline: 2px solid var(--текст); outline-offset: 2px; }

  
  .подвал .колонка.свёрнутый:not(.развёрнут) a,
  .подвал .подборки-подвала.свёрнутый:not(.развёрнут) { display: none; }
  .подвал .колонка.развёрнут { padding-bottom: 8px; }
  .подвал .колонка.развёрнут a { padding: 6px 0; font-size: 13.5px; }
  .подвал .подборки-подвала.развёрнут {
    margin: 0; padding: 2px 0 14px; gap: 8px 16px;
    font-size: 13px; opacity: 1;
  }

  
  .подвал .реквизиты {
    font-size: 10.5px; line-height: 1.45; padding-top: 0; border-top: 0;
  }
  .подвал .подборки-подвала + .реквизиты {
    border-top: 1px solid var(--плитка-край); padding-top: 12px;
  }
  .подвал .реквизиты + .реквизиты { margin-top: 4px; }
}







.раскладка-каталога,
.колонка-фильтров,
.плитки-каталога { display: contents; }
.подпись-разделов { display: none; }

@media (min-width: 1100px) {
  


  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: 1220px; }

  
  .раскладка-каталога {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    margin-top: 18px;
  }
  .плитки-каталога { display: block; min-width: 0; }
  
  .плитки-каталога #плитка { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

  
  .колонка-фильтров {
    display: block;
    position: sticky;
    top: calc(var(--высота-шапки, 65px) + 16px);
    max-height: calc(100vh - var(--высота-шапки, 65px) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 4px 6px 0;
  }

  
  .колонка-фильтров .поиск-обёртка { margin: 0; max-width: none; }
  .колонка-фильтров .поиск {
    padding: 11px 34px 11px 12px; font-size: 14px; border-radius: 10px;
    text-overflow: ellipsis;
  }
  .колонка-фильтров .поиск::placeholder { text-overflow: ellipsis; }

  .подпись-разделов {
    display: block;
    margin: 20px 0 6px 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--текст-тихий);
  }

  
  .колонка-фильтров #категории {
    display: flex; flex-direction: column; gap: 2px;
    overflow: visible; padding: 0; min-height: 0;
    margin-top: 0 !important;   
  }
  .колонка-фильтров #категории .чип {
    display: block; width: 100%; text-align: left;
    background: transparent; border-color: transparent;
    padding: 9px 12px; border-radius: 10px;
    font-size: 14.5px; white-space: normal;
  }
  .колонка-фильтров #категории .чип:hover { background: var(--серая-плитка, #f4f4f1); border-color: transparent; }
  .колонка-фильтров #категории .чип.выбран,
  .колонка-фильтров #категории .чип.выбран:hover {
    background: var(--чернила, #1a1a1a); border-color: var(--чернила, #1a1a1a); color: #ffffff;
  }
  

  .колонка-фильтров #категории .чип.с-промо .промо-ярлык {
    position: static; transform: none; display: inline-block;
    margin-left: 8px; vertical-align: 1px;
  }

  
  .колонка-фильтров #ценник.кат-цена {
    flex-direction: column; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding: 16px 0 0 0;
    border-top: 1px solid var(--плитка-край);
  }
  .колонка-фильтров .кат-цена .цена-руками { width: 100%; }
  .колонка-фильтров .кат-цена .цена-руками input {
    flex: 1 1 0; min-width: 0; width: auto; padding: 8px 10px;
  }

  
  .плитки-каталога #заголовокКаталога { margin-top: 0; min-height: 22px; }
}






@media (min-width: 1440px) {
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка {
    max-width: 1620px; padding-left: 50px; padding-right: 50px;   
  }
}
@media (min-width: 1711px) {
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: 1936px; }   
}
@media (min-width: 1982px) {
  
  .лист[data-лист="каталог"] > .широкий,
  body[data-экран="каталог"] .назад-строка { max-width: none; }
}