/* ==========================================================
   خانه سبز | Green Home — Design System
   بازطراحی کامل فرانت‌اند روی همون ساختار HTML/کلاس‌های قبلی
   (تا اتصال به پنل ادمین و اسکریپت‌های سایت خراب نشه)
   ========================================================== */

:root{
  /* رنگ پایه: سبز جنگلی عمیق + لهجه‌ی گرم کهربایی/چوبی که با محصولات چوب و سرامیک هم‌خونی داره */
  --c-bg:            #f7f5ef;
  --c-surface:        #ffffff;
  --c-surface-2:      #f1efe6;

  --c-primary:        #1f5c3f;
  --c-primary-dark:   #123c29;
  --c-primary-light:  #e7f2ea;
  --c-primary-soft:   #cfe6d7;

  --c-accent:         #c07a3f;
  --c-accent-dark:    #9c5c2a;
  --c-accent-light:   #f7e6d3;

  --c-text:           #20261f;
  --c-text-muted:     #6d7669;
  --c-text-soft:      #97998f;

  --c-border:         #e6e1d3;
  --c-danger:         #d64545;

  --radius-xs: 10px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(20,40,25,.06);
  --shadow-md: 0 14px 32px -8px rgba(20,40,25,.16);
  --shadow-lg: 0 26px 48px -12px rgba(20,40,25,.22);

  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

/*================ Header ================*/

.header{
  width:100%;
  display:flex;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:60;
  padding-top:14px;
}

.header-content{
  width:96%;
  max-width:1700px;
  min-height:78px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 28px;
  box-shadow:var(--shadow-md);
}

.header-start{
  display:flex;
  align-items:center;
  gap:16px;
}

.menu-btn{
  border:none;
  background:var(--c-primary-light);
  color:var(--c-primary);
  width:44px;
  height:44px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s var(--ease);
  flex-shrink:0;
}

.menu-btn:hover{
  background:var(--c-primary);
  color:#fff;
}

.menu-btn i{ transition:.3s; }
.menu-btn:hover i{ transform:rotate(90deg); }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--c-primary-dark);
  white-space:nowrap;
}

.brand-mark{
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--c-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  box-shadow:var(--shadow-sm);
}

.brand-name{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.2px;
}

.header-icons{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-icons a{
  color:var(--c-text);
  font-size:19px;
  transition:.25s var(--ease);
  width:45px;
  height:44px;
  border-radius:var(--radius-pill);
  background:var(--c-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-decoration:none;
}

.user-icon-slot a{
  color:var(--c-text);
  font-size:19px;
  transition:.25s var(--ease);
  width:95px;
  height:44px;
  border-radius:var(--radius-pill);
  background:var(--c-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-decoration:none;
}

.header-icons a:hover,
.user-icon-slot a:hover{
  background:var(--c-primary);
  color:#fff;
}

.search-box{
  width:44%;
  min-width:0;
  height:46px;
  background:var(--c-surface-2);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:10px;
  transition:.25s var(--ease);
}

.search-box:focus-within{
  background:var(--c-surface);
  border-color:var(--c-primary-soft);
  box-shadow:0 0 0 4px var(--c-primary-light);
}

.search-box input{
  flex:1;
  min-width:0;
  border:none;
  background:none;
  outline:none;
  text-align:right;
  font-size:14.5px;
  font-family:'Vazirmatn';
  color:var(--c-text);
}

.search-box input::placeholder{ color:var(--c-text-soft); }
.search-box i{ font-size:17px; color:var(--c-text-muted); }

/* دکمه‌های متنی هدر (دسته‌بندی / ارتباط با ما) */
.header-right-buttons{
  display:flex;
  gap:10px;
  align-items:center;
}

.header-btn{
  background:var(--c-primary-light);
  color:var(--c-primary-dark);
  padding:10px 18px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:.25s var(--ease);
  white-space:nowrap;
}

.header-btn:hover,
.header-btn.active{
  background:var(--c-primary);
  color:#fff;
  transform:translateY(-1px);
}

/*================ Slider ================*/

.slider{
  width:96%;
  max-width:1620px;
  height:320px;
  margin:22px auto 8px;
  overflow:hidden;
  position:relative;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.slides{ width:100%; height:100%; position:relative; }

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s var(--ease);
}

.slide.active{ opacity:1; }

.slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(18,60,41,.55) 0%, rgba(18,60,41,0) 45%);
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.prev, .next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--c-primary-dark);
  cursor:pointer;
  font-size:20px;
  transition:.25s var(--ease);
  z-index:5;
  box-shadow:var(--shadow-sm);
}

.prev{ left:20px; }
.next{ right:20px; }
.prev:hover, .next:hover{ background:var(--c-primary); color:#fff; }

.dots{
  position:absolute;
  bottom:20px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:5;
}

.dot{
  width:9px;
  height:9px;
  background:rgba(255,255,255,.55);
  border-radius:50%;
  cursor:pointer;
  transition:.25s var(--ease);
}

.dot.active{ width:26px; border-radius:5px; background:#fff; }

/*================ بخش عنوان‌های داخلی ================*/

.section-intro{
  width:96%;
  max-width:1620px;
  margin:34px auto 4px;
  padding:0 6px;
}

/*================ کارت‌های دسته‌بندی (grid-container) ================*/

.grid-container{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  width:96%;
  max-width:1620px;
  margin:26px auto 6px;
}

.card{
  width:100%;
  aspect-ratio:1/1;
  background:var(--c-surface);
  border-radius:var(--radius-md);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor:pointer;
  border:1px solid var(--c-border);
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.image-section{
  position:absolute;
  inset:0;
  border-radius:var(--radius-md);
  overflow:hidden;
}

.image-section::before{ content:none; }

.image-section img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}

.card:hover .image-section img{ transform:scale(1.07); }

.image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(18,32,20,.82) 0%, rgba(18,32,20,.05) 55%, transparent 75%);
  z-index:2;
}

.right-section{
  position:absolute;
  inset:auto 0 0 0;
  padding:0 14px 12px;
  z-index:3;
}

.right-section .Name,
.right-section .Name1,
.right-section .Name2{
  margin:0;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}

/*================ ردیف محصولات (section) ================*/

.section{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:20px 22px 8px;
  position:relative;
  width:96%;
  max-width:1620px;
  margin:26px auto;
  box-shadow:var(--shadow-sm);
  box-sizing:border-box;
}

.header_Card{
  display:flex;
  align-items:center;
  margin-bottom:12px;
  gap:12px;
}

.header_Card h2{
  font-size:1.3rem;
  font-weight:800;
  color:var(--c-text);
  margin:0;
}

.header_Card .icon{
  width:38px;
  height:38px;
  border-radius:var(--radius-pill);
  background:var(--c-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
}

.header_Card .icon img{
  width:20px;
  height:20px;
}

.products{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:6px 4px 20px;
  scrollbar-width:thin;
}

.products::-webkit-scrollbar{ height:6px; }
.products::-webkit-scrollbar-thumb{ background:var(--c-primary-soft); border-radius:10px; }

.product-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-md);
  width:210px;
  min-width:210px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}

.product-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-primary-soft);
}

.card-top{
  height:170px;
  background:var(--c-surface-2);
  overflow:hidden;
  flex-shrink:0;
}

.card-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s var(--ease);
}

.product-card:hover .card-top img{ transform:scale(1.06); }

.card-info{
  padding:14px 10px 6px;
  color:var(--c-text);
  font-size:.98rem;
  font-weight:700;
  line-height:1.4;
  flex:1 1 auto;
}

.card-info span{
  display:block;
  margin-top:4px;
  font-size:.78rem;
  font-weight:400;
  color:var(--c-text-muted);
}

.card-bottom{
  padding:10px 8px 16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-shrink:0;
}

.plus-btn{
  position:static;
  background:var(--c-primary);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:700;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  order:3;
  flex-shrink:0;
  transition:.25s var(--ease);
  z-index:5;
}

.plus-btn:hover{ background:var(--c-accent); transform:scale(1.08); }

/* قلب علاقه‌مندی‌ها - کنار دکمه + روی هر کارت محصول */
.fav-btn{
  position:static;
  background:var(--c-surface-2);
  color:var(--c-text-muted);
  border:1px solid var(--c-border);
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
  order:2;
  flex-shrink:0;
  transition:.25s var(--ease);
  z-index:5;
}

.fav-btn:hover{ border-color:#e0245e; color:#e0245e; transform:scale(1.08); }

.fav-btn.active{
  background:#e0245e;
  border-color:#e0245e;
  color:#fff;
}

.price{
  position:static;
  background:var(--c-primary-light);
  color:var(--c-primary-dark);
  font-weight:800;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  font-size:.92rem;
  order:1;
  margin-inline-end:auto;
  min-width:0;
  flex-shrink:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/*================ نوار اعتماد (Trust Strip) ================*/

.trust-strip{
  width:96%;
  max-width:1620px;
  margin:18px auto 26px;
  background:var(--c-primary-dark);
  border-radius:var(--radius-md);
  padding:16px 20px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  box-shadow:var(--shadow-md);
}

.trust-item{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.trust-item i{
  font-size:17px;
  width:36px;
  height:36px;
  border-radius:11px;
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#cfe6d7;
}

.trust-item strong{
  display:block;
  font-size:.84rem;
  margin-bottom:1px;
}

.trust-item span{
  display:block;
  font-size:.7rem;
  color:#bcd4c5;
}

/*================ چرا خانه سبز (Why Us) ================*/

.why-us{
  width:96%;
  max-width:1620px;
  margin:50px auto 28px;
}

.why-us-heading{
  text-align:center;
  margin-bottom:30px;
}

.why-us-heading h2{
  font-size:1.7rem;
  font-weight:800;
  margin-bottom:8px;
}

.why-us-heading p{
  color:var(--c-text-muted);
  font-size:.95rem;
}

.why-us-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.why-us-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:28px 22px;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.why-us-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-primary-soft);
}

.why-us-card i{
  font-size:26px;
  color:var(--c-primary);
  width:58px;
  height:58px;
  border-radius:var(--radius-pill);
  background:var(--c-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}

.why-us-card h3{
  font-size:1.02rem;
  font-weight:800;
  margin-bottom:8px;
}

.why-us-card p{
  font-size:.85rem;
  color:var(--c-text-muted);
  line-height:1.6;
}

/*================ خبرنامه (Newsletter) ================*/

.newsletter{
  width:96%;
  max-width:1620px;
  margin:28px auto;
  background:linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  border-radius:var(--radius-lg);
  padding:38px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}

.newsletter-text h2{
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:6px;
}

.newsletter-text p{
  color:#cfe6d7;
  font-size:.9rem;
}

.newsletter-form{
  display:flex;
  gap:10px;
  flex:1 1 340px;
  max-width:420px;
}

.newsletter-form input{
  flex:1;
  height:50px;
  border:none;
  border-radius:var(--radius-pill);
  padding:0 20px;
  font-family:'Vazirmatn';
  font-size:.9rem;
  outline:none;
  text-align:right;
}

.newsletter-form button{
  height:50px;
  padding:0 26px;
  border:none;
  border-radius:var(--radius-pill);
  background:var(--c-accent);
  color:#fff;
  font-family:'Vazirmatn';
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:.25s var(--ease);
  white-space:nowrap;
}

.newsletter-form button:hover{ background:var(--c-accent-dark); }

/* ================= Footer ================= */
.footer{
  background:var(--c-primary-dark);
  color:#fff;
  margin-top:28px;
  padding:40px 0 22px;
  direction:rtl;
}

.footer-content{
  max-width:1620px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:32px;
  padding:0 30px;
}

.footer-section h4{
  margin-bottom:16px;
  color:var(--c-primary-soft);
  font-size:1.02rem;
  font-weight:800;
}

.footer-section ul{ list-style:none; }
.footer-section ul li{ margin-bottom:9px; }

/* لینک‌های سریع: به‌جای یک ستون بلند، دوتا-دوتا کنار هم (فوتر کوتاه‌تر می‌شه) */
.footer-links{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px 14px;
}

.footer-links li{ margin-bottom:0; }

.footer-section a{
  color:#d7e6da;
  text-decoration:none;
  transition:.25s var(--ease);
  font-size:.9rem;
}

.footer-section a:hover{ color:#fff; padding-right:3px; }

.footer-section p{
  font-size:.88rem;
  color:#c5dacb;
  line-height:1.7;
}

.footer-section p strong{
  font-size:1rem;
  display:block;
  margin:4px 0;
  color:#fff;
}

.social-icons{ display:flex; gap:10px; }

.social-icons a{
  font-size:17px;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s var(--ease);
}

.social-icons a:hover{
  background:var(--c-accent);
  transform:translateY(-3px);
}

.footer-bottom{
  text-align:center;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#a9c7b2;
  font-size:.85rem;
}

/* ======================================================================
   ================= ریسپانسیو (نمای موبایل و تبلت) ====================
   ====================================================================== */

@media (max-width: 1100px){
  .grid-container{ grid-template-columns:repeat(3, 1fr); }
  .why-us-grid{ grid-template-columns:repeat(2, 1fr); }
  .trust-strip{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 992px){
  .search-box{ width:34%; }
  .card{ border-radius:var(--radius-sm); }
  .slider{ height:260px; }
}

@media (max-width: 900px){
  .header-right-buttons{ display:none; }
  .search-box{ width:auto; flex:1; margin:0 10px; }
}

@media (max-width: 640px){
  .header{ padding-top:10px; }

  .header-content{
    min-height:64px;
    padding:0 14px;
    border-radius:var(--radius-md);
  }

  .menu-btn{ width:38px; height:38px; font-size:16px; }
  .brand-mark{ width:30px; height:30px; font-size:13px; }
  .brand-name{ font-size:1rem; }

  .header-right-buttons{ display:none; }

  .search-box{
    width:auto;
    flex:1;
    height:40px;
    margin:0 8px;
    padding:0 14px;
  }

  .search-box input{ font-size:12.5px; }
  .search-box i{ font-size:15px; }

  .header-icons a, .user-icon-slot a{ width:38px; height:38px; font-size:16px; }

  .slider{
    height:160px;
    border-radius:var(--radius-md);
    margin:14px auto 6px;
  }

  .prev, .next{ width:36px; height:36px; font-size:16px; }

  .grid-container{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    width:94%;
  }

  .right-section .Name,
  .right-section .Name1,
  .right-section .Name2{ font-size:11px; }

  .section{ width:94%; padding:16px 14px 4px; }

  .header_Card h2{ font-size:1.05rem; }

  .product-card{ width:158px; min-width:158px; }
  .card-top{ height:120px; }
  .card-info{ font-size:.85rem; padding:10px 8px 4px; }
  .card-info span{ font-size:.72rem; }
  .price{ font-size:.78rem; padding:5px 11px; }
  .plus-btn{ width:28px; height:28px; font-size:16px; }
  .fav-btn{ width:28px; height:28px; font-size:14px; }

  .trust-strip{ grid-template-columns:1fr 1fr; padding:14px; gap:12px; }

  .why-us{ margin:36px auto 18px; }

  .why-us-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }

  .why-us-card{ padding:18px 12px; }

  .why-us-card i{
    width:46px;
    height:46px;
    font-size:20px;
    margin:0 auto 10px;
  }

  .why-us-card h3{ font-size:.88rem; margin-bottom:5px; }
  .why-us-card p{ font-size:.74rem; line-height:1.5; }

  .newsletter{ margin:18px auto; padding:26px 22px; justify-content:center; text-align:center; }
  .newsletter-form{ max-width:100%; }

  .footer{ margin-top:18px; }

  .footer-content{ padding:0 20px; gap:24px; text-align:center; justify-items:center; }

  /* تو موبایل هم لینک‌های سریع همون چیدمان دوتایی رو حفظ می‌کنن، فقط وسط‌چین */
  .footer-links{ justify-items:center; }
}

@media (max-width: 380px){
  .grid-container{ grid-template-columns:repeat(2, 1fr); }
  .product-card{ width:150px; min-width:150px; }
}