/**
 * Homepage layout and section-specific styles (Figma 114:11817 / 365:20886).
 * Sections are 48px apart on mobile and 64px from 1024px.
 */
/* minmax(0, 1fr) everywhere a carousel sits in a grid: grid items default to
   min-width: auto and would otherwise grow to the track's full scroll width. */
.l-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  padding-block: var(--space-4) var(--space-16);
}

.l-home:focus {
  outline: none;
}

.l-home__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* Hero */
.c-hero__viewport {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.c-hero__slide {
  inline-size: 100%;
}

.c-hero__link {
  display: block;
}

.c-hero__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1276 / 408;
  object-fit: cover;
}

.c-hero__dots {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: var(--space-4);
}

.no-js .c-hero__dots {
  display: none;
}

.c-hero__dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-carousel-dot);
  opacity: 0.5;
  cursor: pointer;
}

.c-hero__dot[aria-current="true"] {
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--color-carousel-dot-active);
  opacity: 1;
}

/* Characters */
.c-characters__carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.c-characters__track {
  grid-row: 1;
  grid-column: 2;
  justify-content: safe center;
  gap: var(--space-2);
}

.c-characters .c-carousel__arrow--prev {
  grid-row: 1;
  grid-column: 1;
}

.c-characters .c-carousel__arrow--next {
  grid-row: 1;
  grid-column: 3;
}

.c-characters__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.c-characters__image {
  inline-size: 5rem;
  block-size: 5rem;
  object-fit: contain;
  transition: transform var(--duration-fast) var(--easing-standard);
}

.c-characters__link:hover .c-characters__image {
  transform: scale(1.05);
}

/* Sale */
.c-sale__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-page-50);
  box-shadow: var(--shadow-panel);
}

/* Mobile (Figma 365:23842): one centered row — title, timer, ٪, "see more". */
.c-sale__intro {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

.c-sale__title {
  order: 1;
}

.c-sale__intro .c-countdown {
  order: 2;
}

.c-sale__symbol {
  order: 3;
}

.c-sale__more {
  order: 4;
}

.c-sale__symbol,
.c-sale__title {
  margin: 0;
  color: var(--color-error-500);
  font-weight: var(--font-weight-bold);
}

.c-sale__symbol {
  font-family: var(--font-family-caption);
  font-size: var(--font-size-xl);
  line-height: 1;
}

.c-sale__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-l);
  line-height: var(--line-height-l);
  white-space: nowrap;
}

/* Mobile (365:23845): a text link; the filled button returns at 1024px. */
.c-sale__more {
  margin-inline-start: auto;
  padding-inline: 0;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  background: none;
  box-shadow: none;
  color: var(--color-brand);
}

.c-sale__more:hover {
  background: none;
  color: var(--color-brand-hover);
}

.c-countdown {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--color-error-500);
  direction: ltr;
}

.c-countdown__unit {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-section-50);
  box-shadow: var(--shadow-chip);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.c-countdown__separator {
  inline-size: var(--space-2);
  font-family: var(--font-family-caption);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.c-sale__track {
  gap: var(--space-4);
  padding-inline: var(--space-4);
  scroll-padding-inline: var(--space-4);
}

.c-sale__item {
  inline-size: 12.9375rem;
}

.c-sale .c-carousel__arrow--float {
  display: none;
}

/* Bestsellers */
.c-bestsellers__slide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  inline-size: 100%;
}

.c-bestsellers__text {
  display: grid;
  flex: 1;
  justify-items: start;
  gap: var(--space-1);
  color: var(--color-text-heading);
}

.c-bestsellers__text .c-button {
  justify-self: end;
}

.c-bestsellers__title {
  margin: 0;
  font-family: var(--font-family-title);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-l);
}

.c-bestsellers__excerpt {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.c-bestsellers__text .c-button--lg {
  padding: 0.25rem var(--space-4);
  font-size: var(--font-size-s);
}

.c-bestsellers__image {
  flex: none;
  inline-size: 6.75rem;
  block-size: 6.75rem;
  object-fit: cover;
}

/* Mobile relies on swipe + progress dots; arrows return at 1024px. */
.c-bestsellers .c-carousel__arrow--float {
  display: none;
}

.c-bestsellers .c-carousel__arrow--prev {
  inset-inline-start: 0;
}

.c-bestsellers .c-carousel__arrow--next {
  inset-inline-end: 0;
}

/* Newest */
.c-newest__list {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.c-newest__list > li {
  flex: none;
  inline-size: 11.40625rem;
  scroll-snap-align: start;
}

/* Collections */
.c-collections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-collections__item--wide {
  grid-column: span 2;
}

/* Important links */
.c-links__grid {
  display: grid;
  gap: var(--space-4);
}

/* Features */
.c-features__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-banner-blue-100);
  list-style: none;
}

.c-features__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.c-features__icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 1px solid var(--color-banner-blue-900);
  border-radius: var(--radius-xl);
}

.c-features__text {
  display: grid;
  gap: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.c-features__title {
  font-weight: var(--font-weight-bold);
}

.c-features__text a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .c-features__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .c-features__item {
    flex-direction: column;
    text-align: center;
  }

  .c-collections__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .c-links__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .c-links__grid > :nth-child(2) {
    border-inline: 1px solid var(--color-border-disabled);
  }
}

@media (min-width: 1024px) {
  .l-home {
    gap: var(--space-16);
    padding-block-start: var(--space-8);
  }

  .l-home__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .c-characters__image {
    inline-size: 11.625rem;
    block-size: 11.625rem;
  }

  .c-sale__panel {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 0;
    padding-block: var(--space-6);
  }

  .c-sale__intro {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding-inline: var(--space-6);
  }

  .c-sale__symbol,
  .c-sale__title,
  .c-sale__intro .c-countdown,
  .c-sale__more {
    order: 0;
  }

  .c-sale__symbol {
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
  }

  .c-sale__title {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
  }

  .c-countdown__unit {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--font-size-l);
  }

  .c-countdown__separator {
    font-size: var(--font-size-2xl);
  }

  .c-sale__more,
  .c-sale__more:hover {
    padding-inline: var(--space-5);
    font-size: var(--font-size-s);
    background: var(--color-error-500);
    box-shadow: var(--shadow-primary-sm);
    color: var(--color-page-50);
  }

  .c-sale__more:hover {
    background: var(--color-error-600);
  }

  .c-sale__more {
    inline-size: 10rem;
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
  }

  .c-sale__item {
    inline-size: 18.875rem;
  }

  .c-sale .c-carousel__arrow--float {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
  }

  .c-bestsellers .c-carousel__arrow--float {
    display: grid;
  }

  .c-bestsellers__title {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
  }

  .c-bestsellers__excerpt {
    margin-block-end: 0;
    font-size: var(--font-size-l);
    line-height: var(--line-height-l);
  }

  .c-bestsellers__text .c-button--lg {
    padding: 0.6875rem 1.625rem;
    font-size: var(--font-size-m);
  }

  .c-bestsellers__image {
    inline-size: 12.125rem;
    block-size: 12.125rem;
  }

  .c-newest__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .c-newest__list > li {
    inline-size: auto;
  }
}