/* ==========================================================================
   Makhmal — shared WooCommerce skin: notices + the header cart badge.
   Loads on every WooCommerce page (shop, product, cart, checkout, account),
   because a notice can appear on any of them. WooCommerce's own notice look
   (grey bar, green top border, tiny tick) is neutralised here — it belongs
   to WC's default stylesheet, so a few !important flags are the honest cost
   of not switching that stylesheet off site-wide.
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
  display: none;
}

/* ---- Shell for WooCommerce pages (cart, checkout, my account) ----
   page.php renders these WITHOUT the blog article card; this is their frame.
   It lives here, not in makhmal-cart.css, because the account page loads this
   file but not that one. */
.mk-wc-page {
  padding-block: 22px 70px;
}

.mk-wc-page__title {
  margin: 0 0 22px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

/* ---- Page title ----
   WooCommerce pages render through the theme's own content part, whose title
   carries `dmhouse-entry__title` — a class with NO styling anywhere in the
   theme, which is why the heading sat flush against the header and the panel
   below it on every shop-side page. */
.woocommerce-page .dmhouse-entry__title,
.woocommerce-cart .dmhouse-entry__title,
.woocommerce-checkout .dmhouse-entry__title,
.woocommerce-account .dmhouse-entry__title,
.woocommerce-page .entry-title {
  margin: 20px 0 24px !important;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

/* every child is centred on the row explicitly: the message text is an
   anonymous flex item and was riding high against the badge and the button */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  align-content: center;
  min-height: 62px;
  gap: 10px 14px;
  margin: 0 0 22px !important;
  padding: 14px 18px !important;
  border-radius: var(--mk-radius-md) !important;
  border: 1px solid var(--mk-color-border) !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text) !important;
  font-size: var(--mk-fs-sm);
  line-height: 2;
  list-style: none !important;
}

/* WC draws its own tick/asterisk with ::before — replace it with a round
   badge instead of trying to reposition theirs */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: '' !important;
  position: static !important;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--mk-color-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  color: transparent !important;
  font-size: 0 !important;
}

.woocommerce-message {
  background: color-mix(in srgb, #2f9e6a 10%, #fff) !important;
  border-color: color-mix(in srgb, #2f9e6a 32%, #fff) !important;
}

.woocommerce-message::before {
  background-color: #2f9e6a;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
}

.woocommerce-info {
  background: color-mix(in srgb, var(--mk-color-primary) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--mk-color-primary) 28%, #fff) !important;
}

.woocommerce-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M12 11v6'/><path d='M12 7.5v.6'/></svg>");
}

.woocommerce-error {
  background: color-mix(in srgb, var(--mk-color-accent-2) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--mk-color-accent-2) 30%, #fff) !important;
}

.woocommerce-error::before {
  background-color: var(--mk-color-accent-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><path d='M7 7l10 10'/><path d='M17 7 7 17'/></svg>");
}

.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the "مشاهده سبد خرید" style link WooCommerce puts inside a notice */
/* ⚠ the label sat off-centre inside the pill: WooCommerce floats this button
   and gives it its own line-height, so the flex box needs BOTH axes centred
   and the inherited line-height neutralised. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  order: 3;
  margin-inline-start: auto;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* ⚠ measured: as a flex item it shrank to 38px and the label spilled out of
     the pill — that is the off-centre text in the screenshot */
  flex: 0 0 auto;
  white-space: nowrap;
  float: none !important;
  line-height: 1 !important;
  text-align: center;
  padding: 0 18px !important;
  border-radius: var(--mk-radius-pill) !important;
  background: var(--mk-color-surface) !important;
  border: 1px solid var(--mk-color-border) !important;
  color: var(--mk-color-primary-hover) !important;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  box-shadow: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: var(--mk-gradient-cta) !important;
  border-color: transparent !important;
  color: var(--mk-color-text-on-brand) !important;
}

@media (max-width: 560px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    align-items: flex-start;
  }

  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    width: 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
}

/* ==========================================================================
   Star rating — one skin for every place WooCommerce prints it: the loop
   card, the product summary, each review. It lives here because this file
   loads on ALL shop pages, while makhmal-product.css only loads on the
   single product page (that is why the archive cards had no styling).
   The glyphs come from WooCommerce's own "star" font; only the colours and
   the box are ours. No glow: it read badly on a light card.
   ========================================================================== */
.woocommerce .star-rating,
.woocommerce-page .star-rating,
#reviews .star-rating {
  display: inline-block;
  position: relative;
  width: 5.4em;
  height: 1.1em;
  margin: 0;
  overflow: hidden;
  float: none;
  font-size: 0.95rem;
  line-height: 1.1;
  direction: ltr;
  font-family: star;
}

.woocommerce .star-rating::before,
.woocommerce-page .star-rating::before,
#reviews .star-rating::before {
  content: '\73\73\73\73\73';
  position: absolute;
  left: 0;
  top: 0;
  color: color-mix(in srgb, var(--mk-color-border) 90%, #fff);
}

.woocommerce .star-rating span,
.woocommerce-page .star-rating span,
#reviews .star-rating span {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  padding-top: 1.2em;
}

.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before,
#reviews .star-rating span::before {
  content: '\53\53\53\53\53';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mk-pastel-lemon);
}

/* the "(N دیدگاه)" line WooCommerce prints beside the summary stars */
.woocommerce-product-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px !important;
  padding: 7px 14px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

.woocommerce-product-rating .woocommerce-review-link {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

/* ---- Header cart badge (count printed by inc/woocommerce.php) ---- */
.mk-nav__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 4px;
  padding: 0 6px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.mk-nav__cart-count.is-filled {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
}