/* override theme */
strong {
	font-weight: bold;
}

h1,
h2,
p,
li {
	color: inherit;
	/* font-family: inherit; */
	/* font-size: inherit; */
}

/* #pdi-logo {
	height: 42px;
	margin-bottom: 0;
	margin-top: -14px;
} */

section img {
	height: auto;
	max-width: 100%;
	width: auto;
}

/* utilities */
.aspect-ratio-16\/9 {
	padding-top: 56.25%;
}

.aspect-ratio-4\/3 {
	padding-top: 75%;
}

.w-screen {
	width: 100vw;
}

.w-screen-1\/2 {
	width: calc( 100vw / 2 );
}

.font-noto-sans {
	font-family: "Noto Sans", sans-serif;
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
	padding-left: 1rem;
	padding-right: 1rem;
}

.bg-teal-profend {
	background-color: #254552;
}

.bg-darkteal-profend {
	background-color: #18313B;
}

.bg-gray-profend {
	background-color: #9B9B9B;
}

.bg-darkgray-profend {
	background-color: #7D7E80;
}

.bg-lightblue-profend {
	background-color: #53C7DD;
}

.bg-darkblue-profend {
	background-color: #2FABCA;
}

.text-lightblue-profend,
.efficacy-content-link:link,
.efficacy-content-link:hover,
.efficacy-content-link:visited {
	color: #53C7DD;
}

.text-red-profend {
	color: #B80D31;
}

.link,
.link:visited,
.rte a,
.rte a:visited {
	color: inherit;
	text-decoration: underline;
}

.link:hover,
.rte a:hover {
	color: inherit;
	text-decoration: none;
}

.rte p ~ p {
	margin-top: 1rem;
}

/* custom styles */
.menu-profend-landing-page-container li {
	font-size: 12px;
	margin-bottom: 0;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.hero-bg {
	background: url("../jpg/hero-2.jpg") no-repeat left bottom;
	background-size: contain;
	/* left: 55.95%; */
	/* width: 860px; */
}

.hero-bg b {
	background: url("../png/hero-bg.png") repeat-x left bottom;
	left: 100%;
	width: 100vw;
}

.hero-title strong,
.hero-title b {
	display: block;
	font-weight: bold;
	margin-bottom: 1rem; /* 16px */
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.hero-title sup {
	top: -0.65em;
}

.hero .button {
	/* font-size: 1.25rem; */
	border-radius: 0;
	border: 1px solid #8B0C0C;
	padding: 1em 2em !important;
	font-family: Arial, sans-serif;
}

.video-bg {
	height: 100vh;
	left: -100vw;
	top: 50%;
	width: 200vw;
}

.video-embed iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99;
}

.spacer {
	padding: 10px;
}

.form-bg {
	height: 60%;
}

.form-content {
	max-width: 628px;
}

.content-image .content ul {
	list-style-type: disc;
	margin-left: 1.5rem; /* 24px */
}

#colophon {
	font-family: Arial, sans-serif;
}

@media (max-width: 1023px) {
	.header-row.-primary {
		padding: 20px 0px;
	}

	.button {
		font-size: 1rem !important;
	}

	.footer-inner {
		padding: 0;
	}
}

@media screen and (max-width: 600px) {
	#wpadminbar {
		top: -46px;
	}
}

@media (min-width: 1024px) {
	.lg\:w-screen {
		width: 100vw;
	}

	.lg\:w-screen-1\/2 {
		width: calc( 100vw / 2 );
	}

	.hero-title {
		font-size: 1.8rem;
	}

	.hero-title strong,
	.hero-title b {
		font-size: 3.25rem;
		line-height: 1;
	}

	.efficacy-content-row {
		height: var(--efficacy-content-height);
	}

	.content-image .content {
		min-height: 360px;
	}

	.menu-profend-landing-page-container li {
		font-size: 1.125rem;
	}

	.menu-profend-landing-page-container li {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}

/* ============================================================
   Product Gallery with Thumbnails – Flexible Content Block
   Ported from mcg-products.css and style.css so these styles
   are available outside of singular product/accessory pages.
   ============================================================ */

/* --- Block: match the product-page gallery column width.
     On the product template, .pdi-product-gallery spans 6 of 12
     columns inside .inner-wrap (1100px content, 16px gap):
     (1100 - 11×16) / 12 × 6 + 5×16 = 542px.                --- */
.pdi-product-gallery-block {
  width: 100%;
}

/* Constrain & center the carousel content to match the product page
   gallery column width (~6/12 of a 1100px grid = 542px) */
.pdi-product-gallery-block .inner-wrap {
  max-width: 542px;
  margin-left: auto;
  margin-right: auto;
}

.pdi-product-gallery-block__heading {
  text-align: center;
}

/* --- Block wrapper & spinner positioning --- */
.pdi-product-gallery-block .gallery-wrap {
  position: relative;
  overflow: hidden;
}

.pdi-product-gallery-block .pdi-spinner {
  top: 48px;
  transform: translateX(-50%) scale(0.5);
}

/* --- Main carousel ---
     Start invisible; fade in once Flickity adds .flickity-enabled.
     We rely on opacity:0 to prevent a flash – no need to hide
     individual li elements (which also avoids selector issues when
     Flickity moves cells inside .flickity-slider).              --- */
.pdi-product-gallery-block .pdi-new-carousel-main {
  opacity: 0;
  transition: opacity 0.2s ease;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.pdi-product-gallery-block .pdi-new-carousel-main.flickity-enabled {
  opacity: 1;
}

/* Set width BEFORE Flickity measures cells (pre-init li are direct
   children of the ul). Flickity reads this 100% value, bakes it as
   an inline px width, then moves cells into .flickity-slider –
   so one slide fills the container at all times. */
.pdi-product-gallery-block .pdi-new-carousel-main li {
  width: 100%;
  padding: 40px;
}

.pdi-product-gallery-block .pdi-new-carousel-main li img {
  width: 100%;
  max-width: none;
  display: block;
}

/* Style main carousel prev/next buttons to match product page */
.pdi-product-gallery-block .pdi-carousel-main .flickity-prev-next-button {
  background: transparent;
  border: none;
}

/* --- Thumbnail nav carousel --- */
.pdi-product-gallery-block .pdi-new-carousel-nav {
  opacity: 0;
  transition: opacity 0.2s ease;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.pdi-product-gallery-block .pdi-new-carousel-nav.flickity-enabled {
  opacity: 1;
}

/* Nav wrapper: 50px horizontal padding creates the space the
   absolutely-positioned Flickity arrows need at left/right: -40px
   without being clipped by the inner-wrap padding.            */
.pdi-product-gallery-block .pdi-gallery-nav-wrap {
  padding: 0 50px;
}

/* Remove browser focus outline on the nav carousel */
.pdi-product-gallery-block .pdi-new-carousel-nav,
.pdi-product-gallery-block .pdi-new-carousel-nav li {
  outline: none;
}

/* Thumbnail items — fixed size so all thumbnails are uniform */
.pdi-product-gallery-block .pdi-new-carousel-nav li {
  width: 150px;
  height: 110px;
  margin-right: 10px;
  overflow: hidden;
}

.pdi-product-gallery-block .pdi-new-carousel-nav li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Thumbnail nav prev/next buttons --- */
.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button {
  background: #ffffff;
  border: 2px solid #b80d30;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  transition: background 0.2s ease-in-out;
}

.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button:hover {
  background: #b80d30;
}

.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-button-icon {
  fill: #b80d30;
  width: 18px;
  height: 18px;
}

.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button:hover .flickity-button-icon {
  fill: #ffffff;
}

.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button.previous { left: -40px; }
.pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button.next    { right: -40px; }

.pdi-product-gallery-block .pdi-new-carousel-nav .is-selected img {
  border: 2px solid #c00;
  box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
}

/* --- Responsive: ≤ 768px --- */
@media (max-width: 768px) {
  .pdi-product-gallery-block .pdi-new-carousel-main {
    margin: 20px auto;
  }

  .pdi-product-gallery-block .pdi-new-carousel-main li {
    padding: 10px;
  }

  /* Thumbnail strip: 80% width leaves room for arrows */
  .pdi-product-gallery-block .pdi-new-carousel-nav {
    width: 80%;
    margin: 0 auto;
  }

  /* Show 3 thumbnails at a time */
  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-slider li {
    width: calc(100% / 3 - 10px) !important;
    margin: 0 5px;
    flex-shrink: 0;
    border: 2px solid transparent;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-slider li img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-button {
    transform: translateY(-50%);
    top: 50%;
    width: 30px;
    height: 30px;
    opacity: 0.9;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 2px solid #B80D30;
    border-radius: 50%;
    z-index: 10;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button.previous {
    left: 5px;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-prev-next-button.next {
    right: 5px;
  }

  .pdi-product-gallery-block .pdi-new-carousel-nav .flickity-button-icon {
    fill: #B80D30;
    width: 15px;
    height: 15px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* =====================================================
   Product CTA Block
   Matches .pdi-product-cta styles from mcg-products.css
   ===================================================== */

.pdi-product-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background: #f2f2f2;
    overflow: visible;
    margin-top: 140px;
    margin-bottom: 140px;
}

.pdi-product-cta .pdi-cta-inner {
    display: flex;
    max-width: 1420px;
    gap: 40px;
    align-items: center;
}

.pdi-product-cta .pdi-cta-image {
    flex: 0 0 40%;
    text-align: center;
}

.pdi-product-cta .pdi-cta-image img {
    max-width: 100%;
    height: auto;
    margin-top: -200px;
    margin-bottom: -200px;
}

.pdi-product-cta .pdi-cta-content {
    flex: 1;
}

.pdi-product-cta .pdi-cta-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 15px;
}

.pdi-product-cta .pdi-cta-subtitle {
    font-size: 18px;
    margin-bottom: 10px;
}

.pdi-product-cta .pdi-cta-desc {
    margin-bottom: 20px;
    color: #333;
}

.pdi-product-cta .pdi-cta-buttons .pdi-btn {
    display: inline-block;
    background: #A61932;
    font-size: 16px;
    color: white;
    padding: 10px 20px;
    margin-right: 10px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.pdi-product-cta .pdi-cta-buttons .pdi-btn:hover {
    background: #850c23;
}

@media (max-width: 767px) {
    .pdi-product-cta {
        margin-top: 0;
        margin-bottom: 0;
    }

    .pdi-product-cta .pdi-cta-inner {
        flex-direction: column;
        align-items: center;
        padding: 20px;
        text-align: center;
        gap: 0;
    }

    .pdi-product-cta .pdi-cta-image {
        width: 100%;
        max-width: 300px;
        margin-bottom: 20px;
        flex: none;
    }

    .pdi-product-cta .pdi-cta-image img {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .pdi-product-cta .pdi-cta-content {
        width: 100%;
        padding: 0;
    }

    .pdi-product-cta .pdi-cta-buttons a {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .pdi-product-cta .pdi-cta-buttons a:last-child {
        margin-bottom: 0;
    }
}

/* Product Feature Icons
   ========================================================================== */

.pdi-product-features-icons {
    margin: 40px 0;
    text-align: center;
}

.pdi-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    justify-items: center;
}

.pdi-icon-item img {
    max-width: 175px;
    height: auto;
}

@media screen and (max-width: 768px) {
    .pdi-icons-grid {
        grid-template-columns: repeat(auto-fit, minmax(135px, 2fr));
    }

    .pdi-icon-item img {
        max-width: 135px;
    }
}