/* ============================================================================
   Kits4Less design system
   Values measured off the source's computed styles (source-cdp/home-tokens.json
   + home-content.json), not eyeballed.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --k4l-ink:            #0E0816;  /* body + heading text */
  --k4l-ink-80:         rgba(14, 8, 22, .8);
  --k4l-ink-60:         rgba(14, 8, 22, .6);

  --k4l-purple:         #372480;  /* brand deep - H2s, primary buttons, bands */
  --k4l-purple-mid:     #7052F2;  /* announcement bar, links, accents */
  --k4l-purple-light:   #866CF4;
  --k4l-purple-tint:    #BFB1F9;  /* hero second-tone display text */
  --k4l-purple-pale:    #D4CBFB;
  --k4l-purple-wash:    #F8F6FE;

  --k4l-lime:           #D3F682;
  --k4l-lime-deep:      #C7EA76;
  --k4l-green:          #03A16C;  /* in stock / success */
  --k4l-red:            #DF2121;  /* sale price / errors */

  --k4l-white:          #FFFFFF;
  --k4l-grey-bg:        #F5F5F5;  /* alternating section background */
  --k4l-border:         #DDDEDF;
  --k4l-grey-1:         #555555;
  --k4l-grey-2:         #838383;
  --k4l-grey-3:         #9E9E9E;

  /* --- type -------------------------------------------------------------- */
  --k4l-font-display: "Clash Display", "Public Sans", system-ui, sans-serif;
  --k4l-font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The source's scale is a ~1.115 ratio emitted by Bricks; these are the
     actual rendered sizes at 1440. Fluid clamps keep them sane on mobile. */
  --k4l-fs-hero:  clamp(3.25rem, 8vw, 7.2rem);      /* 115.2px */
  --k4l-fs-h2:    clamp(2.25rem, 4.4vw, 3.917rem);  /*  62.7px */
  --k4l-fs-h3:    clamp(1.35rem, 1.7vw, 1.488rem);  /*  23.8px */
  --k4l-fs-h4:    clamp(1.5rem, 2.2vw, 1.976rem);   /*  31.6px */
  --k4l-fs-lg:    1.244rem;                          /*  19.9px */
  --k4l-fs-md:    1.119rem;                          /*  17.9px */
  --k4l-fs-base:  1rem;                              /*  16px   */
  --k4l-fs-sm:    .875rem;
  --k4l-fs-xs:    .8rem;                             /*  12.8px */

  /* --- space / shape ----------------------------------------------------- */
  --k4l-container: 1290px;
  --k4l-gutter:    24px;
  --k4l-radius:    4px;    /* buttons, measured */
  --k4l-radius-lg: 12px;   /* cards */
  --k4l-section-y: clamp(48px, 6vw, 96px);
  --k4l-shadow:    0 2px 14px rgba(14, 8, 22, .07);
  --k4l-shadow-lg: 0 8px 34px rgba(14, 8, 22, .10);
  --k4l-header-h:  108px;
}

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

body {
  margin: 0;
  font-family: var(--k4l-font-body);
  font-size: var(--k4l-fs-base);
  line-height: 1.6;
  color: var(--k4l-ink);
  background: var(--k4l-white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--k4l-purple-mid); text-decoration: none; }
a:hover { color: var(--k4l-purple); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k4l-font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

/* --- layout primitives --------------------------------------------------- */
.k4l-container {
  width: 100%;
  max-width: var(--k4l-container);
  margin-inline: auto;
  padding-inline: var(--k4l-gutter);
}

.k4l-section { padding-block: var(--k4l-section-y); }
.k4l-section--grey   { background: var(--k4l-grey-bg); }
.k4l-section--purple { background: var(--k4l-purple); color: var(--k4l-white); }
.k4l-section--purple h1, .k4l-section--purple h2,
.k4l-section--purple h3, .k4l-section--purple h4 { color: var(--k4l-white); }

.k4l-h2 { font-size: var(--k4l-fs-h2); color: var(--k4l-purple); }
.k4l-section--purple .k4l-h2 { color: var(--k4l-white); }

/* --- buttons ------------------------------------------------------------- */
.k4l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--k4l-font-display);
  font-size: var(--k4l-fs-lg);
  font-weight: 600;
  line-height: 1.2;
  padding: .5em 1em;                 /* 9.95px 19.9px at 19.9px font */
  border: 0;
  border-radius: var(--k4l-radius);
  background: var(--k4l-purple);
  color: var(--k4l-white);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.k4l-btn:hover { background: var(--k4l-purple-mid); color: var(--k4l-white); }
.k4l-btn:active { transform: translateY(1px); }

.k4l-btn--ghost {
  background: transparent;
  color: var(--k4l-purple);
  box-shadow: inset 0 0 0 2px var(--k4l-purple);
}
.k4l-btn--ghost:hover { background: var(--k4l-purple); color: var(--k4l-white); }

.k4l-btn--sm { font-size: var(--k4l-fs-base); padding: .55em 1.1em; }
.k4l-btn--block { width: 100%; }

/* --- utility ------------------------------------------------------------- */
.k4l-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.k4l-hide-mobile { display: none; }
@media (min-width: 992px) { .k4l-hide-mobile { display: block; } }
@media (max-width: 991px) { .k4l-hide-desktop { display: block; } }
@media (min-width: 992px) { .k4l-hide-desktop { display: none; } }