/** Shopify CDN: Minification failed

Line 369:18 Unexpected "{"

**/
.home_sections img {
    opacity: 1;
}
.loving_parents_section h1 {
    font-size: 32px;
}
.cat_list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    text-align: center;
  flex-wrap: wrap;
}

.cat_list img {
    width: 80px;
    border: 2px dashed #FF4645;
    border-radius: 100px;
    padding: 6px;
    height: 80px;
    background: #fff;
    margin: 20px 0;
}
span.cat_heading {
    font-weight: 700;
    font-size: 16px;
}
.cat_list img:hover {
    background: #FFFAEA;
}
.home_collection_section {
    background: #F8F8F8;
    padding: 30px 0 30px 30px;
    margin: 50px 10px;
    border-radius: 8px;
}
.swiper-slide.home_loop.swiper-slide {
    display: flex;
    align-items: center;
    background: #fff;
  border-radius: 5px;
   height: auto;
}
.loop_meta_detail {    
    flex: 1;
    padding: 10px;
}
.product-image img {
    width: 100%;
    max-width: 100px;
}
.loop_meta_detail h4 {
    text-transform: capitalize;
    line-height: 20px;
  font-size: 16px;
      font-weight: 700;
    color: #565656;
      letter-spacing: 0;
}
.loop_meta_detail h4, .loop_meta_detail .product-vendor {
    margin: 10px 0;
}
.loop_btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.product_btn {
    border: 1px solid #FF6665;
    border-radius: 5px;
    padding: 6px 12px;
    font-weight: 700;
    color: #FF6665;
   background: #fff;
  flex: 1;
    text-align: center;
}
button.product_btn.cart_btn {
    background: #ff6665;
    color: #fff;
    
}
.home_Collection_section{
  display: flex;
    flex-wrap: wrap;
   
    gap: 20px;   
    justify-content: center;
    text-align: center;
    align-items: center;
}
.colection_list
{
  flex: 0 0 calc(20% - 20px);
    text-align: center;
    padding: 30px;
}
.colection_list img {
  display: inline-block;
    width: 160px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.colection_list img:hover {
    transform: scale(1);
}
.exclusive_product_loop {
    background: #F7F7F7;
    height: auto !important;
    padding: 15px;
}
.discount_div {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.product_loop-image {
    text-align: center;   
    background: #fff;
   
}
.product_loop-image img {
  display: inline-block;
  height: 200px;
    object-fit: contain;
}
span.loop_sale_price {
    color: #BE1706;
    font-weight: 700;
    font-size: 16px;
}

.my-4 {
  margin:40px 0;
}

.counter_section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
    gap: 30px;
}

.counter_item {
  
    text-align: center;
    border-radius: 20px;
   font-weight: 600;
    font-size: 20px;
  box-shadow: 0 0px 10px 0 rgb(0, 0, 0, 0.14);
  background: linear-gradient(to bottom, #ff6b6a75,#FFECAA, #ffecaa66);    
   
    display: inline-block;
    padding: 2px;
  

}
.counter_item div {
    background: #fff;
    display: block;
    padding: 1em 3em;
   border-radius: 20px;
    display: block;
}
.counter_item h2 {
  margin:10px 0;
}

.counter_item .counter{
    margin:10px 0;
  font-size:30px;
  font-weight:700;
      display: block;
}
.offer_loop img {
    border-radius: 20px;
}
.testimonials-slide.is-selected .testimonials-slider__text {
    transform: scale(1);  
    background: linear-gradient(104.01deg, #FF89C5 -10.65%, #FACFB7 109.36%);
}
blockquote.testimonials-slider__text {
   
    border-radius: 10px;   
    border: 3px solid #fcddd4;
  padding: 50px;
}
.bottom_info {
    display: flex;
    justify-content: space-between;
  align-items: center;
}
hr.dashed-line {
    border: none;
    border-top: 1px dashed #FEBEDB;
    width: 100%;
    margin: 20px auto;
}
.quote_img {
    opacity: 1;
    width: 40px;
    margin: 20px 0;
}
.testimonials-slide.is-selected .quote_img{
      filter: grayscale(100%);
}
.footer_search_links a {
    font-size: 14px;
}
h5.h4.footer__title,
h5.section-header__title{
    letter-spacing: 1px;
    font-size: 16px;
}

.slideshow__slide {
 
    border-bottom-left-radius: 50% 14%;
    border-bottom-right-radius: 50% 14%;
}
li.dot.is-selected {
    width: 40px !important;
    border-radius: 30px;
}
.home_heading {
    text-transform: capitalize;
}
.cat_title {
    font-size:20px;
}

.swiper_pagination .pagination {
    width: 100%;
}
.swiper_pagination span.swiper-pagination-bullet {
    margin: 0 4px;
}

.swiper_pagination .swiper-pagination-bullet-active {
    background: #000000;
    width: 30px;
    border-radius: 4px;
}


.swiper_pagination .pagination {
    width: 100%;
   padding: 30px 0 0;
}
.faq_title {
  font-size:18px;
  font-weight:400;
}

.faq_section {
  margin : 0;
}

/*Product page css*/
.add_to_cart_div {
  display: flex;
    align-items: center;
    gap: 20px;
}

.add_to_cart_div form {
  padding-bottom: 0px !important;
}

.grid-product__title.grid-product__title--body {
    font-weight: 600;
    font-size: 16px;
}
span.grid-product__price--original {
    font-weight: 300;
}
.grid-product__price {
    font-weight: 800;
}

.grid__image-ratio img,
.grid-product__secondary-image img {
  height: auto;  
  object-fit: contain;
}
.grid-product__content{
  border-color: #cccccc !important;
    border-radius: 10px;
}

.product-single__vendor {   
    letter-spacing: 0; 
    background: #ff6665;
      font-size: 12px;
   font-weight: 700;
    display: inline-block;
    border-radius: 5px;
    padding: 6px 10px;
}
.product-single__vendor a {
    color: #fff !important;
}
span.product__price.on-sale,
.product__price{
    font-weight: 800;
}
span.product__price.product__price--compare {
    font-weight: 400;
}
.variant-input-wrap input[type=radio]:checked+label {
    box-shadow: 0 0 0 2px #ff6665;
    background: rgba(245,51,62,.06);
}

.collapsible-trigger-btn {
    font-size: 16px !important;
}
.product__price-savings {
       color: #fff !important;
    white-space: nowrap;
    font-weight: 900;
  font-size: 12px;
      background: #4fa769;   
    padding: 6px;
    border-radius: 5px;
}
.template-product .index-section {
    margin: 40px 0 0 0;
}
.template-collection p,
.template-collection ul,
.template-collection ol {
    font-size: 14px;
      margin-bottom: 12px;
}
.template-collection h2 {
    font-size: 20px;
    margin: 10px 0;
}

.template-collection h3 {
    font-size: 18px;
    margin: 10px 0;
}
.template-collection h4 {
    font-size: 16px;
    margin: 10px 0;
}
.template-collection header.section-header {
    text-align: left;

}
.template-collection h1.section-header__title {
    font-size: 30px;
}
body.template-collection .breadcrumb {
    text-align: left;
}
a.site-nav__dropdown-link {
    font-size: 15px !important;
}
.rte h3, .rte h4, {
    margin-bottom: 10px; 
    margin-top: 10px;
}
.video-wrapper-new {
      display: flex;
    gap: 10px;
 
}
.article img {
    opacity: 1;
}

/*media query*/

@media only screen and (max-width: 768px) {
.home_collection_section {
      padding: 20px;
}
  .video-wrapper-new {

    flex-wrap: wrap;
}
  .colection_list {
    flex: 0 0 calc(50% - 20px); 
    padding: 10px;
}
  .loop_meta_detail span.grid-product__price--savings {
    display: inline-block;
    margin-top: 10px;
}
  .colection_list img {
        width: 120px;
  }
.home_sections h2 {
    font-size: 24px;
}
  .colection_list h3 {
    font-size: 18px;
}

.template-product .grid-overflow-wrapper .grid__item {
  flex: 0 0 90vw;

}
}

/* ==========================================================================
   PHASE 1 REDESIGN — announcement bar, header, predictive search, nav row,
   header icons/spacing (local preview only).

   Scope note: purely presentational. No Liquid data logic, menu links,
   predictive-search behaviour, cart/account/wishlist routes, or tracking
   scripts were changed — only layout/appearance of existing rendered
   elements. See sections/header.liquid + snippets/header-icons.liquid for
   the accompanying minimal structural moves.
   ========================================================================== */

/* -- Announcement bar -- */
.announcement-bar {
  letter-spacing: 0.01em;
}

.announcement-text {
  font-weight: 600;
  font-size: 13px;
}

@media only screen and (min-width: 769px) {
  .announcement-text {
    font-size: 13.5px;
  }
}

/* -- Header shell -- */
.site-header {
  border-bottom: 1px solid #f0e4d6;
}

.site-header--stuck {
  box-shadow: 0 2px 12px rgba(43, 43, 45, 0.08);
}

.header-layout--left-center {
  align-items: center;
}

/* -- Centred predictive search bar (main header row) -- */
.header-layout--left-center .header-item--search-center {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0 auto;
  justify-content: center;
}

.header-item--search-center predictive-search {
  max-width: 640px;
}

.header-item--search-center input.search__input {
  width: 100%;
  height: 48px;
  border-radius: 30px;
  border: 1.5px solid #e5ddd0;
  background: #ffffff;
  padding: 0 54px 0 20px;
  font-size: 15px;
  color: #2b2b2d;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-item--search-center input.search__input:focus {
  border-color: #3fa24f;
  box-shadow: 0 0 0 3px rgba(63, 162, 79, 0.15);
  outline: none;
}

.header-item--search-center .btn--search svg path {
  stroke: #ff6665;
}

/* Hide the legacy search-icon overlay trigger for the left-center layout —
   the large inline search bar already covers this entry point everywhere.
   The overlay markup/JS itself is untouched, just not shown. */
.header-layout--left-center .js-search-header {
  display: none;
}

/* -- Navigation row (own row under the main header row) -- */
.site-header__nav-row {
  background: #fffaf4;
  border-top: 1px solid #f1e6d8;
}

.site-header__nav-row-inner {
  display: block;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 17px;
}

.site-header__nav-row .site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.site-header__nav-row .site-nav__link {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2d;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-header__nav-row .site-nav__link:hover,
.site-header__nav-row .site-nav__link[aria-expanded="true"] {
  color: #3fa24f;
  border-bottom-color: #3fa24f;
}

/* -- Header icons row & touch targets -- */
.header-item--icons .site-nav__icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.header-item--icons .site-nav__link--icon {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.header-item--icons .site-nav__link--icon .icon {
  width: 24px;
  height: 24px;
}

.site-nav__link--wishlist .icon-wishlist path {
  stroke: #ff6665;
}

/* Prevent any horizontal overflow introduced by the new rows */
.header-layout,
.site-header__nav-row,
.header-item--search-center {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Mobile (<= 768px) — compact logo/search/account/cart, full-width search,
   hamburger-only navigation (no bottom nav bar yet).
   ========================================================================== */
@media only screen and (max-width: 768px) {
  .header-layout--left-center .header-item--logo {
    order: 1;
  }

  .header-layout--left-center .header-item--icons {
    order: 2;
  }

  .header-layout--left-center .header-item--search-center {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 10px 0 0;
  }

  .header-item--search-center input.search__input {
    height: 44px;
    font-size: 14px;
  }

  .header-item--icons .site-nav__icons {
    gap: 0;
  }

  .site-header__nav-row {
    display: none;
  }
}

/* ==========================================================================
   PHASE 2 REDESIGN — hero, trust strip, shop by pet, top categories,
   Mix & Match banner (local preview only).

   Scope note: purely presentational + the two new homepage sections below.
   No product pricing, discount logic, checkout, or Mix & Match bundle
   JavaScript/price calculations were touched — the bundle logic lives
   entirely in templates/page.mix-and-match.json and is untouched.
   ========================================================================== */

/* -- Hero carousel -- */
.hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}

.hero-carousel__viewport {
  position: relative;
  overflow: hidden;
}

.hero-carousel__track {
  display: flex;
  transition: transform 0.5s ease;
}

.hero-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.hero-carousel__layout {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: var(--hero-carousel-min-height, 460px);
  padding: 56px 0;
}

.hero-carousel__slide--image-left .hero-carousel__layout {
  flex-direction: row-reverse;
}

.hero-carousel__text {
  flex: 1 1 50%;
  max-width: 560px;
  position: relative;
  z-index: 2;
}

.hero-carousel__eyebrow {
  color: #3fa24f;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero-carousel__heading {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  color: #2b2b2d;
  margin: 0 0 16px;
}

.hero-carousel__description {
  font-size: 16px;
  line-height: 1.6;
  color: #55524f;
  margin: 0 0 28px;
  max-width: 460px;
}

.hero-carousel__ctas {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

.hero-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-carousel__btn--primary {
  background: #ff6665;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(255, 102, 101, 0.25);
}

.hero-carousel__btn--primary:hover {
  transform: translateY(-2px);
  background: #f04f4e;
}

.hero-carousel__btn--secondary {
  background: transparent;
  color: #3fa24f !important;
  border: 2px solid #3fa24f;
}

.hero-carousel__btn--secondary:hover {
  background: rgba(63, 162, 79, 0.08);
  transform: translateY(-2px);
}

.hero-carousel__media {
  flex: 1 1 50%;
  position: relative;
  min-height: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-carousel__image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
}

.hero-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Theme-wide default is `img { opacity: 0 }`, only cleared by
     img[loading=eager] or by the .aos-animate[data-aos=image-fade-in]
     scroll-reveal wrapper. Carousel slides 2/3 use loading="lazy" (to
     defer the network fetch) but are never wrapped in that reveal
     element, so without this override they load successfully yet stay
     permanently invisible. All hero images are effectively above-the-fold
     content, so force them visible regardless of the loading attribute. */
  opacity: 1 !important;
}

.hero-carousel__placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 20px;
  background-color: #fef3ec;
  background-image: radial-gradient(circle at 50% 62%, rgba(255, 102, 101, 0.18) 0 16px, transparent 17px),
    radial-gradient(circle at 34% 40%, rgba(63, 162, 79, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 46% 30%, rgba(63, 162, 79, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 58% 30%, rgba(255, 102, 101, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 70% 40%, rgba(255, 102, 101, 0.18) 0 8px, transparent 9px);
  background-size: 120px 120px;
  background-repeat: repeat;
}

/* Arrows */
.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #2b2b2d;
  box-shadow: 0 4px 14px rgba(43, 43, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-carousel__arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.05);
}

.hero-carousel__arrow svg {
  width: 22px;
  height: 22px;
}

.hero-carousel__arrow--prev {
  left: 16px;
}

.hero-carousel__arrow--next {
  right: 16px;
}

/* Pagination dots */
.hero-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-carousel__dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(43, 43, 45, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-carousel__dot.is-active {
  background: #ff6665;
  transform: scale(1.2);
}

@media only screen and (max-width: 768px) {
  .hero-carousel {
    border-radius: 0 0 18px 18px;
  }

  .hero-carousel__layout,
  .hero-carousel__slide--image-left .hero-carousel__layout {
    flex-direction: column;
    text-align: center;
    padding: 36px 0 52px;
    gap: 20px;
    min-height: 0;
  }

  .hero-carousel__text,
  .hero-carousel__media {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .hero-carousel__description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-carousel__ctas {
    justify-content: center;
  }

  .hero-carousel__btn {
    padding: 0 16px;
    font-size: 13px;
  }

  .hero-carousel__media {
    min-height: 180px;
    order: 2;
  }

  .hero-carousel__placeholder {
    min-height: 180px;
    background-size: 90px 90px;
  }

  .hero-carousel__arrow {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .hero-carousel__arrow svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track {
    transition: none;
  }
}

/* -- Trust strip (scoped to this homepage section only) --
   Exactly 5 benefits, matching desktop_columns_per_row:5 in
   templates/index.json. Implemented as CSS grid per spec. -- */
[id*="trust_strip_ph2"] .text-with-icons {
  margin: 28px 0;
}

[id*="trust_strip_ph2"] .text-with-icons__blocks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(43, 43, 45, 0.06);
  overflow: hidden;
}

[id*="trust_strip_ph2"] .has-4-per-row .text-with-icons__block,
[id*="trust_strip_ph2"] .text-with-icons__block {
  width: auto;
  min-width: 0;
  max-width: none;
  grid-column: auto;
  flex: none;
  padding: 16px 10px;
  align-items: center;
  border-right: 1px solid #eee7de;
  border-bottom: 0;
}

[id*="trust_strip_ph2"] .text-with-icons__block:last-child {
  border-right: 0;
}

[id*="trust_strip_ph2"] .text-with-icons__block-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f7f1;
}

[id*="trust_strip_ph2"] .text-with-icons__block-icon svg {
  width: 20px;
  height: 20px;
}

[id*="trust_strip_ph2"] .text-with-icons__block-title h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #2b2b2d;
  white-space: nowrap;
  text-align: center;
}

[id*="trust_strip_ph2"] .text-with-icons__block-text {
  font-size: 11px;
  color: #746a63;
  line-height: 1.3;
  text-align: center;
}

@media only screen and (min-width: 1100px) {
  [id*="trust_strip_ph2"] .text-with-icons__blocks {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Tablet & mobile: below 1100px, 2 equal columns */
@media only screen and (max-width: 1099px) {
  [id*="trust_strip_ph2"] .text-with-icons {
    margin: 22px 0;
  }

  [id*="trust_strip_ph2"] .text-with-icons__blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(100% - 32px);
  }

  [id*="trust_strip_ph2"] .text-with-icons__block {
    border-right: 1px solid #eee7de;
    border-bottom: 1px solid #eee7de;
  }

  [id*="trust_strip_ph2"] .text-with-icons__block:nth-child(2n) {
    border-right: 0;
  }

  [id*="trust_strip_ph2"] .text-with-icons__block:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  [id*="trust_strip_ph2"] .text-with-icons__block-title h3 {
    white-space: normal;
  }
}

/* -- Shop by Pet (dedicated section, split text/image cards) -- */
.shop-by-pet {
  /* Top Categories directly below already carries the theme's own
     .index-section top margin, so no bottom padding here to avoid
     stacking both into one oversized gap. */
  padding: 56px 0 0;
}

.shop-by-pet__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.shop-by-pet__heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: #2b2b2d;
  margin: 0;
  text-align: center;
}

.shop-by-pet__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.1);
  flex: none;
}

.shop-by-pet__badge svg {
  width: 24px;
  height: 16px;
}

.shop-by-pet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.shop-by-pet__card {
  display: flex;
  align-items: stretch;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(43, 43, 45, 0.07);
}

.shop-by-pet__card-deco {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 64px;
  height: 64px;
  opacity: 0.08;
  color: #2b2b2d;
  pointer-events: none;
  z-index: 1;
}

.shop-by-pet__card-deco svg {
  width: 100%;
  height: 100%;
}

.shop-by-pet__card-text {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px;
  position: relative;
  z-index: 2;
}

.shop-by-pet__card-small {
  font-size: 13px;
  color: #55524f;
  margin-bottom: 6px;
}

.shop-by-pet__card-heading {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: #2b2b2d;
  margin: 0 0 18px;
}

.shop-by-pet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 30px;
  border: 2px solid var(--spet-accent, #3fa24f);
  background: transparent;
  color: var(--spet-accent, #3fa24f) !important;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.shop-by-pet__btn:hover {
  background: var(--spet-accent, #3fa24f);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.shop-by-pet__card-media {
  flex: 0 0 45%;
  min-width: 0;
  position: relative;
}

.shop-by-pet__card-image-wrap {
  position: absolute;
  inset: 0;
}

.shop-by-pet__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.shop-by-pet__card-image-wrap--fallback {
  background-size: cover;
  background-repeat: no-repeat;
}

.shop-by-pet__card-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}

@media only screen and (max-width: 768px) {
  .shop-by-pet {
    padding: 40px 0;
  }

  .shop-by-pet__heading {
    margin-bottom: 20px;
  }

  .shop-by-pet__heading h2 {
    font-size: 24px;
  }

  .shop-by-pet__badge {
    width: 32px;
    height: 32px;
  }

  .shop-by-pet__badge svg {
    width: 19px;
    height: 13px;
  }

  .shop-by-pet__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shop-by-pet__card {
    min-height: 230px;
  }

  .shop-by-pet__card-text {
    padding: 22px 20px;
  }

  .shop-by-pet__card-heading {
    font-size: 24px;
    margin-bottom: 14px;
  }
}

/* -- Top Categories: circular cards -- */
.category_section .colection_list {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(43, 43, 45, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category_section .colection_list:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(43, 43, 45, 0.12);
}

.category_section .colection_list img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: contain;
  background: #f3f7f1;
  padding: 18px;
  box-sizing: border-box;
  transform: none;
}

.category_section .colection_list img:hover {
  transform: none;
}

.category_section .colection_list__icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background: #f3f7f1;
  color: #3fa24f;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}

.category_section .cat_title {
  font-size: 16px;
  font-weight: 700;
  color: #2b2b2d;
  margin: 14px 0 6px;
}

.category_section .colection_list p:last-child {
  font-size: 12px;
  color: #746a63;
}

/* -- Mix & Match promotional banner (scoped to this homepage section only) -- */
[id*="mixmatch_banner_ph2"] .promo-grid__container {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(120deg, #fff3ee 0%, #fffaf4 60%);
  box-shadow: 0 10px 30px rgba(43, 43, 45, 0.08);
  min-height: 320px;
}

[id*="mixmatch_banner_ph2"] .promo-grid__bg-image {
  border-radius: 0;
}

/* Guarantee text contrast over any background image, regardless of how
   light or busy that photo is (readable on its own, not dependent on
   the theme's generic radial text-shadow). */
[id*="mixmatch_banner_ph2"] .promo-grid__content {
  background: linear-gradient(90deg, rgba(20, 22, 20, 0.62) 0%, rgba(20, 22, 20, 0.34) 55%, rgba(20, 22, 20, 0) 100%);
}

[id*="mixmatch_banner_ph2"] .promo-grid__content .rte--em,
[id*="mixmatch_banner_ph2"] .promo-grid__content .rte--strong,
[id*="mixmatch_banner_ph2"] .promo-grid__content .rte--block {
  color: #ffffff;
  text-shadow: none;
}

[id*="mixmatch_banner_ph2"] .promo-grid__content .rte--em {
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.95;
}

[id*="mixmatch_banner_ph2"] .promo-grid__content .btn {
  background: #3fa24f !important;
  border-radius: 30px;
  border: none !important;
  color: #fff !important;
}

@media only screen and (max-width: 768px) {
  [id*="mixmatch_banner_ph2"] .promo-grid__container {
    min-height: 280px;
  }
}

/* ==========================================================================
   PHASE 2 (Supertails-inspired pass) — product sliders/cards, section
   headers with "View All", Shop by Brand strip, and a light cohesion pass
   on testimonials/FAQ (styling only — no product, cart, discount, or
   Mix & Match logic touched anywhere below).
   ========================================================================== */

/* -- Shared section header + "View All" pill (home_product_listing /
   home_collection_listing only — .home_section-header is a class these two
   files just started rendering, not reused elsewhere) -- */
.home_section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 17px;
  text-align: center;
}

.home_section-header .home_heading {
  margin: 0;
}

.home_section-header__view-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #3fa24f;
  border: 1.5px solid #3fa24f;
  border-radius: 30px;
  padding: 8px 18px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.home_section-header__view-all:hover {
  background: #3fa24f;
  color: #fff !important;
  transform: translateY(-1px);
}

/* -- Product cards: Best Seller slider (.exclusive_product_loop) and
   Hand Picked / top-deals slider (.home_loop) — unified to the same
   vertical card treatment for a consistent look across both sliders. -- */
.exclusive_product_loop {
  background: #ffffff !important;
  border: 1px solid #f0e4d6;
  border-radius: 16px;
  padding: 14px !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.exclusive_product_loop:hover {
  box-shadow: 0 12px 28px rgba(43, 43, 45, 0.1);
  transform: translateY(-3px);
}

.swiper-slide.home_loop.swiper-slide {
  flex-direction: column;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #f0e4d6;
  border-radius: 16px;
  padding: 14px;
  height: auto;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.swiper-slide.home_loop.swiper-slide:hover {
  box-shadow: 0 12px 28px rgba(43, 43, 45, 0.1);
  transform: translateY(-3px);
}

.home_loop .product-image {
  margin-bottom: 10px;
}

.home_loop .product-image img {
  max-width: 100%;
  width: 100%;
  height: 160px;
  object-fit: contain;
}

.loop_meta_detail h4,
.loop_meta_detail p:first-child {
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2d;
  line-height: 1.35;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop_meta_detail .product-vendor {
  font-size: 12px;
  color: #918a83;
  margin: 2px 0 6px;
}

.grid-product__price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: 15px;
  color: #2b2b2d;
}

.grid-product__price--original {
  font-weight: 400;
  font-size: 12px;
  color: #a49c92;
}

.loop_btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.product_btn {
  border-radius: 30px !important;
  border-width: 1.5px !important;
  font-size: 12px !important;
  padding: 9px 14px !important;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}

.product_btn:hover {
  transform: translateY(-1px);
}

button.product_btn.cart_btn {
  background: #ff6665 !important;
  border-color: #ff6665 !important;
}

.product_btn:not(.cart_btn) {
  border-color: #3fa24f !important;
  color: #3fa24f !important;
  background: #fff !important;
}

.product_btn:not(.cart_btn):hover {
  background: #3fa24f !important;
  color: #fff !important;
}

/* -- Shop by Brand strip (scoped to this specific text-columns instance
   only — text-columns is reused elsewhere in the theme and is untouched
   there) -- */
[id*="9397ac06-adcb-47c2-832e-e8c34dba0347"] .section-header {
  margin-bottom: 26px;
}

[id*="9397ac06-adcb-47c2-832e-e8c34dba0347"] .grid__item {
  background: #ffffff;
  border: 1px solid #f0e4d6;
  border-radius: 18px;
  padding: 18px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[id*="9397ac06-adcb-47c2-832e-e8c34dba0347"] .grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(43, 43, 45, 0.08);
}

/* -- Testimonials: light cohesion pass, content untouched (scoped) -- */
[id*="b55d2c6f-17ba-408b-b227-d714e7a396ca"] .testimonials-slider__text {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(43, 43, 45, 0.06);
}

[id*="b55d2c6f-17ba-408b-b227-d714e7a396ca"] .section-header h5 {
  color: #2b2b2d;
}

/* -- FAQ: light cohesion pass, content untouched (scoped) -- */
[id*="9e619c57-ef50-4443-915c-020c3e93cae0"] {
  background: #fffaf4;
  border-radius: 24px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 8px 0 24px;
}

[id*="9e619c57-ef50-4443-915c-020c3e93cae0"] .faq_title {
  color: #2b2b2d;
}

@media only screen and (max-width: 768px) {
  .home_section-header {
    margin-bottom: 16px;
  }

  [id*="9e619c57-ef50-4443-915c-020c3e93cae0"] {
    border-radius: 18px;
    margin: 14px auto;
  }
}

/* ==========================================================================
   PHASE 3 (Supertails-inspired pass) — remaining homepage: Top Categories
   carousel shell, Mix & Match copy already restyled above, Best Sellers /
   Featured Products carousel, Why Pet Parents, Customer Reviews container,
   About Smiling Pets, Shop Top Brands carousel, Pet Care Blog cards,
   Newsletter, Floating pet offer popup, and the footer redesign.
   Styling only — no cart, discount, wishlist, review, tracking, schema or
   Mix & Match logic touched anywhere below.
   ========================================================================== */

/* -- Generic horizontal scroll-snap carousel shell (Top Categories, Best
   Sellers / Featured Products, Shop Top Brands). Individual sections set
   item widths and gaps; this just hides scrollbars and enables snapping. -- */
[data-carousel-track] {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}

[data-carousel-track]::-webkit-scrollbar {
  display: none;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #e3dcd0;
  cursor: pointer;
}

.carousel-dot.is-active {
  background: #3fa24f;
}

/* -- Global consistency: cap Best Sellers / Browse by Categories /
   Customer Reviews / Shop Top Brands at the same ~1280px content width
   used elsewhere on the redesigned homepage (the theme's shared
   .page-width otherwise runs out to 1500px). -- */
.product-carousel .page-width,
.category-rail .page-width,
.customer-reviews .page-width,
[id*="shop_top_brands_ph2"] .page-width {
  max-width: 1280px;
}

/* -- Shared "section header with view all + arrows" row -- */
.category-rail__header,
.product-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

/* Shop Top Brands header is centred, with a small decorative dog/cat
   badge beside the heading, per its own design (not the left-aligned
   "heading + view all" pattern the other carousels use). */
.logo-list__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  text-align: center;
}

.logo-list__deco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.1);
  flex: none;
}

.logo-list__deco svg {
  width: 24px;
  height: 16px;
}

.category-rail__title,
.product-carousel__title {
  font-size: 26px;
  font-weight: 700;
  color: #2b2b2d;
  margin: 0;
}

/* Browse by Categories: larger, centred heading treatment overriding the
   shared left-aligned "heading + view all" row above -- this section's
   own header is unique on the page, so restyle it broadly rather than
   scoping every rule. */
.category-rail__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 28px;
}

.category-rail__heading {
  grid-column: 2;
  text-align: center;
}

.category-rail__heading-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.category-rail__deco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.1);
  flex: none;
}

.category-rail__deco svg {
  width: 30px;
  height: 20px;
}

.category-rail__title {
  font-size: 32px;
}

.category-rail__subtitle {
  grid-column: 2;
  margin: 8px 0 0;
  color: #6b625b;
  font-size: 15px;
  text-align: center;
}

.category-rail__header-actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
}

@media only screen and (max-width: 900px) {
  .category-rail__header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .category-rail__heading,
  .category-rail__subtitle {
    grid-column: 1;
  }

  .category-rail__header-actions {
    grid-column: 1;
    justify-self: center;
  }
}

@media only screen and (max-width: 768px) {
  .category-rail__title {
    font-size: 26px;
  }

  .category-rail__deco {
    width: 38px;
    height: 38px;
  }

  .category-rail__deco svg {
    width: 26px;
    height: 17px;
  }
}

.product-carousel__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff6665;
  margin-bottom: 4px;
}

.category-rail__header-actions,
.product-carousel__header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-rail__view-all,
.product-carousel__view-all {
  font-size: 14px;
  font-weight: 600;
  color: #3fa24f;
  text-decoration: none;
  white-space: nowrap;
}

.category-rail__view-all:hover,
.product-carousel__view-all:hover {
  text-decoration: underline;
}

.category-rail__arrows,
.product-carousel__arrows,
.logo-list__arrows {
  display: flex;
  gap: 8px;
}

.category-rail__arrow,
.product-carousel__arrow,
.logo-list__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e3dcd0;
  background: #ffffff;
  color: #2b2b2d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.category-rail__arrow:hover,
.product-carousel__arrow:hover,
.logo-list__arrow:hover {
  background: #3fa24f;
  border-color: #3fa24f;
  color: #ffffff;
}

.category-rail__arrow:focus-visible,
.product-carousel__arrow:focus-visible,
.logo-list__arrow:focus-visible,
.category-rail__view-all:focus-visible,
.product-carousel__view-all:focus-visible {
  outline: 2px solid #3fa24f;
  outline-offset: 2px;
}

.category-rail__arrow[disabled],
.product-carousel__arrow[disabled],
.logo-list__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.category-rail__arrow[disabled]:hover,
.product-carousel__arrow[disabled]:hover,
.logo-list__arrow[disabled]:hover {
  background: #ffffff;
  border-color: #e3dcd0;
  color: #2b2b2d;
}

/* -- Browse by Categories: carousel shell + item sizing (card look itself
   reuses the existing .category_section .colection_list styling above) -- */
.category-rail__track {
  gap: 28px;
  padding: 4px 4px 14px;
  margin: 0;
  list-style: none;
}

.category-rail__item {
  flex: 0 0 auto;
  width: 158px;
  scroll-snap-align: start;
  text-align: center;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Premium "3D" circular tile: ivory base, soft inset tint, layered
   shadow, and a small raised ring around the image. */
.category-rail__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffffff 0%, #f7f4ee 60%, #f1f7ec 100%);
  box-shadow:
    0 2px 3px rgba(43, 43, 45, 0.05),
    0 10px 22px rgba(43, 43, 45, 0.09),
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(63, 162, 79, 0.07);
  border: 1px solid #f0e4d6;
  box-sizing: border-box;
  padding: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-rail__item:nth-child(even) .category-rail__circle {
  background: linear-gradient(150deg, #ffffff 0%, #fdf8f0 60%, #fdf1e6 100%);
  box-shadow:
    0 2px 3px rgba(43, 43, 45, 0.05),
    0 10px 22px rgba(43, 43, 45, 0.09),
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(255, 102, 101, 0.08);
}

/* Hover: card raises with a soft green glow (coral glow on the alternating
   peach tiles); only the image scales, so the circle's border never
   distorts and nothing around the tile shifts. */
.category-rail__item:hover .category-rail__circle {
  transform: translateY(-6px);
  box-shadow:
    0 4px 6px rgba(43, 43, 45, 0.07),
    0 16px 30px rgba(43, 43, 45, 0.14),
    0 0 0 8px rgba(63, 162, 79, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.category-rail__item:nth-child(even):hover .category-rail__circle {
  box-shadow:
    0 4px 6px rgba(43, 43, 45, 0.07),
    0 16px 30px rgba(43, 43, 45, 0.14),
    0 0 0 8px rgba(255, 102, 101, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.category-rail__item:hover .category-rail__circle img {
  transform: scale(1.06);
}

.category-rail__circle img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  padding: 0;
  transition: transform 0.25s ease;
}

.category-rail__circle .colection_list__icon-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: #3fa24f;
}

.category-rail a.cat_title {
  display: block;
  text-decoration: none;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
}

.category-rail__item a.cat_title:focus-visible,
.category-rail__item a.category-rail__circle:focus-visible {
  outline: 2px solid #3fa24f;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .category-rail__circle,
  .category-rail__circle img {
    transition: none;
  }

  .category-rail__item:hover .category-rail__circle {
    transform: none;
  }

  .category-rail__item:hover .category-rail__circle img {
    transform: none;
  }
}

/* Desktop: all six categories sit centred in one row without scrolling.
   Below that (tablet + mobile) the row stays a single line and becomes a
   horizontal swipe carousel instead of wrapping. */
@media only screen and (min-width: 1025px) {
  .category-rail__track {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media only screen and (max-width: 1024px) {
  .category-rail__item {
    width: 128px;
  }

  .category-rail__circle {
    width: 104px;
    height: 104px;
    padding: 16px;
  }
}

@media only screen and (max-width: 768px) {
  .category-rail__item {
    width: 112px;
  }

  .category-rail__circle {
    width: 92px;
    height: 92px;
    padding: 13px;
  }

  .category-rail a.cat_title {
    font-size: 14px;
  }
}

/* -- Best Sellers / Featured Products carousel -- */
.product-carousel {
  padding: 56px 0;
}

.product-carousel__wrap {
  position: relative;
}

/* Best Sellers renders as a real CSS grid, not a scroll carousel: exactly
   4 equal columns on desktop, filling the 1280px container, no tiny
   fixed-width cards and no horizontal scrolling needed. The prev/next
   arrows (shared markup with the other carousel sections) simply stay
   auto-disabled by carousel-scroll.js since the track never overflows. */
.product-carousel__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 4px 4px 10px;
  margin: 0;
  list-style: none;
}

/* This is the single element that makes the card ONE vertical column:
   .product-carousel__item is the flex container that directly holds both
   the rendered product (.grid-product) and the CTA button below it, so it
   must lay its children out top-to-bottom. Without flex-direction:column
   here, flex's row default puts the product content and the button side
   by side as two columns -- that was the entire cause of the split-card
   bug, nothing else in this file was responsible for it. */
.product-carousel__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Neutralise the legacy .grid__item grid system (float + one-sided
   gutter padding + percentage width classes). flex: 0 0 auto (not
   1 1 auto) is deliberate: the card content sizes to its own natural
   height, and the CTA button's margin-top: auto (further down) absorbs
   whatever slack remains so the button -- not the price row -- is what
   gets pushed to the bottom of the equal-height grid row. */
.product-carousel__item .grid__item,
.product-carousel__item .grid-product {
  display: flex;
  flex-direction: column;
  float: none;
  width: 100% !important;
  max-width: 100%;
  flex: 0 0 auto;
  min-height: 0;
  padding-left: 0;
}

.product-carousel__item {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #f0e4d6;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-carousel__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(43, 43, 45, 0.1);
}

.product-carousel__item .grid-product__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 20px 20px 12px;
  transition: none;
}

/* The "% OFF" ribbon and its trailing <br> render in-flow before the image
   whenever a product is on sale, which used to push that card's image
   (and everything below it) lower than non-sale cards. Turn it into a
   corner overlay instead so every image top aligns regardless. */
.product-carousel__item .grid-product__content > .grid-product__price--savings {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0 !important;
}

.product-carousel__item .grid-product__content > br {
  display: none;
}

.product-carousel__item .grid-product__tag {
  top: 16px;
  right: 16px;
  border-radius: 8px;
}

/* Fixed, identical image area on every card, regardless of the theme's
   aspect-ratio setting or breakpoint -- packshots are centred and never
   cropped or stretched. */
.product-carousel__item .grid__item-image-wrapper {
  position: relative;
  height: 210px;
  flex: 0 0 auto;
}

.product-carousel__item .grid__item-image-wrapper .grid-product__link {
  height: 100%;
}

.product-carousel__item .grid-product__image-mask {
  height: 100%;
}

.product-carousel__item .grid__image-ratio,
.product-carousel__item .image-wrap {
  height: 100% !important;
  padding-bottom: 0 !important;
}

.product-carousel__item .grid__image-ratio:before {
  display: none;
}

/* The meta block (title, vendor, price) grows to fill the remaining card
   height so the price row's margin-top: auto can anchor it to the
   bottom -- see below. */
.product-carousel__item .grid-product__content > a.grid-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.product-carousel__item .grid-product__meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 0 0;
}

.product-carousel__item .grid-product__title {
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

.product-carousel__item .grid-product__vendor {
  min-height: 1.1em;
}

.product-carousel__item .free-offer-badge,
.product-carousel__item .petstar-buyget-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 6px 0 0;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  background: #fdf1e6;
  color: #c9433f;
}

/* Price + savings sit directly under the title/vendor with a fixed gap --
   margin-top: auto belongs only on the CTA button area below (see
   .product-carousel__cta-wrap), never here, so this row never stretches
   away from its own content. */
.product-carousel__item .grid-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
  padding-top: 0;
}

.product-carousel__item .grid-product__price--savings {
  margin-top: 2px;
}

/* The theme's default hover-reveal Quick View overlay is redundant with
   the always-visible Add to Cart / Choose Options button below, and (being
   hover-only) never appears on touch devices anyway -- hide it here so
   each card has exactly one, always-visible action area. */
.product-carousel__item .quick-product__btn {
  display: none;
}

.product-carousel__item .grid__image-ratio,
.product-carousel__item .image-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

/* Product packshots: show the whole product, never crop it — overrides
   the theme's global product_grid_image_fill (object-fit:cover) default
   for this component only. Centred both ways inside the fixed-height
   image area set above. */
.product-carousel__item .grid-product__image {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}

.product-carousel__mobile-view-all {
  display: none;
  text-align: center;
  margin-top: 8px;
}

.product-carousel__view-all-btn {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 30px;
  border: 1.5px solid #3fa24f;
  color: #3fa24f;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* Add to Cart / Choose Options -- the one persistent action area. This is
   the ONLY element in the card that gets margin-top: auto: it's the last
   child of the flex-column .product-carousel__item, so the auto margin
   absorbs whatever height slack the equal-height grid row adds and pushes
   just this button (not the price, not the title) flush to the bottom. */
.product-carousel__cta-wrap {
  margin-top: auto;
  padding: 12px 20px 20px;
}

.product-carousel__cta-form {
  margin: 0;
}

.product-carousel__cta,
.product-carousel__cta--disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  text-align: center;
  padding: 10px 16px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-carousel__cta {
  background: #3fa24f;
  color: #ffffff;
  border: 1.5px solid #3fa24f;
}

.product-carousel__cta:hover {
  background: #35883f;
  border-color: #35883f;
  color: #ffffff;
}

.product-carousel__cta--outline {
  background: #ff6665;
  color: #ffffff;
  border: 1.5px solid #ff6665;
}

.product-carousel__cta--outline:hover {
  background: #f04c4a;
  border-color: #f04c4a;
  color: #ffffff;
}

.product-carousel__cta--disabled {
  background: #f2ede4;
  color: #8b8178;
  border: 1.5px solid #e7e0d4;
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
  .product-carousel__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 768px) {
  .product-carousel {
    padding: 36px 0;
  }

  .product-carousel__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .product-carousel__item .grid-product__content {
    padding: 14px 14px 8px;
  }

  .product-carousel__cta-wrap {
    padding: 8px 14px 14px;
  }

  .product-carousel__cta,
  .product-carousel__cta--disabled {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 12.5px;
  }

  .product-carousel__item .grid__item-image-wrapper {
    height: 150px;
  }

  .product-carousel__item .grid-product__title {
    font-size: 13px;
    min-height: 2.4em;
  }

  .product-carousel__header-actions .product-carousel__view-all {
    display: none;
  }

  .product-carousel__mobile-view-all {
    display: block;
  }
}

/* -- Why Pet Parents Choose Smiling Pets (scoped instance only) -- */
[id*="why_choose_ph2"] {
  background: #fffaf4;
  padding: 44px 0;
}

[id*="why_choose_ph2"] .section-header {
  margin-bottom: 26px;
}

[id*="why_choose_ph2"] .section-header h5,
[id*="why_choose_ph2"] .text-with-icons__block-title h3 {
  color: #2b2b2d;
}

[id*="why_choose_ph2"] .text-with-icons__blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  width: 100%;
}

[id*="why_choose_ph2"] .text-with-icons__block {
  background: #f1f7ec;
  border-radius: 20px;
  width: auto;
  padding: 26px 20px !important;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[id*="why_choose_ph2"] .text-with-icons__block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(43, 43, 45, 0.08);
}

[id*="why_choose_ph2"] .text-with-icons__block:nth-child(2) {
  background: #fdf1e6;
}

[id*="why_choose_ph2"] .text-with-icons__block:nth-child(3) {
  background: #f7f4ee;
}

[id*="why_choose_ph2"] .text-with-icons__block:nth-child(4) {
  background: #fdece9;
}

[id*="why_choose_ph2"] .text-with-icons__block-icon {
  background: #ffffff;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

[id*="why_choose_ph2"] .text-with-icons__block-icon .icon {
  width: 30px;
  height: 30px;
}

[id*="why_choose_ph2"] .text-with-icons__block-text {
  font-size: 13px;
  color: #6b625b;
  line-height: 1.5;
}

@media only screen and (max-width: 768px) {
  [id*="why_choose_ph2"] .text-with-icons__blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -- Customer Reviews -- */
.customer-reviews {
  padding: 48px 0;
  background: #fffaf4;
}

@media only screen and (max-width: 768px) {
  .customer-reviews {
    padding: 36px 0;
  }
}

.customer-reviews__heading {
  text-align: center;
  margin-bottom: 26px;
}

.customer-reviews__heading h2 {
  font-size: 26px;
  font-weight: 700;
  color: #2b2b2d;
  margin: 0 0 6px;
}

.customer-reviews__subtitle {
  color: #746a63;
  margin: 0;
}

.customer-reviews__wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px;
}

.customer-reviews__track {
  display: flex;
  gap: 22px;
  padding: 6px 4px 10px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.customer-reviews__track::-webkit-scrollbar {
  display: none;
}

.customer-reviews__card {
  flex: 0 0 calc(33.333% - 15px);
  max-width: calc(33.333% - 15px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #f3c9c1;
  border-radius: 18px;
  padding: 32px 24px 24px;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.05);
}

.customer-reviews__card--highlight {
  background: #fdf1e6;
  border-color: #ffd7cf;
  box-shadow: 0 14px 30px rgba(43, 43, 45, 0.1);
  transform: translateY(-6px);
}

.customer-reviews__quote-mark {
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 56px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: #ff6665;
  opacity: 0.35;
}

.customer-reviews__quote {
  position: relative;
  z-index: 1;
  color: #3f3a35;
  font-size: 15px;
  line-height: 1.6;
  flex: 1 1 auto;
  margin-bottom: 20px;
}

.customer-reviews__quote p {
  margin: 0;
}

.customer-reviews__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.customer-reviews__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.customer-reviews__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-reviews__author-info {
  display: flex;
  flex-direction: column;
}

.customer-reviews__author-name {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: #2b2b2d;
}

.customer-reviews__author-type {
  font-size: 12.5px;
  color: #b34d3f;
  font-weight: 600;
}

.customer-reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #f0e4d6;
  background: #ffffff;
  color: #2b2b2d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.1);
}

.customer-reviews__arrow--prev {
  left: -20px;
}

.customer-reviews__arrow--next {
  right: -20px;
}

.customer-reviews__arrow:hover {
  border-color: #3fa24f;
  color: #3fa24f;
}

.customer-reviews__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.customer-reviews__arrow[disabled]:hover {
  border-color: #f0e4d6;
  color: #2b2b2d;
}

.customer-reviews__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

@media only screen and (max-width: 1024px) {
  .customer-reviews__card {
    flex-basis: calc(50% - 11px);
    max-width: calc(50% - 11px);
  }

  .customer-reviews__card--highlight {
    transform: none;
  }
}

@media only screen and (max-width: 768px) {
  .customer-reviews__wrap {
    padding: 0 40px;
  }

  .customer-reviews__card {
    flex-basis: 100%;
    max-width: 100%;
  }

  .customer-reviews__arrow--prev {
    left: 0;
  }

  .customer-reviews__arrow--next {
    right: 0;
  }
}

/* -- Shop Top Brands carousel -- */
[id*="shop_top_brands_ph2"] {
  background: linear-gradient(180deg, #fdf1e6 0%, #f1f7ec 100%);
  padding: 56px 0;
}

[id*="shop_top_brands_ph2"] .logo-list__heading-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

[id*="shop_top_brands_ph2"] .logo-list__subtitle {
  margin: 6px 0 0;
  color: #6b625b;
  font-size: 15px;
}

[id*="shop_top_brands_ph2"] .logo-bar-wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 0 52px;
}

@media only screen and (min-width: 1025px) {
  [id*="shop_top_brands_ph2"] .logo-bar-wrap {
    padding: 0 52px;
  }
}

[id*="shop_top_brands_ph2"] .logo-list__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.1);
}

[id*="shop_top_brands_ph2"] .logo-list__arrow--prev {
  left: 0;
}

[id*="shop_top_brands_ph2"] .logo-list__arrow--next {
  right: 0;
}

@media only screen and (max-width: 768px) {
  [id*="shop_top_brands_ph2"] .logo-bar-wrap {
    padding: 0 44px;
  }
}

[id*="shop_top_brands_ph2"] .logo-bar {
  /* Base theme's .logo-bar defaults to flex-wrap:wrap for a static grid
     display; this instance is a horizontal-scroll carousel track, so
     force a single row regardless of how many logos are added -- desktop
     never wraps the last brands into a second row. */
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 0;
  gap: 22px;
  padding: 6px 4px 14px;
}

/* Card height is the SUM of fixed sub-areas (padding + image area + gap +
   name area) rather than one hard-coded box height. Every card computes
   to the exact same total this way, but robustly: no image, however tall
   its native aspect ratio is, can ever push the caption past a hard
   ceiling and get clipped by the carousel track's overflow (an
   overflow-x: auto container's overflow-y is implicitly "auto" too per
   the CSS spec, so anything that overflowed a fixed-height card used to
   be silently cut off -- that was the caption's actual bug, not the
   Liquid markup, which already rendered it correctly). */
[id*="shop_top_brands_ph2"] .logo-bar__item {
  flex: 0 0 auto;
  width: 168px;
  margin: 0;
  scroll-snap-align: start;
  background: #fffdf9;
  border: 1px solid #f0e4d6;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(43, 43, 45, 0.06), 0 1px 2px rgba(43, 43, 45, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

[id*="shop_top_brands_ph2"] .logo-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
  border-radius: 12px;
}

[id*="shop_top_brands_ph2"] .logo-bar__image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  flex: 0 0 auto;
}

[id*="shop_top_brands_ph2"] .logo-bar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

[id*="shop_top_brands_ph2"] .logo-bar__item--text-only {
  background: #f7f4ee;
}

[id*="shop_top_brands_ph2"] .logo-bar__item--text-only:hover {
  background: #f1f7ec;
}

[id*="shop_top_brands_ph2"] .logo-bar__name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2d;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* The visible name under the image -- reserved 40px band (within the
   38-44px range) so every card is the same height regardless of whether
   the brand name wraps to one or two lines, and dark/legible per spec
   (previously a muted grey, easy to mistake for decorative sub-text). */
[id*="shop_top_brands_ph2"] .logo-bar__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2d;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Polished hover: card lifts, shadow deepens, logo scales up gently and
   the border warms to green -- surrounding layout never shifts because
   only transform/box-shadow/border-color (no size/margin) change. */
[id*="shop_top_brands_ph2"] .logo-bar__item:hover,
[id*="shop_top_brands_ph2"] .logo-bar__item:has(.logo-bar__link:focus-visible) {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(43, 43, 45, 0.14), 0 2px 6px rgba(43, 43, 45, 0.06);
  border-color: #3fa24f;
}

[id*="shop_top_brands_ph2"] .logo-bar__item:hover .logo-bar__image,
[id*="shop_top_brands_ph2"] .logo-bar__item:has(.logo-bar__link:focus-visible) .logo-bar__image {
  transform: scale(1.05);
}

[id*="shop_top_brands_ph2"] .logo-bar__link:focus-visible {
  outline: 2px solid #3fa24f;
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  [id*="shop_top_brands_ph2"] .logo-bar__item,
  [id*="shop_top_brands_ph2"] .logo-bar__image {
    transition: none;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__item:hover {
    transform: none;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__item:hover .logo-bar__image {
    transform: none;
  }
}

@media only screen and (max-width: 768px) {
  [id*="shop_top_brands_ph2"] {
    padding: 36px 0;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__item {
    width: 136px;
    padding: 14px;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__image-wrap {
    height: 60px;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__name {
    font-size: 14px;
    min-height: 38px;
  }

  [id*="shop_top_brands_ph2"] .logo-bar__caption {
    font-size: 14px;
    min-height: 38px;
  }
}

/* -- Pet Care Tips & Guides (scoped instance only): turn the shared
   article-grid-item side-by-side layout into vertical cards -- */
[id*="pet_care_blog_ph2"] {
  background: #fffaf4;
  /* Bottom padding intentionally omitted: the newsletter section directly
     below already supplies its own top padding, so adding both would
     double the gap between the two bands. */
  padding: 44px 0 0;
}

[id*="pet_care_blog_ph2"] .section-header {
  margin-bottom: 24px;
}

[id*="pet_care_blog_ph2"] .grid.grid--uniform {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

[id*="pet_care_blog_ph2"] .grid__item.medium-up--one-third {
  width: 100%;
  padding: 0;
  margin: 0;
}

[id*="pet_care_blog_ph2"] .grid__item .grid {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #f0e4d6;
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[id*="pet_care_blog_ph2"] .grid__item .grid:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(43, 43, 45, 0.1);
}

[id*="pet_care_blog_ph2"] .grid__item.small--one-third,
[id*="pet_care_blog_ph2"] .grid__item.small--two-thirds {
  width: 100%;
}

[id*="pet_care_blog_ph2"] .article__grid-image {
  border-radius: 0;
}

[id*="pet_care_blog_ph2"] .article__grid-meta {
  padding: 16px 18px 20px;
}

[id*="pet_care_blog_ph2"] .article__title {
  font-weight: 700;
  color: #2b2b2d;
}

[id*="pet_care_blog_ph2"] .article__read-more {
  display: inline-block;
  margin-top: 10px;
  color: #3fa24f;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

[id*="pet_care_blog_ph2"] .article__read-more:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
  [id*="pet_care_blog_ph2"] .grid.grid--uniform {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  [id*="pet_care_blog_ph2"] .grid.grid--uniform {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* -- Newsletter (scoped instance only) -- */
[id*="newsletter_ph2"] .newsletter {
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px 24px;
}

[id*="newsletter_ph2"] h2 {
  color: #2b2b2d;
}

[id*="newsletter_ph2"] input[type="email"] {
  border-radius: 30px 0 0 30px;
}

[id*="newsletter_ph2"] button,
[id*="newsletter_ph2"] input[type="submit"] {
  background: #ff6665 !important;
  border-color: #ff6665 !important;
  border-radius: 0 30px 30px 0 !important;
  color: #fff !important;
}

@media only screen and (max-width: 768px) {
  [id*="newsletter_ph2"] .newsletter {
    border-radius: 18px;
    padding: 28px 18px;
  }
}

/* -- Floating pet offer popup -- */
.floating-pet-offer {
  position: fixed;
  bottom: var(--fpo-bottom, 24px);
  right: var(--fpo-right, 24px);
  z-index: 30;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.floating-pet-offer.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-pet-offer__trigger {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #ff6665;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(43, 43, 45, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-pet-offer__trigger:focus-visible {
  outline: 2px solid #3fa24f;
  outline-offset: 2px;
}

.floating-pet-offer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.floating-pet-offer__image--fallback {
  background-size: cover;
  background-repeat: no-repeat;
}

.floating-pet-offer__placeholder {
  width: 100%;
  height: 100%;
}

.floating-pet-offer__bubble {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 240px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(43, 43, 45, 0.18);
  padding: 16px 18px 18px;
}

.floating-pet-offer__bubble[hidden] {
  display: none;
}

.floating-pet-offer__arrow {
  position: absolute;
  bottom: -8px;
  right: 24px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 3px;
}

.floating-pet-offer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #746a63;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-pet-offer__message {
  margin: 4px 0 12px;
  font-size: 14px;
  color: #2b2b2d;
  line-height: 1.45;
}

.floating-pet-offer__cta {
  display: inline-block;
  background: #3fa24f;
  color: #fff;
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .floating-pet-offer {
    transition: none;
  }
}

@media only screen and (max-width: 768px) {
  .floating-pet-offer {
    /* Bottom offset is NOT scaled down here: the WhatsApp chat button this
       clears is a fixed 100x100px app embed that doesn't shrink on mobile
       either, so scaling our clearance down would reintroduce the overlap. */
    bottom: var(--fpo-bottom, 24px);
    right: calc(var(--fpo-right, 24px) * 0.75);
  }

  .floating-pet-offer__trigger {
    width: 52px;
    height: 52px;
    border-width: 2px;
  }

  .floating-pet-offer__bubble {
    width: 200px;
    bottom: 62px;
    padding: 13px 15px 15px;
  }
}

/* -- Footer redesign -- */
.site-footer {
  background: #fdf8f0;
  color: #2b2b2d;
  padding-top: 48px;
  border-top: 1px solid #f0e4d6;
}

.site-footer .footer__title,
.site-footer h4.footer__title,
.site-footer .collapsible-trigger-btn {
  color: #2b2b2d;
  font-weight: 700;
}

.site-footer .site-footer__linklist a {
  color: #6b625b;
  text-decoration: none;
}

.site-footer .site-footer__linklist a:hover {
  color: #3fa24f;
}

.site-footer .footer__logo a {
  display: inline-flex;
}

.footer__policies {
  justify-content: center;
  gap: 6px 18px;
  padding: 18px 0;
  margin: 8px 0 0;
  border-top: 1px solid #f0e4d6;
}

.footer__policies a {
  color: #6b625b;
  font-size: 13px;
  text-decoration: none;
}

.footer__policies a:hover {
  color: #ff6665;
}

.footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 18px;
}

.site-footer .payment-icons {
  margin: 0;
}

.site-footer .footer__small-text {
  color: #8a8078;
  font-size: 12px;
  margin: 0;
}

.site-footer .shopassistance {
  border-radius: 16px;
  margin-top: 10px;
  overflow: hidden;
}

.site-footer .footer_containner3 {
  padding-top: 10px;
}

.site-footer .footer_containner3 hr {
  border-color: #f0e4d6;
}

.site-footer .footer_containner3 h5 {
  color: #2b2b2d;
}

.site-footer .footer_search_links a {
  color: #6b625b;
}

.site-footer .footer_search_links a:hover {
  color: #3fa24f;
}

.site-footer .newsletter-form input[type="email"] {
  border-radius: 30px 0 0 30px;
}

.site-footer .newsletter-form button {
  background: #3fa24f !important;
  border-color: #3fa24f !important;
  border-radius: 0 30px 30px 0 !important;
}

@media only screen and (max-width: 768px) {
  .site-footer {
    padding-top: 30px;
  }

  .footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -- "Real Experiences" video showcase (scoped to this advanced-content
   instance only): compact 4-item grid instead of 11 stacked full-width
   videos, so it no longer dominates page height. -- */
[id*="advanced_content_zQaMgR"] {
  background: #fffaf4;
  /* Newsletter directly above already carries its own 75px bottom
     padding, so no top padding here to avoid stacking both gaps. */
  padding: 0 0 44px;
}

.sp-reels {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 32px;
}

.sp-reels__heading {
  text-align: center;
  margin-bottom: 24px;
}

.sp-reels__heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: #2b2b2d;
  margin: 0 0 8px;
}

.sp-reels__heading p {
  font-size: 15px;
  color: #6b625b;
  margin: 0;
}

.sp-reels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sp-reels__item {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #f1e9da;
  border: 1px solid #f0e4d6;
}

.sp-reels__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-reels__cta {
  text-align: center;
  margin-top: 24px;
}

.sp-reels__cta a {
  display: inline-block;
  padding: 11px 28px;
  border-radius: 30px;
  background: #3fa24f;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-reels__cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 162, 79, 0.25);
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
  .sp-reels__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

@media only screen and (max-width: 768px) {
  [id*="advanced_content_zQaMgR"] {
    padding: 0 0 32px;
  }

  .sp-reels {
    padding: 0 16px;
  }

  .sp-reels__heading h2 {
    font-size: 24px;
  }

  .sp-reels__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* -- Mix & Match banner: real product packshots, no invented packaging -- */
.mm-banner {
  padding: 40px 0;
}

.mm-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  padding: 36px 40px;
  box-shadow: 0 10px 30px rgba(43, 43, 45, 0.06);
  overflow: hidden;
}

.mm-banner__text {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 0;
}

.mm-banner__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mm-banner__heading {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  color: #2b2b2d;
  margin: 0 0 10px;
}

.mm-banner__description {
  font-size: 15px;
  color: #55524f;
  margin: 0 0 20px;
}

.mm-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 30px;
  background: #3fa24f;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mm-banner__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 162, 79, 0.25);
}

/* Single-row product composition: percentage-based tile widths always
   sum to roughly the container width regardless of viewport, so 5
   products never wrap to a second row. Centre tile is emphasised with
   a larger size and higher z-index; outer tiles fan out and down for
   a sense of depth. */
.mm-banner__products {
  flex: 0 0 58%;
  width: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.mm-banner__product-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 21%;
  aspect-ratio: 1 / 1;
  max-width: 128px;
  max-height: 128px;
  background: #fdf8f0;
  border: 1px solid #f0e4d6;
  border-radius: 16px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 6px 16px rgba(43, 43, 45, 0.1);
  margin-left: -3%;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;
}

.mm-banner__product-tile:first-child {
  margin-left: 0;
}

.mm-banner__product-tile:nth-child(1),
.mm-banner__product-tile:nth-child(5) {
  z-index: 1;
  transform: translateY(10px) rotate(-3deg);
}

.mm-banner__product-tile:nth-child(2),
.mm-banner__product-tile:nth-child(4) {
  z-index: 2;
  transform: translateY(3px);
}

.mm-banner__product-tile:nth-child(5) {
  transform: translateY(10px) rotate(3deg);
}

.mm-banner__product-tile:nth-child(3) {
  z-index: 3;
  width: 26%;
  transform: translateY(-8px);
}

.mm-banner__product-tile:hover {
  z-index: 4;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 12px 24px rgba(43, 43, 45, 0.16);
}

.mm-banner__product-tile image-element {
  display: block;
  width: 100%;
  height: 100%;
}

.mm-banner__product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
  .mm-banner__products {
    flex-basis: 54%;
    width: 54%;
  }
}

@media only screen and (max-width: 768px) {
  .mm-banner {
    padding: 28px 0;
  }

  .mm-banner__inner {
    flex-direction: column;
    text-align: center;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .mm-banner__text {
    flex-basis: auto;
    max-width: 100%;
  }

  .mm-banner__heading {
    font-size: 26px;
  }

  .mm-banner__products {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
  }

  .mm-banner__product-tile {
    border-radius: 12px;
  }
}

/* ==========================================================================
   GLOBAL HOMEPAGE CONTAINER WIDTH
   Constrains the shared .page-width wrapper (used by header, hero and every
   homepage section) to the requested ~1280px on the homepage only — other
   templates (collection, product, cart, etc.) keep the theme's own 1500px.
   ========================================================================== */
.template-index .page-width {
  max-width: 1280px;
}

@media only screen and (min-width: 769px) {
  .template-index .page-width {
    padding-left: 36px;
    padding-right: 36px;
  }
}

@media only screen and (max-width: 768px) {
  .template-index .page-width {
    padding-left: 16px;
    padding-right: 16px;
  }
}