/* 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;
}

/* ⚠ Rank Math wraps its trail in a <p>, and makhmal-base.css colours EVERY
   <p> with the body text colour — a matching rule beats the white this
   container merely passes down by inheritance, which is why the last crumb
   went dark grey on the photo. Every inner element is coloured explicitly. */
.mk-shop-hero .woocommerce-breadcrumb,
.mk-shop-hero .woocommerce-breadcrumb p,
.mk-shop-hero .woocommerce-breadcrumb span,
.mk-shop-hero .woocommerce-breadcrumb .last {
  order: 1;
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--mk-fs-xs);
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(15, 12, 28, 0.45);
}

.mk-shop-hero .woocommerce-breadcrumb a {
  color: #fff;
  font-weight: 700;
}

.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;
}

/* ⚠ the product photos are mostly white, so a white badge with coloured text
   disappeared into them. Solid brand fill + white text + its own shadow is
   what actually reads on a light image. */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  inset-inline-end: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 14px;
  min-height: 0;
  min-width: 0;
  line-height: 1.5;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-accent-2);
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-color-accent-2) 40%, transparent);
}

/* the percentage badge (built in inc/woocommerce.php): the number leads, the
   word follows at a smaller size */
.mk-wc-sale__num {
  font-family: var(--mk-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.mk-wc-sale__label {
  font-size: 0.66rem;
  font-weight: 400;
  opacity: 0.9;
}

/* ---- Average rating, moved under the title by makhmal-shop.js ---- */
.woocommerce ul.products li.product .mk-shop-card__rating,
.woocommerce ul.products li.product .star-rating {
  display: block;
  margin: 2px 0 0 !important;
  font-size: 0.88rem;
}

.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);
}

/* the title used to be --mk-fs-xl here while the price and the add button
   kept the front page's sizes — that mismatch is what made the card read as
   oversized. It now matches .mk-pcard__title exactly. */
.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-sm);
  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;
}

/* ⚠ same guards as the homepage card (.mk-pcard__foot/__price): on hover the
   add pill unfurls its label, and with no ceiling it squeezed the price until
   «شروع از:» and the number broke onto extra lines — the card grew taller on
   every hover. The price gives way (clipped), the number never wraps. */
.woocommerce ul.products li.product .mk-shop-card__foot {
  min-width: 0;
}

.woocommerce ul.products li.product .price {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  white-space: nowrap;
}

.woocommerce ul.products li.product .button {
  max-width: 100%;
  overflow: hidden;
}

.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;
}

/* "شروع از:" — a variable product's cheapest variant (rebuilt in
   inc/woocommerce.php), unified 2026-09-29 with the homepage card's own
   .mk-product__from / .mk-pcard__from so every card in the theme shows the
   same "starting from" shape instead of a min–max range. flex-basis:100%
   puts it on its own line above the number, inside .price's flex-wrap. */
.mk-shop-card__from {
  flex: 1 0 100%;
  font-family: var(--mk-font-body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
}

.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;
}

/* ==========================================================================
   Grid density — the parent theme's style.css lays this grid out at 3 / 2 / 1
   columns for the whole site; the archive is overridden here (and only here)
   to 4 columns, which is what actually shrinks each card, and never drops
   below 2 on a phone.
   ========================================================================== */
.dmhouse-woocommerce-content ul.products,
.woocommerce ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1200px) {
  .dmhouse-woocommerce-content ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dmhouse-woocommerce-content ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .woocommerce ul.products li.product.type-product {
    padding: 11px;
  }
}

/* two per row on a phone as well — the parent stylesheet's single column at
   this width is what made the archive read as a stack of posters */
@media (max-width: 560px) {
  .dmhouse-woocommerce-content ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .woocommerce ul.products li.product.type-product {
    padding: 9px;
    gap: 8px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--mk-fs-xs);
  }

  /* A variable product prints a RANGE ("۸۰۰٬۰۰۰ تومان – ۱٬۶۰۰٬۰۰۰ تومان") as
     one text run. In the narrow stacked foot it broke wherever it happened
     to fit, orphaning the dash at the end of the first line. Centred, balanced
     wrapping splits it evenly instead, and the column direction keeps a
     sale's old price on its own line under the new one. */
  /* start-aligned like the rest of the card (NOT centred) — the range now
     wraps cleanly on its own because each half is one nowrap unit */
  .woocommerce ul.products li.product .price {
    justify-content: flex-start;
    gap: 2px 4px;
    font-size: var(--mk-fs-sm);
    text-align: start;
  }


  /* no hover on touch: the add button shows its label permanently, so the
     foot has to stack instead of squeezing two pills onto one narrow row */
  .woocommerce ul.products li.product .mk-shop-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .woocommerce ul.products li.product .button {
    justify-content: center;
  }
}

/* ==========================================================================
   Pagination — WooCommerce ships it as a bare <ul> right under the grid with
   no spacing of its own, which is why it looked glued to the last row.
   ========================================================================== */
.woocommerce nav.woocommerce-pagination {
  margin: 38px 0 6px;
  padding-top: 26px;
  border-top: 1px solid var(--mk-color-border);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
  padding: 0;
  border: none;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-text-soft);
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  line-height: 1;
  transition: background var(--mk-transition), color var(--mk-transition),
              border-color var(--mk-transition), transform var(--mk-transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--mk-blue-highlight);
  color: var(--mk-color-primary-hover);
  transform: translateY(-2px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mk-gradient-cta);
  border-color: transparent;
  color: var(--mk-color-text-on-brand);
  box-shadow: var(--mk-shadow-md);
}

/* prev/next read as words in Persian, so they get room instead of a square */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  padding: 0 16px;
  background: var(--mk-color-bg-soft);
}

.woocommerce nav.woocommerce-pagination ul li span.dots {
  border-color: transparent;
  background: none;
}

@media (max-width: 560px) {
  .woocommerce nav.woocommerce-pagination {
    margin-top: 28px;
    padding-top: 20px;
  }

  .woocommerce nav.woocommerce-pagination ul {
    gap: 6px;
  }

  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: var(--mk-fs-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce nav.woocommerce-pagination ul li a:hover {
    transform: none;
  }
}

/* ==========================================================================
   Category clusters (server-rendered in inc/woocommerce.php) — one round
   thumbnail per sub-category, swipeable, with arrows and page dots that
   makhmal-shop.js adds only when the row actually overflows.
   ========================================================================== */
.mk-cats {
  position: relative;
  margin: 0 0 26px;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--mk-color-border);
}

/* ⚠ `overflow-x: auto` makes this a scroll container on BOTH axes, so the
   hover lift was being clipped at the top edge. The vertical padding is the
   room that lift needs — the scrollport has to contain it, no ancestor can
   let it escape. */
.mk-cats__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 10px 44px 6px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mk-cats__track::-webkit-scrollbar {
  display: none;
}

.mk-cats__item {
  flex: 0 0 auto;
  width: 108px;
  scroll-snap-align: start;
}

.mk-cats__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--mk-color-text-soft);
  text-align: center;
}

.mk-cats__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mk-color-bg-soft);
  border: 2px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  transition: border-color var(--mk-transition), transform var(--mk-transition),
              box-shadow var(--mk-transition);
}

.mk-cats__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mk-cats__fallback {
  width: 30px;
  height: 30px;
  color: var(--mk-color-primary);
}

.mk-cats__link:hover .mk-cats__media,
.mk-cats__link:focus-visible .mk-cats__media {
  border-color: var(--mk-blue-highlight);
  transform: translateY(-3px);
  box-shadow: var(--mk-shadow-md);
}

.mk-cats__name {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

.mk-cats__link:hover .mk-cats__name {
  color: var(--mk-color-primary-hover);
}

/* arrows: hidden until the script proves the row overflows */
/* vertically centred on the thumbnails: own padding (10) + track padding (10)
   + half the 84px circle − half the 34px button */
.mk-cats__nav {
  position: absolute;
  top: 45px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--mk-color-border);
  border-radius: 50%;
  background: var(--mk-color-surface);
  color: var(--mk-color-primary-hover);
  box-shadow: var(--mk-shadow-sm);
  transition: background var(--mk-transition), color var(--mk-transition),
              opacity var(--mk-transition);
}

.mk-cats.is-scrollable .mk-cats__nav {
  display: flex;
}

.mk-cats__nav:hover {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
}

.mk-cats__nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mk-cats__nav svg {
  width: 15px;
  height: 15px;
}

.mk-cats__nav--prev {
  inset-inline-start: 2px;
}

/* the sprite arrow points to the inline start; the "next" control needs the
   mirror image of it */
.mk-cats__nav--next {
  inset-inline-end: 2px;
}

.mk-cats__nav--next svg {
  transform: scaleX(-1);
}

.mk-cats__dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.mk-cats.is-scrollable .mk-cats__dots {
  display: flex;
}

.mk-cats__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--mk-color-border);
  transition: background var(--mk-transition), width var(--mk-transition);
}

.mk-cats__dot.is-active {
  width: 18px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
}

@media (max-width: 700px) {
  .mk-cats {
    margin-bottom: 20px;
    padding-top: 14px;
  }

  /* arrows are a desktop affordance; on touch the row is swiped */
  .mk-cats.is-scrollable .mk-cats__nav {
    display: none;
  }

  .mk-cats__track {
    padding: 8px 0 6px;
    gap: 10px;
  }

  .mk-cats__item {
    width: 82px;
  }

  .mk-cats__media {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-cats__track {
    scroll-behavior: auto;
  }

  .mk-cats__link:hover .mk-cats__media {
    transform: none;
  }
}

/* ==========================================================================
   Archive copy box — the category / brand / shop description, printed under
   the pagination by dmhouse_theme_archive_copy_box(). The merchant writes it
   in the editor, so EVERY shape the editor can produce is styled here:
   headings, lists, links, quotes, marks, tables, media. The heading sits
   OUTSIDE the scroll area so it stays put while the text scrolls (same
   arrangement as the product page's SEO box).
   ========================================================================== */
.mk-term-copy {
  margin-block: 56px 8px;
  padding: 26px 26px 22px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-sm);
}

.mk-term-copy__title {
  margin: 0 0 16px;
  padding-inline-start: 14px;
  position: relative;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-term-copy__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  translate: 0 -50%;
  width: 5px;
  height: 22px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
}

.mk-term-copy__inner {
  max-height: 320px;
  overflow-y: auto;
  padding-inline-end: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--mk-blue-highlight) transparent;
}

.mk-term-copy__inner::-webkit-scrollbar {
  width: 7px;
}

.mk-term-copy__inner::-webkit-scrollbar-track {
  background: transparent;
}

.mk-term-copy__inner::-webkit-scrollbar-thumb {
  background: var(--mk-blue-highlight);
  border-radius: var(--mk-radius-pill);
}

.mk-term-copy__inner::-webkit-scrollbar-thumb:hover {
  background: var(--mk-color-primary);
}

.mk-term-copy__inner > :first-child {
  margin-top: 0;
}

.mk-term-copy__inner > :last-child {
  margin-bottom: 0;
}

.mk-term-copy__inner p {
  margin: 0 0 14px;
  font-size: var(--mk-fs-sm);
  line-height: 2.1;
  color: var(--mk-color-text-soft);
}

.mk-term-copy__inner h1,
.mk-term-copy__inner h2,
.mk-term-copy__inner h3,
.mk-term-copy__inner h4,
.mk-term-copy__inner h5,
.mk-term-copy__inner h6 {
  margin: 22px 0 10px;
  font-family: var(--mk-font-heading);
  font-weight: 700;
  line-height: 1.9;
  color: var(--mk-color-text);
}

.mk-term-copy__inner h2 {
  font-size: var(--mk-fs-lg);
}

.mk-term-copy__inner h3 {
  font-size: var(--mk-fs-base);
}

.mk-term-copy__inner h4,
.mk-term-copy__inner h5,
.mk-term-copy__inner h6 {
  font-size: var(--mk-fs-sm);
}

.mk-term-copy__inner a {
  color: var(--mk-color-primary-hover);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mk-term-copy__inner a:hover {
  color: var(--mk-color-primary);
}

.mk-term-copy__inner strong,
.mk-term-copy__inner b {
  color: var(--mk-color-text);
  font-weight: 700;
}

.mk-term-copy__inner mark {
  padding: 1px 6px;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
}

.mk-term-copy__inner ul,
.mk-term-copy__inner ol {
  margin: 0 0 14px;
  padding-inline-start: 22px;
  font-size: var(--mk-fs-sm);
  line-height: 2.1;
  color: var(--mk-color-text-soft);
}

.mk-term-copy__inner li {
  margin-bottom: 6px;
}

.mk-term-copy__inner ul {
  list-style: none;
  padding-inline-start: 4px;
}

.mk-term-copy__inner ul li {
  position: relative;
  padding-inline-start: 20px;
}

/* the bullet is a brand dot rather than the browser's disc */
.mk-term-copy__inner ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-color-primary);
}

.mk-term-copy__inner blockquote {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-inline-start: 4px solid var(--mk-color-primary);
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
}

.mk-term-copy__inner blockquote p:last-child {
  margin-bottom: 0;
}

.mk-term-copy__inner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--mk-radius-md);
}

/* ---- Tables the merchant writes in an editor: product description (show
   more), product SEO box, archive copy box. This file loads on all of those
   pages. display:table undoes style.css's table{display:block}, which makes
   the rows shrink-wrap inside a full-width box. The mk-ct-* classes are added
   by makhmal-shop.js; without JS the table still fits, just tighter. ---- */
:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 18px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-color-surface);
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) :is(th, td) {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--mk-color-border);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
  color: var(--mk-color-text-soft);
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) :is(th, td):not(:last-child) {
  border-inline-end: 1px solid var(--mk-color-border);
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) tr:last-child > :is(th, td) {
  border-bottom: 0;
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) th {
  font-weight: 700;
  color: var(--mk-color-text);
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) :is(thead :is(th, td), .mk-ct-head > :is(th, td)) {
  background: var(--mk-color-bg-muted);
  font-weight: 700;
  color: var(--mk-color-text);
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) tbody tr:nth-child(even):not(.mk-ct-head) > :is(th, td) {
  background: color-mix(in srgb, var(--mk-color-bg-soft) 60%, #fff);
}

:is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) :is(th, td) p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

@media (max-width: 600px) {
  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) :is(th, td) {
    padding: 9px 10px;
    font-size: var(--mk-fs-xs);
  }

  /* each row becomes its own card; the column name rides above the value */
  table.mk-ct-stack,
  table.mk-ct-stack tbody,
  table.mk-ct-stack tr,
  table.mk-ct-stack :is(th, td) {
    display: block;
    width: 100%;
  }

  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table.mk-ct-stack {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  table.mk-ct-stack :is(thead, .mk-ct-head) {
    display: none;
  }

  table.mk-ct-stack tr {
    margin-bottom: 10px;
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-color-surface);
    overflow: hidden;
  }

  table.mk-ct-stack tr:last-child {
    margin-bottom: 0;
  }

  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table.mk-ct-stack tr > :is(th, td) {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--mk-color-border);
    background: none;
    font-size: var(--mk-fs-sm);
  }

  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table.mk-ct-stack tr > :is(th, td):last-child {
    border-bottom: 0;
  }

  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table.mk-ct-stack tr > :is(th, td):first-child {
    background: var(--mk-color-bg-muted);
    font-weight: 700;
    color: var(--mk-color-text);
  }

  table.mk-ct-stack tr > :is(th, td):empty {
    display: none;
  }

  table.mk-ct-stack [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--mk-fs-xs);
    font-weight: 700;
    color: var(--mk-color-text);
  }

  /* merged cells cannot become cards: this table scrolls sideways instead */
  :is(.mk-wc-desc__clamp, .mk-wc-seo, .mk-term-copy__inner) table.mk-ct-scroll {
    display: block;
    overflow-x: auto;
  }

  table.mk-ct-scroll :is(th, td) {
    min-width: 110px;
    overflow-wrap: normal;
  }
}

.mk-term-copy__inner hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px dashed var(--mk-color-border);
}

@media (max-width: 600px) {
  .mk-term-copy {
    margin-block: 40px 4px;
    padding: 20px 18px 18px;
  }

  .mk-term-copy__inner {
    max-height: 260px;
  }
}