/* Пятая пара, выбор владельца 07.09: IBM Plex Serif — заголовки, IBM Plex Sans — текст.
   Файлы свои, лежат рядом. Собрано departments/06-lendingi/work/zavesti_shrifty.py. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSans-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSerif-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSerif-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/IBMPlexSerif-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSerif-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSerif-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/IBMPlexSerif-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{ --color-bg:#ffffff; --color-fg:#02090d; --color-muted:#6b7075; --color-accent:#02090d; --color-accent-fg:#ffffff;
       --color-surface:#f6f6f4; --color-line:#e1e1e1; --font-heading:'IBM Plex Serif',Georgia,serif; --font-body:'IBM Plex Sans',system-ui,sans-serif;
       --size-h1:2.5rem; --size-h2:1.75rem; --size-body:1.0625rem; --radius:10px; --space:1.25rem; --maxw:1200px; }
/* ТОКЕНЫ · дизайн-система 03 · один источник правды.
   Hex живёт только здесь. Имена совпадают с переменными документа Pencil.
   Числа записаны парой tel/desk и переключаются одним медиазапросом. */

:root {
  /* цвет — 16 значений, из них 10 посчитаны по 42 кадрам чайного дома */
  --cacao:   #240D05;  --corteza: #5B220B;  --granate: #520A0E;
  --terra:   #912D12;  --canela:  #9F5622;  --cobre:   #BE6B37;
  --arena:   #DD9B62;  --ambar:   #DB9C3E;  --arcilla: #A78673;
  --tabaco:  #6B4C30;  --crema:   #DFC5AC;  --papel:   #FFF0D6;
  --blanco:  #FFFFFF;  --verde:   #33351D;  --verde-claro: #C3CA7A;
  --whatsapp:#25D366;

  /* роли — тон дня */
  --fon: var(--papel);          --pov: var(--crema);
  --tekst-cvet: var(--cacao);   --zag-cvet: var(--granate);
  --tusk: var(--tabaco);        --akcent: var(--terra);
  --na-akcente: var(--papel);   --granica-cvet: var(--tabaco);

  /* гарнитуры: латиница из брендбука, кириллица — замена с проверенной cmap */
  --shrift-zag: "Darker Grotesque", "Alumni Sans", "Trebuchet MS", sans-serif;
  --shrift-tekst: "Alumni Sans", "Trebuchet MS", system-ui, sans-serif;
  --shrift-mono: "PT Mono", ui-monospace, "SFMono-Regular", monospace;

  /* размеры — пара телефон / десктоп */
  --tel-h1: 34px;   --desk-h1: 56px;
  --tel-h2: 24px;   --desk-h2: 34px;
  --tel-h3: 18px;   --desk-h3: 21px;
  --tel-tekst: 16px; --desk-tekst: 17px;
  --tel-pod: 15px;  --desk-pod: 20px;   /* лид первого экрана: рядом с h1 56 px.
     На телефоне 15, а не 16: просили поднять лид на 1440, а каждый лишний
     пиксель на 375 уходит из запаса до сгиба. */
  --tel-melkoe: 13px; --desk-melkoe: 14px;
  --tel-mono: 12px; --desk-mono: 13px;
  --tel-shag: 12px; --desk-shag: 16px;
  --tel-vozduh: 32px; --desk-vozduh: 56px;
  --tel-pole: 16px; --desk-pole: 24px;
  --tel-pole-k: 12px; --desk-pole-k: 16px;
  --tel-kolonok: 2;  --desk-kolonok: 4;

  --h1: var(--tel-h1); --h2: var(--tel-h2); --h3: var(--tel-h3);
  --tekst: var(--tel-tekst); --melkoe: var(--tel-melkoe); --mono: var(--tel-mono);
  --pod: var(--tel-pod);
  --shag: var(--tel-shag); --vozduh: var(--tel-vozduh);
  --pole: var(--tel-pole); --pole-k: var(--tel-pole-k);
  --kolonok: var(--tel-kolonok);
  --granica: 1px; --radius: 2px;
}

/* Стенд ставит телефон рядом с десктопом. Десктопные значения попадают на body
   от широкого контейнера страницы и наследуются вниз — поэтому узкая колонка
   обязана вернуть себе телефонные, иначе на «телефоне» окажется сетка десктопа. */
.tema {
  --h1: var(--tel-h1); --h2: var(--tel-h2); --h3: var(--tel-h3);
  --tekst: var(--tel-tekst); --melkoe: var(--tel-melkoe); --mono: var(--tel-mono);
  --pod: var(--tel-pod);
  --shag: var(--tel-shag); --vozduh: var(--tel-vozduh);
  --pole: var(--tel-pole); --pole-k: var(--tel-pole-k);
  --kolonok: var(--tel-kolonok); --okno-pole: var(--tel-okno-pole);
  --polosa: var(--tel-polosa); --shapka: var(--tel-shapka);
}

/* Переключатель один на всё: ширина КОНТЕЙНЕРА, не окна. Порог 900, а не 1000:
   колонка десктопа на стенде выходит ровно около 1000 и на пороге 1000 срывалась
   обратно в телефонную сетку. 900 разводит 401 и ~1000 без спора. Контейнер объявлен
   на html, поэтому правило действует и на боевой странице, и в стенде, где
   телефон и десктоп стоят рядом в одном окне и медиазапрос врал бы. */
html { container-type: inline-size; container-name: stend; }

@container stend (min-width: 900px) {
  body, .tema {
    --h1: var(--desk-h1); --h2: var(--desk-h2); --h3: var(--desk-h3);
    --tekst: var(--desk-tekst); --melkoe: var(--desk-melkoe); --mono: var(--desk-mono);
    --pod: var(--desk-pod);
    --shag: var(--desk-shag); --vozduh: var(--desk-vozduh);
    --pole: var(--desk-pole); --pole-k: var(--desk-pole-k);
    --kolonok: var(--desk-kolonok);
  }
}

/* тон вечера — переключается на блоке, не на странице */
.vecher {
  --fon: var(--cacao);          --pov: var(--corteza);
  --tekst-cvet: var(--crema);   --zag-cvet: var(--papel);
  --tusk: var(--arena);         --akcent: var(--ambar);
  --na-akcente: var(--cacao);   --granica-cvet: var(--arcilla);
}

/* --- дополнено на шаге 3: то, чего первому экрану не требовалось --- */
:root {
  /* тон трав и матчи — включается блоком, с тёплым не смешивается */
  --verde-fon: var(--verde);
  --verde-tekst: var(--verde-claro);

  /* состояния */
  /* силуэт чайного листа для молчащей заглушки D-07. Держим в токенах,
     потому что это часть фирменного языка, а не правило одной детали. */
  --list-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 3c0 9-5 14-11 14a7 7 0 0 1-5-2c1-7 6-11 13-12ZM4 21c1-4 3-6 6-8"  fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  /* Знак TEJA VUH для заглушки «фото нет». Решение владельца 07.09: «Заглушку
     ставим на номер 4» — знак на 34 % клетки, непрозрачность 22 %, подложка
     тонирована видом товара на 8 %. Вектор взят из библиотеки как есть
     (`firmenny-stil/logo/svg/znak-stopka.svg`), не перерисован; это тот же знак,
     что стоит в шапке сайта. Живёт в токенах, а не в правиле детали: часть
     фирменного языка. Голый знак без подписи здесь законен — README логотипа
     разрешает его там, где подпись физически не помещается, а клетка кадра
     на телефоне 110–180 px. Читается маской, поэтому цвет внутри не важен. */
  --znak-teja: url("data:image/svg+xml;utf8,%3Csvg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272.95 190.01'%3E %3Cpath fill-rule='evenodd' d='M95.68 125.83C90.95 141.53 85.76 169.93 75.62 169.93C69.2 169.93 62.62 144.33 58.42 130.99C57.44 128.2 56.37 127.01 55.12 124.37C54.04 122.1 43.37 122.74 41.33 123.84C42.14 134.04 44 140.27 47.15 149.81C48.2 152.98 49.39 156.11 50.7 159.16C56.19 170.94 68.04 189.23 73 189.23L77.97 187.82C91.78 175.81 103.98 160.98 109.13 127.71C109.5 125.35 97.58 119.52 95.68 125.83ZM175.05 122.29C167.4 120.03 168.11 136.72 159.72 147.04C158.14 149.72 156.44 152.36 154.59 154.94C150.91 160.08 141.76 167.83 136.86 172.35C127.97 158.49 128.24 146.1 131.09 124.27C131.33 122.39 119.26 120.75 117.67 123.01C106.52 147.9 125.83 188.37 132.61 188.87C132.61 188.87 135.17 189.04 136.67 188.44C138.17 187.85 156.15 174.83 161.61 168.5C163.43 166.39 165.17 164.23 166.81 162.02C174.58 151.83 184 134.15 183.74 125.05C183.67 122.66 176.98 122.86 175.05 122.29ZM268.49 98.85C225.83 96.6 183.61 126.35 176.47 171.98C175.77 174.73 175.19 177.5 174.74 180.31C174.28 183.12 173.95 185.95 173.74 188.81C173.74 188.81 185.64 190.01 187.71 188.31C190.22 186.25 190.29 182.37 190.92 179.11C193.06 163.24 194.84 152.98 205.81 138.99C213.09 144.97 225.94 168.16 227.98 188.38C228.97 189.5 238.01 189.5 239.28 188.38C241.59 167.97 235.24 155.33 224.82 138.06C221.79 133.04 215.82 127.97 215.82 127.97C216.87 125.99 226.59 119.68 230.02 118.28C241.24 113.66 249.65 114.08 260.27 112.39C263.91 111.81 265.46 111.72 268.23 110.04C270.09 108.61 270.76 98.85 268.49 98.85ZM152.88 123.58C149.14 119.67 141.56 121.75 140.22 128.94C139.46 134.58 139.44 144.29 140.67 147C141.48 148.78 149.78 148.19 150.67 147.1C151.55 146.01 152.46 140.96 152.39 134.72C152.81 130.14 154.12 126.3 152.88 123.58ZM218.12 83.98C224.96 52 235.18 41.17 242.93 32.81C250 38.51 254.98 56.32 259.81 83.98C259.81 83.98 263.32 83.98 265.5 84.26L272.95 84.26C272.95 80.99 272.79 77.74 272.48 74.54C272.12 70.61 271.5 66.39 270.64 62.09C266.36 40.6 256.09 17.15 243.39 19.12C222.28 21.48 205.86 55.69 204.69 83.98C209.38 83.98 216.95 85.16 218.12 83.98ZM199.32 14.81C203.59 14.45 206.84 13.12 207.12 6.85C207.32 2.28 204.6 0 199 0C193.23 0 192.98 3.33 193.07 8C193.17 12.66 195.04 15.16 199.32 14.81ZM141.14 60.47C142.26 61.67 147.92 60.47 152.15 59.96C158.01 59.95 167.28 59.85 167.28 59.85C169.2 57.06 170.79 48.74 168.33 48.5C159.06 49.32 135.48 43.71 141.14 60.47ZM244.41 83.54C244.41 83.54 244.72 76.82 244.92 70.06C245.62 65.18 247.11 58.69 245.85 57.35C227.85 50.28 233.22 75.25 232.14 83.44C232.42 84.78 239.89 83.32 244.41 83.54ZM82.5 58.67C81.11 61.26 77.15 68.3 75.47 70.75C73.78 73.21 69.9 77.58 67.92 79.86C65.95 77.58 61.89 72.75 60.21 70.29C58.52 67.84 56.98 65.3 55.6 62.71C49.38 53.68 43.92 39.12 50.48 33.9C53.15 31.32 56.99 30.37 61.39 30.22C61.76 43.24 57.26 60.99 74.23 54.9C75.53 53.6 74.23 47.06 73.67 42.17C73.67 37.88 73.63 33.62 73.59 31.06C78.57 31.68 83.64 32.4 88.23 32.4C87.13 43.9 87.74 48.59 82.5 58.67ZM123.96 99.38C123.96 99.38 119.33 100 118.37 101.36C117.42 102.71 118.15 109.86 119.19 111.83C120.23 113.79 121.27 113.89 121.64 113.87C151.39 112.02 175.94 101.35 191.81 78.53C194.11 75.23 196.19 71.78 198.06 68.2C205.7 54.15 209.1 37.96 209.22 21.28C209.22 20.99 209.06 20.28 208.06 20.47C206.11 21.04 204.7 21.11 201.91 21.37C199.28 21.73 198.73 21.89 197.69 21.99C194.86 22.26 195.23 26.44 195.23 26.44C195.73 44.43 192.27 64.07 176.45 70.86C160.63 77.64 139.4 65.9 124.71 54.6C140.2 42.81 159.64 39.76 179.84 35.62C181.08 35.33 180.31 21.75 173.94 23.54C159.54 26.8 154.23 30.65 144.99 30.18C135.45 29.71 129.18 29.03 123.47 27.58C117.8 26.25 113.46 25.36 108.21 24C103.45 22.93 99.23 21.75 95.47 20.96C69.17 15.5 37.37 19.34 16.53 30.2C13.43 32.06 10.4 34.11 7.48 36.34C4.56 38.56 0 41.91 1.14 43.83C2.28 45.76 5.26 49.74 7.1 50.51C8.95 51.28 12.96 48.65 14.95 47.07C16.93 45.49 18.98 44.01 21.09 42.62C25.28 40.39 28.58 36.89 34.04 35.84C34.62 42.63 36.07 46.3 37.25 52.06C37.96 54.75 38.81 56.27 39.77 58.88C44.61 71.94 52.45 83.92 62.99 94.01C62.99 94.01 65.86 97.42 68.33 97.42C70.75 97.42 73.64 94.01 73.64 94.01C82.06 85.94 88.77 76.66 93.59 66.58C94.79 64.06 95.88 61.49 96.85 58.88C97.9 55.11 98.5 52.57 99.58 48.75C100.66 44.93 101.68 39.35 101.68 35.16C106.37 36.09 111.56 37.34 117.05 38.08L125.89 38.85C118.78 42.41 114.72 44.46 110.57 48.5C110.57 48.5 106.89 53.05 106.86 55.22C106.83 57.23 111.27 60.18 111.27 60.18C125.92 74.83 144.55 84.03 164.72 86.81C152.05 97.11 141.48 98.49 123.96 99.38Z'/%3E %3C/svg%3E");
  /* Слои страницы. Держим числа в одном месте: до 06.09 они жили порознь
     у детали полосы (30) и у слоя Лендингов, и окно сорта открывалось ПОД
     шапкой сайта — покупатель видел заголовок страницы поверх карточки. */
  --sloy-shapka: 20;      /* липкая шапка сайта */
  --sloy-polosa: 30;      /* липкая полоса заказа */
  --sloy-shtora: 40;      /* затемнение под окном */
  --sloy-okno: 41;        /* окно сорта и окно корзины */
  /* Флаг Перу — не фирменный цвет, а факт о стране, поэтому живёт рядом
     с остальными hex, но отдельной парой: его нельзя менять вместе с гаммой. */
  --flag-pe: #D91023;
  --flag-pe-belyy: #FFFFFF;
  --vykl: .45;              /* выключенный элемент */
  --kolco: 2px;             /* толщина кольца фокуса */
  --ten: 0 2px 0 0 var(--granica-cvet);

  /* размеры, которые появились вместе с окнами и полосами */
  --tel-okno-pole: 16px;   --desk-okno-pole: 24px;
  --tel-polosa: 64px;      --desk-polosa: 72px;   /* липкая полоса заказа */
  /* сколько занято ПОД липкой полосой (языки, панель браузера в приложении).
     Ставится на `body` слоем страницы; полоса и круглая кнопка WhatsApp
     считают от неё обе, поэтому не могут наехать друг на друга. */
  --polosa-niz: 0px;
  --tel-shapka: 48px;      --desk-shapka: 48px;   /* потолок владельца — 48, подняли по его слову 05.09 */
  /* D-24 · монетки переключателя тем: чем тема ВЫГЛЯДИТ. Три пары стоят
     рядом на любой теме, поэтому берутся из цветов бренда напрямую,
     а не из ролей текущей темы — роли переставляются, а монетка Fiesta
     обязана оставаться янтарной и на светлой странице, и на тёмной.
     Контраст точки к своему фону: 14,91 · 6,27 · 7,79 — все выше 3. */
  --tema-a-fon: var(--blanco);  --tema-a-tochka: var(--granate);
  --tema-b-fon: var(--ambar);   --tema-b-tochka: var(--granate);
  --tema-c-fon: var(--cacao);   --tema-c-tochka: var(--ambar);
  /* Обводка монетки — своя у каждой, а не `--granica-cvet` темы: в теме
     Fiesta шапка сама янтарная, и янтарная монетка на ней пропадала —
     видно было только точку (снимок `shots/D-24-tema-b.jpg` до правки).
     Контраст обводки к своему фону: 7,77 · 7,79 · 7,88. */
  --tema-a-obvod: var(--tabaco);
  --tema-b-obvod: var(--cacao);
  --tema-c-obvod: var(--arena);
  --okno-pole: var(--tel-okno-pole);
  --polosa: var(--tel-polosa);
  --shapka: var(--tel-shapka);
}

@container stend (min-width: 900px) {
  body, .tema {
    --okno-pole: var(--desk-okno-pole);
    --polosa: var(--desk-polosa);
    --shapka: var(--desk-shapka);
  }
}

/* стенд ставит телефон и десктоп рядом в одном окне — медиазапрос там врёт.
   Те же пары переключаются по ширине контейнера. */
@container stend (min-width: 900px) {
  .tema {
    --h1: var(--desk-h1); --h2: var(--desk-h2); --h3: var(--desk-h3);
    --tekst: var(--desk-tekst); --melkoe: var(--desk-melkoe); --mono: var(--desk-mono);
    --pod: var(--desk-pod);
    --shag: var(--desk-shag); --vozduh: var(--desk-vozduh);
    --pole: var(--desk-pole); --pole-k: var(--desk-pole-k);
    --kolonok: var(--desk-kolonok); --okno-pole: var(--desk-okno-pole);
    --polosa: var(--desk-polosa); --shapka: var(--desk-shapka);
  }
}

/* ============ ЦВЕТ ПО ТИПУ ЧАЯ · шаг 3а ============
   Восемь типов китайской классификации плюс два японских порошковых.
   Базовый цвет подобран числом: контраст к фону тона ≥ 3, текст на плашке ≥ 4,5.
   Остальные три роли считаются ОТ БАЗОВОГО через color-mix, руками не подбираются.
   Цвет типа — метка, а не тема: он живёт на плашке, линии и подложке. */
:root {
  --tipo-blanco:   #8C8578;   --tipo-blanco-texto:   var(--cacao);
  --tipo-verde:    #5C7638;   --tipo-verde-texto:    var(--papel);
  --tipo-amarillo: #B4830B;   --tipo-amarillo-texto: var(--cacao);
  --tipo-azul:     #1F6E8C;   --tipo-azul-texto:     var(--papel);
  --tipo-rojo:     #B33A24;   --tipo-rojo-texto:     var(--papel);
  --tipo-oscuro:   #4A2C17;   --tipo-oscuro-texto:   var(--papel);
  --tipo-matcha:   #6B983C;   --tipo-matcha-texto:   var(--cacao);
  --tipo-hojicha:  #A9713E;   --tipo-hojicha-texto:  var(--cacao);
  /* доля подложки и линии — одна на все типы, поэтому «синий» и «красный»
     на полке весят одинаково */
  /* Семь семейств глазури — цвета посчитаны ИЗ ФОТОГРАФИЙ 148 чашек, а не выбраны:
     `heavy/foto/2026-09-10/seriya-2/cveta-chashek.json` хранит тон, светлоту
     и насыщенность каждой чашки, здесь — среднее по семейству. Поэтому кружок
     в ряду фильтра показывает настоящий цвет полки, а не наше представление о нём.
     Число чашек: белые 10 · бирюзовые 32 · синие 22 · красные 3 · охра 23 ·
     коричневые 33 · тёмные 25. */
  --glaz-belye:      #B7B1A0;
  --glaz-biryuzovye: #577E5A;
  --glaz-sinie:      #3E4668;
  --glaz-krasnye:    #644540;
  --glaz-ohra:       #998462;
  --glaz-korichnevye:#68624B;
  --glaz-temnye:     #4C443A;

  --tipo-linia-dolya: 40%;
  --tipo-fon-dolya: 12%;
}

/* Тон вечера: три типа не проходят контраст к тёмному фону в дневном значении.
   Меняются только они — остальные пять одни и те же в обоих тонах. */
.vecher {
  --tipo-amarillo: #B8860B;
  --tipo-oscuro:   #745D4C;
  --tipo-matcha:   #6F9E3F;
}

/* ============ ТРИ ДУХА · шаг 3а-3 ============
   Владелец 05.09.2026: «Да, три духа на весь сайт». Гамма — это не доза
   краски на карточке, а перестановка цветов бренда по ролям на всей странице.
   Роли (--fon, --pov, --akcent…) переставляются в `parts.css`, здесь лежит
   только то, чего в шестнадцати цветах не было: три палитры типов чая
   и седьмая ступень шкалы, которой системе не хватало (протокол 06, 2-б, №6).

   Каждый дух красит типы своим приёмом, поэтому и палитры разные:
   A метит линией — берёт базовую; B заливает поверхность — берёт плотную;
   C светит на тёмном — берёт светлую. Все числа посчитаны, а не подобраны:
   линия к фону ≥ 3, текст на заливке ≥ 4,5, в обоих тонах. */
:root {
  /* седьмая ступень шкалы: хэйча. Была дырой — точка красилась ничем */
  --tipo-heicha: #3E2A20;  --tipo-heicha-texto: var(--papel);

  /* B «Fiesta» · тип красит поверхность целиком, поэтому цвет плотный */
  --fiesta-blanco:   #9A7C45;  --fiesta-verde:    #4F7A2A;
  --fiesta-amarillo: #B07800;  --fiesta-azul:     #17607F;
  --fiesta-rojo:     #B8341A;  --fiesta-oscuro:   #6B3A16;
  --fiesta-matcha:   #5E9B2E;  --fiesta-hojicha:  #9E5A18;
  --fiesta-heicha:   #3A2A22;

  /* C «Casa» · тип светит на тёмном, поэтому цвет светлый и тёплый.
     Тот же набор служит духу B в тоне вечера — на какао он читается. */
  --casa-blanco:   #C9B183;  --casa-verde:    #7FA347;
  --casa-amarillo: #D9A62E;  --casa-azul:     #4E93AE;
  --casa-rojo:     #D96A4A;  --casa-oscuro:   #A98467;
  --casa-matcha:   #9CC45E;  --casa-hojicha:  #C89A63;
  --casa-heicha:   #9C8672;
}

/* хэйча в тоне вечера — тёмно-коричневый на какао не виден, светлеет */
.vecher { --tipo-heicha: #9C8672; --tipo-heicha-texto: var(--cacao); }
:root{
  --color-bg:var(--fon); --color-fg:var(--tekst-cvet); --color-muted:var(--tusk);
  --color-accent:var(--akcent); --color-accent-fg:var(--na-akcente);
  --color-surface:var(--pov); --color-line:var(--granica-cvet); }
*{box-sizing:border-box} [hidden]{display:none!important} /* авторский display перебивает браузерный [hidden] — форма оформления была видна всегда (07.09) */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font:var(--size-body)/1.5 var(--font-body);padding-bottom:4.5rem}
h1,h2,h3{font-family:var(--font-heading);font-weight:500;margin:0;text-wrap:balance;line-height:1.15;color:var(--color-heading,var(--color-fg))} h1{font-size:var(--size-h1)} h2{font-size:var(--size-h2);margin-bottom:calc(var(--space)*.75)} h3{font-size:1.1rem} @media (max-width:560px){h1{font-size:calc(var(--size-h1)*.72)} h2{font-size:calc(var(--size-h2)*.85)}}
p{margin:0 0 calc(var(--space)*.75)} a{color:inherit} .muted{color:var(--color-muted);font-weight:400} .malenkoe{font-size:.85rem} .krupno{font-size:1.05rem}
/* ⛔ 11.09 владелец: «проверить отступы между блоками — довольно большие, сделать не такими
   большими и одинаковыми на всём сайте». Шаг между блоками живёт в ОДНОМ токене --blok:
   правится здесь и нигде больше, иначе страницы снова разъедутся. Было 1.6 / 2.2 от --space. */
:root{--blok:calc(var(--space)*.95)} @media (min-width:900px){:root{--blok:calc(var(--space)*1.25)}}
section{max-width:var(--maxw);margin:0 auto;padding:var(--blok) var(--space);scroll-margin-top:5rem} @media (min-width:900px){section{padding:var(--blok) calc(var(--space)*2)}} section.blok-hero{padding-top:calc(var(--blok)*1.4)}
.pod{color:var(--color-muted);max-width:62ch}
/* ⛔ 22.09: первый абзац первого экрана. Читается как текст, а не как подпись: тот же кегль,
   что у остального текста, тёмный, ширина по мерке строки. Жирным в нём выделены названия
   товаров — is единственная разметка, которую пропускает `fraza()`. */
.vvod{max-width:62ch;margin:.7rem 0 1rem;font-size:1.02rem;line-height:1.5}
.vvod b{font-weight:600}
.btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:1px solid var(--color-accent);padding:.65em 1.5em;border-radius:999px;text-decoration:none;font:inherit;font-weight:500;cursor:pointer;line-height:1.25}
.btn.vtoraya{background:transparent;color:var(--color-fg);border-color:var(--color-fg)} .btn.malaya{padding:.45em .9em;font-size:.9rem;max-width:100%;white-space:normal}/* ⛔ Маленькая кнопка переносит текст ПО ПРОБЕЛАМ, а не вылезает. Испанское
   «Preguntar por el n.º 7» длиннее русского «Ask about No. 7»: на 375 давало 139px
   в рамке 135px (ворота 07.09, 6 браков «лезет»).
   ⛔ Без `overflow-wrap:anywhere`. С ним однословные кнопки рвались по буквам:
   «Cart» в шапке стала столбиком «Кор·зин·а» 58×87px, «Checkout» — 85×51.
   Ворота этого НЕ ловят: перенос — не «вылезание», брака ноль, а выглядит сломанным.
   Проверять глазами, а не только проверяльщиком. */ .btn.shirokaya{width:100%}
.ssylka{font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.ryad{display:flex;gap:calc(var(--space)*.75);align-items:center;flex-wrap:wrap} .otstup{margin-top:var(--space)}
.setka{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:800px} @media (min-width:560px){.setka{gap:1.25rem}} @media (min-width:560px){.setka{grid-template-columns:repeat(4,1fr)}}
.kart{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space);display:flex;flex-direction:column;gap:.45rem}
/* карточка: маленькая; форматы — полоски во всю ширину; кнопки «Buy» / «Details» текстом (владелец 06.09) */
.karta{position:relative;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius);padding:0;display:flex;flex-direction:column;min-width:0;overflow:hidden;font-size:.9rem;text-align:center}
.karta .foto{position:relative;display:block;aspect-ratio:1;border:0;border-radius:0;padding:0;overflow:hidden;background:var(--color-surface)} .karta .foto img{width:100%;height:100%;object-fit:cover;display:block}
.karta .foto.pusto{background:var(--color-surface)} .pusto-podpis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--color-muted);padding:.4rem;text-align:center}
.karta .plashka{position:absolute;top:.5rem;left:.5rem;font-size:.66rem;letter-spacing:.03em;background:color-mix(in srgb,var(--color-bg) 92%,transparent);color:var(--color-fg);padding:.25em .65em;border-radius:999px}
.karta .yarlyk{position:absolute;left:0;right:0;bottom:0;display:none;background:color-mix(in srgb,var(--color-bg) 88%,transparent);padding:.3rem .5rem;font-weight:600;font-size:.84rem;line-height:1.2}
.karta .telo{display:flex;flex-direction:column;gap:.5rem;padding:.9rem .7rem .8rem;flex:1;min-width:0} .karta .imya{font-size:.95rem;font-weight:500;line-height:1.25;margin:0} .karta .imya a{text-decoration:none} .karta .tip{display:none} /* «Oolong · China» уже на плашке photo — под именем не повторяем: три элемента в карточке, как у образца */
.karta .sostav{font-size:.74rem;color:var(--color-muted);margin:0}
.karta .fmts{display:flex;flex-direction:column;gap:.3rem;margin-top:auto} .karta .fmt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.35em .8em;font-size:.82rem;border-radius:999px;background:transparent;border-color:var(--color-line)} .karta .fmt.odin{justify-content:center} .fmt.odin{text-align:center} .karta .fmt[aria-pressed="true"]{border-color:var(--color-fg);font-weight:500} .karta .fmt s{color:var(--color-muted);font-weight:400;margin-right:.3em}
.karta .knopki{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
/* ⛔ 17.09 владелец: «кнопочки „See" нужно везде прижать к нижнему краю. Сейчас некоторые
   съезжают». Съезжали там, где нет цены: у карточки с ценой низ держит `.fmts` (margin-top:auto),
   а у карточки раздела посуды — ничего, и подпись в две строки уводила кнопку ниже соседних.
   Карточки в ряду обязаны кончаться на одной линии независимо от длины подписи. */
.karta .telo:not(:has(.fmts)) .knopki{margin-top:auto}
/* price посуды — текст, а не плитка выбора фасовки (владелец 17.09) */
 .karta .knopki .btn{flex:1 1 auto;min-width:0;text-align:center;padding:.5em .4em;font-size:.82rem;white-space:nowrap} /* не влезли в ряд — «Details» уходит на вторую строку, страница не растёт вширь */
/* утверждена раскладка 1 (владелец 06.09): photo сверху квадратом, плашка страны на photo, имя, полоски, кнопки */
.karta .tip{display:none}
.setka.lenta .karta{flex:0 0 200px}
.pv-l{font-size:.7rem;color:var(--color-muted);margin-right:.2rem}
.doverie2{font-size:.95rem;margin-top:-.4rem} .doverie3{margin-top:-.5rem}
.filtry-gruppy.kompakt{gap:.3rem} .filtry-gruppy.kompakt .chip{font-size:.78rem;padding:.22em .7em} .filtry-gruppy.kompakt .fgr-imya{font-size:.72rem}
.filtry-selecty{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 var(--space)} .fsel{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--color-muted)} .fsel select{font:inherit;font-size:.9rem;color:var(--color-fg);padding:.4em .6em;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-bg)}
.filtry.glavnyy .chip{font-size:1rem;padding:.5em 1.1em} .filtry.glavnyy{margin-bottom:.5rem}
.chast{margin-top:calc(var(--space)*1.5)} .chast .gr-zag{font-size:1.15rem}
.dom.odna{grid-template-columns:1fr} .galereya{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:var(--space)} .galereya .foto{aspect-ratio:4/3} @media (max-width:560px){.galereya{grid-template-columns:repeat(2,1fr)}}
.konstruktor .stupeni{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:var(--space) 0} .stupen{border:1px solid var(--color-line);border-radius:var(--radius);padding:.9rem;display:grid;gap:.15rem;min-width:0} @media (max-width:560px){.stupen{padding:.6rem .5rem;font-size:.9rem}} .stupen[aria-current=true]{border-color:var(--color-fg);background:var(--color-surface)} .stupen .cena{font-size:1.1rem}
.ch-panel{position:sticky;top:4.2rem;z-index:4;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:.6rem .8rem;margin:0 0 var(--space)}
.ch-panel b{font-weight:500} .ch-panel .btn{margin-left:auto}
.ch-karta{cursor:pointer} .ch-karta .k-gal{position:absolute;top:.5rem;right:.5rem;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-line);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:transparent}
.ch-karta[aria-pressed=true]{border-color:var(--color-fg);box-shadow:inset 0 0 0 1px var(--color-fg)} .ch-karta[aria-pressed=true] .k-gal{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.chip.lishnyaya{border-style:dashed;opacity:.7} .k-vyvod{min-height:1.5em} .k-vyvod s{color:var(--color-muted)} .btn[disabled]{opacity:.5;cursor:default}
.most{display:grid;gap:.75rem} @media (min-width:700px){.most{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.para-most{display:grid;grid-template-columns:1fr auto 200px;gap:.6rem;align-items:center;border:1px solid var(--color-line);border-radius:var(--radius);padding:.6rem;background:var(--color-surface)} @media (max-width:480px){.para-most{grid-template-columns:1fr auto 170px}} .para-most .bylo b{display:block;font-size:1.05rem} .para-most .strelka{color:var(--color-muted);font-size:1.3rem} .para-most .karta{background:var(--color-bg)}
/* ⛔ 11.09 владелец: «полосочка до бесплатной доставки неочевидная: она красная и её не видно… сделать больше, жирнее, в рамку or фон». И прямо: «красная, яркая, когда delivery платная, и ярко-зелёная, когда бесплатная». Поэтому у полоски два состояния и они разного цвета: пока не хватает — красная, набрали — зелёная, и меняется на глазах при добавлении товара. */
/* ⛔ 22.09: цвет назначен Дизайном (#1F6B3B, зелёный), числа посчитаны по норме читаемости:
   жирный текст на фоне 5,80 · шкала 4,52 · «Envío gratis» 4,88. Один цвет на ОБА состояния:
   переход виден тем, что полоса зеленеет целиком, а не меняет цвет. Прежний #1E9E4A давал 3,09
   и строка «бесплатно» была бледной. Запасной #C62828 убран совсем: это цвет ошибки, и он
   сработал бы на любой странице, где забудут задать акцент. Свой цвет здесь не подбирать. */
:root{--dostavka-platno:#1F6B3B;--dostavka-besplatno:#1F6B3B}
.progress{height:10px;background:color-mix(in srgb,var(--color-fg) 12%,transparent);border-radius:999px;overflow:hidden} .progress i{display:block;height:100%;width:0;background:var(--dostavka-platno);border-radius:999px;transition:width .35s ease,background .35s ease} .zakaz-polosa .progress{border-radius:0;height:6px}
#okno-dostavka-tekst{font-weight:600}
.obeshchaniya{list-style:none;margin:.6rem 0;padding:0;display:grid;gap:.3rem;font-size:.85rem;line-height:1.35}
.obeshchaniya li{padding-left:1.1rem;position:relative} .obeshchaniya li::before{content:"·";position:absolute;left:.35rem;font-weight:700}
/* ⛔ 21.09: рамка была в 2px цветом «платно» — на светлом фоне читалась как ошибка формы.
   Один пиксель и тот же цвет линии, что у остальных карточек: полоса сообщает, а не тревожит. */
.dostavka{margin:.6rem 0;padding:.7rem .8rem;border:1px solid var(--color-line);border-radius:var(--radius);background:color-mix(in srgb,var(--dostavka-platno) 7%,var(--color-bg))} .dostavka p{margin:0 0 .35rem} .dostavka p:last-child{margin:.35rem 0 0} .dostavka b{color:var(--dostavka-platno)} .dostavka.besplatno{border-color:var(--dostavka-besplatno);background:color-mix(in srgb,var(--dostavka-besplatno) 10%,var(--color-bg))} .dostavka.besplatno b{color:var(--dostavka-besplatno)} .dostavka.besplatno .progress i{background:var(--dostavka-besplatno)} .zakaz-polosa.besplatno .progress i{background:var(--dostavka-besplatno)} .dobavit{margin:.6rem 0} .dobavit .chipy{margin:.3rem 0 0}
.foto{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:var(--radius);text-decoration:none;color:var(--color-muted);font-size:.8rem;text-align:center;padding:.5rem;
  background:var(--color-surface);border:1px solid var(--color-line);overflow:hidden} .foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto.shirokoe{aspect-ratio:16/7} .fotoryad{display:grid;gap:var(--space)}
.tip,.nadzag{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)} .nadzag{text-transform:none;letter-spacing:0;font-size:.8rem}
.karta h3 a{text-decoration:none} .karta h3 a:hover{text-decoration:underline} .vkus{color:var(--color-muted);font-size:.9rem;margin:0}
.fmts{display:flex;flex-wrap:wrap;gap:.35rem} .fmt{border:1px solid var(--color-line);border-radius:var(--radius);padding:.2em .55em;font-size:.85rem;font-variant-numeric:tabular-nums;background:var(--color-bg)}
.fmt[aria-pressed="true"]{border-color:var(--color-fg);font-weight:600} button.fmt{font:inherit;cursor:pointer;color:inherit}
.zametka{font-size:.78rem;color:var(--color-muted);border-left:2px solid var(--color-line);padding:.2em .7em;margin:0 0 var(--space);max-width:80ch}
.zametka .izm{color:var(--color-fg);font-weight:600} .zametka .nb{color:var(--color-fg);font-weight:700} body.bez-zametok .zametka{display:none} body.bez-zametok .pv{display:none}
/* техника прототипа: пока заметки включены — блоки через один на подложке, у вариантов переключалка; кнопка «заметки: off» прячет всё разом */
/* подложек через блок больше нет — по образцу владельца (moychay.nl) страница целиком белая, воздух даёт отступ */
.ryad.mezhdu{justify-content:space-between} .setka.malye{grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:.6rem} /* Ревизия 10.09, находка 9: восемь пустых cups по 500 px на телефоне — 4000 px подряд, до «как купить» не долистать. Две колонки на узком, подпись «ceramic ручной работы» у всех одинаковая и на витрине не нужна. */ .setka.ch-setka{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:560px){.setka.ch-setka{grid-template-columns:repeat(4,minmax(0,1fr))}} .ch-setka .telo{padding:.5rem} .ch-setka .imya{font-size:.95rem} .ch-setka .sostav{display:none}
.probniki .gruppa{margin-top:var(--space)} @media (min-width:900px){.probniki .setka.lenta{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}}
/* Полка посуды (10.09): те же две колонки на телефоне, что у cups — восемь карточек по 500 px на узком экране уже покупали ревизией. */
.polka-razdel .ryad.otstup:empty,.polka-razdel .ryad.otstup:has(.polka-esche[hidden]){margin:0;display:none}
.polka .polka-setka{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:560px){.polka .polka-setka{grid-template-columns:repeat(4,minmax(0,1fr))}} .polka-setka .telo{padding:.5rem} .polka-setka .imya{font-size:.95rem} .polka-setka .sostav{font-size:.8rem;color:var(--color-muted)}
.galereya-doski{grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr))} .galereya-doski .gal-glavnyy{grid-column:span 2;grid-row:span 2} @media (max-width:560px){.galereya-doski{grid-template-columns:repeat(3,1fr)} .galereya-doski .gal-glavnyy{grid-column:span 3;grid-row:auto}}
.doski-razmery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:.6rem;margin:0 0 var(--space)} .doska-razmer{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border:1px solid var(--color-line);border-radius:var(--radius)} .doska-razmer b{font-weight:500} .doska-razmer .btn{margin-left:auto}
.polka-razdel{margin:0 0 var(--blok)} .polka-razdel:last-child{margin-bottom:0} .polka-imya{margin:0 0 .7rem;font-size:1.05rem} .polka-imya .muted{font-weight:400;font-size:.9rem}
.polka-soderzhanie{margin:0 0 1.4rem}
.polka-vtoroe{display:block;width:100%;height:auto;margin:.4rem 0 0;border-radius:var(--radius)}
.plashka.vtoroy{right:auto;left:.4rem}
.galereya{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:.5rem;margin:0 0 var(--space)} .gal-kadr{display:block;border-radius:var(--radius);overflow:hidden} .gal-kadr img{display:block;width:100%;height:auto}
.filtry-gruppy{display:grid;gap:.5rem;margin:0 0 var(--space)} .fgr{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap} .fgr-imya{font-size:.8rem;color:var(--color-muted);min-width:4.5rem} .fgr .chipy{margin:0}
.raskryvaemoe{margin-top:var(--space)} .gruppa[hidden]{display:none}
.chipy{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--space)} .chip{font:inherit;font-size:.9rem;border:1px solid var(--color-line);background:var(--color-bg);color:inherit;border-radius:999px;padding:.45em 1em;cursor:pointer;text-decoration:none}
.chip[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-fg);border-color:var(--color-accent)}
.shapka{position:sticky;top:0;z-index:5;background:var(--color-bg);border-bottom:1px solid var(--color-line)}
.shapka .verh{border-bottom:1px solid var(--color-line);font-size:.78rem;color:var(--color-muted)} .shapka .verh .vnutri{padding:.3rem var(--space);gap:.8rem} .shapka .verh .tekst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc{display:flex;gap:.15rem;margin-left:auto} .shapka .menu{margin-left:auto} .shapka .soc{margin-left:0} @media (max-width:560px){.shapka .soc{margin-left:auto}} .soc a{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:999px;color:var(--color-fg)} .soc a:hover{background:var(--color-surface)} .soc svg{width:1rem;height:1rem;fill:currentColor}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yazyki{display:flex;gap:.4rem;font-size:.78rem;color:var(--color-muted)} .yazyki a{text-decoration:none;padding:.15em .3em} .yazyki a:hover{color:var(--color-fg)}
.shapka .vnutri{max-width:var(--maxw);margin:0 auto;padding:.7rem var(--space);display:flex;gap:var(--space);align-items:center} @media (min-width:900px){.shapka .vnutri{padding-left:calc(var(--space)*2);padding-right:calc(var(--space)*2)}}
.logo{font-family:var(--font-heading);font-weight:500;letter-spacing:.1em;text-decoration:none;font-size:1.05rem;display:inline-flex;align-items:center;color:var(--color-fg)} .logo-svg{height:2rem;width:auto;display:block} footer .logo-svg{height:2.4rem}
.menu{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto;font-size:.95rem} @media (max-width:560px){.menu{display:none}} .menu a{text-decoration:none} .menu a:hover{text-decoration:underline}
.k-zakaz{white-space:nowrap} .k-zakaz b{background:var(--color-accent-fg);color:var(--color-accent);border-radius:999px;padding:0 .5em;margin-left:.4em;font-variant-numeric:tabular-nums}
.pereklyuchatel{font:inherit;font-size:.78rem;background:none;border:1px dashed var(--color-line);color:var(--color-muted);border-radius:var(--radius);padding:.25em .6em;cursor:pointer}
@media (max-width:720px){.menu{display:none}}
.burger{display:none;font:inherit;font-size:.85rem;background:none;border:1px solid var(--color-line);border-radius:999px;padding:.35em .8em;cursor:pointer;color:inherit}
@media (max-width:720px){.shapka .vnutri{gap:.5rem;padding-left:.8rem;padding-right:.8rem} .shapka .soc{display:none} .logo-svg{height:1.6rem} .burger{display:inline-flex} .yazyki{margin-left:auto;font-size:.82rem;gap:.15rem}
 .shapka.otkryta .menu{display:flex;flex-direction:column;gap:.9rem;position:absolute;left:0;right:0;top:100%;margin:0;padding:var(--space);background:var(--color-bg);border-bottom:1px solid var(--color-line);box-shadow:0 12px 24px rgba(0,0,0,.08)} .shapka.otkryta .menu a{font-size:1.05rem}}
.blok-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space)} .blok-hero .pod{font-size:1.15rem} .doverie{font-size:.92rem} .blok-hero .setka{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.znachok{display:inline-block;background:var(--color-surface);border:1.5px solid var(--color-fg);border-radius:999px;padding:.45em 1.1em;font-weight:700;font-size:1.05rem;text-decoration:none}
.dveri .chip{font-size:1rem;padding:.55em 1.1em}
.setka.lenta{display:flex;gap:calc(var(--space)*.75);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem} .setka.lenta .karta{scroll-snap-align:start}
section.s-varianty{position:relative} .pv{position:absolute;top:.6rem;right:var(--space);display:flex;gap:.25rem;z-index:2}
.pv-k{font:inherit;font-size:.72rem;width:1.65rem;height:1.65rem;padding:0;border-radius:999px;border:1px solid var(--color-line);background:var(--color-bg);color:var(--color-muted);cursor:pointer} .pv{align-items:center;background:var(--color-bg);padding:.15rem .4rem;border-radius:999px;border:1px solid var(--color-line)}
.pv-k[aria-pressed=true]{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.variant{display:contents} .variant[hidden]{display:none}
.shagi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space)} .shag{padding:var(--space);border:1px solid var(--color-line);border-radius:var(--radius)} .shag b{display:block;margin-bottom:.2rem} .shag p{margin:0;color:var(--color-muted);font-size:.92rem}
.gruppa{margin-top:calc(var(--space)*1.5)} .gr-zag{margin-bottom:calc(var(--space)*.75)} .karta[hidden]{display:none}
.plitki{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;margin-bottom:var(--space)} @media (max-width:820px){.plitki{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:560px){.plitki{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shkala-liniya{display:flex;align-items:center;gap:.8rem;font-size:.8rem;color:var(--color-muted);margin:.4rem 0 .8rem} .shkala-liniya i{flex:1;height:6px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-fg) 10%,var(--color-bg)),var(--color-fg))}
.tip-plitka{font:inherit;color:inherit;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius);padding:.9rem .6rem .8rem;cursor:pointer;display:grid;justify-items:center;gap:.25rem;text-align:center;min-width:0} .tip-plitka[aria-pressed=true]{border-color:var(--color-fg);box-shadow:inset 0 0 0 1px var(--color-fg)}
.tip-krug{width:3.2rem;height:3.2rem;border-radius:999px;background:var(--color-surface);display:grid;place-items:center;margin-bottom:.2rem} .tip-krug i{width:2.2rem;height:2.2rem;border-radius:999px;background:color-mix(in srgb,var(--color-fg) calc(var(--ton)*100%),var(--color-bg))}
.tip-plitka b{font-weight:500;font-size:.95rem} .tip-plitka small{color:var(--color-muted);font-size:.72rem;line-height:1.2} .tip-fakty{font-size:.72rem;color:var(--color-muted)} .tip-polka{font-size:.72rem;margin-top:.2rem}
.btn.bolshaya{font-size:1.1rem;padding:.9em 2em}

.vyvod{border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space);background:var(--color-surface)} .vyvod:empty{display:none} .oprosnik-vyvod{margin-top:var(--space)}
.voprosy{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space)} .vopros b{display:block;margin-bottom:.4rem}
.sostav{margin:0;padding-left:1.1em;font-size:.92rem} .cena{font-family:var(--font-heading);font-size:1.3rem;font-variant-numeric:tabular-nums} .podpis{margin-top:var(--space);font-size:.9rem}
.nomer{font-size:.8rem;color:var(--color-muted)}
.dom{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space)} @media (max-width:720px){.dom{grid-template-columns:1fr}}
.fakty{display:grid;gap:.5rem;margin:var(--space) 0} .fakt{display:grid;grid-template-columns:110px 1fr;gap:.6rem;font-size:.95rem} .fakt span:first-child{color:var(--color-muted)}
details{border-top:1px solid var(--color-line);padding:.6rem 0} summary{cursor:pointer;font-weight:600} details p{margin:.5rem 0 0;color:var(--color-muted);max-width:65ch}
.pary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space);margin-bottom:var(--space)} .para b{display:block;margin-bottom:.2rem} .para p{margin:0;color:var(--color-muted);font-size:.92rem}
footer{max-width:var(--maxw);margin:0 auto;padding:calc(var(--space)*3) var(--space);border-top:1px solid var(--color-line);color:var(--color-muted);font-size:.9rem} footer h3{color:var(--color-fg);margin-bottom:.4rem}
.stranica[hidden]{display:none} /* страницы: одна видна, остальные скрыты — переключает маршрут (JS) */
.tovar-shapka{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*1.5);align-items:start} @media (max-width:720px){.tovar-shapka{grid-template-columns:1fr}}
.tovar-shapka h1{font-size:calc(var(--size-h1)*.85)} .region{color:var(--color-muted);font-size:.9rem}
.razdel{margin-top:calc(var(--space)*1.75)} .razdel h2{font-size:1.15rem} .sposoby{display:grid;gap:.5rem} .sposob{display:grid;grid-template-columns:110px 1fr;gap:.6rem;font-size:.92rem} .sposob span:first-child{color:var(--color-muted)}
.upak{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem} .upak div{border:1px solid var(--color-line);border-radius:var(--radius);padding:.6rem;font-size:.9rem}
.zakaz-polosa{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--color-bg);border-top:1px solid var(--color-line)}
.zakaz-polosa .vnutri{max-width:var(--maxw);margin:0 auto;padding:.6rem var(--space);display:flex;gap:var(--space);align-items:center} .zakaz-polosa .itog{margin-left:auto;font-variant-numeric:tabular-nums}
.shtora{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:7} .okno{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--color-bg);z-index:8;padding:var(--space);overflow:auto;border-left:1px solid var(--color-line)}
.okno h3{display:flex;justify-content:space-between;align-items:center} .stroka{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--color-line);font-size:.92rem}
.stroka button{font:inherit;background:none;border:1px solid var(--color-line);border-radius:var(--radius);cursor:pointer;color:inherit;padding:.1em .5em}
:focus-visible{outline:2px solid var(--color-fg);outline-offset:2px}
/* --- v38: страницы, крошки, товар, конструктор, фильтры-плитки, подвал, «ищешь травы» --- */
.karta .plashka.nov{left:auto;right:.5rem;background:var(--color-fg);color:var(--color-bg)}
.kroshki{font-size:.85rem;color:var(--color-muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .kroshki a{text-decoration:none} .kroshki a:hover{text-decoration:underline} .kroshki span:last-child{color:var(--color-fg)} .kroshki .razd{opacity:.5}
section.kroshki-ryad{padding-top:var(--space);padding-bottom:0} #t-kroshki{margin-bottom:var(--space)}
.tovar-shapka{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*2);align-items:start} @media (max-width:720px){.tovar-shapka{grid-template-columns:1fr;gap:var(--space)}}
.t-galereya .foto.kvadrat{aspect-ratio:1;border-radius:var(--radius)} .t-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem} .t-minis .foto{aspect-ratio:1;font-size:.68rem;padding:.3rem;cursor:pointer} .t-minis .foto[aria-current=true]{border-color:var(--color-fg)}
/* ⛔ правило стоит ПОСЛЕ общего `.fmt` и сильнее его (два класса): иначе рамка плитки
   переживает правку, и price по-прежнему выглядит кнопкой — проверено на живом 17.09. */
.fmt.fmt.cena-odna{border:0;background:none;padding:0;cursor:default;font-weight:500;gap:.4em}
.fmt.fmt.cena-odna:hover{background:none;border:0;box-shadow:none}
.karta .fmt.fmt.cena-odna{font-size:.95rem;padding:0} .karta .fmt.fmt.cena-odna .muted{font-weight:400;font-size:.8rem}
.t-info .fmt.fmt.cena-odna{font-size:1.25rem;padding:0}
.t-info h1{font-size:calc(var(--size-h1)*.8);margin:.2rem 0} .t-info .fmts{margin-top:.6rem} .t-info .fmt{padding:.5em 1em;font-size:.95rem;display:inline-flex;gap:.7em} .t-fakty{margin-top:var(--space)} #t-dostavka{margin-top:.6rem}
.hvatit{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .hvatit .hv{border:1px solid var(--color-line);border-radius:var(--radius);padding:.9rem 1rem} .hvatit .hv b{display:block;font-size:1.15rem;margin-bottom:.4rem} .hvatit .hv div{display:flex;justify-content:space-between;gap:.6rem;font-size:.9rem;padding:.25rem 0;border-top:1px solid var(--color-line)} .hvatit .hv div span:last-child{text-align:right;color:var(--color-muted)}
.upak{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem} .upak div{border:1px solid var(--color-line);border-radius:var(--radius);padding:.7rem;font-size:.9rem;display:grid;gap:.3rem} .upak .foto{aspect-ratio:1;font-size:.72rem;border:0;border-radius:calc(var(--radius)*.7)} .upak b{font-size:1rem}
.galereya.zav,.galereya.sessiya{grid-template-columns:repeat(5,1fr);gap:.6rem} @media (max-width:720px){.galereya.zav,.galereya.sessiya{grid-template-columns:repeat(3,1fr)}} .galereya.zav figure .foto{font-size:.68rem;padding:.3rem} .galereya figure{margin:0;display:grid;gap:.35rem} .galereya figure .foto{aspect-ratio:1;font-size:.78rem} .galereya figcaption{font-size:.82rem;color:var(--color-muted)} .galereya figcaption b{color:var(--color-fg);font-weight:500;margin-right:.3em}
.galereya.sessiya{grid-template-columns:2fr 1fr 1fr} .galereya.sessiya figure:first-child{grid-row:span 2} .galereya.sessiya figure:first-child .foto{aspect-ratio:auto;height:100%} @media (max-width:560px){.galereya.sessiya{grid-template-columns:1fr 1fr} .galereya.sessiya figure:first-child{grid-column:span 2;grid-row:auto} .galereya.sessiya figure:first-child .foto{aspect-ratio:16/10}}
.sposob{grid-template-columns:130px 1fr}
/* конструктор: карточки с галочкой + панель счёта */
.k-presety{margin:.4rem 0 var(--space)} .k-presety .chipy{margin:.4rem 0 0}
.k-telo{display:grid;grid-template-columns:1fr 280px;gap:calc(var(--space)*1.5);align-items:start} @media (max-width:820px){.k-telo{grid-template-columns:1fr}}
.k-gr{margin:.8rem 0 .4rem;font-size:.85rem;color:var(--color-muted);font-weight:500} .k-setka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem} @media (min-width:560px){.k-foto{aspect-ratio:4/3}}
.k-karta{font:inherit;text-align:center;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius);padding:0 0 .6rem;cursor:pointer;color:inherit;display:grid;gap:.2rem;overflow:hidden;position:relative}
.k-karta[aria-pressed=true]{border-color:var(--color-fg);box-shadow:inset 0 0 0 1px var(--color-fg)} .k-foto{position:relative;display:block;aspect-ratio:1;background:var(--color-surface);overflow:hidden} .k-foto img{width:100%;height:100%;object-fit:cover;display:block}
.k-gal{position:absolute;top:.4rem;right:.4rem;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-line);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:transparent} .k-karta[aria-pressed=true] .k-gal{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.k-karta.lishnyaya{opacity:.55} .k-karta.lishnyaya .k-gal{background:var(--color-bg);color:var(--color-fg)}
.k-imya{font-size:.86rem;font-weight:500;padding:.3rem .4rem 0;line-height:1.2} .k-pod{font-size:.7rem;padding:0 .4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .k-cena{font-size:.8rem;padding:.1rem .4rem 0}
.k-panel{position:sticky;top:5rem;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space);display:grid;gap:.7rem} .k-schet b{font-size:2.2rem;font-weight:500;line-height:1}
.k-tochki{display:flex;gap:.3rem} .k-tochki i{flex:1;height:6px;border-radius:999px;background:var(--color-line)} .k-tochki i.on{background:var(--color-fg)} .k-tochki i.lish{background:var(--color-muted);opacity:.5}
.k-lestnica{display:flex;gap:.4rem} .k-stupen{flex:1;border:1px solid var(--color-line);border-radius:calc(var(--radius)*.7);padding:.4rem;text-align:center;display:grid;font-size:.8rem} .k-stupen b{font-weight:500;font-size:1rem} .k-stupen small{color:var(--color-muted)} .k-stupen[aria-current=true]{border-color:var(--color-fg);background:var(--color-surface)}
.k-vyvod{margin:0;font-size:.92rem;min-height:2.6em} .k-vyvod s{color:var(--color-muted)} .k-panel .pereklyuchatel{justify-self:start}
/* фильтры-плитки */
.ryad.vhod{gap:.6rem;align-items:center;margin:0 0 var(--space)} .ryad.vhod .chipy{margin:0}
.f-stroka{display:grid;gap:.5rem} .f-stroka .fgr{align-items:center} .f-stroka .fgr-imya{font-size:.9rem;font-weight:500;color:var(--color-fg);min-width:5.2rem} .f-stroka .chip{font-size:.9rem;padding:.45em 1em}
.f-plitki{gap:.6rem;margin-bottom:.8rem} .f-plitka{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .3rem;border-radius:999px} .f-foto{width:2.2rem;height:2.2rem;border-radius:999px;overflow:hidden;background:var(--color-surface);display:block} .f-foto img{width:100%;height:100%;object-fit:cover;display:block} .f-foto.vse{background:var(--color-line)} .f-imya{font-weight:500} .f-n{font-size:.78rem}
.chip[aria-pressed=true] .f-n,.chip[aria-pressed=true] .muted{color:inherit;opacity:.75} .f-stroka{margin-bottom:.6rem}
/* «ищешь травы?» */
.most{display:block} .most-fishki .chip b{font-weight:500} .most-otvet{display:grid;grid-template-columns:1fr 240px;gap:var(--space);align-items:center;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space)} @media (max-width:560px){.most-otvet{grid-template-columns:1fr}} .most-otvet[hidden]{display:none} .most-tekst p{margin:.3rem 0}
.most-nabor{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space);align-items:center;margin-top:var(--space);padding:var(--space);border-radius:var(--radius);background:var(--color-surface)} @media (max-width:720px){.most-nabor{grid-template-columns:1fr}} .most-sostav{gap:.6rem!important} /* ⛔ Три колонки — только с 560px. Ниже `!important` перебивал двухколоночную `.setka`, и на 375 карточка teas получала 92px: имя «Santa Paca (Yuraq Cha)» ломалось в столбик шириной 47px и высотой 77px, кнопка «Details» вылезала of рамки (79>66). Ворота 07.09: 24 брака «узкий текст» + 9 «лезет». Ниже 560 наследуем те же две колонки, что у главной полки, — там 161px и брака нет. */@media (min-width:560px){.most-sostav{grid-template-columns:repeat(3,1fr)!important}} .most-fakty{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--space)} .most-fakty .fakt{grid-template-columns:1fr;gap:.1rem} .most-fakty .fakt span:first-child{font-weight:500;color:var(--color-fg)}
/* текст, справочник, форма */
.tekst.s-foto{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(var(--space)*2);align-items:start} @media (max-width:720px){.tekst.s-foto{grid-template-columns:1fr}} .tekst p{max-width:62ch} .tekst .foto.shirokoe{aspect-ratio:4/3}
.spravochnik{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem 1.5rem;margin:0} .spravochnik div{border-top:1px solid var(--color-line);padding:.6rem 0} .spravochnik dt{font-weight:500} .spravochnik dd{margin:.15rem 0 0;color:var(--color-muted);font-size:.92rem}
.tablica{overflow-x:auto;margin-bottom:var(--space)} .spisok{width:100%;border-collapse:collapse;font-size:.92rem} .spisok th{text-align:left;font-weight:500;color:var(--color-muted);font-size:.8rem;padding:.5rem .6rem;border-bottom:1px solid var(--color-line)} .spisok td{padding:.55rem .6rem;border-bottom:1px solid var(--color-line);vertical-align:top} .spisok td:first-child{white-space:nowrap} .spisok td a{text-decoration:none} .spisok td a:hover{text-decoration:underline}
.forma{display:grid;gap:.9rem;max-width:560px} .pole{display:grid;gap:.3rem} .pole-imya{font-size:.8rem;color:var(--color-muted)} .pole input{font:inherit;padding:.6em .9em;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-bg);color:inherit} .pole .chipy{margin:0}
/* подвал по образцу */
footer{padding:calc(var(--space)*3.5) var(--space) calc(var(--space)*2)} .pod-setka{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:calc(var(--space)*2)} @media (max-width:820px){.pod-setka{grid-template-columns:1fr 1fr}} @media (max-width:480px){.pod-setka{grid-template-columns:1fr}}
/* ⛔ 11.09 владелец: «иконки социальных сетей внизу в подвале нужно сделать крупнее», «кнопка WhatsApp должна быть зелёной». */
.pod-o p{max-width:36ch;margin:.8rem 0} .pod-o .soc{margin-left:0;gap:.6rem} .pod-o .soc a{width:2.6rem;height:2.6rem;border:1px solid var(--color-line)} .pod-o .soc svg{width:1.45rem;height:1.45rem} .pod-o .soc a:hover{background:var(--color-surface)} .soc a[data-set="whatsapp"],.soc .soc-net[data-set="whatsapp"]{color:#1E9E4A} .soc .soc-net{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:999px;color:var(--color-fg);opacity:.45} .pod-o .soc .soc-net{width:2.6rem;height:2.6rem;border:1px solid var(--color-line)} .pod-o .soc a[data-set="whatsapp"]{border-color:#1E9E4A} .pod-kol{display:grid;gap:.45rem;align-content:start} .pod-kol h4{margin:0 0 .3rem;font-weight:500;color:var(--color-fg);font-size:1rem} .pod-kol a{text-decoration:none} .pod-kol a:hover{text-decoration:underline} .pod-niz{margin:calc(var(--space)*2.5) 0 0;font-size:.8rem;border-top:1px solid var(--color-line);padding-top:var(--space)}
.zametka .iz{opacity:.7}
/* v39 */
.str-shapka{display:grid;gap:var(--space);padding-top:var(--space)} .str-shapka h1{font-size:calc(var(--size-h1)*.9)} .str-tekst{max-width:62ch} .str-foto{aspect-ratio:21/8;width:100%} @media (max-width:560px){.str-foto{aspect-ratio:16/9}}
.foto-ryad{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:var(--space)} .foto-ryad .foto{aspect-ratio:4/3;font-size:.8rem} figure.kadr{margin:0;display:grid;gap:.4rem} figure.kadr figcaption{font-size:.82rem;color:var(--color-muted)} /* кадр с подписью показывают целиком, а не полосой: под подписью стоит портрет человека, и 16/7 срезает ему голову (08.09, «Who we are») */ figure.kadr .foto.shirokoe{aspect-ratio:4/3} .foto-ryad.odin{grid-template-columns:1fr;max-width:360px} .foto-ryad.odin .foto{aspect-ratio:2/3} @media(min-width:900px){.str-shapka:has(.foto-ryad.odin){grid-template-columns:1fr auto;align-items:start}} .foto-ryad.odna{grid-template-columns:1fr;max-width:640px} .foto-ryad.odna .foto{aspect-ratio:16/9} /* одиночный кадр — иллюстрация, а не щит: без потолка он занимал 58 % высоты блока */ .foto-ryad.chetyre{grid-template-columns:repeat(4,1fr);margin-top:0} .foto-ryad.chetyre .foto{aspect-ratio:1} @media (max-width:560px){.foto-ryad,.foto-ryad.chetyre{grid-template-columns:1fr 1fr}}
.upak{grid-template-columns:repeat(auto-fit,minmax(140px,220px))}
.tekst .setka{margin-top:var(--space)}
.faq-nav{margin-bottom:var(--space)} .faq-razdel{margin-top:calc(var(--space)*1.5);scroll-margin-top:5rem} .faq-razdel h3{margin-bottom:.4rem}
.hvatit .hv .btn{margin-top:.7rem}
.dobavit .chipy{display:grid;grid-template-columns:1fr;gap:.5rem} .okno-karta{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.6rem;align-items:center;border:1px solid var(--color-line);border-radius:var(--radius);padding:.4rem} .ok-foto{width:3.2rem;height:3.2rem;border-radius:calc(var(--radius)*.7);overflow:hidden;background:var(--color-surface);display:block} .ok-foto img{width:100%;height:100%;object-fit:cover;display:block} .ok-telo{display:grid;font-size:.85rem;line-height:1.25;min-width:0} .ok-telo b{font-weight:500} .okno-karta .btn{padding:.35em .8em} .ok-povod{font-size:.7rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em} .ok-telo .malenkoe{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oformlenie{display:grid;gap:.6rem;margin-top:var(--space);border-top:1px solid var(--color-line);padding-top:var(--space)} .oformlenie h3{margin-bottom:.2rem} .okno .btn.shirokaya{margin-top:.4rem}
.otzyv-forma{margin-top:var(--space)} .pole textarea{font:inherit;padding:.6em .9em;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-bg);color:inherit;resize:vertical} .zvezdy-vybor{display:flex;gap:.2rem} .zvezdy-vybor button{font:inherit;font-size:1.4rem;background:none;border:0;cursor:pointer;color:var(--color-line);padding:0 .1em} .zvezdy-vybor button[aria-pressed=true]{color:var(--color-fg)}
.reyting{margin:.2rem 0 .4rem;font-size:.9rem} .zvezdy{color:var(--color-fg);letter-spacing:.05em} .otzyvy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem} .otzyv{border:1px solid var(--color-line);border-radius:var(--radius);padding:.9rem;display:grid;gap:.3rem} .otzyv p{margin:0;font-size:.92rem} .karta .plashka.hit{right:.5rem;background:var(--color-surface);color:var(--color-fg);border:1px solid var(--color-line)}/* ⛔ Без сдвига вниз. Смещение осталось с тех пор, когда «hit» и «new» были двумя
   флагами и могли встать вдвоём. Теперь метка одна (`metka`), и on the shelf «top» висел
   на 34px ниже, чем «nuevo» на соседней карточке — владелец 07.09: «надо, чтобы они
   по одной системе отображались вверху». Обе метки теперь на top:.5rem, как плашка типа. */
/* услуги: переключатель формата и запись (ТЗ 07.09). Ширины считаны на 375: две плитки в ряд,
   перенос по пробелам — без overflow-wrap:anywhere, иначе однословная подпись встаёт столбиком (грабля 07.09). */
.uslugi-formaty{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin:var(--space) 0}
.uf-plitka{font:inherit;text-align:left;display:grid;gap:.15rem;align-content:start;padding:.9rem 1rem;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-bg);color:inherit;cursor:pointer}
.uf-plitka[aria-pressed=true]{border-color:var(--color-fg);box-shadow:inset 0 0 0 1px var(--color-fg)}
.uf-label{font-weight:500} .uf-cena{font-size:1.15rem;font-variant-numeric:tabular-nums} .uf-opis{color:var(--color-muted);margin-top:.25rem}
@media (max-width:560px){.uslugi-formaty{grid-template-columns:1fr 1fr;gap:.4rem} .uf-plitka{padding:.7rem .8rem} .uf-cena{font-size:1rem}}
.zapis-blok{display:grid;gap:var(--space)} .zapis-forma .pole input[type=date]{font:inherit;color:inherit}
.zapis-inache{border-top:1px solid var(--color-line);padding-top:var(--space);display:grid;gap:.5rem;max-width:560px}
.chat-knopka{position:fixed;right:1rem;bottom:4.6rem;z-index:6;display:inline-flex;align-items:center;gap:.5rem;background:#1E9E4A;color:#fff;border-radius:999px;padding:.6rem 1rem .6rem .7rem;text-decoration:none;font-size:.9rem;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.18)} .chat-knopka svg{width:1.3rem;height:1.3rem;fill:currentColor} @media (max-width:560px){.chat-knopka span{display:none} .chat-knopka{padding:.7rem}}
/* cveta.css — выжимка системы 03: только то, что НЕ двигает раскладку.
   Собирает `departments/09-dizayn/work/vyzhimka-cveta.py`. Руками не править.
   Подключать ПОСЛЕ своего стиля страницы: файл только перекрашивает.
   Ни одного правила размера: ни width, ни padding, ни gap, ни font-size,
   ни grid, ни aspect-ratio, ни border-radius. Проверено воротами сборки. */


/* ══════════ из tokens.css ══════════ */
:root { --cacao: #240D05; --corteza: #5B220B; --granate: #520A0E; --terra: #912D12; --canela: #9F5622; --cobre: #BE6B37; --arena: #DD9B62; --ambar: #DB9C3E; --arcilla: #A78673; --tabaco: #6B4C30; --crema: #DFC5AC; --papel: #FFF0D6; --blanco: #FFFFFF; --verde: #33351D; --verde-claro: #C3CA7A; --whatsapp: #25D366; --fon: var(--papel); --pov: var(--crema); --tekst-cvet: var(--cacao); --zag-cvet: var(--granate); --tusk: var(--tabaco); --akcent: var(--terra); --na-akcente: var(--papel); --granica-cvet: var(--tabaco); }
.vecher { --fon: var(--cacao); --pov: var(--corteza); --tekst-cvet: var(--crema); --zag-cvet: var(--papel); --tusk: var(--arena); --akcent: var(--ambar); --na-akcente: var(--cacao); --granica-cvet: var(--arcilla); }
:root { --verde-fon: var(--verde); --verde-tekst: var(--verde-claro); --flag-pe: #D91023; --flag-pe-belyy: #FFFFFF; --tema-a-fon: var(--blanco); --tema-a-tochka: var(--granate); --tema-b-fon: var(--ambar); --tema-b-tochka: var(--granate); --tema-c-fon: var(--cacao); --tema-c-tochka: var(--ambar); --tema-a-obvod: var(--tabaco); --tema-b-obvod: var(--cacao); --tema-c-obvod: var(--arena); }
:root { --tipo-blanco: #8C8578; --tipo-blanco-texto: var(--cacao); --tipo-verde: #5C7638; --tipo-verde-texto: var(--papel); --tipo-amarillo: #B4830B; --tipo-amarillo-texto: var(--cacao); --tipo-azul: #1F6E8C; --tipo-azul-texto: var(--papel); --tipo-rojo: #B33A24; --tipo-rojo-texto: var(--papel); --tipo-oscuro: #4A2C17; --tipo-oscuro-texto: var(--papel); --tipo-matcha: #6B983C; --tipo-matcha-texto: var(--cacao); --tipo-hojicha: #A9713E; --tipo-hojicha-texto: var(--cacao); --glaz-belye: #B7B1A0; --glaz-biryuzovye: #577E5A; --glaz-sinie: #3E4668; --glaz-krasnye: #644540; --glaz-ohra: #998462; --glaz-korichnevye: #68624B; --glaz-temnye: #4C443A; --tipo-linia-dolya: 40%; --tipo-fon-dolya: 12%; }
.vecher { --tipo-amarillo: #B8860B; --tipo-oscuro: #745D4C; --tipo-matcha: #6F9E3F; }
:root { --tipo-heicha: #3E2A20; --tipo-heicha-texto: var(--papel); --fiesta-blanco: #9A7C45; --fiesta-verde: #4F7A2A; --fiesta-amarillo: #B07800; --fiesta-azul: #17607F; --fiesta-rojo: #B8341A; --fiesta-oscuro: #6B3A16; --fiesta-matcha: #5E9B2E; --fiesta-hojicha: #9E5A18; --fiesta-heicha: #3A2A22; --casa-blanco: #C9B183; --casa-verde: #7FA347; --casa-amarillo: #D9A62E; --casa-azul: #4E93AE; --casa-rojo: #D96A4A; --casa-oscuro: #A98467; --casa-matcha: #9CC45E; --casa-hojicha: #C89A63; --casa-heicha: #9C8672; }
.vecher { --tipo-heicha: #9C8672; --tipo-heicha-texto: var(--cacao); }

/* ══════════ из parts.css ══════════ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--fon); }
.d01-shapka, .shapka.shapka { border-bottom-color: var(--granica-cvet); }
.a08-yazyk a, .d01-yazyki a, .yazyki.yazyki a, .d01-yazyki a { text-decoration: none; }
.a08-yazyk a[aria-current="true"], .a08-yazyk a[aria-pressed="true"], .d01-yazyki a[aria-current="true"], .d01-yazyki a[aria-pressed="true"], .a08-yazyk a[aria-current="true"], .a08-yazyk a.vybran, .d01-yazyki a[aria-current="true"], .d01-yazyki a.vybran, .yazyki.yazyki a[aria-current="true"], .yazyki.yazyki a.vybran, .d01-yazyki a[aria-current="true"], .d01-yazyki a.vybran, .yazyki.yazyki a[aria-current="true"], .yazyki.yazyki a[aria-pressed="true"], .d01-yazyki a[aria-current="true"], .d01-yazyki a[aria-pressed="true"] { color: var(--na-akcente); background: var(--akcent); }
@media (hover: hover) {
  .a08-yazyk a:hover, .d01-yazyki a:hover, .yazyki.yazyki a:hover, .d01-yazyki a:hover { color: var(--akcent); }
}
@media (hover: hover) {
  .a08-yazyk a[aria-current="true"]:hover, .a08-yazyk a[aria-pressed="true"]:hover, .d01-yazyki a[aria-current="true"]:hover, .d01-yazyki a[aria-pressed="true"]:hover, .a08-yazyk a[aria-current="true"]:hover, .a08-yazyk a.vybran:hover, .d01-yazyki a[aria-current="true"]:hover, .d01-yazyki a.vybran:hover, .yazyki.yazyki a[aria-current="true"]:hover, .yazyki.yazyki a.vybran:hover, .d01-yazyki a[aria-current="true"]:hover, .d01-yazyki a.vybran:hover, .yazyki.yazyki a[aria-current="true"]:hover, .yazyki.yazyki a[aria-pressed="true"]:hover, .d01-yazyki a[aria-current="true"]:hover, .d01-yazyki a[aria-pressed="true"]:hover { color: var(--na-akcente); }
}
.d03-karta, .karta.karta { border-color: var(--granica-cvet); box-shadow: var(--ten); }
.d03-karta > .d03-foto, .d03-karta > .d07-netfoto, .d03-karta > .d03-foto, .d03-karta > .pusto.pusto, .d03-karta > .foto.foto, .d03-karta > .d07-netfoto, .d03-karta > .foto.foto, .d03-karta > .pusto.pusto, .karta.karta > .d03-foto, .karta.karta > .d07-netfoto, .karta.karta > .d03-foto, .karta.karta > .pusto.pusto, .karta.karta > .foto.foto, .karta.karta > .d07-netfoto, .karta.karta > .foto.foto, .karta.karta > .pusto.pusto { box-shadow: inset 0 -1px 0 0 var(--granica-cvet); }
.d03-format, .d16-format, .d12-vybrat, .fmt.fmt, .d16-format, .d12-vybrat { color: var(--tekst-cvet); background: var(--fon); border-color: var(--granica-cvet); cursor: pointer; }
.d03-format[aria-pressed="true"], .d16-format[aria-pressed="true"], .d12-vybrat[aria-pressed="true"], .d03-format.vybran, .d16-format.vybran, .d12-vybrat.vybran, .fmt.fmt.vybran, .d16-format.vybran, .d12-vybrat.vybran, .fmt.fmt[aria-pressed="true"], .d16-format[aria-pressed="true"], .d12-vybrat[aria-pressed="true"] { background: color-mix(in srgb, var(--tipo, var(--akcent)) 12%, var(--fon)); border-color: var(--tipo, var(--akcent)); box-shadow: inset 0 0 0 1px var(--tipo, var(--akcent)); color: var(--tekst-cvet); }
@media (hover: hover) {
  .d03-format:not(:disabled):hover, .d16-format:not(:disabled):hover, .d12-vybrat:not(:disabled):hover, .fmt.fmt:not(:disabled):hover, .d16-format:not(:disabled):hover, .d12-vybrat:not(:disabled):hover { border-color: var(--tipo, var(--akcent)); }
}
.d03-format:not(:disabled):active, .d16-format:not(:disabled):active, .d12-vybrat:not(:disabled):active, .fmt.fmt:not(:disabled):active, .d16-format:not(:disabled):active, .d12-vybrat:not(:disabled):active { background: color-mix(in srgb, var(--tipo, var(--akcent)) 12%, var(--fon)); border-color: var(--tipo, var(--akcent)); }
.d03-format:disabled, .d16-format:disabled, .d12-vybrat:disabled, .fmt.fmt:disabled, .d16-format:disabled, .d12-vybrat:disabled { cursor: default; }
.d03-format[aria-disabled="true"], .d16-format[aria-disabled="true"], .d12-vybrat[aria-disabled="true"], .fmt.fmt[aria-disabled="true"], .d16-format[aria-disabled="true"], .d12-vybrat[aria-disabled="true"] { opacity: var(--vykl); }
.d03-podrobnee, .podrobnee.podrobnee { text-decoration: none; border-top-color: var(--granica-cvet); }
@media (hover: hover) {
  .d03-podrobnee:hover, .podrobnee.podrobnee:hover { color: var(--tekst-cvet); }
}
@media (hover: hover) {
  .d03-karta:hover .d03-imya, .d03-karta:hover .imya.imya, .karta.karta:hover .d03-imya, .karta.karta:hover .imya.imya { color: var(--akcent); }
}
.d03-podrobnee:active, .podrobnee.podrobnee:active { color: var(--tekst-cvet); }
.d04-knopka, .btn.btn { background: var(--tipo, var(--akcent)); color: var(--tipo-texto, var(--na-akcente)); border-color: var(--tipo, var(--akcent)); cursor: pointer; text-decoration: none; }
@media (hover: hover) {
  .d04-knopka:hover, .btn.btn:hover { background: var(--fon); border-color: var(--tipo, var(--akcent)); color: color-mix(in srgb, var(--tipo, var(--akcent)) 70%, var(--tekst-cvet)); }
}
.d04-knopka:active, .d04-knopka.est-naj, .btn.btn:active, .btn.btn.est-naj { background: color-mix(in srgb, var(--tipo, var(--akcent)) 66%, var(--tekst-cvet)); border-color: color-mix(in srgb, var(--tipo, var(--akcent)) 66%, var(--tekst-cvet)); color: var(--fon); transform: translateY(1px); }
.d04-knopka.est-nav, .btn.btn.est-nav { background: var(--fon); border-color: var(--tipo, var(--akcent)); color: color-mix(in srgb, var(--tipo, var(--akcent)) 70%, var(--tekst-cvet)); }
.d04-knopka:disabled, .d04-knopka[aria-disabled="true"], .btn.btn:disabled, .btn.btn[aria-disabled="true"] { opacity: var(--vykl); cursor: default; }
.d04-knopka:disabled:active, .d04-knopka[aria-disabled="true"]:active, .btn.btn:disabled:active, .btn.btn[aria-disabled="true"]:active { background: var(--tipo, var(--akcent)); color: var(--tipo-texto, var(--na-akcente)); border-color: var(--tipo, var(--akcent)); transform: none; }
@media (hover: hover) {
  .d04-knopka:disabled:hover, .d04-knopka[aria-disabled="true"]:hover, .btn.btn:disabled:hover, .btn.btn[aria-disabled="true"]:hover { background: var(--tipo, var(--akcent)); color: var(--tipo-texto, var(--na-akcente)); border-color: var(--tipo, var(--akcent)); transform: none; }
}
.d04-knopka.wa, .btn.btn.wa { background: var(--whatsapp); border-color: var(--cacao); color: var(--cacao); }
@media (hover: hover) {
  .d04-knopka.wa:hover, .btn.btn.wa:hover { background: var(--cacao); color: var(--whatsapp); }
}
.d19-most, .most.most { text-decoration: none; border-color: var(--granica-cvet); }
@media (hover: hover) {
  .d19-most:hover, .most.most:hover { border-color: var(--akcent); }
}
.mesto { color: var(--papel); }
.mesto::after { background: linear-gradient(transparent, var(--cacao)); }
.mesto p { color: var(--papel); }
.a11-metka { background: var(--tabaco); color: var(--papel); }
.a11-metka.net { background: var(--arcilla); color: var(--cacao); }
.d03-karta.net, .karta.karta.net { opacity: var(--vykl); }
.d03-karta.net .d04-knopka, .d03-karta.net .btn.btn, .karta.karta.net .btn.btn, .karta.karta.net .d04-knopka { pointer-events: none; }
.d05-chip, .chip.chip { border-color: var(--granica-cvet); cursor: pointer; }
.d05-chip[aria-pressed="true"], .chip.chip.vybran, .chip.chip[aria-pressed="true"], .d05-chip.vybran { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); }
@media (hover: hover) {
  .d05-chip:hover, .chip.chip:hover { border-color: var(--akcent); }
}
.d05-chip:active, .chip.chip:active { background: color-mix(in srgb, var(--akcent) 12%, var(--fon)); border-color: var(--akcent); }
.d05-chip:disabled, .chip.chip:disabled { opacity: var(--vykl); cursor: default; }
.d05-chip[aria-pressed="true"] i, .chip.chip.vybran i, .chip.chip[aria-pressed="true"] i, .d05-chip.vybran i { color: var(--na-akcente); }
.d06-razdel, .razdel.razdel { border-top-color: var(--granica-cvet); }
.d06-shapka, .shapka-razdela.shapka-razdela { cursor: pointer; }
.d27-plitka, .tip-plitka, .tip-plitka.tip-plitka, .tip-plitka { background: var(--fon); border-color: var(--granica-cvet); color: var(--tekst-cvet); }
.d27-krug i, .tip-krug i, .tip-krug.tip-krug i, .tip-krug i { background: var(--tipo, var(--granica-cvet)); border-color: color-mix(in srgb, var(--tekst-cvet) 22%, transparent); }
.d27-plitka[aria-pressed="true"], .tip-plitka[aria-pressed="true"], .d27-plitka.vybran, .tip-plitka.vybran, .tip-plitka.tip-plitka.vybran, .tip-plitka.vybran, .tip-plitka.tip-plitka[aria-pressed="true"], .tip-plitka[aria-pressed="true"] { background: color-mix(in srgb, var(--tipo, var(--akcent)) 12%, var(--fon)); border-color: var(--tipo, var(--akcent)); box-shadow: inset 0 0 0 1px var(--tipo, var(--akcent)); }
@media (hover: hover) {
  .d27-plitka:hover, .tip-plitka:hover, .tip-plitka.tip-plitka:hover, .tip-plitka:hover { border-color: var(--tipo, var(--akcent)); }
}
.d27-plitka:active, .tip-plitka:active, .tip-plitka.tip-plitka:active, .tip-plitka:active { background: color-mix(in srgb, var(--tipo, var(--akcent)) 12%, var(--fon)); border-color: var(--tipo, var(--akcent)); }
.d12-vybor, .k-karta, .k-karta.k-karta, .k-karta { border-color: var(--granica-cvet); }
.d12-vybor[aria-pressed="true"], .k-karta[aria-pressed="true"], .d12-vybor.vybran, .k-karta.vybran, .k-karta.k-karta.vybran, .k-karta.vybran, .k-karta.k-karta[aria-pressed="true"], .k-karta[aria-pressed="true"] { background: color-mix(in srgb, var(--akcent) 12%, var(--fon)); border-color: var(--akcent); box-shadow: inset 0 0 0 1px var(--akcent); }
.d12-vybor:active, .k-karta:active, .k-karta.k-karta:active, .k-karta:active { background: color-mix(in srgb, var(--akcent) 22%, var(--fon)); }
@media (hover: hover) {
  .d12-vybor:hover, .k-karta:hover, .k-karta.k-karta:hover, .k-karta:hover { border-color: var(--akcent); cursor: pointer; }
}
@media (hover: hover) {
  .d01-logo:hover, a.d01-znak:hover, .logo:hover, .d01-logo:hover, a.znak.znak:hover, .logo:hover, .logo.logo:hover, a.d01-znak:hover, .logo:hover, .logo.logo:hover, a.znak.znak:hover, .logo:hover { color: var(--akcent); cursor: pointer; }
}
.d01-logo:active, a.d01-znak:active, .logo:active, .d01-logo:active, a.znak.znak:active, .logo:active, .logo.logo:active, a.d01-znak:active, .logo:active, .logo.logo:active, a.znak.znak:active, .logo:active { color: var(--akcent); }
.a20-znachok, .znachok, .znachok.znachok, .znachok { border-color: var(--tekst-cvet); }
@media (hover: hover) {
  .a20-znachok:hover, .znachok:hover, .znachok.znachok:hover, .znachok:hover { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); cursor: pointer; }
}
.a20-znachok:active, .znachok:active, .znachok.znachok:active, .znachok:active { background: color-mix(in srgb, var(--akcent) 78%, var(--cacao)); color: var(--na-akcente); border-color: transparent; }
.a21-sbros, .pereklyuchatel, .pereklyuchatel.pereklyuchatel, .pereklyuchatel { border-color: var(--granica-cvet); }
@media (hover: hover) {
  .a21-sbros:hover, .pereklyuchatel:hover, .pereklyuchatel.pereklyuchatel:hover, .pereklyuchatel:hover { color: var(--akcent); border-color: var(--akcent); cursor: pointer; }
}
.a21-sbros:active, .pereklyuchatel:active, .pereklyuchatel.pereklyuchatel:active, .pereklyuchatel:active { color: var(--akcent); border-color: var(--akcent); }
.a22-chat, .chat-knopka, .chat-knopka.chat-knopka, .chat-knopka { box-shadow: 0 6px 18px color-mix(in srgb, var(--cacao) 28%, transparent); }
@media (hover: hover) {
  .a22-chat:hover, .chat-knopka:hover, .chat-knopka.chat-knopka:hover, .chat-knopka:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--cacao) 38%, transparent); transform: translateY(-1px); cursor: pointer; }
}
.a22-chat:active, .chat-knopka:active, .chat-knopka.chat-knopka:active, .chat-knopka:active { transform: translateY(0); box-shadow: 0 4px 12px color-mix(in srgb, var(--cacao) 34%, transparent); }
.d01-burger, .burger, .burger.burger, .burger { border-color: var(--granica-cvet); }
@media (hover: hover) {
  .d01-burger:hover, .burger:hover, .burger.burger:hover, .burger:hover { background: var(--pov); border-color: var(--akcent); cursor: pointer; }
}
.d01-burger:active, .burger:active, .burger.burger:active, .burger:active { background: var(--pov); }
.d01-burger[aria-expanded="true"], .burger[aria-expanded="true"], .burger.burger[aria-expanded="true"], .burger[aria-expanded="true"] { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); }
@media (hover: hover) {
  a.d03-foto:hover, .d03-foto > a:hover, a:hover > .d03-foto, a.foto.foto:hover, .foto.foto > a:hover, a:hover > .foto.foto { outline: 2px solid var(--akcent); outline-offset: -2px; }
}
@media (hover: hover) {
  summary:hover { cursor: pointer; color: var(--akcent); }
}
@media (hover: hover) {
  .d06-shapka:hover, .shapka-razdela.shapka-razdela:hover { color: var(--akcent); }
}
@media (hover: hover) {
  .d06-shapka:hover .a06-strelka, .d06-shapka:hover .strelka.strelka, .shapka-razdela.shapka-razdela:hover .a06-strelka, .shapka-razdela.shapka-razdela:hover .strelka.strelka { background: var(--pov); }
}
@media (hover: hover) {
  .a06-strelka:hover, .strelka.strelka:hover { background: var(--pov); }
}
.a06-strelka, .strelka.strelka { cursor: pointer; transition: transform .15s, background .15s; }
.d06-razdel[open] .a06-strelka, .a06-strelka[aria-expanded="true"], .d06-razdel[open] .strelka.strelka, .strelka.strelka[aria-expanded="true"], .razdel.razdel[open] .a06-strelka, .a06-strelka[aria-expanded="true"], .razdel.razdel[open] .strelka.strelka, .strelka.strelka[aria-expanded="true"] { transform: rotate(180deg); }
.d06-strana, .strana.strana { cursor: pointer; border-bottom-color: transparent; text-decoration: none; }
.d06-strana[aria-current="true"], .strana.strana[aria-current="true"] { border-bottom-color: var(--akcent); }
@media (hover: hover) {
  .d06-strana:hover, .strana.strana:hover { color: var(--tekst-cvet); }
}
.d07-netfoto, .d07-netfoto-punktir, .pusto.pusto, .pusto.pusto-punktir { border-color: var(--granica-cvet); }
.d08-stroka { border-bottom-color: var(--granica-cvet); }
.d11-vopros, .vopros.vopros { border-bottom-color: var(--granica-cvet); }
.d11-vopros > summary, .vopros.vopros > summary { cursor: pointer; }
.d11-vopros[open] .a10-marker, .vopros.vopros[open] .a10-marker { transform: rotate(45deg); }
@media (hover: hover) {
  .d11-vopros > summary:hover, .vopros.vopros > summary:hover { color: var(--akcent); }
}
.d12-nabor, .nabor.nabor { border-color: var(--granica-cvet); }
.a16-mesto, .mesto.mesto { color: var(--tusk); border-color: var(--granica-cvet); }
.d12-podnabor { border-top-color: var(--granica-cvet); }
.d12-lestnica { border-top-color: var(--granica-cvet); }
.d12-nabor.vzyat, .nabor.nabor.vzyat { outline: var(--kolco) solid var(--akcent); outline-offset: 3px; }
.podbor-net { border-color: var(--granica-cvet); }
.pod-te { border-color: var(--granica-cvet); }
.pod-pochemu { border-left-color: var(--akcent); }
.d20-formaty > * { border-color: var(--granica-cvet); }
.d26-stroka::after { border-bottom-color: var(--granica-cvet); }
.a19-flag { color: var(--tusk); }
.a19-flag::before { border-color: var(--granica-cvet); background: linear-gradient(90deg, var(--flag-pe) 0 33.33%, var(--flag-pe-belyy) 33.33% 66.66%, var(--flag-pe) 66.66%); }
@media (hover: hover) {
  .a19-flag:hover { color: var(--tekst-cvet); }
}
.d01-polosa .a19-flag::after { color: var(--granica-cvet); }
.d13-tizer { border-color: var(--granica-cvet); }
.a07-tochka { border-top-color: var(--granica-cvet); cursor: pointer; }
.a07-tochka[aria-pressed="true"], .a07-tochka.vybran { color: var(--akcent); border-top-color: var(--akcent); }
@media (hover: hover) {
  .a07-tochka:hover { color: var(--tekst-cvet); }
}
.a02-polzunok, .d14-polzunok { cursor: pointer; }
.a02-polzunok::-webkit-slider-thumb, .d14-polzunok::-webkit-slider-thumb { border-color: var(--fon); }
@media (hover: hover) {
  .a02-polzunok:hover::-webkit-slider-thumb, .d14-polzunok:hover::-webkit-slider-thumb { background: var(--tekst-cvet); }
}
.d14-vyvod { border-color: var(--granica-cvet); }
.d14b-lid::before { -webkit-mask: var(--list-mask) center / contain no-repeat; mask: var(--list-mask) center / contain no-repeat; }
.d14b-tip { cursor: pointer; border-color: var(--granica-cvet); border-top-color: var(--tipo, var(--granica-cvet)); }
.d14b-tip[aria-pressed="true"], .d14b-tip.vybran { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); }
.d14b-tip[aria-pressed="true"] :is(.d14b-okislenie, .d14b-chto), .d14b-tip.vybran :is(.d14b-okislenie, .d14b-chto) { color: var(--na-akcente); }
@media (hover: hover) {
  .d14b-tip:hover { border-color: var(--akcent); }
}
.d14b-tip.net { opacity: var(--vykl); cursor: default; }
.d15-lipkaya, .zakaz-polosa.zakaz-polosa { border-top-color: var(--granica-cvet); }
.d15-krug { border-color: var(--cacao); text-decoration: none; }
@media (hover: hover) {
  .d15-krug:hover { background: var(--cacao); color: var(--whatsapp); }
}
.shtora { opacity: .62; }
.okno, .d16-okno, .d17-korzina { border-color: var(--granica-cvet); }
.okno-zakryt { cursor: pointer; }
@media (hover: hover) {
  .okno-zakryt:hover { color: var(--akcent); }
}
.d17-stroka { border-bottom-color: var(--granica-cvet); }
.d17-udalit { cursor: pointer; }
@media (hover: hover) {
  .d17-udalit:hover { color: var(--akcent); }
}
.d17-zona { cursor: pointer; border-color: var(--granica-cvet); }
.d17-zona[aria-pressed="true"], .d17-zona.vybran { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); }
.d17-zona[aria-pressed="true"] .tarif, .d17-zona.vybran .tarif { color: var(--na-akcente); }
@media (hover: hover) {
  .d17-zona:hover { border-color: var(--akcent); }
}
.d17-sposob { cursor: pointer; border-color: var(--granica-cvet); }
.d17-sposob[aria-pressed="true"] .skoro, .d17-sposob.vybran .skoro { color: var(--na-akcente); }
.d17-sposob[aria-pressed="true"], .d17-sposob.vybran { background: var(--akcent); color: var(--na-akcente); border-color: var(--akcent); }
.d17-sposob[aria-pressed="true"] span, .d17-sposob.vybran span { color: var(--na-akcente); }
@media (hover: hover) {
  .d17-sposob:hover { border-color: var(--akcent); }
}
.d17-detali { border-color: var(--granica-cvet); }
.d17-qr { border-color: var(--granica-cvet); }
.a09-schetchik button { border-color: var(--granica-cvet); background: var(--fon); color: var(--tekst-cvet); cursor: pointer; }
@media (hover: hover) {
  .a09-schetchik button:hover { border-color: var(--akcent); color: var(--akcent); }
}
.a09-schetchik button:disabled { opacity: var(--vykl); cursor: default; }
.a01-ssylka, .ssylka.ssylka { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .a01-ssylka:hover, .ssylka.ssylka:hover { color: var(--tekst-cvet); }
}
:is(.d18-podval, .d11-otvet, .d12-nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.d18-podval, .d11-otvet, .nabor.nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.d18-podval, .otvet.otvet, .d12-nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.d18-podval, .otvet.otvet, .nabor.nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.podval.podval, .d11-otvet, .d12-nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.podval.podval, .d11-otvet, .nabor.nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.podval.podval, .otvet.otvet, .d12-nabor, .d16-okno, .d20-matcha) a:not([class]), :is(.podval.podval, .otvet.otvet, .nabor.nabor, .d16-okno, .d20-matcha) a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a03-pole, .a04-select, .opt-pole.opt-pole, .a04-select, .pole.pole, .a04-select { border-color: var(--granica-cvet); }
@media (hover: hover) {
  .a03-pole:hover, .a04-select:hover, .opt-pole.opt-pole:hover, .a04-select:hover, .pole.pole:hover, .a04-select:hover { border-color: var(--akcent); }
}
.a03-pole:disabled, .a04-select:disabled, .opt-pole.opt-pole:disabled, .a04-select:disabled, .pole.pole:disabled, .a04-select:disabled { opacity: var(--vykl); }
.a03-pole.osh, .a04-select.osh, .opt-pole.opt-pole.osh, .a04-select.osh, .pole.pole.osh, .a04-select.osh { border-color: var(--akcent); }
.zelen { --fon: var(--verde); --pov: var(--verde); --tekst-cvet: var(--verde-claro); --zag-cvet: var(--papel); --tusk: var(--verde-claro); --akcent: var(--verde-claro); --na-akcente: var(--verde); --granica-cvet: var(--verde-claro); }
.tipo-blanco { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
.tipo-verde { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
.tipo-amarillo { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
.tipo-azul { --tipo: var(--tipo-azul); --tipo-texto: var(--tipo-azul-texto); }
.tipo-rojo { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
.tipo-oscuro { --tipo: var(--tipo-oscuro); --tipo-texto: var(--tipo-oscuro-texto); }
.tipo-matcha { --tipo: var(--tipo-matcha); --tipo-texto: var(--tipo-matcha-texto); }
.tipo-hojicha { --tipo: var(--tipo-hojicha); --tipo-texto: var(--tipo-hojicha-texto); }
.tipo-heicha { --tipo: var(--tipo-heicha); --tipo-texto: var(--tipo-heicha-texto); }
.a13-tip, .d03-metka, .a13-tip, .plashka.plashka, .tip.tip, .d03-metka, .tip.tip, .plashka.plashka { background: var(--tipo, var(--tabaco)); color: var(--tipo-texto, var(--papel)); }
.d14-tochki .a07-tochka[data-tipo], .d14-tochki .a07-tochka[class*="tipo-"] { border-top-color: var(--tipo, var(--granica-cvet)); }
.d14-tochki .a07-tochka[aria-pressed="true"], .d14-tochki .a07-tochka.vybran { color: var(--tekst-cvet); }
.d20-grad { border-color: var(--granica-cvet); }
.d20-hvatit { border-color: var(--granica-cvet); }
.d21-veshch, .veshch.veshch { border-color: var(--granica-cvet); box-shadow: var(--ten); }
.opt-stroka { border-color: var(--granica-cvet); }
.opt-uslovie { border-bottom-color: var(--granica-cvet); }
.opt-pismo { border-color: var(--granica-cvet); }
@container stend (min-width: 900px) {
  .opt-shapka, .opt-stroka { border-bottom-color: var(--granica-cvet); }
}
@container stend (min-width: 900px) {
  @media (hover: hover) {
    .opt-stroka:hover { background: var(--pov); }
  }
}
.d22-opt { --fon: var(--cacao); --pov: var(--corteza); --tekst-cvet: var(--crema); --zag-cvet: var(--papel); --tusk: var(--arena); --akcent: var(--ambar); --na-akcente: var(--cacao); --granica-cvet: var(--arcilla); }
.d22-opt + .d18-podval, .d22-opt + .podval.podval { --fon: var(--cacao); --pov: var(--corteza); --tekst-cvet: var(--crema); --zag-cvet: var(--papel); --tusk: var(--arena); --akcent: var(--ambar); --na-akcente: var(--cacao); --granica-cvet: var(--arcilla); border-top-color: var(--akcent); }
.d23-zavedenie { border-color: var(--granica-cvet); box-shadow: var(--ten); }
.d24-tekushchaya { cursor: pointer; transition: background .15s, color .15s; }
@media (hover: hover) {
  .d24-tekushchaya:hover { color: var(--tekst-cvet); background: var(--pov); }
}
.d24-spisok { border-color: var(--granica-cvet); box-shadow: var(--ten); }
.d24-tema { background: none; cursor: pointer; color: var(--tekst-cvet); }
@media (hover: hover) {
  .d24-tema:hover { color: var(--akcent); }
}
.d24-tema[aria-pressed="true"], .d24-tema.vybran { color: var(--akcent); }
.d24-moneta { border-color: var(--granica-cvet); }
.d24-moneta.tema-a { border-color: var(--tema-a-obvod); }
.d24-moneta.tema-b { border-color: var(--tema-b-obvod); }
.d24-moneta.tema-c { border-color: var(--tema-c-obvod); }
.d24-tema[aria-pressed="true"] .d24-moneta, .d24-tema.vybran .d24-moneta { outline: 2px solid var(--akcent); outline-offset: 2px; }
.d24-tema.est-nav { color: var(--akcent); }
@container stend (min-width: 900px) {
  .d24-spisok { box-shadow: none; }
}
.d04-knopka.vtoraya, .d04-knopka.vtoraya.wa, .btn.btn.vtoraya, .btn.btn.vtoraya.wa { background: none; color: var(--tekst-cvet); border-color: var(--granica-cvet); box-shadow: none; }
@media (hover: hover) {
  .d04-knopka.vtoraya:hover, .btn.btn.vtoraya:hover { color: color-mix(in srgb, var(--tipo, var(--akcent)) 70%, var(--tekst-cvet)); border-color: color-mix(in srgb, var(--tipo, var(--akcent)) 70%, var(--tekst-cvet)); background: none; transform: none; box-shadow: none; }
}
.d04-knopka.vtoraya:active, .btn.btn.vtoraya:active { background: color-mix(in srgb, var(--tipo, var(--akcent)) 12%, var(--fon)); border-color: var(--tipo, var(--akcent)); color: var(--tekst-cvet); box-shadow: none; transform: translateY(1px); }
@container stend (min-width: 900px) {
  .d26-stroka { border-color: var(--granica-cvet); }
}
.d04-knopka.wa, .btn.btn.wa { background: none; color: var(--tekst-cvet); border-color: var(--granica-cvet); box-shadow: none; }
.d04-knopka.wa::before, .btn.btn.wa::before { background: var(--whatsapp); border-color: var(--tekst-cvet); }
:is(.d15-lipkaya, .d17-korzina, .t-hero, .opt-ekran, .opt-zayavka) .d04-knopka.wa, :is(.d15-lipkaya, .d17-korzina, .t-hero, .opt-ekran, .opt-zayavka) .btn.btn.wa, :is(.zakaz-polosa.zakaz-polosa, .d17-korzina, .t-hero, .opt-ekran, .opt-zayavka) .btn.btn.wa, :is(.zakaz-polosa.zakaz-polosa, .d17-korzina, .t-hero, .opt-ekran, .opt-zayavka) .d04-knopka.wa { background: var(--whatsapp); color: var(--cacao); border-color: var(--cacao); }
:is(.d16-okno, .d17-korzina) .okno-shapka { box-shadow: 0 1px 0 0 var(--granica-cvet); }
body:not(:has(.shtora:not([hidden]))) :is(.d16-okno, .d17-korzina) { box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--cacao) 62%, transparent); }

/* ── мост: разметка боевой знает вид как data-tip, система — как класс ──
   На `/p/te/` 92 места с `data-tip`, цвет к ним не привязан ничем.
   Соответствие сверено по hex, а не по названию: Oolong = té azul (#1F6E8C),
   Pu-erh = té oscuro (#4A2C17). Регистр не важен — сравнение нечувствительно. */
[data-tip="Blanco" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-pole="tip"][data-z="Blanco" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-tip="White" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-pole="tip"][data-z="White" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-tip="Белый" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-pole="tip"][data-z="Белый" i] { --tipo: var(--tipo-blanco); --tipo-texto: var(--tipo-blanco-texto); }
[data-tip="Verde" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-pole="tip"][data-z="Verde" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-tip="Green" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-pole="tip"][data-z="Green" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-tip="Зелёный" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-pole="tip"][data-z="Зелёный" i] { --tipo: var(--tipo-verde); --tipo-texto: var(--tipo-verde-texto); }
[data-tip="Amarillo" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-pole="tip"][data-z="Amarillo" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-tip="Yellow" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-pole="tip"][data-z="Yellow" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-tip="Жёлтый" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-pole="tip"][data-z="Жёлтый" i] { --tipo: var(--tipo-amarillo); --tipo-texto: var(--tipo-amarillo-texto); }
[data-tip="Oolong" i] { --tipo: var(--tipo-azul); --tipo-texto: var(--tipo-azul-texto); }
[data-pole="tip"][data-z="Oolong" i] { --tipo: var(--tipo-azul); --tipo-texto: var(--tipo-azul-texto); }
[data-tip="Улун" i] { --tipo: var(--tipo-azul); --tipo-texto: var(--tipo-azul-texto); }
[data-pole="tip"][data-z="Улун" i] { --tipo: var(--tipo-azul); --tipo-texto: var(--tipo-azul-texto); }
[data-tip="Rojo" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-pole="tip"][data-z="Rojo" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-tip="Black (red in China)" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-pole="tip"][data-z="Black (red in China)" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-tip="Красный" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-pole="tip"][data-z="Красный" i] { --tipo: var(--tipo-rojo); --tipo-texto: var(--tipo-rojo-texto); }
[data-tip="Pu-erh" i] { --tipo: var(--tipo-oscuro); --tipo-texto: var(--tipo-oscuro-texto); }
[data-pole="tip"][data-z="Pu-erh" i] { --tipo: var(--tipo-oscuro); --tipo-texto: var(--tipo-oscuro-texto); }
[data-tip="Пуэр" i] { --tipo: var(--tipo-oscuro); --tipo-texto: var(--tipo-oscuro-texto); }
[data-pole="tip"][data-z="Пуэр" i] { --tipo: var(--tipo-oscuro); --tipo-texto: var(--tipo-oscuro-texto); }
[data-tip="Matcha" i] { --tipo: var(--tipo-matcha); --tipo-texto: var(--tipo-matcha-texto); }
[data-pole="tip"][data-z="Matcha" i] { --tipo: var(--tipo-matcha); --tipo-texto: var(--tipo-matcha-texto); }
[data-tip="Матча" i] { --tipo: var(--tipo-matcha); --tipo-texto: var(--tipo-matcha-texto); }
[data-pole="tip"][data-z="Матча" i] { --tipo: var(--tipo-matcha); --tipo-texto: var(--tipo-matcha-texto); }
[data-tip="Hojicha" i] { --tipo: var(--tipo-hojicha); --tipo-texto: var(--tipo-hojicha-texto); }
[data-pole="tip"][data-z="Hojicha" i] { --tipo: var(--tipo-hojicha); --tipo-texto: var(--tipo-hojicha-texto); }
[data-tip="Ходзича" i] { --tipo: var(--tipo-hojicha); --tipo-texto: var(--tipo-hojicha-texto); }
[data-pole="tip"][data-z="Ходзича" i] { --tipo: var(--tipo-hojicha); --tipo-texto: var(--tipo-hojicha-texto); }
[data-tip="Heicha" i] { --tipo: var(--tipo-heicha); --tipo-texto: var(--tipo-heicha-texto); }
[data-pole="tip"][data-z="Heicha" i] { --tipo: var(--tipo-heicha); --tipo-texto: var(--tipo-heicha-texto); }
[data-tip="Хэйча" i] { --tipo: var(--tipo-heicha); --tipo-texto: var(--tipo-heicha-texto); }
[data-pole="tip"][data-z="Хэйча" i] { --tipo: var(--tipo-heicha); --tipo-texto: var(--tipo-heicha-texto); }
/* ── Три товара в первом экране (владелец 20.09: «давай поднимем товары»).
   Ряд of трёх компактных карточек: photo невысокое, чтобы price и кнопка покупки
   попадали в первый экран телефона вместе с карточкой, а не под его край.
   Мерка: departments/06-lendingi/work/zamerit_pervyy_ekran.mjs, порог 700 точек. */
.setka.tri-tovara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1rem 0 1.25rem}
.tri-tovara .karta{margin:0}
.tri-tovara .foto{aspect-ratio:1/1;height:auto;max-height:104px}
.tri-tovara .foto img{height:100%;object-fit:cover}
.tri-tovara .imya{font-size:.9rem;line-height:1.2}
.tri-tovara .plashka{display:none}
.tri-tovara .telo{padding:.5rem}
.tri-tovara .knopki{flex-direction:column;gap:.3rem}
.tri-tovara .knopki .btn{width:100%;justify-content:center;font-size:.8rem;padding:.35rem .4rem}
.tri-tovara .btn.vtoraya{display:none}          /* «Details» тут лишняя: место дороже */
.tri-tovara .fmts{gap:.25rem}
.tri-tovara .fmt{padding:.2rem .35rem;font-size:.78rem}
@media (min-width: 40rem){
  .setka.tri-tovara{gap:1rem}
  .tri-tovara .foto{max-height:200px}
  .tri-tovara .knopki{flex-direction:row}
}

/* ── ПОВЕРХ СИСТЕМЫ ── правила, которые обязаны победить выжимку цвета (11.09).
   Владелец: «у улуна цветовые схемы не работают опять… когда я навожу на кнопку
   „Details", ничего не происходит». Первое лечится признаком вида на плитке
   фильтра (он теперь есть), второе — заметным наведением: одной сменой цвета
   текста на бежевом не видно. */
@media (hover: hover){
  .karta .btn.btn.vtoraya:hover, .t-info .btn.btn.vtoraya:hover, .btn.btn.vtoraya:hover{
    background:color-mix(in srgb, var(--tipo, var(--color-accent)) 12%, var(--color-bg));
    border-color:var(--tipo, var(--color-accent));
    color:var(--color-fg)}
}
.chipy.f-plitki .chip.chip[aria-pressed=true]{
  background:var(--tipo, var(--color-accent));
  border-color:var(--tipo, var(--color-accent));
  color:var(--tipo-texto, var(--color-accent-fg))}
.chipy.f-plitki .chip.chip[aria-pressed=true] .f-n{color:inherit;opacity:.8}
/* кнопка фильтра, у которой с текущим выбором ноль сортов, гаснет: «Oolong + Peru —
   showing 0 of 24» выглядело поломкой, хотя перуанских улунов просто нет */
.chip[data-pusto="da"]{opacity:.38}
/* cveta-razmery.css — собран из parts.css, руками не править.
   Подключать ТРЕТЬИМ, после tokens.css и cveta.css.
   Здесь и только здесь живут размеры — те места, где цветом не обойтись:
   шапка телефона (434 px содержимого в 375) и плитка типа чая.
   Каждый блок объяснён на месте: почему без размера нельзя. */
/* ==== РАЗМЕРЫ · шапка телефона ===================================================
   ⚠ Единственное место системы, где размеры едут вместе с цветом, и это осознанно.
   Шапка на 375 не влезала НИКОГДА: замер 09.09 — 434 px содержимого в 375, из них
   логотип 147, «Menú» 58, языки 78, «Carrito» 101. Прежде это списывали на новый
   шрифт; проверено — боевая на прежней гарнитуре мерит те же 45 px за краем.
   Цветом такое не лечится: слово шириной 60 px остаётся словом любого цвета.

   Поэтому файл отдельный: подключается сознательно, трогает ТОЛЬКО шапку и только
   до 560 px. Карточек, полки и первого экрана он не касается — страх «раздуются
   карточки» тут не при чём.

   Что делаем: слово в кнопке заказа и слово «Menú» уходят в значки, знак ужимается
   с 1,6 до 1,3 rem. Счётчик встаёт бейджем поверх значка — так его видят на любом
   магазине, и он не занимает места в строке. Слово остаётся в разметке: его читает
   озвучка экрана, и доступное имя кнопки не теряется.
   Считаем: знак 120 + меню 40 + языки 78 + заказ 40 + поля 26 + зазоры 24 = 328 из 375. */
:root {
  --znak-menyu: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --znak-zakaz: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 8h13l-1.1 11.2a1.8 1.8 0 0 1-1.8 1.6H8.4a1.8 1.8 0 0 1-1.8-1.6L5.5 8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 10V6.8a3 3 0 0 1 6 0V10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 560px) {
  /* знак: на телефоне он опознаётся с 1,3 rem, а 147 px строки — это 39 % ширины экрана */
  .d01-logo svg, .d01-znak svg, .logo-svg { height: 1.3rem; }

  /* меню и заказ: слово → значок. Кнопка остаётся размером с палец (40 px),
     текст прячется обнулением кегля, а не `display:none` — иначе кнопка теряет
     доступное имя, и озвучка экрана читает пустоту. */
  .d01-burger.d01-burger, .burger.burger,
  .d01-zakaz.d01-zakaz, .k-zakaz.k-zakaz {
    position: relative; font-size: 0; line-height: 0;
    /* 34, а не 40: шапка держит высоту 56 px, и кнопка в 40 поднимала её до 63 —
       мимо требования владельца «не выше 48» и мимо прежнего вида. Палец при этом
       не страдает: зона нажатия расширена невидимым слоем ниже, а он в потоке
       не занимает ничего. */
    width: 34px; height: 34px; min-width: 0; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
  }
  .d01-burger.d01-burger::before, .burger.burger::before,
  .d01-zakaz.d01-zakaz::before, .k-zakaz.k-zakaz::before {
    content: ""; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: var(--znak-menyu) center/contain no-repeat;
            mask: var(--znak-menyu) center/contain no-repeat;
  }
  .d01-zakaz.d01-zakaz::before, .k-zakaz.k-zakaz::before {
    -webkit-mask-image: var(--znak-zakaz); mask-image: var(--znak-zakaz);
  }
  /* зона нажатия больше самой кнопки: 34 px хватает глазу, но не пальцу.
     `inset` отрицательный, слой абсолютный — в потоке он не существует, а палец
     ловит 44 px, как и просят руководства по мобильным интерфейсам. */
  .d01-burger.d01-burger::after, .burger.burger::after,
  .d01-zakaz.d01-zakaz::after, .k-zakaz.k-zakaz::after {
    content: ""; position: absolute; inset: -5px; border-radius: inherit;
  }

  /* счётчик — бейджем поверх значка. Правило кладёт слой, значит само и объявляет
     основу (грабля 07.09), а вылезает он внутрь поля шапки, не создавая прокрутки. */
  .d01-schet.d01-schet, .k-zakaz.k-zakaz b, #k-schet {
    position: absolute; top: -2px; right: -2px; margin: 0;
    font-size: 11px; line-height: 1.4; min-width: 18px; padding: 0 4px;
    text-align: center; border-radius: 999px;
  }
}
/* ==== КОНЕЦ РАЗМЕРОВ ==== */

/* ==== РАЗМЕРЫ · заглушка «фото нет» ==============================================
   Второй и последний случай, где без размера не обойтись. Знак — картинка,
   а у картинки есть величина: «34 % клетки» нельзя сказать цветом. Всё
   остальное здесь — краски, и они уехали бы и без этого блока; вместе они
   держатся потому, что порознь дают половину заглушки.

   Что это. Владелец 07.09 выбрал из десяти вариантов номер 4: знак на 34 %
   клетки, непрозрачность 22 %, подложка тонирована видом товара. 10.09 он
   открыл копию и сказал: «там, где нет фотографии, у нас были заглушки.
   Смотри, заглушек нету» — станок печатает бежевый прямоугольник со словами
   «foto · Hojicha en polvo · bolsa de 50 g», а таких мест на странице 65.
   Двенадцать извинений вместо витрины — ровно то, ради чего заслон и делался.

   Почему размер безопасен: слой лежит ВНУТРИ клетки, которая у страницы уже
   есть (`inset: 0`), и в потоке не занимает ничего. Клетку он не растит —
   сторож размеров проверяет это числом на каждой сборке.

   Имена станка написаны рядом с именами системы руками: этот блок копируется
   в третий файл дословно, без перевода по словарю. */
.d07-netfoto.d07-netfoto, .d07-netfoto-punktir.d07-netfoto-punktir,
.pusto.pusto {
  /* грабля 07.09: правило, которое кладёт абсолютный слой, само объявляет основу.
     Без этой строки знак считает размер от ближайшего позиционированного предка
     и растягивается на пол-экрана поверх названия товара. На копии таких клеток
     18 из 65 — те, что станок рисует без подписи. */
  position: relative;
}
.d07-netfoto.d07-netfoto::after, .d07-netfoto-punktir.d07-netfoto-punktir::after,
.pusto.pusto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: var(--tipo, var(--tabaco)); opacity: .22;
  -webkit-mask: var(--znak-teja) center / 34% no-repeat;
          mask: var(--znak-teja) center / 34% no-repeat;
}
/* Подпись станка молчит: слово остаётся в разметке — его читает озвучка экрана
   и берёт `title`, — но не печатается. Кегль не трогаем: `font-size: 0` съел бы
   и доступное имя в некоторых читалках, а прозрачный цвет — нет. */
.pusto-podpis, .pusto .podpis { color: transparent; }
/* ==== КОНЕЦ РАЗМЕРОВ ==== */

/* ==== РАЗМЕРЫ · посуда: ряд фильтров и серия ======================================
   Третий и последний блок, где размеры едут вместе с цветом, и по той же причине,
   что первые два: раскладку здесь нельзя сказать цветом. Ряд из семи кружков либо
   влезает в 375, либо нет; серия либо отделена от полки, либо сливается с ней.

   ⚠ Раздел «Посуда» на странице ЕЩЁ НЕ СВЁРСТАН — значит здесь нет геометрии,
   которую нельзя трогать. Классы новые (`d28-*`, `d29-*`, `d30-*`), на страницах
   чая и матчи их нет ни одного, поэтому сторож размеров этих правил не заметит.

   ── Что решает этот блок ──────────────────────────────────────────────────────
   Над полкой два ряда фильтров: категории (восемь) и, когда выбраны чашки, цвет
   глазури (семь семейств). Два ряда друг под другом на 375 — место, где такие вещи
   ломаются, и владелец за это уже возвращал работу. Поэтому ряды НЕ равны по весу:

   · Категории — пилюли с числом, переносятся на вторую и третью строку. Перенос
     здесь родной: на витрине чая фильтр кофеины ведёт себя так же.
   · Цвет — не второй такой же ряд, а ПОЛОСКА ОБРАЗЦОВ: семь кружков по 28 px
     с числом под каждым, без имён. 7 × 28 + 6 × 7 = 238 px из 375 — одна строка,
     без переноса и без прокрутки, на любом языке: имена семейств в кружок
     не печатаются, а живут в доступном имени кнопки, и озвучка их читает.
   Имя выбранного семейства выводится строкой под рядом («Синие · 22 чашки»):
   один заголовок вместо семи подписей — и он же говорит, сколько там предметов.

   Цвета кружков посчитаны из фотографий (см. `--glaz-*` в tokens.css), поэтому
   полоска показывает настоящий цвет полки. Для человека, который ищет одну чашку
   из 148, это единственный способ навигации — не украшение. */

/* мост: у станка семейство размечено словом, система красит переменной.
   Три написания, потому что страница трёхъязычная, а данные Фото — русские. */
[data-glaz="belye" i], [data-glaz="белые" i], [data-glaz="blancos" i] { --glaz: var(--glaz-belye); }
[data-glaz="biryuzovye" i], [data-glaz="бирюзовые и зелёные" i], [data-glaz="turquesas y verdes" i] { --glaz: var(--glaz-biryuzovye); }
[data-glaz="sinie" i], [data-glaz="синие" i], [data-glaz="azules" i] { --glaz: var(--glaz-sinie); }
[data-glaz="krasnye" i], [data-glaz="красные и лиловые" i], [data-glaz="rojos y morados" i] { --glaz: var(--glaz-krasnye); }
[data-glaz="ohra" i], [data-glaz="охра и песок" i], [data-glaz="ocres y arena" i] { --glaz: var(--glaz-ohra); }
[data-glaz="korichnevye" i], [data-glaz="коричневые" i], [data-glaz="marrones" i] { --glaz: var(--glaz-korichnevye); }
[data-glaz="temnye" i], [data-glaz="тёмные" i], [data-glaz="oscuros" i] { --glaz: var(--glaz-temnye); }

/* Слово, которое читает озвучка экрана, но не печатает страница. Не `display:none`
   и не нулевой кегль: то и другое отнимает у кнопки доступное имя, и читалка
   называет её «кнопка». */
.tolko-dlya-ozvuchki {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* D-28 · ряд фильтров категорий ------------------------------------------------ */
.d28-kategorii {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none;
}
.d28-kategoriya {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 400 var(--melkoe)/1 var(--shrift-tekst); color: var(--tekst-cvet);
  background: var(--fon); border: var(--granica) solid var(--granica-cvet);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
/* Число предметов — тем же моноширинным, что цены: оно про количество, а не про имя. */
.d28-skolko { font-family: var(--shrift-mono); font-size: var(--mono); color: var(--tusk); }
.d28-kategoriya[aria-pressed="true"] {
  background: var(--akcent); border-color: var(--akcent); color: var(--na-akcente);
}
.d28-kategoriya[aria-pressed="true"] .d28-skolko { color: var(--na-akcente); opacity: .8; }
@media (hover: hover) {
  .d28-kategoriya:hover { border-color: var(--akcent); }
}
.d28-kategoriya:active {
  background: color-mix(in srgb, var(--akcent) 12%, var(--fon)); border-color: var(--akcent);
}

/* D-29 · полоска глазурей ------------------------------------------------------- */
.d29-glazuri {
  display: flex; gap: 7px; margin: 0 0 6px; padding: 0; list-style: none;
  /* без переноса и без прокрутки: ряд посчитан так, чтобы влезть в 375 целиком.
     Если семейств когда-нибудь станет больше семи — ряд начнёт прокручиваться,
     а не ломаться: это лучше, чем внезапная вторая строка под первым рядом. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.d29-glazuri::-webkit-scrollbar { display: none; }
.d29-glazur {
  display: grid; justify-items: center; gap: 3px; flex: 0 0 auto;
  background: none; border: 0; padding: 2px 0 0; cursor: pointer; width: 28px;
}
.d29-obrazec {
  width: 28px; height: 28px; border-radius: 50%; display: block;
  background: var(--glaz, var(--granica-cvet));
  /* тонкая обводка своим же цветом, уведённым к тексту: белая глазурь на бумаге
     иначе не видна вовсе — кружок сливается с фоном страницы. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glaz, var(--tekst-cvet)) 55%, var(--tekst-cvet));
}
.d29-skolko {
  font: 400 var(--mono)/1 var(--shrift-mono); color: var(--tusk);
  font-variant-numeric: tabular-nums;
}
/* Выбранное семейство: кольцо вокруг образца, а не заливка под ним — заливка
   спорила бы с самим цветом глазури, который здесь и есть содержание. */
.d29-glazur[aria-pressed="true"] .d29-obrazec {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glaz) 55%, var(--tekst-cvet)),
              0 0 0 2px var(--fon), 0 0 0 4px var(--glaz);
}
.d29-glazur[aria-pressed="true"] .d29-skolko { color: var(--tekst-cvet); font-weight: 600; }
@media (hover: hover) {
  .d29-glazur:hover .d29-obrazec {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glaz) 55%, var(--tekst-cvet)),
                0 0 0 2px var(--fon), 0 0 0 3px color-mix(in srgb, var(--glaz) 45%, var(--fon));
  }
}
.d29-glazur:active .d29-obrazec { transform: translateY(1px); }
/* Строка под рядом: одна подпись вместо семи. Пока ничего не выбрано — говорит,
   сколько всего оттенков; выбрали — называет семейство и число предметов. */
.d29-vybrano {
  font-size: var(--melkoe); color: var(--tusk); margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.d29-vybrano b { color: var(--tekst-cvet); font-weight: 600; }

/* D-30 · серия из N ------------------------------------------------------------- */
/* Чашки одной глазури идут подряд, и полка предлагает взять пару или четвёрку.
   Чтобы это читалось предложением, а не случайным порядком, серия вынута
   из общего потока полки: своя подложка тоном глазури и полоса её цветом слева.
   Подложка слабая (7 %) — предметы здесь главные, а фотографии чашек и так
   цветные; сильнее — и полка превратится в семь цветных плит. */
.d30-seriya {
  background: color-mix(in srgb, var(--glaz, var(--akcent)) 7%, var(--fon));
  border-left: 3px solid var(--glaz, var(--akcent));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 12px 14px; margin: 0 0 var(--shag);
  display: grid; gap: 10px;
}
.d30-shapka { display: grid; gap: 3px; }
.d30-imya {
  font: 600 var(--melkoe)/1.2 var(--shrift-tekst); color: var(--tekst-cvet);
  letter-spacing: .01em;
}
/* Число в заголовке — то же моноширинное, что у цен и остатков. */
.d30-imya .d30-n { font-family: var(--shrift-mono); }
.d30-pod { font-size: var(--melkoe); color: var(--tusk); margin: 0; }
/* Предложение взять пару или четвёрку — вторая строка заголовка, не отдельный блок:
   это продолжение мысли «их четыре», а не новое дело. */
.d30-vzyat { display: flex; flex-wrap: wrap; gap: 6px; }
.d30-vzyat .d04-knopka, .d30-vzyat .btn { width: auto; margin: 0; }
/* Полка серии — та же сетка карточек, что у полки страницы; число колонок задаёт
   страница, здесь только минимальная ширина, ниже которой чашку не разглядеть.
   ⚠ Минимум 110, а не 96: на 375 внутри серии остаётся 316 px, и с 96 вставали три
   колонки — четвёртая чашка уходила во вторую строку одна, «сиротой». С 110 выходит
   2 × 2, а серия из шести даёт 2 × 3: ряд всегда полный. Проверено снимком, а не
   рассуждением — на этом уже обжигались (сетка плиток, 09.09). */
.d30-polka {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
/* На широком экране серия из четырёх занимала всю ширину, а карточки жались влево —
   треть блока стояла пустой, и предложение выглядело недоделанным. Разворачиваем:
   слева заголовок и кнопки, справа сами чашки. Заодно читается правильнее — сначала
   «их четыре, берите пару», потом сами предметы. */
@media (min-width: 700px) {
  .d30-seriya { grid-template-columns: minmax(200px, 260px) 1fr; align-items: start; }
  .d30-shapka { padding-right: 12px; }
}
/* ⛔ Кнопка серии остаётся БРЕНДОВОЙ, и это решение, а не недоделка.
   Цвет вида чая — краска бренда: подобранная, насыщенная, с посчитанной парой
   «заливка + текст». Цвет глазури — фотографический факт: среднее по 148 кадрам,
   и он бледный. Посчитал, прежде чем красить: кнопка в бирюзовой глазури даёт
   в покое 4,12 при норме 4,5, в белой — 3,44 под курсором. Факт о материале
   не годится в акцент действия. Глазурь и так ведёт весь блок — кружком в ряду,
   подложкой и полосой; кнопке довольно того, что она внутри. */
/* ==== КОНЕЦ РАЗМЕРОВ ==== */