/*
 * «Тарелка» — доставка еды. Один мотив на весь сайт: тарелка, вид строго сверху.
 * Окно фото — круг, кнопка «+» — круг, счётчик корзины — круг, а корзина — стол,
 * на который ложатся тарелки. Меню разбито на цветные главы (небо, шафран, нори,
 * фисташка); в каталоге и оформлении цветных полей нет — там работают.
 *
 * Здесь: шрифты, токены дизайн-настроек, база, шапка, подвал. Остальное:
 *   tr-shop.css    карточка блюда, категория, страница блюда, «Стол»
 *   tr-blocks.css  собственные блоки шаблона
 */
@import url('tr-shop.css');
@import url('tr-blocks.css');

@font-face {
    font-family: 'Tarelka Dela';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(../fonts/dela-gothic-one-cyrillic-400-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Tarelka Dela';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(../fonts/dela-gothic-one-latin-400-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tarelka Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(../fonts/nunito-sans-cyrillic-opsz-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Tarelka Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(../fonts/nunito-sans-latin-opsz-normal.woff2) format('woff2-variations');
    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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Запасные начертания для переключателей шрифта: файлы родительской темы. */
@font-face {
    font-family: 'Tarelka Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(/themes/default/assets/fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Tarelka Unbounded';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(/themes/default/assets/fonts/unbounded-latin-wght-normal.woff2) format('woff2-variations');
    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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tarelka Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Tarelka Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/themes/default/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
    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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Значения по умолчанию для настроек «Дизайн» (ядро печатает свои после этого файла)
   ------------------------------------------------------------------------- */

:root {
    --tarelka-sky: #A9D8EA;
    --tarelka-saffron: #F6B21B;
    --tarelka-nori: #183A2E;
    --tarelka-pistachio: #C9DB8A;
    --tarelka-ink: #17130E;
    --tarelka-plate: #FAFAF7;
    --tarelka-font-display: 'Tarelka Dela', 'Arial Black', system-ui, sans-serif;
    --tarelka-font-ui: 'Tarelka Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Токены
   ------------------------------------------------------------------------- */

html.tarelka {
    --sky: var(--tarelka-sky);
    --saffron: var(--tarelka-saffron);
    --nori: var(--tarelka-nori);
    --pistachio: var(--tarelka-pistachio);
    --ink: var(--tarelka-ink);
    --plate: var(--tarelka-plate);
    --ink-soft: color-mix(in oklab, var(--ink) 74%, var(--plate));
    --ink-muted: color-mix(in oklab, var(--ink) 62%, var(--plate));
    --sunk: color-mix(in oklab, var(--ink) 6%, var(--plate));
    --hair: color-mix(in oklab, var(--ink) 14%, var(--plate));

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-price: 1.5rem;
    --step-head: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    --step-display: clamp(2.3rem, 0.5rem + 6.2vw, 6rem);

    --tr-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --tr-max: 92rem;
    --tr-lift: 0 12px 32px rgb(23 19 14 / 0.14);

    /* поле главы: --f — цвет, --on-f — текст на нём */
    --f: var(--sky);
    --on-f: var(--ink);

    /* токены родительской темы */
    --c-bg: var(--plate);
    --c-surface: var(--plate);
    --c-surface-sunk: var(--sunk);
    --c-text: var(--ink);
    --c-text-strong: var(--ink);
    --c-text-muted: var(--ink-soft);
    --c-text-faint: var(--ink-muted);
    --c-border: var(--hair);
    --c-border-strong: color-mix(in oklab, var(--ink) 30%, var(--plate));
    --c-accent: var(--ink);
    --c-accent-hover: color-mix(in oklab, var(--ink) 82%, var(--plate));
    --c-accent-soft: var(--sunk);
    --c-accent-contrast: var(--plate);
    --c-link: var(--ink);
    --c-link-hover: var(--ink);
    --c-mark: var(--saffron);
    --c-mark-text: var(--ink);
    --c-mark-soft: color-mix(in oklab, var(--saffron) 28%, var(--plate));
    --c-slab: var(--nori);
    --c-slab-text: var(--plate);
    --c-slab-muted: color-mix(in oklab, var(--plate) 72%, var(--nori));
    --c-danger: #A32B16;
    --c-success: #1D7A4F;

    --font-ui: var(--tarelka-font-ui);
    --font-display: var(--tarelka-font-display);
    --font-prose: var(--tarelka-font-ui);
    --fw-heading: 400;
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-btn: 999px;
    --r-pill: 999px;
    --w-container: 76rem;
    --w-wide: var(--tr-max);
    --gutter: var(--tr-gutter);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: var(--tr-lift);
    --shadow-lift: var(--tr-lift);
    --card-bg: transparent;
    --card-border: 0;
    --card-shadow: none;
    --card-radius: 0;

    --shop-star: var(--saffron);
    --shop-sticker-discount-bg: var(--saffron);
    --shop-sticker-discount-fg: var(--ink);
    --shop-sticker-hit-bg: var(--nori);
    --shop-sticker-hit-fg: var(--plate);
    --shop-sticker-new-bg: var(--pistachio);
    --shop-sticker-new-fg: var(--ink);
    --shop-sticker-few-bg: var(--ink);
    --shop-sticker-few-fg: var(--plate);

    color-scheme: light;
    accent-color: var(--ink);
    caret-color: var(--ink);
    scrollbar-color: color-mix(in oklab, var(--ink) 45%, var(--plate)) var(--plate);
    scrollbar-width: thin;
}

/* Цвет поля главы. Текст на нём считается из светлоты поля, так что любой
   выбранный цвет остаётся читаемым. */
.tr-f--sky { --f: var(--sky); --on-f: var(--ink); }
.tr-f--saffron { --f: var(--saffron); --on-f: var(--ink); }
.tr-f--nori { --f: var(--nori); --on-f: var(--plate); }
.tr-f--pistachio { --f: var(--pistachio); --on-f: var(--ink); }

@supports (color: oklch(from red l c h)) {
    .tr-f--sky,
    .tr-f--saffron,
    .tr-f--nori,
    .tr-f--pistachio,
    html.tarelka {
        --on-f: oklch(from var(--f) clamp(0.2, (0.66 - l) * 100 + 0.2, 0.97) 0.012 85);
    }
}

html.tarelka { background: var(--plate); }

html.tarelka body {
    background: var(--plate);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--step-body);
    font-optical-sizing: auto;
    line-height: 1.55;
}

html.tarelka ::selection { background: var(--saffron); color: var(--ink); }
html.tarelka :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
html.tarelka .tr-dark :focus-visible,
html.tarelka .tr-f--nori :focus-visible { outline-color: var(--plate); }

html.tarelka h1,
html.tarelka h2,
html.tarelka h3,
html.tarelka h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: inherit;
    line-height: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

html.tarelka p,
html.tarelka li { text-wrap: pretty; }

html.tarelka a { text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

.tr-wrap {
    width: 100%;
    max-width: var(--tr-max);
    margin-inline: auto;
    padding-inline: var(--tr-gutter);
}

/* Заголовки секций страниц-конструктора */
html.tarelka .cms-section__title,
html.tarelka .cms-head__title {
    font-size: var(--step-head);
    letter-spacing: -0.03em;
    line-height: 0.98;
}

/* -------------------------------------------------------------------------
   Варианты, которые переключает владелец
   ------------------------------------------------------------------------- */

html[data-tarelka-buttons='square'].tarelka { --r-btn: 6px; --r-pill: 6px; }
html[data-tarelka-buttons='square'] .tr-input,
html[data-tarelka-buttons='square'] .tr-chip { border-radius: 6px; }

html[data-tarelka-hero='saffron'] .tr-hero { --f: var(--saffron); }
html[data-tarelka-hero='pistachio'] .tr-hero { --f: var(--pistachio); }
html[data-tarelka-hero='nori'] .tr-hero { --f: var(--nori); }

/* -------------------------------------------------------------------------
   Кнопки и поля
   ------------------------------------------------------------------------- */

html.tarelka .cms-btn {
    border-radius: var(--r-btn);
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: 0;
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

html.tarelka .cms-btn--primary {
    background: var(--ink);
    color: var(--plate);
    border-color: var(--ink);
}

html.tarelka .cms-btn--primary:hover {
    background: color-mix(in oklab, var(--ink) 80%, var(--plate));
    border-color: transparent;
}

html.tarelka .cms-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
}

html.tarelka .cms-btn--ghost:hover {
    background: var(--ink);
    color: var(--plate);
}

html.tarelka .cms-btn:active { transform: scale(0.97); }
html.tarelka .cms-btn:disabled { opacity: 0.45; cursor: not-allowed; }

html.tarelka input[type='text'],
html.tarelka input[type='email'],
html.tarelka input[type='tel'],
html.tarelka input[type='search'],
html.tarelka input[type='number'],
html.tarelka select,
html.tarelka textarea {
    border-radius: 999px;
    border: 2px solid var(--hair);
    background: var(--plate);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color 140ms var(--ease-out);
}

html.tarelka textarea { border-radius: 20px; }
html[data-tarelka-buttons='square'].tarelka input:not([type='checkbox'], [type='radio']),
html[data-tarelka-buttons='square'].tarelka select { border-radius: 6px; }
html.tarelka input:hover,
html.tarelka select:hover,
html.tarelka textarea:hover { border-color: color-mix(in oklab, var(--ink) 40%, var(--plate)); }
html.tarelka input:focus-visible,
html.tarelka select:focus-visible,
html.tarelka textarea:focus-visible { border-color: var(--ink); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Шапка
   ------------------------------------------------------------------------- */

.tr-hdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--plate);
    color: var(--ink);
}

.tr-hdr__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 4.5rem;
}

.tr-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    line-height: 1;
}

.tr-logo__mark { width: 2.25rem; height: 2.25rem; flex: none; transition: transform 600ms var(--ease-out); }
.tr-logo:hover .tr-logo__mark { transform: rotate(90deg); }
.tr-logo__img { display: block; max-height: var(--logo-h, 40px); width: auto; }

.tr-hdr__nav { display: flex; align-items: center; gap: 0.25rem 1.75rem; flex-wrap: wrap; }
.tr-hdr__tools { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; }
.tr-hdr__zone { display: flex; align-items: center; gap: 1.25rem; }

.tr-hdr .hdr-nav__list { display: flex; gap: 0.25rem 1.75rem; list-style: none; margin: 0; padding: 0; }

.tr-hdr .hdr-nav__link {
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: none;
    padding-block: 0.5rem;
}

.tr-hdr .hdr-nav__link:hover,
.tr-hdr .hdr-nav__link.is-active {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
    text-decoration-color: var(--saffron);
}

.tr-hdr .hdr-phone__number { font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-hdr .hdr-phone__caption { display: block; font-size: var(--step-small); color: var(--ink-soft); }
.tr-hdr .hdr-text { font-weight: 700; font-size: var(--step-small); display: inline-flex; align-items: center; gap: 0.4rem; }

/* «Стол» — корзина в шапке: капсула цвета нори с кружком-счётчиком */
.tr-hdr .shop-minicart {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem 0.25rem 1.1rem;
    border-radius: 999px;
    background: var(--nori);
    color: var(--plate);
    font-weight: 800;
    text-decoration: none;
    transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.tr-hdr .shop-minicart:hover { background: color-mix(in oklab, var(--nori) 84%, var(--plate)); }
.tr-hdr .shop-minicart:active { transform: scale(0.97); }
.tr-hdr .shop-minicart .cms-icon { display: none; }
.tr-hdr .shop-minicart::before {
    content: '';
    order: 1;
    width: 1.35rem;
    height: 1.35rem;
    border: 2.5px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0 26%, transparent 28%);
}
.tr-hdr .shop-minicart__count { order: 2; }
.tr-hdr .shop-minicart__label { order: -1; }

.tr-hdr .shop-minicart__count {
    position: static;
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.3rem;
    border-radius: 50%;
    background: var(--saffron);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.9rem;
    line-height: 1;
}

.tr-hdr .shop-minicart__count[hidden] { display: none; }
.tr-hdr .shop-minicart.is-bumped .shop-minicart__count { animation: tr-bump 320ms var(--ease-out); }
@keyframes tr-bump { 40% { transform: scale(1.22); } }

.tr-hdr .hdr-icon-btn,
.tr-hdr .shop-account,
.tr-hdr .shop-wishlist-link,
.tr-hdr .shop-hlist {
    color: var(--ink);
}

.tr-burger { display: none; }

@media (max-width: 62rem) {
    .tr-hdr__inner { grid-template-columns: 1fr auto; min-height: 4rem; }
    .tr-hdr__nav { display: none; }
    .tr-hdr__zone > :not(.hdr-mod--shop-cart) { display: none; }
    .tr-burger { display: inline-grid; }
    .tr-hdr .shop-minicart__label { display: none; }
    .tr-hdr .shop-minicart { padding-left: 0.4rem; }
}

/* Мобильное меню (шторка родителя) */
.tr-drawer { background: var(--nori); color: var(--plate); }
.tr-drawer .hdr-drawer__head { align-items: center; }
.tr-drawer a { color: var(--plate); }
.tr-drawer .tr-logo { color: var(--plate); }
.tr-drawer .hdr-drawer__close { color: var(--plate); }

/* -------------------------------------------------------------------------
   Подвал: цвет нори и имя во всю ширину
   ------------------------------------------------------------------------- */

.tr-ftr {
    --f: var(--nori);
    margin-top: clamp(4rem, 9vw, 8rem);
    background: var(--nori);
    color: var(--plate);
    overflow: hidden;
}

.tr-ftr a { color: inherit; text-decoration-color: color-mix(in oklab, var(--plate) 45%, transparent); }
.tr-ftr a:hover { text-decoration-color: var(--saffron); }

.tr-ftr__main { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }

.tr-ftr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(10rem, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}

.tr-ftr__col--about { max-width: 26rem; }
.tr-ftr__title { font-size: 1.0625rem; font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; margin: 0 0 1rem; color: var(--saffron); line-height: 1.2; }
.tr-ftr__about { margin: 0 0 1.25rem; color: color-mix(in oklab, var(--plate) 86%, var(--nori)); }
.tr-ftr__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tr-ftr__menu a { text-decoration: none; font-weight: 700; }
.tr-ftr__menu a:hover { text-decoration: underline; }
.tr-ftr__contacts { font-style: normal; display: grid; gap: 0.6rem; }
.tr-ftr__contacts p { margin: 0; }
.tr-ftr__phone a { font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; text-decoration: none; letter-spacing: -0.01em; }
.tr-ftr__phone span { display: block; font-size: var(--step-small); color: color-mix(in oklab, var(--plate) 78%, var(--nori)); }
.tr-ftr__line { display: flex; gap: 0.6rem; align-items: flex-start; }
.tr-ftr__line .cms-icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; color: var(--saffron); }
.tr-ftr__socials { display: flex; gap: 0.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.tr-ftr__name {
    display: block;
    margin: clamp(1rem, 3vw, 2.5rem) 0 0;
    padding-inline: var(--tr-gutter);
    font-family: var(--font-display);
    font-size: 17.4vw;
    line-height: 0.74;
    letter-spacing: -0.04em;
    color: var(--saffron);
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    user-select: none;
}

.tr-ftr__bottom { background: var(--ink); color: color-mix(in oklab, var(--plate) 82%, var(--ink)); }
.tr-ftr__bottom-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; padding-block: 1.25rem; font-size: var(--step-small); }
.tr-ftr__bottom p { margin: 0; }
.tr-ftr__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------------------
   Движение: уважаем «меньше анимации»
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tr-logo:hover .tr-logo__mark { transform: none; }
    html.tarelka .cms-btn:active,
    .tr-hdr .shop-minicart:active { transform: none; }
    .tr-hdr .shop-minicart.is-bumped .shop-minicart__count { animation: none; }
}