/* ==========================================================================
   Practice Marketplace — catalog, country and listing pages.

   One stylesheet for the whole shop front, built entirely on the site's theme
   tokens (--color-primary, --color-bg-card …) so a tenant re-brand carries
   through without a single override here. Everything is fluid: the grid is
   `auto-fill` rather than fixed breakpoints, so the same markup gives four
   columns on a desktop, two on a tablet and one on a phone with no media
   query deciding it.
   ========================================================================== */

.mk {
  --mk-radius: 16px;
  --mk-radius-lg: 22px;
  --mk-gap: 1.25rem;
  --mk-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --mk-shadow-lift: 0 12px 20px rgba(15, 23, 42, .08), 0 28px 48px rgba(15, 23, 42, .12);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mk-hero {
  position: relative;
  overflow: hidden;
  color: var(--color-text-light);
  background:
    radial-gradient(1200px 520px at 82% -20%, rgba(var(--color-secondary-rgb), .28), transparent 62%),
    radial-gradient(900px 460px at -5% 10%, rgba(var(--color-accent-rgb), .16), transparent 58%),
    var(--color-primary);
  border-radius: 0 0 var(--mk-radius-lg) var(--mk-radius-lg);
}
/* A faint grid over the gradient — enough texture that the hero does not read
   as a flat colour block, invisible enough never to compete with the words. */
.mk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 340px at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.mk-hero > * { position: relative; z-index: 1; }
.mk-hero h1,
.mk-hero .mk-hero__title { color: var(--color-text-light) !important; font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
.mk-hero__lead { color: rgba(255, 255, 255, .84); font-size: 1.06rem; max-width: 46rem; }
.mk-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff; border-radius: 999px;
  padding: .35rem .85rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .02em;
}

/* Search bar — the single most-used control on the page, so it gets the
   largest hit area and the strongest contrast in the hero. */
.mk-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--color-bg-card);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
  padding: .4rem .4rem .4rem 1rem;
}
.mk-search i { color: var(--color-text-muted); }
.mk-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 1rem; color: var(--color-text-dark);
  padding: .6rem 0;
}
.mk-search input::placeholder { color: var(--color-text-muted); }
.mk-search button {
  flex: none; border: 0; border-radius: 11px;
  background: var(--color-primary); color: #fff;
  font-weight: 700; padding: .62rem 1.35rem;
}
.mk-search button:hover { filter: brightness(1.08); }

.mk-hero__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.mk-hero__stat b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1; }
.mk-hero__stat span { font-size: .8rem; color: rgba(255, 255, 255, .72); text-transform: uppercase; letter-spacing: .06em; }

/* ── Hero showcase ──────────────────────────────────────────────────────
   The products, rotating, in the space the hero was wasting. Each slide is a
   whole link: artwork, what it is, and the two numbers that decide whether it
   is worth opening. Slides cross-fade in place (no horizontal motion) so the
   hero never jitters the text next to it, and the artwork is CONTAINED — a
   cover cropped by its own shop window is worse than a letterbox.            */
.mk-showcase {
  --mk-showcase-radius: 20px;
  position: relative;
}
.mk-showcase__stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--mk-showcase-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 30px 60px rgba(2, 6, 23, .42);
  /* Sits slightly out of the page plane so it reads as an object in front of
     the hero rather than a panel painted onto it. */
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
.mk-showcase:hover .mk-showcase__stage,
.mk-showcase:focus-within .mk-showcase__stage {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
}
.mk-showcase__slide {
  position: absolute; inset: 0;
  display: block; text-decoration: none; color: #fff;
  opacity: 0; visibility: hidden;
  transform: scale(1.04);
  transition: opacity .7s ease, transform 7s linear, visibility 0s linear .7s;
}
.mk-showcase__slide.is-active {
  opacity: 1; visibility: visible;
  transform: scale(1);
  transition: opacity .7s ease, transform 7s linear, visibility 0s;
}
.mk-showcase__wash {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.25); filter: blur(30px) saturate(1.35); opacity: .6;
}
.mk-showcase__art {
  position: absolute; inset: 0;
  /* Contained, not cropped: these are designed covers with titles on them, and
     a shop window that cuts the title off sells nothing. The blurred copy
     behind fills whatever letterbox a non-4:3 cover leaves. */
  width: 100%; height: 100%; object-fit: contain;
}
.mk-showcase__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(2, 6, 23, .94) 0%, rgba(2, 6, 23, .6) 32%, rgba(2, 6, 23, 0) 60%);
  pointer-events: none;
}
.mk-showcase__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.1rem 1.15rem;
}
.mk-showcase__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.mk-showcase__tag {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px; padding: .18rem .6rem;
  font-size: .72rem; font-weight: 600; color: #fff;
  backdrop-filter: blur(6px);
}
.mk-showcase__tag--free {
  background: rgba(16, 185, 129, .28); border-color: rgba(16, 185, 129, .5);
}
.mk-showcase__title {
  font-size: 1.06rem; font-weight: 800; line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk-showcase__facts { font-size: .8rem; color: rgba(255, 255, 255, .78); }

.mk-showcase__dots {
  display: flex; gap: .4rem; justify-content: center;
  margin-top: .85rem;
}
.mk-showcase__dot {
  border: 0; background: transparent; padding: .35rem .2rem;
  cursor: pointer; line-height: 0;
}
.mk-showcase__dot i {
  display: block; width: 26px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: background .25s, width .25s;
}
.mk-showcase__dot.is-active i { background: #fff; width: 40px; }
.mk-showcase__dot:focus-visible i { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 991.98px) {
  .mk-showcase { margin-top: 1.5rem; }
  .mk-showcase__stage { transform: none; aspect-ratio: 16 / 10; }
}

/* Motion is decoration here: with it suppressed the showcase becomes a plain
   still of the first listing, and the dots still switch it. */
@media (prefers-reduced-motion: reduce) {
  .mk-showcase__stage,
  .mk-showcase__slide { transition: none; transform: none; }
  .mk-showcase:hover .mk-showcase__stage { transform: none; }
}

/* Quick chips under the search: the three or four searches most people
   actually want, one tap away. */
.mk-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; border-radius: 999px;
  padding: .38rem .85rem; font-size: .84rem; text-decoration: none;
  transition: background .15s, transform .15s;
}
.mk-chip:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-1px); }

/* ── Layout: filter rail + results ───────────────────────────────────────── */

.mk-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .mk-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

.mk-rail { position: sticky; top: 1.5rem; }
.mk-rail__toggle { display: none; }
@media (max-width: 991.98px) {
  .mk-rail { position: static; }
  /* On a phone the rail is a wall between the visitor and the products, so it
     folds behind one button. The button is script-driven (see catalog.html):
     without JavaScript it never appears and the panel stays open, because a
     hidden filter panel with no way to open it is worse than a long one. */
  .mk-rail__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: .5rem;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--mk-radius); box-shadow: var(--mk-shadow);
    padding: .8rem 1.1rem; font-weight: 700; font-size: .9rem;
    color: var(--color-text-heading);
  }
  .mk-rail__toggle i.fa-chevron-down { transition: transform .18s; font-size: .72rem; color: var(--color-text-muted); }
  .mk-rail__toggle[aria-expanded="false"] i.fa-chevron-down { transform: rotate(-90deg); }
  .mk-rail__toggle[aria-expanded="false"] + .mk-panel { display: none; }
  .mk-rail__toggle[aria-expanded="true"] + .mk-panel { margin-top: .6rem; }
  /* The toggle already says "Filters"; the panel's own header would say it
     twice, so only "Clear all" survives there. */
  .mk-rail__head strong { display: none; }
  .mk-rail__head > div { justify-content: flex-end !important; }
}

.mk-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
}

.mk-filter { border-bottom: 1px solid var(--color-border-light); padding: .95rem 1.1rem; }
.mk-filter:last-child { border-bottom: 0; }
.mk-filter > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-heading);
}
.mk-filter > summary::-webkit-details-marker { display: none; }
.mk-filter > summary::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .68rem; color: var(--color-text-muted); transition: transform .18s;
}
.mk-filter[open] > summary::after { transform: rotate(180deg); }
.mk-filter__options { margin-top: .7rem; display: flex; flex-direction: column; gap: .1rem; max-height: 15rem; overflow-y: auto; }

.mk-opt {
  display: flex; align-items: center; gap: .55rem;
  padding: .34rem .4rem; border-radius: 8px;
  font-size: .88rem; color: var(--color-text-secondary);
  cursor: pointer; transition: background .12s;
}
.mk-opt:hover { background: var(--color-bg-muted); }
.mk-opt input { accent-color: var(--color-primary); flex: none; margin: 0; }
.mk-opt__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-opt__count { flex: none; font-size: .75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mk-opt input:checked ~ .mk-opt__label { color: var(--color-text-heading); font-weight: 600; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.mk-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.1rem;
}
.mk-toolbar__count { font-size: .92rem; color: var(--color-text-secondary); }
.mk-toolbar__count strong { color: var(--color-text-heading); }
.mk-sort {
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg-card); color: var(--color-text-dark);
  padding: .45rem 2rem .45rem .75rem; font-size: .88rem;
}

/* Applied filters, as removable pills — the only honest way to show a shopper
   what is currently narrowing their results. */
.mk-applied { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.mk-applied__pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(var(--color-primary-rgb), .08);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), .18);
  border-radius: 999px; padding: .28rem .75rem;
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.mk-applied__pill:hover { background: rgba(var(--color-primary-rgb), .16); color: var(--color-primary); }
.mk-applied__clear { font-size: .8rem; color: var(--color-text-muted); text-decoration: underline; align-self: center; }

/* ── The grid ────────────────────────────────────────────────────────────── */

.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--mk-gap);
}
.mk-grid--wide { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.mk-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lift); border-color: var(--color-border-primary); }
.mk-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.mk-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-muted); overflow: hidden; }
.mk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mk-card:hover .mk-card__media img { transform: scale(1.045); }

/* The generated cover for a listing with no artwork yet. It uses the brand
   gradient and the exam's own name, so an un-illustrated listing still looks
   deliberate in a grid next to designed thumbnails. */
.mk-card__fallback {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem; text-align: center;
  background:
    radial-gradient(420px 200px at 80% 0%, rgba(var(--color-secondary-rgb), .28), transparent 65%),
    linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, var(--color-secondary)));
}
.mk-card__fallback-flag { font-size: 2.1rem; line-height: 1; }
.mk-card__fallback-title { color: rgba(255, 255, 255, .95); font-weight: 700; font-size: .92rem; line-height: 1.25; }

.mk-card__flags { position: absolute; top: .6rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.mk-flag {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 7px; padding: .22rem .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
.mk-flag--free { background: var(--color-success); color: #fff; }
.mk-flag--deal { background: var(--color-accent); color: var(--color-primary); }
.mk-flag--try { background: rgba(15, 23, 42, .62); color: #fff; }

.mk-card__official {
  position: absolute; bottom: .6rem; right: .6rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255, 255, 255, .94); color: var(--color-primary);
  border-radius: 7px; padding: .2rem .5rem;
  font-size: .68rem; font-weight: 700;
}

.mk-card__body { display: flex; flex-direction: column; gap: .55rem; padding: .95rem 1rem 1.05rem; flex: 1 1 auto; }
.mk-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.mk-tag {
  background: var(--color-bg-muted); color: var(--color-text-secondary);
  border-radius: 6px; padding: .16rem .45rem;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.mk-tag--level { background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); }
.mk-tag--place { background: transparent; padding-left: 0; }

.mk-card__title {
  margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.34;
  color: var(--color-text-heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-card__summary { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--color-text-muted); }

.mk-card__rating { display: flex; align-items: center; gap: .35rem; font-size: .82rem; }
.mk-card__rating strong { color: var(--color-text-heading); }
.mk-stars { color: #f59e0b; font-size: .74rem; letter-spacing: .5px; }
.mk-stars .fa-regular { color: var(--color-border); }
.mk-card__rating-count { color: var(--color-text-muted); font-size: .78rem; }

.mk-card__stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mk-card__stats li { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--color-text-muted); }
.mk-card__stats i { font-size: .72rem; opacity: .8; }

.mk-card__foot {
  margin-top: auto; padding-top: .7rem;
  border-top: 1px solid var(--color-border-light);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.mk-price { font-weight: 800; font-size: 1.02rem; color: var(--color-text-heading); }
.mk-price s { font-weight: 600; font-size: .8rem; color: var(--color-text-muted); margin-left: .3rem; }
.mk-price--free { color: var(--color-success); }
.mk-card__cta { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 700; color: var(--color-primary); }
.mk-card:hover .mk-card__cta i { transform: translateX(3px); }
.mk-card__cta i { transition: transform .18s; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.mk-empty { text-align: center; padding: 3.5rem 1.5rem; }
.mk-empty__icon { font-size: 2.4rem; color: var(--color-border); margin-bottom: .75rem; }
.mk-empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text-heading); }
.mk-empty p { color: var(--color-text-muted); }

/* ── Browse rails (country tiles, bundles) ───────────────────────────────── */

.mk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.mk-section-head h2 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-text-heading); }
.mk-section-head p { margin: .2rem 0 0; font-size: .88rem; color: var(--color-text-muted); }
.mk-section-head a { font-size: .86rem; font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; }

.mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
.mk-tile {
  display: flex; align-items: center; gap: .7rem;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 13px; padding: .8rem .9rem; text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.mk-tile:hover { transform: translateY(-2px); border-color: var(--color-border-primary); box-shadow: var(--mk-shadow); }
.mk-tile__flag { font-size: 1.6rem; line-height: 1; }
.mk-tile__name { font-weight: 700; font-size: .9rem; color: var(--color-text-heading); }
.mk-tile__count { font-size: .76rem; color: var(--color-text-muted); }

/* ── Listing (detail) page ───────────────────────────────────────────────── */

.mk-detail-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 460px at 88% -25%, rgba(var(--color-secondary-rgb), .32), transparent 62%),
    radial-gradient(720px 380px at -5% 115%, rgba(var(--color-accent-rgb), .16), transparent 58%),
    linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 68%, var(--color-secondary)));
  border-radius: 0 0 var(--mk-radius-lg) var(--mk-radius-lg);
}
.mk-detail-hero h1, .mk-detail-hero h2, .mk-detail-hero a { color: #fff !important; }
.mk-detail-hero h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.mk-crumbs { font-size: .84rem; color: rgba(255, 255, 255, .75); }
.mk-crumbs a { color: rgba(255, 255, 255, .82) !important; text-decoration: none; }
.mk-crumbs a:hover { color: #fff !important; text-decoration: underline; }
.mk-hero-lead { color: rgba(255, 255, 255, .86); font-size: 1.02rem; }
.mk-hero-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.mk-hero-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .24);
  color: #fff; border-radius: 999px; padding: .28rem .75rem;
  font-size: .76rem; font-weight: 600;
}
.mk-hero-cover {
  width: 100%; border-radius: var(--mk-radius);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .2);
  aspect-ratio: 16 / 10; object-fit: cover;
}

/* The listing's artwork. Covers are authored in whatever shape the designer
   chose, so cropping them to the frame cut the title straight off the poster.
   The frame keeps its fixed 16/10 footprint (every listing page lines up), and
   the artwork is CONTAINED inside it — the whole image, always. The letterbox
   left over is filled with a blurred, scaled copy of the same artwork, so the
   frame still reads as one solid object rather than a picture floating on a
   grey slab. */
.mk-hero-art {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--mk-radius); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .3);
  background: rgba(255, 255, 255, .07);
}
.mk-hero-art__wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.2);
  filter: blur(28px) saturate(1.3); opacity: .55;
}
.mk-hero-art__img {
  position: relative; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.mk-hero-cover--blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; padding: 1.5rem; text-align: center;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(2px);
}
.mk-hero-cover__flag { font-size: 2.6rem; line-height: 1; }
.mk-hero-cover__title { font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.mk-hero-cover__meta { font-size: .82rem; color: rgba(255, 255, 255, .78); letter-spacing: .04em; text-transform: uppercase; }

/* The stat strip that overlaps the hero — it belongs to both, which is what
   makes the page read as one object instead of two stacked sections. */
.mk-statstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--mk-radius);
  overflow: hidden; box-shadow: var(--mk-shadow);
}
.mk-stat { background: var(--color-bg-card); padding: 1rem .75rem; text-align: center; }
.mk-stat b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--color-text-heading); line-height: 1.15; }
.mk-stat span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }

.mk-block { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); }
.mk-block__head { padding: 1.1rem 1.25rem .35rem; }
.mk-block__head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--color-text-heading); }
.mk-block__head p { margin: .25rem 0 0; font-size: .86rem; color: var(--color-text-muted); }
.mk-block__body { padding: .5rem 1.25rem 1.15rem; }
.mk-prose { color: var(--color-text-secondary); font-size: .93rem; line-height: 1.65; white-space: pre-line; }

/* A "way to practise" row: icon, name, one line of what it is, one action. */
.mk-mode { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--color-border-light); }
.mk-mode:last-child { border-bottom: 0; }
.mk-mode__icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(var(--color-primary-rgb), .09); color: var(--color-primary);
}
.mk-mode__text { flex: 1 1 auto; min-width: 0; }
.mk-mode__name { font-weight: 700; font-size: .93rem; color: var(--color-text-heading); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mk-mode__desc { font-size: .82rem; color: var(--color-text-muted); }
.mk-mode__action { flex: none; }
.mk-pill { border-radius: 999px; padding: .12rem .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .02em; }
.mk-pill--free { background: rgba(16, 185, 129, .13); color: var(--color-success); }
.mk-pill--premium { background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); }
.mk-pill--new { background: rgba(var(--color-secondary-rgb), .14); color: var(--color-secondary); }

/* Buy card — sticky on desktop because the decision it holds is the reason
   the page exists. */
.mk-buy {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-lift);
  overflow: hidden;
}
.mk-buy__inner { padding: 1.35rem; }
.mk-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; font-size: 2.05rem; font-weight: 800; color: var(--color-text-heading); line-height: 1.1; }
.mk-buy__price s { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); }
.mk-buy__period { font-size: .9rem; font-weight: 600; color: var(--color-text-muted); }
.mk-buy__save { display: inline-flex; align-items: center; gap: .35rem; background: rgba(16, 185, 129, .13); color: var(--color-success); border-radius: 999px; padding: .22rem .65rem; font-size: .76rem; font-weight: 700; }
.mk-buy__deadline { font-size: .8rem; color: var(--color-danger); font-weight: 600; }
.mk-buy__list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.mk-buy__list li { display: flex; gap: .55rem; font-size: .87rem; color: var(--color-text-secondary); line-height: 1.4; }
.mk-buy__list i { color: var(--color-success); margin-top: .18rem; flex: none; }
.mk-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; border: 0; border-radius: 12px;
  padding: .85rem 1rem; font-weight: 700; font-size: .98rem;
  text-decoration: none; transition: filter .15s, transform .15s;
}
.mk-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mk-btn--primary { background: var(--color-primary); color: #fff; }
.mk-btn--primary:hover { color: #fff; }
.mk-btn--free { background: var(--color-success); color: #fff; }
.mk-btn--free:hover { color: #fff; }
.mk-btn--accent { background: var(--color-accent); color: var(--color-primary); }
.mk-btn--accent:hover { color: var(--color-primary); }
.mk-btn--owned { background: rgba(16, 185, 129, .12); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }
.mk-buy__note { margin: .6rem 0 0; text-align: center; font-size: .78rem; color: var(--color-text-muted); }

/* Try-free banner: the highest-converting element on the page, so it is the
   one thing above the description that is allowed to shout. */
.mk-try {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--mk-radius); padding: 1.15rem 1.3rem;
  background:
    radial-gradient(520px 200px at 88% 0%, rgba(var(--color-accent-rgb), .22), transparent 70%),
    var(--color-bg-hero);
  border: 1px solid var(--color-border-primary);
}
.mk-try h2 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 800; color: var(--color-text-heading); }
.mk-try p { margin: 0; font-size: .86rem; color: var(--color-text-secondary); max-width: 34rem; }
.mk-try .mk-btn { width: auto; }

/* Reviews */
.mk-rating-big { font-size: 2.9rem; font-weight: 800; line-height: 1; color: var(--color-text-heading); }
.mk-bar { height: 7px; border-radius: 6px; background: var(--color-border-light); overflow: hidden; }
.mk-bar > span { display: block; height: 100%; background: #f59e0b; }
.mk-review { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border-light); }
.mk-review:last-child { border-bottom: 0; }
.mk-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; font-weight: 700; }
.mk-star-input { cursor: pointer; font-size: 1.45rem; color: var(--color-border); transition: color .12s; }
.mk-star-input.active { color: #f59e0b; }

/* Included-with-this-package groups.
   A package can carry twenty mock tests; its course and its flashcards must
   still be findable in one glance, so each kind gets a labelled group, the
   chips jump to one, and a long mock list folds after the first six. */
/* Wrapping, not scrolling: on a phone a chip parked off the right edge is a
   chip nobody taps, which is the problem this row exists to solve. */
.mk-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 .1rem; }
.mk-jump__chip {
  flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: .8rem; font-weight: 700; text-decoration: none;
  color: var(--color-text-secondary);
  transition: border-color .15s, color .15s, background .15s;
}
.mk-jump__chip:hover,
.mk-jump__chip:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-border-primary);
  background: rgba(var(--color-primary-rgb), .06);
}
.mk-jump__chip i { font-size: .78rem; }
.mk-jump__count {
  background: rgba(var(--color-primary-rgb), .12); color: var(--color-primary);
  border-radius: 999px; padding: 0 .38rem; font-size: .72rem; line-height: 1.5;
}

.mk-group { scroll-margin-top: 5rem; }
.mk-group + .mk-group { margin-top: .35rem; }
.mk-group__head {
  display: flex; align-items: center; gap: .45rem;
  margin: .9rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--color-border-light);
  font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.mk-group:first-child .mk-group__head { margin-top: .25rem; padding-top: 0; border-top: 0; }
.mk-group__head i { color: var(--color-primary); font-size: .82rem; }
.mk-group__count {
  background: var(--color-border-light); color: var(--color-text-secondary);
  border-radius: 999px; padding: 0 .4rem; letter-spacing: 0;
}

.mk-more > summary { list-style: none; }
.mk-more > summary::-webkit-details-marker { display: none; }
.mk-more__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .75rem; padding: .45rem .9rem; border-radius: 999px;
  border: 1px dashed var(--color-border);
  font-size: .82rem; font-weight: 700; color: var(--color-primary);
  cursor: pointer;
}
.mk-more__toggle:hover { background: rgba(var(--color-primary-rgb), .06); }
.mk-more[open] .mk-more__open,
.mk-more:not([open]) .mk-more__close { display: none; }
.mk-more .mk-mode:first-of-type { border-top: 1px solid var(--color-border-light); margin-top: .5rem; }