/* Paragraph */
.tp-product-details-desc-wrapper p{
 font-size:16px;
}


 /* Product details desc wrapper */
 #nav-description .tp-product-details-desc-wrapper{
  padding-top:30px;
 }
 
}

/* Feature area */
main .tp-feature-area{
 padding-bottom:0px;
}

/* Product arrival area */
main .tp-product-arrival-area{
 padding-bottom:0px;
}

/* Instagram area */
main .tp-instagram-area{
 padding-bottom:40px;
}

@media (min-width:576px){

 /* Footer top */
 footer .tp-footer-area .tp-footer-top{
  padding-bottom:0px;
  padding-top:20px;
 }
 
}

@media (min-width:769px){

 /* Blog area */
 main .tp-blog-area{
  padding-bottom:5px;
 }
 
}




/* Product content */
.tp-product-arrival-area .container .row-cols-xxl-5 .col .tp-product-item .tp-product-content{
 font-weight:300;
 display:inline-block;
 transform:translatex(0px) translatey(0px) !important;
}

/* Link */
.tp-product-arrival-area .container .row-cols-xxl-5 .col .tp-product-item .tp-product-content .tp-product-title a{
 font-weight:400;
 font-size:16px;
}

/* Product price */
.tp-product-arrival-area .container .row-cols-xxl-5 .col .tp-product-item .tp-product-content .tp-product-price-review .tp-product-price-wrapper .tp-product-price{
 font-size:18px;
}

/* Product rating simple */
.tp-product-arrival-area .container .row-cols-xxl-5 .col .tp-product-item .tp-product-content .tp-product-price-review .tp-product-rating-simple{
 font-size:16px;
 line-height:1.5em;
 font-weight:400;
}

@media (min-width:576px){

 /* Product content */
 .tp-product-arrival-area .container .row-cols-xxl-5 .col .tp-product-item .tp-product-content{
  padding-left:5px;
  padding-right:5px;
 }
 
}


/* Link */
#tab-pane .tp-product-title a{
 font-weight:400;
}

/* Link */
#swiper-wrapper-01dce6bb72cd2c26 .tp-product-title a{
 font-weight:400;
}

 /* Product content */
 #tab-pane .tp-product-item .tp-product-content{
  padding-left:0px;
  padding-right:0px;
 }
 
 /* Product content */
 #swiper-wrapper-01dce6bb72cd2c26 .tp-product-item .tp-product-content{
  padding-left:0px;
  padding-right:0px;
 }
 
}





/* ==========================================================================
   1. ШРИФТИ ТА ОПТИМІЗАЦІЯ
   ========================================================================== */
@font-face { font-display: swap !important; }
body, h1, h2, h3, h4, h5, h6, span, a, p, li { font-display: swap !important; }

/* ==========================================================================
   2. ТАБЛИЦІ У КОНТЕНТІ (Блог/Сторінки)
   ========================================================================== */
.ck-content table, 
.ck-content td, 
.ck-content th,
.tp-postbox-details-main-wrapper tr td {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #55585B !important;
    vertical-align: middle;
}

.ck-content td { padding: 10px 10px !important; }

.ck-content td p, 
.ck-content th p {
    font-family: inherit !important;
    margin-bottom: 0 !important;
    font-size: inherit !important;
}

/* ==========================================================================
   3. БЛОГ ТА МАГАЗИН (Стилістика та розміри)
   ========================================================================== */
.tp-postbox-details-content p, 
.tp-postbox-details-content ul { font-size: 16px; line-height: 1.5; margin-bottom: 15px; }

#tab-pane .tp-product-item .tp-product-price { font-size: 18px; font-weight: 600; }

#tab-pane .tp-product-item .tp-product-title {
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tp-product-item .tp-product-thumb {
    aspect-ratio: 2 / 3;
    background-color: #f5f5f5;
    display: block;
    overflow: hidden;
}

.tp-product-item .tp-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   4. ЕЛЕМЕНТИ ІНТЕРФЕЙСУ (Шапка, Футер, Форми)
   ========================================================================== */
.main-menu .tp-main-menu-content > ul > li > a,
#mobile-menu > ul > li > a { font-weight: 300 !important; font-size: 16px !important; }

.contact-form-group label, .form-label { font-size: 16px; }

.tp-footer-top ul a, 
.tp-footer-top .tp-footer-widget .tp-footer-desc, 
.tp-footer-top .tp-footer-talk span { font-size: 15px !important; }

/* ==========================================================================
   5. КНОПКИ ТА МОДАЛЬНЕ ВІКНО (За вашим малюнком)
   ========================================================================== */
.flip-button-custom {
    display: inline-block;
    padding: 12px 28px;
    background-color: #dab044 !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Темний фон на весь екран */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

/* Біле вікно (Центральний блок) */
.custom-modal-content {
    position: relative;
    width: 80%; /* Залишаємо 10% зліва і 10% справа для стрілок */
    max-width: 1000px;
    height: 80vh;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 !important; /* Жодних білих смуг всередині */
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Кнопка закриття (Хрестик) винесена за межі вікна */
.custom-modal-close {
    position: absolute;
    top: -50px; /* Над білим вікном */
    right: 0px;
    font-size: 45px;
    color: #fff; /* Білий хрестик на темному фоні */
    cursor: pointer;
}

/* Місце під стрілки (якщо ви додасте їх в HTML) */
/* Вони будуть на темному фоні з боків від .custom-modal-content */

/* ==========================================================================
   6. АДАПТИВНІСТЬ
   ========================================================================== */
@media (max-width: 767px) {
    .custom-modal-content { width: 95%; height: 70vh; }
    .custom-modal-close { top: -45px; right: 10px; }
    .tp-slider-area { min-height: 300px; }
}

@media (min-width: 769px) {
    main .include-bg { padding: 40px 0 20px 0; height: auto; margin-bottom: 15px; }
}