/* ==========================================================================
   ICRUSH — homepage sections
   Order matches the reference site:
   mobile category strip → hero slideshow → marquee → rating badge →
   BESTSELLER rail → GOLDEN DEALS rail → banner → TRENDING rail → banner →
   NEUHEITEN rail → 2× collection tiles → reviews carousel → trust icons →
   store timeline → SEO text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero slideshow (desktop 3840×1400 = 2.7428:1, mobile 2000×3050)
   -------------------------------------------------------------------------- */

.ic-hero {
  position: relative;
  display: block;
  background: #000;
  overflow: hidden;
}

.ic-hero__slide {
  display: none;
  position: relative;
}

.ic-hero__slide.is-selected {
  display: block;
}

.ic-hero__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.ic-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgb(24 14 6 / .12), rgb(24 14 6 / .28));
  pointer-events: none;
}

.ic-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 var(--ic-gutter);
  text-align: center;
  pointer-events: none;
}

.ic-hero__content > * {
  pointer-events: auto;
}

.ic-hero__heading {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f1dfbd;
  text-shadow: 0 2px 18px rgb(0 0 0 / .35);
}

.ic-hero__heading em {
  font-style: normal;
  color: #e2251f;
}

.ic-hero__subline {
  max-width: 34rem;
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: var(--ic-text-base);
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / .35);
}

.ic-hero__button {
  min-height: 52px;
  padding: .65rem 2.75rem;
  background: #fff;
  border-color: #fff;
  color: #1c1c1c;
}

.ic-hero__button:hover {
  background: #f2f2f2;
  border-color: #f2f2f2;
}

.ic-hero__dots {
  position: absolute;
  inset-block-end: var(--ic-gutter);
  inset-inline-end: var(--ic-gutter);
  z-index: 2;
  display: flex;
  gap: .5rem 1rem;
  color: #fff;
}

.ic-hero__dot {
  width: 6px;
  height: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ic-radius-full);
  background: currentColor;
  opacity: .4;
  cursor: pointer;
  transition: opacity .25s;
}

.ic-hero__dot[aria-current="true"] {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Mobile category strip (reference: 110px tall, 55px circles, 11px labels)
   -------------------------------------------------------------------------- */

.ic-mobile-cats {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ic-mobile-cats__viewport {
  width: 100%;
  height: 110px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ic-mobile-cats__viewport::-webkit-scrollbar {
  display: none;
}

.ic-mobile-cats__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 8px 16px 0;
  height: 110px;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.ic-mobile-cats__item {
  display: block;
  flex: 0 0 auto;
  width: max-content;
  min-width: 55px;
  text-align: center;
}

.ic-mobile-cats__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 55px;
  margin: 0 auto;
  color: inherit;
}

.ic-mobile-cats__icon {
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.ic-mobile-cats__img {
  width: 55px;
  height: 55px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.ic-mobile-cats__title {
  display: block;
  font-size: 12px;
  height: 27px;
  width: max-content;
  margin-top: 4px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 27px;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .ic-mobile-cats {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Scrolling marquee
   -------------------------------------------------------------------------- */

.ic-marquee {
  --ic-marquee-gap: 80px;
  padding-block: 16px;
  border-block-start: 1px solid rgb(var(--ic-border));
  background: rgb(var(--ic-bg));
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

@media screen and (min-width: 700px) {
  .ic-marquee {
    padding-block: 22px;
  }
}

.ic-marquee__inner {
  display: inline-flex;
  min-width: max-content;
  animation: ic-marquee-scroll 60s linear infinite;
}

.ic-marquee:hover .ic-marquee__inner {
  animation-play-state: paused;
}

.ic-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ic-marquee__item {
  margin-inline: calc(var(--ic-marquee-gap) / 2);
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .1em;
}

@keyframes ic-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Rating badge (Judge.me “Customers rate us 4.9/5 …”)
   -------------------------------------------------------------------------- */

.ic-rating-badge {
  padding-block: 1.75rem 0;
  text-align: center;
}

.ic-rating-badge a,
.ic-rating-badge__inner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--ic-text-base);
  line-height: 1.65;
  flex-wrap: wrap;
  justify-content: center;
  color: rgb(var(--ic-text) / .78);
}

.ic-rating-badge__score {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: rgb(var(--ic-text));
}

.ic-rating-badge__check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(var(--ic-text));
  color: #fff;
  display: grid;
  place-items: center;
}

.ic-rating-badge__check svg {
  width: 9px;
  height: 9px;
}

.ic-rating-badge__stars svg {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.ic-rating-badge .stars {
  color: rgb(var(--ic-text));
  font-size: 14px;
  gap: .1rem;
}

.ic-rating-badge__sep {
  width: 1px;
  height: 1.1rem;
  background: rgb(var(--ic-border));
}

.ic-rating-badge__text {
  font-size: var(--ic-text-base);
}

/* --------------------------------------------------------------------------
   Product rails
   -------------------------------------------------------------------------- */

.ic-rail {
  padding-block: var(--ic-section-spacing);
}

.ic-rail__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ic-section-stack-gap);
}

.ic-rail__heading {
  text-align: center;
  margin: 0;
}

.ic-rail__carousel-wrap {
  position: relative;
  min-width: 0;
}

.ic-rail__carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--ic-rail-card, 214px);
  min-width: 0;
  width: 100%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding-block: 0;
  justify-content: safe center;
}

.ic-rail__carousel::-webkit-scrollbar {
  display: none;
}

.ic-rail__carousel > * {
  scroll-snap-align: start;
}

/* mobile carousel: full-bleed, 65% cards like the reference theme */
@media screen and (max-width: 699px) {
  .ic-rail__stack {
    gap: 1.5rem;
  }

  .ic-rail__carousel-wrap {
    margin-inline: calc(-1 * var(--ic-gutter));
  }

  .ic-rail__carousel {
    --ic-rail-card: min(300px, 65vw);
    padding-inline: var(--ic-gutter);
    gap: 5px;
  }

  .ic-rail__heading {
    padding-inline: var(--ic-gutter);
  }
}

@media screen and (min-width: 700px) {
  .ic-rail__carousel {
    --ic-rail-card: calc((100% - 11 * 12px) / 12);
  }
}

/* the desktop rail shows 6 cards per view at 1440 (reference) */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .ic-rail__carousel {
    --ic-rail-card: calc((100% - 3 * 12px) / 4);
  }
}

@media screen and (min-width: 1400px) {
  .ic-rail__carousel {
    --ic-rail-card: calc((100% - 5 * 12px) / 6);
  }
}

/* “MORE” button below each rail (reference homepage) */
.ic-rail__more {
  display: flex;
  justify-content: center;
  margin-block-start: 2.25rem;
}

.ic-rail__more .button {
  min-width: 6rem;
  min-height: 44px;
  padding: .65rem 1.5rem;
}

/* floating arrows */
.ic-rail__arrow {
  position: absolute;
  top: calc(50% - 1.5625rem);
  z-index: 2;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateY(-10px);
}

.ic-rail__arrow--prev { inset-inline-start: -1.5rem; }
.ic-rail__arrow--next { inset-inline-end: -1.5rem; }

.ic-rail__carousel-wrap:hover .ic-rail__arrow:not([disabled]) {
  opacity: 1;
  transform: translateY(0);
}

.ic-rail__arrow[disabled] {
  display: none;
}

@media not screen and (pointer: fine) {
  .ic-rail__arrow {
    display: none;
  }
}

@media screen and (max-width: 699px) {
  .ic-rail__arrow {
    display: none;
  }
}

/* image-only banner slideshow */
.ic-banner {
  display: block;
  background: #000;
}

.ic-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Collection tiles (2 rows × 4, 3:4 images)
   -------------------------------------------------------------------------- */

.ic-tiles {
  padding-block: 2rem;
}

@media screen and (min-width: 1000px) {
  .ic-tiles {
    padding-block: 3rem;
  }
}

.ic-tiles__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.ic-tiles__item {
  --ic-tiles-per-row: 2;
  flex: 0 0 calc(100% / var(--ic-tiles-per-row) - 1.5rem * (var(--ic-tiles-per-row) - 1) / var(--ic-tiles-per-row));
  overflow: hidden;
  background: #f5f5f5;
}

.ic-tiles__item img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .6s ease;
}

.ic-tiles__item:hover img {
  transform: scale(1.03);
}

@media screen and (min-width: 700px) {
  .ic-tiles__item {
    --ic-tiles-per-row: 2;
  }
}

@media screen and (min-width: 1150px) {
  .ic-tiles__grid {
    gap: .3rem;
  }

  .ic-tiles__item {
    --ic-tiles-per-row: 4;
    flex-basis: calc(100% / 4 - .3rem * 3 / 4);
  }
}

@media screen and (max-width: 699px) {
  .ic-tiles__grid {
    gap: .3rem;
  }

  .ic-tiles__item {
    flex-basis: calc(100% / 2 - .3rem / 2);
  }
}

/* second tiles row has no extra top gap (they are two sections in the reference) */
.ic-tiles + .ic-tiles {
  padding-block-start: 0;
}

/* --------------------------------------------------------------------------
   Reviews carousel
   -------------------------------------------------------------------------- */

.ic-reviews {
  border-block-start: 1px solid rgb(var(--ic-border));
}

.ic-reviews__title {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
  padding-block-end: 2rem;
}

.ic-reviews__rating-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--ic-text-sm);
}

.ic-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 85vw);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding-block-end: .5rem;
}

.ic-reviews__track::-webkit-scrollbar { display: none; }

.ic-review-card {
  scroll-snap-align: start;
  border: 1px solid rgb(var(--ic-border));
  padding: 1.5rem;
  display: grid;
  gap: .75rem;
  align-content: start;
  background: #fff;
}

.ic-review-card__title {
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: var(--ic-text-base);
  letter-spacing: .1em;
}

.ic-review-card__text {
  font-size: var(--ic-text-base);
  line-height: 1.65;
  color: rgb(var(--ic-text) / .8);
}

.ic-review-card__author {
  font-size: var(--ic-text-sm);
  color: rgb(var(--ic-text) / .55);
}

.ic-reviews__dots {
  display: none;
}

/* --------------------------------------------------------------------------
   Trust icons
   -------------------------------------------------------------------------- */

.ic-trust {
  padding-block: 2rem;
}

.ic-trust__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem;
}

.ic-trust__item {
  flex-basis: min(18.75rem, calc(100% / 2 - .75rem));
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.ic-trust__item img,
.ic-trust__item svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ic-trust__label {
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: var(--ic-text-h6);
  line-height: 1.7;
  letter-spacing: .1em;
}

@media screen and (min-width: 700px) {
  .ic-trust__grid {
    gap: 2.5rem 1.5rem;
  }
}

@media screen and (min-width: 1000px) {
  .ic-trust__item {
    flex-basis: min(18.75rem, calc(100% / 4 - 2.8125rem));
  }
}

/* --------------------------------------------------------------------------
   Store timeline
   -------------------------------------------------------------------------- */

.ic-store {
  padding-block: var(--ic-section-spacing);
}

.ic-store__grid {
  display: grid;
  gap: 0;
}

.ic-store__image {
  display: grid;
  align-content: start;
}

.ic-store__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.ic-store__content {
  display: grid;
  place-content: center;
  gap: .75rem;
  padding: var(--ic-gutter);
  text-align: center;
}

.ic-store__content .h2 { margin: 0; }
.ic-store__content p { line-height: 1.65; }

@media screen and (max-width: 699px) {
  .ic-store__grid {
    position: relative;
    display: block;
  }

  .ic-store__grid:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .4);
    pointer-events: none;
  }

  .ic-store__image img {
    aspect-ratio: 3 / 2;
  }

  .ic-store__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: #fff;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 3.75rem var(--ic-gutter);
    text-align: center;
  }
}

@media screen and (min-width: 700px) {
  .ic-store__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--ic-container-md);
    margin-inline: auto;
  }

  .ic-store__content {
    align-self: end;
    text-align: start;
    place-content: end start;
  }
}

.ic-store__nav {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  column-gap: 2.5rem;
  margin-block-start: var(--ic-section-stack-gap);
}

.ic-store__nav button {
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: var(--ic-text-h4);
  letter-spacing: .1em;
  opacity: .65;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.ic-store__nav button[aria-current="true"] {
  opacity: 1;
}

.ic-store__nav button[aria-current="true"]:after {
  content: "";
  position: absolute;
  inset-block-end: -.5rem;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   SEO rich text
   -------------------------------------------------------------------------- */

.ic-seo {
  padding-block: var(--ic-section-spacing);
}

.ic-seo .prose {
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
  color: rgb(var(--ic-text) / .8);
}

.ic-seo .prose h2 {
  font-family: var(--ic-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-block-end: 1rem;
  color: rgb(var(--ic-text));
}

.ic-seo .prose p + p {
  margin-top: 1rem;
}

.ic-seo .prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* reduced motion: no marquee animation */
@media (prefers-reduced-motion: reduce) {
  .ic-marquee__inner { animation: none; }
}

/* Mobile: keep the campaign headline inside the viewport (no clipping). */
@media (max-width: 480px) {
  .ic-hero__heading {
    font-size: 24px;
    letter-spacing: .06em;
    line-height: 1.15;
    white-space: normal;
    max-width: 100%;
    padding-inline: 8px;
  }
  .ic-hero__heading em {
    font-size: 1em;
  }
}