/* Approved green-and-gold MA Traders logo on every digital shade preview. */
.swatch-card .watermark,
.modal-swatch > span,
.repair-modal-swatch > i,
.gobis-swatch > i,
.gobis-pack-swatch > i,
.shade-card .watermark {
  width: min(68%, 320px) !important;
  height: 92px !important;
  background: url('/assets/ma-traders-logo.png?v=21') center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  opacity: .17 !important;
  transform: none !important;
  pointer-events: none !important;
}

.swatch-card .watermark {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
}

.modal-swatch > span,
.repair-modal-swatch > i,
.gobis-swatch > i,
.gobis-pack-swatch > i {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 700px) {
  .swatch-card .watermark,
  .modal-swatch > span,
  .repair-modal-swatch > i,
  .gobis-swatch > i,
  .gobis-pack-swatch > i,
  .shade-card .watermark {
    width: 72% !important;
    height: 64px !important;
    opacity: .17 !important;
  }
}

.ma-pack-size-strip,
.ma-brand-pack-note,
.gobis-product-hero .ma-pack-size-note {
  margin: 0 !important;
  padding: 12px max(6vw, 28px) !important;
  background: #0a332b !important;
  color: #fff !important;
  font: 800 12px/1.5 Arial, sans-serif !important;
  letter-spacing: .025em !important;
}

.ma-brand-pack-note {
  max-width: none !important;
  border-top: 1px solid rgba(244,178,52,.55) !important;
  text-align: center !important;
}

.gobis-product-hero .ma-pack-size-note {
  margin-top: 16px !important;
  padding: 11px 14px !important;
  border-left: 4px solid #f4b234 !important;
}

/* Use the approved green-and-gold MA Traders mark in the site header and footer. */
.site-header .logo,
footer .logo {
  width: 232px !important;
  height: 70px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: url('/assets/ma-traders-logo.png?v=21') center / contain no-repeat !important;
}

.site-header .logo > *,
footer .logo > * {
  display: none !important;
}

footer .logo {
  width: 210px !important;
  height: 62px !important;
  background-color: #fffaf0 !important;
  background-size: 92% auto !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
}

@media (max-width: 700px) {
  .site-header .logo {
    width: 180px !important;
    height: 54px !important;
  }

  footer .logo {
    width: 176px !important;
    height: 52px !important;
  }
}