/*
Homepage
*/

.coat-home-hero {
  min-height: min(810px, calc(100svh - var(--coat-announcement-height) - var(--coat-header-height)));
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--coat-line);
}

.coat-home-hero__grid {
  display: grid;
  grid-template-columns: minmax(290px, .68fr) minmax(0, 1.32fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
  padding-block: 52px;
}

.coat-home-hero__copy h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(48px, 7vw, 94px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.065em;
}

.coat-home-hero__copy > p:not(.coat-kicker) {
  max-width: 480px;
  margin: 22px 0 0;
  color: var(--coat-muted);
  font-size: clamp(15px, 1.4vw, 18px);
}

.coat-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.coat-home-hero__products {
  min-height: min(620px, calc(100svh - 180px));
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.coat-hero-product {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--coat-ink);
  text-decoration: none;
}

.coat-hero-product--1 {
  grid-row: 1 / span 2;
}

.coat-hero-product__media {
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--coat-soft);
  transition: background-color 280ms ease;
}

.coat-hero-product__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 600ms var(--coat-ease);
}

.coat-hero-product:hover img {
  transform: scale(1.022);
}

.coat-hero-product__name {
  display: block;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 600;
}

.coat-home-section {
  padding-block: clamp(72px, 8vw, 120px);
}

.coat-home-section--white {
  background: #fff;
}

.coat-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 28px;
}

.coat-section-heading h2 {
  margin: 0;
  font-size: clamp(29px, 3.8vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
}

.coat-section-heading a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.coat-category-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(210px, 1fr));
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.coat-category-tile {
  min-width: 0;
  color: var(--coat-ink);
  text-decoration: none;
  scroll-snap-align: start;
}

.coat-category-tile__media {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--coat-soft);
}

.coat-category-tile__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 520ms var(--coat-ease);
}

.coat-category-tile:hover img {
  transform: scale(1.02);
}

.coat-category-tile__name {
  display: block;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 600;
}

.coat-home-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 12px;
  margin: 0;
  padding: 0;
}

.coat-custom-feature {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background: var(--coat-dark);
  color: #fff;
}

.coat-custom-feature__products {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.16);
}

.coat-custom-feature__products a {
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e8e5df;
}

.coat-custom-feature__products img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 560ms var(--coat-ease);
}

.coat-custom-feature__products a:hover img {
  transform: scale(1.02);
}

.coat-custom-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 7vw, 90px);
}

.coat-custom-feature__copy h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 65px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
}

.coat-custom-feature__copy > p:not(.coat-kicker) {
  max-width: 500px;
  margin: 20px 0 28px;
  color: rgba(255,255,255,.68);
  font-size: 15px;
}


.coat-custom-feature--copy-only {
  grid-template-columns: 1fr;
  min-height: auto;
}

.coat-custom-feature--copy-only .coat-custom-feature__copy {
  min-height: 420px;
}


/* Adaptive media keeps the entire source image visible while matching the frame
   to the image-edge colour, so differently sized mockups do not show harsh bars. */
.coat-adaptive-media {
  background-color: var(--coat-soft);
  transition: background-color 280ms ease;
}

.coat-hero-product__media img,
.coat-category-tile__media img,
.coat-custom-feature__products img {
  object-position: center;
}

.coat-hero-product--1 .coat-hero-product__media {
  min-height: 0;
}

/* =========================================================
   V1.2.4.4 — hero media background integration
   ========================================================= */
.coat-hero-product--1 .coat-hero-product__media,
.coat-hero-product--1 .coat-adaptive-media {
  background: var(--coat-bg) !important;
  isolation: isolate;
}

.coat-hero-product--1 .coat-hero-product__media img {
  mix-blend-mode: multiply;
}

/* =========================================================
   V1.2.4.5 — transparent primary hero media
   ========================================================= */
.coat-hero-product--1 .coat-hero-product__media,
.coat-hero-product--1 .coat-hero-product__media--transparent {
  background-color: transparent !important;
  background-image: none !important;
}

.coat-hero-product--1 .coat-hero-product__media img,
.coat-hero-product--1 .coat-hero-product__media--transparent img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}

body.coat-has-audience-bar .coat-home-hero {
  min-height: min(766px, calc(100svh - var(--coat-announcement-height) - var(--coat-header-height) - 44px));
}