/* --- 1. Fonts & Reset --- */
@font-face {
    font-family: 'sarafontravi';    font-style: normal;    font-weight: 400;    src: url("../fonts/RaviFaNum-Regular.woff2") format("woff2");    font-display: swap;}
@font-face {
    font-family: 'sarafontravi';    font-style: normal;    font-weight: 700;    src: url("../fonts/RaviFaNum-Bold.woff2") format("woff2");    font-display: swap;}
* {
    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: 'sarafontravi', sans-serif;}
body {
    line-height: 1.6;    color: #333;    background-color: #f9f9f9;    min-width: 98vw;    display: flex;    flex-direction: column;    justify-content: space-between;}

a {
    text-decoration: none;    color: #000;    font-weight: bold;}
img.attachment-large.size-large.wp-post-image {
    width: 100%;    height: auto;}
.image-size img{
	width:100%;}
/* --- 2. Layout & Containers --- */
.container {
    width: 100%;    max-width: 1400px;    margin: 0 auto;}

.container.full-size { max-width: unset; }

.alignwide {
    max-width: 1300px;    margin: 0 auto;}

.site-content {
    display: flex;    gap: 40px;    margin: 40px 20px;}
.page-template-default.page main.site-content,.page-template-default.page .article-post,.home .site-content { margin: 0; }
.main-content { flex: 3; text-align: justify; }
.sidebar { flex: 1; }
.sidebar .wp-block-search__label { width: fit-content; }

/* --- 3. Header & footer & Navigation --- */
.site-header {position: sticky;    top: 0;    z-index: 100;    background: #fff;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}

.site-header .container {
    padding: 15px 0;    border-radius: 20px;}
li.menu-item {
    display: flex;    align-items: center;}
.main-navigation ul, .nav-menu-list {
    list-style: none;    display: flex;    gap: 30px;    justify-content: center;}
.custom-resp-nav .menu-container ul ul.sub-menu {
    display: none;    position: absolute;    background-color: #fff;    list-style: none;    border: 1px solid #ddd;    top: 110%;}
.menu-item-has-children{display: flex;}
.menu-item-has-children::after {content: '\eb75';display: block;font-family: 'iconsax' !important;font-size: 15px;}
.custom-resp-nav .menu-container ul ul.sub-menu a {display: block;padding: 10px 20px;width:max-content;}
.custom-resp-nav .menu-container li:hover ul {
    display: block;}
.main-navigation a, .nav-menu-list a {
    color: #333;    font-weight: 500;    padding: 5px 10px;    transition: 0.3s;    display: flex;    align-items: center;}
.main-navigation a:hover { color: #0073aa; }
.custom-resp-nav { display: flex; align-items: center; position: relative; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; }
.menu-toggle .bar { width: 25px; height: 3px; background-color: #333; }
/* --- 4. Posts & Archive --- */
.article-post { margin-bottom: 40px; }
.post-title { margin-bottom: 15px; font-size: 1.8rem; }
.post-thumbnail, .archive-posts img.wp-post-image { width: 100%; height: auto; border-radius: 5px; }

.archive-posts {
    display: grid;    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));    gap: 15px;}

.archive-posts article { border: 1px solid #eee; padding: 10px; position: relative; }
.archive-posts img.wp-post-image { max-height: 200px; object-fit: cover; }
.post-meta {
    color: #666;    margin-bottom: 20px;    display: flex;    gap: 10px;    flex-direction: column;    border: 1px solid #ddd;background-color: #fff; padding: 10px;}
.post-aside-sticky {
    position: sticky;    top: 110px;}
.post-footer {
    margin: 20px 0;}
.comments-section .comment-respond {
    display: flex;    flex-direction: column;    width: 100%;    margin-top: 25px;    gap: 10px;}
.comments-section form#commentform {
    display: flex;    flex-direction: column;    gap: 10px;}
.comments-section ul.comment-list {
    display: flex;    flex-direction: column;    list-style-type: none;    gap: 10px;}
.comments-section ul.comment-list li.comment {
    border: 1px solid #ddd;    padding: 15px;}
.comments-section .comment-body footer.comment-meta {
    display: flex;    justify-content: space-between;    align-items: center;}
.comments-section .comment-body .comment-content {
    background: #eee;    padding: 10px;    margin: 10px 0;    border-radius: 10px;}
.comments-section ul.children {
    margin-right: 15px;    list-style-type: unset;    margin-top: 15px;}
.comments-section hr.comment-separator {
    margin: 20px 0;}
.submit-button.btn.btn-primary,.btn.btn-primary{background-color: #000;color: #fff;padding: 15px 20px; border: unset; display: inline-block; margin-top: 15px;}
form#commentform textarea#comment,form#commentform input#author,form#commentform input#email,form#commentform input#phone {
    width: 100%;    border: 1px solid #ddd;    padding: 10px;    border-radius: 0;}
.error-404 {
    display: flex;    flex-direction: column;    align-items: center;    margin: 50px 0;    text-align: center;}
/* فهرست مطالب */
.table-of-contents {
    border: 1px solid #ddd;    padding: 10px;    margin: 20px 0;}
.table-of-contents, .table-of-contents ul {
    list-style: none;}
/* --- 5. Pagination --- */
.nav-links { margin: 25px auto; display: block; width: fit-content; }
.page-numbers {
    background: #000;    color: #fff;    padding: 10px 15px;    min-width: 41px;    display: inline-block;    text-align: center;    border: 1px solid transparent;}
.page-numbers:hover, span.page-numbers.current { color: #000; background: #fff; border-color: #000; }

/* --- 6. Slick Slider & Animations --- */
.multi-carousel-container article.mini-card {
    display: block;}
.multi-carousel-container article.mini-card img {border-radius: 5px;}
.slick-slider { width: 100%; display: grid; position: relative; }
.slick-dots { 
    list-style: none; display: flex; justify-content: center; 
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); 
}
.slick-dots li { margin: 0 5px; }
.slick-dots button { 
    font-size: 0; width: 12px; height: 12px; border-radius: 3px; 
    border: none; background: #ccc; transition: 1s ease-out; 
}
.slick-dots li.slick-active button { background: #fff; width: 100px; }

.slick-prev, .slick-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer; }
.slick-next { right: 0; }
.slick-prev { left: 0; }
.slick-prev svg, .slick-next svg { background: #fff; width: 40px; height: 40px; padding: 5px; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.05); }
.mini-card-content a.btn.btn-primary {width: 100%;padding: 10px;}
/* Animation */
.mini-anime .wp-block-cover__image-background, 
.mini-anime-res .wp-block-cover__image-background { transition: 4s ease-out; }
.mini-anime-res .wp-block-cover__image-background,
.slick-active .mini-anime .wp-block-cover__image-background { transform: scale(1.05); }
.slick-active .mini-anime-res .wp-block-cover__image-background { transform: none; }
/* --- 7. Footer --- */
.site-footer { background: #ddd;padding: 20px; }
.site-footer ul{list-style-type: none;}
.footer-content .footer-widget {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}
/*----------- product -------------*/
.product-header {
    display: flex;    flex-direction: row;    align-items: center;    gap: 20px;    border: 1px solid #eee;    padding: 10px;    margin-bottom: 20px;background-color: #fff;}
.product-thumbnail, .product-header-meta {
    width: 50%;}
p.product-stock,p.product-not-stock {
    position: absolute;    top: 10px;    right: 10px;    background: #89b889;    color: #fff;    padding: 3px 11px;    border-radius: 0 5px 0 5px;}
p.product-not-stock {
    background: #e77272;}
.wp-block-search{
    width: 100%;}
.archive-posts article .btn.btn-primary {
    width: 100%;    text-align: center;    padding: 10px;}
/* --- 8. Responsive (Media Queries) --- */
@media (max-width: 992px) {
    .container,.main-content { width: 100%; }
    ul.products {grid-template-columns: repeat(2,auto);}
    .site-content{flex-direction: column;}
}
 
@media (max-width: 768px) {
    .site-content,.product-header { flex-direction: column; }
    .sidebar, .main-content,.product-thumbnail, .product-header-meta { width: 100%; }
    .menu-toggle { display: flex; }
    .menu-container { 
        display: none; position: absolute; top: 100%; right: 0; left: 0; 
        background: #fff; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    }
    .menu-item-has-children {display: block;}
    .menu-item-has-children::after {content:none;}
    .menu-container.active {display: block;width: 70vw;max-height: 70vh;position: fixed;top: 50%;right: 50%;z-index: 999;transform: translate(50%,-50%);overflow: scroll;text-align: center;}
    .custom-resp-nav .menu-container.active ul ul.sub-menu{display: block;position: unset;border: none;}
    .custom-resp-nav .menu-container.active ul ul.sub-menu::before {content: "";display: block;width: 16%;border-top: 5px dotted #aeaeae;margin: 8px auto 0px;}
    .nav-menu-list { flex-direction: column; padding: 15px; gap: 10px; }
    .single-product-header-box,.product-container-content {flex-direction: column;margin: 10px;}
    .shop-content-wrapper, .sarath-category-page {flex-direction: column;}
    ul.products {grid-template-columns: repeat(1,auto);}
	header.site-header .container {padding:10px;}
	header.site-header nav {order: 1;}
	header.site-header .wp-block-buttons {width: 80%;justify-content: flex-end;}
	.footer-content .footer-widget {grid-template-columns: repeat(2, 1fr);}
	.footer-widget div:nth-child(1) {grid-column: 1 / span 2;text-align: center;}
}