/* Estensione standalone v2: slider installazioni e campioni materici Manus. */
.brand-mark__logo {
  width: 13rem;
  height: auto;
}

.brand-mark--compact .brand-mark__logo {
  width: 9.75rem;
}

.brand-mark__logo--inverse {
  filter: invert(1);
}

.hero__image-mark .brand-mark__logo {
  width: min(66vw, 36rem);
}

@media (max-width: 560px) {
  .brand-mark--compact .brand-mark__logo { width: 7.8rem; }
  .hero__image-mark .brand-mark__logo { width: min(72vw, 20rem); }
}

.material-slider__image {
  animation: material-image-in 260ms var(--ease-out) both;
}

.material-slider__counter {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 6.3rem;
  padding: .7rem .85rem;
  color: #fff;
  background: rgb(20 20 18 / 72%);
  backdrop-filter: blur(8px);
  font-family: "Space Grotesk", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.material-slider__counter i {
  width: 1.4rem;
  height: 1px;
  background: rgb(255 255 255 / 55%);
}

.material-slider__controls {
  position: absolute;
  right: 1rem;
  bottom: 4.7rem;
  display: flex;
  gap: .35rem;
}

.material-slider__controls button {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  color: #fff;
  background: rgb(20 20 18 / 78%);
  border: 1px solid rgb(255 255 255 / 20%);
  backdrop-filter: blur(8px);
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.material-slider__controls button:hover {
  color: #171713;
  background: var(--orange);
}

.material-slider__controls button:focus-visible,
.material-slider__pagination button:focus-visible,
.material__image:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.material-slider__controls button:active { transform: scale(.97); }

.material-slider__pagination {
  position: absolute;
  bottom: 5.8rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: .38rem;
}

.material-slider__pagination button {
  width: .42rem;
  height: .42rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 50%;
  background: rgb(20 20 18 / 35%);
  box-shadow: 0 0 0 3px rgb(20 20 18 / 18%);
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.material-slider__pagination button:hover,
.material-slider__pagination button.is-active {
  background: var(--orange);
  transform: scale(1.28);
}

.swatch__color {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.swatch__color--neutro { background-image: url("assets/palette/neutro.webp"); }
.swatch__color--tb1 { background-image: url("assets/palette/tb1.webp"); }
.swatch__color--t2i { background-image: url("assets/palette/t2i.webp"); }
.swatch__color--t2u { background-image: url("assets/palette/t2u.webp"); }
.swatch__color--t2l { background-image: url("assets/palette/t2l.webp"); }
.swatch__color--tbm { background-image: url("assets/palette/tbm.webp"); }
.swatch__color--t22 { background-image: url("assets/palette/t22.webp"); }

@keyframes material-image-in {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .material-slider__image { animation: none; }
}