/* ======== banner ========= */
.banner-content{ max-width: 960px; margin: 0 auto;}
.banner-content h1{ margin-block: 0;}
.banner-content .banner-sub-text{ max-width: 670px; margin-inline: auto !important;}




/* ======= common======== */
.common-btn { font-size: 16px; display: flex; justify-content: center; align-items: center; height: 45px; text-align: center; text-decoration: none; border: 2px solid #a82e2e; color: #a82e2e; border-radius: 6px; padding: 8px 24px; transition: all 0.4s;}
.common-btn:hover{ background-color: #a82e2e; color: #fff;}
.blog-tab-info{ position: sticky !important; top: 100px !important; z-index: 555 !important; width: 100%; border-bottom: 1px solid #d9d9d9 !important; background-color: #fff !important;}
.top-list-info{ padding-block: 20px; }

.top-list-info ul{ display: flex; align-items: center; list-style: none; padding: 0; margin: 0;} 
.top-list-info ul li{ padding: 0 10px;}
.top-list-info ul li:first-child{ padding-left: 0;}
.top-list-info ul li:last-child{ padding-right: 0;}
.top-list-info ul li a{ font-size: 16px; color: #666; text-decoration: none; transition: all 0.3s; border-bottom: 1px solid transparent;}
.top-list-info ul li a:hover{ color: #a82e2e;}
.top-list-info ul li.active a{ border-color: #a82e2e; color: #a82e2e;}

/* ========== Product ========== */
.blog-tab-content{ padding-top: 60px !important;}
.blog-inner{ display: flex; flex-wrap: wrap; align-items: start;}
.blog-inner .blog-left-panel{ width: 100%; }
.blog-inner .blog-left-panel .product-grid{ display: flex; flex-wrap: wrap; row-gap: 24px;}
.blog-inner .blog-left-panel .product-grid .col-md-6{ float: none;}
.products-item { position: relative; height: 100%; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.23); border-radius: 15px; padding-bottom: 100px; overflow: hidden; transition: all 0.4s;}
.products-item:hover{ box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.23);}
.products-item .products-image{ position: relative; padding-bottom: 69%; overflow: hidden;}
.products-item .products-image img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
.products-item .products-image:hover img{ transform: scale(1.1);}
.products-image-desc{ padding: 24px;}
.products-image-desc h5{ font-size: 12px !important; font-weight: 400 !important; color: #a82e2e !important; text-transform: uppercase !important; letter-spacing: 1px !important; padding: 0; margin: 0 0 15px;}
.products-image-desc h2{ font-size: 24px; padding: 0; margin: 0 0 15px;}
.products-image-desc h2 a{ color: #333; text-decoration: none; }
.products-image-desc h2 a:hover{ color: #a82e2e;}
.products-image-desc p{ font-size: 16px; color: #666; margin: 0 0 15px;}
.products-btn-info{ position: absolute; bottom: 24px; left: 0; right: 0; z-index: 1; margin-inline: 24px;}
.products-btn-info h5{ font-size: 14px !important; font-weight: 400 !important; color: #999 !important; margin: 0 0 10px;}
.blog-right-panel-main{ position: sticky !important; top: 170px !important; z-index: 5 !important;}
.blog-right-panel{ width: 100%; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.23); border-radius: 15px; padding: 24px;}
.blog-right-panel h3{ font-size: 20px; color: #333; padding: 0; margin: 0 0 15px;}
.popular-product-item{ display: flex; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ebe6e7;}
.popular-product-item:last-child{ margin-bottom: 0; border-bottom: 0;}
.popular-product-item .image{ width: 80px; height: 80px; border-radius: 4px; overflow: hidden;}
.popular-product-item .image img{ width: 100%; height: 100%; object-fit: cover; }
.popular-product-item .image-desc{ width: calc(100% - 80px); padding-left: 10px;}
.popular-product-item .image-desc h4 a{ display: inline-block; font-size: 14px; line-height: 1.4 !important; color: #333; padding: 0; margin: 0 0 5px;}
.popular-product-item .image-desc .price{ font-size: 16px; font-weight: 400; color: #a82e2e; padding: 0; margin: 0;}
.blog-right-panel .common-btn{ margin-top: 15px;}
/* =========== */

/* ======= Small Card ======== */
.details-card{ display: flex; background-color: #f5f5f5; border: 1px solid #ebe6e7; border-radius: 10px; box-shadow: 0 4px 6px -1px #0000001a; padding: 16px; margin-bottom: 24px !important;}
.details-card .image{ width: 125px; height: 125px; border-radius: 15px; overflow: hidden; margin-bottom: 0 !important;}
.details-card .image img{ width: 100%; height: 100%; object-fit: cover;}
.details-card .image-desc{ width: calc(100% - 125px); padding-left: 20px;}
.details-card .image-desc h3{ font-size: 20px; color: #333; padding: 0; margin: 0 0 10px;}
.details-card .image-desc p{ font-size: 14px; color: #666; padding: 0; margin: 0 0 15px;}
.details-card .image-desc ul{ display: flex; align-items: center; gap: 20px; list-style: none; padding: 0 !important; margin: 0 !important;}
.details-card .image-desc ul .price{ font-size: 24px; color: #a82e2e; }
.details-card .image-desc ul li a{ font-size: 16px; color: #fff; text-decoration: none; border-radius: 5px; height: 40px; background-color: #a82e2e; padding: 8px 24px;}
.details-card .image-desc ul li a:hover{ background-color: #8b2424;}

/* ======= Big Card ======== */

.details-product{ background:linear-gradient(135deg,#a52a2a,#8b1f1f); border-radius: 12px; padding:40px; margin-bottom: 25px;}
.details-product-card{ display:flex; align-items:center; justify-content:space-between; gap:60px; }
.details-product-content{ width: 50%; color:#fff;}
.blog-details-wrapper .details-product-content h2{  line-height: 1.2; color: #fff !important; margin: 0 0 16px !important; font-weight: 700;}
.details-product-content p{ font-size: 16px; line-height: 1.4; color: #fff; margin: 0 0 20px;}
.details-product-content .price{ display: flex; align-items: center; gap: 20px; margin-bottom: 15px;}

.details-product-content .old-price{ font-size: 18px; color: #fff; opacity:0.7; text-decoration:line-through;}
.details-product-content .amount{ font-size: 36px !important; color: #fff !important;}
.details-product-content .btn{ display: inline-flex; align-items:center; font-size: 16px; text-transform: uppercase; background:#f3f3f3; color:#8b1f1f; border-radius: 10px; text-decoration:none; padding: 16px 28px; transition:0.3s;}
.details-product-image{ width: 50%;}
.details-product-image .image{ position: relative; width: 100%; padding-bottom: 100%; border-radius:14px; overflow: hidden; margin-bottom: 0 !important;}
.details-product-image .image img{ width:100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}

/* ============= right-product-panel ============ */
.right-product-holder{ position: sticky !important; top: 120px !important; z-index: 5 !important;}
.right-product-panel{ width: 380px;}
.right-product-card{ width: 100%; background:#fff; border: 1px solid #ebe6e7; border-radius:12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); padding: 25px;}
.small-title{ font-size:14px; color:#666; margin-bottom: 16px;}
.right-product-card .product-img{ position: relative; padding-bottom: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 15px;} 
.right-product-card .product-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} 
.right-product-card .product-title h3{ font-size: 20px; color: #333; margin: 0 0 12px;}
.right-product-card .price{ margin-bottom: 15px;}
.right-product-card .old-price{ text-decoration:line-through; color:#999; font-size:16px; margin-right:10px;}
.right-product-card .amount{ font-size: 30px !important; color:#b22a2a !important;}
.right-product-card .features{ list-style:none; padding:0; margin: 0 0 20px;}
.right-product-card .features li{ font-size:14px; color:#666; margin-bottom:8px; display:flex;}
.right-product-card .features li::before { content: "✓"; color: #b22a2a; font-weight: bold; margin-right: 8px; line-height: 1; font-size: 14px; margin-top: 4px;}
.right-product-card .cart-btn{ display: block; width: 100%; text-align: center; background: #a82e2e; color: #fff; padding: 14px; border-radius: 8px; text-decoration: none; transition: 0.3s; }
.right-product-card .cart-btn:hover{ background:#981f1f;}
.right-product-card .cart-btn i{ margin-right: 6px;}
.divider{ height:1px; background:#ddd; margin:20px 0;}
.bottom-info p{ font-size: 14px; color: #666; margin:0 0 10px; display:flex; align-items:center; gap: 5px;}
.bottom-info p:last-child{ margin-bottom: 0;}
.post-content p span { display: inline-block; line-height: 1;}

.blog-pagination { width: 100%; text-align: center; margin: 25px auto 0; display: flex; justify-content: center; gap: 4px; }
.blog-pagination .page-numbers{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #b22a2a; border-radius: 4px;}

/* =======  Details Page ========*/
.articles-info{ border-top: 1px solid #ebe6e7 !important; padding-top: 48px !important;}
.articles-title h2{ font-size: 30px; line-height: 1.2; color: #333; margin: 0 0 30px;}
.articles-info .products-image-desc h2 a{ color: #333 !important;}
.articles-info .products-image-desc h2 a:hover{ color: #b22a2a !important;}
.blog-details-wrapper .details-main-title h2{ font-size: 48px !important; font-weight: 700 !important;}
.blog-details-wrapper h2{ font-size: 30px !important; font-weight: 700 !important; color: #333 !important; margin: 0 0 24px !important; padding: 0 !important;}
.blog-details-wrapper h3{ font-size: 24px !important; font-weight: 700 !important; color: #333 !important; margin: 0 0 24px !important;}
.blog-details-wrapper ul{ padding-left: 20px !important;}
.blog-details-wrapper ul li:not(:last-child){ margin-bottom: 5px !important;}
.fazit-info{ background-color: #f5f5f5; padding: 24px; margin-bottom: 48px !important; border-radius: 10px;}

.details-back-btn{ background-color: #f5f5f5 !important; padding: 16px 0 !important; margin-bottom: 45px !important;}
.details-back-btn a{ font-size: 16px !important; text-transform: inherit !important; color: #666 !important; background-color: transparent !important; border: 0 !important; font-weight: 400 !important; position: relative; padding-left: 30px !important;}
.details-back-btn a:after { content: ''; background-image: url('https://schroth-home.de/wp-content/uploads/2026/03/right-arrow.svg'); background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px; position: absolute; left: 0; top: 0; opacity: 0.6; z-index: 2; }
.details-back-btn a span{ color: #666 !important;}
.details-back-btn a:hover span{ color: #b22a2a !important;}


/* =========== Dev ============= */

.blog-loader{
    text-align:center;
    padding:40px 0;
}

.blog-spinner{
    width:40px;
    height:40px;
    border:4px solid #ddd;
    border-top:4px solid #000;
    border-radius:50%;
    display:inline-block;
    animation:spin 0.7s linear infinite;
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}