@charset "utf-8";

.hnf-inpage-nav { margin-block-start: 1rem; }

.hnf-inpage-nav__card { display: flex; flex-direction: column; align-items: center; padding-block: 0.5rem; background-color: rgb(var(--colour-neutral-2, 245, 245, 245)); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0); height: 100%; width: 135px; }

@media (min-width: 56.25em) {
  .hnf-inpage-nav__card { width: 150px; }
}

.hnf-inpage-nav__card:hover { border: 1px solid rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17)); }

.hnf-inpage-nav__card .hnf-inpage-nav__imagebox { width: 80px; height: 80px; border-radius: var(--product-image-radius-s, 4px); overflow: hidden; margin-block-end: 0.5rem; }

@media (min-width: 56.25em) {
  .hnf-inpage-nav__card .hnf-inpage-nav__imagebox { margin-block-end: 0.75rem; }
}

.hnf-inpage-nav__card .hnf-inpage-nav__imagebox.hnf-inpage-nav__imagebox--loading img { display: none; }

.hnf-inpage-nav__card .hnf-inpage-nav__imagebox img { display: block; width: 80px; height: 80px; scale: var(--product-image-transform, none); object-fit: cover; mix-blend-mode: var(--product-image-mix-blend-mode, multiply); }

.hnf-inpage-nav__card--landscape { padding-block-start: 0px; }

.hnf-inpage-nav__card--landscape .hnf-inpage-nav__imagebox { width: 135px; height: 76px; margin-block-end: 1.25rem; }

.hnf-inpage-nav__card--landscape .hnf-inpage-nav__imagebox img { width: 135px; height: 76px; border-radius: 4px 4px 0px 0px; scale: none; }

@media (min-width: 56.25em) {
  .hnf-inpage-nav__card--landscape .hnf-inpage-nav__imagebox { width: 150px; height: 84px; margin-block-end: 1rem; }
  .hnf-inpage-nav__card--landscape .hnf-inpage-nav__imagebox img { width: 150px; height: 84px; }
}

.hnf-inpage-nav__card .hnf-skeleton { margin-block-end: 0.75rem; }

.hnf-inpage-nav__label { overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.5; color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); width: 120px; }

@media (min-width: 56.25em) {
  .hnf-inpage-nav__label { width: 135px; }
}

.hnf-inpage-nav__icon { width: 56px; height: 56px; border-radius: 64px; background-color: rgb(var(--colour-neutral-1, 255, 255, 255)); display: flex; justify-content: center; align-items: center; margin-block: 16px; }

@media (min-width: 56.25em) {
  .hnf-inpage-nav__icon { margin-block: 18px; }
}