/** Shopify CDN: Minification failed

Line 3311:1 Expected "}" to go with "{"

**/
/**
 * Snuggle Puppy Global CSS Variables & Tonal Palette
 * Theme: Eurus (Breath Preset)
 */
:root {
  /* --- RICH BLACK (Grayscale) --- */
  --color-black-900: 0, 0, 0; /* #000000 - Primary Text */
  --color-black-700: 69, 69, 69; /* #454545 */
  --color-black-500: 112, 112, 112; /* #707070 */
  --color-black-300: 217, 217, 217; /* #D9D9D9 - Borders / Dividers */
  --color-black-100: 242, 242, 242; /* #F2F2F2 - Subtle Backgrounds */

  /* --- RUBY RED --- */
  --color-red-900: 145, 4, 30; /* #91041E */
  --color-red-700: 220, 14, 51; /* #DC0E33 - WCAG Compliant Text/Hover */
  --color-red-500: 234, 26, 64; /* #EA1A40 - Brand Primary */
  --color-red-300: 255, 133, 133; /* #FF8585 */
  --color-red-100: 254, 210, 208; /* #FED2D0 - Alert/Promo Backgrounds */

  /* --- AZURE BLUE --- */
  --color-blue-900: 0, 85, 113; /* #005571 - WCAG Compliant Text */
  --color-blue-700: 0, 136, 178; /* #0088B2 */
  --color-blue-500: 0, 162, 213; /* #00A2D5 - Brand Secondary */
  --color-blue-300: 108, 207, 238; /* #6CCFEE */
  --color-blue-100: 194, 240, 254; /* #C2F0FE - Trust/Info Backgrounds */

  /* --- NATURE GREEN --- */
  --color-green-900: 68, 104, 21; /* #446815 */
  --color-green-700: 110, 160, 44; /* #6EA02C - WCAG Compliant Text */
  --color-green-500: 141, 198, 66; /* #8DC642 - Success/Action */
  --color-green-300: 186, 228, 131; /* #BAE483 */
  --color-green-100: 215, 242, 178; /* #D7F2B2 - Success Backgrounds */

  /* --- TYPOGRAPHY --- */
  --font-heading-family: "Tobi Pro", sans-serif;
  --font-heading-weight: 900;

  /* Baseline bumped to standard 16px for mobile accessibility */
  --base-font-size-mobile: 1rem;

  /* A smoother, highly readable mobile heading scale */
  --h1-font-size-mobile: 2.25rem;
  --h2-font-size-mobile: 1.75rem;
  --h3-font-size-mobile: 1.15rem;
  --h4-font-size-mobile: 1rem;
  --h5-font-size-mobile: 0.925rem;
  --h6-font-size-mobile: 0.875rem;
}

/* ==========================================================
   GLOBAL MOBILE TYPOGRAPHY OVERRIDES
   Forces readable sizes and line-heights on mobile, bypassing
   the theme's aggressive percentage-based scaling sliders.
   ========================================================== */
@media screen and (max-width: 767px) {
  h1,
  .h1 {
    font-size: 2.25rem !important ;
  }

  h2,
  .h2 {
    font-size: 1.75rem !important ;
  }

  h3,
  .h3 {
    font-size: 1.15rem;
  }

  h4,
  .h4 {
    font-size: 1rem;
  }

  h5,
  .h5 {
    font-size: 0.925rem;
  }

  h6,
  .h6 {
    font-size: 0.875rem;
  }
}

.bg-subtle-gray {
  background-color: rgba(var(--color-black-100), 1);
}
.bg-subtle-blue {
  background-color: rgba(var(--color-blue-100), 1);
}
.label--secondary {
  color: #454545;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
}

@font-face {
  font-family: "Tobi Pro";
  src: url("./TobiPro-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.button-text,
.x-badge-text {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- PRODUCT DETAIL BUTTON HOVER ANIMATION --- */
.view_product_detail {
  position: relative;
  overflow: hidden;
  background-color: transparent !important;
  z-index: 1;
}

.view_product_detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c2f0fe;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.view_product_detail:hover:not([disabled])::before {
  transform: scaleX(1);
}

.view_product_detail:hover:not([disabled]) {
  border-color: #c2f0fe !important;
  color: #000000 !important;
}

/*============================================================================
  GLOBAL HEADER & ANNOUNCEMENT BAR Z-INDEX FIXES
  (Solves clipping issues when modals/drawers open)
==============================================================================*/
/* 1. Force Announcement Bar to the bottom of the UI stack */
.section-announcement,
[id*="__announcement-bar"] {
  position: relative !important;
  z-index: 10 !important;
}

/* 2. Force the Header Wrapper above the Announcement Bar, but below the Cart (z-70) */
.shopify-section-group-header-group {
  position: relative !important;
  z-index: 60 !important;
}

/* 3. Elevate the Top Header (with the logo) above the Dropdown Menu */
.header {
  position: relative !important;
  z-index: 40 !important;
}

/* 4. Tuck the Hamburger Menu underneath the Top Header */
.hamburger-menu-container {
  position: absolute !important;
  z-index: 20 !important;
}

/* 1. Build an invisible, 0-width line sitting at the bottom center */
.hamburger-menu-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 1px;
  background-color: rgba(var(--colors-line-and-border), 0.5);
  opacity: 0;

  /* This controls how fast it draws outward */
  transition:
    width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease;
}

/* 2. When the menu opens, tell the line to expand to full width and fade in */
.hamburger-menu-container.h-hamburger::after {
  width: 100%;
  opacity: 1;
}

/* ==========================================================
   SMOOTH 2-LINE HAMBURGER TO "X" ANIMATION (ALPINE.JS FIX)
   ========================================================== */

/* 1. Hide the theme's abrupt, native SVG icons permanently */
.x-container-header-nav > div.w-5 svg {
  display: none !important;
}

/* 2. Setup the icon container */
.x-container-header-nav > div.w-5 {
  position: relative;
  height: 12px; /* Sets the resting distance between the two lines */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Draw the two lines using pseudo-elements */
.x-container-header-nav > div.w-5::before,
.x-container-header-nav > div.w-5::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px; /* Thickness of the lines */
  background-color: currentColor; /* Automatically matches your theme's text color */
  border-radius: 2px; /* Softens the edges of the lines */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 4. Position the lines in their resting (parallel) state */
.x-container-header-nav > div.w-5::before {
  top: 0;
}
.x-container-header-nav > div.w-5::after {
  bottom: 0;
}

/* 5. The Active State: Twist into an X! 
   We use :has() to detect when Alpine.js hides the first span! */
.x-container-header-nav
  > div.w-5:has(span:first-child[style*="display: none"])::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.x-container-header-nav
  > div.w-5:has(span:first-child[style*="display: none"])::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/*============================================================================
  OVERSIZED LOGO OVERLAY & BOUNCE (NATIVE IMAGE OVERRIDE METHOD)
==============================================================================*/

/* 1. Lock the header container size so it doesn't stretch the header bar */
.w-logo-header {
  position: relative !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100px !important;
  min-width: 100px !important;
  min-height: 75px !important;
  z-index: 10 !important;
}

@media (min-width: 768px) {
  .w-logo-header {
    width: 120px !important;
    min-width: 120px !important;
    min-height: 90px !important;
  }
}

/* Flatten the v10.4.1 wrapper span so the img behaves as a direct flex child */
.w-logo-header > span,
.w-logo-header span.block {
  display: contents !important;
}

/* 2. Allow the logo to overflow its container without clipping */
h1.logo-name,
.logo-name,
.header-wrapper {
  position: relative !important;
  overflow: visible !important;
}

/*============================================================================
  DESKTOP NATIVE LOGO ANIMATION
==============================================================================*/
@media screen and (min-width: 1024px) {
  .w-logo-header img.header-logo {
    position: absolute !important;
    display: block !important;

    /* Using clamp ensures it shrinks slightly if the viewport gets too squeezed, 
       perfect for 150% scaled displays on small laptops. */
    width: clamp(150px, 15vw, 200px) !important;
    max-width: 12vw !important;
    height: auto !important;
    opacity: 0;

    /* Lets clicks pass through the oversized edges so navigation isn't blocked */
    pointer-events: none;

    animation: logoDropBounce 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
  }

  #sticky-header-content {
    max-width: 95vw !important;
    margin-left: auto;
    margin-right: auto;
  }

  .hamburger-menu-container {
    min-width: 100vw !important;
    margin-left: -2.5vw;
  }

  /* Note: The transform now includes translateX(-50%) to keep it perfectly centered */
  @keyframes logoDropBounce {
    0% {
      transform: translate(-15%, -20%);
      opacity: 0;
    }
    50% {
      transform: translate(-15%, 20%);
      opacity: 1;
    }
    100% {
      transform: translate(-15%, 5%);
      opacity: 1;
    }
  }
}

/*============================================================================
  MOBILE NATIVE LOGO ANIMATION
==============================================================================*/
@media screen and (max-width: 1023px) {
  .w-logo-header img.header-logo {
    position: absolute !important;
    display: block !important;
    width: 120px !important;
    max-width: none !important;
    height: auto !important;
    opacity: 0;
    pointer-events: none;
    animation: logoDropBounceMobile 1.2s cubic-bezier(0.28, 0.84, 0.42, 1)
      forwards;
  }

  .logo-name {
    position: unset !important;
  }

  @keyframes logoDropBounceMobile {
    0% {
      transform: translate(0, -15%);
      opacity: 0;
    }
    50% {
      transform: translate(0, 15%);
      opacity: 1;
    }
    100% {
      transform: translate(0, 0%);
      opacity: 1;
    }
  }
}

/* ==========================================================
   SEARCH BAR CHROME AUTOFILL FIX
   Forces the input to stay transparent and rounded 
   ========================================================== */
#header-search-in-modal:-webkit-autofill,
#header-search-in-modal:-webkit-autofill:hover,
#header-search-in-modal:-webkit-autofill:focus,
#header-search-in-modal:-webkit-autofill:active {
  /* Delays Chrome's background color injection for 5000 seconds */
  transition: background-color 5000s ease-in-out 0s !important;

  /* Forces the autofill text to match your theme text color */
  -webkit-text-fill-color: rgb(var(--colors-text)) !important;

  /* Matches the pill-shape of the parent wrapper */
  border-radius: 9999px !important;
}

/*============================================================================
  "FEATURED BY" PRESS TICKER STYLING
==============================================================================*/
.x-container-scrolling-banner-content > div {
  position: relative;
  padding-top: 4rem;
}

.x-container-scrolling-banner-content > div::before {
  content: "FEATURED BY";
  position: absolute;
  top: 1.5rem;
  left: 50vw;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  z-index: 10;
}

.section-scroll-banner .x-block-image img {
  filter: grayscale(100%) opacity(0.5);
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

@media screen and (min-width: 1024px) {
  .section-scroll-banner .x-block-image img:hover {
    filter: grayscale(0%) opacity(1);
  }
}

@media screen and (max-width: 1023px) {
  .section-scroll-banner .x-block-image img {
    filter: grayscale(0%) opacity(1);
  }
}

/*============================================================================
  SMOOTH SCROLLING & ANCHOR OFFSETS
==============================================================================*/
html {
  scroll-behavior: smooth;
}

#quiz-app {
  scroll-margin-top: 140px;
}

/*============================================================================
  SHOPPABLE VIDEO: BUTTON STYLING
==============================================================================*/

.video-looping-carousel .button-play > div {
  background-color: rgba(var(--color-red-500), 0.8);
}

/*============================================================================
  SHOPPABLE VIDEO: HIDE NATIVE CONTROLS
==============================================================================*/
.video-looping-carousel video::-webkit-media-controls {
  display: none !important;
}

.video-looping-carousel video {
  /* This prevents the video from capturing clicks, allowing the 
     Eurus wrapper script to play/pause without triggering native UI */
  pointer-events: none !important;
}

/*============================================================================
  SHOPPABLE VIDEO: PRODUCT CARD POLISH & VARIANT HIJACK
==============================================================================*/
/* 1. Enlarge the Product Image (Strictly scoped to the popup card) */
.x-container-video-looping .js-product-container .product-image {
  width: 120px !important;
  min-width: 120px !important;
}

/* 2. Enlarge and brand the Product Title */
.x-container-video-looping .js-product-container .product-name {
  font-family: var(--font-heading-family) !important;
  font-size: 1.25rem !important;
  line-height: 1.1;
  color: rgba(var(--color-black-900), 1);
}

/* 3. Variant Hijack: Hide the interactive selectors */
.x-container-video-looping .js-product-container .options-container {
  display: none !important;
}

/* 4. Variant Hijack: Print the data attributes as a plain-text subtitle */
.x-container-video-looping .js-product-container .variant-selects {
  display: block !important;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

.x-container-video-looping .js-product-container .variant-selects::before {
  font-family: "Lato", sans-serif;
  color: rgba(var(--color-black-500), 1);
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
}

/* If the product has 1 option */
.x-container-video-looping
  .js-product-container
  .variant-selects[data-option1]::before {
  content: attr(data-option1);
}

/* If the product has 2 options (e.g., Size and Color) */
.x-container-video-looping
  .js-product-container
  .variant-selects[data-option2]::before {
  content: attr(data-option1) " / " attr(data-option2);
  transform: translateY(-0.5rem);
}

/* If the product has 3 options */
.x-container-video-looping
  .js-product-container
  .variant-selects[data-option3]::before {
  content: attr(data-option1) " / " attr(data-option2) " / " attr(data-option3);
}

/*============================================================================
  SHOPPABLE VIDEO: HEADER REORDERING & BODY TEXT STYLING
==============================================================================*/
/* 1. Turn the header wrapper into a flex column to enable reordering */
.x-block-video-looping-header {
  display: flex !important;
  flex-direction: column;
}

/* 2. Force the main heading (h2) to the very top */
.x-block-video-looping-header h2 {
  order: 1 !important;
  margin-bottom: 0 !important;
}

/* 3. Force the subheading wrapper to sit beneath the h2 */
.x-block-video-looping-header > div:first-child {
  order: 2 !important;
  margin-top: 0.75rem !important; /* Adds breathing room below the title */
}

/* 4. Restyle the subheading to look exactly like standard body copy */
.x-block-video-looping-header p.subheading {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-size: 0.9625rem;
  font-weight: 400;
  text-transform: none; /* Strips out any uppercase eyebrow styling */
  letter-spacing: normal;
  color: rgb(var(--colors-text));
  line-height: 1.5;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/*============================================================================
  BUNDLE BUILDER UPDATES AND STYLING
==============================================================================*/
.bundle-variant-title {
  font-size: 1rem;
  color: rgba(var(--colors-text), 0.7);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* --- CUSTOM ATC BUTTON HOVER ANIMATION --- */
.x-atb-button {
  position: relative;
  overflow: hidden;
  background-color: transparent !important;
  z-index: 1;
}
.x-atb-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c2f0fe;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.x-atb-button:hover:not([disabled])::before {
  transform: scaleX(1);
}
.x-atb-button:hover:not([disabled]) {
  border-color: #c2f0fe !important;
  color: #000000 !important;
}
.x-atb-button:hover:not([disabled]) .x-atc-text {
  color: #000000 !important;
}
.x-byob-content .step-title {
  transition: opacity 0.2s ease-in-out;
}
.x-byob-content .step-title:hover {
  opacity: 1 !important;
}

/*============================================================================
  BYOB ACCORDION BORDER FIX
==============================================================================*/
/* Prevents the top border of the first bundle step from being clipped by the overflow mask */

.bundler-product-list {
  padding-top: 2px !important;
}

/* ==========================================================
   1. PRODUCT HEADER, TYPOGRAPHY, & DESKTOP GRID
   ========================================================== */

/* Block Visibility Controls (Enforced with !important) */
.sp-desktop-only {
  display: none !important;
}
.sp-mobile-only {
  display: none !important;
}

@media (max-width: 1023px) {
  .sp-mobile-only {
    display: grid !important;
  }
}
@media (min-width: 1024px) {
  .sp-desktop-only {
    display: grid !important;
  }
}

/* Universal 2x1x2 Grid Layout */
.sp-product-header-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto; /* Col 1 is fluid, Col 2 hugs the content */
  align-items: center;
  gap: 0.5rem 1rem; /* 0.5rem row gap, 1rem column gap */
  margin-bottom: 0.5rem;
}

/* --- GRID MAPPING --- */
/* Row 1 */
.sp-sur-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.sp-reviews-wrapper {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

/* Row 2 (Spans full width) */
.sp-product-header-wrapper .product__title {
  grid-column: 1 / span 2;
  grid-row: 2;
}

/* Row 3 */
.sp-sub-title {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
.sp-price-wrapper {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
}

/* --- TYPOGRAPHY & OVERRIDES --- */
.sp-sur-title {
  font-family: var(--font-body-family);
  color: rgba(var(--color-black-700), 1);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  margin: 0 !important;
}

.product__title.h1 {
  font-family: var(--font-heading-family);
  color: rgba(var(--color-blue-900), 1);
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 !important;
  text-transform: unset;
}

.sp-sub-title {
  font-family: var(--font-heading-family);
  color: rgba(var(--color-blue-700), 1);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 !important;
}

.sp-product-header-wrapper .x-review-product {
  transform: scale(1.15);
  transform-origin: right center;
  margin: 0 !important;
}

.sp-product-header-wrapper .price {
  font-weight: 900 !important;
  font-size: 1.25rem;
  color: rgba(var(--color-black-900), 1);
  margin-left: auto;
  margin-right: auto;
  transform: translatey(-0.25rem);
}

@media (min-width: 1024px) {
  .sp-sur-title {
    font-size: 1.125rem;
  }
  .product__title.h1 {
    font-size: 3rem;
  }
  .sp-sub-title {
    font-size: 1.75rem;
  }
  .sp-product-header-wrapper .price {
    font-size: 1.5rem;
    transform: translatey(-1rem);
  }
  .sp-product-header-wrapper .x-review-product {
    transform: scale(1.15) translatex(-12.5rem);
  }
}

/* ==========================================================
   VARIANT MATRIX CLEANUP
   ========================================================== */

/* Fix mobile row wrapping gap */
.variant-selects .flex.flex-wrap {
  row-gap: 12px;
}
.variant-selects fieldset {
  padding-bottom: 0.75rem !important;
  margin-bottom: 0 !important;
}
.variant-selects .mb-2 {
  margin-bottom: 0.25rem !important;
}

.size-box-btn {
  font-size: 1rem !important;
}

.ori-matrix {
  margin-top: 0rem;
}

.bb-matrix {
  margin-top: 0.5rem;
}

.sp-matrix-container {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.sp-matrix-group {
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .variant-selects label.outline-none {
    padding: 10px 20px !important;
    font-size: 1rem !important;
  }
}

/* ==========================================================
   EXCERPT & PAWLIST HTML BLOCK
   ========================================================== */
.sp-excerpt-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-black-300), 1);
}
.sp-excerpt-block h4 {
  color: rgba(var(--color-black-700), 1);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pawlist {
  padding-left: 0 !important;
}
.pawlist li {
  list-style: none !important;
  position: relative;
  padding-left: 1.75rem !important;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.pawlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  height: 1rem;
  width: 1rem;
  background-image: url("/cdn/shop/files/paw_print_svg.svg?v=1713905248");
  background-size: contain;
  background-repeat: no-repeat;
}

.pawlist-header {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.product__custom-liquid {
  width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
}

/* Sticky ATC Variant Subtitle */
.sp-sticky-variant-title {
  font-weight: 700;
  color: rgba(var(--color-black-700), 1);
  font-size: 1rem;
  margin-top: 0.25rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .sp-sticky-variant-title {
    text-align: left;
  }

  div:has(> .sp-sticky-variant-title) {
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .pawlist-header {
    text-align: center;
  }
}

/* ==========================================================
   COLLAPSIBLE TABS / ACCORDION POLISH (UPDATED)
   ========================================================== */
/* 1. Fully box off the accordion to create a distinct, standalone card */
.accordion {
  border: 1px solid rgba(var(--color-black-300), 1) !important;
  border-radius: 12px !important;
  margin-bottom: 1rem !important; /* Separates the cards from each other */
  overflow: hidden !important; /* Ensures button backgrounds don't bleed outside the rounded corners */
  background-color: #ffffff !important; /* Forces the card body to stay white */
}

/* Prevent adjacent accordions from collapsing into each other */
.accordion + .accordion {
  margin-top: 0 !important;
}

/* 2. Add brand hover effect to the clickable tab */
.accordion > button {
  transition: background-color 0.3s ease;
  padding-left: 1.25rem;
}
.accordion > button:hover {
  background-color: rgba(var(--color-blue-100), 1) !important;
}

/* 3. Shade the button gray ONLY when the tab is OPEN */
/* We safely detect the open state by checking if the child SVG arrow has rotated */
.accordion > button:has(.rotate-180) {
  background-color: rgba(var(--color-black-100), 1) !important;
}

/* 4. Soften the native dividing line between the gray button and white content */
.accordion > div[x-show] {
  border-top: 1px solid rgba(var(--color-black-300), 1) !important;
}

/* Reduce the bottom margin specifically for the first accordion tab */
.accordion:first-of-type {
  margin-bottom: 0.5rem !important;
}

/* ==========================================================
   LEGACY PRODUCT DESCRIPTION STYLES
   ========================================================== */
/* Give the imported wrapper some breathing room inside the tab */
.accordion > div > .rte {
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  .accordion > div > .rte {
    padding: 2rem !important;
  }
}

/* Map the legacy primary heading to Tobi Pro and Azure Blue */
.heading--primary {
  color: rgba(var(--color-blue-700), 1);
  font-family: var(--font-heading-family);
  font-weight: 900;
  line-height: 1.1;
  padding-bottom: 0.5rem;
  margin: 0;
}

/* Restore legacy typography sizing */
.t6 {
  font-size: 1.5rem;
}

/* Restore the legacy red links and their hover/active states */
.metalink {
  color: rgba(var(--color-red-700), 1);
  display: inline-block;
  font-weight: 900 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.metalink:hover {
  color: rgba(var(--color-black-900), 1);
}
.metalink:active {
  color: rgba(var(--color-red-900), 1);
}

/* Ensure standard paragraphs inside the legacy wrapper look clean */
.accordion__wrapper--primary p {
  margin-bottom: 1rem;
  line-height: 1.5;
  color: rgba(var(--color-black-700), 1);
}

/* ==========================================================
   FREQUENTLY BOUGHT TOGETHER (FBT) HIGHLIGHT (V3)
   ========================================================== */
.x-block-fbt {
  background-color: rgba(var(--color-black-100), 0.5) !important;
  border: 2px solid rgba(var(--color-blue-300), 0.8) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
  margin-bottom: 0 !important;
}

.x-block-fbt:hover {
  border-color: rgba(var(--color-blue-500), 1) !important;
  background-color: rgba(var(--color-blue-100), 0.3) !important;
}

/* Neutralize the v10.4.1 inner background container so it doesn't double-box */
.x-block-fbt div[class*="bg-frequently_bought"],
.x-block-fbt div[x-data*="xProductFrequently"] {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 3. The Disabled State (When no FBT products are attached) */
.x-block-fbt div[x-data] > button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ==========================================================
   FBT MODAL: SINGLE VARIANT CLEANUP
   ========================================================== */
/* Hide the entire variant update block if NO option has a 2nd choice (nth-of-type(2)) */
.x-container-fbt-popup
  .x-variants-data:not(:has(.relative.inline-block:nth-of-type(2))):not(
    :has(select option:nth-of-type(2))
  )
  > div[id^="variant-update-"] {
  display: none !important;
}

/* Prepare the plain-text subtitle */
.x-container-fbt-popup
  .x-variants-data:not(:has(.relative.inline-block:nth-of-type(2))):not(
    :has(select option:nth-of-type(2))
  )::before {
  display: block;
  font-family: "Lato", sans-serif;
  color: rgba(var(--color-black-500), 1);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: -0.25rem;
}

/* 1 Option (e.g., Size) - Safely skips if option 2 exists */
.x-container-fbt-popup
  .x-variants-data:not(:has(.relative.inline-block:nth-of-type(2))):not(
    :has(select option:nth-of-type(2))
  )[data-option1]:not([data-option2])::before {
  content: attr(data-option1);
}

/* 2 Options (e.g., Size / Color) - Safely skips if option 3 exists */
.x-container-fbt-popup
  .x-variants-data:not(:has(.relative.inline-block:nth-of-type(2))):not(
    :has(select option:nth-of-type(2))
  )[data-option2]:not([data-option3])::before {
  content: attr(data-option1) " / " attr(data-option2);
}

/* 3 Options */
.x-container-fbt-popup
  .x-variants-data:not(:has(.relative.inline-block:nth-of-type(2))):not(
    :has(select option:nth-of-type(2))
  )[data-option3]::before {
  content: attr(data-option1) " / " attr(data-option2) " / " attr(data-option3);
}

/* ==========================================================
   SIZING HELP LINK PLACEMENT
   ========================================================== */
/* 1. Pull the Sizing block up directly underneath the ATC button */
.x-block-buy-buttons {
  margin-bottom: 0.5rem !important; /* Adjust this to move it closer/further from the ATC */
}

/* 2. Center the Sizing button and add space below it */
.x-block-size-chart {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 1.25rem;
}

/* ==========================================================
   SPECIFIC SECTION WAVE OVERRIDES
   Targeting: Social Feeds Section (Half-Height Background)
   ========================================================== */

/* 1. Setup the main section wrapper */
.section-social-feeds {
  position: relative !important;
  overflow: visible !important;
  background: rgb(
    var(--colors-background)
  ); /* Base background for the top half (Layer 1) */
  z-index: 11;
}

/* Neutralize the v10.4.1 inner background so it doesn't mask the wave */
.section-social-feeds .x-container-social-feeds,
.section-social-feeds [class*="section--template"] {
  background: transparent !important;
}

/* 2. Create the solid color block for the bottom half (::after) */
.section-social-feeds::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(var(--color-blue-100), 1);
  z-index: -1; /* Sits behind the cards and on top of the section base background */
}

/* 3. Add the TOP wave (::before) resting on the divide line */
.section-social-feeds::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(calc(-100% + 2px));
  background-color: rgba(var(--color-blue-100), 1);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 50' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,25 Q25,0 50,25 T100,25 L100,50 L0,50 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;

  z-index: -1;
  height: 60px;
  -webkit-mask-size: 200px 100%;
}

/* 4. Apply the Responsive Breakpoints */
@media screen and (min-width: 768px) {
  .section-social-feeds::before {
    height: 75px;
    -webkit-mask-size: 250px 100%;
  }
  .section-social-feeds::after {
    top: 75%;
  }
  .section-social-feeds::before {
    top: 75%;
  }
}

@media screen and (min-width: 1024px) {
  .section-social-feeds::before {
    height: 150px;
    -webkit-mask-size: 500px 100%;
  }
  .section-social-feeds::after {
    top: 75%;
  }
  .section-social-feeds::before {
    top: 75%;
  }
}

/* ==========================================================
   IMAGE-WITH-TEXT VIDEO REFINEMENTS
   Targeting: How It Works (Video Section)
   ========================================================== */

/* 1. Brand the Play Button */
.section-image-with-text .button-play > div {
  background-color: rgba(var(--color-red-500), 0.8) !important;
}
.section-image-with-text .button-play svg {
  color: #ffffff !important;
}

/* 2. Hardware Acceleration, Background Color & Height Overrides */
.section-image-with-text .iwt-image > .relative {
  overflow: hidden !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
  padding-bottom: 0 !important;
  background-color: #ffffff !important;
}

/* The Black Line Fix & Object-Fit Contain */
.section-image-with-text video {
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  margin: -2px !important;
  object-fit: contain !important; /* Preserves video ratio without cropping! */
  transform: translateZ(0) !important;
  border-bottom: #ffffff 1px inset;
}

/* Force Exact Desktop Height */
@media screen and (min-width: 768px) {
  .section-image-with-text .iwt-image > .relative {
    height: 550px !important;
  }
  .section-image-with-text video {
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    margin: -1px !important;
    border-bottom: unset;
  }
}

/* ==========================================================
   MOBILE "CONDENSE & SLIDE DOWN" ANIMATION
   ========================================================== */
@media screen and (max-width: 767px) {
  /* Force Exact Mobile Height */
  .section-image-with-text .iwt-image > .relative {
    height: 300px !important;
  }

  /* Setup smooth transitions for the box and the text */
  .section-image-with-text .iwt-overlap {
    transition:
      transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
      margin-bottom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  /* Prep the text block to transition smoothly */
  .section-image-with-text .rte {
    max-height: 500px;
    opacity: 1;
    overflow: hidden !important;
    transition:
      max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
      opacity 0.3s ease,
      margin 0.4s ease !important;
  }

  /* --- THE ACTIVE PLAYING STATE --- */

  /* 1. Slide the box down and add margin to preserve the bottom padding! */
  .section-image-with-text.video-is-playing .iwt-overlap {
    transform: translateY(1.5rem) !important;
    margin-bottom: 1.5rem !important;
  }

  /* 2. Completely collapse and fade out the body text */
  .section-image-with-text.video-is-playing .rte {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   IMAGE-WITH-TEXT: EYEBROW TEXT REFINEMENTS
   ========================================================== */
.section-image-with-text div.overflow-hidden > p {
  font-size: 0.9rem;
  color: rgba(var(--color-black-700), 1);
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.1em;
}

/* ==========================================================
   SIZE CHART POPUP MODAL REFINEMENTS
   ========================================================== */

/* 1. Modal Body: Mathematical Centering & Constraints */
#SizeChart > div[x-show="openSizeChart"] {
  padding: 0 !important;
  background-color: #9ddaef !important;
  overflow: hidden !important;
  position: relative !important;
  align-self: flex-start !important; /* Detaches from native flex alignment */
  margin: 0 auto !important; /* Centers horizontally */
  top: 50vh !important;
  transform: translateY(-50%) !important;
  height: fit-content !important;
  max-height: 90vh !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 10px;
}

/* 2. Float the Close Button */
#SizeChart .flex.justify-end.items-center {
  position: absolute !important;
  top: 1rem;
  right: 1rem;
  padding: 0 !important;
  z-index: 10;
}

/* 3. The scrolling container wrapper */
#SizeChart .overflow-y-auto {
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* 4. Responsive Image Constraint & Bottom Ghost-Gap Fix */
#SizeChart img {
  margin: 0 auto !important;
  max-width: 100% !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==========================================================
   SHOP THE LOOK REFINEMENTS
   Targeting: What Makes Snuggle Puppy Tick?
   ========================================================== */

/* 1. Turn floating slides into grounded cards */
.x-section-shop-the-look .splide__slide > div {
  background-color: #ffffff !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  padding-bottom: 5rem !important; /* Parking spot for button */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  height: 100% !important;
  justify-content: flex-start !important;
  position: relative !important;
}

/* KILLS THE MOBILE MAX-HEIGHT SO CONTENT FITS */
.x-section-shop-the-look .splide__slide {
  max-height: none !important;
}

/* STRIPS FORCED WRAPPER PADDING FOR VERTICAL CENTERING & BREATHING ROOM */
.x-section-shop-the-look .card-shop-look-product-medium {
  padding: 0 1rem !important;
}

/* Adjust the image spacing inside the new card */
.x-section-shop-the-look [class*="x-block-shop-the-look-media-media"] {
  margin-bottom: auto;
  margin-top: auto;
}

/* 2. Target the rich text links and apply Secondary Button styling */
.x-section-shop-the-look .rte a {
  /* Positioning */
  position: absolute !important;
  bottom: 1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 3rem) !important;

  /* Typography & Shape */
  text-align: center;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.75rem 1.25rem;
  border-radius: 100px;
  text-decoration: none !important;
  box-sizing: border-box;

  /* Kill native theme underline animations */
  box-shadow: none !important;
  background-image: none !important;

  /* Secondary Button Colors & Animation Prep */
  background-color: transparent !important;
  border: 1px solid #00a2d5 !important;
  color: #00a2d5 !important;
  overflow: hidden;
  z-index: 1;
  transition:
    color 0.4s ease,
    border-color 0.4s ease !important;
}

/* Kill native pseudo-element underlines */
.x-section-shop-the-look .rte a::after {
  display: none !important;
  content: none !important;
}

/* The expanding background pseudo-element */
.x-section-shop-the-look .rte a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c2f0fe;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  border-radius: 100px;
}

/* Hover States */
.x-section-shop-the-look .rte a:hover {
  border-color: #c2f0fe !important;
  color: #000000 !important;
}
.x-section-shop-the-look .rte a:hover::before {
  transform: scaleX(1);
}

/* Removes the empty space left behind by the paragraph tag holding the link */
.x-section-shop-the-look .rte p:has(a) {
  margin: 0 !important;
}

.x-block-shop-the-look-media-content-media_with_text_4pQWFM {
  padding-bottom: 1rem;
}

.x-section-shop-the-look
  [class*="x-block-shop-the-look-media-media"]
  > div
  > img {
  padding: 0 1.5rem;
}

.x-section-shop-the-look h2.h2 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ==========================================================
   SOCIAL WIDGET REFINEMENTS (GLOBAL)
   Targeting: Variant Subtitles via URL mapping
   Applies to all Social Feeds on the site
   ========================================================== */

/* 1. Setup the universal styling for the injected variant text */
.section-social-feeds
  a[href*="/products/snuggle-puppy"]
  p[class*="product-title"]::after {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(
    var(--colors-text),
    0.6
  ); /* Softens the text to look like a subtitle */
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* 2. Map the specific URLs to their injected text */
.section-social-feeds
  a[href*="snuggle-puppy-small-biscuit"]
  p[class*="product-title"]::after {
  content: "Small / Biscuit";
}

.section-social-feeds
  a[href*="snuggle-puppy-small-cream"]
  p[class*="product-title"]::after {
  content: "Small / Cream";
}

.section-social-feeds
  a[href*="snuggle-puppy-medium-brown"]
  p[class*="product-title"]::after {
  content: "Medium / Brown";
}

.section-social-feeds
  a[href*="snuggle-puppy-medium-bully"]
  p[class*="product-title"]::after {
  content: "Medium / Bully";
}

.section-social-feeds
  a[href*="snuggle-puppy-medium-doodle"]
  p[class*="product-title"]::after {
  content: "Medium / Doodle";
}

/* The original base product URL */
.section-social-feeds
  a[href$="/products/snuggle-puppy"]
  p[class*="product-title"]::after {
  content: "Medium / Biscuit";
}

/* ==========================================================
   REPUTON GLOBAL STYLE OVERRIDES
   ========================================================== */

.reputon-reviews-holder {
  padding: 28px 0 !important;
}
.reputon-reviews-count,
.reputon-text,
.reputon-name,
.reputon-count-number {
  color: rgba(var(--color-black-900)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.reputon-date {
  color: rgba(var(--color-black-500), 0.8) !important;
}
.reputon-amazon-reviews-widget .reputon-verified-icon {
  color: rgba(var(--color-blue-500)) !important;
}
.reputon-count-text,
.reputon-rating-stars {
  color: rgba(var(--colors-icon-rating)) !important;
}
.reputon-head > .reputon-rating-stars {
  gap: 0.5rem !important;
}
.reputon-head {
  gap: 0.5rem !important;
  text-transform: capitalize !important;
}
.reputon-head,
.reputon-top-part {
  background: rgba(var(--color-blue-100), 0.5) !important;
  border: 1px solid rgba(var(--colors-line-and-border), 1) !important;
}

/* ==========================================================
   REPUTON CAROUSEL PAGINATION & DESKTOP ALIGNMENT (V4)
   ========================================================== */
/* 1. Mobile Base Styling (Transparent with border) */
.reputon-bottom-navigation-btns > svg.reputon-swiper-button-prev,
.reputon-bottom-navigation-btns > svg.reputon-swiper-button-next {
  background: transparent !important;
  color: rgba(var(--colors-text), 1) !important;
  border: 1px solid rgba(var(--colors-line-and-border), 1) !important;
  border-radius: 50px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 11px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
}

.reputon-bottom-navigation-btns {
  gap: 0.75rem !important;
}

/* 2. Desktop Overrides & Hover States */
@media screen and (min-width: 768px) {
  /* Allow elements to break out of the carousel box */
  .reputon-reviews-holder,
  .reputon-carousel-container,
  .go2070086703 {
    overflow: visible !important;
  }

  /* Desktop Resting State: Solid gray circle, no border */
  .go2070086703 > .reputon-swiper-button-prev,
  .go2070086703 > .reputon-swiper-button-next {
    color: rgba(var(--colors-text), 1) !important;
    background: rgba(var(--colors-text), 0.3) !important;
    border: none !important;
    border-radius: 50px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
  }

  /* Desktop Hover State: Green fill, dark text */
  .go2070086703 > .reputon-swiper-button-prev:hover,
  .go2070086703 > .reputon-swiper-button-next:hover {
    background: var(--colors-button-hover) !important;
    color: rgb(var(--colors-button-text-hover)) !important;
  }

  /* Push arrows completely clear of the review cards */
  .go2070086703 > .reputon-swiper-button-prev {
    left: -2.5rem !important;
  }
  .go2070086703 > .reputon-swiper-button-next {
    right: -2.5rem !important;
  }
}

.reputon-carousel-container::before {
  text-align: center !important;
  font-family: "Tobi Pro", sans-serif !important;
  font-weight: 900 !important;
  color: #000000 !important;
  line-height: 1.25 !important;
  font-size: 1.75rem !important;
  content: "What Our Customers Say" !important;
}

@media screen and (min-width: 768px) {
  .reputon-carousel-container::before {
    font-size: 2.25rem !important;
  }
}

/* ==========================================================
   REPUTON ARROW SVG CENTERING FIX
   ========================================================== */
/* The Left Arrow SVG is hardcoded to the left 50% of its canvas. Shift right to center. */
button.reputon-swiper-button-prev svg {
  transform: translateX(20%) !important;
}

/* The Right Arrow SVG is hardcoded to the right 50% of its canvas. Shift left to center. */
button.reputon-swiper-button-next svg {
  transform: translateX(-20%) !important;
}

/* ==========================================================
   REPUTON DYNAMIC TEXT INJECTIONS (AI OVERVIEW & TITLE) (V2)
   ========================================================== */
/* 1. Force the Header to allow our injected blocks to wrap */
.reputon-reviews-head {
  flex-wrap: wrap !important;
}

.reputon-info {
  align-items: center !important;
}

.reputon-carousel-container {
  row-gap: 1rem !important;
}

/* 2. The AI Overview Kicker (Using the sur-header style) */
.reputon-info::after {
  content: "AI overview from customer reviews:" !important;
  display: block !important;
  width: 100% !important;
  font-family: var(--font-body-family) !important;
  color: rgba(var(--color-black-500), 0.8) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.8rem !important; /* Slightly smaller for the kicker */
  padding-top: 0.5rem !important;
  text-align: center !important;
  border-top-width: 1px !important;
}

.reputon-reviews-count {
  padding-bottom: 0.25rem !important;
}

/* 3. The AI Overview Body */
.reputon-reviews-head::after {
  content: "Customers find the puppy toy to be a must-have for new puppies, noting it helps them sleep through the night and keeps them calm, with some customers mentioning it kept their puppy from crying at night. The toy receives positive feedback for its quality and enjoyment, with customers saying their dogs love it." !important;
  display: block !important;
  width: 100% !important;
  font-family: var(--font-body-family) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: rgba(var(--color-black-900), 1) !important;
  text-transform: none !important;
  text-align: center;
}

/* 4. The "Most Helpful Reviews" Subheader (Flex Reordering) */
.reputon-carousel-container {
  display: flex !important;
  flex-direction: column !important;
}

/* Assign sorting orders to the native containers */
.go2070086703 {
  order: 3 !important;
}
.reputon-bottom-navigation-btns {
  order: 4 !important;
}

/* Inject the text and force it into the middle (Order 2) */
.reputon-carousel-container::after {
  content: "Top Reviews from Verified Snuggle Puppy Customers" !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  font-family: var(--font-body-family) !important;
  color: rgba(var(--color-black-700), 1) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  font-size: 0.9rem !important; /* Standard desktop sur-header size */
}

/* 5. Mobile Adjustments for the Subheader */
@media screen and (max-width: 1023px) {
  .reputon-carousel-container::after {
    padding: 0 1.25rem !important; /* Keeps it aligned with the cards on mobile */
    font-size: 1rem !important; /* Standard mobile sur-header size */
  }
}

@media screen and (min-width: 768px) {
  .reputon-reviews-head::after {
    margin-left: 10% !important;
    margin-right: 10% !important;
  }
}

/* ==========================================================
   REPUTON MODAL CLOSE BUTTON POLISH
   ========================================================== */
/* Transform the app's close button into a branded floating pill */
.reputon-modal-close {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: rgba(var(--color-red-500), 1) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;

  /* Force a larger, touch-friendly tap target */
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}

/* Shrink whatever SVG Reputon uses inside the button so it fits the circle */
.reputon-modal-close svg {
  width: 100% !important;
  height: 100% !important;
}

.reputon-modal-close:hover {
  background-color: #ffffff !important;
  transform: scale(1.05) !important;
}

/* ==========================================================
   MOBILE NAVIGATION OVERRIDES & BRANDING (V3)
   ========================================================== */

/* --- 1. WAVY MODAL CAPS (FIXED ORIENTATION) --- */
.x-container-mobile-nav {
  position: relative !important;
  z-index: 1;
}

/* Top Wave */
.x-container-mobile-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(var(--color-blue-100), 0.5);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 50' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,25 Q25,0 50,25 T100,25 L100,50 L0,50 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: top;
  -webkit-mask-size: 150px 100%;
  transform: scaleY(-1);
  z-index: -1;
  pointer-events: none;
}

/* Bottom Wave */
.x-container-mobile-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(var(--color-blue-100), 0.5);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 50' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,25 Q25,0 50,25 T100,25 L100,50 L0,50 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: 150px 100%;
  transform: none;
  z-index: -1;
  pointer-events: none;
}

/* --- 2. HEADER REFINEMENT & CLOSE BUTTON FIX --- */
.x-block-mobile-nav-close {
  position: relative !important;
  justify-content: center !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.25rem !important;
}

.x-block-mobile-nav-close span.uppercase {
  font-size: 0 !important;
  display: block;
  width: 150px;
  height: 45px;
  background-image: url("/cdn/shop/files/SP-Primary-Logo_crop.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.x-block-mobile-nav-close .icon-close-container {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 1.25rem !important;
}

/* --- 3A. MENU NESTING (SHOP HEADER & INDENTS) --- */
#menu-level-0 > li.x-block-text:first-child::after {
  display: none !important;
}

#menu-level-0 > li.x-block-text:first-child h2 {
  font-family: var(--font-body-family) !important;
  color: rgba(var(--color-black-700), 1) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 0 !important;
  margin-bottom: -0.75rem !important;
  margin-block-start: unset !important;
}

.font-menu-level-0 {
  font-size: 1.25rem;
}

/* Indent main items under SHOP */
#menu-level-0 > li:nth-child(n + 2):nth-child(-n + 7) {
  padding-left: 1.25rem !important;
}

/* --- 3B. PREVENT '#' LINK JUMPS --- */
/* Disables the anchor tag to allow the parent div to toggle the menu smoothly */
span[\@click*="'#'"] {
  pointer-events: none !important;
}

/* --- 3C. 'SHOP BY...' GRAY BLOCKS --- */
#menu-level-1 div[\@click*="'2-6'"], /* Shop by Collection */
#menu-level-1 div[\@click*="'2-7'"], /* Shop by Dog Size */
#menu-level-1 div[\@click*="'4-3'"], /* Shop by Dog Size (Toys) */
#menu-level-1 div[\@click*="'4-4'"]  /* Shop by Toy Type */ {
  background-color: rgba(var(--color-black-100), 0.5) !important;
  border-radius: 8px;
  margin: 0.5rem 1rem 0.25rem -0.25rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border: 1px solid rgba(var(--color-black-300), 1) !important;
}

/* --- 3D. 'FAQ & SUBSCRIPTIONS' GREEN BLOCKS W/ ARROWS --- */
#menu-navigation a[href*="-faq"],
#menu-navigation a[href*="account/pages"],
#menu-navigation a[href*="partners.snugglepuppy"],
#menu-navigation a[href*="retail.snugglepuppy"] {
  background-color: rgba(var(--color-green-100), 0.5) !important;
  border-radius: 8px;
  margin: 0.25rem 0rem 0.25rem -1rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border: 1px solid rgba(var(--color-green-300), 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Standard Chevron for FAQs and Subscriptions */
#menu-navigation a[href*="-faq"]::after,
#menu-navigation a[href*="account/pages"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(68, 104, 21, 1)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Add custom external link SVG mapping to Green 900 */
#menu-navigation a[href*="partners.snugglepuppy"]::after,
#menu-navigation a[href*="retail.snugglepuppy"]::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='rgba(68, 104, 21, 1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- 3E. ACTIVE MENU HIGHLIGHT (OPEN STATE) --- */
/* Convert margin to padding on ALL tier-0 headers to allow full-width background bleed */
#menu-level-0 > li.block-mobile-navigation-accordion_menu > div.flex {
  margin-left: -1.25rem !important;
  margin-right: 0 !important;
  padding-left: 2.25rem !important;
  padding-right: 1rem !important;
  transition: background-color 0.3s ease;
}

/* Apply the full-width background color when open */
#menu-level-0
  > li.block-mobile-navigation-accordion_menu
  > div.flex:has(span.icon-caret-mobile:nth-of-type(2):not([style*="none"])) {
  background-color: rgba(var(--color-blue-100), 0.5) !important;
}

/* Turn ONLY the main text and caret Dark Blue for the open item (Leaves labels alone) */
#menu-level-0
  > li.block-mobile-navigation-accordion_menu
  > div.flex:has(span.icon-caret-mobile:nth-of-type(2):not([style*="none"]))
  span.font-menu-level-0,
#menu-level-0
  > li.block-mobile-navigation-accordion_menu
  > div.flex:has(span.icon-caret-mobile:nth-of-type(2):not([style*="none"]))
  span.icon-caret-mobile {
  color: rgba(var(--color-blue-900), 1) !important;
}

/* --- 4. REORDERING & HEADERS FOR SOCIAL ICONS --- */
/* Sandboxed strictly to the mobile navigation */
#mobile-navigation ul.social-list {
  display: flex !important;
  flex-wrap: wrap !important;
  opacity: 1 !important;
  padding: 1rem 0;
  gap: 0.5rem;
  justify-content: center;
  text-align: center;
}

/* Individual Icon Adjustments */
#mobile-navigation ul.social-list > li > a {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
#mobile-navigation ul.social-list > li > a:hover {
  opacity: 1;
}

/* Injecting the Row Headers */
#mobile-navigation ul.social-list::before {
  content: "CONTACT";
  order: 0;
  width: 100%;
  font-family: var(--font-body-family);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: rgba(var(--color-black-700), 1);
  margin-bottom: -0.25rem;
}

#mobile-navigation ul.social-list::after {
  content: "FOLLOW";
  order: 4; /* Puts this break after the contact icons */
  width: 100%;
  font-family: var(--font-body-family);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: rgba(var(--color-black-700), 1);
  margin-top: 1rem;
  margin-bottom: -0.25rem;
}

/* Flex Ordering the Native Icons (Mobile Nav Only) */
#mobile-navigation ul.social-list li:nth-child(7) {
  order: 1 !important;
} /* Email */
#mobile-navigation ul.social-list li:nth-child(8) {
  order: 2 !important;
} /* Phone */
#mobile-navigation ul.social-list li:has(a[href="#chatty-chat"]) {
  order: 3 !important;
} /* Chatty */

#mobile-navigation ul.social-list li:nth-child(1) {
  order: 5 !important;
} /* Twitter */
#mobile-navigation ul.social-list li:nth-child(2) {
  order: 6 !important;
} /* Facebook */
#mobile-navigation ul.social-list li:nth-child(3) {
  order: 7 !important;
} /* Pinterest */
#mobile-navigation ul.social-list li:nth-child(4) {
  order: 8 !important;
} /* Instagram */
#mobile-navigation ul.social-list li:nth-child(5) {
  order: 9 !important;
} /* TikTok */
#mobile-navigation ul.social-list li:nth-child(6) {
  order: 10 !important;
} /* YouTube */

/* --- 4B. CHATTY HACK (GLOBAL) --- */
/* Applies to Mobile Nav + Footer */
ul.social-list a[href="#chatty-chat"] svg {
  display: none !important;
}
ul.social-list a[href="#chatty-chat"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;
  background-size: 22px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: inline-block;
}

/* --- 5. WAVE Z-INDEX FIX & SCROLL CLEARANCE --- */
/* Forces the waves to render ON TOP of the open accordion's solid white background */
.x-container-mobile-nav::before,
.x-container-mobile-nav::after {
  z-index: 1 !important;
}

/* Creates bulletproof empty scroll space at the absolute bottom of the menu list */
#menu-level-0::after {
  content: "";
  display: block;
  height: 4rem;
  width: 100%;
}

/* --- 6. BUG FIX: ACCURATE ACTIVE STATES FOR GRAY BOX CARETS --- */
#menu-level-1 div[\@click*="'2-6'"] span.icon-caret-mobile,
#menu-level-1 div[\@click*="'2-7'"] span.icon-caret-mobile,
#menu-level-1 div[\@click*="'4-3'"] span.icon-caret-mobile,
#menu-level-1 div[\@click*="'4-4'"] span.icon-caret-mobile {
  color: rgba(var(--color-black-900), 1) !important;
}

/* Turn the caret red ONLY if the Tier-1 list item physically contains an active page link */
#menu-level-1 > li:has(a.active, a.effect-inline) > div span.icon-caret-mobile {
  color: rgba(var(--color-red-700), 1) !important;
}

/* --- 7. IMAGE PROMOTION TEXT LINK VISIBILITY --- */
.image-mobile-nav .button-text-link .button-text {
  /* Creates a layered drop shadow for premium contrast against images */
  text-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.8),
    0px 8px 16px rgba(0, 0, 0, 0.4) !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em;
}

/* ==========================================================
   DESKTOP NAVIGATION OVERRIDES & BRANDING
   ========================================================== */

@media (min-width: 1024px) {
  /* --- 1. TIER 0 TOP-LEVEL LINKS --- */
  #x-header-container .tabbed_menu_item a {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease;
  }

  /* 1A. Hover State: Targets the link (with or without span) and caret */
  #x-header-container .tabbed_menu_item:hover a,
  #x-header-container .tabbed_menu_item:hover a span,
  #x-header-container .tabbed_menu_item:hover .x-icon-caret svg {
    color: rgba(var(--color-blue-700), 1) !important;
  }

  /* 1B. Active / Open State: Stays blue while the dropdown is open (is-focus) */
  #x-header-container .tabbed_menu.is-focus .tabbed_menu_item a,
  #x-header-container .tabbed_menu.is-focus .tabbed_menu_item a span,
  #x-header-container .tabbed_menu.is-focus .tabbed_menu_item .x-icon-caret svg,
  #x-header-container .tabbed_menu_item a.link-active {
    color: rgba(var(--color-blue-700), 1) !important;
  }

  /* 1C. Map both 10.0.0 and 10.4.1 theme color variables */
  #x-header-container {
    --colors-text-link: var(--color-blue-500) !important;
    --colors-text-link-header: var(--color-blue-500) !important;
  }

  /* Disable clicking on the dummy '#' links */
  #x-header-container .mega-list-nav a[href="#"],
  #x-header-container .sub-menu-container a[href="#"],
  #x-header-container .tabbed_menu_item a[href="#"] {
    pointer-events: none !important;
  }

  /* --- 2. TIER 1 LEFT-COLUMN TAB HIGHLIGHTS --- */
  #x-header-container .mega-list-nav .sub-menu.active {
    background-color: rgba(var(--color-blue-100), 0.5) !important;
  }

  #x-header-container .mega-list-nav .sub-menu.active a span {
    color: rgba(var(--color-blue-900), 1) !important;
    font-weight: 900 !important;
  }

  /* --- 3. TIER 1: GRAY BOX SEPARATION & DEFAULT STATE --- */
  /* Target specific tabs in Menu 1 & Menu 2 */
  #menu-1 .mega-list-nav > div > .sub-menu:nth-child(3),
  #menu-1 .mega-list-nav > div > .sub-menu:nth-child(4),
  #menu-2 .mega-list-nav > div > .sub-menu:nth-child(4),
  #menu-2 .mega-list-nav > div > .sub-menu:nth-child(5) {
    background-color: rgba(var(--color-black-100), 1) !important;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-black-300), 1) !important;
    margin: 0.25rem 0;
    transition: all 0.3s ease !important;
  }

  /* Add spacing above the FIRST Gray Box to separate it from the product tabs */
  #menu-1 .mega-list-nav > div > .sub-menu:nth-child(3),
  #menu-2 .mega-list-nav > div > .sub-menu:nth-child(4) {
    margin-top: 1.5rem !important;
  }

  /* Gray Box Hover Effect (No Nudge) */
  #menu-1 .mega-list-nav > div > .sub-menu:nth-child(3):hover,
  #menu-1 .mega-list-nav > div > .sub-menu:nth-child(4):hover,
  #menu-2 .mega-list-nav > div > .sub-menu:nth-child(4):hover,
  #menu-2 .mega-list-nav > div > .sub-menu:nth-child(5):hover {
    border-color: rgba(var(--color-black-500), 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  }

  /* --- 4. TIER 2 & 3: STANDARD CARD STYLING (IMAGE & TEXT-ONLY) --- */
  /* Add padding to the container so lifted cards don't clip inside the overflow container */
  #x-header-container .sub-menu-container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Target ALL items EXCEPT the Green Boxes to create the card */
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    > div {
    display: flex !important;
    flex-direction: column-reverse !important; /* Stacks image above text */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(var(--color-black-300), 1) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
    gap: 0.75rem !important;
  }

  /* Card Lift on Hover */
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    > div:hover {
    border-color: rgba(var(--color-blue-500), 1) !important;
    box-shadow: 0 8px 20px rgba(var(--color-blue-500), 0.15) !important;
    transform: translateY(-4px) !important;
  }

  /* Strip native padding and borders from links inside the card */
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    a.nav-link,
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    a.menu-item-image {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Set a minimum height for the text to normalize 1-line and 2-line titles */
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    a.nav-link {
    min-height: 2.75rem !important; /* Reserves space for two lines of text */
    display: flex !important;
    align-items: center !important; /* Centers 1-line text vertically inside the reserved space */
    justify-content: center !important;
    width: 100% !important;
  }

  /* Fix image rendering inside flex container */
  #x-header-container
    .sub-menu-container
    > li:has(.menu-item-image)
    a.menu-item-image {
    width: 100% !important;
    max-width: 140px !important;
    padding-bottom: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important; /* Prevents the image from squishing if text is long */
  }

  #x-header-container
    .sub-menu-container
    > li:has(.menu-item-image)
    a.menu-item-image
    img {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Hover effect for the text inside the card */
  #x-header-container
    .sub-menu-container
    > li:not(:has(a[href*="-faq"])):not(:has(a[href*="account/pages"])):not(
      :has(a[href*="partners.snugglepuppy"])
    ):not(:has(a[href*="retail.snugglepuppy"]))
    > div:hover
    a.nav-link
    span.p-break-words {
    color: rgba(var(--color-blue-900), 1) !important;
  }
  #x-header-container .sub-menu-container a.nav-link::after {
    display: none !important;
  }

  /* --- 5. TIER 2: GREEN BOXES (FAQ, SUBSCRIPTIONS, WHOLESALE) --- */
  /* Make the parent li span full grid width and center its contents */
  #x-header-container .sub-menu-container > li:has(a[href*="-faq"]),
  #x-header-container .sub-menu-container > li:has(a[href*="account/pages"]) {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Wholesale/Partner links sit side-by-side */
  #x-header-container
    .sub-menu-container
    > li:has(a[href*="partners.snugglepuppy"]),
  #x-header-container
    .sub-menu-container
    > li:has(a[href*="retail.snugglepuppy"]) {
    width: 40% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* The actual Green Box pill styling */
  #x-header-container a[href*="-faq"],
  #x-header-container a[href*="account/pages"],
  #x-header-container a[href*="partners.snugglepuppy"],
  #x-header-container a[href*="retail.snugglepuppy"] {
    background-color: rgba(var(--color-green-100), 0.5) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.25rem !important;
    border: 1px solid rgba(var(--color-green-300), 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* Swapped to 100% so side-by-side buttons match exactly in size */
    transition: all 0.2s ease !important;
    text-decoration: none !important;
  }

  /* Kill the native theme's link underline animation that flashes black on hover.
     We suppress it globally for these links so we can cleanly use ::after for our SVG.
  */
  #x-header-container a[href*="-faq"]::after,
  #x-header-container a[href*="account/pages"]::after,
  #x-header-container a[href*="partners.snugglepuppy"]::after,
  #x-header-container a[href*="retail.snugglepuppy"]::after {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    content: none !important; /* Removed by default */
  }

  /* Remove any blue text override on hover */
  #x-header-container a[href*="-faq"]:hover span.p-break-words,
  #x-header-container a[href*="account/pages"]:hover span.p-break-words,
  #x-header-container a[href*="partners.snugglepuppy"]:hover span.p-break-words,
  #x-header-container a[href*="retail.snugglepuppy"]:hover span.p-break-words {
    color: rgba(var(--color-black-900), 1) !important;
  }

  /* Green Box Outline Hover Effect */
  #x-header-container a[href*="-faq"]:hover,
  #x-header-container a[href*="account/pages"]:hover,
  #x-header-container a[href*="partners.snugglepuppy"]:hover,
  #x-header-container a[href*="retail.snugglepuppy"]:hover {
    outline: 2px solid rgba(var(--color-green-500), 1) !important;
    outline-offset: 2px !important;
    background-color: rgba(var(--color-green-100), 0.9) !important;
    border-color: rgba(
      var(--color-green-500),
      1
    ) !important; /* Prevents border flash */
  }

  /* External Link SVG Base State (Hidden, 0 Width) */
  #x-header-container a[href*="partners.snugglepuppy"] span::after,
  #x-header-container a[href*="retail.snugglepuppy"] span::after {
    content: "" !important;
    display: inline-block !important; /* Better cross-browser support than -webkit-inline-box */
    width: 0 !important;
    height: 16px !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    transition:
      width 0.2s ease,
      opacity 0.2s ease,
      margin-left 0.2s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='nav-external-link'%3E%3Cpath id='Vector' d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: text-top;
  }

  /* External Link SVG Hover State (Revealed) */
  #x-header-container a[href*="partners.snugglepuppy"]:hover span::after,
  #x-header-container a[href*="retail.snugglepuppy"]:hover span::after {
    width: 16px !important;
    opacity: 1 !important;
    margin-left: 8px !important;
  }

  /* --- 6. DYNAMIC PROMOS VISIBILITY --- */
  /* Hide all Promo Cards by default */
  #x-header-container .mega-menu-card {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Tie Promo rendering to the `.active` state of the left-hand tabs */
  /* We use :nth-of-type() for the cards to bypass Shopify's injected <style> tags */

  /* Menu 1 (Shop Snuggle Puppy) */
  #menu-1
    .mega-menu-container:has(.mega-list-nav .sub-menu:nth-child(1).active)
    .mega-menu-card:nth-of-type(1) {
    display: block !important;
    opacity: 1 !important;
  }
  #menu-1
    .mega-menu-container:has(.mega-list-nav .sub-menu:nth-child(2).active)
    .mega-menu-card:nth-of-type(2) {
    display: block !important;
    opacity: 1 !important;
  }

  /* Menu 2 (Shop More For Pets) */
  #menu-2
    .mega-menu-container:has(.mega-list-nav .sub-menu:nth-child(1).active)
    .mega-menu-card:nth-of-type(1) {
    display: block !important;
    opacity: 1 !important;
  }
  #menu-2
    .mega-menu-container:has(.mega-list-nav .sub-menu:nth-child(2).active)
    .mega-menu-card:nth-of-type(2) {
    display: block !important;
    opacity: 1 !important;
  }
  #menu-2
    .mega-menu-container:has(.mega-list-nav .sub-menu:nth-child(3).active)
    .mega-menu-card:nth-of-type(3) {
    display: block !important;
    opacity: 1 !important;
  }

  .mega-menu-vertical.main-nav-child-right .mega-nav,
  .mega-menu-vertical.main-nav-child-left .mega-nav {
    padding-bottom: 2rem;
  }
}

/* ==========================================================
   CART DRAWER: FREE SHIPPING & COMFORT KIT STACK
   ========================================================== */

.sp-upsell-stack-wrapper {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(var(--colors-line-and-border), 1);
}

@media (min-width: 1024px) {
  .sp-upsell-stack-wrapper {
    padding: 0 2.25rem;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    border-bottom: unset;
  }
}

#mini-cart-upsell > div > div.text-medium {
  font-family: var(--font-body-family);
  color: rgba(var(--color-black-700), 1);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  margin: 0 !important;
}

@media screen and (max-width: 767px) {
  #x-upsell-cart-drawer > .splide__track {
    padding-bottom: 0.5rem;
  }
}

/* ----------------------------------------------------------
   1. FREE SHIPPING BAR (STACKED OUTSIDE)
   ---------------------------------------------------------- */
.sp-shipping-bar-container {
  background: rgba(var(--color-black-100), 0.5);
  border: 1px solid rgba(var(--color-black-300), 0.7);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
}

.sp-shipping-bar-container.is-unlocked {
  background: rgba(var(--color-green-100), 0.25);
  border-color: rgba(var(--color-green-300), 0.9);
  padding: 0.85rem;
}

.sp-shipping-progress-text {
  font-family: "Lato", sans-serif;
  font-size: 0.825rem;
  color: rgba(var(--color-black-900), 1);
  margin: 0 !important;
  line-height: 1.2;
}

.sp-shipping-progress-text strong {
  color: rgba(var(--color-blue-700), 1);
  font-weight: 900;
}

.sp-shipping-unlocked-text {
  font-family: var(--font-heading-family);
  font-size: 0.95rem;
  font-weight: 900;
  color: rgba(var(--color-green-700), 1);
  margin: 0 !important;
  letter-spacing: 0.02em;
}

/* Free Shipping Track with Collapse Animation */
.sp-shipping-track {
  height: 5px;
  background-color: rgba(var(--color-black-300), 0.8);
  border-radius: 999px;
  margin-top: 0.5rem;
  overflow: hidden;
  max-height: 10px;
  opacity: 1;
  transform-origin: top;
  transition:
    max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease,
    margin-top 0.4s ease;
}

.sp-shipping-track.is-hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.sp-shipping-fill {
  height: 100%;
  background: rgba(var(--color-green-500), 1);
  border-radius: 999px;
  transition: width 0.5s ease-out;
}

/* ----------------------------------------------------------
   2. COMFORT KIT CONTAINER & MILESTONE TRACK
   ---------------------------------------------------------- */
.sp-comfort-kit-container {
  background: rgba(var(--color-blue-100), 0.35);
  border: 1.5px solid rgba(var(--color-blue-300), 0.8);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  position: relative;
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sp-comfort-kit-container:hover {
  border-color: rgba(var(--color-blue-500), 1);
  box-shadow: 0 4px 12px rgba(var(--color-blue-500), 0.08);
}

.sp-tier-header-row {
  display: flex;
  justify-content: center;
  text-align: center;
}

.sp-tier-text-group {
  text-align: center;
  width: 100%;
}

.sp-tier-headline {
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  line-height: 1.2;
  color: rgba(var(--color-blue-900), 1);
  margin: 0 !important;
  font-weight: 900;
}

.sp-tier-subtext {
  font-family: "Lato", sans-serif;
  font-size: 0.825rem;
  line-height: 1.3;
  color: rgba(var(--color-black-700), 1);
  margin: 0.2rem 0 0 0 !important;
}

.sp-tier-subtext strong {
  color: rgba(var(--color-red-700), 1);
  font-weight: 900;
}

/* The Visual Milestone Track */
.sp-tier-bar-track {
  position: relative;
  height: 6px;
  background-color: rgba(var(--color-black-300), 0.9);
  border-radius: 999px;
  margin: 1.25rem 1.75rem 2.25rem 1.75rem;
}

.sp-tier-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(var(--color-blue-500), 1) 0%,
    rgba(var(--color-green-500), 1) 100%
  );
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.28, 0.84, 0.42, 1);
}

.sp-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-milestone-0 {
  left: 0%;
}
.sp-milestone-1 {
  left: 33.333%;
}
.sp-milestone-2 {
  left: 66.666%;
}
.sp-milestone-3 {
  left: 100%;
}

.sp-milestone-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid rgba(var(--color-black-300), 1);
  color: rgba(var(--color-black-500), 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading-family);
  font-size: 0.75rem;
  font-weight: 900;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sp-milestone.is-active .sp-milestone-dot {
  background-color: rgba(var(--color-green-500), 1);
  border-color: rgba(var(--color-green-500), 1);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(var(--color-green-300), 0.5);
}

/* Branded Checkmark Mask (Recolors SVG to Solid White) */
.sp-check-icon {
  display: block;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  -webkit-mask-image: url("/cdn/shop/files/rounded-check-mark.svg?v=1762276509");
  mask-image: url("/cdn/shop/files/rounded-check-mark.svg?v=1762276509");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Milestone Labels */
.sp-milestone-label {
  position: absolute;
  top: 25px;
  text-align: center;
  white-space: nowrap;
  font-family: "Lato", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  color: rgba(var(--color-black-500), 1);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sp-milestone-label small {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: none;
}

.sp-milestone.is-active .sp-milestone-label {
  color: rgba(var(--color-green-700), 1);
}

/* Mobile Screen Edge Offsets */
.sp-milestone-label-0 {
  left: 0;
  transform: translateX(-15%);
}

.sp-milestone-label-3 {
  right: 0;
  left: auto;
  transform: translateX(15%);
}

@media screen and (max-width: 767px) {
  .sp-tier-bar-track {
    margin: 1.25rem 1.25rem 2.25rem 1.25rem;
  }
  .sp-tier-headline {
    font-size: 1.1rem;
    margin: 0 auto !important;
  }
  .sp-milestone-label {
    font-size: 0.66rem;
  }
  .sp-tier-title-wrap {
    width: 100%;
  }
}

/* ----------------------------------------------------------
   3. COMFORT KIT CTA LINK
   ---------------------------------------------------------- */
.sp-comfort-kit-cta {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
}

.sp-comfort-kit-link {
  font-family: "Lato", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  color: rgba(var(--color-blue-700), 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.sp-comfort-kit-link:hover {
  color: rgba(var(--color-red-700), 1);
}

/* ==========================================================
   CART DRAWER & COLLECTION CARD ENHANCEMENTS
   ========================================================== */

/* 1. Mobile Roll-Up Caret for Comfort Kit */
.sp-tier-title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sp-tier-caret {
  color: rgba(var(--color-blue-900), 1);
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .sp-tier-collapse-body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* 2. Cart Drawer Product Title Font Normalization (Lato 700) */
#update-cart .product-info-column-1 a,
#mini-cart-upsell .card a.x-heading {
  font-family: var(--font-body-family, "Lato", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

/* 3. Mini Card Variant Subtitle (Cart Drawer) */
#mini-cart-upsell .bundle-variant-title {
  font-size: 0.8rem;
  color: rgba(var(--color-black-500), 1);
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-family: "Lato", sans-serif;
}

/* 4. Cart Drawer Discount Badges (Height & Clipping Fix) */
#update-cart .product-info-column-2 {
  max-width: 48% !important;
}

#update-cart ul.discounts {
  margin-top: 0.35rem !important;
}

#update-cart ul.discounts .x-discount {
  background: rgba(var(--color-green-100), 0.75) !important;
  border: 1px solid rgba(var(--color-green-300), 1) !important;
  color: rgba(var(--color-green-900), 1) !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.5rem !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

#update-cart ul.discounts .x-discount svg {
  color: rgba(var(--color-green-700), 1) !important;
}

#update-cart ul.discounts .discount-title {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  font-family: "Lato", sans-serif !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ==========================================================
   FREQUENTLY BOUGHT TOGETHER (FBT) / COMFORT KIT (V4)
   ========================================================== */

/* Reset native button styles */
.x-block-fbt div[x-data] > button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 1. Top Callout Line (Centered) */
.sp-fbt-top-callout {
  width: 100%;
  text-align: center;
  margin-bottom: 0.35rem;
}

.sp-fbt-callout-save {
  font-family: var(--font-body-family, "Lato", sans-serif);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: rgba(var(--color-green-500), 1);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
}

.sp-fbt-callout-unlocked {
  font-family: var(--font-body-family, "Lato", sans-serif);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(var(--color-green-500), 1);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
}

/* 2. Bottom Row & Single-Line Title */
.sp-fbt-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.sp-fbt-main-title {
  font-family: var(--font-heading-family, "Tobi Pro", sans-serif) !important;
  color: rgba(var(--color-blue-900), 1) !important;
  font-size: 1.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* 3. Action Button (+ ADD / EDIT) */
.sp-fbt-action-btn {
  background-color: rgba(var(--color-red-500), 1) !important;
  border: none !important;
  padding: 0.35rem 1.15rem !important;
  border-radius: 999px !important;
  transition: background-color 0.3s ease !important;
  margin-left: auto !important;
  line-height: normal !important;
  min-height: unset !important;
  height: auto !important;
  flex-shrink: 0 !important;
  color: unset !important;
  box-shadow: unset !important;
}

.sp-fbt-action-btn span {
  color: #ffffff !important;
  font-family: var(--font-heading-family, "Tobi Pro", sans-serif) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  padding-top: 2px;
}

.sp-fbt-action-btn:hover {
  background-color: rgba(var(--color-red-700), 1) !important;
}

span.text-\[rgba\(var\(--color-red-500\)\,1\)\] {
  color: rgba(var(--color-red-500), 1);
}

div.items-baseline.x-heading {
  padding-bottom: 0.875rem;
}

@media screen and (max-width: 767px) {
  .x-block-fbt {
    padding: 0.65rem 0.85rem 0.75rem 0.85rem !important;
  }
  .sp-fbt-callout-save {
    font-size: 0.85rem;
  }
  .sp-fbt-callout-unlocked {
    font-size: 0.72rem;
  }
  .sp-fbt-main-title {
    font-size: clamp(0.88rem, 3.8vw, 1.05rem) !important;
  }
  .sp-fbt-action-btn span {
    font-size: 0.8rem !important;
  }
}

/* 4. Modal Header & Reactive Dynamic Tiers */
.sp-fbt-modal-header-content {
  text-align: center;
}

.sp-fbt-modal-title {
  font-family: var(--font-heading-family, "Tobi Pro", sans-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: rgba(var(--color-blue-900), 1);
  margin: 0 !important;
  font-weight: 900;
}

.sp-fbt-modal-sub {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 0.9rem;
  line-height: 1.3;
  color: rgba(var(--color-black-700), 1);
  margin-top: 0.15rem;
}

.sp-fbt-modal-tiers {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  width: 100%;
}

/* All tiers default to subtle blue */
.sp-fbt-modal-tier-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-blue-100), 0.4);
  border: 1px solid rgba(var(--color-blue-300), 0.7);
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
  text-align: center;
  transition: all 0.25s ease;
}

.sp-fbt-pill-sp {
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(var(--color-black-500), 1);
  line-height: 1;
  transition: color 0.25s ease;
  padding-bottom: 2px;
}

.sp-fbt-pill-qty {
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(var(--color-black-500), 1);
  line-height: 1;
  transition: color 0.25s ease;
}

.sp-fbt-pill-disc {
  font-family: var(--font-heading-family, "Tobi Pro", sans-serif);
  font-size: 1rem;
  font-weight: 900;
  color: rgba(var(--color-blue-900), 1);
  line-height: 1.1;
  margin-top: 0.1rem;
  transition: color 0.25s ease;
  padding-top: 5px;
}

/* Dynamically active tier turns green */
.sp-fbt-modal-tier-pill.sp-fbt-pill-active {
  background: rgba(var(--color-green-100), 0.75) !important;
  border-color: rgba(var(--color-green-500), 0.9) !important;
  transform: scale(1.02);
}

.sp-fbt-modal-tier-pill.sp-fbt-pill-active .sp-fbt-pill-disc {
  color: rgba(var(--color-green-700), 1) !important;
}

.sp-fbt-modal-tier-pill.sp-fbt-pill-active .sp-fbt-pill-qty {
  color: rgba(var(--color-green-900), 1) !important;
}

@media (max-width: 767px) {
  .sp-fbt-modal-title {
    font-size: 1.2rem;
  }
  .sp-fbt-modal-sub {
    font-size: 0.8rem;
  }
  .sp-fbt-pill-disc {
    font-size: 0.9rem;
  }
  .sp-fbt-pill-qty {
    font-size: 0.7rem;
  }
  .sp-fbt-pill-sp {
    font-size: 0.7rem;
  }
}

.x-container-fbt-popup-products {
  padding-top: 0.75rem;
}

/* ==========================================================
   COMPLEMENTARY PRODUCTS (PDP UPSELL SYSTEM) - REFINED
   ========================================================== */

/* 1. Invisible Empty State (Eliminates Blue Line Flash while allowing IntersectionObserver to fire) */
.x-block-product-complementary:empty {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Boxed Card Container & Width Normalization */
.x-block-product-complementary.accordion {
  border: 2px solid rgba(var(--color-blue-300), 1) !important;
  background-color: rgba(var(--color-blue-100), 0.25) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.x-block-product-complementary.accordion:hover {
  border-color: rgba(var(--color-blue-500), 1) !important;
  background-color: rgba(var(--color-blue-100), 0.35) !important;
}

/* 3. Accordion Header Bar */
.x-block-product-complementary > div > div[role="button"] {
  padding: 0.85rem 1.25rem !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}

.x-block-product-complementary > div > div[role="button"]:hover {
  background-color: rgba(var(--color-blue-100), 0.5) !important;
}

.x-block-product-complementary > div > div[role="button"] p {
  font-family: var(--font-heading-family, 'Tobi Pro', sans-serif) !important;
  color: rgba(var(--color-blue-900), 1) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .x-block-product-complementary > div > div[role="button"] p {
    font-size: 1rem !important;
  }
}

.x-block-product-complementary > div > div[role="button"] span svg {
  color: rgba(var(--color-blue-900), 1) !important;
}

/* 4. Splide Slider & Recommendation List */
.x-block-product-complementary .splide {
  margin-bottom: 0 !important;
  padding: 0 1rem 1rem 1rem !important;
}

@media (min-width: 768px) {
  .x-block-product-complementary .splide {
    padding: 0 1.25rem 1.25rem 1.25rem !important;
  }
}

.x-block-product-complementary li.complementory-border {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.x-block-product-complementary li.complementory-border + li.complementory-border {
  border-top: 1px solid rgba(var(--color-blue-300), 0.6) !important;
}

/* 5. Product Card & Flex Row Vertical Centering */
.x-block-product-complementary .card-product {
  padding-bottom: 0 !important;
  overflow: visible !important; /* Prevents button scale clipping */
}

.x-block-product-complementary .relative.disable-effect.flex {
  align-items: center !important; /* Vertically centers image, text, and ATC button */
}

.x-block-product-complementary .card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-right: 0.75rem !important;
}

.x-block-product-complementary .card__heading a {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: rgba(var(--color-black-900), 1) !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease;
}

.x-block-product-complementary .card__heading a:hover {
  color: rgba(var(--color-blue-700), 1) !important;
}

.x-block-product-complementary .bundle-variant-title {
  color: rgba(var(--color-black-700), 1) !important;
  font-size: 0.9rem !important;
  font-weight: 600;
}

.x-block-product-complementary .card__heading:has(+ .bundle-variant-title) {
  margin-bottom: 0 !important;
}

.x-block-product-complementary .x-card-price .price {
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: rgba(var(--color-black-900), 1) !important;
}

/* 6. Add to Cart Button (Centered & Padding Fix) */
.x-block-product-complementary div[x-data="xProductCart"],
.x-block-product-complementary div:has(> button.button-action) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  padding-right: 0.35rem !important;
  flex-shrink: 0 !important;
}

.x-block-product-complementary button.button-action {
  background-color: rgba(var(--color-red-500), 1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  margin: 0 !important;
  position: relative !important;
}

.x-block-product-complementary button.button-action:hover {
  background-color: rgba(var(--color-red-700), 1) !important;
  transform: scale(1.08) !important;
}

.x-block-product-complementary button.button-action svg {
  width: 14px !important;
  height: 14px !important;
  color: #ffffff !important;
}

/* 7. Loading Spinner Positioning & Resting Visibility Fix */
.x-block-product-complementary button.button-action div:has(.animate-spin) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Enforce strict hiding when Alpine sets display: none */
.x-block-product-complementary button.button-action div:has(.animate-spin)[style*="display: none"],
.x-block-product-complementary button.button-action div:has(.animate-spin)[x-cloak] {
  display: none !important;
}

.x-block-product-complementary button.button-action svg.animate-spin {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 8. Carousel Bottom Navigation Arrows */
.x-block-product-complementary .splide__arrows {
  border-top: 1px solid rgba(var(--color-blue-300), 0.6) !important;
  padding-top: 0.75rem !important;
}

.x-block-product-complementary .splide__arrow {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(var(--color-black-300), 1) !important;
  background: #ffffff !important;
  color: rgba(var(--color-black-900), 1) !important;
}

.x-block-product-complementary .splide__arrow:hover:not(:disabled) {
  border-color: rgba(var(--color-blue-500), 1) !important;
  color: rgba(var(--color-blue-700), 1) !important;
}

/* ==========================================================
   CART DRAWER UPSELL BUTTONS (DESKTOP & MOBILE NORMALIZATION)
   ========================================================== */

/* 1. Base State: Ruby Red with White Icon */
#mini-cart-upsell button.button-action {
  background-color: rgba(var(--color-red-500), 1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  cursor: pointer !important;
}

/* Force SVG plus icon to match currentColor */
#mini-cart-upsell button.button-action svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease !important;
}

#mini-cart-upsell button.button-action svg path {
  fill: currentColor !important;
}

/* 2. Hover State: Nature Green with Black Icon */
#mini-cart-upsell button.button-action:hover:not(:disabled) {
  background-color: rgba(var(--color-green-500), 1) !important;
  color: rgba(var(--color-black-900), 1) !important;
  transform: scale(1.08) !important;
}

#mini-cart-upsell button.button-action:hover:not(:disabled) svg {
  transform: rotate(90deg);
}

/* 3. Loading State: Perfect Spinner Alignment */
#mini-cart-upsell button.button-action div:has(.animate-spin) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

#mini-cart-upsell button.button-action div:has(.animate-spin)[style*="display: none"],
#mini-cart-upsell button.button-action div:has(.animate-spin)[x-cloak] {
  display: none !important;
}

/* ==========================================================
   MOBILE HEADER: ACCOUNT & CART ICON ALIGNMENT
   ========================================================== */

shopify-account.header-icon-account {
  display: flex!important;

#cart-icon-bubble {
  position: static!important;
}

.x-container-header-icons {
  justify-content: space-between!important;
}