/* Ecom Kraken Edition: homepage (Agent 2 lane, ekh- prefix).
   Colours, type, radii, shadows and motion come from ek-core.css tokens; only layout numbers live here.
   Mobile first. The hero stacks its stories in one grid cell so the frame never changes height. */

/* ------------------------------------------------------------------ hero -- */
.ekh-hero{ padding-top:var(--ek-s5); }
.ekh-hero__frame{ position:relative; border-radius:var(--ek-r-lg); overflow:hidden; background:var(--ek-surface); border:1px solid var(--ek-line); }
[data-ekh-carousel] .ekh-hero__frame{ touch-action:pan-y pinch-zoom; }   /* vertical scroll stays native; a sideways swipe reaches ek-home.js */
.ekh-hero__slides{ display:grid; }
.ekh-slide{ grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; justify-content:center; visibility:hidden; opacity:0;
  transition:opacity 240ms var(--ek-ease), visibility 0s linear 240ms; }
.ekh-slide.is-active{ visibility:visible; opacity:1; z-index:1; transition:opacity 240ms var(--ek-ease); }
@media (prefers-reduced-motion:reduce){ .ekh-slide, .ekh-slide.is-active{ transition:none; } }
.ekh-slide > .ekh-split, .ekh-slide > .ekh-full, .ekh-slide > .ekh-textstory{ flex:1 1 auto; }
/* A picture that failed to load: the story's words and its button still stand on their own. */
.ekh-noimg .ekh-split{ grid-template-columns:minmax(0, 1fr); }
.ekh-noimg .ekh-split__media{ display:none; }
.ekh-noimg .ekh-full__img, .ekh-noimg .ekh-art__img{ visibility:hidden; }
.ekh-art__alt{ display:none; }
.ekh-noimg .ekh-art__alt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:var(--ek-s5); color:#fff;
  font-size:var(--ek-fs-2xl); font-weight:800; text-align:center; }

.ekh-title{ font-size:var(--ek-fs-3xl); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--ek-ink); max-width:20ch; text-wrap:balance; }
.ekh-text{ margin:var(--ek-s4) 0 0; font-size:var(--ek-fs-md); line-height:1.55; color:var(--ek-ink-2); max-width:54ch; }
.ekh-actions{ display:flex; flex-wrap:wrap; gap:var(--ek-s3); margin-top:var(--ek-s5); }
.ekh-actions .ek-btn{ white-space:normal; text-align:center; }
.ekh-btn--light{ background:#fff; color:var(--ek-ink); }
.ekh-btn--light:hover{ background:var(--ek-surface-2); }
.ekh-btn--ghostlight{ background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
.ekh-btn--ghostlight:hover{ background:rgba(255,255,255,.14); }

/* Art: a picture that carries its own lettering. Never cropped; the box takes the picture's ratio (inline). */
.ekh-art{ display:block; position:relative; color:var(--ek-ink); text-decoration:none; background:var(--ek-ink); }
/* The stage caps the hero's height on wide screens so the departments start near the first scroll. The art
   keeps its own ratio inside it (contain), and the side bands show a blurred copy of the same art. */
.ekh-art__stage{ display:block; position:relative; overflow:hidden; }
.ekh-art__fill{ position:absolute; inset:-32px; background-size:cover; background-position:center; filter:blur(28px) saturate(1.15) brightness(.82); transform:scale(1.08); }
.ekh-art__media{ display:block; position:relative; width:100%; max-height:min(460px, 62vh); }
.ekh-art__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ekh-art__cta{ position:absolute; left:var(--ek-s5); bottom:var(--ek-s5); display:inline-flex; align-items:center; gap:8px; min-height:var(--ek-ctl);
  padding:0 20px; border-radius:var(--ek-r-pill); background:#fff; color:var(--ek-ink); font-weight:750; box-shadow:var(--ek-shadow-2); }
.ekh-art__cta .ek-ico{ transition:transform var(--ek-dur) var(--ek-ease); }
.ekh-art:hover .ekh-art__cta .ek-ico{ transform:translateX(3px); }
.ekh-art:focus-visible{ outline-offset:-4px; }

/* Split: text beside a picture (desktop), picture above text (phone). */
.ekh-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr); align-items:stretch; min-height:100%; }
.ekh-split__copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(28px, 3.6vw, 56px); }
.ekh-split .ekh-title{ font-size:var(--ek-fs-2xl); }
.ekh-split .ekh-text{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.ekh-split__media{ position:relative; min-height:clamp(300px, 30vw, 440px); background:var(--ek-well); }
.ekh-split__img, .ekh-full__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--ekh-focal, 50% 50%); }

/* Full: text over a picture, on a scrim that guarantees contrast whatever the photo. */
.ekh-full{ position:relative; display:flex; align-items:flex-end; aspect-ratio:21 / 8; min-height:360px; background:var(--ek-ink); color:#fff; }
.ekh-full::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,12,16,.82) 0%, rgba(10,12,16,.55) 45%, rgba(10,12,16,.1) 100%); }
.ekh-full__copy{ position:relative; z-index:1; padding:clamp(24px, 4.4vw, 64px); max-width:720px; }
.ekh-full .ekh-title, .ekh-full .ekh-text{ color:#fff; }

/* Text-only story. */
.ekh-textstory{ padding:clamp(32px, 5vw, 72px); background:var(--ek-brand-soft); }

/* Controls (shown by ek-home.js only when there is more than one story). */
.ekh-hero__bar{ display:flex; align-items:center; justify-content:flex-end; gap:var(--ek-s2); margin-top:var(--ek-s3); }
.ekh-ctl{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:var(--ek-r-pill);
  border:1.5px solid var(--ek-line-strong); background:var(--ek-surface); color:var(--ek-ink); cursor:pointer; }
.ekh-ctl:hover{ border-color:var(--ek-ink); }
.ekh-dots{ display:inline-flex; align-items:center; }
.ekh-dot{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.ekh-dot span{ display:block; width:10px; height:10px; border-radius:var(--ek-r-pill); background:var(--ek-line-strong); transition:width var(--ek-dur) var(--ek-ease), background-color var(--ek-dur) var(--ek-ease); }
.ekh-dot:hover span{ background:var(--ek-muted); }
.ekh-dot[aria-current="true"] span{ width:24px; background:var(--ek-ink); }
.ekh-count{ min-width:3.2em; text-align:center; font-size:var(--ek-fs-sm); font-weight:700; color:var(--ek-muted); font-variant-numeric:tabular-nums; }

/* No stories published: a short introduction that leads into the departments. */
.ekh-intro{ padding:clamp(28px, 5vw, 64px); border-radius:var(--ek-r-lg); background:var(--ek-surface); border:1px solid var(--ek-line); }
.ekh-intro__title{ font-size:var(--ek-fs-3xl); font-weight:800; letter-spacing:-.02em; max-width:22ch; }
.ekh-intro__text{ margin:var(--ek-s3) 0 0; font-size:var(--ek-fs-md); color:var(--ek-ink-2); max-width:56ch; }
.ekh-intro__cats{ display:flex; flex-wrap:wrap; gap:var(--ek-s2); list-style:none; margin-top:var(--ek-s5); }
.ekh-intro__cats .ek-chip{ min-height:44px; }

/* ------------------------------------------------------------ categories -- */
.ekh-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--ek-s5); list-style:none; }
.ekh-tiles--1{ grid-template-columns:minmax(0, 420px); }
.ekh-tiles--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ekh-tiles--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ekh-tiles__item{ display:flex; min-width:0; }
.ekh-tile{ display:flex; flex-direction:column; width:100%; overflow:hidden; border-radius:var(--ek-r-lg); background:var(--ek-surface); border:1px solid var(--ek-line);
  color:var(--ek-ink); text-decoration:none; box-shadow:var(--ek-shadow-1); transition:box-shadow var(--ek-dur) var(--ek-ease), transform var(--ek-dur) var(--ek-ease), border-color var(--ek-dur) var(--ek-ease); }
.ekh-tile:hover{ box-shadow:var(--ek-shadow-2); border-color:var(--ek-line-strong); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .ekh-tile:hover{ transform:none; } }
.ekh-tile__media{ display:block; position:relative; aspect-ratio:3 / 2; background:var(--ek-well); overflow:hidden; }
.ekh-tile__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ekh-tile__label{ display:flex; align-items:center; justify-content:space-between; gap:var(--ek-s3); padding:var(--ek-s4) var(--ek-s4) var(--ek-s4) var(--ek-s5);
  font-size:var(--ek-fs-md); font-weight:750; line-height:1.25; min-height:60px; }
.ekh-tile__name{ min-width:0; overflow-wrap:anywhere; }
.ekh-tile__go{ color:var(--ek-muted); transition:transform var(--ek-dur) var(--ek-ease), color var(--ek-dur) var(--ek-ease); }
.ekh-tile:hover .ekh-tile__go{ color:var(--ek-ink); transform:translateX(3px); }
/* A category with no picture of its own: a designed label with initials, never a stock photo or an empty box. */
.ekh-tile--plain{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:var(--ek-s4); min-height:96px; padding:var(--ek-s4) var(--ek-s4) var(--ek-s4) var(--ek-s5);
  background:var(--ek-surface); }
.ekh-tile__mono{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:var(--ek-r); background:var(--ek-brand-soft);
  color:var(--ek-brand-strong); font-size:var(--ek-fs-md); font-weight:800; letter-spacing:.02em; }
.ekh-tile--plain .ekh-tile__label{ padding:0; min-height:0; font-size:var(--ek-fs-md); }
.ekh-tile--plain:hover .ekh-tile__mono{ background:var(--ek-brand-tint); }

.ekh-more{ margin-top:var(--ek-s6); }
.ekh-more__h{ font-size:13px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--ek-muted); margin-bottom:var(--ek-s3); }
.ekh-chips{ display:flex; flex-wrap:wrap; gap:var(--ek-s2); list-style:none; }
.ekh-chips .ek-chip, .ekh-deptlinks .ek-chip{ min-height:44px; padding:0 16px; font-size:var(--ek-fs-base); }

/* ---------------------------------------------------- product collections -- */
.ekh-head{ min-width:0; }
.ekh-sub{ margin:var(--ek-s2) 0 0; color:var(--ek-muted); font-size:var(--ek-fs-base); }
.ekh-grid--few{ grid-template-columns:repeat(auto-fill, minmax(220px, 300px)); }

/* Shop by department: tabs once ek-home.js runs, plain links before. */
.ekh-tablist{ display:flex; flex-wrap:wrap; gap:var(--ek-s2); margin-bottom:var(--ek-s5); }
.ekh-tab{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--ek-r-pill); border:1.5px solid var(--ek-line-strong);
  background:var(--ek-surface); color:var(--ek-ink); font-weight:700; cursor:pointer; }
.ekh-tab:hover{ border-color:var(--ek-ink); }
.ekh-tab[aria-selected="true"]{ background:var(--ek-ink); border-color:var(--ek-ink); color:#fff; }
.ekh-deptlinks{ display:flex; flex-wrap:wrap; gap:var(--ek-s2); list-style:none; margin-bottom:var(--ek-s5); }
.ekh-panel{ outline:none; }
.ekh-panel:focus-visible{ outline:3px solid var(--ek-focus); outline-offset:6px; border-radius:var(--ek-r); }
.ekh-panel__h{ font-size:var(--ek-fs-lg); font-weight:750; margin-bottom:var(--ek-s4); }
.ekh-dept.is-tabs .ekh-panel__h{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ekh-panel__more{ margin:var(--ek-s5) 0 0; }

/* ----------------------------------------------------------------- brands -- */
.ekh-brandlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:var(--ek-s3); list-style:none; }
.ekh-brand{ display:flex; align-items:center; justify-content:center; min-height:64px; height:100%; padding:var(--ek-s3) var(--ek-s4); border-radius:var(--ek-r);
  background:var(--ek-surface); border:1px solid var(--ek-line); color:var(--ek-ink); font-weight:700; text-align:center; text-decoration:none; overflow-wrap:anywhere;
  transition:border-color var(--ek-dur) var(--ek-ease), box-shadow var(--ek-dur) var(--ek-ease); }
.ekh-brand:hover{ border-color:var(--ek-ink); box-shadow:var(--ek-shadow-1); }
.ekh-brand--logo img{ max-height:44px; width:auto; object-fit:contain; }

/* ------------------------------------------------------------------- help -- */
.ekh-help__card{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr); gap:var(--ek-s6); align-items:center; padding:clamp(24px, 4vw, 48px);
  border-radius:var(--ek-r-lg); background:var(--ek-surface); border:1px solid var(--ek-line); }
.ekh-help__title{ font-size:var(--ek-fs-xl); font-weight:800; }
.ekh-help__text{ margin:var(--ek-s2) 0 0; color:var(--ek-ink-2); }
.ekh-help__pickup{ display:inline-flex; align-items:center; gap:8px; margin:var(--ek-s4) 0 0; padding:8px 14px; border-radius:var(--ek-r-pill);
  background:var(--ek-ok-soft); color:var(--ek-ok); font-weight:700; font-size:var(--ek-fs-sm); }
.ekh-help__list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--ek-s3); list-style:none; }
.ekh-help__item{ display:flex; align-items:center; gap:var(--ek-s3); min-height:64px; height:100%; padding:var(--ek-s3) var(--ek-s4); border-radius:var(--ek-r);
  border:1px solid var(--ek-line); background:var(--ek-bg); color:var(--ek-ink); text-decoration:none; }
a.ekh-help__item:hover{ border-color:var(--ek-ink); }
.ekh-help__ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:var(--ek-r-pill);
  background:var(--ek-brand-soft); color:var(--ek-brand-strong); }
.ekh-help__txt{ display:flex; flex-direction:column; min-width:0; }
.ekh-help__label{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ek-muted); }
.ekh-help__value{ font-weight:700; overflow-wrap:anywhere; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1180px){
  .ekh-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ekh-tiles--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:899px){
  .ekh-split{ grid-template-columns:minmax(0, 1fr); }
  .ekh-split__media{ order:-1; min-height:0; aspect-ratio:16 / 10; }
  .ekh-split__img, .ekh-full__img{ object-position:var(--ekh-focal-m, var(--ekh-focal, 50% 50%)); }
  .ekh-split__copy{ padding:var(--ek-s5) var(--ek-s5) var(--ek-s6); }
  .ekh-full{ aspect-ratio:auto; min-height:440px; }
  .ekh-full::after{ background:linear-gradient(0deg, rgba(10,12,16,.86) 0%, rgba(10,12,16,.55) 55%, rgba(10,12,16,.15) 100%); }
  .ekh-help__card{ grid-template-columns:minmax(0, 1fr); gap:var(--ek-s5); }
}
@media (max-width:767px){
  /* The hero runs edge to edge on phones; its text keeps the page gutter. */
  .ekh-hero{ padding-top:0; }
  .ekh-hero__wrap{ padding-left:0; padding-right:0; }
  .ekh-hero__frame{ border-radius:0; border-left:0; border-right:0; border-top:0; }
  .ekh-hero__bar{ justify-content:center; padding:0 var(--ek-gutter); }
  .ekh-art__cta{ position:static; display:flex; justify-content:center; border-radius:0; box-shadow:none; border-top:1px solid var(--ek-line); }
  .ekh-split__copy, .ekh-textstory, .ekh-full__copy{ padding-left:var(--ek-gutter); padding-right:var(--ek-gutter); }
  .ekh-text{ font-size:var(--ek-fs-base); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .ekh-actions .ek-btn{ flex:1 1 auto; }
  .ekh-tiles, .ekh-tiles--3, .ekh-tiles--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--ek-s3); }
  .ekh-tiles--1{ grid-template-columns:minmax(0, 1fr); }
  .ekh-tile__label{ font-size:var(--ek-fs-base); padding:var(--ek-s3); min-height:52px; }
  .ekh-tile--plain{ grid-template-columns:minmax(0, 1fr); gap:var(--ek-s2); padding:var(--ek-s3); min-height:0; }
  .ekh-tile__mono{ width:44px; height:44px; font-size:var(--ek-fs-base); }
  .ekh-help__list{ grid-template-columns:minmax(0, 1fr); }
  /* Phones get shorter product sections: the full set is one tap away ("Shop all ..."). */
  .ekh-coll .ekh-grid > li:nth-child(n+7), .ekh-dept .ekh-grid > li:nth-child(n+5){ display:none; }
  /* Brands become compact chips instead of a tall column of tiles. */
  .ekh-brandlist{ display:flex; flex-wrap:wrap; gap:var(--ek-s2); }
  .ekh-brand{ min-height:44px; height:auto; padding:0 16px; border-radius:var(--ek-r-pill); font-size:var(--ek-fs-sm); }
  .ekh-brand--logo img{ max-height:28px; }
}
@media (max-width:360px){
  .ekh-tiles, .ekh-tiles--2, .ekh-tiles--3, .ekh-tiles--4{ grid-template-columns:minmax(0, 1fr); }
}