/* =====================================================   ROSSAFE — styles.css   Dark theme, polygraphy-inspired (red/black/white)   ===================================================== *//* ============== FONTS (локальные) ============== */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('fonts/NotoSans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    font-display: block;
    src: url('fonts/NotoSans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url('fonts/NotoSans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('fonts/NotoSans-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 200;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-200.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 500;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('fonts/YanoneKaffeesatz-700.woff2') format('woff2');
}

/* ============== RESET ============== */* { margin: 0; padding: 0; box-sizing: border-box; }html, body { min-height: 100%; }html {    background: #1a1a1a;}body {    font-family: 'Noto Sans', Helvetica, Arial, sans-serif;    background: transparent;    color: #d8d8d8;    line-height: 1.5;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    overflow: hidden;    scrollbar-width: none;            /* Firefox */    -ms-overflow-style: none;         /* IE/Edge */}body::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Opera */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }body { animation: fadeIn 0.4s ease-out; }/* ============== BACKGROUND CANVAS ==============   One full-bleed photo, fixed in viewport. Like MOONLILNE_LEND_final. */.bg-wrapper {    position: fixed;    inset: 0;    z-index: -1;    overflow: hidden;    pointer-events: none;}.bg-wrapper img {    width: 100%;    height: 100%;    max-width: none;          /* override global img { max-width: 50% } */    object-fit: cover;    object-position: top center;    display: block;}img { max-width: 50%; display: block; }a { color: inherit; text-decoration: none; }button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }/* ============== TYPOGRAPHY ============== */h1, h2, h3, h4, h5, h6 {    font-family: 'Yanone Kaffeesatz', 'Arial Narrow', sans-serif;    font-weight: 300;    color: #ffffff;    letter-spacing: 0;    text-transform: uppercase;}h1 { font-size: 48px; line-height: 1.1; }
h1.product-hero__title { font-size: 48px; }h2 { font-size: 36px; line-height: 1.2; }h3 { font-size: 22px; line-height: 1.3; }h4 { font-size: 18px; line-height: 1.3; }p { margin-bottom: 12px; }/* ============== VARIABLES ============== */:root {    --bg:          #0e0e0e;    --bg-elev:     #181818;    --bg-card:     #1c1c1c;    --bg-card-hi:  #242424;    --line:        #2a2a2a;    --line-strong: #3a3a3a;    --text:        #d8d8d8;    --text-soft:   #9a9a9a;    --text-mute:   #6a6a6a;    --white:       #f4f4f4;    --accent:      #C8102E;        /* ROSSAFE red */    --accent-hi:   #E2181C;    --accent-soft: rgba(200,16,46,0.15);    --gold:        #C9A227;        /* "Не пробиваемая защита" gold */    --shadow:      0 8px 28px rgba(0,0,0,0.55);    --shadow-sm:   0 4px 14px rgba(0,0,0,0.35);    --radius:      4px;    --radius-lg:   8px;    --maxw:        1400px;    --gap:         24px;}/* ============== HEADER / NAV ============== */.site-header {    position: fixed; top: 0; left: 0; width: 100%;    height: 50px;    background: transparent;    z-index: 100;}.site-header__inner {    max-width: var(--maxw); margin: 0 auto;    display: flex; align-items: center; justify-content: space-between;    padding: 0 28px;    height: 100%;}.brand {    display: flex; align-items: center;    color: var(--white);    text-decoration: none;    line-height: 0;}.brand img {    display: block;    height: 90px;    width: auto;}.brand__mark {    display: inline-block; width: 8px; height: 22px;    background: var(--accent);}.header-actions {    display: flex;    align-items: center;    gap: 8px;    margin-right: auto;    margin-left: 16px;}.header-btn {    background: none;    border: none;    color: rgba(216,216,216,0.8);    cursor: pointer;    padding: 6px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 4px;    transition: color 0.2s, background 0.2s;}.header-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }.header-search {    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.15);    border-radius: 4px;    color: rgba(216,216,216,0.9);    font-family: 'Noto Sans', sans-serif;    font-size: 15px;    padding: 6px 12px;    outline: none;    width: 400px;    transition: border-color 0.2s, background 0.2s;    margin-left: 10px;    margin-right: auto;}.header-search::placeholder { color: rgba(154,154,154,0.7); }.header-search:hover, .header-search:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); }.nav { display: flex; align-items: center; gap: 28px; }.nav a {    font-family: 'Noto Sans', sans-serif;    font-weight: 300;    font-size: 15px;    letter-spacing: 0;    text-transform: uppercase;    color: var(--text-soft);    padding: 6px 0;    border-bottom: 1px solid transparent;    transition: all 0.2s;}.nav a:hover, .nav a.active { color: var(--white); border-bottom-color: var(--accent); }.nav-cta {    font-family: 'Noto Sans', sans-serif;    font-weight: 300;    font-size: 15px;    text-transform: uppercase;    border: 1px solid var(--accent);    color: var(--accent);    padding: 8px 16px;    transition: all 0.2s;}.nav-cta:hover { background: var(--accent); color: var(--white); }/* Mobile burger */.burger {    display: none;    width: 40px; height: 40px;    align-items: center; justify-content: center;    border: 1px solid var(--line-strong);    border-radius: var(--radius);}.burger span { display: block; width: 18px; height: 2px; background: var(--white); position: relative; }.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--white); }.burger span::before { top: -6px; }.burger span::after  { top:  6px; }/* ============== HERO (Start1/Start2/Start3) ==============   Background image lives on .hero itself (so inline `style="background-image:..."`   on a per-page basis can override the default). ::before is just a dark gradient   overlay for text readability. */.hero {    position: relative;    min-height: 100vh;    padding-top: 50px;    display: flex;    overflow: hidden;    background-color: #1a1a1a;    background-image: url('../images/bg/fon_start%20(1).webp');    background-size: cover;    background-position: top center;    background-repeat: no-repeat;}.hero::before {    content: '';    position: absolute; inset: 0;    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100%);    z-index: 1;    pointer-events: none;}.hero__inner {    position: relative;    z-index: 2;    max-width: var(--maxw);    margin: 0 auto;    padding: 28px;    width: 100%;    display: grid;    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);    gap: 60px;    align-items: stretch;    flex: 1;}.hero__cta {    display: flex; flex-direction: column;    align-items: flex-start;    justify-content: flex-end;    gap: 16px;    max-width: 320px;    padding-bottom: 60px;}.hero__cta::before {    content: '';    flex: 1;}.hero__cta .btn { width: 100%; justify-content: center; padding: 16px 28px; }.hero__text {    color: var(--white);    font-family: 'Noto Sans', sans-serif;    font-size: 15px;    line-height: 1.4;    background: transparent;    border: none;    padding: 0;    margin-bottom: 60px;    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);    align-self: flex-end;}.hero__text p { margin-bottom: 12px; }.hero__text p:last-child { margin-bottom: 0; }.hero__text .conditions-head { font-weight: 600; margin-top: 18px; margin-bottom: 6px; }.hero__text strong { color: var(--white); font-weight: 600; }.hero__text ul {    list-style: none;    margin: 8px 0 14px;    padding-left: 0;}.hero__text ul li {    position: relative;    padding-left: 18px;    margin-bottom: 6px;    color: var(--white);}.hero__text ul li::before {    content: '';    position: absolute;    left: 0;    top: 50%;    transform: translateY(-50%);    width: 8px;    height: 8px;    border-radius: 50%;    background: #E42905;}/* Hero on Start2 — right column shows bestsellers instead of text */.hero__bestsellers {    color: var(--white);    margin-bottom: 60px;    display: flex; flex-direction: column;}.hero__bestsellers-title {    color: var(--white);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-weight: 300;    font-size: 48px;    line-height: 1.2;    text-transform: uppercase;    margin: 8px 0 12px;}.hero__bestsellers-sub {    color: var(--text-soft);    font-size: 15px;    margin-bottom: 28px;    max-width: 720px;}@media (max-width: 1250px) {    .hero__inner {        grid-template-columns: 1fr;        gap: 24px;    }    .hero__text {        margin-bottom: 24px;        font-size: 13px;    }    .hero__bestsellers { margin-bottom: 24px; }    .hero__cta { padding-bottom: 24px; }}.hero__cta {    display: flex; flex-direction: column;    align-items: flex-start;    justify-content: flex-end;    gap: 16px;    max-width: 320px;    padding-bottom: 60px;}.hero__cta::before {    content: '';    flex: 1;}.hero__cta .btn { width: 100%; justify-content: center; padding: 16px 28px; }.hero__text {    color: var(--white);    font-family: 'Noto Sans', sans-serif;    font-size: 15px;    line-height: 1.4;    background: transparent;    border: none;    padding: 0;    margin-bottom: 60px;    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);    align-self: flex-end;}.hero__text p { margin-bottom: 12px; }.hero__text p:last-child { margin-bottom: 0; }.hero__text strong { color: var(--white); font-weight: 600; }.hero__text ul {    list-style: none;    margin: 8px 0 14px;    padding-left: 0;}.hero__text ul li {    position: relative;    padding-left: 18px;    margin-bottom: 6px;    color: var(--white);}.hero__text ul li::before {    content: '';    position: absolute;    left: 0;    top: 50%;    transform: translateY(-50%);    width: 8px;    height: 8px;    border-radius: 50%;    background: #E42905;}@media (max-width: 1250px) {    .hero__inner {        grid-template-columns: 1fr;        gap: 24px;    }    .hero__text {        margin-bottom: 24px;        font-size: 13px;    }    .hero__cta { padding-bottom: 24px; }}.btn {    display: inline-flex; align-items: center; gap: 10px;    padding: 16px 32px;    font-family: 'Noto Sans', sans-serif;    font-size: 15px;    font-weight: 500;    letter-spacing: 0;    text-transform: uppercase;    border-radius: var(--radius);    transition: all 0.2s;    border: 1px solid transparent;    cursor: pointer;    text-align: center;    line-height: 1;}.btn--primary {    background: var(--accent);    color: var(--white);    border-color: var(--accent);}.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); transform: translateY(-1px); }.btn--ghost {    background: transparent;    color: var(--white);    border-color: var(--line-strong);}.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.04); }.btn--pdf {    background: transparent;    color: var(--accent);    border-color: var(--accent);    font-size: 15px;    padding: 10px 18px;}
.btn--pdf:hover { background: var(--accent); color: var(--white); }
.btn--back { background: transparent; color: var(--text-soft); border: 1px solid var(--line); padding: 8px 14px; font-size: 15px; cursor: pointer; transition: all 0.2s; font-family: inherit; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; }
.btn--back:hover { color: var(--white); border-color: var(--white); }
.btn-pdf-stub { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 4px; }
.btn-pdf-stub__msg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px dashed rgba(154, 154, 154, 0.4); border-radius: 4px; color: rgba(154, 154, 154, 0.9); font-size: 20px; font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.btn-pdf-stub__msg svg { flex-shrink: 0; opacity: 0.7; }.btn--pdf:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }.btn--sm { padding: 10px 18px; font-size: 15px; letter-spacing: 0; }.btn--block { display: flex; width: 100%; justify-content: center; }/* ============== SECTIONS ============== */section.block { padding: 80px 28px; }.block__inner { max-width: var(--maxw); margin: 0 auto; }.block--alt {    background: transparent;    border-top: 1px solid var(--line);    border-bottom: 1px solid var(--line);}.block__head { text-align: center; margin-bottom: 56px; }.block__eyebrow {    color: var(--accent);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px;    letter-spacing: 0;    text-transform: uppercase;    margin-bottom: 16px;}.block__title { margin-bottom: 16px; }.block__sub { color: var(--text-soft); max-width: 720px; margin: 0 auto; }/* ============== CATEGORY CARDS (Landing) ============== */.cat-grid {    display: grid;    grid-template-columns: repeat(auto-fit, 170px);    gap: 24px;    justify-content: center;}/* Categories: round cards 170px with red border, caption below */#categories .cat-card {    background: transparent;    border: none;    border-radius: 0;    box-shadow: none;    text-align: center;    align-items: center;    min-height: auto;}#categories .cat-card:hover {    transform: translateY(-3px);    border: none;    box-shadow: none;}#categories .cat-card__img {    width: 170px;    height: 170px;    aspect-ratio: 1;    border-radius: 50%;    border: 2px solid var(--accent);    overflow: hidden;    background-color: var(--bg-card);    transition: border-color 0.2s, transform 0.2s;    border-bottom: 2px solid var(--accent);}#categories .cat-card:hover .cat-card__img {    border-color: var(--accent-hi);    transform: scale(1.03);}#categories .cat-card__body {    padding: 12px 4px 0;    text-align: center;}#categories .cat-card__count,#categories .cat-card__sub,#categories .cat-card__link {    display: none;}#categories .cat-card__title {    font-size: 15px;    color: var(--white);    text-transform: uppercase;    font-family: 'Noto Sans', sans-serif;    font-weight: 400;    letter-spacing: 0;    margin: 0;}/* Bestellers: 6-in-a-row on desktop, wrap on smaller screens */.hero__bestsellers .prod-grid,#bestsellers .prod-grid {    grid-template-columns: repeat(6, minmax(0, 1fr));    gap: 16px;}@media (max-width: 1200px) {    .hero__bestsellers .prod-grid,    #bestsellers .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}@media (max-width: 560px) {    .hero__bestsellers .prod-grid,    #bestsellers .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}/* Bestellers: round cards 150px with red border, transparent background, caption below */.hero__bestsellers .prod-card,#bestsellers .prod-card {    background: transparent;    border: none;    border-radius: 0;    box-shadow: none;    text-align: center;    align-items: center;}.hero__bestsellers .prod-card:hover,#bestsellers .prod-card:hover {    transform: none;    border: none;    box-shadow: none;}.hero__bestsellers .prod-card__img,#bestsellers .prod-card__img {    width: 150px;    height: 150px;    aspect-ratio: 1;    border-radius: 50%;    border: 2px solid var(--accent);    overflow: hidden;    background-color: var(--bg-card);    margin: 0 auto;}.hero__bestsellers .prod-card__img:hover,#bestsellers .prod-card__img:hover {    border-color: var(--accent);    transform: none;}#bestsellers .prod-card__img img {    width: 100%;    height: 100%;    object-fit: cover;}#bestsellers .prod-card__body {    padding: 12px 4px 0;    text-align: center;}#bestsellers .prod-card__sku,#bestsellers .prod-card__sub,#bestsellers .prod-card__btn {    display: none;}#bestsellers .prod-card__title {    font-size: 15px;    color: var(--white);    text-transform: uppercase;    font-family: 'Noto Sans', sans-serif;    font-weight: 400;    letter-spacing: 0;    margin: 0;}/* Hero bestsellers override: 3 cols × 2 rows, 140px circles (only for start2's .hero__bestsellers, not #bestsellers) */.hero__bestsellers .prod-grid {    grid-template-columns: repeat(3, 140px);    justify-content: start;}.hero__bestsellers .prod-card__img {    width: 140px;    height: 140px;}.cat-card {    position: relative;    background: var(--bg-card);    border: 1px solid var(--line);    border-radius: var(--radius-lg);    overflow: hidden;    transition: all 0.25s;    display: flex; flex-direction: column;    min-height: 320px;}.cat-card:hover {    transform: translateY(-4px);    border-color: var(--accent);    box-shadow: var(--shadow);}.cat-card__img {    aspect-ratio: 16/10;    background-color: var(--bg-card-hi);    background-size: cover;    background-position: center;    border-bottom: 1px solid var(--line);    position: relative;    overflow: hidden;}.cat-card__img::after {    content: '';    position: absolute; inset: 0;    background: linear-gradient(135deg, rgba(200,16,46,0.10) 0%, transparent 60%);    pointer-events: none;}.cat-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }.cat-card__count {    color: var(--accent);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px;    letter-spacing: 0;    text-transform: uppercase;    margin-bottom: 8px;}.cat-card__title { color: var(--white); margin-bottom: 8px; }.cat-card__sub { color: var(--text-soft); font-size: 15px; flex: 1; }.cat-card__link {    margin-top: 16px;    color: var(--accent);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px;    letter-spacing: 0;    text-transform: uppercase;    align-self: flex-start;    border-bottom: 1px solid var(--accent);    padding-bottom: 4px;}.cat-card__link::after { content: ' →'; }/* ============== PRODUCT CARDS (Grid) ============== */.prod-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));    gap: 24px;}.prod-card {    display: flex; flex-direction: column;    background: var(--bg-card);    border: 1px solid var(--line);    border-radius: var(--radius-lg);    overflow: hidden;    transition: all 0.2s;}.prod-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }.prod-card__img {    aspect-ratio: 1/1;    background: var(--bg-card-hi);    display: flex; align-items: center; justify-content: center;    overflow: hidden;}.prod-card__img img { width: 100%; height: 100%; object-fit: cover; }.prod-card__img .placeholder { color: var(--text-mute); font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; letter-spacing: 0; }.prod-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }.prod-card__sku {    color: var(--accent);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px;    letter-spacing: 0;    text-transform: uppercase;    margin-bottom: 6px;}.prod-card__title { color: var(--white); margin-bottom: 8px; }.prod-card__sub { color: var(--text-soft); font-size: 15px; flex: 1; margin-bottom: 12px; }.prod-card__btn {    margin-top: auto;    border: 1px solid var(--accent);    color: #fff;    background: var(--accent);    text-align: center;    padding: 10px;    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px;    letter-spacing: 0;    text-transform: uppercase;    border-radius: var(--radius);    transition: all 0.2s;}.prod-card__btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }/* ============== PRODUCT PAGE ============== */.product {    max-width: var(--maxw);    margin: 0 auto;    padding: 40px 28px 80px;}.breadcrumbs {    display: flex; flex-wrap: wrap; gap: 8px;    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px; letter-spacing: 0; text-transform: uppercase;    color: var(--text-mute);    margin-bottom: 32px;}.breadcrumbs a { color: var(--text-soft); border-bottom: 1px solid transparent; }.breadcrumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }.breadcrumbs__sep { color: var(--line-strong); }.product__top {    display: grid;    grid-template-columns: 1.1fr 1fr;    gap: 48px;    align-items: start;    margin-bottom: 56px;}.product__img {    background: var(--bg-card);    border: 1px solid var(--line);    border-radius: var(--radius-lg);    aspect-ratio: 1/1;    display: flex; align-items: center; justify-content: center;    overflow: hidden;}.product__img img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }.product__img .placeholder { color: var(--text-mute); }.product__head .sku {    color: var(--accent);    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px; letter-spacing: 0; text-transform: uppercase;    margin-bottom: 12px;}.product__title { color: var(--white); margin-bottom: 20px; }.product__desc { color: var(--text-soft); font-size: 15px; margin-bottom: 24px; }.product__features { list-style: none; margin-bottom: 32px; }.product__features li {    padding-left: 24px; position: relative;    color: var(--text);    font-size: 15px;    margin-bottom: 10px;}.product__features li::before {    content: '—'; position: absolute; left: 0; top: 0;    color: var(--accent);    font-weight: 600;}.product__cta { display: flex; gap: 12px; flex-wrap: wrap; }.product__specs {    background: var(--bg-card);    border: 1px solid var(--line);    border-radius: var(--radius-lg);    overflow: hidden;    margin-top: 40px;}.product__specs h3 {    background: var(--bg-card-hi);    padding: 18px 24px;    border-bottom: 1px solid var(--line);    color: var(--white);}.spec-row {    display: grid;    grid-template-columns: 0.4fr 0.6fr;    padding: 14px 24px;    border-bottom: 1px solid var(--line);    align-items: baseline;}.spec-row:last-child { border-bottom: none; }.spec-row__k { color: var(--text-mute); font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; letter-spacing: 0; text-transform: uppercase; }.spec-row__v { color: var(--white); font-size: 15px; }/* ============== CTA / CONTACTS ============== */.contacts {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 40px;    background: var(--bg-card);    border: 1px solid var(--line);    border-radius: var(--radius-lg);    padding: 40px;    max-width: 1000px;    margin: 0 auto;}.contacts__title { color: var(--white); margin-bottom: 20px; }.contacts__list { list-style: none; }.contacts__list li {    padding: 14px 0;    border-bottom: 1px solid var(--line);    display: flex; gap: 16px; align-items: baseline;}.contacts__list li:last-child { border-bottom: none; }.contacts__k { color: var(--text-mute); font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; letter-spacing: 0; text-transform: uppercase; min-width: 120px; }.contacts__v { color: var(--white); font-size: 15px; }.contacts__v a:hover { color: var(--accent); }/* ============== SECTION PLACEHOLDERS ==============   Убрать когда появятся реальные фото. Помогают видеть границы экранов. *//* ============== CATEGORIES BLOCK ==============   All blocks below hero are transparent — the body-level   background-image provides the unified background. */#categories {    position: relative;    background: transparent;    overflow: hidden;}#categories > * { position: relative; z-index: 1; }/* Bestsellers, About, Contacts — transparent too */section.block.block--alt,#about,#contacts {    position: relative;    background: transparent;}section.block.block--alt > *,#about > *,#contacts > * { position: relative; z-index: 1; }/* ============== FOOTER (новый дизайн) ============== */.site-footer { position: sticky; bottom: 0; z-index: 10;
    background: rgba(10, 10, 10, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 7px 28px 7px;
    margin-top: 0; }
.site-footer__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer__centered {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.site-footer__logo {
    width: 220px;
    height: auto;
    margin-bottom: 4px;
}
.site-footer__tagline {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(216, 216, 216, 0.9);
    margin-bottom: 0;
}
.site-footer__tagline-accent {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #E50005;
} /* DEPRECATED blocks below for backward-compat (no longer used in new template) */.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }.site-footer__tagline {    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase;    color: rgba(216, 216, 216, 0.9); margin-bottom: 2px;}.site-footer__tagline-accent {    font-family: 'Yanone Kaffeesatz', sans-serif;    font-size: 20px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;    color: #E50005;}.site-footer__contacts { padding-top: 4px; flex: 1; min-width: 200px; }.site-footer__contacts h4 { color: #fff; margin-bottom: 14px; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }.site-footer__contacts p { color: rgba(154, 154, 154, 0.85); font-size: 15px; line-height: 1.7; margin-bottom: 6px; }.site-footer__contacts .placeholder { color: rgba(154, 154, 154, 0.5); font-style: italic; }.site-footer__circles { display: flex; gap: 12px; align-items: center; padding-top: 4px; flex-shrink: 0; }.footer-circle {    display: flex; align-items: center; justify-content: center;    width: 60px; height: 60px; border-radius: 50%; overflow: hidden;    border: 1.5px solid #E50005; transition: border-color 0.2s, transform 0.2s;    flex-shrink: 0; text-decoration: none; box-sizing: border-box;}.footer-circle:hover { border-color: #ff2030; transform: scale(1.08); }.footer-circle img { display: block; max-width: 110%; max-height: 110%; width: auto; height: auto; object-fit: contain; padding: 3px; box-sizing: border-box; }/* Product page: footer inside scrollable product-wrap */body.product-page .product-wrap { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; height: calc(100vh - 60px); }body.product-page .product-wrap::-webkit-scrollbar { display: none; }body.product-page .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; margin-top: 0; flex-shrink: 0; }/* ============== LOGO HERO (animated ROSSAFE) ============== */.hero--logo {    min-height: 92vh;    display: flex; align-items: center; justify-content: center;    text-align: center;}.logo-stage {    width: 100%;    max-width: 720px;    margin: 0 auto;}.logo-svg {    width: 100%;    height: auto;    display: block;}/* Letter-by-letter reveal */.logo-part {    transform-origin: center;    transform-box: fill-box;    opacity: 0;}.logo-ros {    animation: logoRevealLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;}.logo-square {    animation: logoRevealScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards,               logoPulse 2.4s ease-in-out 1.4s infinite;    transform-origin: 403px 152px; /* center of red square */}.logo-safe {    animation: logoRevealRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;}@keyframes logoRevealLeft {    0%   { opacity: 0; transform: translateX(-30px); }    100% { opacity: 1; transform: translateX(0); }}@keyframes logoRevealRight {    0%   { opacity: 0; transform: translateX(30px); }    100% { opacity: 1; transform: translateX(0); }}@keyframes logoRevealScale {    0%   { opacity: 0; transform: scale(0.6); }    100% { opacity: 1; transform: scale(1); }}@keyframes logoPulse {    0%, 100% { transform: scale(1); }    50%      { transform: scale(1.05); }}/* Respect users who prefer reduced motion */@media (prefers-reduced-motion: reduce) {    .logo-ros, .logo-square, .logo-safe {        animation: none;        opacity: 1;        transform: none;    }}/* ============== UTILS ============== */.center { text-align: center; }.mt-32 { margin-top: 32px; }.mt-48 { margin-top: 48px; }.mt-64 { margin-top: 64px; }.no-link { cursor: default; }/* Back link on product pages: aligned to the left edge of the right column.
   Same 2-col grid as .product-hero__inner so the link lines up automatically. */
.product-back {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 60px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px 60px;
}
.product-back a {
    grid-column: 2;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    text-decoration: underline;
    transition: color 0.2s;
}
.product-back a:hover { color: var(--accent); }/* Skip-link (a11y) */.skip-link {    position: absolute; top: -100px; left: 0;    background: var(--accent); color: var(--white);    padding: 10px 16px; z-index: 99999;    font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px;    text-decoration: none; border-radius: 0 0 4px 0;}.skip-link:focus { top: 0; }/* ============== HEADER SEARCH DROPDOWN ==============
   Single source of truth for the search dropdown styles.
   Tweak visuals here without touching js/header-search.js. */
.header-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: min(100%, 480px);
    z-index: 1000;
    background: rgba(50, 50, 50, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line-strong);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    margin-top: -1px;            /* tuck under input's bottom border */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.header-search-dropdown::-webkit-scrollbar { width: 8px; }
.header-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.header-search-dropdown::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.header-search-dropdown.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Result item */
.header-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px 10px 16px;
    color: var(--white);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    position: relative;
}
.header-search-item:hover,
.header-search-item.is-active {
    background: rgba(200, 16, 46, 0.10);
    border-left-color: var(--accent);
}
.header-search-item__name {
    color: var(--white);
    font-size: 15px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Highlighted match inside item name / sku */
.header-search-item mark,
.header-search-empty mark {
    background: rgba(200, 16, 46, 0.22);
    color: var(--white);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Empty state */
.header-search-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.5;
}

/* "Found N, narrow by section" footer */
.header-search-more {
    border-top: 1px solid var(--line);
    padding: 12px 16px 14px;
    background: rgba(255, 255, 255, 0.02);
}
.header-search-more__label {
    color: var(--text-soft);
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.header-search-more__label b {
    color: var(--white);
    font-weight: 600;
}
.header-search-more__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.header-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.header-search-chip:hover {
    border-color: var(--accent);
    background: rgba(200, 16, 46, 0.10);
    color: var(--white);
}
.header-search-chip__count {
    color: var(--accent);
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    background: rgba(200, 16, 46, 0.12);
    border-radius: 999px;
    transition: background 0.12s ease, color 0.12s ease;
}
.header-search-chip:hover .header-search-chip__count {
    background: var(--accent);
    color: var(--white);
}

/* Small screens — compact padding */
@media (max-width: 600px) {
    .header-search-dropdown {
        max-height: 70vh;
        font-size: 14px;
    }
    .header-search-item { padding: 9px 14px; }
}
/* styles.css v=43 */ /* ============== ADAPTIVE ============== */@media (max-width: 1100px) {    .product__top { grid-template-columns: 1fr; gap: 32px; }    .contacts { grid-template-columns: 1fr; padding: 32px; }    .site-footer__inner { grid-template-columns: 1fr 1fr; }}@media (max-width: 1250px) {        section.block { padding: 56px 18px; }    .nav { display: none; }    .nav.open {        display: flex; flex-direction: column;        position: fixed; top: 50px; right: 0;        background: var(--bg-elev);        width: 280px; padding: 20px 24px 24px;        border-left: 1px solid var(--line);        gap: 0; align-items: stretch;        z-index: 101;    }    .nav.open .nav-search {        display: block;        margin-bottom: 18px;        padding-bottom: 18px;        border-bottom: 1px solid var(--line);    }    .nav.open .nav-search input {        width: 100%;        background: rgba(255,255,255,0.06);        border: 1px solid rgba(255,255,255,0.15);        border-radius: 4px;        color: rgba(216,216,216,0.9);        font-family: 'Noto Sans', sans-serif;        font-size: 15px;        padding: 8px 12px;        outline: none;        box-sizing: border-box;    }    .nav.open .nav-search input::placeholder { color: rgba(154,154,154,0.7); }    .nav.open .nav-search input:focus { border-color: var(--accent); }    .nav.open a { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 15px; }    .nav.open a:hover { color: var(--white); border-bottom-color: var(--accent); }    .burger { display: flex; } .brand img { height: 42px; }    .site-header__inner { padding: 4px 18px; }    .header-search { display: none; }    .hero__inner { padding: 60px 18px 40px; }    .prod-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }    .site-footer__inner { grid-template-columns: 1fr; }    .spec-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 18px; }    .site-footer__circles { display: none !important; }}@media (max-width: 380px) {    html, body { overflow-x: hidden; max-width: 100vw; }    body.product-page .product-wrap { overflow-y: auto; overflow-x: hidden; min-height: 100vh; }    .product-hero__inner { padding: 20px 12px 40px !important; gap: 12px !important; }    .product-hero__title { font-size: 32px !important; gap: 6px !important; }    .product-hero__desc, .product-hero__features li { font-size: 12px !important; line-height: 1.3 !important; word-break: break-word !important; overflow-wrap: break-word !important; }    .product-specs__k { min-width: 90px !important; font-size: 9px !important; flex-shrink: 1 !important; }    .product-specs__v { font-size: 10px !important; word-break: break-word !important; overflow-wrap: break-word !important; }    .product-specs__row { padding: 3px 8px !important; }    .product-hero__img { display: flex; justify-content: center; }    .product-photo-circle { width: min(140px, 42vw) !important; height: min(140px, 42vw) !important; aspect-ratio: 1 !important; margin: 0 auto; flex-shrink: 0; border-radius: 50% !important; }    .product-photo-circle img { width: min(120px, 36vw) !important; height: min(120px, 36vw) !important; }    .product-compat__tag { font-size: 10px !important; padding: 3px 6px !important; }    .product-back { padding: 0 12px 120px !important; }    .bg-wrapper { max-width: 100vw; overflow: hidden; }    .bg-wrapper img { max-width: 100vw !important; width: 100vw !important; }    .site-header { max-width: 100vw; }}@media (max-width: 480px) {        .cat-grid { grid-template-columns: 1fr; }    .prod-grid { grid-template-columns: 1fr; }}/* ============== FOTO PAGES (page2 / page3) ============== */.page-foto { background: #0a0a0a; }.foto-page {    position: relative;    min-height: calc(100vh - 50px);    margin-top: 50px;          /* below sticky header */    display: flex; align-items: center; justify-content: center;    overflow: hidden;    touch-action: pan-y;        /* allow vertical scroll, capture horizontal */}.foto-page__bg {    position: absolute; inset: 0;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    z-index: 0;}.foto-page__overlay {    position: absolute; inset: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);    z-index: 0;}.foto-page__inner {    position: relative;    z-index: 1;    text-align: center;    color: var(--white);    padding: 24px;}.foto-page__hint {    font-family: 'Noto Sans', sans-serif;    font-size: 15px;    text-transform: uppercase;    letter-spacing: 0;    padding: 12px 20px;    background: rgba(0, 0, 0, 0.45);    border: 1px solid rgba(255, 255, 255, 0.15);    border-radius: 999px;    display: inline-block;}/* Page-hero: short hero block above content (used on page2) */.page-hero {    position: relative;    min-height: 60vh;    display: flex; align-items: flex-end; justify-content: center;    overflow: hidden;    touch-action: pan-y;}.page-hero__bg {    position: absolute; inset: 0;    background-color: #1a1a1a;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    z-index: 0;}.page-hero__overlay {    position: absolute; inset: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);    z-index: 0;}.page-hero__inner {    position: relative;    z-index: 1;    text-align: center;    color: var(--white);    padding: 24px;    margin-bottom: 32px;}/* ============== NAV ARROWS (start pages) ==============   Big round < > buttons, fixed on left/right edges. */.nav-arrow {    position: fixed;    top: 50%;    transform: translateY(-50%);    z-index: 50;    width: 56px; height: 56px;    border-radius: 50%;    background: rgba(20, 20, 20, 0.5);    -webkit-backdrop-filter: blur(8px);    backdrop-filter: blur(8px);    border: 1px solid rgba(255, 255, 255, 0.2);    color: var(--white);    font-size: 15px;    line-height: 1;    display: flex; align-items: center; justify-content: center;    text-decoration: none;    cursor: pointer;    transition: background 0.2s, transform 0.2s, border-color 0.2s;}.nav-arrow:hover {    background: rgba(200, 16, 46, 0.6);    border-color: var(--accent);    transform: translateY(-50%) scale(1.06);}.nav-arrow--prev { left: 24px; }.nav-arrow--next { right: 24px; }.nav-arrow[hidden] { display: none; }@media (max-width: 800px) {    .nav-arrow { width: 44px; height: 44px; font-size: 18px; }    .nav-arrow--prev { left: 12px; }    .nav-arrow--next { right: 12px; }}

/* Logo sizes for narrow screens */
@media (max-width: 600px) { .brand img { height: 38px; } }
@media (max-width: 600px) { .product-back { padding: 0 12px 100px !important; } }
@media (max-width: 380px) { .brand img { height: 32px; } }