/**
 * Theme Name:  Spreedesign Child
 * Theme URI:   
 * Description: Дочерняя тема для Spreedesign — полностью адаптивная (responsive), удобная на мобильных, планшетах и десктопах.
 * Author:      Spreedesign Bautzen GmbH
 * Template:    spreedesign
 * Version:     1.0.0
 * Text Domain: spreedesign-child
 */

/* ============================================================
   БАЗОВЫЕ АДАПТИВНЫЕ УЛУЧШЕНИЯ
   ============================================================ */

/* Плавный скролл и предотвращение горизонтального переполнения */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

h1 {

}

/* ============================================================
   ШАПКА (HEADER) — АДАПТИВНАЯ
   ============================================================ */

/* Кнопка бургер-меню — по умолчанию скрыта на десктопе */
.action_bar_mobile {
    display: none;
}

.sd-burger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 3.2rem;
    height: 2.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    z-index: 200;
}

.sd-burger-btn span {
    display: block;
    width: 100%;
    height: 0.3rem;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Состояние "открыто" для бургера */
.sd-burger-btn.is-active span:nth-child(1) {
    transform: translateY(1.05rem) rotate(45deg);
}
.sd-burger-btn.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.sd-burger-btn.is-active span:nth-child(3) {
    transform: translateY(-1.05rem) rotate(-45deg);
}

/* ============================================================
   ПЛАНШЕТЫ (≤ 1024px)
   ============================================================ */
body.home main>.wp-block-group {
    padding: 0 2rem;
}


@media (max-width: 1024px) {

    /* Шапка: уменьшаем отступы */
    header#main-header .top_header {
        padding: 0.8rem 1.5rem;
    }

    /* Шапка: лого не слишком крупный */
    header#main-header .top_header a img {
        max-height: 4rem;
        width: auto;
    }

    /* Форма логина в шапке — сужаем */
    header#main-header .top_header .woocommerce-form {
        gap: 0.6rem;
    }

    header#main-header .top_header .woocommerce-form input {
        padding: 0.9rem 1rem !important;
        font-size: 1.4rem;
        max-width: 16rem;
    }

    /* Навигация: меньше отступов между пунктами */
    header#main-header .bottom_header .contaienr ul {
        gap: 1.2rem;
        flex-wrap: wrap;
    }

    header#main-header .bottom_header .contaienr ul li {
        font-size: 1.4rem;
    }

    /* Сетка страниц с сайдбаром: меньше колонка фильтров */
    main#main-container {
        grid-template-columns: 24rem auto;
        gap: 2rem;
    }

    /* Футер: 4 колонки -> 2×2 */
    footer .footer_conteiner {
        flex-wrap: wrap;
        gap: 2rem;
        padding: 0 1.5rem;
    }

    footer .footer_conteiner > img {
        width: 12rem;
    }

    footer .footer_conteiner .list_menu {
        flex: 1 1 calc(50% - 1rem);
        min-width: 14rem;
    }
}

/* ============================================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* --- ШАПКА --- */

    .wp-container-core-group-is-layout-e0598304 {
        flex-direction: column-reverse;
    }

    .wp-container-content-6388d5dc {
        display: none;
    }

    /* Верхняя строка: logo + action_bar */
    header#main-header .top_header {
        padding: 0.8rem 1rem;
        flex-wrap: wrap;
        gap: 0.8rem;
        position: relative;
    }

    /* Лого */
    header#main-header .top_header > a {
        flex: 1;
    }

    header#main-header .top_header > a img {
        max-height: 3.8rem;
        width: auto;
    }

    /* Action bar — иконки справа от лого */
    header#main-header .top_header .action_bar {
        gap: 1.2rem;
        order: 1;
    }

    /* Форма логина в шапке → скрываем на мобильных,
       заменяем иконкой «Mein Konto» из WooCommerce */
    header#main-header .top_header .woocommerce-form {
        display: none;
    }

    /* Показать ссылку "Anmelden" только на мобильном — если не залогинен */
    header#main-header .mobile-login-link {
        display: flex;
        align-items: center;
        color: #000;
        font-size: 1.4rem;
        text-decoration: none;
        gap: 0.5rem;
    }

    /* Нижняя строка: навигация -> бургер */
    header#main-header .bottom_header {
        position: relative;
    }

    /* Кнопка бургер — показываем */
    .sd-burger-btn {
        display: flex;
        margin: 0 ;
    }

    /* Контейнер нижней шапки */
    header#main-header .bottom_header .contaienr {
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Мобильный заголовок нижней полосы */
    header#main-header .bottom_header .sd-burger-btn::before {
        content: "Kategorien";
        color: #fff;
        font-size: 1.6rem;
        font-weight: 300;
        position: absolute;
        top: 1.1rem;
        font-size: 1.6rem;
        right: 5.5rem;
    }

    /* Навигация: скрытая мобильная панель */
    header#main-header .bottom_header .contaienr .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #111;
        z-index: 150;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    header#main-header .bottom_header .contaienr .menu.sd-menu-open {
        display: flex;
    }

    header#main-header .bottom_header .contaienr ul li {
        font-size: 1.8rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    header#main-header .bottom_header .contaienr ul li a {
        display: block;
        padding: 1.4rem 2rem;
        font-size: 1.6rem;
        font-weight: 300;
        color: #fff;
    }

    header#main-header .bottom_header .contaienr ul li a:hover {
        background: rgba(255,255,255,0.06);
        color: #94C11E;
    }

    /* --- MAIN / КОНТЕНТ --- */

    body:not(.home) main {
        padding: 0 0.8rem;
    }

    /* Страница продуктов с сайдбаром: переключаем в одну колонку */
    main#main-container {
        display: block;
    }

    /* Сайдбар фильтров */
    main#main-container .sales-widget-container {
        margin-bottom: 2rem;
    }

    /* Сетка продуктов: 2 колонки */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.2rem !important;
    }

    /* Хлебные крошки */
    body.woocommerce-page .preclass {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        margin-top: 0.5rem;
    }

    /* --- ОДИНОЧНЫЙ ПРОДУКТ --- */

    /* Заголовок продукта */
    html .woocommerce div.product .product_titlew {
        font-size: 3rem;
        margin-top: 2rem;
    }

    /* Цена */
    html .woocommerce div.product .price {
        font-size: 3rem;
    }

    /* Форма вариаций: 1 колонка */
    html .woocommerce div.product form.cart .variations tbody {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Кнопки "Количество" + "В корзину" на всю ширину */
    html .woocommerce div.product form.cart .quantity,
    html .woocommerce div.product form.cart .single_add_to_cart_button {
        width: 100%;
        margin: 0 0 1rem 0;
    }

    /* Отступ продукта */
    html .woocommerce div.product > div {
        margin-bottom: 4rem;
    }

    /* Изображение продукта */
    html .woocommerce div.product div.images {
        margin-bottom: 3rem;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
    }

    html .woocommerce div.product div.images .woocommerce-product-gallery__image:first-child {
        grid-column: 1 / 6;
    }

    html .woocommerce .woocommerce-order .woocommerce-order-overview li {
        width: 100%;
        border-right: none;
        margin: 0;
        padding: 1rem;
    }

    html .woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) {
        grid-column: auto;
    }

    /* Кастомизация бренда */
    html .woocommerce div.product .cbts-customization-section {
        margin-top: 1.5rem;
    }

    /* --- ЛИЧНЫЙ КАБИНЕТ (MY ACCOUNT) --- */

    .woocommerce .woocommerce-MyAccount-navigation {
        width: 100%;
        margin-bottom: 2rem;
    }

    .woocommerce .woocommerce-MyAccount-content {
        width: 100%;
    }

    .woocommerce .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .woocommerce .woocommerce-MyAccount-navigation ul li a {
        display: inline-block;
        padding: 0.6rem 1.2rem;
        background: #f0f0e8;
        border-radius: 0.4rem;
        font-size: 1.4rem;
        margin-bottom: 0;
    }

    .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
        background: #000;
        color: #fff;
    }

    /* --- ТАБЛИЦЫ WOOCOMMERCE --- */

    .woocommerce table.shop_table,
    html .woocommerce .tinvwl-table-manage-list {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* --- КОРЗИНА --- */

    html body .wp-block-woocommerce-cart {
        margin-top: 1.5rem;
    }

    .woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata,
    .woocommerce-checkout .wc-block-cart-item__product .wc-block-components-product-metadata {
        flex-direction: column;
        gap: 0.5rem;
    }

    .woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details,
    .woocommerce-checkout .wc-block-cart-item__product .wc-block-components-product-details {
        width: 100%;
    }

    /* --- ШАГИ КАСТОМИЗАЦИИ --- */

    #cbts-steps {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
    }

    #primary {
        padding: 1rem;
    }

    #cbts-steps .cbts-step {
        max-width: calc(33% - 0.75rem);
    }

    .cbts-steps-main .cbts-steps-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .cbts-steps-container .cbts-step {
        max-width: 100%;
        width: 100%;
    }

    /* --- ФУТЕР --- */

    footer .footer_conteiner {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
        text-align: center;
    }

    footer .footer_conteiner > img {
        width: 10rem;
        margin: 0 auto;
    }

    footer .footer_conteiner .list_menu {
        width: 100%;
    }

    footer .footer_conteiner .list_menu .menu_title {
        margin-top: 0;
        font-size: 1.6rem;
        font-weight: 500;
        color: #000;
    }

    /* --- ЦВЕТОВЫЕ КНОПКИ ВАРИАЦИЙ --- */

    .woocommerce .cbts-brand-colors .color-select-wrapper .color-options {
        grid-template-columns: 1fr;
    }

    /* --- ИЗОБРАЖЕНИЯ В GRID --- */

    .woocommerce .cbts-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    /* --- ЗАКАЗ "СПАСИБО" --- */

    html .woocommerce .woocommerce-order .woocommerce-thankyou-order-received {
        font-size: 2.8rem;
        margin: 5rem 0;
    }

    /* --- ФОРМА РЕГИСТРАЦИИ / АККАУНТА --- */

    .woocommerce form .form-row select,
    .woocommerce form .form-row .input-text {
        font-size: 1.6rem;
    }

    /* --- ПАГИНАЦИЯ --- */

    html body .woocommerce-pagination .page-numbers {
        font-size: 1.6rem;
    }
}

/* ============================================================
   МАЛЕНЬКИЕ МОБИЛЬНЫЕ (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

    header#main-header .header-widget {
        display: none;
    }
    header#main-header .header-widget:has( .mobile) {
        display: block;
    }

    /* Лого */
    header#main-header .top_header > a img {
        max-height: 3rem;
    }

    /* Продукты: 1 колонка на очень маленьких экранах */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }

    /* Шаги кастомизации */
    #cbts-steps .cbts-step {
        max-width: 100%;
        width: 100%;
    }

    /* Хлебные крошки: уменьшаем */
    .woocommerce .woocommerce-breadcrumb {
        font-size: 1.2rem;
        gap: 0.8rem;
    }

    /* Заголовок продукта */
    html .woocommerce div.product .product_titlew {
        font-size: 2.4rem;
    }

    /* Цена */
    html .woocommerce div.product .price {
        font-size: 2.6rem;
    }

    /* Popup */
    .cbts-popup .cbts-popup-content {
        margin: 1rem;
        padding: 2rem;
    }

    /* Ссылка "Mein Brand" */
    header#main-header .top_header .action_bar a.menu_link {
        font-size: 1.3rem;
    }
}

/* ============================================================
   СОСТОЯНИЯ JS: тень шапки при скролле, оверлей меню
   ============================================================ */

/* Тень при скролле */
header#main-header.sd-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}



@keyframes sdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА — АДАПТИВНАЯ
   ============================================================ */

/* --- ПЛАНШЕТ (≤ 1024px) --- */
@media (max-width: 1024px) {

    /* Hero: H1 крупный заголовок */
    .home .wp-block-heading.has-x-large-font-size {
        font-size: 3.6rem !important;
    }

    /* Секции с H2 font-size:56px и 60px */
    .home h2.wp-block-heading[style*="font-size:56px"],
    .home h2.wp-block-heading[style*="font-size: 56px"] {
        font-size: 3.8rem !important;
    }
    .home h2.wp-block-heading[style*="font-size:60px"],
    .home h2.wp-block-heading[style*="font-size: 60px"] {
        font-size: 3.8rem !important;
    }

    /* Большие числа статистики */
    .home p[style*="font-size:70px"],
    .home p[style*="font-size: 70px"] {
        font-size: 5rem !important;
    }

    /* Сетка из 5 изображений → 3 колонки */
    .wp-container-core-group-is-layout-3844d78f {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Секция статистики: разрешаем перенос */
    .wp-container-core-group-is-layout-eaacdc6a {
        flex-wrap: wrap !important;
        gap: 2rem !important;
    }
}

/* --- МОБИЛЬНЫЕ (≤ 768px) --- */
@media (max-width: 768px) {

    /* Hero spacer между текстом и изображением — убираем */
    .wp-container-content-6388d5dc {
        display: none !important;
    }

    /* Hero: H1 */
    .home .wp-block-heading.has-x-large-font-size,
    .home h1.wp-block-heading {
        font-size: 2.8rem !important;
        line-height: 1.25 !important;
    }

    /* Hero изображение: полная ширина, разумная высота */
    .wp-container-core-group-is-layout-e0598304 .wp-block-image img {
        width: 100%;
        height: auto;
        max-height: 60vw;
        object-fit: cover;
        border-radius: 0;
    }

    /* Hero кнопка: полная ширина */
    .home .wp-block-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
    }

    /* Spacer 100px → 40px на мобильных */
    .home .wp-block-spacer[style*="height:100px"] {
        height: 40px !important;
    }
    .home .wp-block-spacer[style*="height:150px"] {
        height: 60px !important;
    }
    .home .wp-block-spacer[style*="height:70px"] {
        height: 30px !important;
    }



    /* Сетка из 5 изображений «Wir bedrucken» → 2 колонки */
    .wp-container-core-group-is-layout-3844d78f {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.2rem !important;
    }

    /* Строки товаров (изображение 33% + текст 66%): стекируем */
    .wp-container-core-group-is-layout-6be84c55,
    .wp-block-group.is-layout-grid.wp-container-core-group-is-layout-6be84c55 {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    .wp-container-core-group-is-layout-6be84c55 > .wp-block-columns,
    .wp-container-core-group-is-layout-6be84c55 > div.wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        width: 100% !important;
    }

    .wp-container-core-group-is-layout-6be84c55 .wp-block-column,
    .wp-container-core-group-is-layout-6be84c55 .wp-block-column[style*="flex-basis:33.33%"],
    .wp-container-core-group-is-layout-6be84c55 .wp-block-column[style*="flex-basis:66.66%"] {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wp-container-core-group-is-layout-6be84c55 .wp-block-image {
        text-align: center;
    }

    .wp-container-core-group-is-layout-6be84c55 .wp-block-image img {
        max-width: 200px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* Секция статистики: текст + цифры вертикально */
    .wp-container-core-group-is-layout-eaacdc6a {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Скрываем пустой spacer между текстом и статистикой */
    .wp-container-content-c0740251 {
        display: none !important;
    }

    /* Большие числа статистики */
    .home p[style*="font-size:70px"],
    .home p[style*="font-size: 70px"] {
        font-size: 4.2rem !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }



    /* Нижние колонки с текстовыми блоками (Druckverfahren, T-Shirts, etc.) */
    .home .wp-block-columns.is-layout-flex > .wp-block-column[style*="flex-basis:20px"] {
        display: none !important;
    }

    /* Чёрный блок "Kleidung bedrucken | individuelle …" — уже стекируется через WP */
    .home .wp-block-group.has-black-background-color .wp-block-columns {
        flex-direction: column !important;
    }
}

/* --- МАЛЕНЬКИЕ МОБИЛЬНЫЕ (≤ 480px) --- */
@media (max-width: 480px) {

    /* H1 hero */
    .home h1.wp-block-heading,
    .home .wp-block-heading.has-x-large-font-size {
        font-size: 3.2rem !important;
    }

    .wp-container-core-group-is-layout-e0598304 figure {
        width: 100%;
    }



    /* Сетка изображений → 1 колонка */
    .wp-container-core-group-is-layout-3844d78f {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Статистика: сетка цифр */
    .home p[style*="font-size:70px"],
    .home p[style*="font-size: 70px"] {
        font-size: 3.6rem !important;
    }
}

/* ============================================================
   ПЕЧАТЬ (print)
   ============================================================ */
@media print {
    header#main-header,
    footer,
    .sd-burger-btn,
    .woocommerce-breadcrumb,
    .cbts-steps-main {
        display: none !important;
    }
}


@media only screen and (max-width: 1050px) {
    .woocommerce ul.products {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
    }

    .woocommerce .products ul:after, .woocommerce .products ul:before, .woocommerce ul.products:after, .woocommerce ul.products:before {
        content: none;
    }

    .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
        width: 100%;
        margin: 0;
    }
}

@media only screen and (max-width: 590px) {
    .weitere-farbtonen {
        bottom: 45%;
    }

    h2, h3, h4 {
        font-size: 2.8rem;
    }
}

@media only screen and (max-width: 450px) {
    .woocommerce ul.products {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
}

.wp-container-core-columns-is-layout-8f761849 .wp-container-core-columns-is-layout-8f761849 .wp-block-button__link{
    position: absolute;
    bottom: 0;
    right: 0;
    height: auto;
    width: 270px;
    border-radius: 10px 0 0 0;
}

.wp-container-core-columns-is-layout-8f761849 .wp-container-core-columns-is-layout-8f761849 .wp-block-column.is-vertically-aligned-top.is-layout-flow.wp-block-column-is-layout-flow {
    margin-bottom: 4rem;
}

.wp-container-core-columns-is-layout-8f761849 .wp-container-core-columns-is-layout-8f761849 {
    border-radius: .5rem;
    background: #fff;
    position: relative;
    box-shadow: .3rem .3rem 1.1rem .1rem rgba(0, 0, 0, .2);
    padding: 2rem;
    overflow: hidden;
}

.wp-container-core-columns-is-layout-8f761849 .wp-container-core-columns-is-layout-8f761849 {
    gap: 3rem !important;
}

.schema-faq .schema-faq-section {
    margin-bottom: 3rem;
}

.schema-faq .schema-faq-section .schema-faq-question {
    margin-bottom: 1rem;
    font-weight: 500;
    display: block;
}

.schema-faq .schema-faq-section .schema-faq-answer {
    display: block;
    line-height: 1.5;
}