.article-container{margin:0 auto;padding:40px 20px}.article-layout{display:flex;gap:40px;max-width:1200px;margin:0 auto;padding:40px 20px}.article-main{flex:1 1 70%}.article-sidebar{flex:1 1 30%;border-left:1px solid #eee;padding-left:20px;position:sticky;top:2rem;height:fit-content}.article-hero-image{width:100%;height:auto;object-fit:cover;border-radius:8px}.article-hero__gradient{display:block!important}.article-hero__content{position:absolute;bottom:0;left:0;right:0;padding:2rem;color:#fff;z-index:2}.article-hero__title{font-size:2.4rem;margin:0 0 1rem;line-height:1.2;color:inherit}.article-hero__meta-row{display:flex;align-items:center;gap:.5rem;font-size:.95rem;opacity:.9}.article-hero__meta-separator{opacity:.6}.article-content{margin-top:2rem}.article-body{font-size:1.1rem;line-height:1.7;color:#333}.article-body img{max-width:100%;height:auto;margin:20px 0}.article-meta{margin-top:2rem;padding-top:1rem;border-top:1px solid #eee;font-size:.9rem;color:#666}.meta-item{margin-bottom:.5rem}.meta-label{font-weight:600;margin-right:.5rem}.article-tags{display:inline}.tag-link{color:#0073aa;text-decoration:none}.tag-link:hover{text-decoration:underline}.article-comments{margin-top:60px}.comments-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0}.comments-title{display:flex;align-items:center;gap:.75rem;font-size:1.75rem;font-weight:600;color:#1a1a1a;margin:0}.comments-icon{color:#6366f1}.comments-count{font-size:.875rem;color:#6b7280;background:#f3f4f6;padding:.5rem 1rem;border-radius:1rem;font-weight:500}.comments-list{margin-bottom:3rem}.comment-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a;transition:all .2s ease}.comment-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.comment-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}.comment-author-info{display:flex;align-items:center;gap:.75rem}.comment-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-initial{color:#fff;font-weight:600;font-size:1rem;text-transform:uppercase}.comment-meta{display:flex;flex-direction:column;gap:.25rem}.comment-author{font-weight:600;color:#1a1a1a;margin:0;font-size:1rem}.comment-date{font-size:.875rem;color:#6b7280;margin:0}.comment-content{margin-left:3.25rem}.comment-body{color:#374151;line-height:1.6;margin:0;font-size:.95rem}.comments-empty{text-align:center;padding:3rem 1rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:1rem}.empty-icon{color:#d1d5db}.empty-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0}.empty-description{color:#6b7280;margin:0;font-size:.95rem}.comment-form-wrapper{background:#f9fafb;border-radius:12px;padding:2rem;border:1px solid #e5e7eb}.form-header{text-align:center;margin-bottom:2rem}.form-title{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin:0 0 .5rem}.form-subtitle{color:#6b7280;margin:0;font-size:.95rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.form-field{margin-bottom:1.5rem}.form-label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:#374151;margin-bottom:.5rem;font-size:.875rem}.label-icon{color:#6366f1}.form-input,.form-textarea{width:100%;padding:.75rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.95rem;transition:all .2s ease;background:#fff}.form-input:focus,.form-textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-textarea{resize:vertical;min-height:120px;font-family:inherit}.form-errors{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1rem;margin-bottom:1.5rem;color:#dc2626;font-size:.875rem}.form-actions{text-align:center}.submit-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:8px;padding:.875rem 2rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #6366f133}.submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.btn-icon{color:currentColor}.sidebar-widget{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a;transition:all .2s ease}.sidebar-widget:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.widget-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid #f3f4f6}.widget-icon{color:#6366f1;flex-shrink:0}.widget-title{font-size:1.125rem;font-weight:600;color:#1a1a1a;margin:0}.search-container{margin-top:1rem}.search-input-wrapper{position:relative;display:flex;align-items:center;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;transition:all .2s ease}.search-input-wrapper:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a;background:#fff}.search-icon{position:absolute;left:.75rem;color:#9ca3af;z-index:1}.search-input{flex:1;padding:.75rem .75rem .75rem 2.5rem;border:none;background:transparent;font-size:.95rem;color:#374151;outline:none}.search-input::placeholder{color:#9ca3af}.search-btn{padding:.75rem;background:#6366f1;border:none;border-radius:0 6px 6px 0;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.search-btn:hover{background:#5855eb}.recent-posts-list{display:flex;flex-direction:column;gap:1rem}.recent-post-item{display:flex;gap:.75rem;text-decoration:none;color:inherit;padding:.75rem;border-radius:8px;transition:all .2s ease}.recent-post-item:hover{background:#f9fafb;transform:translate(4px)}.post-image-wrapper{flex-shrink:0;width:60px;height:45px;border-radius:6px;overflow:hidden;background:#f3f4f6}.post-image{width:100%;height:100%;object-fit:cover}.post-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#9ca3af;background:#f3f4f6}.post-content{flex:1;min-width:0}.post-title{font-size:.875rem;font-weight:600;color:#1a1a1a;margin:0 0 .25rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.post-date{font-size:.75rem;color:#6b7280;margin:0}.tags-container{margin-top:1rem}.tags-list{display:flex;flex-wrap:wrap;gap:.5rem}.tag-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:#374151;font-size:.875rem;font-weight:500;transition:all .2s ease}.tag-item:hover{background:#6366f1;border-color:#6366f1;color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #6366f133}.tag-text{font-weight:500}.tag-count{background:#fff3;color:inherit;padding:.125rem .375rem;border-radius:4px;font-size:.75rem;font-weight:600}.tag-item:hover .tag-count{background:#ffffff4d}.related-posts-section{margin-top:60px;padding-top:40px;border:1px solid #eee;width:100%;overflow:hidden}.carousel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.carousel-title-wrapper{display:flex;align-items:center;gap:10px}.carousel-icon{color:#6366f1}.carousel-title{font-size:1.75rem;font-weight:600;color:#1a1a1a;margin:0}.carousel-controls{display:flex;gap:10px}.carousel-btn{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#6b7280}.carousel-btn:hover{background:#e5e7eb;border-color:#d1d5db;color:#374151}.carousel-container{position:relative;overflow:hidden;border-radius:12px;width:100%}.swiper{width:100%;height:100%}.swiper-wrapper{display:flex;align-items:stretch}.swiper-slide{height:auto;display:flex}.carousel-track{display:flex;transition:transform .5s ease-in-out;width:100%;gap:20px}.carousel-slide{flex:0 0 calc(100% / var(--columns-desktop, 3));width:calc(100% / var(--columns-desktop, 3));max-width:calc(100% / var(--columns-desktop, 3));box-sizing:border-box}.related-post-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:#333;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px #0000000d;transition:all .3s ease;width:100%;box-sizing:border-box}.related-post-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001a}.post-image-container{position:relative;width:100%;height:180px;overflow:hidden}.post-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.post-image-placeholder{width:100%;height:100%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af}.post-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.related-post-card:hover .post-overlay{opacity:1}.read-more{color:#fff;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.post-content{padding:0 20px;flex:1;display:flex;flex-direction:column}.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.8125rem;color:#6b7280}.post-date{color:#6b7280}.post-category{background:#f3f4f6;color:#374151;padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:500}.post-title{font-size:1.125rem;font-weight:600;color:#1a1a1a;margin:0 0 8px;line-height:1.4}.post-excerpt{font-size:.875rem;color:#6b7280;line-height:1.5;margin:0;flex:1}.carousel-indicators{display:flex;justify-content:center;margin-top:20px}.indicator-dots{display:flex;gap:8px}.indicator-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:background .2s ease}.indicator-dot:hover{background:#9ca3af}.indicator-dot.active{background:#6366f1}.swiper-pagination{position:relative;display:flex;justify-content:center;margin-top:24px}.swiper-pagination-bullet{width:8px;height:8px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:all .3s ease;margin:0 4px}.swiper-pagination-bullet:hover{background:#9ca3af}.swiper-pagination-bullet-active{background:#3b82f6}.empty-posts,.related-posts-empty{text-align:center;padding:40px 20px}.empty-posts .empty-icon,.related-posts-empty .empty-icon{color:#9ca3af;margin-bottom:16px}.empty-text{color:#6b7280}.carousel-empty{display:flex;align-items:center;justify-content:center;min-height:200px}.carousel-empty .empty-state{text-align:center}.carousel-empty .empty-icon{color:#9ca3af;margin-bottom:16px}.carousel-empty .empty-title{font-size:1.125rem;font-weight:600;color:#374151;margin:0 0 8px}.carousel-empty .empty-description{color:#6b7280;font-size:.875rem;margin:0}@media (max-width: 1024px){.article-sidebar{flex:1 1 300px;max-width:300px}}@media (max-width: 768px){.article-layout{flex-direction:column;padding:70px 0}.article-main,.article-sidebar{flex:1 1 100%}.comments-header{flex-direction:column;align-items:flex-start;gap:1rem}.form-grid{grid-template-columns:1fr}.comment-header{flex-direction:column;align-items:flex-start;gap:1rem}.comment-content{margin-left:0;margin-top:1rem}.comment-form-wrapper{padding:1.5rem}.sidebar-widget{padding:1.25rem}.recent-post-item{padding:.5rem}.post-image-wrapper{width:50px;height:40px}.tags-list{gap:.375rem}.tag-item{padding:.375rem .625rem;font-size:.8125rem}.carousel-header{flex-direction:column;align-items:flex-start;gap:1rem}.carousel-controls{align-self:flex-end}.carousel-track{gap:15px}.carousel-slide{flex:0 0 calc(100% / var(--columns-mobile, 1));width:calc(100% / var(--columns-mobile, 1));min-width:calc(100% / var(--columns-mobile, 1))}.post-image-container{height:160px}.post-content{padding:15px}.post-title{font-size:1rem}.post-excerpt{font-size:.8125rem}}@media (min-width: 768px) and (max-width: 1023px){.carousel-track{gap:20px}.carousel-slide{flex:0 0 calc(100% / var(--columns-tablet, 2));width:calc(100% / var(--columns-tablet, 2));min-width:calc(100% / var(--columns-tablet, 2))}}@media (min-width: 1024px){.carousel-track{gap:24px}.carousel-slide{flex:0 0 calc(100% / var(--columns-desktop, 3));width:calc(100% / var(--columns-desktop, 3));min-width:calc(100% / var(--columns-desktop, 3))}}
/*# sourceMappingURL=/cdn/shop/t/24/assets/article-styles.css.map */