/*Loaded ONLY on Motorcraft pages (see _MotorcraftFont.cshtml).*/

@font-face {
  font-family: 'American Grotesk';
  src: url("/media/5851/american-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'American Grotesk';
  src: url("/media/5850/american-grotesk-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --motorcraft-font: 'American Grotesk', "Ford Antenna", sans-serif;
  --motorcraft-text: #000;
  --motorcraft-red: #CC2A29;
}

main,
main button,
main input,
main select,
main textarea {
  font-family: var(--motorcraft-font);
  font-synthesis: none;
}


a.button-primary,
.footer,
.footer *,
.app-banner,
.app-banner *,
.centre-locator-bottom-banner,
.centre-locator-bottom-banner * {
  font-family: "Ford Antenna", sans-serif;
  font-synthesis: initial;
}

/* #00263D -> #000 from navy to black color change */
main :is(h1, h2, h3, h4, p, li):where(:not(.app-banner *, .centre-locator-bottom-banner *)),
main .product-page .product-page__cta-block,
main .battery-banner__eyebrow {
  color: var(--motorcraft-text);
}

main .range__categories__grid3.motocraft .productGrid h4 {
  color: var(--motorcraft-red);
}

main [style*="color" i][style*="#00263d" i]:not([style*="background" i]),
main [style*="color" i][style*="rgb(0, 38, 61)"]:not([style*="background" i]) {
  color: var(--motorcraft-text) !important;
}

main [style*="color" i][style*="#dc1816" i]:not([style*="background" i]),
main [style*="color" i][style*="rgb(220, 24, 22)"]:not([style*="background" i]) {
  color: var(--motorcraft-red) !important;
}

main .product-table th:where(:not(.pp-table *)),
main .product-table.motorcraft th:where(:not(.pp-table *)) {
  background-color: var(--motorcraft-red);
}

main a.js_product.range__cat3:hover,
main a.js_product.range__cat3.motorcraft:hover {
  background-color: var(--motorcraft-red);
}

main .battery-banner--spec {
  background: linear-gradient(128deg, var(--motorcraft-red) 40%, #a5100f 100%);
}

main [style*="background" i][style*="#dc1816" i],
main [style*="background" i][style*="rgb(220, 24, 22)"] {
  background-color: var(--motorcraft-red) !important;
}

main .range__categories__grid3.motocraft a.js_product.range__cat3 {
	box-shadow: 1px 3px 15px #a3a3a3;
  	isolation: isolate;
  	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

main .range__categories__grid3.motocraft a.js_product.range__cat3 img {
  	transition: transform 0.5s ease;
}

main .range__categories__grid3.motocraft a.js_product.range__cat3::after {
  	content: "";
  	position: absolute;
  	inset: 0;
  	z-index: 1;
  	pointer-events: none;
  	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  	transform: translateX(-110%);
}

main a.js_product.range__cat3.motorcraft img {
	object-position: 11% 50% !important;
	min-height: 114% !important;
	object-fit: cover;
	margin-top: -10% !important;
}

a.js_product.range__cat3 img{
	min-height: auto !important;
	object-position: auto !important;
}

main .range__categories__grid3.motocraft .productGrid h4 {
  	text-decoration: underline 2px transparent;
  	text-underline-offset: 5px;
  	transition: text-decoration-color 0.3s ease, text-underline-offset 0.3s ease;
}

@media (hover: hover) {
  main .range__categories__grid3.motocraft .productGrid:hover a.js_product.range__cat3 {
	  transform: translateY(-6px);
	  box-shadow: rgba(25, 33, 67, 0.35) 0 16px 30px -10px;
  }

  main .range__categories__grid3.motocraft .productGrid:hover a.js_product.range__cat3 img {
	  transform: scale(1.08);
  }

  main .range__categories__grid3.motocraft .productGrid:hover a.js_product.range__cat3::after {
	  transform: translateX(110%);
	  transition: transform 0.7s ease;
  }

}

main .range__categories__grid3.motocraft .productGrid:focus-within a.js_product.range__cat3 {
  	transform: translateY(-6px);
  	box-shadow: rgba(25, 33, 67, 0.35) 0 16px 30px -10px;
}

main .range__categories__grid3.motocraft a.js_product.range__cat3:focus-visible {
  	outline: 3px solid var(--pp-yellow, #ffde00);
  	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  main .range__categories__grid3.motocraft a.js_product.range__cat3,
  main .range__categories__grid3.motocraft a.js_product.range__cat3 *,
  main .range__categories__grid3.motocraft a.js_product.range__cat3::after,
  main .range__categories__grid3.motocraft .productGrid h4 {
  	transition: none !important;
  }

  main .range__categories__grid3.motocraft a.js_product.range__cat3::after {
    display: none;
  }
}

/*Supplier Marketing*/
main .range__categories__grid3.motocraft .omnicraft-plus-items-section {
  gap: 36px 28px;
  padding: 4px 0 12px;
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section > .productGrid {
  flex: 0 0 140px !important;
  max-width: 140px;
  text-align: center;
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 140px;
    height: 140px;
    padding: 14px;
    overflow: hidden;
    background: #fff;
    border: 0px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px -18px rgba(16, 24, 40, 0.32);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.45s ease;
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid h4 {
  margin: 16px 0 0;
  color: #000;
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:hover .supplier-marketing-tile {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04),
                0 22px 40px -20px rgba(16, 24, 40, 0.32);
  }

  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:hover .supplier-marketing-tile img {
    transform: scale(1.04);
  }

  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:hover .supplier-marketing-tile::after {
    width: 44px;
  }

  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:hover h4 {
    color: var(--motorcraft-red, #CC2A29);
  }
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:focus-within .supplier-marketing-tile {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04),
              0 22px 40px -20px rgba(16, 24, 40, 0.32);
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:focus-within .supplier-marketing-tile::after {
  width: 44px;
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid:focus-within h4 {
  color: var(--motorcraft-red, #CC2A29);
}

main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile:focus-visible {
  outline: 3px solid var(--pp-yellow, #ffde00);
  outline-offset: 3px;
}

@media (max-width: 575px) {
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section {
    gap: 28px 16px;
  }

  main .range__categories__grid3.motocraft .omnicraft-plus-items-section > .productGrid {
    flex-basis: 128px !important;
    max-width: 128px;
  }

  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile {
    width: 128px;
    height: 128px;
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile,
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile *,
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .supplier-marketing-tile::after,
  main .range__categories__grid3.motocraft .omnicraft-plus-items-section .productGrid h4 {
    transition: none !important;
  }
}