/*
Theme Name: Toos Coffee Child
Template: hello-elementor
Version: 1.0.0
Text Domain: toos-coffee-child
*/

/* ============================================
   ۱. متغیرهای رنگ برند توس کافی
   ============================================ */
:root{
  --toos-coffee:      #2B1B14;  /* قهوه تیره — پس‌زمینه هدر/هیرو */
  --toos-walnut:       #6B4226;  /* گردو — رنگ اصلی برند */
  --toos-walnut-light: #8A5A34;
  --toos-oak:          #A9713C;  /* بلوط — دکمه‌ها و CTA */
  --toos-oak-light:    #C08F55;
  --toos-paper:        #FAF7F2;  /* سفید-کرم — پس‌زمینه عکس محصول */
  --toos-linen:        #F0E9DE;  /* پس‌زمینه صفحات */
  --toos-clay:         #9C4A2E;  /* قیمت / تخفیف */
  --toos-green:        #5C7A52;  /* بج "جدید" */
}

/* ============================================
   ۲. تایپوگرافی فارسی سراسر سایت
   ============================================ */
body, p, li, a, span, div,
input, textarea, select, button {
  font-family: 'Vazirmatn', Tahoma, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  font-weight: 700 !important;
  color: var(--toos-coffee);
}

/* برای تیترهای بزرگ هیرو/بنر که می‌خواید حس اصیل‌تری داشته باشن،
   این کلاس رو دستی توی Elementor روی المان بذارید:
   Advanced > CSS Classes > toos-display */
.toos-display {
  font-family: 'Noto Naskh Arabic', serif !important;
  font-weight: 700 !important;
}

body {
  background-color: var(--toos-linen);
  color: var(--toos-coffee);
}

/* ============================================
   ۳. دکمه‌ها (المنتور + ووکامرس)
   ============================================ */
.elementor-button:not(.elementor-icon-button):not(.elementor-menu-cart__toggle):not(.elementor-menu-cart__toggle_icon),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.single_add_to_cart_button {
  background-color: var(--toos-oak) !important;
  color: var(--toos-coffee) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  padding: 12px 26px !important;
  transition: background-color .2s ease, transform .15s ease;
}

.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--toos-oak-light) !important;
  color: var(--toos-coffee) !important;
}

/* دکمه‌ی خطی (outline) — برای دکمه‌های ثانویه در المنتور،
   این کلاس رو دستی اضافه کنید: toos-btn-outline */
.toos-btn-outline.elementor-button {
  background-color: transparent !important;
  border: 1.5px solid var(--toos-oak) !important;
  color: var(--toos-walnut) !important;
}
.toos-btn-outline.elementor-button:hover {
  background-color: var(--toos-oak) !important;
  color: #fff !important;
}

/* ============================================
   ۴. قیمت محصولات — رنگ برند به‌جای رنگ پیش‌فرض ووکامرس
   ============================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--toos-clay) !important;
  font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: rgba(43,27,20,0.35) !important;
  font-weight: 400 !important;
}

/* ============================================
   ۵. کارت محصول در گرید فروشگاه
   ============================================ */
.woocommerce ul.products li.product {
  position: relative;
  background: #fff;
  border: 1px solid rgba(107,66,38,0.1);
  border-radius: 10px;
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 24px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(43,27,20,0.1);
}

/* قاب چوبی زیر عکس محصول */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  background: var(--toos-paper);
  border-bottom: 6px solid var(--toos-walnut);
  text-align: center;
  padding: 0;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* اسم محصول */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--toos-coffee);
  padding: 14px 14px 4px;
  line-height: 1.6;
}

/* قیمت */
.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 14px 12px;
  font-size: 15.5px !important;
}

/* بج تخفیف — بازطراحی span.onsale پیش‌فرض ووکامرس */
.woocommerce ul.products li.product span.onsale {
  position: absolute !important;
  top: 10px;
  right: 10px;
  left: auto;
  min-height: unset !important;
  min-width: unset !important;
  width: auto !important;
  height: auto !important;
  border-radius: 4px !important;
  background: var(--toos-clay) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  z-index: 2;
}

/* دکمه افزودن به سبد داخل کارت — حالت خطی (outline) */
.woocommerce ul.products li.product .woocommerce-loop-product__buttons {
  padding: 0 14px 18px;
}
.woocommerce ul.products li.product a.button {
  display: block;
  width: 100%;
  background: transparent !important;
  border: 1.5px solid var(--toos-oak) !important;
  color: var(--toos-walnut) !important;
  text-align: center;
  padding: 10px !important;
  font-size: 13px !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--toos-oak) !important;
  color: #fff !important;
}

/* حالت ناموجود */
.woocommerce ul.products li.product.outofstock a.woocommerce-loop-product__link {
  opacity: .55;
}
.woocommerce ul.products li.product.outofstock a.button {
  border-color: rgba(107,66,38,0.25) !important;
  color: rgba(107,66,38,0.4) !important;
  pointer-events: none;
}