/* 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; }

/* One row per set: thumbnail beside the title and price, so the strip stays low */
.hero__tile {
  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; }

.hero__tile-title {
  display: block;
  overflow: hidden;
  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;
}

.bfh__all:hover { color: var(--ink); }
.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__below {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.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; }
.bfh__low { margin: 0; font-size: 15px; line-height: 22px; color: var(--on-dark-2); }
.bfh__low 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); }

.bfh__image { position: relative; overflow: hidden; background: var(--image-bg); border-radius: 18px; }
.bfh__image img { position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); object-fit: contain; }

/* 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 {
  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); }

/* ---------- 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 intro, so the whole deal shows on the screen */
  /* no text, 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;
  }

  .bfh__image { order: -1; height: 200px; }
  .bfh__image img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  .bfh__body { gap: 10px; padding: 2px 6px 6px; }
  /* no "X kr. under årets laveste pris" pill, so the card is lower; the line with the year's lowest price stays */
  .bfh__below { display: none; }
  .bfh__heading { gap: 4px; }
  .bfh__meta { font-size: 14px; }
  .bfh__name { font-size: 24px; line-height: 26px; height: 52px; }
  .bfh__low { font-size: 14px; line-height: 20px; }
  .bfh__price-row { height: 38px; }
  .bfh__amount { font-size: 30px; }
  .bfh__rrp { display: none; }
  .bfh__strip { 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 */
  .hero__strip-head,
  .hero__strip { 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; }
}