/* ==========================================================
   Home: Trustpilot bar + hero slider
   ========================================================== */

.cms-index-index .page-main {
  background: #fbf9f4;
  box-shadow: 0 0 0 100vmax #fbf9f4;
  clip-path: inset(0 -100vmax);
}

/* Old page builder sections replaced by .ml-hero / .ml-shop-pet
   (!important: page builder inline styles use #html-body selectors) */
.cms-index-index .home-main-banner,
.cms-index-index .home-top-pro-section,
.cms-index-index .home-brand-banner {
  display: none !important;
}

.ml-home-top {
  max-width: 1160px;
  margin: 14px auto 0;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

/* ---------- Trustpilot ---------- */
.ml-trustpilot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 16px;
  background: #fff;
  border: 1px solid #dcdcd8;
  border-radius: 8px;
  box-sizing: border-box;
}

.ml-trustpilot-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ml-trustpilot-brand {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: #191919;
}

.ml-trustpilot-stars {
  display: flex;
  gap: 1px;
}

/* --fill (set per star from the admin rating) = how much of the star is green */
.ml-trustpilot-star {
  display: flex;
  width: 8px;
  height: 8px;
  background: linear-gradient(90deg, #00b67a var(--fill, 100%), #dcdce6 var(--fill, 100%));
}

/* Bar can be a link to the Trustpilot page */
a.ml-trustpilot,
a.ml-trustpilot:hover,
a.ml-trustpilot:visited {
  text-decoration: none;
}

@media (hover: hover) {
  a.ml-trustpilot:hover {
    border-color: #00b67a;
  }
}

.ml-trustpilot-star svg {
  width: 100%;
  height: 100%;
}

/* Stars fade in one by one (left to right), stay, then fade out one by one - looping.
   They dim to 20% instead of vanishing, so the rating is always readable. */
.ml-trustpilot-star {
  animation: ml-tp-star 3.2s ease-in-out infinite;
}

.ml-trustpilot-star:nth-child(2) { animation-delay: .15s; }
.ml-trustpilot-star:nth-child(3) { animation-delay: .3s; }
.ml-trustpilot-star:nth-child(4) { animation-delay: .45s; }
.ml-trustpilot-star:nth-child(5) { animation-delay: .6s; }

@keyframes ml-tp-star {
  0% { opacity: .2; }
  15%, 65% { opacity: 1; }
  85%, 100% { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-trustpilot-star {
    animation: none;
  }
}

.ml-trustpilot-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ml-trustpilot-text strong {
  font-size: 10px;
  font-weight: 600;
  color: #1f7a63;
}

.ml-trustpilot-text span {
  font-size: 9px;
  color: #666;
}

/* ---------- Hero ---------- */
.ml-hero {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  background: #f4eee6;
  border-radius: 14px;
}

/* Crossfade: all slides sit on top of each other in one grid cell (the tallest sets the
   height); the old one fades out while the new one fades in. visibility waits for the fade
   to finish, so hidden slides can't be clicked or tabbed to. */
.ml-hero-slides {
  display: grid;
}

.ml-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease-in-out, visibility 0s linear .9s;
}

.ml-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease-in-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ml-hero-slide,
  .ml-hero-slide.is-active {
    transition: none;
  }
}

@keyframes ml-hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ml-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: 780px;
  min-height: 315px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.ml-hero-content {
  position: relative;
  flex: 0 1 300px;
  align-self: center;
  padding: 72px 0 70px;
}

.ml-hero-heart {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.ml-hero-heart--small {
  top: 20px;
  left: 0;
  width: 40px;
}

.ml-hero-heart--large {
  bottom: 44px;
  left: 196px;
  width: 62px;
}

.ml-hero-title {
  margin: 0 0 14px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  color: #1f7a63;
}

.ml-hero-text {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #444;
}

.ml-hero-button,
.ml-hero-button:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: #1f7a63;
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s;
}

.ml-hero-button:hover,
.ml-hero-button:focus {
  color: #fff;
  background: #175c4a;
  text-decoration: none;
}

.ml-hero-media {
  flex: 0 1 420px;
  line-height: 0;
}

.ml-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 18px;
}

/* ---------- Hero doodles (animated) ----------
   The crown and the ear lines are cut out of hero-pets.png (hero-crown.png,
   hero-ear-line-N.png) and placed back in % of the photo, so they line up at any size.
   Hearts draw on, the ear lines pulse like sound, the crown bounces with a soft glow. */
.ml-hero-pets {
  position: relative;
  margin-top: 18px;
}

.ml-hero-media .ml-hero-pets-photo {
  margin-top: 0;
}

.ml-hero-pets picture {
  display: block;
}

.ml-hero-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ml-hero-media .ml-hero-deco {
  position: absolute;
  height: auto;
  margin: 0;
}

/* Hearts: drawn on like a pen stroke - starting at the top dip, the mask opens towards both
   sides at once (left lobe and right lobe together) and meets at the bottom point - then a
   little beat, a fade, and it is drawn again. Both hearts run in sync.
   --draw is registered so the sweep angle animates smoothly. `scale` (not transform) so the
   mobile translateX(-50%) centring of the small heart keeps working. */
@property --draw {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

.ml-hero-heart {
  -webkit-mask-image: conic-gradient(#000 calc(var(--draw) / 2), transparent 0 calc(360deg - var(--draw) / 2), #000 0);
  mask-image: conic-gradient(#000 calc(var(--draw) / 2), transparent 0 calc(360deg - var(--draw) / 2), #000 0);
  animation: ml-heart-draw 4s ease-in-out infinite;
}

@keyframes ml-heart-draw {
  0% { --draw: 0deg; opacity: 1; scale: 1; }
  38% { --draw: 360deg; scale: 1; }
  48% { scale: 1.14; }
  56% { scale: 1; }
  64% { scale: 1.08; }
  72% { scale: 1; }
  86% { --draw: 360deg; opacity: 1; }
  100% { --draw: 360deg; opacity: 0; scale: 1; }
}

/* Ear lines: one after another they push out from the ear and fade back, like sound */
.ml-hero-ear-line {
  animation: ml-ear-pulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * .12s);
}

@keyframes ml-ear-pulse {
  0%, 100% { translate: 0 0; scale: 1; opacity: .55; }
  35% { translate: calc(var(--dx) * 6px) calc(var(--dy) * 6px); scale: 1.12; opacity: 1; }
  60% { translate: 0 0; scale: 1; opacity: .8; }
}

/* Crown: bounces and wobbles non-stop with a soft golden glow */
.ml-hero-crown {
  transform-origin: 50% 100%;
  animation: ml-crown-bounce 2.4s ease-in-out infinite, ml-crown-glow 2.4s ease-in-out infinite;
}

@keyframes ml-crown-bounce {
  0%, 100% { translate: 0 0; rotate: -5deg; }
  25% { translate: 0 -7px; rotate: 0deg; }
  50% { translate: 0 0; rotate: 5deg; }
  75% { translate: 0 -7px; rotate: 0deg; }
}

@keyframes ml-crown-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 209, 107, 0)); }
  50% { filter: drop-shadow(0 0 5px rgba(242, 209, 107, .75)); }
}

@media (prefers-reduced-motion: reduce) {
  .ml-hero-heart,
  .ml-hero-ear-line,
  .ml-hero-crown {
    animation: none;
  }

  .ml-hero-ear-line {
    opacity: 1;
  }
}

.ml-hero-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  display: flex;
  gap: 5px;
  width: 780px;
  max-width: calc(100% - 40px);
  transform: translateX(-50%);
}

.ml-hero-dots .ml-hero-dot {
  width: 6px;
  height: 6px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 1px solid #1f7a63;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.ml-hero-dots .ml-hero-dot.is-active {
  background: #1f7a63;
}

/* ---------- Shop by Pet ---------- */
.ml-shop-pet {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 0 10px;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

.ml-shop-pet-heading {
  margin: 0 0 30px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: #2b2b2b;
}

.ml-shop-pet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ml-shop-pet-card,
.ml-shop-pet-card:visited {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 376 / 174;
  overflow: hidden;
  padding: 0 0 0 7.5%;
  border-radius: 16px;
  text-decoration: none;
  box-sizing: border-box;
}

.ml-shop-pet-card:hover,
.ml-shop-pet-card:focus {
  text-decoration: none;
}

.ml-shop-pet-card--dog {
  background: #1f7a68;
}

.ml-shop-pet-card--cat {
  background: #c7d8a9;
}

.ml-shop-pet-paw {
  position: absolute;
  top: -12%;
  left: 4%;
  width: 92%;
  height: 135%;
  pointer-events: none;
}

.ml-shop-pet-card--dog .ml-shop-pet-paw {
  fill: #2a8170;
}

.ml-shop-pet-card--cat .ml-shop-pet-paw {
  fill: #d5deb5;
}

/* Background paw bubbles drift slowly from bottom to top. The SVG holds the paw twice,
   260 viewBox units apart; the track moves up exactly 260 at a constant speed, so when the
   first paw leaves the top the second is where the first started - seamless, never empty.
   The dog and cat cards are a few seconds apart so they don't move in lockstep. */
.ml-shop-pet-paw-track {
  animation: ml-paw-drift 16s linear infinite;
}

.ml-shop-pet-card--cat .ml-shop-pet-paw-track {
  animation-delay: -6s;
}

@keyframes ml-paw-drift {
  from { translate: 0 0; }
  to { translate: 0 -260px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-shop-pet-paw-track {
    animation: none;
  }
}

.ml-shop-pet-title {
  position: relative;
  z-index: 1;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 33px;
  line-height: 1.12;
}

.ml-shop-pet-card--dog .ml-shop-pet-title {
  color: #a3c49c;
}

.ml-shop-pet-card--cat .ml-shop-pet-title {
  color: #247d6a;
}

.ml-shop-pet-image {
  position: absolute;
  bottom: 0;
  height: 84%;
  width: auto;
}

.ml-shop-pet-card--dog .ml-shop-pet-image {
  left: 47%;
}

.ml-shop-pet-card--cat .ml-shop-pet-image {
  left: 49%;
  height: 80%;
}

.ml-shop-pet-arrow {
  position: absolute;
  right: 5.5%;
  bottom: 12%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.ml-shop-pet-card--dog .ml-shop-pet-arrow {
  background: #c7d8a9;
  color: #1f7a68;
}

.ml-shop-pet-card--cat .ml-shop-pet-arrow {
  background: #1f7a68;
  color: #c7d8a9;
}

/* ---------- Shop by Category ---------- */
.ml-shop-cat {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 0 10px;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

.ml-shop-cat-heading {
  margin: 0 0 30px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: #2b2b2b;
}

.ml-shop-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ml-shop-cat-card,
.ml-shop-cat-card:visited,
.ml-shop-cat-card:hover,
.ml-shop-cat-card:focus {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
}

.ml-shop-cat-blobs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ml-shop-cat-title {
  position: absolute;
  top: 15%;
  left: 8px;
  right: 8px;
  z-index: 1;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
}

.ml-shop-cat-image {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.ml-shop-cat-arrow {
  position: absolute;
  right: 9%;
  bottom: 10%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
}

.ml-shop-cat-card--raw-food { background: #c7d8a9; }
.ml-shop-cat-card--raw-food .ml-shop-cat-blobs { fill: #cfdeb5; }
.ml-shop-cat-card--raw-food .ml-shop-cat-title { color: #247d6a; }
.ml-shop-cat-card--raw-food .ml-shop-cat-arrow { color: #1f7a68; }

.ml-shop-cat-card--treats { background: #1f7a68; }
.ml-shop-cat-card--treats .ml-shop-cat-blobs { fill: #2b806e; }
.ml-shop-cat-card--treats .ml-shop-cat-title { color: #a3c49c; }
.ml-shop-cat-card--treats .ml-shop-cat-arrow { color: #1f7a68; }

.ml-shop-cat-card--accessories { background: #f7b8a4; }
.ml-shop-cat-card--accessories .ml-shop-cat-blobs { fill: #f9c4ae; }
.ml-shop-cat-card--accessories .ml-shop-cat-title { color: #c22f3a; }
.ml-shop-cat-card--accessories .ml-shop-cat-arrow { color: #c22f3a; }

.ml-shop-cat-card--supplements { background: #e3dae5; }
.ml-shop-cat-card--supplements .ml-shop-cat-blobs { fill: #ded4e1; }
.ml-shop-cat-card--supplements .ml-shop-cat-title { color: #5e4170; }
.ml-shop-cat-card--supplements .ml-shop-cat-arrow { color: #5e4170; }

/* Background bubbles drift slowly from bottom to top: the set is drawn twice 230 units
   apart and the track moves up exactly 230 at a constant speed - seamless, never empty.
   Each card starts at a different point so the four don't move in lockstep. */
.ml-shop-cat-blobs-track {
  animation: ml-blobs-drift 14s linear infinite;
}

.ml-shop-cat-card:nth-child(2) .ml-shop-cat-blobs-track { animation-delay: -3.5s; }
.ml-shop-cat-card:nth-child(3) .ml-shop-cat-blobs-track { animation-delay: -7s; }
.ml-shop-cat-card:nth-child(4) .ml-shop-cat-blobs-track { animation-delay: -10.5s; }

@keyframes ml-blobs-drift {
  from { translate: 0 0; }
  to { translate: 0 -230px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-shop-cat-blobs-track {
    animation: none;
  }
}

/* ---------- Brand banner (Super Mix) ---------- */
.ml-brand {
  position: relative;
  max-width: 900px;
  margin: 44px auto 10px;
  overflow: hidden;
  background: #62416d;
  border-radius: 16px;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

.ml-brand-blobs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #5b3a67;
  pointer-events: none;
}

/* Background shapes drift slowly from bottom to top: the set is drawn twice 300 units
   apart and the track moves up exactly 300 at a constant speed - seamless, never empty. */
.ml-brand-blobs-track {
  animation: ml-brand-drift 18s linear infinite;
}

@keyframes ml-brand-drift {
  from { translate: 0 0; }
  to { translate: 0 -300px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-brand-blobs-track {
    animation: none;
  }
}

.ml-brand-slide {
  position: relative;
  display: none;
  align-items: center;
  min-height: 245px;
}

.ml-brand-slide.is-active {
  display: flex;
  animation: ml-hero-fade .5s ease;
}

.ml-brand-content {
  flex: 0 0 48%;
  padding: 30px 20px 50px 12.5%;
  box-sizing: border-box;
}

.ml-brand-title {
  margin: 0 0 26px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: #e3dae5;
}

.ml-brand-button,
.ml-brand-button:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #4a2d55;
  background: #e3dae5;
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s;
}

.ml-brand-button:hover,
.ml-brand-button:focus {
  color: #4a2d55;
  background: #fff;
  text-decoration: none;
}

.ml-brand-media {
  flex: 0 0 44%;
  align-self: flex-end;
  margin-left: auto;
  margin-right: 6%;
  line-height: 0;
}

.ml-brand-media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 4px;
}

/* "Sound" lines either side of the packs (cut out of brand-super-mix.png, placed back in % of
   the image) pulse outwards like the hero ear lines (ml-ear-pulse); both sides together. */
.ml-brand-photo {
  position: relative;
  margin: 14px 0 4px;
}

.ml-brand-media .ml-brand-photo-img {
  margin: 0;
}

.ml-brand-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ml-brand-media .ml-brand-line {
  position: absolute;
  height: auto;
  margin: 0;
  animation: ml-ear-pulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * .12s);
}

@media (prefers-reduced-motion: reduce) {
  .ml-brand-media .ml-brand-line {
    opacity: 1;
    animation: none;
  }
}

.ml-brand-dots {
  position: absolute;
  bottom: 26px;
  left: 12.5%;
  display: flex;
  gap: 5px;
}

.ml-brand-dots .ml-brand-dot {
  width: 6px;
  height: 6px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 1px solid #e3dae5;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.ml-brand-dots .ml-brand-dot.is-active {
  background: #e3dae5;
}

/* ---------- Product tabs (Popular / New Arrivals / Best Sellers) ---------- */
.cms-index-index .home-best-seller-section {
  background: transparent;
  margin-top: 0;
  padding: 30px 0 0px;
}

/* Page builder sets min-height: 300px on the tabs content (#html-body [data-pb-style=...]) */
#html-body .home-best-sellers .tabs-content {
  min-height: auto;
}

#html-body .home-best-sellers .block-products-list.grid {
  margin-bottom: 5px;
}

#html-body .home-best-sellers ul.tabs-navigation {
  display: flex !important;
  justify-content: center;
  gap: 2px;
  width: 344px;
  max-width: 100%;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 30px;
  box-sizing: border-box;
  text-align: center !important;
  position: relative;
}

/* Sliding active background (added by home-product-toolbar.phtml) */
#html-body .home-best-sellers ul.tabs-navigation .ml-tabs-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 100%;
  background: #1f7a68;
  border-radius: 30px;
  pointer-events: none;
}

#html-body .home-best-sellers ul.tabs-navigation.ml-has-indicator .ml-tabs-indicator {
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
}

/* [class] bumps specificity above the .ui-state-active background rule below */
#html-body .home-best-sellers ul.tabs-navigation.ml-has-indicator li.tab-header[class] a.tab-title {
  background: transparent;
}

/* No blue tap/selection flash on mobile when a tab or control is tapped */
#html-body .home-best-sellers ul.tabs-navigation li.tab-header,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a,
.ml-product-toolbar button,
.ml-product-toolbar .ml-pt-option,
#html-body .home-best-sellers .ml-card button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header a:focus,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a:active {
  outline: none;
  box-shadow: none;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header a:focus-visible {
  outline: 2px solid #1f7a68;
  outline-offset: -2px;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 30px !important;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title {
  display: block;
  min-width: 0;
  padding: 17px 28px;
  font-family: 'DM Sans', 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #3a3734;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 30px;
  box-shadow: none;
  transition: background .55s, color .55s;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title:hover {
  color: #1f7a68;
  background: transparent;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header.ui-state-active a.tab-title,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header.active a.tab-title {
  color: #fff;
  background: #1f7a68;
}

#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title span.tab-title {
  font: inherit;
  color: inherit;
}

/* ---------- Product toolbar ---------- */
.ml-product-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

.ml-product-toolbar[hidden] {
  display: none;
}

.ml-pt-filter {
  position: relative;
  flex: 1 1 0;
}

.ml-product-toolbar .ml-pt-filter-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #2b2b2b;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.ml-pt-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #1f7a68;
  border: 2px solid #fbf9f4;
  border-radius: 50%;
}

.ml-pt-badge[hidden] {
  display: none;
}

.ml-pt-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 230px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  box-sizing: border-box;
}

.ml-pt-filter-panel[hidden] {
  display: none;
}

/* Pointer arrow under the filter button while the panel is open - same as the account menu.
   Drawn on the button, not the panel, because the listing panel scrolls (overflow clips it). */
.ml-product-toolbar .ml-pt-filter-toggle[aria-expanded="true"]::after {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 15px;
  z-index: 21;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  transform: rotate(45deg);
  pointer-events: none;
}

.ml-pt-filter-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2b2b2b;
}

.ml-pt-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.ml-product-toolbar .ml-pt-price input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
}

.ml-pt-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

.ml-product-toolbar .ml-pt-check input {
  margin: 0;
}

.ml-product-toolbar .ml-pt-reset {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #1f7a68;
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  cursor: pointer;
}

.ml-pt-search {
  position: relative;
  flex: 0 1 450px;
  color: #444;
}

.ml-pt-search svg {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.ml-product-toolbar .ml-pt-search input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 18px 0 46px;
  font-size: 14px;
  color: #2b2b2b;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 30px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.ml-product-toolbar .ml-pt-search input::placeholder {
  color: #3a3734;
  opacity: 1;
  transition: opacity .2s ease;
}

/* Hide placeholder while typing area is focused */
.ml-product-toolbar .ml-pt-search input:focus::placeholder {
  opacity: 0;
}

.ml-product-toolbar .ml-pt-search input:focus,
.ml-product-toolbar .ml-pt-price input:focus {
  border-color: #1f7a68;
  outline: none;
  box-shadow: none;
}

.ml-pt-selects {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex: 1 1 0;
}

.ml-pt-select {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  color: #3a3734;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Chevron: SVG so it stays centred and crisp while rotating */
.ml-pt-select:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233a3734' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  transition: transform .3s ease;
  pointer-events: none;
}

/* .is-open is toggled by home-product-toolbar.phtml while the dropdown is open */
.ml-pt-select.is-open:after {
  transform: rotate(180deg);
}

/* width:auto = select sizes to its longest option, so text is never cut (theme default is 100%) */
.ml-product-toolbar .ml-pt-select select {
  width: auto !important;
  height: 100%;
  margin: 0;
  padding: 0 36px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #3a3734;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Custom dropdown (built by home-product-toolbar.phtml) ---------- */
.ml-product-toolbar .ml-pt-select select.ml-pt-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.ml-product-toolbar .ml-pt-select-button {
  position: static;
  height: 100%;
  margin: 0;
  padding: 0 36px 0 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #3a3734;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

/* Makes the whole box (incl. "Show" label and arrow) clickable */
.ml-product-toolbar .ml-pt-select-button:before {
  content: '';
  position: absolute;
  inset: 0;
}

.ml-product-toolbar .ml-pt-select-button:hover,
.ml-product-toolbar .ml-pt-select-button:focus {
  color: #3a3734;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.ml-pt-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: -1px;
  z-index: 30;
  min-width: calc(100% + 2px);
  width: max-content;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.ml-pt-select.is-open .ml-pt-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.ml-pt-option {
  position: relative;
  margin: 0;
  padding: 10px 34px 10px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #3a3734;
  white-space: nowrap;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ml-pt-option.is-active {
  background: #f4eee6;
}

.ml-pt-option[aria-selected="true"] {
  font-weight: 700;
  color: #1f7a68;
}

.ml-pt-option[aria-selected="true"]:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 13px;
  width: 4px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid #1f7a68;
  border-bottom: 2px solid #1f7a68;
  transform: rotate(45deg);
}

.ml-pt-select--sort select {
  font-weight: 400;
}

.ml-product-toolbar .ml-pt-select select:focus {
  outline: none;
  box-shadow: none;
}

.ml-pt-select:focus-within {
  border-color: #1f7a68;
}

.ml-pt-empty {
  margin: 20px 0;
  font-size: 14px;
  text-align: center;
  color: #666;
}

.ml-pt-empty[hidden] {
  display: none;
}

/* ---------- Product cards ---------- */
/* width:100% - parent is a page builder flex column; with auto margins the box would
   shrink to its content (e.g. when search hides all products) */
#html-body .home-best-sellers {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

#html-body .home-best-sellers ol.product-items {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 0 !important;
  padding: 0;
}

#html-body .home-best-sellers ol.product-items li.product-item.ml-card {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}

#html-body .home-best-sellers .ml-card .product-item-info {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px 17px 16px 16px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  box-shadow: none;
  box-sizing: border-box;
}

#html-body .home-best-sellers .ml-card .ml-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 23px;
  padding: 0 8px 0 7px;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  background: #a72122;
  border-radius: 20px;
}

#html-body .home-best-sellers .ml-card .product-item-photo {
  display: flex;
  justify-content: center;
  margin: 11px 0 0;
}

#html-body .home-best-sellers .ml-card .product-image-container {
  width: auto !important;
  max-width: 100%;
}

#html-body .home-best-sellers .ml-card .product-image-wrapper {
  height: 140px;
  padding-bottom: 0 !important;
}

#html-body .home-best-sellers .ml-card .product-image-photo {
  position: static;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
}

#html-body .home-best-sellers .ml-card .product-item-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 0px 0px;
  text-align: left;
}

#html-body .home-best-sellers .ml-card .ml-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 5px 0 4px;
}

#html-body .home-best-sellers .ml-card .product-item-name {
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
  line-height: 18px;
}

#html-body .home-best-sellers .ml-card .product-item-name a {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: #1f7a68;
  text-decoration: none;
}

#html-body .home-best-sellers .ml-card .price-box {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

#html-body .home-best-sellers .ml-card .price-box .price,
#html-body .home-best-sellers .ml-card .price-final_price .price {
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: #1f7a68;
}

#html-body .home-best-sellers .ml-card .price-box .old-price .price {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

#html-body .home-best-sellers .ml-card .ml-card-weight {
  margin-bottom: 3.5px;
  font-size: 10px;
  line-height: 13px;
  color: #2b2b2b;
}

#html-body .home-best-sellers .ml-card .ml-card-desc {
  display: -webkit-box;
  margin: 0 0 12px;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 15px;
  color: #555;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#html-body .home-best-sellers .ml-card .product-item-inner {
  margin-top: auto !important;
}

#html-body .home-best-sellers .ml-card .product-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  margin: 0 auto !important;
}

#html-body .home-best-sellers .ml-card .product-item-actions .field.qty {
  /* flex: 0 0 calc(50% - 4.5px); */
  flex: 1 1 auto;
  width: auto !important;
  margin: 0;
  background: transparent;
}

#html-body .home-best-sellers .ml-card .ml-qty {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 11.5px;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 30px;
  box-sizing: border-box;
}

#html-body .home-best-sellers .ml-card .ml-qty .ml-qty-btn {
  position: static;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #2b2b2b;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

/* Mouse only: touch screens keep :hover after a tap */
@media (hover: hover) {
  #html-body .home-best-sellers .ml-card .ml-qty .ml-qty-btn:hover {
    background: #f2f2f2;
  }
}

#html-body .home-best-sellers .ml-card .ml-qty input.qty {
  width: 32px;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #2b2b2b;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
}

#html-body .home-best-sellers .ml-card .ml-qty input.qty::-webkit-outer-spin-button,
#html-body .home-best-sellers .ml-card .ml-qty input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#html-body .home-best-sellers .ml-card .actions-primary {
  flex: 1 1 auto;
  width: auto;
}

#html-body .home-best-sellers .ml-card .actions-primary form {
  margin: 0;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1;
  color: #1f7a68;
  white-space: nowrap;
  background: #fff;
  border: 1.5px solid #1f7a68;
  border-radius: 30px;
  box-shadow: none;
  transition: background .2s, color .2s;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart:hover,
#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart:focus {
  color: #fff;
  background: #1f7a68;
  border-color: #1f7a68;
}

#html-body .home-best-sellers .ml-card .stock {
  font-size: 13px;
  font-weight: 600;
  color: #a72122;
}

#html-body .home-best-sellers .home-see-more {
  padding: 34px 0 0;
  text-align: center;
}

#html-body .home-best-sellers .home-see-more a,
#html-body .home-best-sellers .home-see-more a:visited {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #555;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

#html-body .home-best-sellers .home-see-more a:hover,
#html-body .home-best-sellers .home-see-more a:focus {
  color: #1f7a68;
  background: transparent;
  border: 0;
  text-decoration: underline;
}

/* ---------- Product listing motion ----------
   Home tabs, category pages, "You may also like" (PDP / cart) all use these cards.
   web/js/ml-ui.js puts .ml-motion on <html> (only when motion is allowed) and gives each
   card / tab bar / toolbar / "Show more" .is-revealed the first time it scrolls into view,
   with --ml-d = its place in the stagger. Cards that were already shown never replay, so a
   tab switch, "Show more" or a filter only animates the cards that newly appear.
   Entrance animations use fill-mode `backwards`: once done they let go, so hover
   transitions on the same properties keep working and nothing stays offset. */
.ml-motion .home-best-sellers .ml-card:not(.is-revealed),
.ml-motion .home-best-sellers .tabs-navigation:not(.is-revealed),
.ml-motion .home-best-sellers .ml-product-toolbar:not(.is-revealed),
.ml-motion .home-best-sellers .home-see-more:not(.is-revealed) {
  opacity: 0;
}

.home-best-sellers .tabs-navigation.is-revealed {
  animation: ml-list-up .6s cubic-bezier(.22, .61, .36, 1) backwards;
}

.home-best-sellers .ml-product-toolbar.is-revealed {
  animation: ml-list-up .6s cubic-bezier(.22, .61, .36, 1) .12s backwards;
}

.home-best-sellers .home-see-more.is-revealed {
  animation: ml-list-up .6s cubic-bezier(.22, .61, .36, 1) .2s backwards;
}

.home-best-sellers .ml-card.is-revealed {
  animation: ml-card-in .7s cubic-bezier(.22, .61, .36, 1) var(--ml-d, 0s) backwards;
}

/* Soft teal glow + border while the card arrives, then back to its normal look */
#html-body .home-best-sellers .ml-card.is-revealed .product-item-info {
  animation: ml-card-glow 1.3s ease-out var(--ml-d, 0s) backwards;
}

#html-body .home-best-sellers .ml-card.is-revealed .product-image-photo {
  animation: ml-card-img .8s cubic-bezier(.22, .61, .36, 1) calc(var(--ml-d, 0s) + .1s) backwards;
}

#html-body .home-best-sellers .ml-card.is-revealed .ml-card-badge {
  animation: ml-card-pop .45s cubic-bezier(.22, .61, .36, 1) calc(var(--ml-d, 0s) + .3s) backwards;
}

#html-body .home-best-sellers .ml-card.is-revealed .ml-card-head {
  animation: ml-list-up .5s cubic-bezier(.22, .61, .36, 1) calc(var(--ml-d, 0s) + .18s) backwards;
}

#html-body .home-best-sellers .ml-card.is-revealed .ml-card-weight,
#html-body .home-best-sellers .ml-card.is-revealed .ml-card-desc {
  animation: ml-list-up .5s cubic-bezier(.22, .61, .36, 1) calc(var(--ml-d, 0s) + .26s) backwards;
}

#html-body .home-best-sellers .ml-card.is-revealed .product-item-inner {
  animation: ml-list-up .5s cubic-bezier(.22, .61, .36, 1) calc(var(--ml-d, 0s) + .34s) backwards;
}

@keyframes ml-list-up {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ml-card-in {
  from { opacity: 0; translate: 0 22px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes ml-card-glow {
  0% { border-color: #e3e3e3; box-shadow: 0 0 0 rgba(31, 122, 104, 0); }
  45% { border-color: #a9d3c8; box-shadow: 0 12px 28px rgba(31, 122, 104, .14); }
  100% { border-color: #e3e3e3; box-shadow: 0 0 0 rgba(31, 122, 104, 0); }
}

@keyframes ml-card-img {
  from { opacity: 0; scale: .95; }
  to { opacity: 1; scale: 1; }
}

@keyframes ml-card-pop {
  0% { opacity: 0; scale: .6; }
  70% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

/* Card hover: lift a little, image zooms inside its frame (never past the card) */
#html-body .home-best-sellers .ml-card .product-item-info {
  transition: translate .3s ease, box-shadow .3s ease, border-color .3s ease;
}

#html-body .home-best-sellers .ml-card .product-image-wrapper {
  overflow: hidden;
}

#html-body .home-best-sellers .ml-card .product-image-photo {
  transition: scale .5s cubic-bezier(.22, .61, .36, 1);
}

/* Product photos float very slightly, each card a little out of step */
.ml-motion #html-body .home-best-sellers .ml-card.is-revealed .product-item-photo {
  animation: ml-card-float 5s ease-in-out calc(var(--ml-d, 0s) + 1s) infinite alternate;
}

@keyframes ml-card-float {
  from { translate: 0 0; }
  to { translate: 0 -4px; }
}

@media (hover: hover) {
  #html-body .home-best-sellers .ml-card .product-item-info:hover {
    translate: 0 -3px;
    border-color: #d3e6e0;
    box-shadow: 0 10px 24px rgba(43, 43, 43, .08);
  }

  #html-body .home-best-sellers .ml-card .product-item-info:hover .product-image-photo {
    scale: 1.05;
  }

  #html-body .home-best-sellers .ml-card .ml-qty:hover,
  #html-body .home-best-sellers .ml-card .ml-qty:focus-within {
    border-color: #1f7a68;
  }

  #html-body .home-best-sellers .ml-card .product-item-actions .action.tocart:hover {
    box-shadow: 0 6px 14px rgba(31, 122, 104, .22);
  }
}

/* Quantity box + Add to Basket: smooth default / hover / pressed / adding / added states.
   .is-loading and .is-added are set by web/js/ml-ui.js from Magento's own add-to-cart flow. */
#html-body .home-best-sellers .ml-card .ml-qty {
  transition: border-color .2s ease;
}

#html-body .home-best-sellers .ml-card .ml-qty .ml-qty-btn {
  transition: background .2s ease, scale .15s ease;
}

#html-body .home-best-sellers .ml-card .ml-qty .ml-qty-btn:active {
  scale: .88;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart {
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, scale .15s ease;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart:active {
  scale: .97;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart.is-loading {
  cursor: progress;
  pointer-events: none;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart.is-loading span {
  animation: ml-tocart-pulse 1s ease-in-out infinite;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart.is-added {
  color: #fff;
  background: #1f7a68;
  border-color: #1f7a68;
}

#html-body .home-best-sellers .ml-card .product-item-actions .action.tocart.is-added span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 5px;
  margin: 0 7px 3px 0;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  rotate: -45deg;
  animation: ml-card-pop .35s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes ml-tocart-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Search / Show / Sort: gentle hover and focus */
.home-best-sellers .ml-pt-search,
.home-best-sellers .ml-pt-select-button,
.home-best-sellers .ml-pt-filter-toggle {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Rounded like the input so the focus ring follows the pill shape */
.home-best-sellers .ml-pt-search {
  border-radius: 30px;
}

.home-best-sellers .ml-pt-search:focus-within {
  border-color: #1f7a68;
  box-shadow: 0 0 0 3px rgba(31, 122, 104, .12);
}

@media (hover: hover) {
  .home-best-sellers .ml-pt-search:hover,
  .home-best-sellers .ml-pt-select-button:hover {
    border-color: #9cc7bc;
  }
}

@media (prefers-reduced-motion: reduce) {
  #html-body .home-best-sellers .ml-card .product-item-info,
  #html-body .home-best-sellers .ml-card .product-image-photo,
  #html-body .home-best-sellers .ml-card .product-item-actions .action.tocart {
    transition: none;
  }

  #html-body .home-best-sellers .ml-card .product-item-info:hover {
    translate: none;
  }

  #html-body .home-best-sellers .ml-card .product-item-info:hover .product-image-photo {
    scale: none;
  }

  #html-body .home-best-sellers .ml-card .product-item-actions .action.tocart.is-loading span {
    animation: none;
  }
}

/* ---------- Why Milo & Luna ---------- */
.ml-why {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 320px;
  align-items: center;
  gap: 36px;
  /* 1240px content + 20px side padding (column.main has no padding here, so the
     review blob would otherwise stick out of the screen) */
  max-width: 1280px;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 10px auto 40px;
  font-family: 'DM Sans', 'Lato', sans-serif;
}

.ml-why-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* "Sound" lines around the pets' heads (cut out of why-pets.png, placed back in % of the
   photo) pulse outwards one after another, like the hero ear lines (ml-ear-pulse);
   the cat's lines answer a moment after the dog's. */
.ml-why-pets {
  position: relative;
}

.ml-why-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ml-why-media .ml-why-line {
  position: absolute;
  height: auto;
  animation: ml-ear-pulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--n) * .12s);
}

@media (prefers-reduced-motion: reduce) {
  .ml-why-media .ml-why-line {
    opacity: 1;
    animation: none;
  }
}

.ml-why-title {
  margin: 0 0 18px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  color: #1f7a68;
}

.ml-why-content p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #555;
}

.ml-why-features {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ml-why-feature {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.ml-why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #1f7a68;
  border-radius: 50%;
}

.ml-why-feature--meat .ml-why-icon { background: #c7d8a9; }
.ml-why-feature--frozen .ml-why-icon { background: #f7b8a4; }
.ml-why-feature--grain .ml-why-icon { background: #e3dae5; }
.ml-why-feature--advice .ml-why-icon { background: #fff4d8; }

/* Feature icons: always-on motion. A soft ring in the circle's own colour keeps spreading out
   behind each icon, and each glyph moves its own way - the meat wheel turns, the van drives
   along, the leaf sways in the breeze, the bowl bobs. Staggered so they don't move in step. */
.ml-why-icon {
  position: relative;
  isolation: isolate;
}

.ml-why-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  border-radius: 50%;
  animation: ml-why-ring 2.8s ease-out infinite;
}

.ml-why-icon svg {
  transform-box: fill-box;
}

.ml-why-feature--meat .ml-why-icon svg {
  animation: ml-why-spin 9s linear infinite;
}

.ml-why-feature--frozen .ml-why-icon svg {
  animation: ml-why-drive 1.6s ease-in-out infinite;
}

.ml-why-feature--grain .ml-why-icon svg {
  transform-origin: 20% 80%;
  animation: ml-why-sway 2.6s ease-in-out infinite;
}

.ml-why-feature--advice .ml-why-icon svg {
  animation: ml-why-bob 2.2s ease-in-out infinite;
}

.ml-why-feature:nth-child(2) .ml-why-icon::after { animation-delay: .7s; }
.ml-why-feature:nth-child(3) .ml-why-icon::after { animation-delay: 1.4s; }
.ml-why-feature:nth-child(4) .ml-why-icon::after { animation-delay: 2.1s; }

@keyframes ml-why-ring {
  0% { opacity: .7; scale: 1; }
  80%, 100% { opacity: 0; scale: 1.5; }
}

@keyframes ml-why-spin {
  to { rotate: 360deg; }
}

@keyframes ml-why-drive {
  0%, 100% { translate: -2px 0; }
  25% { translate: 0 -1px; }
  50% { translate: 2px 0; }
  75% { translate: 0 -1px; }
}

@keyframes ml-why-sway {
  0%, 100% { rotate: -10deg; }
  50% { rotate: 10deg; }
}

@keyframes ml-why-bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -3px; rotate: -5deg; }
  60% { translate: 0 0; rotate: 4deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-why-icon::after,
  .ml-why-icon svg {
    animation: none !important;
  }

  .ml-why-icon::after {
    display: none;
  }
}

.ml-why-label {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f7a68;
}

.ml-why-reviews {
  position: relative;
  padding: 40px 0;
}

.ml-why-reviews:before {
  content: '';
  position: absolute;
  top: 0;
  right: -20px; /* stays inside the 20px page padding - more causes horizontal scroll */
  bottom: 0;
  left: -40px;
  z-index: 0;
  background: url('../images/home/why-review-blob.png') no-repeat center / contain;
}

.ml-review-card {
  position: relative;
  z-index: 1;
  padding: 28px 26px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
}

/* Reviews slider: all sit in one grid cell (the tallest sets the height), the nav goes in the
   row below. The new review glides in from the side it comes from while the old one glides out
   the other way - home-why.phtml sets --from (1 = right, -1 = left) on each review before
   switching. Visibility waits for the slide so hidden reviews can't be focused. */
.ml-review-card {
  display: grid;
  overflow: hidden;
}

.ml-review {
  --from: 1;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: calc(var(--from) * 70px) 0;
  transition: opacity .45s ease, translate .65s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .65s;
}

.ml-review.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .5s ease .12s, translate .65s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}

/* JS parks the incoming review on its start side without animating it there */
.ml-review.is-parking {
  transition: none;
}

.ml-review-nav {
  grid-area: 2 / 1;
}

.ml-review-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-bottom: 16px;
}

.ml-review-stars svg {
  fill: #e6e6e6;
}

.ml-review-stars svg.is-filled {
  fill: #feb363;
}

.ml-review-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f7a68;
}

.ml-review-text {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
}

.ml-review-author {
  margin: 0 0 16px;
  font-size: 10px;
  color: #555;
}

.ml-review-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.ml-review-nav .ml-review-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #555;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

.ml-review-nav .ml-review-arrow:hover {
  color: #1f7a68;
}

.ml-review-dots {
  display: flex;
  gap: 5px;
}

.ml-review-dots .ml-review-dot {
  width: 6px;
  height: 6px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 1px solid #555;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.ml-review-dots .ml-review-dot {
  transition: background .3s ease, scale .3s ease;
}

.ml-review-dots .ml-review-dot.is-active {
  background: #555;
  scale: 1.15;
}

/* ---------- Why Milo & Luna: entrance ----------
   home-why.phtml adds .ml-why--animate (only when motion is allowed) and, the first time the
   section scrolls into view, .is-inview. One sequence: pets rise in -> heading -> paragraphs
   -> the four icons pop one by one with their labels -> review card slides in from the right
   with its stars, title, text, author and dots. Afterwards the pets and the blob behind the
   card float gently. Only opacity / translate / scale move, so nothing shifts the layout. */
.ml-why {
  --ml-ease: cubic-bezier(.22, .61, .36, 1);
  overflow-x: clip; /* the card's slide-in must never make the page scroll sideways */
}

.ml-why--animate:not(.is-inview) .ml-why-pets,
.ml-why--animate:not(.is-inview) .ml-why-title,
.ml-why--animate:not(.is-inview) .ml-why-content p,
.ml-why--animate:not(.is-inview) .ml-why-icon,
.ml-why--animate:not(.is-inview) .ml-why-label,
.ml-why--animate:not(.is-inview) .ml-why-reviews:before,
.ml-why--animate:not(.is-inview) .ml-review-card {
  opacity: 0;
}

/* photo + its sound lines rise in together (the lines keep their own pulse) */
.ml-why.is-inview .ml-why-pets {
  animation: ml-why-rise .9s var(--ml-ease) both;
}

.ml-why.is-inview .ml-why-media {
  animation: ml-why-float 6s ease-in-out 1.1s infinite alternate;
}

.ml-why.is-inview .ml-why-title {
  animation: ml-why-up .7s var(--ml-ease) .15s both;
}

.ml-why.is-inview .ml-why-content p:nth-of-type(1) {
  animation: ml-why-up .7s var(--ml-ease) .3s both;
}

.ml-why.is-inview .ml-why-content p:nth-of-type(2) {
  animation: ml-why-up .7s var(--ml-ease) .42s both;
}

.ml-why.is-inview .ml-why-icon {
  animation: ml-why-pop .55s var(--ml-ease) both;
}

.ml-why.is-inview .ml-why-label {
  animation: ml-why-up .5s var(--ml-ease) both;
}

.ml-why.is-inview .ml-why-feature:nth-child(1) .ml-why-icon { animation-delay: .55s; }
.ml-why.is-inview .ml-why-feature:nth-child(1) .ml-why-label { animation-delay: .67s; }
.ml-why.is-inview .ml-why-feature:nth-child(2) .ml-why-icon { animation-delay: .67s; }
.ml-why.is-inview .ml-why-feature:nth-child(2) .ml-why-label { animation-delay: .79s; }
.ml-why.is-inview .ml-why-feature:nth-child(3) .ml-why-icon { animation-delay: .79s; }
.ml-why.is-inview .ml-why-feature:nth-child(3) .ml-why-label { animation-delay: .91s; }
.ml-why.is-inview .ml-why-feature:nth-child(4) .ml-why-icon { animation-delay: .91s; }
.ml-why.is-inview .ml-why-feature:nth-child(4) .ml-why-label { animation-delay: 1.03s; }

.ml-why.is-inview .ml-why-reviews:before {
  animation: ml-why-fade .9s ease-out .45s both, ml-why-float 8s ease-in-out 1.4s infinite alternate;
}

.ml-why.is-inview .ml-review-card {
  animation: ml-why-slide .8s var(--ml-ease) .55s both;
}

/* Inside the card - first review only, so changing reviews later is just the crossfade */
.ml-why.is-inview .ml-review:first-child .ml-review-stars svg {
  animation: ml-why-pop .4s var(--ml-ease) both;
}

.ml-why.is-inview .ml-review:first-child .ml-review-stars svg:nth-child(1) { animation-delay: .95s; }
.ml-why.is-inview .ml-review:first-child .ml-review-stars svg:nth-child(2) { animation-delay: 1.02s; }
.ml-why.is-inview .ml-review:first-child .ml-review-stars svg:nth-child(3) { animation-delay: 1.09s; }
.ml-why.is-inview .ml-review:first-child .ml-review-stars svg:nth-child(4) { animation-delay: 1.16s; }
.ml-why.is-inview .ml-review:first-child .ml-review-stars svg:nth-child(5) { animation-delay: 1.23s; }

.ml-why.is-inview .ml-review:first-child .ml-review-title {
  animation: ml-why-up .6s var(--ml-ease) 1.3s both;
}

.ml-why.is-inview .ml-review:first-child .ml-review-text {
  animation: ml-why-up .6s var(--ml-ease) 1.42s both;
}

.ml-why.is-inview .ml-review:first-child .ml-review-author {
  animation: ml-why-up .6s var(--ml-ease) 1.54s both;
}

.ml-why.is-inview .ml-review-nav {
  animation: ml-why-up .6s var(--ml-ease) 1.64s both;
}

@keyframes ml-why-rise {
  from { opacity: 0; translate: 0 26px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes ml-why-up {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ml-why-pop {
  0% { opacity: 0; scale: .6; }
  70% { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes ml-why-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ml-why-slide {
  from { opacity: 0; translate: 18px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ml-why-float {
  from { translate: 0 0; }
  to { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-review,
  .ml-review.is-active {
    translate: 0 0;
    transition: opacity .3s ease, visibility 0s;
  }

  .ml-why.is-inview .ml-why-media,
  .ml-why.is-inview .ml-why-reviews:before {
    animation: none;
  }
}

/* ---------- Tablet ---------- */
@media screen and (max-width: 1023px) {
  .ml-why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 30px;
  }

  .ml-why-reviews {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  #html-body .home-best-sellers ol.product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-pt-selects {
    gap: 10px;
  }

  .ml-brand-title {
    font-size: 26px;
  }

  .ml-shop-cat-title {
    font-size: 18px;
  }

  .ml-shop-pet-title {
    font-size: 28px;
  }

  .ml-hero-inner {
    gap: 24px;
  }

  .ml-hero-title {
    font-size: 34px;
  }

  .ml-hero-media {
    flex-basis: 380px;
  }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 767px) {
  .ml-home-top {
    margin-top: 10px;
  }

  .ml-trustpilot {
    gap: 8px;
  }

  .ml-hero {
    margin-top: 10px;
  }

  .ml-hero-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 0;
    padding: 0 20px;
    text-align: center;
  }

  .ml-hero-content {
    flex: none;
    align-self: auto;
    max-width: 320px;
    padding: 56px 0 30px;
  }

  .ml-hero-heart--small {
    top: 12px;
    left: 50%;
    width: 34px;
    transform: translateX(-50%);
  }

  .ml-hero-heart--large {
    display: none;
  }

  .ml-hero-title {
    font-size: 32px;
  }

  .ml-hero-media {
    flex: none;
    width: 100%;
    max-width: 380px;
  }

  .ml-hero-media img,
  .ml-hero-pets {
    margin-top: 0;
  }

  .ml-shop-pet {
    padding-top: 28px;
  }

  .ml-shop-pet-heading {
    margin-bottom: 18px;
  }

  .ml-shop-pet-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ml-shop-pet-title {
    font-size: 30px;
  }

  .ml-shop-cat {
    padding-top: 28px;
  }

  .ml-shop-cat-heading {
    margin-bottom: 18px;
  }

  .ml-shop-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ml-shop-cat-title {
    font-size: 17px;
  }

  .ml-brand {
    margin-top: 32px;
  }

  .cms-index-index .home-best-seller-section {
    padding: 20px 0 36px;
  }

  /* Mobile: tabs fill the full width in equal parts (no empty space at the ends),
     and tabs / toolbar row / search / products are all 12px apart */
  #html-body .home-best-sellers ul.tabs-navigation {
    width: 100%;
    margin-bottom: 12px !important;
  }

  #html-body .home-best-sellers ul.tabs-navigation li.tab-header {
    flex: 1 1 0;
  }

  #html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title {
    padding: 13px 6px;
    text-align: center;
  }

  .ml-product-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
  }

  .ml-pt-filter {
    flex: 0 0 auto;
  }

  .ml-pt-selects {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ml-pt-select {
    padding-left: 12px;
  }

  .ml-product-toolbar .ml-pt-select select {
    padding-right: 30px;
  }

  .ml-pt-select:after {
    right: 11px;
  }

  .ml-pt-search {
    order: 3;
    flex: 1 1 100%;
  }

  #html-body .home-best-sellers ol.product-items {
    gap: 10px;
  }

  #html-body .home-best-sellers .ml-card .product-item-info {
    padding: 12px 10px 14px;
  }

  #html-body .home-best-sellers .ml-card .product-item-details {
    padding: 0;
  }

  .ml-why {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
  }

  .ml-why-media {
    max-width: 320px;
    margin: 0 auto;
  }

  .ml-why-content {
    text-align: center;
  }

  .ml-why-title {
    font-size: 28px;
  }

  .ml-why-features {
    flex-wrap: wrap;
    row-gap: 18px;
  }

  .ml-why-feature {
    flex: 0 0 calc(50% - 5px);
  }

  .ml-why-reviews {
    padding: 28px 10px;
  }

  .ml-why-reviews:before {
    right: 0;
    left: 0;
  }

  #html-body .home-best-sellers .ml-card .ml-card-badge {
    top: 8px;
    left: 8px;
  }

  #html-body .home-best-sellers .ml-card .product-image-wrapper {
    height: 110px;
  }

  #html-body .home-best-sellers .ml-card .ml-card-head {
    flex-direction: column;
    gap: 2px;
  }

  #html-body .home-best-sellers .ml-card .product-item-name a,
  #html-body .home-best-sellers .ml-card .price-box .price {
    font-size: 14px;
  }

  #html-body .home-best-sellers .ml-card .product-item-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #html-body .home-best-sellers .ml-card .product-item-actions .field.qty {
    flex: none;
  }

  #html-body .home-best-sellers .ml-card .ml-qty,
  #html-body .home-best-sellers .ml-card .product-item-actions .action.tocart {
    height: 38px;
  }

  .ml-brand-slide.is-active {
    flex-direction: column;
    align-items: stretch;
  }

  .ml-brand-content {
    flex: none;
    padding: 32px 20px 0;
    text-align: center;
  }

  .ml-brand-title {
    margin-bottom: 18px;
    font-size: 26px;
  }

  .ml-brand-media {
    flex: none;
    align-self: center;
    width: 90%;
    max-width: 380px;
    margin: 0;
  }

  .ml-brand-dots {
    position: static;
    justify-content: center;
    padding: 4px 0 18px;
  }

  .ml-hero-dots {
    position: static;
    justify-content: center;
    width: auto;
    max-width: none;
    padding: 14px 0 16px;
    transform: none;
  }
}

/* ---------- Category page (product/list.phtml) ---------- */
body.catalog-category-view,
body.catalog-category-view.page-products,
body.catalog-category-view .page-main {
  background: #fbf9f4;
}

.catalog-category-view .columns-top .ml-trustpilot,
.catalog-category-view .page-main > .ml-trustpilot {
  max-width: 1160px;
  margin: 14px auto 0;
}

.catalog-category-view .page-title-wrapper {
  margin: 24px 0 18px;
  padding: 0;
  text-align: center;
}

/* Categories are set to "2 columns with left bar" in admin, but the sidebar is empty
   (filters live in the toolbar panel) - use the full width and centre the listing */
.catalog-category-view .columns .column.main {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.catalog-category-view .columns .sidebar {
  display: none;
}

#html-body .ml-listing {
  max-width: 900px;
  margin: 0 auto;
}

.catalog-category-view .page-title-wrapper .page-title {
  margin: 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  color: #2b2b2b;
}

#html-body .ml-listing ul.tabs-navigation,
#html-body .ml-listing ul.tabs-navigation li.tab-header {
  list-style: none;
}

/* Category tabs are real links - no underline on hover/focus */
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title:hover,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title:focus,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title:visited,
#html-body .home-best-sellers ul.tabs-navigation li.tab-header a.tab-title span {
  text-decoration: none;
}

#html-body .ml-listing ul.tabs-navigation li.tab-header:before,
#html-body .ml-listing ul.tabs-navigation li.tab-header:after {
  display: none;
}

#html-body .ml-listing .ml-pt-search {
  margin: 0;
}

/* Layered navigation inside the filter panel */
#html-body .ml-listing .ml-listing-filters {
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
}

#html-body .ml-listing .ml-listing-filters .block.filter {
  margin: 0;
}

/* Theme hides the filter list outside the sidebar (mobile "Shop By" toggle) - always show it here */
#html-body .ml-listing .ml-listing-filters .block.filter,
#html-body .ml-listing .ml-listing-filters .filter-content,
#html-body .ml-listing .ml-listing-filters .filter-options,
#html-body .ml-listing .ml-listing-filters .filter-options-content,
#html-body .ml-listing .ml-listing-filters .filter-current,
#html-body .ml-listing .ml-listing-filters .filter-actions {
  display: block !important;
}

#html-body .ml-listing .ml-listing-filters .filter-options {
  margin: 0;
}

#html-body .ml-listing .ml-listing-filters .filter-options-title {
  margin: 0;
  border-top: 1px solid #eee;
}

#html-body .ml-listing .ml-listing-filters .filter-options-title:first-child {
  border-top: 0;
}

#html-body .ml-listing .ml-listing-filters .filter-options-title:after {
  display: none;
}

#html-body .ml-listing .ml-listing-filters .filter-options-content {
  margin: 0 0 10px;
  padding: 0;
}

#html-body .ml-listing .ml-listing-filters .filter-options-content .item {
  margin: 0 0 6px;
}

#html-body .ml-listing .ml-listing-filters .count {
  margin-left: 4px;
  color: #888;
}

#html-body .ml-listing .ml-listing-filters .count:before {
  content: '(';
}

#html-body .ml-listing .ml-listing-filters .count:after {
  content: ')';
}

#html-body .ml-listing .ml-listing-filters .filter-count-label {
  display: none;
}

#html-body .ml-listing .ml-listing-filters .filter-current-subtitle {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #2b2b2b;
}

#html-body .ml-listing .ml-listing-filters .filter-current .items {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

#html-body .ml-listing .ml-listing-filters .filter-current .item {
  position: relative;
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 12px;
}

#html-body .ml-listing .ml-listing-filters .filter-current .action.remove {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
}

#html-body .ml-listing .ml-listing-filters .filter-current .action.remove:before {
  content: '\00d7';
  font-family: inherit;
  font-size: 16px;
  line-height: 16px;
  color: #a72122;
}

#html-body .ml-listing .ml-listing-filters .filter-current .filter-label {
  font-weight: 700;
}

#html-body .ml-listing .ml-listing-filters .filter-current .filter-label:after {
  content: ': ';
}

#html-body .ml-listing .ml-listing-filters .filter-actions {
  margin: 0 0 12px;
  font-size: 12px;
}

#html-body .ml-listing .ml-listing-filters .filter-actions a {
  color: #1f7a68;
  text-decoration: underline;
}

#html-body .ml-listing .ml-listing-filters .block-subtitle,
#html-body .ml-listing .ml-listing-filters .filter-title {
  display: none;
}

#html-body .ml-listing .ml-listing-filters .filter-options-title {
  padding: 10px 24px 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #2b2b2b;
  text-transform: none;
}

#html-body .ml-listing .ml-listing-filters .filter-options-content a {
  font-size: 13px;
  color: #3a3734;
}

#html-body .ml-listing .ml-listing-filters .filter-options-content a:hover {
  color: #1f7a68;
}

/* ---------- Mobile gutters / overflow fixes ---------- */
@media screen and (max-width: 767px) {
  /* Same 15px side gutter as the page builder rows */
  .ml-home-top,
  .ml-shop-pet,
  .ml-shop-cat,
  .ml-why {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .ml-brand {
    margin-left: 15px;
    margin-right: 15px;
  }

  .ml-hero,
  .ml-shop-pet-card,
  .ml-shop-cat-card,
  .ml-brand {
    border-radius: 14px;
  }

  /* width:100% + padding pushed the page 20px wider than the screen */
  .ml-why-reviews {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Hero on mobile: the beige box is the slides only, so the pets photo sits right on its
     bottom edge, and the slide dots sit below the box on the page background */
  .ml-home-top .ml-hero {
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  .ml-home-top .ml-hero-slides {
    overflow: hidden;
    background: #f4eee6;
    border-radius: 14px;
  }

  .ml-home-top .ml-hero-dots {
    padding: 12px 0 0;
  }
}