/* ============================================================
   PROOF PRESS — storefront theme
   Heritage palette: deep navy, antique gold, warm cream.
   Structure follows the new reference; colour and header follow
   the original PROOF PRESS identity.
   ============================================================ */

:root {
    --navy-950: #04101d;
    --navy-900: #071a2c;
    --navy-800: #0b2237;
    --navy-700: #123049;

    --gold-600: #a87a43;
    --gold-500: #c89a5b;
    --gold-400: #d9b47f;
    --gold-300: #e7cfa8;
    --gold-100: #f4e8d6;

    --cream-50: #f8f2e8;
    --cream-100: #f2e8da;
    --cream-200: #e5d6c3;

    --ink-900: #1b2430;
    --ink-600: #565044;
    --ink-400: #8a8172;

    --surface-card: #fefaf4;
    --surface-subtle: #f4ebde;
    --surface-input: #fffdf8;
    --border-soft: #e5d6c3;
    --page-bg: #f8f2e8;
    --page-glow: rgba(200, 154, 91, .10);
    --heading-color: #071a2c;
    --hero-deep: #fbf6ed;
    --stars-empty: #e5d6c3;

    --serif: "Playfair Display", "Georgia", serif;
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

    --shadow-card: 0 1px 2px rgba(23, 16, 6, .05);
    --shadow-card-hover: 0 18px 40px rgba(23, 16, 6, .14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink-900);
    background:
        radial-gradient(1100px 460px at 82% -120px, var(--page-glow), transparent 62%),
        var(--page-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Full-bleed like the header (calc(100% - 50px), 32px on small screens),
   so the hero and every section line up with the logo above. */
.container { width: calc(100% - 50px); margin-inline: auto; }

h1, h2, h3, .serif {
    font-family: var(--serif);
    color: var(--heading-color);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 600;
}

a { color: var(--gold-600); text-decoration: none; }
a:hover { color: var(--gold-500); }

.eyebrow {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin: 0 0 10px;
}

.eyebrow-rule { display: flex; align-items: center; gap: 14px; }
.eyebrow-rule::after { content: ""; width: 54px; height: 1px; background: var(--gold-500); opacity: .6; }

.rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168, 122, 67, .45), transparent); align-self: center; }

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

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500) 55%, var(--gold-600));
    color: #1d1408;
    border-color: var(--gold-500);
    box-shadow: 0 6px 16px rgba(168, 122, 67, .22);
}
.btn-gold:hover { color: #140e05; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 122, 67, .32); }

.btn-outline { background: transparent; color: var(--heading-color); border-color: rgba(7, 26, 44, .28); }
.btn-outline:hover { color: var(--gold-600); border-color: var(--gold-500); background: rgba(200, 154, 91, .06); }

.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---------- Header ----------
   Rebuilt to match the client reference: warm white bar, line-art PP mark,
   wordmark, quiet sans navigation, bordered language box, heart and bag. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fefdfb;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 6px 24px rgba(23, 16, 6, .04);
    color: var(--ink-900);
}

.header-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding-block: 14px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.monogram { display: block; width: 46px; height: 46px; object-fit: contain; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }

.brand-name {
    font-family: var(--serif);
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-600);
    white-space: nowrap;
}

.brand-sub {
    margin-top: 6px;
    padding-left: 2px;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: var(--ink-400);
    white-space: nowrap;
}

.site-nav { display: flex; justify-content: flex-start; gap: clamp(14px, 2vw, 30px); margin-left: 0; }

.site-nav a {
    font-family: var(--sans);
    font-size: .94rem;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    color: #2c2a26;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--gold-600); border-color: var(--gold-500); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.header-icon-plain {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: #2c2a26;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s;
}
.header-icon-plain:hover { color: var(--gold-600); background: transparent; border-color: transparent; transform: none; }
.header-icon-plain svg { width: 22px; height: 22px; }

.header-cart-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gold-500);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
}
.header-icon-plain { position: relative; }

.preorder-date {
    margin: 2px 0 0;
    padding: 0 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 700 .58rem/1.5 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ref-gold);
}
.book-card--mini .preorder-date,
.book-card--hero .preorder-date { margin: 2px 0 0; font-size: .5rem; letter-spacing: .1em; padding: 0 6px; }
.book-card--mini .preorder-date { white-space: normal; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.product-preorder-date { margin: 10px 0 6px; text-align: left; padding: 0; }
html[data-theme="dark"] .preorder-date { color: var(--gold-300); }

.language-form { display: inline-flex; max-width: 100%; }

.language-box { position: relative; display: inline-flex; }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 9px 0 12px;
    border: 1px solid #d9d3c9;
    border-radius: 4px;
    background: #fff;
    font: 400 .72rem/1 var(--sans);
    letter-spacing: .12em;
    color: #3d3a35;
    text-transform: uppercase;
    cursor: pointer;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] { border-color: var(--ref-gold-line); color: var(--ref-gold); }
.lang-toggle svg { width: 10px; height: 10px; color: #8d877d; transition: transform .16s ease; }
.lang-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 158px;
    padding: 6px;
    background: #fffefb;
    border: 1px solid var(--ref-hair);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(31, 26, 20, .14);
}
.lang-menu[hidden] { display: none; }
.lang-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    font: 400 .72rem/1 var(--sans);
    letter-spacing: .12em;
    color: #3d3a35;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.lang-option:hover { background: #f7f1e7; color: var(--ref-gold); }
.lang-option .lang-name {
    font-size: .6rem;
    letter-spacing: .02em;
    text-transform: none;
    color: #a49c90;
}
.lang-option[aria-selected="true"] { color: var(--ref-gold); font-weight: 600; }
.lang-option[aria-selected="true"] .lang-name { color: var(--ref-gold); opacity: .75; }
html[data-theme="dark"] .lang-toggle {
    background: var(--surface-card);
    border-color: var(--border-soft);
    color: var(--ink-600);
}

/* Кнопка темы в шапке: рядом с выбором языка, в стиле языковой */
.theme-toggle--header {
    display: inline-grid;
    place-items: center;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #d9d3c9;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.theme-toggle--header svg { width: 15px; height: 15px; color: #3d3a35; }
.theme-toggle--header:hover { border-color: var(--ref-gold-line); }
.theme-toggle--header:hover svg { color: var(--ref-gold); }
html[data-theme="dark"] .theme-toggle--header {
    background: var(--surface-card);
    border-color: var(--border-soft);
}
html[data-theme="dark"] .theme-toggle--header svg { color: var(--ink-600); }
html[data-theme="dark"] .theme-toggle--header:hover svg { color: var(--gold-300); }
html[data-theme="dark"] .lang-menu {
    background: var(--surface-card);
    border-color: var(--border-soft);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .lang-option { color: var(--ink-600); }
html[data-theme="dark"] .lang-option:hover { background: var(--cream-200); color: var(--gold-300); }
html[data-theme="dark"] .lang-option .lang-name { color: var(--ink-400); }
html[data-theme="dark"] .lang-option[aria-selected="true"] { color: var(--gold-300); }
html[data-theme="dark"] .lang-option[aria-selected="true"] .lang-name { color: var(--gold-300); }

.mobile-nav { display: none; position: relative; }
.mobile-nav summary { list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 14px);
    right: 0;
    min-width: 220px;
    display: grid;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow: 0 18px 40px rgba(23, 16, 6, .14);
}
.mobile-nav-panel a {
    padding: 11px 12px;
    font-size: .86rem;
    color: var(--ink-900);
}
.mobile-nav-panel a:hover { color: var(--gold-600); background: var(--cream-100); }

/* ---------- Breadcrumbs (moved out of the header) ---------- */

.page-crumbs { padding-top: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }
.breadcrumb a { color: var(--ink-400); }
.breadcrumb a:hover { color: var(--gold-600); }
.breadcrumb .crumb-sep { color: var(--cream-200); }
.breadcrumb span:last-child { color: var(--gold-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 68px);
    background:
        radial-gradient(900px 380px at 8% -40px, rgba(200, 154, 91, .16), transparent 65%),
        linear-gradient(180deg, var(--cream-50), var(--hero-deep) 70%, var(--cream-50));
    border-bottom: 1px solid var(--border-soft);
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(34px, 4.5vw, 60px);
    align-items: center;
    max-width: none;
    position: static;
    z-index: auto;
}

.hero-copy h1 {
    font-size: clamp(2.05rem, 3.1vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    color: var(--heading-color);
}
.hero-copy .eyebrow { color: var(--gold-600); }

/* The legacy stylesheet still sets `.hero p` to cream text for the old dark hero.
   Inside the new cream hero every paragraph has to fall back to the ink palette. */
.hero p { font-weight: 400; font-size: .96rem; color: var(--ink-600); }
.hero .book-author,
.hero .book-desc { color: var(--ink-600); font-weight: 400; }

.hero-copy .hero-lead {
    color: var(--ink-600);
    font-size: .96rem;
    line-height: 1.7;
    max-width: 44ch;
    margin: 0 0 24px;
}

.hero-features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.hero-features li { display: grid; gap: 9px; }
.hero-features svg { width: 34px; height: 34px; color: var(--gold-500); }
.hero-features span {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--heading-color);
    line-height: 1.35;
    max-width: 15ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { min-height: 48px; }

.hero-subscribe {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    padding: 9px 9px 9px 16px;
    background: var(--surface-input);
    border: 1px solid var(--border-soft);
    box-shadow: 0 10px 30px rgba(23, 16, 6, .05);
}
.hero-subscribe > svg { width: 21px; height: 21px; color: var(--gold-600); flex: none; }
.hero-subscribe input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: .8rem var(--sans);
    color: var(--ink-900);
    padding: 8px 0;
}
.hero-subscribe input:focus { outline: none; }
.hero-subscribe input::placeholder { color: var(--ink-400); }
.hero-subscribe .btn { padding: 12px 20px; font-size: .6rem; flex: none; }

.hero-shelf {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* ---------- Wishlist heart ---------- */

.book-card { position: relative; }

.favorite-form { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.favorite-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: #6d6558;
    cursor: pointer;
    transition: color .18s, background .18s, transform .18s;
}
.favorite-button svg { width: 19px; height: 19px; }
.favorite-button:hover { color: var(--gold-600); background: #fff; transform: scale(1.06); }
.favorite-button.is-active { color: var(--gold-600); }
.favorite-button.is-active svg { fill: currentColor; }

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

/* ---------- Blog ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 26px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
}
.blog-card h2 { margin: 0; font-size: 1.2rem; }
.blog-card p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--ink-600); }
.blog-stars { color: var(--gold-500); font-size: .72rem; letter-spacing: 2px; }

/* ---------- Footer tools ---------- */

.footer-tools { display: flex; align-items: center; gap: 16px; }
.footer-tools a:not(.footer-social),
.footer-tool { white-space: nowrap; }
.footer-tools a,
.footer-tool {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: rgba(244, 238, 228, .55);
}
.footer-tools a:hover,
.footer-tool:hover { color: var(--gold-300); }
.footer-tool { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.footer-tool svg { width: 17px; height: 17px; }
.footer-social { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.footer-social svg { width: 19px; height: 19px; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

/* ---------- Book cards ---------- */

.book-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(200, 154, 91, .55); }

.book-cover-wrap {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--cream-100);
}
.book-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cover-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold-600);
    opacity: .75;
    font-size: 1rem;
}

.badge-bestseller {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 9px;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color: #1d1408;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.book-body { display: flex; flex-direction: column; flex: 1; padding: 12px 16px 16px; }

/* Fixed two-line title slot: the author, release date and price start
   at the same level on every card, the title fits as it fits. */
.book-title {
    font-size: 1.02rem;
    line-height: 1.22;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.22em);
}
.book-title a { color: var(--heading-color); }
.book-title a:hover { color: var(--gold-600); }

.book-author { margin: 0 0 4px; font-size: .74rem; color: var(--ink-600); }

.book-rating { display: flex; align-items: center; gap: 5px; min-height: 17px; margin: 0 0 8px; font-size: .68rem; color: var(--ink-400); }
.stars { letter-spacing: 1.5px; font-size: .72rem; color: var(--stars-empty); }
.stars .is-filled { color: var(--gold-500); }
.rating-value { color: var(--ink-600); font-weight: 600; }
.rating-empty { font-size: .66rem; color: var(--ink-400); }

.book-desc {
    font-size: .82rem;
    color: var(--ink-600);
    margin: 0 0 12px;
    line-height: 1.5;
    min-height: calc(3 * 1.5em);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.book-meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.price {
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 600;
    color: var(--heading-color);
    white-space: nowrap;
}

.book-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.book-actions form { margin: 0; }
.book-actions .btn { width: 100%; padding: 10px 8px; font-size: .58rem; letter-spacing: .1em; }

.btn-add { background: transparent; border-color: rgba(7, 26, 44, .22); color: var(--heading-color); }
.btn-add:hover { border-color: var(--gold-500); color: var(--gold-600); background: rgba(200, 154, 91, .06); }

.btn-buy { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream-50); }
.btn-buy:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* Compact variant used in hero and side shelves */

.book-card--compact .book-cover-wrap { aspect-ratio: 2 / 3; }
.book-card--compact .book-body { padding: 9px 11px 12px; }
.book-card--compact .book-title { font-size: .8rem; line-height: 1.2; min-height: calc(2 * 1.2em); }
.book-card--compact .book-author { font-size: .64rem; }
.book-card--compact .book-rating { font-size: .56rem; margin-bottom: 5px; min-height: 14px; }
.book-card--compact .stars { font-size: .6rem; }
.book-card--compact .price { font-size: .84rem; }
.book-card--compact .book-actions { grid-template-columns: 1fr; margin-top: 7px; }
.book-card--compact .book-actions .btn { padding: 8px 6px; font-size: .52rem; letter-spacing: .08em; }

/* ---------- Discovery grid ---------- */

.discovery { background: var(--cream-50); border-bottom: 1px solid var(--border-soft); }

.discovery-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
}

.discovery-col-main { border-right: 1px solid var(--border-soft); }

.panel { padding: 28px 32px 32px; border-bottom: 1px solid var(--border-soft); }
.panel:last-child { border-bottom: 0; }

.panel-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.panel-head h2 { font-size: clamp(1.3rem, 1.7vw, 1.66rem); margin: 0; white-space: nowrap; }
.panel-head .rule { margin-top: 2px; }
.panel-link {
    margin-left: auto;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    white-space: nowrap;
}
.panel-link:hover { color: var(--gold-500); }

.why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    text-align: center;
}
.why-grid li { display: grid; justify-items: center; gap: 10px; }
.why-grid svg { width: 44px; height: 44px; color: var(--gold-500); }
.why-grid span {
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--heading-color);
    line-height: 1.4;
}

.release-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.ecosystem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.ecosystem-card {
    display: grid;
    gap: 4px;
    padding: 16px 16px 18px;
    background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
    border: 1px solid rgba(200, 154, 91, .25);
    color: var(--cream-100);
    transition: border-color .2s, transform .2s;
}
.ecosystem-card:hover { border-color: var(--gold-500); transform: translateY(-2px); color: var(--cream-50); }
.ecosystem-mark { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--gold-400); }
.ecosystem-name { font-family: var(--serif); font-size: .98rem; color: var(--cream-50); }
.ecosystem-note { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 233, 220, .55); }

.journal-list { display: grid; gap: 16px; }
.journal-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: start; }
.journal-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cream-100);
    border: 1px solid var(--border-soft);
}
.journal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.journal-title { display: block; font-family: var(--serif); font-size: .96rem; line-height: 1.25; color: var(--heading-color); }
.journal-excerpt { display: block; margin-top: 4px; font-size: .74rem; line-height: 1.45; color: var(--ink-400); }
.journal-stars { display: block; margin-top: 5px; color: var(--gold-500); font-size: .66rem; letter-spacing: 1.5px; }
.journal-item:hover .journal-title { color: var(--gold-600); }

/* ---------- Testimonials ---------- */

.testimonials { padding: clamp(42px, 5vw, 60px) 0; background: var(--cream-50); border-bottom: 1px solid var(--border-soft); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.section-head h1, .section-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; white-space: nowrap; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.testimonial {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 26px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}
.testimonial-stars { color: var(--stars-empty); letter-spacing: 2px; font-size: .95rem; }
.testimonial-stars .is-filled { color: var(--gold-500); }
.testimonial blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--heading-color); }
.testimonial footer { margin-top: auto; display: grid; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.testimonial-author { color: var(--gold-600); font-weight: 600; }

/* ---------- Values strip ---------- */

.values-strip {
    padding: 26px 0 20px;
    background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
    border-top: 1px solid rgba(200, 154, 91, .3);
    color: var(--cream-100);
}

.values-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    text-align: center;
}
.values-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(243, 233, 220, .82);
    text-align: left;
}
.values-grid svg { width: 34px; height: 34px; color: var(--gold-400); flex: none; }

.values-motto {
    margin: 20px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(200, 154, 91, .22);
    text-align: center;
    font-size: .6rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold-300);
}

/* ---------- Inner pages ---------- */

.page-hero {
    padding: clamp(38px, 4.5vw, 56px) 0 clamp(30px, 3.5vw, 42px);
    background:
        radial-gradient(760px 300px at 12% -30px, rgba(200, 154, 91, .16), transparent 65%),
        var(--cream-50);
    border-bottom: 1px solid var(--border-soft);
}
.page-hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.05rem); margin: 6px 0 12px; }
.page-lead { max-width: 62ch; margin: 0; color: var(--ink-600); font-size: 1rem; }

.section { padding: clamp(38px, 5vw, 64px) 0; }
.page-body-inner { max-width: 760px; }
.page-body-inner p { margin: 0 0 18px; font-size: 1rem; line-height: 1.75; color: var(--ink-600); }
.page-body-inner .btn { margin-top: 10px; }

.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.author-card {
    display: grid;
    gap: 6px;
    padding: 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    color: var(--heading-color);
    transition: border-color .2s, transform .2s;
}
.author-card:hover { border-color: var(--gold-500); transform: translateY(-2px); color: var(--heading-color); }
.author-monogram {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
    color: #1d1408;
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
}
.author-name { margin-top: 8px; font-family: var(--serif); font-size: 1.12rem; }
.author-link { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); }

.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.genre-card {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 26px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    color: var(--heading-color);
    transition: border-color .2s, transform .2s;
}
.genre-card:hover { border-color: var(--gold-500); transform: translateY(-2px); color: var(--heading-color); }
.genre-name { font-family: var(--serif); font-size: 1.25rem; }
.genre-total { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.genre-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--gold-600); }

/* ---------- Catalogue ---------- */

.catalog-page { padding-top: 30px; }

.catalog-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(130px, .7fr)) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
}

.catalog-search { display: flex; align-items: center; border: 1px solid var(--border-soft); background: var(--surface-input); }
.catalog-search svg { width: 18px; height: 18px; margin-left: 14px; color: var(--ink-400); flex: none; }
.catalog-search input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 13px 14px;
    font: .86rem var(--sans);
    color: var(--ink-900);
}
.catalog-search input:focus { outline: none; }

.catalog-filters select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-card);
    font: .82rem var(--sans);
    color: var(--ink-900);
    cursor: pointer;
}
.catalog-filters select:focus { outline: none; border-color: var(--gold-500); }
.catalog-filters .btn { padding: 12px 24px; min-height: 45px; }

.catalog-count { margin: 0 0 16px; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }

.catalog-book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--ink-600); font-size: .76rem; letter-spacing: .1em; }
.pagination a { font-weight: 600; }

.empty-state { padding: 36px 0; color: var(--ink-600); }

/* ---------- Product page ---------- */

.product-section { padding: clamp(32px, 4vw, 50px) 0 10px; }

.product-layout {
    display: grid;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
}

.product-visual { position: sticky; top: 140px; }

.product-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    padding: 28px;
    background: linear-gradient(160deg, #f2e7d7, #e6d6c1);
    border: 1px solid var(--border-soft);
    box-shadow: 0 20px 46px rgba(23, 16, 6, .14);
}
.product-cover img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(23, 16, 6, .34)); }

.product-trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; text-align: center; font-size: .68rem; color: var(--ink-400); }

.product-info .eyebrow { margin-bottom: 6px; }
.product-info h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; margin: 0 0 8px; }

.product-author { display: inline-block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); }
.product-author:hover { color: var(--gold-500); }

.product-rating { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .76rem; color: var(--ink-400); }
.product-rating .stars { font-size: .85rem; }

.badge-static { position: static; display: inline-flex; margin-bottom: 12px; }

.product-pitch { margin: 16px 0 22px; font-size: 1.02rem; line-height: 1.65; color: var(--ink-600); max-width: 60ch; }

.product-genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.product-genre-chip {
    padding: 5px 12px;
    border: 1px solid var(--ref-gold-line);
    border-radius: 999px;
    font: 400 .62rem/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-600);
    white-space: nowrap;
}
.product-genre-chip:hover { background: var(--ref-gold); border-color: var(--ref-gold); color: #fff; }
html[data-theme="dark"] .product-genre-chip { color: var(--ink-400); }
html[data-theme="dark"] .product-genre-chip:hover { color: #fff; }

.product-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: 22px; }
.product-buy .price { font-size: 1.9rem; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.product-actions form { margin: 0; }
.product-actions .btn { min-width: 148px; }
.product-note { flex-basis: 100%; margin: 0; font-size: .76rem; color: var(--ink-400); }

.product-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; border-top: 1px solid var(--border-soft); }
.product-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: .8rem; }
.product-specs dt { color: var(--ink-400); }
.product-specs dd { margin: 0; color: var(--heading-color); text-align: right; }

.product-description { border-top: 1px solid var(--border-soft); background: var(--cream-100); }
.product-description-inner { max-width: 860px; }
.product-desc {
    color: var(--ink-600);
    font-size: 1rem;
    line-height: 1.78;
    white-space: normal;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.product-desc p { margin: 0 0 14px; }

.author-strip { padding: 30px 0; background: var(--cream-100); border-block: 1px solid var(--border-soft); }
.author-strip-inner { display: flex; align-items: center; gap: 20px; }
.author-strip h2 { margin: 2px 0; font-size: 1.45rem; }
.author-strip p { margin: 0; font-size: .82rem; color: var(--ink-400); }
.author-strip .btn { margin-left: auto; }

.related-section { border-top: 1px solid var(--border-soft); }
.related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.review-section { background: var(--cream-100); border-top: 1px solid var(--border-soft); }
.review { background: var(--surface-card); border-color: var(--border-soft); }

/* ---------- Home banner (compact override) ---------- */

.home-advertisement-section { padding: 18px 0; }
.home-advertisement {
    min-height: 0;
    grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
}

/* ---------- Footer ---------- */

.site-footer {
    margin-top: auto;
    background: #f6f1e7;
    border-top: 1px solid var(--ref-hair);
    color: var(--ref-ink);
}

.footer-grid { display: grid; grid-template-columns: 1.5fr .8fr .9fr .9fr 1.2fr; gap: 34px; padding: 40px 0 34px; }
.footer-brand { display: block; }
.footer-brand .brand { gap: 12px; }
.footer-brand .monogram { width: 42px; height: 42px; }
.footer-brand .brand-name { font-size: 1.15rem; }
.footer-brand .brand-sub { font-size: .48rem; letter-spacing: .36em; }
.footer-about { margin: 14px 0 0; font-size: .8rem; line-height: 1.6; color: #8f8272; max-width: 34ch; }

.footer-col h2 { margin: 0 0 14px; font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8f8272; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: #6d675e; font-size: .84rem; }
.footer-col a:hover { color: var(--ref-gold); }

.pay-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pay-badge { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pay-stripe { color: #635bff; }
.pay-paypal { color: #003087; font-style: italic; }
.pay-paypal i { color: #009cde; font-style: italic; }
.pay-note { margin: 10px 0 0; font-size: .62rem; color: #a49a8c; }

.footer-subscribe p { margin: 0 0 12px; font-size: .76rem; line-height: 1.5; color: #8f8272; }
.footer-subscribe form { display: flex; border: 1px solid #ddd5c8; background: #fff; }
.footer-subscribe input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 11px 13px;
    font: .8rem var(--sans);
    color: var(--ref-ink);
}
.footer-subscribe input:focus { outline: none; }
.footer-subscribe input::placeholder { color: #b3a995; }
.footer-subscribe .btn { padding: 10px 16px; font-size: .56rem; flex: none; }

.footer-dark { background: #17130d; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 24px 16px;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(244, 238, 228, .48);
    width: 100%;
    max-width: none;
}
.footer-bottom p { margin: 0; }
.footer-motto { color: var(--gold-400); }

/* ---------- Existing components brought into the palette ---------- */

input[type="checkbox"],
input[type="radio"] { accent-color: var(--gold-600); }

.flash-stack { padding-top: 18px; }
.flash-message { background: var(--surface-card); border: 1px solid var(--border-soft); padding: 12px 16px; color: var(--ink-900); font-size: .88rem; margin-bottom: 10px; }
.flash-message.success { border-left: 3px solid #4c7a4c; }
.flash-message.error { border-left: 3px solid #a03b2e; }

.form-card { background: var(--surface-card); border: 1px solid var(--border-soft); padding: clamp(22px, 3vw, 34px); }
.field label { display: block; margin-bottom: 7px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.field input[type="email"], .field input[type="text"], .field input[type="password"], .field input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-input);
    color: var(--ink-900);
    font: .92rem var(--sans);
}
.field input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(200, 154, 91, .16); }

.review-section .section-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.review { padding: 18px; border: 1px solid var(--border-soft); border-left: 3px solid var(--gold-500); }
.review p { color: var(--ink-600); }

.account-dialog { border: 1px solid rgba(200, 154, 91, .45); background: var(--surface-card); }
.dialog-close:hover { color: var(--heading-color); }

/* ---------- Dark theme ---------- */

html[data-theme="dark"] {
    color-scheme: dark;
    --cream-50: #0a1420;
    --cream-100: #0e1a29;
    --cream-200: #1c2c3f;
    --surface-card: #101d2d;
    --surface-subtle: #0d1826;
    --surface-input: #0c1725;
    --border-soft: #22344a;
    --page-bg: #070f19;
    --page-glow: rgba(200, 154, 91, .09);
    --heading-color: #f2e8da;
    --ink-900: #e9e1d5;
    --ink-600: #b8afa1;
    --ink-400: #8c8478;
    --hero-deep: #0b1523;
    --stars-empty: #34455a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .btn-buy {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: #1d1408;
}
html[data-theme="dark"] .btn-buy:hover { background: var(--gold-400); border-color: var(--gold-400); color: #1d1408; }
html[data-theme="dark"] .btn-add { color: var(--heading-color); border-color: rgba(231, 207, 168, .38); }
html[data-theme="dark"] .btn-add:hover { color: var(--gold-300); background: rgba(200, 154, 91, .12); }
html[data-theme="dark"] .review-stars { color: var(--stars-empty); }
html[data-theme="dark"] .cover-placeholder { color: var(--gold-400); }
/* Кикер героя задан цветом --ref-ink (тёмный), а в тёмной теме герой тёмный:
   на нём текст должен быть белым. */
html[data-theme="dark"] .hero-kicker { color: #fff; }

html[data-theme="dark"] body {
    background: radial-gradient(1100px 460px at 82% -120px, var(--page-glow), transparent 62%), var(--page-bg);
}

html[data-theme="dark"] .btn-outline { color: var(--heading-color); border-color: rgba(200, 154, 91, .4); }
html[data-theme="dark"] .btn-outline:hover { color: var(--gold-300); background: rgba(200, 154, 91, .1); }
html[data-theme="dark"] .product-cover { background: linear-gradient(160deg, #12222f, #0b1723); }
html[data-theme="dark"] .journal-thumb { background: var(--surface-input); }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .container { width: calc(100% - 32px); }
    .header-main { grid-template-columns: auto auto; grid-template-areas: "brand actions" "nav nav"; row-gap: 10px; }
    .brand { grid-area: brand; }
    .header-actions { grid-area: actions; justify-self: end; }
    .site-nav { grid-area: nav; justify-content: flex-start; gap: 22px; overflow-x: auto; padding-bottom: 4px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-copy { max-width: 720px; }
    .hero-shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .catalog-book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-subscribe { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 980px) {
    .discovery-inner { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
    .discovery-col-main { border-right: 0; }
    .panel { padding: 24px 22px 28px; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .why-grid, .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-layout { grid-template-columns: 1fr; }
    .product-visual { position: static; max-width: 380px; }
    .catalog-filters { grid-template-columns: 1fr 1fr; }
    .catalog-filters .catalog-search { grid-column: 1 / -1; }
    .author-strip-inner { flex-wrap: wrap; }
    .author-strip .btn { margin-left: 0; }
}

@media (max-width: 760px) {
    .container { width: calc(100% - 32px); }
    .site-nav { display: none; }
    .mobile-nav { display: block; }
    .header-main { grid-template-columns: auto minmax(0, 1fr); padding-block: 12px; gap: 12px; }
    .brand { gap: 8px; }
    .monogram { width: 32px; height: 32px; }
    .brand-name { font-size: .88rem; letter-spacing: .06em; white-space: nowrap; }
    .header-main .brand-sub { display: none; }
    .header-main .header-actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; min-width: 0; width: 100%; }
    .header-main .header-icon-plain { width: 28px; height: 28px; }
    .language-form { order: 3; min-width: 0; flex: 0 1 auto; }
    .language-box { max-width: 100%; min-width: 0; }
    .hero { padding: 32px 0 36px; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
    .hero-features { grid-template-columns: 1fr; }
    .hero-features li { grid-template-columns: 34px 1fr; align-items: center; }
    .hero-subscribe { flex-wrap: wrap; }
    .hero-subscribe input { flex-basis: 60%; }
    .hero-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-shelf .book-card:last-child { display: none; }
    .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-grid { grid-template-columns: 1fr; }
    .book-actions { grid-template-columns: 1fr; }
    .catalog-filters { grid-template-columns: 1fr; }
    .product-specs { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-subscribe { max-width: none; }
    .panel-head { flex-wrap: wrap; }
    .panel-head .rule { display: none; }
    .page-crumbs { padding-top: 12px; }
}

@media (max-width: 480px) {
    .release-grid, .catalog-book-grid, .related-grid, .favorites-grid { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   REFERENCE MATCH — header + home page
   Overrides above rules so the storefront follows the approved
   mock-up: warm white bar, light serif display type, flat
   brown-gold buttons, hairline gold icons.
   ============================================================ */

:root {
    --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --sans: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    --ref-gold: #a97d4e;
    --ref-gold-line: #bf9f74;
    --ref-ink: #4b4138;
    --ref-gray: #77716a;
    --ref-hair: #ece4d8;
    --ref-red: #d6332b;
}

body { font-family: var(--sans); background: #fcfaf6; }
html[data-theme="dark"] body { background: var(--page-bg); }

/* ---------- Header ---------- */
.site-header { background: #fffefb; border-bottom: 1px solid var(--ref-hair); box-shadow: none; }
.header-main { width: calc(100% - 50px); max-width: none; padding-block: 3px; gap: 24px; min-height: 50px; }
.brand { gap: 6px; }
.brand-text { align-items: stretch; line-height: 1; }
.brand-name {
    font-family: var(--serif);
    font-size: 1.42rem;
    font-weight: 500;
    letter-spacing: .09em;
    color: var(--ref-gold);
}
.brand-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    padding-left: 0;
    font-size: .5rem;
    font-weight: 400;
    letter-spacing: .32em;
    color: #b5a58d;
}
.brand-sub::before, .brand-sub::after { content: ""; flex: 1; height: 1px; background: #d9c8ae; }

.site-nav { justify-content: center; gap: clamp(18px, 2.7vw, 38px); }
.site-nav a { font-size: .875rem; font-weight: 300; letter-spacing: 0; color: var(--ref-gray); }
.site-nav a:hover { color: var(--ref-gold); border-color: var(--ref-gold); }

.header-actions { gap: 19px; }
.header-icon-plain { width: 30px; height: 30px; color: #34312d; }
.header-icon-plain svg { width: 25px; height: 25px; }

/* ---------- Hero ---------- */
.hero {
    padding: 13px 0 17px;
    background:
        radial-gradient(760px 420px at 76% 18%, rgba(200, 154, 91, .20), transparent 64%),
        radial-gradient(420px 260px at 96% 80%, rgba(200, 154, 91, .12), transparent 70%),
        #fbf8f3;
    border-bottom: 1px solid var(--ref-hair);
}
.hero-inner { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hero-copy { padding-top: 14px; }
.hero-copy h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 3.45vw, 2.85rem);
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--ref-ink);
    margin: 0 0 22px;
}
.hero-actions { gap: 16px; margin-bottom: 29px; }
.hero-actions .btn {
    min-height: 33px;
    padding: 0 18px;
    font: 400 .875rem/1 var(--sans);
    letter-spacing: 0;
    text-transform: none;
    border-radius: 3px;
    box-shadow: none;
}
.hero-actions .btn-gold { background: var(--ref-gold); border-color: var(--ref-gold); color: #fff; }
.hero-actions .btn-gold:hover { background: #98703f; color: #fff; transform: none; box-shadow: none; }
.hero-actions .btn-outline { background: #fff; color: #34312d; border-color: #c9c3b9; }
.hero-actions .btn-outline:hover { border-color: var(--ref-gold); color: var(--ref-gold); background: #fff; }

.hero-subscribe {
    margin-top: 0;
    max-width: 378px;
    gap: 10px;
    padding: 9px 11px 9px 14px;
    border: 1px solid var(--ref-hair);
    border-radius: 4px;
    background: #fffdf9;
    box-shadow: none;
}
.hero-subscribe-icon { width: 22px; height: 22px; color: #8d8274; flex: none; }
.hero-subscribe-text { width: 118px; flex: none; font-size: .64rem; font-weight: 400; line-height: 1.3; color: var(--ref-gray); }
.hero-subscribe input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 27px;
    padding: 0 9px;
    border: 1px solid #ddd5c8;
    border-radius: 2px;
    background: #fff;
    font: 300 .64rem var(--sans);
}
.hero-subscribe input[type="email"]:focus { border-color: var(--ref-gold); outline: none; }
.hero-subscribe-btn {
    width: 38px;
    height: 27px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--ref-gold);
    color: #fff;
    cursor: pointer;
}
.hero-subscribe-btn svg { width: 16px; height: 16px; }
.hero-subscribe-btn:hover { background: #98703f; }

.hero-shelf { gap: 8px; align-items: stretch; }

/* shared compact card look */
.book-card--compact {
    align-items: stretch;
    text-align: center;
    background: linear-gradient(180deg, #fffefb, #fdf9f2);
    border: 1px solid var(--ref-hair);
    border-radius: 3px;
    box-shadow: none;
}
.book-card--compact:hover { transform: none; box-shadow: 0 8px 22px rgba(23, 16, 6, .08); border-color: #ddcfba; }
.book-card--compact .book-rating { display: none; }
.book-card--compact .book-cover-wrap { background: var(--cream-100); }
.book-card--compact .book-title { font-family: var(--serif); font-weight: 500; color: var(--ref-ink); }
.book-card--compact .book-author { color: #9a9185; font-style: normal; }
.book-card--compact .book-meta { justify-content: center; }
.book-card--compact .price { font-family: var(--sans); font-weight: 400; color: #4a4540; }
.book-card--compact .book-actions { display: flex; justify-content: center; }
.book-card--compact .book-actions form { width: 100%; display: flex; justify-content: center; }
.book-card--compact .btn-buy {
    width: 68%;
    background: var(--ref-gold);
    border-color: var(--ref-gold);
    color: #fff;
    font: 400 .8rem/1 var(--sans);
    letter-spacing: 0;
    text-transform: none;
    border-radius: 3px;
}
.book-card--compact .btn-buy:hover { background: #98703f; border-color: #98703f; color: #fff; }
.book-card--compact .favorite-form { top: 6px; right: 6px; }
.book-card--compact .favorite-button { width: 26px; height: 26px; background: rgba(255,255,255,.7); }
.book-card--compact .favorite-button svg { width: 16px; height: 16px; }

/* hero variant: large covers, red label on the cover */
.book-card--hero { min-height: 235px; }
.book-card--hero .book-cover-wrap { aspect-ratio: 9 / 16; }
.book-card--hero .book-body { padding: 6px 8px 11px; }
.book-card--hero .book-title { font-size: .86rem; line-height: 1.2; margin: 0; }
.book-card--hero .book-title a { color: var(--ref-ink); font-family: var(--sans); font-weight: 400; font-size: .8rem; }
.book-card--hero .book-author { font-size: .52rem; margin: 2px 0 6px; color: #aaa093; }
.book-card--hero .price { font-size: .8rem; }
.book-card--hero .book-actions { margin-top: 7px; }
.book-card--hero .btn-buy { padding: 0; height: 23px; }

.badge-red {
    position: absolute;
    left: 12px;
    bottom: 4px;
    z-index: 2;
    padding: 5px 16px;
    background: var(--ref-red);
    color: #fff;
    font: 700 .78rem/1 var(--sans);
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(120, 20, 15, .3);
}

/* mini variant: new releases */
.book-card--mini { background: #fffaf3; }
.book-card--mini .book-cover-wrap { aspect-ratio: 9 / 16; }
.book-card--mini .book-body { padding: 4px 6px 8px; }
.book-card--mini .book-title { font-size: .64rem; margin: 0; }
.book-card--mini .book-title a { font-family: var(--sans); font-weight: 400; font-size: .6rem; color: #6b645b; }
.book-card--mini .book-author { font-size: .46rem; margin: 1px 0 2px; }
.book-card--mini .price { font-size: .6rem; }
.book-card--mini .book-actions { margin-top: 3px; }
.book-card--mini .btn-buy { width: 82%; height: 17px; padding: 0; font-size: .6rem; border-radius: 2px; }

/* ---------- Discovery ---------- */
.discovery { background: #fcfaf6; border-bottom: 0; }
.discovery-inner { grid-template-columns: minmax(0, 489fr) minmax(0, 763fr); border-left: 0; border-right: 0; }
.discovery-col-main { border-right: 1px solid var(--ref-hair); }
.panel { padding: 22px 23px 22px; border-bottom: 1px solid var(--ref-hair); }
.discovery-col-side .panel { padding: 20px 24px; }

.panel-head { margin-bottom: 16px; gap: 14px; }
.panel-head h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.32rem;
    letter-spacing: 0;
    color: var(--ref-ink);
}
.panel-head .rule { display: none; }
.panel-link { font: 400 .62rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ref-gold); }

.why-grid { gap: 10px; }
.why-grid svg { width: 40px; height: 40px; color: var(--ref-gold-line); }
.why-grid span {
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .1em;
    color: #8f8272;
    line-height: 1.45;
}

.panel-releases .panel-head h2 { font-size: 1.16rem; }
.release-grid { gap: 12px; }

/* side column: videos | blog, then quotes */
.side-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); border-bottom: 1px solid var(--ref-hair); }
.side-split .panel { border-bottom: 0; }
.side-split .panel-ecosystem { border-right: 1px solid var(--ref-hair); padding-right: 18px; }
.side-split .panel-journal { padding-left: 20px; }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.video-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 11.4;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(120% 120% at 70% 30%, #3a3a3a, #161616);
    color: #f1f1f1;
    box-shadow: 0 6px 16px rgba(23, 16, 6, .18);
}
.video-card:hover { color: #fff; box-shadow: 0 10px 22px rgba(23, 16, 6, .28); }
.video-top { display: flex; align-items: center; gap: 7px; padding: 8px 9px 0; font-size: .58rem; line-height: 1.2; }
.video-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.video-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-dots { font-size: .9rem; }
.video-stage { flex: 1; }
.video-bar { padding: 0 9px 7px; }
.video-progress { display: block; height: 3px; background: rgba(255,255,255,.28); border-radius: 2px; margin-bottom: 6px; }
.video-progress i { display: block; width: 18%; height: 100%; background: #e53b2f; border-radius: 2px; }
.video-controls { display: flex; align-items: center; gap: 8px; font-size: .54rem; }
.video-controls svg { width: 13px; height: 13px; flex: none; }
.video-spacer { flex: 1; }

.journal-list { gap: 14px; }
.journal-item { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.journal-thumb { aspect-ratio: 143 / 78; border-radius: 3px; background: linear-gradient(160deg, #2a2a2a, #111); border: 0; }
.journal-thumb img { object-fit: cover; opacity: .92; }
.journal-title { font-family: var(--sans); font-size: .72rem; font-weight: 400; line-height: 1.3; color: var(--ref-ink); }
.journal-excerpt { font-size: .6rem; line-height: 1.4; color: #a39a8c; }
.journal-stars { font-size: .58rem; color: var(--ref-gold-line); }

.panel-reviews { padding: 18px 24px 22px; border-bottom: 0; }
.review-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quote-card {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 12px 14px 10px 44px;
    background: #fff;
    border: 1px solid var(--ref-hair);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(23, 16, 6, .06);
}
.quote-mark { position: absolute; left: 13px; top: 2px; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ref-gold-line); }
.quote-stars { color: #e7dccb; font-size: .78rem; letter-spacing: 2px; line-height: 1; }
.quote-stars .is-filled { color: var(--ref-gold-line); }
.quote-card p { margin: 0; font-size: .66rem; line-height: 1.45; color: var(--ref-ink); }
.quote-author { justify-self: end; font-size: .6rem; color: var(--ref-gold); }
.quote-card-empty { grid-column: 1 / -1; min-height: 68px; align-content: center; padding: 16px 20px; text-align: center; }
.quote-card-empty p { color: var(--ref-gray); font-style: italic; }

/* ---------- Values strip (light) ---------- */
.values-strip { padding: 14px 0 16px; background: #fcfaf6; border-top: 1px solid var(--ref-hair); color: var(--ref-gray); }
.values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.values-grid li { justify-content: flex-start; padding-left: 18px; font-size: .72rem; letter-spacing: .02em; text-transform: none; color: var(--ref-gray); }
.values-grid svg { width: 32px; height: 32px; color: var(--ref-gold-line); }
.values-motto {
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--ref-hair);
    text-align: center;
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ref-gold);
}
html[data-theme="dark"] .values-motto { color: var(--gold-300); border-color: rgba(200, 154, 91, .22); }

/* ---------- Dark theme keeps the same structure ---------- */
html[data-theme="dark"] .site-header { background: #0a1420; }
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .header-icon-plain,
html[data-theme="dark"] .language-box { color: #d9d1c4; }
html[data-theme="dark"] .hero { background: var(--hero-deep); }
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .panel-head h2,
html[data-theme="dark"] .journal-title,
html[data-theme="dark"] .quote-card p { color: var(--heading-color); }
html[data-theme="dark"] .hero-actions .btn-outline { background: transparent; color: var(--heading-color); border-color: rgba(200,154,91,.45); }
html[data-theme="dark"] .hero-subscribe,
html[data-theme="dark"] .book-card--compact,
html[data-theme="dark"] .quote-card { background: var(--surface-card); }
html[data-theme="dark"] .discovery,
html[data-theme="dark"] .values-strip { background: var(--page-bg); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .header-main { width: calc(100% - 32px); }
    .hero-inner { grid-template-columns: 1fr; }
    .book-card--hero { min-height: 0; }
}
@media (max-width: 980px) {
    .discovery-inner { grid-template-columns: 1fr; }
    .side-split { grid-template-columns: 1fr; }
    .side-split .panel-ecosystem { border-right: 0; border-bottom: 1px solid var(--ref-hair); padding-right: 24px; }
    .side-split .panel-journal { padding-left: 24px; }
    .review-quotes { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
    .hero .container { width: calc(100% - 32px); }
    .hero-subscribe { flex-wrap: wrap; }
    .hero-subscribe-text { width: 100%; }
    .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .video-grid { grid-template-columns: 1fr; }
    .brand-name { font-size: 1rem; letter-spacing: .06em; }
}


/* ---------- Reference match: refinements ---------- */
.hero-copy h1 { font-size: clamp(1.9rem, 2.95vw, 2.4rem); line-height: 1.08; }
.site-nav a { font-size: .84rem; color: #8a847b; }
.book-card--mini .favorite-form { display: none; }
.footer-brand .brand-sub::before,
.footer-brand .brand-sub::after { display: none; }
.footer-brand .brand-sub { display: block; }


/* ============================================================
   GENRE EDITION — per client mock-up of 2026-10
   Genre strip under the header, Trending by Genre, Why + cards,
   three-column discovery row, readers with arrows, dark authors
   banner, light footer with payments and a dark bottom bar.
   ============================================================ */

.hero-kicker {
    display: block;
    font-weight: 500;
    color: var(--ref-ink);
}

/* ---------- Genre strip ---------- */

.genre-strip { background: #f3ecdf; border-bottom: 1px solid var(--ref-hair); }
.genre-strip--catalog {
    background: none;
    border-bottom: none;
    margin: 0 0 14px;
    border: 1px solid var(--ref-hair);
    border-radius: 8px;
}
.genre-strip--catalog .genre-strip-inner { padding: 6px; }
.genre-strip--catalog .genre-tab { border-radius: 6px; }
.genre-strip--catalog .genre-tab.is-active { border-radius: 6px; }
.genre-count {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(31, 26, 20, .06);
    font: 500 .62rem/1 var(--sans);
    color: #8d877d;
}
.genre-tab.is-active .genre-count { background: rgba(255,255,255,.25); color: #fff; }
.genre-strip-inner { display: flex; align-items: stretch; gap: clamp(4px, 1vw, 14px); overflow-x: auto; scrollbar-width: none; }
.genre-strip-inner::-webkit-scrollbar { display: none; }
.genre-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    font: 400 .84rem/1 var(--sans);
    color: #6d675e;
    white-space: nowrap;
}
.genre-tab svg { width: 19px; height: 19px; color: var(--ref-gold-line); flex: none; }
.genre-tab-ico { font-size: 16px; line-height: 1; flex: none; width: 19px; text-align: center; }
.genre-tab.is-active .genre-tab-ico { filter: grayscale(0); }
.genre-tab:hover { color: var(--ref-gold); }
.genre-tab.is-active { background: var(--ref-gold); color: #fff; }
.genre-tab.is-active svg { color: #fff; }

/* ---------- Trending by Genre ---------- */

.trending { padding: 26px 0 26px; background: #fcfaf6; border-bottom: 1px solid var(--ref-hair); }
.trending-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.trending-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ref-ink); }
.trending-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.trending-cover {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 4px;
    background: var(--cream-100);
    border: 1px solid var(--ref-hair);
    box-shadow: 0 4px 12px rgba(23, 16, 6, .06);
    transition: transform .2s, box-shadow .2s;
}
.trending-cover:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23, 16, 6, .14); }
.trending-cover img { width: 100%; height: 100%; object-fit: cover; }
.trending-cover .cover-placeholder { font-size: .78rem; }
.badge-float {
    top: 8px;
    right: 8px;
    left: auto;
    bottom: auto;
    padding: 4px 8px;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .06em;
    z-index: 2;
}

/* ---------- Why + cards ---------- */

.why-cards { background: #fcfaf6; border-bottom: 1px solid var(--ref-hair); }
.why-cards-inner {
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
    padding: 26px 0 32px;
}
.why-side h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ref-ink); }
/* Эта панель использует чужой .why-grid (база — 4 колонки с прижатыми
   подписями, от старого блока «Почему»). Здесь свои правила: 2 колонки,
   иконка слева, подпись переносится, а не наезжает на соседний пункт. */
.why-side .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.why-side .why-grid li { min-width: 0; }
.why-side .why-grid span {
    font-size: .7rem;
    letter-spacing: .08em;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.why-grid { gap: 16px 12px; text-align: left; }
.why-grid li { display: flex; align-items: center; gap: 12px; justify-items: start; }
.why-grid svg { width: 36px; height: 36px; flex: none; }
.why-subscribe { margin-top: 22px; max-width: 430px; }
.why-cards-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

/* ---------- Three-column row: releases | videos+readers | blog ---------- */

.trio { background: #fcfaf6; border-bottom: 1px solid var(--ref-hair); }
.trio-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.15fr); }
.trio-col { min-width: 0; padding: 20px 22px 24px; border-right: 1px solid var(--ref-hair); }
.trio-col:first-child { padding-left: 0; }
.trio-col:last-child { border-right: 0; padding-right: 0; }
.trio-col .panel-head { margin-bottom: 14px; }
.trio-col .panel-head h2 { font-size: 1.16rem; }
.trio-readers-head { margin-top: 20px; }

/* Readers: quote cards with arrows between */
.review-quotes { display: flex; align-items: stretch; gap: 10px; }
.quote-arrow { align-self: center; flex: none; font-size: 1.3rem; color: var(--ref-gold-line); }
.review-quotes .quote-card { flex: 1; min-width: 0; }

/* ---------- Bestselling Authors banner ---------- */

.authors-banner {
    background:
        radial-gradient(640px 300px at 84% 20%, rgba(200, 154, 91, .18), transparent 70%),
        linear-gradient(115deg, #221a10, #372818 58%, #171208);
    color: var(--cream-100);
}
.authors-banner-inner { padding: clamp(44px, 6vw, 72px) 0; display: grid; gap: 14px; justify-items: start; }
.authors-banner h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 2.7rem); color: #fdf8ef; }
.gold-rule { width: 62px; height: 2px; background: var(--gold-500); }
.authors-banner p { margin: 0; max-width: 52ch; font-size: .9rem; line-height: 1.6; color: rgba(243, 233, 220, .72); }
.authors-banner .btn-gold { margin-top: 8px; }
.authors-banner .btn-gold:hover { color: #140e05; }

/* ---------- Dark theme for the new sections ---------- */

html[data-theme="dark"] .genre-strip { background: var(--surface-subtle); border-color: var(--border-soft); }
html[data-theme="dark"] .genre-tab { color: var(--ink-600); }
html[data-theme="dark"] .genre-tab:hover { color: var(--gold-300); }
html[data-theme="dark"] .trending,
html[data-theme="dark"] .why-cards,
html[data-theme="dark"] .trio { background: var(--page-bg); border-color: var(--border-soft); }
html[data-theme="dark"] .trending-head h2,
html[data-theme="dark"] .why-side h2,
html[data-theme="dark"] .trio-col .panel-head h2 { color: var(--heading-color); }
html[data-theme="dark"] .trio-col { border-color: var(--border-soft); }
html[data-theme="dark"] .trending-cover { background: var(--surface-input); border-color: var(--border-soft); }
html[data-theme="dark"] .quote-arrow { color: var(--gold-500); }

html[data-theme="dark"] .site-footer { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); border-top-color: rgba(200, 154, 91, .3); color: var(--cream-200); }
html[data-theme="dark"] .footer-col h2 { color: var(--gold-300); }
html[data-theme="dark"] .footer-col a { color: rgba(243, 233, 220, .76); }
html[data-theme="dark"] .footer-col a:hover { color: var(--gold-300); }
html[data-theme="dark"] .footer-about,
html[data-theme="dark"] .footer-subscribe p,
html[data-theme="dark"] .pay-note { color: rgba(243, 233, 220, .58); }
html[data-theme="dark"] .footer-subscribe form { border-color: rgba(200, 154, 91, .32); background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .footer-subscribe input { color: var(--cream-50); }
html[data-theme="dark"] .footer-subscribe input::placeholder { color: rgba(243, 233, 220, .42); }
html[data-theme="dark"] .footer-dark { background: var(--navy-950); }
html[data-theme="dark"] .footer-bottom { color: rgba(243, 233, 220, .42); }

/* ---------- Responsive for the genre edition ---------- */

@media (max-width: 1180px) {
    .trending-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .why-cards-inner { grid-template-columns: 1fr; }
    .why-cards-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .trio-inner { grid-template-columns: 1fr; }
    .trio-col { padding: 22px 0 26px; border-right: 0; border-bottom: 1px solid var(--ref-hair); }
    .trio-col:last-child { border-bottom: 0; padding-bottom: 4px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-payments, .footer-subscribe { grid-column: auto; }
    .footer-subscribe { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 760px) {
    .genre-tab { padding: 12px 13px; font-size: .78rem; }
    .genre-tab svg { width: 16px; height: 16px; }
    .trending-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .why-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-quotes { flex-direction: column; }
    .quote-arrow { transform: rotate(90deg); align-self: flex-start; padding-left: 12px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-subscribe { max-width: none; }
    .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
    .trending-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-cards-row { grid-template-columns: 1fr 1fr; }
    .why-side .why-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Smart search — faceted catalogue (см. catalog.html)
   ================================================================ */

.hero-inner { grid-template-columns: 1fr; max-width: 760px; }

/* Split layout: facet sidebar + results column */
.catalog-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.catalog-side {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 18px 18px 22px;
    border: 1px solid var(--border-soft);
    background: var(--surface-card);
    scrollbar-width: thin;
}

.facet-group {
    margin: 0 0 6px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
}
.facet-group:last-of-type { border-bottom: 0; }

.facet-group legend {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.facet-list {
    display: grid;
    gap: 7px;
}
.facet-list--scroll {
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}

.facet-check {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: .84rem;
    color: var(--ink-900);
}
.facet-check:hover span:first-of-type { color: var(--gold-600); }
.facet-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--gold-600);
    cursor: pointer;
}
.facet-count {
    font-size: .66rem;
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
}

/* Языки/метки/иллюстрации — в строку, как чипы */
.facet-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.facet-tag {
    display: inline-flex;
    align-items: center;
}
.facet-tag input { position: absolute; opacity: 0; pointer-events: none; }
.facet-tag span {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: .74rem;
    color: var(--ink-600);
    background: transparent;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.facet-tag input:checked + span {
    background: rgba(200, 154, 91, .14);
    border-color: var(--gold-500);
    color: var(--gold-600);
    font-weight: 600;
}
.facet-tag:hover span { border-color: var(--gold-500); }

.facet-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    color: var(--ink-400);
    margin-bottom: 10px;
}
.facet-pair input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    background: var(--surface-input);
    font: .84rem var(--sans);
    color: var(--ink-900);
}
.facet-pair input:focus { outline: none; border-color: var(--gold-500); }

.facet-inline--presets { gap: 6px; }
.facet-pill {
    padding: 6px 12px !important;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: transparent;
    font: .72rem var(--sans);
    color: var(--ink-600);
    cursor: pointer;
    transition: all .15s;
}
.facet-pill:hover { border-color: var(--gold-500); color: var(--gold-600); }

.facet-clear {
    display: inline-block;
    margin-top: 14px;
    font-size: .74rem;
    color: var(--ink-400);
    text-decoration: underline;
}
.facet-clear:hover { color: var(--gold-600); }

/* Quick tags над результатами */
.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 16px;
}
.quick-tag {
    padding: 8px 16px;
    border: 1px solid rgba(200, 154, 91, .4);
    border-radius: 999px;
    font-size: .76rem;
    color: var(--gold-600);
    background: rgba(200, 154, 91, .06);
    transition: all .15s;
    white-space: nowrap;
}
.quick-tag:hover { background: var(--gold-500); color: #fff; border-color: var(--gold-500); }

/* Активные фильтры (чипы) */
.active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-card);
    font-size: .74rem;
    color: var(--ink-900);
}
.chip:last-child span[aria-hidden] { color: var(--ink-400); }
.chip:hover { border-color: var(--gold-500); color: var(--gold-600); }
.chip--reset {
    background: transparent;
    border-style: dashed;
    color: var(--ink-400);
}
.chip--reset:hover { color: #a33; border-color: #a33; }

/* Тулбар результатов */
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.catalog-sort select {
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    background: var(--surface-card);
    font: .8rem var(--sans);
    color: var(--ink-900);
}
.catalog-sort select:focus { outline: none; border-color: var(--gold-500); }

.empty-state--search {
    text-align: center;
    padding: 56px 20px;
    border: 1px dashed var(--border-soft);
    background: var(--surface-card);
}
.empty-state--search .empty-note { color: var(--ink-400); font-size: .84rem; }
.empty-state--search .btn { margin-top: 8px; }

/* Мобильный тумблер фильтров */
.facet-toggle-btn { display: none; }

/* Большое поле поиска на странице каталогов */
.catalog-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin-top: 18px;
    padding: 10px 10px 10px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    box-shadow: 0 10px 30px rgba(23, 16, 6, .06);
}
.catalog-searchbox svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; }
.catalog-searchbox input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: .95rem var(--sans);
    color: var(--ink-900);
}
.catalog-searchbox input:focus { outline: none; }
.catalog-searchbox .btn { flex: none; }

/* ---------------------------------------------------------------
   Suggestions (умный поиск с превью) — под любым полем data-suggest
   --------------------------------------------------------------- */

.suggest-box {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 90;
    display: grid;
    gap: 4px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow: 0 22px 48px rgba(23, 16, 6, .16);
    max-height: 430px;
    overflow-y: auto;
}
.suggest-box[hidden] { display: none; }
.suggest-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 4px;
    color: var(--ink-900);
}
.suggest-item:hover { background: var(--cream-100); color: inherit; }
.suggest-cover {
    width: 46px;
    height: 66px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border-soft);
    background: var(--cream-100);
}
.suggest-cover--empty::after {
    content: "·";
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--cream-200);
    font-size: 1.6rem;
}
.suggest-copy { min-width: 0; display: grid; gap: 3px; }
.suggest-title { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta { font-size: .72rem; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-genres { display: flex; gap: 6px; flex-wrap: wrap; }
.suggest-genre {
    padding: 2px 8px;
    border: 1px solid var(--ref-hair);
    border-radius: 999px;
    font-size: .58rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-400);
    white-space: nowrap;
}
.suggest-price { font-weight: 600; font-size: .84rem; color: var(--gold-600); white-space: nowrap; }
.suggest-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: #b3312f;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.suggest-empty { margin: 6px; font-size: .84rem; color: var(--ink-400); }

/* Компактный поиск в шапке */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: #fff;
    min-width: 210px;
}
.header-search svg { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
.header-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    font: .8rem var(--sans);
    color: var(--ink-900);
}
.header-search input:focus { outline: none; }
.header-search input::placeholder { color: var(--ink-400); }

.mobile-header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin: 0 0 8px;
    border: 1px solid var(--border-soft);
    background: var(--cream-100);
}
.mobile-header-search svg { width: 16px; height: 16px; color: var(--ink-400); flex: none; }
.mobile-header-search input { border: 0; background: transparent; font: .84rem var(--sans); color: var(--ink-900); min-width: 0; flex: 1; }
.mobile-header-search input:focus { outline: none; }

/* ================================================================
   Кабинет автора
   ================================================================ */

.cabinet-hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    flex-wrap: wrap;
}
.cabinet-photo {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
    display: grid;
    place-items: center;
}
.cabinet-photo img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(200, 154, 91, .5);
}
.author-monogram--page {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(200, 154, 91, .5);
    border-radius: 50%;
    font: 600 2rem var(--serif);
    color: var(--gold-600);
}
.cabinet-verified {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold-500);
    color: #fff;
    font-size: .7rem;
}
.cabinet-headline { min-width: 220px; }
.cabinet-headline h1 { margin: 0 0 6px; }
.cabinet-site { font-size: .8rem; }
.cabinet-stats {
    margin-left: auto;
    display: grid;
    gap: 6px;
    text-align: right;
}
.cabinet-stat {
    font-size: .8rem;
    color: var(--ink-600);
}
.cabinet-stat b { color: var(--gold-600); font-size: 1.1rem; }
.cabinet-stat--genres { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }

.cabinet-bio {
    max-width: 72ch;
    margin-bottom: 24px;
    color: var(--ink-600);
    font-size: .94rem;
    line-height: 1.7;
}
.cabinet-bio p { margin: 0; }

.cabinet-owner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 18px;
    border: 1px dashed rgba(200, 154, 91, .55);
    background: rgba(200, 154, 91, .07);
    font-size: .82rem;
    color: var(--ink-600);
}

.cabinet-edit-wrap { max-width: 640px; }
.cabinet-edit-form { display: grid; gap: 16px; }
.cabinet-field label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
.cabinet-field input, .cabinet-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-input);
    font: .9rem var(--sans);
    color: var(--ink-900);
}
.cabinet-field textarea { resize: vertical; }
.cabinet-field input:focus, .cabinet-field textarea:focus { outline: none; border-color: var(--gold-500); }
.cabinet-help { margin: 6px 0 0; font-size: .74rem; color: var(--ink-400); }
.cabinet-edit-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.author-card--cabinet { border-color: rgba(200, 154, 91, .45); }
.author-verified { color: var(--gold-500); margin-right: 4px; }

/* ================================================================
   Форма «Стать автором» на главной
   ================================================================ */

.authors-banner-inner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.authors-banner-points {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.authors-banner-points li {
    position: relative;
    padding-left: 24px;
    font-size: .86rem;
    color: rgba(243, 233, 220, .8);
}
.authors-banner-points li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--gold-400);
}

.authors-banner-form {
    padding: clamp(20px, 3vw, 30px);
    background: rgba(253, 248, 239, .05);
    border: 1px solid rgba(200, 154, 91, .35);
    backdrop-filter: blur(2px);
}
.authors-banner-form h3 { margin: 0 0 4px; font-size: 1.15rem; color: #fdf8ef; }
.authors-form-note { margin: 0 0 18px; font-size: .78rem; color: rgba(243, 233, 220, .62); }

.author-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

/* Страница «Стать автором» */
.become-author { padding: clamp(30px, 5vw, 64px) 0; }
.become-author-inner {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}
.become-author-copy h1 { margin: 10px 0 8px; font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.become-author-lead { margin: 12px 0 18px; font-size: .95rem; line-height: 1.65; color: var(--ink-600); max-width: 46ch; }
.author-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.author-steps li {
    padding: 10px 14px;
    border-left: 2px solid var(--ref-gold-line);
    background: var(--cream-200);
    font-size: .82rem;
    color: var(--ink-600);
    line-height: 1.5;
}
.become-author-note { margin: 0; font-size: .74rem; color: var(--ink-400); font-style: italic; }
.author-identity {
    margin: 0 0 14px;
    padding: 9px 12px;
    background: var(--cream-100);
    font-size: .78rem;
    color: var(--ink-600);
}
.become-author-form-wrap {
    padding: clamp(20px, 3vw, 30px);
    background: #fdfaf4;
    border: 1px solid var(--ref-hair);
}
html[data-theme="dark"] .become-author-form-wrap { background: var(--surface-subtle); border-color: var(--border-soft); }
html[data-theme="dark"] .author-steps li { background: var(--surface-subtle); }
@media (max-width: 900px) {
    .become-author-inner { grid-template-columns: 1fr; }
}
.author-field--wide { grid-column: 1 / -1; }
.author-field label {
    display: block;
    margin-bottom: 5px;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-600);
}
.author-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.author-field textarea, .author-field select {
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(200, 154, 91, .35);
    color: var(--ink-900);
    font: .86rem var(--sans);
}
html[data-theme="dark"] .author-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .author-field textarea, html[data-theme="dark"] .author-field select {
    background: rgba(9, 14, 23, .55);
    border-color: rgba(200, 154, 91, .3);
}
.author-field input::placeholder, .author-field textarea::placeholder { color: var(--ink-400); }
.author-field input:focus, .author-field textarea:focus { outline: none; border-color: var(--gold-400); }
.author-field.has-error input, .author-field.has-error textarea { border-color: #d9695f; }
.author-field-error {
    margin: 5px 0 0;
    font-size: .72rem;
    color: #b3453c;
}
html[data-theme="dark"] .author-field-error { color: #ffb3ab; }
.author-field-help {
    margin: 5px 0 0;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--ink-400);
}
.author-radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.author-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(200, 154, 91, .3);
    font-size: .78rem;
    color: var(--ink-600);
    cursor: pointer;
}
.author-radio input { accent-color: var(--gold-500); margin: 0; }
.author-radio:has(input:checked) {
    border-color: var(--gold-400);
    color: #fdf8ef;
    background: rgba(200, 154, 91, .12);
}
.author-consent {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    font-size: .76rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-600) !important;
    cursor: pointer;
}
.author-consent input { margin-top: 3px; accent-color: var(--gold-500); }
.author-file-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(9, 14, 23, .05);
    border: 1px dashed rgba(200, 154, 91, .4);
    color: var(--ink-600) !important;
    cursor: pointer;
}
.author-file-label span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(200, 154, 91, .5);
    border-radius: 50%;
    color: var(--gold-400);
}
.author-file-label + input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.author-apply-submit { width: 100%; margin-top: 4px; justify-content: center; }
.authors-banner .btn-gold, .authors-banner .btn-gold:hover { color: #140e05; }

@media (max-width: 980px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .authors-banner-inner { grid-template-columns: 1fr; }
    .cabinet-hero-inner { justify-content: flex-start; }
    .cabinet-stats { margin-left: 0; text-align: left; }
    .author-form-grid { grid-template-columns: 1fr; }
    .facet-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 10px 18px;
        border: 1px solid rgba(200, 154, 91, .45);
        background: transparent;
        color: var(--gold-600);
        font: 600 .74rem var(--sans);
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .catalog-side { display: none; }
    .catalog-side.is-open { display: block; }
}

@media (max-width: 1180px) and (min-width: 981px) {
    .header-search { min-width: 150px; }
}

/* ---------- Smart search: dark theme ---------- */

html[data-theme="dark"] .suggest-box,
html[data-theme="dark"] .header-search,
html[data-theme="dark"] .mobile-header-search {
    background: #101c27;
    border-color: rgba(200, 154, 91, .25);
}
html[data-theme="dark"] .suggest-title, html[data-theme="dark"] .chip { color: var(--ink-900); }
html[data-theme="dark"] .facet-tag span { color: var(--ink-600); }
html[data-theme="dark"] .facet-check { color: var(--ink-900); }
html[data-theme="dark"] .facet-pair input,
html[data-theme="dark"] .catalog-sort select { background: #101c27; color: var(--ink-900); border-color: rgba(200, 154, 91, .25); }
html[data-theme="dark"] .catalog-side { background: #101c27; border-color: rgba(200, 154, 91, .25); }
html[data-theme="dark"] .quick-tag { background: rgba(200, 154, 91, .08); }
html[data-theme="dark"] .header-search input { color: var(--ink-900); }
html[data-theme="dark"] .chip--reset { color: var(--ink-400); }

/* Панель уведомлений по книге */
.product-watch {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--ref-hair);
    border-radius: 6px;
    background: #fdfaf4;
}
.product-watch-title {
    margin: 0 0 8px;
    font: 600 .56rem/1 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8f8272;
}
.product-watch-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .78rem;
    color: var(--ink-600);
    cursor: pointer;
}
.product-watch-option input { accent-color: var(--ref-gold); }
.product-watch-email { display: flex; gap: 8px; margin-top: 10px; }
.product-watch-email input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #d9d3c9;
    border-radius: 4px;
    background: #fff;
    font: .8rem var(--sans);
}
.product-watch-email .btn { flex: none; padding: 9px 14px; font-size: .58rem; }
.video-access-options { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }

.page-contact-form { margin-top: 22px; max-width: 620px; }
.page-contact-form h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.3rem; }
.page-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-contact-note { margin: 0 0 12px; font-size: .84rem; color: var(--ink-400); }
.page-contact-form .field { margin-bottom: 12px; }
.page-contact-form input, .page-contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9d3c9; border-radius: 4px; background: #fff; font: .84rem var(--sans); }
.page-contact-consent { margin: 10px 0 14px; }

/* Подписки в кабинете */
.subscription-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 18px; margin-bottom: 16px; }
.subscription-col { display: grid; gap: 12px; align-content: start; }
.subscription-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.subscription-row select { width: 100%; padding: 9px 10px; border: 1px solid #d9d3c9; border-radius: 4px; background: #fff; font: .84rem var(--sans); }
.subscription-check { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--ink-600); cursor: pointer; }
.subscription-check input { margin-top: 2px; accent-color: var(--ref-gold); }
.subscription-consents { grid-column: 1 / -1; }
.subscription-genres legend { font: 600 .56rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8f8272; padding: 0; margin-bottom: 8px; }
.subscription-genres .facet-check { white-space: normal; }
.profile-subscriptions h2 { font-family: var(--serif); font-size: 1.4rem; }
.profile-sub-note { margin: 4px 0 14px; font-size: .8rem; color: var(--ink-400); }
.subscription-form select { min-width: 120px; }

@media (max-width: 860px) {
    .subscription-grid { grid-template-columns: 1fr; }
    .subscription-row { grid-template-columns: 1fr; }
    .page-contact-grid { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .product-watch { background: var(--surface-subtle); border-color: var(--border-soft); }
html[data-theme="dark"] .product-watch-email input { background: var(--surface-card); border-color: var(--border-soft); color: var(--ink-900); }
html[data-theme="dark"] .page-contact-form input,
html[data-theme="dark"] .page-contact-form textarea { background: var(--surface-card); border-color: var(--border-soft); color: var(--ink-900); }
html[data-theme="dark"] .subscription-row select { background: var(--surface-card); border-color: var(--border-soft); color: var(--ink-900); }


/* ============================================================
   MOTION — смена темы, диалог входа, смена языка без перезагрузки
   ============================================================ */

/* Снапшот-слой перехода не должен перехватывать мышь: иначе кнопка темы
   «замирает», пока волна не доедет. */
::view-transition,
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { pointer-events: none; }

/* Тема: круговое раскрытие из кнопки (View Transitions API).
   У перехода два снимка: старый (тема, с которой начали) и новый. Новый
   лежит целой подложкой, старый — сверху, с маской из концентрических
   колец. Каждое нажатие добавляет своё кольцо: волна стартует в момент
   клика и не мешает предыдущим, а подложка всегда на месте — страница не
   «проваливается» в фон, пока волна не дошла до краёв.
   Радиусы колец считает ui.js (rAF), поэтому mask-image приходит из --wave-mask. */
html { --wave-duration: .9s; }

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 2; }

/* Держим переход живым, пока идёт последняя волна (+ запас на то, чтобы
   ui.js успел выставить итоговую тему под закрытым экраном): пустая анимация. Пара имён — чтобы повторный клик её перезапускал и продлевал. */
html[data-wave="1"]::view-transition-new(root) { animation: pp-hold-1 calc(var(--wave-duration) + .15s) linear both; }
html[data-wave="2"]::view-transition-new(root) { animation: pp-hold-2 calc(var(--wave-duration) + .15s) linear both; }
@keyframes pp-hold-1 { from { opacity: 1; } to { opacity: 1; } }
@keyframes pp-hold-2 { from { opacity: 1; } to { opacity: 1; } }

/* Волна сияния: обложки книг не перекрашиваются темой, поэтому когда фронт
   волны проходит через них, по картинке пробегает блик. Слой рисуется в CSS,
   а запускается из ui.js: каждой обложке — своя задержка, равная времени,
   за которое фронт волны доезжает до неё (дистанция / скорость волны). */
.book-cover-wrap::after,
.trending-cover::after,
.product-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    /* Пробегающий глянцевый блик + мягкое свечение вокруг него. */
    background:
        radial-gradient(closest-side, rgba(255, 236, 200, .28), transparent) no-repeat 0 0 / 100% 100%,
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0) 40%,
            rgba(255, 240, 210, .55) 47%, rgba(255, 255, 255, .7) 52%,
            rgba(255, 240, 210, .35) 59%, rgba(255, 255, 255, 0) 66%, transparent 72%);
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 150% 0;
    mix-blend-mode: screen;
}

html[data-wave]::view-transition-old(root) { mask-image: var(--wave-mask); }

/* Свой view-transition-name выводит элемент из снимка root, и он
   перекрашивался бы мгновенно. На время волны отдаём его корню. */
html[data-wave] .genre-strip { view-transition-name: none; }

/* Хотбар: перелистывание между страницами.
   Браузер снимает полосу жанров до и после перехода и проигрывает
/* Панорама страницы при смене жанра в хотбаре — «посмотрел в сторону»
   вместо мгновенной смены: страница просто уезжает вбок (без 3D-поворотов),
   новая страница доезжает из той же стороны. Выход анимируется на JS
   (ui.js): html[data-flip-out] + body.page-flip-out. */
html[data-flip-out="right"] body.page-flip-out { animation: pp-page-out-left .22s cubic-bezier(.55, 0, .8, .5) both; }
html[data-flip-out="left"]  body.page-flip-out { animation: pp-page-out-right .22s cubic-bezier(.55, 0, .8, .5) both; }
@keyframes pp-page-out-left  { to { opacity: 0; transform: translateX(-12%); } }
@keyframes pp-page-out-right { to { opacity: 0; transform: translateX(12%); } }

/* Ввод первой-краски: направление ставит инлайн-скрипт в <head> до рендера
   (html[data-flip] из sessionStorage), поэтому анимация начинается с самого
   первого кадра новой страницы — без «сухого» рендера. */
html[data-flip="right"] body { animation: pp-page-in-right .32s cubic-bezier(.2, .6, .3, 1) both; }
html[data-flip="left"] body  { animation: pp-page-in-left .32s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes pp-page-in-right { from { opacity: 0; transform: translateX(12%); } }
@keyframes pp-page-in-left  { from { opacity: 0; transform: translateX(-12%); } }

/* Без View Transitions: мягкий переход цветов вместо резкого щелчка. */
html.theme-smooth body,
html.theme-smooth .site-header,
html.theme-smooth .site-footer,
html.theme-smooth .book-card {
    transition: background-color .32s ease, color .32s ease, border-color .32s ease;
}

/* Диалог входа: всплывает снизу с лёгким перелётом, закрывается вниз. */
.account-dialog[open] { animation: pp-dialog-in .34s cubic-bezier(.22, 1.1, .3, 1) both; }
.account-dialog[open]::backdrop { animation: pp-veil-in .3s ease both; }
.account-dialog.is-closing { animation: pp-dialog-out .2s ease-in both; }
.account-dialog.is-closing::backdrop { animation: pp-veil-out .2s ease both; }
@keyframes pp-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes pp-dialog-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(10px) scale(.96); }
}
@keyframes pp-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-veil-out { from { opacity: 1; } to { opacity: 0; } }

/* Тост после AJAX-действий (в избранное/корзину): всплывает снизу
   и тихо уходит. */
.pp-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 80;
    transform: translateX(-50%) translateY(14px);
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ink-900);
    color: #fff;
    font-size: .84rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.pp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Карточка уходит с решётки избранного сразу после снятия сердечка. */
.book-card.is-leaving { animation: pp-card-leave .3s ease both; }
@keyframes pp-card-leave {
    to { opacity: 0; transform: translateY(10px) scale(.98); }
}

/* Тема: тост в тёмной теме остаётся спокойным пятном, чуть иные цвета. */
html[data-theme="dark"] .pp-toast { background: var(--surface-input); color: var(--ink-900); border: 1px solid var(--border-soft); }

@media (prefers-reduced-motion: reduce) {
    .pp-toast { transition: none; }
    .book-card.is-leaving { animation: none; }
    .pp-toast { display: none; }
}

/* Меню языков: короткий подъём вместо мгновенного появления. */
.lang-menu:not([hidden]) { animation: pp-menu-in .16s ease-out; transform-origin: top right; }
@keyframes pp-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.lang-toggle.is-loading { opacity: .55; cursor: progress; }

/* Смена языка: текст перепечатывается посимвольно (см. ui.js), курсор
   на время показывает, что страница занята. */
html.i18n-swapping { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(root),
    ::view-transition-old(root) { animation: none; }
    html[data-flip] body,
    html[data-flip-out] body.page-flip-out { animation: none; }
    .account-dialog[open],
    .account-dialog.is-closing,
    .account-dialog[open]::backdrop,
    .account-dialog.is-closing::backdrop,
    .lang-menu:not([hidden]) { animation: none; }
}

/* ============================================================
   EDITORIAL CALM — финальный слой редизайна (31.10)
   Спокойный editorial: единая типографика, сдержанные бейджи,
   золото только тонким акцентом. Все цвета — через токены:
   тёмная тема достраивается сама.
   ============================================================ */

:root {
    --radius: 12px;
    --radius-sm: 8px;
    --focus-ring: 0 0 0 3px rgba(200, 154, 91, .22);
}

/* ---------- Типографика секций ---------- */
.section-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    margin: 0;
    color: var(--heading-color);
}
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 .68rem var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ref-gold);
    text-decoration: none;
}
.section-link svg { width: 14px; height: 14px; }
.section-link:hover { color: var(--gold-600); }

/* ---------- Кнопки: одна система ---------- */
.btn { border-radius: var(--radius-sm); }
.btn-navy {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: var(--cream-50);
}
.btn-navy:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(7, 26, 44, .22);
}
html[data-theme="dark"] .btn-navy { background: var(--navy-700); border-color: var(--navy-700); color: #f2e8da; }
html[data-theme="dark"] .btn-navy:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn-wide { width: 100%; min-height: 52px; }
.btn:focus-visible, .genre-tab:focus-visible, .author-social:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- Бейджи: спокойные плашки вместо красных ---------- */
.badge-red {
    background: rgba(7, 26, 44, .84);
    color: var(--cream-50);
    font-weight: 600;
    font-size: .64rem;
    letter-spacing: .16em;
    border-radius: 999px;
    padding: 5px 13px;
    box-shadow: 0 2px 10px rgba(7, 26, 44, .3);
}
html[data-theme="dark"] .badge-red { background: rgba(9, 17, 27, .88); color: var(--gold-300); }
.badge-bestseller {
    background: var(--gold-500);
    color: #171006;
    font-weight: 700;
    font-size: .6rem;
    letter-spacing: .16em;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(168, 122, 67, .28);
}

/* ---------- Слепая обложка: типографика вместо белого листа ---------- */
.cover-blind {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9%;
    background: linear-gradient(165deg, #12283e, #071a2c 58%, #0b2237);
}
html[data-theme="dark"] .cover-blind { background: linear-gradient(165deg, #0d1b2b, #071322 58%, #0a1828); }
.cover-blind-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}
.cover-blind-kicker {
    font: 600 .48rem var(--sans);
    letter-spacing: .32em;
    color: var(--gold-400);
}
.cover-blind-rule { width: 24px; height: 1px; background: var(--gold-500); }
.cover-blind-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(.72rem, 1.7vw, .98rem);
    line-height: 1.25;
    color: var(--cream-100);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-card--mini .cover-blind-title { font-size: .58rem; }
.trending-cover .cover-blind-title { font-size: .74rem; }

/* ---------- Полоса жанров: поджанры ---------- */
.genre-count { color: var(--ink-400); }
.genre-strip--sub {
    background: var(--page-bg);
    border-bottom: 1px solid var(--ref-hair);
    padding: 9px 0 11px;
}
.genre-strip--sub .genre-strip-inner { gap: 8px; }
.genre-tab--sub {
    min-height: 0;
    padding: 8px 15px;
    border: 1px solid var(--ref-hair);
    border-radius: 999px;
    background: var(--surface-card);
    font-size: .8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-600);
    gap: 8px;
}
.genre-tab--sub:hover { border-color: var(--gold-400); color: var(--gold-600); background: var(--surface-card); }
.genre-tab--sub.is-active {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: var(--cream-50);
}
.genre-tab--sub.is-active .genre-count { background: rgba(255, 255, 255, .22); color: #fff; }
html[data-theme="dark"] .genre-tab--sub { border-color: var(--border-soft); background: var(--surface-card); }
html[data-theme="dark"] .genre-tab--sub.is-active { background: var(--gold-500); border-color: var(--gold-500); color: #1d1408; }
html[data-theme="dark"] .genre-tab--sub.is-active .genre-count { background: rgba(0, 0, 0, .18); color: #1d1408; }
.genre-tab-all {
    font-weight: 700;
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

/* ---------- Тёмная тема: хвосты контраста ---------- */
.book-card--mini { background: var(--surface-card); }
.book-card--mini .book-title a { color: var(--ink-900); }
.book-card--mini .book-author { color: var(--ink-400); }
.book-card--mini .price { color: var(--ink-900); }
.book-card--hero .book-title a { color: var(--ink-900); }
.book-card--hero .book-author { color: var(--ink-400); }
html[data-theme="dark"] .pay-paypal { filter: brightness(.92) saturate(.85); }

/* ---------- Страница автора ---------- */
.author-hero { background: var(--hero-deep); border-bottom: 1px solid var(--ref-hair); }
.author-hero-inner {
    display: grid;
    grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
    gap: clamp(26px, 4.5vw, 60px);
    align-items: center;
    padding-block: clamp(28px, 5vw, 62px);
}
.author-hero-photo { position: relative; }
.author-hero-photo img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
}
.author-hero-photo .author-monogram--page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 4.6;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
    color: var(--gold-300);
    font-family: var(--serif);
    font-size: clamp(3.4rem, 8vw, 5.5rem);
}
html[data-theme="dark"] .author-hero-photo .author-monogram--page {
    background: linear-gradient(160deg, var(--navy-900), #050d16);
}
.author-hero-photo .cabinet-verified {
    position: absolute;
    right: 12px;
    bottom: 12px;
}
.author-hero-head h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    line-height: 1.06;
    margin: 0;
    color: var(--heading-color);
}
.author-hero-tagline { margin: 9px 0 0; font-size: 1.02rem; color: var(--ink-600); }
.author-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.author-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #171006;
    transition: background .18s, transform .18s, box-shadow .18s;
}
.author-social svg { width: 18px; height: 18px; }
.author-social:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(168, 122, 67, .3); }
.author-subscribe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.author-subscribe input[type="email"] {
    flex: 1 1 230px;
    max-width: 340px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    color: var(--ink-900);
    font: 400 .92rem var(--sans);
}
.author-subscribe input[type="email"]:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--focus-ring); }
@media (max-width: 760px) {
    .author-hero-inner { grid-template-columns: 1fr; }
    .author-hero-photo { max-width: 250px; }
}

.author-about { max-width: 860px; margin-bottom: 36px; }
.author-about-text { margin-top: 12px; color: var(--ink-600); line-height: 1.75; }

.author-videos { margin-bottom: 36px; }
.author-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 14px;
}
.author-video-card { margin: 0; }
.author-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy-950);
}
.author-video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.author-video-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(7, 26, 44, .8);
    color: var(--cream-50);
    font: 600 .56rem var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    pointer-events: none;
}
.author-video-card figcaption { margin-top: 9px; font-size: .88rem; color: var(--ink-600); }

.author-books-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.viewzy-mark {
    display: inline-block;
    vertical-align: 3px;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gold-100);
    color: #7a5a30;
    font: 600 .58rem var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
}
html[data-theme="dark"] .viewzy-mark { background: rgba(200, 154, 91, .16); color: var(--gold-300); }

/* ---------- Лендинг «Стать автором» ---------- */
.ba-hero { background: var(--hero-deep); border-bottom: 1px solid var(--ref-hair); }
.ba-hero-inner { padding-block: clamp(42px, 7vw, 88px); }
.ba-hero-copy h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    line-height: 1.08;
    margin: 10px 0 14px;
    max-width: 640px;
    color: var(--heading-color);
}
.ba-hero-lead { max-width: 480px; margin: 0 0 24px; font-size: 1.05rem; line-height: 1.65; color: var(--ink-600); }
.ba-why { padding-bottom: clamp(26px, 4vw, 44px); }
.ba-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
.ba-why-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    text-align: center;
    border-left: 1px solid var(--ref-hair);
}
.ba-why-item:first-child { border-left: 0; }
.ba-why-item svg { width: 42px; height: 42px; color: var(--heading-color); }
.ba-why-item h3 { margin: 0; font: 600 .95rem var(--sans); color: var(--ink-900); }
@media (max-width: 640px) {
    .ba-why-grid { grid-template-columns: 1fr; gap: 0; }
    .ba-why-item { border-left: 0; border-top: 1px solid var(--ref-hair); padding: 18px 8px; }
    .ba-why-item:first-child { border-top: 0; }
}
.ba-form-section { padding-top: clamp(26px, 4vw, 44px); }
.ba-form-card {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px);
    background: var(--surface-card);
    border: 1px solid var(--ref-hair);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.ba-login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 26px 10px;
}
.ba-login-card h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--heading-color); }
.ba-login-card p { margin: 0; max-width: 46ch; color: var(--ink-600); font-size: .92rem; }
.ba-register-link { font-size: .88rem; color: var(--ref-gold); }
.ba-register-link:hover { color: var(--gold-600); }
.ba-faq { padding-top: clamp(20px, 3vw, 34px); padding-bottom: clamp(40px, 6vw, 72px); }
.ba-faq-list { max-width: 880px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 10px; }
.ba-faq-item {
    padding: 0 18px;
    background: var(--surface-card);
    border: 1px solid var(--ref-hair);
    border-radius: var(--radius-sm);
}
.ba-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-900);
}
.ba-faq-item summary::-webkit-details-marker { display: none; }
.ba-faq-item summary::after {
    content: "+";
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ref-gold);
}
.ba-faq-item[open] summary::after { content: "–"; }
.ba-faq-item p { margin: 0 0 15px; color: var(--ink-600); line-height: 1.65; }

/* ---------- Поля форм: единый вид ---------- */
.author-form-grid { gap: 14px 16px; }
.author-field--half { min-width: 0; }
.author-field label { margin-bottom: 6px; }
.author-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.author-field textarea, .author-field select {
    min-height: 46px;
    border-radius: var(--radius-sm);
    border-color: var(--border-soft);
    background: var(--surface-input);
}
html[data-theme="dark"] .author-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .author-field textarea, html[data-theme="dark"] .author-field select {
    background: var(--surface-input);
    border-color: var(--border-soft);
}
.author-field input:focus, .author-field textarea:focus, .author-field select:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: var(--focus-ring);
}
.author-file-label {
    min-height: 64px;
    justify-content: center;
    gap: 11px;
    padding: 14px;
    border: 1.5px dashed var(--gold-500);
    border-radius: var(--radius-sm);
    background: rgba(200, 154, 91, .06);
    font-weight: 500;
    transition: background .18s;
}
.author-file-label:hover { background: rgba(200, 154, 91, .12); }
.author-file-label svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; }
.author-file-label span { width: auto; height: auto; border: 0; border-radius: 0; color: inherit; display: inline; }
html[data-theme="dark"] .author-file-label { background: rgba(200, 154, 91, .08); }
.author-genre-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px 14px;
}
.author-genre-choices label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font: 400 .88rem var(--sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-900);
    cursor: pointer;
}
.author-genre-choices input { margin-top: 4px; accent-color: var(--gold-500); }

/* ---------- Выпадающее меню «Каталог» ---------- */
.site-nav .nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    width: min(720px, calc(100vw - 40px));
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 22px;
    background: var(--surface-card);
    border: 1px solid var(--ref-hair);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 60;
}
.nav-dropdown-panel::before {
    /* мостик, чтобы курсор не терял панель над зазором */
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-dropdown-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nav-dropdown-cat {
    font: 600 .78rem/1.3 var(--serif);
    font-size: 1.02rem;
    color: var(--heading-color);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gold-100);
    margin-bottom: 3px;
}
.nav-dropdown-cat:hover { color: var(--gold-600); }
.nav-dropdown-sub {
    font: 400 .78rem/1.4 var(--sans);
    color: var(--ink-600);
    text-decoration: none;
}
.nav-dropdown-sub:hover { color: var(--gold-600); }
html[data-theme="dark"] .nav-dropdown-panel {
    background: var(--surface-card);
    border-color: var(--border-soft);
}
html[data-theme="dark"] .nav-dropdown-cat { color: var(--heading-color); border-bottom-color: rgba(200, 154, 91, .25); }
html[data-theme="dark"] .nav-dropdown-sub { color: var(--ink-600); }
@media (max-width: 900px) {
    .nav-dropdown-panel { display: none; }
}