/* ============================================================
   قالب بوبوتل — پل بین طراحی سایت و ساختار ووکامرس
   base.css طراحی اصلی است؛ این فایل فقط تفاوت‌های وردپرس را
   پوشش می‌دهد و استایل‌های پیش‌فرض ووکامرس را کنار می‌زند.
   ============================================================ */

/* ── نوار اطلاع‌رسانی «فروش آنلاین هنوز فعال نیست» ───────── */
.shop-notice {
  background: var(--amber);
  color: var(--white);
  text-align: center;
  padding: 10px 18px;
  font-size: .9rem;
  font-weight: 600;
}

/* ── شبکه محصولات ووکامرس = همان product-grid سایت ───────── */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

/* ووکامرس روی li عرض درصدی و float می‌گذارد؛ هر دو باید برداشته شوند */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* کارت محصول */
ul.products li.product {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--teal-500);
  box-shadow: var(--shadow-2);
}

.product-thumb-link { display: block; line-height: 0; }

ul.products li.product img,
ul.products li.product .thumb {
  width: 100%; height: auto; display: block;
  aspect-ratio: 15 / 14;
  object-fit: cover;
  margin: 0 !important;
  box-shadow: none !important;
}

ul.products li.product .product-body h3 {
  font-size: 1.05rem;
  color: var(--teal-900);
  margin-bottom: .4em;
  padding: 0;
}
ul.products li.product .product-body h3 a {
  color: inherit; text-decoration: none;
}
ul.products li.product .product-body h3 a:hover { color: var(--teal-700); }

/* دکمه‌های ووکامرس داخل کارت، شکل دکمه‌های سایت را می‌گیرند */
ul.products li.product .product-actions .button,
ul.products li.product .product-actions .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 11px 18px;
  font: inherit; font-size: .92rem; font-weight: 600;
  background: var(--teal-700); color: var(--white);
  border: 0; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease;
}
ul.products li.product .product-actions .button:hover { background: var(--teal-900); color: var(--white); }
ul.products li.product .product-actions .added_to_cart { background: var(--teal-500); margin-top: 8px; }

/* ── صفحه فروشگاه ───────────────────────────────────────── */
.woocommerce-products-header { margin-bottom: 24px; }
.woocommerce-products-header__title,
.woocommerce-products-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--teal-900);
}

.woocommerce-result-count { color: var(--ink-soft); font-size: .9rem; }
.woocommerce-ordering select {
  padding: 9px 14px;
  font: inherit; font-size: .9rem;
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px;
}

/* صفحه‌بندی */
.woocommerce nav.woocommerce-pagination ul {
  border: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 42px; padding: 9px 14px;
  font-size: .9rem; font-weight: 600;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 999px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--white); border-color: var(--teal-500); color: var(--teal-700);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--teal-900); border-color: var(--teal-900); color: var(--white);
}

/* ── صفحه تک‌محصول ──────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--teal-900);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ink); font-size: 1.15rem; font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--white); border-bottom-color: var(--white);
}
.woocommerce div.product form.cart .button {
  background: var(--teal-700); color: var(--white);
  padding: 12px 24px; border-radius: var(--r-sm); font-weight: 600;
}
.woocommerce div.product form.cart .button:hover { background: var(--teal-900); }

/* دکمه واتساپ در صفحه محصول */
.single-product .bobotel-wa {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; padding: 12px 24px;
  background: var(--whatsapp); color: var(--white);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.single-product .bobotel-wa:hover { filter: brightness(.94); color: var(--white); }

/* ── پیام‌ها و فرم‌ها ───────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--teal-500);
  background: var(--teal-050);
  border-radius: var(--r-sm);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--teal-700); }
.woocommerce-error { border-top-color: #B3261E; background: #FDECEA; }
.woocommerce-error::before { color: #B3261E; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--teal-700); color: var(--white);
  border-radius: var(--r-sm); font-weight: 600;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--teal-900); color: var(--white); }

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--amber); }
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--amber-dk); }

/* ── ویجت‌ها ────────────────────────────────────────────── */
.widget { margin-bottom: 26px; }
.widget-title { font-size: 1rem; color: var(--teal-900); margin-bottom: 10px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.widget ul li a { color: var(--ink); text-decoration: none; }
.widget ul li a:hover { color: var(--teal-700); }

/* ── نوشته‌ها و برگه‌ها ─────────────────────────────────── */
.post-list { display: grid; gap: 18px; }
.post-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.post-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.post-card h3 a { color: var(--teal-900); text-decoration: none; }
.entry-content { max-width: 72ch; }
.entry-content p { margin-bottom: 1em; }
.entry-content h2, .entry-content h3 { margin: 1.4em 0 .5em; color: var(--teal-900); }
.entry-content a { color: var(--teal-700); }
.entry-content img { border-radius: var(--r-md); }

/* ── نوار مدیریت وردپرس هدر چسبان را جابه‌جا می‌کند ──────── */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ── واکنش‌گرایی ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products { grid-template-columns: 1fr !important; }
}