@charset "UTF-8";
/* ==========================================================================
   KAMJOO 2026 — home page design layer
   ==========================================================================

   WHY THIS FILE EXISTS
   -------------------
   The first pass at the theme was built section by section, and every section
   invented its own spacing, its own card edge and its own heading. The result
   worked, but it read as a stack of blocks: four different card looks on one
   screen, headings that were the same size as product titles, and a lot of
   hairline borders doing the work that space and shadow should do.

   This layer is the single redesign pass over the whole home page. It is
   additive — loaded after components.css — so the inner pages, the shop
   archive and the account screens keep their established layout while the
   page a buyer actually judges first gets one deliberate visual language:

     1. TYPE CARRIES THE HIERARCHY.  Headings are large and heavy, meta is
        small and quiet, prices are the loudest number on a card. Decoration
        is not used to separate things that type can separate.

     2. ONE ACCENT, USED WITH DISCIPLINE.  The brand red appears on the
        primary action, the discount, and the flash band — nothing else. A
        page where everything shouts is a page where nothing is read.

     3. EDGES ARE SOFT, SEPARATION IS SHADOW.  Cards drop the 1px border in
        favour of a hairline ring plus a soft ambient shadow, so a grid reads
        as objects on a surface rather than a table with lines.

     4. GENEROUS VERTICAL RHYTHM.  Section padding roughly doubles. Air is
        the cheapest way to look expensive.

   Every rule below is either a token bump applied globally or a rule scoped
   to the home page / its components, so nothing here can leak into a page
   this stage is not responsible for.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Softer, larger radii. Cards are objects, not boxes. */
  --kj-r-lg: 20px;
  --kj-r-xl: 26px;
  --kj-r-2xl: 34px;

  /* Separation by light: a hairline ring for the edge, two shadows for depth. */
  --kj-2026-hair:     rgba(18, 19, 26, .07);
  --kj-2026-ring:     0 0 0 1px var(--kj-2026-hair);
  --kj-2026-sh-rest:  0 1px 2px rgba(18, 19, 26, .04), 0 10px 26px -16px rgba(18, 19, 26, .22);
  --kj-2026-sh-lift:  0 2px 6px rgba(18, 19, 26, .05), 0 28px 52px -22px rgba(18, 19, 26, .34);
  --kj-2026-sh-brand: 0 18px 44px -18px rgba(217, 20, 60, .38);

  /* The gradient used by every accent bar, chip and primary surface. */
  --kj-2026-accent: linear-gradient(135deg, var(--kj-red-600) 0%, var(--kj-red-700) 100%);

  /* Roomier vertical rhythm — the single biggest "looks designed" lever. */
  --kj-section-y: clamp(1.875rem, 1rem + 2.4vw, 3rem);

  /* Sticky-header offset used by anchor links and sticky rails. */
  --kj-2026-anchor: 120px;

  /*
   * A slightly narrower page frame with a wider gutter than the base theme.
   * At 1440px the old 1416/24px pair left 36px of air beside the hero, which
   * is what made the slider read as "glued to the browser" even inside its
   * container. 1360/32 puts 72px of breathing room beside every section on a
   * 1440 screen while still filling the width on a 1280 laptop, where the
   * gutter alone does the work.
   */
  --kj-container: 1360px;
  --kj-gutter: clamp(1rem, .62rem + 1.5vw, 2rem);
}

/* The page itself sits on the tinted surface; sections are the white ones. */
body.kj-home,
.home .kj-main { background: var(--kj-surface-2); }

/* --------------------------------------------------------------------------
   2. SECTION SHELLS
   -------------------------------------------------------------------------- */
.kj-section { padding-block: var(--kj-section-y); }

/*
 * `.kj-band` paints a full-bleed background using 100vmax box-shadows on each
 * side. With the roomier rhythm above the shadows must stretch further or a
 * hairline of page background appears above and below the band while the page
 * is scrolling.
 */
.kj-band {
  background: var(--kj-band-bg, var(--kj-surface));
  box-shadow: -100vmax 0 0 var(--kj-band-bg, var(--kj-surface)),
               100vmax 0 0 var(--kj-band-bg, var(--kj-surface));
}
.kj-band--tint { --kj-band-bg: var(--kj-surface); }
.kj-band--soft { --kj-band-bg: #FFF6F8; }

/*
 * Sections that follow a white band start with extra air; two vertically
 * adjacent white sections would otherwise merge into one block of text.
 */
.kj-band + .kj-section { padding-block-start: var(--kj-section-y); }

/*
 * The hero is a self-contained visual object, not a text section: it does not
 * need a full section's padding above and below it. The generous 100px+ of
 * empty page that the default rhythm left under the slider read as a hole in
 * the layout rather than as rhythm.
 */
.kj-section:has(> .kj-hero) {
  padding-block: clamp(10px, 1vw, 18px) clamp(16px, 1.6vw, 28px);
}
/* …and the trust strip that follows it hangs directly off the hero. */
.kj-section:has(> .kj-hero) + .kj-services-wrap { padding-block-start: clamp(10px, 1.2vw, 20px); }

/* --------------------------------------------------------------------------
   3. SECTION HEADINGS
   -------------------------------------------------------------------------- */
.kj-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kj-s4);
  margin-block-end: clamp(1.125rem, .6rem + 1.4vw, 1.75rem);
}
.kj-sechead__titles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kj-s2) var(--kj-s3);
  min-width: 0;
}

/*
 * The accent bar: a short rounded gradient stroke that ties every section
 * heading on the page together. It replaces a flat 3px rule that disappeared
 * against the white card behind it.
 */
.kj-sechead__bar {
  inline-size: 5px;
  block-size: 1.5em;
  flex: none;
  border-radius: var(--kj-r-pill);
  background: var(--kj-2026-accent);
  box-shadow: 0 6px 16px -6px rgba(217, 20, 60, .55);
}

.kj-sechead__title {
  font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--kj-ink);
  margin: 0;
}
.kj-sechead__sub {
  font-size: var(--kj-fs-sm);
  color: var(--kj-muted);
  line-height: 1.6;
  /* Drop the subtitle under the title on narrow screens rather than beside it. */
  flex: 1 1 100%;
  order: 3;
  margin-block-start: -.25rem;
}

/* "View all" as a quiet pill that fills with the accent on hover. */
.kj-sechead__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 8px 14px;
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-body);
  background: var(--kj-surface);
  border-radius: var(--kj-r-pill);
  box-shadow: var(--kj-2026-ring);
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              box-shadow var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-fast) var(--kj-ease);
}
.kj-sechead__more:hover {
  color: #fff;
  background: var(--kj-primary-solid);
  box-shadow: var(--kj-2026-sh-brand);
  transform: translateY(-1px);
}
.kj-sechead__more svg { flex: none; }

@media (min-width: 768px) {
  .kj-sechead__sub { flex: none; order: 0; margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   4. PRODUCT CARD
   --------------------------------------------------------------------------
   The card is the most repeated object on the site, so its refinements are
   the ones a buyer feels most. Changes from the previous card:
     - ring + ambient shadow instead of a hard border;
     - the media well gets a soft top-down tint so white product shots on a
       white card stop floating;
     - the wishlist/compare buttons are always visible (on a phone there is no
       hover, so hiding them meant losing them) and become circular;
     - the price is now the largest, heaviest element in the card body, which
       is what a shopper scans for.
   -------------------------------------------------------------------------- */
.kj-card {
  border: 0;
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest);
  transition: box-shadow var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-base) var(--kj-ease-out);
}
.kj-card:hover,
.kj-card:focus-within {
  border-color: transparent;
  box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-lift);
  transform: translateY(-6px);
}

.kj-card__media {
  background: linear-gradient(180deg, var(--kj-surface) 0%, var(--kj-surface-2) 100%);
}
.kj-card__img { padding: clamp(12px, 4.5%, 22px); }

/* Badges: compact pills, brand gradient for the discount. */
.kj-badge {
  font-size: var(--kj-fs-2xs);
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--kj-r-sm);
  letter-spacing: .01em;
}
.kj-badge--sale {
  background: var(--kj-2026-accent);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(217, 20, 60, .55);
}
.kj-badge--new  { background: var(--kj-ink); color: #fff; }
.kj-badge--hot  { background: var(--kj-grad-warm); color: #fff; }
.kj-badge--muted { background: var(--kj-surface-3); color: var(--kj-muted); }

/*
 * Quick actions. Always rendered, so they must stay quiet at rest — a white
 * disc on a white card is nearly invisible until the ring and shadow give it
 * an edge.
 */
.kj-card__quick { opacity: 1; transform: none; }
.kj-card__qbtn {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--kj-r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--kj-muted);
  box-shadow: var(--kj-2026-ring), 0 4px 12px -6px rgba(18, 19, 26, .28);
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              transform var(--kj-t-fast) var(--kj-ease-spring);
}
.kj-card__qbtn:hover { transform: scale(1.12); }
.kj-card__qbtn[aria-pressed="true"] { background: var(--kj-sale); color: #fff; }

.kj-card__body {
  gap: var(--kj-s2);
  padding: clamp(12px, .55rem + .6vw, 18px);
}
.kj-card__brand {
  font-size: var(--kj-fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--kj-faint);
}
.kj-card__title {
  font-size: var(--kj-fs-md);
  font-weight: 600;
  line-height: 1.7;
  color: var(--kj-body);
  min-height: calc(var(--kj-fs-md) * 1.7 * 2);
}

/* Price block: the loudest thing in the card. */
.kj-card__price {
  font-size: clamp(13px, 5.8cqi, 19px);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--kj-ink);
  line-height: 1.25;
}
.kj-card__cur { font-size: var(--kj-fs-2xs); font-weight: 700; color: var(--kj-muted); }
.kj-card__old { font-size: var(--kj-fs-xs); color: var(--kj-faint); }

.kj-card__cart {
  border-radius: var(--kj-r-md);
  inline-size: clamp(34px, 18cqi, 42px);
  block-size: clamp(34px, 18cqi, 42px);
  box-shadow: 0 10px 22px -12px rgba(217, 20, 60, .65);
}
.kj-card__cart:hover { transform: scale(1.06) translateY(-1px); box-shadow: var(--kj-2026-sh-brand); }
.kj-card__cart svg { inline-size: clamp(16px, 8.4cqi, 19px); block-size: clamp(16px, 8.4cqi, 19px); }

.kj-card__stock-bar { block-size: 5px; }
.kj-card__stock-text { font-size: var(--kj-fs-2xs); }

/* --------------------------------------------------------------------------
   4b. RANK MARKER
   --------------------------------------------------------------------------
   Best-sellers are numbered 1..n. The numeral is what separates "a grid of
   products" from "a chart of what people actually buy", so it is high
   contrast and unmistakable — and it only ever appears where the order means
   something, because the card template requires a rank to be passed in.
   -------------------------------------------------------------------------- */
.kj-card__rank {
  position: absolute;
  inset-block-end: var(--kj-s3);
  inset-inline-start: var(--kj-s3);
  z-index: 3;
  display: grid;
  place-items: center;
  min-inline-size: 30px;
  block-size: 30px;
  padding-inline: 9px;
  border-radius: var(--kj-r-pill);
  font-size: var(--kj-fs-sm);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: var(--kj-ink);
  box-shadow: 0 8px 18px -8px rgba(18, 19, 26, .55);
}
/*
 * The podium. Light metal with a dark numeral rather than a rich metal with
 * white text: white on gold tops out around 2.5:1, and a rank badge is far
 * too small for large-text contrast rules to rescue it.
 */
.kj-card__rank--1 { background: linear-gradient(135deg, #FFE9AE, #FFC94D); color: #4A3300; box-shadow: 0 8px 18px -8px rgba(198, 145, 0, .7); }
.kj-card__rank--2 { background: linear-gradient(135deg, #F1F4F9, #CFD7E3); color: #2C3446; box-shadow: 0 8px 18px -8px rgba(90, 104, 128, .6); }
.kj-card__rank--3 { background: linear-gradient(135deg, #F8E3D2, #E3B892); color: #573418; box-shadow: 0 8px 18px -8px rgba(150, 96, 52, .6); }

/* --------------------------------------------------------------------------
   5. PRODUCT GRID DENSITY
   --------------------------------------------------------------------------
   Five to a row on a desktop is the density a marketplace shopper expects —
   it is what puts eight products on the first screen instead of six, and it
   is the difference between "catalogue" and "selection".
   -------------------------------------------------------------------------- */
.kj-grid { gap: clamp(12px, .5rem + .6vw, 20px); }

@media (min-width: 640px)  { .kj-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .kj-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kj-grid--products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   6. SERVICES STRIP  (ارسال رایگان / ضمانت / اصالت کالا …)
   -------------------------------------------------------------------------- */
.kj-services-wrap { padding-block: clamp(1.25rem, .8rem + 1.6vw, 2rem); }

.kj-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--kj-2026-hair);
  border-radius: var(--kj-r-xl);
  overflow: hidden;
  box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest);
}
.kj-service {
  display: flex;
  align-items: center;
  gap: var(--kj-s3);
  padding: clamp(14px, .9rem + .8vw, 22px);
  background: var(--kj-surface);
  transition: background var(--kj-t-fast) var(--kj-ease);
}
.kj-service:hover { background: var(--kj-surface-2); }
.kj-service__icon {
  inline-size: clamp(40px, 3.4vw, 48px);
  block-size: clamp(40px, 3.4vw, 48px);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--kj-r-md);
  color: var(--kj-primary-ink);
  background: var(--kj-primary-soft);
}
.kj-service__icon svg { inline-size: clamp(20px, 1.7vw, 24px); block-size: clamp(20px, 1.7vw, 24px); }
.kj-service__title { font-size: var(--kj-fs-md); font-weight: 700; color: var(--kj-ink); line-height: 1.5; }
.kj-service__text { font-size: var(--kj-fs-2xs); color: var(--kj-muted); line-height: 1.6; }

@media (min-width: 992px) { .kj-services { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   7. CATEGORIES
   -------------------------------------------------------------------------- */
.kj-cats { gap: clamp(10px, .4rem + .7vw, 18px); }

.kj-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kj-s2);
  padding: clamp(12px, .7rem + .6vw, 18px) var(--kj-s2);
  background: var(--kj-surface);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-2026-ring);
  transition: box-shadow var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-base) var(--kj-ease-out);
}
.kj-cat:hover { box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest); transform: translateY(-4px); }

.kj-cat__media {
  inline-size: clamp(64px, 5vw, 84px);
  block-size: clamp(64px, 5vw, 84px);
  display: grid;
  place-items: center;
  border-radius: var(--kj-r-pill);
  background: linear-gradient(180deg, var(--kj-surface) 0%, var(--kj-surface-2) 100%);
  box-shadow: inset 0 0 0 1px var(--kj-2026-hair);
  transition: box-shadow var(--kj-t-base) var(--kj-ease);
}
/*
 * The ring colour change is what makes a category circle feel interactive.
 * It is drawn with box-shadow rather than border so the circle does not
 * change size and nudge the label under it.
 */
.kj-cat:hover .kj-cat__media { box-shadow: 0 0 0 2px var(--kj-primary), 0 10px 22px -12px rgba(217, 20, 60, .5); }
.kj-cat__media img,
.kj-cat__media svg { inline-size: 58%; block-size: 58%; object-fit: contain; }

.kj-cat__name {
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-ink);
  text-align: center;
  line-height: 1.5;
}
.kj-cat__count {
  font-size: var(--kj-fs-2xs);
  color: var(--kj-muted);
  background: var(--kj-surface-3);
  padding: 3px 9px;
  border-radius: var(--kj-r-pill);
}

/* --------------------------------------------------------------------------
   8. FLASH DEALS BAND
   --------------------------------------------------------------------------
   The one section that is allowed to be loud. Everything inside it is white
   on the brand gradient so the section reads as an event rather than as
   another grid.
   -------------------------------------------------------------------------- */
.kj-flash {
  border-radius: var(--kj-r-2xl);
  background: var(--kj-2026-accent);
  box-shadow: var(--kj-2026-sh-brand);
  overflow: hidden;
  position: relative;
}
/* A single soft highlight keeps the flat gradient from looking like a div. */
.kj-flash::before {
  content: "";
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -10%;
  inline-size: 60%;
  block-size: 160%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}
.kj-flash__inner { position: relative; padding: clamp(18px, 1rem + 1.6vw, 30px); }
.kj-flash__title { font-size: clamp(1.125rem, .92rem + .95vw, 1.75rem); font-weight: 900; color: #fff; letter-spacing: -.01em; }

/* Countdown chips: big numerals, small units, spaced like a real clock. */
.kj-flash .kj-count { display: flex; align-items: center; gap: 6px; }
.kj-flash .kj-count__num,
.kj-flash .kj-count__unit {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  border-radius: var(--kj-r-sm);
}
.kj-flash .kj-count__num {
  min-inline-size: clamp(40px, 3.4vw, 52px);
  padding: clamp(7px, .6vw, 10px) 6px clamp(5px, .45vw, 8px);
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.kj-flash .kj-count__unit { padding: 4px 6px; font-size: var(--kj-fs-2xs); font-weight: 600; }
.kj-flash .kj-count__sep { color: rgba(255, 255, 255, .55); font-weight: 800; }
.kj-flash .kj-count__lbl { color: rgba(255, 255, 255, .9); font-size: var(--kj-fs-2xs); }

/* Cards inside the band stay white and get their own rest shadow. */
.kj-flash__rail .kj-card { border-color: transparent; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45); }
.kj-flash__all {
  background: #fff;
  color: var(--kj-primary-ink);
  border-radius: var(--kj-r-pill);
  font-weight: 800;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5);
}
.kj-flash__all:hover { background: var(--kj-ink); color: #fff; }

/* --------------------------------------------------------------------------
   9. MID-PAGE BANNERS
   -------------------------------------------------------------------------- */
.kj-banners { gap: clamp(12px, .5rem + .7vw, 20px); }

.kj-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--kj-r-xl);
  min-block-size: clamp(132px, 10vw, 190px);
  padding: clamp(18px, 1rem + 1.2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--kj-2026-sh-rest);
  transition: transform var(--kj-t-base) var(--kj-ease-out),
              box-shadow var(--kj-t-base) var(--kj-ease);
}
.kj-banner:hover { transform: translateY(-4px); box-shadow: var(--kj-2026-sh-lift); }
/* Decorative disc, drawn in CSS so the three banners need no artwork. */
.kj-banner::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -8%;
  inline-size: 55%;
  aspect-ratio: 1;
  border-radius: var(--kj-r-pill);
  background: rgba(255, 255, 255, .14);
  pointer-events: none;
}
.kj-banner__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.kj-banner__label { font-size: var(--kj-fs-xs); font-weight: 600; color: rgba(255, 255, 255, .92); }
.kj-banner__title { font-size: clamp(1.0625rem, .85rem + .85vw, 1.5rem); font-weight: 900; color: #fff; line-height: 1.35; letter-spacing: -.01em; }
.kj-banner__cta {
  align-self: flex-start;
  margin-block-start: var(--kj-s2);
  padding: 8px 14px;
  font-size: var(--kj-fs-xs);
  font-weight: 800;
  color: var(--kj-ink);
  background: #fff;
  border-radius: var(--kj-r-pill);
  position: relative;
  z-index: 1;
}
/*
 * The demo product shots are 600x600 JPEGs on a white background, so there is
 * no alpha channel to cut them out with. The first attempt faded the white
 * plate out radially; on a colour banner that leaves a soft white halo that
 * reads as a rendering fault. Instead the white plate is embraced as a
 * designed object: a small white tile that floats in the corner of the
 * banner, tilted a couple of degrees so it looks placed rather than pasted.
 * It works with any product photo a shop uploads, square or not.
 */
.kj-banner__media {
  position: absolute;
  inset-block-end: clamp(10px, 1.2vw, 16px);
  inset-inline-end: clamp(10px, 1.2vw, 16px);
  inline-size: clamp(84px, 21%, 132px);
  padding: 7px;
  line-height: 0;
  background: #fff;
  border-radius: var(--kj-r-lg);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .45);
  transform: rotate(-3deg);
  pointer-events: none;
  transition: transform var(--kj-t-base) var(--kj-ease-out);
}
.kj-banner:hover .kj-banner__media { transform: rotate(-1deg) translateY(-4px); }
.kj-banner__media img { inline-size: 100%; block-size: auto; }
.kj-banner__text,
.kj-banner__title,
.kj-banner__label { padding-inline-end: clamp(92px, 24%, 150px); }
.kj-banner__cta { padding-inline-end: 0; }

/* --------------------------------------------------------------------------
   10. BESTSELLER TABS
   -------------------------------------------------------------------------- */
.kj-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--kj-surface);
  border-radius: var(--kj-r-pill);
  box-shadow: var(--kj-2026-ring);
}
.kj-tab {
  padding: 9px 16px;
  font-size: var(--kj-fs-sm);
  font-weight: 700;
  color: var(--kj-muted);
  border-radius: var(--kj-r-pill);
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}
.kj-tab:hover { color: var(--kj-ink); }
.kj-tab[aria-selected="true"],
.kj-tab.is-active { background: var(--kj-ink); color: #fff; }

/* --------------------------------------------------------------------------
   11. BRANDS
   -------------------------------------------------------------------------- */
.kj-brands { gap: clamp(10px, .4rem + .6vw, 16px); }
.kj-brand {
  display: grid;
  place-items: center;
  padding: var(--kj-s4);
  min-block-size: clamp(72px, 6vw, 96px);
  background: var(--kj-surface);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-2026-ring);
  color: var(--kj-muted);
  font-weight: 700;
  transition: box-shadow var(--kj-t-base) var(--kj-ease),
              color var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-base) var(--kj-ease-out);
}
.kj-brand:hover { box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest); color: var(--kj-ink); transform: translateY(-3px); }
/* Logos ship in full colour; greyscale at rest keeps the row calm. */
.kj-brand img { filter: grayscale(1); opacity: .72; transition: filter var(--kj-t-base) var(--kj-ease), opacity var(--kj-t-base) var(--kj-ease); }
.kj-brand:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   12. MAGAZINE / BLOG CARDS
   -------------------------------------------------------------------------- */
.kj-posts { gap: clamp(12px, .5rem + .7vw, 20px); }
.kj-post {
  background: var(--kj-surface);
  border-radius: var(--kj-r-lg);
  overflow: hidden;
  box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest);
  transition: transform var(--kj-t-base) var(--kj-ease-out), box-shadow var(--kj-t-base) var(--kj-ease);
}
.kj-post:hover { transform: translateY(-5px); box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-lift); }
.kj-post__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--kj-surface-3); }
.kj-post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--kj-t-slow) var(--kj-ease-out); }
.kj-post:hover .kj-post__media img { transform: scale(1.05); }
.kj-post__body { padding: clamp(14px, .8rem + .6vw, 20px); display: flex; flex-direction: column; gap: var(--kj-s2); }
.kj-post__cat {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: var(--kj-fs-2xs);
  font-weight: 800;
  color: #fff;
  background: var(--kj-2026-accent);
  border-radius: var(--kj-r-pill);
}
.kj-post__title { font-size: var(--kj-fs-lg); font-weight: 700; line-height: 1.7; color: var(--kj-ink); margin: 0; }
.kj-post__title:hover { color: var(--kj-primary-ink); }
.kj-post__excerpt { font-size: var(--kj-fs-sm); color: var(--kj-muted); line-height: 1.9; }
.kj-post__meta { display: flex; align-items: center; gap: var(--kj-s3); font-size: var(--kj-fs-2xs); color: var(--kj-faint); }

/* --------------------------------------------------------------------------
   13. NEWSLETTER + STATS
   -------------------------------------------------------------------------- */
.kj-news {
  border-radius: var(--kj-r-2xl);
  background: var(--kj-2026-accent);
  box-shadow: var(--kj-2026-sh-brand);
  position: relative;
  overflow: hidden;
}
.kj-news::before {
  content: "";
  position: absolute;
  inset-block-start: -70%;
  inset-inline-start: -5%;
  inline-size: 55%;
  block-size: 180%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent 70%);
  pointer-events: none;
}
.kj-news__title { font-size: clamp(1.0625rem, .9rem + .7vw, 1.5rem); font-weight: 800; color: #fff; }
.kj-news__sub { color: rgba(255, 255, 255, .92); font-size: var(--kj-fs-sm); line-height: 1.8; }
.kj-news__input {
  background: #fff;
  border: 0;
  border-radius: var(--kj-r-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.kj-news__input:focus-visible { outline: 3px solid var(--kj-amber-400); outline-offset: 2px; }

/*
 * Desktop: the field and the button become one white pill with the dark
 * button sitting inside it, the way a modern signup control reads. The
 * button keeps its own focus ring, so keyboard users never lose the caret's
 * position.
 */
@media (min-width: 700px) {
  .kj-news__form {
    gap: 5px;
    padding: 5px;
    background: #fff;
    border-radius: var(--kj-r-pill);
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .55);
  }
  .kj-news__input { background: transparent; padding-inline: var(--kj-s4); }
  .kj-news__input:focus-visible { outline-offset: -3px; }
  .kj-news__btn { border-radius: var(--kj-r-pill); padding-inline: var(--kj-s6); }
}
/*
 * The submit button sits on the brand gradient, where neither the accent nor
 * white text reaches AA on its own. Ink on white does, and it visually
 * belongs to the pill input next to it.
 */
.kj-news__btn { background: var(--kj-ink); color: #fff; border-radius: var(--kj-r-pill); font-weight: 800; }
.kj-news__btn:hover { background: #000; }

/*
 * The stat strip sits on the page surface, NOT inside the red band — an
 * earlier cut of this layer made the pills translucent white, which is white
 * on white and looked like four empty boxes. They stay solid cards with the
 * accent numeral, which is the one place on this page a large number in the
 * brand colour is the right answer.
 */
.kj-stat {
  padding-block: clamp(14px, 1.1vw, 20px);
  border: 0;
  border-radius: var(--kj-r-lg);
  background: var(--kj-surface);
  box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-rest);
}
.kj-stat:hover { box-shadow: var(--kj-2026-ring), var(--kj-2026-sh-lift); }
.kj-stat__num { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; }
.kj-stat__lbl { font-size: var(--kj-fs-sm); color: var(--kj-muted); }

/* --------------------------------------------------------------------------
   14. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kj-card, .kj-cat, .kj-post, .kj-brand, .kj-banner { transition: none; }
  .kj-card:hover, .kj-cat:hover, .kj-post:hover, .kj-brand:hover, .kj-banner:hover { transform: none; }
  .kj-card:hover .kj-card__img, .kj-post:hover .kj-post__media img { transform: none; }
}