/* ==========================================================================
   Makhmal — Header / Navigation / Mega Menu
   ========================================================================== */

.mk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mk-color-bg-soft);
  border-bottom: 1px solid var(--mk-color-border);
}

/* While the mobile off-canvas menu holds the body scroll-lock (JS pins <body>
   with position:fixed), the sticky header loses its scroll container and
   would snap back to its natural document position — off-screen on a scrolled
   page, taking the menu (anchored to it) along. This pins the header to the
   viewport for the lock's duration. */
.mk-header.is-nav-locked {
  position: fixed;
  top: 0;
  inset-inline: 0;
  width: 100%;
  /* ⚠ makhmal-bg.css puts `backdrop-filter: blur(14px)…` on .mk-header
     itself. Per spec, an element with its OWN backdrop-filter becomes a
     "backdrop root" — every descendant's backdrop-filter can then only
     sample what is painted INSIDE that root (here: the header's own thin
     nav-bar box), never the real page behind it. The mobile off-canvas menu
     is a descendant of .mk-header, so its blur was silently sampling almost
     nothing and looked like it did not work at all. Switching the header's
     own blur off for exactly the window the menu is open (this class is
     toggled by the same click that opens it, see makhmal-header.js
     lockScroll()) removes that boundary so the menu's blur reaches the
     actual page. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--mk-header-height);
  transition: height var(--mk-transition);
}

/* ---- Start cluster: logo + (mobile) burger ---- */
.mk-nav__start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mk-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* qualified with the parent + the tag itself (not just the bare class) so
   this outranks WooCommerce's own ".woocommerce img { height:auto }" —
   that rule only exists on WC pages (body.woocommerce), which is exactly
   why the logo only blew up to its raw upload size there and nowhere else */
.mk-nav__brand img.mk-nav__logo {
  height: 38px;
  width: auto;
}

/* ==========================================================================
   Top bar (announcement) — printed above the header by
   template-parts/makhmal-topbar.php, only when the setting is on.
   ========================================================================== */
/* ⚠ REVISED 2026-09-29 (multi-slide topbar): the bar's height is now a fixed
   box per breakpoint, set by the admin (تنظیمات قالب → تاپ‌بار) and printed
   inline as --mk-topbar-h-* by template-parts/makhmal-topbar.php — every
   slide, image or text, fills that exact box; an image "fits" it both ways
   (object-fit:cover on a 100%×100% box) instead of capping only its height
   and floating in a shorter bar. */
.mk-topbar {
  --mk-topbar-h: var(--mk-topbar-h-desktop, 48px);
  position: relative;
  z-index: 101;
  height: var(--mk-topbar-h);
  background: var(--mk-gradient-cta);
  color: #fff;
  overflow: hidden;
}

@media (max-width: 991px) {
  .mk-topbar {
    --mk-topbar-h: var(--mk-topbar-h-tablet, 44px);
  }
}

@media (max-width: 600px) {
  .mk-topbar {
    --mk-topbar-h: var(--mk-topbar-h-mobile, 40px);
  }
}

.mk-topbar__inner {
  height: 100%;
}

/* slides share one stacking box (same shared-cell technique as
   .mk-tabs__panels) so the bar's height never jumps between slides — each
   is an absolute layer, crossfaded by toggling .is-active in
   assets/js/makhmal-header.js. With a single slide the wrapper is simply
   the one full-size layer, no JS needed. */
.mk-topbar__slides {
  position: relative;
  height: 100%;
}

.mk-topbar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.mk-topbar__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.mk-topbar__media,
.mk-topbar__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.mk-topbar__media {
  object-fit: cover;
  object-position: center;
}

.mk-topbar__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-inline: 20px;
  max-width: 100%;
  min-width: 0;
}

/* the bar's height is a FIXED box (--mk-topbar-h-*), so the text must stay
   on one line — a wrapped second line would simply be clipped by .mk-topbar's
   own overflow:hidden instead of growing the bar. */
.mk-topbar__text {
  flex-shrink: 1;
  min-width: 0;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-topbar__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border-radius: var(--mk-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--mk-transition, 0.2s ease);
}

.mk-topbar__btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* the admin writes this text in an editor, so its own tags are styled here —
   `p` inherits the muted body colour otherwise and disappears on the band */
.mk-topbar__text p {
  margin: 0;
  color: inherit;
}

.mk-topbar__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mk-topbar__text a:hover {
  text-decoration-thickness: 2px;
}

.mk-topbar__text strong,
.mk-topbar__text b {
  font-weight: 700;
}

.mk-topbar__text mark {
  padding: 1px 7px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.mk-topbar__text ul,
.mk-topbar__text ol {
  display: inline-flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Phone ---- */
.mk-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-surface);
  color: var(--mk-color-text);
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  direction: ltr;
  transition: border-color var(--mk-transition), color var(--mk-transition);
}

.mk-nav__phone:hover {
  border-color: var(--mk-color-primary);
  color: var(--mk-color-primary-hover);
}

.mk-nav__phone-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--mk-color-primary);
}

/* ---- Search ---- */
/* Desktop is icon-first: the field lives in a panel that drops under the
   button, so the header row keeps its space for the phone number. */
.mk-nav__searchbox {
  position: relative;
  flex-shrink: 0;
}

.mk-nav__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: 50%;
  background: var(--mk-color-surface);
  color: var(--mk-color-text);
  cursor: pointer;
  transition: border-color var(--mk-transition), background-color var(--mk-transition);
}

.mk-nav__search-toggle:hover,
.mk-nav__searchbox.is-open .mk-nav__search-toggle {
  border-color: var(--mk-color-primary);
  background: var(--mk-color-bg-muted);
}

.mk-nav__search-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(360px, 78vw);
  padding: 10px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity var(--mk-transition), visibility var(--mk-transition), translate var(--mk-transition);
}

.mk-nav__searchbox.is-open .mk-nav__search-panel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.mk-nav__search-submit {
  flex-shrink: 0;
  padding: 10px 18px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-family: inherit;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.mk-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 240px;
  min-width: 0;
  padding: 0 12px;
  height: 40px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  border: 1px solid transparent;
  transition: border-color var(--mk-transition), background-color var(--mk-transition);
}

.mk-nav__search:focus-within {
  border-color: var(--mk-color-primary);
  background: var(--mk-color-surface);
}

.mk-nav__search-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--mk-color-text-soft); }

.mk-nav__search-input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-nav__search-input::placeholder { color: var(--mk-color-text-soft); font-weight: 700; }

.mk-header__mobile-search {
  display: none;
}

/* ---- Menu list ---- */
.mk-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.mk-nav__item {
  position: relative;
  /* .mk-megamenu below is position:absolute + visibility:hidden, up to 980px
     wide, pinned to this item's inline-start edge. Invisible ≠ removed from
     layout: without containment its off-screen box still inflates the
     document's horizontal scrollWidth, which is what was shifting the whole
     RTL page right on any viewport-width change (e.g. leaving devtools'
     mobile emulation). Layout containment stops a descendant's overflow from
     affecting ancestor sizing without clipping its paint, so the dropdown
     still opens/shows exactly as before. */
  contain: layout;
}

.mk-nav__link-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--mk-color-accent); }

/* ---- Menu icons a merchant supplies per item (uploaded image or pasted SVG).
   ⚠ the image rule is written `.parent img.class` on purpose: WooCommerce's
   own `.woocommerce img { height:auto }` (0,1,1) beats a bare single class on
   every shop page — the documented trap that once blew up the site logo. ---- */
.mk-nav__link img.mk-nav__link-icon--img,
.mk-megamenu__col-title img.mk-megamenu__col-icon--img {
  object-fit: contain;
  height: 100%;
}

.mk-nav__link-icon--svg,
.mk-megamenu__col-icon--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* the pasted SVG is a child of that span, and the global `svg{width:1em}`
   reset in makhmal-base.css would otherwise size it to the font, not the box */
.mk-nav__link-icon--svg svg,
.mk-megamenu__col-icon--svg svg {
  width: 100%;
  height: 100%;
}

.mk-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
  transition: background-color var(--mk-transition), color var(--mk-transition);
  white-space: nowrap;
}

.mk-nav__link:hover,
.mk-nav__item.is-open > .mk-nav__link {
  background-color: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
}

.mk-nav__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--mk-transition);
}

.mk-nav__item.is-open .mk-nav__caret {
  transform: rotate(180deg);
}

/* ---- Actions (cart / CTA) ---- */
.mk-nav__actions {
  display: flex;
  flex: 1;
  justify-content: end;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* ---- Mini-cart ---- */
.mk-nav__cart-wrap {
  position: relative;
  /* ⚠ MEASURED live: the cart icon is the LAST header action, i.e. the one
     sitting closest to the document's physical left edge on this RTL site.
     The 380px-wide dropdown pinned to it (.mk-mini-cart, inset-inline-end:0)
     is invisible ≠ absent from layout the same way `.mk-nav__item`'s
     mega-menu already was (see that rule's own comment): opening it grew
     `document.body.scrollWidth` by ~56px, and because RTL scroll starts at
     its rightmost position, that extra width silently pushed the WHOLE
     header — including the cart icon itself — off-screen to the left the
     instant the panel opened. Same fix as `.mk-nav__item`: layout
     containment stops a descendant's overflow from inflating the ancestor's
     scrollable size, without clipping its paint — the dropdown (and the
     close button perched outside its own corner) still render exactly as
     designed. */
  contain: layout;
}

.mk-mini-cart {
  /* the one place the thumb size lives — the variation/quantity rows below
     indent by exactly this much (+ the row gap) so they line up under the
     TITLE, never under the image, even though WC prints both inside one
     shared <a> with no wrapper of its own around the title text. */
  --mk-mc-thumb: 56px;
  --mk-mc-indent: calc(var(--mk-mc-thumb) + 10px);

  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 120;
  width: min(380px, 94vw);
  /* overflow stays VISIBLE here on purpose — the close button below sits
     partly outside this box's own corner. Scrolling itself lives further
     down on .woocommerce-mini-cart (the product <ul>) alone, so the total
     row and the view-cart/checkout buttons stay pinned in place. */
  padding: 14px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity var(--mk-transition), visibility var(--mk-transition), translate var(--mk-transition);
}

.mk-nav__cart-wrap.is-open .mk-mini-cart {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* the scrollable part — height is capped to roughly 5 product rows
   (thumbnail height + its row padding, ×5); a 6th item is reachable by
   scrolling THIS box, the panel itself (buttons, close button) never moves */
/* the body is NOT what scrolls — only the product list below is. This wrapper
   just carries WC's own markup through unchanged. */
.mk-mini-cart__body .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ==========================================================================
   WooCommerce's own mini-cart markup (cart/mini-cart.php via
   woocommerce_mini_cart()) — skin only, per this file's no-template-override
   policy; every class below is WC's, not ours, except `.mk-mini-cart-item-
   title`, the one span dmhouse_theme_mini_cart_item_name_wrap() adds around
   the title (inc/woocommerce.php) purely so it CAN be 2-line clamped.
   ========================================================================== */
/* THE scrollable element — everything else in the panel (the total row, the
   view-cart/checkout buttons, the close button) stays put; only the product
   list itself scrolls past ~5 rows. flex-shrink:0 on the total/buttons rules
   below is what keeps them pinned once this list is the one growing/
   scrolling instead of the whole body. */
.mk-mini-cart .woocommerce-mini-cart {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  max-height: calc((var(--mk-mc-thumb) + 40px) * 5);
  overflow-y: auto;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

/* the <li> itself is now the flex-wrap row: the WC-printed <a> (thumb+title)
   is forced to its own full-width line via flex-basis:100% below, and the
   variation dl + quantity span — its plain siblings, no wrapper of their
   own — fall onto the NEXT line together and can sit side by side there. */
/* ⚠ every selector from here down is deliberately chained through the real
   `.widget_shopping_cart_content` wrapper too (3 classes, not 2) — WooCommerce's
   OWN default stylesheet (never dequeued; it also skins its widgets) ships
   `.woocommerce ul.cart_list li{padding-bottom:15px}` and `.woocommerce
   ul.cart_list li dl{padding-right:1em;border-left:2px solid …}` at 2
   classes + 2/3 elements — MORE specific than a bare 2-class selector, so a
   plain `.mk-mini-cart .widget_shopping_cart_content .mini_cart_item` rule was silently losing to it. */
/* GRID, not flex-wrap: with flex-wrap, the variation dl and the quantity
   span were sharing one flex "line" only when both happened to fit — a
   longer variation phrase or a longer price ate the whole line's width and
   pushed quantity onto a THIRD line instead of just squeezing it. A grid
   gives quantity its own COLUMN that always exists, whatever the variation
   text's length does inside its own column. */
.mk-mini-cart .widget_shopping_cart_content .mini_cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  /* flex-shrink:0 — this <li> is a flex item of `.woocommerce-mini-cart`
     (a column flex container); without this it is allowed to shrink, and
     `min-height` below being a FLOOR is only real once shrink is off. This
     is what fixes rows visibly compressing/thumbnails shrinking as more
     items get added: with shrink allowed, more rows meant less room per
     row, so the browser math shrank each one a little more each time. */
  flex-shrink: 0;
  /* every row's floor is the thumbnail plus its own vertical padding, so a
     row with a short one-line title is never visibly shorter than one whose
     title wraps to two lines — same fixed height for both. Bottom padding
     is deliberately larger than top: more breathing room before the next
     row's separator than right under this row's own content. */
  min-height: calc(var(--mk-mc-thumb) + 26px);
  padding: 10px 0 16px;
  padding-inline-end: 26px;
  border-bottom: 1px solid var(--mk-color-border);
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item:last-child {
  border-bottom: none;
}

/* the single WC-printed <a> holding BOTH the thumbnail and the title text
   becomes the row's own flex layout — one product, one clean row */
.mk-mini-cart .widget_shopping_cart_content .mini_cart_item > a:not(.remove) {
  /* row 1, spanning both grid columns */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mk-color-text);
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item img {
  /* pinned on all four of width/height/min/max — belt-and-suspenders against
     flexbox's own automatic minimum-size math, which can still shrink a flex
     child below an explicit width/height alone in a tight row */
  width: var(--mk-mc-thumb);
  height: var(--mk-mc-thumb);
  min-width: var(--mk-mc-thumb);
  min-height: var(--mk-mc-thumb);
  max-width: var(--mk-mc-thumb);
  max-height: var(--mk-mc-thumb);
  flex: none;
  border-radius: var(--mk-radius-sm);
  object-fit: cover;
  background: var(--mk-color-bg-muted);
}

.mk-mini-cart .mk-mini-cart-item-title {
  /* min-width:0 is what lets a flex child clamp instead of forcing the row
     wider — without it a long unbroken title pushes the whole panel out */
  display: -webkit-box;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  color: var(--mk-color-text);
}

/* the variation ("وزن: ...") and the qty×price line — real siblings of the
   <a> above at the <li> level (not inside it), so the <li>'s own flex-wrap
   is what puts them on one shared row, indented to start under the TITLE
   column, one at each end of that row. */
.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .variation {
  /* row 2, column 1 — its own cell, so however long this text gets it can
     never push .quantity (column 2) down onto a line of its own */
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* overrides WC's own padding-right:1em + border-left rail — this list
     already gets its indent from margin-inline-start below, and the rail
     doesn't belong in this minimal a design */
  margin: 0;
  margin-inline-start: var(--mk-mc-indent);
  padding: 0;
  border-inline-start: none;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-soft);
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .variation dt,
.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .variation dd {
  margin: 0;
  font-weight: 400;
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .variation p {
  margin: 0;
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .quantity {
  /* row 2, column 2 — its OWN column, always there, whatever width the
     variation text (column 1) ends up needing; when there is no variation
     on that line item, this cell is simply the only content on row 2 and
     still lands at the far end via justify-self */
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: block;
  margin: 0;
  white-space: nowrap;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

/* deliberately NOT a button chip — a whole separate close (×) button now
   sits at the top of the panel for "close the mini-cart" (below), so this
   one only ever needs to read as "remove this one line", small and quiet */
.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .remove {
  position: absolute;
  inset-inline-end: 0;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-sm);
  line-height: 1;
  transition: color var(--mk-transition);
}

.mk-mini-cart .widget_shopping_cart_content .mini_cart_item .remove:hover {
  color: var(--mk-color-danger);
}

/* ---- Panel close (×) — the ONE control that closes the whole mini-cart;
   kept visually heavier than the per-item remove above so the two are never
   mistaken for each other. ---- */
.mk-mini-cart__close {
  position: absolute;
  /* negative offsets so the button sits perched ON the panel's own corner
     rather than tucked inside it — the .mk-mini-cart box has overflow:
     visible precisely so this is not clipped. inset-inline-end, on this
     RTL-only site, IS the physical left (same reasoning as the select2
     arrow elsewhere in this theme: a physical placement on a site that only
     ever renders RTL). */
  top: -10px;
  inset-inline-end: -10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--mk-color-surface);
  color: var(--mk-color-text-soft);
  cursor: pointer;
  /* the "3D, perched on the corner" read — a real drop shadow, not the flat
     look every other pill/chip in this file uses */
  box-shadow: 0 4px 10px rgba(36, 30, 61, 0.22), 0 0 0 1px var(--mk-color-border);
  transition: background-color var(--mk-transition), color var(--mk-transition), box-shadow var(--mk-transition);
}

.mk-mini-cart__close:hover {
  background: var(--mk-color-danger);
  color: var(--mk-color-text-on-brand);
}

.mk-mini-cart__close svg {
  width: 12px;
  height: 12px;
}

.mk-mini-cart .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
}

.mk-mini-cart .woocommerce-mini-cart__total {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mk-color-border);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
}

.mk-mini-cart .woocommerce-mini-cart__buttons {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.mk-mini-cart .woocommerce-mini-cart__buttons a {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  transition: background-color var(--mk-transition), box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-mini-cart .woocommerce-mini-cart__buttons a.checkout {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  box-shadow: var(--mk-shadow-sm);
}

.mk-mini-cart .woocommerce-mini-cart__buttons a.checkout:hover {
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-1px);
}

.mk-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout) {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
}

.mk-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout):hover {
  background: var(--mk-color-border);
}

.mk-nav__cart,
.mk-nav__account {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--mk-radius-pill);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
  transition: background-color var(--mk-transition);
}

.mk-nav__cart svg,
.mk-nav__account svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mk-nav__cart:hover,
.mk-nav__account:hover {
  background-color: var(--mk-color-bg-muted);
}

.mk-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
  border: none;
}

.mk-nav__cta:hover {
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-1px);
}

/* ---- Hamburger (mobile) ---- */
/* same circular chip as .mk-nav__cart/.mk-nav__account opposite it
   (36px, border-radius:50%) — was a bigger rounded SQUARE before, which read
   heavier than the rest of the row; bars shrunk to match the new box. */
.mk-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--mk-color-bg-muted);
  border-radius: 50%;
  flex-shrink: 0;
}

.mk-nav__burger-bar {
  width: 16px;
  height: 1.5px;
  background: var(--mk-color-text);
  border-radius: 2px;
  transition: transform var(--mk-transition), opacity var(--mk-transition);
}

.mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.mk-nav__burger.is-active .mk-nav__burger-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ---- Mega menu panel ---- */
/* ⚠ the panel used to be a fixed 980px / 4 equal columns, written when the
   menu was hardcoded with exactly four columns per item. The menu is a real WP
   menu now, so the column COUNT is whatever the merchant built — a two-column
   item in a four-column box left half the panel empty. Width follows content
   (`max-content`) and is only CAPPED by the old figure; the columns are flex
   items that wrap, so an item with seven columns still fits the screen. */
.mk-megamenu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  padding-top: 12px;
  width: max-content;
  max-width: min(980px, 92vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mk-transition), visibility var(--mk-transition);
}

.mk-megamenu__panel {
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-lg);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 34px;
  translate: 0 8px;
  transition: translate var(--mk-transition);
}

/* each column is as wide as its longest link, with a floor so a one-word
   column doesn't collapse into a sliver, and a ceiling so a long link can't
   push the panel past its max-width */
.mk-megamenu__col {
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 260px;
}

.mk-megamenu__col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
  margin-bottom: 14px;
}

.mk-megamenu__col-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mk-color-accent);
}

.mk-megamenu__col-title--stacked {
  margin-top: 18px;
}

.mk-megamenu__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mk-megamenu__list a {
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text-soft);
  transition: color var(--mk-transition);
}

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

/* Desktop: open on hover / keyboard-focus, no JS needed */
@media (min-width: 992px) {
  .mk-nav__item:hover > .mk-megamenu,
  .mk-nav__item:focus-within > .mk-megamenu,
  .mk-nav__item.is-open > .mk-megamenu {
    opacity: 1;
    visibility: visible;
  }

  .mk-nav__item:hover > .mk-megamenu .mk-megamenu__panel,
  .mk-nav__item:focus-within > .mk-megamenu .mk-megamenu__panel,
  .mk-nav__item.is-open > .mk-megamenu .mk-megamenu__panel {
    translate: 0 0;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-nav__searchbox {
    display: none;
  }

  /* phone becomes the icon only, and the icon IS the dial link */
  .mk-nav__phone {
    padding: 9px;
    border-radius: 50%;
    border-color: transparent;
    background: var(--mk-color-bg-muted);
  }

  .mk-nav__phone-text {
    display: none;
  }

  .mk-header__mobile-search {
    display: block;
    margin: 0 0 12px;
    transition: margin var(--mk-transition);
  }

  /* the field itself is the pill; the form around it stays a plain block so
     the submit button can sit inside it without a second row */
  .mk-header__mobile-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 42px;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-color-bg-muted);
    transition: height var(--mk-transition);
  }

  /* ---- Compact once scrolled (requested): only VERTICAL space shrinks —
     the nav row's own height (via --mk-header-height, which every sticky
     offset elsewhere already reads live) and the mobile search row's height
     and margin. Nothing inline/horizontal is touched. ---- */
  .mk-header.is-scrolled {
    --mk-header-height: 56px;
  }

  .mk-header.is-scrolled .mk-header__mobile-search {
    margin-bottom: 6px;
  }

  .mk-header.is-scrolled .mk-header__mobile-search-field {
    height: 34px;
  }

  .mk-header__mobile-search .mk-nav__search-input {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: var(--mk-fs-sm);
    font-weight: 700;
    color: var(--mk-color-text);
  }

  .mk-nav__action-label { display: none; }

  .mk-nav__cart, .mk-nav__account {
    padding: 9px;
    border-radius: 50%;
    background: var(--mk-color-bg-muted);
  }

  .mk-nav__burger {
    display: flex;
  }

  /* off-canvas panel: always laid out (display:flex), closed state is pushed
     fully off-screen to the physical right and faded, so opening/closing is
     a real transition instead of the old display:none/flex jump-cut. Kept
     `display:flex` (not `none`) at every state on purpose — a transform on a
     display:none element cannot animate. */
  .mk-nav__menu {
    display: flex;
    position: fixed;
    top: var(--mk-header-height);
    inset-inline: 0;
    bottom: 0;
    height: calc(100dvh - var(--mk-header-height));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px 20px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99;
    /* "glass": blurred + a translucent white rather than the flat opaque
       background this panel had before — a fixed rgba (not a --mk-color-*
       token) because it is this ONE panel's own glass effect, not a reusable
       surface colour */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.32s ease, opacity 0.28s ease, visibility 0s linear 0.32s;
  }

  .mk-nav.is-mobile-open .mk-nav__menu {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.32s ease, opacity 0.28s ease, visibility 0s;
  }

  /* a soft rule between top-level items — was borderless before, so opening
     a long menu read as one unbroken block */
  .mk-nav__menu > .mk-nav__item {
    border-bottom: 1px solid var(--mk-color-border);
  }

  .mk-nav__menu > .mk-nav__item:last-child {
    border-bottom: none;
  }

  .mk-nav__link {
    /* NOT justify-content:space-between — with icon+text+caret all as flex
       children that spreads all three apart evenly and pries the icon away
       from the text, same bug already fixed once on the mega-menu column
       title. The caret's own margin-inline-start:auto below is what pushes
       ONLY itself to the far side, keeping icon+text glued together. */
    width: 100%;
    padding: 14px 12px;
    border-radius: var(--mk-radius-sm);
  }

  .mk-nav__caret {
    margin-inline-start: auto;
    transform: rotate(90deg);
  }

  .mk-nav__item.is-open .mk-nav__caret {
    transform: rotate(0);
  }

  .mk-megamenu {
    position: static;
    transform: none;
    width: 100%;
    padding-top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .mk-megamenu__panel {
    /* the desktop panel is a wrapping flex row; on a phone every column goes
       under the previous one, so the direction is what has to change here.
       align-items:stretch (the flex default the desktop rule overrides with
       flex-start) is what makes every column actually reach 100% width
       instead of shrinking to its content. */
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    box-shadow: none;
    border: none;
    padding: 8px 12px 8px 24px;
    translate: 0;
  }

  .mk-megamenu__col {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .mk-megamenu__list {
    width: 100%;
  }

  .mk-nav__item.is-open .mk-megamenu {
    display: block;
  }

  /* ---- Column-level accordion (the 2nd of up to 3 nested levels) ----
     a column whose title carries this class (added by JS only when it is
     followed by a real .mk-megamenu__list) is a toggle; a column with no
     sub-list is unaffected and stays plain text/link. */
  .mk-megamenu__col-title.js-mk-megamenu-col-title {
    /* NOT justify-content:space-between: with the icon, the title text/link
       AND the caret all as flex children, space-between would spread all
       three apart evenly and pry the icon away from the title. The caret's
       own margin-inline-start:auto below pushes only itself (and nothing
       before it) to the end, which is what keeps icon+title glued together. */
    cursor: pointer;
    padding-block: 4px;
  }

  /* a real element (added by JS, once per toggleable column) rather than a
     ::after border-trick — so it can carry its own round background chip,
     matching the top-level .mk-nav__caret language instead of a bare line */
  .mk-megamenu__col-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--mk-color-bg-muted);
    color: var(--mk-color-text-soft);
    transition: background-color var(--mk-transition);
  }

  .mk-megamenu__col-caret svg {
    width: 10px;
    height: 10px;
    transform: rotate(90deg);
    transition: transform var(--mk-transition);
  }

  .mk-megamenu__col.is-col-open .mk-megamenu__col-caret svg {
    transform: rotate(0deg);
  }

  /* closed by default; indented from the inline-start edge (the right, on
     this RTL-only site) plus a rail, so an open sub-list visibly reads as a
     THIRD, nested level rather than more items of the column itself */
  .mk-megamenu__col > .mk-megamenu__list {
    display: none;
    margin-inline-start: 10px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--mk-color-border);
  }

  .mk-megamenu__col.is-col-open > .mk-megamenu__list {
    display: flex;
  }
}