/* =============================================================================
   Kids Pass Partner Asset Bank — custom styles
   Layered on top of Bootstrap 5.3. Brand tokens below come from the official
   Kids Pass Brand Guidelines 2026 (kidspass.co.uk/brand-guidelines-2026) —
   the single source of truth for colour, typography, radius and button
   hierarchy. If a future guidelines revision changes a value, update it here
   only — every colour/radius/font in this file reads from these variables.
   ========================================================================== */

:root {
  /* =====================================================================
     OFFICIAL KIDS PASS DESIGN TOKENS — supplied directly, 2026-07-29.
     These exact names/values are the single source of truth for colour
     and font-family. Do not edit hex values here without checking with
     the brand team first — everything else in this file reads from them.
     ===================================================================== */
  --font-sans:    'KP Sans', 'Poppins', system-ui, sans-serif;      /* headings — UPPERCASE ONLY */
  --font-body:    'Poppins', system-ui, sans-serif;                  /* all UI/body/button text */
  --font-display: 'Palmer Lake Print', cursive;                      /* eyebrows/accents only, sparingly */

  --kp-orange-lightest: #fff7eb;
  --kp-orange-lighter:  #ffe1b5;
  --kp-orange-light:    #ffbf5e;
  --kp-orange:          #ff9900;
  --kp-orange-dark:     #b57010;
  --kp-orange-darker:   #82541a;
  --kp-orange-darkest:  #573c24;

  --kp-red-lightest: #ffebef;
  --kp-red-lighter:  #ffc2ce;
  --kp-red-light:    #ff7a94;
  --kp-red:          #ff2d55;
  --kp-red-dark:     #b5254c;
  --kp-red-darker:   #821e44;
  --kp-red-darkest:  #57193f;

  --kp-blue-lightest: #f2f3ff;
  --kp-blue-lighter:  #d2d4f8;
  --kp-blue-light:    #9da2ef;
  --kp-blue:          #636ce6;
  --kp-blue-dark:     #4751b1;
  --kp-blue-darker:   #343e8d;
  --kp-blue-darkest:  #252e6e;

  --kp-green-lightest: #effffc;
  --kp-green-lighter:  #b5e7df;
  --kp-green-light:    #5fcbb9;
  --kp-green:          #01ac90;
  --kp-green-dark:     #037e75;
  --kp-green-darker:   #035e62;
  --kp-green-darkest:  #054252;

  --kp-base-100: #ffffff;
  --kp-base-200: #edeef1;
  --kp-base-300: #dee2e6;
  --kp-base-400: #cdcfd7;
  --kp-base-500: #656b82;
  --kp-base-600: #363d5b;
  --kp-base-700: #1d2647;
  --kp-base-800: #071035;
  --kp-base-900: #030717;

  --kp-grad: linear-gradient(90deg, var(--kp-orange), var(--kp-red));

  /* =====================================================================
     Friendly names from the Brand Guidelines 2026 marketing copy
     (kidspass.co.uk/brand-guidelines-2026), mapped onto the tokens above —
     used purely for readability in comments/class names below.
       Summer Sun = orange (Inspire — energy, join/subscribe CTAs)
       Rocket Lolly = red (Inform — alerts, back/secondary actions)
       Paddle Pool = blue (Engage — interaction, saving)
       Nature Walk = green (Convert — primary action / payment)
       Night Sky = base-800 (nav, headlines)
     ===================================================================== */
  --kp-summer-sun:   var(--kp-orange);
  --kp-rocket-lolly: var(--kp-red);
  --kp-paddle-pool:  var(--kp-blue);
  --kp-nature-walk:  var(--kp-green);
  --kp-night-sky:    var(--kp-base-800);
  --kp-whippy-white: var(--kp-base-100);
  --kp-cool-white:   var(--kp-blue-lightest);
  --kp-water-fight:  var(--kp-blue-lighter);
  /* "Bedtime Black" (#282525) from the marketing copy isn't in the supplied
     token set — base-900 is the closest near-black neutral, used only for
     the one WCAG-specified text-on-Summer-Sun pairing below. */
  --kp-on-summer-sun-text: var(--kp-base-900);

  /* ---- Generic aliases used throughout the rest of this file ---- */
  --kp-navy:   var(--kp-night-sky);
  --kp-indigo: var(--kp-paddle-pool);
  --kp-pink:   var(--kp-rocket-lolly);
  --kp-light:  var(--kp-blue-lightest);
  --kp-body:   var(--kp-base-600);
  --kp-border: var(--kp-base-300);

  /* ---- Typography roles (Brand Guidelines 2026 §04) ----
     KP Sans     = "Our Confident Voice" — UPPERCASE ONLY, page headings & section titles
     Poppins     = "Our Everyday Voice"  — every other piece of UI/body/button text, never swapped out
     Palmer Lake Print = "Our Human Voice" — eyebrows/pre-headings only, sparingly, sized generously
     KP Sans and Palmer Lake Print are genuine Kids Pass typefaces but their font files are not yet
     supplied — see public/assets/fonts/ — so both fall back to Poppins until added. */
  --kp-font-display: var(--font-sans);
  --kp-font-body:    var(--font-body);
  --kp-font-accent:  var(--font-display);
  --kp-font: var(--kp-font-body);

  /* ---- Border radius scale (Brand Guidelines 2026 §06 "Round Everything") ----
     Squircles aren't in this numeric scale — the guidelines specify a
     percentage-based radius (~20% of width) so they scale correctly at any
     size; see the .kp-squircle utility below. */
  --kp-radius-tag:        8px;  /* tags */
  --kp-radius-card:       16px; /* cards */
  --kp-radius-panel:      20px; /* panels */
  --kp-radius-section:    28px; /* sections */
  --kp-radius-large-card: 40px; /* large cards */
  --kp-radius-pill:       999px; /* buttons/CTAs — always pill-shaped, never sharp corners */

  --kp-radius-sm: var(--kp-radius-tag);
  --kp-radius-md: var(--kp-radius-card);
  --kp-radius-lg: var(--kp-radius-panel);
  --kp-radius-xl: var(--kp-radius-section);

  --kp-shadow-sm: 0 2px 8px rgba(7, 16, 53, 0.06);
  --kp-shadow-md: 0 12px 28px rgba(7, 16, 53, 0.12);
  --kp-shadow-lg: 0 20px 45px rgba(7, 16, 53, 0.18);
}

/* -----------------------------------------------------------------------
   Genuine Kids Pass typefaces — the real supplied font files, hosted
   locally under public/assets/fonts/ (no third-party CDN dependency).
   Poppins is loaded via Google Fonts in index.html for fast, cached
   delivery of the UI/body text; its own supplied .ttf files are kept in
   public/assets/fonts/ purely as the real, downloadable asset-bank files.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: "KP Sans";
  src: url("/assets/fonts/kp-sans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palmer Lake Print";
  src: url("/assets/fonts/palmer-lake-print-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */
* {
  scroll-behavior: smooth;
}

body {
  font-family: var(--kp-font);
  color: var(--kp-body);
  /* A soft wash of the brand's cool + warm "lightest" tints instead of plain
     white — the page should read as colourful even where there's no photo
     or artwork on screen yet. */
  background:
    radial-gradient(1100px 520px at 12% 0%, var(--kp-blue-lightest) 0%, transparent 60%),
    radial-gradient(1100px 620px at 100% 15%, var(--kp-orange-lightest) 0%, transparent 55%),
    var(--kp-base-100);
  background-attachment: fixed;
}

/* Default heading treatment = the guidelines' H2/H3 spec (Poppins Semi-Bold,
   Title Case) since most headings in this UI are component/card-level, not
   full page headings. True page/section titles (.kp-intro__heading,
   .kp-section-header__title, .kp-featured-card__title) override this below
   with the KP Sans UPPERCASE "Display/H1" treatment instead. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kp-font-body);
  color: var(--kp-navy);
  font-weight: 600;
}

a {
  color: var(--kp-indigo);
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--kp-navy);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--kp-radius-sm);
}

/* Strong, visible focus ring everywhere (accessibility requirement) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.kp-asset-card__preview-btn:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kp-indigo);
  outline-offset: 2px;
  border-radius: var(--kp-radius-sm);
}

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

/* -----------------------------------------------------------------------
   Buttons — pill-shaped (never sharp corners on CTAs, per the guidelines).
   Every "important"/highest-emphasis CTA (Download, Download selected,
   Download All Assets, Send request...) uses the Tequila Sunrise gradient —
   that's the whole point of .btn-kp-primary. Secondary/tertiary actions stay
   flat colour so the gradient keeps its "this is the one to click" meaning:
     .btn-kp-primary = Tequila Sunrise gradient — the important action
     .btn-kp-outline = Paddle Pool (Engage — explore/secondary actions)
     .btn-kp-ghost   = neutral (text-level CTAs only)
   ----------------------------------------------------------------------- */
.btn-kp-primary {
  background: var(--kp-grad);
  border: 1px solid transparent;
  color: var(--kp-whippy-white);
  text-shadow: 0 1px 2px rgba(7, 16, 53, 0.25);
  border-radius: var(--kp-radius-pill);
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.28);
}
.btn-kp-primary:hover,
.btn-kp-primary:focus {
  filter: brightness(1.06);
  color: var(--kp-whippy-white);
  box-shadow: 0 6px 18px rgba(255, 45, 85, 0.38);
}

/* Engagement / explore actions (Paddle Pool) — e.g. "View guidelines", "Influencer Pack" */
.btn-kp-outline {
  background: transparent;
  border: 1.5px solid var(--kp-paddle-pool);
  color: var(--kp-paddle-pool);
  border-radius: var(--kp-radius-pill);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-kp-outline:hover,
.btn-kp-outline:focus {
  background: var(--kp-paddle-pool);
  color: var(--kp-whippy-white); /* Whippy White on Paddle Pool = WCAG AA ✓ */
}

/* Ghost — text-level CTAs only (Clear filters, Clear selection, Cancel, More details) */
.btn-kp-ghost {
  background: var(--kp-cool-white);
  border: 1px solid transparent;
  color: var(--kp-navy);
  border-radius: var(--kp-radius-pill);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-kp-ghost:hover,
.btn-kp-ghost:focus {
  background: var(--kp-water-fight);
  color: var(--kp-navy);
}

/* Squircle treatment for square marks (app icons, partner logos) — a
   percentage-based radius so it scales correctly at any size, per the
   guidelines' "Partner Logo Treatment" (~20% of width). */
.kp-squircle {
  border-radius: 20%;
}

.kp-icon-btn {
  border: none;
  background: var(--kp-light);
  color: var(--kp-navy);
  width: 42px;
  height: 42px;
  border-radius: var(--kp-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* -----------------------------------------------------------------------
   Header — a top row (brand/search/actions) plus a horizontal category
   bar underneath, both sticky together as one unit. Generous padding and
   gap throughout on purpose: the previous single 68px-tall row felt cramped.
   ----------------------------------------------------------------------- */
.kp-header {
  /* Mobile: the header itself is NOT sticky — only the search bar and the
     category bar below it are (see their own rules). The logo/name row
     scrolls away normally. Desktop restores the classic fully-sticky header
     in the lg+ media query further down. */
  background: #fff;
  border-bottom: 1px solid var(--kp-border);
}
/* Mobile-first: logo+name centered, search underneath, no action buttons
   (those move to a card near the bottom of the page on mobile — see the
   pre-footer / .kp-mobile-actions-card). Desktop (lg+) switches to a single
   row: logo | search | actions. */
.kp-header__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 0;
}
.kp-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.kp-header__logo {
  height: 76px;
  width: auto;
}
.kp-header__title {
  font-weight: 600;
  color: var(--kp-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-left: 1px solid var(--kp-border);
  padding-left: 0.65rem;
}
.kp-header__search {
  position: relative;
  width: 100%;
}
.kp-header__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kp-body);
  opacity: 0.6;
}
.kp-header__search input {
  border-radius: var(--kp-radius-pill);
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  background: var(--kp-light);
  border: 1px solid transparent;
  width: 100%;
}
.kp-header__search input:focus {
  background: #fff;
  border-color: var(--kp-indigo);
  box-shadow: 0 0 0 0.2rem rgba(99, 108, 230, 0.2);
}
.kp-header__actions {
  display: none;
}

/* Mobile-only sticky wrapper for the search bar + category bar. It's a
   direct sibling of <header> (not nested inside it) and sits right before
   the (very tall) rest of the page, so it has room to stay pinned all the
   way through scrolling — a sticky element can only stay stuck within the
   height of its own immediate parent, and a short parent (like <header>)
   would make it un-stick again almost immediately. */
.kp-sticky-toolbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--kp-border);
}
.kp-sticky-toolbar .container-fluid {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

@media (min-width: 992px) {
  /* Desktop: the classic fully-sticky header — logo/name comes along too,
     search+actions rejoin it in one row, and the mobile toolbar is hidden
     entirely (d-lg-none in the HTML). */
  .kp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
  .kp-header__row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
  .kp-header__search {
    flex: 1 1 260px;
    max-width: 460px;
    width: auto;
  }
  .kp-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* ---- Sidebar — desktop (lg+) only, persistent, Brandfetch-style.
   Deliberately not sticky/position:fixed: the header above it is itself
   sticky with a height that can vary (wraps at some widths), so pinning
   both independently risks the sidebar overlapping the header. A normal-
   flow sidebar that scrolls with the page is simpler and just as usable
   for a 9-item list. ---- */
.kp-sidebar {
  flex-direction: column;
  border-right: 1px solid var(--kp-border);
  background: var(--kp-base-100);
  padding: 1.5rem 0.85rem;
}
.kp-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.kp-sidebar-nav .kp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--kp-radius-sm);
  color: var(--kp-body);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  transition: background-color 0.15s ease;
}
/* Each link gets a different "lighter" tint on hover, rotating through the
   palette (same accent order as the category cards) instead of one flat
   hover colour for every item. Excludes .active — the current section
   shouldn't change on hover at all (it was overriding the active navy
   background while the white text stayed, going near-invisible). */
.kp-sidebar-nav li:nth-child(4n+1) .kp-sidebar-link:hover:not(.active) { background: var(--kp-orange-lightest); }
.kp-sidebar-nav li:nth-child(4n+2) .kp-sidebar-link:hover:not(.active) { background: var(--kp-blue-lightest); }
.kp-sidebar-nav li:nth-child(4n+3) .kp-sidebar-link:hover:not(.active) { background: var(--kp-green-lightest); }
.kp-sidebar-nav li:nth-child(4n+4) .kp-sidebar-link:hover:not(.active) { background: var(--kp-red-lightest); }
.kp-sidebar-nav .kp-sidebar-link:hover:not(.active) {
  color: var(--kp-navy);
}
.kp-sidebar-nav .kp-sidebar-link i {
  font-size: 1.05rem;
  color: var(--kp-indigo);
  flex-shrink: 0;
  width: 1.2rem;
  text-align: center;
}
.kp-sidebar-nav .kp-sidebar-link.active {
  background: var(--kp-navy);
  color: #fff;
}
.kp-sidebar-nav .kp-sidebar-link.active i {
  color: var(--kp-orange);
}
.kp-sidebar-nav .kp-sidebar-link .badge {
  margin-left: auto;
  background: var(--kp-blue-lightest);
  color: var(--kp-navy);
  font-weight: 600;
}
.kp-sidebar-nav .kp-sidebar-link.active .badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.kp-sidebar__guidelines-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kp-border);
  color: var(--kp-body);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
}
.kp-sidebar__guidelines-link:hover {
  color: var(--kp-indigo);
}

/* ---- Category bar — mobile only, always visible under the header ---- */
.kp-category-bar {
  /* Just a normal-flow child of the already-sticky .kp-sticky-toolbar —
     it scrolls/sticks together with the search bar above it as one unit. */
  border-top: 1px solid var(--kp-border);
  background: var(--kp-blue-lighter);
}
.kp-category-bar__scroll {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.kp-category-bar__scroll::-webkit-scrollbar { display: none; }
.kp-category-bar__list {
  list-style: none;
  margin: 0;
  padding: 0.65rem 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}
@media (min-width: 1200px) {
  .kp-category-bar__list { justify-content: center; width: 100%; }
}
.kp-category-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--kp-radius-pill);
  background: var(--kp-base-100);
  color: var(--kp-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.kp-category-bar-link i {
  font-size: 1rem;
  color: var(--kp-indigo);
}
.kp-category-bar-link:hover:not(.active) {
  background: var(--kp-orange-lightest);
  color: var(--kp-navy);
}
.kp-category-bar-link.active {
  background: var(--kp-navy);
  color: #fff;
}
.kp-category-bar-link.active i {
  color: var(--kp-orange);
}
.kp-category-bar-link .badge {
  background: rgba(7, 16, 53, 0.08);
  color: var(--kp-navy);
  font-weight: 600;
}
.kp-category-bar-link.active .badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* -----------------------------------------------------------------------
   Content-change animation — the old content fades out first, then the new
   content fades + slides up 16px, so switching tabs/categories reads as one
   smooth crossfade instead of an abrupt swap. Driven from JS (see
   fadeOutContent() / retriggerContentAnim() in app.js). The global
   prefers-reduced-motion rule above already neutralises both of these.
   ----------------------------------------------------------------------- */
@keyframes kp-content-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kp-content-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}
.kp-content-enter {
  animation: kp-content-enter 0.35s ease both;
}
.kp-content-leave {
  animation: kp-content-leave 0.15s ease both;
}

/* -----------------------------------------------------------------------
   Main layout
   ----------------------------------------------------------------------- */
.kp-main__inner {
  padding: 1.5rem 0.65rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .kp-main__inner { padding: 2.25rem 2.5rem 5rem; }
}

.kp-intro {
  /* One light-blue banner, nothing else — no dark box. Just the text itself
     is dark navy. Edge to edge across the content area, and all the way to
     the true screen edge on mobile, where there's no sidebar to make the
     usual page gutter look intentional — see the negative margin below. */
  background: var(--kp-blue-lightest);
  padding: 1.75rem 1.25rem;
}
@media (max-width: 991.98px) {
  .kp-intro {
    margin: 0 -12px; /* cancels out .container-fluid's default gutter */
    width: calc(100% + 24px);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media (min-width: 992px) {
  .kp-intro { padding: 2.25rem 2.5rem; }
}
.kp-intro__box {
  max-width: 100%;
}
.kp-intro__heading {
  /* KP Sans "Confident Voice" Display/H1 treatment — uppercase only */
  font-family: var(--kp-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--kp-navy);
}
.kp-intro__lead {
  color: var(--kp-navy);
  max-width: 60ch;
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Pre-footer — the Influencer Pack promo is a full-bleed Tequila-Sunrise-
   adjacent navy band (edge to edge), not a card floating in a section, with
   everything centred. The mobile-only actions card is the one thing that
   still looks like a genuine card, since it's a distinct secondary block
   sitting on top of that band.
   ----------------------------------------------------------------------- */
.kp-prefooter {
  background: linear-gradient(135deg, var(--kp-navy) 0%, #111a4d 100%);
  padding: 3.5rem 1.25rem;
}
.kp-prefooter__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.kp-featured-card {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.kp-featured-card__eyebrow {
  /* Palmer Lake Print "eyebrow" treatment — sentence/mixed case, sized
     generously, never tracked uppercase (Brand Guidelines 2026 §04). */
  font-family: var(--kp-font-accent);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  font-weight: 400;
  color: var(--kp-orange);
}
.kp-featured-card__title {
  /* KP Sans uppercase — a "campaign moment" per the type spec */
  font-family: var(--kp-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 400;
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: 0.25rem;
}
.kp-featured-card__desc {
  color: #c7cbe8;
  max-width: 55ch;
}
.kp-featured-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  font-size: 0.88rem;
  color: #c7cbe8;
}
.kp-featured-card__meta strong {
  color: #fff;
}
.kp-featured-card__previews {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.kp-featured-card__previews img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--kp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.kp-featured-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  align-items: center;
  /* Extra breathing room above the buttons, on top of the card's own
     1rem gap between sections — the previews row was sitting too close. */
  margin-top: 0.75rem;
}
.kp-featured-card__link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Mobile-only (d-lg-none) — Download All Assets, Influencer Pack and a
   Brand guidelines link, since the header hides its action buttons below lg. */
.kp-mobile-actions-card {
  width: 100%;
  background: var(--kp-base-100);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-large-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  text-align: center;
}
.kp-mobile-actions-card .btn {
  justify-content: center;
}
.kp-mobile-actions-card__link {
  color: var(--kp-indigo);
  font-weight: 600;
  font-size: 0.9rem;
}

/* -----------------------------------------------------------------------
   Category cards — the Overview "landing" view (no search/filters/category
   active). Large, clickable tiles replace a flat 50-item grid by default.
   ----------------------------------------------------------------------- */
.kp-category-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 across from mobile up */
  align-items: stretch; /* cards in the same row always match height */
  gap: 0.75rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .kp-category-cards { gap: 1.25rem; margin-bottom: 2.5rem; }
}
@media (min-width: 992px) {
  .kp-category-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .kp-category-cards { grid-template-columns: repeat(4, 1fr); } /* max 4 across */
}
.kp-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  height: 100%;
  font-family: inherit;
  background: var(--kp-base-100);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-section);
  padding: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
@media (min-width: 768px) {
  .kp-category-card { padding: 1.5rem; gap: 0.65rem; }
}
/* Same idea as the sidebar links — a lighter tint on hover, not a shadow/lift. */
.kp-category-card:hover,
.kp-category-card:focus-visible {
  background: var(--kp-accent-tint, var(--kp-light));
}
.kp-category-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kp-accent-tint, var(--kp-light));
  color: var(--kp-accent, var(--kp-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
/* Rotating accent themes for category cards — set the two custom properties
   the rules above read from, so one card == one colourful accent. */
.kp-category-card--orange { --kp-accent: var(--kp-orange-dark); --kp-accent-tint: var(--kp-orange-lightest); }
.kp-category-card--red    { --kp-accent: var(--kp-red-dark);    --kp-accent-tint: var(--kp-red-lightest); }
.kp-category-card--blue   { --kp-accent: var(--kp-blue-dark);   --kp-accent-tint: var(--kp-blue-lightest); }
.kp-category-card--green  { --kp-accent: var(--kp-green-dark);  --kp-accent-tint: var(--kp-green-lightest); }
.kp-category-card__name {
  font-weight: 700;
  color: var(--kp-navy);
  font-size: 1.1rem;
}
.kp-category-card__desc {
  color: var(--kp-body);
  font-size: 0.88rem;
  margin-bottom: 0;
}
.kp-category-card__count {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--kp-accent, var(--kp-indigo));
}

/* -----------------------------------------------------------------------
   Section header + tabs
   ----------------------------------------------------------------------- */
.kp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.kp-section-header__title {
  /* KP Sans uppercase — "page headings, section titles" per the type spec */
  font-family: var(--kp-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.15rem;
}
.kp-section-header__desc {
  color: var(--kp-body);
  margin-bottom: 0;
  max-width: 65ch;
}
.kp-results-count {
  color: var(--kp-body);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  white-space: nowrap;
}

.kp-tabs-scroll {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-bottom: 1.5rem;
}
.kp-tabs-scroll::-webkit-scrollbar { display: none; }
.kp-tabs {
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.kp-tabs .nav-link {
  white-space: nowrap;
  border-radius: var(--kp-radius-pill);
  color: var(--kp-navy);
  background: var(--kp-light);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.45rem 1rem;
}
.kp-tabs .nav-link.active {
  background: var(--kp-navy);
  color: #fff;
}

/* -----------------------------------------------------------------------
   Asset grid + cards
   ----------------------------------------------------------------------- */
.kp-asset-grid {
  margin-bottom: 2.5rem;
}

.kp-asset-card {
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kp-asset-card:hover {
  box-shadow: var(--kp-shadow-md);
  transform: translateY(-2px);
}

.kp-asset-card__preview-wrap {
  position: relative;
  background: var(--kp-light);
}
/* Actual background is set per-asset in JS via the shared .kp-preview-bg--* classes
   (defined below, under "Asset detail modal") — checkerboard only appears for
   assets whose preview_background is "transparent" (logos/stickers on transparent art). */
.kp-asset-card__preview-btn {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.kp-asset-card__preview {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.kp-asset-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.kp-asset-card__checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  accent-color: var(--kp-paddle-pool); /* Paddle Pool = "Engage" — selection/save actions */
  box-shadow: 0 1px 4px rgba(7, 16, 53, 0.25);
}
.kp-badge-campaign {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--kp-orange);
  color: var(--kp-on-summer-sun-text); /* WCAG-approved text-on-orange pairing */
  font-weight: 700;
  border-radius: var(--kp-radius-pill);
}
.kp-badge-campaign:empty { display: none; }

.kp-asset-card__body {
  padding: 0.95rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
}
.kp-asset-card__name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--kp-navy);
  margin-bottom: 0.15rem;
  overflow-wrap: anywhere;
}
.kp-asset-card__meta {
  font-size: 0.82rem;
  color: var(--kp-body);
  margin-bottom: 0.15rem;
  overflow-wrap: anywhere;
}
.kp-asset-card__meta--muted {
  color: #767b93;
}
.kp-dot {
  margin: 0 0.15rem;
}
.kp-asset-card__actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.kp-asset-card__actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Skeleton loading state
   ----------------------------------------------------------------------- */
.kp-skeleton-card {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-lg);
  overflow: hidden;
  background: #fff;
}
.kp-skeleton-card__preview {
  aspect-ratio: 4 / 3;
}
.kp-skeleton-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.kp-skeleton {
  background: linear-gradient(90deg, #eef0fa 25%, #f6f7fd 37%, #eef0fa 63%);
  background-size: 400% 100%;
  animation: kp-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.kp-skeleton--line { height: 12px; }
.kp-skeleton--w40 { width: 40%; }
.kp-skeleton--w60 { width: 60%; }
.kp-skeleton--w80 { width: 80%; }
@keyframes kp-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-skeleton { animation: none; }
}

/* -----------------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------------- */
.kp-empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  margin-bottom: 2rem;
}
.kp-empty-state__graphic { margin-bottom: 1rem; }
.kp-empty-state__heading { font-size: 1.4rem; }
.kp-empty-state__text {
  color: var(--kp-body);
  margin-bottom: 1.5rem;
}
.kp-empty-state__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
.kp-footer {
  background: var(--kp-navy);
  color: #c7cbe8;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}
.kp-footer a {
  color: #fff;
}

/* -----------------------------------------------------------------------
   Sticky selection bar
   ----------------------------------------------------------------------- */
.kp-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--kp-navy);
  color: #fff;
  box-shadow: 0 -6px 24px rgba(7, 16, 53, 0.25);
}
.kp-selection-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.kp-selection-bar__count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.kp-selection-bar__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.kp-selection-bar .btn-kp-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.kp-selection-bar .btn-kp-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.kp-selection-bar__progress {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.kp-selection-bar__progress .progress {
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
}
.kp-selection-bar__progress .progress-bar {
  background: var(--kp-orange);
}
.kp-selection-bar__error {
  flex: 1 1 260px;
}

/* -----------------------------------------------------------------------
   Asset detail modal
   ----------------------------------------------------------------------- */
.kp-detail-preview-wrap {
  border-radius: var(--kp-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.kp-detail-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 1.5rem;
}
.kp-detail-preview img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
}
.kp-preview-bg--light { background: var(--kp-blue-lightest); }
.kp-preview-bg--dark { background: var(--kp-navy); }
.kp-preview-bg--brand { background: var(--kp-grad); } /* the official orange->red gradient token */
.kp-preview-bg--transparent {
  background: repeating-conic-gradient(#eef0fa 0% 25%, #ffffff 0% 50%) 0 0 / 24px 24px;
}

.kp-bg-switcher {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.kp-bg-switcher button {
  border: 1.5px solid var(--kp-border);
  background: #fff;
  border-radius: var(--kp-radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kp-navy);
}
.kp-bg-switcher button.active {
  border-color: var(--kp-navy);
  background: var(--kp-navy);
  color: #fff;
}

.kp-detail-tags .badge {
  background: var(--kp-light);
  color: var(--kp-navy);
  font-weight: 600;
  margin: 0 0.35rem 0.35rem 0;
}

.kp-guidance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kp-guidance-list li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.9rem;
}
.kp-guidance-list i {
  color: var(--kp-pink);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.kp-download-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kp-download-options li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  padding: 0.55rem 0.85rem;
  flex-wrap: wrap;
}
.kp-download-options .kp-download-options__meta {
  font-size: 0.82rem;
  color: var(--kp-body);
}
.kp-download-options .badge {
  background: var(--kp-indigo);
}

/* -----------------------------------------------------------------------
   Toast notifications — Rocket Lolly is the guidelines' "Inform" colour
   (alerts, key info, notifications), the exact job a toast does here.
   ----------------------------------------------------------------------- */
.kp-toast {
  color: var(--kp-whippy-white);
}
.kp-toast--warning {
  background: var(--kp-rocket-lolly);
}
.kp-toast--info {
  background: var(--kp-navy);
}

/* -----------------------------------------------------------------------
   Fonts section
   ----------------------------------------------------------------------- */
.kp-font-card {
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.kp-font-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.kp-font-card__weights {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.kp-font-card__weights .badge {
  background: var(--kp-light);
  color: var(--kp-navy);
  font-weight: 600;
}
.kp-font-card__preview-input {
  width: 100%;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  font-family: var(--kp-font);
}
.kp-font-card__live-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kp-navy);
  overflow-wrap: anywhere;
}
.kp-font-card__live-paragraph {
  font-size: 1rem;
  color: var(--kp-body);
  overflow-wrap: anywhere;
}
.kp-font-card__licence {
  background: var(--kp-light);
  border-radius: var(--kp-radius-md);
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  color: var(--kp-navy);
  margin-top: 1rem;
}

/* -----------------------------------------------------------------------
   Small helpers
   ----------------------------------------------------------------------- */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Space for the fixed selection bar so it never covers content/footer */
body.kp-has-selection .kp-main__inner,
body.kp-has-selection .kp-footer {
  padding-bottom: 5.5rem;
}