/*
Theme Name: Sanliwood Mohsen
Author: Mohsen
Version: 1.0
Description: Custom WordPress Theme
*/

/* =====================
   تنظیمات عمومی
===================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    background: #ffffff;
    color: #333;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .3s;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-main {
    max-width: 1200px;
    margin: auto;
    padding: 25px 15px;
}


/* =====================
   هدر
===================== */

.site-header {

    background: #2CB5B0;

    color: #fff;

    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);

}


/* ردیف بالا */

.header-top {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    gap: 20px;

    padding: 18px 15px;

}


/* ردیف پایین */

.header-bottom {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: end;

    gap: 20px;

    padding: 15px;

    border-top: 1px solid rgba(255, 255, 255, .18);

}


/* ستون ها */

.header-box {

    min-width: 0;

}

.header-top .header-box:nth-child(1),
.header-bottom .header-box:nth-child(1) {

    text-align: right;

}

.header-top .header-box:nth-child(2),
.header-bottom .header-box:nth-child(2) {

    text-align: center;

}

.header-top .header-box:nth-child(3),
.header-bottom .header-box:nth-child(3) {

    text-align: left;

}


/* =====================
   منو
===================== */

.menu {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
    margin-right: 0;

}

.menu li {

    display: block;

}

.menu li a {

    display: block;

    padding: 10px 16px;

    background: #ffffff;

    color: #2CB5B0;

    border-radius: 10px;

    font-weight: bold;

    font-size: 9px;

}

.menu li a:hover {

    background: #198f8a;

    color: #fff;

}
/* =====================
   تصویر فروشگاه
===================== */

.shop-image img {

    width: 300px;

    height: 150px;

    object-fit: cover;

    border-radius: 40% 60% 55% 45% / 45% 35% 65% 55%;

    margin-right: auto;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);

}


/* =====================
   جستجو
===================== */

.wp-block-search {

    max-width: 220px;

    margin-right: auto;

}

.wp-block-search__inside-wrapper {

    display: flex;

    gap: 8px;

}

.wp-block-search input {

    height: 38px;

    border: none;

    border-radius: 8px;

    padding: 0 10px;

}

.wp-block-search button {

    height: 38px;

    border: none;

    border-radius: 8px;

    padding: 0 14px;

    background: #ffffff;

    color: #2CB5B0;

    font-weight: bold;

    cursor: pointer;

}


/* =====================
   ابزارک ها
===================== */

.header-widget {

    margin: 6px 0;

}

.footer-widget {

    margin-bottom: 18px;

}


/* =====================
   فوتر
===================== */

.site-footer {

    background: #2CB5B0;

    color: #fff;

    padding: 35px 20px 15px;

}

.footer-columns {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}

.footer-column {

    min-width: 0;

}

.site-footer h3 {

    display: inline-block;

    position: relative;

    padding-bottom: 10px;

    margin-bottom: 18px;

    font-size: 18px;

}

.site-footer h3::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 70px;

    height: 4px;

    background: linear-gradient(to left, #ffffff, #8ef0ec);

    border-radius: 20px;

}

.site-footer li {

    margin-bottom: 10px;

}

.site-footer a:hover {

    opacity: .8;

}

.footer-copyright {

    max-width: 1200px;

    margin: 25px auto 0;

    padding-top: 15px;

    border-top: 1px solid rgba(255, 255, 255, .25);

    text-align: center;

    font-size: 13px;

}


/* =====================
   موبایل
===================== */

@media(max-width:768px) {

    .header-top,

    .header-bottom {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .header-box {

        text-align: center !important;

    }

    .menu {

        justify-content: center;

    }

    .footer-columns {

        grid-template-columns: 1fr;

    }

    .shop-image img {

        margin: auto;

        width: 150px;

        height: 70px;

    }

    .wp-block-search {

        margin: auto;

    }

}