/* Lab (design11) — светлый «инженерный»: бумага в клетку, чёрные контуры, моно-подписи, электрический синий + лайм */
/* Шрифты — SIL Open Font License, файлы в fonts/tfl. Общий каркас — css/tfl-base.css. */
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tfl/golos-text-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tfl/golos-text-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/tfl/golos-text-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/tfl/golos-text-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/tfl/golos-text-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Golos"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/tfl/golos-text-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL JBMono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tfl/jetbrains-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL JBMono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tfl/jetbrains-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL JBMono"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tfl/jetbrains-mono-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL JBMono"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tfl/jetbrains-mono-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --t-bg: #dcdcd3;
    --t-paper: #f4f4ec;
    --t-ink: #111111;
    --t-muted: #50544c;
    --t-line: rgba(17, 17, 17, 0.9);
    --t-surface: #fbfbf6;
    --t-surface-2: #ecece2;
    --t-accent: #2f5cff;
    --t-accent-2: #c6ff3d;
    --t-sale: #ff4f1f;
    --t-on-accent: #ffffff;
    --t-btn-bg: #111111;
    --t-btn-ink: #c6ff3d;
    --t-btn-radius: 8px;
    --t-btn-shadow: 4px 4px 0 #2f5cff;
    --t-radius: 6px;
    --t-radius-sm: 4px;
    --t-shadow: none;
    --t-border: 1.5px solid #111111;
    --t-display: "TFL Golos", "Segoe UI", Arial, sans-serif;
    --t-text: "TFL Golos", "Segoe UI", Arial, sans-serif;
    --t-mono: "TFL JBMono", ui-monospace, Menlo, Consolas, monospace;
    --t-title-align: left;
    --t-title-case: uppercase;
    --t-title-size: 23px;
    --t-title-weight: 800;
    --t-title-spacing: 0.01em;
    --eb-desc: "// 01 — опис";
    --eb-features: "// 02 — переваги";
    --eb-steps: "// 03 — як працює";
    --eb-specs: "// 04 — параметри";
    --eb-reviews: "// 05 — відгуки ★ 4.9";
    --eb-how: "// 06 — замовлення";
}

.content-wrap {
    background-color: var(--t-paper);
    background-image:
        linear-gradient(rgba(17, 17, 17, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

.title { padding-bottom: 12px; }
.title::after { left: 0; width: 100%; height: 1.5px; border-radius: 0; background: #111; transform: none; }
.product-description .title::before,
.features-block .title::before,
.steps-block .title::before,
.specifications .title::before,
.reviews .title::before,
.how-to-get .title::before {
    margin: 0 0 8px;
    padding: 0;
    background: none;
    font-family: var(--t-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--t-accent);
    text-transform: none;
}

.item-card .header { text-align: left; }
.product-subtitle {
    border: 1.5px solid #111;
    border-radius: 4px;
    background: var(--t-accent-2);
    font-family: var(--t-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #111;
}
.product-title { font-size: 31px; font-weight: 800; letter-spacing: -0.01em; }

.featured-media img { border: 1.5px solid #111; border-radius: 6px; }
.featured-media::after {
    content: "FIG. 01 — фото товару";
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    padding: 4px 8px;
    border: 1.5px solid #111;
    background: #fbfbf6;
    font-family: var(--t-mono);
    font-size: 11px;
    font-weight: 700;
    color: #111;
}
.featured-media .discount {
    border: 1.5px solid #111;
    border-radius: 4px;
    background: var(--t-accent-2);
    font-family: var(--t-mono);
    color: #111;
}

.pricing-block { grid-template-columns: 1fr 1.3fr; padding: 0; background: #fbfbf6; }
.old-price, .new-price { padding: 16px 8px; }
.old-price { border-right: 1.5px solid #111; }
.old-price span, .new-price span { font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--t-muted); }
.old-price strong { font-family: var(--t-mono); font-weight: 500; font-size: 24px; text-decoration-color: var(--t-sale); }
.new-price strong {
    padding: 0 6px;
    font-family: var(--t-mono);
    font-weight: 700;
    font-size: 42px;
    color: #111;
    background: linear-gradient(transparent 58%, var(--t-accent-2) 58%);
}

.order-button a::after,
.order-form form button::after { content: "→"; font-family: var(--t-mono); font-size: 20px; }
.order-button a, .order-form form button { font-size: 16px; letter-spacing: 0.06em; }

.number-discount .block-title { font-family: var(--t-mono); font-size: 15px; }
.discount-list li { border: 1.5px dashed #111; background: #fbfbf6; font-family: var(--t-mono); font-size: 14px; color: #111; }
.discount-list li:last-child { border-style: solid; background: var(--t-accent-2); }
.discount-list li strong { font-family: var(--t-mono); }

.countdown h4 { font-family: var(--t-mono); letter-spacing: 0.02em; color: #111; }
.countdown__item { border: 1.5px solid #111; border-radius: 4px; background: #111; }
.countdown__value { font-family: var(--t-mono); color: var(--t-accent-2); }
.countdown__label { font-family: var(--t-mono); color: rgba(255, 255, 255, 0.6); }

.presentation { text-align: left; color: #2a2d27; }
.presentation img { border: 1.5px solid #111; border-radius: 6px; }
.presentation ul li { border: 1.5px solid #111; border-radius: 4px; background: #fbfbf6; }
.presentation ul li::before { border-radius: 3px; background: #111; color: var(--t-accent-2); }

.feature-item-wrap { counter-reset: tflfeat; }
.features-block .feature-item { position: relative; counter-increment: tflfeat; }
.features-block .feature-item::after {
    content: "0" counter(tflfeat);
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--t-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--t-accent);
}
.feature-image { border: 1.5px solid #111; border-radius: 4px; }

.steps-item::before { content: "[0" counter(tflstep) "]"; font-family: var(--t-mono); font-size: 22px; color: var(--t-accent); }
.steps-item .img img { border: 1.5px solid #111; border-radius: 4px; }

.characteristics__list { padding: 4px 14px; }
.characteristics__list li { border-bottom: 1.5px dashed rgba(17, 17, 17, 0.5); font-family: var(--t-mono); font-size: 14px; }
.characteristics__list li b { font-weight: 500; }
.characteristics__list li b::after { content: ":"; }

.rev_item img, .rev_item_image { border: 1.5px solid #111; border-radius: 4px; }
.rev-text::before { color: #111; text-shadow: none; background: var(--t-accent-2); display: inline-block; padding: 0 6px; }
.rev-author { font-family: var(--t-mono); }
.reviews .swiper-button-next, .reviews .swiper-button-prev { border: 1.5px solid #111; border-radius: 4px; box-shadow: none; }

.order_steps1 .bg_icon { border-radius: 4px; background: #111; }
.order_steps1 .bg_icon img { filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(30deg); }
.order_steps1 .text h4 { text-transform: uppercase; font-size: 15px; }

.how-to-get + .top-card-wrap { border: 1.5px solid #111; border-radius: 8px; background: #fbfbf6; box-shadow: 6px 6px 0 var(--t-accent); }
.how-to-get + .top-card-wrap::before {
    content: "ORDER_FORM // оформлення";
    display: block;
    margin: -22px -16px 16px;
    padding: 8px 14px;
    border-bottom: 1.5px solid #111;
    background: #111;
    font-family: var(--t-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--t-accent-2);
}
.order-form form span input { border: 1.5px solid #111; border-radius: 4px; background: #fff; font-family: var(--t-mono); font-size: 16px; }