/* ============================================================
   PRODUCTS — MODERN SECTION
   ============================================================ */

.sa-products {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}


.sa-products-wrap {
  position: relative;
  z-index: 2;
}



/* ============================================================
   DOT FIELD
   Same visual language as hero
   ============================================================ */

.sa-products-dots {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .14;

  background-image:
    radial-gradient(
      circle,
      currentColor .7px,
      transparent .8px
    );

  background-size:
    31px
    31px;

  background-position:
    0 0;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
}



/* ============================================================
   VERY SUBTLE ACCENT ATMOSPHERE
   ============================================================ */

.sa-products-ambient {
  position: absolute;

  z-index: 0;

  top: -430px;
  left: 50%;

  width: 900px;
  height: 720px;

  transform:
    translateX(-50%);

  pointer-events: none;

  opacity: .22;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        currentColor 10%,
        transparent
      )
      0%,

      color-mix(
        in srgb,
        currentColor 3%,
        transparent
      )
      37%,

      transparent
      70%
    );
}



/* ============================================================
   PRODUCTS HEADER
   ============================================================ */

.sa-products-head {
  position: relative;

  width:
    min(100%, 820px);

  margin-bottom:
    clamp(40px, 5vw, 64px);

  animation:
    saProductsHeadEnter
    .5s
    cubic-bezier(.2,.75,.25,1)
    both;
}


.sa-products-head--center {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


.sa-products-head--left {
  margin-right: auto;

  text-align: left;
}



/* ============================================================
   MICRO META
   ============================================================ */

.sa-products-head-meta {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 15px;

  font-size: 7.5px;

  line-height: 1;

  font-weight: 850;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.sa-products-head-code {
  font-variant-numeric:
    tabular-nums;
}


.sa-products-head-meta-label {
  opacity: .78;
}


.sa-products-head-live {
  width: 4px;
  height: 4px;

  margin-left: 2px;

  border-radius: 50%;

  animation:
    saProductsLive
    2.4s
    ease-in-out
    infinite;
}



/* ============================================================
   TITLE
   ============================================================ */

.sa-products-head-title {
  width:
    min(100%, 13ch);

  margin:
    0;

  font-size:
    clamp(43px, 4.7vw, 70px);

  line-height:
    .92;

  font-weight:
    930;

  letter-spacing:
    -.061em;

  text-wrap:
    balance;
}


.sa-products-head--center
.sa-products-head-title {
  margin-left: auto;
  margin-right: auto;
}



/* ============================================================
   SUBTITLE
   ============================================================ */

.sa-products-head-subtitle {
  width:
    min(100%, 53ch);

  margin-top:
    16px;

  margin-bottom:
    0;

  font-size:
    clamp(13px, 1.05vw, 16px);

  line-height:
    1.65;

  font-weight:
    450;

  letter-spacing:
    -.012em;

  text-wrap:
    pretty;
}


.sa-products-head--center
.sa-products-head-subtitle {
  margin-left: auto;
  margin-right: auto;
}



/* ============================================================
   MICRO INFO ROW
   NO LINES / NO BOX
   ============================================================ */

.sa-products-head-info {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap:
    9px
    18px;

  margin-top:
    20px;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    720;

  letter-spacing:
    .035em;
}


.sa-products-head-info > span {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 7px;
}


.sa-products-head-info > span:not(:first-child)::before {
  content: "";

  width: 2px;
  height: 2px;

  margin-right: 2px;

  border-radius: 50%;

  background:
    currentColor;

  opacity: .35;
}


.sa-products-head-info i {
  width: 5px;
  height: 5px;

  border-radius: 50%;
}



/* ============================================================
   SEARCH
   ============================================================ */

.sa-products-search {
  margin-bottom:
    34px;
}


.sa-products-search-shell {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 50px;

  border: 1px solid;

  border-radius: 14px;

  background:
    color-mix(
      in srgb,
      currentColor 2.4%,
      transparent
    );

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}


.sa-products-search-shell:focus-within {
  transform:
    translateY(-1px);

  background:
    color-mix(
      in srgb,
      currentColor 3.4%,
      transparent
    );
}


.sa-products-search-icon {
  position: absolute;

  z-index: 2;

  left: 15px;

  top: 50%;

  width: 15px;
  height: 15px;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sa-products-search-input {
  padding-left:
    42px !important;
}



/* ============================================================
   ENTRANCE
   ============================================================ */

.sa-products-item {
  animation:
    saProductsItemEnter
    .42s
    cubic-bezier(.2,.75,.25,1)
    both;
}


.sa-products-item:nth-child(2) {
  animation-delay: .04s;
}


.sa-products-item:nth-child(3) {
  animation-delay: .08s;
}


.sa-products-item:nth-child(4) {
  animation-delay: .12s;
}



/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes saProductsHeadEnter {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes saProductsItemEnter {

  from {
    opacity: 0;

    transform:
      translateY(9px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes saProductsLive {

  0%,
  100% {
    opacity: .32;

    scale: .8;
  }

  50% {
    opacity: 1;

    scale: 1;
  }

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 680px) {

  .sa-products-head {
    margin-bottom:
      34px;
  }


  .sa-products-head-meta {
    margin-bottom:
      12px;

    font-size:
      7px;
  }


  .sa-products-head-title {
    width:
      min(100%, 12ch);

    font-size:
      clamp(38px, 11vw, 52px);

    line-height:
      .94;

    letter-spacing:
      -.055em;
  }


  .sa-products-head-subtitle {
    margin-top:
      13px;

    font-size:
      13px;

    line-height:
      1.55;
  }


  .sa-products-head-info {
    gap:
      8px
      12px;

    margin-top:
      17px;

    font-size:
      7px;
  }


  .sa-products-dots {
    opacity:
      .10;
  }

}

.sa-categories {
  display: none !important;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .sa-products-head,
  .sa-products-item,
  .sa-products-head-live {
    animation:
      none !important;
  }

}