/* Dark theme from the designer: page #0F1115, titles and menu #F2F3F5, prices
   #A9AEB8, links turn gold on hover. The gold shades are sampled from the
   designer's button picture (border #AB8933 .. #F5E592). */
:root {
    --bg: #0f1115;
    --surface: #161a20;
    --surface-2: #1d2127;
    --border: #2a2f38;
    --text: #f2f3f5;
    --muted: #a9aeb8;
    --gold: #d9ae4b;
    --gold-dark: #ab8933;
    --gold-light: #f5e592;
    --danger: #ff8a7a;
    --ok: #6fd6a0;
    --warn: #f0c36a;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    line-height: 1.5;
}

a {
    color: inherit;
}

a:hover {
    color: var(--gold);
}

input,
textarea,
select {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    font: inherit;
}

::placeholder {
    color: var(--muted);
}

button {
    font: inherit;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
}

button:hover {
    border-color: var(--gold-light);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */

.site-header {
    padding: 12px 0;
    position: relative;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0;
}

/* The 2026 logo is an inline SVG on a transparent background; static/js/logo.js
   swaps it for the same picture with the balls that run along the spiral on hover.
   The size is the same before and after the swap, so the page does not jump. */
.pr-logo {
    display: block;
    height: 66px;
    width: auto;
    overflow: visible;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.site-header .pr-logo {
    height: 66px;
}

.site-header__logo:hover .pr-logo,
.site-header__logo:focus-visible .pr-logo {
    transform: scale(1.04);
    filter: drop-shadow(0 0 9px rgba(90, 170, 255, 0.45));
}

.site-header__nav {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav a {
    text-decoration: none;
}

.site-header__caret {
    font-size: 0.7em;
}

.site-header__dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
}

/* Wide screens: every section name is a hover and click target that fills
   the whole height of the header and the full width between its
   neighbours (no dead strips around or between the names), and the
   product list hangs directly under the header, so the mouse never
   leaves the active zone on its way down. The list stays for a moment
   (0.18 s) after the mouse slips out, which smooths over small
   wobbles and the move from one section to the next. */
@media (min-width: 1025px) {
    .site-header {
        padding: 0;
    }

    .site-header__inner {
        align-items: stretch;
    }

    .site-header__icons {
        align-items: center;
    }

    .site-header__nav-wrap,
    .site-header__nav,
    .site-header__nav-item {
        display: flex;
    }

    .site-header__nav {
        gap: 0;
        align-items: stretch;
    }

    .site-header__nav-item > a {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .site-header__dropdown {
        display: block;
        top: 100%;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.12s ease, visibility 0s linear 0.18s;
    }

    .site-header__nav-item:hover .site-header__dropdown,
    .site-header__nav-item:focus-within .site-header__dropdown {
        visibility: visible;
        opacity: 1;
        z-index: 21;
        transition-delay: 0s;
    }

    /* "Смотреть все" under the list of the dropdown, one size larger than the product names
       (16 px -> 17 px), always underlined, in a thin red frame to catch the eye. It stands at the
       left, under the start of the list, as it did originally (Roman, 2026-10-14, after trying
       the middle and the end of the first column). The frame is a little thinner than before: the
       line is 0.75 px (one device pixel on a Retina screen) and the box is lower (2 px padding).
       The gold colour on hover comes from the general `a:hover` rule and is not touched here. */
    .site-header__dropdown .site-header__dropdown-all {
        display: block;
        width: max-content;
        margin: 4px 0 0;
        text-align: left;
        font-size: 17px;
        text-decoration: underline;
        padding: 2px 10px;
        border: 0.75px solid #e5311f;
        border-radius: 3px;
    }
}

.site-header__dropdown-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.site-header__dropdown ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    columns: 3;
    column-gap: 24px;
}

.site-header__dropdown li {
    margin-bottom: 8px;
    break-inside: avoid;
}

.site-header__dropdown a {
    text-decoration: none;
}

.site-header__dropdown a:hover {
    text-decoration: underline;
}

.site-header__dropdown-all {
    font-weight: 600;
}

.site-header__icons {
    display: flex;
    gap: 16px;
}

.site-header__icons a {
    text-decoration: none;
    font-size: 1.2rem;
}

.site-header__nav-toggle {
    display: none;
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.site-header__nav-toggle span {
    display: block;
    height: 2px;
    background: var(--text);
}

/* Below this width the nav row (logo + category links + icons) no
   longer fits on one line, and with nothing to wrap or collapse it the
   browser was widening the whole page's layout viewport to fit it
   instead -- shrinking and clipping every element on the page, not just
   the nav. Collapsing the nav behind a toggle keeps the row's natural
   width within the viewport so that never happens. */
@media (max-width: 1024px) {
    .site-header__nav-toggle {
        display: flex;
    }

    .site-header__nav-wrap {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        z-index: 30;
    }

    .site-header__nav-wrap.is-open {
        display: block;
    }

    .site-header__nav {
        flex-direction: column;
        gap: 0;
    }

    .site-header__nav-item {
        border-bottom: 1px solid var(--border);
    }

    .site-header__nav-item > a {
        display: block;
        padding: 14px 20px;
    }

    /* No hover on touch -- the dropdown of individual products is
       always expanded under its category while the mobile menu is
       open, instead of appearing on hover like on desktop. */
    .site-header__dropdown {
        display: block !important;
        position: static;
        padding-top: 0;
        margin-top: 0;
        z-index: auto;
    }

    .site-header__dropdown-inner {
        max-width: none;
        padding: 0 20px 12px 32px;
        border: none;
        box-shadow: none;
    }

    .site-header__dropdown ul {
        columns: 1;
    }
}

/* Hero: the living background between the header and the slider (static/js/hero-wave.js).
   The colour is the one the script paints with, so there is no flash before it runs. */

/* The hero fills the first screen: header + hero = the height of the window, so the
   footer is not seen when the homepage opens and shows up when the visitor scrolls.
   --header-h is the measured height of the header (logo + its border). */
.pr-hero {
    --header-h: 67px;
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--header-h));
    min-height: 420px;
    background: #0b1226;
    border-bottom: 1px solid var(--border);
}

/* The one phrase of the hero: centred under the header, light and quiet. Its own dark
   gradient keeps it readable on a phone, where the ribbon fills the whole block. */
.pr-hero__text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    padding: clamp(24px, 5vh, 56px) 24px clamp(32px, 7vh, 80px);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px, 3.3vw, 52px);
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: #e8ecf8;
    background: linear-gradient(to bottom, #0b1226 0%, #0b1226 60%, rgba(11, 18, 38, 0) 100%);
    pointer-events: none;
}

/* The phrase drawn as a field of lines (static/js/hero-phrase.js). The real text stays in the page for
   search engines and screen readers; once the canvas is up it is only taken out of the picture. */
/* Unbounded Black (900) with only the capitals, digits and punctuation the canvas can need: about 8 KB.
   Made by tools/subset_phrase_font.py from the full variable font (SIL OFL, see Unbounded-OFL.txt). */
@font-face {
    font-family: "PrPhrase";
    src: url("../fonts/Unbounded-Black-subset.4c509b002294.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

.pr-hero__phrase {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.pr-hero__text.is-canvas {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    background: none;
}

/* Always two lines: the first ends with the comma, the second is the rest. */
.pr-hero__text > span {
    display: block;
}

/* The one accent of the phrase: the site's gold, as the highlighted words on the slides. */
.pr-hero__accent {
    color: var(--gold);
}

/* Slider */

.homepage-slider {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0;
}

.homepage-slider .homepage-slider-main {
    flex: 1;
    min-width: 0;
}

.homepage-slider-main .swiper-slide img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.homepage-slider .slide-caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    max-width: 70%;
}

.homepage-slider .slide-caption h2 {
    margin: 0 0 4px;
    font-size: 1.6rem;
}

.homepage-slider .swiper-slide {
    position: relative;
}

.homepage-slider-main .swiper-slide {
    min-height: 420px;
}

.homepage-slider-thumbs {
    width: 140px;
    height: 420px;
    flex-shrink: 0;
}

.homepage-slider-thumbs .swiper-slide {
    height: 90px;
    opacity: 0.6;
    cursor: pointer;
}

.homepage-slider-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--gold);
}

.homepage-slider-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Category cards */

.category-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 32px 0;
}

.category-card {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 24px;
    border: 1px solid var(--gold-dark);
    border-radius: 12px;
    background: var(--surface);
}

.category-card:hover {
    border-color: var(--gold-light);
}

.category-card--with-image {
    padding: 0;
    text-align: left;
    overflow: hidden;
}

.category-card--with-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: var(--surface-2);
}

.category-card__name {
    margin: 0;
    padding: 16px 20px;
}

/* Product blocks */

.product-block__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.product-grid {
    display: grid;
    /* auto-fill (not auto-fit): empty tracks keep their width, so a row with
       a single product does not stretch that card across the whole page. */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 24px 20px;
}

.product-grid--page {
    margin-top: 24px;
}

.search-result__hint {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.search-result__hint a {
    color: var(--gold);
    text-decoration: underline;
}

.product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface-2);
}

/* the frame of the picture of a product: the picture may be enlarged and moved, the frame clips it */
.product-card__imgbox {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-2);
}

.product-card__imgbox img {
    display: block;
    height: 100%;
    border-radius: 0;
}

.product-card__noimage {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: var(--surface-2);
}

.product-card__name {
    margin: 10px 0 4px;
    font-weight: 600;
}

.product-card:hover .product-card__name {
    color: var(--gold);
}

.product-card__price {
    margin: 0;
    color: var(--muted);
}

/* News */

.news-block {
    margin: 40px 0;
    /* Matches the slider's own picture width above: .homepage-slider
       reserves 140px + 12px gap for its thumbnail column, so the
       slider's actual image stops there even though the slider's own
       outer box is full width. Without this, the news block (which has
       no thumbnail column of its own) runs further right than the
       slider's picture does, and the two look mismatched in length
       even though their containers already match. */
    max-width: calc(100% - 152px);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.news-grid--page {
    margin-top: 24px;
}

.news-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface-2);
}

/* Footer */

.site-footer {
    margin-top: 60px;
    border-top: 1px solid var(--border);
    padding: 32px 0;
}

.site-footer__newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.site-footer__trap {
    position: absolute;
    left: -9999px;
}

.site-footer__consent {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}

.site-footer__columns h3 {
    font-size: 0.95rem;
    margin: 0 0 8px;
}

.site-footer__columns ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__copyright {
    margin-top: 24px;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Simple content pages (Contacts, Service) */

.simple-page {
    margin: 40px 0;
}

.simple-page ol,
.simple-page ul {
    margin: 0 0 16px;
    padding-left: 24px;
}

.simple-page li {
    margin-bottom: 8px;
}

.simple-page h1 {
    margin-bottom: 24px;
}

.simple-page h2 {
    margin-top: 32px;
    font-size: 1.2rem;
}

.simple-page p {
    margin: 0 0 16px;
}

.simple-page__pending {
    color: var(--muted);
}

.simple-page--with-image {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.simple-page__image {
    flex: 0 0 320px;
}

.simple-page__image img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.simple-page__body {
    flex: 1;
    min-width: 0;
    /* min-width:0 alone isn't enough to keep this column inside the
       viewport: a single unbreakable word (e.g. "Консультация" as an
       <h1>, no spaces to wrap at) doesn't shrink with its container by
       default -- it just overflows past it, invisibly to layout (the
       box's own rect stays put) but not to rendering, which is exactly
       what pushed the page wider than the screen on mobile once the
       image narrowed this column down. */
    overflow-wrap: break-word;
}

/* Stays side-by-side with the title at every width (unlike
   .product-detail below, which stacks on mobile) -- shrinking the
   image instead of stacking it keeps it on the same line as the page
   title, as requested. The image's flex-basis just needs to shrink
   enough to leave the title/text real room next to it. */
@media (max-width: 700px) {
    .simple-page--with-image {
        gap: 20px;
    }

    .simple-page__image {
        flex: 0 0 110px;
    }
}

@media (max-width: 700px) {
    .payment-method__form {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }
}

.product-detail__buy-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Course watch page */

.watch-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* The player screen is a 16:9 box; the placeholder, the "opening" message
   and the two players are stacked in it, so a player sits on the screen at
   full size while it loads (Safari on iPhone never finishes loading an iframe
   hidden with display:none, and the message simply covers it). */
.watch-page__player {
    position: relative;
    aspect-ratio: 16 / 9;
}

.watch-page__player > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.watch-page__video {
    display: none;
    background: #000;
}

.watch-page__player iframe {
    display: block;
}

.watch-page__lessons {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

/* One lecture is one row: its name, then "Смотреть", then (for a buyer, where the file exists)
   "Скачать" with what is left. On a narrow screen the buttons drop under the name. */
.watch-page__lesson {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

/* The lecture's name is only a label: watching starts with the "Смотреть" button. */
.watch-page__lesson-title {
    flex: 1 1 260px;
    min-width: 0;
    font-size: 16px;
}

.watch-page__lesson-title.is-seen {
    color: var(--muted);
}

.watch-page__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.watch-page__actions form {
    margin: 0;
}

.watch-page__lesson-button,
.watch-page__download-button {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.watch-page__lesson-button {
    border-color: var(--gold-dark);
}

.watch-page__lesson-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.watch-page__download-note {
    font-size: 13px;
    opacity: 0.75;
}

@media (max-width: 700px) {
    .watch-page {
        padding: 16px;
    }
}

.product-detail__buy-error {
    color: var(--danger);
}

/* The purchase page: the ways of paying are cards side by side (one column on a phone). */

.payment-methods {
    margin: 28px 0 40px;
}

.payment-methods > h2 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-foreign {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.payment-foreign > .currency-banner {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .payment-foreign {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }
}

/* The ways of paying that this site does not offer: shown dimmed, not clickable. */
.payment-method--off {
    opacity: 0.45;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
}

.payment-fake-button {
    display: block;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
    cursor: not-allowed;
}

.currency-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    padding: 16px 20px;
    background: linear-gradient(120deg, rgba(217, 174, 75, 0.14), var(--surface) 60%);
    border: 1px solid var(--gold-dark);
    border-radius: 12px;
}

.currency-banner__text {
    flex: 1 1 260px;
    margin: 0;
    line-height: 1.45;
}

.currency-banner__link {
    padding: 11px 20px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    border-radius: 8px;
    color: #1b1405;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s;
}

.currency-banner__link:hover {
    filter: brightness(1.08);
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    align-items: start;
}

.payment-method {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.payment-method[hidden] {
    display: none;
}

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

.payment-method__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 10px;
    color: var(--gold);
}

.payment-method__icon svg {
    width: 22px;
    height: 22px;
}

.payment-method__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.payment-method__sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.payment-method__button {
    min-height: 46px;
}

.payment-method__details {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
}

.payment-method__details a {
    color: var(--gold);
}

.payment-method__link {
    display: inline-block;
    align-self: flex-start;
    padding: 10px 24px;
    background: #635bff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* The bank card drawn from the card text of the admin. */
.bank-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    container-type: inline-size;
    aspect-ratio: 1.586;
    min-height: 168px;
    padding: 16px 18px;
    border: 1px solid rgba(217, 174, 75, 0.55);
    border-radius: 14px;
    background: linear-gradient(135deg, #1d1c1a 0%, #0a0a0a 52%, #1a1917 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    color: #f4efe2;
}

.bank-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 8px);
    pointer-events: none;
}

.bank-card > * {
    position: relative;
}

.bank-card__bank {
    display: block;
    color: var(--gold);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bank-card__nfc {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.55);
}

.bank-card__chip {
    display: block;
    flex: 0 0 auto;
    width: 38px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ecd089, #b88a2c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.bank-card__number {
    display: block;
    font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.86rem;
    /* the number always fits the width of its card (a card is as wide as its column) */
    font-size: clamp(0.72rem, 6.3cqw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.bank-card__holder {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.bank-card__holder small {
    display: block;
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.copy-card {
    align-self: center;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
    color: var(--gold);
    font-size: 0.85rem;
    cursor: pointer;
}

.copy-card:hover {
    border-color: var(--gold-light);
    color: var(--gold-light);
}

.payment-method__form {
    display: flex;
    gap: 8px;
}

.payment-method__form[hidden] {
    /* The [hidden] attribute's UA-stylesheet display:none loses to this
       class's own display:flex above (an author rule always beats the
       UA default, regardless of selector order) -- setting
       .hidden = true in JS silently did nothing without this. */
    display: none;
}

.payment-method__form input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

.payment-method__form button {
    padding: 10px 16px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    border: none;
    border-radius: 8px;
    color: #1b1405;
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.payment-method__form button:disabled {
    background: var(--surface-2);
    color: var(--muted);
    cursor: default;
}

/* A video shown as a player window (YouTube, Rutube, Vimeo). */
.video-embed {
    margin: 20px 0;
    max-width: 780px;
}

.video-embed__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    /* a light frame with a thin gold line (Roman, 2026-10-14: "лёгкая рамка с золотой линией") */
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
    overflow: hidden;
}

.video-embed__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The same video on several services: one player at a time and a switcher
   (static/js/video_switch.js). Without the script every panel stays visible, only the
   first one has its address, the rest have the link under them. */
.video-switch {
    margin: 20px 0;
    max-width: 780px;
}

.video-switch__tabs {
    display: inline-flex;
    margin: 0 0 10px;
    border: 1px solid var(--gold-dark);
    border-radius: 16px;
    overflow: hidden;
}

.video-switch__tab {
    padding: 6px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.video-switch__tab:hover {
    color: var(--gold);
}

.video-switch__tab.is-active {
    background: var(--gold);
    color: #14110a;
    font-weight: 600;
}

.video-switch .video-embed {
    margin: 0;
    max-width: none;
}

.video-switch .video-embed[hidden] {
    display: none;
}

.video-embed__link {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.search-form {
    display: flex;
    gap: 8px;
    max-width: 600px;
    margin: 0 0 24px;
}

.search-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 16px;
}

.search-form button {
    padding: 10px 24px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--gold-dark);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
}

.search-empty {
    color: var(--muted);
}

/* Personal cabinet */

.cabinet-card {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 16px;
}

.cabinet-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.cabinet-form input {
    flex: 1 1 220px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 16px;
}

.cabinet-form button,
.cabinet-button {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--gold-dark);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.cabinet-error {
    color: var(--danger);
}

.cabinet-ok {
    color: var(--gold);
}

.cabinet-card__sub {
    margin-top: 32px;
    font-size: 1.1rem;
}

.cabinet__password-link {
    margin-right: 16px;
    color: var(--muted);
}

.cabinet {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

.cabinet__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.cabinet__email {
    margin: 4px 0 0;
    color: var(--muted);
}

.cabinet__logout {
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: 15px;
    cursor: pointer;
}

.cabinet__section {
    margin: 32px 0;
}

.cabinet__status {
    font-size: 1.05rem;
}

.cabinet__term {
    flex: 1 1 280px;
    min-width: 0;
    align-self: flex-end;
    margin-bottom: -8px;
}

.cabinet__term .cabinet__status {
    margin: 4px 0 0;
}

.cabinet__category {
    margin: 28px 0 12px;
}

.cabinet__empty {
    color: var(--muted);
}

/* Cabinet: tabs, rails of covers, compact lists, viewing marks */

.cab-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 20px;
}

.cab-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.cab-tab.is-active {
    border-color: var(--gold);
    color: var(--text);
    font-weight: 600;
}

.cab-tab__count {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
}

.cab-block {
    margin: 0 0 28px;
}

.cab-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

.cab-block__head h3 {
    margin: 0;
}

.cab-count {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.cab-link {
    color: var(--gold);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.cab-rail-wrap {
    position: relative;
}

.cab-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.cab-rail__arrow {
    position: absolute;
    top: 52px;
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cab-rail__arrow--prev { left: -8px; }
.cab-rail__arrow--next { right: -8px; }

.cab-rail-wrap.is-scrollable .cab-rail__arrow:not([hidden]) {
    display: block;
}

.cab-poster {
    flex: 0 0 140px;
    display: block;
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}

.cab-poster__img {
    position: relative;
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
}

.cab-poster__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cab-poster__name {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-poster.is-seen img,
.cab-item.is-seen img {
    filter: saturate(0.55);
}

.cab-poster.is-seen .cab-poster__name,
.cab-item.is-seen .cab-item__name {
    color: var(--muted);
}

.cab-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(111, 214, 160, 0.15);
    color: var(--ok);
    font-size: 11px;
    font-weight: 600;
}

.cab-badge--progress {
    background: rgba(240, 195, 106, 0.15);
    color: var(--warn);
}

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

.cab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.cab-item__thumb {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-2);
}

.cab-item__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cab-item__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-item__mark {
    display: block;
    margin-top: 2px;
    color: var(--ok);
    font-size: 12px;
    font-weight: 600;
}

.cab-item__mark--progress {
    color: var(--warn);
}

.watch-page__seen {
    color: var(--ok);
    font-weight: 700;
}

@media (max-width: 640px) {
    .cab-list {
        grid-template-columns: 1fr;
    }

    .cab-poster {
        flex-basis: 120px;
    }

    .cab-poster__img {
        width: 120px;
        height: 120px;
    }

    .cab-rail-wrap.is-scrollable .cab-rail__arrow:not([hidden]) {
        display: none;
    }
}

/* Message shown while the video player is opening */

.watch-page__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    padding: 16px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #444;
    font-size: 16px;
    text-align: center;
}

.watch-page__loading[hidden],
.watch-page__slow[hidden] {
    display: none;
}

/* The refresh hint under the monitor, shown when a lesson takes too long. */
.watch-page__slow {
    margin: -16px 0 20px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.watch-page__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #d0d4da;
    border-top-color: #444;
    border-radius: 50%;
    animation: watch-spin 1s linear infinite;
}

@keyframes watch-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .watch-page__spinner {
        animation-duration: 3s;
    }
}

/* Video player in an iMac-style frame (decorative only, light colours) */

.imac {
    width: 100%;
    max-width: 780px;
    margin: 0 auto 28px;
}

.imac__body {
    position: relative;
    padding: clamp(8px, 1.6vw, 14px) clamp(8px, 1.6vw, 14px) 0;
    border: 1px solid #b9bcc3;
    border-radius: clamp(10px, 2vw, 18px);
    background: linear-gradient(180deg, #dfe0e4, #cfd1d6);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.imac__camera {
    position: absolute;
    top: clamp(3px, 0.6vw, 5px);
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8f939a;
    transform: translateX(-50%);
}

.imac__glass {
    padding: clamp(2px, 0.4vw, 3px);
    border-radius: 4px;
    background: #a4a8b0;
}

.imac__screen {
    overflow: hidden;
    border-radius: 2px;
    background: #eceff3;
}

.imac__screen #watch-player-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #4b5563;
    font-size: clamp(20px, 3.4vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.imac__screen .watch-page__loading {
    border-radius: 0;
    background: #eceff3; /* the screen colour: covers the player until it is ready */
}

.imac__chin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(22px, 6vw, 52px);
    padding: 0 clamp(12px, 3vw, 28px);
}

/* The title of the lesson that is playing now, on the monitor's lower edge:
   a dark plate (variant A, chosen by Roman 2026-10-15) so it reads clearly
   on the silver frame. One size step larger on tablets and computers. */
.imac__now-playing {
    max-width: 100%;
    overflow: hidden;
    padding: 3px 10px;
    border: 1px solid #0f1115;
    border-radius: 6px;
    background: #1b1d22;
    color: #f2f3f5;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imac__now-playing:empty {
    display: none;
}

@media (min-width: 768px) {
    .imac__now-playing {
        padding: 8px 20px;
        font-size: clamp(12px, 1.8vw, 17px);
    }
}

.imac__neck {
    width: clamp(56px, 14vw, 110px);
    height: clamp(26px, 6vw, 62px);
    margin: 0 auto;
    background: linear-gradient(90deg, #cfd1d6, #e4e5e9 50%, #cfd1d6);
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.imac__foot {
    width: clamp(110px, 28vw, 220px);
    height: clamp(6px, 1.4vw, 10px);
    margin: 0 auto;
    border-radius: 4px 4px 8px 8px;
    background: linear-gradient(180deg, #e0e1e5, #c6c8cd);
}

/* ---- Headings, buttons -------------------------------------------------- */

/* Heading face: Oswald is a stand-in for the designer's font. To change the
   font, replace the @font-face below and --font-display. */
@font-face {
    font-family: "Oswald";
    src: url("../fonts/Oswald-Variable.ffe9883ec811.ttf") format("truetype");
    font-weight: 200 700;
    font-display: swap;
}

:root {
    --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
}

.page-title {
    margin: 8px 0 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gold);
}

.section-title {
    margin: 40px 0 20px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--gold);
}

.muted {
    color: var(--muted);
}

/* The designer's button: dark body with a light top glow, thin gold frame
   (gold shades sampled from the supplied picture). .btn--gold is the filled
   variant used for "Купить" and for the current part. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 13px 34px;
    border: 2px solid transparent;
    border-radius: 16px;
    background:
        linear-gradient(180deg, #3b4248 0%, #23282e 38%, #181c20 100%) padding-box,
        linear-gradient(90deg, #ab8933 0%, #f5e592 25%, #ab8933 50%, #f4e58f 75%, #ab8933 100%) border-box;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover {
    color: var(--gold-light);
    box-shadow: 0 0 18px rgba(217, 174, 75, 0.35);
}

.btn--gold {
    background:
        linear-gradient(180deg, #f7e9a0 0%, #e0bd5a 45%, #b8903a 100%) padding-box,
        linear-gradient(90deg, #ab8933 0%, #f5e592 25%, #ab8933 50%, #f4e58f 75%, #ab8933 100%) border-box;
    color: #1a1710;
}

.btn--gold:hover {
    color: #000;
    filter: brightness(1.08);
}

.btn--part {
    min-width: 116px;
    padding: 9px 20px;
    border-radius: 14px;
    font-size: 0.95rem;
}

/* ---- Product card ------------------------------------------------------------ */

.pcard-page,
.buy-page,
.pdet,
.ppart {
    margin: 28px 0 40px;
}

.pdet,
.ppart {
    max-width: 900px;
}

/* A part with a video: the text on the left, the player on the right and it stays in view while the
   long text is read; on a phone the player comes first. */
.ppart.ppart--video {
    max-width: 1280px;
}

.ppart--video .ppart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.ppart__player {
    position: sticky;
    top: 16px;
    /* the screen stands higher, beside the title (Roman, 2026-10-22) */
    margin-top: -32px;
}

/* A time at the start of a line ("12:30 Тема"): a link that rewinds the player. */
.timecode {
    margin-right: 0.45em;
    color: var(--gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.timecode:hover {
    text-decoration: underline;
}

.timecode.is-current {
    color: var(--gold-light);
    text-decoration: underline;
}

.ppart__player .video-embed,
.ppart__player .video-switch {
    margin: 0;
    max-width: none;
}

@media (max-width: 900px) {
    .ppart--video .ppart__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ppart__player {
        order: -1;
        position: static;
        margin-top: 0;
    }
}

/* the ways of paying sit side by side, so this page is wider than the text pages */
.buy-page {
    max-width: 1280px;
}

.pcard__paid {
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid var(--gold-dark);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--surface);
    line-height: 1.5;
}

.pcard__paid strong {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 1.1rem;
}

.pcard__price {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 1.35rem;
    font-weight: 600;
}

.pcard__meta {
    margin: -12px 0 20px;
    color: var(--muted);
}

.pcard {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* the picture always sits in a square. Whole or filled, which part stays in view and how much it is
   enlarged is set per product in the admin and comes as the inline style of the img
   (Product.image_style); this frame clips what an enlarged picture takes outside */
.pcard__imgbox {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--gold-dark), 0 18px 40px rgba(0, 0, 0, 0.5);
}

.pcard__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}

.pcard__video {
    margin-top: 24px;
}

.pcard__video .video-embed {
    margin: 0;
    max-width: none;
}

.pcard__short {
    font-size: 1.05rem;
    overflow-wrap: break-word;
}

.pcard__short p {
    margin: 0 0 14px;
}

.pcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

@media (max-width: 800px) {
    .pcard {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---- "Подробнее": text, cycles, buttons of parts ------------------------------------- */

.pdet__text {
    margin: 0 0 28px;
    overflow-wrap: break-word;
}

.pdet__text p,
.ppart__body p {
    margin: 0 0 14px;
}

.parts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0;
}

.cycle {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.cycle[open],
.cycle--single:hover {
    border-color: var(--gold-dark);
}

.cycle--single {
    padding: 14px 18px;
    text-decoration: none;
}

.cycle__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.cycle__summary::-webkit-details-marker {
    display: none;
}

.cycle__summary::after {
    content: "\25BE";
    color: var(--gold);
}

.cycle[open] > .cycle__summary::after {
    transform: rotate(180deg);
}

.cycle__title {
    font-weight: 600;
}

.cycle__count {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.9rem;
}

.cycle .parts {
    margin: 0;
    padding: 4px 18px 18px;
}

/* ---- One part ---------------------------------------------------------------------------- */

.ppart__cycle {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ppart__body {
    margin: 20px 0 28px;
    overflow-wrap: break-word;
}

.ppart__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 28px;
}

/* A clear way back to the list of parts: a button at the top and another at the left of the bottom row. */
.ppart__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 14px;
}

.ppart__product {
    color: var(--muted);
    font-size: 0.95rem;
    text-decoration: none;
}

.ppart__product:hover {
    color: var(--gold);
}

.btn--contents {
    min-width: 0;
    padding: 9px 22px;
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--gold-light);
}

.btn--cabinet {
    min-width: 0;
    padding: 9px 22px;
    border-radius: 14px;
    font-size: 0.95rem;
}

/* a small icon in front of the label ("Личный кабинет") */
.btn__icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -4px;
}

/* ---- News post page ------------------------------------------------------------------- */

.news-detail {
    margin: 32px 0;
}

.news-detail__image {
    float: left;
    width: 46%;
    max-width: 480px;
    margin: 0 28px 16px 0;
}

.news-detail__image img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.news-detail__info {
    min-width: 0;
    overflow-wrap: break-word;
}

.news-detail__meta {
    margin: 0 0 20px;
    color: var(--muted);
}

.news-detail__text {
    margin: 0 0 24px;
    padding: 20px 0 0;
}

.news-detail__text p {
    margin: 0 0 16px;
}

@media (max-width: 700px) {
    .news-detail__image {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 16px;
    }
}

.cycle__text {
    padding: 0 18px;
    overflow-wrap: break-word;
}

.cycle__text p {
    margin: 0 0 12px;
}

/* ---- Notice strip across the top of every page (switched in the admin) ---- */

.site-notice {
    padding: 10px 16px;
    background: #b3261e;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

/* ---- Topics of the "Сервис" page: the cards of a big course's contents, with text inside ---- */

.service-topics {
    margin: 0 0 56px;
}

.service-topics .section-title {
    margin-top: 8px;
}

/* the arrow sits at the right edge of the card, as in the contents of a big course */
.service-topics .cycle__summary::after {
    margin-left: auto;
}

.service-topics .cycle__title {
    font-size: 1.05rem;
}

.topic__body {
    padding-bottom: 8px;
}

.topic__body ul,
.topic__body ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.topic__body li {
    margin-bottom: 8px;
}

.topic__body a {
    color: var(--gold);
}

/* ---- Currency menu in the header ("Валюта", a drop-down list) and the notes about prices ---- */

.currency-menu {
    position: relative;
    align-self: center;
    margin-left: 16px;
    font-size: 0.75rem;
}

.currency-menu summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.currency-menu summary::-webkit-details-marker {
    display: none;
}

.currency-menu summary::after {
    content: "\25BE";
    color: var(--gold);
}

.currency-menu[open] summary {
    border-color: var(--gold-dark);
}

.currency-menu__current {
    color: var(--gold);
    font-weight: 600;
}

.currency-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.currency-menu__list a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.06em;
}

.currency-menu__list a:hover,
.currency-menu__list a.is-active {
    color: var(--gold);
}

.currency-menu__list a.is-active {
    font-weight: 600;
}

.buy-note,
.payment-method__note {
    margin: 8px 0 12px;
    font-size: 0.92rem;
}

.buy-quantity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 12px 0 16px;
}

.buy-quantity label {
    font-weight: 600;
}

.buy-quantity input {
    width: 5.5em;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
}

.buy-quantity__total {
    margin: 0;
}

/* The burger button must never be squeezed out by the currency menu. */
.site-header__nav-toggle {
    flex-shrink: 0;
}


/* The currency menu is the last item of the header: the section names stay next to the logo. */
@media (min-width: 1025px) {
    .site-header__nav-wrap {
        margin-right: auto;
    }
}

/* Catalog by floors (public page and cabinet) */
.catalog { margin-top: 16px; }
.cat-chips, .cat-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; text-decoration: none; }
.cat-chip b { color: var(--text); font-weight: 600; }
a.cat-chip:hover { color: var(--gold); border-color: var(--gold-dark); }
.cat-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--gold-dark); border-radius: 8px; background: var(--surface-2); }
.cat-banner__button { padding: 8px 14px; border-radius: 6px; background: var(--gold); color: #241d08; font-weight: 600; text-decoration: none; }
.cat-section { margin-bottom: 28px; }
.cat-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-section__head h3 { margin: 0; font-size: 1.15rem; }
.cat-section__head small { color: var(--muted); }
.cat-bar { height: 4px; margin: 8px 0 12px; border-radius: 2px; background: var(--border); }
.cat-bar i { display: block; height: 4px; border-radius: 2px; background: var(--gold); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.cat-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; }
.cat-card:hover { border-color: var(--gold-dark); }
.cat-card.is-continue { border-color: var(--gold); }
.cat-card.is-locked { opacity: 0.8; }
.cat-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.cat-card__name { font-weight: 600; }
.cat-card__text { color: var(--muted); font-size: 13px; }
.cat-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.cat-cell { display: inline-block; width: 11px; height: 11px; border-radius: 2px; box-sizing: border-box; }
.cat-cell--seen { background: var(--gold); }
.cat-cell--available { border: 1.5px solid var(--gold); }
.cat-cell--soon { background: var(--border); }
.cat-cell--locked { border: 1.5px solid #3b414c; }
.cat-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; color: var(--muted); font-size: 12px; }
.cat-tag { padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); }
.cat-tag--go { background: var(--gold); border-color: var(--gold); color: #241d08; font-weight: 600; }
.cat-tag--done { color: var(--ok); }
.cat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.cat-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }
.cab-sections > summary { cursor: pointer; color: var(--muted); }

/* Public catalog as a table of contents */
.cidx__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.cidx__nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; }
.cidx__nav a { padding: 7px 10px; border-radius: 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.cidx__nav a b { display: block; color: var(--text); font-weight: 500; }
.cidx__nav a:hover { background: var(--surface); color: var(--text); }
.cidx__total { margin: 10px 0 0; padding: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.cidx__section { margin-bottom: 22px; scroll-margin-top: 84px; }
.cidx__section h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 1.2rem; }
.cidx__section h3 small { color: var(--muted); font-size: 13px; font-weight: 400; }
.cidx__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.cidx__row:hover, .cidx__row.is-on { background: var(--surface); }
.cidx__row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cidx__num { color: var(--muted); font-size: 13px; }
.cidx__name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cidx__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cidx__name i { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--border); transform: translateY(-4px); }
.cidx__row:hover .cidx__name span, .cidx__row.is-on .cidx__name span, .cidx__row:focus-visible .cidx__name span { color: var(--gold); }
.cidx__parts { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cidx__price { min-width: 70px; text-align: right; font-size: 14px; white-space: nowrap; }
.cidx__free { padding: 1px 7px; border-radius: 4px; background: var(--gold); color: #241d08; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cidx__preview { position: sticky; top: 84px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cidx__preview img, .cidx__noimg { display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 12px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.cidx__preview h4 { margin: 0 0 6px; font-size: 1.15rem; }
.cidx__preview p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.cidx__preview .cat-cells { margin-bottom: 10px; }
.cidx__preview .cat-banner__button { display: inline-block; }
@media (max-width: 900px) {
    .cidx__grid { grid-template-columns: 1fr; }
    .cidx__nav, .cidx__preview { display: none; }
}
@media (max-width: 560px) {
    .cidx__row { grid-template-columns: minmax(0, 1fr) auto; }
    .cidx__num, .cidx__parts { display: none; }
    .cidx__name span { white-space: normal; }
}

.cidx__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 22px; }
.cidx__info > div { padding: 14px; border: 1px solid var(--gold-dark); border-radius: 10px; background: var(--surface); }
.cidx__info b { display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cidx__info p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .cidx__info { grid-template-columns: 1fr; } }