/* Kenely logo sized to match the original JUCIER logo dimensions */
.brand-logo-image {
  width: auto;
  height: 74px;
}
.footer-logo-image {
  width: auto;
  height: 75px;
}

/* Kenely product cards in the homepage product section */
.product-section .product-1-thumbnail {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.product-section .product-image {
  width: auto;
  height: 320px;
  max-width: 100%;
  object-fit: contain;
}
.kenely-product-meta {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #6b6b6b;
  margin-top: 5px;
}

/* Hero bags: force both to the same size + gentle sway (variant 1 only) */
.hero-section img.hero-image1,
.hero-section img.hero-image7 {
  height: 520px !important;
  width: auto !important;
}
.hero-section img.hero-image1 {
  animation: kenely-sway1 3.2s ease-in-out infinite;
}
.hero-section img.hero-image7 {
  animation: kenely-sway2 4s ease-in-out infinite;
}
/* --mx/--my are set by the mouse-parallax script; sway rides on top of them */
@keyframes kenely-sway1 {
  0%, 100% { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(0deg); }
  50% { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 15px)) rotate(-1.6deg); }
}
@keyframes kenely-sway2 {
  0%, 100% { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(0deg); }
  50% { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 17px)) rotate(1.6deg); }
}

/* Hide the runtime-injected Webflow badge and the template author badge */
.w-webflow-badge,
.template-badge {
  display: none !important;
}

/* Header "Products" hover dropdown — categories + product list */
.nav-link-item.kn-has-dd {
  position: relative;
}
.kn-has-dd .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.kn-dd-arrow {
  transition: transform 0.25s ease;
  flex: none;
}
.kn-has-dd:hover .kn-dd-arrow {
  transform: rotate(180deg);
}
.kn-dd-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 16px; /* hover bridge between the link and the panel */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 999;
}
.kn-has-dd:hover .kn-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.kn-dd-box {
  display: flex;
  gap: 26px;
  width: 310px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 24px;
  padding: 24px 24px;
  box-shadow: 0 18px 48px rgba(10, 60, 90, 0.18);
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
  text-align: left;
}
.kn-dd-col {
  min-width: 0;
}
.kn-dd-catscol {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kn-dd-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16a7e0;
  margin-bottom: 6px;
}
.kn-dd-cat {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #1c1c1c;
  text-decoration: none;
  background: #fdfcfa;
  border: 1.5px solid #eef2f4;
  border-radius: 40px;
  padding: 10px 18px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kn-dd-cat:hover {
  background: #16a7e0;
  border-color: #16a7e0;
  color: #fff;
}
.kn-dd-all {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #16a7e0;
  text-decoration: none;
  padding: 6px 4px;
}
.kn-dd-all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kn-dd-col:last-child {
  flex: 1;
}
.kn-dd-prodlist {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #bfe6f7 transparent;
}
.kn-dd-prod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: #1c1c1c;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  transition: background 0.2s, color 0.2s;
}
.kn-dd-prod:hover {
  background: #eaf7fd;
  color: #16a7e0;
}
.kn-dd-prod img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: none;
  background: #fdfcfa;
  border-radius: 10px;
  padding: 3px;
}
@media (max-width: 991px) {
  /* the navbar collapses into the hamburger menu — keep Products a plain link */
  .kn-dd-panel,
  .kn-dd-arrow {
    display: none;
  }
}

/* Language switcher (EN / KA / RU) in the header */
.kn-lang {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 4px;
  margin-right: 14px;
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
}
.kn-lang-btn {
  border: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.kn-lang-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.kn-lang-btn.kn-on {
  background: #fff;
  color: #16a7e0;
}
.kn-lang-fixed {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1300;
  background: rgba(22, 167, 224, 0.92);
}

/* filter pills: single line always; on small screens the row scrolls sideways */
.kenely-filter-bar {
  flex-wrap: nowrap !important;
}
.kenely-filter-bar .kenely-filter-btn,
.kenely-filter-bar .kn-cat-wrap {
  flex: none;
}
@media (max-width: 991px) {
  .kenely-filter-bar {
    overflow-x: auto;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
}

/* Products page: category filter buttons with hover dropdown of that category's products */
.kn-cat-wrap {
  position: relative;
  display: inline-flex;
}
.kn-cat-wrap .kenely-filter-btn .kn-dd-arrow {
  transition: transform 0.25s ease;
}
.kn-cat-wrap:hover .kenely-filter-btn .kn-dd-arrow {
  transform: rotate(180deg);
}
.kn-cat-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 12px; /* hover bridge */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 998;
}
.kn-cat-wrap:hover .kn-cat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.kn-cat-box {
  width: 300px;
  background: #fff;
  border-radius: 22px;
  padding: 20px 18px;
  box-shadow: 0 18px 48px rgba(10, 60, 90, 0.18);
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
  text-align: left;
}
.kn-cat-box .kn-dd-title {
  padding-left: 10px;
}
.kn-animal-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
}
.kn-animal-ico {
  font-size: 18px;
  line-height: 1;
}
.kn-cat-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #bfe6f7 transparent;
}
@media (max-width: 991px) {
  .kn-cat-panel,
  .kn-cat-wrap .kn-dd-arrow {
    display: none;
  }
}

/* Back to top button — bottom right corner */
.kn-top-btn {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: #16a7e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(22, 167, 224, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s;
  z-index: 1200;
}
.kn-top-btn.kn-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.kn-top-btn:hover {
  background: #0f8fc2;
  transform: translateY(-4px);
}
.kn-top-btn svg {
  display: block;
}
@media (max-width: 767px) {
  .kn-top-btn {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }
}

/* EN/RU: headings and prominent UI run bolder, matching the weight of the
   Georgian display font (Dachi) used on the ka version */
html[lang="en"] h1, html[lang="ru"] h1,
html[lang="en"] h2, html[lang="ru"] h2,
html[lang="en"] h3, html[lang="ru"] h3,
html[lang="en"] .hero-title, html[lang="ru"] .hero-title,
html[lang="en"] .section-header, html[lang="ru"] .section-header,
html[lang="en"] .section-heading, html[lang="ru"] .section-heading,
html[lang="en"] .page-title-heading, html[lang="ru"] .page-title-heading {
  font-weight: 800;
}
html[lang="en"] .nav-link, html[lang="ru"] .nav-link,
html[lang="en"] .footer-nav-link, html[lang="ru"] .footer-nav-link,
html[lang="en"] .btn-text, html[lang="ru"] .btn-text,
html[lang="en"] .kenely-filter-btn, html[lang="ru"] .kenely-filter-btn,
html[lang="en"] .product-1-title, html[lang="ru"] .product-1-title,
html[lang="en"] .product-3-item-title, html[lang="ru"] .product-3-item-title,
html[lang="en"] .product-item-title, html[lang="ru"] .product-item-title {
  font-weight: 700;
}
/* Russian runs a step heavier — M PLUS Rounded reads lighter than Fredoka */
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] .hero-title,
html[lang="ru"] .section-header,
html[lang="ru"] .section-heading,
html[lang="ru"] .page-title-heading {
  font-weight: 900;
}
html[lang="ru"] .nav-link,
html[lang="ru"] .footer-nav-link,
html[lang="ru"] .btn-text,
html[lang="ru"] .kenely-filter-btn,
html[lang="ru"] .product-1-title,
html[lang="ru"] .product-3-item-title,
html[lang="ru"] .product-item-title {
  font-weight: 800;
}

/* Site-wide background: very light milky off-white instead of the cream/yellow tone.
   The cream/yellow section backgrounds used across inner pages (products, blog,
   FAQ, about, detail pages) are switched to the same off-white as the home page. */
:root {
  --color--body-color: #fdfcfa;
  --color--light-color: #fdfcfa;
  --color--light-color-3: #fdfcfa;
  /* Georgian and Cyrillic glyphs match the English fonts' rounded character:
     Fredoka/Blinker cover Latin, M PLUS Rounded 1c covers Cyrillic,
     Noto Sans Georgian covers Georgian */
  --font-family--heading-font: "Dachi The Lynx", Fredoka, "M PLUS Rounded 1c", "Noto Sans Georgian", sans-serif;
  --font-family--body-font: Blinker, "M PLUS Rounded 1c", "Noto Sans Georgian", sans-serif;
}
.blog-single-section,
.feature-2-section {
  background-color: #fdfcfa;
}

/* Brand strip below the hero wave — the site's signature outlined lettering
   (like the hero's "Healthy") floating on a wave-shaped baseline; on hover the
   outline fills brand-blue and a small yellow wave slides in underneath */
.kn-brandbar {
  background: #fdfcfa;
  padding: 10px 28px 14px;
}
.kn-brandbar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #16a7e0;
  margin-bottom: 22px;
}
.kn-brandbar-inner {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  width: 100%;
}
.kn-bb-item {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 4px 2px 10px;
  transition: transform 0.3s ease;
}
.kn-bb-text {
  display: inline-block;
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
  /* scales with the screen — noticeably large, still one row on desktop */
  font-size: clamp(21px, 1.9vw, 40px);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* the hero "Healthy" lettering look, but with a 16-direction shadow ring —
     a perfectly round outline with no notches at the letter corners */
  color: #fdfcfa;
  text-shadow:
    3px 0 0 #16a7e0,
    2.8px 1.2px 0 #16a7e0,
    2.1px 2.1px 0 #16a7e0,
    1.2px 2.8px 0 #16a7e0,
    0 3px 0 #16a7e0,
    -1.2px 2.8px 0 #16a7e0,
    -2.1px 2.1px 0 #16a7e0,
    -2.8px 1.2px 0 #16a7e0,
    -3px 0 0 #16a7e0,
    -2.8px -1.2px 0 #16a7e0,
    -2.1px -2.1px 0 #16a7e0,
    -1.2px -2.8px 0 #16a7e0,
    0 -3px 0 #16a7e0,
    1.2px -2.8px 0 #16a7e0,
    2.1px -2.1px 0 #16a7e0,
    2.8px -1.2px 0 #16a7e0;
  transition: color 0.3s ease;
}
.kn-bb-wave {
  display: none;
}
.kn-bb-item:hover {
  transform: translateY(-5px);
}
/* fill with mint — the blue outline stays, so the name remains
   crisp and readable while it "lights up" */
.kn-bb-item:hover .kn-bb-text {
  color: #8be3c9;
  animation: kn-bb-fill 0.45s ease;
}
@keyframes kn-bb-fill {
  0% { color: #fdfcfa; }
  55% { color: #d3f5e9; }
  100% { color: #8be3c9; }
}
/* dot separators — mint, matching the hover fill */
.kn-bb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8be3c9;
  flex: none;
}
@media (max-width: 767px) {
  .kn-brandbar {
    padding: 12px 5% 4px;
  }
  .kn-brandbar-inner {
    gap: 6px 16px;
  }
  .kn-bb-text {
    font-size: 19px;
    -webkit-text-stroke-width: 1.2px;
  }
  .kn-bb-dot {
    width: 7px;
    height: 7px;
  }
  .kn-brandbar-inner .kn-bb-item:nth-child(n) {
    margin-top: 0;
  }
}

/* "Life with Kenely pets" — heading and product images pushed lower within the section */
@media screen and (min-width: 992px) {
  .insta-fid-inner {
    padding-top: 90px;
  }
  /* fixed slots: every product block is exactly 190×230, whatever image the
     admin picks — static positions AND the %-based spread distances stay
     identical for any product, so nothing ever lands on the heading */
  .insta-fid-link-block.block1,
  .insta-fid-link-block.block2,
  .insta-fid-link-block.block3,
  .insta-fid-link-block.block4,
  .insta-fid-link-block.block5,
  .insta-fid-link-block.block6 {
    width: 190px !important;
    height: 230px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .insta-fid-link-block .insta-fid-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }
}
/* no blur on hover (Webflow interaction applies blur(3px) inline) —
   covers the homepage insta section and the blog/inner-page product grids */
.insta-fid-image,
.insta-fid-2-image,
.category-item-image {
  filter: none !important;
}

/* Brand-name marquee (replaces the old testimonial reviews strip) */
.kenely-brand-marquee {
  overflow: hidden;
  padding: 56px 0;
}
.kbm-track {
  display: flex;
  width: max-content;
  animation: kbm-scroll 28s linear infinite;
}
.kbm-group {
  display: flex;
  align-items: center;
}
.kbm-item {
  font-family: 'Dachi The Lynx', Fredoka, 'M PLUS Rounded 1c', 'Noto Sans Georgian', sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  color: #16a7e0;
  white-space: nowrap;
}
.kbm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8be3c9;
  margin: 0 36px;
  flex: none;
}
@keyframes kbm-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .kbm-item { font-size: 30px; }
  .kbm-dot { margin: 0 22px; }
}

/* Products page: the filter section used to tuck -30px under the (removed)
   page-title block — now that pulled it over the header and clipped the logo */
.product-category-section {
  margin-top: 0 !important;
  padding-top: 34px;
}
/* the product grid sits right below the filters */
.category-item-section.section-padding-100 {
  padding-top: 10px;
}
.product-category-wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.product-category-section {
  height: auto !important;
}

/* About page: the hero image block is fixed at 480px on tablet/phone in the
   page's own Webflow css with no small-screen override — it forced the whole
   layout wider than the viewport ("zoomed" look, right padding cut off). */
@media (max-width: 767px) {
  .about-single-image-block {
    width: 100% !important;
    max-width: 480px;
  }
}

/* No horizontal page overflow anywhere: wide animated elements (e.g. the client
   logo marquee on About) were widening the page on pages whose wrapper lacks
   the overflow-hidden class — which visually removed the right-side padding. */
.pages {
  overflow-x: hidden;
  overflow-x: clip;
}
.marquee-2-section {
  overflow: hidden;
}
/* blog product strip: 7 items stay on ONE row on desktop */
@media (min-width: 992px) {
  .insta-fid-2-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
}

/* About marquee: the Kenely logo (rendered white) separates the brand names —
   logo prominent, brand names more modest */
.kn-marquee-logo {
  height: 64px;
  width: auto !important;
  max-width: none !important;
  filter: brightness(0) invert(1);
}
/* product detail pages: same brand strip in the marquee-3 section */
.kn-m3-text {
  font-family: var(--font-family--heading-font);
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.marquee-2-section .marquee-text {
  font-size: 20px;
  font-weight: 600;
}

/* Hero "Healthy" — same 16-direction shadow ring as the brand strip below:
   a perfectly round white outline with no notches at the letter corners */
.hero-title-span {
  text-shadow:
    3px 0 0 var(--color--white-color),
    2.8px 1.2px 0 var(--color--white-color),
    2.1px 2.1px 0 var(--color--white-color),
    1.2px 2.8px 0 var(--color--white-color),
    0 3px 0 var(--color--white-color),
    -1.2px 2.8px 0 var(--color--white-color),
    -2.1px 2.1px 0 var(--color--white-color),
    -2.8px 1.2px 0 var(--color--white-color),
    -3px 0 0 var(--color--white-color),
    -2.8px -1.2px 0 var(--color--white-color),
    -2.1px -2.1px 0 var(--color--white-color),
    -1.2px -2.8px 0 var(--color--white-color),
    0 -3px 0 var(--color--white-color),
    1.2px -2.8px 0 var(--color--white-color),
    2.1px -2.1px 0 var(--color--white-color),
    2.8px -1.2px 0 var(--color--white-color);
}

/* Hero wave line sits a bit lower — the hero section is slightly taller
   (the wave is anchored to the section bottom). Mobile sizes unchanged. */
@media screen and (min-width: 768px) {
  .hero-section {
    height: 680px;
  }
}
@media screen and (min-width: 1440px) {
  .hero-section {
    height: 735px;
  }
}

/* The 5 product cards below the hero — squares, the product
   photo fills most of the card; every card identical */
@media screen and (min-width: 768px) {
  section.product-section .product-1-thumbnail {
    aspect-ratio: 1 / 1;
    padding: 18px 14px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.product-section .product-image.product-2-image {
    width: 88% !important;
    height: 88% !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

/* Hide the thin white wavy line across the hero */
.hero-image2 {
  display: none !important;
}

/* Wave divider at the bottom of the hero (static) */
.kenely-wave {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
  pointer-events: none;
}
.kenely-wave svg {
  display: block;
  width: 200%;
  height: 70px;
}

/* Hero decorative pet icons (replaced the fruit vectors) — layered in front */
img.hero-image3 {
  height: 115px;
  width: auto;
  z-index: 6;
}
img.hero-image4 {
  height: 92px;
  width: auto;
  z-index: 6;
  position: relative;
  top: 60px;
}

/* Kibble bursts behind each hero product bag */
.kenely-burst {
  position: absolute;
  width: 640px;
  bottom: -14%;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-section img.hero-image1,
.hero-section img.hero-image7 {
  will-change: transform;
}
.kenely-burst-left {
  left: 30.4%;
  transform: rotate(-14deg);
  animation: kburst-in-left 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s both,
    kburst-sway-left 3.2s ease-in-out 1.85s infinite;
}
.kenely-burst-right {
  right: 26.8%;
  transform: rotate(14deg);
  animation: kburst-in-right 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s both,
    kburst-sway-right 4s ease-in-out 1.85s infinite;
}
@keyframes kburst-sway-left {
  0%, 100% { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(-14deg); }
  50% { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 15px)) rotate(-15.2deg); }
}
@keyframes kburst-sway-right {
  0%, 100% { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(14deg); }
  50% { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 17px)) rotate(15.2deg); }
}
/* entrance ends in exactly the same transform the sway starts from — no jump */
@keyframes kburst-in-left {
  from { opacity: 0; transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 140px)) scale(0.45) rotate(-14deg); }
  to { opacity: 1; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1) rotate(-14deg); }
}
@keyframes kburst-in-right {
  from { opacity: 0; transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 140px)) scale(0.45) rotate(14deg); }
  to { opacity: 1; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1) rotate(14deg); }
}

/* Keep the hero title above the flying pellets */
.hero-title-wrapper {
  position: relative;
  z-index: 5;
}

/* Pellet fountains popping out of each bag's top */
.kenely-pop {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}
.kenely-pop-left {
  left: 39.3%;
  top: 41%;
}
.kenely-pop-right {
  left: 63.7%;
  top: 41%;
}
/* two emission spots on each bag's opening */
.kpo1 { margin-left: -44px; }
.kpo2 { margin-left: 40px; }
.kenely-pop .kp,
.kenely-cta-pop .kp {
  position: absolute;
  left: -10px;
  top: -10px;
  height: 20px;
  width: auto;
  max-width: none;
  opacity: 0;
}
.kp1 { animation: kpop1 2.7s linear infinite; }
.kp2 { animation: kpop2 3.1s linear infinite; animation-delay: 0.6s; height: 16px; }
.kp3 { animation: kpop3 2.5s linear infinite; animation-delay: 1.2s; }
.kp4 { animation: kpop4 3.4s linear infinite; animation-delay: 1.7s; height: 17px; }
.kp5 { animation: kpop5 2.9s linear infinite; animation-delay: 2.2s; height: 15px; }
.kp6 { animation: kpop6 3.2s linear infinite; animation-delay: 0.3s; }
.kp7 { animation: kpop2 2.6s linear infinite; animation-delay: 1.9s; height: 14px; }
.kp8 { animation: kpop4 3.0s linear infinite; animation-delay: 0.9s; height: 18px; }
.kp9 { animation: kpop6 2.8s linear infinite; animation-delay: 2.5s; height: 15px; }
.kp10 { animation: kpop3 3.3s linear infinite; animation-delay: 1.5s; height: 16px; }
@keyframes kpop1 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-85px, -200px) scale(1) rotate(150deg); opacity: 1; }
  100% { transform: translate(-135px, -55px) scale(1) rotate(280deg); opacity: 0; }
}
@keyframes kpop2 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(60px, -235px) scale(1) rotate(-130deg); opacity: 1; }
  100% { transform: translate(105px, -80px) scale(1) rotate(-240deg); opacity: 0; }
}
@keyframes kpop3 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-25px, -175px) scale(1) rotate(110deg); opacity: 1; }
  100% { transform: translate(-45px, -35px) scale(1) rotate(200deg); opacity: 0; }
}
@keyframes kpop4 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(115px, -190px) scale(1) rotate(170deg); opacity: 1; }
  100% { transform: translate(170px, -45px) scale(1) rotate(320deg); opacity: 0; }
}
@keyframes kpop5 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(20px, -255px) scale(1) rotate(-160deg); opacity: 1; }
  100% { transform: translate(40px, -95px) scale(1) rotate(-300deg); opacity: 0; }
}
@keyframes kpop6 {
  0% { transform: translate(0, 25px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-130px, -215px) scale(1) rotate(140deg); opacity: 1; }
  100% { transform: translate(-190px, -70px) scale(1) rotate(260deg); opacity: 0; }
}

/* CTA section: layered kibble composition around the product (bag centered,
   splash behind, kibble pile under the bag, bag on top — like the reference) */
.cta-image-block {
  align-items: center !important;
  justify-content: center !important;
}
img.cta-image {
  height: 300px !important;
  width: auto !important;
  z-index: 2 !important;
  animation: kenely-cta-sway 4.5s ease-in-out infinite;
}
@keyframes kenely-cta-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
.kenely-cta-splash {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 620px;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  animation: kenely-cta-pulse 5s ease-in-out infinite;
}
@keyframes kenely-cta-pulse {
  0%, 100% { transform: translate(-50%, -56%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%, -58%) scale(1.05) rotate(-1.2deg); }
}
.kenely-cta-pile {
  position: absolute;
  left: 50%;
  top: calc(50% + 168px);
  transform: translateX(-50%);
  width: 600px;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}
/* cta pellets stay inside the section — lower origin + scaled-down arcs so
   they never reach the block above (desktop) */
@media (min-width: 992px) {
  .kenely-cta-pop {
    top: calc(50% - 90px) !important;
    transform: scale(0.65);
    transform-origin: center bottom;
  }
}
.kenely-cta-pop {
  position: absolute;
  left: 50%;
  top: calc(50% - 240px);
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}
.ckp1 { animation: kpop1 2.9s linear infinite; }
.ckp2 { animation: kpop2 3.3s linear infinite; animation-delay: 0.7s; height: 16px; }
.ckp3 { animation: kpop3 2.6s linear infinite; animation-delay: 1.3s; }
.ckp4 { animation: kpop4 3.5s linear infinite; animation-delay: 1.9s; height: 17px; }
.ckp5 { animation: kpop5 3.0s linear infinite; animation-delay: 2.4s; height: 15px; }
.ckp6 { animation: kpop6 3.2s linear infinite; animation-delay: 0.4s; }

/* splash layer behind the Lamb & Rice bag in the product-info section */
.product-info-center {
  position: relative;
}
.kenely-info-splash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  animation: kenely-cta-pulse 5s ease-in-out infinite;
}
.product-info-center img.product-info-image {
  position: relative;
  z-index: 2;
}

/* "Life with Kenely pets": keep the heading above the flying products */
.insta-fid-content {
  position: relative;
  z-index: 6;
}
/* positions are fully script-driven (arc layout) — blocks start stacked at the
   centre; stacking order via z-index */
.insta-fid-link-block.block5 { z-index: 2; }
.insta-fid-link-block.block6 { z-index: 3; }

/* CTA-3 banner: green gradient + swappable product layers (admin-editable) */
.cta-3-wrapper {
  background-image: linear-gradient(105deg, #dff3b2 0%, #eaf7c9 45%, #d3eda0 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  overflow: hidden;
}
.kenely-banner-img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
.kenely-banner-left {
  left: 24px;
  bottom: -56px;
  height: 78%;
  width: auto;
  transform: rotate(-14deg);
}
.kenely-banner-right {
  right: -20px;
  top: -26px;
  height: 72%;
  width: auto;
  transform: rotate(16deg);
}
.cta-3-content-block {
  position: relative;
  z-index: 1;
}

/* inline curved slogan */
svg.kenely-curve-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Extra hero line-art decorations */
.kenely-deco {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  animation: kenely-float 6s ease-in-out infinite;
}
.kenely-deco-ball {
  top: 16%;
  right: 7%;
  height: 85px;
  width: auto;
}
.kenely-deco-paw {
  top: 24%;
  left: 6%;
  height: 70px;
  width: auto;
  transform: rotate(24deg);
  animation-delay: -3s;
}
.kenely-deco-paw2 {
  top: 58%;
  left: 4%;
  height: 78px;
  width: auto;
  transform: rotate(-18deg);
  animation-delay: -5s;
}
@keyframes kenely-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}

/* Home "Explore your favorites" slider: every product on the same baseline */
.product-2-section .product-thumbnail {
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.product-2-section .product-image {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Home "fresh meals" slider: keep the cans a sensible size inside the cards */
.product-3-section .product-3-thumbnail {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.product-3-section .product-image {
  height: 250px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Products page: category filter bar — soft pills with category color dots */
.kenely-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 26px;
}
.kenely-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 28px;
  border: none;
  border-radius: 40px;
  background: #ffffff;
  color: #1c1c1c;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 30, 10, 0.10);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.kenely-filter-btn::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #141414;
  transition: background 0.22s ease, transform 0.22s ease;
}
.kenely-filter-btn[data-filter='dry']::before { background: #e8a33d; }
.kenely-filter-btn[data-filter='wet']::before { background: #4aa3df; }
.kenely-filter-btn[data-filter='snacks']::before { background: #7fb069; }
.kenely-filter-btn[data-filter='care']::before { background: #e26fa0; }
.kenely-filter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(60, 30, 10, 0.16);
}
.kenely-filter-btn.kenely-active {
  background: #16a7e0;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 167, 224, 0.38);
  transform: translateY(-3px);
}
.kenely-filter-btn.kenely-active::before {
  background: #ffffff;
  transform: scale(1.25);
}
.kenely-filter-btn:active {
  transform: translateY(-1px) scale(0.97);
}
.product-7-item.kenely-hide {
  display: none !important;
}

/* Products page grid + related products: every photo the same visual size
   (matched to the Natura Diet bags) regardless of the PNG's own proportions */
.product-7-list .product-thumbnail,
.product-6-section .product-thumbnail {
  height: 340px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.product-7-list .product-image,
.product-6-section .product-image {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.kenely-thumb-link {
  display: block;
  height: 100%;
}

/* Product detail page tweaks */
.product-main-image-block img.product-main-image {
  width: 100%;
  height: 560px;
  object-fit: contain;
  padding: 40px;
}
.product-feature-3-thumbnail img.product-feature-image {
  height: 110px;
  width: auto;
  object-fit: contain;
}
/* product detail: proper primary CTA under the size pills */
.product-detail-content .add-to-cart-block .product-select-list {
  justify-content: center;
  margin-bottom: 8px;
}
.product-detail-content .quantity-block {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.product-detail-content a.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  height: auto;
  padding: 19px 46px;
  border-radius: 40px;
  background: #141414;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.18);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.product-detail-content a.submit-button::after {
  content: '→';
  font-size: 19px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.product-detail-content a.submit-button:hover {
  background: #16a7e0;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(22, 167, 224, 0.35);
}
.product-detail-content a.submit-button:hover::after {
  transform: translateX(4px);
}
.product-detail-content a.submit-button:active {
  transform: translateY(-1px) scale(0.98);
}
a.submit-button {
  text-decoration: none;
}
/* the compare-price slot now holds the origin text — no strikethrough */
.product-compare-price {
  text-decoration: none;
}

/* Blog page product strip: uniform, compact product tiles */
.insta-fid-2-image {
  width: 100%;
  height: 230px;
  object-fit: contain;
  object-position: center bottom;
}

/* Contact page: red hero per the mockup */
.kenely-contact-hero {
  position: relative;
  background: rgb(22, 167, 224); /* same as the site header */
  padding: 42px 5% 100px;
  overflow: visible; /* the bowl hangs over the wave into the next section */
}
.kc-container {
  position: relative;
  z-index: 3; /* above the wave so the bowl layers in front of it */
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 60px;
  align-items: start;
}
.kc-title {
  color: #ffffff;
  font-size: 76px;
  line-height: 1.05;
  margin: 0 0 18px;
}
.kc-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 19px;
  line-height: 28px;
  max-width: 440px;
  margin-bottom: 34px;
}
.kc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.kc-ico {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kc-ico svg {
  width: 26px;
  height: 26px;
}
.kc-label {
  color: #ffffff;
  font-weight: 600;
  font-size: 17px;
}
.kc-val, a.kc-val {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  text-decoration: none;
}
a.kc-val:hover {
  text-decoration: underline;
}
.kc-pel {
  display: none !important;
}
.kc-bowl {
  display: block;
  width: 640px;
  max-width: 100%;
  margin-top: 8px;
  position: relative;
  top: 36px; /* the wave line crosses the bowl exactly at its middle */
  z-index: 5;
}
.kc-card {
  background: #fdfcfa;
  border-radius: 26px;
  padding: 40px 36px;
  box-shadow: 0 24px 60px rgba(90, 5, 25, 0.28);
}
.kc-card input,
.kc-card textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: #3c342c;
  background: #ffffff;
  border: 1.4px solid #e2e9ee;
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 16px;
}
.kc-card input:focus,
.kc-card textarea:focus {
  outline: none;
  border-color: #16a7e0;
}
.kc-card textarea {
  min-height: 150px;
  resize: vertical;
}
.kc-frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kc-send {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #16a7e0;
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  padding: 17px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.kc-send:hover {
  background: #8be3c9;
  color: #0d5c49;
  transform: translateY(-2px);
}
.kc-paw svg {
  width: 22px;
  height: 22px;
  display: block;
}
.kc-done {
  display: none;
  margin-top: 14px;
  text-align: center;
  color: #1d7a3d;
  font-weight: 500;
}
.kc-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.kc-d1 { left: 2%; top: 13%; height: 74px; }
.kc-d2 { left: 2.5%; top: 78%; height: 80px; transform: rotate(18deg); }
.kc-d3 { right: 4%; top: 22%; height: 86px; transform: rotate(14deg); }
.kc-d4 { right: 5%; top: 52%; height: 70px; transform: rotate(-10deg); }
.kc-pel {
  position: absolute;
  z-index: 1;
  height: 22px;
  width: auto;
  max-width: none;
  animation: kenely-float 6s ease-in-out infinite;
}
.kc-pel1 { left: 46%; top: 9%; }
.kc-pel2 { left: 50%; top: 15%; height: 16px; animation-delay: -1s; }
.kc-pel3 { left: 54%; top: 8%; height: 18px; animation-delay: -2s; }
.kc-pel4 { left: 48%; top: 21%; height: 14px; animation-delay: -3s; }
.kc-pel5 { left: 56%; top: 17%; height: 20px; animation-delay: -4s; }
.kc-pel6 { left: 52%; top: 25%; height: 15px; animation-delay: -5s; }
.kenely-contact-hero .kenely-wave {
  z-index: 2;
}
/* wave identical to the hero section's (same 70px svg from the global rule) */
.kenely-contact-hero .kenely-wave svg path {
  fill: #fdfcfa;
}
.kc-follow {
  background: #fdfcfa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 26px 0 40px;
}
.kc-follow span {
  font-size: 20px;
  font-weight: 600;
  color: #1c1c1c;
  margin-right: 6px;
}
.kc-soc {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #16a7e0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, background 0.22s ease;
}
.kc-soc svg {
  width: 23px;
  height: 23px;
}
.kc-soc:hover {
  transform: translateY(-4px) scale(1.06);
  background: #8be3c9;
}
@media (max-width: 991px) {
  .kc-container { grid-template-columns: 1fr; }
  .kc-title { font-size: 52px; }
}

/* Contact page: compact two-column layout (info card + form) */
.kenely-contact-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
}
.kenely-info-card {
  position: relative;
  overflow: hidden;
  background: #16a7e0;
  border-radius: 28px;
  color: #ffffff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kenely-info-title {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.1;
}
.kenely-info-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 22px;
}
.kenely-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.kenely-info-ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kenely-info-ico img {
  width: 24px;
  height: 24px;
}
.kenely-info-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3px;
}
.kenely-info-value,
.kenely-info-value a {
  color: #ffffff;
  font-size: 17px;
  line-height: 24px;
  text-decoration: none;
}
.kenely-info-value a:hover {
  text-decoration: underline;
}
.kenely-info-hours {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 18px;
}
.kenely-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 3px 0;
}
.kenely-info-deco {
  position: absolute;
  right: -34px;
  bottom: -30px;
  width: 170px;
  opacity: 0.16;
  transform: rotate(-18deg);
  pointer-events: none;
}
.kenely-form-card .w-form {
  margin: 0;
}
.contact-section {
  padding-bottom: 90px;
}
/* tighten the form */
.kenely-form-card input.contact-text-field {
  height: 56px;
  margin-bottom: 16px;
}
.kenely-form-card .contact-textarea {
  min-height: 150px;
  height: 150px;
  margin-bottom: 16px;
}
.kenely-form-card .contact-btn-block {
  margin-top: 4px;
}
@media (max-width: 991px) {
  .kenely-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Pet product PNGs are taller than the original juice photos — keep them in bounds */
.product-info-image {
  width: auto;
  max-height: 560px;
}
.insta-fid-image {
  height: 280px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
}

/* "Explore your favorites" looping carousel (arrow-driven) — full-bleed:
   breaks out of the container to use the empty side space (6-up on desktop) */
.kenely-carousel {
  overflow: hidden;
  padding: 20px 24px 10px;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.product-2-section .product-inner {
  position: relative;
}
/* custom round arrows in the site's own style */
.kenely-car-arrow {
  position: absolute;
  top: 11px; /* level with the "Explore your favorites" heading */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #141414;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.25s ease, transform 0.25s ease;
}
.kenely-car-arrow:hover {
  background: #16a7e0;
  transform: scale(1.1);
}
.kenely-car-arrow:active {
  transform: scale(0.95);
}
.kenely-car-prev {
  right: 78px;
}
.kenely-car-next {
  right: 8px;
}
.kenely-carousel-track {
  display: flex;
  gap: 44px;
  width: max-content;
  will-change: transform;
}
.kenely-car-item {
  width: 250px;
  flex: 0 0 auto;
}
.kenely-car-item .product-item-wrapper {
  opacity: 1 !important;
}


/* Hero: red area cut by about a third, content scaled to match */
.hero-section {
  height: 470px !important;
  margin-top: -22px !important;
}
.hero-section .hero-title {
  font-size: 74px;
  line-height: 84px;
}
.hero-section img.hero-image1,
.hero-section img.hero-image7 {
  height: 350px !important;
}
.kenely-burst {
  width: 500px;
  bottom: -12%;
}
/* line-art paws & bones removed from the hero */
.hero-section img.hero-image3,
.hero-section .kenely-deco {
  display: none !important;
}


/* Hero tweaks: title raised, pellets smaller with lower jumps (stay clear of the header) */
.hero-section-inner {
  padding-top: 0 !important;
}
.kenely-pop .kp {
  height: 13px !important;
}
.kenely-pop .kp2,
.kenely-pop .kp5,
.kenely-pop .kp7,
.kenely-pop .kp9 {
  height: 10px !important;
}
.kenely-pop .kp1 { animation-name: khpop1; }
.kenely-pop .kp2 { animation-name: khpop2; }
.kenely-pop .kp3 { animation-name: khpop3; }
.kenely-pop .kp4 { animation-name: khpop4; }
.kenely-pop .kp5 { animation-name: khpop5; }
.kenely-pop .kp6 { animation-name: khpop6; }
.kenely-pop .kp7 { animation-name: khpop2; }
.kenely-pop .kp8 { animation-name: khpop4; }
.kenely-pop .kp9 { animation-name: khpop6; }
.kenely-pop .kp10 { animation-name: khpop3; }
@keyframes khpop1 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-51px, -90px) scale(1) rotate(150deg); opacity: 1; }
  100% { transform: translate(-81px, -25px) scale(1) rotate(280deg); opacity: 0; }
}
@keyframes khpop2 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(36px, -106px) scale(1) rotate(-130deg); opacity: 1; }
  100% { transform: translate(63px, -36px) scale(1) rotate(-240deg); opacity: 0; }
}
@keyframes khpop3 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-15px, -79px) scale(1) rotate(110deg); opacity: 1; }
  100% { transform: translate(-27px, -16px) scale(1) rotate(200deg); opacity: 0; }
}
@keyframes khpop4 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(69px, -86px) scale(1) rotate(170deg); opacity: 1; }
  100% { transform: translate(102px, -20px) scale(1) rotate(320deg); opacity: 0; }
}
@keyframes khpop5 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(12px, -115px) scale(1) rotate(-160deg); opacity: 1; }
  100% { transform: translate(24px, -43px) scale(1) rotate(-300deg); opacity: 0; }
}
@keyframes khpop6 {
  0% { transform: translate(0, 20px) scale(0.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(-78px, -97px) scale(1) rotate(140deg); opacity: 1; }
  100% { transform: translate(-114px, -32px) scale(1) rotate(260deg); opacity: 0; }
}

/* Bigger brand logo in the header */
.nav-brand-block .brand-logo-image {
  height: 120px;
  width: auto;
}


/* template bubble lottie removed (orange dots on scroll-in) */
.rounded-bubble-lottie-anim {
  display: none !important;
}

/* detail gallery: product-more-image sizing for our photos */
.product-detail-extra-image {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.product-more-image-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px;
}
img.product-more-image {
  width: auto;
  max-width: 76px;
  max-height: 76px;
  object-fit: contain;
}

.product-more-image-block.kenely-thumb-active {
  border-color: #16a7e0 !important;
  box-shadow: 0 0 0 2px rgba(22, 167, 224, 0.3);
}

/* main image tilt follows the clicked thumbnail */
.product-main-image.image-1 {
  transition: transform 0.35s ease;
}

/* ==================== RESPONSIVE (tablet & mobile) ==================== */
@media (max-width: 991px) {
  /* CTA-3 banner: the side product layers overlap the copy on smaller screens */
  .kenely-banner-img {
    display: none;
  }
  /* Life with Kenely pets: undo the desktop spread offsets */
  .insta-fid-link-block.block1,
  .insta-fid-link-block.block2,
  .insta-fid-link-block.block3,
  .insta-fid-link-block.block4,
  .insta-fid-link-block.block5,
  .insta-fid-link-block.block6 {
    margin-left: 0;
    margin-top: 0;
  }
  .insta-fid-2-image {
    height: 190px;
  }
}

@media (max-width: 767px) {
  /* hero: smaller bags, pushed below the title instead of behind it;
     everything sits lower so the bag bottoms hide behind the wave divider */
  .hero-section-inner {
    padding-top: 52px !important;
  }
  .hero-section img.hero-image1,
  .hero-section img.hero-image7 {
    height: 260px !important;
  }
  .hero-image-block {
    top: 258px !important;
  }
  .kenely-burst {
    width: 300px;
    bottom: -4%;
  }
  img.hero-image3 {
    height: 62px;
  }
  img.hero-image4 {
    height: 50px;
    top: 26px;
  }

  /* product photos scale down with the cards */
  .product-2-section .product-thumbnail {
    height: 230px;
  }
  .product-3-section .product-image {
    height: 220px;
  }
  .product-7-list .product-thumbnail,
  .product-6-section .product-thumbnail {
    height: 230px;
  }
  .product-feature-3-thumbnail img.product-feature-image {
    height: 84px;
  }
  .insta-fid-2-image {
    height: 150px;
  }

  /* carousel: smaller arrows that clear the heading */
  .kenely-car-arrow {
    width: 42px;
    height: 42px;
    top: 4px;
  }
  .kenely-car-arrow svg {
    width: 16px;
    height: 16px;
  }
  .kenely-car-prev {
    right: 52px;
  }
  .kenely-car-next {
    right: 0;
  }
  .product-2-section .section-header {
    padding-right: 104px;
    font-size: 30px;
  }
  .kenely-carousel-track {
    gap: 20px;
  }

  /* products page: filter pills wrap into neat centred rows */
  .kenely-filter-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .kenely-filter-btn {
    padding: 10px 18px;
    font-size: 15px;
  }

  /* contact page: floating pellets/line-art land on the text — hide them */
  .nav-brand-block .brand-logo-image {
    height: 66px;
  }
  .kc-pel,
  .kc-deco {
    display: none;
  }
  .kc-title {
    font-size: 44px;
  }
  .kc-card {
    padding: 22px 16px;
  }
}

/* Brand: header logo rendered white on the blue background */
.nav-brand-block .brand-logo-image {
  filter: brightness(0) invert(1);
}

/* Desktop header/hero tuning: bigger logo, menu and hero content lifted,
   hero bags raised so they are not swallowed by the wave */
@media (min-width: 992px) {
  .nav-brand-block .brand-logo-image {
    height: 150px;
  }
  .nav-menu-block {
    transform: translateY(-26px);
  }
  .hero-image-block.block1,
  .hero-image-block.block2 {
    bottom: -1.5%;
  }
  /* mirror-perfect swap: both bags sit symmetrically around the center, so the
     120%-travel lands each one exactly on the other's starting spot.
     (Webflow had left bag at right:50% but right bag at left:53% — that offset
     made one look like it traveled farther than the other.) */
  .hero-image-block.block1 {
    left: 51% !important;
  }
  .hero-image-block.block2 {
    right: 51% !important;
  }
}
@media (min-width: 1920px) {
  .hero-image-block.block1,
  .hero-image-block.block2 {
    bottom: -1.5%;
  }
}

/* dishes row: 4 cards on desktop — always identical card sizes */
@media (min-width: 992px) {
  .product-3-section .product-3-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .product-3-section .product-3-item-list,
  .product-3-section .product-3-item-block.product-3-item {
    height: 100%;
  }
  .product-3-section .product-3-item-block.product-3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 34px 18px;
  }
  .product-3-section .product-image {
    height: 250px;
    object-fit: contain;
  }
  .product-3-section .product-3-item-title {
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* "Wag, munch, repeat..." curve pulled up close to the favorites carousel,
   and the product-info block below it scaled down considerably */
@media (min-width: 992px) {
  .product-2-section.section-padding-100 {
    padding-bottom: 10px;
  }
  .product-info-text-section {
    margin-top: -20px;
  }
  .product-info-section.section-padding-100 {
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .product-info-image {
    max-height: 340px !important;
    width: auto !important;
  }
  .kenely-info-splash {
    width: 420px;
  }
  .product-info-text {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  /* the four label blocks carried fixed margins tuned for the old 550px bag —
     scaled down proportionally so the whole composition hugs the smaller bag
     (this also pulls the splash back up behind the bag: the splash centers on
     the column, whose height these margins define) */
  /* the dashed arrows sit on a layer BEHIND the splash and the bag */
  .product-info-left-side,
  .product-info-right-side {
    position: relative;
    z-index: 1;
  }
  .product-info-flex .product-info-center {
    z-index: 2;
  }
  .product-info-flex img.product-info-image {
    position: relative;
    z-index: 3;
  }
  /* labels shifted toward the product with transform — unlike margins this
     moves the block without shrinking its box, so the dashed arrows keep
     their full size */
  .product-info-left-top-side {
    margin-top: 55px !important;
    transform: translateX(200px);
  }
  .product-left-bottom-block {
    margin-top: 55px !important;
    transform: translateX(180px);
  }
  .product-info-right-top-side {
    margin-top: 75px !important;
    transform: translateX(-180px);
  }
  /* the "Natural lamb & rice" dashed arrow reaches further toward the product */
  .product-info-right-top-side img {
    transform: translateX(-55px);
  }
  .product-info-right-bottom-side {
    margin-top: 70px !important;
    transform: translateX(-160px);
  }
}

/* Homepage: no separate header bar — the logo and menu float directly on the
   hero (transparent header overlaid on the blue), so there is no boundary at
   all. Inner pages (header w-variant-…) keep their normal solid header. */
@media (min-width: 992px) {
  .header:not([class*='w-variant']) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 100;
  }
  /* the hero absorbs the old header's ~175px so the page looks the same height
     (the legacy global rule pins it at 470px !important — override in kind) */
  .hero-section {
    height: 760px !important;
    margin-top: 0 !important;
  }
  .hero-section-inner {
    padding-top: 148px !important;
  }
}

/* ==================== Mobile polish ==================== */
@media (max-width: 767px) {
  /* CTA "Where natural nutrition..." — the whole layered composition scales down
     (the splash/pile were fixed at ~620px and spilled out of the phone screen) */
  img.cta-image {
    height: 250px !important;
  }
  .kenely-cta-splash {
    width: 400px;
  }
  .kenely-cta-pile {
    width: 380px;
    top: calc(50% + 108px);
  }
  .kenely-cta-pop {
    top: calc(50% - 160px);
  }

  /* product-info section: Lamb & Rice bag and its splash stay in bounds */
  .kenely-info-splash {
    width: 400px;
  }
  .product-info-image {
    max-height: 360px;
  }

  /* "Life with Kenely pets" photos — sized for the 2-column phone grid */
  .insta-fid-image {
    height: 170px;
    max-width: 100%;
  }

  /* product detail page: main photo */
  .product-main-image-block img.product-main-image {
    height: 340px;
  }

  /* brand marquee — tighter vertical rhythm */
  .kenely-brand-marquee {
    padding: 36px 0;
  }

  /* language switcher — compact so the header row never crowds */
  .kn-lang {
    margin-right: 8px;
    padding: 3px;
  }
  .kn-lang-btn {
    padding: 6px 9px;
    font-size: 12px;
  }
}

@media (max-width: 479px) {
  /* hero: smaller bags and decor for the 350px-tall hero, content lower
     so the bag bottoms hide behind the wave */
  .hero-section-inner {
    padding-top: 34px !important;
  }
  .hero-section img.hero-image1,
  .hero-section img.hero-image7 {
    height: 190px !important;
  }
  .hero-image-block {
    top: 200px !important;
  }
  .kenely-burst {
    width: 230px;
  }
  img.hero-image3 {
    height: 44px;
  }

  /* CTA composition — one size down again */
  img.cta-image {
    height: 200px !important;
  }
  .kenely-cta-splash {
    width: 310px;
  }
  .kenely-cta-pile {
    width: 300px;
    top: calc(50% + 84px);
  }

  .kenely-info-splash {
    width: 320px;
  }
  .product-info-image {
    max-height: 300px;
  }

  .insta-fid-image {
    height: 135px;
  }
  .insta-fid-2-image {
    height: 120px;
  }

  /* product photos across the grids */
  .product-main-image-block img.product-main-image {
    height: 280px;
  }
  .product-3-section .product-image {
    height: 170px;
  }
  .product-2-section .product-thumbnail {
    height: 190px;
  }
  .product-7-list .product-thumbnail,
  .product-6-section .product-thumbnail {
    height: 190px;
  }

  /* brand marquee */
  .kbm-item {
    font-size: 22px;
  }
  .kbm-dot {
    width: 9px;
    height: 9px;
    margin: 0 14px;
  }
  .kenely-brand-marquee {
    padding: 28px 0;
  }

  /* contact hero */
  .kc-title {
    font-size: 36px;
  }
  .kc-desc {
    font-size: 16px;
    line-height: 24px;
  }
  .kc-ico {
    width: 46px;
    height: 46px;
  }
  .kc-ico svg {
    width: 22px;
    height: 22px;
  }

  /* back-to-top a touch smaller on tiny screens */
  .kn-top-btn {
    width: 42px;
    height: 42px;
  }
}

/* ============ Mobile: step-by-step refinements ============ */
@media (max-width: 767px) {
  /* 1. hero heading — two lines, scales with the viewport to use the full width */
  .hero-title {
    font-size: clamp(36px, 12vw, 62px) !important;
    line-height: 1.22 !important;
    white-space: nowrap;
  }
  .hero-title.hero-title2 {
    flex-flow: row nowrap !important;
    justify-content: center;
    gap: 8px;
  }

  /* 2. the kibble burst behind the hero products — bigger, pushed lower so its
     bottom half hides behind the wave divider (wave is z-index 10, burst 1) */
  .kenely-burst {
    width: 440px;
    bottom: -24% !important;
  }

  /* 3. the wave divider — flatter, less wavy */
  .kenely-wave svg {
    height: 32px;
  }

  /* 4. the 5 product cards — smaller and square */
  .product-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  section.product-section .product-1-thumbnail {
    aspect-ratio: 1 / 1;
    padding: 10px 8px !important;
    margin-bottom: 10px;
  }
  section.product-section .product-image.product-2-image {
    width: 54px;
    height: auto !important;
  }
  .product-1-title {
    font-size: 15px;
  }

  /* 5. CTA (Where natural nutrition...) — taller section; the product with its
     layers sits lower, and the whole art stack renders BEHIND the text/button */
  .cta-section {
    padding-top: 60px;
    padding-bottom: 90px;
  }
  .cta-content-block {
    position: relative;
    z-index: 2;
  }
  .cta-image-block {
    position: relative;
    z-index: 1; /* splash, pellets and pile all stay under the text/button */
    margin-top: 46px;
  }
  img.cta-image {
    height: 190px !important;
  }
  .kenely-cta-splash {
    width: 300px;
  }
  .kenely-cta-pile {
    width: 290px;
    top: calc(50% + 82px);
  }
  /* the jumping kibble pellets — smaller and never in front of the copy */
  .kenely-cta-pop .kp {
    max-height: 10px;
  }

  /* 6. Explore your favorites — 3 products per view */
  .kenely-carousel-track {
    gap: 10px !important;
  }
  .kenely-car-item {
    width: calc(30vw - 8px);
  }
  .product-2-section .product-thumbnail {
    height: 100px !important;
  }

  /* 7. product-info section (below Wag, munch, repeat...) — smaller, and the
     splash art stays on a layer BEHIND the text labels */
  .product-info-image {
    max-height: 250px !important;
  }
  .kenely-info-splash {
    width: 300px;
  }
  .product-info-center {
    z-index: 1; /* stacking context: splash + bag stay under the labels */
  }
  .product-info-section .product-info-text-block,
  .product-info-section .product-info-text {
    position: relative;
    z-index: 3;
  }

  /* 8. the 3 dishes at the bottom — one row */
  .product-3-section .product-3-list {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-column-gap: 12px !important;
  }
  .product-3-section .product-image {
    height: 105px !important;
  }
  .product-3-item-block.product-3-item {
    padding: 14px 8px !important;
  }
  .product-3-item-title {
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  /* 1 — same viewport-based size as ≤767 */
  .hero-title {
    font-size: clamp(32px, 12vw, 62px) !important;
    line-height: 1.22 !important;
  }
  /* 2 */
  .kenely-burst {
    width: 330px;
  }
  /* 3 */
  .kenely-wave svg {
    height: 26px;
  }
  /* 4 — keep 2 columns but tight, square cards */
  section.product-section .product-image.product-2-image {
    width: 48px;
  }
  .product-1-title {
    font-size: 14px;
  }
  /* 5 */
  img.cta-image {
    height: 160px !important;
  }
  .kenely-cta-splash {
    width: 250px;
  }
  .kenely-cta-pile {
    width: 240px;
    top: calc(50% + 68px);
  }
  /* 6 */
  .kenely-car-item {
    width: calc(30vw - 8px);
  }
  .product-2-section .product-thumbnail {
    height: 84px !important;
  }
  /* 7 */
  .product-info-image {
    max-height: 210px !important;
  }
  .kenely-info-splash {
    width: 250px;
  }
  /* 8 */
  .product-3-section .product-image {
    height: 84px !important;
  }
  .product-3-item-title {
    font-size: 12px;
  }
  .product-3-section .product-3-list {
    grid-column-gap: 8px !important;
  }
}

/* ============ Mobile corrections v3 ============ */
@media (max-width: 767px) {
  /* 2. the 5 product cards: identical squares, product exactly centred */
  section.product-section .product-1-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.product-section .product-image.product-2-image {
    width: auto !important;
    height: auto !important;
    max-width: 84%;
    max-height: 86%;
    object-fit: contain;
    margin: auto;
  }
  section.product-section .product-wrap {
    align-items: stretch;
  }

  /* 3. CTA pellets: pop from right behind the can and stay low
        (container scale shrinks the jump arcs themselves) */
  .kenely-cta-pop {
    top: calc(50% - 30px);
    transform: scale(0.45);
    transform-origin: center bottom;
  }
  .cta-image-block {
    margin-top: 70px;
  }

  /* 4. the 3 dish cards above the brand marquee: always equal size */
  .product-3-section .product-3-list {
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .product-3-section .product-3-item-block.product-3-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .product-3-section .product-image {
    object-fit: contain;
  }
  .product-3-item-title {
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
  }
}

@media (max-width: 479px) {
  /* 3 */
  .kenely-cta-pop {
    transform: scale(0.4);
  }
  .cta-image-block {
    margin-top: 54px;
  }
  /* 4 */
  .product-3-item-title {
    min-height: 32px;
  }
}

/* curve text smaller on Georgian — the ka translation overflows the path at 96px */
html[lang="ka"] .kenely-curve-svg text {
  font-size: 82px;
}

/* products page: empty filter result message */
.kn-empty {
  display: none;
  text-align: center;
  font-family: var(--font-family--heading-font);
  font-size: 24px;
  font-weight: 500;
  color: #7d8d97;
  padding: 30px 0 10px;
}

/* ==================== PRODUCT DETAIL REDESIGN ====================
   Yellow tones removed: the section uses the site-wide milky off-white,
   the main image sits on a white card, and the description/features/sizes
   live compactly in the right column next to the product image. */
.product-main-image-block {
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.07);
}
.kn-detail-info {
  margin-top: 26px;
  border-top: 1px solid rgba(22, 167, 224, 0.18);
  text-align: left;
}
.kn-detail-info .product-rich-text h4 {
  font-family: var(--font-family--heading-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16a7e0;
  margin: 20px 0 8px;
}
.kn-detail-info .product-rich-text p,
.kn-detail-info .product-rich-text li {
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 8px;
}
.kn-detail-info .product-rich-text ul {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 0;
}
.kn-detail-info .product-rich-text li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}
.kn-detail-info .product-rich-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8be3c9;
}

/* Smaller main product image so the benefits card fits below it */
.product-main-image-block img.product-main-image {
  height: 380px;
  padding: 24px;
}
/* "Nutritional health benefits" card under the main image */
.kn-feature-card {
  margin-top: 26px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.07);
  padding: 24px 26px;
  text-align: left;
}
.kn-feature-card .product-feature-3-title {
  font-family: var(--font-family--heading-font);
  font-size: 18px;
  font-weight: 600;
  color: #141414;
  margin-bottom: 6px;
}
.kn-feature-card .product-feature-3-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a4a;
  margin-bottom: 14px;
}
.kn-feature-card .product-feature-3-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.kn-feature-card .product-feature-3-thumbnail {
  background: #fdfcfa;
  border-radius: 14px;
  padding: 8px;
}
.kn-feature-card .product-feature-3-thumbnail img.product-feature-image {
  height: 64px;
}

/* Webflow pins .product-feature-3 to the bottom-right corner (absolute, pink);
   inside our card it must flow normally under the product image */
.kn-feature-card .product-feature-3 {
  position: static;
  background: transparent;
  box-shadow: none;
  max-width: none;
  border-radius: 0;
  margin-top: 0;
  padding: 0;
  text-align: left;
}

/* Benefits card: justified text */
.kn-feature-card .product-feature-3-desc,
.kn-feature-card .product-feature-3 p {
  text-align: justify;
}

/* Benefits card: centered title */
.kn-feature-card .product-feature-3-title {
  text-align: center;
}

/* Product cards: whole card is clickable */
.product-item-wrapper {
  cursor: pointer;
}

/* Home: square product cards under the hero */
.product-section .product-1-thumbnail {
  aspect-ratio: 1 / 1;
  padding: 28px;
}
.product-section .product-1-thumbnail img.product-2-image {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Home: "new dishes" slider cards are clickable */
.product-3-section .product-3-item-block[data-kn-href] {
  cursor: pointer;
}

/* ===================== Brand pages (/brands, /brand/<slug>) ===================== */

/* --- brand detail hero banner --- */
.kn-brand-hero {
  background: linear-gradient(135deg, var(--kb-soft) 0%, #fdfcfa 100%);
  padding: 64px 0 56px;
}
.kn-brand-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.kn-brand-hero-text {
  flex: 1 1 55%;
  min-width: 0;
}
.kn-brand-crumb {
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 16px;
}
.kn-brand-crumb a {
  color: var(--kb-accent);
  text-decoration: none;
  font-weight: 600;
}
.kn-brand-crumb span {
  margin-left: 7px;
}
.kn-brand-crumb span + span {
  color: #1c1c1c;
  font-weight: 600;
}
.kn-brand-title {
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 10px;
  color: #1c1c1c;
}
.kn-brand-tagline {
  font-size: 20px;
  font-weight: 600;
  color: var(--kb-accent);
  margin-bottom: 16px;
}
.kn-brand-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #454545;
  max-width: 580px;
  margin-bottom: 24px;
}
.kn-brand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kn-brand-chip {
  background: #ffffff;
  border: 2px solid var(--kb-accent);
  color: #1c1c1c;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.kn-brand-hero-art {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 280px;
}
.kn-bh-img {
  height: 270px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.16));
}
.kn-bh-img-1 {
  position: relative;
  z-index: 2;
}
.kn-bh-img-2 {
  height: 225px;
  margin-left: -48px;
  transform: rotate(7deg);
  z-index: 1;
}
.kn-bh-img-3 {
  height: 190px;
  margin-left: -40px;
  transform: rotate(-8deg);
  z-index: 0;
}

/* --- /brands listing --- */
.kn-brands-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 48px;
}
.kn-brands-title {
  font-size: 52px;
  margin: 0 0 14px;
  color: #1c1c1c;
}
.kn-brands-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}
.kn-brands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.kn-brand-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
  background: linear-gradient(135deg, var(--kb-soft) 0%, #ffffff 120%);
  border: 2px solid transparent;
  border-radius: 24px;
  padding: 30px 30px 26px;
  min-height: 220px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kn-brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.1);
  border-color: var(--kb-accent);
}
.kn-bc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.kn-bc-name {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 6px;
  color: #1c1c1c;
}
.kn-bc-tag {
  font-size: 15px;
  font-weight: 600;
  color: var(--kb-accent);
  margin-bottom: 14px;
}
.kn-bc-cta {
  margin-top: auto;
  padding-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1c;
}
.kn-brand-card:hover .kn-bc-cta {
  color: var(--kb-accent);
}
.kn-bc-art {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}
.kn-bc-img {
  height: 150px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));
}
.kn-bc-img-2 {
  height: 120px;
  margin-left: -34px;
  transform: rotate(8deg);
}

/* --- responsive --- */
@media (max-width: 991px) {
  .kn-brand-title { font-size: 44px; }
  .kn-brands-title { font-size: 42px; }
  .kn-brands-grid { gap: 18px; }
  .kn-brand-card { padding: 24px 22px 20px; min-height: 190px; }
  .kn-bc-name { font-size: 24px; }
  .kn-bc-img { height: 120px; max-width: 90px; }
  .kn-bc-img-2 { height: 96px; margin-left: -26px; }
}
@media (max-width: 767px) {
  .kn-brand-hero { padding: 40px 0 36px; }
  .kn-brand-hero-inner { flex-direction: column; gap: 26px; }
  .kn-brand-hero-text { flex: 1 1 auto; }
  .kn-brand-hero-art { min-height: 0; }
  .kn-brand-title { font-size: 36px; }
  .kn-brand-tagline { font-size: 17px; }
  .kn-bh-img { height: 190px; }
  .kn-bh-img-2 { height: 155px; margin-left: -30px; }
  .kn-bh-img-3 { height: 130px; margin-left: -26px; }
  .kn-brands-head { margin-bottom: 30px; }
  .kn-brands-title { font-size: 34px; }
  .kn-brands-desc { font-size: 15px; }
  .kn-brands-grid { grid-template-columns: 1fr; }
}

/* JPG product photos (white background) on colored brand banners:
   blend the white away; transparent PNGs keep their drop-shadow look */
.kn-bh-img[src$=".jpg"],
.kn-bc-img[src$=".jpg"] {
  mix-blend-mode: multiply;
  filter: none;
}

/* ===== Hero variant 2: Churu products leap from behind the bottom wave ===== */
.hero-section.hero-churu {
  overflow: hidden;
}
/* outer element does the jump, inner img floats/sways — feels airy and natural */
.hero-churu .kn-churu-jump {
  position: absolute;
  bottom: -12px;
  z-index: 4;
  pointer-events: none;
  transform: translateY(calc(100% + 140px));
  animation: kn-churu-jump var(--dur, 5.5s) forwards;
}
.hero-churu .kn-churu-jump img {
  display: block;
  height: var(--h, 220px);
  width: auto;
  /* absolute wrappers near the right edge must not squeeze the pack */
  max-width: none;
  animation: kn-churu-sway var(--sway, 2.4s) ease-in-out infinite alternate;
}
@keyframes kn-churu-jump {
  0% {
    transform: translateY(calc(100% + 140px));
    animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1);
  }
  36% {
    transform: translateY(var(--peak, -100px));
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: translateY(calc(var(--peak, -100px) + 16px));
    animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4);
  }
  100% {
    transform: translateY(calc(100% + 140px));
  }
}
@keyframes kn-churu-sway {
  0% { transform: rotate(var(--r1, -4deg)) translateX(-7px); }
  100% { transform: rotate(var(--r2, 4deg)) translateX(7px); }
}
@media (max-width: 767px) {
  .hero-churu .kn-churu-jump img { height: calc(var(--h, 220px) * 0.6); }
}

/* ===== Brand bar: logos instead of text ===== */
.kn-bb-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
/* per-brand tuning so every logo carries roughly the same visual weight */
.kn-bb-logo-natura-diet { height: 80px; }
.kn-bb-logo-8in1-delights { height: 74px; }
.kn-bb-logo-arquivet { height: 52px; }
.kn-bb-logo-arquivet-fresh { height: 44px; filter: invert(1); }
.kn-bb-logo-best-friend { height: 50px; }
.kn-bb-logo-record { height: 52px; }
.kn-bb-logo-mugue { height: 52px; }
.kn-bb-logo-inaba { height: 47px; }
.kn-bb-item:hover .kn-bb-logo {
  filter: drop-shadow(0 6px 10px rgba(20, 20, 20, 0.18));
}
.kn-bb-item:hover .kn-bb-logo-arquivet-fresh {
  filter: invert(1) drop-shadow(0 6px 10px rgba(230, 230, 230, 0.4));
}
@media (max-width: 767px) {
  .kn-bb-logo { height: 36px; max-width: 160px; }
  .kn-bb-logo-natura-diet { height: 52px; }
  .kn-bb-logo-8in1-delights { height: 48px; }
  .kn-bb-logo-arquivet { height: 34px; }
  .kn-bb-logo-arquivet-fresh { height: 29px; }
  .kn-bb-logo-best-friend { height: 33px; }
  .kn-bb-logo-record { height: 34px; }
  .kn-bb-logo-mugue { height: 34px; }
  .kn-bb-logo-inaba { height: 31px; }
}

/* /brands: no heading — cards start right under the header */
.kn-brands-page.section-padding-100 {
  padding-top: 34px;
}

/* ===================== Mobile polish (audit fixes) ===================== */
@media (max-width: 767px) {
  /* hero title was inheriting the desktop 74px and overflowing */
  .hero-section .hero-title {
    font-size: 40px !important;
    line-height: 50px !important;
  }
  /* products page: filter buttons ran off-screen — let them wrap */
  .kenely-filter-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible;
  }
  /* brand page hero: keep the pack collage inside the screen */
  .kn-brand-hero {
    overflow: hidden;
  }
  .kn-brand-hero-art {
    justify-content: center;
    max-width: 100%;
  }
  .kn-bh-img { height: 150px; max-width: 38%; }
  .kn-bh-img-2 { height: 122px; margin-left: -16px; }
  .kn-bh-img-3 { height: 102px; margin-left: -12px; }
}
@media (max-width: 479px) {
  .hero-section .hero-title {
    font-size: 30px !important;
    line-height: 39px !important;
  }
  /* section headings: tighter so long Georgian words wrap cleanly */
  .cta-section h2.section-header {
    font-size: 24px;
    line-height: 32px;
  }
  .product-2-section h2.section-header,
  .product-3-section h2.section-header,
  .cta-3-section h2.section-header {
    font-size: 24px;
    line-height: 32px;
  }
  /* home: 6 product cards in two tidy rows of 3 */
  .product-wrap {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-column-gap: 8px !important;
    grid-row-gap: 14px !important;
  }
  section.product-section .product-1-thumbnail {
    padding: 8px 6px !important;
    margin-bottom: 8px;
    border-radius: 14px;
  }
  section.product-section .product-image.product-2-image {
    width: 72% !important;
    height: auto !important;
  }
  .product-1-title {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }
  .kenely-product-meta {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* ===== Home: 6 cards fit one row on desktop ===== */
@media (min-width: 992px) {
  .product-wrap {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ===== Mobile: "new dishes" slider becomes a compact 2x2 grid ===== */
@media (max-width: 767px) {
  .product-3-section .product-3-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    gap: 12px !important;
    width: 100% !important;
    transform: none !important;
  }
  .product-3-section .product-3-item-list {
    width: auto !important;
    margin: 0 !important;
  }
  .product-3-item-block {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 10px 12px !important;
    border-radius: 18px;
  }
  .product-3-item-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    height: auto !important;
  }
  .product-3-section .product-image {
    height: 96px !important;
    width: auto !important;
  }
  .product-3-thumbnail {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
}

/* ===== Mobile: "Life with Kenely pets" — title dead-centre, 4 packs
   unfold from the middle of the text onto an arc around it ===== */
@media (max-width: 767px) {
  .insta-fid-section {
    height: 160vh !important;
    overflow: visible;
  }
  .insta-fid-sticky-block {
    /* pinned by JS while the section scrolls past */
    position: relative !important;
    top: 0;
    height: 100vh !important;
    overflow: hidden;
    will-change: transform;
  }
  /* the title and packs anchor straight to the 100vh pinned block —
     the in-between webflow containers must not create positioning contexts */
  .insta-fid-sticky-block > .w-container,
  .insta-fid-inner,
  .insta-fid-content-inner {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100%;
    transform: none !important;
  }
  .insta-fid-content {
    position: absolute !important;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 2;
    margin: 0 !important;
  }
  .insta-fid-content .section-heading {
    text-align: center;
  }
  .insta-fid-link-block {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 128px !important;
    height: 128px !important;
    margin: -64px 0 0 -64px !important;
    will-change: transform, opacity;
    z-index: 1;
  }
  .insta-fid-link-block img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none !important;
  }
  .insta-fid-link-block.block5,
  .insta-fid-link-block.block6 {
    display: none !important;
  }
}

/* ===== Mobile: footer — logo on top, two tidy columns, centered nav ===== */
@media (max-width: 767px) {
  .footer .first-footer {
    padding: 16px 0 8px;
  }
  .footer-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    margin: 0 !important;
  }
  .footer-nav-link {
    font-size: 14px;
    padding: 2px 0;
  }
  .footer .second-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 10px 0 6px;
    align-items: start;
  }
  /* logo + socials widget first, full width, centered
     (!important — webflow assigns grid areas via #w-node id selectors) */
  .footer .second-footer > .footer-widget:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: -1;
    text-align: center;
    justify-self: center !important;
  }
  .footer .second-footer > .footer-widget:nth-child(1),
  .footer .second-footer > .footer-widget:nth-child(3) {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
  .footer-logo-block {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
  }
  .footer-logo-block img {
    height: 42px;
    width: auto;
  }
  .footer-social-link-list {
    display: flex !important;
    justify-content: center;
    gap: 16px;
    margin: 2px 0 10px !important;
    padding: 0 !important;
  }
  .footer-social-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
  }
  .footer-social-link {
    font-size: 13px;
  }
  .footer .footer-info-block {
    margin: 0 !important;
  }
  .footer-brand {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .footer-contact-text,
  .footer-info-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 2px 0 !important;
  }
  .footer .copyright {
    padding: 10px 0 14px;
    text-align: center;
  }
  .footer .copyright-text {
    font-size: 12px;
    line-height: 1.4;
  }
}