/* MK Store theme styles. Generated by tools/build.mjs from theme/styles/ (00-tokens.css, 01-base.css, 02-controls.css, 03-tones.css, 10-header.css, 20-hero.css, 21-trust.css, 22-section-head.css, 30-products.css, 31-empty.css, 40-steps.css, 41-spotlight.css, 42-reviews.css, 43-faq.css, 44-band.css, 45-page-header.css, 46-channels.css, 47-media.css, 50-product-page.css, 60-footer.css, 80-sellauth.css, 90-motion-rtl.css). Do not edit here. */

/*
 * MK Store: SellAuth theme styles.
 * Loaded after Bootstrap and pro.css, before custom.css (custom.css is for shop owners).
 *
 * Colours come from tokens only. layouts/master.njk sets --mk-red, --mk-bg, --mk-bg-1 and
 * --mk-line from the builder, and data-mk-mode="light" when the builder background is light.
 * Everything else (hover, text-on-dark red, borders) is derived here with color-mix().
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  --mk-red: #d0141c;
  --mk-bg: #0b0b0d;
  --mk-bg-1: #141417;
  --mk-line: #2a2b30;

  --mk-bg-2: color-mix(in oklab, var(--mk-bg-1), var(--mk-ink) 5%);
  --mk-bg-3: color-mix(in oklab, var(--mk-bg-1), var(--mk-ink) 10%);
  --mk-line-strong: #6a6b72;
  --mk-ink: #f4f3ef;
  --mk-ink-2: #b4b5ba;
  --mk-ink-3: #8f9097;
  --mk-on-ink: #0b0b0d;

  --mk-red-hover: color-mix(in oklab, var(--mk-red), #fff 14%);
  --mk-red-ink: color-mix(in oklab, var(--mk-red), #fff 42%);
  --mk-on-red: #fff;
  --mk-steel: #2445a6;
  --mk-on-steel: #fff;
  --mk-silver: #dcdbd6;
  --mk-on-silver: #111113;
  --mk-carbon: #1c1d21;
  --mk-blue: #8fb0ff;
  --mk-gold: #f5c451;
  --mk-danger: #ff6b75;
  --mk-focus: #f4f3ef;
  --mk-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8);
  --mk-shadow-up: 0 -16px 32px -16px rgb(0 0 0 / 0.6);

  --mk-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mk-font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mk-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --mk-slant: -14deg;
  --mk-ease: cubic-bezier(0.7, 0, 0.2, 1);
  --mk-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mk-fast: 160ms;
  --mk-slow: 520ms;
  --mk-nav-h: 64px;
  --mk-wrap: 1280px;
  --mk-gutter: 32px;

  /* Bootstrap and pro.css read these. */
  --bs-body-bg: var(--mk-bg);
  --bs-body-color: var(--mk-ink);
  --bs-emphasis-color: var(--mk-ink);
  --bs-secondary-color: var(--mk-ink-2);
  --bs-tertiary-color: var(--mk-ink-3);
  --bs-border-color: var(--mk-line);
  --bs-gray-bg: var(--mk-bg-2);
  --bs-link-color: var(--mk-ink);
  --bs-link-hover-color: var(--mk-ink);
  --bs-body-font-family: var(--mk-font-text);
  --bs-font-sans-serif: var(--mk-font-text);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --altcha-color-base: var(--mk-bg-2);
  --altcha-color-border: var(--mk-line);
  --altcha-color-text: var(--mk-ink);
  color-scheme: dark;
}

/* Light mode: picked automatically when the builder background colour is light. */
:root[data-mk-mode="light"] {
  --mk-bg: #f3f2ef;
  --mk-bg-1: #ffffff;
  --mk-line: #d6d4ce;
  --mk-line-strong: #77767a;
  --mk-ink: #111113;
  --mk-ink-2: #45464b;
  --mk-ink-3: #5f6066;
  --mk-on-ink: #f3f2ef;
  --mk-red-ink: color-mix(in oklab, var(--mk-red), #000 18%);
  --mk-carbon: #e6e5e1;
  --mk-blue: #1f56c4;
  --mk-gold: #b7860b;
  --mk-danger: #b4232f;
  --mk-focus: #111113;
  --mk-shadow: 0 24px 48px -28px rgb(26 29 36 / 0.45);
  --mk-shadow-up: 0 -12px 28px -16px rgb(26 29 36 / 0.22);
  color-scheme: light;
}

/* Accent used as text: clamp its lightness so any builder colour stays readable (4.5:1+). */
@supports (color: oklch(from red l c h)) {
  :root {
    --mk-red-ink: oklch(from var(--mk-red) max(l, 0.72) c h);
  }

  :root[data-mk-mode="light"] {
    --mk-red-ink: oklch(from var(--mk-red) min(l, 0.5) c h);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  background: var(--mk-bg);
  scroll-padding-top: calc(var(--mk-nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: var(--mk-font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

::selection {
  background: var(--mk-red);
  color: var(--mk-on-red);
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mk-focus);
  outline-offset: 3px;
}

[x-cloak] {
  display: none !important;
}

main {
  display: block;
}

/* #app is pro.css's .flex-wrapper (a full-height column); the main area takes the spare height. */
.mk-app {
  justify-content: flex-start;
}

.mk-main {
  flex: 1 0 auto;
}

/* Set while the mobile menu is open. */
html.mk-lock,
html.mk-lock body {
  overflow: hidden;
}

main:focus {
  outline: none;
}

.mk-skip {
  position: absolute;
  top: -64px;
  inset-inline-start: 16px;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--mk-ink);
  color: var(--mk-on-ink);
  font: 600 13px/16px var(--mk-font-text);
  text-decoration: none;
}

.mk-skip:focus {
  top: 16px;
}

.mk-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.mk-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mk-wrap);
  margin: 0 auto;
  padding: 0 var(--mk-gutter);
}

.mk-section {
  padding-top: 96px;
}

.mk-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mk-stack-tight {
  gap: 24px;
}

.mk-section-tight {
  padding-top: 40px;
}

.mk-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 960px) {
  .mk-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --mk-gutter: 16px;
  }

  .mk-section {
    padding-top: 64px;
  }

  .mk-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Type
   ========================================================================== */

.mk-display {
  margin: 0;
  font-family: var(--mk-font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mk-label {
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-eyebrow {
  margin: 0 0 8px;
  color: var(--mk-red-ink);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mk-mono {
  font-family: var(--mk-font-mono);
  font-weight: 500;
}

.mk-muted {
  color: var(--mk-ink-2);
}

.mk-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--mk-ink);
  font: 600 15px/20px var(--mk-font-text);
  text-decoration: none;
}

.mk-link .mk-arrow {
  transition: transform var(--mk-fast) var(--mk-ease);
}

.mk-link:hover {
  color: var(--mk-ink);
}

.mk-link:hover .mk-arrow {
  transform: translateX(4px);
}

.mk-tl {
  color: var(--mk-ink-2);
  text-decoration: none;
  transition: color var(--mk-fast) var(--mk-ease);
}

.mk-tl:hover {
  color: var(--mk-ink);
}

.mk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mk-ink-3);
  font: 500 14px/20px var(--mk-font-text);
}

.mk-crumbs a {
  display: inline-block;
  padding: 4px 0;
  color: var(--mk-ink-2);
  text-decoration: none;
}

.mk-crumbs a:hover {
  color: var(--mk-ink);
}

.mk-crumbs [aria-current] {
  color: var(--mk-ink);
}

/* Phones: links in running lists get 44px tall targets without changing the layout. */
@media (max-width: 640px) {
  .mk-crumbs a,
  .mk-footer-cols a,
  .mk-buy-head .mk-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
  }

  /* Short breadcrumb: only the way back up ("‹ FiveM"). */
  .mk-crumbs li {
    display: none;
  }

  .mk-crumbs li:nth-last-child(3) {
    display: flex;
  }

  .mk-crumbs li:nth-last-child(3) a::before {
    content: "‹";
    margin-inline-end: 6px;
    font-size: 18px;
    line-height: 1;
  }
}

/* Form field labels: sentence case. */
.mk-field .mk-label,
.mk-sort .mk-label,
.mk-menu-field .mk-label {
  color: var(--mk-ink-2);
  font: 600 14px/20px var(--mk-font-text);
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   Buttons (slanted parallelogram drawn by ::before)
   ========================================================================== */

.mk-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  margin-inline: 8px;
  padding: 14px 32px;
  border: 0;
  background: none;
  color: var(--mk-ink);
  font: 600 15px/20px var(--mk-font-text);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mk-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(var(--mk-slant));
  transition: transform var(--mk-fast) var(--mk-ease), background-color var(--mk-fast) var(--mk-ease);
}

.mk-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.mk-btn .mk-arrow,
.mk-btn .mk-i-arrow {
  transition: transform var(--mk-fast) var(--mk-ease);
}

.mk-btn:hover .mk-arrow,
.mk-btn:hover .mk-i-arrow {
  transform: translateX(4px);
}

.mk-btn:hover::before {
  transform: skewX(var(--mk-slant)) scaleX(1.03);
}

.mk-btn:active::before {
  transform: skewX(var(--mk-slant)) scaleX(0.98);
}

.mk-btn-go,
.mk-btn-go:hover {
  color: var(--mk-on-red);
}

.mk-btn-go::before {
  background: var(--mk-red);
}

.mk-btn-go:hover::before {
  background: var(--mk-red-hover);
}

.mk-btn-primary,
.mk-btn-primary:hover {
  color: var(--mk-on-ink);
}

.mk-btn-primary::before {
  background: var(--mk-ink);
}

.mk-btn-primary:hover::before {
  background: color-mix(in oklab, var(--mk-ink), var(--mk-bg) 12%);
}

.mk-btn-ghost,
.mk-btn-ghost:hover {
  color: var(--mk-ink);
}

.mk-btn-ghost::before {
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
}

.mk-btn-ghost:hover::before {
  background: var(--mk-bg-2);
}

.mk-btn-sm {
  min-height: 40px;
  padding: 10px 22px;
  font-size: 14px;
}

.mk-btn-lg {
  min-height: 56px;
  padding: 18px 40px;
  font-size: 16px;
}

.mk-btn-block {
  display: flex;
  width: calc(100% - 16px);
}

.mk-btn:disabled,
.mk-btn.is-disabled {
  color: var(--mk-ink-3);
  cursor: not-allowed;
}

.mk-btn:disabled::before,
.mk-btn.is-disabled::before {
  background: var(--mk-bg-2);
  box-shadow: none;
  transform: skewX(var(--mk-slant));
}

.mk-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mk-ink);
  cursor: pointer;
}

.mk-icon-btn svg {
  width: 20px;
  height: 20px;
}

.mk-icon-btn:hover {
  color: var(--mk-ink);
  background: var(--mk-bg-2);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
  color: var(--mk-ink-2);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.mk-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mk-badge-solid {
  background: var(--mk-ink);
  box-shadow: none;
  color: var(--mk-on-ink);
}

.mk-badge-sale {
  background: var(--mk-red);
  box-shadow: none;
  color: var(--mk-on-red);
}

.mk-badge-warn {
  box-shadow: inset 0 0 0 1px var(--mk-red-ink);
  color: var(--mk-red-ink);
}

.mk-badge-live {
  box-shadow: inset 0 0 0 1px var(--mk-blue);
  color: var(--mk-blue);
}

/* ==========================================================================
   Form controls
   ========================================================================== */

.mk-input,
.mk-select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--mk-line-strong);
  border-radius: 0;
  background: var(--mk-bg-1);
  color: var(--mk-ink);
  font: 400 16px/24px var(--mk-font-text);
}

.mk-input::placeholder {
  color: var(--mk-ink-3);
}

.mk-input:focus,
.mk-select:focus {
  border-color: var(--mk-ink);
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
}

.mk-select {
  width: auto;
  padding-inline-end: 40px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mk-ink-2) 50%), linear-gradient(135deg, var(--mk-ink-2) 50%, transparent 50%);
  background-position: right 19px center, right 14px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.mk-mini-select {
  height: 36px;
  padding-block: 0;
  padding-inline: 10px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  appearance: none;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--mk-ink-2) 50%), linear-gradient(135deg, var(--mk-ink-2) 50%, transparent 50%);
  background-position: right 13px center, right 9px center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  color: var(--mk-ink);
  font: 500 13px/16px var(--mk-font-mono);
  cursor: pointer;
}

.mk-mini-select:hover {
  border-color: var(--mk-line-strong);
}

.mk-mini-select option {
  background: var(--mk-bg-1);
  color: var(--mk-ink);
}

/* ==========================================================================
   Tones, full-bleed bands, ghost type
   The hero's panel colours (red, steel, silver) plus carbon, reused by the
   sections below it so the page keeps the hero's language all the way down.
   ========================================================================== */

.mk-tone-red {
  --tone: var(--mk-red);
  --on-tone: var(--mk-on-red);
}

.mk-tone-steel {
  --tone: var(--mk-steel);
  --on-tone: var(--mk-on-steel);
}

.mk-tone-silver {
  --tone: var(--mk-silver);
  --on-tone: var(--mk-on-silver);
}

.mk-tone-carbon {
  --tone: var(--mk-carbon);
  --on-tone: var(--mk-ink);
}

/* A full-width band with the hero's slanted edges (the shape its panels take on phones). */
.mk-bleed {
  --cut: clamp(28px, 3.6vw, 56px);
  position: relative;
  overflow: hidden;
  margin-top: 96px;
  padding: calc(var(--cut) + 72px) 0;
  background: var(--tone, var(--mk-carbon));
  color: var(--mk-ink);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

.mk-section.mk-bleed {
  padding-top: calc(var(--cut) + 72px);
}

/* Two bands in a row meet on one diagonal seam (their slants are parallel). */
.mk-bleed + .mk-bleed {
  margin-top: calc(-1 * var(--cut) - 1px);
}

.mk-bleed > .mk-wrap {
  position: relative;
  z-index: 1;
}

/* Inside a band, text, hairlines, buttons and stars read their colours from these. */
.mk-bleed.mk-tone-red,
.mk-bleed.mk-tone-steel {
  --mk-ink: var(--on-tone);
  --mk-ink-2: color-mix(in oklab, var(--mk-ink) 84%, transparent);
  --mk-ink-3: color-mix(in oklab, var(--mk-ink) 68%, transparent);
  --mk-on-ink: var(--tone);
  --mk-line: color-mix(in oklab, var(--mk-ink) 24%, transparent);
  --mk-line-strong: color-mix(in oklab, var(--mk-ink) 55%, transparent);
  --mk-bg-1: color-mix(in oklab, #000 16%, transparent);
  --mk-bg-2: color-mix(in oklab, var(--mk-ink) 10%, transparent);
  --mk-bg-3: color-mix(in oklab, var(--mk-ink) 16%, transparent);
  --mk-red-ink: var(--mk-ink);
  --mk-focus: var(--mk-ink);
  --mk-shadow: none;
}

.mk-bleed.mk-tone-silver {
  --mk-ink: var(--on-tone);
  --mk-ink-2: #45464b;
  --mk-ink-3: #5f6066;
  --mk-on-ink: #f3f2ef;
  --mk-line: color-mix(in oklab, var(--mk-ink) 18%, transparent);
  --mk-line-strong: color-mix(in oklab, var(--mk-ink) 48%, transparent);
  --mk-bg-1: color-mix(in oklab, #fff 40%, transparent);
  --mk-bg-2: color-mix(in oklab, var(--mk-ink) 7%, transparent);
  --mk-bg-3: color-mix(in oklab, var(--mk-ink) 12%, transparent);
  --mk-red-ink: color-mix(in oklab, var(--mk-red), #000 18%);
  --mk-gold: #b7860b;
  --mk-focus: var(--mk-ink);
  --mk-shadow: none;
}

@supports (color: oklch(from red l c h)) {
  .mk-bleed.mk-tone-silver {
    --mk-red-ink: oklch(from var(--mk-red) min(l, 0.5) c h);
  }
}

/* The red index dot has no contrast on a red or steel band. */
.mk-bleed.mk-tone-red .mk-kicker::before,
.mk-bleed.mk-tone-steel .mk-kicker::before {
  background: var(--mk-ink);
}

/* Outlined display type in the background (the hero's ghost label). Each use sets its own
   position and size. */
.mk-ghost {
  position: absolute;
  z-index: 0;
  color: transparent;
  font-family: var(--mk-font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--mk-ink);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* Red details would vanish on a red band: draw them in the band's text colour instead. */
.mk-bleed.mk-tone-red .mk-step-bar,
.mk-bleed.mk-tone-red .mk-card::after,
.mk-bleed.mk-tone-red .mk-card-cat::before {
  background: var(--mk-ink);
}

.mk-bleed.mk-tone-red .mk-review-reply {
  border-color: var(--mk-ink);
}

/* ==========================================================================
   Header: announcement, navbar, language menu, search, phone menu
   ========================================================================== */

.mk-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.mk-announce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  padding: 10px 16px;
  background: var(--mk-red);
  color: var(--mk-on-red);
  font: 600 14px/20px var(--mk-font-text);
  text-align: center;
}

.mk-announce a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Solid background (no backdrop-filter): a filter would trap the menu's fixed backdrop inside the bar. */
.mk-nav {
  position: relative;
  background: var(--mk-bg);
  border-bottom: 1px solid var(--mk-line);
}

.mk-nav-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--mk-nav-h);
  padding: 0 var(--mk-gutter);
}

.mk-wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--mk-ink);
  font: 800 17px/1 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.mk-wordmark:hover {
  color: var(--mk-ink);
}

.mk-wordmark i {
  display: inline-block;
  width: 5px;
  height: 0.95em;
  margin: 0 7px;
  background: var(--mk-red);
  transform: skewX(var(--mk-slant));
}

.mk-wordmark img {
  width: auto;
  height: 28px;
  margin-inline-end: 12px;
}

.mk-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.mk-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mk-ink-2);
  font: 600 15px/20px var(--mk-font-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--mk-fast) var(--mk-ease);
}

.mk-nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  background: var(--mk-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mk-fast) var(--mk-ease);
}

.mk-nav-link:hover,
.mk-nav-link[aria-current="page"] {
  color: var(--mk-ink);
}

.mk-nav-link[aria-current="page"]::after,
.mk-nav-link:hover::after {
  transform: scaleX(1);
}

.mk-nav-link.is-broken,
.mk-menu-link.is-broken {
  color: var(--mk-red-ink);
  text-decoration: line-through;
}

.mk-nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.mk-nav-tools .mk-nav-link {
  margin: 0 8px;
}

.mk-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 8px 4px;
  color: var(--mk-ink);
  font: 600 15px/20px var(--mk-font-text);
  text-decoration: none;
}

.mk-cart:hover {
  color: var(--mk-ink);
}

.mk-cart svg {
  width: 20px;
  height: 20px;
}

.mk-cart b {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--mk-bg-3);
  color: var(--mk-ink);
  font: 500 12px/1 var(--mk-font-mono);
  transition: background-color var(--mk-fast) var(--mk-ease);
}

.mk-cart b.is-full {
  background: var(--mk-red);
  color: var(--mk-on-red);
}

/* Language menu: links, so choosing one is a deliberate click (no navigation on arrow keys). */
.mk-lang {
  position: relative;
}

.mk-lang summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--mk-ink);
  font: 500 13px/16px var(--mk-font-mono);
  list-style: none;
  cursor: pointer;
}

.mk-lang summary::-webkit-details-marker {
  display: none;
}

.mk-lang summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid var(--mk-ink-2);
  border-bottom: 1.5px solid var(--mk-ink-2);
  transform: rotate(45deg);
}

.mk-lang-list {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 30;
  min-width: 180px;
  max-height: 60vh;
  margin: 4px 0 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--mk-line);
  background: var(--mk-bg-1);
  box-shadow: var(--mk-shadow);
  list-style: none;
}

.mk-lang-list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--mk-ink-2);
  text-decoration: none;
}

.mk-lang-list a:hover,
.mk-lang-list a[aria-current] {
  background: var(--mk-bg-2);
  color: var(--mk-ink);
}

.mk-menu-btn,
.mk-menu,
.mk-menu-backdrop {
  display: none;
}

.mk-search {
  border-top: 1px solid var(--mk-line);
  background: var(--mk-bg);
}

.mk-search form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.mk-search .mk-input {
  flex: 1;
}

@media (max-width: 1080px) {
  .mk-nav-bar,
  .mk-nav-links {
    gap: 20px;
  }
}

/* Phones and small tablets: links move into the menu panel. */
@media (max-width: 900px) {
  .mk-nav-bar {
    gap: 8px;
  }

  .mk-nav-links,
  .mk-only-desktop {
    display: none;
  }

  .mk-menu-btn {
    display: inline-grid;
    margin-inline-end: -6px;
  }

  .mk-nav-bar {
    padding-inline-end: calc(var(--mk-gutter) - 4px);
  }

  .mk-cart span {
    display: none;
  }

  .mk-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgb(0 0 0 / 0.6);
  }

  .mk-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--mk-nav-h));
    max-height: var(--mk-menu-room, calc(100dvh - var(--mk-nav-h)));
    overflow-y: auto;
    padding: 8px var(--mk-gutter) 24px;
    border-bottom: 1px solid var(--mk-line);
    background: var(--mk-bg);
  }

  .mk-menu-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--mk-line);
    color: var(--mk-ink);
    font: 600 17px/24px var(--mk-font-text);
    text-decoration: none;
  }

  .mk-menu-link:hover {
    color: var(--mk-ink);
  }

  .mk-menu-link svg {
    width: 20px;
    height: 20px;
    margin-inline-end: 10px;
  }

  .mk-menu-link[aria-current="page"] {
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--mk-red);
  }

  .mk-menu-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding-top: 20px;
  }

  .mk-menu-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--mk-ink-3);
  }

  .mk-menu-field .mk-mini-select {
    min-width: 120px;
    height: 44px;
    border-color: var(--mk-line-strong);
  }

  .mk-menu-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
  }

  .mk-menu-langs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--mk-line-strong);
    color: var(--mk-ink-2);
    text-decoration: none;
  }

  .mk-menu-langs a[aria-current] {
    border-color: var(--mk-ink);
    color: var(--mk-ink);
  }
}

/* Small phones (320–360px): keep the bar's contents inside the screen. */
@media (max-width: 360px) {
  .mk-wordmark {
    font-size: 15px;
  }

  .mk-nav-tools {
    gap: 0;
  }

  .mk-cart {
    padding-inline: 4px 0;
  }
}

/* ==========================================================================
   Split hero: one slanted panel per category (components/mk-hero.njk).
   Hover widens a panel and floods it with its colour; a click spreads it
   full width, then follows its link (assets/mk.js). Always dark.
   ========================================================================== */

.mk-hero-wrap {
  container-type: inline-size;
}

.mk-hero {
  --cut: 160px;
  --hero-carbon: #0a0a0b;
  --hero-ink: #f5f4f1;
  position: relative;
  height: var(--mk-hero-h, 680px);
  min-height: 480px;
  overflow: hidden;
  background: var(--hero-carbon);
  color: var(--hero-ink);
}

.mk-hero-short {
  --mk-hero-h: 560px;
}

.mk-hero-medium {
  --mk-hero-h: 680px;
}

.mk-hero-tall {
  --mk-hero-h: calc(100vh - var(--mk-nav-h));
}

/* Film grain. */
.mk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The slants are drawn left to right in every language. */
.mk-hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  background: #2d2d31;
  direction: ltr;
}

.mk-hero-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(-1 * var(--cut) + 1px);
  overflow: hidden;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  background: var(--hero-carbon);
  color: var(--hero-ink);
  text-decoration: none;
  cursor: pointer;
  transition: flex-grow 700ms var(--mk-ease), color 300ms var(--mk-ease);
}

.mk-hero-panel:hover {
  color: var(--hero-ink);
}

.mk-hero-panel:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.mk-hero-panel:last-child {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
}

.mk-hero-panel:only-child {
  clip-path: none;
}

/* Builder only: the panel's category doesn't exist yet (it links to all products meanwhile). */
.mk-hero-panel.is-broken .mk-hero-inner {
  outline: 2px dashed currentColor;
  outline-offset: 12px;
}

.mk-hero-red {
  --accent: var(--mk-red);
  --on-accent: var(--mk-on-red);
}

.mk-hero-steel {
  --accent: #12224a;
  --on-accent: #f5f4f1;
}

.mk-hero-silver {
  --accent: #e6e5e2;
  --on-accent: #111113;
}

.mk-hero-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: inset(calc(100% - 3px) 0 0 0);
  transition: clip-path 700ms var(--mk-ease);
}

.mk-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: grayscale(1) contrast(1.1);
  transform: scale(1.08);
  transition: transform 1200ms var(--mk-ease), opacity 500ms var(--mk-ease), filter 500ms var(--mk-ease);
}

.mk-hero-ghost {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  color: transparent;
  font: 800 clamp(120px, 20cqw, 340px)/1 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px currentColor;
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 500ms var(--mk-ease), transform 900ms var(--mk-ease);
}

.mk-hero-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 80%;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform 700ms var(--mk-ease), opacity 400ms var(--mk-ease);
}

[dir="rtl"] .mk-hero-inner {
  direction: rtl;
}

.mk-hero-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b8bbc2;
  font: 500 12px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mk-hero-index::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mk-red);
}

.mk-hero-title {
  margin: 0;
  color: inherit;
  font: 700 clamp(36px, 5.2cqw, 88px)/0.95 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mk-hero-eyebrow {
  font: 600 11px/16px var(--mk-font-text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.62;
}

.mk-hero-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 700ms var(--mk-ease), opacity 300ms var(--mk-ease);
}

.mk-hero-reveal > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding-top: 12px;
}

.mk-hero-desc {
  max-width: 34ch;
  margin: 0;
  font: 400 16px/24px var(--mk-font-text);
  white-space: normal;
  opacity: 0.82;
}

.mk-hero-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background: var(--on-accent);
  color: var(--accent);
  font: 600 11px/16px var(--mk-font-text);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mk-hero-go span {
  transition: transform 300ms var(--mk-ease);
}

.mk-hero-panel:hover .mk-hero-go span {
  transform: translateX(4px);
}

.mk-hero-stats {
  font: 500 11px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Hover or focus: the others shrink, the chosen panel widens and floods with its colour. */
.mk-hero-track:hover .mk-hero-panel,
.mk-hero-track:focus-within .mk-hero-panel {
  flex-grow: 0.72;
}

.mk-hero-track:hover .mk-hero-panel .mk-hero-inner,
.mk-hero-track:focus-within .mk-hero-panel .mk-hero-inner {
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(0.6);
}

.mk-hero-track:hover .mk-hero-panel .mk-hero-eyebrow,
.mk-hero-track:focus-within .mk-hero-panel .mk-hero-eyebrow {
  visibility: hidden;
}

.mk-hero-track .mk-hero-panel:is(:hover, :focus-visible, .is-active) .mk-hero-eyebrow {
  visibility: visible;
}

.mk-hero-track .mk-hero-panel:is(:hover, :focus-visible, .is-active) {
  flex-grow: 1.9;
  color: var(--on-accent);
}

.mk-hero-track .mk-hero-panel:is(:hover, :focus-visible, .is-active) .mk-hero-inner {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.mk-hero-panel:is(:hover, :focus-visible, .is-active) .mk-hero-fill {
  clip-path: inset(0 0 0 0);
}

.mk-hero-panel.is-light:is(:hover, :focus-visible, .is-active) .mk-hero-index {
  color: #5d6068;
}

.mk-hero-red:is(:hover, :focus-visible, .is-active) .mk-hero-index {
  color: var(--mk-on-red);
}

.mk-hero-red:is(:hover, :focus-visible, .is-active) .mk-hero-index::before {
  background: var(--mk-on-red);
}

/* A custom colour from the builder: the index follows the text colour picked for it. */
.mk-hero-panel.has-color:is(:hover, :focus-visible, .is-active) .mk-hero-index {
  color: color-mix(in oklab, var(--on-accent) 72%, var(--accent));
}

.mk-hero-panel.has-color:is(:hover, :focus-visible, .is-active) .mk-hero-index::before {
  background: var(--on-accent);
}

.mk-hero-panel:is(:hover, :focus-visible, .is-active) .mk-hero-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mk-hero-panel:is(:hover, :focus-visible, .is-active) .mk-hero-ghost {
  opacity: 0.3;
  transform: translateX(-46%);
}

.mk-hero-panel:is(:hover, :focus-visible) .mk-hero-img {
  opacity: 0.5;
  filter: none;
  mix-blend-mode: luminosity;
  transform: scale(1);
}

/* "Photo" images (builder): the picture itself, darkened so the title reads; on hover it takes
   the panel's colour like a subtle image does. */
.mk-hero-panel.has-photo .mk-hero-img {
  opacity: 0.9;
  filter: brightness(0.5) saturate(1.05);
  transform: scale(1.04);
}

.mk-hero-panel.has-photo:is(:hover, :focus-visible, .is-active) .mk-hero-img {
  opacity: 0.55;
  filter: none;
  mix-blend-mode: luminosity;
  transform: scale(1);
}

.mk-hero-panel:focus-visible {
  outline: none;
}

.mk-hero-panel:focus-visible .mk-hero-go {
  outline: 2px solid var(--on-accent);
  outline-offset: 3px;
}

/* Bottom corners: a live line and a hint. */
.mk-hero-meta {
  position: absolute;
  right: 32px;
  bottom: 24px;
  left: 32px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgb(245 244 241 / 0.72);
  font: 500 11px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 300ms var(--mk-ease);
}

.mk-hero-meta > span {
  transition: color 400ms var(--mk-ease);
}

.mk-hero:is([data-tone="silver"], [data-tone="light"]) .mk-hero-meta > span:last-child {
  color: rgb(17 17 19 / 0.72);
}

.mk-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 8px;
  border-radius: 999px;
  background: #6f9bff;
  vertical-align: 1px;
  animation: mk-pulse 2.4s var(--mk-ease) infinite;
}

/* Intro: panels rise in one after another (assets/mk.js removes .is-intro afterwards). */
@keyframes mk-panel-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

@keyframes mk-rise {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes mk-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.mk-hero.is-intro .mk-hero-panel {
  animation: mk-panel-in 900ms var(--mk-ease) both;
  animation-delay: calc(var(--i) * 110ms);
}

.mk-hero.is-intro .mk-hero-inner {
  animation: mk-rise 800ms var(--mk-ease) both;
  animation-delay: calc(400ms + var(--i) * 110ms);
}

.mk-hero.is-intro .mk-hero-meta {
  animation: mk-fade 600ms var(--mk-ease) 700ms both;
}

/* Launch: the chosen panel spreads full width before the page changes. */
.mk-hero.is-launching .mk-hero-panel {
  flex-grow: 0.0001;
}

.mk-hero.is-launching .mk-hero-panel.is-active {
  flex-grow: 1;
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: flex-grow 700ms var(--mk-ease), clip-path 700ms var(--mk-ease), margin 700ms var(--mk-ease);
}

.mk-hero.is-launching .mk-hero-meta {
  opacity: 0;
}

.mk-hero.is-launching:is([data-tone="silver"], [data-tone="light"]) .mk-hero-meta > span {
  color: rgb(17 17 19 / 0.72);
}

/* Phones: the panels stack, slanted top and bottom. */
@container (max-width: 720px) {
  .mk-hero {
    --cut: 48px;
  }

  .mk-hero-track {
    flex-direction: column;
  }

  .mk-hero-panel,
  .mk-hero-panel:first-child,
  .mk-hero-panel:last-child {
    margin-top: calc(-1 * var(--cut) + 1px);
    margin-left: 0;
    clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  }

  .mk-hero-panel:first-child {
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  }

  .mk-hero-panel:last-child {
    clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  }

  .mk-hero-panel:only-child {
    clip-path: none;
  }

  .mk-hero-title {
    font-size: 40px;
  }

  .mk-hero-ghost {
    font-size: 140px;
  }

  .mk-hero-meta {
    display: none;
  }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.mk-trust {
  border-bottom: 1px solid var(--mk-line);
}

.mk-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  list-style: none;
}

.mk-trust-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 28px 24px;
  border-inline-start: 1px solid var(--mk-line);
}

.mk-trust-item:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.mk-trust-item svg {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  color: var(--mk-red-ink);
}

.mk-trust-item strong {
  color: var(--mk-ink);
  font: 600 15px/22px var(--mk-font-text);
}

.mk-trust-item p {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 21px;
}

@media (max-width: 1024px) {
  .mk-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-trust-item,
  .mk-trust-item:first-child {
    padding-block: 24px;
    padding-inline: 0 20px;
    border-inline-start: 0;
  }

  .mk-trust-item:nth-child(even) {
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--mk-line);
  }

  .mk-trust-item:nth-child(n + 3) {
    border-top: 1px solid var(--mk-line);
  }
}

@media (max-width: 560px) {
  .mk-trust-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-trust-item,
  .mk-trust-item:nth-child(even) {
    padding: 20px 0;
    border-inline-start: 0;
  }

  .mk-trust-item + .mk-trust-item {
    border-top: 1px solid var(--mk-line);
  }
}

/* ==========================================================================
   Section header (snippets/mk-section-head.njk)
   A mono index like the hero's "01 / 03" (a CSS counter: sections count up the
   page), a big display title and a slanted "View all" button.
   ========================================================================== */

.mk-main {
  counter-reset: mk-sec;
}

.mk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mk-line);
  counter-increment: mk-sec;
}

.mk-head-main {
  min-width: 0;
}

.mk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--mk-ink-3);
  font: 500 12px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-kicker::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mk-red);
}

.mk-kicker-num::before {
  content: counter(mk-sec, decimal-leading-zero);
}

.mk-kicker-num:not(:last-child)::after {
  content: "/";
  margin-inline-start: 10px;
  opacity: 0.5;
}

.mk-head h2 {
  margin: 0;
  color: var(--mk-ink);
  font: 800 clamp(32px, 4.6vw, 64px)/0.95 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.mk-head-sub {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--mk-ink-2);
  font-size: 16px;
  line-height: 26px;
}

.mk-head .mk-btn {
  margin-bottom: 2px;
}

/* Phones: the title takes the full width, the button follows it. */
@media (max-width: 640px) {
  .mk-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
  }

  .mk-head-main {
    align-self: stretch;
  }

  .mk-kicker {
    margin-bottom: 12px;
  }

  .mk-head .mk-btn {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Product grid, toolbar, card
   ========================================================================== */

.mk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px 28px;
}

.mk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mk-line-strong);
  background: none;
  color: var(--mk-ink-2);
  font: 600 13px/16px var(--mk-font-text);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mk-fast) var(--mk-ease), color var(--mk-fast) var(--mk-ease), border-color var(--mk-fast) var(--mk-ease);
}

.mk-chip:hover {
  border-color: var(--mk-ink);
  color: var(--mk-ink);
}

.mk-chip[aria-current="page"],
.mk-chip[aria-pressed="true"] {
  border-color: var(--mk-ink);
  background: var(--mk-ink);
  color: var(--mk-on-ink);
}

.mk-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
}

.mk-count {
  color: var(--mk-ink-3);
  font: 500 13px/16px var(--mk-font-mono);
}

.mk-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--mk-ink-3);
}

.mk-sort .mk-select {
  height: 40px;
  font-size: 14px;
}

.mk-more {
  display: flex;
  justify-content: center;
}

.mk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--mk-ink);
  text-decoration: none;
  transition: transform var(--mk-fast) var(--mk-ease);
}

/* A red slanted bar draws itself along the card's hairline on hover (the hero's stripe). */
.mk-card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 56px;
  height: 3px;
  background: var(--mk-red);
  transform: skewX(var(--mk-slant)) scaleX(0);
  transform-origin: left;
  transition: transform var(--mk-slow) var(--mk-ease);
}

.mk-card:hover {
  color: var(--mk-ink);
  transform: translateY(-4px);
}

.mk-card:hover::after,
.mk-card:focus-visible::after {
  transform: skewX(var(--mk-slant)) scaleX(1);
}

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

.mk-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--product-card-image-aspect-ratio, 4 / 3);
  background: var(--mk-bg-2);
}

.mk-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
  transition: transform 600ms var(--mk-ease-out);
}

.mk-card:hover .mk-card-media img {
  transform: scale(1.04);
}

.mk-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background:
    linear-gradient(var(--mk-slant-dir, 104deg), transparent 62%, var(--mk-red) 62%, var(--mk-red) 64%, transparent 64%, transparent 67%, color-mix(in oklab, var(--mk-red), transparent 50%) 67%, color-mix(in oklab, var(--mk-red), transparent 50%) 68%, transparent 68%),
    radial-gradient(120% 90% at 85% 0%, var(--mk-bg-3), var(--mk-bg-2) 60%);
  color: var(--mk-ink-3);
  font: 800 22px/1 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mk-card-flags {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mk-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--mk-line);
}

/* Category: the hero's index look (red dot, mono). */
.mk-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mk-ink-3);
  font: 500 12px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-card-cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mk-red);
}

.mk-card-title {
  margin: 2px 0 0;
  color: var(--mk-ink);
  font: 800 18px/22px var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mk-card-spec {
  color: var(--mk-ink-3);
  font: 500 13px/18px var(--mk-font-mono);
}

.mk-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.mk-card-foot .mk-price {
  min-width: 0;
}

.mk-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  color: var(--mk-ink);
  font: 500 20px/24px var(--mk-font-mono);
}

.mk-price small {
  flex-basis: 100%;
  color: var(--mk-ink-3);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mk-price s {
  color: var(--mk-ink-3);
  font-size: 14px;
}

.mk-card-cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--mk-ink);
  font: 600 15px/20px var(--mk-font-text);
}

.mk-card-cta .mk-arrow {
  transition: transform var(--mk-fast) var(--mk-ease);
}

.mk-card:hover .mk-card-cta .mk-arrow {
  transform: translateX(4px);
}

.mk-card-note {
  color: var(--mk-ink-3);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.06em;
}

.mk-card-note.is-warn {
  color: var(--mk-red-ink);
}

.mk-card.is-soldout .mk-card-media img {
  filter: grayscale(1);
  opacity: 0.5;
}

.mk-card.is-soldout .mk-price {
  color: var(--mk-ink-3);
}

/* Phones: two compact columns, the whole card is the tap target. */
@media (max-width: 640px) {
  .mk-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .mk-card-body {
    gap: 4px;
    padding: 10px 0 12px;
  }

  .mk-card-cat {
    font-size: 11px;
  }

  .mk-card-title {
    font-size: 14px;
    line-height: 18px;
  }

  .mk-card-spec,
  .mk-card-cta {
    display: none;
  }

  .mk-card-foot {
    padding-top: 8px;
  }

  .mk-price {
    font-size: 16px;
    line-height: 20px;
  }

  .mk-price s {
    font-size: 12px;
  }

  .mk-card-flags {
    top: 8px;
    inset-inline-start: 8px;
  }

  .mk-ph {
    padding: 12px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Products page: filters and pagination
   ========================================================================== */

.mk-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 20px;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 128px;
  color: var(--mk-ink-2);
}

.mk-field-grow {
  flex: 1 1 260px;
  width: auto;
}

.mk-field-icon {
  position: relative;
}

.mk-field-icon svg {
  position: absolute;
  top: 15px;
  inset-inline-start: 14px;
  width: 18px;
  height: 18px;
  color: var(--mk-ink-3);
  pointer-events: none;
}

.mk-field-icon .mk-input {
  padding-inline-start: 42px;
}

.mk-filters-actions {
  display: flex;
  align-items: center;
  gap: 8px 16px;
}

.mk-filters-toggle {
  display: none;
  gap: 8px;
}

.mk-filters-toggle svg {
  width: 16px;
  height: 16px;
}

.mk-filters-toggle[aria-expanded="true"] {
  border-color: var(--mk-ink);
  color: var(--mk-ink);
}

@media (max-width: 640px) {
  .mk-filters-toggle {
    display: inline-flex;
  }

  .mk-filters:not(.is-open) {
    display: none;
  }

  .mk-field {
    flex: 1 1 120px;
  }

  .mk-field.mk-field-grow {
    flex: 1 1 100%;
  }

  .mk-filters-actions {
    flex: 1 1 100%;
  }
}

/* Page links (snippets/mk-pagination.njk) */
.mk-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 8px;
  border-top: 1px solid var(--mk-line);
}

.mk-pagination-info {
  margin: 0;
  color: var(--mk-ink-3);
  font: 500 13px/20px var(--mk-font-mono);
}

.mk-pagination-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-page {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--mk-line-strong);
  color: var(--mk-ink);
  font: 500 14px/20px var(--mk-font-mono);
  text-decoration: none;
}

a.mk-page:hover {
  border-color: var(--mk-ink);
  background: var(--mk-bg-2);
  color: var(--mk-ink);
}

.mk-page.is-current {
  border-color: var(--mk-ink);
  background: var(--mk-ink);
  color: var(--mk-on-ink);
}

.mk-page.is-disabled,
.mk-page.is-gap {
  border-color: var(--mk-line);
  color: var(--mk-ink-3);
}

.mk-page-step {
  font-family: var(--mk-font-text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .mk-pagination {
    justify-content: center;
  }

  .mk-page-num {
    display: none;
  }
}

/* Phones: chips on one row, then count, sort and the Filters button on the next. */
@media (max-width: 640px) {
  .mk-toolbar {
    gap: 12px;
  }

  .mk-toolbar-end {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin-inline-start: 0;
  }

  .mk-count {
    display: none;
  }

  .mk-sort {
    flex: 1;
  }

  .mk-sort .mk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mk-sort .mk-select {
    width: 100%;
    height: 44px;
  }

  /* 44px touch targets. */
  .mk-chip {
    min-height: 44px;
  }

  .mk-filters-toggle {
    flex-shrink: 0;
    min-height: 44px;
  }

  .mk-section-tight {
    padding-top: 24px;
  }
}

/* ==========================================================================
   Empty states and builder hints
   ========================================================================== */

.mk-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 48px;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-empty h3,
.mk-empty-title {
  margin: 0;
  color: var(--mk-ink);
  font: 800 24px/1.1 var(--mk-font-display);
  font-stretch: 125%;
  text-transform: uppercase;
}

.mk-empty p {
  max-width: 52ch;
  margin: 0;
  color: var(--mk-ink-2);
}

.mk-empty .mk-btn {
  margin-top: 8px;
}

.mk-hint {
  padding: 16px 20px;
  border: 1px dashed var(--mk-line-strong);
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 22px;
}

.mk-hint strong {
  color: var(--mk-ink);
}

@media (max-width: 640px) {
  .mk-empty {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   Steps: ghost numerals and slanted hairlines instead of boxes
   ========================================================================== */

.mk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 280px;
  padding: 140px 36px 8px 0;
}

.mk-step + .mk-step {
  padding-inline-start: 36px;
}

/* Slanted hairline between steps (the hero's cut). */
.mk-step + .mk-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--mk-line);
  transform: skewX(var(--mk-slant));
}

.mk-step-ghost {
  top: 0;
  inset-inline-end: 36px;
  font-size: 120px;
}

.mk-step-bar {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--mk-red);
  transform: skewX(var(--mk-slant));
}

.mk-step h3 {
  margin: 4px 0 0;
  color: var(--mk-ink);
  font: 800 22px/26px var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mk-step p {
  max-width: 36ch;
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

/* Phones: a numbered list; the numeral sits in its own column, straight hairlines between steps. */
@media (max-width: 640px) {
  .mk-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-step,
  .mk-step + .mk-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    min-height: 0;
    padding: 24px 0;
  }

  .mk-step + .mk-step::before {
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .mk-step-ghost {
    position: static;
    grid-row: 1 / span 3;
    align-self: start;
    padding-top: 2px;
    font-size: 44px;
    opacity: 0.4;
  }

  .mk-step-bar,
  .mk-step h3,
  .mk-step p {
    grid-column: 2;
  }

  .mk-step h3 {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
  }

  .mk-step p {
    max-width: none;
  }
}

/* ==========================================================================
   Spotlight (one product, promoted): a full-bleed tone band (03-tones.css)
   ========================================================================== */

.mk-spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: center;
}

.mk-spot-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mk-spot .mk-kicker {
  margin: 0;
}

.mk-spot h2 {
  font-size: clamp(36px, 5.2vw, 72px);
  overflow-wrap: break-word;
}

.mk-spot-text {
  max-width: 46ch;
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 17px;
  line-height: 27px;
}

.mk-spot-list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-spot-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mk-line);
  font-size: 15px;
}

.mk-spot-list li:last-child {
  border-bottom: 0;
}

.mk-spot-list .mk-mono {
  color: var(--mk-ink-3);
  font-size: 13px;
  white-space: nowrap;
}

.mk-spot-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 8px;
}

.mk-spot .mk-price {
  color: inherit;
  font-size: 30px;
  line-height: 34px;
}

.mk-spot .mk-price s,
.mk-spot .mk-price small {
  color: var(--mk-ink-3);
}

/* The picture takes the hero panel's shape. */
.mk-spot-media {
  position: relative;
  aspect-ratio: var(--product-card-image-aspect-ratio, 4 / 3);
  background: var(--mk-bg-1);
  clip-path: polygon(48px 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
}

.mk-spot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
}

@media (max-width: 900px) {
  .mk-spot {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mk-spot-media {
    order: -1;
    clip-path: none;
  }
}

/* ==========================================================================
   Reviews: rating summary, stars, review cards (home band and /feedback)
   ========================================================================== */

.mk-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  margin: 0;
  color: var(--mk-ink-2);
}

.mk-rating strong {
  color: var(--mk-ink);
  font: 800 clamp(48px, 5vw, 72px)/0.9 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.03em;
}

.mk-rating-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
  font: 500 12px/16px var(--mk-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Two rows of five stars; the gold one is clipped to the exact rating (--mk-fill). */
.mk-stars {
  position: relative;
  display: inline-block;
  flex: none;
  align-self: flex-start;
  width: max-content;
  line-height: 0;
}

.mk-stars-row {
  display: inline-flex;
  gap: 2px;
  color: var(--mk-line-strong);
}

.mk-stars-fill {
  position: absolute;
  inset: 0;
  color: var(--mk-gold);
  clip-path: inset(0 calc(100% - var(--mk-fill, 100%)) 0 0);
}

[dir="rtl"] .mk-stars-fill {
  clip-path: inset(0 0 0 calc(100% - var(--mk-fill, 100%)));
}

.mk-stars svg {
  width: 16px;
  height: 16px;
}

.mk-rating .mk-stars svg {
  width: 18px;
  height: 18px;
}

/* Home: three quotes side by side, parted by slanted hairlines (no boxes). */
.mk-reviews-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.mk-review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 8px 36px 8px 0;
}

.mk-reviews-row .mk-review + .mk-review {
  padding-inline-start: 36px;
}

.mk-reviews-row .mk-review + .mk-review::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--mk-line);
  transform: skewX(var(--mk-slant));
}

.mk-review blockquote {
  margin: 0;
  color: var(--mk-ink);
  font: 500 18px/28px var(--mk-font-text);
  overflow-wrap: anywhere;
}

.mk-review-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.mk-review figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--mk-line);
  color: var(--mk-ink-3);
  font-size: 13px;
  line-height: 20px;
}

.mk-review figcaption b {
  color: var(--mk-ink-2);
  font-weight: 600;
}

.mk-review-reply {
  margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--mk-red);
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 22px;
}

.mk-review-reply b {
  display: block;
  color: var(--mk-ink);
  font-weight: 600;
}

/* /feedback: every review in a grid, each under its own hairline. */
.mk-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px 40px;
}

.mk-reviews-grid .mk-review {
  padding: 24px 0 0;
  border-top: 1px solid var(--mk-line);
}

/* Phones: one column, straight hairlines. */
@media (max-width: 760px) {
  .mk-reviews-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-reviews-row .mk-review,
  .mk-reviews-row .mk-review + .mk-review {
    padding: 24px 0;
  }

  .mk-reviews-row .mk-review + .mk-review::before {
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .mk-review blockquote {
    font-size: 17px;
    line-height: 26px;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.mk-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.mk-faq-layout.has-aside {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.mk-faq-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mk-faq-list {
  display: flex;
  flex-direction: column;
}

/* Each item draws its hairline (::before) and an ink line that sweeps across it when open (::after).
   Height and fade are animated in assets/mk.js; .is-closing is set while an item folds shut. */
.mk-faq-item {
  position: relative;
}

.mk-faq-item::before,
.mk-faq-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.mk-faq-item::before {
  background: var(--mk-line);
}

.mk-faq-item::after {
  background: var(--mk-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--mk-ease);
}

.mk-faq-item[open]:not(.is-closing)::after {
  transform: scaleX(1);
}

.mk-faq-item.is-closing::after {
  transform-origin: right center;
  transition-duration: 360ms;
}

.mk-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  color: var(--mk-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  list-style: none;
  cursor: pointer;
}

.mk-faq-item summary::-webkit-details-marker {
  display: none;
}

.mk-faq-topic {
  display: block;
  padding-bottom: 2px;
  color: var(--mk-ink-3);
}

.mk-faq-plus {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--mk-red-ink);
  transition: transform 420ms var(--mk-ease);
}

.mk-faq-plus::before,
.mk-faq-plus::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.mk-faq-plus::after {
  transform: rotate(90deg);
}

.mk-faq-item[open]:not(.is-closing) .mk-faq-plus {
  transform: rotate(135deg);
}

.mk-faq-answer {
  max-width: 68ch;
  margin: 0;
  padding: 0 0 24px;
  color: var(--mk-ink-2);
  font-size: 16px;
  line-height: 26px;
  white-space: pre-line;
}

.mk-panel-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-panel-box h2,
.mk-panel-box h3 {
  margin: 0;
  color: var(--mk-ink);
  font: 700 22px/28px var(--mk-font-text);
}

.mk-panel-box p {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

@media (max-width: 960px) {
  .mk-faq-layout.has-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Call-to-action band: a full-bleed tone band (03-tones.css) with a ghost word
   ========================================================================== */

.mk-band {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
}

.mk-band-ghost {
  inset-inline-end: -0.04em;
  bottom: -0.16em;
  font-size: clamp(120px, 14vw, 220px);
  opacity: 0.14;
}

.mk-band-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.mk-band h2 {
  font-size: clamp(36px, 5.4vw, 76px);
  overflow-wrap: break-word;
}

.mk-band p {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 18px;
  line-height: 28px;
}

.mk-band .mk-btn {
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .mk-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .mk-band .mk-btn {
    margin-bottom: 0;
  }
}

/* Optional picture behind the band, tinted with its colour. */
.mk-band-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: luminosity;
  pointer-events: none;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.mk-pagehead {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--mk-line);
}

.mk-pagehead.has-tone {
  border-bottom: 4px solid var(--tone);
}

.mk-pagehead-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.mk-pagehead h1 {
  margin-top: 8px;
  font-size: clamp(44px, 7vw, 96px);
  overflow-wrap: anywhere;
}

.mk-pagehead-lead {
  max-width: 56ch;
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 18px;
  line-height: 28px;
}

.mk-pagehead-sm .mk-pagehead-inner {
  gap: 12px;
  padding-top: 28px;
  padding-bottom: 36px;
}

.mk-pagehead-sm h1 {
  margin-top: 4px;
  font-size: clamp(34px, 4.4vw, 58px);
}

.mk-pagehead-sm .mk-pagehead-lead {
  font-size: 17px;
  line-height: 26px;
}

.mk-pagehead-meta {
  color: var(--mk-ink-3);
  font: 500 13px/16px var(--mk-font-mono);
}

.mk-stripes {
  position: absolute;
  top: -40px;
  right: 18%;
  bottom: -40px;
  width: 40px;
  pointer-events: none;
}

.mk-stripes::before,
.mk-stripes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--mk-red);
  transform: skewX(var(--mk-slant));
}

.mk-stripes::before {
  left: 0;
  width: 12px;
}

.mk-stripes::after {
  left: 26px;
  width: 4px;
}

@media (max-width: 640px) {
  .mk-stripes {
    right: 4%;
    opacity: 0.6;
  }
}

/* ==========================================================================
   Support channels
   ========================================================================== */

.mk-channels {
  padding-top: 48px;
}

/* Two to four channels share the row evenly; a single one becomes a wide horizontal card. */
.mk-chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.mk-chan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  padding: 28px 24px;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
  color: var(--mk-ink);
  text-decoration: none;
  transition: transform var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast) var(--mk-ease);
}

.mk-chan:hover {
  color: var(--mk-ink);
  box-shadow: inset 0 0 0 1px var(--mk-line-strong), var(--mk-shadow);
  transform: translateY(-3px);
}

.mk-chan svg {
  width: 28px;
  height: 28px;
  color: var(--mk-red-ink);
}

.mk-chan h2 {
  margin: 4px 0 0;
  color: var(--mk-ink);
  font: 700 22px/28px var(--mk-font-text);
}

.mk-chan p {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

.mk-chan-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.mk-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding: 28px 32px;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-strip-copy {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 4px;
}

.mk-strip-copy strong {
  color: var(--mk-ink);
  font-size: 17px;
  font-weight: 600;
}

.mk-strip-copy span {
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

@media (max-width: 640px) {
  .mk-strip {
    padding: 24px 20px;
  }
}

/* One working channel: a wide card (icon, text, action in a row) instead of a lone tile. */
.mk-chan-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.is-single .mk-chan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title foot" "icon text foot";
  align-items: center;
  gap: 4px 24px;
  min-height: 0;
}

.is-single .mk-chan > svg {
  grid-area: icon;
  width: 36px;
  height: 36px;
}

.is-single .mk-chan h2 {
  grid-area: title;
  margin: 0;
}

.is-single .mk-chan p {
  grid-area: text;
}

.is-single .mk-chan-foot {
  grid-area: foot;
  margin: 0;
}

@media (max-width: 640px) {
  .is-single .mk-chan {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "text text" "foot foot";
  }
}

/* ==========================================================================
   Image + text (components/mk-media.njk)
   ========================================================================== */

/* Split: the picture beside the text, cut with the hero's slant. */
.mk-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px 64px;
  align-items: center;
}

.mk-media.is-flipped .mk-media-copy {
  order: 2;
}

.mk-media.is-text-only {
  grid-template-columns: minmax(0, 1fr);
}

.mk-media-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.mk-media-copy .mk-kicker {
  margin: 0;
}

.mk-media-copy h2 {
  font-size: clamp(36px, 5vw, 68px);
  overflow-wrap: break-word;
}

.mk-media-text {
  max-width: 48ch;
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 17px;
  line-height: 27px;
  white-space: pre-line;
}

.mk-media-copy .mk-btn {
  margin-top: 8px;
}

.mk-media-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mk-bg-2);
  clip-path: polygon(56px 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
}

.mk-media-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1200ms var(--mk-ease);
}

.mk-media-pic:hover img {
  transform: scale(1);
}

/* Banner: the picture full width with the band's slanted edges; text over a dark shade. */
.mk-media-banner {
  --tone: #0a0a0b;
  --mk-ink: #f4f3ef;
  --mk-ink-2: rgb(244 243 239 / 0.86);
  --mk-ink-3: rgb(244 243 239 / 0.7);
  --mk-red-ink: #f4f3ef;
  --mk-focus: #f4f3ef;
  display: flex;
  align-items: flex-end;
  min-height: var(--mk-media-h, 560px);
  box-sizing: border-box;
}

.mk-media-short {
  --mk-media-h: 440px;
}

.mk-media-tall {
  --mk-media-h: 720px;
}

.mk-media-banner .mk-media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-media-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgb(10 10 11 / 0.88) 0%, rgb(10 10 11 / 0.6) 45%, rgb(10 10 11 / 0.15) 100%);
  pointer-events: none;
}

[dir="rtl"] .mk-media-banner::after {
  background: linear-gradient(260deg, rgb(10 10 11 / 0.88) 0%, rgb(10 10 11 / 0.6) 45%, rgb(10 10 11 / 0.15) 100%);
}

.mk-media-banner .mk-wrap {
  position: relative;
  z-index: 1;
}

.mk-media-banner .mk-media-copy {
  max-width: 640px;
}

@media (max-width: 900px) {
  .mk-media {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .mk-media .mk-media-pic {
    order: -1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
  }

  .mk-media.is-flipped .mk-media-copy {
    order: 0;
  }

  .mk-media-banner {
    min-height: 0;
    padding-top: calc(var(--cut) + 200px);
  }

  .mk-media-banner::after {
    background: linear-gradient(0deg, rgb(10 10 11 / 0.92) 0%, rgb(10 10 11 / 0.7) 55%, rgb(10 10 11 / 0.2) 100%);
  }
}

/* ==========================================================================
   Product page
   ========================================================================== */

.mk-pd-crumbs {
  padding-top: 20px;
  padding-bottom: 20px;
}

.mk-pd {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.mk-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 961px) {
  .mk-gallery {
    position: sticky;
    top: calc(var(--mk-nav-h) + 24px);
  }
}

.mk-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--product-page-image-aspect-ratio, 4 / 3);
  background: var(--mk-bg-2);
}

.mk-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
}

.mk-shot .mk-ph {
  font-size: clamp(32px, 5vw, 64px);
  padding: 32px;
}

.mk-shot-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font: 500 12px/16px var(--mk-font-mono);
}

.mk-shot-nav {
  position: absolute;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mk-fast) var(--mk-ease);
}

.mk-shot-nav svg {
  width: 18px;
  height: 18px;
}

.mk-shot-prev {
  left: 12px;
}

.mk-shot-next {
  right: 12px;
}

.mk-shot:hover .mk-shot-nav,
.mk-shot-nav:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .mk-shot-nav {
    opacity: 1;
  }
}

.mk-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mk-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--mk-bg-2);
  cursor: pointer;
}

.mk-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Every thumbnail at full strength; a hairline frame, and a solid one on the current image. */
.mk-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--mk-line);
  transition: box-shadow var(--mk-fast) var(--mk-ease);
}

.mk-thumb:hover::after {
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
}

.mk-thumb[aria-current="true"]::after {
  box-shadow: inset 0 0 0 2px var(--mk-ink);
}

.mk-buy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mk-buy-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mk-buy-head .mk-eyebrow {
  margin: 0;
  text-decoration: none;
}

.mk-buy-head h1 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.mk-buy-spec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mk-ink-2);
  font: 500 13px/18px var(--mk-font-mono);
}

.mk-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-blue);
}

.mk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mk-buy-lead {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

.mk-buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.mk-buy-amount {
  color: var(--mk-ink);
  font: 500 34px/40px var(--mk-font-mono);
}

.mk-buy-price s {
  color: var(--mk-ink-3);
  font: 500 16px/20px var(--mk-font-mono);
}

.mk-live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--mk-ink-2);
  font: 500 13px/18px var(--mk-font-mono);
}

.mk-live-stats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mk-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-blue);
  animation: mk-pulse 2.4s var(--mk-ease) infinite;
}

@keyframes mk-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.mk-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--mk-line);
  list-style: none;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 22px;
}

.mk-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mk-checks svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--mk-blue);
}

.mk-checks-row {
  flex: 1 1 420px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0;
  border-top: 0;
}

.mk-pd-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.mk-pd-info.has-aside {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.mk-pd-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.mk-prose {
  color: var(--mk-ink-2);
  font-size: 16px;
  line-height: 27px;
  overflow-wrap: anywhere;
}

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

.mk-prose :is(h1, h2, h3, h4, strong, b) {
  color: var(--mk-ink);
}

.mk-prose :is(h1, h2, h3, h4) {
  margin: 1.6em 0 0.6em;
  font-family: var(--mk-font-text);
  font-weight: 700;
  line-height: 1.25;
}

.mk-prose h2 {
  font-size: 24px;
}

.mk-prose h3 {
  font-size: 19px;
}

.mk-prose a {
  color: var(--mk-ink);
  text-underline-offset: 3px;
}

.mk-prose :is(ul, ol) {
  padding-inline-start: 22px;
}

.mk-prose li + li {
  margin-top: 6px;
}

.mk-prose img,
.mk-prose iframe,
.mk-prose video {
  max-width: 100%;
  height: auto;
}

.mk-prose table {
  width: 100%;
  border-collapse: collapse;
}

.mk-prose :is(td, th) {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--mk-line);
  text-align: start;
}

.mk-prose code {
  padding: 2px 6px;
  background: var(--mk-bg-2);
  color: var(--mk-ink);
  font: 500 0.9em var(--mk-font-mono);
}

.mk-aside {
  position: sticky;
  top: calc(var(--mk-nav-h) + 24px);
}

/* Buy bar: shown by assets/mk.js while the price and the buy buttons are off screen. */
.mk-buybar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--mk-bg-1);
  border-top: 1px solid var(--mk-line);
  box-shadow: var(--mk-shadow-up);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 280ms var(--mk-ease), visibility 0s linear 280ms;
}

.mk-buybar.is-shown {
  visibility: visible;
  transform: none;
  transition: transform 280ms var(--mk-ease), visibility 0s;
}

.mk-buybar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mk-buybar-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mk-buybar-name,
.mk-buybar-variant {
  overflow: hidden;
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-buybar-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.mk-buybar-variant {
  order: 1;
  min-width: 0;
}

.mk-buybar-info b {
  flex-shrink: 0;
  color: var(--mk-ink);
  font: 500 20px/24px var(--mk-font-mono);
}

/* "Change": a quiet text button that scrolls to the options. */
.mk-buybar-change {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--mk-ink);
  font: 600 15px/20px var(--mk-font-text);
  text-decoration: underline;
  text-decoration-color: var(--mk-line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}

.mk-buybar-change:hover {
  text-decoration-color: currentColor;
}

.mk-buybar-status {
  display: none;
  color: var(--mk-red-ink);
  font: 600 15px/20px var(--mk-font-text);
}

.mk-buybar.is-unavailable .mk-buybar-status {
  display: inline;
}

.mk-buybar.is-unavailable :is(.mk-btn, .mk-buybar-change) {
  display: none;
}

.mk-tpl-product .mk-footer {
  padding-bottom: 96px;
}

@media (max-width: 960px) {
  .mk-pd,
  .mk-pd-info.has-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mk-aside {
    position: static;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mk-footer {
  margin-top: 64px;
  padding: 64px 0 32px;
  border-top: 1px solid var(--mk-line);
}

.mk-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mk-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}

.mk-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 340px;
}

.mk-footer-brand .mk-wordmark {
  font-size: 22px;
}

.mk-footer-brand p {
  margin: 0;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 24px;
}

.mk-socials {
  display: flex;
  gap: 4px;
  margin-inline-start: -10px;
}

.mk-socials a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--mk-ink-2);
}

.mk-socials a:hover {
  color: var(--mk-ink);
}

.mk-socials svg {
  width: 20px;
  height: 20px;
}

.mk-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
}

.mk-footer-cols nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.mk-footer-cols h2 {
  margin: 0 0 8px;
  color: var(--mk-ink-3);
}

.mk-footer-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 15px;
}

@media (max-width: 640px) {
  .mk-footer-cols nav {
    gap: 0;
  }

  .mk-footer-cols a {
    min-height: 44px;
    margin-block: 0;
  }
}

.mk-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--mk-line);
  color: var(--mk-ink-3);
  font-size: 14px;
  line-height: 20px;
}

/* SellAuth's "Powered by" badge is moved into the footer by assets/mk.js; readable wherever it is. */
/* SellAuth dims it with opacity: .55, which drops it below 4.5:1; the muted ink is enough. */
.sa-powered-by a {
  color: var(--mk-ink-3) !important;
  opacity: 1 !important;
}

.sa-powered-by a:hover {
  color: var(--mk-ink) !important;
}

.mk-footer-bottom .sa-powered-by {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  .mk-footer {
    margin-top: 56px;
  }

  .mk-footer-cols {
    gap: 32px 48px;
  }
}

/* Payment methods (snippets/mk-payments.njk): footer, cart and product page. */
.mk-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.mk-pay-label {
  color: var(--mk-ink-3);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mk-pay ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-pay li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--mk-line-strong);
  border-radius: 2px;
  color: var(--mk-ink-2);
  font: 600 13px/18px var(--mk-font-text);
}

.mk-pay li i {
  color: var(--mk-ink);
  font-size: 18px;
}

.mk-strip .mk-pay {
  flex: 1 1 100%;
}

/* ==========================================================================
   SellAuth buy form (snippets/product-form.njk, official markup, restyled)

   The buy form, cart and customer pages are SellAuth's own markup. Each
   !important in this file overrides either a Bootstrap utility class on that
   markup (text-muted, text-white, w-100, border, gap-1, fw-medium, rounded-*,
   d-sm-none, opacity-50 …), which Bootstrap declares !important, or an
   inline style set by Alpine (x-show). tools/check-vendor.mjs and
   tools/preview/check-dom.mjs fail when this markup changes.
   ========================================================================== */

.mk-sa-form form > .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.mk-sa-form .form-label {
  margin-bottom: 10px;
  color: var(--mk-ink-2);
}

.mk-sa-form .variants {
  gap: 8px;
}

.mk-sa-form .variants .variant {
  gap: 16px;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
  color: var(--mk-ink);
  font: 500 16px/24px var(--mk-font-text);
  text-align: start;
  transition: background-color var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast) var(--mk-ease);
}

.mk-sa-form .variants .variant:hover:not(:disabled) {
  background: var(--mk-bg-2);
  box-shadow: inset 0 0 0 1px var(--mk-ink-3);
}

.mk-sa-form .variants .variant.active {
  background: var(--mk-bg-2);
  box-shadow: inset 0 0 0 2px var(--mk-ink);
}

.mk-sa-form .variants .variant:disabled {
  color: var(--mk-ink-3);
}

.mk-sa-form .variants .variant :is(.description, .stock) {
  color: var(--mk-ink-2) !important;
  font-size: 14px;
  line-height: 20px;
}

.mk-sa-form .variants .variant .price {
  padding: 0;
  background: none;
  color: var(--mk-ink);
  font: 500 16px/24px var(--mk-font-mono);
  text-align: end;
}

.mk-sa-form .variants .variant .price s {
  display: block;
  color: var(--mk-ink-3);
  font-size: 13px;
}

.mk-sa-form .opacity-50 {
  color: var(--mk-ink-3);
  opacity: 1 !important;
}

.mk-sa-form .variants .variant .active-indicator {
  display: none;
}

.mk-sa-form .variants .variant .variant-image {
  border-radius: 0 !important;
}

.mk-sa-form .input-group {
  flex-wrap: nowrap;
  width: auto;
  max-width: 176px;
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
}

.mk-sa-form .input-group .input-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mk-ink);
}

.mk-sa-form .input-group .input-group-btn svg {
  width: 16px;
  height: 16px;
}

.mk-sa-form .input-group .input-group-btn:hover:not(:disabled) {
  background: var(--mk-bg-2);
}

.mk-sa-form .input-group .form-control {
  height: 48px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--mk-line);
  border-left: 1px solid var(--mk-line);
  background: none;
  font: 500 16px/24px var(--mk-font-mono);
  text-align: center;
}

.mk-sa-form .input-group .form-control:focus {
  outline-offset: -2px;
}

.mk-sa-form .addon-item {
  border: 0;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-sa-form .addon-item:hover {
  background: var(--mk-bg-2);
}

.mk-sa-form .border {
  border-color: var(--mk-line) !important;
}

.mk-sa-form .alert {
  padding: 12px 16px;
  border: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--mk-red-ink);
  color: var(--mk-red-ink);
  font-size: 14px;
  line-height: 20px;
}

.mk-sa-form .badge.text-bg-primary {
  background: var(--mk-red) !important;
  color: var(--mk-on-red) !important;
}

.mk-sa-form .btn-link {
  padding: 0;
  color: var(--mk-ink);
  font: 600 14px/20px var(--mk-font-text);
  letter-spacing: 0;
  text-transform: none;
}

/* Buttons: Buy now is the one red action; Add to cart and the rest are outlined. All slanted. */
.mk-sa-form .buy-buttons {
  padding-top: 8px;
}

.mk-sa-form .buy-buttons > .col {
  flex: 1 1 0;
}

.mk-sa-form :is(.buy-buttons, .col-12) > .col > .btn,
.mk-sa-form .col-12 > .btn.w-100 {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-color: var(--mk-ink);
  --bs-btn-hover-color: var(--mk-ink);
  --bs-btn-active-color: var(--mk-ink);
  --bs-btn-disabled-color: var(--mk-ink-3);
  --bs-btn-disabled-opacity: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 16px) !important;
  min-height: 56px;
  margin-inline: 8px;
  border: 0;
  font-size: 14px;
}

.mk-sa-form :is(.buy-buttons, .col-12) > .col > .btn::before,
.mk-sa-form .col-12 > .btn.w-100::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
  transform: skewX(var(--mk-slant));
  transition: transform var(--mk-fast) var(--mk-ease), background-color var(--mk-fast) var(--mk-ease);
}

.mk-sa-form :is(.buy-buttons, .col-12) > .col > .btn:hover:not(:disabled)::before,
.mk-sa-form .col-12 > .btn.w-100:hover:not(:disabled)::before {
  background: var(--mk-bg-2);
  transform: skewX(var(--mk-slant)) scaleX(1.03);
}

.mk-sa-form .buy-buttons .btn[type="submit"] {
  --bs-btn-color: var(--mk-on-red);
  --bs-btn-hover-color: var(--mk-on-red);
  --bs-btn-active-color: var(--mk-on-red);
}

.mk-sa-form .buy-buttons .btn[type="submit"]::before {
  background: var(--mk-red);
  box-shadow: none;
}

.mk-sa-form .buy-buttons .btn[type="submit"]:hover:not(:disabled)::before {
  background: var(--mk-red-hover);
}

.mk-sa-form .buy-buttons .btn:disabled::before {
  background: var(--mk-bg-2);
  box-shadow: none;
}

.mk-sa-form .btn svg.size-5 {
  width: 18px;
  height: 18px;
}

@media (max-width: 991.98px) {
  .mk-sa-form .buy-buttons > .col {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   SellAuth cart (components/cart-page.njk, official markup, restyled)
   ========================================================================== */

/* SellAuth's captcha (ALTCHA) on the buy form and the cart verifies itself on load. The official
   markup shows it until then and hides it after, which moves the buttons twice. MK keeps it out of
   the layout and only shows it when the buyer has to act: verification failed or expired, or it
   hasn't finished after a few seconds (assets/mk.js adds .mk-altcha-show). The !important beats the
   inline display Alpine's x-show sets. */
:is(.mk-sa-form, .mk-tpl-cart) div[x-show]:has(> altcha-widget):not(.mk-altcha-show) {
  display: none !important;
}

:is(.mk-sa-form, .mk-tpl-cart) altcha-widget {
  display: block;
  margin-bottom: 16px;
}

.mk-tpl-cart .py-5-nav {
  padding-top: 40px;
}

.mk-tpl-cart .section-title h1 {
  margin: 0;
  padding-bottom: 16px;
  color: var(--mk-ink);
  font: 800 clamp(24px, 7.4vw, 58px)/0.95 var(--mk-font-display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mk-tpl-cart .text-white {
  color: var(--mk-ink) !important;
}

.mk-tpl-cart :is(.text-muted, .cart-variant-text, .cart-discount-text) {
  color: var(--mk-ink-2) !important;
}

.mk-tpl-cart .text-accent-500 {
  color: var(--mk-blue) !important;
}

.mk-tpl-cart .border {
  border-color: var(--mk-line) !important;
}

.mk-tpl-cart .cart-item-bg {
  border: 0 !important;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-tpl-cart .cart-product-link {
  color: var(--mk-ink) !important;
  font: 600 17px/24px var(--mk-font-text);
}

.mk-tpl-cart .cart-product-link:hover {
  color: var(--mk-red-ink) !important;
  text-decoration: none !important;
}

.mk-tpl-cart .cart-image-container img {
  border-radius: 0 !important;
}

.mk-tpl-cart .cart-price-text {
  font: 500 18px/24px var(--mk-font-mono) !important;
}

.mk-tpl-cart .cart-quantity-controls {
  gap: 0 !important;
  box-shadow: inset 0 0 0 1px var(--mk-line-strong);
}

/* Remove buttons: at least 44px to tap. */
.mk-tpl-cart .cart-remove-mobile,
.mk-tpl-cart [\@click*="removeItem"] {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}

.mk-tpl-cart .cart-remove-mobile.d-sm-none {
  display: inline-grid;
}

.mk-tpl-cart .cart-qty-btn {
  min-width: 40px;
  min-height: 40px;
  background: none;
  color: var(--mk-ink);
}

.mk-tpl-cart .cart-qty-btn:hover:not(:disabled) {
  background: var(--mk-bg-2);
}

.mk-tpl-cart .cart-qty-input {
  background: none;
  color: var(--mk-ink);
  font: 500 14px/20px var(--mk-font-mono);
}

.mk-tpl-cart .cart-addon-badge {
  border-color: var(--mk-line);
  border-radius: 2px;
  background: none;
  color: var(--mk-ink-2);
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mk-tpl-cart .cart .form {
  padding: 28px !important;
  border: 0 !important;
  background: var(--mk-bg-1);
  box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-tpl-cart .cart .form .fw-bold {
  font: 500 22px/28px var(--mk-font-mono);
}

.mk-tpl-cart .bg-secondary.bg-opacity-10 {
  background: var(--mk-bg-2) !important;
}

.mk-tpl-cart .btn[type="submit"] {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-color: var(--mk-on-red);
  --bs-btn-hover-color: var(--mk-on-red);
  --bs-btn-active-color: var(--mk-on-red);
  --bs-btn-disabled-color: var(--mk-ink-3);
  --bs-btn-disabled-opacity: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 16px) !important;
  min-height: 56px;
  margin-inline: 8px;
  border: 0;
  font-size: 14px;
}

.mk-tpl-cart .btn[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mk-red);
  transform: skewX(var(--mk-slant));
  transition: transform var(--mk-fast) var(--mk-ease), background-color var(--mk-fast) var(--mk-ease);
}

.mk-tpl-cart .btn[type="submit"]:hover:not(:disabled)::before {
  background: var(--mk-red-hover);
  transform: skewX(var(--mk-slant)) scaleX(1.03);
}

.mk-tpl-cart .btn[type="submit"]:disabled::before {
  background: var(--mk-bg-2);
}

.mk-tpl-cart .btn svg.size-5 {
  width: 18px;
  height: 18px;
}

@media (min-width: 992px) {
  .mk-tpl-cart .cart .col-lg-4 > div {
    position: sticky;
    top: calc(var(--mk-nav-h) + 24px);
  }
}

@media (max-width: 640px) {
  .mk-tpl-cart .cart .form {
    padding: 24px 20px !important;
  }
}

/* ==========================================================================
   Platform pages (customer area, reviews, status, blog, modals)
   ========================================================================== */

/* SellAuth's own pagination (customer area). */
main .pagination {
  --bs-pagination-color: var(--mk-ink);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--mk-line-strong);
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--mk-ink);
  --bs-pagination-hover-bg: var(--mk-bg-2);
  --bs-pagination-active-color: var(--mk-on-ink);
  --bs-pagination-active-bg: var(--mk-ink);
  --bs-pagination-active-border-color: var(--mk-ink);
  --bs-pagination-disabled-color: var(--mk-ink-3);
  --bs-pagination-disabled-bg: transparent;
  gap: 4px;
}

main .pagination .page-item:not(.active) .page-link {
  color: var(--mk-ink);
  background-color: transparent;
}

/* Official pages use Bootstrap's .container; give it the same outer edges as .mk-wrap. */
main .container {
  max-width: var(--mk-wrap);
  padding-right: var(--mk-gutter);
  padding-left: var(--mk-gutter);
}

.section-title :is(h1, h2) {
  color: var(--mk-ink);
  font-family: var(--mk-font-display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.section-title p,
.section-subtitle p {
  color: var(--mk-ink-2);
}

.btn {
  border-radius: 0;
  font: 600 15px/20px var(--mk-font-text);
  padding: 12px 24px;
}

.btn-primary {
  --bs-btn-bg: var(--mk-ink);
  --bs-btn-border-color: var(--mk-ink);
  --bs-btn-color: var(--mk-on-ink);
  --bs-btn-hover-bg: var(--mk-ink-2);
  --bs-btn-hover-border-color: var(--mk-ink-2);
  --bs-btn-hover-color: var(--mk-on-ink);
  --bs-btn-active-bg: var(--mk-ink-2);
  --bs-btn-active-border-color: var(--mk-ink-2);
  --bs-btn-active-color: var(--mk-on-ink);
  --bs-btn-disabled-bg: var(--mk-bg-2);
  --bs-btn-disabled-border-color: var(--mk-bg-2);
  --bs-btn-disabled-color: var(--mk-ink-3);
  --bs-btn-disabled-opacity: 1;
}

.btn-outline-primary {
  --bs-btn-color: var(--mk-ink);
  --bs-btn-border-color: var(--mk-line-strong);
  --bs-btn-hover-bg: var(--mk-bg-2);
  --bs-btn-hover-border-color: var(--mk-ink);
  --bs-btn-hover-color: var(--mk-ink);
  --bs-btn-active-bg: var(--mk-bg-2);
  --bs-btn-active-border-color: var(--mk-ink);
  --bs-btn-active-color: var(--mk-ink);
  --bs-btn-disabled-color: var(--mk-ink-3);
  --bs-btn-disabled-border-color: var(--mk-line);
}

.form-control {
  border-color: var(--mk-line-strong);
  border-radius: 0;
  background-color: var(--mk-bg-1);
  color: var(--mk-ink);
}

.form-control::placeholder {
  color: var(--mk-ink-3);
}

.form-control:focus {
  border-color: var(--mk-ink);
  background-color: var(--mk-bg-1);
  color: var(--mk-ink);
  box-shadow: none;
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
}

.form-label {
  color: var(--mk-ink);
  font: 600 14px/20px var(--mk-font-text);
}

.modal-content {
  border: 1px solid var(--mk-line);
  border-radius: 0;
  background-color: var(--mk-bg-1);
  color: var(--mk-ink);
}

.modal-header {
  border-color: var(--mk-line);
}

.card,
.accordion-item,
.alert {
  border-radius: 0;
}

.card {
  border-color: var(--mk-line);
  background-color: var(--mk-bg-1);
}

.badge {
  border-radius: 2px;
  font: 600 12px/16px var(--mk-font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.editor {
  color: var(--mk-ink-2);
}

.text-primary {
  color: var(--mk-red-ink) !important;
}

/* Customer area: accent text in its readable shade, wide tables scroll inside their card. */
body .text-accent-500,
body .ticket .text-accent-500 {
  color: var(--mk-red-ink) !important;
}

main .card:has(> .table) {
  overflow-x: auto;
}

table td .btn.btn-link {
  color: var(--mk-red-ink);
}

main .btn-link:not(.text-danger) {
  --bs-btn-color: var(--mk-red-ink);
  --bs-btn-hover-color: var(--mk-ink);
  --bs-btn-active-color: var(--mk-ink);
}

/* Bootstrap's danger red is too dark on the carbon background. */
.text-danger {
  color: var(--mk-danger) !important;
}

.btn-outline-danger {
  --bs-btn-color: var(--mk-danger);
  --bs-btn-border-color: var(--mk-danger);
  --bs-btn-hover-color: var(--mk-bg);
  --bs-btn-hover-bg: var(--mk-danger);
  --bs-btn-hover-border-color: var(--mk-danger);
  --bs-btn-active-color: var(--mk-bg);
  --bs-btn-active-bg: var(--mk-danger);
  --bs-btn-active-border-color: var(--mk-danger);
}

/* pro.css uses the accent as a text colour here; use the readable shade instead. */
.testimonial .content .reply .author span,
.editor .e-quote,
.editor .e-link {
  color: var(--mk-red-ink);
}

.py-5-nav {
  padding-top: 40px;
}

.mk-modal .modal-header {
  padding: 24px;
}

.mk-modal .modal-header h2 {
  font-size: 28px;
}

.mk-modal .modal-body {
  padding: 24px;
}

.mk-modal .btn-close {
  filter: invert(1);
}

:root[data-mk-mode="light"] .mk-modal .btn-close {
  filter: none;
}

/* Empty cart: MK's empty state replaces SellAuth's order box (see components/mk-cart-extras.njk).
   The box is found by its Alpine component, not its builder id, which the owner can change. */
html.mk-cart-empty .mk-tpl-cart .component:has(> [x-data="cartPage"]),
html.mk-cart-empty .mk-cart-strip,
html:not(.mk-cart-empty) .mk-cart-empty-state {
  display: none;
}

.mk-cart-empty-state {
  align-items: flex-start;
  margin-top: 40px;
}

.mk-cart-empty-state .mk-empty-title {
  font-size: clamp(24px, 7.4vw, 58px);
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Right-to-left languages (Arabic, Persian, Hebrew)
   ========================================================================== */

/* The wordmark keeps its left-to-right order (the hero's slants do too, see 20-hero.css);
   arrows point the reading direction. */
.mk-wordmark {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .mk-arrow,
[dir="rtl"] .mk-i-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .mk-btn:hover .mk-arrow,
[dir="rtl"] .mk-btn:hover .mk-i-arrow,
[dir="rtl"] .mk-link:hover .mk-arrow,
[dir="rtl"] .mk-card:hover .mk-card-cta .mk-arrow {
  transform: scaleX(-1) translateX(4px);
}

[dir="rtl"] .mk-card::after {
  transform-origin: right;
}

/* Select arrows sit at the start edge in right-to-left text. */
[dir="rtl"] .mk-select {
  background-position: left 14px center, left 19px center;
}

[dir="rtl"] .mk-mini-select {
  background-position: left 9px center, left 13px center;
}