/* The approved first blocks of Puppy365 and FOOD KOD. Other page sections are untouched. */
.kod-product-hero {
  background: #fbf9f5;
  border-bottom: 1px solid #e5e2dc;
  color: #253332;
  padding: 42px 0 62px;
}

.kod-product-hero .kod-product-hero__grid,
.food-page .food-hero.kod-product-hero .kod-product-hero__grid {
  width: min(100% - 64px, 1010px);
  max-width: 1010px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 32px;
}

.kod-product-hero__copy { min-width: 0; }
.kod-product-hero .kod-product-hero__eyebrow {
  color: #ae7345;
  font: 800 12px/1.35 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.kod-product-hero h1,
.food-page .food-hero.kod-product-hero h1 {
  color: #253332;
  font: 600 clamp(34px, 4.5vw, 51px)/1.13 Georgia, serif;
  letter-spacing: -.02em;
  max-width: none;
  margin: 0 0 16px;
}
.kod-product-hero .kod-product-hero__lead,
.food-page .food-hero.kod-product-hero .kod-product-hero__lead {
  color: #5e6864;
  font: 400 16px/1.58 Arial, sans-serif;
  max-width: 560px;
  margin: 0 0 19px;
}
.kod-product-hero__price {
  display: block;
  color: #253332;
  font: 400 33px/1 Georgia, serif;
  margin-bottom: 19px;
}
.kod-product-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kod-product-hero .kod-product-hero__button,
.food-page .food-hero.kod-product-hero .kod-product-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 18px;
  font: 700 14px/1.3 Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.kod-product-hero .kod-product-hero__button:hover { filter: brightness(.95); transform: translateY(-1px); }
.kod-product-hero .kod-product-hero__button:focus-visible,
.kod-product-hero a:focus-visible { outline: 3px solid #c99550; outline-offset: 3px; }
.kod-product-hero .kod-product-hero__button--puppy {
  background: linear-gradient(115deg, #2363f7, #7850e8);
  color: white;
}
.kod-product-hero__button--food { background: #275d48; color: white; }
.kod-product-hero__button--light { background: #fffaf0; color: #253332; border-color: #e2d9cc !important; }
.kod-product-hero .kod-product-hero__login {
  color: #5e6864;
  font: 400 14px/1.5 Arial, sans-serif;
  margin: 20px 0 0;
}
.kod-product-hero__login a { color: #275d48; text-decoration: underline; text-underline-offset: 2px; }
.kod-product-hero__visual,
.food-page .food-hero.kod-product-hero .kod-product-hero__visual {
  min-width: 0;
  min-height: 0;
  height: auto;
  max-width: 100%;
  border-radius: 17px;
  padding: 13px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 11px 35px rgba(35,40,38,.08);
}
.kod-product-hero__visual--food { width: min(100%, 360px); margin: 0 auto; padding: 9px; }
.kod-product-hero__visual a { display: block; }
.kod-product-hero__visual img,
.food-page .food-hero.kod-product-hero .kod-product-hero__visual > a > img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 480px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
}
.kod-product-hero__visual--food img,
.food-page .food-hero.kod-product-hero .kod-product-hero__visual--food > a > img { max-height: none; }

/* Match the Puppy365 purchase button below the hero to the poster's blue and violet accents. */
.p365-landing #p365-buy .p365-actions > .p365-btn:not(.p365-outline) {
  background: linear-gradient(115deg, #2363f7, #7850e8);
}

@media (max-width: 760px) {
  .kod-product-hero,
  .food-page .food-hero.kod-product-hero {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }
  .kod-product-hero .kod-product-hero__grid,
  .food-page .food-hero.kod-product-hero .kod-product-hero__grid {
    width: min(100% - 34px, 580px);
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .kod-product-hero h1,
  .food-page .food-hero.kod-product-hero h1 { font-size: clamp(32px, 8vw, 42px); }
  .kod-product-hero__visual--puppy { width: min(100%, 370px); margin: 0 auto; }
  .kod-product-hero__visual--food { width: min(100%, 330px); }
}