/* ==========================================================================
   Homepage
   Hero slider, category tiles, promotional band, product grids.

   The slider is a CSS scroll-snap track: no JS is required to lay it out or
   to show the first slide, so it degrades to a usable, scrollable carousel
   even if JavaScript fails.
   ========================================================================== */

.homepage {
  padding-bottom: var(--space-8);
}

/* ==========================================================================
   Hero slider
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-primary-dark);
  overflow: hidden;
}

/* Track. scroll-snap does the layout; JS only toggles a class to move it. */
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide the native scrollbar - the dots below are the affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.hero-track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-track {
    scroll-behavior: auto;
  }
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  /* Caption is centred horizontally (see .hero-content) and anchored to the
     bottom of the panel rather than floating in the middle. */
  align-items: flex-end;
  isolation: isolate;
  /* Fixed, intentional heights per breakpoint rather than a single ratio, so
     text never collides with the image on narrow screens. */
  min-height: 380px;
}

@media (min-width: 768px) {
  .hero-slide {
    min-height: 440px;
  }
}

@media (min-width: 1200px) {
  .hero-slide {
    min-height: 500px;
  }
}

/* Background image layer. Kept as a sibling element rather than a background
   on the slide so it can be lazy-loaded and given intrinsic dimensions. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Imagery must not fight the text, so knock it back slightly. */
  filter: saturate(0.95);
}

/* Scrim: a restrained vertical wash so white text is always readable without
   the image being hidden behind a heavy block of colour. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(47, 37, 40, 0.34) 0%,
    rgba(111, 44, 58, 0.52) 55%,
    rgba(47, 37, 40, 0.66) 100%
  );
}

/* Slides without an image still get the brand colour, just a touch lighter. */
.hero-slide--no-media {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
}

.hero-slide--no-media::after {
  background: linear-gradient(
    to bottom,
    rgba(47, 37, 40, 0.18) 0%,
    rgba(47, 37, 40, 0.34) 100%
  );
}

.hero-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  /* Reserve the strip the arrows and dots occupy. The controls are absolutely
     positioned at the bottom of .hero, so without this the caption would end
     up underneath them once it moved down. 42px is .hero-arrow's height. */
  padding-bottom: calc(var(--space-5) + 42px + var(--space-4));
}

/* No controls to clear on a single-slide hero. */
.hero--single .hero-inner {
  padding-bottom: var(--space-7);
}

.hero-content {
  /* Centred rather than start-aligned, so the tag, title, subtitle and
     buttons all sit on one axis in the middle of the slide. */
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.9em;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(2px);
}

.hero-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.hero-subtitle {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.75;
  /* Auto side margins centre the capped measure under a centred title; the
     text itself is centred by .hero-content's text-align. */
  margin: 0 auto var(--space-5);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* Whole slide is clickable when it has a link. The anchor is a sibling of
   .hero-inner so the text stays selectable and the buttons remain real links
   with their own hrefs. */
.hero-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide:has(.hero-link-overlay) .hero-content {
  position: relative;
  z-index: 1;
}

.hero-slide:has(.hero-link-overlay) .hero-content a {
  position: relative;
  z-index: 2;
}

/* --- Controls ----------------------------------------------------------- */

.hero-controls {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-5);
  z-index: 3;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.hero-arrow {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background-color: rgba(47, 37, 40, 0.28);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
  backdrop-filter: blur(4px);
}

.hero-arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.hero-arrow:active {
  transform: scale(0.94);
}

.hero-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Chevrons are drawn as rotated bars so they can be mirrored with a single
   rule in rtl.css, unlike a glyph whose shape is baked into the font. */
.hero-arrow .hero-arrow-icon {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
}

.hero-arrow--prev .hero-arrow-icon {
  transform: rotate(-135deg);
}

.hero-arrow--next .hero-arrow-icon {
  transform: rotate(45deg);
}

[dir="rtl"] .hero-arrow--prev .hero-arrow-icon {
  transform: rotate(45deg);
}

[dir="rtl"] .hero-arrow--next .hero-arrow-icon {
  transform: rotate(-135deg);
}

/* Dots: a real tablist so they are keyboard reachable and announced. */
.hero-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), width var(--transition),
    border-color var(--transition-fast);
}

.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-dot[aria-selected="true"] {
  background-color: #fff;
  border-color: #fff;
  width: 26px;
}

.hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* A textual slide counter for screen readers and small screens. */
.hero-status {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .hero-arrow {
    display: none; /* dots + swipe are enough on a phone */
  }

  .hero-controls {
    justify-content: center;
    bottom: var(--space-4);
  }

  .hero-title {
    font-size: var(--font-size-xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-inner {
    padding: var(--space-6) var(--space-4);
    /* On a phone the arrows are hidden and only the dots remain, so the strip
       to clear is much shorter. */
    padding-bottom: calc(var(--space-4) + 10px + var(--space-4));
  }

  .hero--single .hero-inner {
    padding-bottom: var(--space-6);
  }
}

/* A single slide gets no chrome at all. */
.hero--single .hero-controls {
  display: none;
}

/* ==========================================================================
   Generic homepage section
   ========================================================================== */

.home-section {
  margin-top: var(--section-gap);
}

.home-section:first-child {
  margin-top: 0;
}

.home-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.home-section__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.015em;
  position: relative;
  padding-inline-start: var(--space-4);
}

/* A short burgundy rule to the side of the heading: a light, recurring cue. */
.home-section__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.1em;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}

.home-section__subtitle {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
}

.home-section__link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.home-section__link:hover {
  color: var(--color-primary-dark);
}

/* The arrow must point away from the reading direction, so mirror it. */
.home-section__link .link-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

[dir="rtl"] .home-section__link .link-arrow {
  transform: rotate(135deg);
}

.home-section__link:hover .link-arrow {
  transform: translateX(3px);
}

[dir="rtl"] .home-section__link:hover .link-arrow {
  transform: translateX(-3px);
}

/* ==========================================================================
   Category tiles
   ========================================================================== */

.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.category-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition),
    color var(--transition), transform var(--transition);
}

.category-tile:hover,
.category-tile:focus {
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .category-tile:hover {
    transform: none;
  }
}

.category-tile__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background-color var(--transition), color var(--transition);
}

.category-tile:hover .category-tile__icon {
  background-color: var(--color-primary);
  color: #fff;
}

.category-tile__name {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* ==========================================================================
   Promotional band
   ========================================================================== */

.promo-band {
  background-color: var(--color-primary-softer);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.promo-band__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.promo-band__text {
  color: var(--color-muted);
  margin: 0 auto var(--space-4);
  max-width: 40rem;
}

.promo-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ==========================================================================
   Trust / value props
   ========================================================================== */

.value-props {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 576px) {
  .value-props {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .value-props {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.value-prop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.value-prop__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.value-prop__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 2px;
}

.value-prop__text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: var(--section-gap);
  padding: var(--space-7) 0 var(--space-5);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-7);
  }
}

.site-footer__brand {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__about {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin: 0;
  max-width: 26rem;
  line-height: 1.75;
}

.site-footer__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: var(--space-2);
}

.site-footer__list a {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__list a:hover,
.site-footer__list a:focus {
  color: var(--color-primary);
  text-decoration: none;
}

.site-footer__bar {
  max-width: var(--container-max);
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.site-footer__payment {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-border-strong);
  font-size: 1.1rem;
}