/* ====================================================== */
/* === БЛОК 1: ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ УСТРОЙСТВ === */
/* ====================================================== */

/* Иконка корзины вместо текста "Koszyk" */
.t-menu__link-item[href*="/koszyk"] {
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-block !important;
  padding: 0 !important;
  background-image: url('https://static.tildacdn.com/stor3763-3862-4234-b561-313633383230/87537709.png');
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.t-menu__link-item[href*="/koszyk"]::before,
.t-menu__link-item[href*="/koszyk"]::after {
  content: none !important;
}

/* Центрируем кнопку "Zamów wycenę montażu" */
.assembly-quote-btn {
    display: block !important;    /* Делаем кнопку блочным элементом */
    margin-left: auto !important; /* Автоматический отступ слева */
    margin-right: auto !important;/* Автоматический отступ справа */
}


/* ====================================================== */
/* === БЛОК 3: СТИЛИ ТОЛЬКО ДЛЯ МОБИЛЬНЫХ (ЭКРАН < 981px) === */
/* ====================================================== */
@media screen and (max-width: 980px) {

    /* Стилизация кнопки-бургера */
    .t456 .t-menuburger {
        position: absolute !important;
        top: 25px;
        right: 20px;
        z-index: 99999 !important;
    }

    .t456 .t-menuburger::before,
    .t456 .t-menuburger::after,
    .t456 .t-menuburger .t-menuburger__lines,
    .t456 .t-menuburger.t-menuburger-opened::before,
    .t456 .t-menuburger.t-menuburger-opened::after {
        background-color: #000000 !important;
    }

    /* Стилизация выпадающего меню */
    .t-menu__mobile {
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }

    .t-menu__mobile_opened .t-menu__mobile_content_hidden {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .t-menu__mobile .t-menu__link-item {
        color: #000000 !important;
        font-size: 22px !important;
        padding: 15px 0 !important;
    }
    
    .t-menu__mobile .t-menu__link-item:hover {
        transform: none !important;
    }
    .t-menu__mobile .t-menu__link-item:hover::after {
        width: 0 !important;
    }
} 
/* Исправляем раскладку на странице товара для мобильных */
@media screen and (max-width: 640px) {

    /* Находим правильный контейнер .product-grid */
    .product-grid {
        /* и переключаем его в одноколоночный режим */
        grid-template-columns: 1fr !important;
    }
}
/* Фикс горизонтального скролла от блока табов на мобильных */
@media screen and (max-width: 960px) {

    /* Находим контейнер блока и обрезаем всё, что вылезает по бокам */
    .t-rec .t-container {
        overflow-x: hidden !important;
    }
}

/* Универсальный фикс для устранения горизонтальной прокрутки */
.t-rec {
    overflow-x: hidden !important;
}
/* Убираем верхний отступ у основного контента страницы */
#allrecords {
 padding-top: 0 !important;
}
/* Убираем верхний отступ у блока товара на мобильных */
@media screen and (max-width: 767px) {
    .product-grid {
        margin-top: 0 !important;
 }
}
/* ====================================================== */
/* === ФИНАЛЬНЫЙ КОД ДЛЯ ГАЛЕРЕИ ТОВАРА (ДЛЯ ВСЕХ СТРАНИЦ) === */
/* ====================================================== */

/* --- 1. СТИЛИ ДЛЯ ИЗОБРАЖЕНИЙ (ВАШ КОД) --- */
/* Общие правила для контейнера и самой картинки */
.main-image {
    margin-bottom: 15px;
}


.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* или contain, если нужно без обрезки */
    display: block;
}

.main-image img:hover {
    opacity: 0.9;
}


/* --- 2. КОД-ИСПРАВЛЕНИЕ ДЛЯ ПРОБЛЕМНЫХ СТРАНИЦ --- */
/* Этот код убирает ограничение ширины у родительских контейнеров */

/* Для десктопа: растягиваем контейнер на всю ширину колонки */
@media screen and (min-width: 961px) {
    .product-images, .main-image { /* Применяем к обоим контейнерам для надежности */
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Для мобильных: убираем лишние боковые отступы */
@media screen and (max-width: 640px) {
    .product-images {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ================================================================= */
/* === МОБИЛЬНАЯ ВЕРСИЯ: СТРАНИЦА КОРЗИНЫ (ОПЦИИ ПОД ФОТО) === */
/* ================================================================= */

@media screen and (max-width: 980px) { /* Можно изменить на 640px, если хотите более узкого применения */

    /* Основной контейнер элемента корзины (для flex-wrap) */
    .cart-item > div {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    /* Блок с изображением и названием/ценой */
    .cart-item > div > div:first-child {
        display: flex;
        flex-basis: 100%;
        margin-bottom: 15px;
        align-items: flex-start;
    }

    /* Само изображение */
    .cart-item img {
        width: 100px !important;
        height: 100px !important;
        margin-right: 15px !important;
        flex-shrink: 0;
    }

    /* Заголовок и базовая цена */
    .cart-item > div > div:first-child > div:last-child {
        flex-grow: 1;
    }

    /* --- ИЗМЕНЕНИЕ: Размещение кнопок количества и удаления --- */
    .cart-item > div > div:last-child {
        flex-basis: 100% !important; /* На всю ширину */
        order: 2 !important;         /* Ставим этот блок вторым */
        margin-top: 15px !important;
        /* --- ВЫРАВНИВАНИЕ ПО ЦЕНТРУ --- */
        display: flex; /* Делаем гибким */
        flex-direction: column; /* Элементы друг под другом */
        align-items: center; /* Центрируем по горизонтали */
        gap: 10px; /* Расстояние между кнопками */
    }
    
    /* Контейнер кнопок +/- */
    .cart-item > div > div:last-child > div {
        margin-top: 0 !important;
        justify-content: center !important; /* Центрируем кнопки +/- */
    }

    /* --- ИЗМЕНЕНИЕ: Размещение блока "Wybrane opcje" (сдвигаем влево) --- */
    .cart-item div[style*="background: #f9f9f9"] {
        flex-basis: 100% !important;
        order: 3 !important;
        margin-top: 15px !important;
        padding-left: 0 !important; /* Убираем левый отступ у самого блока */
        padding-right: 0 !important; /* Убираем правый отступ */
    }
    
    /* Сдвигаем сам список опций влево */
    .cart-item div[style*="background: #f9f9f9"] ul {
        padding-left: 15px !important; /* Новый левый отступ для списка */
    }
    /* Дополнительно центрируем текст "Wybrane opcje" */
    .cart-item div[style*="background: #f9f9f9"] p {
        text-align: center;
    }
}

/* Предотвращаем перенос "zł" на новую строку в опциях корзины */
/*.cart-item span[style*="color: #2e7d32"] {*/
/*    white-space: nowrap;*/
/*}*/
/* Предотвращаем перенос "zł" на новую строку в корзине и на странице checkout */
.cart-item span[style*="color: #2e7d32"],
.t-store__checkout-order__price,
.t-store__checkout-order-item__price {
    white-space: nowrap !important;
}

@media screen and (max-width: 980px) {
    .cart-page-subheader {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 20px; /* универсальный вариант */
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        width: 100%;
    }
}


/* ГЛОБАЛЬНЫЕ СТИЛИ КНОПОК "DODAJ DO KOSZYKA" */
button.add-to-cart {
    margin-top: 20px !important;
    
    /* Убираем вертикальный padding, оставляем только боковые отступы */
    padding: 0 30px !important;
    
    /* ЗАДАЕМ ТОЧНУЮ ВЫСОТУ КНОПКИ */
    height: 60px !important; /* Можете изменить это значение, чтобы сделать выше/ниже */
    line-height: 60px !important; /* Должно быть равно height для центрирования текста */

    background: #2e7d32 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 24px !important;
    font-weight: bold !important;
    width: 80% !important;
    max-width: 400px !important;
    transition: all 0.3s ease !important;
    font-family: 'Merriweather', serif !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

button.add-to-cart:hover {
    background: #1b5e20 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

/* --- Адаптивные отступы для контейнера корзины --- */

/* Сначала задаем стили для мобильных (маленький отступ) */
.cart-container {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Потом переопределяем их для больших экранов (возвращаем большой отступ) */
@media screen and (min-width: 981px) {
    .cart-container {
        margin-top: 80px !important;
    }
}


#rec1212672358 .t977__text {
    color: #c85800;
    font-family: 'Playfair Display';
    margin-top: 10px;
}    
    
 #rec1212672358 .t977__text {
     margin-top: 5px !important;
 }
 
 /* ====================================================== */
/* === АДАПТАЦИЯ СТРАНИЦЫ ОФОРМЛЕНИЯ ЗАКАЗА (CHECKOUT) === */
/* ====================================================== */

@media screen and (max-width: 767px) {

    
    /* Находим главный контейнер и заставляем колонки встать друг под другом */
    .checkout-container {
        display: flex !important;
        flex-direction: column !important; /* Ставим колонки вертикально */
    }

/* Центрируем зеленую кнопку "KUPUJĘ I PŁACĘ" по ID */
#submit-order {
    display: block !important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content !important; /* Ширина кнопки подстраивается под текст */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 90px !important;
}
}


/* ====================================================== */
/* === АДАПТИВНЫЕ СТИЛИ ДЛЯ КНОПОК В КОРЗИНЕ === */
/* ====================================================== */

/* --- 1. Для экранов от 591px до 760px --- */
/* (Здесь применяются ваши стили с большими отступами) */
@media screen and (min-width: 591px) and (max-width: 760px) {

    /* Стили для кнопки "Kontynuuj zakupy" */
    a[href="http://idealnasauna.pl/sauny"] {
        padding: 14px 110px !important;
        margin-bottom: 20px !important;
        display: block !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Стили для кнопки "Przejdź do płatności" */
    #checkout-btn {
        padding: 14px 90px !important;
    }
}


/* --- 2. Для САМЫХ УЗКИХ экранов (до 590px) --- */
/* (Здесь кнопки встают друг под другом и растягиваются) */
@media screen and (max-width: 590px) {

    /* Родительский контейнер, чтобы кнопки были по центру */
    .cart-container div[style*="text-align: center"] {
        display: flex;
        flex-direction: column; /* Ставим элементы друг под другом */
        align-items: center;   /* Центрируем по горизонтали */
        gap: 15px;             /* Расстояние между кнопками */
    }
    
    /* Общие стили для обеих кнопок */
    a[href="http://idealnasauna.pl/sauny"],
    #checkout-btn {
        width: 90% !important;  /* Задаем ширину в процентах */
        max-width: 350px;       /* Ограничиваем максимальную ширину */
        /* Устанавливаем одинаковые отступы 
        margin: 0 !important;   /* Убираем лишние внешние отступы */
        box-sizing: border-box; /* Для правильного расчета ширины */
    }
}

@media (max-width: 480px) {
  /* Общий стиль для элементов заказа */
  .order-summary .item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 2px 0 !important;
  }

  /* Название товара */
  .order-summary .item .name {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-right: 5px !important;
    word-break: break-word !important;
  }

  /* Цена */
  .order-summary .item .price {
    font-size: 12px !important;
    /*white-space: nowrap !important;*/
    text-align: right !important;
  }
}


/* Стили для мобильных */
@media (max-width: 480px) {
  .checkout-form .form-row {
    flex-direction: column;   /* В ряд вниз */
    gap: 10px;                /* Отступ между полями */
  }

  .checkout-form .form-col {
    flex: 1 1 100%;           /* Растягиваем на всю ширину */
    max-width: 100%;
  }

  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea {
    width: 100% !important;   /* Поля не вылазят за контейнер */
    box-sizing: border-box;   /* Учитывать padding в ширину */
  }
}
/* Вместо 480px используем 760px */
@media (max-width: 760px) {
  .order-summary div {
    font-size: 14px !important;
    padding: 2px 0 !important;
  }

  .order-item {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
  }

  .order-item > div {
    display: flex;
    justify-content: space-between;
    margin-top: 6px !important;
  }

  /* Текст и цены */
  .order-item span, 
  .order-item strong {
    font-size: 14px !important;
    line-height: 1.4em !important;
  }

  /* Общая сумма */
  .total-row {
    font-size: 16px !important;
    font-weight: bold !important;
    margin-top: 12px !important;
  }

  /* Кнопка */
  #submit-order {
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px !important;
  }
}


@media (max-width: 768px) {
  /* Кнопка оплаты */
  .checkout-form button,
  .order-summary button {
    max-width: 280px;        /* делаем уже */
    width: 100%;             
    white-space: nowrap;     /* текст в 1 строку */
    text-align: center;
    display: inline-block;
    margin: 0 auto;          /* центрируем */
  }

  /* Цены и zł в одной строке */
  .order-summary,
  .order-summary .price {
    /*white-space: nowrap;*/
    padding:5px;
  }
}

@media (min-width: 760px) and (max-width: 1200px) {
  .checkout-container {
    flex-direction: row;
    gap: 20px;
  }

  .checkout-form {
    flex: 1 1 55%; /* форма оплаты чуть уже */
  }

  .order-summary {
    flex: 1 1 45%; /* заказ чуть шире */
  }

  /* Дополнительно: текст внутри блока заказа */
  .order-summary div {
    font-size: 15px;
    line-height: 1.5em;
  }
}


/* Для экранов до 767px возвращаем белый фон и паддинги */
@media (max-width: 767px) {
  .checkout-container {
    padding: 0 15px !important;   /* равномерные отступы справа и слева */
    box-sizing: border-box;
  }

  .checkout-form,
  .order-summary {
    background: #fff;             /* белый фон, чтобы не было «дыр» */
    border-radius: 6px;           /* по желанию: скругление */
    padding: 10px;                /* внутренний отступ */
  }
}
  
#my-cart-counter {
  position: absolute;
  top: -3px;
  right: -2px;
  background: none !important;
  color: #ff4444 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: none;
}

/* ====================================================== */
/* === АДАПТАЦИЯ ФУТЕРА FT305 (t977) ДЛЯ МОБИЛЬНЫХ === */
/* ====================================================== */

/* Применяем стили только к экранам до 819px */
@media screen and (max-width: 819px) {

    /* Находим каждую колонку в футере */
    .t977 .t-col {
        width: 100% !important;         /* Заставляем колонку занять всю ширину */
        display: block !important;
        margin-bottom: 40px !important; /* Добавляем отступ снизу */
        text-align: center !important;  /* Центрируем текст */
    }

    /* Убираем отступ у последней колонки */
    .t977 .t-col:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Дополнительно центрируем логотип и соц. иконки */
    .t977 .t-col_first,
    .t977 .t-sociallinks {
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }
}



/* Правила для экранов от 981px до 1200px */
@media screen and (min-width: 981px) and (max-width: 1200px) {

    /* Уменьшаем шрифт пунктов меню */
    .t-menu__link-item {
        font-size: 15px !important; /* Можете подобрать значение, например, 14px */
    }

    /* Уменьшаем отступы между пунктами меню */
    .t456__list_item {
        padding: 0 10px !important; /* Можете подобрать значение, например, 8px */
    }
}

@media screen and (min-width: 981px) {
  .t456__maincontainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 90px !important;
    box-sizing: border-box !important;
  }

  .t456__leftwrapper,
  .t456__list,
  .t456__rightwrapper {
    display: flex !important;
    align-items: center !important;
  }

  .t456__list {
    justify-content: center !important;
    flex: 1 1 auto !important;
  }
}

html {
  scroll-behavior: smooth; /* плавный скролл, если нужно */
}

#rec123456789 {
  scroll-margin-top: 150px; /* отступ сверху при переходе по якорю */
}

/* --- СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕЙ ФОРМЫ (ВСТАВИТЬ В CSS) --- */
.modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  overflow: auto;
}
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 25px;
  border: 1px solid #888;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
}
.close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* Обновленные стили для полей формы (text, tel, email) */
.modal-content input[type="text"], 
.modal-content input[type="tel"], 
.modal-content input[type="email"]{
  width: 100%;
  padding: 12px;
  margin: 8px 0; /* Устанавливаем одинаковый отступ сверху/снизу */
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Важно для правильного расчета ширины */
}

/* Обновленные стили для кнопки */
.modal-content button {
  width: 100%;
  background-color: #3a8f4c;
  color: white;
  padding: 14px 20px;
  margin: 8px 0; /* Такой же отступ, как у полей ввода */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  box-sizing: border-box; /* Добавляем для единообразия */
}
        
#rec1513045383 {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  height: 0 !important;
}



#rec1518387933 {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  height: 0 !important;
}

#rec1518363243 {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  height: 0 !important;
}

#rec1527363783 {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  height: 0 !important;
}