/* ==========================================================================
   Elken Africa — components
   Every block here becomes a reusable Elementor widget or template part.
   ========================================================================== */

/* Buttons — Figma "EK - Button" set. Square corners, no radius. ----------- */
.ek-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 30px;
  font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--ek-fast) var(--ek-ease),
              color var(--ek-fast) var(--ek-ease),
              border-color var(--ek-fast) var(--ek-ease);
}
.ek-btn--primary     { background: var(--ek-blue); color: var(--ek-grey-light); }
.ek-btn--primary:hover { background: var(--ek-blue-hover); color: var(--ek-grey-light); }
.ek-btn--ghost       { background: transparent; color: var(--ek-blue); border-color: var(--ek-blue); }
.ek-btn--ghost:hover { background: var(--ek-blue); color: var(--ek-grey-light); }
.ek-btn--white       { background: var(--ek-grey-light); color: var(--ek-blue); }
.ek-btn--white:hover { background: var(--ek-white); color: var(--ek-blue); }
.ek-btn--ghostwhite  { background: transparent; color: var(--ek-white); border-color: rgba(255,255,255,.55); }
.ek-btn--ghostwhite:hover { background: var(--ek-white); color: var(--ek-blue); border-color: var(--ek-white); }
.ek-btn--aqua        { background: var(--ek-aqua); color: var(--ek-white); }
.ek-btn--aqua:hover  { background: var(--ek-aqua-hover); }
.ek-btn--sm          { padding: 10px 24px; font-size: 16px; }

@media (max-width: 767px) {
  .ek-btn { width: 100%; min-height: 52px; padding: 14px 24px; font-size: 16px; }
  /* Small buttons stay inline — three of them stacked full width reads as
     three primary actions, which they are not. */
  .ek-btn--sm { width: auto; flex: 1 1 auto; min-width: 96px; padding: 12px 18px; font-size: 15px; }
}

/* Arrow link -------------------------------------------------------------- */
.ek-link {
  display: inline-flex; align-items: center; gap: var(--ek-8);
  font-size: 16px; font-weight: 600; color: var(--ek-blue);
  transition: color var(--ek-fast) var(--ek-ease);
}
.ek-link svg { transition: transform .25s var(--ek-ease); }
.ek-link:hover svg { transform: translateX(4px); }
.ek-link--light { color: var(--ek-white); }
.ek-link--light:hover { color: var(--ek-pink); }
@media (max-width: 767px) { .ek-link { min-height: 44px; font-size: 15px; } }

/* Header and navigation --------------------------------------------------- */
.ek-header {
  position: relative; z-index: 30; height: 78px;
  display: flex; align-items: center;
  background: var(--ek-white); border-bottom: 1px solid var(--ek-grey-mid);
  color: var(--ek-charcoal);
  transition: color var(--ek-slow) var(--ek-ease);
}
/* Overlay variant — used only where the header sits on a full-bleed banner. */
.ek-header--overlay {
  position: absolute; inset: 0 0 auto 0;
  background: transparent; border-bottom: 0;
}
.ek-header .ek-container--nav {
  display: flex; align-items: center; justify-content: space-between;
}
.ek-header--overlay.ek-header--dark { color: var(--ek-white); }

.ek-logo { position: relative; display: block; width: 172px; height: 31px; flex: 0 0 auto; }
.ek-logo img {
  position: absolute; inset: 0; height: 31px; width: auto; display: block;
  transition: opacity var(--ek-slow) var(--ek-ease);
}
.ek-logo__reversed { opacity: 0; }
.ek-header--overlay.ek-header--dark .ek-logo__colour  { opacity: 0; }
.ek-header--overlay.ek-header--dark .ek-logo__reversed { opacity: 1; }

.ek-nav { display: flex; align-items: center; gap: 4px; }
.ek-nav__item { position: relative; }

/* Bridge the gap between a menu item and its panel. Without this the pointer
   leaves the item on the way down, hover is lost, and the panel closes before
   it can be reached. */
.ek-nav__item--parent::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px;
}
.ek-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 500; color: inherit;
  background: none; border: 0; cursor: pointer;
  transition: background-color var(--ek-fast) var(--ek-ease);
}
.ek-nav__link:hover { color: inherit; }
.ek-nav__item:hover > .ek-nav__link,
.ek-nav__link[aria-expanded="true"] { background: rgba(140,146,156,.22); }

.ek-nav__panel {
  position: absolute; top: calc(100% + 16px); left: 0; min-width: 252px;
  background: var(--ek-white);
  border: 1px solid var(--ek-grey-mid); border-top: 3px solid var(--ek-blue);
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--ek-fast) var(--ek-ease), transform var(--ek-fast) var(--ek-ease);
}
.ek-nav__item:hover > .ek-nav__panel,
.ek-nav__item:focus-within > .ek-nav__panel,
.ek-nav__item.is-open > .ek-nav__panel { opacity: 1; visibility: visible; transform: none; }
.ek-nav__panel a { display: block; padding: 11px 24px; font-size: 15px; color: var(--ek-charcoal); }
.ek-nav__panel a:hover { background: var(--ek-grey-light); color: var(--ek-blue); }

.ek-lang {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--ek-blue); color: var(--ek-white);
  font-size: 15px; font-weight: 600;
}
.ek-lang:hover { color: var(--ek-white); background: var(--ek-blue-hover); }

.ek-burger {
  display: none; width: 44px; height: 44px; padding: 0;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.ek-burger span { display: block; height: 2px; background: currentColor; }
.ek-burger span:nth-child(1), .ek-burger span:nth-child(2) { width: 22px; }
.ek-burger span:nth-child(3) { width: 14px; }

@media (max-width: 1199px) {
  .ek-header, .ek-header--overlay {
    position: relative; height: 64px; background: var(--ek-white);
    border-bottom: 1px solid var(--ek-grey-mid); color: var(--ek-charcoal);
  }
  .ek-header--dark, .ek-header--overlay.ek-header--dark { color: var(--ek-charcoal); }
  .ek-header--overlay.ek-header--dark .ek-logo__colour { opacity: 1; }
  .ek-header--overlay.ek-header--dark .ek-logo__reversed { opacity: 0; }
  .ek-logo { width: 140px; height: 25px; }
  .ek-logo img { height: 25px; }
  .ek-burger { display: flex; }
  .ek-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ek-white); border-bottom: 1px solid var(--ek-grey-mid);
    padding: 8px 0 16px; display: none;
  }
  .ek-nav.is-open { display: flex; }
  .ek-nav__link { border-radius: 0; padding: 14px var(--ek-page-pad); min-height: 44px; justify-content: space-between; }
  .ek-nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 3px solid var(--ek-blue); margin: 0 var(--ek-page-pad) 8px;
    display: none;
  }
  .ek-nav__item.is-open > .ek-nav__panel { display: block; }
  .ek-nav__item--parent::after { display: none; }
  .ek-lang { margin: 12px var(--ek-page-pad) 0; align-self: flex-start; }
}

/* Hero carousel ----------------------------------------------------------- */
.ek-hero { position: relative; }
.ek-hero__slides { display: grid; cursor: grab; touch-action: pan-y; }
.ek-hero__slides.is-dragging { cursor: grabbing; }
.ek-hero__slides.is-dragging * { user-select: none; }
.ek-hero__slides a, .ek-hero__slides button { cursor: pointer; }
.ek-hero__slide {
  grid-area: 1 / 1; position: relative;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ek-slow) var(--ek-ease), visibility var(--ek-slow);
}
.ek-hero__slide.is-active { opacity: 1; visibility: visible; }
.ek-hero__slide { transition: opacity var(--ek-slow) var(--ek-ease), visibility var(--ek-slow), transform .25s var(--ek-ease); }
.ek-hero__slides.is-dragging .ek-hero__slide { transition: opacity var(--ek-slow) var(--ek-ease), visibility var(--ek-slow); }

.ek-hero__media {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
}
.ek-hero__scrim { position: absolute; inset: 0; background: var(--ek-scrim-dark); }
.ek-hero__inner {
  position: relative;
  min-height: clamp(600px, 48vw, 922px);
  display: flex; align-items: center;
  padding-block: 120px 150px;
}
/* A light copy-space slide. The family photograph fills its frame — cabinetry
   left, the family and the product line-up centre-right — so unlike the old
   brand banner there is no empty half to set navy type on, and at 1.9:1 against
   a 1.76:1 frame `cover` leaves almost nothing to crop, so background-position
   cannot move the products out of the way. Two things hold the headline
   instead: a warm near-white wash that fades out before the products start, and
   a narrower copy column with its own type step so the lines break early.
   The wash is warm (255,251,246), not neutral white — the photograph is a warm
   daylight kitchen and a cold white over it greys the wood. */
.ek-hero__wash { position: absolute; inset: 0; pointer-events: none; }
.ek-hero__slide--light .ek-hero__wash {
  background: linear-gradient(94deg,
    rgba(255,251,246,.95)  0%, rgba(255,251,246,.93) 20%, rgba(255,251,246,.82) 29%,
    rgba(255,251,246,.55) 36%, rgba(255,251,246,.26) 42%, rgba(255,251,246,.08) 46%,
    rgba(255,251,246,0)   50%); }
/* ── HERO PHOTO ZOOM ──────────────────────────────────────────────────────
   One number, and the only thing to touch if the product line-up needs to be
   bigger or smaller. 1 is the photograph at its natural framing; 1.05 is five
   per cent larger. Anything above about 1.15 starts pushing the family out of
   the top of the frame.

   It is a transform on the media layer rather than a background-size value,
   because it has to compose with `cover` — a percentage background-size stops
   covering on a taller window and leaves a gap. The origin sits on the product
   cluster, so scaling grows the products in place instead of sliding them. */
.ek-hero__slide--light .ek-hero__media {
  transform: scale(var(--ek-hero-zoom, 1.05));
  transform-origin: 66% 56%; }
.ek-hero__slide--light { overflow: hidden; }

.ek-hero__slide--light .ek-hero__copy { max-width: 520px; }
.ek-hero__slide--light .ek-h1 { font-size: clamp(34px, 3.4vw, 50px); }
@media (max-width: 1199px) { .ek-hero__slide--light .ek-hero__wash { display: none; }
  .ek-hero__slide--light .ek-hero__copy { max-width: none; } }
.ek-hero__copy { max-width: 620px; }
.ek-hero__sub { margin-top: var(--ek-24); max-width: 520px; }
.ek-hero__actions { display: flex; gap: var(--ek-16); margin-top: 36px; flex-wrap: wrap; }

.ek-hero__slide--dark .ek-eyebrow { color: var(--ek-aqua); }
.ek-hero__slide--dark .ek-lead { color: var(--ek-grey-light); }

.t-blue  { color: var(--ek-blue); }
.t-pink  { color: var(--ek-pink); }
.t-white { color: var(--ek-white); }
.t-aqua  { color: var(--ek-aqua); }

/* Carousel dots — Figma "Pagination" -------------------------------------- */
.ek-hero__dots { position: relative; height: 0; }
.ek-hero__controls {
  position: absolute; left: 0; right: 0; bottom: 60px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-24);
}
.ek-dots { display: flex; gap: 10px; align-items: center; }
.ek-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: #C6C9CE; cursor: pointer;
  transition: width var(--ek-fast) var(--ek-ease), background-color var(--ek-fast) var(--ek-ease);
}
.ek-dots button[aria-selected="true"] { width: 24px; background: var(--ek-pink); }
.ek-hero--dark .ek-dots button { background: rgba(255,255,255,.42); }
.ek-hero--dark .ek-dots button[aria-selected="true"] { background: var(--ek-pink); }

/* Previous and next, bottom right of the banner --------------------------- */
.ek-hero__arrows { display: flex; gap: var(--ek-12); }
.ek-hero__arrow {
  width: 56px; height: 56px; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.88); border: 1px solid rgba(32,34,89,.18);
  color: var(--ek-blue); cursor: pointer;
  transition: background-color var(--ek-fast) var(--ek-ease),
              color var(--ek-fast) var(--ek-ease),
              border-color var(--ek-fast) var(--ek-ease);
}
.ek-hero__arrow:hover { background: var(--ek-blue); border-color: var(--ek-blue); color: var(--ek-white); }
.ek-hero--dark .ek-hero__arrow {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); color: var(--ek-white);
}
.ek-hero--dark .ek-hero__arrow:hover { background: var(--ek-white); border-color: var(--ek-white); color: var(--ek-blue); }

@media (max-width: 1199px) {
  .ek-hero { background: var(--ek-white); transition: background-color var(--ek-slow) var(--ek-ease); }
  .ek-hero.ek-hero--dark { background: #0D0F13; }
  .ek-hero__media { position: relative; inset: auto; height: 320px; }
  .ek-hero__scrim { display: none; }
  .ek-hero__inner { min-height: 0; padding-block: 40px 40px; align-items: flex-start; }
  .ek-hero__slide--dark { background: #0D0F13; }
  .ek-hero__dots { height: auto; padding-bottom: 40px; }
  .ek-hero__controls { position: static; }
  .ek-hero__slides { cursor: default; }
}
@media (max-width: 767px) {
  .ek-hero__media { height: 260px; }
  .ek-hero__arrow { width: 48px; height: 48px; }
  .ek-hero__actions { flex-direction: column; gap: var(--ek-12); margin-top: var(--ek-24); }
  .ek-dots button { height: 12px; }
}

/* Trust bar --------------------------------------------------------------- */
.ek-trustbar { background: var(--ek-grey-light); padding: 34px 0; }
.ek-trustbar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ek-trust {
  display: flex; align-items: center; gap: var(--ek-16);
  padding-left: 44px; border-left: 1px solid #DCDEE0;
}
.ek-trust:first-child { padding-left: 0; border-left: 0; }
.ek-trust svg { flex: 0 0 auto; }
.ek-trust span {
  font-size: 14px; font-weight: 600; letter-spacing: .08em; line-height: 1.45;
  text-transform: uppercase; color: var(--ek-blue);
}
@media (max-width: 1199px) {
  .ek-trustbar { padding: 26px 0; }
  .ek-trustbar__grid { grid-template-columns: 1fr; }
  .ek-trust { padding: 18px 0; border-left: 0; border-top: 1px solid #DCDEE0; }
  .ek-trust:first-child { border-top: 0; padding-top: 0; }
  .ek-trust:last-child { padding-bottom: 0; }
  .ek-trust span { font-size: 12px; }
}

/* Section header — Figma "Sec - StatsIntroSection" ------------------------ */
.ek-sechead { display: grid; grid-template-columns: 561px 762px; align-items: start; }
.ek-sechead__left { display: flex; flex-direction: column; gap: 10px; max-width: 390px; }
.ek-sechead__body { padding-top: 4px; display: flex; flex-direction: column; gap: var(--ek-24); }
@media (max-width: 1439px) { .ek-sechead { grid-template-columns: 40% 1fr; column-gap: var(--ek-56); } }
@media (max-width: 1023px) {
  .ek-sechead { grid-template-columns: 1fr; row-gap: var(--ek-24); }
  .ek-sechead__left { max-width: none; }
  .ek-sechead__body { padding-top: 0; }
}

/* Category cards — Figma "Sec - ContentCardsSection" ---------------------- */
.ek-cardrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ek-8); margin-top: var(--ek-76); }
.ek-card { background: var(--ek-white); display: flex; flex-direction: column; }
.ek-card__panel {
  aspect-ratio: 346 / 260; background: var(--ek-grey-light);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ek-card__panel img {
  max-width: 72%; max-height: 76%; object-fit: contain;
  transition: transform .35s var(--ek-ease);
}
.ek-card:hover .ek-card__panel img { transform: scale(1.05); }
.ek-card__body { padding: 32px 30px 36px; display: flex; flex-direction: column; gap: var(--ek-12); flex-grow: 1; }
.ek-card__body .ek-link { margin-top: auto; padding-top: 14px; font-size: 15px; }
@media (max-width: 1199px) { .ek-cardrow { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ek-40); } }
@media (max-width: 767px) {
  .ek-cardrow { margin-top: var(--ek-32); }
  .ek-card__body { padding: 18px 16px 22px; gap: var(--ek-8); }
  .ek-card__body .ek-link { padding-top: 6px; }
}

/* Statistic panels — Figma "Sec - StatsIntroSection" ---------------------- */
.ek-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--ek-76); }
.ek-stat { min-height: 220px; padding: 40px 55px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ek-stat:nth-child(1) { background: var(--ek-stat-1); }
.ek-stat:nth-child(2) { background: var(--ek-stat-2); }
.ek-stat:nth-child(3) { background: var(--ek-stat-3); }
.ek-stat__value { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-grey-light); }
.ek-stat__label { font-size: var(--ek-h3); font-weight: 500; line-height: 1.25; color: var(--ek-grey-light); }
@media (max-width: 1023px) {
  .ek-statgrid { grid-template-columns: 1fr; margin-top: var(--ek-40); }
  .ek-stat { min-height: 0; padding: 26px 24px; }
}

/* Locations --------------------------------------------------------------- */
.ek-loclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-8); }
.ek-loc { display: flex; gap: var(--ek-16); align-items: flex-start; padding: 26px 28px; background: rgba(255,255,255,.06); }
.ek-loc svg { flex: 0 0 auto; margin-top: 3px; }
.ek-loc > span { display: block; }
.ek-loc__name { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ek-white); }
.ek-loc__meta { display: block; font-size: 15px; line-height: 1.4; color: var(--ek-steel); margin-top: 6px; }
@media (max-width: 1023px) { .ek-loclist { grid-template-columns: 1fr; margin-top: var(--ek-32); } }
@media (max-width: 767px) {
  .ek-loc { padding: 18px; gap: var(--ek-12); }
  .ek-loc__name { font-size: 15px; }
  .ek-loc__meta { font-size: 13px; }
}

/* Products menu, second level -------------------------------------------- */
.ek-nav__panel--products { min-width: 330px; }
.ek-nav__sub { position: relative; }
.ek-nav__panel a.ek-nav__sublink {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ek-16);
  padding: 12px 24px; font-size: 15px; color: var(--ek-charcoal);
}
.ek-nav__sublink svg { flex: 0 0 auto; opacity: .55; transition: transform var(--ek-fast) var(--ek-ease), opacity var(--ek-fast) var(--ek-ease); }
.ek-nav__sub:hover > .ek-nav__sublink,
.ek-nav__sub:focus-within > .ek-nav__sublink { background: var(--ek-grey-light); color: var(--ek-blue); }
.ek-nav__sub:hover > .ek-nav__sublink svg { transform: translateX(3px); opacity: 1; }

.ek-nav__panel--l2 {
  /* Opens inwards. The Products item sits near the right edge, so flying out
     to the right pushed the panel past the viewport and widened the document. */
  top: -11px; right: 100%; left: auto; min-width: 288px;
  border-top: 1px solid var(--ek-grey-mid); border-left: 3px solid var(--ek-aqua);
}
.ek-nav__sub:hover > .ek-nav__panel--l2,
.ek-nav__sub:focus-within > .ek-nav__panel--l2,
.ek-nav__sub.is-open > .ek-nav__panel--l2 { opacity: 1; visibility: visible; transform: none; }
.ek-nav__panel--l2 a.is-muted { color: #6B7278; }
.ek-nav__tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ek-grey-light); color: #6B7278;
}
.ek-nav__panel a.ek-nav__seeall {
  display: flex; align-items: center; gap: var(--ek-8);
  margin-top: 8px; padding: 14px 24px;
  border-top: 1px solid var(--ek-grey-mid);
  font-size: 15px; font-weight: 600; color: var(--ek-blue);
}
.ek-nav__seeall:hover { background: var(--ek-grey-light); }
.ek-nav__seeall svg { transition: transform .25s var(--ek-ease); }
.ek-nav__seeall:hover svg { transform: translateX(4px); }

@media (max-width: 1199px) {
  .ek-nav__panel--products { min-width: 0; }
  .ek-nav__sublink { padding: 12px 16px; min-height: 44px; }
  .ek-nav__panel--l2 {
    position: static; right: auto; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 3px solid var(--ek-aqua); margin: 0 0 8px 16px;
    display: none; min-width: 0;
  }
  .ek-nav__sub.is-open > .ek-nav__panel--l2 { display: block; }
  .ek-nav__panel--l2 a { padding: 12px 16px; min-height: 44px; display: flex; align-items: center; }
  .ek-nav__seeall { padding: 14px 16px; min-height: 44px; }
}