/* ==========================================================================
   Maayan Kalo — theme design system (ported 1:1 from the React reference:
   maayan-kalo-store/src/index.css). Loaded AFTER base.css and overrides it.
   Type: Prata (display) + Outfit (body) + Cormorant Garamond italic (statements)
   Feel: warm limewashed plaster wall + art-first, immersive flow
   ========================================================================== */

/* ==========================================================================
   Fonts — SELF-HOSTED (17.8.26). All three are OFL, which permits hosting the
   files ourselves; nothing is requested from fonts.googleapis.com, so no
   visitor IP is handed to Google. Files live in assets/fonts/.

   Outfit and Cormorant are VARIABLE faces: one file covers the whole weight
   range, which is why `font-weight` is declared as a range and not a number.
   ========================================================================== */

@font-face {
  font-family: 'Prata';
  src: url('fonts/prata-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --mk-cream: #faf1df;
  --mk-wall: #f2e5ca;
  --mk-ink: #23150e;
  --mk-ink-soft: #3a2a1a;
  --mk-ochre: #a97d3a;
  --mk-ochre-deep: #7d5a24; /* small uppercase labels — AA contrast on the wall */
  --mk-gold: #9a7b2f;
  --mk-clay: #9e441d;
  --mk-muted: #6b5142;
  --mk-line: rgba(35, 21, 14, 0.14);
  --mk-track: 0.22em;

  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-italic: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --mk-header-h: 4.75rem;
  --mk-maxw: 80rem;

  --shadow-float:
    0 3px 8px rgba(35, 21, 14, 0.12),
    0 22px 40px -16px rgba(35, 21, 14, 0.28),
    0 54px 90px -34px rgba(35, 21, 14, 0.5);
  --shadow-float-hover:
    0 5px 12px rgba(35, 21, 14, 0.16),
    0 32px 56px -18px rgba(35, 21, 14, 0.34),
    0 78px 120px -40px rgba(35, 21, 14, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }


body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--mk-ink);
  background-color: var(--mk-wall);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: normal; }
img { max-width: 100%; }
/* display:block only inside MK components — never globally, so inline
   images in checkout/plugin markup (payment icons etc.) keep flowing. */
.mk-app img, .mk-header img, .mk-footer img, .mk-modal img, .mk-lb img,
.mk-jg__media img, .mk-cf__card img, .mk-signup__art img, .mk-news__art img { display: block; }
button { font-family: inherit; }
a { color: inherit; }

/* ---- The mineral plaster wall ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--mk-wall);
  background-image:
    radial-gradient(120% 120% at 50% 36%, rgba(120, 92, 66, 0) 56%, rgba(120, 92, 66, 0.15) 100%),
    radial-gradient(130% 95% at 26% -8%, rgba(255, 251, 240, 0.55) 0%, rgba(255, 251, 240, 0) 52%),
    radial-gradient(120% 120% at 92% 104%, rgba(139, 108, 82, 0.24) 0%, rgba(139, 108, 82, 0) 56%),
    radial-gradient(90% 78% at 3% 76%, rgba(139, 108, 82, 0.2) 0%, rgba(139, 108, 82, 0) 54%),
    url(maayan-plaster.svg);
  /* The plaster fills the fixed viewport layer as a single non-repeating cover,
     so the tile edge can never show as a seam. */
  background-size: auto, auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply, normal, multiply, multiply, multiply;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* No mix-blend-mode here: fixed blended layers + backdrop overlays make
     Safari's compositor bail out and paint the page hot pink. Opacity alone
     reads nearly identical. */
  opacity: 0.05;
  background-image: url(maayan-grain.svg);
}

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

.mk-kicker {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--mk-track);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mk-muted);
}

/* Keyboard focus — same language as hover, never invisible. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--mk-ochre);
  outline-offset: 3px;
  border-radius: 2px;
}
.mk-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--mk-ink);
}
.mk-serif {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* Buttons */
.mk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: var(--mk-ink);
  color: var(--mk-cream);
  font-family: var(--font-body);
  text-transform: uppercase;
  /* Tracking eased off the shared 0.22em token deliberately: at the larger
     size the wider setting pushed the label toward the button's edges. The
     token still governs the small caps labels it was made for. */
  letter-spacing: 0.16em;
  /* 0.7188rem rendered at 11.5px — the site's main call to action was set
     smaller than its body copy (16.8.26). */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.9375rem 1.875rem;
  min-height: 2.75rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-button:hover {
  background: var(--mk-ochre);
  color: var(--mk-cream);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(35, 21, 14, 0.45);
}
.mk-button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.mk-button--ghost {
  background: transparent;
  color: var(--mk-ink);
  border: 1px solid rgba(35, 21, 14, 0.32);
}
.mk-button--ghost:hover { background: transparent; color: var(--mk-ochre); border-color: var(--mk-ochre); }
.mk-button--block { width: 100%; }

.mk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--mk-track);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mk-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-ink);
  padding: 0 0 0.3125rem;
  transition: color 0.3s, border-color 0.3s;
}
.mk-link:hover { color: var(--mk-ochre); border-color: var(--mk-ochre); }

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

.mk-app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.mk-section { position: relative; padding: 3.5rem 1.5rem; overflow-x: clip; }
@media (min-width: 750px) { .mk-section { padding: 6.25rem 2.5rem; } }
.mk-inner { max-width: var(--mk-maxw); margin: 0 auto; }
.mk-narrow { max-width: 37.5rem; margin: 0 auto; }

.mk-section-head { text-align: center; margin-bottom: 3.5rem; }
.mk-section-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Fluid at the bottom end because Prata sets ~18% wider than Marcellus did:
     at a flat 2.125rem, "THE COLLECTION" measured 354px against the 327px of
     room a 375px screen leaves after the section's 24px side padding, so it
     broke onto two lines (measured on the real CSS, 17.8.26). 8vw gives 30px
     there — 312px of text, a comfortable margin rather than a 1px squeeze. The
     cap is the previous size, reached at 425px, so nothing else changes. */
  font-size: clamp(1.5rem, 8vw, 2.125rem);
  line-height: 1.05;
  color: var(--mk-ink);
  text-wrap: balance; /* no orphan word on a wrapped title ("…FOR / YOU") */
}
/* Confident but breathing — Yael, 23.7.26: oversized titles were rejected. */
@media (min-width: 750px) { .mk-section-title { font-size: 3.25rem; } }
.mk-section-lead {
  max-width: 32.5rem;
  margin: 1.125rem auto 0;
  color: var(--mk-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* ==========================================================================
   Header
   ========================================================================== */

.mk-header {
  position: sticky; top: 0; z-index: 50;
  transition: background-color 0.45s, box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s;
  border-bottom: 1px solid transparent;
}
.mk-header--scrolled {
  background-color: rgba(245, 233, 208, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(35, 21, 14, 0.08);
  box-shadow: 0 12px 32px -26px rgba(35, 21, 14, 0.4);
}
.mk-header__inner {
  max-width: var(--mk-maxw); margin: 0 auto;
  height: var(--mk-header-h); padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem;
}
.mk-header__left { display: flex; align-items: center; gap: 0.625rem; justify-self: start; }
.mk-header__center { justify-self: center; display: flex; align-items: center; justify-content: center; }
.mk-header__brand { display: flex; align-items: center; gap: 0.6875rem; text-decoration: none; }
.mk-header__brand img { width: auto; height: 2.75rem; object-fit: contain; }
/* Desktop: small mask mark on the left. Mobile: full head+name lockup,
   centred between the burger (left) and the cart (right). (Yael, 23.7.26) */
.mk-header__brand--mobile { display: none; }
.mk-header__brand--mobile img { height: 2.2rem; }
@media (max-width: 859px) {
  :root { --mk-header-h: 4rem; } /* slim chrome — more screen for the art */
  .mk-header__brand--desktop { display: none; }
  .mk-header__brand--mobile { display: flex; }
}
.mk-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-left: -0.5rem; border: 0; background: none; cursor: pointer;
  color: var(--mk-ink); transition: color 0.3s;
  /* The declared 2.5rem was being squeezed to 22×35 by the header layout —
     the most-tapped control on a phone, a third of the size it claimed
     (measured live, 16.8.26). */
  flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem;
}
.mk-header__burger:hover { color: var(--mk-ochre); }
.mk-header__burger .mk-icon-close { display: none; }
.mk-header--menu-open .mk-header__burger .mk-icon-close { display: block; }
.mk-header--menu-open .mk-header__burger .mk-icon-menu { display: none; }
@media (min-width: 860px) { .mk-header__burger { display: none; } }
.mk-nav { display: none; gap: 1.875rem; }
@media (min-width: 860px) { .mk-nav { display: flex; } }
.mk-nav a {
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600;
  color: rgba(35, 21, 14, 0.62); text-decoration: none; transition: color 0.3s;
}
.mk-nav a:hover, .mk-nav a.is-active { color: var(--mk-ink); }
.mk-nav__btn {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600;
  /* --mk-ochre measured 2.96:1 on the wall — below AA at this size (17.8.26).
     The deep ochre (5.01:1) exists exactly for small text like this. */
  color: var(--mk-ochre-deep); background: none; border: 0; cursor: pointer; padding: 0; transition: color 0.3s;
}
.mk-nav__btn:hover { color: var(--mk-ink); }
.mk-header__cart {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.5625rem;
  background: none; border: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--mk-track); font-size: 0.75rem; font-weight: 600;
  color: var(--mk-ink); transition: color 0.3s; text-decoration: none;
  /* The cart was a 20px-wide target once the label hides under 420px. */
  padding: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; justify-content: flex-end;
}
.mk-header__cart:hover { color: var(--mk-ochre); }
.mk-header__cart svg { width: 1.25rem; height: 1.25rem; }
.mk-header__cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; border-radius: 999px;
  background: var(--mk-ink); color: var(--mk-cream); font-size: 0.6875rem; letter-spacing: 0;
}
.mk-header__cart-count[hidden] { display: none; }
@media (max-width: 420px) { .mk-header__cart-label { display: none; } }

/* ---- Mobile slide-down menu ---- */
.mk-menu {
  overflow: hidden; max-height: 0; opacity: 0;
  background-color: rgba(245, 233, 208, 0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, border-color 0.3s;
}
.mk-menu.is-open { max-height: 60vh; opacity: 1; border-bottom-color: rgba(35,21,14,0.1); }
@media (min-width: 860px) { .mk-menu { display: none; } }
.mk-menu__nav { display: flex; flex-direction: column; padding: 1rem 1.5rem 1.25rem; }
.mk-menu__nav a, .mk-menu__nav button {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 1.1875rem; color: var(--mk-ink); text-decoration: none; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 0.875rem 0;
  border-bottom: 1px solid var(--mk-line); transition: color 0.3s;
}
.mk-menu__nav a:last-of-type, .mk-menu__nav button { border-bottom: 0; }
.mk-menu__nav a.is-active, .mk-menu__nav a:hover, .mk-menu__nav button:hover { color: var(--mk-ochre); }
.mk-menu__foot {
  /* 0.6562rem is 10.5px and the links stood 17px tall — too small to read and
     too small to hit (16.8.26). */
  display: flex; gap: 1.5rem; padding: 0 1.5rem 1rem;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600;
}
.mk-menu__foot a {
  color: var(--mk-muted); text-decoration: none; transition: color 0.3s;
  padding: 0.625rem 0; min-height: 2.75rem; display: inline-flex; align-items: center;
}
.mk-menu__foot a:hover { color: var(--mk-ochre); }

/* ==========================================================================
   Hero — identity header (home) — fills the first screen
   ========================================================================== */

.mk-hero__lockup { width: 100%; max-width: 27.5rem; height: auto; display: block; }
.mk-hero__tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--mk-ink-soft);
  margin-top: 2.125rem;
  max-width: 26.25rem;
}
@media (min-width: 900px) { .mk-hero__tagline { font-size: 1.75rem; } }

.mk-hero-id {
  /* Fills the whole first screen: only the lockup + tagline are visible on load,
     and "The Collection" stays fully below the fold until you scroll. */
  min-height: calc(100vh - var(--mk-header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.875rem 1.5rem 3.125rem;
}
.mk-hero-id .mk-hero__lockup { margin: 0 auto; width: 100%; max-width: 36.25rem; }
.mk-hero-id .mk-hero__tagline { margin: 4rem auto 0; text-align: center; max-width: 33.75rem; font-size: 1.625rem; }
@media (min-width: 900px) { .mk-hero-id .mk-hero__tagline { font-size: 1.875rem; } }

/* ---- Collection carousel section (home) ---- */
.mk-collection-hero { padding-top: 1.875rem; padding-bottom: 5rem; }
@media (min-width: 750px) { .mk-collection-hero { padding-top: 2.5rem; padding-bottom: 6.25rem; } }
/* When the collection leads the home page it sits just under the sticky header. */
.mk-collection-hero--lead { padding-top: calc(var(--mk-header-h) + 1.25rem); }
@media (min-width: 750px) { .mk-collection-hero--lead { padding-top: calc(var(--mk-header-h) + 2rem); } }

/* ---- The opening: identity moment (lockup + tagline), compact — the
   collection grid arrives right under it. Pilpeled structure, Maayan warmth. ---- */
.mk-open {
  position: relative;
  min-height: calc(52vh - var(--mk-header-h));
  min-height: calc(52svh - var(--mk-header-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem 3.5rem;
}
@media (min-width: 750px) { .mk-open { min-height: calc(58vh - var(--mk-header-h)); padding: 4rem 2.5rem 4.5rem; } }
.mk-open__lockup { display: block; width: 100%; max-width: 19rem; height: auto; margin: 0 auto; }
@media (min-width: 750px) { .mk-open__lockup { max-width: 26rem; } }
.mk-open__line {
  text-transform: uppercase; letter-spacing: 0.34em; font-weight: 600;
  font-size: 0.8125rem; color: var(--mk-ochre-deep);
  margin: 1.6rem auto 0;
}
@media (min-width: 750px) { .mk-open__line { font-size: 0.9375rem; } }
.mk-open__scroll {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  color: var(--mk-muted); opacity: 0.7; transition: opacity 0.3s, color 0.3s;
  animation: mk-bob 2.4s ease-in-out infinite;
}
.mk-open__scroll:hover { opacity: 1; color: var(--mk-ochre); }
@keyframes mk-bob2 { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .mk-open__scroll { animation: none; } }

/* ---- Hero (home hook) — art-forward, warm, an experience not a cold open ---- */
.mk-hero2 {
  position: relative;
  min-height: calc(100svh - var(--mk-header-h));
  display: flex; align-items: center;
  padding: calc(var(--mk-header-h) - 1rem) 1.5rem 4rem;
}
@media (min-width: 750px) { .mk-hero2 { padding-left: 2.5rem; padding-right: 2.5rem; } }
.mk-hero2__grid {
  width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
.mk-hero2__grid > * { min-width: 0; } /* let tracks shrink so nothing overflows on mobile */
@media (min-width: 850px) {
  .mk-hero2__grid { grid-template-columns: 1.02fr 0.98fr; gap: 5rem; }
}
.mk-hero2__intro { text-align: center; }
@media (min-width: 850px) { .mk-hero2__intro { text-align: left; order: 1; } }
.mk-hero2__name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.05em; line-height: 1.05; color: var(--mk-ink);
  font-size: clamp(2.4rem, 6.5vw, 5.25rem); margin: 0;
}
/* The positioning line sits BELOW the name — never an eyebrow above it. */
.mk-hero2__sub {
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; font-weight: 600;
  color: var(--mk-ochre-deep); margin: 1.1rem 0 0;
}
.mk-hero2__tag {
  font-family: var(--font-italic); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.5; color: var(--mk-ink-soft);
  margin: 1.6rem auto 0; max-width: 34rem;
}
@media (min-width: 850px) { .mk-hero2__tag { margin-left: 0; margin-top: 1.8rem; } }
.mk-hero2__cta { margin-top: 2rem; }
@media (min-width: 850px) { .mk-hero2__cta { margin-top: 2.6rem; } }
.mk-hero2__art {
  position: relative;
  display: block; justify-self: center; max-width: 30rem; width: 100%;
  border-radius: 0.4rem; box-shadow: var(--shadow-float);
  transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* A warm halo behind the lead painting — the hero stops feeling like a flat
   cream field and the art visibly owns the space (Yael, 23.7.26: an
   experience, not cold and dry). */
.mk-hero2__art::before {
  content: '';
  position: absolute; inset: -14% -18%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 58% at 50% 46%, rgba(169, 125, 58, 0.38) 0%, rgba(169, 125, 58, 0) 72%),
    radial-gradient(42% 42% at 62% 30%, rgba(255, 251, 240, 0.6) 0%, rgba(255, 251, 240, 0) 70%);
}
@media (min-width: 850px) { .mk-hero2__art { order: 2; max-width: 34rem; } }
.mk-hero2__art:hover { transform: translateY(-4px); box-shadow: var(--shadow-float-hover); }
/* The whole painting fits inside the first screen, beside the CTA — never cut
   by the fold. Natural ratio, no crop; height caps and width follows. */
.mk-hero2__art img {
  width: auto; height: auto; max-width: 100%; display: block; margin: 0 auto;
  max-height: calc(100vh - var(--mk-header-h) - 10rem); /* Safari fallback */
  max-height: calc(100svh - var(--mk-header-h) - 10rem);
  border-radius: 0.4rem;
}
.mk-hero2__art { width: auto; box-shadow: none; }
.mk-hero2__art img { box-shadow: var(--shadow-float); }
.mk-hero2__art:hover img { box-shadow: var(--shadow-float-hover); }

/* ---- Mobile-first hero (Yael, 23.7.26, round 3). The REAL reference rule:
   identity floats WITH the art — painting, name and CTA always share the
   first screen, on every phone height. The painting is height-budgeted
   (taller phone = bigger painting) and hangs with its halo and shadow. ---- */
@media (max-width: 849px) {
  .mk-hero2 { padding-top: 0.75rem; padding-bottom: 2rem; align-items: flex-start; min-height: 0; }
  .mk-hero2__grid { gap: 1.4rem; }
  .mk-hero2__art { order: -1; }
  .mk-hero2__art img {
    width: auto; max-width: calc(100vw - 3rem);
    max-height: calc(100vh - var(--mk-header-h) - 16rem); /* Safari fallback */
    max-height: calc(100svh - var(--mk-header-h) - 16rem);
    border-radius: 0.4rem;
  }
  .mk-hero2__sub { margin-top: 0.8rem; }
  .mk-hero2__cta .mk-button { width: 100%; }
}

/* Desktop: the painting breaks out of the content column and touches the
   right edge of the viewport (the art fills its half, not a card in a field). */
@media (min-width: 850px) {
  .mk-hero2 { padding-right: 0; }
  .mk-hero2__grid { max-width: none; padding-left: max(0px, calc(50vw - 40rem)); }
  .mk-hero2__art { justify-self: end; max-width: 38rem; }
  .mk-hero2__art img { border-radius: 0.4rem 0 0 0.4rem; }
}
.mk-hero2__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  color: var(--mk-muted); opacity: 0.7; transition: opacity 0.3s, color 0.3s;
  animation: mk-bob 2.4s ease-in-out infinite;
}
.mk-hero2__scroll:hover { opacity: 1; color: var(--mk-ochre); }
@media (max-width: 849px) { .mk-hero2__scroll { display: none; } }
@keyframes mk-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .mk-hero2__scroll { animation: none; } }

/* The collection follows the hero directly — trim its top so the two read as
   one continuous experience rather than two far-apart blocks. */
.mk-collection-hero { padding-top: 2.5rem; }
@media (min-width: 750px) { .mk-collection-hero { padding-top: 3rem; } }

/* ---- Tagline band (standalone statement after the collection) ---- */
.mk-tagline-band { border-top: 1px solid var(--mk-line); text-align: center; }
.mk-tagline-band__inner { max-width: 46rem; margin: 0 auto; }
/* The mask as a quiet seal above the statement (the one signature motif). */
.mk-tagline-band__mark { display: block; width: auto; height: 2.6rem; margin: 0 auto 1.5rem; opacity: 0.9; }
.mk-tagline-band__line {
  font-family: var(--font-italic); font-style: italic; font-weight: 500;
  font-size: 1.75rem; line-height: 1.5; color: var(--mk-ink-soft); margin: 0;
}
@media (min-width: 750px) { .mk-tagline-band__line { font-size: 2.375rem; } }

/* ---- Collector list — compact two-panel, same colour as the wall (no separate card) ---- */
.mk-signup { border-top: 1px solid var(--mk-line); }
.mk-signup__box { max-width: 48.75rem; margin: 0 auto; border-radius: 0.5rem; overflow: hidden; }
.mk-signup__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Home layout: text on the LEFT, artwork on the RIGHT (mirror of the popup). */
@media (min-width: 640px) { .mk-signup__grid { grid-template-columns: 1fr 0.9fr; gap: 3.125rem; align-items: stretch; } }
/* Fire of Creation beside the form on larger screens; on phones the inline
   image goes (not necessary — Yael, 23.7.26), the popup keeps its artwork. */
.mk-signup__art { display: none; border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow-float); }
.mk-signup__art img { width: 100%; height: auto; display: block; }
@media (min-width: 640px) {
  .mk-signup__art { display: block; position: relative; min-height: 21.25rem; margin-bottom: 0; }
  .mk-signup__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.mk-signup__body { padding: 1.25rem 0; }
@media (min-width: 640px) { .mk-signup__body { padding: 1.875rem 0; align-self: center; } }
.mk-signup__title {
  font-family: var(--font-display); font-optical-sizing: auto; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.875rem; color: var(--mk-ink);
  text-wrap: balance; /* "SEE NEW WORKS / FIRST" left an orphan word (17.8.26) */
}
.mk-signup__sub { margin: 0.75rem 0 0; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600; color: var(--mk-ochre-deep); }
.mk-signup__lead { color: var(--mk-muted); font-size: 1rem; line-height: 1.8; margin: 1.125rem 0 1.75rem; }
.mk-signup__form input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(35,21,14,0.3); border-radius: 0;
  padding: 0.625rem 0; font-size: 1.0625rem; font-family: var(--font-body); color: var(--mk-ink); transition: border-color 0.3s;
}
.mk-signup__form input:focus { outline: none; border-bottom-color: var(--mk-ochre); }

/* ---- Contact form (home) ---- */
.mk-contact { border-top: 1px solid var(--mk-line); }
.mk-contact__inner { max-width: 37.5rem; margin: 0 auto; }
.mk-contact__row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 600px) { .mk-contact__row { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.mk-contact__form .mk-field textarea { resize: vertical; }
.mk-contact__success {
  text-align: center; padding: 2.125rem 1.25rem;
  border-top: 1px solid rgba(169,125,58,0.4); border-bottom: 1px solid rgba(169,125,58,0.4);
}
.mk-contact__success p:last-child { margin-top: 0.625rem; color: var(--mk-muted); font-size: 0.9375rem; }

/* ---- Sliding coverflow carousel ----
   The stage height leaves room for the caption so the painting AND its name
   always sit on screen together (Yael, 23.7.26). Image keeps its true ratio
   (height fixed, width auto — never cropped). ---- */
.mk-cf { margin-top: 0.625rem; touch-action: pan-y; }
.mk-cf__stage {
  position: relative; height: 58vh; min-height: 24rem; max-height: 44rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
@media (min-width: 900px) { .mk-cf__stage { overflow: visible; } }
.mk-cf__card {
  position: absolute; top: 50%; left: 50%;
  border-radius: 0.3125rem; overflow: hidden; cursor: pointer; will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s, filter 0.7s;
  box-shadow: 0 20px 50px -28px rgba(35,21,14,0.5);
}
.mk-cf__card.is-active { box-shadow: var(--shadow-float); }
/* The card shrink-wraps the painting. BOTH axes are capped so landscape
   works are never clipped at the sides (true ratio always). */
.mk-cf__card img {
  display: block; width: auto; height: auto;
  max-height: calc(58vh - 1rem); max-width: min(84vw, 38rem);
}
@media (max-width: 640px) {
  .mk-cf__stage { height: 52vh; min-height: 20rem; }
  .mk-cf__card img { max-height: calc(52vh - 1rem); max-width: 76vw; }
}

/* Clean chevrons — no circle, no background, no blur. They sit in the empty
   margin beside the centred painting and never cover it. */
.mk-cf__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 3rem; height: 3rem; border: 0; border-radius: 0; padding: 0;
  background: none; color: var(--mk-ink); opacity: 0.55; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-cf__nav:hover { opacity: 1; color: var(--mk-ochre); background: none; }
.mk-cf__nav svg { width: 2rem; height: 2rem; }
.mk-cf__nav--prev { left: 0.25rem; }
.mk-cf__nav--next { right: 0.25rem; }
@media (min-width: 750px) { .mk-cf__nav--prev { left: 1rem; } .mk-cf__nav--next { right: 1rem; } }

.mk-cf__cap { margin-top: 1.5rem; text-align: center; }
.mk-cf__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.625rem; color: var(--mk-ink); background: none; border: 0; cursor: pointer; transition: color 0.3s;
  text-decoration: none; display: inline-block;
}
.mk-cf__title:hover { color: var(--mk-ochre); }

/* ==========================================================================
   Artist intro — meet Maayan
   ========================================================================== */

.mk-artist { border-top: 1px solid var(--mk-line); }
.mk-artist__grid {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
  max-width: 65rem; margin: 0 auto;
}
@media (min-width: 850px) { .mk-artist__grid { grid-template-columns: 0.8fr 1fr; gap: 4.375rem; } }
.mk-artist__portrait { justify-self: center; width: 100%; max-width: 20rem; }
.mk-artist__portrait-frame {
  width: 100%; overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-float);
  background: rgba(169, 125, 58, 0.08);
}
.mk-artist__portrait-frame img { width: 100%; height: auto; display: block; }
.mk-artist__title {
  font-family: var(--font-display);
  font-optical-sizing: auto; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.875rem; line-height: 1.05; margin: 1rem 0 0;
}
@media (min-width: 850px) { .mk-artist__title { font-size: 2.5rem; } }
.mk-artist__body { margin-top: 1.5rem; color: var(--mk-ink-soft); font-size: 1rem; line-height: 1.9; }
.mk-artist__body p + p { margin-top: 1rem; }
.mk-artist__sign {
  margin-top: 1.75rem; font-family: var(--font-italic); font-style: italic; font-size: 1.75rem; color: var(--mk-ochre);
}

/* ==========================================================================
   Collection — cards & tags
   ========================================================================== */

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

.mk-card__tag {
  position: absolute; top: 0.875rem; left: 0.875rem; z-index: 2;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  font-size: 0.6875rem; padding: 0.375rem 0.6875rem; border-radius: 999px; /* was 0.575rem = 9.2px (17.8.26) */
  background: rgba(250, 241, 223, 0.92); color: var(--mk-ink);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px -10px rgba(35, 21, 14, 0.5);
}
.mk-card__tag--sold { background: rgba(35, 21, 14, 0.86); color: var(--mk-cream); }

/* ---- Justified-rows gallery (harmonious, true proportion, no crop) ---- */
.mk-jg { width: 100%; }
.mk-jg__row { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; }
@media (max-width: 560px) { .mk-jg__row { flex-wrap: wrap; } }
.mk-jg__item { display: block; text-decoration: none; color: inherit; }
.mk-jg__media {
  position: relative; overflow: hidden; border-radius: 0.3125rem; width: 100%;
  background: rgba(35, 21, 14, 0.05); box-shadow: var(--shadow-float);
  transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-jg__item:hover .mk-jg__media { transform: translateY(-5px); box-shadow: var(--shadow-float-hover); }
.mk-jg__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.mk-jg__item:hover .mk-jg__media img { transform: scale(1.045); }
.mk-jg__cap { margin-top: 1.125rem; text-align: center; }
.mk-jg__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
  /* Elementor's global kit sets every h3 to italic. Our card titles use the
     display face, which ships no true italic — first Marcellus, now Prata — so
     the browser was faux-slanting them (Yael, 6.8.26: "לא בהטייה, שיהיה יותר
     אלגנטי"). Upright, always. */
  font-style: normal;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.0625rem;
  line-height: 1.3; color: var(--mk-ink);
  /* No colour change on hover (Yael, 6.8.26: "תוריד את ה-hover בחום") — the
     name only grows a hair, so the painting stays the thing that moves. */
  display: inline-block; transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-jg__item:hover .mk-jg__title { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .mk-jg__item:hover .mk-jg__title { transform: none; }
}

/* ---- The Collection: one work at a time, drag it onto a wall (16.8.26) ----
   Yael asked for the gallery page to show one painting alone, with room to
   breathe. Each work keeps its true proportion: the stage is sized by height,
   so a landscape piece and a portrait piece hang at the same size on the wall
   and nothing is ever cropped. Below ~46rem the width takes over and the
   height follows, so a phone shows the work full-width, as it did before. */
/* ---- The measure of the page ----
   Sizing every work purely by height gave the page no stable edge: the column
   swung from 348px to 783px work to work — a 2.25× jump — and the portraits,
   which are most of the collection, sat at 27% of a 1280px field, adrift in
   whitespace (Yael, 16.8.26: "הפרופורציות של העמוד הזה נראות מוזר").

   Now the column is fixed and the art is fitted inside it, the way a wall is
   fixed and the pictures hung on it. The caption, the dots and the arrows keep
   the same position down the whole page, so the eye has one edge to hold, and
   each work is still shown at its true proportion, never cropped. */
.mk-wallgrid {
  --mk-wall-h: min(58vh, 38.75rem);
  --mk-wall-col: min(100%, 36rem);
  width: 100%;
}
.mk-wallgrid__work {
  margin: 0 auto 7.5rem; text-align: center;
  width: var(--mk-wall-col);
}
.mk-wallgrid__work:last-child { margin-bottom: 3rem; }
.mk-wallgrid__work.is-out { display: none; }

/* .mk-wall is the whole unit (art + its controls) and shrinks to the picture,
   so the arrows hug the frame while the caption keeps the column width. Only
   the viewport clips, which lets the dots sit right under the picture instead
   of below the caption. Two limits, whichever bites first: a tall portrait
   never outgrows the height, a wide landscape never outgrows the column. */
.mk-wall {
  position: relative; margin-inline: auto;
  width: min(100%, calc(var(--mk-wall-h) * var(--mk-r, 0.75)));
}
.mk-wall__viewport {
  position: relative; overflow: hidden; border-radius: 0.3125rem;
  aspect-ratio: var(--mk-r, 0.75); width: 100%;
  background: rgba(35, 21, 14, 0.05); box-shadow: var(--shadow-float);
  /* Vertical scrolling always belongs to the page; only sideways is ours. */
  touch-action: pan-y; cursor: grab;
  transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-wall.is-static .mk-wall__viewport { cursor: default; }
.mk-wall.is-drag .mk-wall__viewport { cursor: grabbing; }
.mk-wallgrid__work:hover .mk-wall__viewport { box-shadow: var(--shadow-float-hover); }
.mk-wall__track {
  display: flex; height: 100%; will-change: transform;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-wall.is-drag .mk-wall__track { transition: none; }
.mk-wall__frame { flex: 0 0 100%; height: 100%; display: block; }
.mk-wall__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Position indicator, directly beneath the picture. The dot stays 6px; the
   button around it is a 44px touch target (Yael, 16.8.26 — at 8px nobody on a
   phone could hit it). */
.mk-wall__dots { display: flex; justify-content: center; margin-top: 0.5rem; }
.mk-wall__dot {
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.mk-wall__dot span {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: rgba(35, 21, 14, 0.22);
  transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-wall__dot.is-on span { background: rgba(35, 21, 14, 0.62); transform: scale(1.3); }
.mk-wall__dot:hover span { background: rgba(35, 21, 14, 0.45); }

/* Arrows sit in the wall margin, beside the picture — never on top of it
   (Yael, 16.8.26). They are hidden by default and only exist where there is
   real room outside the frame, so they can never crowd the art. */
.mk-wall__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; display: none; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--mk-muted);
  transition: color 0.3s;
}
.mk-wall__arrow svg { width: 1.375rem; height: 1.375rem; }
.mk-wall__arrow--prev { left: -3.5rem; }
.mk-wall__arrow--next { right: -3.5rem; }
/* Always there, not summoned by hover (Yael, 16.8.26: "שהחיצים יישארו
   קבועים"). A control that only exists once you have already found the thing
   it points at is not a control. Shown wherever there is room beside the
   picture; on a phone the work fills the column, so the swipe and the dots
   carry it and nothing is parked on top of the art. */
@media (min-width: 60rem) {
  .mk-wall__arrow { display: grid; }
  .mk-wall__arrow:hover { color: var(--mk-ink); }
}

/* The one-time nudge lives in the script now, offset from whichever frame is
   showing and settled through the same path as every other move. It used to be
   a @keyframes here, and that was a bug: keyframes outrank the inline
   transform the slider sets, and the 0% frame — written before the loop gained
   its copies — pointed at the last room shot, so the first work in the gallery
   sat showing a room instead of the painting (live, 16.8.26). */

/* ---- The wall label ----
   Three stacked lines of tracked capitals made everything shout at the same
   volume, and the entry price for a print was set heavier than the price of
   the painting itself (Yael, 16.8.26). A gallery label reads the other way:
   the name in display capitals, then the details quietly in sentence case, so
   the eye goes name → work → prints without anything competing.
   Note `.mk-meta2 .mk-stack__status` sets its own size later in this file at
   equal specificity, so the status line needs the extra class to win. */
.mk-wall__cap { display: block; margin-top: 1rem; }
.mk-wall__cap .mk-jg__title { font-size: 1.1875rem; letter-spacing: 0.1em; }
.mk-wall__cap .mk-meta2 {
  margin-top: 0.5rem; gap: 0.1875rem;
  font-family: var(--font-body);
  text-transform: none; letter-spacing: 0.01em; font-size: 0.8125rem;
}
.mk-wall__cap .mk-meta2 .mk-stack__status {
  text-transform: none; letter-spacing: 0.01em;
  font-size: 0.8125rem; font-weight: 500;
}
/* The painting's own price leads; the print entry price follows, lighter. */
.mk-wall__cap .mk-meta2__price { font-weight: 400; color: var(--mk-muted); }

/* ---- Killing the parent theme's pink, site-wide ----
   Hello Elementor paints EVERY button on the site #cc3366 — pink text and
   border at rest, solid pink fill on hover and focus. It was never only the
   gallery: the mobile burger, the "Collector List" nav button and every modal
   close button flashed pink too (found on the live site, 16.8.26).
   Colour and background only; no padding or sizing, so nothing shifts.

   The two weights below matter and are not interchangeable:

   • At rest, `:where()` keeps this at the weight of a bare element, so it
     clears Hello's `button` (this file loads later) while ANY component rule
     of ours still wins. Deliberately not extended to `[type="button"]` — that
     selector would outweigh rules like `.mk-nav__btn` and steal their colour.
   • On hover, Hello fills from `[type="button"]:hover`, which outweighs a
     component's own `.x:hover`. Only the fill needs beating: components that
     declare a hover colour already win it on load order. */
:where(body.mk-wp) button {
  color: inherit; background-color: transparent; border-color: transparent;
}
body.mk-wp button:hover, body.mk-wp button:focus, body.mk-wp button:active,
body.mk-wp [type="button"]:hover, body.mk-wp [type="button"]:focus, body.mk-wp [type="button"]:active,
body.mk-wp [type="submit"]:hover, body.mk-wp [type="submit"]:focus, body.mk-wp [type="submit"]:active {
  background-color: transparent;
}
/* The only two controls in the theme that genuinely want a fill on hover —
   restored above the blanket. */
body.mk-wp .mk-qty button:hover { background-color: rgba(35, 21, 14, 0.06); }
body.mk-wp .mk-lb__close:hover { background-color: rgba(250, 241, 223, 0.18); }
/* Buttons that wrap an image or fill the screen carry no colour rule of their
   own, so Hello's `[type="button"]` pink reached them. It draws nothing today
   — no text, no border — but it sits one `currentColor` away from surfacing. */
body.mk-wp .mk-lb__backdrop, body.mk-wp .mk-overlay,
body.mk-wp .mk-insitu__item, body.mk-wp .mk-pdp__zoom { color: inherit; }

/* The variation radios the product plugin renders are 13px across. The row is
   clickable, but the control a customer aims at should be hittable on its own
   (live product page, 16.8.26). */
body.mk-wp .woovr-variation input[type="radio"] {
  width: 1.375rem; height: 1.375rem; accent-color: var(--mk-ochre-deep);
}
body.mk-wp .woovr-variation-selector { min-width: 2.75rem; }
/* Three size rows at ~100px each pushed the button off the screen. A little
   tighter, still a comfortable row. */
body.mk-wp .woovr-variation.woovr-variation-radio { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ---- What happens after "Add to cart" ----
   The tap used to produce nothing at all for several seconds: the button never
   changed, no message appeared, and the only confirmation was a small number
   at the very top of the screen — a screen and a half above the thumb that had
   just pressed (measured live, 16.8.26). The button now answers for itself,
   and WooCommerce's own "View cart" link becomes a real next step instead of a
   34px default link. */
body.mk-wp .single_add_to_cart_button.loading { opacity: 1; }
body.mk-wp .single_add_to_cart_button.loading::after { display: none; }
body.mk-wp .single_add_to_cart_button[data-mk-state] { position: relative; }
body.mk-wp .single_add_to_cart_button.is-added { background-color: var(--mk-ochre); }

body.mk-wp .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 2.75rem; margin-top: 0.75rem;
  border: 1px solid var(--mk-ink); color: var(--mk-ink); text-decoration: none;
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
body.mk-wp .added_to_cart:hover { background-color: var(--mk-ink); color: var(--mk-cream); }

/* ---- Neutralising the parent theme's button styling ----
   Hello Elementor's stylesheet paints EVERY `button` on the site in #cc3366 —
   pink text, and a solid pink fill on hover and focus:
     button { color: rgb(204,51,102) }
     button:hover, button:focus { color:#fff; background-color: rgb(204,51,102) }
   Our filter, dots and arrows are buttons, so they all inherited it (Yael,
   16.8.26: "ההובר של האתר הוא בצבע ורוד וזה לא קשור בכלל"). Setting a colour
   at rest is not enough — the fill only appears on :hover/:focus, so those
   states have to be declared too. Prefixed with body.mk-wp to clear the parent
   theme's specificity. */
body.mk-wp .mk-filter__btn,
body.mk-wp .mk-wall__dot,
body.mk-wp .mk-filter__btn:hover, body.mk-wp .mk-filter__btn:focus,
body.mk-wp .mk-filter__btn:active,
body.mk-wp .mk-wall__dot:hover, body.mk-wp .mk-wall__dot:focus,
body.mk-wp .mk-wall__dot:active,
body.mk-wp .mk-wall__arrow, body.mk-wp .mk-wall__arrow:hover,
body.mk-wp .mk-wall__arrow:focus, body.mk-wp .mk-wall__arrow:active {
  background: none; background-color: transparent;
  border: 0; box-shadow: none; text-decoration: none;
}
body.mk-wp .mk-filter__btn:hover, body.mk-wp .mk-filter__btn:focus { color: var(--mk-ink); }
body.mk-wp .mk-filter__btn.is-active { color: var(--mk-ink); }
body.mk-wp .mk-filter__btn { color: var(--mk-muted); }
body.mk-wp .mk-wall__arrow { color: var(--mk-muted); }
body.mk-wp .mk-wall__arrow:hover, body.mk-wp .mk-wall__arrow:focus { color: var(--mk-ink); }
/* The dot's mark is a span with its own background, so the pink `color` the
   parent theme sets never showed — but it was still sitting on the element,
   one `currentColor` away from surfacing. Pinned down. */
body.mk-wp .mk-wall__dot,
body.mk-wp .mk-wall__dot:hover,
body.mk-wp .mk-wall__dot:focus { color: var(--mk-ink); }

/* Keyboard users get a visible ring — the theme's links had none. */
.mk-wall__frame:focus-visible, .mk-wall__cap:focus-visible,
.mk-wall__dot:focus-visible, .mk-filter__btn:focus-visible,
.mk-wall__arrow:focus-visible {
  outline: 2px solid var(--mk-ink); outline-offset: 3px; border-radius: 0.25rem;
}

@media (max-width: 46rem) {
  /* Phones: the work takes the full column and the height follows its
     proportion — one painting after another, as it already was. `.mk-wall`
     needs saying too; left to the height formula a portrait stopped a dozen
     pixels short of the edge and the column looked accidentally inset. */
  .mk-wallgrid__work { width: 100%; margin-bottom: 5rem; }
  .mk-wall { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-wall__track { transition: none; }
}

/* One work at a time does not want the full 80rem measure of the site: a
   portrait 348px wide sat in a 1280px field with 466px of nothing either side,
   which is what made the page read as adrift. The gallery gets its own, much
   narrower measure so the whitespace is a margin rather than a void. */
.mk-app--gallery .mk-inner { max-width: 46rem; }

/* The gallery opens on a painting, not on a headline. The page head is shared
   with About/Projects, so the trim is scoped to this page only. */
.mk-app--gallery .mk-page-head { padding-bottom: 1.5rem; }
@media (max-width: 46rem) {
  .mk-app--gallery .mk-page-head { padding-top: 3.5rem; padding-bottom: 0.5rem; }
  .mk-app--gallery .mk-page-title { font-size: clamp(2rem, 11vw, 2.75rem); }
  .mk-app--gallery .mk-page-lead { font-size: 0.9375rem; max-width: 30rem; }
}

/* Two-line caption: original status on top, print entry price below */
.mk-meta2 {
  margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem;
}
.mk-meta2__size { color: var(--mk-muted); }
/* Name leads dark, price quieter/lighter beneath it (Yael, 26.7.26). */
.mk-meta2__price { color: var(--mk-muted); font-weight: 600; }
.mk-meta2 .mk-stack__status { font-size: 0.75rem; letter-spacing: 0.16em; }

/* The home collection reads as a gallery wall label: the name small and wide,
   the two meta lines quieter still (Yael, 6.8.26).
   Sizes lifted 13.8.26 (UX audit): the wall label was measuring 15px for the
   name and 9.6/9.9px for the status and price, so the identity and the price of
   the work were the smallest type on the page. Same quiet hierarchy, legible. */
.mk-collection-hero .mk-jg__title { font-size: 1.0625rem; letter-spacing: 0.16em; }
.mk-collection-hero .mk-meta2 { font-size: 0.75rem; }
.mk-collection-hero .mk-meta2 .mk-stack__status { font-size: 0.75rem; }

/* Upright everywhere else the kit's italic h3 would leak in. */
.mk-stack__title, .mk-project__title, .mk-section-title, .mk-pdp__title { font-style: normal; }

/* ---- Originals-only filter (gallery page) ----
   The bar is a control, not content: it only works once mk-theme.js has bound
   it, so it appears only when the page has JS (the mk-js class is set inline in
   the head). Without JS the full collection simply shows, as it does today —
   never a dead button, and never content hidden behind a script.

   A filter is a control, not a call to action. Boxed, it rendered as a filled
   dark block — the highest-contrast element on a page whose whole job is to
   show paintings, and on a phone the pair wrapped to two rows and pushed the
   first work under the fold (Yael, 16.8.26). Now it is quiet type with a rule
   under the active choice, on one line at any width. */
.mk-filter { display: none; }
.mk-js .mk-filter {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: nowrap; gap: 1.75rem; margin: 0 0 2.5rem;
}
.mk-filter__btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0 0.125rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  color: var(--mk-muted);
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600;
  transition: color 0.3s;
}
.mk-filter__btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.6875rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-filter__btn:hover { color: var(--mk-ink); }
.mk-filter__btn.is-active { color: var(--mk-ink); }
.mk-filter__btn.is-active::after { transform: scaleX(1); }
.mk-filter__count { font-size: 0.6875rem; letter-spacing: 0.1em; opacity: 0.55; }
/* Tightening on narrow phones comes out of the spacing, not the type — 12px is
   the floor for anything a thumb has to read and hit. */
@media (max-width: 26rem) {
  .mk-js .mk-filter { gap: 1.125rem; }
  .mk-filter__btn { letter-spacing: 0.1em; }
}
/* At 320px the pair was reaching within ~17px of both edges. Tracking gives
   the gutter back without touching the size of the type. */
@media (max-width: 22rem) {
  .mk-js .mk-filter { gap: 0.875rem; }
  .mk-filter__btn { letter-spacing: 0.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-filter__btn::after { transition: none; }
}

/* ---- Copy protection: no drag / no save on the artwork ---- */
.mk-jg__media img, .mk-cf__card img, .mk-pdp__media img,
.mk-related-grid img, .mk-lb__img, .mk-signup__art img,
.mk-hero2__art img, .mk-stack__media img, .mk-contact__art img,
.mk-insitu__item img,
/* The gallery frames were left out when the wall slider landed in 2.5.0, so
   the browser's own image-drag fired instead of the slider and the artwork was
   savable again. Both regressions close here (16.8.26). */
.mk-wall__frame img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* ==========================================================================
   Commission — composed centered invitation (no image)
   ========================================================================== */

.mk-close__rule { width: 3rem; height: 1px; background: var(--mk-ochre); margin: 0 auto 1.875rem; }

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

/* Commission split (home + gallery): a real commissioned wall beside the
   invitation — the custom-work pillar gets visual weight, not a bare card. */
.mk-commission3 {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
  max-width: 65rem; margin: 0 auto;
}
@media (min-width: 850px) { .mk-commission3 { grid-template-columns: 1fr 0.9fr; gap: 4.375rem; } }
.mk-commission3__media { justify-self: center; width: 100%; max-width: 30rem; }
.mk-commission3__media img {
  width: 100%; height: auto; display: block;
  border-radius: 0.5rem; box-shadow: var(--shadow-float);
}
.mk-commission3__caption {
  margin: 0.875rem 0 0; text-align: center;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600;
  color: var(--mk-muted);
}
.mk-commission3__body { text-align: left; }
@media (max-width: 849px) { .mk-commission3__body { text-align: center; } .mk-commission3__body .mk-close__rule { margin-left: auto !important; margin-right: auto !important; } }

.mk-commission2__card {
  max-width: 38.75rem; margin: 0 auto; text-align: center;
  padding: 3.25rem 2.5rem; border: 1px solid var(--mk-line); border-radius: 0.625rem;
  background: rgba(250, 241, 223, 0.35);
}
.mk-commission2__lead { max-width: 27.5rem; margin: 1.25rem auto 2rem; color: var(--mk-muted); font-size: 1rem; line-height: 1.9; }

/* ---- About / Artist page: photo one side, all text the other ---- */
.mk-about { padding-top: calc(var(--mk-header-h) + 3.75rem); }
.mk-about__grid2 {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; max-width: 65rem; margin: 0 auto;
}
@media (min-width: 850px) { .mk-about__grid2 { grid-template-columns: 0.82fr 1fr; gap: 4rem; } }
.mk-about__photo {
  border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow-float); justify-self: center; width: 100%; max-width: 25rem;
}
.mk-about__photo img { display: block; width: 100%; height: auto; }
.mk-about__col { max-width: 30rem; }
.mk-about__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 2.75rem; line-height: 1.05; color: var(--mk-ink);
}
@media (min-width: 800px) { .mk-about__title { font-size: 3.75rem; } }
.mk-about__text { margin-top: 1.625rem; color: var(--mk-ink-soft); font-size: 1rem; line-height: 1.9; }
.mk-about__text p + p { margin-top: 1.125rem; }

/* ==========================================================================
   Inner page headers (Collection, etc.)
   ========================================================================== */

.mk-page-head {
  text-align: center;
  padding: calc(var(--mk-header-h) + 1.5rem) 1.5rem 3.75rem;
}
@media (min-width: 750px) { .mk-page-head { padding: calc(var(--mk-header-h) + 2.1875rem) 2.5rem 5rem; } }
.mk-page-title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.05; color: var(--mk-ink);
  /* A GUARD, not a fix for a live bug. At the old flat 2.875rem Prata fits only
     about nine uppercase characters inside a 375px screen before a single
     unbreakable word is wider than its box and the page scrolls sideways
     ("COLLECTION" measures 353px against 327px of room). Today's only page
     using this size is "Projects" (273px, fine) — the gallery already has its
     own fluid override below 46rem — so nothing was broken; this just means a
     longer page title added later cannot break it. Cap = the previous size. */
  font-size: clamp(2rem, 11vw, 2.875rem);
}
@media (min-width: 750px) { .mk-page-title { font-size: 4.375rem; } }
.mk-page-lead { max-width: 32.5rem; margin: 1.25rem auto 0; color: var(--mk-muted); font-size: 1rem; line-height: 1.8; }

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

/* The buy decision sat below the fold on a 900px laptop — "Add to cart" landed
   at 940px (measured live, 16.8.26). Reclaiming the head-room here lifts the
   whole column, so choosing a size and buying happen on the first screen. */
.mk-pdp { padding-top: calc(var(--mk-header-h) + 0.875rem); }
.mk-pdp__grid {
  max-width: var(--mk-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.5rem 1.25rem;
}
@media (min-width: 900px) { .mk-pdp__grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.75rem; align-items: start; padding: 0 2.5rem 1.25rem; } }
.mk-pdp__media {
  position: relative; border-radius: 0.5rem; overflow: hidden;
  background: rgba(35, 21, 14, 0.05); box-shadow: var(--shadow-float);
}
@media (min-width: 900px) { .mk-pdp__media { position: sticky; top: calc(var(--mk-header-h) + 1.875rem); } }
.mk-pdp__media img { width: 100%; height: auto; display: block; }
.mk-pdp__info { max-width: 28.75rem; }
.mk-pdp__back { margin-bottom: 1.5rem; }
.mk-pdp__medium {
  margin: 0.875rem 0 0;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600;
  color: var(--mk-ochre-deep);
}
.mk-pdp__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 2.375rem; line-height: 1.05; color: var(--mk-ink);
}
@media (min-width: 750px) { .mk-pdp__title { font-size: 3.125rem; } }
.mk-pdp__story { margin-top: 1.5rem; color: var(--mk-ink-soft); font-size: 1rem; line-height: 1.9; }
.mk-pdp__story p { margin: 0; }
.mk-pdp__story p + p { margin-top: 0.75rem; }
.mk-pdp__divider { height: 1px; background: var(--mk-line); margin: 2.125rem 0; }

.mk-tiers { display: flex; gap: 0.5rem; padding: 0.3125rem; background: rgba(35, 21, 14, 0.05); border-radius: 999px; margin-bottom: 1.75rem; }
.mk-tier-tab {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 0.6875rem 0.625rem; border-radius: 999px;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600;
  color: var(--mk-muted); transition: background-color 0.3s, color 0.3s;
}
.mk-tier-tab.is-active { background: var(--mk-cream); color: var(--mk-ink); box-shadow: 0 8px 20px -14px rgba(35,21,14,0.5); }
.mk-tier-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.mk-price { font-family: var(--font-display); font-optical-sizing: auto; font-size: 1.875rem; color: var(--mk-ink); margin-bottom: 0.375rem; }
.mk-price small { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mk-muted); margin-left: 0.5rem; }
.mk-price--sold { color: var(--mk-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.5rem; }

.mk-field-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); margin: 1.5rem 0 0.75rem; }
.mk-sizes { display: flex; flex-direction: column; gap: 0.625rem; }
.mk-size {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9375rem 1.125rem; border: 1px solid rgba(35,21,14,0.18); border-radius: 0.375rem;
  background: rgba(250,241,223,0.4); cursor: pointer; transition: border-color 0.3s, background-color 0.3s;
  font-family: var(--font-body); font-size: inherit; color: inherit; width: 100%; text-align: left;
}
.mk-size:hover { border-color: rgba(169,125,58,0.6); }
.mk-size.is-active { border-color: var(--mk-ink); background: rgba(250,241,223,0.85); }
.mk-size__size { font-size: 0.9375rem; }
.mk-size__price { font-family: var(--font-display); font-size: 1.1875rem; }

.mk-original { border: 1px solid rgba(35,21,14,0.16); border-radius: 0.5rem; padding: 1.75rem; background: rgba(250,241,223,0.5); }
.mk-original__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.mk-original__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.25rem 0 1.5rem; }
.mk-original__meta div { min-width: 6.25rem; }
/* dt was 0.5938rem — 9.5px, the smallest text on the product page (17.8.26). */
.mk-original__meta dt { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); margin-bottom: 0.25rem; }
.mk-original__meta dd { margin: 0; font-size: 0.9375rem; color: var(--mk-ink); }
.mk-original__note { margin-top: 1.125rem; font-size: 0.8125rem; line-height: 1.65; color: var(--mk-muted); }
.mk-badge { display: inline-flex; align-items: center; gap: 0.4375rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 999px; }
.mk-badge--dot::before { content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
/* Kept in step with the status line — availability never reads as green/red
   anywhere in the theme (16.8.26). */
.mk-badge--available { color: var(--mk-ink-soft); background: rgba(35, 21, 14, 0.08); }
.mk-badge--sold { color: var(--mk-muted); background: rgba(35, 21, 14, 0.05); }

.mk-qty { display: inline-flex; align-items: center; border: 1px solid rgba(35,21,14,0.2); border-radius: 0.375rem; overflow: hidden; margin-top: 1.5rem; }
.mk-qty button { width: 2.75rem; height: 2.75rem; border: 0; background: none; cursor: pointer; font-size: 1.1875rem; color: var(--mk-ink); transition: background-color 0.3s; }
.mk-qty button:hover { background: rgba(35,21,14,0.06); }
.mk-qty span { width: 2.5rem; text-align: center; font-size: 1rem; }

.mk-buy-row { margin-top: 1.75rem; }
.mk-trust { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.mk-trust span { display: inline-flex; align-items: center; gap: 0.4375rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); }
.mk-trust svg { color: var(--mk-ochre); width: 0.9375rem; height: 0.9375rem; }

.mk-related { border-top: 1px solid var(--mk-line); margin-top: 3.75rem; }
.mk-related-wrap { max-width: 57.5rem; margin: 0 auto; }

/* ---- "See it in a space" — in-situ lifestyle shots (mobile-first) ---- */
.mk-insitu { border-top: 1px solid var(--mk-line); padding-top: 3.25rem; }
@media (min-width: 750px) { .mk-insitu { padding-top: 5rem; } }
.mk-insitu-wrap { max-width: 64rem; margin: 0 auto; }
.mk-insitu__head { margin-bottom: 2rem; }
@media (min-width: 750px) { .mk-insitu__head { margin-bottom: 2.75rem; } }
.mk-insitu__title { font-size: 1.75rem; }
@media (min-width: 750px) { .mk-insitu__title { font-size: 2.25rem; } }
.mk-insitu__lead {
  margin: 0.75rem 0 0; font-family: var(--font-body);
  color: var(--mk-muted); font-size: 0.9375rem; line-height: 1.65;
}
.mk-insitu__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .mk-insitu__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.mk-insitu__item {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: rgba(35, 21, 14, 0.05); border-radius: 0.5rem; overflow: hidden;
  box-shadow: var(--shadow-float); cursor: zoom-in;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-insitu__item img { width: 100%; height: auto; display: block; }
@media (hover: hover) {
  .mk-insitu__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-float-hover); }
}
.mk-insitu__item:focus-visible { outline: 2px solid var(--mk-ochre); outline-offset: 3px; }
.mk-insitu__note {
  margin: 1.5rem 0 0; text-align: center; font-family: var(--font-body);
  font-size: 0.75rem; letter-spacing: 0.01em; color: var(--mk-muted);
}
@media (prefers-reduced-motion: reduce) { .mk-insitu__item { transition: none; } }

/* ==========================================================================
   Cart drawer
   ========================================================================== */

/* No backdrop-filter on fullscreen overlays — it triggers Safari's broken
   (magenta) compositing layer over the fixed plaster background. */
.mk-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(35,21,14,0.5); opacity: 0; animation: mk-fade 0.3s ease forwards; border: 0; padding: 0; cursor: default; }
@keyframes mk-fade { to { opacity: 1; } }
.mk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(26.25rem, 100%);
  background: var(--mk-cream); box-shadow: -30px 0 80px -40px rgba(35,21,14,0.6);
  display: flex; flex-direction: column; transform: translateX(100%);
  animation: mk-slide-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes mk-slide-in { to { transform: translateX(0); } }
.mk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--mk-line); }
.mk-drawer__title { font-family: var(--font-display); font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mk-drawer__close { background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1.05; color: var(--mk-muted); transition: color 0.3s; }
.mk-drawer__close:hover { color: var(--mk-ink); }
.mk-drawer__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.mk-drawer__empty { text-align: center; color: var(--mk-muted); padding: 3.75rem 1.25rem; }
.mk-line { display: grid; grid-template-columns: 4.375rem 1fr auto; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--mk-line); }
.mk-line__media { border-radius: 0.25rem; overflow: hidden; aspect-ratio: 4/5; background: rgba(35,21,14,0.06); }
.mk-line__media img { width: 100%; height: 100%; object-fit: cover; }
.mk-line__title { font-family: var(--font-display); font-size: 1.0625rem; }
.mk-line__variant { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--mk-muted); margin-top: 0.25rem; }
.mk-line__remove { background: none; border: 0; cursor: pointer; font-size: 0.6875rem; color: var(--mk-muted); text-decoration: underline; margin-top: 0.5rem; padding: 0; }
.mk-line__remove:hover { color: var(--mk-clay); }
.mk-line__price { font-family: var(--font-display); font-size: 1.0625rem; text-align: right; }
.mk-drawer__foot { padding: 1.5rem; border-top: 1px solid var(--mk-line); background: rgba(250,241,223,0.6); }
.mk-drawer__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.375rem; }
.mk-drawer__total-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); }
.mk-drawer__total-value { font-family: var(--font-display); font-size: 1.5rem; }
.mk-drawer__ship { font-size: 0.75rem; color: var(--mk-muted); margin-bottom: 1.25rem; }
.mk-drawer__error { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--mk-clay); text-align: center; }

/* ==========================================================================
   Modals (reserve + newsletter)
   ========================================================================== */

/* Extra top padding keeps the card clear of the sticky header (it never tucks under it). */
.mk-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(var(--mk-header-h) + 1.5rem) 1.25rem 1.5rem; }
.mk-modal[hidden] { display: none; }
.mk-modal__card {
  position: relative; z-index: 61; width: min(32.5rem, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--mk-cream); border-radius: 0.625rem; padding: 2.25rem;
  box-shadow: 0 40px 100px -40px rgba(35,21,14,0.7);
  transform: translateY(14px); opacity: 0; animation: mk-modal-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes mk-modal-in { to { transform: translateY(0); opacity: 1; } }
.mk-modal__title { font-family: var(--font-display); font-optical-sizing: auto; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.875rem; line-height: 1.05; }
.mk-modal__sub { margin: 0.75rem 0 0; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600; color: var(--mk-ochre-deep); }
.mk-modal__sub + .mk-modal__lead { margin-top: 1rem; }
.mk-modal__lead { color: var(--mk-muted); line-height: 1.8; font-size: 0.9375rem; margin-bottom: 1.5rem; }
.mk-modal__close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; font-size: 1.5rem; color: var(--mk-muted);
}
.mk-modal__close:hover { color: var(--mk-ink); }
/* The close button sat on top of the headline: on a phone the title wraps to
   two lines and its box ran straight under the ×. The title keeps clear of it
   instead of the × moving off the card (16.8.26). */
.mk-modal__title { padding-right: 2.5rem; }
/* "Your email" was pressed flat against the paragraph above it — the lead's
   own margin was being flattened — and set at 10px. */
.mk-modal__lead + form, .mk-modal__lead + .mk-field { margin-top: 1.75rem; }
.mk-modal .mk-field label { font-size: 0.75rem; letter-spacing: 0.16em; }
.mk-modal__success { text-align: center; padding: 1.25rem 0; }
/* Asked for italic but pointed at the display face, which has no italic cut —
   the browser was slanting it artificially. It wants the same treatment as
   .mk-artist__sign, so it now uses the face that ships a real italic. */
.mk-modal__success-title { font-family: var(--font-italic); font-style: italic; font-weight: 500; font-size: 1.75rem; color: var(--mk-ochre); margin-bottom: 0.75rem; }

.mk-field { margin-bottom: 1.375rem; }
/* 0.625rem is 10px — under the legible floor for a label that names the field
   a visitor is about to type into (17.8.26). */
.mk-field label { display: block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); margin-bottom: 0.625rem; }
.mk-field input, .mk-field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(35,21,14,0.3); border-radius: 0;
  padding: 0.5rem 0; font-size: 1.0625rem; font-family: var(--font-body); color: var(--mk-ink); transition: border-color 0.3s;
  box-shadow: none;
}
.mk-field input:focus, .mk-field textarea:focus { outline: none; border-bottom-color: var(--mk-ochre); }

/* ---- Zoom trigger on the product image ---- */
.mk-pdp__zoom {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
  position: relative; border-radius: inherit; overflow: hidden;
}
.mk-zoom-badge {
  position: absolute; bottom: 0.875rem; right: 0.875rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.5rem 0.8125rem; border-radius: 999px;
  background: rgba(35,21,14,0.72); color: var(--mk-cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-zoom-badge svg { width: 1rem; height: 1rem; }
.mk-pdp__zoom:hover .mk-zoom-badge, .mk-pdp__zoom:focus-visible .mk-zoom-badge { opacity: 1; transform: translateY(0); }
@media (hover: none) { .mk-zoom-badge { opacity: 1; transform: none; } }

/* ---- Lightbox / zoom viewer ---- */
.mk-lb { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.mk-lb[hidden] { display: none; }
.mk-lb__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 7, 0.94); opacity: 0; animation: mk-fade 0.3s ease forwards; border: 0; padding: 0; cursor: default; }
.mk-lb__close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3;
  width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 1px solid rgba(250,241,223,0.24);
  background: rgba(250,241,223,0.08); color: var(--mk-cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background-color 0.3s;
}
.mk-lb__close:hover { background: rgba(250,241,223,0.18); }
.mk-lb__close svg { width: 1.5rem; height: 1.5rem; }
.mk-lb__stage {
  position: relative; z-index: 2; max-width: 100%; max-height: 92vh; overflow: hidden;
  border-radius: 0.25rem; cursor: zoom-in; box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8);
  opacity: 0; animation: mk-modal-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.mk-lb__stage.is-zoom { cursor: zoom-out; }
.mk-lb__img {
  display: block; max-width: 100%; max-height: 92vh; width: auto; height: auto;
  transition: transform 0.12s ease-out;
}
.mk-lb__hint {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 1rem; border-radius: 999px;
  background: rgba(250,241,223,0.1); color: rgba(250,241,223,0.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.mk-lb__hint svg { width: 1rem; height: 1rem; }

/* Newsletter modal: two-panel with artwork */
.mk-news { width: min(40rem, 100%); padding: 0; overflow: hidden; }
.mk-news__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .mk-news__grid { grid-template-columns: 0.85fr 1fr; } }
.mk-news__art { display: none; }
@media (min-width: 620px) { .mk-news__art { display: block; position: relative; } .mk-news__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } }
.mk-news__body { padding: 2.25rem; }
@media (min-width: 620px) { .mk-news__body { padding: 2.5rem 2.5rem 2.5rem 3.25rem; } }

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

.mk-footer { flex-shrink: 0; border-top: 1px solid var(--mk-line); padding: 3.75rem 1.5rem 1.875rem; }
.mk-footer__inner {
  max-width: var(--mk-maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 700px) { .mk-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 3.75rem; } }
.mk-footer__name {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 1.1875rem; color: var(--mk-ink);
}
.mk-footer__tag { margin-top: 0.875rem; max-width: 18.75rem; color: var(--mk-muted); font-size: 0.9375rem; line-height: 1.8; }
.mk-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.mk-footer__head {
  /* Was 0.6562rem — 10.5px, under the legible floor on a phone (16.8.26). */
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; font-weight: 600;
  color: var(--mk-muted); margin-bottom: 0.375rem;
}
/* Footer links measured 17px tall: a thumb cannot reliably hit that. The row
   spacing already existed, so the height comes from padding rather than from
   pushing the columns further apart. */
.mk-footer__col { gap: 0.25rem; }
.mk-footer__col a, .mk-footer__col button {
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--mk-ink-soft); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left; transition: color 0.3s;
  padding: 0.5rem 0; min-height: 2.75rem; display: inline-flex; align-items: center;
}
.mk-footer__col a:hover, .mk-footer__col button:hover { color: var(--mk-ochre); }
.mk-footer__base {
  max-width: var(--mk-maxw); margin: 2.75rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--mk-line);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  /* Was 0.625rem — 10px for the copyright and shipping lines (17.8.26). */
  text-transform: uppercase; letter-spacing: var(--mk-track); font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted);
}
@media (min-width: 700px) { .mk-footer__base { flex-direction: row; justify-content: space-between; } }

/* ==========================================================================
   WhatsApp float
   ========================================================================== */

.mk-whatsapp {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--mk-ink); border: 1px solid rgba(250,241,223,0.14);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -12px rgba(35,21,14,0.5); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s;
}
.mk-whatsapp:hover { transform: translateY(-2px); background: var(--mk-ochre); }
.mk-whatsapp svg { width: 1.5rem; height: 1.5rem; color: var(--mk-cream); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Gated on html.mk-js (set inline in <head>): if JavaScript ever fails to
   run, nothing on the site is left invisible at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  html.mk-js [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-d, 0ms);
  }
  html.mk-js [data-reveal].is-in { opacity: 1; transform: translateY(0); }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Typewriter (hero tagline types itself in, keyboard-style) ---- */
.mk-tw__word { display: inline-block; }
.mk-tw__ch { transition: none; } /* characters pop in instantly, like keystrokes */
.mk-tw__caret {
  display: inline-block; width: 0.09em; height: 1.05em; margin-left: 0.04em;
  background: currentColor; vertical-align: -0.14em; border-radius: 1px;
  animation: mk-caret-blink 1.05s steps(1) infinite;
}
@keyframes mk-caret-blink { 0%, 50% { opacity: 0.85; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-tw__caret { display: none; } }


/* The legal row in the footer base (19.8.26). It inherits the base row's
   uppercase micro-scale, so it needs only its own flow and a hover; giving it
   a size of its own would make it compete with the copyright beside it. */
.mk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.25rem;
}
.mk-footer__legal a {
  color: inherit;
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s;
}
.mk-footer__legal a:hover { color: var(--mk-ochre-deep); }

/* ==========================================================================
   Press feedback (2.9.26)
   ==========================================================================
   Audit finding: of six primary controls — the button, the filters, the
   painting frame, the dots, the cart and the burger — not one had an :active
   state. There were two :active rules in 673, and both exist only to cancel
   the parent theme's pink fill.

   On a desktop the gap is hidden by :hover. On a phone there is no hover at
   all, so a finger landed on a control and the screen did nothing until the
   next page arrived. That reads as slowness even when nothing is slow.

   Timing is deliberately asymmetric and stays on the existing scale: 0.12s in
   so the answer is immediate, 0.3s out so the release is calm. Every rule
   below moves transform or opacity only — the compositor properties — and
   none of them touches background, which the neutralising block above owns.

   The families differ on purpose. A button can squash; a painting cannot.
   ---------------------------------------------------------------------- */

/* Our own feedback replaces the grey flash iOS paints over taps. */
body.mk-wp a,
body.mk-wp button,
body.mk-wp [role="button"],
body.mk-wp input,
body.mk-wp select,
body.mk-wp textarea { -webkit-tap-highlight-color: transparent; }

/* Kills the 300ms wait Safari holds in case a tap becomes a double-tap.
   The carousel frames are excluded: their viewport declares touch-action:
   pan-y so the drag script can own the horizontal axis, and widening it on a
   child would hand horizontal panning back to the browser mid-swipe. */
body.mk-wp button,
body.mk-wp [role="button"],
body.mk-wp a.mk-button,
body.mk-wp a.mk-link,
body.mk-wp a.mk-pdp__back,
body.mk-wp a.mk-jg__item,
body.mk-wp .mk-header__cart,
body.mk-wp .mk-footer__col a { touch-action: manipulation; }

/* ---- 1. Buttons: a real squash ---- */
body.mk-wp .mk-button,
body.mk-wp .single_add_to_cart_button,
body.mk-wp #place_order,
body.mk-wp button[name="apply_coupon"],
body.mk-wp button[name="update_cart"],
body.mk-wp .mk-signup__form button[type="submit"] {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
body.mk-wp .mk-button:active,
body.mk-wp .single_add_to_cart_button:active,
body.mk-wp #place_order:active,
body.mk-wp button[name="apply_coupon"]:active,
body.mk-wp button[name="update_cart"]:active,
body.mk-wp .mk-signup__form button[type="submit"]:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}

/* ---- 2. Text controls: dim, never move ----
   A label that jumps under the thumb reads as a glitch, so these answer with
   opacity instead of transform. */
body.mk-wp .mk-link,
body.mk-wp .mk-pdp__back,
body.mk-wp .mk-nav__btn,
body.mk-wp .mk-filter__btn,
body.mk-wp .mk-footer__col a,
body.mk-wp .mk-footer__col button,
body.mk-wp .mk-footer__legal a,
body.mk-wp .mk-nav a { transition: color 0.3s, border-color 0.3s, opacity 0.3s; }
body.mk-wp .mk-link:active,
body.mk-wp .mk-pdp__back:active,
body.mk-wp .mk-nav__btn:active,
body.mk-wp .mk-filter__btn:active,
body.mk-wp .mk-footer__col a:active,
body.mk-wp .mk-footer__col button:active,
body.mk-wp .mk-footer__legal a:active,
body.mk-wp .mk-nav a:active { opacity: 0.5; transition-duration: 0.12s; }

/* ---- 3. Icon buttons: they can take a firmer squeeze ---- */
body.mk-wp .mk-header__burger,
body.mk-wp .mk-header__cart,
body.mk-wp .mk-wall__dot,
body.mk-wp .mk-wall__arrow,
body.mk-wp .mk-modal__close,
body.mk-wp .mk-lb__close,
body.mk-wp .mk-whatsapp { transition: transform 0.3s, color 0.3s, background-color 0.3s; }
body.mk-wp .mk-header__burger:active,
body.mk-wp .mk-header__cart:active,
body.mk-wp .mk-wall__arrow:active,
body.mk-wp .mk-modal__close:active,
body.mk-wp .mk-lb__close:active,
body.mk-wp .mk-whatsapp:active { transform: scale(0.9); transition-duration: 0.12s; }
/* The dot is 8px of ink inside a 44px target — scaling the button moves
   nothing visible, so the mark itself answers. */
body.mk-wp .mk-wall__dot span { transition: transform 0.3s; }
body.mk-wp .mk-wall__dot:active span { transform: scale(1.5); transition-duration: 0.12s; }

/* ---- 4. Artwork: pressed into the wall, not squashed ----
   0.985 is a third of the button's squash. A painting that visibly deforms
   under a thumb reads as a UI element; this reads as pressure. */
body.mk-wp .mk-wall__frame,
body.mk-wp .mk-jg__item,
body.mk-wp .mk-insitu__item,
body.mk-wp .mk-shot,
body.mk-wp .mk-cf__card { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
body.mk-wp .mk-wall__frame:active,
body.mk-wp .mk-jg__item:active,
body.mk-wp .mk-insitu__item:active,
body.mk-wp .mk-shot:active,
body.mk-wp .mk-cf__card:active { transform: scale(0.985); transition-duration: 0.12s; }
/* During a swipe the frame is held :active for the whole drag. Pressure is an
   answer to a tap, not a state to sit in, so the drag cancels it. */
body.mk-wp .mk-wall.is-drag .mk-wall__frame:active { transform: none; }

/* ---- Reduced motion keeps the answer, drops the movement ----
   Feedback is not decoration, so it stays; only the scaling goes. */
@media (prefers-reduced-motion: reduce) {
  body.mk-wp .mk-button:active,
  body.mk-wp .single_add_to_cart_button:active,
  body.mk-wp #place_order:active,
  body.mk-wp .mk-header__burger:active,
  body.mk-wp .mk-header__cart:active,
  body.mk-wp .mk-wall__arrow:active,
  body.mk-wp .mk-modal__close:active,
  body.mk-wp .mk-lb__close:active,
  body.mk-wp .mk-whatsapp:active,
  body.mk-wp .mk-wall__frame:active,
  body.mk-wp .mk-jg__item:active,
  body.mk-wp .mk-insitu__item:active,
  body.mk-wp .mk-shot:active,
  body.mk-wp .mk-cf__card:active,
  body.mk-wp .mk-wall__dot:active span { transform: none; opacity: 0.6; }
}