/* SmallPetSavings layout adjustments — v1.7.0
 * Kept separate to avoid stale CSS from earlier WordPress installs/CDN caches.
 * Color values still use the WordPress Customizer's variables.
 */

/* Navigation is aligned exactly with the header and homepage container. */
.site-header .main-nav.container {
  box-sizing: border-box;
  width: min(1430px, calc(100% - 36px));
  max-width: 1430px;
  margin-inline: auto;
  border-radius: 24px;
}
.site-header .main-nav ul:not(.sub-menu) {
  justify-content: space-between;
}

/* Hero photo is intentionally proportionate, never stretched/squashed.
 * Image original: 1078 × 287. At max content width the photo occupies ~75%
 * of the 1430px container, closely preserving its original 3.76:1 ratio. */
main .hero:not(.no-image) {
  display: flex;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  min-height: 290px;
  border-radius: 22px;
  background: #f3f8ec;
}
main .hero:not(.no-image) .hero-media {
  position: absolute;
  display: block;
  grid-row: auto;
  grid-column: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 25%;
  width: auto;
  height: auto;
  min-height: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}
main .hero:not(.no-image) .hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #f3f8ec 0%,
    rgba(243,248,236,.69) 5%,
    rgba(243,248,236,.14) 15%,
    rgba(243,248,236,0) 23%);
}
main .hero:not(.no-image) .hero-copy {
  position: relative;
  width: 40%;
  flex: 0 0 40%;
  max-width: 535px;
  padding: 26px 10px 27px clamp(24px,3.4vw,49px);
  align-self: center;
  z-index: 2;
}
main .hero h1::before,
main .hero h1::after { content: none !important; display: none !important; }

/* Show the entire animal source image and soften its right edge. 
 * Prevents accidentally chopping ears, heads, or a fish's face. */
main .pet-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; }
main .pet-card { min-height: 112px; }
main .pet-card .pet-image {
  left: 0;
  bottom: 0;
  width: 48%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 97%,transparent 100%);
  mask-image: linear-gradient(90deg,#000 0%,#000 97%,transparent 100%);
}
main .pet-card:after {
  background: linear-gradient(90deg,transparent 36%,rgba(255,255,255,.08) 58%,transparent 100%);
}
main .pet-card-text {
  width: 53%;
  padding-right: 6px;
  font-size: 15px;
}

@media (min-width: 921px) and (max-width: 1300px) {
  main .hero:not(.no-image) { min-height: 250px; }
  main .hero:not(.no-image) .hero-media {
    /* Keep all six pets visible instead of cutting off a bunny or fish. */
    background-size: 100% auto;
    background-position: center center;
  }
  main .hero:not(.no-image) .hero-copy { padding-top: 17px; padding-bottom: 18px; }
  main .hero h1 { margin-bottom: 13px; }
  main .hero p { margin-bottom: 16px; }
}
@media (max-width: 1190px) {
  main .hero:not(.no-image) .hero-copy { width: 42%; flex-basis: 42%; }
  main .hero:not(.no-image) .hero-media { left: 27%; }
}
@media (max-width: 920px) {
  main .hero:not(.no-image) .hero-copy { width: 45%; flex-basis: 45%; }
  main .hero:not(.no-image) .hero-media { left: 28%; }
  main .pet-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  main .pet-card .pet-image { width: 46%; }
  main .pet-card-text { font-size: 16px; }
}
@media (max-width: 640px) {
  .site-header .main-nav.container {
    width: calc(100% - 24px);
    border-radius: 15px;
  }
  main .hero:not(.no-image) {
    display: flex;
    flex-direction: column-reverse;
  }
  main .hero:not(.no-image) .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 116px;
    height: 116px;
    background-size: 100% auto;
    background-position: center center;
  }
  main .hero:not(.no-image) .hero-media::before { display: none; }
  main .hero:not(.no-image) .hero-copy {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    padding: 19px 22px 24px;
  }
  main .pet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  main .pet-card { min-height: 98px; }
  main .pet-card .pet-image { width: 48%; }
  main .pet-card-text { font-size: 14px; }
}
@media (max-width: 360px) {
  main .pet-card-text { font-size: 12px; }
}

/* v1.5 — minimal section headings and complete clownfish thumbnail. */
#shop-by-pet .section-title,
#top-deals .section-title { gap: 0; }
#shop-by-pet .section-title > svg,
#top-deals .section-title > svg { display: none; }
main .pet-card.pet-fish .pet-image {
  width: 49%;
  height: 100%;
  left: 0;
  object-fit: contain;
  object-position: left center;
  -webkit-mask-image: none;
  mask-image: none;
}
main .pet-card.pet-fish:after { background: transparent; }
.sps-deals-disclosure {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}


/* v1.6 — cluster Shop by Pet, Deals, and Price Tracker toward Home;
   keep Popular Picks pinned to the far right on wider screens. */
@media (min-width: 641px) {
  .site-header .main-nav > ul:not(.sub-menu) {
    justify-content: flex-start;
    gap: clamp(11px, 1.65vw, 26px);
  }
  .site-header .main-nav > ul:not(.sub-menu) > li:last-child {
    margin-left: auto;
  }
}
@media (max-width: 640px) {
  .site-header .main-nav > ul:not(.sub-menu) > li:last-child {
    margin-left: 0;
  }
}


/* v1.7 — new white-background category portraits blend with their colored tiles. */
main .pet-card .pet-image {
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Keep the footer logo purple on hover; only the Savings span remains green. */
.site-footer .footer-brand:hover { color: var(--plum); }