/* assets/css/makhmal-shop.css — WooCommerce shop/category archive only (enqueued via inc/woocommerce.php on is_shop()/is_product_taxonomy()). */

/* ==========================================================================
   Hero — mirrors .mk-about-hero / .mk-contact-hero (own class prefix, own
   file, hand-kept in sync — see project memory for why this isn't a shared
   include). Markup is built by makhmal-shop.js at runtime, wrapping WC's
   breadcrumb + archive title (rendered as two bare siblings with nothing
   between them — there's no reliable PHP hook between them to wrap from
   the server side across WC versions).
   ========================================================================== */
.mk-shop-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(320px, 34vw, 420px);
  display: flex;
  align-items: center;
  padding-block: 90px 48px;
  overflow: hidden;
  margin-bottom: 56px;
  background: var(--mk-color-bg) url("../img/dog-5.jpg") center 35% / cover no-repeat;
}

.mk-shop-hero__media-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 25% 15%, color-mix(in srgb, var(--mk-blue-highlight) 45%, transparent) 0%, transparent 55%),
    linear-gradient(195deg, color-mix(in srgb, var(--mk-indigo) 60%, transparent) 0%, rgba(19, 15, 36, 0.72) 55%, rgba(15, 12, 28, 0.9) 100%);
}

.mk-shop-hero__deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.mk-shop-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
}

.mk-shop-hero__ring--1 { width: 300px; height: 300px; top: -100px; inset-inline-end: -70px; animation: mk-sh-spin 44s linear infinite; }
.mk-shop-hero__ring--2 { width: 190px; height: 190px; bottom: -70px; inset-inline-start: 4%; animation: mk-sh-spin 32s linear infinite reverse; }

@keyframes mk-sh-spin {
  to { transform: rotate(360deg); }
}

.mk-shop-hero .mk-container {
  position: relative;
  z-index: 1;
}

.mk-shop-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mk-shop-hero .woocommerce-breadcrumb {
  order: 1;
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--mk-fs-xs);
  color: rgba(255, 255, 255, 0.75);
}

.mk-shop-hero .woocommerce-breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
}

.mk-shop-hero .woocommerce-breadcrumb a:hover {
  color: #fff;
}

.mk-shop-hero .woocommerce-products-header {
  order: 2;
}

.mk-shop-hero .woocommerce-products-header__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 6px 26px rgba(15, 12, 28, 0.4);
}

@media (max-width: 700px) {
  .mk-shop-hero {
    min-height: 260px;
    padding-block: 70px 40px;
  }

  .mk-shop-hero__ring--1,
  .mk-shop-hero__ring--2 {
    display: none;
  }
}

/* ==========================================================================
   Toolbar — result count + sort dropdown, overriding WC's own bare
   defaults with the theme's surface/pill language.
   ========================================================================== */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.dmhouse-woocommerce-content > form.woocommerce-ordering,
.dmhouse-woocommerce-content > p.woocommerce-result-count {
  display: inline-flex;
}

/* WC prints result-count then ordering-form as two independent siblings;
   floating them onto one row is more robust than depending on their exact
   markup order (a plugin can reorder these two via priority). */
.dmhouse-woocommerce-content {
  position: relative;
}

.woocommerce-result-count {
  display: inline-flex;
  align-items: center;
  margin: 0 0 24px;
  padding: 9px 16px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-sm);
}

.woocommerce-ordering {
  display: inline-flex;
  margin: 0 0 24px;
  float: inline-end;
}

.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  min-width: 220px;
  padding: 10px 16px;
  padding-inline-end: 38px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background-color: var(--mk-color-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235B5578' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  box-shadow: var(--mk-shadow-sm);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--mk-blue-highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-blue-highlight) 25%, transparent);
}

@media (max-width: 600px) {
  .woocommerce-ordering {
    float: none;
    width: 100%;
  }

  .woocommerce-ordering select.orderby {
    width: 100%;
  }
}

/* ==========================================================================
   Product cards — same visual language as the front page's "انتخاب‌های
   محبوبِ شما" cards (.mk-pcard): bordered surface, square photo, floating
   tag/expiry chip, clamped title, price with strike-through on sale, and
   the icon-only add-to-cart pill that expands to a labelled button on
   hover. WooCommerce's own class names are targeted directly since this
   stylesheet only ever loads on the shop/category archive.
   ========================================================================== */
.woocommerce ul.products li.product.type-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  text-align: start;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  transition: background var(--mk-transition), box-shadow var(--mk-transition),
              border-color var(--mk-transition), transform var(--mk-transition);
}

.woocommerce ul.products li.product.type-product:hover {
  background: var(--mk-tint-lilac);
  border-color: var(--mk-blue-highlight);
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: start;
  color: inherit;
}

.woocommerce ul.products li.product .mk-shop-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

.woocommerce ul.products li.product .mk-shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
  border-radius: 0;
  transition: transform 0.45s ease;
}

.woocommerce ul.products li.product.type-product:hover .mk-shop-card__media img {
  transform: scale(1.06);
}

.woocommerce ul.products li.product .mk-shop-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
}

.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  inset-inline-end: auto;
  z-index: 2;
  margin: 0;
  padding: 5px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.6;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-accent-2);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce ul.products li.product .mk-wc-card-expiry {
  align-self: flex-start;
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  box-shadow: none;
}

.woocommerce ul.products li.product .mk-wc-card-expiry svg {
  width: 13px;
  height: 13px;
  color: var(--mk-color-primary-hover);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.8em);
  margin: 0;
  padding: 0 !important;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

.woocommerce ul.products li.product .mk-shop-card__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.woocommerce ul.products li.product .price {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

.woocommerce ul.products li.product .price del {
  order: 2;
  flex-basis: 100%;
  font-family: var(--mk-font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-Price-currencySymbol {
  font-family: var(--mk-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
}

/* add-to-cart / "انتخاب گزینه‌ها": the front page's icon-only pill that
   expands to reveal its label on card hover (.mk-pcard__add). The label is
   wrapped and the cart icon injected by makhmal-shop.js, since WC ships the
   button as a bare text link. */
.woocommerce ul.products li.product .button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 36px;
  margin: 0;
  padding-block: 0;
  padding-inline: 9px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
  transition: background var(--mk-transition), color var(--mk-transition),
              gap var(--mk-transition), padding-inline var(--mk-transition);
}

.woocommerce ul.products li.product .button svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.woocommerce ul.products li.product .mk-shop-card__add-label {
  display: block;
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--mk-transition);
}

.woocommerce ul.products li.product.type-product:hover .button,
.woocommerce ul.products li.product.type-product:focus-within .button {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  gap: 6px;
  padding-inline: 14px 12px;
}

.woocommerce ul.products li.product.type-product:hover .mk-shop-card__add-label,
.woocommerce ul.products li.product.type-product:focus-within .mk-shop-card__add-label {
  max-width: 8rem;
}

.woocommerce ul.products li.product .button.loading {
  opacity: 0.6;
}

/* WC appends a "مشاهده سبد خرید" link after a successful AJAX add — it is
   not part of the card design and would break the foot row. */
.woocommerce ul.products li.product .added_to_cart {
  display: none;
}

/* ==========================================================================
   General spacing / responsive polish
   ========================================================================== */
.dmhouse-woocommerce-content {
  padding-bottom: 60px;
}

@media (max-width: 900px) {
  .woocommerce ul.products li.product.type-product {
    padding: 11px;
  }
}