/* =========================================================
   EcoRebates PDP rebate callout
   Matches the cm-rebate banner style.
   Applies to ecr-product-widget slot markup on all PDPs.
   ========================================================= */

/* Hide slot content until the widget script defines the element */
ecr-product-widget:not(:defined) > div[data-ecr-slot] {
   display: none;
}

.product-rebate-button {
   -webkit-appearance: none;
   appearance: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px 28px;
   width: 100%;
   margin: 0 0 28px;
   padding: 20px 24px;
   background: #ffffff;
   border: 1px solid #d9e2e7;
   border-left: 6px solid #006241;
   color: #163029;
   font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
   text-align: left;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease;
}

.product-rebate-button:hover,
.product-rebate-button:focus-visible {
   background: #f6faf8;
   border-color: #79a889;
   border-left-color: #006241;
   color: #163029;
}

.product-rebate-button:focus {
   outline: none;
}

.product-rebate-button:focus-visible {
   outline: 2px solid #006241;
   outline-offset: 2px;
}

/* The banner has no icon. Delete this rule to bring the $ circle back. */
.product-rebate-button__icon {
   display: none;
}

.product-rebate-button__content {
   display: block;
   flex: 1 1 320px;
   min-width: 0;
}

.product-rebate-button__eyebrow {
   display: block;
   margin: 0 0 7px;
   color: #657389;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.11em;
   line-height: 1;
   text-transform: uppercase;
}

.product-rebate-button__headline {
   display: block;
   margin: 0 0 5px;
   color: #163029;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;
}

.product-rebate-button__supporting {
   display: block;
   margin: 0;
   color: #555555;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.4;
}

.product-rebate-button__action {
   display: block;
   flex: 0 0 auto;
   padding: 12px 22px;
   background: #006241;
   color: #ffffff;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.2;
   white-space: nowrap;
}

.product-rebate-button:hover .product-rebate-button__action,
.product-rebate-button:focus-visible .product-rebate-button__action {
   background: #004f34;
   color: #ffffff;
}

/* The banner CTA has no arrow. Delete this rule to bring it back. */
.product-rebate-button__arrow {
   display: none;
}

@media (prefers-reduced-motion: reduce) {
   .product-rebate-button {
      transition: none;
   }
}

@media (max-width: 640px) {
   .product-rebate-button {
      padding: 18px 20px;
   }

   .product-rebate-button__headline {
      font-size: 18px;
   }

   .product-rebate-button__action {
      flex: 1 1 100%;
      text-align: center;
   }
}