/* below-the-fold sections: skip layout/paint until scrolled near, so the very
   long homepage doesn't force a full-page layout+paint pass on first load */
main > section:not(.mk-hero) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/* hidden carousel slides/figures use opacity toggling, not display:none —
   without this their decorative ring/wobble/float animations kept running
   continuously in the background even while invisible, piling up main-thread
   work across the many concurrent animated sections on this page */
.mk-hero__slide:not(.is-active) *,
.mk-brands__figure:not(.is-active) *,
.mk-fresh__slide:not(.is-center) * {
  animation-play-state: paused !important;
}

/* ==========================================================================
   Makhmal — Front page: Hero (Sec 1)
   One open composition, not a stack of cards: the slider sits directly on the
   shared ambient canvas (makhmal-bg.css) with no surface of its own, and the
   only two chrome elements left are the side strip and the control pill.
   ========================================================================== */

.mk-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;
  min-height: calc(100svh - var(--mk-header-height));
  padding-block: 32px 72px;
  overflow: hidden;
  isolation: isolate;
}

/* wide brand aura bleeding out behind the subject — this is what makes the
   hero read as one continuous space instead of a boxed panel */
.mk-hero__aura {
  position: absolute;
  z-index: -1;
  top: 50%;
  inset-inline-start: -10vw;
  width: min(72vw, 1000px);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(169, 87, 255, 0.20) 0%,
              rgba(124, 143, 255, 0.15) 42%,
              transparent 70%);
  pointer-events: none;
}

/* ---- Oversized brand ticker, barely there ---- */
.mk-hero__ticker-wrap {
  position: absolute;
  top: 8%;
  inset-inline-start: -10%;
  width: 120%;
  rotate: -3deg;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.mk-hero__ticker {
  display: flex;
  white-space: nowrap;
  font-family: var(--mk-font-heading);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 900;
  color: var(--mk-color-accent);
  animation: mk-hero-ticker 46s linear infinite;
}

@keyframes mk-hero-ticker {
  to { translate: 50% 0; }
}

.mk-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

/* ==========================================================================
   Stage — bare, no surface of its own
   ========================================================================== */

.mk-hero__main-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* every slide shares one grid cell → the stage keeps the tallest slide's
   height and never jumps while switching */
.mk-hero__slides {
  display: grid;
  width: 100%;
}

.mk-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  /* minmax(0,…) or the oversized subject image below stretches its column
     past the container and gets clipped by the section's overflow */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mk-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Slide copy
   ========================================================================== */

.mk-hero__slide-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* staggered entrance — the title runs its own word-by-word reveal below */
.mk-hero__slide-content > *:not(.mk-hero__title) {
  opacity: 0;
  translate: 0 14px;
}

.mk-hero__slide.is-active .mk-hero__slide-content > *:not(.mk-hero__title) {
  animation: mk-hero-rise 0.6s cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
}

.mk-hero__slide.is-active .mk-hero__eyebrow   { animation-delay: 0.05s; }
.mk-hero__slide.is-active .mk-hero__subtitle  { animation-delay: 0.34s; }
.mk-hero__slide.is-active .mk-hero__text      { animation-delay: 0.44s; }
.mk-hero__slide.is-active .mk-hero__actions   { animation-delay: 0.54s; }

.mk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

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

.mk-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-pastel-mint);
  box-shadow: 0 0 0 0 rgba(79, 203, 174, 0.6);
  animation: mk-hero-pulse 2.2s ease-out infinite;
}

.mk-hero__title {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.3;
}

/* one word per span so the headline types itself in on every slide change */
.mk-hero__word {
  display: inline-block;
  opacity: 0;
  translate: 0 0.45em;
  filter: blur(8px);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-hero__slide.is-active .mk-hero__word {
  animation: mk-hero-word 0.6s cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
  animation-delay: calc(var(--mk-w, 0) * 90ms + 0.12s);
}

.mk-hero__subtitle {
  font-family: var(--mk-font-heading);
  font-size: clamp(1.05rem, 2vw, var(--mk-fs-xl));
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-hero__text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
  max-width: 40ch;
}

.mk-hero__text svg {
  width: 18px;
  height: 18px;
  margin-top: 6px;
  color: var(--mk-color-accent-2);
}

.mk-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.mk-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-weight: 700;
  font-size: var(--mk-fs-sm);
  box-shadow: 0 12px 26px rgba(102, 87, 232, 0.32);
  overflow: hidden;
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-hero__cta:hover {
  box-shadow: 0 18px 34px rgba(130, 72, 243, 0.38);
  transform: translateY(-2px);
}

/* light sweeps across the button on a loop */
.mk-hero__cta-shine {
  position: absolute;
  top: 0;
  inset-inline-start: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: mk-hero-shine 3.6s ease-in-out infinite;
  will-change: transform;
}

.mk-hero__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mk-transition);
}

.mk-hero__cta:hover svg {
  transform: translateX(-4px);
}

.mk-hero__cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--mk-color-primary-hover);
  font-weight: 700;
  font-size: var(--mk-fs-sm);
  transition: background var(--mk-transition), border-color var(--mk-transition);
}

.mk-hero__cta-ghost:hover {
  background: #fff;
  border-color: var(--mk-blue-highlight);
}

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

/* ==========================================================================
   Scene — morphing blob, orbit ring, floating props
   --mk-px / --mk-py are pointer offsets in the -1..1 range, set from JS
   ========================================================================== */

.mk-hero__scene {
  --mk-px: 0;
  --mk-py: 0;
  --mk-scene-a: var(--mk-blue-highlight);
  --mk-scene-b: var(--mk-magenta);
  position: relative;
  height: 480px;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mk-hero__scene--alt {
  --mk-scene-a: var(--mk-pastel-sky);
  --mk-scene-b: var(--mk-indigo);
}

.mk-hero__halo {
  position: absolute;
  bottom: 0;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              color-mix(in srgb, var(--mk-scene-b) 40%, transparent) 0%,
              color-mix(in srgb, var(--mk-scene-a) 26%, transparent) 45%,
              transparent 72%);
  filter: blur(26px);
}

.mk-hero__orbit {
  position: absolute;
  bottom: 2%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 46% 54% 51% 49% / 52% 46% 54% 48%;
  border: 2px dashed color-mix(in srgb, var(--mk-scene-a) 65%, transparent);
  animation: mk-hero-spin 34s linear infinite;
}

.mk-hero__disc {
  position: absolute;
  bottom: 6%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 54% 46% 49% 51% / 46% 52% 48% 54%;
  background: linear-gradient(150deg, var(--mk-scene-a) 0%, var(--mk-scene-b) 100%);
  box-shadow: inset 0 -34px 60px rgba(36, 30, 61, 0.16),
              0 30px 60px color-mix(in srgb, var(--mk-scene-b) 32%, transparent);
  translate: calc(var(--mk-px) * -10px) calc(var(--mk-py) * -10px);
  transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: mk-hero-morph 15s ease-in-out infinite;
}

.mk-hero__subject-wrap {
  position: relative;
  z-index: 4;
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 0 42% 42% / 0 0 16% 16%;
}

.mk-hero__subject {
  position: relative;
  max-height: 108%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 26px 34px rgba(36, 30, 61, 0.24));
  translate: calc(var(--mk-px) * 16px) calc(var(--mk-py) * 12px);
  transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: mk-hero-bob 6s ease-in-out infinite alternate;
}

/* tiny paws & hearts drifting around the blob */
.mk-hero__spark {
  position: absolute;
  z-index: 5;
  color: var(--mk-scene-a);
  opacity: 0.55;
  animation: mk-hero-float 5s ease-in-out infinite alternate;
}

.mk-hero__spark--1 {
  width: 28px;
  height: 28px;
  top: 12%;
  inset-inline-start: 4%;
  rotate: -22deg;
}

.mk-hero__spark--2 {
  width: 20px;
  height: 20px;
  bottom: 20%;
  inset-inline-end: 2%;
  rotate: 18deg;
  animation-delay: -2.2s;
}

.mk-hero__spark--3 {
  width: 18px;
  height: 18px;
  top: 30%;
  inset-inline-end: 12%;
  color: var(--mk-pastel-rose);
  opacity: 0.65;
  animation-delay: -3.6s;
}

.mk-hero__chip-float {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(36, 30, 61, 0.12);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text);
  white-space: nowrap;
  translate: calc(var(--mk-px) * -18px) calc(var(--mk-py) * -14px);
  transition: translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: mk-hero-float 4.4s ease-in-out infinite alternate;
}

.mk-hero__chip-float svg {
  width: 16px;
  height: 16px;
  color: var(--mk-color-accent);
}

.mk-hero__chip-float--top {
  top: 4%;
  inset-inline-end: 0;
}

.mk-hero__chip-float--bottom {
  bottom: 16%;
  inset-inline-start: -4%;
  animation-delay: -2s;
}

.mk-hero__heart {
  position: absolute;
  z-index: 6;
  top: 42%;
  inset-inline-start: 4%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 10px 24px rgba(255, 111, 160, 0.32);
  color: var(--mk-pastel-rose);
  animation: mk-hero-beat 1.9s ease-in-out infinite;
}

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

/* ==========================================================================
   Controls — dots + arrows, the next arrow doubles as the autoplay timer
   ========================================================================== */

/* a single small pill instead of a bordered footer strip */
.mk-hero__controls {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 7px;
  padding-inline-start: 20px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 28px rgba(102, 87, 232, 0.1);
}

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

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

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

.mk-hero__arrows {
  display: flex;
  gap: 10px;
}

.mk-hero__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--mk-color-border);
  background: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  color: var(--mk-color-text);
  transition: background var(--mk-transition), color var(--mk-transition),
              border-color var(--mk-transition);
}

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

.mk-hero__arrow-icon {
  width: 16px;
  height: 16px;
}

.mk-hero__arrow--next {
  border-color: transparent;
}

.mk-hero__ring {
  position: absolute;
  inset: -1px;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  rotate: -90deg;
  overflow: visible;
}

.mk-hero__ring circle {
  fill: none;
  stroke-width: 2;
}

.mk-hero__ring-track {
  stroke: var(--mk-color-border);
}

.mk-hero__ring-bar {
  stroke: var(--mk-color-accent);
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
}

.mk-hero__ring.is-running .mk-hero__ring-bar {
  animation: mk-hero-ring var(--mk-hero-autoplay, 6s) linear forwards;
}

/* hovering the stage pauses both the timer and its ring */
.mk-hero__main-stage:hover .mk-hero__ring-bar {
  animation-play-state: paused;
}

/* ==========================================================================
   Side rail — friends, trust chips, advisor
   ========================================================================== */

/* one continuous strip, not three detached cards — the blocks inside share a
   single surface and are separated only by a hairline */
.mk-hero__side {
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px rgba(102, 87, 232, 0.12);
}

.mk-hero__card {
  position: relative;
  padding: 22px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: background var(--mk-transition);
}

.mk-hero__card + .mk-hero__card {
  border-top: 1px solid rgba(207, 207, 255, 0.45);
}

/* — friends — */
.mk-hero__friends {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mk-hero__avatars {
  display: flex;
  flex-direction: row-reverse;
}

.mk-hero__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  margin-inline-start: -14px;
  box-shadow: var(--mk-shadow-sm);
  transition: transform var(--mk-transition);
}

.mk-hero__avatar:first-child {
  margin-inline-start: -13px;
}

.mk-hero__friends:hover .mk-hero__avatar {
  transform: translateY(-3px);
}

.mk-hero__friends-text strong {
  display: block;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  color: var(--mk-color-text);
}

.mk-hero__friends-text span {
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

/* — trust chips — */
.mk-hero__trust {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  background: var(--mk-gradient-cta);
  border-color: transparent;
  overflow: hidden;
}

.mk-hero__trust-shine {
  position: absolute;
  width: 220px;
  height: 220px;
  top: -100px;
  inset-inline-end: -80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  animation: mk-hero-float 7s ease-in-out infinite alternate;
}

.mk-hero__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--mk-radius-md);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  transition: background var(--mk-transition), transform var(--mk-transition);
}

.mk-hero__chip:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateX(-4px);
}

.mk-hero__chip-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
}

.mk-hero__chip-icon svg {
  width: 17px;
  height: 17px;
  color: #fff;
}

/* — advisor — */
.mk-hero__advisor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mk-hero__advisor:hover {
  background: rgba(255, 255, 255, 0.6);
}

.mk-hero__advisor-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mk-color-bg-muted);
  display: grid;
  place-items: center;
  color: var(--mk-color-primary-hover);
}

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

.mk-hero__advisor-text strong {
  display: block;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  color: var(--mk-color-text);
}

.mk-hero__advisor-text span {
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

.mk-hero__advisor-arrow {
  margin-inline-start: auto;
  width: 16px;
  height: 16px;
  color: var(--mk-color-primary);
  transition: transform var(--mk-transition);
}

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

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes mk-hero-rise {
  to { opacity: 1; translate: 0 0; }
}

@keyframes mk-hero-word {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes mk-hero-spin {
  to { rotate: 360deg; }
}

@keyframes mk-hero-morph {
  0%, 100% { border-radius: 54% 46% 49% 51% / 46% 52% 48% 54%; }
  33%      { border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%; }
  66%      { border-radius: 60% 40% 42% 58% / 40% 58% 42% 60%; }
}

@keyframes mk-hero-bob {
  from { transform: translateY(0) scale(1.04); }
  to   { transform: translateY(-12px) scale(1.04); }
}

@keyframes mk-hero-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

@keyframes mk-hero-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.18); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.12); }
  56%      { transform: scale(1); }
}

@keyframes mk-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 203, 174, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(79, 203, 174, 0); }
}

@keyframes mk-hero-shine {
  0%, 55%  { transform: translateX(0); }
  100%     { transform: translateX(400%); }
}

@keyframes mk-hero-ring {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-hero__ticker,
  .mk-hero__orbit,
  .mk-hero__disc,
  .mk-hero__subject,
  .mk-hero__spark,
  .mk-hero__chip-float,
  .mk-hero__heart,
  .mk-hero__trust-shine,
  .mk-hero__cta-shine,
  .mk-hero__eyebrow-dot,
  .mk-hero__ring-bar,
  .mk-hero__slide.is-active .mk-hero__word,
  .mk-hero__slide.is-active .mk-hero__slide-content > * {
    animation: none;
  }

  .mk-hero__word,
  .mk-hero__slide-content > *:not(.mk-hero__title) {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

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

@media (max-width: 1200px) {
  .mk-hero__container {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
  }

  .mk-hero__scene {
    height: 400px;
  }
}

/* tablet & down: the side rail turns into a swipeable row under the stage
   instead of disappearing — those trust signals matter most on mobile. A
   horizontal row wants separate cards, so the shared strip surface is
   handed back to the individual blocks here. */
@media (max-width: 1024px) {
  .mk-hero {
    min-height: 0;
    padding-block: 28px 56px;
  }

  .mk-hero__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mk-hero__main-stage {
    order: 1;
    align-items: center;
  }

  .mk-hero__controls {
    align-self: center;
  }

  .mk-hero__side {
    order: 2;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    /* proximity, not mandatory: the cards animate (the trust shine drifts),
       and a mandatory scroller re-snaps on every layout tick, which reads as
       the cards jumping under the finger */
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

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

  .mk-hero__card {
    flex: 0 0 min(80%, 320px);
    scroll-snap-align: start;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 14px 34px rgba(102, 87, 232, 0.1);
  }

  .mk-hero__card + .mk-hero__card {
    border-top: 1px solid rgba(255, 255, 255, 0.9);
  }

  /* .mk-hero__card above shares this rule's specificity and sits later in the
     file, so its white surface would win — the gradient has to be restated
     here or the trust card renders white with white text on it */
  .mk-hero__trust {
    flex-direction: row;
    flex: 0 0 min(92%, 460px);
    background: var(--mk-gradient-cta);
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 14px 34px rgba(102, 87, 232, 0.22);
  }

  /* three chips share one row here — the icon discs cost more width than
     they earn, so the label carries the meaning on its own */
  .mk-hero__chip {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
  }

  .mk-hero__chip-icon {
    display: none;
  }

  .mk-hero__slide {
    grid-template-columns: 1fr;
    grid-template-areas: 'scene' 'text';
    gap: 18px;
    text-align: center;
  }

  .mk-hero__scene {
    grid-area: scene;
    height: 320px;
  }

  .mk-hero__slide-content {
    grid-area: text;
    align-items: center;
  }

  .mk-hero__text {
    text-align: start;
    max-width: 46ch;
  }
}

@media (max-width: 620px) {
  .mk-hero {
    padding-block: 46px 40px;
  }

  .mk-hero__scene {
    height: 270px;
  }

  .mk-hero__chip-float {
    font-size: 0.7rem;
    padding: 8px 12px;
  }

  .mk-hero__chip-float--top { inset-inline-end: -2%; }
  .mk-hero__chip-float--bottom { inset-inline-start: -2%; }

  .mk-hero__heart {
    width: 34px;
    height: 34px;
  }

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

  .mk-hero__spark--1,
  .mk-hero__spark--2 {
    display: none;
  }

  .mk-hero__text {
    font-size: var(--mk-fs-xs);
    line-height: 1.9;
  }

  .mk-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .mk-hero__cta,
  .mk-hero__cta-ghost {
    justify-content: center;
  }

  .mk-hero__ticker-wrap {
    display: none;
  }
}


/* ==========================================================================
   Front page: Sec 2 — Cat / Dog clusters with tabs
   ========================================================================== */

.mk-clusters {
  position: relative;
}

/* the clusters are siblings inside .mk-container, not children of the
   section — a gap on .mk-clusters would never reach them. They read as two
   sections, so the space between matches a section-to-section gap (2 × 64px) */
.mk-cluster + .mk-cluster {
  margin-top: 128px;
}

.mk-cluster__grid {
  display: grid;
  grid-template-columns: 34fr 66fr;
  gap: 28px;
  align-items: stretch;
}

/* dog cluster mirrors the cat one */
.mk-cluster--dog .mk-cluster__grid {
  grid-template-columns: 66fr 34fr;
}

.mk-cluster--dog .mk-cluster__aside {
  order: 2;
}

.mk-cluster--dog .mk-cluster__main {
  order: 1;
}

/* ---- Aside: title + cute framed photo + shop button ---- */
.mk-cluster__aside {
  position: relative;
  border-radius: var(--mk-radius-lg);
  padding: 26px 24px 24px;
  overflow: hidden;
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mk-cluster__aside-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.7;
  pointer-events: none;
}

.mk-cluster__aside-blob--1 {
  width: 240px;
  height: 240px;
  top: -110px;
  inset-inline-end: -70px;
  background: var(--mk-tint-lilac);
}

.mk-cluster__aside-blob--2 {
  width: 220px;
  height: 220px;
  bottom: -120px;
  inset-inline-start: -70px;
  background: var(--mk-tint-blue);
}

.mk-cluster__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

.mk-cluster__title {
  font-size: var(--mk-fs-2xl);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-cluster__desc {
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
}

/* photo inside a soft organic frame — takes the column's leftover height so
   the shop button always sits on the bottom edge */
.mk-cluster__figure {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.mk-cluster__figure-ring {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 48% 52% 53% 47% / 50% 48% 52% 50%;
  border: 2px dashed var(--mk-blue-highlight);
  opacity: 0.45;
  animation: mk-spin 30s linear infinite;
}

.mk-cluster__figure-frame {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 52% 48% 47% 53% / 48% 52% 48% 52%;
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
  animation: mk-wobble 14s ease-in-out infinite;
}

.mk-cluster__figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-cluster__figure-paw {
  position: absolute;
  width: 34px;
  height: auto;
  color: var(--mk-blue-highlight);
  opacity: 0.6;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-cluster__figure-paw--a { top: 4%; inset-inline-start: 4%; rotate: -20deg; }
.mk-cluster__figure-paw--b { bottom: 6%; inset-inline-end: 2%; rotate: 16deg; animation-delay: 1.2s; }

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

.mk-cluster__shop:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

.mk-cluster__shop svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mk-transition);
}

.mk-cluster__shop:hover svg {
  transform: translateX(-4px);
}

/* ---- Main: tab nav + product grid ---- */
.mk-cluster__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* both columns stretch to the same height; the slack is pushed into the gap
   above this link so the two columns end on exactly the same line */
.mk-cluster__main > .mk-tabs__more {
  margin-top: auto;
  padding-top: 6px;
}

.mk-tabs__nav {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.mk-tabs__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: transparent;
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--mk-transition), color var(--mk-transition);
}

.mk-tabs__btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

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

.mk-tabs__btn.is-active {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  box-shadow: var(--mk-shadow-sm);
}

.mk-tabs__btn.is-active svg {
  opacity: 1;
}

/* panels share one grid cell → height comes from the tallest, no jump */
.mk-tabs__panels {
  display: grid;
}

.mk-tabs__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 10px;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0.3s ease;
}

.mk-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}

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

/* ---- Product card ---- */
.mk-product {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  overflow: hidden;
  transition: transform var(--mk-transition), box-shadow var(--mk-transition), border-color var(--mk-transition);
}

.mk-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--mk-shadow-md);
  border-color: var(--mk-blue-highlight);
}

.mk-product__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mk-color-bg-soft);
}

.mk-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mk-product:hover .mk-product__media img {
  transform: scale(1.06);
}

.mk-product__tag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 4px 11px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

.mk-product__fav {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--mk-color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mk-shadow-sm);
  transition: color var(--mk-transition), transform var(--mk-transition);
}

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

.mk-product__fav:hover,
.mk-product__fav.is-active {
  color: var(--mk-color-accent-2);
  transform: scale(1.12);
}

.mk-product__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  flex: 1;
}

.mk-product__brand {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mk-color-text-muted);
}

.mk-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.7em);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

.mk-product__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--mk-color-text-muted);
}

.mk-product__rating svg {
  width: 14px;
  height: 14px;
  color: var(--mk-color-warning);
}

.mk-product__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mk-product__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-product__currency {
  font-family: var(--mk-font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
}

.mk-product__add {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mk-transition), color var(--mk-transition);
}

.mk-product__add svg {
  width: 17px;
  height: 17px;
}

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

/* ---- More link ---- */
.mk-tabs__more {
  display: flex;
  justify-content: center;
}

.mk-tabs__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-surface);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  transition: background var(--mk-transition), color var(--mk-transition), border-color var(--mk-transition);
}

.mk-tabs__more a svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mk-transition);
}

.mk-tabs__more a:hover {
  background: var(--mk-gradient-cta);
  border-color: transparent;
  color: var(--mk-color-text-on-brand);
}

.mk-tabs__more a:hover svg {
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .mk-cluster__figure-ring,
  .mk-cluster__figure-frame,
  .mk-cluster__figure-paw {
    animation: none;
  }
}

/* ==========================================================================
   Sec 2 — Responsive
   ========================================================================== */

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

  .mk-products .mk-product:nth-child(4) {
    display: none;
  }
}

@media (max-width: 991px) {
  .mk-cluster + .mk-cluster {
    margin-top: 96px;
  }

  /* single column below this width — nothing left to align, so the slack
     pushers are switched off */
  .mk-cluster__main > .mk-tabs__more {
    margin-top: 0;
    padding-top: 0;
  }

  .mk-cluster__grid,
  .mk-cluster--dog .mk-cluster__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mk-cluster--dog .mk-cluster__aside,
  .mk-cluster--dog .mk-cluster__main {
    order: initial;
  }

  .mk-cluster__aside {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .mk-cluster__head {
    flex: 1 1 240px;
  }

  .mk-cluster__figure {
    flex: 0 0 190px;
    padding: 0;
  }

  .mk-cluster__figure-frame {
    width: 150px;
  }

  .mk-cluster__figure-ring {
    width: 172px;
  }

  .mk-cluster__shop {
    flex: 1 1 100%;
  }

  .mk-tabs__btn {
    flex: 0 0 auto;
  }

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

  .mk-products .mk-product:nth-child(4) {
    display: flex;
  }
}

@media (max-width: 560px) {
  .mk-cluster + .mk-cluster {
    margin-top: 80px;
  }

  .mk-cluster__aside {
    padding: 20px 18px;
  }

  .mk-cluster__figure {
    flex: 1 1 100%;
    order: -1;
  }

  .mk-cluster__figure-frame {
    width: 170px;
  }

  .mk-cluster__figure-ring {
    width: 194px;
  }

  .mk-cluster__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-products {
    gap: 10px;
  }

  .mk-product__body {
    padding: 11px;
    gap: 5px;
  }

  .mk-product__rating {
    display: none;
  }
}

/* ==========================================================================
   Front page: Sec 3 — Popular products
   ========================================================================== */

.mk-popular {
  position: relative;
  padding-block: 56px 80px;
  overflow: hidden;
}

.mk-popular .mk-container {
  position: relative;
  z-index: 1;
}

.mk-popular__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 34px;
}

.mk-popular__title {
  font-size: var(--mk-fs-2xl);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.mk-popular__subtitle svg {
  width: 17px;
  height: 17px;
  color: var(--mk-color-accent-2);
}

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

/* ---- Card ---- */
.mk-pcard {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--mk-radius-lg);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--mk-transition), box-shadow var(--mk-transition),
              border-color var(--mk-transition), transform var(--mk-transition);
}

.mk-pcard:hover,
.mk-pcard:focus-within {
  background: var(--mk-tint-lilac);
  border-color: var(--mk-tint-shade);
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-4px);
}

.mk-pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-color-surface);
}

.mk-pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mk-pcard:hover .mk-pcard__media img {
  transform: scale(1.07);
}

.mk-pcard__tag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  color: var(--mk-color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
}

/* floating actions, revealed on hover */
.mk-pcard__actions {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity var(--mk-transition), translate var(--mk-transition);
}

.mk-pcard:hover .mk-pcard__actions,
.mk-pcard:focus-within .mk-pcard__actions {
  opacity: 1;
  translate: 0 0;
}

.mk-pcard__action {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--mk-color-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mk-shadow-sm);
  transition: color var(--mk-transition), transform var(--mk-transition);
}

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

.mk-pcard__action:hover,
.mk-pcard__action.is-active {
  color: var(--mk-color-accent-2);
  transform: scale(1.12);
}

.mk-pcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline: 4px;
}

.mk-pcard__brand {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mk-color-text-muted);
}

/* clamped to two lines with the height reserved either way, so brand, title
   and price sit on the same baseline across every card in a row or carousel */
.mk-pcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.8em);
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
}

.mk-pcard__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mk-pcard__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

.mk-pcard__currency {
  font-family: var(--mk-font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
}

/* add-to-cart: icon only, expands to a pill on hover */
.mk-pcard__add {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 36px;
  padding-inline: 9px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--mk-transition), color var(--mk-transition), gap var(--mk-transition);
}

.mk-pcard__add svg {
  width: 17px;
  height: 17px;
}

.mk-pcard__add-label {
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--mk-transition);
}

.mk-pcard:hover .mk-pcard__add,
.mk-pcard:focus-within .mk-pcard__add {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  gap: 6px;
  padding-inline: 14px 12px;
}

.mk-pcard:hover .mk-pcard__add-label,
.mk-pcard:focus-within .mk-pcard__add-label {
  max-width: 7rem;
}

/* ---- View all ---- */
.mk-popular__more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.mk-popular__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-popular__more a svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mk-transition);
}

.mk-popular__more a:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

.mk-popular__more a:hover svg {
  transform: translateX(-4px);
}

/* ==========================================================================
   Sec 3 — Responsive
   ========================================================================== */

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

/* touch-first widths: no hover, so actions and label stay visible */
@media (max-width: 991px) {
  .mk-popular {
    padding-block: 44px 60px;
  }

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

  .mk-popular__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* the section band is white here, so a white card would vanish */
  .mk-pcard {
    background: var(--mk-color-bg-soft);
    border-color: var(--mk-color-border);
  }

  .mk-pcard__actions {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 560px) {
  .mk-popular__head {
    margin-bottom: 24px;
  }

  .mk-popular__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-popular__subtitle {
    font-size: var(--mk-fs-xs);
    line-height: 1.9;
  }

  .mk-pcard {
    padding: 10px;
    gap: 10px;
  }

  .mk-pcard__brand {
    display: none;
  }

  .mk-pcard__add {
    height: 32px;
    padding-inline: 8px;
  }

  .mk-popular__more a {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Front page: Sec 4 — Trusted brands (accordion + visual panel)
   ========================================================================== */

.mk-brands {
  position: relative;
  padding-block: 64px 80px;
  overflow: hidden;
}

.mk-brands__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mk-brands__bg-paw {
  position: absolute;
  height: auto;
  color: var(--mk-tint-shade);
  opacity: 0.4;
}

.mk-brands__bg-paw--1 { width: 42px; top: 14%; inset-inline-start: 4%; rotate: -22deg; }
.mk-brands__bg-paw--2 { width: 30px; bottom: 16%; inset-inline-end: 5%; rotate: 18deg; }

.mk-brands .mk-container {
  position: relative;
  z-index: 1;
}

.mk-brands__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 38px;
}

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

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

.mk-brands__title {
  font-size: var(--mk-fs-2xl);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-brands__subtitle {
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
  max-width: 56ch;
}

/* ---- Layout: list at the start side, detail panel at the end side.
   Both columns stretch to one shared height and the rows divide it evenly,
   so the two sides always end on the same line. ---- */
.mk-brands__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* ---- Brand list ----
   Deliberately NOT an accordion: rows never change height, so the whole list
   fits one screen next to the panel. Selecting a row only swaps what the
   panel on the other side shows. */
.mk-acc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.mk-acc__item {
  --mk-brand-c: var(--mk-color-primary);
  position: relative;
  flex: 1;
  min-height: 62px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition), background var(--mk-transition);
}

.mk-acc__item:hover {
  border-color: color-mix(in srgb, var(--mk-brand-c) 40%, #fff);
}

.mk-acc__item.is-active {
  background: color-mix(in srgb, var(--mk-brand-c) 8%, #fff);
  border-color: color-mix(in srgb, var(--mk-brand-c) 55%, #fff);
  box-shadow: var(--mk-shadow-md);
}

/* speech-bubble tail tying the selected row to the panel it drives */
.mk-acc__item::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -2px;
  width: 12px;
  height: 12px;
  rotate: 133deg;
  translate: 0 -50%;
  background: color-mix(in srgb, var(--mk-brand-c) 8%, #fff);
  border-inline-start: 1px solid color-mix(in srgb, var(--mk-brand-c) 55%, #fff);
  border-block-end: 1px solid color-mix(in srgb, var(--mk-brand-c) 55%, #fff);
  opacity: 0;
  transition: opacity var(--mk-transition), translate 0.3s cubic-bezier(0.22, 0.85, 0.3, 1);
  pointer-events: none;
}

.mk-acc__item.is-active::after {
  opacity: 1;
  translate: -5px -50%;
}

.mk-acc__head {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  text-align: start;
}

.mk-acc__monogram {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 38% 62% 55% 45% / 52% 44% 56% 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 900;
  color: #fff;
  background: var(--mk-brand-c);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--mk-brand-c) 42%, transparent);
  transition: transform var(--mk-transition), border-radius 0.4s ease;
}

.mk-acc__item.is-active .mk-acc__monogram,
.mk-acc__head:hover .mk-acc__monogram {
  transform: rotate(-7deg) scale(1.05);
  border-radius: 58% 42% 45% 55% / 44% 56% 44% 56%;
}

.mk-acc__item.is-active .mk-acc__name {
  color: var(--mk-brand-c);
}

/* a plus, not a chevron — nothing expands. It takes a half turn and fills
   with the brand colour to acknowledge the selection. */
.mk-acc__plus {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-inline-start: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  rotate: 0deg;
  transition: rotate 0.45s cubic-bezier(0.22, 0.85, 0.3, 1),
              background var(--mk-transition), color var(--mk-transition);
}

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

.mk-acc__item.is-active .mk-acc__plus {
  rotate: 180deg;
  background: var(--mk-brand-c);
  color: #fff;
}

.mk-acc__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mk-acc__name {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-acc__meta {
  font-size: 0.7rem;
  color: var(--mk-color-text-muted);
}

/* ---- Detail panel (holds the copy the rows used to expand into) ---- */
/* not sticky any more: the two columns are the same height by construction,
   so there is nothing for it to stick past */
.mk-brands__visual {
  position: relative;
  display: flex;
  border-radius: var(--mk-radius-lg);
  padding: 26px;
  overflow: hidden;
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.mk-brands__visual-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -130px;
  inset-inline-end: -90px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  background: var(--mk-brand-c, var(--mk-color-primary));
  transition: background 0.4s ease;
  pointer-events: none;
}

.mk-brands__stack {
  position: relative;
  flex: 1;
  display: grid;
  z-index: 1;
}

.mk-brands__figure {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 12px;
  transition: opacity 0.35s ease, translate 0.35s ease, visibility 0.35s ease;
}

.mk-brands__figure.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}

.mk-brands__frame {
  position: relative;
  width: min(300px, 78%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-brands__frame-ring {
  position: absolute;
  inset: -6%;
  border-radius: 48% 52% 53% 47% / 50% 48% 52% 50%;
  border: 2px dashed var(--mk-brand-c, var(--mk-blue-highlight));
  opacity: 0.45;
  animation: mk-spin 28s linear infinite;
}

.mk-brands__frame-img {
  width: 100%;
  height: 100%;
  border-radius: 54% 46% 47% 53% / 46% 54% 46% 54%;
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
  animation: mk-wobble 13s ease-in-out infinite;
}

.mk-brands__frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-brands__frame-paw {
  position: absolute;
  width: 32px;
  height: auto;
  bottom: 2%;
  inset-inline-start: -2%;
  color: var(--mk-brand-c, var(--mk-blue-highlight));
  opacity: 0.65;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-brands__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mk-brands__caption-name {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 900;
  color: var(--mk-color-text);
}

.mk-brands__caption-desc {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
  max-width: 42ch;
}

.mk-brands__caption-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.mk-brands__caption-tags span {
  padding: 5px 13px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.mk-brands__caption-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 11px 22px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-brand-c, var(--mk-color-primary));
  color: #fff;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-brand-c, var(--mk-color-primary)) 35%, transparent);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.mk-brands__caption-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--mk-transition);
}

.mk-brands__caption-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--mk-brand-c, var(--mk-color-primary)) 42%, transparent);
}

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

/* ---- All brands ---- */
.mk-brands__more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.mk-brands__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-brands__all svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mk-transition);
}

.mk-brands__all:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-3px);
}

.mk-brands__all:hover svg {
  transform: translateX(-4px);
}

/* per-brand accent colours */
.mk-brand--c1 { --mk-brand-c: var(--mk-blue); }
.mk-brand--c2 { --mk-brand-c: var(--mk-purple); }
.mk-brand--c3 { --mk-brand-c: var(--mk-magenta); }
.mk-brand--c4 { --mk-brand-c: var(--mk-pastel-sky); }
.mk-brand--c5 { --mk-brand-c: var(--mk-pastel-mint); }
.mk-brand--c6 { --mk-brand-c: var(--mk-pastel-peach); }
.mk-brand--c7 { --mk-brand-c: var(--mk-pastel-lemon); }
.mk-brand--c8 { --mk-brand-c: var(--mk-pastel-rose); }
.mk-brand--c9 { --mk-brand-c: var(--mk-indigo); }

@media (prefers-reduced-motion: reduce) {
  .mk-brands__frame-ring,
  .mk-brands__frame-img,
  .mk-brands__frame-paw {
    animation: none;
  }
}

/* ==========================================================================
   Sec 4 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-brands {
    padding-block: 48px 60px;
  }

  .mk-brands__head {
    margin-bottom: 26px;
  }

  .mk-brands__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* detail panel leads on narrow screens, the list follows */
  .mk-brands__visual {
    position: static;
    order: -1;
    padding: 22px 18px;
  }

  /* stacked: nothing to match heights with, and the tail would point at
     empty space beside the list */
  .mk-acc {
    height: auto;
  }

  .mk-acc__item {
    flex: 0 0 auto;
  }

  .mk-acc__item::after {
    display: none;
  }

  .mk-brands__frame {
    width: min(240px, 62%);
  }
}

@media (max-width: 560px) {
  .mk-brands__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-acc__head {
    padding: 11px 12px;
    gap: 10px;
  }

  .mk-acc__monogram {
    width: 36px;
    height: 36px;
    font-size: var(--mk-fs-base);
  }

  .mk-brands__frame {
    width: min(200px, 70%);
  }

  .mk-brands__caption-name {
    font-size: var(--mk-fs-lg);
  }

  .mk-brands__caption-desc {
    font-size: var(--mk-fs-xs);
  }

  .mk-brands__all {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Front page: Sec 5 — Newest products (3D coverflow slider)
   ========================================================================== */

.mk-fresh {
  position: relative;
  padding-block: 60px 76px;
  overflow: hidden;
}

.mk-fresh__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mk-fresh__bg-paw {
  position: absolute;
  height: auto;
  color: var(--mk-tint-shade);
  opacity: 0.4;
}

.mk-fresh__bg-paw--1 { width: 40px; top: 18%; inset-inline-end: 7%; rotate: 18deg; }
.mk-fresh__bg-paw--2 { width: 28px; bottom: 14%; inset-inline-start: 6%; rotate: -20deg; }

.mk-fresh .mk-container {
  position: relative;
  z-index: 1;
}

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

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

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

.mk-fresh__title {
  font-size: var(--mk-fs-2xl);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-fresh__text {
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
}

/* ---- Coverflow stage ---- */
.mk-fresh__viewport {
  position: relative;
  perspective: 1400px;
  padding-block: 26px 10px;
  overflow: hidden;
}

/* every slide shares one grid cell, so stage height = tallest card
   and the 3D offsets come purely from transforms */
.mk-fresh__track {
  display: grid;
  transform-style: preserve-3d;
}

.mk-fresh__slide {
  grid-area: 1 / 1;
  justify-self: center;
  /* was 290px scaled up to 1.06 in the centre — upscaling resamples the text
     and photo and is what made the card look soft. The card is now laid out
     at its real size and only the side cards are scaled (down). */
  width: 308px;
  max-width: 84vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0) scale(0.6);
  transition: transform 0.55s cubic-bezier(0.22, 0.85, 0.3, 1),
              opacity 0.45s ease, visibility 0.45s ease;
}

/* previous items sit to the start side (right in RTL), next items to the end side */
/* no transform at all on the centre card: it renders 1:1, pixel-sharp */
.mk-fresh__slide.is-center {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 5;
}

.mk-fresh__slide.is-prev,
.mk-fresh__slide.is-next {
  opacity: 0.8;
  visibility: visible;
  pointer-events: auto;
  z-index: 4;
  cursor: pointer;
}

/* offsets are >100% of the card width on purpose: at 100% the cards would
   touch, and the scale-down is what opens the visible gap between them */
.mk-fresh__slide.is-prev {
  transform: translateX(106%) rotateY(16deg) scale(0.8);
}

.mk-fresh__slide.is-next {
  transform: translateX(-106%) rotateY(-16deg) scale(0.8);
}

.mk-fresh__slide.is-far-prev,
.mk-fresh__slide.is-far-next {
  opacity: 0.35;
  visibility: visible;
  z-index: 3;
}

.mk-fresh__slide.is-far-prev {
  transform: translateX(206%) rotateY(26deg) scale(0.68);
}

.mk-fresh__slide.is-far-next {
  transform: translateX(-206%) rotateY(-26deg) scale(0.68);
}

/* the centred card wears the same "active" look as a hovered popular card */
.mk-fresh__slide .mk-pcard {
  height: 100%;
}

.mk-fresh__slide.is-center .mk-pcard {
  background: var(--mk-tint-lilac);
  border-color: var(--mk-tint-shade);
  box-shadow: var(--mk-shadow-lg);
}

.mk-fresh__slide.is-center .mk-pcard__actions {
  opacity: 1;
  translate: 0 0;
}

.mk-fresh__slide.is-center .mk-pcard__add {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  gap: 6px;
  padding-inline: 14px 12px;
}

.mk-fresh__slide.is-center .mk-pcard__add-label {
  max-width: 7rem;
}

/* side cards must not react to hover — they are only a target to click */
.mk-fresh__slide:not(.is-center) .mk-pcard:hover {
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ---- Controls ---- */
.mk-fresh__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.mk-fresh__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-surface);
  color: var(--mk-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mk-shadow-sm);
  transition: background var(--mk-transition), color var(--mk-transition),
              border-color var(--mk-transition), transform var(--mk-transition);
}

.mk-fresh__arrow svg {
  width: 17px;
  height: 17px;
}

.mk-fresh__arrow:hover {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  border-color: transparent;
  transform: translateY(-2px);
}

.mk-fresh__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

.mk-fresh__more {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.mk-fresh__more a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-surface);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  transition: background var(--mk-transition), color var(--mk-transition), border-color var(--mk-transition);
}

.mk-fresh__more a svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mk-transition);
}

.mk-fresh__more a:hover {
  background: var(--mk-gradient-cta);
  border-color: transparent;
  color: var(--mk-color-text-on-brand);
}

.mk-fresh__more a:hover svg {
  transform: translateX(-4px);
}

/* ==========================================================================
   Sec 5 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-fresh {
    padding-block: 46px 58px;
  }

  .mk-fresh__slide {
    width: 265px;
  }

  .mk-fresh__slide.is-prev { transform: translateX(108%) rotateY(14deg) scale(0.8); }
  .mk-fresh__slide.is-next { transform: translateX(-108%) rotateY(-14deg) scale(0.8); }

  .mk-fresh__slide.is-far-prev { transform: translateX(196%) rotateY(24deg) scale(0.64); }
  .mk-fresh__slide.is-far-next { transform: translateX(-196%) rotateY(-24deg) scale(0.64); }

  .mk-fresh__slide.is-far-prev,
  .mk-fresh__slide.is-far-next {
    opacity: 0.22;
  }
}

/* no room for a depth stack on a phone: one card, siblings only peeking */
@media (max-width: 620px) {
  .mk-fresh__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-fresh__viewport {
    padding-block: 16px 6px;
  }

  .mk-fresh__slide {
    width: 234px;
  }

  .mk-fresh__slide.is-prev { transform: translateX(100%) rotateY(12deg) scale(0.74); }
  .mk-fresh__slide.is-next { transform: translateX(-100%) rotateY(-12deg) scale(0.74); }

  .mk-fresh__slide.is-far-prev,
  .mk-fresh__slide.is-far-next {
    opacity: 0;
    visibility: hidden;
  }

  .mk-fresh__controls {
    gap: 12px;
  }

  .mk-fresh__arrow {
    width: 40px;
    height: 40px;
  }

  .mk-fresh__more a {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-fresh__slide {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
}

/* ==========================================================================
   Front page: Sec 6 — Why Makhmal
   ========================================================================== */

.mk-why {
  position: relative;
  padding-block: 70px 84px;
  overflow: hidden;
}

.mk-why__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mk-why__bg-paw {
  position: absolute;
  height: auto;
  color: var(--mk-tint-shade);
  opacity: 0.4;
}

.mk-why__bg-paw--1 { width: 34px; top: 12%; inset-inline-end: 46%; rotate: 16deg; }
.mk-why__bg-paw--2 { width: 26px; bottom: 12%; inset-inline-start: 3%; rotate: -18deg; }

.mk-why .mk-container {
  position: relative;
  z-index: 1;
}

.mk-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* ---- Text column ---- */
.mk-why__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mk-why__title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mk-why__title {
  font-size: clamp(1.5rem, 3vw, var(--mk-fs-3xl));
  line-height: 1.4;
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-why__title-paw {
  width: 42px;
  height: auto;
  flex-shrink: 0;
  margin-top: 6px;
  color: var(--mk-pastel-mint);
  rotate: 14deg;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-why__subtitle {
  font-size: var(--mk-fs-base);
  line-height: 2;
  color: var(--mk-color-text-soft);
  max-width: 46ch;
}

/* ---- Checklist ---- */
.mk-why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  width: 100%;
  margin-top: 6px;
}

.mk-why__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  border: 1px solid transparent;
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  color: var(--mk-color-text);
  transition: background var(--mk-transition), border-color var(--mk-transition), transform var(--mk-transition);
}

.mk-why__item:hover {
  background: var(--mk-color-bg-muted);
  border-color: var(--mk-color-border);
  transform: translateX(-4px);
}

.mk-why__check {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-gradient-cta);
  color: #fff;
  box-shadow: var(--mk-shadow-sm);
  transition: transform var(--mk-transition);
}

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

.mk-why__item:hover .mk-why__check {
  transform: scale(1.1) rotate(-8deg);
}

/* last odd item spans the row so the grid never ends ragged */
.mk-why__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mk-why__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-why__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mk-transition);
}

.mk-why__cta:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

.mk-why__cta:hover svg {
  transform: translateX(-4px);
}

/* ---- Media column ---- */
.mk-why__media {
  position: relative;
  display: flex;
  justify-content: center;
}

.mk-why__frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
  border: 6px solid var(--mk-color-surface);
}

.mk-why__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mk-why__media:hover .mk-why__frame img {
  transform: scale(1.04);
}

.mk-why__badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-md);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text);
  white-space: nowrap;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-why__badge svg {
  width: 17px;
  height: 17px;
}

.mk-why__badge--top {
  top: 8%;
  inset-inline-start: -6%;
}

.mk-why__badge--top svg {
  color: var(--mk-color-accent);
}

.mk-why__badge--bottom {
  bottom: 9%;
  inset-inline-end: -5%;
  animation-delay: 1.5s;
}

.mk-why__badge--bottom svg {
  color: var(--mk-pastel-mint);
}

.mk-why__media-paw {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: auto;
  bottom: -4%;
  inset-inline-start: 8%;
  color: var(--mk-magenta);
  opacity: 0.75;
  rotate: -16deg;
  animation: mk-float 6s ease-in-out infinite;
  animation-delay: 0.8s;
}

@media (prefers-reduced-motion: reduce) {
  .mk-why__title-paw,
  .mk-why__badge,
  .mk-why__media-paw {
    animation: none;
  }
}

/* ==========================================================================
   Sec 6 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-why {
    padding-block: 52px 62px;
  }

  .mk-why__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* photo first: it sets the tone before the reasons are read */
  .mk-why__media {
    order: -1;
  }

  .mk-why__frame {
    max-width: 380px;
    aspect-ratio: 1;
    border-radius: 34px;
  }

  .mk-why__badge--top { inset-inline-start: -2%; }
  .mk-why__badge--bottom { inset-inline-end: -2%; }

  .mk-why__content {
    align-items: center;
    text-align: center;
  }

  .mk-why__subtitle {
    max-width: 56ch;
  }

  .mk-why__item {
    text-align: start;
  }
}

@media (max-width: 620px) {
  .mk-why__title-paw {
    width: 32px;
  }

  .mk-why__subtitle {
    font-size: var(--mk-fs-sm);
  }

  .mk-why__list {
    grid-template-columns: 1fr;
  }

  .mk-why__item {
    font-size: var(--mk-fs-xs);
    padding: 8px 10px;
  }

  .mk-why__frame {
    border-radius: 26px;
    border-width: 5px;
  }

  .mk-why__badge {
    font-size: 0.68rem;
    padding: 8px 12px;
  }

  .mk-why__badge--top { inset-inline-start: 0; }
  .mk-why__badge--bottom { inset-inline-end: 0; }

  .mk-why__media-paw {
    width: 34px;
  }

  .mk-why__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Front page: Sec 7 — Expanding category banners
   ========================================================================== */

.mk-tiles {
  position: relative;
  padding-block: 20px 84px;
}

.mk-tiles__row {
  display: flex;
  gap: 14px;
  height: 440px;
}

.mk-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--mk-shadow-sm);
  transition: flex-grow 0.55s cubic-bezier(0.22, 0.85, 0.3, 1),
              box-shadow var(--mk-transition);
}

/* the open tile takes roughly the room of the two collapsed ones */
.mk-tile.is-open {
  flex-grow: 2.6;
  cursor: default;
  box-shadow: var(--mk-shadow-lg);
}

.mk-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mk-tile:hover .mk-tile__bg {
  transform: scale(1.05);
}

/* brand-tinted scrim so the text stays readable over any photo */
.mk-tile__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(36, 30, 61, 0.9) 0%, rgba(36, 30, 61, 0.45) 45%, rgba(36, 30, 61, 0.15) 100%),
    linear-gradient(140deg, color-mix(in srgb, var(--mk-tile-c, var(--mk-color-primary)) 55%, transparent) 0%, transparent 60%);
  transition: opacity var(--mk-transition);
}

.mk-tile__paw {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: auto;
  top: 18px;
  inset-inline-end: 16px;
  color: #fff;
  opacity: 0.14;
  rotate: -14deg;
}

.mk-tile__content {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.mk-tile__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

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

.mk-tile__title {
  font-size: var(--mk-fs-lg);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 10px rgba(36, 30, 61, 0.45);
  transition: font-size var(--mk-transition);
}

.mk-tile.is-open .mk-tile__title {
  font-size: var(--mk-fs-2xl);
}

/* subtitle and button only exist visually once the tile is open */
.mk-tile__reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.5s ease;
}

.mk-tile.is-open .mk-tile__reveal {
  grid-template-rows: 1fr;
}

.mk-tile__reveal-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.mk-tile__subtitle {
  padding-top: 4px;
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
}

.mk-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  margin-bottom: 2px;
  border-radius: var(--mk-radius-pill);
  background: #fff;
  color: var(--mk-color-text);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: background var(--mk-transition), color var(--mk-transition), transform var(--mk-transition);
}

.mk-tile__cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mk-transition);
}

.mk-tile__cta:hover {
  background: var(--mk-tile-c, var(--mk-color-primary));
  color: #fff;
  transform: translateY(-2px);
}

.mk-tile__cta:hover svg {
  transform: translateX(-4px);
}

/* plus marker on the collapsed tiles */
.mk-tile__plus {
  position: absolute;
  z-index: 2;
  top: 18px;
  inset-inline-start: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mk-tile-c, var(--mk-color-primary));
  box-shadow: var(--mk-shadow-sm);
  transition: opacity var(--mk-transition), transform var(--mk-transition);
}

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

.mk-tile:hover .mk-tile__plus {
  transform: rotate(90deg);
}

.mk-tile.is-open .mk-tile__plus {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

/* per-tile accents */
.mk-tile--c1 { --mk-tile-c: var(--mk-purple); }
.mk-tile--c2 { --mk-tile-c: var(--mk-blue); }
.mk-tile--c3 { --mk-tile-c: var(--mk-pastel-mint); }

/* ==========================================================================
   Sec 7 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-tiles {
    padding-block: 8px 60px;
  }

  /* stacking the tiles keeps the collapsed titles readable —
     a narrow vertical column would force rotated Persian text */
  .mk-tiles__row {
    flex-direction: column;
    height: 620px;
    gap: 12px;
  }

  .mk-tile.is-open {
    flex-grow: 2.4;
  }

  .mk-tile__paw {
    width: 70px;
  }

  .mk-tile__content {
    padding: 18px 16px;
  }

  /* a collapsed tile is short here: centre its text and reserve the
     start-side gutter for the plus marker so the two never collide */
  .mk-tile:not(.is-open) .mk-tile__content {
    top: 0;
    justify-content: center;
    padding-inline-start: 64px;
    gap: 6px;
  }

  .mk-tile:not(.is-open) .mk-tile__plus {
    top: 50%;
    transform: translateY(-50%);
  }

  .mk-tile:not(.is-open):hover .mk-tile__plus {
    transform: translateY(-50%) rotate(90deg);
  }
}

@media (max-width: 620px) {
  .mk-tiles__row {
    height: 560px;
  }

  .mk-tile__title {
    font-size: var(--mk-fs-base);
  }

  .mk-tile.is-open .mk-tile__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-tile__subtitle {
    font-size: var(--mk-fs-xs);
  }

  .mk-tile__cta {
    padding: 10px 20px;
    font-size: var(--mk-fs-xs);
  }

  .mk-tile__plus {
    width: 32px;
    height: 32px;
    top: 14px;
    inset-inline-start: 14px;
  }
}

/* ==========================================================================
   Front page: Sec 8 — Makhmal Party (flash-deal carousel)
   ========================================================================== */

.mk-party {
  position: relative;
  padding-block: 10px 84px;
}

.mk-party__box {
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  background: var(--mk-gradient-cta);
  box-shadow: var(--mk-shadow-lg);
}

.mk-party__shine {
  position: absolute;
  width: 320px;
  height: 320px;
  top: -160px;
  inset-inline-end: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.mk-party__bg-paw {
  position: absolute;
  height: auto;
  color: #fff;
  opacity: 0.12;
  pointer-events: none;
}

.mk-party__bg-paw--1 { width: 70px; bottom: -12px; inset-inline-start: 30%; rotate: 14deg; }
.mk-party__bg-paw--2 { width: 44px; top: 12px; inset-inline-start: 12%; rotate: -18deg; }

/* ---- Side panel ---- */
.mk-party__side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 4px;
}

.mk-party__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

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

.mk-party__title {
  font-size: var(--mk-fs-2xl);
  color: #fff;
}

.mk-party__subtitle {
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);
}

/* countdown */
.mk-party__timer {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
  margin-top: 2px;
}

.mk-party__timer-unit {
  min-width: 46px;
  padding: 7px 6px;
  border-radius: var(--mk-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
}

.mk-party__timer-num {
  display: block;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 900;
  line-height: 1.2;
  color: var(--mk-color-primary-hover);
}

.mk-party__timer-cap {
  display: block;
  font-size: 0.62rem;
  color: var(--mk-color-text-muted);
}

.mk-party__timer-sep {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.mk-party__all {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--mk-radius-pill);
  background: #fff;
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-sm);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.mk-party__all svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mk-transition);
}

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

.mk-party__all:hover svg {
  transform: translateX(-4px);
}

/* ---- Rail ---- */
.mk-party__rail-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.mk-party__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

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

.mk-deal {
  position: relative;
  flex: 0 0 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-surface);
  overflow: hidden;
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.mk-deal:hover {
  transform: translateY(-4px);
  box-shadow: var(--mk-shadow-lg);
}

.mk-deal__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mk-color-bg-soft);
}

.mk-deal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mk-deal:hover .mk-deal__media img {
  transform: scale(1.07);
}

.mk-deal__off {
  position: absolute;
  top: 9px;
  inset-inline-start: 9px;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 10px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-accent-2);
  color: #fff;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-sm);
  font-weight: 900;
  box-shadow: var(--mk-shadow-sm);
}

.mk-deal__off span {
  font-family: var(--mk-font-body);
  font-size: 0.62rem;
  font-weight: 400;
}

.mk-deal__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  flex: 1;
}

.mk-deal__title {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  line-height: 1.9;
  color: var(--mk-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-deal__prices {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mk-deal__old {
  font-size: 0.7rem;
  color: var(--mk-color-text-muted);
  text-decoration: line-through;
}

.mk-deal__new {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
}

.mk-deal__currency {
  font-family: var(--mk-font-body);
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--mk-color-text-muted);
}

/* remaining-stock meter */
.mk-deal__stock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.mk-deal__bar {
  height: 6px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  overflow: hidden;
}

.mk-deal__bar i {
  display: block;
  height: 100%;
  width: var(--mk-stock, 50%);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
}

.mk-deal__stock-text {
  font-size: 0.64rem;
  color: var(--mk-color-text-muted);
}

/* ---- Rail arrows ---- */
.mk-party__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--mk-color-surface);
  color: var(--mk-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mk-shadow-md);
  transition: background var(--mk-transition), color var(--mk-transition), opacity var(--mk-transition);
}

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

.mk-party__arrow:hover {
  background: var(--mk-color-accent);
  color: #fff;
}

.mk-party__arrow--prev {
  inset-inline-end: -10px;
}

.mk-party__arrow--next {
  inset-inline-start: -10px;
}

.mk-party__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Sec 8 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-party {
    padding-block: 4px 60px;
  }

  .mk-party__box {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .mk-party__side {
    align-items: center;
    text-align: center;
    padding: 2px;
  }

  .mk-party__all {
    margin-top: 4px;
  }

  /* arrows would sit on top of the cards at this width */
  .mk-party__arrow {
    display: none;
  }

  .mk-party__rail {
    scroll-snap-type: x proximity;
  }
}

@media (max-width: 620px) {
  .mk-party__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-party__box {
    padding: 14px;
    border-radius: var(--mk-radius-md);
  }

  .mk-deal {
    flex: 0 0 158px;
  }

  .mk-deal__body {
    padding: 10px;
    gap: 6px;
  }

  .mk-party__timer-unit {
    min-width: 42px;
  }
}

/* ==========================================================================
   Front page: Sec 9 — Still not sure? (call banner)
   ========================================================================== */

.mk-cta {
  position: relative;
  padding-block: 90px 84px;
}

/* media column sits first so the cat lands on the start edge (right in RTL):
   the PNG is cut flat on that side and must meet the card border there */
.mk-cta__box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 20px;
  align-items: center;
  min-height: 300px;
  padding: 44px 0 44px 48px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-tint-lilac);
  /* the cat is meant to break out over the top edge */
  overflow: visible;
}

/* ---- Decor ---- */
.mk-cta__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.mk-cta__blob--1 {
  width: 240px;
  height: 240px;
  top: -40px;
  inset-inline-end: 12%;
  background: var(--mk-tint-blue);
  opacity: 0.75;
}

.mk-cta__blob--2 {
  width: 200px;
  height: 200px;
  bottom: -30px;
  inset-inline-end: 40%;
  background: var(--mk-color-surface);
  opacity: 0.55;
}

.mk-cta__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed var(--mk-blue-highlight);
  opacity: 0.45;
  pointer-events: none;
}

.mk-cta__ring--1 {
  width: 120px;
  height: 120px;
  top: -26px;
  inset-inline-end: 38%;
  animation: mk-spin 26s linear infinite;
}

.mk-cta__ring--2 {
  width: 70px;
  height: 70px;
  bottom: 16px;
  inset-inline-end: 6%;
  animation: mk-spin 20s linear infinite reverse;
}

.mk-cta__paw {
  position: absolute;
  height: auto;
  pointer-events: none;
  animation: mk-float 5.5s ease-in-out infinite;
}

.mk-cta__paw--1 {
  width: 40px;
  top: 26px;
  inset-inline-end: 8%;
  color: var(--mk-magenta);
  opacity: 0.5;
  rotate: -18deg;
}

.mk-cta__paw--2 {
  width: 28px;
  bottom: 26px;
  inset-inline-end: 32%;
  color: var(--mk-blue);
  opacity: 0.45;
  rotate: 16deg;
  animation-delay: 1.4s;
}

.mk-cta__paw--3 {
  width: 22px;
  top: 40%;
  inset-inline-end: 3%;
  color: var(--mk-purple);
  opacity: 0.4;
  rotate: 10deg;
  animation-delay: 0.7s;
}

/* ---- Content ---- */
.mk-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.mk-cta__title {
  font-size: clamp(1.45rem, 2.8vw, var(--mk-fs-3xl));
  line-height: 1.4;
  color: var(--mk-color-text);
}

.mk-cta__text {
  font-size: var(--mk-fs-sm);
  line-height: 2.1;
  color: var(--mk-color-text-soft);
  max-width: 48ch;
}

.mk-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.mk-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-cta__btn svg {
  width: 17px;
  height: 17px;
}

.mk-cta__btn:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

.mk-cta__btn:hover svg {
  animation: mk-ring 0.6s ease-in-out;
}

.mk-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-primary-hover);
  letter-spacing: 0.5px;
  transition: color var(--mk-transition);
}

.mk-cta__phone:hover {
  color: var(--mk-color-accent-2);
}

/* ---- Cat ---- */
.mk-cta__media {
  position: relative;
  align-self: stretch;
}

.mk-cta__cat {
  position: absolute;
  bottom: -43px;
  inset-inline-start: 0;
  height: 128%;
  width: auto;
  max-width: none;
  object-fit: contain;
  /* the flat cut of the PNG meets the card edge, so it must repeat the
     card's own corner rounding on that side */
  border-end-start-radius: var(--mk-radius-lg);
  filter: drop-shadow(-10px 12px 24px rgba(102, 87, 232, 0.18));
}

@keyframes mk-ring {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-16deg); }
  75%      { transform: rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-cta__ring--1,
  .mk-cta__ring--2,
  .mk-cta__paw {
    animation: none;
  }
}

/* ==========================================================================
   Sec 9 — Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-cta {
    padding-block: 70px 60px;
  }

  .mk-cta__box {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 28px 0;
    text-align: center;
    min-height: 0;
  }

  .mk-cta__content {
    align-items: center;
    order: 1;
  }

  .mk-cta__actions {
    justify-content: center;
  }

  /* the cat drops below the text and keeps sitting on the bottom edge */
  .mk-cta__media {
    order: 2;
    height: 230px;
    margin-top: 18px;
  }

  .mk-cta__cat {
    height: 100%;
    inset-inline: 0;
    bottom: 0;
    margin-inline: auto;
    border-end-start-radius: 0;
  }

  .mk-cta__paw--1 { inset-inline-end: 5%; top: 18px; }
  .mk-cta__paw--2 { bottom: auto; top: 32%; inset-inline-end: 6%; }
  .mk-cta__paw--3 { display: none; }

  .mk-cta__ring--1 { inset-inline-end: 74%; }
  .mk-cta__ring--2 { bottom: auto; top: 40%; }
}

@media (max-width: 620px) {
  .mk-cta {
    padding-block: 50px 48px;
  }

  .mk-cta__box {
    padding: 26px 18px 0;
    border-radius: var(--mk-radius-md);
  }

  .mk-cta__text {
    font-size: var(--mk-fs-xs);
  }

  .mk-cta__actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .mk-cta__btn {
    width: 100%;
    justify-content: center;
  }

  .mk-cta__media {
    height: 175px;
  }

  .mk-cta__ring--1,
  .mk-cta__ring--2 {
    display: none;
  }
}

/* ==========================================================================
   Front page: Sec 10 — Magazine
   ========================================================================== */

.mk-blog {
  position: relative;
  padding-block: 20px 80px;
}

.mk-blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

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

.mk-blog__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk-blog__title {
  font-size: var(--mk-fs-2xl);
  background: var(--mk-gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mk-blog__title-paw {
  width: 30px;
  height: auto;
  color: var(--mk-pastel-rose);
  rotate: 12deg;
  animation: mk-float 5s ease-in-out infinite;
}

.mk-blog__subtitle {
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
}

.mk-blog__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--mk-radius-pill);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-surface);
  color: var(--mk-color-text);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  transition: background var(--mk-transition), color var(--mk-transition), border-color var(--mk-transition);
}

.mk-blog__all svg {
  width: 15px;
  height: 15px;
  transition: transform var(--mk-transition);
}

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

.mk-blog__all:hover svg {
  transform: translateX(-4px);
}

/* ---- Grid: 4 posts, 2 per row ---- */
.mk-blog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mk-post {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid transparent;
  transition: background var(--mk-transition), border-color var(--mk-transition),
              box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-post:hover {
  background: var(--mk-color-bg-muted);
  border-color: var(--mk-color-border);
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-3px);
}

.mk-post__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--mk-radius-md);
  overflow: hidden;
  background: var(--mk-color-bg-soft);
}

.mk-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mk-post:hover .mk-post__media img {
  transform: scale(1.06);
}

.mk-post__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-block: 6px;
}

.mk-post__title {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  line-height: 1.8;
  color: var(--mk-color-text);
  transition: color var(--mk-transition);
}

.mk-post:hover .mk-post__title {
  color: var(--mk-color-primary);
}

.mk-post__excerpt {
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-post__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk-post__cat {
  --mk-post-c: var(--mk-color-primary);
  padding: 5px 14px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-post-c);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.mk-post__cat--tips { --mk-post-c: var(--mk-pastel-lemon); }
.mk-post__cat--health { --mk-post-c: var(--mk-purple); }
.mk-post__cat--food { --mk-post-c: var(--mk-pastel-mint); }
.mk-post__cat--care { --mk-post-c: var(--mk-pastel-rose); }

.mk-post__date {
  font-size: 0.72rem;
  color: var(--mk-color-text-muted);
  white-space: nowrap;
}

.mk-post__go {
  margin-inline-start: auto;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  transition: background var(--mk-transition), color var(--mk-transition), transform var(--mk-transition);
}

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

.mk-post:hover .mk-post__go {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  transform: translateX(-3px);
}

/* ==========================================================================
   Front page: Sec 11 — SEO copy (scrollable)
   ========================================================================== */

.mk-seo {
  position: relative;
  padding-block: 10px 80px;
}

.mk-seo__box {
  position: relative;
  border-radius: var(--mk-radius-lg);
  padding: 26px 28px;
  background: var(--mk-color-bg-soft);
  border: 1px solid var(--mk-color-border);
  overflow: hidden;
}

.mk-seo__blob {
  position: absolute;
  width: 240px;
  height: 240px;
  top: -120px;
  inset-inline-end: -60px;
  border-radius: 50%;
  filter: blur(60px);
  background: var(--mk-tint-lilac);
  opacity: 0.8;
  pointer-events: none;
}

.mk-seo__paw {
  position: absolute;
  width: 90px;
  height: auto;
  bottom: -14px;
  inset-inline-start: -10px;
  color: var(--mk-tint-shade);
  opacity: 0.5;
  rotate: -16deg;
  pointer-events: none;
}

.mk-seo__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mk-seo__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-gradient-cta);
  color: #fff;
  box-shadow: var(--mk-shadow-sm);
}

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

.mk-seo__title {
  font-size: var(--mk-fs-lg);
  color: var(--mk-color-text);
}

/* capped height with its own scroll */
.mk-seo__scroll {
  position: relative;
  max-height: 190px;
  overflow-y: auto;
  padding-inline-end: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--mk-blue-highlight) transparent;
}

/* the "there is more below" hint is a separate overlay, not a mask on the
   text itself — a mask would keep the last lines permanently faded */
.mk-seo__fade {
  position: absolute;
  inset-inline: 28px;
  bottom: 26px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to top, var(--mk-color-bg-soft) 15%, transparent 100%);
  transition: opacity var(--mk-transition);
}

.mk-seo__fade.is-hidden {
  opacity: 0;
}

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

.mk-seo__scroll::-webkit-scrollbar-track {
  background: var(--mk-color-bg-muted);
  border-radius: var(--mk-radius-pill);
}

.mk-seo__scroll::-webkit-scrollbar-thumb {
  background: var(--mk-gradient-cta);
  border-radius: var(--mk-radius-pill);
}

.mk-seo__text {
  position: relative;
  font-size: var(--mk-fs-sm);
  line-height: 2.3;
  color: var(--mk-color-text-soft);
  text-align: justify;
  padding-bottom: 30px;
}

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

.mk-seo__heart {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  color: var(--mk-color-accent-2);
}

/* ==========================================================================
   Sec 10 & 11 — Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .mk-post {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 991px) {
  .mk-blog {
    padding-block: 8px 56px;
  }

  .mk-blog__head {
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .mk-blog__title-row,
  .mk-blog__heading {
    align-items: center;
  }

  .mk-blog__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

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

  .mk-seo {
    padding-block: 4px 56px;
  }

  .mk-seo__scroll {
    max-height: 220px;
  }
}

@media (max-width: 620px) {
  .mk-blog__title {
    font-size: var(--mk-fs-xl);
  }

  .mk-blog__all {
    width: 100%;
    justify-content: center;
  }

  /* a side-by-side card leaves no room for the excerpt at this width */
  .mk-post {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mk-post__media {
    aspect-ratio: 16 / 10;
  }

  .mk-post__excerpt {
    -webkit-line-clamp: 2;
    font-size: var(--mk-fs-xs);
  }

  .mk-seo__box {
    padding: 20px 18px;
    border-radius: var(--mk-radius-md);
  }

  .mk-seo__title {
    font-size: var(--mk-fs-base);
  }

  .mk-seo__text {
    font-size: var(--mk-fs-xs);
    line-height: 2.2;
    text-align: start;
  }

  .mk-seo__scroll {
    max-height: 200px;
  }

  .mk-seo__fade {
    inset-inline: 18px;
    bottom: 20px;
    height: 34px;
  }
}

/* ==========================================================================
   Section rhythm — vertical padding only. Section background colours were
   removed on purpose: the whole page rides the shared ambient canvas from
   makhmal-bg.css, so sections stay transparent and flow into each other.
   Declared last on purpose: it overrides the per-section values above.
   ========================================================================== */

.mk-clusters,
.mk-popular,
.mk-brands,
.mk-fresh,
.mk-why,
.mk-tiles,
.mk-party,
.mk-blog,
.mk-seo {
  padding-block: 64px;
}

/* the cat breaks out over the top edge and needs the extra room */
.mk-cta {
  padding-block: 96px 64px;
}

@media (max-width: 991px) {
  .mk-clusters,
  .mk-popular,
  .mk-brands,
  .mk-fresh,
  .mk-why,
  .mk-tiles,
  .mk-party,
  .mk-blog,
  .mk-seo {
    padding-block: 48px;
  }

  .mk-cta {
    padding-block: 76px 48px;
  }
}

@media (max-width: 620px) {
  .mk-clusters,
  .mk-popular,
  .mk-brands,
  .mk-fresh,
  .mk-why,
  .mk-tiles,
  .mk-party,
  .mk-blog,
  .mk-seo {
    padding-block: 40px;
  }

  .mk-cta {
    padding-block: 58px 40px;
  }
}