/* assets/css/makhmal-product.css — WooCommerce single-product page only (enqueued via inc/woocommerce.php on is_product()). */

/* ---- Breadcrumb ----
   ⚠ MEASURED: WooCommerce ships its own default
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme))
   .woocommerce-breadcrumb { font-size:.75em; color:#767676; }`. The
   `:where()` part contributes ZERO specificity, but `.woocommerce` +
   `.woocommerce-breadcrumb` still adds up to TWO classes — more specific
   than this file's plain one-class `.woocommerce-breadcrumb`, so WC's rule
   was winning outright (not merely a load-order tie like the other spots in
   this file) and silently overriding both the font-size and the colour here.
   `!important` is the fix already used elsewhere in this file for exactly
   this shape of WooCommerce collision. */
.woocommerce-breadcrumb {
  display: block;
  margin: 0 0 26px;
  padding-block: 10px 20px;
  border-bottom: 1px solid var(--mk-color-border);
  line-height: 2.1;
  font-size: 0.8125rem !important; /* a size down from --mk-fs-sm (0.875rem) */
  color: var(--mk-color-text-muted) !important;
  /* single line always — a long trail truncates with "…" instead of
     wrapping onto a second line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .woocommerce-breadcrumb {
    font-size: 0.75em !important;
  }
}

/* Rank Math nests its crumbs in a <p>, which the base stylesheet colours on
   its own — restate the muted colour on the inner elements so the trail
   looks identical whichever plugin renders it. Nowrap/ellipsis is restated
   here too: if the crumbs are wrapped in this inner <p>, the OUTER element's
   overflow:hidden clips it either way, but text-overflow only draws the "…"
   on the element that is itself doing the single-line clipping. */
.woocommerce-breadcrumb p,
.woocommerce-breadcrumb .last {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mk-color-text-muted) !important;
}

.woocommerce-breadcrumb a {
  color: var(--mk-color-text-soft);
}

.woocommerce-breadcrumb a:hover { color: var(--mk-color-primary-hover); }

.mk-wc-breadcrumb-current {
  color: var(--mk-color-text);
  font-weight: 700;
}

/* the wrapper this sits in has no top padding of its own — give the
   breadcrumb some room instead of touching the header directly */
.dmhouse-woocommerce-content {
  padding-top: 18px;
}

/* ---- Overall layout: gallery | summary, side by side on desktop ---- */
.woocommerce div.product.type-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-block: 24px 60px;
}

/* WooCommerce's own (float-era) layout stylesheet sets width:48% on both of
   these for its own 2-column trick — that's a real percentage, not just
   specificity noise, so it survives alongside my grid-column assignment and
   shrinks each column to 48% of ITS OWN already-halved grid track (roughly
   a quarter of the page). Forcing width:100% here is what actually fixes it. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100%;
  min-width: 0;
  float: none;
}

/* EVERY direct child spans the full row by default; only the two real
   columns opt back into a single track below. div.product also contains the
   tabs, related/upsell blocks and anything a plugin injects — all siblings
   of images/summary — and the 2-column grid was auto-placing them into its
   tracks, which is what dropped "related products" beside (and overlapping)
   the sticky summary. Defaulting to full-width means any future sibling is
   correct without being named here. */
.woocommerce div.product.type-product > * {
  grid-column: 1 / -1;
}

.woocommerce div.product div.images { grid-column: 1; }

.woocommerce div.product div.summary {
  grid-column: 2;
}

@media (max-width: 900px) {
  .woocommerce div.product.type-product {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    grid-column: 1;
  }
}

/* ---- Mobile-only spacing tightening (requested) — nothing here touches
   desktop; each closes a specific gap that only reads as excessive once the
   layout is a single stacked column. ---- */
@media (max-width: 900px) {
  .woocommerce div.product.type-product {
    gap: 0;
    padding-top: 0;
  }

  .woocommerce div.product div.images {
    margin-bottom: 0;
  }

  .woocommerce div.product div.summary {
    margin-bottom: 0;
  }

  /* same !important this rule already needed on all viewports (WooCommerce's
     own .panel class ties it in specificity) — the mobile value just wins by
     coming later in the cascade at this width. */
  .woocommerce-Tabs-panel {
    padding-top: 0 !important;
  }

  .mk-wc-block-title.mk-wc-block-title--h2 {
    margin-top: 0 !important;
  }
}

/* ---- Gallery: own sizing rules, deliberately NOT relying on WooCommerce's
   optional "default stylesheet" (Settings → Products → can be switched off
   site-wide) — if that's off, the raw gallery markup has no size constraint
   at all and renders at native image resolution, which is exactly what a
   huge unstyled photo bleeding over the header looks like. ---- */
.woocommerce div.product div.images {
  position: relative;
  max-width: 100%;
}

.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--mk-radius-lg);
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 74px;
  height: 74px;
  margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mk-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--mk-transition);
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  border-color: var(--mk-color-primary);
}

/* the zoom-in cursor / lightbox trigger WC adds via wc-product-gallery-zoom
   theme support only fires once PhotoSwipe's own CSS is present — this
   keeps the trigger visible/clickable even if that CSS is delayed/missing */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 5;
  top: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--mk-shadow-sm);
}

/* ---- Title / price ---- */
.product_title {
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 10px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--mk-color-primary-hover);
  font-family: var(--mk-font-heading);
  font-weight: 700;
  font-size: var(--mk-fs-xl);
}

.woocommerce div.product p.price del { color: var(--mk-color-text-muted); opacity: 0.8; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* ---- Badges row (ready-to-ship + expiry), single product ---- */
.mk-wc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 10px;
}

.mk-wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.mk-wc-badge svg { width: 14px; height: 14px; }

.mk-wc-badge--ready {
  background: color-mix(in srgb, #2f9e6a 14%, #fff);
  color: #2f9e6a;
}

.mk-wc-badge--expiry {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
}

/* ---- Same expiry badge, on the shop-loop card ---- */
.mk-wc-card-expiry {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-primary-hover);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

.mk-wc-card-expiry svg { width: 12px; height: 12px; }

/* ---- Feature list ---- */
.mk-wc-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.mk-wc-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
}

.mk-wc-features li svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: #2f9e6a;
}

/* ---- Stock quantity ---- */
.mk-wc-stock-qty {
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
  margin-block: 6px;
}

/* ---- Brand line (replaces the old category line under the price) ---- */
.mk-wc-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 5px 12px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-soft);
}

.mk-wc-brand strong {
  color: var(--mk-color-primary-hover);
  font-weight: 700;
}

.mk-wc-brand svg {
  width: 14px;
  height: 14px;
  color: var(--mk-color-primary);
}

/* ---- Short description (the merchant's own bullet list from the editor)
   The list arrives with inline font-weight attributes baked in by the block
   editor, which is content we don't control — the rules below deliberately
   don't fight them; they only replace the bullet with a paw-tinted check
   marker drawn as a pseudo-element, so nothing depends on that markup. ---- */
.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb, var(--mk-color-primary) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--mk-color-primary) 16%, #fff);
}

.woocommerce div.product .woocommerce-product-details__short-description ul,
.woocommerce div.product .woocommerce-product-details__short-description ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product .woocommerce-product-details__short-description li {
  position: relative;
  padding-inline-start: 26px;
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
}

.woocommerce div.product .woocommerce-product-details__short-description li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mk-color-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path d='M1 4.2L3.6 6.8L9 1.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
}

/* a paragraph-only short description (no list) still gets readable spacing */
.woocommerce div.product .woocommerce-product-details__short-description p {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.woocommerce div.product .woocommerce-product-details__short-description p + p {
  margin-top: 10px;
}


/* ---- Shipping info ---- */
.mk-wc-shipping {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

.mk-wc-shipping__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 10px;
}

.mk-wc-shipping__head svg { width: 16px; height: 16px; color: var(--mk-color-primary); }

.mk-wc-shipping__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-wc-shipping__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--mk-fs-sm);
}

.mk-wc-shipping__list li span:first-child {
  color: var(--mk-color-text-muted);
}

.mk-wc-shipping__list li span:last-child {
  color: var(--mk-color-text);
  font-weight: 700;
  text-align: end;
}

/* ---- Return policy ---- */
.mk-wc-return {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 24px;
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

.mk-wc-return svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--mk-color-accent-2); }

/* ==========================================================================
   Promise band — the old trust boxes, rebuilt full width between the product
   grid and the tabs. The six items sit on ONE dashed trail: the trail is a
   pseudo-element on the list (no extra DOM), and each medallion covers it
   with an opaque disc so the dashes read as a path running behind them.
   Each item carries its own accent through --mk-promise-c, set per position,
   so the icons stay playful without six copies of the same rule.
   ========================================================================== */
.mk-wc-promise {
  position: relative;
  margin-top: 6px;
  /* the tabs strip starts hard against this band, so the gap below has to be
     visibly larger than the one above or the band reads as belonging to the
     tabs rather than to the product */
  margin-bottom: 46px;
  padding: 28px 26px 30px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  overflow: hidden;
}

.mk-wc-promise__paw {
  position: absolute;
  top: -18px;
  inset-inline-start: -14px;
  width: 120px;
  height: 120px;
  color: var(--mk-color-primary);
  opacity: 0.07;
  pointer-events: none;
}

.mk-wc-promise__paw svg {
  width: 100%;
  height: 100%;
}

.mk-wc-promise__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  text-align: center;
}

.mk-wc-promise__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.mk-wc-promise__kicker svg {
  width: 14px;
  height: 14px;
  color: var(--mk-color-accent-2);
}

.mk-wc-promise__title {
  margin: 0;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-wc-promise__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the trail itself — drawn level with the middle of the medallions */
.mk-wc-promise__list::before {
  content: '';
  position: absolute;
  top: 30px;
  inset-inline: 9%;
  border-top: 2px dashed color-mix(in srgb, var(--mk-color-primary) 35%, #fff);
  pointer-events: none;
}

.mk-wc-promise__item {
  --mk-promise-c: var(--mk-color-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mk-wc-promise__item--1 { --mk-promise-c: var(--mk-blue); }
.mk-wc-promise__item--2 { --mk-promise-c: var(--mk-pastel-sky); }
.mk-wc-promise__item--3 { --mk-promise-c: var(--mk-pastel-mint); }
.mk-wc-promise__item--4 { --mk-promise-c: var(--mk-purple); }
.mk-wc-promise__item--5 { --mk-promise-c: var(--mk-pastel-rose); }
.mk-wc-promise__item--6 { --mk-promise-c: var(--mk-pastel-lemon); }

.mk-wc-promise__medal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mk-color-surface);
  border: 2px solid color-mix(in srgb, var(--mk-promise-c) 35%, #fff);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-promise-c) 22%, transparent);
  color: var(--mk-promise-c);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition),
              border-color var(--mk-transition);
}

.mk-wc-promise__medal svg {
  width: 24px;
  height: 24px;
}

.mk-wc-promise__item:hover .mk-wc-promise__medal {
  transform: translateY(-4px) rotate(-6deg);
  border-color: var(--mk-promise-c);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--mk-promise-c) 32%, transparent);
}

.mk-wc-promise__label {
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-wc-promise__desc {
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
  max-width: 20ch;
}

@media (prefers-reduced-motion: reduce) {
  .mk-wc-promise__item:hover .mk-wc-promise__medal {
    transform: none;
  }
}

@media (max-width: 900px) {
  .mk-wc-promise__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 10px;
  }

  /* the trail only makes sense as one unbroken row */
  .mk-wc-promise__list::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .mk-wc-promise {
    padding: 22px 16px 24px;
  }

  .mk-wc-promise__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-wc-promise__medal {
    width: 52px;
    height: 52px;
  }

  .mk-wc-promise__medal svg {
    width: 21px;
    height: 21px;
  }
}

/* ---- Spec table (description tab) ---- */
/* display:table + table-layout:fixed for the same reason as the attributes
   table below — see the long note there; the parent theme resets all
   tables to display:block, which silently breaks column widths. */
.mk-wc-spec-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 26px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--mk-radius-lg);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.mk-wc-spec-table tr:not(:last-child) th,
.mk-wc-spec-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border);
}

.mk-wc-spec-table tr:nth-child(even) th,
.mk-wc-spec-table tr:nth-child(even) td {
  background: var(--mk-color-bg-soft);
}

.mk-wc-spec-table th,
.mk-wc-spec-table td {
  padding: 13px 18px;
  font-size: var(--mk-fs-sm);
  text-align: start;
  transition: background var(--mk-transition);
}

.mk-wc-spec-table th {
  width: 34%;
  background: var(--mk-tint-lilac);
  color: var(--mk-color-primary-hover);
  font-weight: 700;
}

.mk-wc-spec-table td {
  color: var(--mk-color-text-soft);
}

.mk-wc-spec-table tr:hover th,
.mk-wc-spec-table tr:hover td {
  background: var(--mk-color-bg-muted);
}

/* ---- Tabs — minimal underline style (requested redesign, replaces the old
   pill/"paper folder" look) ----
   WooCommerce's own stylesheet draws its classic "paper folder" tab look on
   these same <li>/<a> elements using ::before/::after (rounded corner
   cutouts + its own background/border). Since that's a different plugin's
   CSS, not ours, neutralising it with !important is the pragmatic fix —
   fighting it with pure specificity would mean guessing WC's exact
   selectors, which changes between WC versions. */
.woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0 !important;
  margin: 0 0 24px !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--mk-color-border) !important;
}

/* On a phone the tabs form ONE swipeable row instead of stacking into
   several. No reserved padding at either end (an earlier version had it and
   left a visible empty gap at the start) — the overlap with the floating
   back-to-top button is settled purely by stacking order, see .mk-totop
   z-index in makhmal-footer.css. */
.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::before,
.woocommerce-tabs ul.tabs li a::after {
  display: none !important;
  content: none !important;
}

/* plain text + a bottom border that is transparent until active — no pill,
   no background, matching the flat/underline reference the owner asked for */
.woocommerce-tabs ul.tabs li a {
  display: inline-flex !important;
  align-items: center;
  padding: 13px 1px !important;
  margin: 0 0 -1px !important;
  border-radius: 0 !important;
  background: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--mk-color-text-soft) !important;
  font-size: var(--mk-fs-sm) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: color var(--mk-transition), border-color var(--mk-transition);
}

.woocommerce-tabs ul.tabs li a:hover {
  color: var(--mk-color-text) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  background: none !important;
  color: var(--mk-color-text) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--mk-color-text) !important;
}

/* ---- Phone: ONE swipeable row of tabs ----
   ⚠ Two traps, both hit for real. (1) WooCommerce's own stylesheet declares
   `overflow: hidden` on this exact selector for its classic folder-tab look;
   without !important that shorthand beats a plain `overflow-x: auto`, so the
   row refuses to scroll AND every tab past the edge (the reviews one) is
   clipped away — it looks deleted rather than off-screen. (2) This block must
   stay BELOW the pill rules above: they carry !important at the same
   specificity, so an identical declaration placed earlier silently loses. */
@media (max-width: 700px) {
  .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap !important;
    gap: 18px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* no fade mask here: it blurred the tab labels themselves. The cue that
       there is more is the tab left half-visible at the edge. */
  }

  .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto !important;
  }

  .woocommerce-tabs ul.tabs li a {
    padding: 12px 1px !important;
    font-size: var(--mk-fs-xs) !important;
    white-space: nowrap;
  }
}

/* the active tab's underline sits flush against the border-bottom above; give
   the whole panel breathing room so nothing collides with it.
   ⚠ MEASURED live: this panel also carries WooCommerce's own `.panel` class,
   and WC's core stylesheet has `.woocommerce-tabs .panel{padding:0}` at the
   exact same specificity (two classes) as this selector — whichever loads
   LAST wins a tie, and that turned out to be WC's, computing to padding-top:
   0 regardless of what this rule said. Same trap the tab-nav rules above
   already document; same fix. */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding-top: 22px !important;
}

/* ==========================================================================
   Tabs as anchor-nav, not a show/hide switch (requested redesign): every
   panel stays in the document, one under the other, in the order
   dmhouse_theme_rebuild_product_tabs() registers them — بررسی تخصصی /
   مشخصات / نظرات مشتریان / توضیحات. `!important` because WooCommerce's own
   frontend script still calls jQuery .hide()/.show() on these panels on tab
   click and on page load; this simply keeps every one of them visible
   regardless. The tab bar itself is unchanged — WC already prints real
   `href="#tab-…"` anchors — makhmal-product.js only takes over the CLICK
   (WC's handler calls preventDefault(), so a native anchor-jump never
   happens) to smooth-scroll past the sticky header instead, and adds the
   scroll-spy `.active` state below.
   ========================================================================== */
.woocommerce-tabs .woocommerce-Tabs-panel {
  display: block !important;
  scroll-margin-top: calc(var(--mk-header-height) + 56px);
}

/* space between stacked panels/sections now that all four are always on the
   page at once, one after another */
.woocommerce-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel {
  margin-top: 32px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--mk-color-border);
}

/* FAQ sits under the مشخصات table now, INSIDE the same panel (not its own
   tab) — the same divider (margin/padding/border) as between two whole
   panels above, so it still reads as its own distinct block. */
.mk-wc-faq {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--mk-color-border);
}

@media (max-width: 991px) {
  /* pinned just under the sticky header once scrolled past its own resting
     spot (is-stuck, toggled by makhmal-product.js via IntersectionObserver);
     the one-shot keyframe on that class is the "slides down" entrance.
     ⚠ full-bleed on purpose: `.woocommerce-tabs` sits inside the page's
     centred content column, so the nav's own box is narrower than the
     screen — the classic "break out of a centred container" trick
     (width:100vw + a negative margin equal to half the viewport) is what
     makes the background actually reach both edges once it sticks, instead
     of floating as a narrow bar with visible page background on both sides.
     padding-inline puts the tab row's own content back where it was. */
  .woocommerce-tabs ul.tabs {
    position: sticky !important;
    top: var(--mk-header-height);
    z-index: 20;
    width: 100vw;
    margin-inline-start: calc(50% - 50vw) !important;
    padding-inline: 20px !important;
    box-sizing: border-box;
    /* no background here on purpose (requested): before it actually sticks,
       this row sits in its normal resting spot with the page's own
       transparent/decorative background showing through, same as any other
       in-flow element — a flat white bar from the very start looked stiff.
       The background only arrives together with `.is-stuck`, below. */
  }

  /* !important: the base tab-nav rule further up already sets
     `background: none !important` unconditionally (needed there to beat
     WooCommerce's own folder-tab look) — without matching !important here,
     that earlier rule would silently win and the sticky bar would stay
     transparent once pinned, exactly the "می‌ره روی متن‌ها، ناخوانا می‌شه"
     report. The background is added ONLY once stuck, not from the start. */
  .woocommerce-tabs ul.tabs.is-stuck {
    background: var(--mk-color-bg) !important;
    animation: mk-tabs-stuck-in 0.25s ease;
  }

  /* Mobile-only reorder (requested): the trust/promise band should sit
     directly ABOVE "محصولات مرتبط", not up near the price where the long
     tabs region now separates the two. `div.product` is already CSS GRID
     (confirmed live — gallery/summary/promise/tabs/related are all direct
     grid-item siblings), so a pure `order` reorder does this with no DOM
     move and no JS: desktop keeps the original markup order (no rule here
     touches it), only this breakpoint reshuffles the visual order. */
  div.product > .woocommerce-tabs {
    order: 1;
  }

  div.product > .mk-wc-promise {
    order: 2;
  }

  div.product > .related.products,
  div.product > .up-sells.products,
  div.product > section.products {
    order: 3;
  }
}

@keyframes mk-tabs-stuck-in {
  from {
    transform: translateY(-10px);
    opacity: 0.4;
    box-shadow: none;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    box-shadow: var(--mk-shadow-sm);
  }
}

/* ---- "توضیحات" show-more (the merchant's own long description) ---- */
.mk-wc-desc__clamp {
  position: relative;
  max-height: 300px;
  overflow: hidden;
  /* ⚠ the fade is a MASK on the text, not a coloured overlay: the page
     background is a gradient, so any solid overlay shows up as a pale haze
     that never matches it. A mask just lets the real background through. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}

.mk-wc-desc__clamp.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.mk-wc-desc__more {
  display: block;
  margin: 14px auto 0;
  padding: 9px 22px;
  border: 1px solid var(--mk-color-border);
  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;
  cursor: pointer;
  transition: background-color var(--mk-transition);
}

.mk-wc-desc__more:hover {
  background: var(--mk-color-border);
}

.mk-wc-desc__more[hidden] {
  display: none;
}

#tab-description h2 {
    margin-bottom: 20px !important;
}

.woocommerce-tabs table.woocommerce-product-attributes {
  /* the parent theme's style.css resets `pre, table { display: block }` so
     wide tables scroll inside themselves. A display:block table is not a
     table box: width:100% then sizes only the OUTER box (looks full width)
     while the rows inside form an anonymous table that shrink-wraps to
     content (measured: 600px box, 239px rows) — and table-layout:fixed is
     ignored entirely. Restoring display:table is what actually makes the
     columns fill; our width:100%+fixed layout means it can't overflow, so
     the reset's scroll behaviour isn't needed here. */
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-top: 18px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce-tabs table.woocommerce-product-attributes tr:not(:last-child) th,
.woocommerce-tabs table.woocommerce-product-attributes tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border);
}

/* WooCommerce's own stylesheet sets a background directly on th/td (via
   .woocommerce-product-attributes-item__label / __value) — a background on
   the <tr> alone paints BEHIND that and never shows through, which is why
   the zebra stripe was only covering half the row (whichever cell WC
   hadn't opaqued). Target both cells directly instead of the row. */
.woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(even) td {
  background: var(--mk-color-bg-soft);
}

.woocommerce-tabs table.woocommerce-product-attributes th,
.woocommerce-tabs table.woocommerce-product-attributes td {
  padding: 13px 18px;
  border: none;
  font-size: var(--mk-fs-sm);
}

.woocommerce-tabs table.woocommerce-product-attributes th {
  width: 34%;
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-tabs table.woocommerce-product-attributes td {
  color: var(--mk-color-text-soft);
}

.woocommerce-tabs table.woocommerce-product-attributes td p {
  margin: 0;
}

/* WooCommerce's OWN bundled frontend stylesheet (not ours, not the parent
   theme's) carries a mobile rule that sets `th, td { display:block; width:
   100% }` on this exact table for narrow screens — meant for a plain
   unstyled table, it's what stacks td under th instead of side by side.
   Re-assert table-cell display at the same breakpoint; !important is the
   pragmatic fix here for the same reason as the tab ::before/::after
   neutralising above — this is a different plugin's CSS, not our own
   cascade, and its exact selector can shift between WC versions. */
@media (max-width: 768px) {
  .mk-wc-spec-table,
  .woocommerce-tabs table.woocommerce-product-attributes {
    display: table !important;
  }

  .mk-wc-spec-table tr,
  .woocommerce-tabs table.woocommerce-product-attributes tr {
    display: table-row !important;
  }

  .mk-wc-spec-table th,
  .mk-wc-spec-table td,
  .woocommerce-tabs table.woocommerce-product-attributes th,
  .woocommerce-tabs table.woocommerce-product-attributes td {
    display: table-cell !important;
    width: auto !important;
  }

  .mk-wc-spec-table th,
  .woocommerce-tabs table.woocommerce-product-attributes th {
    width: 40% !important;
  }
}

/* ==========================================================================
   Reviews list — one card per review: avatar in a ring, stars, author line,
   then the review text in its own tinted bubble.
   ========================================================================== */
#reviews ol.commentlist li.review {
  margin: 0;
  padding: 0;
  list-style: none;
}

#reviews .comment_container {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 0 14px;
  padding: 18px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

#reviews .comment_container:hover {
  border-color: color-mix(in srgb, var(--mk-color-primary) 35%, #fff);
  box-shadow: var(--mk-shadow-md);
}

#reviews .avatar {
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mk-color-primary) 30%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mk-color-primary) 10%, transparent);
  background: var(--mk-color-bg-soft);
  /* WooCommerce floats the avatar; the grid places it instead */
  float: none !important;
  position: static !important;
}

#reviews .comment-text {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

#reviews .comment-text .star-rating {
  float: none !important;
  margin: 2px 0 8px !important;
}

#reviews .comment-text p.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px !important;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

#reviews .woocommerce-review__author {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
}

/* a small "verified buyer" style chip for the date */
#reviews .woocommerce-review__published-date {
  padding: 3px 10px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  font-size: 0.68rem;
  color: var(--mk-color-text-muted);
}

#reviews .woocommerce-review__dash {
  display: none;
}

#reviews .comment-text .description {
  padding: 12px 14px;
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb, var(--mk-color-primary) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--mk-color-primary) 14%, #fff);
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

#reviews .comment-text .description p {
  margin: 0 0 8px;
}

#reviews .comment-text .description p:last-child {
  margin-bottom: 0;
}

/* the chip belongs to the author block: it is printed right after the meta
   paragraph (name + date) and gets its own line under it */
#reviews .comment-text .mk-wc-review-pet {
  display: inline-flex;
  margin: 0 0 10px;
}

#reviews .comment-text p.meta {
  margin-bottom: 6px;
}

@media (max-width: 560px) {
  #reviews .comment_container {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px;
  }

  #reviews .avatar {
    width: 44px !important;
    height: 44px !important;
  }
}

/* the optional pet name, shown as a chip above the review text */
.mk-wc-review-pet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--mk-radius-pill);
  background: color-mix(in srgb, var(--mk-pastel-rose) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--mk-pastel-rose) 30%, #fff);
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text);
}

.mk-wc-review-pet svg {
  width: 14px;
  height: 14px;
  color: var(--mk-pastel-rose);
}

.mk-wc-review-pet__label {
  color: var(--mk-color-text-muted);
}

.mk-wc-review-pet__name {
  font-weight: 700;
}

/* ---- «خریدار این محصول» ----
   Two selectors on purpose: `.mk-wc-review-buyer` is our own badge (printed
   when WooCommerce's verified-owner label is switched off) and
   `.woocommerce-review__verified` is WooCommerce's own label when it is
   switched on. Only one of the two is ever present, and both look identical. */
.mk-wc-review-buyer,
#reviews .woocommerce-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  margin-inline-start: 8px;
  padding: 5px 12px;
  border-radius: var(--mk-radius-pill);
  background: color-mix(in srgb, #2f9e6a 12%, #fff);
  border: 1px solid color-mix(in srgb, #2f9e6a 32%, #fff);
  color: #237951;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  font-style: normal;
  line-height: 1.9;
  vertical-align: middle;
}

.mk-wc-review-buyer svg {
  width: 14px;
  height: 14px;
  color: #2f9e6a;
}

.comment-form-pet-name label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.comment-form-pet-name input,
.comment-form-author input,
.comment-form-email input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-bg-soft);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

.comment-form-pet-name input: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);
}

/* ---- Reviews section title + empty state ----
   The heading reads «۱ دیدگاه» (the wording is swapped in PHP) and gets a
   soft neon treatment: a tinted pill with a glowing dot, so the section
   announces itself without shouting. */
/* ==========================================================================
   Reviews as two matching cards — #comments (title + the list, or the
   "no reviews yet" message) and #review_form_wrapper (the write-a-review
   form) are real siblings WooCommerce's own template already prints; they
   only need the SAME card treatment to read as two clearly separate,
   consistent boxes instead of a floating pill title that shared no visual
   language with the boxed form underneath it (reported: "تایتل نقد و بررسی
   اصلا یه‌طور دیگس"). ========================================================================== */
/* ⚠ REVISED (requested): the title sits OUTSIDE any box — same language as
   .mk-wc-faq__title (a plain section heading, no card, no pill/glow chip)
   — and only the "no reviews yet" message (or the comment list, when there
   are reviews) is its own boxed element below it. #comments itself carries
   no card styling; it is just the title's + the list's/empty-message's
   plain wrapper. */
#reviews .woocommerce-Reviews-title {
  display: block;
  margin: 0 0 18px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

/* the star rating itself is skinned once for the whole shop in makhmal-wc.css
   (the loop cards need it too, and this file only loads on a product page) */

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

#reviews ol.commentlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.woocommerce-noreviews {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px dashed var(--mk-color-border);
  color: var(--mk-color-text-muted);
  font-size: var(--mk-fs-sm);
}

/* ---- Review form ---- */
#review_form_wrapper {
  padding: 22px 24px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

#reviews .comment-reply-title {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-md);
  font-weight: 700;
  color: var(--mk-color-text);
}

#reviews .comment-reply-title small a {
  margin-inline-start: 8px;
  font-size: var(--mk-fs-xs);
  font-weight: 400;
  color: var(--mk-color-accent-2);
}

#commentform p {
  margin: 0 0 18px;
}

#commentform label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

#commentform .required {
  color: var(--mk-color-accent-2);
}

#commentform textarea#comment {
  width: 100%;
  min-height: 130px;
  padding: 13px 16px;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-bg-soft);
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  resize: vertical;
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

#commentform textarea#comment: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);
}

/* WC renders the rating as a real <select> plus a decorative <p class="stars">
   of star links driven by its own core JS (star-rating.js), which reads/writes
   that hidden select and, after a click, marks the chosen star(s) with its
   own "active"/"selected" classes. We only restyle the glyph + the states WC
   itself sets — never replace its click handling with a CSS-only sibling
   trick, that would fight the real widget instead of skinning it. */
.comment-form-rating {
  margin-bottom: 18px;
}

.comment-form-rating #comment-form-rating-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.comment-form-rating p.stars {
  margin: 0;
  display: flex;
}

.comment-form-rating p.stars a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 0;
  color: transparent;
}

.comment-form-rating p.stars a::before {
  content: '\2605';
  font-size: 22px;
  line-height: 1;
  color: var(--mk-color-border);
  transition: color var(--mk-transition), transform var(--mk-transition);
}

/* ⚠ WooCommerce marks ONLY the clicked star with `.active`, so picking the
   4th star left the first three empty. CSS has no previous-sibling
   combinator and reversing the row put the fill on the wrong side in RTL
   (measured), so the state is read from the container with `:has()` and the
   preceding stars are lit by name. Browsers without :has() simply show the
   single selected star — no breakage, just less feedback. */
.comment-form-rating p.stars a.active::before,
.comment-form-rating p.stars a.selected::before,
.comment-form-rating p.stars a:hover::before {
  color: var(--mk-pastel-lemon);
}

.comment-form-rating p.stars a:hover::before {
  transform: scale(1.1);
}

.comment-form-rating p.stars:has(.star-2.active) .star-1::before,
.comment-form-rating p.stars:has(.star-3.active) :is(.star-1, .star-2)::before,
.comment-form-rating p.stars:has(.star-4.active) :is(.star-1, .star-2, .star-3)::before,
.comment-form-rating p.stars:has(.star-5.active) :is(.star-1, .star-2, .star-3, .star-4)::before,
.comment-form-rating p.stars:has(.star-2:hover) .star-1::before,
.comment-form-rating p.stars:has(.star-3:hover) :is(.star-1, .star-2)::before,
.comment-form-rating p.stars:has(.star-4:hover) :is(.star-1, .star-2, .star-3)::before,
.comment-form-rating p.stars:has(.star-5:hover) :is(.star-1, .star-2, .star-3, .star-4)::before {
  color: var(--mk-pastel-lemon);
}

/* while the pointer is inside, the hover preview replaces the stored value:
   dim everything first, then the hover rules above light the right ones */
.comment-form-rating p.stars:hover a.active::before,
.comment-form-rating p.stars:hover a.selected::before {
  color: color-mix(in srgb, var(--mk-pastel-lemon) 40%, var(--mk-color-border));
}

.comment-form-rating p.stars:hover a:hover::before {
  color: var(--mk-pastel-lemon);
}

#commentform p.form-submit {
  margin: 0;
}

/* ==========================================================================
   Editor content inside the tabs — everything a writer can produce in the
   WordPress editor gets a style here, not just the tags that happen to be in
   today's product text. The panel is the ONLY scope: none of this may leak
   into our own hand-built blocks elsewhere on the page.
   Headings arrive as paragraphs (see the heading rewrite in PHP) carrying
   their original level as a class, which is why the size scale below is
   driven by --h2…--h6 instead of the tag.
   ========================================================================== */
.woocommerce-tabs .woocommerce-Tabs-panel {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.woocommerce-tabs .woocommerce-Tabs-panel > :first-child {
  margin-top: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel p {
  margin: 0 0 14px;
}

.woocommerce-tabs .woocommerce-Tabs-panel strong,
.woocommerce-tabs .woocommerce-Tabs-panel b {
  font-weight: 700;
  color: var(--mk-color-text);
}

.woocommerce-tabs .woocommerce-Tabs-panel em,
.woocommerce-tabs .woocommerce-Tabs-panel i {
  font-style: italic;
}

.woocommerce-tabs .woocommerce-Tabs-panel a {
  color: var(--mk-color-primary-hover);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--mk-color-primary) 45%, transparent);
  transition: color var(--mk-transition), text-decoration-color var(--mk-transition);
}

.woocommerce-tabs .woocommerce-Tabs-panel a:hover {
  color: var(--mk-color-accent-2);
  text-decoration-color: currentColor;
}

/* ---- Headings ----
   Two shapes live here now: WooCommerce's own structural headings, demoted to
   paragraphs carrying `mk-wc-block-title--h{n}`, and the merchant's headings
   inside the description / SEO box, which stay real h2–h6 (they are fenced
   from the demotion). Both get the same look, so a heading never loses its
   styling just because of which of the two it is. */
.woocommerce-tabs .woocommerce-Tabs-panel h2,
.woocommerce-tabs .woocommerce-Tabs-panel h3,
.woocommerce-tabs .woocommerce-Tabs-panel h4,
.woocommerce-tabs .woocommerce-Tabs-panel h5,
.woocommerce-tabs .woocommerce-Tabs-panel h6,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title {
  position: relative;
  margin: 26px 0 12px;
  padding-inline-start: 14px;
  font-family: var(--mk-font-heading);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

/* the accent bar: on a demoted paragraph it stands in for the missing tag,
   on a real heading it is the same visual signature */
.woocommerce-tabs .woocommerce-Tabs-panel h2::before,
.woocommerce-tabs .woocommerce-Tabs-panel h3::before,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 4px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title--h2 { font-size: var(--mk-fs-xl); }
.woocommerce-tabs .woocommerce-Tabs-panel h3,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title--h3 { font-size: var(--mk-fs-lg); }
.woocommerce-tabs .woocommerce-Tabs-panel h4,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title--h4 { font-size: var(--mk-fs-base); }

/* The FAQ TAB TITLE is a section heading like the other tabs — it keeps the
   accent bar. Only the questions inside the accordion opt out of it.
   ⚠ the question size has to be restated: the panel's h3 rule above
   out-specifies the .mk-wc-faq__q-text class and had pushed them to 18px. */
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-faq__q-text {
  padding-inline-start: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-faq__title {
  margin: 0 0 10px;
  padding-inline-start: 14px;
  font-size: var(--mk-fs-xl);
}

.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-faq__q-text {
  margin: 0;
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: inherit;
}

.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-faq__q-text::before {
  content: none;
}
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title--h5,
.woocommerce-tabs .woocommerce-Tabs-panel .mk-wc-block-title--h6 {
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
}

/* ---- Lists ---- */
.woocommerce-tabs .woocommerce-Tabs-panel ul,
.woocommerce-tabs .woocommerce-Tabs-panel ol {
  margin: 0 0 16px;
  padding-inline-start: 4px;
  list-style: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel li {
  position: relative;
  padding-inline-start: 24px;
  margin-bottom: 8px;
}

.woocommerce-tabs .woocommerce-Tabs-panel ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 0.85em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-primary) 16%, transparent);
}

/* ordered lists keep real numbering, counted by CSS since the markers are off */
.woocommerce-tabs .woocommerce-Tabs-panel ol {
  counter-reset: mk-ol;
}

.woocommerce-tabs .woocommerce-Tabs-panel ol > li {
  counter-increment: mk-ol;
}

.woocommerce-tabs .woocommerce-Tabs-panel ol > li::before {
  content: counter(mk-ol);
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.woocommerce-tabs .woocommerce-Tabs-panel li > ul,
.woocommerce-tabs .woocommerce-Tabs-panel li > ol {
  margin: 8px 0 0;
}

/* ---- Tables typed in the editor (no thead, first row acts as the head) ---- */
.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) {
  display: table;
  width: 100%;
  margin: 0 0 18px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  font-size: var(--mk-fs-sm);
}

.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) th,
.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) td {
  display: table-cell;
  padding: 11px 14px;
  text-align: start;
  vertical-align: middle;
  border: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) tr:not(:last-child) td,
.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) tr:not(:last-child) th {
  border-bottom: 1px solid var(--mk-color-border);
}

.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) thead td,
.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) thead th,
.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) tbody tr:first-child td {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-tabs .woocommerce-Tabs-panel table:not(.mk-wc-spec-table):not(.woocommerce-product-attributes) tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--mk-color-bg-soft) 60%, #fff);
}

/* ---- Images, figures and captions ----
   Portrait product shots are routinely uploaded at 1024×1536; letting them
   run at full height swallows the whole screen. Capping the HEIGHT and
   leaving the width automatic scales them down whole — nothing is cropped,
   which is the difference from object-fit. ---- */
.woocommerce-tabs .woocommerce-Tabs-panel img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  border-radius: var(--mk-radius-md);
}

.woocommerce-tabs .woocommerce-Tabs-panel figure,
.woocommerce-tabs .woocommerce-Tabs-panel .wp-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto !important; /* the editor writes a pixel width inline on wp-caption */
  max-width: 100%;
  margin: 0 0 20px;
  padding: 12px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

.woocommerce-tabs .woocommerce-Tabs-panel figcaption,
.woocommerce-tabs .woocommerce-Tabs-panel .wp-caption-text {
  margin: 0;
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
  text-align: center;
}

/* editor alignment classes */
.woocommerce-tabs .woocommerce-Tabs-panel .aligncenter {
  margin-inline: auto;
}

.woocommerce-tabs .woocommerce-Tabs-panel img.alignleft,
.woocommerce-tabs .woocommerce-Tabs-panel .alignleft {
  float: left;
  margin: 0 0 14px 18px;
}

.woocommerce-tabs .woocommerce-Tabs-panel img.alignright,
.woocommerce-tabs .woocommerce-Tabs-panel .alignright {
  float: right;
  margin: 0 18px 14px 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel .alignnone {
  margin-bottom: 14px;
}

@media (max-width: 560px) {
  /* floats become full-width rows: a 40%-wide float beside Persian text on a
     phone leaves two words per line */
  .woocommerce-tabs .woocommerce-Tabs-panel .alignleft,
  .woocommerce-tabs .woocommerce-Tabs-panel .alignright {
    float: none;
    margin: 0 auto 14px;
    display: block;
  }

  .woocommerce-tabs .woocommerce-Tabs-panel img {
    max-height: 380px;
  }
}

/* ---- Quotes, rules, code, marks, embeds ---- */
.woocommerce-tabs .woocommerce-Tabs-panel blockquote {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-md);
  border-inline-start: 4px solid var(--mk-color-accent);
  background: var(--mk-color-bg-soft);
  color: var(--mk-color-text);
}

.woocommerce-tabs .woocommerce-Tabs-panel blockquote p:last-child {
  margin-bottom: 0;
}

.woocommerce-tabs .woocommerce-Tabs-panel blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: var(--mk-fs-xs);
  font-style: normal;
  color: var(--mk-color-text-muted);
}

.woocommerce-tabs .woocommerce-Tabs-panel hr {
  height: 1px;
  margin: 24px 0;
  border: none;
  background: linear-gradient(90deg, transparent, var(--mk-color-border), transparent);
}

.woocommerce-tabs .woocommerce-Tabs-panel mark {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--mk-pastel-lemon) 32%, #fff);
  color: var(--mk-color-text);
}

.woocommerce-tabs .woocommerce-Tabs-panel code,
.woocommerce-tabs .woocommerce-Tabs-panel kbd {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--mk-color-bg-muted);
  font-family: monospace;
  font-size: 0.82em;
  direction: ltr;
  unicode-bidi: isolate;
}

.woocommerce-tabs .woocommerce-Tabs-panel pre {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-muted);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
}

.woocommerce-tabs .woocommerce-Tabs-panel iframe,
.woocommerce-tabs .woocommerce-Tabs-panel video {
  display: block;
  max-width: 100%;
  margin: 0 auto 18px;
  border: none;
  border-radius: var(--mk-radius-md);
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

/* a Latin run (brand name, SKU, URL) inside Persian text renders scrambled
   without isolation */
.woocommerce-tabs .woocommerce-Tabs-panel bdi {
  unicode-bidi: isolate;
}

/* FAQ accordion base: assets/css/makhmal-faq.css (shared with category archives). */

/* ==========================================================================
   SEO copy block — fixed max-height with its own internal scroll, so a long
   text block can never push the rest of the page down.
   ========================================================================== */
.mk-wc-seo {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
}

/* the tag here is chosen per product in the admin (h2 / h3 / p) — the class
   carries the look so all three render identically */
.mk-wc-seo__title,
h2.mk-wc-seo__title,
h3.mk-wc-seo__title {
  margin: 0 0 12px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

/* ---- Admin-written SEO copy for this product: the full editor surface ---- */
.mk-wc-seo__rich {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.mk-wc-seo__rich > *:first-child {
  margin-top: 0;
}

.mk-wc-seo__rich p {
  margin: 0 0 12px;
}

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

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

.mk-wc-seo__rich mark {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--mk-pastel-lemon) 32%, #fff);
  color: var(--mk-color-text);
}

/* headings written by the admin keep their tag AND their heading look */
.mk-wc-seo__rich h2,
.mk-wc-seo__rich h3,
.mk-wc-seo__rich h4,
.mk-wc-seo__rich h5,
.mk-wc-seo__rich h6 {
  position: relative;
  margin: 18px 0 10px;
  padding-inline-start: 14px;
  font-family: var(--mk-font-heading);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

.mk-wc-seo__rich h2::before,
.mk-wc-seo__rich h3::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 4px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
}

.mk-wc-seo__rich h2 { font-size: var(--mk-fs-lg); }
.mk-wc-seo__rich h3 { font-size: var(--mk-fs-base); }
.mk-wc-seo__rich h4,
.mk-wc-seo__rich h5,
.mk-wc-seo__rich h6 { font-size: var(--mk-fs-sm); padding-inline-start: 0; }

.mk-wc-seo__rich ul,
.mk-wc-seo__rich ol {
  margin: 0 0 14px;
  padding-inline-start: 4px;
  list-style: none;
}

.mk-wc-seo__rich li {
  position: relative;
  margin-bottom: 8px;
  padding-inline-start: 24px;
}

.mk-wc-seo__rich ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 0.9em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-primary) 16%, transparent);
}

.mk-wc-seo__rich ol {
  counter-reset: mk-wc-seo-ol;
}

.mk-wc-seo__rich ol > li {
  counter-increment: mk-wc-seo-ol;
}

.mk-wc-seo__rich ol > li::before {
  content: counter(mk-wc-seo-ol);
  position: absolute;
  inset-inline-start: 0;
  top: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.mk-wc-seo__rich img {
  max-width: 100%;
  height: auto;
  max-height: 320px;
  border-radius: var(--mk-radius-md);
}

.mk-wc-seo__rich table {
  display: table;
  width: 100%;
  margin: 0 0 14px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
}

.mk-wc-seo__rich table th,
.mk-wc-seo__rich table td {
  display: table-cell;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--mk-color-border);
  text-align: start;
}

.mk-wc-seo__inner {
  max-height: 260px;
  overflow-y: auto;
  padding-inline-end: 6px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--mk-blue-highlight) transparent;
}

.mk-wc-seo__inner::-webkit-scrollbar {
  width: 7px;
}

.mk-wc-seo__inner::-webkit-scrollbar-track {
  background: transparent;
}

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

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

.mk-wc-seo__inner p {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.mk-wc-seo__inner p + p {
  margin-top: 12px;
}

/* ==========================================================================
   Related products — cards mirror the site's own .mk-pcard look (bordered
   surface, square photo box, clamped 2-line title, price pinned to the
   bottom) so the shop loop and the hand-built front-page cards read as one
   component. The parent theme's style.css owns the DEFAULT ul.products GRID;
   this section overrides it to a horizontal carousel instead (below) — only
   the card chrome itself is shared/untouched here.
   ========================================================================== */
/* Scoped to `section.products`, NOT `.related.products` — the "همچنین ممکن
   است دوست داشته باشید" block WooCommerce renders is actually the UP-SELLS
   section (`<section class="up-sells upsells products">`), which the
   .related selector never matched. section.products covers related,
   up-sells and cross-sells alike, so a merchant filling either field gets
   the same styling. */
.woocommerce div.product section.products {
  position: relative;
  margin-top: 20px;
  padding-top: 34px;
  border-top: 1px solid var(--mk-color-border);
}

/* the section heading is emitted as a paragraph now (see the heading
   rewrite in inc/woocommerce.php); it keeps its own hook class */
.woocommerce div.product section.products > .mk-wc-block-title {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-color-text);
  margin-bottom: 22px;
}

/* ---- Carousel, not a grid (requested) ----
   Overrides the parent theme's own ul.products GRID (style.css) with a
   horizontal scroll-snap rail — native overflow-x:auto is what makes this
   swipeable on touch with zero JS; makhmal-product.js only adds the
   prev/next ARROW buttons on top for a mouse, same division of labour as
   the front-page's `.mk-party__rail` and the shop's `.mk-cats__track`. */
.woocommerce div.product section.products ul.products {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.woocommerce div.product section.products ul.products::-webkit-scrollbar {
  display: none;
}

.woocommerce div.product section.products ul.products li.product {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

@media (max-width: 480px) {
  .woocommerce div.product section.products ul.products li.product {
    flex-basis: 72%;
  }
}

/* prev/next arrows — visible on every screen size (requested), including
   touch: a visible cue that there is more to scroll to, not just the partial
   next card peeking at the edge. Touch still scrolls natively regardless of
   whether these are pressed. */
.woocommerce div.product section.products .mk-wc-related__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: 50%;
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-sm);
  color: var(--mk-color-text);
  cursor: pointer;
  transition: opacity var(--mk-transition);
}

.woocommerce div.product section.products .mk-wc-related__arrow svg {
  width: 18px;
  height: 18px;
}

.woocommerce div.product section.products .mk-wc-related__arrow--prev {
  inset-inline-end: -10px;
}

.woocommerce div.product section.products .mk-wc-related__arrow--next {
  inset-inline-start: -10px;
}

.woocommerce div.product section.products .mk-wc-related__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

/* requested: keep the arrows visible on touch too — a visible affordance
   that there's more to see, not just relying on the partial next card
   peeking at the edge. Inset instead of overhanging past the card edge
   (there's no spare room outside the rail on a phone width). */
@media (max-width: 700px) {
  .woocommerce div.product section.products .mk-wc-related__arrow {
    width: 32px;
    height: 32px;
  }

  .woocommerce div.product section.products .mk-wc-related__arrow svg {
    width: 15px;
    height: 15px;
  }

  .woocommerce div.product section.products .mk-wc-related__arrow--prev {
    inset-inline-end: 4px;
  }

  .woocommerce div.product section.products .mk-wc-related__arrow--next {
    inset-inline-start: 4px;
  }
}

/* ⚠ The card CHROME used to be duplicated here. It is gone on purpose: the
   related/up-sell cards must be byte-for-byte the shop archive's card, so
   makhmal-shop.css + makhmal-shop.js now load on the product page too and own
   the card entirely (media box, body, expiry chip inside the body, foot row
   with the price and the icon add-to-cart). Only the SECTION wrapper, the
   4-per-row grid and the single-product sale badge stay in this file — do not
   re-add per-card rules here, they would silently out-specify the shop card
   (`div.product` in front of the same selector wins) and the two screens
   would drift apart again. */

/* the single-product page shows the same percentage badge */
.woocommerce div.product div.images .onsale.mk-wc-sale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-color-accent-2) 38%, transparent);
}

.woocommerce div.product div.images .mk-wc-sale__num {
  font-family: var(--mk-font-heading);
  font-size: 0.82rem;
  line-height: 1;
}

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

/* ---- Quantity stepper (+/- buttons injected by makhmal-product.js) ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

/* the hidden ATTRIBUTE is (0,1,0) and loses to any class that sets display —
   without this the stock note would render even while marked hidden */
.woocommerce div.product [hidden] {
  display: none !important;
}

/* narrower than the add-to-cart button (which takes the rest of the row via
   its own flex:1) — flex-grow:0 keeps it from stretching wider than 170px,
   flex-shrink:1 still lets it shrink on narrow rows */
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  flex: 0 1 170px;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 !important;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty {
  flex: 1;
  -moz-appearance: textfield;
  appearance: textfield;
  width: 48px;
  padding: 13px 4px;
  border: none;
  background: transparent;
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  text-align: center;
}

.woocommerce div.product form.cart .quantity .qty:focus {
  outline: none;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mk-wc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: transparent;
  color: var(--mk-color-primary-hover);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--mk-transition);
}

.mk-wc-qty-btn:hover {
  background: var(--mk-color-bg-muted);
}

.mk-wc-qty-btn:disabled {
  color: var(--mk-color-text-muted);
  cursor: not-allowed;
}

/* ---- Stock-limit note: replaces the browser's own English validation
   bubble (suppressed in makhmal-product.js). It is a real element in the
   flow, so it can be styled, translated and read by a screen reader. ---- */
.mk-wc-qty-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--mk-color-accent-2) 26%, transparent);
  border-inline-start: 4px solid var(--mk-color-accent-2);
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb, var(--mk-color-accent-2) 8%, #fff);
  color: var(--mk-color-text);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  line-height: 2;
  animation: mk-qty-note-in 0.22s ease;
}

.mk-wc-qty-note::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--mk-color-accent-2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

/* the field itself flags the same state, so the note is never the only cue */
.quantity.mk-wc-qty--warn {
  border-color: var(--mk-color-accent-2) !important;
}

@keyframes mk-qty-note-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-wc-qty-note {
    animation: none;
  }
}

/* ---- Gallery click affordance ---- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  cursor: zoom-in;
}

/* ---- Add-to-cart button: shares the row 50/50 with the quantity box ---- */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit {
  flex: 1;
  padding: 14px 30px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-weight: 700;
  border: none;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.woocommerce div.product form.cart .button:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

/* ==========================================================================
   Variable products
   The variations form is <form class="variations_form cart">, so it also
   matched the `form.cart { display:flex }` rule above — which turned the
   attribute table, the reset link and the whole add-to-cart wrapper into
   flex siblings on ONE row. That's the broken layout. Put the form back to
   block flow and move the flex row down to the element that actually holds
   the quantity + button.
   ========================================================================== */
.woocommerce div.product form.cart.variations_form {
  display: block;
}

/* Each attribute gets its own row. These are explicit display values, not
   inherited from the parent theme's `table { display:block }` reset — see
   the note on the attributes table above for why relying on that reset is
   never safe. */
.woocommerce div.product table.variations,
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr,
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}

.woocommerce div.product table.variations {
  width: 100%;
  margin: 0 0 18px;
}

.woocommerce div.product table.variations tr + tr {
  margin-top: 14px;
}

.woocommerce div.product table.variations th.label {
  margin-bottom: 7px;
  text-align: start;
}

.woocommerce div.product table.variations th.label label {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

/* select + "پاک کردن" share one row; the link keeps its reserved slot so
   the row doesn't jump when WooCommerce toggles its visibility */
.woocommerce div.product table.variations td.value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.woocommerce div.product table.variations select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 13px 16px;
  padding-inline-end: 40px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  background-color: var(--mk-color-bg-soft);
  /* RTL-only theme (dir=rtl is global), so the physical `left` here is
     deliberately the inline-end side */
  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);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

.woocommerce div.product table.variations select: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);
}

.woocommerce div.product .reset_variations {
  flex-shrink: 0;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
  white-space: nowrap;
  transition: color var(--mk-transition);
}

.woocommerce div.product .reset_variations:hover {
  color: var(--mk-color-accent-2);
}

/* ---- Selected-variation panel (price / availability) ---- */
.woocommerce div.product .single_variation_wrap {
  display: block;
}

.woocommerce div.product .woocommerce-variation {
  margin-bottom: 14px;
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: 10px;
}

.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

.woocommerce div.product .woocommerce-variation-availability .stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.woocommerce div.product .woocommerce-variation-availability .stock.in-stock {
  background: color-mix(in srgb, #2f9e6a 14%, #fff);
  color: #2f9e6a;
}

.woocommerce div.product .woocommerce-variation-availability .stock.out-of-stock {
  background: color-mix(in srgb, var(--mk-color-accent-2) 12%, #fff);
  color: var(--mk-color-accent-2);
}

/* the real quantity+button row for variable products */
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

@media (max-width: 560px) {
  .woocommerce div.product table.variations td.value {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Narrow phones: the add-to-cart label wrapped onto two lines because the
   stepper kept its 170px basis and left the button too little room. Shrink
   the stepper instead of the button — the button is the target the buyer
   aims at, the stepper only ever holds two digits.
   ========================================================================== */
@media (max-width: 560px) {
  .woocommerce div.product form.cart,
  .woocommerce div.product .woocommerce-variation-add-to-cart {
    gap: 10px;
  }

  .woocommerce div.product form.cart .quantity {
    flex: 0 1 100px;
  }

  .woocommerce div.product form.cart .quantity .qty {
    width: 32px;
    padding-inline: 0;
  }

  .mk-wc-qty-btn {
    width: 32px;
  }

  .woocommerce div.product form.cart .button,
  .woocommerce div.product .single_add_to_cart_button {
    padding-inline: 14px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Overflow guard — a single wide child (a gallery image WC sized inline, a
   long unbroken Latin string, an attributes table) used to push the whole
   phone layout sideways and clip everything. Grid/flex children default to
   min-width:auto, which is what lets them refuse to shrink; pinning them to
   0 plus scrolling the two elements that genuinely can't fit keeps the page
   itself at the viewport width.
   ========================================================================== */
.woocommerce div.product.type-product > *,
.woocommerce div.product div.summary > *,
.woocommerce-tabs .woocommerce-Tabs-panel > * {
  min-width: 0;
}

/* ⚠ The gallery TRACK must NOT be capped. FlexSlider gives
   `.woocommerce-product-gallery__wrapper` an inline width of
   (slide width × number of slides) and slides the whole strip with a
   transform. Capping it at 100% squeezed every slide after the first into
   zero width — clicking a thumbnail then showed an empty frame, which is
   exactly the reported bug. Only the gallery and its viewport are clipped. */
.woocommerce div.product div.images .woocommerce-product-gallery,
.woocommerce div.product div.images .flex-viewport {
  max-width: 100%;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  max-width: none !important;
}

/* each slide keeps the width FlexSlider assigns it */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  max-width: none;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-tabs .woocommerce-Tabs-panel p,
.woocommerce div.product div.summary p {
  overflow-wrap: anywhere;
}

/* If a spec table still can't fit, the PANEL scrolls — not the page. Done
   on the panel rather than the table itself so the display:table rules a
   few blocks up (which the narrow layout depends on) stay untouched. */
@media (max-width: 560px) {
  .woocommerce-tabs .woocommerce-Tabs-panel {
    overflow-x: auto;
  }
}