/*
 * Harvey Norman design tokens.
 *
 * Values sampled from the capture in capture/ — fridge.tokens.json,
 * home.tokens.json, fridge.html and the fridge.desktop.png reference shot.
 *
 * Fonts: the live site renders body copy in `rotunda-variable`, a Typekit
 * (Adobe Fonts) family served from use.typekit.net. The capture did not pull
 * down any font binaries, and the only font stylesheet captured
 * (assetMap: fonts.googleapis.com -> /mockasset/harvey-norman/assets/css) is Google's Lato CSS whose
 * src URLs still point at remote fonts.gstatic.com. Since @font-face src must
 * reference local /mockasset/harvey-norman/assets/... paths only, there is no local file to point at,
 * so there are deliberately no @font-face rules here — --hn-font falls back to
 * the closest websafe humanist sans stack. Add @font-face here if the rotunda
 * woff2 files are ever captured to /mockasset/harvey-norman/assets/.
 */

:root {
  /* Typography — body/h1 from fridge.tokens.json + home.tokens.json */
  --hn-font: rotunda-variable, 'Segoe UI', Tahoma, Verdana, sans-serif;
  --hn-font-size: 16px;
  --hn-font-size-compact: 14px;
  --hn-h1-size: 43.2px;
  --hn-h1-weight: 450;

  /* Core palette */
  --hn-navy: #293e52;        /* hero panel bg — rgb(41, 62, 82) */
  --hn-navy-dark: #1f2f36;
  --hn-navy-deep: #2c3944;
  --hn-navy-light: #3f5870;
  --hn-text: #373737;        /* body copy — rgb(55, 55, 55) */
  --hn-text-muted: #363636;
  --hn-heading: #293e52;     /* h1 colour matches the navy */

  /* Accents */
  --hn-sale: #cb1829;        /* sale/clearance red */
  --hn-promo: #e60023;       /* promo flash red */
  --hn-link: #0055a3;        /* link / CTA blue */
  --hn-link-dark: #003a70;
  --hn-link-light: #467db6;
  --hn-yellow: #f8b100;      /* rating / highlight — rgb(248, 177, 0) */

  /* Neutrals */
  --hn-grey-100: #f2f6fa;
  --hn-grey-200: #f0f0f0;    /* rgb(240, 240, 240) */
  --hn-grey-300: #efefef;
  --hn-grey-400: #dde3e6;
  --hn-grey-500: #d9d9d9;    /* rules / borders */
  --hn-white: #ffffff;

  /* Layout — .container tops out at 1280px on desktop (fridge.html) */
  --hn-page-max: 1280px;
  --hn-gutter: 15px;

  /* Spacing */
  --hn-space-xs: 4px;
  --hn-space-sm: 8px;
  --hn-space-md: 16px;
  --hn-space-lg: 24px;
  --hn-space-xl: 40px;

  /* Radii */
  --hn-radius-sm: 2px;
  --hn-radius: 3px;
  --hn-radius-md: 4px;
  --hn-radius-lg: 16px;
  --hn-radius-pill: 30px;
}

/* Reset (task-001) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--hn-font);
  font-size: var(--hn-font-size);
  color: var(--hn-text);
}

/* HN page width + gutters. Mirrors the site's responsive .container steps. */
.hn-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hn-gutter);
  padding-right: var(--hn-gutter);
}

@media (min-width: 768px) {
  .hn-container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .hn-container {
    max-width: 970px;
  }
}

@media (min-width: 1280px) {
  .hn-container {
    max-width: var(--hn-page-max);
  }
}

/* ==========================================================================
   Site chrome — header + footer (task-006)
   Desktop (~1440px) is the target; mobile refinement lands in task-014.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */

.hn-header {
  background: var(--hn-white);
}

.hn-header-top {
  border-bottom: 1px solid var(--hn-grey-500);
}

.hn-header-top-inner {
  display: flex;
  align-items: center;
  gap: var(--hn-space-lg);
  padding-top: 14px;
  padding-bottom: 14px;
}

.hn-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.hn-logo img {
  display: block;
  width: 200px;
  height: auto;
}

/* Search is inert — styled to match the capture but wired to nothing. */
.hn-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto;
}

.hn-search-input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 16px;
  font-family: inherit;
  font-size: var(--hn-font-size-compact);
  color: var(--hn-text);
  background: var(--hn-grey-200);
  border: 1px solid var(--hn-grey-500);
  border-radius: var(--hn-radius-pill);
  outline: none;
}

.hn-search-input::placeholder {
  color: #767676;
}

.hn-search-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  line-height: 0;
  pointer-events: none;
}

.hn-header-icons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--hn-space-lg);
}

.hn-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hn-space-xs);
  font-size: 12px;
  color: var(--hn-navy-deep);
  text-decoration: none;
}

.hn-icon-link:hover {
  color: var(--hn-link);
}

.hn-icon-label {
  white-space: nowrap;
}

.hn-cart-icon-wrap {
  position: relative;
  line-height: 0;
}

.hn-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: var(--hn-white);
  text-align: center;
  background: var(--hn-sale);
  border-radius: 8px;
}

/* --- Nav bar ------------------------------------------------------------ */

.hn-navbar {
  background: var(--hn-white);
  border-bottom: 1px solid var(--hn-grey-500);
}

.hn-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hn-nav-left,
.hn-nav-right {
  display: flex;
  align-items: center;
  gap: var(--hn-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-nav-left a,
.hn-nav-right a,
.hn-nav-shop {
  display: inline-flex;
  align-items: center;
  gap: var(--hn-space-sm);
  padding: 12px 0;
  font-size: var(--hn-font-size-compact);
  color: var(--hn-navy-deep);
  text-decoration: none;
}

.hn-nav-shop {
  font-weight: 700;
}

.hn-nav-left a:hover,
.hn-nav-right a:hover,
.hn-nav-shop:hover {
  color: var(--hn-link);
}

/* --- Footer ------------------------------------------------------------- */

.hn-footer {
  padding: var(--hn-space-xl) 0 var(--hn-space-lg);
  font-size: var(--hn-font-size-compact);
  color: var(--hn-white);
  background: var(--hn-navy);
}

.hn-footer-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--hn-space-lg);
}

.hn-footer-title {
  margin: 0 0 var(--hn-space-md);
  font-size: var(--hn-font-size-compact);
  font-weight: 700;
  text-transform: uppercase;
}

.hn-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-footer-links li {
  margin-bottom: var(--hn-space-sm);
}

.hn-footer-links a {
  color: var(--hn-white);
  text-decoration: none;
  opacity: 0.85;
}

.hn-footer-links a:hover {
  text-decoration: underline;
  opacity: 1;
}

.hn-footer-social {
  display: flex;
  gap: var(--hn-space-md);
  margin: 0 0 var(--hn-space-lg);
  padding: 0;
  list-style: none;
}

.hn-footer-social a {
  color: var(--hn-white);
  line-height: 0;
  opacity: 0.85;
}

.hn-footer-social a:hover {
  opacity: 1;
}

.hn-footer-shielded {
  display: block;
  height: auto;
}

.hn-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hn-space-lg);
  margin-top: var(--hn-space-xl);
  padding-top: var(--hn-space-lg);
  border-top: 1px solid var(--hn-navy-light);
}

.hn-footer-payments {
  display: flex;
  align-items: center;
  gap: var(--hn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-footer-payments img {
  display: block;
  height: 24px;
  width: auto;
}

.hn-footer-copy {
  margin: 0;
  font-size: 12px;
  opacity: 0.75;
}

@media (max-width: 991px) {
  .hn-footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .hn-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Hero banner (task-007)
   Split banner: full-bleed photo left, navy copy panel right. The CTA is a
   slot — pyfoi's input lands there in task-012, so no button is styled here.
   ========================================================================== */

.hn-hero {
  display: flex;
  align-items: stretch;
  background: var(--hn-navy);
}

.hn-hero-media {
  flex: 1 1 50%;
  min-height: 480px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hn-hero-panel {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  padding: var(--hn-space-xl) 60px;
  background: var(--hn-navy);
}

/* Caps the measure of the copy while leaving room for a ~500px CTA control. */
.hn-hero-content {
  width: 100%;
  max-width: 560px;
}

.hn-hero-headline {
  margin: 0 0 var(--hn-space-lg);
  font-size: var(--hn-h1-size);
  font-weight: var(--hn-h1-weight);
  line-height: 1.15;
  color: var(--hn-white);
}

.hn-hero-body {
  margin: 0;
  font-size: var(--hn-font-size);
  line-height: 1.6;
  color: var(--hn-white);
}

.hn-hero-lede {
  margin: 0;
}

/* The example phrase. Quoted in the markup as well, so it still reads as an
   example if this stylesheet does not load. */
.hn-hero-example {
  font-style: italic;
  color: var(--hn-yellow);
}

/* Learn / Prioritise / Find — three fixed columns, label over caption.
   Deliberately a grid and not a wrapping flex row: the panel is too narrow for
   all three to sit on one line, and a wrapped row strands its divider at the
   start of the second line. Dividers are borders, not characters, so nothing is
   announced between the items. */
.hn-hero-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hn-space-md);
  margin: var(--hn-space-md) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--hn-font-size-compact);
  line-height: 1.4;
}

.hn-hero-steps li + li {
  border-left: 1px solid rgb(255 255 255 / 35%);
  padding-left: var(--hn-space-md);
}

/* Block, so the caption falls to its own line under the step name. */
.hn-hero-steps strong {
  display: block;
  font-weight: 700;
}

.hn-hero-cta {
  margin-top: var(--hn-space-lg);
  max-width: 500px;
}

/* The scroll-instead-of-type alternative. Deliberately the quietest thing in
   the panel — it is a fallback, not a competing call to action. */
.hn-hero-note {
  margin: var(--hn-space-md) 0 0;
  font-size: var(--hn-font-size-compact);
  color: rgb(255 255 255 / 70%);
}

/* ---------- Shop by Type ---------- */

.hn-shop-type {
  padding: var(--hn-space-xl) 0;
  border-bottom: 1px solid var(--hn-rule, #e0e0e0);
}

.hn-shop-type__heading {
  margin: 0 0 var(--hn-space-lg);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/* Eight tiles share the row evenly; the capture sizes this row at ~1185px. */
.hn-shop-type__list {
  display: flex;
  margin: 0 auto;
  padding: 0;
  max-width: 1185px;
  list-style: none;
}

.hn-shop-type__item {
  flex: 1 1 0;
}

.hn-shop-type__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px;
  text-decoration: none;
  color: inherit;
}

.hn-shop-type__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.hn-shop-type__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Facet sidebar ---------- */

.hn-facets {
  width: 260px;
  flex: 0 0 260px;
  font-size: 13px;
}

.hn-facets__refine {
  display: block;
  margin-bottom: var(--hn-space-md);
  padding: 10px 14px;
  background: var(--hn-navy);
  color: var(--hn-white);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.hn-facets__clear {
  display: block;
  margin-bottom: var(--hn-space-md);
  color: inherit;
  text-decoration: underline;
}

.hn-facet {
  border-top: 1px solid var(--hn-rule, #e0e0e0);
}

.hn-facet__heading {
  padding: 12px 0;
  font-weight: 700;
}

.hn-facet__body {
  padding-bottom: 12px;
}

.hn-facet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-facet__variant {
  margin-bottom: 6px;
}

.hn-facet__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hn-facet__variant-name {
  flex: 1 1 auto;
}

.hn-facet__count {
  color: #767676;
}

.hn-facet__toggle {
  display: inline-block;
  margin-top: 8px;
  color: inherit;
  text-decoration: underline;
}

/* Inert stand-in for the jQuery UI range slider in the capture. */
.hn-facet__slider {
  position: relative;
  margin: 10px 6px 18px;
  height: 6px;
  border-radius: 3px;
  background: #e0e0e0;
}

.hn-facet__slider-range {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--hn-navy);
}

.hn-facet__slider-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid #b0b0b0;
  border-radius: 50%;
  background: var(--hn-white, #fff);
  transform: translate(-50%, -50%);
}

.hn-facet__slider-handle--min {
  left: 0;
}

.hn-facet__slider-handle--max {
  left: 100%;
}

.hn-facet__slider-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hn-facet__slider-input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid #d0d0d0;
  font: inherit;
}

.hn-facet__unit,
.hn-facet__dash {
  color: #767676;
}

.hn-facet__update {
  margin-left: auto;
  padding: 4px 10px;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  font-weight: 700;
}

/* ==========================================================================
   Product grid + cards (task-009)
   ========================================================================== */

.hn-grid-section {
  flex: 1 1 auto;
  min-width: 0;
}

.hn-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hn-space-md);
  padding-bottom: var(--hn-space-md);
  border-bottom: 1px solid var(--hn-rule, #e0e0e0);
}

.hn-grid-count {
  margin: 0;
  font-size: 13px;
}

.hn-grid-sort {
  display: flex;
  align-items: center;
  gap: var(--hn-space-sm);
  font-size: 13px;
}

.hn-grid-sort__label {
  color: #767676;
  white-space: nowrap;
}

.hn-grid-sort__select {
  padding: 6px 10px;
  font: inherit;
  color: var(--hn-text);
  background: var(--hn-white);
  border: 1px solid var(--hn-grey-500);
  border-radius: var(--hn-radius-sm);
}

.hn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hn-space-lg);
  padding: var(--hn-space-lg) 0;
}

@media (max-width: 1279px) {
  .hn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .hn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Card --------------------------------------------------------------- */

.hn-card {
  display: flex;
  background: var(--hn-white);
  border: 1px solid var(--hn-grey-300);
}

.hn-card:hover {
  border-color: var(--hn-grey-500);
}

.hn-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.hn-card__media {
  position: relative;
  margin-bottom: 12px;
}

.hn-card__image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.hn-card__promo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hn-white);
  text-transform: uppercase;
  background: var(--hn-promo);
  border-radius: var(--hn-radius-sm);
}

.hn-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.hn-card__brand {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #767676;
  text-transform: uppercase;
}

.hn-card__name {
  margin: 0 0 var(--hn-space-sm);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--hn-text);
}

.hn-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}

.hn-card__stars {
  color: var(--hn-grey-500);
  letter-spacing: 1px;
}

.hn-card__star--on,
.hn-card__star--half {
  color: var(--hn-yellow);
}

.hn-card__star--half {
  opacity: 0.6;
}

.hn-card__reviews {
  color: #767676;
}

.hn-card__energy {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 var(--hn-space-sm);
  font-size: 11px;
  color: #767676;
}

.hn-card__energy-count {
  padding: 1px 6px;
  font-weight: 700;
  color: var(--hn-white);
  background: var(--hn-navy);
  border-radius: var(--hn-radius-sm);
}

/* Prices pin to the card foot so cards in a row line up. */
.hn-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--hn-space-sm);
  margin: auto 0 0;
  padding-top: var(--hn-space-sm);
}

.hn-card__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--hn-sale);
}

.hn-card__was {
  font-size: 13px;
  color: #767676;
  text-decoration: line-through;
}

/* Catalogue: facets left, grid right (task-011) */
.hn-hero-stack {
  position: relative;
}

.hn-catalogue {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--hn-space-lg);
  align-items: start;
  padding-top: var(--hn-space-lg);
  padding-bottom: var(--hn-space-xl);
}

@media (max-width: 900px) {
  .hn-catalogue {
    grid-template-columns: minmax(0, 1fr);
  }
}










/* ---------------------------------------------------------------------------
 * Homepage (route: _index) — bands transcribed from capture/home.desktop.png.
 * Desktop layout only; the mobile pass lands in the responsive stylesheet.
 * ------------------------------------------------------------------------ */

.hn-home {
  padding-bottom: var(--hn-space-xl);
}

/* Leadspace */
.hn-home-hero {
  background: var(--hn-white);
}

.hn-home-hero__slide {
  display: block;
}

.hn-home-hero__image {
  display: block;
  width: 100%;
  height: auto;
}

.hn-home-hero__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: var(--hn-space-sm) 0;
}

.hn-home-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hn-grey-500);
}

.hn-home-hero__dot--on {
  background: var(--hn-navy-deep);
}

/* Service strip */
.hn-homestrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hn-space-md);
  list-style: none;
  margin: var(--hn-space-lg) 0;
  padding: var(--hn-space-md);
  background: #eef4fa;
}

.hn-homestrip__link {
  display: flex;
  align-items: center;
  gap: var(--hn-space-sm);
  text-decoration: none;
  color: var(--hn-text);
}

.hn-homestrip__icon {
  width: 36px;
  height: 36px;
  flex: none;
}

.hn-homestrip__title,
.hn-homestrip__body {
  display: block;
}

.hn-homestrip__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hn-navy-deep);
}

.hn-homestrip__body {
  font-size: 12px;
  color: var(--hn-text);
}

/* Product rails */
.hn-rail {
  margin: var(--hn-space-xl) auto;
}

.hn-rail__title {
  margin: 0 0 var(--hn-space-lg);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hn-navy-deep);
}

.hn-rail__viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.hn-rail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hn-link);
  color: var(--hn-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.hn-rail__arrow--prev {
  left: -13px;
}

.hn-rail__arrow--next {
  right: -13px;
}

.hn-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.hn-rail__item {
  border-right: 1px solid var(--hn-grey-300);
}

.hn-rail__item:last-child {
  border-right: 0;
}

.hn-rail-card {
  position: relative;
  display: block;
  padding: var(--hn-space-md);
  text-decoration: none;
  height: 100%;
}

.hn-rail-card__flag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--hn-promo);
  color: var(--hn-white);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
}

.hn-rail-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 185px;
  margin-bottom: var(--hn-space-md);
}

.hn-rail-card__image {
  max-width: 100%;
  max-height: 185px;
  object-fit: contain;
}

.hn-rail-card__name {
  margin: 0 0 var(--hn-space-sm);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--hn-link);
  /* The live cards clamp long titles to two lines and ellipsise. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hn-rail-card__save {
  margin: 0 0 2px;
  font-size: 11px;
  color: var(--hn-text);
}

.hn-rail-card__prices {
  display: flex;
  align-items: center;
  gap: var(--hn-space-sm);
  margin: 0;
}

.hn-rail-card__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--hn-sale);
}

.hn-rail-card__dollar {
  font-size: 12px;
  vertical-align: super;
}

.hn-rail-card__deal {
  background: var(--hn-sale);
  color: var(--hn-white);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
}

/* Promo tiles */
.hn-promo-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  list-style: none;
  margin: var(--hn-space-xl) 0;
  padding: 0;
}

.hn-promo-tile__link {
  position: relative;
  display: block;
  height: 100%;
  background: var(--hn-link);
  color: var(--hn-white);
  text-decoration: none;
}

.hn-promo-tile__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.hn-promo-tile__body {
  padding: var(--hn-space-md);
}

.hn-promo-tile__headline {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.hn-promo-tile__sub {
  margin: 4px 0 0;
  font-size: 11px;
}

.hn-promo-tile__cta {
  margin: 4px 0 0;
  font-size: 11px;
  text-decoration: underline;
}

.hn-promo-tile__terms {
  margin: var(--hn-space-sm) 0 0;
  font-size: 7px;
  line-height: 1.4;
  opacity: 0.85;
}

.hn-promo-tile__chevron {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hn-white);
  color: var(--hn-link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

/* Our Top Brands */
.hn-brands {
  margin: var(--hn-space-xl) auto;
}

.hn-brands__title {
  margin: 0 0 var(--hn-space-lg);
  text-align: center;
  font-size: 28px;
  font-weight: var(--hn-h1-weight);
  color: var(--hn-heading);
}

.hn-brands__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--hn-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hn-brands__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background: var(--hn-grey-100);
  border-radius: 3px;
}

.hn-brands__logo {
  max-width: 60%;
  max-height: 44px;
  object-fit: contain;
}

.hn-brands__actions {
  margin-top: var(--hn-space-lg);
  text-align: center;
}

.hn-brands__cta {
  display: inline-block;
  background: var(--hn-link);
  color: var(--hn-white);
  text-decoration: none;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 3px;
}

/* Customer reviews */
.hn-reviews {
  margin: var(--hn-space-xl) auto;
}

.hn-reviews__title {
  margin: 0 0 var(--hn-space-lg);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hn-navy-deep);
}

.hn-reviews__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hn-space-sm);
  font-size: 12px;
  color: var(--hn-text);
}

.hn-reviews__stars {
  color: var(--hn-yellow);
  letter-spacing: 1px;
}

.hn-reviews__all {
  color: var(--hn-link);
  font-size: 12px;
}

.hn-reviews__powered {
  margin-left: auto;
  font-size: 9px;
  color: var(--hn-text-muted);
}

.hn-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hn-space-md);
  list-style: none;
  margin: var(--hn-space-lg) 0 0;
  padding: 0;
}

.hn-review {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hn-grey-400);
  padding: var(--hn-space-md);
  text-align: center;
}

.hn-review__body {
  margin: var(--hn-space-sm) 0 var(--hn-space-md);
  font-size: 11px;
  line-height: 1.5;
  color: var(--hn-text);
  flex: 1;
}

.hn-review__meta {
  margin: 0;
  padding-top: var(--hn-space-sm);
  border-top: 1px solid var(--hn-grey-300);
  font-size: 9px;
  color: var(--hn-text-muted);
}

.hn-reviews__actions {
  margin-top: var(--hn-space-md);
  text-align: center;
}

/* ==========================================================================
   Mobile (task-013) — transcribed from capture/fridge.mobile.png and
   capture/home.mobile.png at 390px. Desktop rules above are untouched.
   The hamburger and the Filter button render but stay inert.
   ========================================================================== */

@media (max-width: 767px) {
  /* --- Header: hamburger + condensed logo + icon cluster, search below ---- */

  .hn-header-top-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* CSS-only hamburger — the live mobile nav is a separate component we only
     reproduce the appearance of, so the trigger is a pseudo-element. */
  .hn-header-top-inner::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    color: var(--hn-navy-deep);
    background: currentColor;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }

  .hn-logo {
    margin-right: auto;
  }

  .hn-logo img {
    width: 130px;
  }

  .hn-search {
    order: 1;
    flex: 1 1 100%;
    max-width: none;
  }

  .hn-search-input {
    height: 36px;
  }

  .hn-header-icons {
    gap: var(--hn-space-md);
  }

  /* Icons only — the labels are dropped at this width. */
  .hn-icon-label {
    display: none;
  }

  /* Nav links collapse behind the hamburger. */
  .hn-navbar {
    display: none;
  }

  /* --- Hero: photo above, navy panel below ------------------------------- */

  .hn-hero {
    flex-direction: column;
  }

  .hn-hero-media {
    flex: 0 0 auto;
    min-height: 220px;
  }

  .hn-hero-panel {
    padding: var(--hn-space-lg) var(--hn-gutter) var(--hn-space-xl);
  }

  .hn-hero-content {
    max-width: none;
  }

  .hn-hero-headline {
    font-size: 26px;
    margin-bottom: var(--hn-space-md);
  }

  .hn-hero-body {
    font-size: var(--hn-font-size-compact);
  }

  /* One step per row. Three columns leave the captions too narrow to read here,
     and vertical space is the cheap axis on a phone. */
  .hn-hero-steps {
    grid-template-columns: 1fr;
    gap: var(--hn-space-xs);
  }

  .hn-hero-steps li + li {
    border-left: 0;
    padding-left: 0;
  }

  /* Back inline, so each step is a single line rather than a stack of two. */
  .hn-hero-steps strong {
    display: inline;
  }

  /* Fills the panel — the embed widget caps its own width. */
  .hn-hero-cta {
    max-width: none;
  }



  /* --- Shop by Type: wraps to a multi-row grid --------------------------- */

  .hn-shop-type {
    padding: var(--hn-space-lg) 0;
  }

  .hn-shop-type__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hn-space-md) var(--hn-space-sm);
  }

  .hn-shop-type__icon {
    width: 48px;
    height: 48px;
  }

  .hn-shop-type__label {
    font-size: 9px;
  }

  /* --- Facets: collapse to the inert "Refine" button --------------------- */

  .hn-facets {
    width: auto;
    flex: 0 0 auto;
  }

  .hn-facets__clear,
  .hn-facet {
    display: none;
  }

  /* --- Product grid: two up, per the capture ----------------------------- */

  .hn-grid {
    gap: var(--hn-space-md);
  }

  .hn-card__link {
    padding: 8px;
  }

  .hn-card__image {
    height: 140px;
  }

  .hn-card__price {
    font-size: 17px;
  }

  /* --- Homepage bands ---------------------------------------------------- */

  .hn-homestrip {
    grid-template-columns: 1fr;
  }

  .hn-promo-tiles,
  .hn-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hn-brands__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hn-brands__title {
    font-size: 22px;
  }

  /* Rails show one card; the arrows have no scroll behaviour to drive. */
  .hn-rail__track {
    grid-auto-columns: minmax(0, 100%);
  }

  .hn-rail__arrow--prev {
    left: 0;
  }

  .hn-rail__arrow--next {
    right: 0;
  }

  /* --- Footer: stacked accordion appearance (inert) ---------------------- */

  .hn-footer-cols {
    display: block;
  }

  .hn-footer-col {
    border-bottom: 1px solid var(--hn-navy-light);
  }

  .hn-footer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 14px 0;
  }

  /* Collapsed-state affordance only — nothing expands it. The social column
     stays open in the capture, so it gets neither the marker nor a border. */
  .hn-footer-title::after {
    content: '+';
    font-size: 16px;
    font-weight: 400;
    opacity: 0.75;
  }

  .hn-footer-social-col {
    border-bottom: 0;
  }

  .hn-footer-social-col .hn-footer-title::after {
    content: none;
  }

  .hn-footer-links {
    display: none;
  }

  .hn-footer-bottom {
    margin-top: var(--hn-space-lg);
  }

  .hn-footer-payments {
    flex-wrap: wrap;
    gap: var(--hn-space-sm);
  }
}