/** Shopify CDN: Minification failed

Line 1904:0 Unexpected "}"

**/
/** Shopify CDN: Minification failed

Line 46:32 Expected identifier but found "*"
Line 1249:0 Unexpected "}"
Line 2137:2 Unexpected "{"
Line 2137:3 Expected identifier but found "%"
Line 2137:32 Expected identifier but found "%"
Line 3007:2 Unexpected "{"
Line 3007:3 Expected identifier but found "%"

**/

/* Brand palette - deep royal purple ramp. Single source of truth:
   edit values here to rebrand the storefront. Same hue (~270°), varied lightness. */
:root {
  --brand-primary:         #573579;  /* L=34% - main brand (buttons, accents, links) */
  --brand-primary-hover:   #46295f;  /* L=27% - hover / active state */
  --brand-primary-light:   #7a52a5;  /* L=49% - mid purple (secondary accents) */
  --brand-primary-lighter: #a17fc5;  /* L=64% - light purple (highlights) */
  --brand-primary-50:      #f3eef8;  /* L=96% - lightest tint (backgrounds) */
  --brand-primary-100:     #e6dbef;  /* L=90% - pale tint (hover backgrounds) */

  /* Homepage typography scale - uniform across every section */
  --hp-section-heading-size:     32px;
  --hp-section-heading-weight:   800;
  --hp-section-heading-mobile:   24px;
  --hp-card-title-size:          16px;
  --hp-card-title-weight:        400;
  --hp-card-title-mobile:        16px;
  --hp-body-size:                16px;
  --hp-body-weight:              400;
  --hp-body-mobile:              15px;
  --hp-eyebrow-size:             14px;
  --hp-eyebrow-weight:           600;

  /* Homepage section vertical rhythm - tight spacing between sections */
  --hp-section-pad:              10px;
  --hp-section-pad-mobile:       5px;
}

/* SEO-only homepage rich-text section: keep H1 + tagline in the DOM
   so Google indexes them, but hide visually so they don't push the
   hero down or compete with the slider. Targets the section by its
   index.json key (rich_text_FgWCVE). */
.template-index [id$="__rich_text_FgWCVE"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Product-card typography - 16px Nunito Regular on every viewport.
   !important + multiple class anchors to beat Dawn's .h5 rule and any
   stray CDN-cached version. */
.card-wrapper .card__heading,
.card-wrapper .card__heading a,
.card-wrapper .card__heading.h5,
.card-wrapper h3.card__heading,
.card-wrapper h3.card__heading a,
.product-card-wrapper .card__heading,
.product-card-wrapper .card__heading.h5,
.product-card-wrapper h3.card__heading,
.product-card-wrapper h3.card__heading a,
.product-card-wrapper .card__heading a,
.card-wrapper .card__heading .full-unstyled-link,
.product-card-wrapper .card__heading .full-unstyled-link {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: 0 !important;
}
.card-wrapper .price,
.card-wrapper .price .price-item,
.card-wrapper .price__regular .price-item--regular,
.card-wrapper .price .price-item--sale,
.product-card-wrapper .price,
.product-card-wrapper .price .price-item,
.product-card-wrapper .price__regular .price-item--regular,
.product-card-wrapper .price .price-item--sale {
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Nunito', sans-serif !important;
}
.card-wrapper .caption-with-letter-spacing,
.product-card-wrapper .caption-with-letter-spacing {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-family: 'Nunito', sans-serif !important;
  color: rgba(var(--color-foreground), 0.55) !important;
}

/* Unified homepage section typography - applies to every section rendered
   on the index template via templates/index.json. The cat-banner hero text
   inside PetsDogBanner is intentionally excluded since it's a banner
   element, not a section heading. */
.template-index .our-services__sub-heading,
.template-index .brand-title,
.template-index .bvt-heading h2,
.template-index .testimonial-slider-section h2,
.template-index .promo-banner__headline,
.template-index .collection .title,
.template-index .collection h2.title {
  font-size: var(--hp-section-heading-size) !important;
  font-weight: var(--hp-section-heading-weight) !important;
  line-height: 1.2 !important;
  font-family: 'Nunito', sans-serif !important;
  color: rgb(var(--color-foreground)) !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Center featured-collection title wrapper so headings align with
   the other centered homepage sections (Pet Care Services, Brands,
   Testimonials, etc.). */
.template-index .collection .collection__title {
  text-align: center !important;
}
.template-index .collection .collection__title h2.title {
  text-align: center !important;
  width: 100%;
}
.template-index .collection .collection__description {
  text-align: center !important;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.template-index .our-services__heading,
.template-index .bvt-body h3,
.template-index .promo-block .promo-text h3,
.template-index .testimonial-slide .name /*,
.template-index .collection .card__heading,
.template-index .collection .card__heading a,
.template-index .collection .card-information .card__heading */ {
  font-size: var(--hp-card-title-size) !important;
  font-weight: var(--hp-card-title-weight) !important;
  line-height: 1.3 !important;
  font-family: 'Nunito', sans-serif !important;
}
.template-index .our-services__desc,
.template-index .bvt-body p,
.template-index .promo-block .promo-text p,
.template-index .testimonial-slide .review,
.template-index .rich-text__text p {
  font-size: var(--hp-body-size) !important;
  font-weight: var(--hp-body-weight) !important;
  line-height: 1.5 !important;
}
.template-index .promo-banner__eyebrow,
.template-index .testimonial-slide .service,
.template-index .collection .caption-with-letter-spacing {
  font-size: var(--hp-eyebrow-size) !important;
  font-weight: var(--hp-eyebrow-weight) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-family: 'Nunito', sans-serif !important;
}

/* Featured-collection slider - defeat Dawn's bleed-to-viewport rules
   so the strip sits inside .page-width on every breakpoint, matching
   the cat/dog banner and other page-width sections on the homepage. */
slider-component.slider-component-desktop.page-width {
  max-width: var(--page-width) !important;
  margin: 0 auto !important;
}
@media screen and (max-width: 749px) {
  slider-component.slider-component-desktop.page-width {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  slider-component.slider-component-desktop.page-width {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}
@media screen and (min-width: 990px) {
  slider-component.slider-component-desktop.page-width-desktop {
    max-width: var(--page-width) !important;
    padding: 0 5rem !important;
    margin: 0 auto !important;
  }
  .collection .slider--desktop .slider__slide:first-child {
    margin-left: 0 !important;
    scroll-margin-left: 0 !important;
  }
  .collection .slider--desktop {
    scroll-padding-left: 0 !important;
  }
  .collection .slider--desktop:after {
    display: none !important;
  }
}
/* Mobile slider first-slide alignment with the container's 1.5rem gutter */
@media screen and (max-width: 749px) {
  .collection .grid--peek.slider .grid__item:first-of-type {
    margin-left: 0 !important;
  }
}

/* Card-count enforcement: show exactly N products per view to match
   the section's Collection-layout columns setting. Dawn's default
   slider math assumes a viewport-bleed container and ends up
   showing a half-card peek; with the slider constrained to
   page-width, we size each card explicitly. */
@media screen and (max-width: 749px) {
  /* Mobile: exactly columns_mobile (typically 2) */
  .collection .grid--peek.slider .grid__item,
  .collection .slider--tablet.grid--peek .grid__item {
    min-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
  }
}
@media screen and (min-width: 990px) {
  /* Desktop columns_desktop = 4 */
  .collection .slider--desktop.grid--4-col-desktop .grid__item {
    width: calc((100% - 3 * var(--grid-desktop-horizontal-spacing)) / 4) !important;
    min-width: calc((100% - 3 * var(--grid-desktop-horizontal-spacing)) / 4) !important;
    flex: 0 0 calc((100% - 3 * var(--grid-desktop-horizontal-spacing)) / 4) !important;
  }
  /* columns_desktop = 3 */
  .collection .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc((100% - 2 * var(--grid-desktop-horizontal-spacing)) / 3) !important;
    min-width: calc((100% - 2 * var(--grid-desktop-horizontal-spacing)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--grid-desktop-horizontal-spacing)) / 3) !important;
  }
  /* columns_desktop = 2 */
  .collection .slider--desktop.grid--2-col-desktop .grid__item {
    width: calc((100% - 1 * var(--grid-desktop-horizontal-spacing)) / 2) !important;
    min-width: calc((100% - 1 * var(--grid-desktop-horizontal-spacing)) / 2) !important;
    flex: 0 0 calc((100% - 1 * var(--grid-desktop-horizontal-spacing)) / 2) !important;
  }
}

/* Uniform section padding */
.template-index .section-offers,
.template-index .our-services,
.template-index .brand-logos-section,
.template-index .testimonial-slider-section,
.template-index .blog-video-tabs,
.template-index .cat-feature-section,
.template-index .promo-row-wrapper,
.template-index .rich-text,
.template-index [class*="__rich_text"] .rich-text,
.template-index .shopify-section .rich-text,
.template-index .collection {
  padding-top: var(--hp-section-pad) !important;
  padding-bottom: var(--hp-section-pad) !important;
}
/* Also collapse the auto-margins Shopify wraps around each section */
.template-index #MainContent > .shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 749px) {
  .template-index .our-services__sub-heading,
  .template-index .brand-title,
  .template-index .bvt-heading h2,
  .template-index .testimonial-slider-section h2,
  .template-index .promo-banner__headline,
  .template-index .collection .title,
  .template-index .collection h2.title {
    font-size: var(--hp-section-heading-mobile) !important;
    margin-bottom: 16px !important;
  }
  .template-index .our-services__heading,
  .template-index .bvt-body h3,
  .template-index .promo-block .promo-text h3,
  .template-index .testimonial-slide .name {
    font-size: var(--hp-card-title-mobile) !important;
    line-height: 1.3 !important;
    font-family: 'Nunito', sans-serif !important;
  }
  .template-index .our-services__desc,
  .template-index .bvt-body p,
  .template-index .promo-block .promo-text p,
  .template-index .testimonial-slide .review,
  .template-index .rich-text__text p {
    font-size: var(--hp-body-mobile) !important;
  }
  .card-information .price .price__regular .price-item--regular,
  .card-information .price .price-item,
  .price .price__regular .price-item--regular,
  .price .price-item {
    font-size: var(--hp-card-title-mobile) !important;
  }
  .card-information .caption-with-letter-spacing,
  .card-information__wrapper .caption-with-letter-spacing {
    font-size: var(--hp-eyebrow-size) !important;
    font-weight: var(--hp-eyebrow-weight) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-family: 'Nunito', sans-serif !important;
  }
  .template-index .section-offers,
  .template-index .our-services,
  .template-index .brand-logos-section,
  .template-index .testimonial-slider-section,
  .template-index .blog-video-tabs,
  .template-index .cat-feature-section,
  .template-index .promo-row-wrapper,
  .template-index .rich-text,
  .template-index .collection {
    padding-top: var(--hp-section-pad-mobile) !important;
    padding-bottom: var(--hp-section-pad-mobile) !important;
  }
}

/* SEO H1 lives in the rich-text section under the hero - keep it semantic
   but render at tagline scale so it doesn't compete with the slider. */
.rich-text__heading.h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.rich-text__text p {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.75);
  margin: 0;
}
@media (max-width: 749px) {
  .rich-text__heading.h1 {
    font-size: 1.6rem;
  }
}

/* header */
header.header {
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}
.header__heading-logo-wrapper {
    /* width: 39%; */
    display: inline-block;
    transition: width .3s cubic-bezier(.52,0,.61,.99);
}
.header__menu-item span {
    font-size: 15px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
}
.utility-bar.color-scheme-1.gradient {
    background: var(--brand-primary-light);
    color: #ffffff;
}
.utility-bar.color-scheme-1.gradient .announcement-bar__message,
.utility-bar.color-scheme-1.gradient .announcement-bar__link,
.utility-bar.color-scheme-1.gradient .announcement-bar__announcement,
.utility-bar.color-scheme-1.gradient .slider-button .icon {
    color: #ffffff;
}
._inline_1q1d2_47 {
    display: grid;
    justify-items: var(--inline-form-alignment);
    align-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--container-background-color);
    overflow: hidden;
    min-height: 75vh !important;
}
.jdgm-cards-wrapper {
    overflow: hidden;
    flex: 1;
    min-width: 0;
     max-width:none !important; 
}
.jdgm-carousel__arrows {
    display: none;
}
h2.title.inline-richtext.h0.scroll-trigger.animate--slide-in {
    font-family: 'Nunito' !important;
    text-align: center !important;
}

/* header hover  */

.header__menu-item:hover .header__active-menu-item {
    text-decoration: none;
}
.header__menu-item:hover span {
   text-decoration:none;
}
details[open]>.header__menu-item {
    text-decoration: none;
}
.header__submenu .header__menu-item:hover {
    text-decoration: none;
}
.header__submenu .header__menu-item {
    justify-content:flex-start; 
    padding: .8rem 2rem;
}

.header__menu-item,
.header__menu-item span {
    text-decoration: none !important;
    position: relative;
    color: #000;  
    transition: color 0.3s ease;
}


.header__menu-item:hover,
.header__menu-item:hover span,
.mega-menu__link:hover
{
    color: var(--brand-primary) !important;
}
.mega-menu__link--active {
    color: rgba(var(--color-foreground), .75) !important;
}

.mega-menu__link,
.mega-menu__link--active,
.mega-menu__link:hover,
.header__menu-item,
.header__menu-item:hover {
    text-decoration: none !important;
}


.header__menu-item span,
.mega-menu__link > span {
    position: relative;
    display: inline-block;
    transition: transform .32s ease, text-shadow .32s ease;
}


.header__menu-item span::after,
.mega-menu__link > span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #e27bff, var(--brand-primary));
    transition: width 0.35s ease;
}

.header__menu-item:hover span::after,
.mega-menu__link:hover > span::after {
    width: 100%;
}

.header__menu-item:hover span,
.mega-menu__link:hover > span {
    transform: translateY(-3px);
    text-shadow: 0px 2px 6px rgba(147, 86, 147, 0.25);
}


.mega-menu__link--active > span::after {
    width: 0;
}

.field__input:focus, .select__select:focus, .customer .field input:focus, 
.customer select:focus, .localization-form__select:focus.localization-form__select:after {
    box-shadow:none !important;
   
}
.field:hover.field:after, .select:hover.select:after, .select__select:hover.select__select:after,
 .customer .field:hover.field:after, .customer select:hover.select:after,
  .localization-form__select:hover.localization-form__select:after {
    box-shadow: var(--brand-primary) !important;
   
}

/* banner button  */

.slideshow__text .banner__buttons .button.button--primary:hover {
    color: var(--brand-primary) !important;
    background-color: transparent !important;
    border: 3px solid var(--brand-primary); 
}
.slideshow__text .banner__buttons .button.button--primary{
    color:var(--brand-primary);
    border:1px solid var(--brand-primary);
}
sticky-header.header-wrapper.color-scheme-1.gradient {
    border-bottom: 1px solid #e5e5e5 !important;
}
.slideshow__controls.slideshow__controls--top.slider-buttons {
    display: none !important;
}
/* pet dress buttons  */
.banner--content-align-left.banner--desktop-transparent .banner__box,
.banner--content-align-right.banner--desktop-transparent .banner__box,
.banner--medium.banner--desktop-transparent .banner__box {
    max-width: 45rem !important;
}


/* promo banner */
.promo-row-wrapper {
  background-color: #fff;
}

.promo-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 0;
}

.promo-block {
  flex: 1;
  background: #f9f7f3;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.promo-block:hover {
  background: var(--brand-primary);
  transform: translateY(-3px);
      box-shadow: 0px 0px 10px var(--brand-primary);
}
.promo-block:hover .promo-text h3,
.promo-block:hover .promo-text p {
    color: #fff !important;
}


.promo-block img {
  width: 50px;
  height: 46px;
  object-fit: contain;
  border-radius: 50%;
  background-color: #e6e6e6;
  padding: 10px;
}

.promo-block .promo-text {
  flex: 1;
}

.promo-block .promo-text h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
}

.promo-block .promo-text p {
  margin: 0;
  font-size: 14px;
  color: #555;
}
/* slide show css  */
.slideshow__slide {
  position: relative;
}


.slideshow__image-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}


.banner__media::after {
  pointer-events: none;
}


.slideshow__text-wrapper {
  pointer-events: none;
  z-index: 998;
}


.slideshow__controls,
.slider-buttons,
.slider-counter {
  pointer-events: auto;
  z-index: 999;
}

/* cupon css  */
.old-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 6px;
}

.discount-badge {
  background: var(--brand-primary);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 6px;
  border-radius: 3px;
}
/* footer */
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    display: flex;
    justify-content: center;

   
}
footer.footer.color-scheme-1.gradient.section-sections--26076979396898__footer-padding {
    background: var(--brand-primary-50);
}
.testimonial-slider-section h2 {
    font-family: 'Nunito' !important;
}
footer.footer.color-scheme-1.gradient.section-sections--26192633332002__footer-padding {
    background: var(--brand-primary-50);
}

/* zip over code  */
.tingle-modal--visible .tingle-modal-box {
    animation: scale .2s cubic-bezier(.68,-.55,.265,1.55) forwards;
    background: var(--brand-primary-50) !important;
}
.sac-btn{
  border-color: var(--brand-primary) !important;
    color: #fff;
    background: var(--brand-primary) !important;
    padding: 15px 15px;
    transition: 0.2s all ease-in-out;
}
.sac-btn:hover {
    border-color: var(--brand-primary);
    color:var(--brand-primary) !important;
    background: #ffffff !important;
}
.sac-checker {
    margin: 25px 0px;
}

/* pdp page css  */

li.grid__item.scroll-trigger.animate--slide-in {
    margin: 30px 0px !important;
}
.facets__summary span:first-of-type {
    text-decoration: none !important;
}
.facets__disclosure[open] .facets__summary, .facets__summary:hover {
     color:var(--brand-primary) !important;
}
.facets__label:hover, .facets__label.active, .facets__label:has(:focus-visible) {
   color:var(--brand-primary) !important;
}
.facets-layout-list .facets__label:hover .facet-checkbox__text-label, .facets-layout-list input:focus~.facet-checkbox__text-label {
    text-decoration: none !important;
}
variant-swatch-king div.swatch-preset-1807802 div.star-set-btn.swatch-selected div.swatch-button-title-text {
    color: #fff;
    background-color: var(--brand-primary);
    text-decoration-color: #fff;
}

/* Legacy button hover rules - kept but neutralized so the comprehensive
   site-wide button override at end of file wins. Don't add new
   button:hover rules above; edit the override block instead. */
.pickup-availability-button:hover {
    color: var(--brand-primary) !important;
}
.pickup-availability-button {
    text-decoration: none !important;
}
.list-payment {
    display: none !important;
}
.footer__content-bottom-wrapper--center {
 margin-left: auto !important;
}
.footer__copyright.caption {
    display: flex;
    justify-content: center !important;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    gap:4px;
}


@media (max-width: 768px) {
/* dog and cat banner cards  */
.cat-banner-image img {
    width: 150px;
    right: -11px !important;
    top: -40px;
}
.cat-card {
    border-radius: 20px !important;
}


  .promo-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 6vw;
    gap: 12px;
    padding: 24px 6vw 28px;
    margin: 0 -16px;
    scrollbar-width: none;
    width: 100vw;
    box-sizing: border-box;
  }
  .promo-row::-webkit-scrollbar {
    display: none;
  }
  .promo-row .promo-block {
    flex: 0 0 88vw;
    scroll-snap-align: center;
    min-width: 0;
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 18px 18px;
  }
  .promo-row .promo-block .promo-text {
    text-align: left;
    flex: 1;
  }
  .promo-row .promo-block .promo-text h3 {
    margin: 0 0 4px;
  }
  .promo-row .promo-block .promo-text p {
    margin: 0;
  }
}



/* offer banner */

.section-offers {
    padding-top: 48px;
    padding-bottom: 48px;
}
.promo-banner {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 28px 36px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(87, 53, 121, 0.18);
    color: #fff;
}
.promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 120%, rgba(255, 255, 255, 0.12), transparent 55%),
        radial-gradient(circle at 105% -10%, rgba(255, 255, 255, 0.10), transparent 50%);
    pointer-events: none;
}
.promo-banner > * {
    position: relative;
    z-index: 1;
}
.promo-banner__image {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.promo-banner__image img {
    max-height: 170px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}
.promo-banner__text {
    min-width: 0;
}
.promo-banner__eyebrow {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}
.promo-banner__headline {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}
.promo-banner__coupon {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
}
.promo-banner__coupon-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}
.promo-banner__coupon-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: #fff;
    color: var(--brand-primary, #573579);
    border: 2px dashed rgba(255, 255, 255, 0.7);
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 160px;
    text-align: center;
}
.promo-banner__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    padding: 6px;
    box-sizing: border-box;
    white-space: pre-line;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 2;
}


.collection-list-title,
.collection__title  h2 {
    font-family: Comic Sans MS,cursive,sans-serif;
    font-size: 35px;
    font-weight: bold;
}
/* product grid */
.grid__item.scroll-trigger {
    padding: 15px;
    border-radius: 8px;
}
.full-unstyled-link {
     font-family: Nunito; 
    color: #000;
} 
/* product card  */
.underline-links-hover:hover a {
    text-decoration: none !important;
    color:var(--brand-primary);
}
a.full-unstyled-link .price-item.price-item--regular:hover {
     color:var(--brand-primary) !important;
}


/* Blog post  */
.article-card-wrapper a.full-unstyled-link {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.article-card-wrapper p.article-card__excerpt {
    font-size: 15px;
    line-height: 25px;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}
.article-card__info time {
    text-transform: capitalize;
    font-style: italic;
    font-size: 14px;
    font-weight: normal;
}

.bvt-body a {
    text-decoration: none;
}
/* Category page */
.collection-hero__inner {
    display: block;
}
/* Banner text wrapper stays hidden (title + old brand cards). The collection
   title renders in the product grid (.plp-custom-heading), and the brand strip
   ("Shop by Brand") now lives right under it in main-collection-product-grid. */
.collection-hero__inner .collection-hero__text-wrapper {
    display: none;
}
.collection-hero__inner .collection-hero__image-container {
    margin: 0 !important;
    border-radius: 10px;
}
.product-count-vertical {
    margin-left: 0;
}

/* Footer link-list accordion (mobile only - desktop forced open via JS) */
.footer-block__details {
  display: block;
}
.footer-block__details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  outline: none;
  border: none;
  background: transparent;
}
.footer-block__details > summary:focus {
  outline: none;
  box-shadow: none;
}
.footer-block__details > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
.footer-block__details > summary::-webkit-details-marker {
  display: none;
}
.footer-block__toggle-icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  display: none;
}
.footer-block__toggle-icon::before,
.footer-block__toggle-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.footer-block__toggle-icon::before {
  width: 1rem;
  height: 2px;
  transform: translate(-50%, -50%);
}
.footer-block__toggle-icon::after {
  width: 2px;
  height: 1rem;
  transform: translate(-50%, -50%);
}
.footer-block__details[open] .footer-block__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Footer accordion animations - fade + slide for content, stagger for links.
   Modern browsers also get a smooth height transition via interpolate-size. */
@keyframes footerAccordionOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes footerLinkRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .footer-block__details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                content-visibility 0.32s allow-discrete;
  }
  .footer-block__details[open]::details-content {
    block-size: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-block__details[open] .footer-block__details-content,
  .footer-block__details[open] .footer-block__details-content > li,
  .footer-block__details[open] .footer-block__details-content > p {
    animation: none;
  }
}
@media (max-width: 749px) {
  .footer-block__toggle-icon {
    display: inline-block;
  }
  .footer-block__details > summary {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--brand-primary-100, #e6dbef);
    cursor: pointer;
    transition: padding 0.2s ease;
  }
  .footer-block__details > summary.footer-block__heading,
  .footer-block .footer-block__heading {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 5px;
  }
  .footer-block__details[open] > summary {
    border-bottom-color: transparent;
  }
  .footer-block__details .footer-block__details-content {
    padding: 0 0 0.85rem;
    margin: 0 !important;
    border-bottom: 1px solid var(--brand-primary-100, #e6dbef);
  }
  .footer-block__details[open] .footer-block__details-content {
    animation: footerAccordionOpen 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .footer-block__details[open] .footer-block__details-content > li,
  .footer-block__details[open] .footer-block__details-content > p {
    animation: footerLinkRise 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(1) { animation-delay: 0.04s; }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(2) { animation-delay: 0.08s; }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(3) { animation-delay: 0.12s; }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(4) { animation-delay: 0.16s; }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(5) { animation-delay: 0.20s; }
  .footer-block__details[open] .footer-block__details-content > li:nth-child(6) { animation-delay: 0.24s; }
  .footer-block__details .footer-block__details-content .list-menu__item--link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }
  .footer-block--menu,
  .footer-block.grid__item.footer-block--menu {
    margin: 0 !important;
    padding: 0;
  }
  .footer__blocks-wrapper.grid {
    row-gap: 0 !important;
    column-gap: 0 !important;
    margin: 0;
  }
}
@media (min-width: 750px) {
  .footer-block__details > summary {
    cursor: default;
    pointer-events: none;
  }
}
.facets-vertical-form {
    justify-content: space-between;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    align-items: center;
    margin-bottom: 20px;
}


.facet-filters.sorting.caption {
    order: 2;
    border-left: 1px solid #e4e4e4;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
}
/* Product page */
.product.product--large .grid__item.scroll-trigger {
    border: none;
}
/* Footer section */
.footer-block.grid__item.footer-block--menu {
    border: none;
    padding: 0;
}
.newsletter__wrapper {
  background-color:rgb(0, 0, 0);
}
.newsletter .newsletter__wrapper h2 {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}
.newsletter .newsletter__wrapper .newsletter__subheading {
    margin-top: 5px;
}
.newsletter .newsletter__wrapper .newsletter__subheading p {
    font-size: 15px;
    color: #fff;
}
.footer-block--newsletter {
    opacity: 1 !important;
}
li.list-social__item a {
    background:var(--brand-primary);
    opacity: 1 !important;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 8px;
    color: #fff;
}
li.list-social__item a:hover{
    background-color: #873c87;;
}

.newsletter-form__field-wrapper .field {
    border-radius: 10px;
    overflow: hidden;
}
.newsletter-form__field-wrapper .field__input {

    font-size: 15px;
}

/* banner css */
div#Slider-template--25006298005794__slideshow_9xLmqj {
    width: 100%;
}
/* banner css end */

/* cat section css  */
.cat-feature-section {
    padding: 48px 0;
}

/* food page css */
h2.product-count__text.text-body {
    margin-right: 25px;
}

/* slideshow css  */
slideshow-component:not(.page-width) .slider-buttons {
    border-left: 0;
    border: none !important;
}
.slideshow__autoplay.slider-button {
    border-left: none !important;
}
/* Blog grid page css */

.custom-blog-article {
    /* width: 80%; */
    width: 100%;
    /* margin: 0px 85px; */
    max-width: 1200px;
    padding: 20px 5rem;
    margin: 0px auto;
}
.article-template__content{
    max-width: 100%;
}
header.page-width.page-width--narrow.scroll-trigger.animate--fade-in {
    margin: 0;
    padding: 25px 0;
    max-width: 100%;
}
.article-template__content.page-width.page-width--narrow.rte.scroll-trigger.animate--slide-in {
    margin: 0px;
    padding-top: 20px;

}
.rte li {
    list-style: circle;
}
.card--standard>.card__content .card__information {
    text-align: left;
}
.card__media, .card .media {
    border-radius: 7px;
}
.article-card-wrapper p.article-card__excerpt{
    margin-left:-1px;
}
/* category card  */
.cat-grid {
    margin-top: 20px;
}
.cat-banner-image img {
    top: -43px;
    width:184px;
}
.cat-banner {
    margin-bottom: 15px;
}
#section-template--25006298005794__pets_dog_banner_dmheaQ{
    padding-top:0px !important;
}

/* plp page pagination  */
.load-more-btn {
  display: block;
  margin: 40px auto;
  padding: 12px 32px;
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: 6px;
  cursor: pointer;
}
.load-more-btn:hover{
     background: var(--brand-primary);
      color: #fff;

}


/* pet dress css  */
a.button.button--primary {
    background: transparent;
    color: #681768;
    border: 1px solid var(--brand-primary);
    box-shadow: none !important;
    margin-left: 4px;
}
a.button.button--primary:hover{
    color:#fff;
    background:var(--brand-primary);
}
.button:after, .shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after{
    box-shadow:none !important;
}

/* form css  */
._gridItem_1q1d2_172 ._gridItemContent_1q1d2_257 form._formFieldset_cit2d_82 {
    display: flex;
    gap: 30px !important;
    flex-direction: column;
    padding: 0px 2px;
}

.product-form__input--pill input[type=radio]:checked+label{
    background:var(--brand-primary) !important;
}
/* form css end  */

/* footer css  */
.footer-block__details-content .list-menu__item--link {
  position: relative;
  display:inline-block;
}

.footer-block__details-content .list-menu__item--link:hover {
  color:var(--brand-primary) !important; 
  text-decoration: none !important;
}

.footer-block__details-content .list-menu__item--link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: var(--brand-primary);
  transition: width 0.4s ease;
}

.footer-block__details-content .list-menu__item--link:hover::after {
  width: 100%;
}

/*  brands logo */
h2.brand-title {
    margin-top: 0;
    text-align: center;
    font-size: 35px;
    font-weight: 800;
}
/* brand log end */


/* responsive  css */

/*  for tablets plp pages  */
@media screen and (min-width: 749px) and (max-width: 998px) {
  .product-grid,
  .grid--1-col-mobile,
  .grid--1-col-tablet-down,
  .collection .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

 
  .product-grid .card__media img,
  .grid .card__media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .product-grid .grid__item,
  .grid .grid__item {
    padding: 0 !important;
  }
  .custom-blog-article{
     /* width: 80%; */
    width: 100%;
    /* margin: 0px 85px; */
    max-width: 1200px;
    padding: 0px 20px;
    margin: 0px auto;
  }
}

@media (max-width: 992px) {
    .custom-blog-article{
     /* width: 80%; */
    width: 100%;
    /* margin: 0px 85px; */
    max-width: 1200px;
    padding: 0px 20px;
    margin: 0px auto;
  }
      main#MainContent {
        padding-top: 0px !important;
    }

    .bvt-cards {
        flex-wrap: wrap;
    }
   .bvt-cards-inner {
        flex: 0 0 calc(50%);
    }

    .header.page-width,
    .page-width {
    padding-left: 16px;
    padding-right: 16px;
}
  .banner--medium:not(.banner--adapt) {
    min-height: 34rem !important;
}
.elementor-widget-container {
    width: 100%;
    margin-left: -19px;
}

    .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .footer__content-bottom.scroll-trigger.animate--slide-in {
    overflow: hidden;
}
.footer__payment {
    margin-top: 0.5rem;
    margin-right: 0px !important;
  }


  .cat-banner {
    width: 100% !important;
    border-radius: 0 !important; 
    padding: 20px !important; 
  }
  .cat-banner-image img {
    top: -19px;
  }
  .cat-banner {
      height: 246px;
  }
  .cat-card img {
      height: 320px;
  }
  .banner__buttons.banner__buttons--multiple a.button.button--primary {
      background: var(--brand-primary);
      color: #fff;
      border: 1px solid var(--brand-primary);
      box-shadow: none !important;
      margin-left: 5px;
  }

  
}
@media(min-width:750px){
    ul.list.list-social.list-unstyled {
        display: none;
    }
    
}
:root {
  --mobile-header-height: 99px;
}
@media screen and (min-width: 768px) and (max-width: 1199) {
      main#MainContent {
        padding-top: 0px !important;
    }
    h2.plp-custom-heading{
      padding-top: 0px;
    }
  
       ul#product-grid li .card__media  .media img{
        object-fit: contain !important;
       }
}

@media (max-width: 767px) {
     main#MainContent {
    padding-top: var(--mobile-header-height) !important;
  }
    .bvt-cards-inner {
        flex: 0 0 calc(100%);
    }
     .slideshow__media.banner__media.media {
     height: 25rem !important;
    }
    .banner--medium:not(.banner--adapt) {
    min-height: 25rem !important;
}
 .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .cat-card img {
    width: 100%;
    height: 140px;             
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  .cat-banner-image img {
    width: 199px;
}
.cat-banner-image img {
    top: -18px;
}

}

@media (max-width: 480px) {
   body, html {
    overflow-x: hidden !important;
  }
  header-drawer {
    justify-self: start;
    margin-left: -0.2rem !important;
  }
/*  menu drawer  */
div#menu-drawer {
    height: -webkit-fill-available;
}
/* header.page-width.page-width--narrow.scroll-trigger.animate--fade-in {
    margin-top: 77px !important;
} */
.menu-drawer {
    position: fixed !important;
    transform: translate(-100%);
    visibility: hidden;
    z-index: 3;
    left: 0;
    top: var(--mobile-header-height, 66px) !important;
    width: 100%;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
}
sticky-header.header-wrapper.color-scheme-1.gradient {
    position: fixed;
    
}
div#shopify-section-sections--26076979429666__announcement-bar {
    position: fixed;
     margin-left: -7px;
}

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    margin-top: 46px;
}
.banner__media {
    top: 4px !important;
    
}
.shopify-section-group-header-group {
    z-index: 4;
    position: fixed;
}

#shopify-section-template--26192636379426__slideshow_4gRjcr .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 16rem !important;
}
.menu-drawer__utility-links {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.menu-drawer__menu-item {
    padding: 15px 29px !important;
    text-decoration: none;
    font-size: 16px !important;
}
.menu-drawer__account {
    font-size: 16px !important;
}
header.page-width.page-width--narrow.scroll-trigger.animate--fade-in {
    margin: 0;
    padding: 35px 0;
}
/* New Side Space CSS  */
.utility-bar__grid.page-width {
    padding: 0px 16px !important;
}

/* banner */

.slider.slider--everywhere .slider__slide {
    margin-bottom: 0;
    scroll-snap-align: center;
}
 #shopify-section-template--26076978938146__slideshow_4gRjcr .slideshow__media.banner__media.media {
    height: 18rem !important;
}

slideshow-component {
    display: block !important;
    margin-top: 0px !important;
  }
  header.header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    position: relative;
}
.header {
    display: grid;
    grid-template-areas: "left-icons heading icons";
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: center;
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}
#shopify-section-template--26076978938146__slideshow_4gRjcr .banner__buttons {
    position: absolute;
    top: 137px !important;
    left: 179px !important;
}
  #shopify-section-template--26192636379426__slideshow_4gRjcr
  .slideshow__media.banner__media.media {
    min-height: 16rem !important;
    height: auto !important;
  }
}




/*  category dog cat card css  */

 .cat-grid {
    /* grid-template-columns: repeat(1, 1fr) !important; */
    gap: 12px;
  }
  .cat-banner-image img {
    top: -28px !important;
}
.cat-banner-image img {
    width: 141px !important;
}
.cat-banner {
    height: 148px !important;
}
  .banner--medium:not(.banner--adapt) {
    min-height: 28rem !important;
}
 .slideshow__media.banner__media.media {
     height: 15rem !important;
    }
    .cat-feature-section {
    padding: 10px 0;
}
/* .blog-video-tabs {
    margin-bottom: 15px !important;
} */

button.button {
    background: var(--brand-primary);
    color: #fff;
    border: 1px solid;
}
/* plp page css  */
h2.plp-custom-heading {
    text-align: left;
    font-size: 30px;
    font-family: Nunito;
    font-size: 25px;
    padding-top: 22px;
}
.facets-container {
   padding-top:2px !important;
}
.facets-container.scroll-trigger.animate--fade-in {
    margin-top: 0px !important;
}
li.grid__item.scroll-trigger.animate--slide-in {
    margin: 0px 0!important;
}
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    margin-top: 0px !important;
    border: none;
}
li#Slide-template--26076979101986__main-53903450145058 {
    margin-left: 0px !important;
}
.grid__item.scroll-trigger {
    padding: 0px !important;
    
}
.FAQ-1-heading {
    margin-top: 36px;
}

  /* promotion banner css */
@media (max-width: 749px) {
  .promo-banner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "image text"
      "coupon coupon";
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 8px 14px;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .promo-banner__image {
    grid-area: image;
    width: 78px;
    height: 70px;
  }
  .promo-banner__image img {
    max-height: 70px;
    max-width: 78px;
  }
  .promo-banner__text {
    grid-area: text;
    min-width: 0;
  }
  .promo-banner__eyebrow {
    font-size: 11px;
    margin-bottom: 2px;
    letter-spacing: 0.06em;
  }
  .promo-banner__headline {
    font-size: 16px;
    line-height: 1.2;
  }
  .promo-banner__coupon {
    grid-area: coupon;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin: 6px 0 0;
    gap: 10px;
  }
  .promo-banner__coupon-label {
    font-size: 11px;
    text-align: left;
    flex: 0 0 auto;
  }
  .promo-banner__coupon-code {
    font-size: 14px;
    padding: 6px 14px;
    min-width: 0;
    flex: 1 1 auto;
    letter-spacing: 0.08em;
  }
  .promo-banner__badge {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 10px;
    padding: 3px;
    line-height: 1;
  }
}

  .list-payment {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -0.5rem 0;
    padding-top: 1rem;
    padding-left: 0;
    margin-bottom: 34px;
  }

  .footer__payment {
    margin-bottom: 47px !important;
  }
  .footer__copyright {
    text-align: center;
    margin-top: -22px;
    margin-left: 41px;
}

  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
      margin-left: 3px !important;
  }

h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    font-size: 30px;
}
   .menu-drawer .list-social {
    margin-top: 10px;
}

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
    width: 100%;
    margin-top: 0px;
    
  }
  h1.article-template__title {
    font-size: 25px;
}
h1.title--primary.scroll-trigger.animate--fade-in {
    margin-top: 90px;
    font-size: 23px;
}

  /* blog css  */
  .bvt-heading h2 {
    font-size: 27px !important;
    margin-bottom: 24px !important;

}
.bvt-tabs {
   text-align: center;
    margin-bottom: 40px;
    background: #ffffff;
    max-width: 270px;
    display: flex;
    align-items: center;
  gap: 15px;
    padding: 3px;
    border-radius: 8px;
    margin: auto;
}
 .custom-blog-article {
       width: 100%;
    margin: 0px auto;
    max-width: 1200px;
  
        
}
.article-template__content.page-width.page-width--narrow.rte.scroll-trigger.animate--slide-in {
    padding: 0;
    margin-top: 20px;
     margin-right: 12px !important; 
     width: 93% !important;
   
}
.elementor-widget-container {
    margin-left: 1px !important;
}
/* blog tab */

    .bvt-heading h2 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 8px;
        text-align: center;
    }

    
    .bvt-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 1px;
        text-align: center;
    }

    .bvt-tabs button {
        /* font-size: 13px;
        padding: 5px 15px;
        margin: 0 0px; */
        border-radius: 5px;
    }

    
    .bvt-cards {
        flex-direction: column;
    }

    .bvt-cards-inner {
        flex: 0 0 100%;
        padding: 5px 10px;
    }

    .bvt-card {
        margin: 20px 0;
    }

   
    .bvt-img img {
        height: 199px;
    }

   
    .bvt-body {
        padding: 15px;
    }

    .bvt-body h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .bvt-body p {
        font-size: 13px;
        line-height: 20px;
    }


    .bvt-body a.bvt-btn {
        font-size: 13px;
        padding: 6px 12px;
    }

   
    .video_icon svg {
        width: 55px;
        height: 55px;
    }
    /* testimonial css  */
    .testimonial-slider-section {
    padding: 7px 8px;

}
.testimonial-slider-section h2 {
    font-size: 29px;
    font-family:nunito;
    margin-bottom: 44px;
}
.blog-video-tabs {
    /* margin-bottom: 75px;
     margin-top: 56px; */
     padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: -1px;
}
a.button.button--primary {
    margin-bottom: 15px;
}
}
/* end responsiveness */


 /*form loader css  */
  #global-preloader {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100vh !important;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}


#global-preloader::before {
  content: "";
  width: 120px;
  height: 120px;
  background-image: url("/cdn/shop/files/hobbsgo-site-logo-bold.png?v=1765467866");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0% { opacity: 0.5; transform: scale(0.95);
 }
  50% { opacity: 1; transform: scale(1);
 }
  100% { opacity: 0.5; transform: scale(0.95); 
}
}


.global-spinner {
  display: none !important;
}

#global-preloader > * {
  display: none !important;
}

body.gradient.animate--hover-default {
  min-height: 100vh;
}


#global-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  transition: opacity 0.4s ease;
}


#global-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#shopify-section-template--26192636543266__forms {
  min-height: 1000px;
}


@media screen and (max-width: 480px) {
  #shopify-section-template--26192636379426__slideshow_4gRjcr
  .slideshow__media.banner__media.media.media {
    height: 27rem !important;
  }
}


/* pages Css */

/* blog and video css */
  .bvt-heading h2 {
      font-size: 35px;
      font-weight: 700;
      margin: 0;
      margin-bottom: 16px;
      text-align:center;
  }


  .bvt-tabs {
      text-align: center;
      margin-bottom: 40px;
  }
  /* .blog-video-tabs {
      margin-bottom: 75px;
      margin-top: 75px;
  } */
  .bvt-tabs button {
       display: inline-block;
    padding: 8px 13px;
    font-size: 16px;
    /* border: navajowhite; */
    background: transparent;
    font-weight: 400;
    cursor: pointer;
    transition: 0.3s all;
    border: 1px solid var(--brand-primary);
    margin-left: 0px;
    margin-right: 0px;
    color: var(--brand-primary);
    width: 95%;
  }
  .bvt-tabs button.active{
      background-color: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
      border-radius: 6px;
          font-weight: bold;
  }
  .bvt-content {
    display: none;
  }
  .bvt-content.active {
      display: block;
  }
  .bvt-cards-inner {
   flex: 0 0 calc(100% / 3);
   padding: 5px;
  }
  .bvt-card {
      border: 1px solid #e4e4e4;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      background-color: white;
  }

  a.video_thumbs {
      position: relative;
      display: block;
  }
  a.video_thumbs::after {
      position: absolute;
      content: '';
      background: #000;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      transition: 0.3s all;
  }
  .video_icon {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 99999;
      height: auto;
      transform: translate(-50%, -50%);
  }
  .video_icon svg {
      width: 90px;
      height: 90px;
      fill: #ff1b1b;
  }
  a.video_thumbs:hover::after {
      opacity: 0.2;
  }
  a.video_thumbs:hover .video_icon svg {
       fill:rgb(179, 5, 5);
  }
  div#videos-template--25006298005794__blog_and_video_6cdb6a {
      margin-bottom: 45px;
  }
  .bvt-img img {
      width: 100%;
      display: block;
      height: 211px;
      object-fit: cover;
  }
  .bvt-body a.bvt-btn {
      background: #fff;
      color: var(--brand-primary);
       border: 2px solid var(--brand-primary);
      border-radius: 5px;
      padding: 8px 15px;
      font-size: 15px;
      text-decoration: none;
      display: inline-block;
      transition: 0.3s all;
  }
  .bvt-body a.bvt-btn:hover {
     background: var(--brand-primary);
      color: #fff;
      border-color: var(--brand-primary);
  }
  .bvt-body{
    padding: 20px;
  }
  .bvt-cards-inner_wrapp {
      padding: 2px;
  }
  .bvt-body h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 30px;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
  }
  .bvt-body p {
      font-size: 15px;
      margin-top: 8px;
      line-height: 25px;
      color: #4e4e4e;
      position: relative;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }
  .bvt-meta {
      color: #828282;
      font-size: 15px;
      font-style: italic;
      margin-top: 4px;
  }
  .bvt-cards-inner> a {
      text-decoration: none;
  }

  .bvt-slider-outer {
    position: relative;
    padding: 0 31px;
  }


  .bvt-swiper,
  .bvt-video-swiper {
    position: relative;
  }

  .bvt-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-primary);
    border: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all .25s ease;
  }
  .bvt-nav-prev {
      left: -30px !important;

  }

  .bvt-nav-next {
      right: -30px !important;
  }

  .bvt-nav:hover {
    background: var(--brand-primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
  }

  /* MOBILE */
  @media (max-width: 480px) {
    .bvt-slider-outer {
      padding: 0 51px;
    }
    .bvt-nav-prev {
      left: 0px !important;
  }
  .bvt-nav-next {
      right: 0px !important;
  }

  }
  @media (max-width: 768px) {
    .bvt-slider-outer {
      padding: 0 87px;
    }
    .bvt-nav-prev {
      left: 30px !important;
  }
  .bvt-nav-next {
      right: 30px !important;
  }
  .bvt-img img {
      height: auto !important;
      width: 100%;
      object-fit: cover;
  }

  }
  @media (max-width: 992px) {
    .bvt-slider-outer {
      padding: 0 57px;
    }
    .bvt-nav-prev {
      left: 7px !important;
       z-index: 1;

  }

  .bvt-nav-next {
      right: 7px !important;
       z-index: 1;
  }
  }

  /* grooming css */
  

  .page-width {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }

        .grooming-hero-alt{
          padding:40px 20px;
        }
        .grooming-hero-alt__inner{
          max-width:1200px;
          margin:auto;
          display:grid;
          grid-template-columns:1.1fr .9fr;
          gap:60px;
        }
       .grooming-hero-alt__heading {
          font-size: 46px;
          font-family: 'Nunito';
      }
        .grooming-hero-alt em{
          color:#9a5aa0;
        }

        .grooming-packages{
          padding:22px 20px;
          background:var(--brand-primary-50);
        }
        .grooming-packages__grid{
          display:grid;
          grid-template-columns:repeat(2,1fr);
          gap:28px;
          padding: 9px 2px;
        }
       .package-card {
          background: #fff;
          padding: 35px;
          border-radius: 20px;
          text-align: left;
          color: #000;
          box-shadow: 0 13px 27px rgba(147, 86, 147, 0.45);
      }
        .featured{
          background:#fff;color:#000;
        }
      .package-card li {
          display: block;
          margin-bottom: 0px;
      }
      .package-card:hover {
        transform: translateY(-10px);
        background: var(--brand-primary);
      }
      a.btn-primary-1:hover,
      .btn-primary-1:hover {
        color:#fff;
        background-color: var(--brand-primary);
      }
      .grooming-gallery__header {
          text-align: center;
          margin-bottom: 60px;
          font-family: 'Nunito' !important;
      }



      .package-card:hover .package-btn  {
        background: #fff;

      }
      .grooming-hero-alt__buttons {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }

      a.btn-secondary-1 {
        text-decoration: none;
        padding: 9px 39px;
        border-radius: 10px;
        border: 1px solid var(--brand-primary);
        color: var(--brand-primary);
        background: transparent;
        transition: all 0.3s ease;
        font-weight:700;
      }

      a.btn-secondary-1:hover {
        background: var(--brand-primary);
        color: #fff;
      }


      .package-card:hover h3,
      .package-card:hover ul,
      .package-card:hover .package-tag {
        color: #fff;
      }
      .package-card:hover span.package-tag.highlight{
        color: #cbcbcb;
      }
      .grooming-packages__header h2 {
        font-size: 46px !important;
        font-family: 'Nunito';
      }
      .grooming-packages__header p {
        font-size: 30px !important;
        font-family: 'Nunito';
      }
      .extra-services {
          margin: 56px 20px;
      }
  
    .extra-services__wrapper {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 40px;
        align-items: center;
        border: 1px solid var(--brand-primary);
        padding: 37px 37px;
        border-radius: 17px;
    }


      .extra-services__content h3 {
        font-size: 26px;
        color: var(--brand-primary);
        margin-bottom: 10px;
      }

      .extra-services__content p {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
      }


      .extra-services__cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      .extra-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 24px;
        text-align: left;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
        transition: transform 0.25s ease;
      }

      .extra-card:hover {
        transform: translateY(-5px);
      }

      .extra-card__icon {
        font-size: 26px;
        color: var(--brand-primary);
        margin-bottom: 12px;
      }

      .extra-card h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
      }

      .extra-card p {
        font-size: 14px;
        color: #666;
      }



      .grooming-booking {
        padding: 25px 18px;
        background: var(--brand-primary-50);
      }
      .grooming-booking__info ul {
        margin-left: 0px;
      }


      .grooming-booking__wrapper {
        max-width: 900px;
        margin: auto;
        background: #fff;
        border-radius: 24px;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        overflow: hidden;
         margin-bottom: 45px;

      }


      .grooming-booking__info {
        background: var(--brand-primary);
        color: #fff;
        padding: 45px;
      }

      .grooming-booking__info h3 {
        font-size: 26px;
        margin-bottom: 12px;
        color: #fff;
      }

      .grooming-booking__info p {
        opacity: 0.9;
        margin-bottom: 30px;
        line-height: 1.6;
      }
      .grooming-packages__header h2::after {
      content: "";
      display: block;
      width: 50px;
      height: 4px;
      background: var(--brand-primary);
      margin: 10px auto ;
      border-radius: 2px;
    }

    .grooming-packages__header p {
      margin-top: 8px;
      font-size: 14px;
      color: #777;
    }
      .grooming-booking__info ul {
        list-style: none;
        padding: 0;
      }

      .grooming-booking__info li {
        margin-bottom: 18px;
      }


      .grooming-booking__form {
        padding: 45px;
      }

      .form-field {
        margin-bottom: 18px;
      }

      #PetRelocationForm .form-field {
        margin-bottom: 10px;
      }

      #PetRelocationForm .form-field label {
        margin-top: 0px
      }

      .form-field label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        margin-top: 18px;
        display: block;
      }

      .grooming-booking__form input,
      .grooming-booking__form select {
        width: 100%;
        padding: 13px 14px;
        border-radius: 10px;
        border: 1px solid #ddd;
        font-size: 14px;
      }


      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }


      .phone-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .phone-wrap span {
        background: #f1eef3;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 14px;
      }


      .confirm-btn {
        margin-top: 25px;
        width: 100%;
        background: var(--brand-primary);
        color: #fff;
        border: none;
        padding: 15px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
      }

      .confirm-btn:hover {
        opacity: 0.9;
      }



      section.grooming-faq {
          margin-bottom: 56px;
      }
      .grooming-faq__container {
        max-width: 900px;
        margin: auto;
      }

      .grooming-faq__header {
        text-align: center;
        margin-bottom: 50px;
      }

      .grooming-faq__header h2 {
        font-size: 42px;
        font-family: 'Nunito';
      }

      .grooming-faq__header p {
        font-size: 20px;
        opacity: 0.8;
      }

      .faq-item {

        border-radius: 16px;
        margin-bottom: 16px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(147, 86, 147, 0.15);
      }

      .faq-question {
        width: 100%;
        padding: 22px 26px;
        background: none;
        border: none;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }

      .faq-icon {
        font-size: 26px;
        color: var(--brand-primary);
        transition: transform 0.3s ease;
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        padding: 0 26px;
        transition: max-height 0.4s ease;
      }

      .faq-answer p {
        padding-bottom: 22px;
        line-height: 1.6;
        opacity: 0.85;
      }

      .faq-item.active .faq-answer {
        max-height: 300px;
      }

      .faq-item.active .faq-icon {
        transform: rotate(45deg);
      }
        .grooming-hero-alt__image img {
          width: 100%;
      }
      p.grooming-hero-alt__text {
          margin-bottom: 33px;
      }

      a.btn-primary-1 {
          text-decoration: none;
          color: var(--brand-primary);
          border: 1px solid var(--brand-primary);
          padding: 9px 39px;
           border-radius: 10px;
           font-weight: 700;
      }
      a.package-btn {
          text-decoration: none;
          color: var(--brand-primary);
          border: 1px solid var(--brand-primary);
          padding: 6px 22px;
          border-radius: 10px;

      }
     .package-card h3 {
        color: var(--brand-primary);
        font-size: 40px;
        margin: 0px;
    }
       .package-card ul {
          margin-left: -38px;
      }
      .package-card li {
          display: block;
      }
      .grooming-packages__header {
          text-align: center;
          margin-bottom: 18px;
      }

    .grooming-gallery {
    margin-bottom: 49px;
    padding: 0px 20px;
    background: #fff;
}

      .grooming-gallery__header {
        text-align: center;
        margin-bottom: 60px;
      }

      .gallery-eyebrow {
        font-size: 25px;
        letter-spacing: 2px;
        font-weight: 600;
        color: #c08ac7;
        display: block;
        margin-bottom: 10px;
        font-family: 'Nunito';
      }

      .gallery-heading {
        font-size: 40px;
        font-weight: 700;
      }

      .gallery-heading em {
        color: #2f6df6;
        font-style: italic;
      }


      .grooming-gallery__grid {
        max-width: 1000px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }


      .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        aspect-ratio: 0 / 1;
        background: #eee;
      }

      .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter 0.5s ease, transform 0.5s ease;
      }


      .gallery-item:hover img {
        filter: grayscale(0%);
        transform: scale(1.05);
      }



      h1.grooming-hero-alt__heading {
        margin: 12px 0px !important;
    }
    .grooming-hero-alt__content {
        margin-top: 45px;
    }
    .grooming-packages__header h2 {
        margin: 0px !important;
    }
    .grooming-packages__header p {
        margin-top: 5px !important;
    }
   span.grooming-hero-alt__eyebrow {
    font-family: 'Nunito';
    color: var(--brand-primary);
    font-weight: 700;
}
    span.head-1 {
        color: var(--brand-primary);
    }
    .grooming-hero-alt__image img {
        width: 100%;
        border: 11px solid #F7F7F7;
        border-radius: 20px;
    }

    .grooming-packages__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      align-items: stretch;
    }

    .package-card {
      display: flex;
      flex-direction: column;
      height: 100%;
    }


    .package-card .package-btn {
      margin-top: auto;
      align-self: flex-start;
    }

    .grooming-gallery-swiper .swiper-slide {
      height: auto;
    }


    .gallery-item {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }


    .gallery-item img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 2;
      object-fit: cover;
      display: block;
    }


    .gallery-item .gallery-text {
      padding: 12px;
      text-align: center;
    }


  /* {% comment %} responsiveness {% endcomment %} */
  @media (max-width: 768px) {
    .page-width {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }


    .grooming-hero-alt {
      padding: 30px 0;
    }

    .grooming-hero-alt__inner {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .grooming-hero-alt__content {
      margin-top: 0;
      text-align: center;
    }

    .grooming-hero-alt__heading {
      font-size: 30px;
      line-height: 1.25;
    }

    .grooming-hero-alt__text {
      font-size: 15px;
      line-height: 1.6;
    }

    .grooming-hero-alt__buttons {
      justify-content: center;
    }

    .grooming-hero-alt__image img {
      border-width: 6px;
    }


    a.btn-primary-1,
    a.btn-secondary-1 {
      width: 100%;
      text-align: center;
      padding: 12px 20px;
      font-size: 14px;
    }


    .grooming-packages {
      padding: 40px 0;
    }
    .grooming-packages__header {
    text-align: center;
    margin-bottom: -15px;
}

    .grooming-packages__header h2 {
      font-size: 32px !important;
    }

    .grooming-packages__header p {
      font-size: 16px !important;
    }

    .grooming-packages__grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .package-card {
      padding: 24px;
    }

    .package-card h3 {
      font-size: 28px;
    }

    .package-card ul {
      margin-left: -24px;
    }

    .package-btn {
      width: 100%;
      text-align: center;
      padding: 10px;
    }


    .extra-services {
      margin: 40px 0;
      padding: 0;
    }

    .extra-services__wrapper {
      grid-template-columns: 1fr;
      padding: 24px;
      gap: 24px;
    }

    .extra-services__content {
      text-align: center;
    }

    .extra-services__content h3 {
      font-size: 22px;
    }

    .extra-services__cards {
      grid-template-columns: 1fr;
    }

    .extra-card {
      padding: 20px;
      text-align: center;
    }

    .extra-card__icon {
      font-size: 30px;
    }


    .grooming-gallery {
      padding: 0px 0;
    }

    .gallery-eyebrow {
      font-size: 16px;
    }

    .gallery-heading {
      font-size: 28px;
    }

    .gallery-item img {
      aspect-ratio: 1 / 1.4;
    }


    .grooming-booking {
      padding: 60px 0;
    }

    .grooming-booking__wrapper {
      grid-template-columns: 1fr;
      border-radius: 18px;
    }

    .grooming-booking__info {
      padding: 30px;
      text-align: center;
    }

    .grooming-booking__info h3 {
      font-size: 22px;
    }

    .grooming-booking__form {
      padding: 30px;
    }


    .form-grid {
      grid-template-columns: 1fr;
    }

    .confirm-btn {
      padding: 14px;
      font-size: 15px;
    }


    .grooming-faq__header h2 {
      font-size: 30px;
    }

    .grooming-faq__header p {
      font-size: 16px;
    }

    .faq-question {
      font-size: 16px;
      padding: 18px;
    }

  }


  /* pet relocation css */

  .pet-relocation {
    font-family: inherit;
  }

  .pet-relocation .shopify-section:nth-child(even) {
  background-color: #d0d0d0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  padding-top: 40px;
  padding-bottom: 40px;
  }

/* Reorder experience section on mobile */
@media screen and (max-width: 749px) {
  .pet-relocation .experience__inner {
    display: flex;
    flex-direction: column;
  }
  
  .pet-relocation .experience__left {
    order: 2; /* Image moves to bottom */
  }
  
  .experience__right {
    order: 1; /* Text stays on top */
  }
}

@media screen and (max-width: 749px) {
  .pet-relocation .shopify-section:nth-child(even) {
    background-color: #c5c5c5;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* .pet-relocation .shopify-section:nth-child(even) {
  background-color: #e5e5e5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (max-width: 749px) {
  .pet-relocation .shopify-section:nth-child(even) {
    background-color: #dadada;
    padding-top: 30px;
    padding-bottom: 30px;
  }
} */

  
  .pet-hero {
    padding: 80px 20px 20px;
  }

  .pet-hero__inner {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
  }

  .pet-hero__heading {
    font-size: 48px;
    line-height: 1.2;
    color: #2b2b2b;
  }

  .pet-hero__text {
    margin: 20px 0 30px;
    font-size: 16px;
    color: #666;
    max-width: 520px;
  }

  .pet-hero__buttons {
    display: flex;
    gap: 15px;
  }

  .btn-primary {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary-light);
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
  }

  .btn-secondary {
    border: 1px solid var(--brand-primary-light);
    color: var(--brand-primary-light);
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
  }
.btn-primary:hover,
.btn-secondary:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

  .pet-hero__image img {
    width: 100%;
    max-width: 420px;
    border-radius: 60% 40% 55% 45%;
    object-fit: cover;
  }

 
  .pet-stats {
    margin-top: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .stat-card {
    background: #faf7fb;
    padding: 26px;
    border-radius: 20px;
    text-align: center;
  }

  .stat-card h3 {
    font-size: 28px;
    color: var(--brand-primary-light);
  }

  .stat-card p {
    font-size: 12px;
    letter-spacing: 1px;
    color: #777;
  }

  .experience {
   padding-top:20px;
   padding-bottom:60px;
  }
  .experience__image {
  width: 100%;
  max-width: 360px;
  border-radius: 30px;
  object-fit: cover;
}


  .experience__inner {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 50px;
  }

  .experience__tag {
    background: #f3ecf7;
    padding: 14px 22px;
    border-radius: 50px;
    font-size: 14px;
  }

  .experience__right h2 {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .experience blockquote {
    font-style: italic;
    color: var(--brand-primary-light);
    margin: 20px 0;
  }

  .experience p {
    color: #666;
    line-height: 1.6;
  }

  .experience__badges {
    display: flex;
    gap: 40px;
    margin-top: 30px;
  }

  .experience__badges strong {
    font-size: 22px;
    color: var(--brand-primary-light);
  }

  .experience__badges span {
    font-size: 12px;
    letter-spacing: 1px;
    color: #777;
  }
.travel-routes {
  padding: 90px 20px;
  background: #fff;
}

.travel-routes__container {
  max-width: 1200px;
  margin: auto;
}

.travel-routes__header {
  text-align: center;
  margin-bottom: 60px;
}

.travel-routes__header h2 {
  font-size: 36px;
  color: #2b2b2b;
}

.travel-routes__header p {
  color: #777;
  font-size: 15px;
  margin-top: 10px;
}

.travel-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.route-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  transition: transform 0.3s ease;
}

.route-card:hover {
  background-color: #8d5ab1;
  transform: translateY(-6px);
}

.route-icon {
  width: 45px;
  margin-bottom: 0px;
}

.route-card h3 {
  font-size: 18px;
  color: #3b3b3b;
  margin-bottom: 10px;
}

.route-card p {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
}
.families-reunited {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
}

.families-heading {
  font-size: 42px;
  margin-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  text-align: center
}

.families-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.family-card {
  background: #ffffff;
  padding: 50px 35px;
  border-radius: 26px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}


.family-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 4px solid #e6e6e6;
  overflow: hidden;
}

.family-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.family-name {
  font-size: 22px;
  font-weight: 600;
  margin: 10px 0 4px;
}

.family-destination {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #b18bbf;
  font-weight: 700;
  margin-bottom: 20px;
}

.family-quote {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  font-style: italic;
}


.journey-form {
  padding: 100px 20px;
  background: #fff;
}

.journey-form__card {
  max-width: 640px;
  margin: auto;
  background: var(--brand-primary-50);
  border-radius: 28px;
  padding: 50px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  text-align: center;
}

.form-status {
  font-size: 1.4rem;
}

.page-heading {
  font-size: 28px;
  margin-bottom: 10px;
  color: #2b2b2b;
}

.journey-form p {
  font-size: 14px;
  color: #777;
  margin-bottom: 35px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
}

.form-field label {
  font-size: 11px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 6px;
  display: block;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #eee;
  font-size: 14px;
  outline: none;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--brand-primary-light);
}

.form-field.full {
  grid-column: span 2;
}

.submit-btn {
  margin-top: 30px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: transparent;
  color: var(--brand-primary);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--brand-primary);
  cursor: pointer;

}

.submit-btn:hover {
  background:var(--brand-primary);
  color:#fff;
}

@media (max-width: 768px) {


  .pet-hero {
    padding: 40px 16px;
  }

  .pet-hero__inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .pet-hero__heading {
    font-size: 30px;
    line-height: 1.25;
  }

  .pet-hero__text {
    font-size: 15px;
    margin: 14px auto 24px;
  }

  .pet-hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .pet-hero__image {
    display: flex;
    justify-content: center;
  }

  .pet-hero__image img {
    max-width: 260px;
    width: 100%;
    border-radius: 50%;
  }
    /* STATS */
  .pet-stats {
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .stat-card h3 {
    font-size: 22px;
  }

  .stat-card p {
    font-size: 11px;
  }

 
     .experience {
        padding: 5px 16px;
    }
  .experience__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .experience__image {
    max-width: 260px;
    margin: 0 auto;
    border-radius: 20px;
  }

  .experience__right h2 {
    font-size: 28px;
  }

  .experience blockquote {
    font-size: 15px;
  }

  .experience p {
    font-size: 14px;
  }

  .experience__badges {
    justify-content: center;
    gap: 30px;
  }
   
  .travel-routes {
    padding: 60px 16px;
  }

  .travel-routes__header h2 {
    font-size: 30px;
  }

  .travel-routes__header p {
    font-size: 14px;
  }

  .travel-routes__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .route-card {
    padding: 24px;
  }


  .families-reunited {
    padding: 60px 16px;
  }

  .families-heading {
    font-size: 30px;
    margin-bottom: 36px;
    text-align: center
  }

  .families-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .family-card {
    padding: 34px 24px;
  }

  .family-avatar {
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
  }

  .family-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .family-name {
    font-size: 20px;
  }

  .family-destination {
    font-size: 11px;
    letter-spacing: 1.2px;
  }

  .family-quote {
    font-size: 14px;
    line-height: 1.6;
  }
 
  .form-grid {
    display: block;
}
.form-field{
margin-bottom: 15px;
}
  .journey-form {
    padding: 17px 1px;
  }
  .form-field label {
    margin-left: 8px;
}

  .journey-form__card {
    padding: 36px 24px;
    border-radius: 22px;
  }

  .page-heading h2 {
    font-size: 26px;
  }

  .journey-form p {
    font-size: 13px;
  }

  .submit-btn {
    font-size: 15px;
    padding: 15px;
  }
}

/* swiper banner css Start Saifu new-swiper-banners*/

/* Wrapper auto-sizes via aspect-ratio matching the recommended image
   dimensions, so object-fit: contain shows the full image without
   cropping at any viewport. Designed-for sizes:
     Desktop: 2400 x 800 px (3:1) - hero takes ~60% of 1080p viewport
     Mobile : 1080 x 1350 px (4:5 portrait)
   If the merchant uploads a different aspect, letterbox bars appear
   in the wrapper background (--brand-primary-50) - no cropping. */
.hobbs-swiper-wrapper {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  min-height: 320px;
  max-height: 75vh;
  background: var(--brand-primary-50);
}

.hobbs-swiper,
.hobbs-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.hobbs-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hobbs-swiper .swiper-slide picture,
.hobbs-swiper a.hobbs-banner-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hobbs-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


.hobbs-swiper .swiper-pagination-bullet {
  background: #000;
  opacity: 0.3;
}

.hobbs-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}
 .hobbs-swiper .swiper-pagination {
  bottom: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.hobbs-swiper .swiper-pagination-bullet {
  position: relative;
  width: 40px;
  height: 4px;
 background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  overflow: hidden;
  opacity: 1;
}


.hobbs-swiper .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #000;
}


.hobbs-swiper .swiper-pagination-bullet-active::after {
  animation: progressFill linear forwards;
  animation-duration: var(--autoplay-duration);
}

@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
} 


/* @media (min-width: 1200px) {
  .hobbs-swiper {
    height: 600px !important;
  }
} */


@media (max-width: 749px) {
  /* Mobile hero is hard-capped at 50vh - half the viewport, never more.
     The aspect-ratio is a starting hint; the cap almost always kicks in
     on real phones (aspect 1:1 of 390px = 390px height; 50vh of 844px =
     422px - cap rarely active on tall phones). On short phones (iPhone
     SE) the cap engages and a small side letterbox in --brand-primary-50
     appears. Designed for 1080 x 1080 px (1:1) mobile image. */
  .hobbs-swiper-wrapper {
    aspect-ratio: 1 / 1;
    min-height: 280px;
    max-height: 50vh;
  }
  .hobbs-swiper-wrapper + * {
    margin-top: 0;
  }
}

/* petdog banner css */

.cat-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: 20px;
  padding: 30px;
  margin-bottom: 20px;
  position: relative;
}

.cat-banner-text {
  z-index: 2;
}

.cat-banner-text p {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
}

.cat-banner-text h2 {
  font-size: 65px;
  font-weight: 900;
  margin: 0;
}

.cat-banner-image img {
    border-radius: 12px;
    width: 200px;
    position: absolute;
    right: 50px;
    top: -52px;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.cat-card {
    text-align: center;
    padding: 0;
    transition: .3s all;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* .cat-card img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
} */

.cat-card-text {
    position: absolute;
    top: 16px;
    width: 100%;
    padding: 15px;
}

.cat-card h4 {
    font-size: 18px;
    margin: 5px 0 0;
    font-weight: 400;
    text-align: left;
}

@media (max-width: 768px) {
  .cat-banner-text h2 {
    font-size: 45px;
  }
  .cat-banner-text p {
    font-size: 22px;
  }
  .cat-banner-image img {
    width: 150px;
    right: 20px;
    top: -40px;
  }
    .cat-grid {
    display: flex;
    gap: 16px;
    padding-bottom: 10px;
    overflow-x: hidden; 
    scroll-snap-type: x mandatory;
    position: relative;
  }

  .cat-card {
    min-width: 75%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .cat-card img {
    display: block;
    width: 100%;
    height: 153px;
    object-fit: cover;
  }
}

@media screen and (max-width: 998px) {

  .cat-grid {
    display: flex !important;
    overflow-x: hidden !important;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
  }

  .cat-card {
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    scroll-snap-align: start;
  }

  .cat-card img {
    height: 160px !important;
    object-fit: cover !important;
  }
}

/* testimonial css  */
.testimonial-slider-section {
  text-align: center;
  padding: 48px 20px;
  background: #fff;
}

.testimonial-slider-section h2 {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 55px;
  margin-top:0px;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.testimonial-carousel {
  position: relative;
  width: 100%;
}

.testimonial-slide {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px;
  /* margin-right: 8px !important; */
  text-align: center;
  max-width: 350px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.testimonial-carousel {
  width: 100%;
  overflow: hidden;
}

.customer-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.stars {
  color: #FFD700;
  font-size: 18px;
  margin: 10px 0;
}

.service {
  font-weight: bold;
  margin: 0;
}

.name {
  font-size: 14px;
  color: #555;
  margin: 0 0 10px;
}

.review {
  font-size: 14px;
  color: #666;
}

.view-all-button {
display: inline-block;
position: relative;
padding: 3px 0;
background-color: transparent;
color: var(--brand-primary);
text-decoration: none;
transition: color 0.3s ease;
}

.view-all-button::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--brand-primary);
transition: width 0.3s ease;
}

.view-all-button:hover::after {
width: 100%;
}

.view-all-button:hover {
color: var(--brand-primary);
}

.view-all-wrapper {
text-align: right;
}
.swiper-wrapper {
display: flex;
gap: 7px !important;

}


@media (max-width: 768px) {
  .testimonial-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .swiper-wrapper {
    display: flex;
    gap: 0px !important;
  
  }
}



/* CSS Start  some currection */
.our-services__card-inner:hover{
  box-shadow: 0 2px 8px #00000026;
}

a.hobbs-banner-link {
  display: block;
  width: 100%;
  height: 100%;
}
a.hobbs-banner-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

div#Banner-template--26584373920034__image_banner_Mb9364{
  margin-top: 0px;
}

.travel-route{
      background: var(--brand-primary-50);
    padding: 1px 0px 50px;

}

.route-card:hover  h3{
  color: #ffffff;
}
.route-card:hover p{
  color: #dddddd;
}

.service-booking{
  background-color: var(--brand-primary-50);
      padding: 67px 18px 25px;
}


/* product grid css  mobile responsive start */


.service-faq .service-faq__container{
  max-width: 1200px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #shopify-section-template--26732218777890__product-grid main#MainContent{
    padding-top: 116px !important;
  }
  h2.plp-custom-heading{
        padding-top: 10px;
         font-size: 22px;
    font-weight: 700;
  }
  div.plp-custom-description p,
   div.plp-custom-description p b{
    font-size: 14;
  }
  ul#product-grid{
    justify-content: space-between;
  }
    ul#product-grid.grid--2-col-tablet-down li{
    width: 49%;
    }
    ul#product-grid.grid--1-col-tablet-down li{
    width: 100%;
    }

       ul#product-grid li .card__media  .media img{
        object-fit: contain;
       }
       .mobile-facets__open {
         color: #fff;
         padding: 0.6rem 1.1rem;
         background: var(--brand-primary);
         text-decoration: none;
         border-radius: 999px;
         width: auto;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         font-weight: 600;
         font-size: 0.95rem;
         line-height: 1;
       }
       .mobile-facets__open .svg-wrapper {
         width: 1.1rem;
         height: 1.1rem;
         display: inline-flex;
       }
       .mobile-facets__open .svg-wrapper svg {
         width: 100%;
         height: 100%;
         color: #fff;
       }
       .mobile-facets__open line,
       .mobile-facets__open circle,
       .mobile-facets__open path {
         stroke: #fff;
         fill: #fff;
       }
       .mobile-facets__open-wrapper {
         display: inline-block;
       }
       .mobile-facets__open > * + * {
         margin-left: 0;
       }
       #pet-relocation-form .page-width{
        padding: 0px 0px 0px 0px !important;
       }
       .service-faq .service-faq__container{
        padding: 0px 16px;
       }
          .service-faq .service-faq__container .faq-question{
                    padding: 18px;
        text-align: left;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
          }

          .grid--peek.slider .grid__item:first-of-type{
            margin-left: 0px !important;
          }
          .product__info-container.product__column-sticky .product__title h1{
            font-size: 22px;
            font-weight: 700;
          }
}
.product-form div.sac-field input.sac-input{

border: 1px solid var(--brand-primary);
    border-radius: 6px;
    padding: 15px 10px;
}
.product-form div.sac-field input.sac-input:focus{
  outline: none;
    box-shadow: 0px 0px 0px 3px var(--brand-primary)4d;
border: 1px solid var(--brand-primary);
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .product--medium:not(.product--no-media) .product__media-wrapper,
  .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
    .product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper
 {
        max-width: 52%;
        width: 100%;
    }

}

.main-blog h1.title--primary.scroll-trigger.animate--fade-in{
  margin-top: 0px !important;
}

/* ============================================================
   Premium button styling - site-wide override
   Base: #7a52a5 (--brand-primary-light)
   Hover: #573579 (--brand-primary) with lift + shadow
   Added 2026-05-15 per user request, see project_brand_palette.md
   ============================================================ */
.button,
.button--primary,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.cart__checkout-button,
.product-form__submit,
.search__button,
button.button:not(.button--secondary):not(.button--tertiary),
input[type="submit"].button,
.btn-purple,
a.button {
  background-color: var(--brand-primary-light) !important;
  border: 1px solid var(--brand-primary-light) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(122, 82, 165, 0.15);
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button:hover:not([disabled]):not([aria-disabled='true']),
.button--primary:hover:not([disabled]),
.shopify-payment-button__button:hover:not([disabled]),
.shopify-payment-button__button--unbranded:hover:not([disabled]),
.cart__checkout-button:hover:not([disabled]),
.product-form__submit:hover:not([disabled]),
.search__button:hover:not([disabled]),
button.button:not(.button--secondary):not(.button--tertiary):hover:not([disabled]),
input[type="submit"].button:hover:not([disabled]),
.btn-purple:hover,
a.button:hover {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(87, 53, 121, 0.28);
}

.button:active:not([disabled]),
.button--primary:active:not([disabled]),
.shopify-payment-button__button:active:not([disabled]),
.cart__checkout-button:active:not([disabled]),
.product-form__submit:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(87, 53, 121, 0.2);
  transition-duration: 0.1s !important;
}

.button:focus-visible,
.button--primary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Secondary buttons (including .quick-add__submit, product card Add to Cart)
   use the SAME filled treatment as primary - brand-primary-light base,
   brand-primary on hover. Chain classes for high specificity to beat
   Dawn's scheme-driven --color-button and the older rules above. */
.button--secondary,
button.button.button--secondary,
.quick-add__submit,
.quick-add__submit.button,
.quick-add__submit.button.button--secondary,
.card-wrapper .button,
.card-wrapper button.button,
.product-card-wrapper .button,
.product-card-wrapper button.button,
.product-form__submit.button {
  background-color: var(--brand-primary-light) !important;
  border: 1px solid var(--brand-primary-light) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(122, 82, 165, 0.15) !important;
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button--secondary:hover:not([disabled]),
button.button.button--secondary:hover:not([disabled]),
.quick-add__submit:hover:not([disabled]),
.quick-add__submit.button:hover:not([disabled]),
.quick-add__submit.button.button--secondary:hover:not([disabled]),
.card-wrapper .button:hover:not([disabled]),
.card-wrapper button.button:hover:not([disabled]),
.product-card-wrapper .button:hover:not([disabled]),
.product-card-wrapper button.button:hover:not([disabled]),
.product-form__submit.button:hover:not([disabled]) {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(87, 53, 121, 0.28) !important;
}

/* ── HobbsGo on Wheels floating badge ──────────────────────────── */
.how-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Nunito', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

/* Bounce animation - the van "drives" in place */
@keyframes how-van-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(-4px) rotate(-1.5deg); }
  75%       { transform: translateY(-2px) rotate(1deg); }
}
/* Wheel spin */
@keyframes how-wheel-spin {
  from { transform-origin: center; transform: rotate(0deg); }
  to   { transform-origin: center; transform: rotate(360deg); }
}
/* Dog ear flap */
@keyframes how-ear-flap {
  0%, 80%, 100% { transform: rotate(0deg); transform-origin: bottom center; }
  90%           { transform: rotate(-18deg); transform-origin: bottom center; }
}
/* Green live pulse */
@keyframes how-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* Card pop-in */
@keyframes how-card-in {
  from { opacity: 0; transform: scale(0.78) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
/* Shimmer on offers */
@keyframes how-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Trigger button ── */
.how-badge__trigger {
  position: relative;
  width: 72px;
  height: 72px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  animation: how-van-bounce 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(87, 53, 121, 0.45));
  transition: filter 0.2s;
}
.how-badge__trigger:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 12px 24px rgba(87, 53, 121, 0.6));
}
.how-badge__trigger svg.how-badge__van-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Wheel elements inside the inline SVG */
.how-badge__van-svg .how-wheel {
  animation: how-wheel-spin 0.8s linear infinite;
}
/* Dog ear inside SVG */
.how-badge__van-svg .how-dog-ear-left {
  animation: how-ear-flap 3s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* Live pulse dot */
.how-badge__pulse {
  position: absolute;
  top: 4px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #22c55e;
  border-radius: 50%;
  border: 2.5px solid #fff;
  pointer-events: none;
}
.how-badge__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.45);
  animation: how-pulse 1.6s ease-out infinite;
}

/* Tooltip "tap me" label - floats above trigger */
.how-badge__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #fff;
  border-radius: 10px 10px 2px 10px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(87,53,121,0.15);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}
.how-badge__tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}
.how-badge.how-badge--open .how-badge__tooltip { opacity: 0; }

/* ── Expanded card ── */
.how-badge__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(87, 53, 121, 0.2);
  width: 284px;
  margin-bottom: 12px;
  border: 1.5px solid var(--brand-primary-100);
  transform-origin: bottom right;
  animation: how-card-in 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  overflow: hidden;
}
.how-badge__card-banner {
  background: linear-gradient(130deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.how-badge__card-banner-van {
  width: 54px;
  height: 36px;
  flex-shrink: 0;
}
.how-badge__card-banner-text {
  flex: 1;
}
.how-badge__card-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.2;
}
.how-badge__card-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  margin: 0;
}
.how-badge__card-close {
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.how-badge__card-close:hover { background: rgba(255,255,255,0.35); }

.how-badge__card-body { padding: 14px 16px 16px; }

.how-badge__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--brand-primary-50);
  border-radius: 50px;
  padding: 5px 12px;
  margin-bottom: 12px;
  width: fit-content;
}
.how-badge__loc svg { width: 12px; height: 12px; flex-shrink: 0; }

.how-badge__offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.how-badge__offer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  background: #f8f8fb;
  border: 1px solid var(--brand-primary-100);
}
.how-badge__tag {
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.how-badge__tag--purple { background: var(--brand-primary); color: #fff; }
.how-badge__tag--teal   { background: #1a7f64; color: #fff; }
.how-badge__tag--gold   { background: #b45309; color: #fff; }

.how-badge__cta {
  display: block;
  text-align: center;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  background-size: 200% auto;
  color: #fff;
  border-radius: 50px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background-position 0.4s ease, transform 0.2s;
}
.how-badge__cta:hover {
  background-position: right center;
  transform: translateY(-2px);
}

@media (max-width: 749px) {
  .how-badge { bottom: 16px; right: 16px; }
  .how-badge__card { width: 250px; }
  .how-badge__trigger { width: 62px; height: 62px; }
}

/* Blog listing: contain images so nothing is cropped; brand bg fills letterbox */
.main-blog .article-card__image-wrapper .media {
  background-color: var(--brand-primary-50);
}
.main-blog .article-card__image-wrapper .media > img {
  object-fit: contain !important;
}

/* Blog listing: rounded image corners */
.main-blog .article-card__image-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

/* Article hero: escape the 5rem horizontal padding so image is full-width */
.custom-blog-article .article-template__hero-container {
  margin-left: -5rem;
  margin-right: -5rem;
  margin-top: -20px;
}
@media (max-width: 992px) {
  .custom-blog-article .article-template__hero-container {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0;
  }
}


/* ── Sold out / Sale badge — compact pill on PLP + product cards ─── */
.card-wrapper .card__badge .badge,
.card__badge .badge {
  font-size: 1.1rem !important;
  padding: 0.35rem 0.9rem 0.4rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.card:not(.card--horizontal) > .card__content > .card__badge {
  margin: 0.9rem !important;
}

@media screen and (max-width: 749px) {
  .card-wrapper .card__badge .badge,
  .card__badge .badge {
    font-size: 1rem !important;
    padding: 0.3rem 0.75rem 0.35rem !important;
  }
}

/* ==========================================================================
   Footer social + app-download row (social left, app right)
   ========================================================================== */
.footer__social-app-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 750px) {
  .footer__social-app-row .footer__list-social {
    position: absolute;
    left: 0;
  }
}

.footer__social-app-row .footer__list-social {
  margin: 0;
  flex: 0 0 auto;
}

.footer__incubation {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  text-align: left;
  min-width: 0;
}

.footer__incubation-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  padding: 1.2rem 2rem;
  border: 1px solid var(--brand-primary-100);
  border-radius: 1.6rem;
  background: var(--brand-primary-50);
  box-shadow: 0 0.6rem 1.8rem rgba(87, 53, 121, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.footer__incubation-link:hover {
  box-shadow: 0 1rem 2.4rem rgba(87, 53, 121, 0.16);
  transform: translateY(-0.2rem);
}

.footer__incubation-logo {
  width: auto;
  height: 5rem;
  max-width: 12rem;
  object-fit: contain;
  display: block;
}

.footer__incubation-text {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-primary);
  border-bottom: none;
}

.footer__incubation-link:hover .footer__incubation-text,
.footer__incubation-link:focus-visible .footer__incubation-text {
  color: var(--brand-primary-hover);
}

/* ===== Full purple footer (replica) — whole footer purple, white text ===== */
.footer {
  background: var(--brand-primary, #573579) !important;
  color: #fff;
}
.footer .footer-block__heading,
.footer .footer-block__details-content a,
.footer .footer-block__details-content,
.footer .footer-dtp__name,
.footer .footer-dtp__desc,
.footer .footer-dtp__tagline,
.footer .footer__list-social .list-social__link,
.footer .list-menu__item,
.footer a.link--text { color: #fff !important; }
/* Links: dim by default, brighten on hover — must stay visible on purple (was vanishing) */
.footer .footer-block__details-content a,
.footer .list-menu__item--link { opacity: .8; transition: opacity .15s ease; text-decoration: none; }
.footer .footer-block__details-content a:hover,
.footer .footer-block__details-content a:focus-visible,
.footer .list-menu__item--link:hover,
.footer .list-menu__item--link:focus-visible {
  color: #fff !important; opacity: 1; text-decoration: underline; text-underline-offset: .3rem;
}
/* Reduce oversized footer type to the reference scale */
.footer .footer-block__heading { opacity: 1; font-weight: 700; font-size: 1.6rem !important; letter-spacing: .01em; }
.footer .footer-block__details-content a,
.footer .list-menu__item--link { font-size: 1.35rem; }
.footer .footer-dtp__name { font-size: 2.2rem !important; }
.footer .footer-dtp__desc { font-size: 1.4rem !important; }
.footer .footer-dtp__tagline { font-size: 1.1rem !important; }
.footer .footer-dtp__tagline { color: rgba(255,255,255,.72) !important; }
.footer .footer-dtp__desc { color: rgba(255,255,255,.85) !important; }
.footer .footer__list-social .icon { color: #fff; fill: #fff; }

/* Brand as the first footer column; flex so every column stays on one row */
.footer .footer__blocks-wrapper { display: flex !important; flex-wrap: wrap; gap: 3rem 4rem; align-items: flex-start; }
.footer .footer-block--menu { flex: 1 1 14rem; }
.footer-block--brand { flex: 1.5 1 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; max-width: 42rem; }
.footer-block--brand .footer-dtp__name { font-family: 'Nunito', sans-serif; font-weight: 700; line-height: 1.1; }
.footer-block--brand .footer-dtp__tagline { font-family: 'Nunito', sans-serif; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.footer-block--brand .footer-dtp__desc { line-height: 1.6; margin: .6rem 0 1rem; }
.footer-block--brand .footer__list-social { margin: .4rem 0 0; padding: 0; justify-content: flex-start; }
.footer-block--brand .footer__list-social.list-social { justify-content: flex-start; }
@media (max-width: 989px) { .footer-block--brand { flex-basis: 100%; } }
@media (max-width: 749px) {
  .footer .footer__blocks-wrapper { flex-direction: column; gap: 0; }
  .footer-block--brand { flex-basis: auto; max-width: 100%; margin-bottom: 1.6rem; }
  .footer .footer-block--menu { flex-basis: auto; width: 100%; border-top: 1px solid rgba(255,255,255,.14); }
}

/* 3-item bottom bar: copyright · NNF · secure payments */
.footer__bottombar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 1.6rem 0 0; border-top: 1px solid rgba(255,255,255,.16); margin-top: 2.4rem; }
.footer__bottombar .footer__copyright { justify-self: start; color: rgba(255,255,255,.85); font-size: 1.2rem; }
.footer__bottombar .footer__pg-methods { justify-self: end; display: flex; flex-direction: row; align-items: center; gap: 1.2rem; margin: 0; }
.footer__bottombar .footer__pg-title { color: #fff; font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.footer__bottombar .footer__pg-strip { height: 3rem; width: auto; max-width: 42rem; display: block; background: #fff; border-radius: .6rem; padding: .3rem .6rem; }
@media (max-width: 749px) {
  .footer__bottombar { grid-template-columns: 1fr; justify-items: center; gap: 1.4rem; text-align: center; }
  .footer__bottombar .footer__copyright, .footer__bottombar .footer__pg-methods { justify-self: center; }
  .footer__bottombar .footer__pg-methods { flex-direction: column; align-items: center; gap: 0.8rem; width: 100%; max-width: 100%; }
  .footer__bottombar .footer__pg-title { white-space: normal; }
  .footer__bottombar .footer__pg-strip { max-width: 100%; height: auto; width: auto; }
}
/* payment card icons in the bottom bar */
.footer__pg-list.list-payment { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.footer__pg-list.list-payment .list-payment__item .icon { height: 2.4rem; width: auto; border-radius: .3rem; background: #fff; padding: .2rem .3rem; }

/* Solid purple bottom bar (separated by a hairline), copyright left / secure payments right */
.footer__content-bottom {
  background: var(--brand-primary, #573579);
  color: #fff;
  flex-wrap: wrap;
  row-gap: 1.25rem;
  padding-bottom: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer__content-bottom-wrapper {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.footer__content-bottom .footer__copyright,
.footer__content-bottom .copyright__content,
.footer__content-bottom a { color: rgba(255,255,255,.85); }
.footer__content-bottom a:hover { color: #fff; }
.footer__content-bottom .list-payment__item .icon { filter: brightness(0) invert(1); opacity: .9; }

.footer__pg-methods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0;
}

.footer__pg-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.footer__pg-lock {
  color: #fff;
  flex-shrink: 0;
}

.footer__pg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__pg-badge {
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

@media screen and (max-width: 989px) {
  .footer__pg-methods {
    align-items: center;
    text-align: center;
  }
  .footer__pg-list {
    justify-content: center;
  }
}

.footer__app-download {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  text-align: right;
  flex: 0 0 auto;
}

.footer__app-caption {
  margin: 0;
  max-width: 300px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  color: #333;
}

.footer__app-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.footer__app-qr-link {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.footer__app-qr-link:hover,
.footer__app-qr-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(87, 53, 121, 0.18);
}

.footer__app-qr-img {
  width: 110px;
  height: 110px;
  display: block;
  border-radius: 8px;
}

.footer__app-badges {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 0 1 auto;
}

.footer__app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 164px;
  padding: 0.5rem 1rem;
  background: #0a0a0a;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #0a0a0a;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.footer__app-badge:hover,
.footer__app-badge:focus-visible {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.footer__app-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fff;
  flex-shrink: 0;
}

.footer__app-badge-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.footer__app-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer__app-badge-text small {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.footer__app-badge-text strong {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 989px) {
  .footer__social-app-row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
  }
  .footer__social-app-row .footer__list-social {
    justify-content: center;
    width: 100%;
  }
  .footer__app-download {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .footer__app-caption {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__app-row {
    justify-content: center;
  }
}

@media screen and (max-width: 479px) {
  .footer__app-row {
    gap: 0.9rem;
  }
  .footer__app-qr-img {
    width: 96px;
    height: 96px;
  }
  .footer__app-badge {
    min-width: 152px;
    padding: 0.45rem 0.85rem;
  }
  .footer__app-badge-text strong {
    font-size: 1.05rem;
  }
  .footer__app-caption {
    font-size: 1rem;
    max-width: 280px;
  }
}

/* ==========================================================================
   HobbsGo product card (PLP, sliders, search, related, recommendations)
   Uniform 1:1 image box + variant pills + live discount + add-to-cart.
   ========================================================================== */
.hg-card-wrapper { height: 100%; }
.hg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  position: relative;
}
.hg-card:hover {
  /* No border-color change — just shadow + subtle lift. */
  box-shadow: 0 14px 28px rgba(87, 53, 121, 0.13);
  transform: translateY(-3px);
}
.hg-card--sold-out { opacity: 0.85; }

/* Uniform image box — plain white, no purple tint */
.hg-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hg-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hg-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 26px;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.hg-card__img--secondary { opacity: 0; }
/* Only swap images when there's actually a second one — prevents blank hover */
.hg-card--dual:hover .hg-card__img--primary { opacity: 0; }
.hg-card--dual:hover .hg-card__img--secondary { opacity: 1; }

/* Discount / sold-out badge */
.hg-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
  text-transform: uppercase;
}
.hg-card__badge--sale {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(87, 53, 121, 0.28);
}
.hg-card__badge--sold {
  background: #4a4a4a;
  color: #ffffff;
}

/* Body */
.hg-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.8rem 0.85rem;
  flex: 1 1 auto;
}
.hg-card__vendor {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7a7a;
  line-height: 1;
}
.hg-card__title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.hg-card__title-link { color: inherit; text-decoration: none; }
.hg-card__title-link:hover { color: var(--brand-primary); }

.hg-card__rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 13px;
  color: #666;
}
.hg-card__rating .rating-star { font-size: 15px; }
.hg-card__rating-count { font-size: 12px; color: #888; }

/* Two-row price block: [current] [% off]  /  [compare-at] [unit-price] */
.hg-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hg-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.hg-card__price-current {
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.15;
}
.hg-card__price-off {
  font-size: 14px;
  font-weight: 600;
  color: #1a8a3b;
  letter-spacing: 0.01em;
}
.hg-card__price-off[hidden] { display: none; }
.hg-card__price-compare {
  font-size: 13px;
  color: #9a9a9a;
  text-decoration: line-through;
}
.hg-card__price-compare[hidden] { display: none; }
/* Variant pills — wrap to multiple lines instead of horizontal scroll */
.hg-card__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.hg-pill {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
  border: 1.5px solid #d8d0e3;
  background: #ffffff;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hg-pill:hover:not(.is-selected):not(.is-unavailable) {
  border-color: var(--brand-primary-light);
  color: var(--brand-primary);
}
.hg-pill.is-selected {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}
.hg-pill.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ------------------------------------------------------------------
   PDP variant pills — match the rectangular PLP .hg-pill design.
   Overrides stock Dawn oval pills (settings variant_pills_radius: 40)
   from assets/component-product-variant-picker.css (do NOT edit that
   file). That component CSS loads INSIDE main-product.liquid, i.e. after
   custom_style.css, so an equal-specificity rule loses on load order —
   hence the extra `.product-form__input` qualifier + !important on the
   shape to guarantee the rectangular look regardless of load order/CDN.
   ------------------------------------------------------------------ */
.product-form__input.product-form__input--pill input[type='radio'] + label {
  border: 1.5px solid #d8d0e3;
  background-color: #ffffff;
  color: #333;
  border-radius: 3px !important;
  letter-spacing: 0;
  font-weight: 500;
  transition: all 0.15s ease;
}
.product-form__input.product-form__input--pill input[type='radio'] + label:before {
  box-shadow: none;
  border-radius: 3px !important;
}
.product-form__input.product-form__input--pill input[type='radio'] + label:hover {
  border-color: var(--brand-primary-light, #7a52a5);
  color: var(--brand-primary, #573579);
}
.product-form__input.product-form__input--pill input[type='radio']:checked + label {
  background-color: var(--brand-primary, #573579);
  border-color: var(--brand-primary, #573579);
  color: #ffffff;
}

/* Add to cart button */
.hg-card__form { margin-top: auto; }
.hg-card__atc {
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.hg-card__atc[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

#product-grid .grid__item .hg-card-wrapper,
.slider .grid__item .hg-card-wrapper { height: 100%; }

/* ------------------------------------------------------------------
   Responsive pass — sized around common column configurations:
   desktop 3–4 col, tablet 2–3 col, mobile 1–2 col (PLP is 1-col mobile,
   featured & related are 2-col mobile). Values kept generous enough
   at 2-col mobile that no content wraps awkwardly.
   ------------------------------------------------------------------ */
@media (max-width: 989px) {
  .hg-card__body { padding: 0.85rem 0.85rem 1rem; gap: 0.5rem; }
  .hg-card__title { font-size: 13.5px; min-height: 2.65em; }
  .hg-card__price-current { font-size: 18px; }
  .hg-card__price-off { font-size: 13px; }
  .hg-card__price-compare { font-size: 12.5px; }
  .hg-card__badge { font-size: 13px; padding: 5px 11px; top: 10px; left: 10px; }

  .hg-pill { padding: 6px 11px; font-size: 12.5px; min-width: 42px; }
  .hg-card__atc { min-height: 42px; font-size: 13.5px; }
}
@media (max-width: 749px) {
  .hg-card { border-radius: 12px; }
  .hg-card__img { padding: 12px; }
}
/* 2-col mobile grid (featured collection, related products, etc.) */
@media (max-width: 599px) {
  .hg-card__body { padding: 0.75rem 0.75rem 0.9rem; gap: 0.45rem; }
  .hg-card__vendor { font-size: 10px; }
  .hg-card__title { font-size: 13px; min-height: 2.6em; }
  .hg-card__price-current { font-size: 17px; }
  .hg-card__price-off { font-size: 12px; }
  .hg-card__price-compare { font-size: 12px; }
  .hg-card__badge { font-size: 11.5px; padding: 4px 9px; top: 8px; left: 8px; }
  .hg-pill { padding: 5px 10px; font-size: 12px; min-width: 38px; }
  .hg-card__atc { min-height: 40px; font-size: 13px; }
  .hg-card__img { padding: 10px; }
}
/* Ultra-narrow (small phones under 380px, or 3-col mobile) */
@media (max-width: 379px) {
  .hg-card__body { padding: 0.65rem 0.65rem 0.8rem; }
  .hg-card__title { font-size: 12.5px; }
  .hg-card__price-current { font-size: 15.5px; }
  .hg-card__badge { font-size: 11px; padding: 3px 8px; }
}

/* --------------------------------------------------------------------------
   PDP price block — mirrors PLP layout.
   Line 1: sale price (bold, larger) + % off (green)
   Line 2: compare-at strike-through (reduced font, gray)
   Overrides Dawn's flex-row default and .price--large size inflation.
   -------------------------------------------------------------------------- */
.price--on-sale .price__sale,
.price .price__sale {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 2px;
  flex-wrap: nowrap !important;
}
.price__sale-primary {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  line-height: 1.15;
  letter-spacing: 0;
}
.price__sale-compare {
  line-height: 1;
  margin-top: 2px;
}

/* Sale price sizing — pared back from Dawn's .price--large defaults */
.price .price-item {
  margin: 0 !important;
}
.price .price-item--sale {
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0;
  line-height: 1.15;
}
.price--large .price-item--sale {
  font-size: 26px;
}
@media (min-width: 750px) {
  .price--large .price-item--sale {
    font-size: 28px;
  }
}

/* Percent off — green, smaller than sale price */
.price-item--percent {
  color: #1a8a3b;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.price--large .price-item--percent { font-size: 16px; }

/* Compare-at — reduced font, muted gray, strike-through */
.price--on-sale .price-item--regular,
.price .price__sale-compare .price-item--regular {
  font-size: 14px !important;
  color: #9a9a9a !important;
  text-decoration: line-through;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.price--large .price__sale-compare .price-item--regular {
  font-size: 16px !important;
}

@media (max-width: 749px) {
  .price .price-item--sale { font-size: 20px; }
  .price--large .price-item--sale { font-size: 22px; }
  .price-item--percent { font-size: 13px; }
  .price--large .price-item--percent { font-size: 14px; }
  .price--on-sale .price-item--regular,
  .price .price__sale-compare .price-item--regular { font-size: 13px !important; }
  .price--large .price__sale-compare .price-item--regular { font-size: 14px !important; }
}

/* Hide the black "Sale" pill on PDP — % off next to the price says the same thing */
.price--large .price__badge-sale { display: none !important; }

/* --------------------------------------------------------------------------
   Breadcrumbs (PDP, PLP, article, blog).
   -------------------------------------------------------------------------- */
.hg-breadcrumbs {
  padding: 14px 0 18px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}
.hg-breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.hg-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.hg-breadcrumbs__link {
  color: #666;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.hg-breadcrumbs__link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.hg-breadcrumbs__sep {
  margin: 0 8px;
  color: #ccc;
  user-select: none;
}
.hg-breadcrumbs__current {
  color: #1a1a1a;
  font-weight: 500;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* PLP breadcrumbs sit inside collection-hero, needs a tiny top pad */
.collection-hero__inner .hg-breadcrumbs { padding-top: 4px; padding-bottom: 12px; }
.main-blog > .hg-breadcrumbs { padding-top: 4px; }
.article-template > .page-width > .hg-breadcrumbs { padding-top: 8px; }
@media (max-width: 749px) {
  .hg-breadcrumbs { font-size: 12px; padding: 10px 0 14px; }
  .hg-breadcrumbs__sep { margin: 0 6px; }
  .hg-breadcrumbs__current { max-width: 200px; }
}

/* PDP % OFF badge overlay on the product image */
.product__media-wrapper { position: relative; }
.pdp-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(87, 53, 121, 0.28);
}
@media (max-width: 749px) {
  .pdp-badge {
    font-size: 13px;
    padding: 5px 11px;
    top: 12px;
    left: 12px;
  }
}

/* --------------------------------------------------------------------------
   Homepage-only tablet fix (750–998px).
   Dawn's featured-collection slider applies width: 25% (from the generic
   .slider--tablet.grid--peek rule) to items at tablet width; the .grid--2-col
   override isn't winning here, leaving dead space beside each card and
   squeezing the ATC label into truncation ("Add to Ca…").
   -------------------------------------------------------------------------- */
@media (min-width: 750px) and (max-width: 998px) {
  .template-index .slider--tablet.grid--peek .grid__item,
  .template-index .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 30px));
    min-width: 0;
  }
  .template-index .hg-card__body { padding: 0.8rem 0.8rem 0.95rem; }
  .template-index .hg-card__atc {
    font-size: 13.5px;
    padding-left: 8px;
    padding-right: 8px;
    min-height: 42px;
  }
}

/* ===== Compact product slider tiles (homepage "Popular with pet parents") ===== */
/* Reference shows small info-only tiles in a slider: image, brand, name, price, %off.
   Scoped to slider-component so collection PAGES keep full cards + add-to-cart. */
slider-component .hg-card__form,
slider-component .hg-card__pills { display: none !important; }

/* Brand filtering moved to the collection title (brand slider) — hide the
   vendor facet group in the product-grid sidebar/drawer on collection pages. */
.template-collection [id^="Details-filter.p.vendor-"] { display: none !important; }
slider-component .hg-card__body { padding: 0.8rem 0.9rem 1rem; gap: 0.3rem; }
slider-component .hg-card__title { min-height: 0; -webkit-line-clamp: 2; }
slider-component .hg-card__img { padding: 1.8rem; }

/* ============================================================
   Mobile header refinements (Sep 2026)
   - Remove the announcement/notification bar on mobile so it stops
     colliding with the header and frees vertical space.
   - Zero the header's 46px offset (which existed to clear that bar) and
     shrink --mobile-header-height so content doesn't leave a top gap.
   - Enlarge the logo on mobile.
   - Location trigger: keep only the pin icon, hide the selected value.
   ============================================================ */
@media (max-width: 767px) {
  div#shopify-section-sections--26076979429666__announcement-bar,
  .announcement-bar-section { display: none !important; }
  header.header { margin-top: 0 !important; }
  :root { --mobile-header-height: 66px; }

  /* Fit the icon row (location + search + account + cart) without cropping:
     let the icons column size to its content and the logo flex/shrink,
     instead of the fixed 1fr/2fr/1fr grid that clipped the cart. */
  .header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 6px !important;
  }

  /* Logo — prominent but ALWAYS shrinks to fit its column so it can never
     overlap the location/search/cart icons. Sized by height; width scales
     and is capped at 100% of the available space. */
  .header__heading, .header__heading-link { min-width: 0 !important; overflow: hidden; }
  .header__heading-logo-wrapper { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
  .header__heading-logo { width: auto !important; max-width: 100% !important; height: 42px !important; }

  /* Smaller, tighter icon cluster so the bigger logo has room */
  .header__icons { gap: 0 !important; justify-content: flex-end; }
  .header__icons .header__icon { padding-left: 3px !important; padding-right: 3px !important; }
  .header__icons .header__icon .svg-wrapper svg,
  .header__icons .header__icon .svg-wrapper,
  .hgdl-header__pin { width: 19px !important; height: 19px !important; }

  /* Location: icon only (drop the selected-location text + chevron) */
  .hgdl-header { max-width: none; padding: 0 5px; gap: 0; }
  .hgdl-header__value { display: none !important; }
  .hgdl-header__chevron { display: none !important; }
}

/* ==========================================================================
   Mobile carousel pagination dots (assets/hg-carousel-dots.js).
   Navigation affordance for existing scroll-snap carousels. Mobile only —
   desktop grids don't overflow, so the script never shows dots there, and
   the media query keeps them out of the desktop box model entirely.
   ========================================================================== */
.hg-cdots { display: none; }

@media (max-width: 749px) {
  .hg-cdots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  .hg-cdot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand-primary-100, #e6dbef);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width 0.22s ease, background 0.22s ease, border-radius 0.22s ease;
  }
  .hg-cdot.is-active {
    width: 18px;
    border-radius: 4px;
    background: var(--brand-primary, #573579);
  }
}