/* Front page: hero, stats, deals, new sets, last-chance band, themes, how it works */

/*
 * The sections are direct children of <main>, so phones can reorder them with `order` (see the phone rules at the bottom).
 * The DOM is in the wide-screen order.
 */
.home { display: flex; flex-direction: column; }
/* In a flex column, margin: 0 auto would make a container shrink to fit its content (the hero row is very wide); keep it full width */
.home > .container { width: 100%; }

/* HERO: low enough that the stats show on a 1440 x 900 screen (a 15" MacBook Pro) without scrolling */
.home__hero-wrap { padding-top: 24px; padding-bottom: 20px; }
.hero { display: flex; flex-direction: column; gap: 12px; }

/* Wide screens show the set the strip has picked (site.js moves .is-active) */
.hero__panel:not(.is-active) { display: none; }

/* Wide screens: text left, image right, one button row */
.hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  height: 420px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--r-2xl);
}

.hero__image {
  position: relative;
  order: 2;
  height: 100%;
  overflow: hidden;
  background: var(--image-bg);
  border-radius: 18px;
}

.hero__image img { position: absolute; inset: 36px; width: calc(100% - 72px); height: calc(100% - 72px); object-fit: contain; }

.hero__text { order: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0 8px; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Its own line height: with the body's 1.5 the pill was 28px and the 26px row clipped its rounded ends */
.hero__new {
  padding: 5px 10px;
  line-height: 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__heading { display: flex; flex-direction: column; gap: 6px; }

/* Theme · number · pieces · age, like the cards: only the theme shortens (with "…") when the line is too long */
.hero__meta {
  display: flex;
  gap: 6px;
  height: 20px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink-3);
  white-space: nowrap;
}

.hero__meta > span { flex-shrink: 0; }
.hero__meta > .hero__meta-theme { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }

.hero__title {
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.hero__title a { color: var(--ink); text-decoration: none; }

/* Never more than three lines, on any screen: the third ends in "…" if the text is longer */
.hero__desc {
  margin: 0;
  height: 66px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.hero__desc strong { color: var(--ink); }

/* Price and buttons together at the bottom of the text column (the free space goes above the price, not between them) */
.hero__price { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: auto; overflow: hidden; white-space: nowrap; }
.hero .card-actions { margin-top: 0; }

.hero__amount {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}


/* The five newest as a strip under the panel */
.hero__strip-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.hero__strip-head { align-items: center; }
.hero__strip-head .section-link { font-size: 14px; }

.hero__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

/* The tiles and, after them, the button that pauses or restarts the automatic change (both heroes, site.js) */
.hero__nav { display: flex; align-items: center; gap: 12px; }
.hero__nav > [role="tablist"] { flex: 1; min-width: 0; }

.hero-auto {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
}

.hero-auto[hidden] { display: none; }
/* pause while it changes by itself, play once it has stopped */
.hero-auto__pause { display: flex; }
.hero-auto__play,
.is-stopped .hero-auto__pause { display: none; }
.is-stopped .hero-auto__play { display: flex; }

/* The selected tile's pie in its top right corner while the next set is coming: red for the time gone, grey for the rest.
   It stands still and fades while paused; site.js sets --hero-progress (0–100) */
.hero-pie {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  width: 16px;
  height: 16px;
  background: conic-gradient(var(--cta) calc(var(--hero-progress, 0) * 1%), var(--line) 0);
  border-radius: 50%;
}

.is-auto [data-hero-tab][aria-selected="true"] .hero-pie { display: block; }
.is-paused .hero-pie { opacity: 0.6; }

/* One row per set: thumbnail beside the title and price, so the strip stays low */
.hero__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.hero__tile[aria-selected="true"] { border-color: var(--cta); }

.hero__tile-image { position: relative; flex: 0 0 56px; height: 44px; background: var(--image-bg); border-radius: 8px; }
.hero__tile-image img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }

.hero__tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 20 px kept free at the right on every tile for the pie in the corner */
.hero__tile-title {
  display: block;
  overflow: hidden;
  padding-right: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero__tile-price { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 20px; white-space: nowrap; }

/* STATS: one sentence on the grey page between two thin lines, the numbers in red. No box, so it reads as
   information and leaves the white boxes to things you can click (like the new-set strip just above) */
.stats { display: flex; align-items: center; gap: 20px; }
.stats__rule { flex: 1; height: 1px; background: var(--line-strong); }
.stats__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); white-space: nowrap; }
.stats__text strong { color: var(--cta); white-space: nowrap; }

/* The update time, only where the header's status line is hidden (below 1200px, see header.css) */
.stats__updated {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .stats__updated { display: inline-flex; }
}

/* SECTIONS */
.home__deals { padding-top: 32px; }
.home__popular { padding-top: 64px; padding-bottom: 64px; }
.home__sections { display: flex; flex-direction: column; gap: 64px; padding-top: 32px; padding-bottom: 64px; }
.home__sections--last { padding-top: 28px; }
.home__section { display: flex; flex-direction: column; gap: 18px; }

/* LAST CHANCE band */
.band { background: var(--dark); color: var(--on-dark); }
.band__inner { display: flex; flex-direction: column; gap: 24px; padding-top: 56px; padding-bottom: 64px; }
.band .section-intro { color: var(--on-dark-2); }

.band__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.band__link { font-size: 15px; font-weight: 700; color: var(--on-dark); text-underline-offset: 3px; }
.band__link:hover { color: var(--on-dark); }

/* HOW IT WORKS */
.how { display: flex; flex-direction: column; gap: 20px; padding: 36px 40px; background: var(--surface); border-radius: 24px; }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.how__steps li { display: flex; align-items: flex-start; gap: 14px; }
.how__steps li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.how__steps strong { font-size: 16px; }
.how__steps li > span:last-child > span { font-size: 14px; line-height: 1.5; color: var(--ink-4); }

.how__no {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

/* BLACK FRIDAY (1 November to Cyber Monday, with at least one real deal): a band in the header's dark in place of the new sets' hero.
   Then the stats, the newest sets, the popular ones, the deals, the last chance band and the rest, on every screen */
.home--bf .bfh { order: 1; }
.home--bf .home__stats { order: 2; padding-top: 28px; }
.home--bf .home__new { order: 3; padding-top: 32px; }
.home--bf .home__popular { order: 4; padding-bottom: 32px; }
.home--bf .home__deals { order: 5; padding-bottom: 64px; }
.home--bf .band { order: 6; }
.home--bf .home__sections--last { order: 7; }

.bfh {
  /* the band's own greys, as on the Black Friday page */
  --bf-surface: #353535;
  --bf-line: #474747;

  background: var(--dark);
  color: var(--on-dark);
}

.bfh__inner { display: flex; flex-direction: column; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.bfh__head { display: flex; flex-direction: column; gap: 10px; }
/* the text, and the button level with its last line */
.bfh__lead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }

.bfh__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bfh__eyebrow .dot { background: var(--on-dark); }
.bfh__title { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.bfh__text { max-width: 700px; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; color: var(--on-dark-2); }

/* The way to the whole list: at the right of the heading on wide screens, under the deals on phones */
.bfh__all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  background: var(--surface);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* a shade darker on hover, as the red buttons (.btn--primary) */
.bfh__all:hover { color: var(--ink); filter: brightness(0.95); }
.bfh__all--narrow { display: none; }

/* Wide screens show the deal the strip has picked (site.js moves .is-active): text left, image right */
.bfh__panel:not(.is-active) { display: none; }

.bfh__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  height: 400px;
  padding: 24px;
  background: var(--bf-surface);
  border: 1px solid var(--bf-line);
  border-radius: var(--r-2xl);
}

.bfh__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 8px 0; }

.bfh__heading { display: flex; flex-direction: column; gap: 6px; }

.bfh__meta {
  display: flex;
  gap: 6px;
  height: 20px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--on-dark-3);
  white-space: nowrap;
}

.bfh__meta > span { flex-shrink: 0; }
.bfh__meta > .bfh__meta-theme { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }

.bfh__name {
  height: 76px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 38px;
  letter-spacing: -0.02em;
}

.bfh__name a { color: var(--on-dark); text-decoration: none; }

/* The set's intro, as in the new sets' hero: never more than three lines */
.bfh__desc {
  max-height: 66px;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 15px;
  line-height: 22px;
  color: var(--on-dark-2);
}

.bfh__desc strong { color: var(--on-dark); }

.bfh__price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.bfh__price-row { display: flex; align-items: center; gap: 10px; height: 48px; overflow: hidden; white-space: nowrap; }
.bfh__amount { flex-shrink: 0; font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.bfh__rrp { font-size: 13px; color: var(--on-dark-3); }

/* The wishlist and collection buttons on the dark */
.bfh .card-actions { margin-top: 0; }
.bfh .btn--icon { background: #3d3d3d; border-color: #555; color: var(--on-dark); }
.bfh .btn--icon[aria-pressed="true"] { color: var(--red-on-dark); }

/* The ground is the banner's dark behind the banner, so the light grey can't shine through at the rounded top corners */
.bfh__image { position: relative; overflow: hidden; background: linear-gradient(var(--ink) 62px, var(--image-bg) 0); border-radius: 18px; }
/* under the banner: 62 px plus 24 */
.bfh__image img { position: absolute; inset: 86px 32px 32px; width: calc(100% - 64px); height: calc(100% - 118px); object-fit: contain; }

/* The banner across the top of the image, as the product page's: what makes it a real deal, and the numbers */
.bfh__deal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.bfh__deal strong { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
.bfh__deal svg { flex-shrink: 0; stroke-width: 3; }
.bfh__deal-detail { overflow: hidden; font-size: 13px; color: var(--on-dark-2); text-overflow: ellipsis; }

/* The five deals as a strip under the panel, as the new sets' hero's */
.bfh__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.bfh__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  background: var(--bf-surface);
  border: 2px solid var(--bf-line);
  border-radius: 14px;
  color: var(--on-dark);
  text-align: left;
}

.bfh__tile[aria-selected="true"] { border-color: var(--brand); }
/* a long price leaves less room for "−1.003,95 kr.", which is cut short (…) rather than run over the tile's edge */
.bfh__tile-price { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.bfh__tile-price .hero__tile-price { flex-shrink: 0; }
.bfh__tile-below { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; color: var(--on-dark-2); }

/* The pie and the pause button on the dark */
.bfh .hero-pie { background: conic-gradient(var(--on-dark) calc(var(--hero-progress, 0) * 1%), rgba(255, 255, 255, 0.22) 0); }
.bfh .hero-auto { background: #3d3d3d; border-color: #555; color: var(--on-dark); }

/* ---------- Tablets ---------- */
@media (max-width: 1023px) {
  .hero__panel { gap: 24px; padding: 20px; }
  /* Five rows don't fit side by side here: the strip scrolls sideways */
  .hero__strip { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .hero__tile { flex: 0 0 210px; }
  .hero__title { font-size: 30px; line-height: 32px; height: 64px; }
  .hero__amount { font-size: 32px; }
  .bfh__panel { gap: 24px; padding: 20px; }
  .bfh__strip { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .bfh__tile { flex: 0 0 210px; }
  .bfh__name { font-size: 30px; line-height: 32px; height: 64px; }
  .bfh__amount { font-size: 32px; }
  /* no room for the lines: the sentence and the update time centred, wrapping if they must */
  .stats { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .stats__rule { display: none; }
  .stats__text { white-space: normal; text-align: center; }
}

/* Black Friday: from here down the header has no row of chips on the front page (header.css), so the hero's dark goes on
   from the header's and only needs a little room under the search (20 px with the header's own 12) */
@media (max-width: 899px) {
  .bfh__inner { padding-top: 8px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .home__hero-wrap { padding-top: 16px; padding-bottom: 20px; }

  /* Order on phones: hero, deals, stats, popular sets, last chance, themes (the stats aren't the first thing you scroll to) */
  .home__hero-wrap { order: 1; }
  .home__deals { order: 2; }
  .home__stats { order: 3; }
  .home__popular { order: 4; }
  .band { order: 5; }
  .home__sections--last { order: 6; }

  /* Black Friday: the deals in a row you swipe through, as the new sets' hero; the button to the list under them */
  .bfh__inner { gap: 18px; padding-bottom: 28px; }
  .bfh__title { font-size: 34px; }
  /* no text, so the whole deal shows on the screen, and the button goes under the deals */
  .bfh__lead { display: none; }
  .bfh__all--narrow { display: flex; height: 52px; border-radius: 14px; font-size: 16px; }

  .bfh__panels {
    display: flex;
    gap: 10px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .bfh__panels::-webkit-scrollbar { display: none; }

  .bfh__panel,
  .bfh__panel:not(.is-active) {
    display: flex;
    flex: 0 0 calc(100% - 20px);
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 12px;
    border-radius: var(--r-xl);
    scroll-snap-align: start;
  }

  /* the banner on the image with the shorter numbers line; the image box is 30 px taller for it, and there's no intro,
     so the card is as tall as it was with the numbers in the text */
  .bfh__image { order: -1; height: 230px; background: linear-gradient(var(--ink) 52px, var(--image-bg) 0); }
  .bfh__image img { inset: 64px 18px 18px; width: calc(100% - 36px); height: calc(100% - 82px); }
  .bfh__deal { height: 52px; padding: 0 14px; }
  .bfh__deal strong { gap: 6px; font-size: 14px; }
  .bfh__deal svg { width: 14px; height: 14px; }
  .bfh__deal-detail { font-size: 12px; }
  .bfh__body { gap: 10px; padding: 2px 6px 6px; }
  .bfh__desc { display: none; }
  .bfh__heading { gap: 4px; }
  .bfh__meta { font-size: 14px; }
  .bfh__name { font-size: 24px; line-height: 26px; height: 52px; }
  .bfh__price-row { height: 38px; }
  .bfh__amount { font-size: 30px; }
  .bfh__rrp { display: none; }

  .home--bf .home__stats { padding-top: 20px; }
  .home--bf .home__new { padding-top: 28px; }
  .home--bf .home__popular { padding-bottom: 40px; }
  .home--bf .home__deals { padding-bottom: 40px; }

  /* The hero is a row you swipe through: every new set at once, snapping into place, the next one peeking in at the edge */
  .hero__panels {
    display: flex;
    gap: 10px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .hero__panels::-webkit-scrollbar { display: none; }

  /* Image on top, text under it */
  .hero__panel,
  .hero__panel:not(.is-active) {
    display: flex;
    flex: 0 0 calc(100% - 20px);
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 12px;
    border-radius: var(--r-xl);
    scroll-snap-align: start;
  }

  /* No picker on phones: you swipe, and nothing changes by itself */
  .hero__strip-head,
  .hero__nav { display: none; }
  .hero__image { order: 0; height: 220px; }
  .hero__image img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  .hero__text { order: 1; gap: 12px; padding: 2px 6px 6px; }
  .hero__title { font-size: 26px; line-height: 28px; height: 56px; }
  .hero__desc { font-size: 14px; line-height: 21px; height: 63px; }
  .hero__price { height: 38px; }
  .hero__amount { font-size: 30px; }


  /* left-aligned, the update time under the sentence */
  .stats { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stats__text { text-align: left; }

  .home__deals { padding-top: 20px; padding-bottom: 40px; }
  .home__popular { padding-top: 40px; padding-bottom: 40px; }
  .home__sections { gap: 40px; padding-top: 20px; padding-bottom: 40px; }
  .home__sections--last { padding-top: 16px; }

  .deal-grid > :nth-child(n+5) { display: none; }

  .band__inner { gap: 20px; padding-top: 36px; padding-bottom: 40px; }


  .how { padding: 22px 18px; }
  .how__steps { display: flex; flex-direction: column; gap: 18px; }
}