/* Generated by tools/build_css.php - do not edit, change the modules instead. */

/* --- base/variables.css --- */
/* Design tokens. Mediterranean palette: turquoise water, whitewashed walls, sand, terracotta. */
:root {
    /* colour */
    --c-sea:        #0d7f8f;
    --c-sea-dark:   #0a6472;
    --c-sea-deep:   #063d47;
    --c-sea-soft:   #e6f3f4;
    --c-coral:      #e2643c;
    --c-coral-dark: #c8512c;
    --c-sand:       #f8f4ed;
    --c-sand-dark:  #efe7da;
    --c-ink:        #16272c;
    --c-muted:      #5f757c;
    --c-line:       #e2dccf;
    --c-white:      #ffffff;
    --c-success:    #1f7a4d;
    --c-success-bg: #e7f4ed;
    --c-error:      #b23b2e;
    --c-error-bg:   #fbecea;
    --c-warning:    #a8720d;
    --c-warning-bg: #fdf3e0;

    /* typography */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: var(--font-body);

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.125rem;
    --fs-3xl:  2.75rem;

    --lh-tight: 1.2;
    --lh-base:  1.6;

    /* spacing - 4px scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* shape */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(6, 61, 71, 0.06), 0 2px 8px rgba(6, 61, 71, 0.05);
    --shadow:    0 4px 16px rgba(6, 61, 71, 0.10);
    --shadow-lg: 0 12px 40px rgba(6, 61, 71, 0.16);

    /* layout */
    --container: 1360px;
    --header-h: 60px;

    --transition: 160ms ease;
}

@media (min-width: 768px) {
    :root {
        --fs-2xl: 2.5rem;
        --fs-3xl: 3.5rem;
        --header-h: 72px;
    }
}

/* --- base/reset.css --- */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* Without !important a component rule like display:flex beats the hidden attribute
   and the "closed" modal stays on screen. */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--c-sea);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- base/typography.css --- */
/* Typography */
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background-color: var(--c-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-sea-deep);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a.link {
    color: var(--c-sea);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a.link:hover { color: var(--c-sea-dark); }

.lead {
    font-size: var(--fs-md);
    color: var(--c-muted);
}

.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.strong { font-weight: 600; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-sea);
}

/* Inline SVG has no intrinsic size: without this every icon expands to fill its box. */
.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* --- base/layout.css --- */
/* Layout primitives */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--sp-5); }
}

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--sand { background-color: var(--c-sand); }

@media (min-width: 768px) {
    .section { padding-block: var(--sp-8); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.divider {
    height: 1px;
    background-color: var(--c-line);
    border: 0;
    margin-block: var(--sp-5);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Узкая колонка для служебных страниц: список авторов не должен растягиваться на весь экран. */
.container--narrow { max-width: 760px; }

.credit {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background-color: var(--c-white);
}

.credit__title { font-weight: 600; color: var(--c-sea-deep); }

.credit__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* --- base/shell.css --- */
/* Трёхколоночная оболочка публичной части: навигация слева, содержимое в центре,
   справочные модули справа. Колонки появляются по мере ширины экрана, телефон получает
   одну колонку - порядок задан в shell_mobile.css. */

.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    max-width: var(--container, 1200px);
    margin-inline: auto;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-5) var(--sp-8);
}

.shell__side,
.shell__rail { min-width: 0; }

.shell__main { min-width: 0; }

/* Боковые колонки прилипают: длинный список объектов не должен уводить навигацию из виду. */
@media (min-width: 1000px) {
    .shell {
        grid-template-columns: 232px minmax(0, 1fr);
        padding-inline: var(--sp-5);
    }

    .shell__side {
        position: sticky;
        top: var(--sp-4);
        max-height: calc(100vh - var(--sp-6));
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .shell__rail { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
    .shell {
        grid-template-columns: 232px minmax(0, 1fr) 296px;
        gap: var(--sp-6);
    }

    .shell__rail {
        grid-column: auto;
        position: sticky;
        top: var(--sp-4);
    }
}

/* Полноширинные блоки живут над оболочкой: обложка и шапка категории. */
.wide { width: 100%; }

/* Внутри колонки ширину задаёт сама колонка: контейнеры страниц перестают ограничивать
   и отступать по краям, иначе получаются поля внутри полей. */
.shell__main .container { max-width: none; padding-inline: 0; width: 100%; }
.shell__main .container--narrow { max-width: none; }
.shell__main .section { padding-block: 0 var(--sp-6); }
.shell__main .section--sand {
    padding: var(--sp-5);
    border-radius: var(--radius);
    background-color: var(--c-sand);
    margin-bottom: var(--sp-6);
}

/* --- components/buttons.css --- */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-base);
    text-align: center;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
    border: 1px solid transparent;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
    background-color: var(--c-coral);
    color: var(--c-white);
}
.btn--primary:hover { background-color: var(--c-coral-dark); }

.btn--sea {
    background-color: var(--c-sea);
    color: var(--c-white);
}
.btn--sea:hover { background-color: var(--c-sea-dark); }

.btn--ghost {
    background-color: transparent;
    border-color: var(--c-line);
    color: var(--c-sea-deep);
}
.btn--ghost:hover { background-color: var(--c-sand); }

.btn--light {
    background-color: var(--c-white);
    color: var(--c-sea-deep);
}
.btn--light:hover { background-color: var(--c-sand); }

.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }

.btn[disabled], .btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.btn .icon { width: 20px; height: 20px; }

/* --- components/forms.css --- */
/* Forms */
.field { margin-bottom: var(--sp-4); }

.field__label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-sea-deep);
}

.field__label .req { color: var(--c-coral); }

.field__control,
.input,
select.input,
textarea.input {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    transition: border-color var(--transition), box-shadow var(--transition);
    /* 16px minimum keeps iOS from zooming the whole page on focus */
}

textarea.input { min-height: 120px; resize: vertical; }

.input:focus {
    border-color: var(--c-sea);
    box-shadow: 0 0 0 3px var(--c-sea-soft);
    outline: none;
}

.input.is-invalid { border-color: var(--c-error); }

.field__error {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-error);
}

.field__hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    cursor: pointer;
}

.checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--c-sea);
    flex-shrink: 0;
}

.form-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .form-grid--2 { grid-template-columns: 1fr 1fr; }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-5);
}

/* --- components/alerts.css --- */
/* Flash messages and inline notices */
.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius);
    border-left: 4px solid transparent;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.alert--success { background-color: var(--c-success-bg); border-left-color: var(--c-success); color: #16543a; }
.alert--error   { background-color: var(--c-error-bg);   border-left-color: var(--c-error);   color: #83291f; }
.alert--warning { background-color: var(--c-warning-bg); border-left-color: var(--c-warning); color: #7a5309; }
.alert--info    { background-color: var(--c-sea-soft);   border-left-color: var(--c-sea);     color: var(--c-sea-deep); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    background-color: var(--c-sand-dark);
    color: var(--c-sea-deep);
}

.badge--pending  { background-color: var(--c-warning-bg); color: var(--c-warning); }
.badge--approved { background-color: var(--c-success-bg); color: var(--c-success); }
.badge--rejected { background-color: var(--c-error-bg);   color: var(--c-error); }

/* --- components/cards.css --- */
/* Cards */
.card {
    display: block;
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

a.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--c-sand-dark);
    overflow: hidden;
}

.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body { padding: var(--sp-4); }

.card__title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-sea-deep);
    margin-bottom: var(--sp-1);
}

.card__meta {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.card__price {
    margin-top: var(--sp-3);
    font-weight: 700;
    color: var(--c-sea-deep);
}
.card__price span { font-weight: 400; font-size: var(--fs-sm); color: var(--c-muted); }

/* Category tile with a photo behind the label */
.tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    padding: var(--sp-4);
    border-radius: var(--radius);
    background-color: var(--c-sea-deep);
    background-size: cover;
    background-position: center;
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 61, 71, 0.15) 30%, rgba(6, 61, 71, 0.78) 100%);
    z-index: -1;
}

.tile {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.tile .icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.3;
    opacity: 0.9;
    transition: transform var(--transition);
}

.tile:hover .icon { transform: translateY(-2px); }
.tile__name { font-size: var(--fs-md); font-weight: 700; display: block; }

/* Фотография лежит под градиентом плитки, поэтому текст читается на любом кадре. */
.tile__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.tile--photo { background-color: var(--c-sea-dark); }
.tile--photo::after { background: linear-gradient(180deg, rgba(6, 61, 71, 0.28) 20%, rgba(6, 61, 71, 0.86) 100%); }
.tile--photo:hover .tile__media img { transform: scale(1.04); }

.tile__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 128px;
}

.tile:hover { background-color: var(--c-sea-dark); }
.tile__count { font-size: var(--fs-sm); opacity: 0.85; }

@media (min-width: 768px) {
    .tile { min-height: 200px; }
}

/* Panel: a plain content box inside the cabinets */
.panel {
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: var(--sp-5);
}

.panel + .panel { margin-top: var(--sp-4); }

.panel__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-4);
}

.stat {
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-sea);
    border-radius: var(--radius);
    padding: var(--sp-4);
}

.stat__value { font-size: var(--fs-xl); font-weight: 700; color: var(--c-sea-deep); line-height: 1.1; }
.stat__label { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-1); }

.empty {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--c-muted);
    background-color: var(--c-sand);
    border-radius: var(--radius);
}

/* Action card: icon, title, one line of context */
.card--action .card__body { display: flex; flex-direction: column; gap: var(--sp-1); }

.card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-sm);
    background-color: var(--c-sea-soft);
    color: var(--c-sea);
}

.card__icon .icon { width: 22px; height: 22px; }

/* Stat label carries its icon inline */
.stat__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.stat__label .icon { width: 16px; height: 16px; opacity: 0.55; }

/* --- components/header.css --- */
/* Site header */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--c-line);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
    flex-wrap: nowrap;
}

.header__actions .btn { white-space: nowrap; }

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--c-sea-deep);
    letter-spacing: -0.02em;
}

.logo__mark { width: 28px; height: 28px; color: var(--c-sea); }

.nav { display: none; }

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-ink);
    padding-block: var(--sp-2);
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.nav__link .icon { width: 17px; height: 17px; opacity: 0.65; transition: opacity var(--transition); }

/* Six localised category names plus the logo and the account button need about 1200 px.
   Below that the header switches to the drawer: a row of unlabelled icons is faster to
   render and slower to understand. */
.nav__link:hover .icon { opacity: 1; }

.drawer__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.drawer__link .icon { width: 20px; height: 20px; color: var(--c-sea); }

.nav__link:hover,
.nav__link.is-active {
    color: var(--c-sea);
    border-bottom-color: var(--c-sea);
}

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--c-sea-deep);
}
.burger:hover { background-color: var(--c-sand); }

/* Language switcher: current flag plus a dropdown. Flags are inline SVG - emoji flags
   render as two letters on Windows, and a flag image would be one more request. */
.lang-switch { position: relative; }

.lang-current {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 40px;
    padding-inline: var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-sea-deep);
    background-color: var(--c-white);
    transition: border-color var(--transition), background-color var(--transition);
}

.lang-current:hover { background-color: var(--c-sand); }
.lang-current[aria-expanded="true"] { border-color: var(--c-sea); }

.lang-chevron { width: 14px; height: 14px; opacity: 0.6; transition: transform var(--transition); }
.lang-current[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.flag {
    width: 20px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

.lang-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 190px;
    padding: var(--sp-1);
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
}

.lang-option em {
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-inline-start: auto;
}

.lang-option:hover { background-color: var(--c-sand); }

.lang-option.is-active {
    background-color: var(--c-sea-soft);
    color: var(--c-sea-deep);
}

/* Flat row for the drawer and the footer */
.langs { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.langs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: inherit;
    opacity: 0.75;
    transition: opacity var(--transition), background-color var(--transition);
}

.langs__item:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.08); }
.langs__item.is-active { opacity: 1; background-color: rgba(255, 255, 255, 0.14); }

.drawer .langs__item:hover,
.drawer .langs__item.is-active { background-color: var(--c-sand); }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(6, 61, 71, 0.45);
}

.drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(320px, 86vw);
    background-color: var(--c-white);
    padding: var(--sp-5);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.drawer__list { display: flex; flex-direction: column; gap: var(--sp-1); }

.drawer__link {
    display: block;
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.drawer__link:hover { background-color: var(--c-sand); }

.drawer__close { align-self: flex-end; width: 44px; height: 44px; }

@media (min-width: 1200px) {
    .nav { display: block; }
    .burger { display: none; }
}

/* Logout is a form, not a link - it must be a POST */
.logout-form { display: contents; }

.panel-topbar__logout {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 0;
}
.panel-topbar__logout:hover { color: var(--c-white); }

button.drawer__link {
    width: 100%;
    text-align: start;
    font: inherit;
    color: inherit;
}

/* --- components/footer.css --- */
/* Footer */
.footer {
    margin-top: var(--sp-8);
    background-color: var(--c-sea-deep);
    color: rgba(255, 255, 255, 0.82);
    padding-block: var(--sp-7) var(--sp-5);
    font-size: var(--fs-sm);
}

.footer a { transition: color var(--transition); }
.footer a:hover { color: var(--c-white); }

.footer__grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
}

.footer__title {
    color: var(--c-white);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}

.footer__list { display: flex; flex-direction: column; gap: var(--sp-2); }

.footer__about { max-width: 40ch; }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
    .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Footer links carry the same icons as the header - one visual language everywhere */
.footer__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.footer__list .icon {
    width: 17px;
    height: 17px;
    opacity: 0.55;
    transition: opacity var(--transition);
    flex-shrink: 0;
}

.footer__list a:hover .icon { opacity: 0.9; }

.footer__credits { margin-inline-start: var(--sp-2); text-decoration: underline; }

/* --- components/rail.css --- */
/* Блоки боковых колонок: навигация, справочные модули, промо. */

.rail { display: flex; flex-direction: column; gap: var(--sp-4); }

.rail-block { margin-bottom: var(--sp-5); }

.rail-block__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
    margin-bottom: var(--sp-3);
}

.rail-block__title .icon { width: 16px; height: 16px; color: var(--c-sea); }
.rail-block__title--light { color: rgba(255, 255, 255, 0.85); }

.rail-block--card {
    margin-bottom: 0;
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: var(--c-white);
}

.rail-block__lead { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-3); }
.rail-block__note { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-2); }

/* ---------------------------------------------------------------- навигация */

.rail-nav__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.rail-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.rail-nav__link .icon { width: 18px; height: 18px; color: var(--c-sea); opacity: 0.85; }
.rail-nav__link:hover { background-color: var(--c-sea-soft); color: var(--c-sea-deep); }

.rail-nav__link.is-active {
    background-color: var(--c-sea-soft);
    color: var(--c-sea-deep);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--c-sea);
}

/* ---------------------------------------------------------------- факты и таблицы */

.facts { display: flex; flex-direction: column; gap: var(--sp-2); }

.facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

.facts__row dt { color: var(--c-muted); }
.facts__row dd { font-weight: 600; color: var(--c-sea-deep); }

.way + .way { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.way__name { font-weight: 600; font-size: var(--fs-sm); color: var(--c-sea-deep); margin-bottom: var(--sp-1); }
.way__text { font-size: var(--fs-sm); color: var(--c-muted); }

.season { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.season th, .season td { padding: var(--sp-1) var(--sp-2); text-align: right; }
.season thead th { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }
.season tbody th { text-align: start; font-weight: 500; color: var(--c-ink); }
.season tbody tr + tr th, .season tbody tr + tr td { border-top: 1px solid var(--c-line); }
.season tbody tr:hover { background-color: var(--c-sand); }

/* ---------------------------------------------------------------- промо с фотографией */

.rail-block--photo {
    position: relative;
    margin-bottom: 0;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    min-height: 230px;
    display: flex;
    align-items: flex-end;
    color: var(--c-white);
}

.rail-block__media { position: absolute; inset: 0; z-index: -2; display: block; }
.rail-block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.rail-block--photo:hover .rail-block__media img { transform: scale(1.05); }

.rail-block--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 61, 71, 0.30) 0%, rgba(6, 61, 71, 0.72) 45%, rgba(6, 61, 71, 0.94) 100%);
}

.rail-block__over { padding: var(--sp-4); }
.rail-block--photo .rail-block__lead { color: rgba(255, 255, 255, 0.88); }

.rail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-sea);
}

.rail-link .icon { width: 16px; height: 16px; }

/* --- pages/home.css --- */
/* Home page */
.hero {
    position: relative;
    padding-block: var(--sp-7) var(--sp-8);
    background-color: var(--c-sea-deep);
    background-image: linear-gradient(160deg, #0a6472 0%, #063d47 62%, #052f38 100%);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

/* Кадр острова под заголовком. Градиент поверх - не украшение: без него белый текст
   ложится на светлый песок и пропадает. */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(4, 47, 56, 0.90) 0%, rgba(5, 55, 65, 0.68) 46%, rgba(6, 61, 71, 0.22) 100%);
}

.hero::after {
    /* horizon line, drawn rather than loaded */
    content: "";
    position: absolute;
    inset-inline: -10%;
    bottom: -60px;
    height: 160px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(13, 127, 143, 0.55), transparent 70%);
    pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 720px; }

.hero h1 {
    color: var(--c-white);
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-4);
}

.hero__subtitle {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: var(--sp-6);
}

.hero__search {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background-color: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.hero__search .input { border-color: transparent; background-color: var(--c-sand); }

.category-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }

.why__item { display: flex; gap: var(--sp-4); }

.why__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background-color: var(--c-sea-soft);
    color: var(--c-sea);
}

.why__icon svg { width: 24px; height: 24px; }

.cta-operator {
    position: relative;
    display: grid;
    gap: var(--sp-5);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    background-color: var(--c-sea-deep);
    border: 1px solid var(--c-sea-dark);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

.cta-operator h2 { color: var(--c-white); }
.cta-operator .muted { color: rgba(255, 255, 255, 0.82); }

.cta-operator__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.cta-operator__media img { width: 100%; height: 100%; object-fit: cover; }

.cta-operator::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(95deg, rgba(4, 40, 48, 0.86) 0%, rgba(4, 40, 48, 0.66) 58%, rgba(4, 40, 48, 0.30) 100%);
}

@media (min-width: 768px) {
    .hero { padding-block: var(--sp-9) var(--sp-9); }
    .hero h1 { font-size: var(--fs-3xl); }
    .hero__search { flex-direction: row; align-items: center; }
    .hero__search .input { flex: 1; }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .cta-operator { grid-template-columns: 3fr 2fr; align-items: center; }
}

/* Шапка категории: тот же приём, что и на главной - кадр под градиентом. */
.cat-hero {
    position: relative;
    padding-block: var(--sp-6) var(--sp-6);
    background-color: var(--c-sea-deep);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

.cat-hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.cat-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.cat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(4, 47, 56, 0.90) 0%, rgba(5, 55, 65, 0.70) 50%, rgba(6, 61, 71, 0.30) 100%);
}

.cat-hero__inner { position: relative; max-width: 720px; }
.cat-hero h1 { color: var(--c-white); }
.cat-hero__crumbs { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); margin-bottom: var(--sp-3); }
.cat-hero__crumbs a { color: rgba(255, 255, 255, 0.9); }
.cat-hero__intro { margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.88); }

@media (min-width: 768px) {
    .cat-hero { padding-block: var(--sp-7) var(--sp-7); }
}

/* --- pages/catalog.css --- */
/* Список объектов в категории. */

.cat-count { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); }

.lcards { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }

.lcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: var(--c-white);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.lcard:hover {
    box-shadow: var(--shadow);
    border-color: var(--c-sea-soft);
    transform: translateY(-2px);
}

.lcard__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background-color: var(--c-sand);
    overflow: hidden;
}

.lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.lcard:hover .lcard__media img { transform: scale(1.04); }

.lcard__blank { display: grid; place-items: center; width: 100%; height: 100%; }
.lcard__blank .icon { width: 44px; height: 44px; color: var(--c-sea); opacity: 0.35; }

.lcard__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.lcard__title { font-weight: 700; color: var(--c-sea-deep); font-size: var(--fs-md); }
.lcard__summary { font-size: var(--fs-sm); color: var(--c-muted); }

.lcard__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); }
.lcard__meta span { display: inline-flex; align-items: center; gap: 4px; }
.lcard__meta .icon { width: 14px; height: 14px; opacity: 0.7; }

.lcard__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-2);
}

.lcard__price { display: inline-flex; align-items: baseline; gap: 4px; }
.lcard__from { font-size: var(--fs-xs); color: var(--c-muted); }
.lcard__price strong { font-size: var(--fs-md); color: var(--c-sea-deep); }
.lcard__unit { font-size: var(--fs-xs); color: var(--c-muted); }

.lcard__more { font-size: var(--fs-sm); color: var(--c-sea); font-weight: 600; }

@media (min-width: 620px) {
    .lcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
    .lcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- pages/listing.css --- */
/* Страница объекта. */

.lst-hero {
    position: relative;
    padding-block: var(--sp-7) var(--sp-6);
    background-color: var(--c-sea-deep);
    color: var(--c-white);
    overflow: hidden;
    isolation: isolate;
}

.lst-hero--plain { padding-block: var(--sp-6); }

.lst-hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.lst-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.lst-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(4, 47, 56, 0.92) 0%, rgba(5, 55, 65, 0.72) 50%, rgba(6, 61, 71, 0.34) 100%);
}

.lst-hero__inner { position: relative; max-width: 760px; }
.lst-hero h1 { color: var(--c-white); margin-block: var(--sp-2); }
.lst-hero__crumbs { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); }
.lst-hero__crumbs a { color: rgba(255, 255, 255, 0.92); }

.lst-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.88); }
.lst-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lst-hero__meta .icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- содержимое */

.lst-page { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }

.lst-page__title { font-size: var(--fs-md); margin-block: var(--sp-5) var(--sp-3); }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.gallery__item { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.gallery__item:hover img { transform: scale(1.05); }

.prose { color: var(--c-ink); line-height: var(--lh-base); }
.prose.small { font-size: var(--fs-sm); color: var(--c-muted); }

.incl { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-4); }

.amen { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.amen__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.amen__item .icon { width: 16px; height: 16px; color: var(--c-success); }

.specs { display: flex; flex-direction: column; gap: 0; }
.specs__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.specs__row dt { color: var(--c-muted); }
.specs__row dd { font-weight: 600; color: var(--c-sea-deep); }

.notice {
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--radius);
    background-color: var(--c-warning-bg);
    color: var(--c-ink);
}

/* ---------------------------------------------------------------- блок брони */

.book {
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: var(--c-white);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.book__price { display: flex; align-items: baseline; gap: 6px; }
.book__from { font-size: var(--fs-sm); color: var(--c-muted); }
.book__price strong { font-size: var(--fs-xl); color: var(--c-sea-deep); }
.book__unit { font-size: var(--fs-sm); color: var(--c-muted); }

.book__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); margin-bottom: var(--sp-2); }
.book__slot { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px solid var(--c-line); }
.book__slot-price { margin-inline-start: auto; font-weight: 600; color: var(--c-sea-deep); }

.book__note { font-size: var(--fs-xs); color: var(--c-muted); }
.book__contacts { display: flex; flex-direction: column; gap: var(--sp-2); }
.book__contacts .icon { width: 16px; height: 16px; }
.book__operator { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }

@media (min-width: 900px) {
    .lst-page { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); }
    .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .book { position: sticky; top: var(--sp-4); }
}

/* Код CIN - обязательная часть объявления, но не главная: спокойный тон, читаемый размер. */
.cin-line {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.cin-line strong { color: var(--c-ink); letter-spacing: 0.02em; }

/* Форма запроса живёт в блоке брони: поля компактнее общих, кнопка во всю ширину. */
.book__enquiry { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.book__enquiry .field { margin-bottom: var(--sp-3); }
.book__enquiry .field__label { font-size: var(--fs-xs); }
.book__enquiry .input { padding: var(--sp-2) var(--sp-3); }
.book__enquiry .form-actions { margin-top: var(--sp-3); }

/* Ловушка для роботов: убрана из потока, но не display:none - часть ботов такие поля пропускает. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- base/motion.css --- */
/* Движение в интерфейсе: короткое, одно направление, без прыжков.
   Всё выключается системной настройкой «уменьшить движение» - это не украшение,
   а требование доступности. */

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rail-block--card,
.rail-block--photo,
.tile,
.card {
    animation: rise 420ms ease both;
}

/* Лёгкая лесенка: блоки появляются один за другим, но ожидание не растёт бесконечно. */
.rail-block--card:nth-child(2) { animation-delay: 60ms; }
.rail-block--card:nth-child(3) { animation-delay: 120ms; }
.rail-block--card:nth-child(4) { animation-delay: 180ms; }
.tile:nth-child(2) { animation-delay: 40ms; }
.tile:nth-child(3) { animation-delay: 80ms; }
.tile:nth-child(4) { animation-delay: 120ms; }
.tile:nth-child(5) { animation-delay: 160ms; }
.tile:nth-child(6) { animation-delay: 200ms; }

.hero__inner { animation: fade 600ms ease both; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- base/shell_mobile.css --- */
/* Оболочка на телефоне: одна колонка, навигация ниже содержимого - шапка уже даёт
   переход по категориям, дублировать её перед контентом незачем. */

@media (max-width: 999px) {
    .shell {
        padding-inline: var(--sp-3);
        padding-block: var(--sp-4) var(--sp-6);
        gap: var(--sp-4);
    }

    .shell__main { order: 1; }
    .shell__rail { order: 2; }
    .shell__side { order: 3; }

    .shell__side .rail-block__title { font-size: var(--fs-sm); }
}

/* --- components/rail_mobile.css --- */
/* Боковые модули на телефоне: карточки во всю ширину, навигация в две колонки. */

@media (max-width: 999px) {
    .rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

    .rail-block--photo { min-height: 190px; }

    .shell__side .rail-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
    .shell__side .rail-block { margin-bottom: var(--sp-4); }
}

@media (min-width: 600px) and (max-width: 999px) {
    .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rail-block--photo { grid-column: 1 / -1; }
}

/* --- pages/catalog_mobile.css --- */
/* Карточки каталога на телефоне: одна колонка, обложка ниже, текст компактнее. */

@media (max-width: 619px) {
    .lcards { gap: var(--sp-3); }
    .lcard__body { padding: var(--sp-3); gap: var(--sp-1); }
    .lcard__title { font-size: var(--fs-base); }
    .lcard__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .lcard__media { aspect-ratio: 16 / 10; }
}

/* --- pages/listing_mobile.css --- */
/* Страница объекта на телефоне: блок брони уходит вниз, галерея в две колонки. */

@media (max-width: 899px) {
    .lst-hero { padding-block: var(--sp-5) var(--sp-4); }
    .lst-hero h1 { font-size: var(--fs-lg); }

    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lst-page__side { order: 2; }

    .book { position: static; }
    .book__contacts .btn { width: 100%; }
}