/* ==========================================================================
   STORETHE1 / THE1 — Shared stylesheet
   Design system: Kinetic Obsidian
   Used by every page. Loaded after Tailwind CDN + tailwind config.
   ========================================================================== */

body {
    background-color: #131313;
    color: #e5e2e1;
    scroll-behavior: smooth;
}

/* Fallback so the fixed header still behaves even if the Tailwind CDN
   script is slow, blocked (ad-blocker/CSP), or offline. Tailwind's own
   utility classes override these once it loads, since they are more
   specific / loaded later in the cascade. */
header.fixed,
nav.fixed.top-0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(19, 19, 19, 0.9);
}

.glass-panel {
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(32, 32, 31, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.cyan-glow-hover:hover {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.15);
    border-color: rgba(0, 242, 255, 0.3);
}

.neon-border-focus:focus-within {
    border-color: #00f2ff;
    box-shadow: 0 0 0 1px #00f2ff;
}

.btn-glow {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

.btn-glow:hover {
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
}

.card-shimmer {
    position: relative;
    overflow: hidden;
}

/* Блик по карточке — украшение, но он лежит поверх содержимого во всю
   площадь и без этой строки съедает нажатия: кнопка «в корзину» работала
   с клавиатуры и из кода, а мышью — нет. Курсор попадал в псевдоэлемент,
   и карточка выглядела сломанной. */
.card-shimmer::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 55%
    );
    transform: rotate(45deg);
    transition: transform 0.6s;
}

.card-shimmer:hover::after {
    transform: translate(25%, 25%) rotate(45deg);
}

.inner-glow {
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.05);
}

.electric-glow:hover {
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.25);
}

.cyan-text-glow {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #131313;
}

::-webkit-scrollbar-thumb {
    background: #353535;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00f2ff;
}

/* Long machine-style headings (e.g. STORETHE1_SAVED_HARDWARE) contain no
   spaces, so they cannot wrap and push the page wider than the viewport
   on small screens. Allow them to break. */
h1, h2, h3, h4 {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Cart badge (injected next to the shopping-cart icon by main.js)
   ========================================================================== */

.the1-cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Собственный отступ: на части страниц у контейнера шапки нет gap,
       и иконки накладывались друг на друга. */
    margin-inline-start: 10px;
}

.the1-lang { margin-inline-start: 10px; }

.the1-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #00f2ff;
    color: #00363a;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.the1-cart-badge.is-visible {
    transform: scale(1);
}

/* ==========================================================================
   Toast notifications
   ========================================================================== */

#the1-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.the1-toast {
    background: rgba(19, 19, 19, 0.95);
    border: 1px solid rgba(0, 242, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #e5e2e1;
    padding: 14px 20px;
    border-radius: 0.5rem;
    font-family: Inter, sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    max-width: 320px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.the1-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.the1-toast .material-symbols-outlined {
    color: #00f2ff;
    flex-shrink: 0;
}

/* ==========================================================================
   Mobile navigation
   Burger sits on the LEFT of the header (site convention); the panel
   slides in from the left to match.
   ========================================================================== */

.the1-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #e5e2e1;
    padding: 4px;
    margin-right: 12px;
    position: relative;
}

@media (max-width: 1199px) {
    .the1-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

#the1-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(320px, 85vw);
    background: rgba(14, 14, 14, 0.98);
    backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 88px 24px 32px;
}

#the1-mobile-nav.is-open {
    transform: translateX(0);
}

#the1-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 39;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#the1-mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

#the1-mobile-nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e5e2e1;
    font-family: Inter, sans-serif;
    letter-spacing: 0.02em;
}

#the1-mobile-nav a:hover {
    color: #00f2ff;
}

#the1-mobile-nav .the1-mobile-group {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00f2ff;
    margin-top: 20px;
    margin-bottom: 4px;
}

/* ==========================================================================
   Desktop mega-menu dropdown (Gaming Gear / Tech & Smart Home)
   ========================================================================== */

.mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.group:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   Footer trust badges (Free Shipping / Secure Payment / Easy Returns / Fast Support)
   ========================================================================== */

.the1-footer-badges {
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 32px 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
    .the1-footer-badges {
        grid-template-columns: repeat(4, 1fr);
        /* Боковой padding убран: из-за него ряд был уже разделительной линии
           и нижней строки подвала. Подписи разной длины, поэтому содержимое
           ячейки центрируем — иначе весь ряд смещён влево, а справа остаётся
           пустое поле. */
        padding: 32px 0;
    }

    .the1-footer-badge {
        justify-content: center;
    }
}

.the1-footer-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.the1-footer-badge > div {
    min-width: 0;
}

.the1-footer-badge .material-symbols-outlined {
    color: #00f2ff;
    font-size: 28px;
    width: 28px;
    flex: 0 0 28px;
    overflow: hidden;
    white-space: nowrap;
}

.the1-footer-badge-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e5e2e1;
    margin: 0 0 2px;
    overflow-wrap: anywhere;
}

.the1-footer-badge-text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #b9cacb;
    margin: 0;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Form validation state
   ========================================================================== */

.the1-input-error {
    border-color: #ffb4ab !important;
    box-shadow: 0 0 0 1px #ffb4ab;
}

.the1-error-text {
    color: #ffb4ab;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.the1-error-text.is-visible {
    display: block;
}

/* ==========================================================================
   Checkout: cart line item, promo state, success modal
   ========================================================================== */

.the1-qty-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(132, 148, 149, 0.4);
    border-radius: 0.375rem;
    color: #e5e2e1;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-qty-btn:hover {
    border-color: #00f2ff;
    color: #00f2ff;
}

.the1-remove-btn {
    color: #849495;
    cursor: pointer;
    transition: color 0.2s ease;
}

.the1-remove-btn:hover {
    color: #ffb4ab;
}

.the1-promo-message {
    font-size: 12px;
    margin-top: 6px;
}

.the1-promo-message.success {
    color: #00f2ff;
}

.the1-promo-message.error {
    color: #ffb4ab;
}

#the1-success-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

#the1-success-modal.is-open {
    display: flex;
}

#the1-success-modal .the1-modal-card {
    max-width: 420px;
    width: 90%;
    text-align: center;
    padding: 48px 32px;
}

.the1-empty-cart {
    text-align: center;
    padding: 32px 0;
    color: #b9cacb;
}

/* ==========================================================================
   MOBILE / TABLET HARDENING
   The exported markup uses several desktop-only values with no responsive
   prefix (grid-cols-12, w-[600px], h-[600px], 48px display type). These
   override them on small screens. !important is used deliberately: the
   Tailwind CDN injects its stylesheet at runtime and we cannot rely on
   winning the cascade by source order alone.
   ========================================================================== */

/* Never allow sideways scrolling of the whole page. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, svg, iframe {
    max-width: 100%;
}

@media (max-width: 1023px) {
    /* The hover mega-menu is a desktop affordance; on touch devices the
       burger panel is used instead. Hidden so its 600px width can never
       widen the page. */
    .mega-menu {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Desktop nav row is hidden on mobile (burger takes over). */
    header .hidden.md\:flex,
    nav.fixed .hidden.md\:flex {
        display: none !important;
    }

    /* 12-column grids collapse to a single column. */
    [class*="grid-cols-12"] {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    /* Any col-span-* becomes full width once the grid is single-column. */
    [class*="col-span-"] {
        grid-column: 1 / -1 !important;
    }

    /* Multi-column grids of 3+ collapse to one; 2-column stays two. */
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    [class*="grid-cols-5"],
    [class*="grid-cols-6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Hard pixel widths must not exceed the screen. */
    [class*="w-["],
    [class*="min-w-["] {
        max-width: 100% !important;
    }

    /* Fixed tall sections become content-height. */
    [class*="h-[6"],
    [class*="h-[7"],
    [class*="h-[8"] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Oversized display type. */
    .text-display-lg {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .text-8xl, .text-7xl, .text-6xl {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    .text-headline-lg {
        font-size: 24px !important;
    }

    /* Wide tables scroll inside their own box rather than the page. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /* Rows of items that were never told to wrap. */
    .flex.items-center.gap-8,
    .flex.items-center.gap-12 {
        flex-wrap: wrap;
    }

    /* Comfortable tap targets. */
    button, a[role="button"] {
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    [class*="grid-cols-5"],
    [class*="grid-cols-6"] {
        grid-template-columns: 1fr !important;
    }

    /* Один столбец, но не во всю ширину: колонка по самому широкому значку и
       по центру экрана. Поля слева и справа равные, левый край подписей
       остаётся ровным — при центрировании каждого значка по отдельности он
       был бы рваным. */
    .the1-footer-badges {
        grid-template-columns: minmax(0, max-content) !important;
        justify-content: center;
    }
}

/* ==========================================================================
   Text wordmark (replaces the logo image, which lived on an expiring host)
   ========================================================================== */

.the1-wordmark {
    font-family: "JetBrains Mono", monospace;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #00f2ff;
    text-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
    white-space: nowrap;
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 767px) {
    .the1-wordmark {
        font-size: 17px;
    }
}

footer .the1-wordmark {
    color: #e5e2e1;
    text-shadow: none;
    font-size: 18px;
}

/* A broken image must never widen the page with its alt text. */
img {
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

/* The newsletter row (input + button) must wrap on narrow screens. */
@media (max-width: 767px) {
    form.flex, .flex.gap-4 > input, .flex.gap-2 > input {
        min-width: 0;
    }
    .flex.gap-4:has(> input), .flex.gap-2:has(> input) {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   RTL — арабская версия
   При dir="rtl" вёрстка зеркалится. Используются логические свойства,
   поэтому большинство отступов переворачивается само; ниже — то, что
   в исходной разметке задано жёстко и требует явного переворота.
   ========================================================================== */

/* Арабский шрифт: JetBrains Mono и Inter не содержат арабских глифов.
   Noto Sans Arabic и Noto Kufi Arabic объявлены в assets/fonts/fonts.css
   и лежат на нашем сервере. Раньше здесь стоял @import с адресом Google —
   и он не работал: по правилам CSS @import обязан идти в начале файла,
   а этот стоял в шестистах строках от начала, и браузер его пропускал.
   Арабские страницы всё это время показывались системным шрифтом. */

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: "Noto Sans Arabic", Inter, sans-serif;
}

/* Значки — исключение. Правило выше задаёт арабский шрифт всем кнопкам,
   а кнопка-иконка теряла шрифт Material Symbols и показывала служебное
   имя значка словом: вместо корзины — «shopping_cart». Задевало каждую
   кнопку-иконку на арабских страницах. */
html[dir="rtl"] .material-symbols-outlined,
html[dir="rtl"] button.material-symbols-outlined,
html[dir="rtl"] .material-symbols-rounded {
    font-family: "Material Symbols Outlined", "Material Symbols Rounded";
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .the1-wordmark,
html[dir="rtl"] [class*="font-headline"],
html[dir="rtl"] [class*="font-display"] {
    font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
    letter-spacing: 0;
}

/* Текст выравнивается по правому краю. */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* Отступы, заданные односторонне, зеркалим. */
html[dir="rtl"] [class*="ml-"]:not([class*="rtl-keep"]) { margin-left: 0; }
html[dir="rtl"] [class*="mr-"]:not([class*="rtl-keep"]) { margin-right: 0; }
html[dir="rtl"] .ml-2 { margin-right: 0.5rem; }
html[dir="rtl"] .ml-4 { margin-right: 1rem; }
html[dir="rtl"] .mr-2 { margin-left: 0.5rem; }
html[dir="rtl"] .mr-4 { margin-left: 1rem; }

/* Абсолютно позиционированные элементы (бейджи на карточках и т.п.). */
html[dir="rtl"] .left-0 { left: auto; right: 0; }
html[dir="rtl"] .right-0 { right: auto; left: 0; }
html[dir="rtl"] .left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }

/* Мобильная панель меню выезжает с противоположной стороны. */
html[dir="rtl"] #the1-mobile-nav {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(100%);
}

html[dir="rtl"] #the1-mobile-nav.is-open {
    transform: translateX(0);
}

html[dir="rtl"] .the1-burger {
    margin-right: 0;
    margin-left: 12px;
}

/* Бейдж корзины. */
html[dir="rtl"] .the1-cart-badge {
    right: auto;
    left: -8px;
}

/* Стрелки в тексте должны смотреть в другую сторону. */
html[dir="rtl"] .the1-arrow { display: inline-block; transform: scaleX(-1); }

/* Числа, цены и артикулы остаются слева направо даже в арабском тексте. */
bdi, .the1-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Направление абзаца — по его собственному тексту, а не по странице.
   Иначе в арабской раскладке знаки препинания латинских фраз
   перескакивают влево: «ULTIMATE PRECISION.» показывалось как
   «.ULTIMATE PRECISION». Задевает названия товаров, модели и любые
   латинские вставки, поэтому правило общее, а не точечное. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] blockquote,
html[dir="rtl"] label,
html[dir="rtl"] button,
html[dir="rtl"] a {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   MOBILE FIX v2 — секции с крупными внутренними отступами
   Причина: элементы grid/flex по умолчанию имеют min-width:auto и не могут
   сжаться меньше своего минимального содержимого. Строка «поле + кнопка»
   требовала ~373px внутри контейнера шириной 247px, и вся секция
   расширялась за пределы экрана.
   ========================================================================== */

@media (max-width: 767px) {
    /* Разрешаем детям сеток и флексов сжиматься. */
    .grid > *,
    .flex > * {
        min-width: 0;
    }

    /* Строки «поле ввода + кнопка» переносятся на две строки.

       :not(.flex-col) обязателен. Без него правило попадало и в колоночные
       флексы — например в тело карточки каталога (.flex.flex-col.gap-3).
       У колоночного флекса перенос раскладывает содержимое во ВТОРУЮ
       КОЛОНКУ, а не на вторую строку: кнопка «в корзину» уезжала за
       правый край карточки и там обрезалась её overflow: hidden. */
    form.flex,
    main .flex.gap-2:not(.flex-col),
    main .flex.gap-3:not(.flex-col),
    main .flex.gap-4:not(.flex-col) {
        flex-wrap: wrap;
    }

    /* Шапка — всегда одна строка, иначе иконки уезжают на второй ряд
       и накладываются на логотип. */
    header .flex,
    nav.fixed .flex {
        flex-wrap: nowrap !important;
    }
    header, nav.fixed.top-0 { overflow: visible; }

    /* Поле и кнопка в такой строке занимают всю ширину — каждое на своей
       строке. В колоночном флексе flex-basis считается от высоты, поэтому
       здесь тоже нужен :not(.flex-col). */
    form.flex > input,
    form.flex > button,
    .flex.gap-3:not(.flex-col) > input,
    .flex.gap-3:not(.flex-col) > button {
        flex: 1 1 100% !important;
    }

    input, select, textarea {
        min-width: 0 !important;
    }

    /* Десктопные внутренние отступы съедали половину ширины экрана. */
    .p-12 { padding: 1.25rem !important; }
    .p-10 { padding: 1.125rem !important; }
    .p-8  { padding: 1rem !important; }
    .gap-12 { gap: 1.5rem !important; }
    .gap-8  { gap: 1rem !important; }

    /* Кнопки с широкими боковыми отступами. */
    .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

@media (max-width: 520px) {
    /* Две колонки карточек в узком контейнере не оставляют места тексту. */
    .grid-cols-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
    /* Строки «название слева — статус справа» переносятся, если не влезают.
       Шапка исключена: там раскладка должна оставаться в одну строку. */
    main .flex.justify-between {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ==========================================================================
   Избранное (wishlist)
   ========================================================================== */

.the1-wish-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(132, 148, 149, 0.35);
    border-radius: 9999px;
    background: rgba(19, 19, 19, 0.72);
    backdrop-filter: blur(6px);
    color: #b9cacb;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-variation-settings: "FILL" 0;
}

.the1-wish-btn:hover {
    color: #ff6b8a;
    border-color: #ff6b8a;
}

.the1-wish-btn.is-active {
    color: #ff4d6d;
    border-color: #ff4d6d;
    font-variation-settings: "FILL" 1;
    box-shadow: 0 0 12px rgba(255, 77, 109, 0.35);
}

html[dir="rtl"] .the1-wish-btn { right: auto; left: 10px; }

.the1-wishlist-icon {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.the1-wishlist-icon:hover { color: #ff4d6d; }

/* --- страница избранного --- */

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

.the1-wish-card,
.the1-arrival-card {
    position: relative;
    background: rgba(32, 32, 31, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 14px;
    transition: all 0.3s ease;
}

.the1-wish-card:hover,
.the1-arrival-card:hover {
    border-color: rgba(0, 242, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.12);
}

.the1-wish-media {
    aspect-ratio: 1 / 1;
    background: #1a1a1a;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.the1-wish-media img { width: 100%; height: 100%; object-fit: cover; }

.the1-wish-ph { font-size: 40px; color: #4a4a4a; }

.the1-wish-card h3,
.the1-arrival-card h3 {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1.35;
    margin: 0 0 6px;
    color: #e5e2e1;
}

.the1-wish-price {
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    color: #00f2ff;
    margin: 0 0 12px;
}

.the1-wish-add,
.the1-arrival-card button:not(.the1-wish-btn) {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 242, 255, 0.5);
    background: transparent;
    color: #00f2ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-wish-add:hover,
.the1-arrival-card button:not(.the1-wish-btn):hover {
    background: #00f2ff;
    color: #00363a;
}

.the1-wish-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    background: rgba(19, 19, 19, 0.8);
    border: none;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    color: #849495;
    cursor: pointer;
    font-size: 17px;
}

.the1-wish-remove:hover { color: #ffb4ab; }

.the1-empty-state {
    text-align: center;
    padding: 48px 16px;
    color: #b9cacb;
}

.the1-empty-state .material-symbols-outlined {
    font-size: 46px;
    color: #3d3d3d;
    display: block;
    margin-bottom: 12px;
}

.the1-empty-state a {
    color: #00f2ff;
    text-decoration: underline;
}

/* ==========================================================================
   Новые поступления
   ========================================================================== */

.the1-arrivals {
    padding: 64px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.the1-arrivals-inner { max-width: 1280px; margin: 0 auto; }

.the1-arrivals-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.the1-arrivals-head h2 {
    font-family: "JetBrains Mono", monospace;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: #e5e2e1;
    margin: 0;
}

.the1-arrivals-head a {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #00f2ff;
    text-decoration: none;
}

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

.the1-arrival-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    background: #00f2ff;
    color: #00363a;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
}

html[dir="rtl"] .the1-arrival-tag { left: auto; right: 22px; }

@media (max-width: 520px) {
    .the1-wish-grid,
    .the1-arrivals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .the1-arrivals { padding: 40px 16px; }
}


/* ==========================================================================
   Переключатель страны и языка — панель в стиле селектора Shopify
   ========================================================================== */

.the1-lang { position: relative; display: inline-flex; flex-shrink: 0; }

.the1-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(132, 148, 149, 0.35);
    border-radius: 8px;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(8px);
    color: #b9cacb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-lang-btn:hover,
.the1-lang.is-open .the1-lang-btn {
    color: #00f2ff;
    border-color: rgba(0, 242, 255, 0.55);
    box-shadow: 0 0 14px rgba(0, 242, 255, 0.18);
}

.the1-lang-flag { font-size: 15px; line-height: 1; }

.the1-lang-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.the1-lang-caret { font-size: 16px; transition: transform 0.25s ease; }
.the1-lang.is-open .the1-lang-caret { transform: rotate(180deg); }

/* ---- панель ---- */

.the1-market-panel {
    box-sizing: border-box;   /* ширину задаёт скрипт — с учётом отступов */
    position: fixed;          /* координаты задаёт скрипт */
    top: 0;
    left: 0;
    width: min(440px, calc(100vw - 24px));
    padding: 18px;
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7),
                0 0 26px rgba(0, 242, 255, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 70;
    max-height: 78vh;
    overflow-y: auto;
}

html[dir="rtl"] .the1-market-panel { right: auto; left: 0; }

.the1-market-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.the1-market-search {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #131313;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    color: #e5e2e1;
    font-family: Inter, sans-serif;
    font-size: 14px;
    outline: none;
}

.the1-market-search:focus {
    border-color: rgba(0, 242, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.35);
}

.the1-market-search::placeholder { color: #6f7878; }

.the1-market-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e5e2e1;
}

.the1-market-now {
    font-weight: 400;
    font-size: 13px;
    color: #8a9394;
}

.the1-market-countries,
.the1-market-langs {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.the1-market-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #d6d2d0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    transition: background 0.15s ease;
}

.the1-market-row:hover { background: rgba(255, 255, 255, 0.06); }

.the1-market-row.is-active {
    background: rgba(0, 242, 255, 0.1);
    color: #00f2ff;
}

.the1-market-flag { font-size: 17px; line-height: 1; }
.the1-market-name { flex: 1; }
.the1-market-cur { color: #8a9394; font-size: 13px; }
.the1-market-row.is-active .the1-market-cur { color: #00f2ff; }

/* языки в две колонки, как в образце */
.the1-market-langs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin-bottom: 0;
}

.the1-market-lang {
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #d6d2d0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    transition: background 0.15s ease;
}

.the1-market-lang:hover { background: rgba(255, 255, 255, 0.06); }

.the1-market-lang.is-active {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
}

.the1-market-empty {
    display: none;
    text-align: center;
    padding: 14px 0 4px;
    color: #8a9394;
    font-size: 13px;
}

.the1-market-panel.is-empty .the1-market-empty { display: block; }

@media (max-width: 767px) {
    .the1-lang-btn { height: 30px; padding: 0 7px; gap: 4px; }
    .the1-lang-code { font-size: 11px; }

    /* Шапка использует backdrop-filter, а он делает элемент содержащим
       блоком для position:fixed — панель прилипала к низу шапки и была
       почти не видна. Поэтому здесь только absolute. */
    .the1-market-panel { padding: 14px; }
    .the1-market-search { margin-bottom: 12px; padding: 10px 12px; }
    .the1-market-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
    .the1-market-lang { padding: 9px 8px; font-size: 13px; }
    .the1-market-row { padding: 8px; font-size: 13px; }
}

@media (max-width: 480px) {
    /* На узких экранах в шапке шесть элементов, кнопку языка приходится
       ужимать. Убираем стрелку, но код языка оставляем: без него виден
       только флаг рынка, и понять, какой язык выбран, невозможно.
       Стрелке нужен двойной селектор — класс material-symbols-outlined
       объявлен ниже и иначе перебивает display. */
    .the1-lang-caret.material-symbols-outlined { display: none; }
    .the1-lang-code { display: inline; font-size: 11px; }
    .the1-lang-btn { padding: 0 7px; gap: 4px; }
    .the1-cart-icon-wrap { margin-inline-start: 8px; }
}

/* ==========================================================================
   Карго-доставка на чекауте
   ========================================================================== */

.the1-cargo-lead {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #b9cacb;
    margin: 0 0 14px;
}

.the1-cargo-sub { margin-top: 22px; }

.the1-cargo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.the1-cargo-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(132, 148, 149, 0.35);
    border-radius: 10px;
    background: rgba(26, 26, 26, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-cargo-card:hover { border-color: rgba(0, 242, 255, 0.45); }

.the1-cargo-card.is-active {
    border-color: #00f2ff;
    background: rgba(0, 242, 255, 0.07);
    box-shadow: 0 0 16px rgba(0, 242, 255, 0.15);
}

.the1-cargo-card input { margin-top: 3px; accent-color: #00f2ff; flex-shrink: 0; }

.the1-cargo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.the1-cargo-name {
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    font-weight: 700;
    color: #e5e2e1;
}

.the1-cargo-card.is-active .the1-cargo-name { color: #00f2ff; }

.the1-cargo-desc {
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #a9b4b5;
}

.the1-cargo-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #7d8788;
}

.the1-cargo-code { margin-top: 20px; }

.the1-cargo-code label {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e5e2e1;
    margin-bottom: 8px;
}

.the1-cargo-code input {
    width: 100%;
    padding: 12px 14px;
    background: #131313;
    border: 1px solid rgba(132, 148, 149, 0.4);
    border-radius: 8px;
    color: #e5e2e1;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    outline: none;
}

.the1-cargo-code input:focus {
    border-color: #00f2ff;
    box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.4);
}

.the1-cargo-hint {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #7d8788;
    margin: 6px 0 0;
}

.the1-cargo-types { display: flex; flex-wrap: wrap; gap: 10px; }

.the1-cargo-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(132, 148, 149, 0.35);
    border-radius: 8px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #b9cacb;
    transition: all 0.2s ease;
}

.the1-cargo-type.is-active {
    border-color: #00f2ff;
    color: #00f2ff;
    background: rgba(0, 242, 255, 0.07);
}

.the1-cargo-type input { accent-color: #00f2ff; }

.the1-cargo-note {
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a9394;
    margin: 16px 0 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid rgba(132, 148, 149, 0.3);
}

.the1-cargo-warn {
    border-inline-start-color: rgba(255, 180, 171, 0.6);
    color: #c9a9a5;
}

/* Срок и цена на карточке перевозчика */
.the1-cargo-card { align-items: flex-start; }

.the1-cargo-compare {
    display: block;
    font-size: 12px;
    color: #7d8788;
    margin-top: 4px;
}

.the1-cargo-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 8px;
}

.the1-cargo-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.the1-cargo-fact em {
    font-style: normal;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7d8788;
}

.the1-cargo-fact b {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    color: #e5e2e1;
}

.the1-cargo-card.is-active .the1-cargo-fact b { color: #00f2ff; }

@media (max-width: 420px) {
    /* Шесть элементов в шапке при 360px не помещаются — ужимаем. */
    .the1-lang-btn { height: 28px; padding: 0 5px; }
    .the1-cart-icon-wrap { margin-inline-start: 6px; }
    .the1-lang { margin-inline-start: 6px; }
    header .material-symbols-outlined,
    nav.fixed .material-symbols-outlined { font-size: 21px; }
    .the1-wordmark { font-size: 15px; }
}

@media (max-width: 767px) {
    /* Шапка в одну строку: содержимое обязано сжиматься, а лишнее
       прячется, иначе строка вылезает за правый край. */
    header > .flex,
    nav.fixed.top-0 > .flex { min-width: 0; overflow: hidden; }

    header .flex > *,
    nav.fixed .flex > * { min-width: 0; }
}

@media (max-width: 767px) {
    /* Десктопные промежутки в шапке (gap-6/8/12) на телефоне не оставляют
       места иконкам — строка выходила за экран. */
    header .flex.gap-4, nav.fixed .flex.gap-4,
    header .flex.gap-6, nav.fixed .flex.gap-6,
    header .flex.gap-8, nav.fixed .flex.gap-8,
    header .flex.gap-12, nav.fixed .flex.gap-12 {
        gap: 8px !important;
    }
    header .p-2, nav.fixed .p-2 { padding: 2px !important; }
}

@media (max-width: 400px) {
    /* Самые узкие экраны: убираем боковые отступы шапки и лишний воздух. */
    header > .flex, nav.fixed.top-0 > .flex {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 4px;
    }
    header .flex.gap-4, nav.fixed .flex.gap-4,
    header .flex.gap-6, nav.fixed .flex.gap-6,
    header .flex.gap-8, nav.fixed .flex.gap-8 { gap: 5px !important; }
    .the1-cart-icon-wrap { margin-inline-start: 4px; }
    .the1-lang { margin-inline-start: 4px; }
}

@media (max-width: 370px) {
    /* На 360px логотип и шесть элементов не умещаются — прячем текстовый
       логотип, бренд остаётся виден по иконкам и в подвале. */
    header .the1-wordmark, nav.fixed .the1-wordmark { font-size: 13px; }
    header .flex.gap-4, nav.fixed .flex.gap-4,
    header .flex.gap-6, nav.fixed .flex.gap-6,
    header .flex.gap-8, nav.fixed .flex.gap-8 { gap: 3px !important; }
}

.the1-empty-sub {
    font-size: 13px;
    color: #7d8788;
    margin-top: 6px;
}

/* ==========================================================================
   Избранное: кнопка, которая уже была в карточке товара
   Подключаем её к логике, но не превращаем в плавающий кружок.
   ========================================================================== */

.the1-wish-btn.the1-wish-inline {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0.5rem;
    font-size: inherit;
}

.the1-wish-btn.is-active .material-symbols-outlined {
    color: #ff4d6d;
    font-variation-settings: "FILL" 1;
}

.the1-wish-btn.the1-wish-inline.is-active {
    border-color: #ff4d6d;
    box-shadow: none;
}

/* Иконка бургера: шрифт Material Symbols задаёт своё display и
   перебивал наше скрытие — отсюда бургер появлялся на десктопе. */
.the1-burger { display: none !important; }

@media (max-width: 1199px) {
    .the1-burger { display: inline-flex !important; }
}

/* Логотип в подвале — тем же цветом, что и в шапке. */
footer .the1-wordmark {
    color: #00f2ff;
    text-shadow: 0 0 12px rgba(0, 242, 255, 0.3);
    font-size: 20px;
}

/* ==========================================================================
   Подвал: ссылки на политики
   Выравниваем их по строке копирайта и подсвечиваем фирменным цветом.
   ========================================================================== */

footer .grid {
    align-items: end;
}

/* Tailwind-класс hover:text-on-surface перебивал обычное правило,
   поэтому нужен приоритет. */
footer a:hover,
footer a:focus-visible {
    color: #00f2ff !important;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.35);
}

footer a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

@media (max-width: 767px) {
    /* На телефоне ссылки идут строкой с переносом, а не столбиком. */
    footer .flex.flex-wrap {
        justify-content: flex-start;
        gap: 10px 18px;
    }
}

/* ==========================================================================
   Меню личного кабинета: иконки одним цветом
   Активный пункт по-прежнему отличается фоном.
   ========================================================================== */

aside nav a .material-symbols-outlined,
nav.flex.flex-col a .material-symbols-outlined {
    color: #00f2ff;
}

aside nav a:hover .material-symbols-outlined,
nav.flex.flex-col a:hover .material-symbols-outlined {
    color: #00f2ff;
    filter: drop-shadow(0 0 6px rgba(0, 242, 255, 0.45));
}

/* Единый ряд ссылок в подвале */
.the1-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    justify-content: flex-end;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.the1-footer-links a {
    color: #8a9394;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.the1-footer-links a:hover,
.the1-footer-links a:focus-visible {
    color: #00f2ff;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.35);
}

@media (max-width: 767px) {
    .the1-footer-links { justify-content: flex-start; gap: 10px 18px; }
}

/* ==========================================================================
   Выпадающее меню категорий
   Полупрозрачная панель просвечивала текст страницы под собой и мешала
   читать пункты. Делаем фон плотным.
   ========================================================================== */

.mega-menu .glass-panel {
    background: #0d0d0d;
    backdrop-filter: none;
    border: 1px solid rgba(0, 242, 255, 0.18);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75),
                0 0 24px rgba(0, 242, 255, 0.07);
}

/* ==========================================================================
   Карточки новинок и избранного: кнопки на одной линии
   Названия товаров разной длины — из-за этого кнопка «в корзину» у одной
   карточки опускалась ниже, чем у соседних. Прижимаем её к низу.
   ========================================================================== */

.the1-arrival-card,
.the1-wish-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.the1-arrival-card h3,
.the1-wish-card h3 {
    min-height: 2.7em;      /* место под две строки названия */
    display: flex;
    align-items: flex-start;
}

.the1-arrival-card .the1-wish-price,
.the1-wish-card .the1-wish-price {
    margin-top: auto;       /* цена прижата к низу блока текста */
    padding-top: 8px;
}

.the1-arrival-card button:not(.the1-wish-btn),
.the1-wish-card .the1-wish-add {
    margin-top: 12px;
}

.the1-arrivals-grid,
.the1-wish-grid {
    align-items: stretch;
}



/* =====================================================================
   ВАЖНО: всё ниже относится к разметке, которую строит main.js.

   Tailwind подключён через CDN и собирает стили, сканируя HTML при загрузке
   страницы. Элементы, добавленные скриптом позже, он не видит, поэтому их
   классы Tailwind не работают. Кроме того, Tailwind вставляет свой сброс
   стилей ПОСЛЕ этого файла и перебивает одиночные селекторы.

   Поэтому здесь используются собственные классы the1-* и селекторы из двух
   частей — их специфичность выше, чем у сброса Tailwind.
   ===================================================================== */

/* ------------------------------------------------- меню в шапке */

.the1-nav {
  display: none;
  align-items: center;
  gap: 32px;
}

/* Порог 1200, а не 768. Полная шапка — это логотип, меню, поиск,
   переключатель языка и значки; вместе они требуют ~1130px на самом
   длинном языке (русском). На 1024 за край уезжал даже английский.
   Замерено на всех четырёх языках, ниже порога работает бургер. */
@media (min-width: 1200px) { .the1-nav { display: flex; } }

.the1-nav .the1-nav-item { position: relative; }

.the1-nav .the1-nav-btn,
.the1-nav .the1-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #9a9a9a;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;      /* на части страниц контейнер задавал uppercase */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.the1-nav .the1-nav-btn:hover,
.the1-nav .the1-nav-link:hover { color: #00f2ff; }

.the1-nav .the1-nav-caret { font-size: 16px; }

/* Выпадающая панель. Раньше была min-w-240px и «сжималась» под текст,
   а на страницах кабинета ещё и наследовала uppercase от контейнера. */
.the1-nav .the1-mega {
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 16px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.the1-nav .the1-nav-item:hover .the1-mega,
.the1-nav .the1-nav-item:focus-within .the1-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

html[dir="rtl"] .the1-nav .the1-mega { left: auto; right: 0; }

/* Открытое меню ложится поверх слогана первого экрана. Это нормально —
   меню обязано перекрывать содержимое, — но выглядит как случайное
   наложение. Пока меню раскрыто, приглушаем первый экран: перекрытие
   читается как задуманное, а внимание уходит в меню. */
.the1-hero-media,
.the1-hero-content { transition: opacity 0.25s ease, filter 0.25s ease; }

body:has(.the1-nav .the1-nav-item:hover) .the1-hero-media,
body:has(.the1-nav .the1-nav-item:focus-within) .the1-hero-media {
  filter: brightness(0.45);
}

body:has(.the1-nav .the1-nav-item:hover) .the1-hero-content,
body:has(.the1-nav .the1-nav-item:focus-within) .the1-hero-content {
  opacity: 0.35;
}

.the1-nav .the1-mega-panel {
  width: 280px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(18, 18, 18, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(122, 122, 122, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.the1-nav .the1-mega-title {
  display: block;
  text-decoration: none;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(122, 122, 122, 0.4);
  color: #00f2ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.the1-nav .the1-mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.the1-nav .the1-mega-list a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  color: #c9c9c9;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.the1-nav .the1-mega-list a:hover {
  background: rgba(0, 242, 255, 0.08);
  color: #00f2ff;
}

.the1-nav .the1-mega-title:hover { color: #7ef9ff; }

/* ------------------------------------------------- поиск в шапке */

.the1-header-search {
  position: relative;
  display: none;
  /* Поле сжимается, когда строка шапки не помещается (длинные арабские
     подписи меню). Пока всё помещается, сжатие не срабатывает. */
  flex: 0 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) { .the1-header-search { display: block; } }

.the1-header-search .the1-header-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a9a9a;
  pointer-events: none;
  font-size: 20px;
  line-height: 1;
}

html[dir="rtl"] .the1-header-search .the1-header-search-icon {
  left: auto;
  right: 12px;
}

.the1-header-search .the1-header-search-input {
  display: block;
  width: 16rem;
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding: 8px 16px 8px 40px;
  border-radius: 9999px;
  background-color: #1e1e1e;
  border: 1px solid rgba(122, 122, 122, 0.3);
  color: #e6e6e6;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

html[dir="rtl"] .the1-header-search .the1-header-search-input {
  padding: 8px 40px 8px 16px;
}

.the1-header-search .the1-header-search-input::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

.the1-header-search .the1-header-search-input:focus {
  outline: none;
  border-color: #00f2ff;
  box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.4);
}

/* ------------------------------------------------- подсказки поиска */

.the1-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 12px;
  background-color: #161616;
  border: 1px solid rgba(122, 122, 122, 0.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  padding: 6px;
}

.the1-suggest[hidden] { display: none; }

.the1-suggest .the1-suggest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #e6e6e6;
  transition: background-color 0.15s ease;
}

.the1-suggest .the1-suggest-row:hover,
.the1-suggest .the1-suggest-row.is-active {
  background-color: rgba(0, 242, 255, 0.1);
}

.the1-suggest .the1-suggest-media {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4a;
}

.the1-suggest .the1-suggest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.the1-suggest .the1-suggest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.the1-suggest .the1-suggest-name {
  font-size: 13px;
  /* Длинное название не должно растягивать список шире поля. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.the1-suggest .the1-suggest-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #00f2ff;
}

/* Заголовок подборки «похожее» идёт сразу после строки «ничего не нашлось»,
   у которой свои большие отступы — иначе между ними зияет пустая полоса.
   Селекторы двойные нарочно: базовое правило .the1-catalog-empty описано
   НИЖЕ в этом файле, и при равной точности побеждало бы оно. */
.the1-catalog-empty.the1-catalog-empty--tight { padding-bottom: 16px; }

.the1-catalog-empty.the1-search-similar-title {
  padding: 0 0 8px;
  color: #e6e6e6;
}

/* ------------------------------------------------- кабинет: боковое меню */

.the1-account-aside .the1-account-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 96px;
}

.the1-account-aside .the1-account-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: #9a9a9a;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[dir="rtl"] .the1-account-aside .the1-account-link { text-align: right; }

.the1-account-aside .the1-account-link .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.the1-account-aside .the1-account-link:hover {
  background: #1a1a1a;
  color: #e6e6e6;
}

.the1-account-aside .the1-account-link.is-active {
  background: #2a2a2a;
  color: #00f2ff;
}

.the1-account-aside .the1-account-link.is-signout { color: #ff5449; }

.the1-account-aside .the1-account-link.is-signout:hover {
  background: rgba(255, 84, 73, 0.1);
  color: #ff5449;
}

.the1-account-aside .the1-account-sep {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(122, 122, 122, 0.2);
}

/* На телефоне меню кабинета сворачивается в горизонтальную полосу —
   так задумано в выбранном виде А. Вертикальный столбец из семи пунктов
   занимал весь первый экран, и содержимое раздела уходило под него:
   человек открывал «Заказы» и видел меню, а не заказы. */
@media (max-width: 767px) {
  .the1-account-aside {
    position: sticky;
    top: 72px;
    z-index: 20;
    margin-inline: -1rem;
    padding: 0.5rem 1rem;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(122, 122, 122, 0.2);
  }

  .the1-account-aside .the1-account-nav {
    position: static;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    /* Полосу прокрутки прячем: она перекрывала бы подписи, а то, что
       список тянется дальше края, видно по обрезанному пункту. */
    scrollbar-width: none;
  }

  .the1-account-aside .the1-account-nav::-webkit-scrollbar { display: none; }

  .the1-account-aside .the1-account-link {
    width: auto;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 12px;
    gap: 8px;
    white-space: nowrap;
  }

  .the1-account-aside .the1-account-sep {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 24px;
    margin: 0 8px;
    border-top: 0;
    border-inline-start: 1px solid rgba(122, 122, 122, 0.2);
  }
}

/* ------------------------------------------------- каталог */

.the1-catalog-grid { min-height: 220px; }

.the1-catalog-card .the1-wish-media {
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #141414;
}

/* Кнопка покупки залита цветом, а не обведена контуром. Контурная читается
   как выключенная: рядом с приглушённым «нет в наличии» разница была только
   в цвете рамки, и владелец сам принял рабочую кнопку за неактивную. */
.the1-catalog-card .the1-catalog-add {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #00f2ff;
  background: #00f2ff;
  color: #131313;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.the1-catalog-card .the1-catalog-add:hover:not(:disabled) { filter: brightness(1.12); }

/* Недоступная кнопка — без заливки и без цвета марки: разница видна
   боковым зрением, не вчитываясь в надпись. */
.the1-catalog-card .the1-catalog-add:disabled {
  border-color: rgba(122, 122, 122, 0.35);
  background: transparent;
  color: #7a7a7a;
  font-weight: 400;
  cursor: not-allowed;
}

.the1-catalog-empty {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  color: #9a9a9a;
}

.the1-catalog-empty a { color: #00f2ff; text-decoration: underline; }

.the1-catalog-pagination { padding: 8px 0 32px; }
.the1-catalog-pagination a { text-decoration: none; }

.the1-wish-media .the1-wish-ph { font-size: 44px; color: #4a4a4a; opacity: 0.75; }

/* ------------------------------------------------- юридические страницы */

.the1-legal-body { line-height: 1.75; color: #c9c9c9; }

.the1-legal-body h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  color: #ffffff;
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(122, 122, 122, 0.25);
}

.the1-legal-body h3 { font-size: 16px; color: #e6e6e6; margin: 28px 0 12px; }
.the1-legal-body p { margin: 0 0 14px; }
.the1-legal-body strong { color: #ffffff; }

.the1-legal-body .the1-legal-list {
  list-style: none;
  padding-left: 20px;
  margin: 0 0 16px;
}

.the1-legal-body .the1-legal-list li { margin: 0 0 10px; }

html[dir="rtl"] .the1-legal-body .the1-legal-list {
  padding-left: 0;
  padding-right: 20px;
}

.the1-legal-body .the1-legal-rule {
  border: 0;
  border-top: 1px solid rgba(122, 122, 122, 0.2);
  margin: 32px 0;
}

.the1-legal-body .the1-legal-table-wrap { overflow-x: auto; margin: 0 0 24px; }

.the1-legal-body .the1-legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.the1-legal-body .the1-legal-table th,
.the1-legal-body .the1-legal-table td {
  border: 1px solid rgba(122, 122, 122, 0.25);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

html[dir="rtl"] .the1-legal-body .the1-legal-table th,
html[dir="rtl"] .the1-legal-body .the1-legal-table td { text-align: right; }

.the1-legal-body .the1-legal-table th {
  background: rgba(0, 242, 255, 0.06);
  color: #ffffff;
}

.the1-legal-body .the1-legal-lang-note {
  border-left: 3px solid #00f2ff;
  padding: 10px 14px;
  margin: 0 0 28px;
  background: rgba(0, 242, 255, 0.05);
  font-size: 13px;
  color: #9a9a9a;
}

html[dir="rtl"] .the1-legal-body .the1-legal-lang-note {
  border-left: 0;
  border-right: 3px solid #00f2ff;
}

.the1-legal-body .the1-legal-placeholder {
  background: rgba(255, 176, 0, 0.14);
  border-bottom: 1px dashed rgba(255, 176, 0, 0.6);
  color: #ffc74d;
  padding: 0 3px;
  border-radius: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.92em;
}

/* ------------------------------------------------- подвал: два ряда ссылок */

/* Юридические документы идут первым рядом, Contact и Support — вторым,
   приглушённым: это разделы помощи, а не политики, и смешивать их в одну
   строку неправильно. Раскладка одинакова на всех страницах. */

.the1-footer-links {
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

html[dir="rtl"] .the1-footer-links { align-items: flex-start; }

.the1-footer-links .the1-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: flex-end;
}

html[dir="rtl"] .the1-footer-links .the1-footer-row { justify-content: flex-start; }

.the1-footer-links .the1-footer-help { opacity: 0.7; font-size: 11px; }

/* На узком экране ссылки переносились по ширине и давали рваные строки
   («Warranty» и «Support» повисали в одиночестве). Ставим их столбцом:
   строки одинаковой высоты, по ссылке легко попасть пальцем. Между
   копирайтом и списком — отступ и тонкая линия, иначе блоки слипались. */
@media (max-width: 767px) {
  .the1-footer-links {
    align-items: stretch;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .the1-footer-links .the1-footer-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   Подменённая картинка (см. guardImages в main.js).

   Плейсхолдер — квадратная векторная заглушка. У большинства картинок витрины
   стоит object-cover: он обрезал бы заглушку по краям и съел подпись. Селектор
   из двух частей (тег + класс) нужен, чтобы перебить классы Tailwind, которые
   подключаются после этого файла.
   -------------------------------------------------------------------------- */

img.the1-img-fallback {
  object-fit: contain;
  background-color: #131313;
}

/* --------------------------------------------------------------------------
   Размер цели нажатия в шапке на сенсорных экранах.

   Иконки корзины, кабинета, избранного, языка и бургер собраны из символьного
   шрифта, поэтому их кликабельная область равна размеру глифа: замеры на
   живых страницах давали 21x21 у избранного, 21..25x40 у корзины и кабинета,
   29x40 у бургера. Палец так не попадает — рекомендованный минимум 44x44.

   Меняем только область нажатия: сам глиф остаётся прежнего размера, растёт
   поле вокруг него. Шапка при этом остаётся в одну строку — 5 целей по 44px
   плюс логотип укладываются в 369px видимой ширины с запасом.
   -------------------------------------------------------------------------- */

/* Без (pointer: coarse): узкий экран сам по себе достаточный признак, а
   проверить правило в отладке с мышью иначе невозможно. Крупная цель
   нажатия не мешает и указателю. */
@media (max-width: 767px) {
  /* display обязателен: у строчного элемента min-width и min-height просто
     игнорируются, а иконки шапки собраны из символьного шрифта и на части
     страниц остаются строчными. Заодно inline-flex центрирует глиф внутри
     увеличенного поля, иначе оно росло бы вниз и вытягивало шапку.

     Пунктам мега-меню это не вредит: на узком экране их скрывает
     родительский контейнер, собственный display у них уже ни на что
     не влияет. */
  header a, header button,
  nav.fixed a, nav.fixed button,
  /* Варианты с > .flex обязательны. Выше в этом же медиазапросе стоит
     «header .flex > *, nav.fixed .flex > * { min-width: 0 }» — оно
     разрешает детям шапки сжиматься, и по специфичности (0,1,2) побеждает
     короткий селектор. Эти четыре селектора дают 0,2,2 и перекрывают его
     именно для кнопок и ссылок, не трогая остальные элементы шапки. */
  header .flex > a, header .flex > button,
  nav.fixed .flex > a, nav.fixed .flex > button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Логотип — ссылка с текстом, ему нужна только высота: min-width растянул
     бы строку марки. */
  header a.the1-logo, nav.fixed a.the1-logo,
  header a:has(.the1-wordmark), nav.fixed a:has(.the1-wordmark) {
    min-width: 0;
  }
}

/* ------------------------------------------------- первый экран с видео */

/* Высота задаётся здесь, а не утилитой h-[85vh]: на мобильных есть
   глобальное правило с !important, которое обнуляет min-height у всего
   с классом h-[8...], и первый экран под него попадал. */
.the1-hero {
  height: 85vh;
  min-height: 560px;
}

.the1-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #050505;
}

/* Видео и постер лежат в одном слое. Постер виден, пока видео не
   подставлено скриптом (телефоны) или пока оно не загрузилось. */
.the1-hero-media .the1-hero-video,
.the1-hero-media .the1-hero-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Ролик уже снят в фирменном бирюзовом, доворот оттенка не нужен —
     он увёл бы кадр в зелень. Яркость приглушена меньше прежнего: текст
     и так лежит на плотном затемнении слева, а сильное глушение съедало
     блики на клавишах. Контраст поднят — от него зависит ощущение
     чёткости куда больше, чем от резкости как таковой. */
  filter: brightness(0.92) contrast(1.18) saturate(1.22);
}

.the1-hero-media .the1-hero-video {
  z-index: 1;
  opacity: 0;
}

/* Дальше прозрачностью управляет скрипт: он гасит видео на стыке петли.
   Переход здесь только на первое появление. */
.the1-hero-media .the1-hero-video.is-playing { transition: opacity 0.6s ease; }

/* Затемнение: плотное у края с текстом, прозрачное к противоположному. */
.the1-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(5, 5, 5, 0.92) 0%,
    rgba(5, 5, 5, 0.72) 38%,
    rgba(5, 5, 5, 0.35) 70%,
    rgba(5, 5, 5, 0.25) 100%
  );
}

html[dir="rtl"] .the1-hero-overlay {
  background: linear-gradient(
    to left,
    rgba(5, 5, 5, 0.92) 0%,
    rgba(5, 5, 5, 0.72) 38%,
    rgba(5, 5, 5, 0.35) 70%,
    rgba(5, 5, 5, 0.25) 100%
  );
}

/* Нижняя кромка растворяется в фоне страницы, чтобы стык не резал глаз. */
.the1-hero-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0), #050505 100%);
}

.the1-hero-content { position: relative; z-index: 3; }

.the1-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Кнопки первого экрана держим в один ряд на десктопе: английские надписи
   длиннее остальных языков и переносили вторую кнопку под первую, из-за чего
   EN-версия выглядела иначе, чем RU/AZ/AR. Ряд шире родительского max-w-2xl —
   места в первом экране на это хватает. */
@media (min-width: 768px) {
  .the1-hero-cta {
    flex-wrap: nowrap;
    width: max-content;
  }

  .the1-hero-cta .the1-hero-btn { white-space: nowrap; }
}

.the1-hero-cta .the1-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.the1-hero-cta .the1-hero-btn:hover { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .the1-hero-cta .the1-hero-btn:hover { transform: none; }
  .the1-hero-media .the1-hero-video { transition: none; }
}

/* Слоган латиницей: unicode-bidi:plaintext разворачивает такую строку в
   LTR, и в арабской раскладке она прижималась к левому краю, а арабский
   подзаголовок — к правому. Выравниваем по одной стороне. */
html[dir="rtl"] .the1-hero h1 { text-align: right; }

/* На узком экране горизонтальное затемнение бесполезно: текст занимает
   всю ширину. Переводим градиент в вертикальный и даём первому экрану
   расти по содержимому, иначе заголовок упирается в шапку. */
@media (max-width: 767px) {
  .the1-hero {
    height: auto;
    min-height: 78vh;
    padding: 40px 0 56px;
  }

  .the1-hero-overlay,
  html[dir="rtl"] .the1-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.88) 0%,
      rgba(5, 5, 5, 0.62) 45%,
      rgba(5, 5, 5, 0.9) 100%
    );
  }

  .the1-hero-cta .the1-hero-btn {
    padding: 14px 24px;
    justify-content: center;
  }
}

/* ==========================================================================
   Плитки категорий на главной
   Восемь равных квадратов вместо двух больших плиток. Внутри — снимок,
   затемнение снизу под подпись и стрелка. Рамка загорается фирменным
   цветом только под курсором: в покое ряд должен читаться как одно
   спокойное поле.
   ========================================================================== */

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

.the1-cat-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    overflow: hidden;
    background: #0f0f10;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.the1-cat-tile:hover,
.the1-cat-tile:focus-visible {
    border-color: #00f2ff;
    box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.55),
                0 0 22px rgba(0, 242, 255, 0.18);
    outline: none;
}

.the1-cat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.the1-cat-tile:hover .the1-cat-img { transform: scale(1.06); }

/* Подпись лежит на снимке, поэтому под ней нужна плотная подложка:
   у части кадров низ светлый и белый текст на нём терялся. */
.the1-cat-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5, 5, 5, 0.92) 0%,
        rgba(5, 5, 5, 0.55) 28%,
        rgba(5, 5, 5, 0) 58%);
}

.the1-cat-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 18px 18px;
    z-index: 2;
}

.the1-cat-name {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #e5e2e1;
}

.the1-cat-arrow {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 2;
    color: #00f2ff;
    font-size: 20px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.the1-cat-tile:hover .the1-cat-arrow,
.the1-cat-tile:focus-visible .the1-cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

html[dir="rtl"] .the1-cat-arrow {
    right: auto;
    left: 16px;
    transform: translateX(6px) scaleX(-1);
}

html[dir="rtl"] .the1-cat-tile:hover .the1-cat-arrow {
    transform: translateX(0) scaleX(-1);
}

@media (max-width: 1023px) {
    .the1-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Наведения на телефоне нет, поэтому стрелка там видна всегда — иначе
   ничто не показывает, что плитка кликабельна. */
@media (max-width: 640px) {
    .the1-cat-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .the1-cat-tile { aspect-ratio: 4 / 3; }
    .the1-cat-arrow { opacity: 1; transform: none; }
    html[dir="rtl"] .the1-cat-arrow { transform: scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
    .the1-cat-tile:hover .the1-cat-img { transform: none; }
}

/* --------------------------------------------------------------------------
   Ролик первого экрана: у файла из нейросети в правом нижнем углу стоит
   светлый знак генератора.

   Сначала он убирался увеличением кадра, но масштаб поверх того, что уже
   делает object-fit: cover, давал 1.33x от исходных 720p — ролик мылил,
   и премиальности в нём не оставалось. Смещение видимого окна вверх тоже
   не годится: на высоком экране пропорции кадра и первого экрана почти
   совпадают, снизу срезается всего ничего, и знак остаётся в кадре.

   Поэтому кадр не трогаем совсем — гасим угол. Правый нижний угол сцены
   и так самый тёмный (столешница в тени), плотная виньетка читается там
   как часть света, а не как заплатка. Зона взята с запасом по высоте:
   при разной пропорции окна знак гуляет по вертикали.
   -------------------------------------------------------------------------- */
.the1-hero-media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 58%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 120% at 100% 100%,
    rgba(5, 5, 5, 0.96) 0%,
    rgba(5, 5, 5, 0.86) 28%,
    rgba(5, 5, 5, 0.45) 58%,
    rgba(5, 5, 5, 0) 100%
  );
}

/* ==========================================================================
   Фильтры каталога

   Панель строится скриптом из categories.json, поэтому оформление живёт
   здесь, а не в утилитах Tailwind на странице: разметки этих элементов
   в HTML нет и сборщик Tailwind их классы не увидит.
   ========================================================================== */

.the1-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.the1-filters-panel {
    padding: 24px;
    border-radius: 12px;
    background: rgba(24, 24, 24, 0.6);
    border: 1px solid rgba(122, 122, 122, 0.25);
    backdrop-filter: blur(12px);
}

.the1-filters-title {
    margin: 0 0 20px;
    color: #00f2ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.the1-filter-group { margin-bottom: 20px; }
.the1-filter-group:last-child { margin-bottom: 0; }

.the1-filter-group-title {
    display: block;
    margin-bottom: 10px;
    color: #9a9a9a;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.the1-filter-group-title:hover { color: #00f2ff; }

.the1-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}

/* Галочка своя, а не системная: системная в тёмной теме на части браузеров
   рисуется белым квадратом и выбивается из оформления. */
.the1-filter-box {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #7a7a7a;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.the1-filter-box:hover { border-color: #00f2ff; }

.the1-filter-box:checked {
    border-color: #00f2ff;
    background: #00f2ff;
    box-shadow: inset 0 0 0 3px #131313;
}

.the1-filter-box:focus-visible {
    outline: 2px solid #00f2ff;
    outline-offset: 2px;
}

.the1-filter-label {
    flex: 1 1 auto;
    color: #c9c9c9;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.the1-filter-row:hover .the1-filter-label { color: #e5e2e1; }

.the1-filter-count {
    color: #7a7a7a;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
}

.the1-filter-allcats {
    display: inline-block;
    margin-top: 4px;
    color: #00f2ff;
    font-size: 13px;
    text-decoration: none;
}

.the1-filter-allcats:hover { text-decoration: underline; }

.the1-filter-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.the1-filter-cur {
    color: #7a7a7a;
    font-size: 13px;
}

.the1-filter-dash { color: #7a7a7a; }

.the1-filter-num {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(122, 122, 122, 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: #e5e2e1;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}

.the1-filter-num:focus {
    outline: none;
    border-color: #00f2ff;
}

.the1-filter-stock { margin-top: 16px; }

.the1-filter-reset {
    display: inline-block;
    margin-top: 12px;
    color: #9a9a9a;
    font-size: 13px;
    text-decoration: underline;
}

.the1-filter-reset:hover { color: #00f2ff; }

/* ------------------------------------------------- сортировка */

.the1-sort-host { width: 100%; }

.the1-sort {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.the1-sort-label {
    color: #9a9a9a;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.the1-sort-select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 180px;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgba(122, 122, 122, 0.3);
    border-radius: 8px;
    background: rgba(24, 24, 24, 0.8);
    color: #e5e2e1;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.the1-sort-select:focus {
    outline: none;
    border-color: #00f2ff;
}

.the1-sort-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #7a7a7a;
    font-size: 18px;
}

html[dir="rtl"] .the1-sort-caret { right: auto; left: 12px; }
html[dir="rtl"] .the1-sort-select { padding: 12px 16px 12px 40px; }

/* Кнопка «Фильтры» — только на узком экране. */
.the1-filters-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(122, 122, 122, 0.3);
    border-radius: 8px;
    background: rgba(24, 24, 24, 0.8);
    color: #e5e2e1;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.the1-filters-badge {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #00f2ff;
    color: #131313;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .the1-filters-toggle { display: flex; }
    .the1-filters-body { display: none; }
    .the1-filters--open .the1-filters-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 16px;
    }
}

@media (min-width: 768px) {
    .the1-filters-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

/* Значения характеристик: цвет — кружком, остальное — обычной строкой. */
.the1-filter-list { display: flex; flex-direction: column; }

.the1-filter-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(122, 122, 122, 0.5);
    background: repeating-linear-gradient(45deg, #444 0 4px, #666 4px 8px);
}

/* Значение, которое при текущем выборе ничего не даст. Не прячем: список,
   меняющий состав на глазах, читается как поломка. */
.the1-filter-row.is-empty .the1-filter-label,
.the1-filter-row.is-empty .the1-filter-count { opacity: 0.4; }

/* У цвета выбор показывает сам кружок: квадратная галочка рядом с ним —
   два индикатора одного и того же. Сам checkbox остаётся в разметке
   (клавиатура и озвучка работают через него), но не рисуется. */
.the1-filter-list--color .the1-filter-box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.the1-filter-list--color .the1-filter-swatch {
    width: 20px;
    height: 20px;
}

.the1-filter-list--color .the1-filter-box:checked + .the1-filter-swatch {
    box-shadow: 0 0 0 2px #131313, 0 0 0 4px #00f2ff;
}

.the1-filter-list--color .the1-filter-box:focus-visible + .the1-filter-swatch {
    outline: 2px solid #00f2ff;
    outline-offset: 3px;
}

/* Цвета в две колонки: названий много, а строка у каждого короткая. */
.the1-filter-list--color {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

@media (max-width: 400px) {
    .the1-filter-list--color { grid-template-columns: 1fr; }
}

/* Карточка каталога: одинаковая высота вне зависимости от длины описания.

   Описание товара пишет поставщик, и оно бывает в абзац: у одного товара
   две строки, у соседнего десять — ряд карточек разъезжается, а до кнопки
   «в корзину» приходится прокручивать. Обрезаем до трёх строк; полный
   текст остаётся на странице товара, ради которой карточка и нужна. */
.the1-catalog-card [itemprop="description"] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Название в две строки: длинные названия вроде «THE1 High-Performance
   NVMe M.2 SSD with Heatsink» иначе занимают половину карточки. */
.the1-catalog-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Строка найденного и выбранных фильтров над сеткой товаров. */
.the1-results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.the1-results-count {
    margin: 0;
    color: #9a9a9a;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.the1-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.the1-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(0, 242, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 242, 255, 0.08);
    color: #e5e2e1;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.the1-chip:hover {
    background: rgba(0, 242, 255, 0.16);
    border-color: #00f2ff;
}

.the1-chip-x { font-size: 14px; color: #9a9a9a; }
.the1-chip:hover .the1-chip-x { color: #00f2ff; }

.the1-chip-reset {
    border-style: dashed;
    border-color: rgba(122, 122, 122, 0.5);
    background: transparent;
    color: #9a9a9a;
}

/* Кружок переключателя: у радио выбор одного значения, у галочки — многих,
   и форма обязана это показывать, иначе покупатель ждёт не того. */
.the1-filter-radio { border-radius: 50%; }
.the1-filter-radio:checked { box-shadow: inset 0 0 0 3px #131313; }

.the1-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(122, 122, 122, 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: #e5e2e1;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.the1-filter-select:focus { outline: none; border-color: #00f2ff; }

.the1-filter-more {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #00f2ff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.the1-filter-more:hover { text-decoration: underline; }

/* Кнопка «Применить» нужна только на телефоне: на широком экране выбор
   применяется сразу, и лишняя кнопка там сбивала бы с толку. */
.the1-filters-apply { display: none; }

@media (max-width: 767px) {
    .the1-filters--open .the1-filters-apply {
        display: block;
        width: 100%;
        padding: 14px;
        border: 0;
        border-radius: 8px;
        background: rgba(0, 242, 255, 0.15);
        color: #00f2ff;
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .the1-filters--open .the1-filters-apply.is-dirty {
        background: #00f2ff;
        color: #131313;
    }
}

/* Кликабельна вся плитка. Ссылка сделана подложкой, а не обёрткой вокруг
   содержимого: кнопка внутри ссылки — это спор двух нажатий и сломанное
   поведение на телефоне. Подложка лежит ниже кнопок по z-index, поэтому
   «в корзину» и сердечко работают как прежде. */
.the1-catalog-card { position: relative; }

.the1-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.the1-catalog-card .the1-wish-media,
.the1-catalog-card .the1-catalog-add,
.the1-catalog-card h3 {
    position: relative;
    z-index: 2;
}

/* Сердечку нужен только слой, но не позиция. Пока оно стояло в списке выше,
   position: relative затирал его собственный absolute — кнопка вываливалась
   в поток снимка и вставала по центру картинки вместо правого верхнего угла.
   Слой ей всё равно нужен: под ней лежит накладка, делающая плитку целиком
   кликабельной. */
.the1-catalog-card .the1-wish-btn { z-index: 3; }

/* Снимок и заголовок кликабельны как часть плитки, но сами по себе
   не перехватывают нажатие — иначе подложка под ними стала бы не нужна,
   а курсор менялся бы только над ними. */
.the1-catalog-card .the1-wish-media { pointer-events: none; }
.the1-catalog-card .the1-wish-media .the1-wish-btn { pointer-events: auto; }

.the1-card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.the1-card-title-link:hover,
.the1-catalog-card:hover .the1-card-title-link { color: #00f2ff; }

/* Курсор-палец над всей плиткой: покупатель видит, что нажимать можно
   куда угодно, а не только по снимку. */
.the1-catalog-card { cursor: pointer; }
.the1-catalog-card .the1-catalog-add:disabled { cursor: not-allowed; }

/* ==========================================================================
   Страница товара

   Вёрстка страницы была витриной одного выдуманного товара, поэтому её
   содержимое строится скриптом. Оформление — здесь: классы Tailwind для
   этих элементов сборщик не увидит, их нет в разметке страниц.
   ========================================================================== */

.the1-product-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.the1-product-crumbs a { color: #00f2ff; text-decoration: none; }
.the1-product-crumbs a:hover { text-decoration: underline; }
.the1-product-crumb-sep { color: #5a5a5a; }

.the1-product-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

/* Снимок и панель покупки — 55/45. Ровно пополам делает страницу вялой,
   а 7/5 прижимало кнопку к краю: на длинном названии панель распирало,
   и цена уезжала под сгиб. */
@media (min-width: 1024px) {
    .the1-product-top { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); }
}

/* Снимок и панель — одной высоты. Раньше панель заканчивалась выше
   середины снимка, и правая половина экрана обрывалась в пустоту: две
   колонки разной длины читаются как незаконченная страница. */
@media (min-width: 1024px) {
    .the1-product-top { align-items: stretch; }

    /* Мелкие снимки — вертикальной полосой слева, а не строкой под фото.
       Строка съедала у снимка свои 84 пикселя, и он заканчивался выше
       панели покупки, хотя колонки уже были равны по высоте. */
    .the1-product-gallery {
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        gap: 12px;
        height: 100%;
    }

    /* flex-basis 0, а не auto. При auto за основу берётся собственная высота
       картинки: вертикальный снимок товара растягивал колонку на 900 с лишним
       пикселей, панель тянулась за ним, а условия покупки и вкладки уезжали
       под сгиб. С нулевой основой высоту задаёт панель, снимок её добирает. */
    /* Селектор из двух классов — не для красоты. Базовое описание
       .the1-product-media лежит НИЖЕ по файлу и при равной силе селектора
       побеждает по порядку: оно возвращало снимку квадрат 1:1 и задавало
       минимальную высоту, из-за чего колонка снова распирала страницу,
       сколько бы правил ни стояло здесь. Специфичность 0,2,0 против 0,1,0
       снимает спор независимо от порядка. */
    .the1-product-gallery .the1-product-media {
        flex: 1 1 0;
        aspect-ratio: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-height: none;
    }

    .the1-product-thumbs {
        flex: 0 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        margin-top: 0;
        overflow-y: auto;
    }

    /* Высота считается от окна, а не от ширины снимка. Квадрат 1:1 на широком
       экране вырастал под 700 пикселей: панель покупки тянулась за ним, и
       описание с характеристиками уходило за нижний край — до них нужно было
       прокручивать. Теперь верхний блок укладывается в экран, а вкладки
       начинаются сразу под ним. */
    /* Высоту задаёт панель покупки, снимок добирает остаток колонки.
       Потолка по высоте окна здесь быть не должно: он обрезал снимок
       раньше, чем кончалась панель, и правый блок оказывался выше
       левого — ровно то, что видно как «фото меньше рамки». */
    .the1-product-media {
        flex: 1 1 0;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .the1-product-panel { height: 100%; }
}

/* Низкие окна (ноутбук 13", открытая панель закладок): снимку остаётся
   меньше места, зато вкладки видны без прокрутки. */
.the1-product-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
    position: relative;
}

/* Между смысловыми частями панели — воздух: подпись раздела и название,
   потом описание, потом деньги и действие. Без этого всё слипалось
   в один столбец одинаковых строк. */
.the1-product-panel .the1-product-price { margin-top: 10px; }
.the1-product-panel .the1-product-add { margin-top: 6px; }

.the1-product-eyebrow {
    color: #00f2ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.the1-product-eyebrow:hover { text-decoration: underline; }

/* Название было набрано величиной с заголовок раздела и занимало четыре
   строки, отталкивая цену вниз. Здесь оно крупное, но соразмерное панели. */
/* Справа в углу панели сидит сердце «в избранное»: без отступа длинное
   название заезжало под него, и на телефоне последние буквы читались
   сквозь кнопку. */
.the1-product-title {
    margin: 0;
    padding-inline-end: 44px;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #e5e2e1;
}

.the1-product-rating { display: flex; align-items: center; gap: 2px; }
.the1-star { font-size: 18px; color: #4a4a4a; }
.the1-star.is-on { color: #ffc857; font-variation-settings: "FILL" 1; }
.the1-product-rating-num { margin-inline-start: 8px; color: #9a9a9a; font-size: 14px; }

.the1-product-desc {
    margin: 0;
    color: #c9c9c9;
    font-size: 15px;
    line-height: 1.6;
}

/* Полное описание — отдельной секцией, шириной с колонку текста: строка
   в 120 знаков через всю страницу не читается. */
.the1-product-text {
    max-width: 70ch;
    color: #c9c9c9;
    font-size: 16px;
    line-height: 1.7;
}

.the1-product-text p { margin: 0 0 16px; }
.the1-product-text p:last-child { margin-bottom: 0; }

.the1-product-optgroup { display: flex; flex-direction: column; gap: 8px; }

.the1-product-optlabel {
    color: #9a9a9a;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.the1-product-options { display: flex; flex-wrap: wrap; gap: 8px; }

.the1-product-option {
    padding: 8px 14px;
    border: 1px solid rgba(122, 122, 122, 0.4);
    border-radius: 6px;
    background: transparent;
    color: #c9c9c9;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-product-option:hover { border-color: #00f2ff; color: #00f2ff; }

.the1-product-option.is-on {
    border-color: #00f2ff;
    background: rgba(0, 242, 255, 0.1);
    color: #00f2ff;
}

.the1-product-price {
    margin: 8px 0 0;
    color: #00f2ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 28px;
}

.the1-product-stock {
    margin: 0;
    color: #7fd4a1;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.the1-product-stock.is-out { color: #e08a8a; }

.the1-product-add {
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: #00f2ff;
    color: #131313;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.the1-product-add:hover:not(:disabled) { filter: brightness(1.1); }

.the1-product-add:disabled {
    background: rgba(122, 122, 122, 0.25);
    color: #8a8a8a;
    cursor: not-allowed;
}

.the1-product-sku {
    margin: 0;
    color: #6a6a6a;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.the1-product-section { margin-bottom: 64px; }

.the1-product-h2 {
    margin: 0 0 24px;
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e5e2e1;
}

.the1-specs {
    border: 1px solid rgba(122, 122, 122, 0.25);
    border-radius: 12px;
    overflow: hidden;
}

.the1-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(122, 122, 122, 0.15);
}

.the1-spec-row:last-child { border-bottom: 0; }
.the1-spec-row:nth-child(odd) { background: rgba(24, 24, 24, 0.4); }
.the1-spec-label { color: #9a9a9a; font-size: 14px; }
.the1-spec-value { color: #e5e2e1; font-size: 14px; text-align: end; }

/* «Купить сейчас» — рядом с «в корзину», но тише её: основное действие
   одно, второе не должно с ним спорить за внимание. */
.the1-product-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(0, 242, 255, 0.5);
    border-radius: 8px;
    background: transparent;
    color: #00f2ff;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.the1-product-buy:hover:not(:disabled) { background: rgba(0, 242, 255, 0.1); }

.the1-product-buy:disabled {
    border-color: rgba(122, 122, 122, 0.3);
    color: #7a7a7a;
    cursor: not-allowed;
}

.the1-product-buy .material-symbols-outlined { font-size: 18px; }

/* Заглушка на время загрузки данных. Раньше на её месте лежал показательный
   товар из шаблона, и он мелькал перед настоящим — покупатель успевал
   увидеть чужое название и цену. */
.the1-product-skeleton {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 1024px) {
    .the1-product-skeleton { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); }
}

.the1-skeleton-media {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: rgba(24, 24, 24, 0.6);
    border: 1px solid rgba(122, 122, 122, 0.2);
}

.the1-skeleton-panel { display: flex; flex-direction: column; gap: 14px; }

.the1-skeleton-line {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(60,60,60,0.5) 25%, rgba(90,90,90,0.5) 50%, rgba(60,60,60,0.5) 75%);
    background-size: 200% 100%;
    animation: the1-skeleton 1.4s ease infinite;
}

@keyframes the1-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Мигание глазами не ловится, но раздражает: у кого «уменьшить движение»
   включено в системе, пусть будет просто ровный фон. */
@media (prefers-reduced-motion: reduce) {
    .the1-skeleton-line { animation: none; }
}

/* ==========================================================================
   Описание и характеристики — вкладки в общей рамке
   ========================================================================== */

/* Вкладки стоят в той же сетке, что снимок и панель, и занимают колонку
   снимка: рамка начинается и кончается ровно там же, где он. Растянутая
   на всю страницу, она разъезжалась со снимком, и строчки описания
   уходили правее его края. */
.the1-product-tabs {
    grid-column: 1;
    margin-bottom: 56px;
    min-width: 0;
}

/* Колонки не заданы жёстко: у товара без описания остаётся одна вкладка,
   и при «1fr 1fr» она занимала бы ровно половину ширины, а вторая половина
   пустовала. Так кнопки всегда делят ширину снимка поровну — одна, две. */
.the1-tabs-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px;
    padding: 0 0 16px;
}

/* Переключатели повторяют пару кнопок из панели покупки: описание — как
   «в корзину», характеристики — как «купить сейчас». Невыбранная гаснет,
   иначе обе выглядят нажатыми и непонятно, что открыто. */
.the1-tab {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.the1-tab[data-tab="description"] {
    background: #00f2ff;
    border-color: #00f2ff;
    color: #131313;
    font-weight: 700;
}

.the1-tab[data-tab="specs"] {
    background: transparent;
    border-color: rgba(0, 242, 255, 0.5);
    color: #00f2ff;
}

.the1-tab:not(.is-on) { opacity: 0.45; filter: saturate(0.4); }
.the1-tab:hover { opacity: 1; filter: none; }
.the1-tab[data-tab="specs"]:hover { background: rgba(0, 242, 255, 0.1); }

.the1-tabs-body {
    padding: 20px 24px;
    border: 1px solid rgba(122, 122, 122, 0.25);
    border-radius: 12px;
    background: rgba(24, 24, 24, 0.45);
    overflow: hidden;
}

/* Длинное слово или ссылка без пробелов раздвигали рамку и вылезали
   за край снимка. Здесь перенос разрешён где угодно. */
.the1-tabs-body .the1-product-text { overflow-wrap: anywhere; }

/* Вкладка без содержимого не должна занимать место: скрытая ветка держала
   бы высоту блока и оставляла пустую полосу под текстом. */
.the1-tab-pane { display: none; }
.the1-tab-pane.is-on { display: block; }

/* Внутри вкладки у таблицы своей рамки нет — она уже в общей. */
.the1-tabs-body .the1-specs {
    border: 0;
    border-radius: 0;
}

.the1-tabs-body .the1-spec-row:first-child { padding-top: 0; }
.the1-tabs-body .the1-spec-row:nth-child(odd) { background: rgba(0, 0, 0, 0.18); }

@media (max-width: 640px) {
    .the1-tabs-body { padding: 20px 16px; }
    .the1-tab { padding: 12px 10px; font-size: 11px; letter-spacing: 0.06em; }
}

/* Условия покупки внизу панели: прижаты к низу, поэтому панель ровно
   догоняет снимок по высоте и правая колонка не обрывается пустотой. */
.the1-product-notes {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(122, 122, 122, 0.2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Три равные доли, надпись по центру своей доли. Раньше строки шли подряд
   через flex-зазор: доставка занимала треть строки, возврат — шестую часть,
   и ряд выглядел сдвинутым влево, хотя ничего не ломалось. */
.the1-product-note {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: #9a9a9a;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.the1-product-note .material-symbols-outlined {
    font-size: 18px;
    color: #00f2ff;
    flex: 0 0 auto;
}

/* Три условия в один ряд на телефоне не помещаются — слова наезжают друг
   на друга. Блок стоит здесь, а не выше по файлу: правило для телефона,
   записанное до .the1-product-notes, проигрывает ему по порядку каскада
   при одинаковой силе селектора. */
@media (max-width: 640px) {
    .the1-product-notes { grid-template-columns: 1fr; }
    .the1-product-note { justify-content: flex-start; text-align: start; }
}

/* Ноутбучные окна — 800–900 пикселей высотой вместе с шапкой браузера
   и закладками. Порог 900, а не 800: при 820 старое правило не срабатывало,
   и вкладки всё равно уходили под сгиб. */
@media (min-width: 1024px) and (max-height: 900px) {
    [data-product-page] { padding-top: 84px !important; }

    /* Потолок по высоте окна здесь стоял на снимке и снова разводил
       колонки: панель 509, снимок 480. Высоту верхнего блока сжимает
       сама панель — правилами ниже, — а снимок просто следует за ней. */
    .the1-product-media { min-height: 0; }
    .the1-product-top { margin-bottom: 24px; }

    .the1-product-panel {
        padding: 22px !important;
        gap: 8px;
    }

    .the1-product-title { font-size: clamp(20px, 1.9vw, 26px); }
    .the1-product-desc { font-size: 14px; }
    .the1-product-price { font-size: 24px; margin-top: 6px; }
    .the1-product-add { padding: 13px; }
    .the1-product-buy { padding: 11px; }

    .the1-product-notes { padding-top: 14px; }

    .the1-tabs-body { padding: 16px 20px; }
    .the1-tabs-bar { padding: 12px 12px 0; }
}

.the1-product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(24, 24, 24, 0.6);
    border: 1px solid rgba(122, 122, 122, 0.25);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Подсветка под курсором — та же, что у плиток категорий на главной:
   бирюзовая рамка и мягкое свечение. Одинаковый отклик на всех снимках
   витрины читается как одно правило, а не как случайность оформления. */
.the1-product-media:hover {
    border-color: #00f2ff;
    box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.55),
                0 0 22px rgba(0, 242, 255, 0.18);
}

/* Снимок чуть приближается — тот же приём, что и на плитках. Рамка его
   обрезает (overflow: hidden), поэтому границы блока остаются на месте. */
.the1-product-media .the1-product-photo { transition: transform 0.7s ease; }
.the1-product-media:hover .the1-product-photo { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .the1-product-media:hover .the1-product-photo { transform: none; }
}

/* Снимок вынут из потока (position: absolute), и это главное правило всей
   страницы товара.

   Пока картинка лежала в потоке, высоту колонки задавала ОНА: сетка считает
   строку по естественному размеру содержимого, и вертикальный снимок 900×1800
   разворачивался в 1263 пикселя высоты, за ним тянулась панель покупки, а
   условия покупки и вкладки уходили под сгиб. Никакие flex-basis, min-height
   и aspect-ratio этого не отменяли: они задают, как элемент растягивается,
   но не мешают его содержимому требовать место.

   Вне потока картинка ничего не требует: высоту рамки задаёт панель покупки.

   Заполняет рамку целиком (cover) — решение владельца от 19.08: пустые поля
   по краям при вписывании целиком выглядели как чёрные рамки вокруг снимка.
   Плата за это — обрезка: у вертикального товара срезается верх и низ, и
   снимки для каталога лучше готовить с запасом по краям. */
.the1-product-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.the1-product-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a5a5a;
}

.the1-product-media--empty .material-symbols-outlined { font-size: 64px; }

.the1-product-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.the1-product-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(122, 122, 122, 0.3);
    background: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.the1-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.the1-product-thumb:hover { border-color: #00f2ff; }
.the1-product-thumb.is-on { border-color: #00f2ff; box-shadow: 0 0 10px rgba(0, 242, 255, 0.3); }

/* ---------------------------------------------------------------------
   Личный кабинет: списки заказов, баллов и адресов.

   Свои классы, а не утилиты Tailwind в разметке: содержимое кабинета
   собирается скриптом, и при правке вида пришлось бы менять строки
   внутри JavaScript. Здесь же вид правится там, где ему положено.

   Логические свойства (inline-start вместо left) обязательны: арабская
   версия читается справа налево, и «отступ слева» на ней смотрелся бы
   с неправильной стороны.
   --------------------------------------------------------------------- */
.the1-order-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--the1-outline-variant-rgb, 120, 120, 120), 0.15);
}

.the1-order-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid rgba(var(--the1-outline-variant-rgb, 120, 120, 120), 0.15);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

a.the1-order-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.the1-order-main,
.the1-order-side {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.the1-order-side {
  align-items: flex-end;
  text-align: end;
}

.the1-order-number {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.the1-order-date,
.the1-order-status {
  font-size: 0.8125rem;
  opacity: 0.75;
}

.the1-order-total {
  font-variant-numeric: tabular-nums;
}

.the1-order-status {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}

.the1-address-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.the1-address-card {
  position: relative;
  padding: 1.25rem;
  border: 1px solid rgba(var(--the1-outline-variant-rgb, 120, 120, 120), 0.25);
  border-radius: 0.75rem;
  line-height: 1.6;
}

.the1-address-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.the1-address-default {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}

.the1-address-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  opacity: 0.7;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.the1-address-remove:hover { opacity: 1; }
.the1-address-remove:disabled { opacity: 0.4; cursor: default; }
.the1-address-remove .material-symbols-outlined { font-size: 1.125rem; }

/* ---------------------------------------------------------------------
   Кабинет покупателя, вид А «Приборная панель».
   Выбран владельцем 21 августа 2026 из четырёх прототипов.

   Логические свойства (inline-start вместо left) обязательны и здесь:
   арабская версия читается справа налево.
   --------------------------------------------------------------------- */

/* Шапка панели: кто вошёл, сколько баллов, кнопка правки профиля. */
.the1-account-appbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(0, 242, 255, 0.12);
  border-radius: 0.75rem;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(8px);
}

.the1-account-who {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* Инициалы вместо картинки: своих аватаров мы не храним, а Gravatar
   отдал бы почту покупателя третьей стороне. */
.the1-account-avatar {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 242, 255, 0.25);
  background: rgba(0, 242, 255, 0.08);
  color: #00f2ff;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

.the1-account-who-text { min-width: 0; }

.the1-account-who-text h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--the1-on-surface, #e6e6e6);
  overflow-wrap: anywhere;
}

.the1-account-who-text p {
  font-size: 0.875rem;
  color: var(--the1-on-surface-variant, #b9cacb);
  overflow-wrap: anywhere;
}

.the1-account-points {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.the1-account-points p {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-points strong {
  font-size: 2rem;
  line-height: 1;
  color: #00f2ff;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .the1-account-points { align-items: flex-end; }
  html[dir="rtl"] .the1-account-points { align-items: flex-start; }
}

/* Плотная сетка карточек — то, чем этот вид отличается от остальных трёх. */
.the1-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .the1-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Во всю ширину — только карточка, помеченная явно (заказы на обзоре).
     Правило по :first-child растягивало первую карточку и на странице
     безопасности, где обе должны быть одинаковыми. */
  .the1-account-grid > .the1-account-tile.is-wide { grid-column: 1 / -1; }
}

.the1-account-tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(120, 120, 120, 0.15);
  border-radius: 0.75rem;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(8px);
}

.the1-account-tile-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.the1-account-tile-head .material-symbols-outlined {
  font-size: 1.25rem;
  color: #00f2ff;
}

.the1-account-tile-head h2 {
  font-size: 1.125rem;
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-account-tile-body { flex: 1 1 auto; }

.the1-account-tile-body p { color: var(--the1-on-surface-variant, #b9cacb); }

.the1-account-tile-strong {
  color: var(--the1-on-surface, #e6e6e6) !important;
  font-weight: 600;
}

.the1-account-tile-sub {
  font-size: 0.875rem;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-tile-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
}

.the1-account-tile-link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #00f2ff;
}

.the1-account-tile-link:hover { text-decoration: underline; }

.the1-account-head-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.the1-account-head-row h1 { margin-bottom: 0; }

.the1-account-subtitle {
  margin: 2rem 0 1rem;
  font-size: 1.125rem;
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-account-note {
  font-size: 0.875rem;
  color: var(--the1-on-surface-variant, #b9cacb);
  margin-bottom: 0.75rem;
}

.the1-account-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-back:hover { color: #00f2ff; }
/* Стрелка «назад» на арабском должна смотреть в другую сторону. */
html[dir="rtl"] .the1-account-back .material-symbols-outlined { transform: scaleX(-1); }

/* Цель под палец — не меньше 44px: на прототипах это была одна из
   найденных ошибок, повторять её в настоящем кабинете незачем. */
.the1-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(120, 120, 120, 0.35);
  color: var(--the1-on-surface, #e6e6e6);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.the1-account-btn:hover { border-color: rgba(0, 242, 255, 0.5); color: #00f2ff; }

.the1-account-btn.is-primary {
  background: #00f2ff;
  border-color: #00f2ff;
  color: #04262a;
  font-weight: 600;
}

.the1-account-btn.is-primary:hover { filter: brightness(1.1); color: #04262a; }

.the1-account-btn.is-danger { border-color: rgba(255, 84, 73, 0.5); color: #ff5449; }
.the1-account-btn.is-danger:hover { background: rgba(255, 84, 73, 0.08); color: #ff5449; }
.the1-account-btn:disabled { opacity: 0.5; cursor: default; }

/* Строка состояния: включено / не настроено / просто сообщение. */
.the1-account-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-state .material-symbols-outlined { font-size: 1.25rem; }
.the1-account-state.is-on { color: #7ee787; }
.the1-account-state.is-on b { color: #7ee787; }
.the1-account-state.is-off b { color: var(--the1-on-surface-variant, #b9cacb); }

.the1-account-state.is-info {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 242, 255, 0.18);
  background: rgba(0, 242, 255, 0.05);
  align-items: flex-start;
}

.the1-account-state.is-info .material-symbols-outlined { color: #00f2ff; }

/* ---------- Один заказ ---------- */
.the1-order-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.the1-order-head h1 {
  font-size: 1.5rem;
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-order-items {
  margin-top: 1rem;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

.the1-order-item {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid rgba(120, 120, 120, 0.1);
}

.the1-order-item-name { flex: 1 1 auto; color: var(--the1-on-surface, #e6e6e6); }
.the1-order-item-qty { color: var(--the1-on-surface-variant, #b9cacb); }
.the1-order-item-sum { font-variant-numeric: tabular-nums; color: #00f2ff; }

.the1-order-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0.25rem;
  font-size: 1.125rem;
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-order-sum b { color: #00f2ff; font-variant-numeric: tabular-nums; }

.the1-order-timeline { list-style: none; padding: 0; margin: 0; }

.the1-order-timeline li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.625rem 0;
  border-inline-start: 2px solid rgba(0, 242, 255, 0.25);
  padding-inline-start: 1rem;
}

.the1-order-timeline span { color: var(--the1-on-surface-variant, #b9cacb); font-size: 0.8125rem; }
.the1-order-timeline b { color: var(--the1-on-surface, #e6e6e6); }
.the1-order-timeline i { flex-basis: 100%; font-style: normal; color: var(--the1-on-surface-variant, #b9cacb); font-size: 0.875rem; }

/* ---------- Адреса: ряд действий ---------- */
.the1-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-top: 0.75rem;
}

.the1-address-act {
  min-height: 44px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-address-act:hover { color: #00f2ff; }
.the1-address-act:disabled { opacity: 0.4; cursor: default; }

/* ---------- Устройства ---------- */
.the1-session-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

.the1-session-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid rgba(120, 120, 120, 0.1);
}

.the1-session-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.the1-session-dev { color: var(--the1-on-surface, #e6e6e6); overflow-wrap: anywhere; }
.the1-session-meta { font-size: 0.8125rem; color: var(--the1-on-surface-variant, #b9cacb); }

.the1-session-current {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7ee787;
}

/* ---------- Окно поверх страницы ---------- */
.the1-account-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.the1-account-modal-box {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 242, 255, 0.2);
  background: #141414;
}

.the1-account-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.the1-account-modal-head h2 {
  font-size: 1.125rem;
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-account-modal-x {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-modal-x:hover { color: #00f2ff; }

.the1-account-modal-error {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 84, 73, 0.4);
  background: rgba(255, 84, 73, 0.08);
  color: #ff5449;
  font-size: 0.875rem;
}

/* Кнопки прилипают к низу окна. Форма адреса из девяти полей на телефоне
   не помещается целиком, и «Сохранить» уезжало под край: человек заполнял
   форму и не находил, чем её закончить. */
.the1-account-modal-foot {
  position: sticky;
  bottom: -1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding: 0.75rem 0 1.5rem;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0), #141414 0.75rem);
}

html[dir="rtl"] .the1-account-modal-foot { justify-content: flex-start; }

.the1-account-field {
  display: block;
  margin-bottom: 0.875rem;
}

.the1-account-field > span {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-field input,
.the1-account-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(120, 120, 120, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--the1-on-surface, #e6e6e6);
}

.the1-account-field input:focus,
.the1-account-field select:focus {
  outline: none;
  border-color: #00f2ff;
}

.the1-account-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  color: var(--the1-on-surface-variant, #b9cacb);
}

.the1-account-check input { width: 1.125rem; height: 1.125rem; accent-color: #00f2ff; }

/* Секрет и резервные коды — единственные места, где нужен моноширинный
   набор: их переписывают вручную, и «l» рядом с «1» стоит различать. */
.the1-account-secret,
.the1-account-codes code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  color: #00f2ff;
  overflow-wrap: anywhere;
  /* Направление письма здесь всегда слева направо: ключ не переводится,
     и на арабской версии он иначе показался бы задом наперёд. */
  direction: ltr;
  unicode-bidi: isolate;
}

.the1-account-secret {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border: 1px dashed rgba(0, 242, 255, 0.35);
  background: rgba(0, 242, 255, 0.05);
  text-align: center;
}

.the1-account-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.the1-account-codes code {
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
}

/* =====================================================================
   Вход и первая регистрация.

   Эту страницу покупатель видит первой, и по ней решает, куда попал.
   Вид собран по прототипу Г («Витрина»): слева обещание, справа короткая
   форма. Владелец 21 августа 2026 попросил довести его до люксового и
   добавить глубокий фиолетовый.

   Как устроен цвет: фиолетовый — это среда (фон, свечения, волоски
   разделителей), циан — единственный резкий акцент и только там, где
   можно нажать. Два ярких цвета сразу превращают премиум в ярмарку,
   поэтому фиолетовый нигде не спорит с цианом за внимание.

   Обещания на левой половине проверены на честность: ни баллов, ни
   «статуса основателя», ни раннего доступа — начисление баллов ещё не
   работает, и обещать его до запуска нельзя.
   ===================================================================== */

.the1-auth {
  --auth-void: #07060c;
  --auth-violet-deep: #150b2b;
  --auth-violet: #3a2168;
  --auth-violet-line: rgba(167, 139, 250, 0.22);
  --auth-violet-glow: rgba(109, 52, 208, 0.2);
  /* Основной текст почти белый, второстепенный — на два шага темнее, но
     всё ещё уверенно читаемый. Прежняя пара была сиреневой и близкой по
     светлоте: страница выглядела так, будто её припорошило пылью. */
  --auth-ink: #ffffff;
  --auth-body: #d8d3e4;
  --auth-muted: #9d95b2;
  --auth-cyan: #00f2ff;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100svh;
  /* Фиолетовый держим глубоким и приглушённым. Первый вариант был ярче
     раза в полтора и читался как неон из клуба, а не как дорогая витрина:
     насыщенность здесь работает против ощущения дороговизны. */
  background:
    radial-gradient(115% 85% at 8% 0%, rgba(31, 17, 61, 0.95) 0%, transparent 58%),
    radial-gradient(85% 65% at 100% 100%, rgba(43, 24, 79, 0.5) 0%, transparent 60%),
    var(--auth-void);
  color: var(--auth-ink);
  overflow: hidden;
}

/* Два мягких пятна света. Не картинка: изображение весом в мегабайт
   ради размытого пятна — плохой обмен, а в Китае ещё и не факт, что
   загрузится быстро. */
.the1-auth::before,
.the1-auth::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.the1-auth::before {
  inset-block-start: -12rem;
  inset-inline-start: -10rem;
  width: 34rem;
  height: 34rem;
  background: var(--auth-violet-glow);
}

.the1-auth::after {
  inset-block-end: -14rem;
  inset-inline-end: -8rem;
  width: 28rem;
  height: 28rem;
  background: rgba(0, 242, 255, 0.06);
}

@media (min-width: 960px) {
  .the1-auth { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------- левая половина */

.the1-auth-showcase {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3.5rem 1.5rem 2rem;
}

/* Знак со слоганом стоит по середине высоты, строка о рынках прижата к
   низу. Раньше обе группы жались друг к другу в центре, и внизу зияла
   пустота — так выглядит недоделанная страница, а не просторная. */
@media (min-width: 960px) {
  .the1-auth-brand { margin-block: auto; }
  .the1-auth-markets { margin-top: auto; }
}

@media (min-width: 960px) {
  .the1-auth-showcase {
    padding: 5rem 4.5rem;
    border-inline-end: 1px solid rgba(167, 139, 250, 0.28);
  }
}

/* На узком экране половинки перестают быть половинками: части левой
   колонки расходятся вокруг формы, чтобы первым экраном был смысл,
   а вторым — сама форма, а не список доводов перед ней. */
@media (max-width: 959px) {
  .the1-auth-showcase { display: contents; }
  /* Порядок задаётся тем узлам, которые действительно лежат в сетке.
     Первый вариант ставил его списку внутри обёртки — обёртка осталась
     с порядком по умолчанию и уехала на самый верх: телефон открывал
     страницу списком доводов, а логотипа и формы видно не было. */
  .the1-auth-brand   { order: 1; padding: 3rem 1.5rem 0; }
  .the1-auth-panel   { order: 2; }
  .the1-auth-markets { order: 3; padding: 0 1.5rem 3rem; }
}

.the1-auth-brand .the1-wordmark {
  font-size: 1.5rem;
  letter-spacing: 0.22em;
}

/* Слоган не переводится — это имя обещания, а не предложение.

   Набран тем же шрифтом, что и логотип STORETHE1: владелец посмотрел
   вариант с антиквой и решил, что слоган должен звучать одним голосом
   со знаком. Антиква осталась только в заголовках.

   Разрядка и вес взяты у самого логотипа, размер — крупнее в несколько
   раз, поэтому свечение под буквами здесь мягче: на большом кегле тот же
   ореол превращается в туман. */
.the1-auth-slogan {
  margin-top: 2rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--auth-ink);
  direction: ltr;
  unicode-bidi: isolate;
}

.the1-auth-slogan b {
  font-weight: 800;
  color: var(--auth-cyan);
  text-shadow: 0 0 28px rgba(0, 242, 255, 0.28);
}

/* Волосок под слоганом: тонкая линия делает для ощущения дороговизны
   больше, чем любая рамка или тень. */
.the1-auth-rule {
  width: 4.5rem;
  height: 1px;
  margin: 1.75rem 0;
  border: 0;
  background: linear-gradient(to right, var(--auth-cyan), transparent);
}

html[dir="rtl"] .the1-auth-rule {
  background: linear-gradient(to left, var(--auth-cyan), transparent);
}

.the1-auth-lead {
  max-width: 36ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--auth-body);
}

/* Подписи разделов — обычным шрифтом и обычными буквами.

   До этого вся мелочь на странице была набрана моноширинным капслоком
   с разрядкой: «ЧТО ДАЁТ АККАУНТ», «ЭЛЕКТРОННАЯ ПОЧТА», «ПОКАЗАТЬ»,
   «ЗАБЫЛИ ПАРОЛЬ?». Десяток таких строк превращает страницу в приборную
   доску и работает против дороговизны — дорогое обычно набрано тихо. */
/* Одна строка внизу левой половины вместо списка доводов: рынки,
   валюта, языки. Всё остальное, что там стояло, мог бы написать о себе
   любой магазин. */
.the1-auth-markets {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--auth-muted);
}

/* --------------------------------------------------- правая половина */

.the1-auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem 3rem;
}

@media (min-width: 960px) {
  .the1-auth-panel { padding: 5rem 4.5rem; }
}

.the1-auth-box { width: 100%; max-width: 26rem; margin-inline: auto; }

.the1-auth-tabs {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--auth-violet-line);
}

.the1-auth-tab {
  position: relative;
  padding: 0 0 0.875rem;
  min-height: 44px;
  background: none;
  border: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--auth-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.the1-auth-tab:hover { color: var(--auth-ink); }

.the1-auth-tab[aria-selected="true"] { color: var(--auth-cyan); }

.the1-auth-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--auth-cyan);
}

.the1-auth-title {
  font-family: "Cormorant Garamond", "Noto Kufi Arabic", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--auth-ink);
}

.the1-auth-sub {
  margin: 0.625rem 0 2rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--auth-body);
}

.the1-auth-field { display: block; margin-bottom: 1.75rem; }

.the1-auth-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.the1-auth-field-head > span,
.the1-auth-field > span {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--auth-muted);
}

.the1-auth-field-head > span { margin-bottom: 0; }

.the1-auth-field input {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--auth-violet-line);
  border-radius: 0;
  background: transparent;
  color: var(--auth-ink);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.the1-auth-field input::placeholder { color: rgba(167, 159, 192, 0.4); }
.the1-auth-field input:focus { outline: none; border-bottom-color: var(--auth-cyan); }
.the1-auth-field input:disabled { opacity: 0.45; }

/* Поле пароля и кнопка «показать» в одной строке. Кнопка словом, а не
   значком глаза: значок пришлось бы добавлять в шрифт, а слово ещё и
   понятнее — «показать» не спутать с «скрыть». */
.the1-auth-pass { position: relative; }

.the1-auth-eye {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0.5rem;
  min-height: 44px;
  padding: 0 0.25rem;
  background: none;
  border: 0;
  font-size: 0.8125rem;
  color: var(--auth-muted);
  cursor: pointer;
}

.the1-auth-eye:hover { color: var(--auth-cyan); }

.the1-auth-link {
  font-size: 0.8125rem;
  color: var(--auth-muted);
}

.the1-auth-link:hover { color: var(--auth-cyan); }

.the1-auth-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--auth-cyan);
  color: #04232a;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.1s ease, opacity 0.2s ease;
}

.the1-auth-submit:hover { box-shadow: 0 0 32px rgba(0, 242, 255, 0.28); }
.the1-auth-submit:active { transform: scale(0.99); }
.the1-auth-submit:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.the1-auth-msg {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 84, 73, 0.45);
  border-radius: 2px;
  background: rgba(255, 84, 73, 0.08);
  color: #ff8a80;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Сообщение об успехе — тем же местом, но фиолетовым: красный здесь
   означал бы ошибку там, где всё получилось. */
.the1-auth-msg.is-ok {
  border-color: var(--auth-violet-line);
  background: rgba(124, 58, 237, 0.12);
  color: var(--auth-ink);
}

.the1-auth-notice {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--auth-violet-line);
  border-radius: 2px;
  background: rgba(124, 58, 237, 0.1);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--auth-ink);
}

.the1-auth-notice .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: rgba(167, 139, 250, 0.9);
}

/* Ссылка отдельной строкой, а не в потоке: на арабском она вставала
   вплотную к точке предыдущего предложения и читалась как его хвост. */
.the1-auth-notice a {
  display: block;
  width: fit-content;
  margin-top: 0.5rem;
  color: var(--auth-cyan);
  border-bottom: 1px solid rgba(0, 242, 255, 0.4);
}

.the1-auth-consent {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--auth-muted);
}

.the1-auth-consent a {
  color: rgba(167, 139, 250, 0.95);
  border-bottom: 1px solid var(--auth-violet-line);
}

.the1-auth-consent a:hover { color: var(--auth-cyan); }

.the1-auth-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--auth-muted);
}

.the1-auth-or::before,
.the1-auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--auth-violet-line);
}

.the1-auth-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--auth-violet-line);
  border-radius: 2px;
  background: transparent;
  color: var(--auth-ink);
  font-size: 0.875rem;
}

.the1-auth-alt:disabled { opacity: 0.4; cursor: not-allowed; }
.the1-auth-alt .the1-auth-soon { color: var(--auth-muted); font-size: 0.8125rem; }

.the1-auth-alt.is-google { margin-bottom: 0.75rem; }
.the1-auth-alt.is-google:hover { border-color: var(--auth-cyan); }

/* Буква G вместо картинки: логотип Google — чужой знак, и хранить его
   у себя значит следить за его правилами показа. Буква ничего не нарушает
   и не тянет ещё один файл. */
.the1-auth-g {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--auth-cyan);
}

.the1-auth-fine {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--auth-muted);
}

.the1-auth-guest {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--auth-violet-line);
  font-size: 0.875rem;
  color: var(--auth-muted);
}

.the1-auth-guest a {
  color: var(--auth-cyan);
  border-bottom: 1px solid rgba(0, 242, 255, 0.4);
}

.the1-auth-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--auth-violet-line);
  font-size: 0.8125rem;
  color: var(--auth-muted);
}

.the1-auth-legal a:hover { color: var(--auth-cyan); }

@media (prefers-reduced-motion: reduce) {
  .the1-auth *,
  .the1-auth *::before,
  .the1-auth *::after { transition: none !important; animation: none !important; }
}