/* ==========================================================================
   SeeTech — единый стиль внутренних страниц (по дизайну главной)
   Подключается последним в header.twig, поэтому перекрывает стили темы.
   Токены совпадают с блоками главной: .apple-hero-*, .bento-*
   ========================================================================== */

:root {
    --st-black: #0a0a0a;
    --st-green: #00C853;
    --st-green-dark: #00A844;
    --st-green-glow: rgba(0, 200, 83, 0.18);
    --st-gray: #f3f5f7;
    --st-text: #5a5a5a;
    --st-muted: #6b6b6b;
    --st-line: rgba(10, 10, 10, 0.07);
    --st-radius-lg: 26px;
    --st-radius: 20px;
    --st-radius-sm: 12px;
    --st-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Переопределяем токены темы Deals под бренд */
    --ds-green-color: var(--st-green);
    --ds-interactive-color: var(--st-green);
    --ds-primary-color: var(--st-black);
    --ds-links-color: var(--st-black);
    --ds-primary-dark-color-light: var(--st-black);
    /* Тёмно-синий вторичный текст темы → нейтральный серый, как на главной */
    --ds-secondary-dark-color-light: var(--st-text);
}

/* Футер: убираем тёмно-синие ссылки из настроек темы */
.light-theme .ds-footer-subscribe-text,
.light-theme .ds-footer-item .secondary-text,
.light-theme .ds-footer-socials .secondary-text,
.light-theme .ds-footer-links li a,
.light-theme ul.ds-footer-item li a {
    color: var(--st-text);
}

.ds-footer-links li a:hover,
ul.ds-footer-item li a:hover,
.ds-footer .blue-link:hover {
    color: var(--st-green-dark);
}

/* ---------- Заголовки страниц (как .apple-hero-title) ---------- */
.ds-page-title {
    padding-top: 12px;
}

.ds-page-title h1,
.st-page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--st-black);
    margin: 0 0 8px;
    position: relative;
    display: inline-block;
    z-index: 0;
}

/* Градиентная плашка под заголовком: чёрный → зелёный (как .accent на главной) */
.ds-page-title h1::after,
.st-page-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4%;
    width: min(100%, 220px);
    height: 18%;
    background: linear-gradient(90deg, var(--st-black) 0%, #00c864 60%, #00E676 100%);
    border-radius: 4px;
    opacity: 0.85;
    z-index: -1;
}

/* На карточке товара длинное название — без капса и плашки */
#product-product .ds-page-title h1 {
    text-transform: none;
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

#product-product .ds-page-title h1::after {
    display: none;
}

.st-page-subtitle {
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 500;
    color: var(--st-muted);
    max-width: 680px;
    line-height: 1.5;
    margin: 10px 0 0;
}

/* ---------- Хлебные крошки ---------- */
.ds-breadcrumb {
    padding: 18px 0 10px;
}

.ds-breadcrumb-item,
.ds-breadcrumb-item a {
    color: #9a9a9a;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s ease;
}

.ds-breadcrumb-item a:hover {
    color: var(--st-green-dark);
}

.ds-breadcrumb-item:last-child {
    color: var(--st-black);
}

/* ---------- Базовые карточки ---------- */
.content-block {
    border-radius: var(--st-radius);
    border: 1px solid var(--st-line);
}

/* ---------- Кнопки (как .bento-card__btn) ---------- */
.button.button-primary {
    background: var(--st-black);
    border-color: var(--st-black);
    color: #fff;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s var(--st-ease), box-shadow .35s ease;
}

.button.button-primary:hover,
.button.button-primary:focus-visible {
    background: var(--st-green);
    border-color: var(--st-green);
    color: var(--st-black);
    box-shadow: 0 10px 24px -10px rgba(0, 200, 83, 0.6);
}

.button.button-primary:hover svg path {
    fill: var(--st-black);
}

.button.button-outline-primary {
    border-color: var(--st-black);
    color: var(--st-black);
    border-radius: 100px;
    font-weight: 600;
}

.button.button-outline-primary:hover {
    background: var(--st-black);
    border-color: var(--st-black);
    color: #fff;
}

.button.button-outline-primary:hover svg path {
    fill: #fff;
}

.button.button-light {
    border-radius: var(--st-radius-sm);
}

/* ---------- Карточки товаров (единые для главной, категорий, поиска) ---------- */
.ds-module-item > .content-block {
    border-radius: var(--st-radius);
    transition: transform .4s var(--st-ease), box-shadow .4s ease, border-color .4s ease;
}

.ds-module-item > .content-block:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 200, 83, 0.25);
    box-shadow: 0 20px 45px -20px rgba(0, 200, 83, 0.35), 0 12px 30px -18px rgba(0, 0, 0, 0.25);
}

.ds-module-title {
    color: var(--st-black);
    font-weight: 600;
    transition: color .25s ease;
}

.ds-module-title:hover {
    color: var(--st-green-dark);
}

.ds-module-price .ds-price-new {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--st-black);
}

.ds-module-cart-btn.button {
    border-radius: var(--st-radius-sm);
}

.ds-module-cart-btn.button:hover {
    background: var(--st-green);
    border-color: var(--st-green);
}

.ds-module-cart-btn.button:hover svg path {
    fill: var(--st-black);
}

.ds-module-quantity {
    border-radius: var(--st-radius-sm);
}

/* Стикеры («Популярный» и др.) — как бейдж на главной */
.ds-module-sticker {
    background: linear-gradient(135deg, var(--st-black) 0%, var(--st-green-dark) 100%) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 10px;
    box-shadow: 0 8px 18px -8px rgba(0, 200, 83, 0.5);
}

/* ---------- Категория: подкатегории, сортировка, фильтр ---------- */
.ds-subcategories-item .content-block {
    border-radius: 16px;
    background: #fff;
    transition: background-color .3s ease, border-color .3s ease, transform .3s var(--st-ease);
}

.ds-subcategories-item .content-block:hover {
    background: var(--st-black);
    border-color: var(--st-black);
    transform: translateY(-2px);
}

.ds-subcategories-item .content-block:hover .ds-subcategories-title {
    color: #fff !important;
}

.ds-subcategories-title {
    font-weight: 600;
}

.ds-category-sort.content-block {
    border-radius: 16px;
}

.ds-column .ocf-container,
.ds-column-categories {
    border-radius: var(--st-radius);
    overflow: hidden;
}

.ocf-theme-light-block .ocf-search-btn-static,
.ocf-theme-light-block .ocf-search-btn-popover {
    border-radius: 100px !important;
}

.ocf-theme-light-block .ocf-search-btn-static:hover:not(.ocf-disabled),
.ocf-theme-light-block .ocf-search-btn-popover:hover:not(.ocf-disabled) {
    background-color: var(--st-green) !important;
    color: var(--st-black) !important;
}

/* ---------- Карточка товара ---------- */
.ds-product-tabs-box {
    gap: 6px;
}

.ds-product-tabs-item {
    border-radius: 100px !important;
    font-weight: 600;
    transition: background-color .3s ease, color .3s ease;
}

.ds-product-tabs-item.active {
    background: var(--st-black);
    color: #fff;
}

.ds-product-tabs-item:not(.active):hover {
    background: var(--st-gray);
    color: var(--st-black);
}

.ds-product-tabs-item.active .ds-product-tabs-badge {
    background: var(--st-green);
    color: var(--st-black);
}

.ds-product-main-price .ds-price-new {
    font-size: 32px !important;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--st-black);
}

.ds-product-main-cart-button.button,
.ds-product-fast-order-button.button {
    border-radius: 100px;
    min-height: 48px;
}

/* ---------- Информационные страницы ---------- */
.st-info-hero {
    padding: 8px 0 28px;
}

.st-info-content {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    padding: clamp(22px, 3.5vw, 48px);
    color: var(--st-text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Внутри описаний из админки часто лежит своя карточка .ds-information —
   убираем двойную рамку и светлый «синий» текст темы */
.st-info-content .ds-information,
.st-info-content .ds-information.content-block {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.st-info-content .ds-information + .ds-information {
    margin-top: 24px;
}

.st-info-content .secondary-text,
.st-info-content .light-text {
    color: inherit !important;
}

.st-info-content .fw-300 {
    font-weight: 400 !important;
}

/* .row без колонок используется просто как обёртка текста */
.st-info-content .row:not(:has(> [class*="col"])) {
    display: block;
    margin: 0;
}

.st-info-content .row:not(:has(> [class*="col"])) > *:not(h1):not(h2) {
    padding: 0;
    width: auto;
}

.st-info-content .row:not(:has(> [class*="col"])) > :is(h1, h2) {
    padding-right: 0;
    width: auto;
}

.st-info-content > :first-child,
.st-info-content .ds-information > .row > :first-child,
.st-info-content .ds-information > :first-child {
    margin-top: 0 !important;
}

.st-info-content > :last-child {
    margin-bottom: 0 !important;
}

.st-info-content h1,
.st-info-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--st-black);
    margin: 40px 0 14px !important;
    padding-left: 22px;
    position: relative;
}

/* Зелёная «таблетка» слева от подзаголовка */
.st-info-content h1::before,
.st-info-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 8px;
    height: 0.95em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--st-green) 0%, var(--st-green-dark) 100%);
}

.st-info-content h3,
.st-info-content h4 {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--st-black);
    margin: 28px 0 10px;
}

.st-info-content p {
    margin: 0 0 14px;
}

.st-info-content strong,
.st-info-content b {
    color: var(--st-black);
    font-weight: 700;
}

.st-info-content a {
    color: var(--st-black);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--st-green);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color .25s ease;
}

.st-info-content a:hover {
    color: var(--st-green-dark);
}

.st-info-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.st-info-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}

/* Галочка в зелёном кружке вместо стандартного маркера */
.st-info-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--st-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.st-info-content ol {
    counter-reset: st-step;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.st-info-content ol li {
    counter-increment: st-step;
    position: relative;
    padding-left: 42px;
    margin-bottom: 14px;
    min-height: 28px;
}

/* Номер шага — чёрный кружок с зелёной цифрой (как иконки bento) */
.st-info-content ol li::before {
    content: counter(st-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--st-black);
    color: var(--st-green);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.st-info-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--st-radius);
}

.st-info-content iframe,
.st-info-content video {
    max-width: 100%;
    border-radius: var(--st-radius);
    border: 0;
}

.st-info-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-sm);
    overflow: hidden;
    margin: 0 0 18px;
}

.st-info-content th,
.st-info-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-line);
}

.st-info-content tr:last-child td {
    border-bottom: 0;
}

.st-info-content th {
    background: var(--st-gray);
    color: var(--st-black);
    font-weight: 700;
}

.st-info-content hr {
    border: 0;
    height: 1px;
    background: var(--st-line);
    margin: 32px 0;
    opacity: 1;
}

/* ---------- Контакты ---------- */
#information-contact .ds-contacts-item-title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--st-black);
}

#information-contact .ds-contacts-item-social.button {
    border-radius: var(--st-radius-sm);
    background: var(--st-gray);
    transition: background-color .3s ease, transform .3s var(--st-ease);
}

#information-contact .ds-contacts-item-social.button:hover {
    background: var(--st-green);
    transform: translateY(-2px);
}

#information-contact .form-control,
#information-contact textarea {
    border-radius: var(--st-radius-sm);
}

#information-contact .form-control:focus {
    border-color: var(--st-green);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.15);
}

/* ---------- Блог ---------- */
.ds-last-news-item .content-block {
    transition: transform .4s var(--st-ease), box-shadow .4s ease, border-color .4s ease;
}

.ds-last-news-item .content-block:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 200, 83, 0.25);
    box-shadow: 0 20px 45px -20px rgba(0, 200, 83, 0.35), 0 12px 30px -18px rgba(0, 0, 0, 0.25);
}

.ds-last-news-item img {
    border-radius: 14px;
}

.ds-last-news-item-title {
    font-weight: 700 !important;
    color: var(--st-black);
    line-height: 1.35;
}

.ds-last-news-item-title:hover {
    color: var(--st-green-dark);
}

/* ---------- Формы ---------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--st-green);
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.15);
}

.form-check-input:checked {
    background-color: var(--st-green);
    border-color: var(--st-green);
}

/* ---------- Адаптив ---------- */
@media (max-width: 767px) {
    .ds-page-title h1,
    .st-page-title {
        font-size: clamp(26px, 8vw, 36px);
    }

    .st-info-content {
        border-radius: 20px;
        font-size: 14px;
    }

    .st-info-content h1,
    .st-info-content h2 {
        margin-top: 28px;
        padding-left: 18px;
    }

    .st-info-content h1::before,
    .st-info-content h2::before {
        width: 6px;
    }

    .ds-product-main-price .ds-price-new {
        font-size: 26px !important;
    }
}