/* Final client-review polish: sharp colour, fast focus, official logos and uniform catalogue cards. */
.first-focus {
  animation: maFocusIn .28s cubic-bezier(.16,.84,.24,1) both !important;
}

@keyframes maFocusIn {
  0% {
    filter: blur(18px) saturate(.72) contrast(.9) brightness(.94);
    opacity: .72;
    transform: scale(1.025);
  }
  72% {
    filter: blur(2px) saturate(1.18) contrast(1.08) brightness(1.02);
    opacity: 1;
  }
  100% {
    filter: blur(0) saturate(1.24) contrast(1.1) brightness(1.02);
    opacity: 1;
    transform: scale(1);
  }
}

.hero-image,
.hero-image.active {
  filter: saturate(1.24) contrast(1.1) brightness(1.02) !important;
}

.hero-wash {
  background: linear-gradient(90deg, rgba(4,27,23,.78) 0%, rgba(4,27,23,.52) 34%, rgba(4,27,23,.14) 57%, transparent 78%) !important;
}

.hero-copy > div {
  color: #f4faf7 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/* Jami-inspired headline motion, with MA Traders' own copy and palette. */
.hero-copy h1 span,
.hero-copy h1 em {
  color: #fff !important;
  background: #050505 !important;
  clip-path: polygon(4% 0, 100% 0, 94% 100%, 0 100%) !important;
  padding: 12px 30px !important;
  animation: maHeadlineIn .34s cubic-bezier(.16,.88,.24,1) both !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.28) !important;
}

.hero-copy h1 em {
  margin-top: 7px !important;
  animation-delay: .09s !important;
}

@keyframes maHeadlineIn {
  0% { opacity: 0; transform: translateX(-38px) scaleX(.88); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

.logo-image {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

.logo-gobis { background-image: url('/assets/logos/gobis.png') !important; }
.logo-reliable { background-image: url('/assets/logos/reliable.webp') !important; }
.logo-reliance { background-image: url('/assets/logos/reliance.png') !important; }
.logo-diamond { background-image: url('/assets/logos/diamond.webp') !important; }

/* Balanced four-brand layout. */
.brand-grid,
.brand-marks {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 700px) {
  .brand-grid,
  .brand-marks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .brand-grid > button:last-child,
  .brand-marks button:last-child {
    grid-column: auto !important;
  }
}

.brand-grid > button,
.collection-grid article {
  background-image: none !important;
}

.cover {
  height: 286px !important;
  padding: 22px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e8e5 !important;
}

.cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Keep every supplied shade-card cover in the same clean catalogue frame. */
.pdf-card {
  align-items: stretch !important;
}

.pdf-card > img {
  width: 150px !important;
  height: 200px !important;
  padding: 10px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f3f1eb !important;
  border: 1px solid #e4e6e2 !important;
}

.pdf-card h2 {
  min-height: 2.4em;
}

.brand-promise,
.brand-hero,
.contact-page {
  background-image: linear-gradient(120deg, #073b32, #081c17 76%) !important;
}

@media (max-width: 720px) {
  .hero-wash {
    background: linear-gradient(90deg, rgba(4,27,23,.76), rgba(4,27,23,.32) 72%, rgba(4,27,23,.1)) !important;
  }

  .cover {
    height: 220px !important;
    padding: 12px !important;
  }

  .pdf-card > img {
    width: 110px !important;
    height: 170px !important;
    padding: 7px !important;
  }

  .hero-copy h1 span,
  .hero-copy h1 em {
    padding: 8px 13px !important;
  }
}
/* Keep the MA Traders shade watermark refined and behind the shade name. */
.swatch-card .watermark {
  font-size: 17px !important;
  letter-spacing: .08em !important;
  opacity: .15 !important;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .swatch-card .watermark {
    font-size: 12px !important;
    opacity: .13 !important;
  }
}