{"product_id":"pflege","title":"Care Set for Fur, Textiles \u0026 Paws","description":"\u003c!-- Bundle Buy Box --\u003e\n\n\u003cdiv id=\"bundle-buybox\" class=\"hlp-bundle-compare\" data-hlp-bundle-compare\u003e\n\n  \u003c!-- 4 in 1 --\u003e\n\n  \u003cdiv class=\"hlp-option hlp-featured is-active\" data-hlp-option-value=\"4 in 1 Set\" role=\"button\" tabindex=\"0\" aria-label=\"Select 4 in 1 Set\" aria-pressed=\"true\"\u003e\n    \u003cspan class=\"hlp-badge\"\u003eRecommended\u003c\/span\u003e\n\n\n\u003cdiv class=\"hlp-option-row\"\u003e\n  \u003cdiv class=\"hlp-option-main\"\u003e\n    \u003cspan class=\"hlp-radio-dot\" aria-hidden=\"true\"\u003e\u003c\/span\u003e\n\n    \u003cdiv class=\"hlp-option-text\"\u003e\n      \u003ch3\u003e4 in 1 Set\u003c\/h3\u003e\n      \u003cp\u003eFor fur, textiles \u0026amp; paws\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"hlp-price-wrap\"\u003e\n    \u003cdiv class=\"hlp-price\"\u003e59,90€\u003c\/div\u003e\n    \u003cspan class=\"hlp-saving\"\u003e+2 Extras\u003c\/span\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cul class=\"hlp-details\"\u003e\n  \u003cli\u003e✓ Fur, clothing, furniture \u0026amp; paws\u003c\/li\u003e\n  \u003cli\u003e✓ Paw cleaner for dirt after walks\u003c\/li\u003e\n  \u003cli\u003e✓ Small paw towel included for free\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cspan class=\"hlp-choice-indicator\"\u003eSelected\u003c\/span\u003e\n\n\n  \u003c\/div\u003e\n\n  \u003c!-- 3 in 1 --\u003e\n\n  \u003cdiv class=\"hlp-option\" data-hlp-option-value=\"3 in 1 Set\" role=\"button\" tabindex=\"0\" aria-label=\"Select 3 in 1 Set\" aria-pressed=\"false\"\u003e\n    \u003cspan class=\"hlp-mini-badge\"\u003eBasic Set\u003c\/span\u003e\n\n\n\u003cdiv class=\"hlp-option-row\"\u003e\n  \u003cdiv class=\"hlp-option-main\"\u003e\n    \u003cspan class=\"hlp-radio-dot\" aria-hidden=\"true\"\u003e\u003c\/span\u003e\n\n    \u003cdiv class=\"hlp-option-text\"\u003e\n      \u003ch3\u003e3 in 1 Set\u003c\/h3\u003e\n      \u003cp\u003eFor fur, clothing \u0026amp; furniture\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"hlp-price-wrap\"\u003e\n    \u003cdiv class=\"hlp-price\"\u003e49,90€\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cul class=\"hlp-details\"\u003e\n  \u003cli\u003e✓ Grooming glove\u003c\/li\u003e\n  \u003cli\u003e✓ Furniture hair remover\u003c\/li\u003e\n  \u003cli\u003e✓ Clothing hair remover\u003c\/li\u003e\n  \u003cli class=\"hlp-muted\"\u003eWithout paw cleaning\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cspan class=\"hlp-choice-indicator\"\u003eSelect set\u003c\/span\u003e\n\n\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003c!-- Customer note --\u003e\n\n\u003cdiv class=\"hlp-bundle-note\" id=\"hlp-bundle-note\"\u003e\n  For most households, the \u003cstrong\u003e4 in 1 Set\u003c\/strong\u003e is the more complete choice, as it covers fur, textiles and paw cleaning in one set.\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n#bundle-buybox {\n  scroll-margin-top: 110px;\n}\n\n\/* Hide native Shopify variant fields only when they match this bundle selector *\/\n.hlp-hidden-variant-selects,\nvariant-selects:has(input[value=\"4 in 1 Set\"]),\nvariant-selects:has(input[value=\"3 in 1 Set\"]),\n.product-form__input:has(input[value=\"4 in 1 Set\"]),\n.product-form__input:has(input[value=\"3 in 1 Set\"]) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  opacity: 0 !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  visibility: hidden !important;\n}\n\n\/* Container *\/\n.hlp-bundle-compare {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin: 26px 0 18px;\n  color: #242833;\n}\n\n\/* Option Card *\/\n.hlp-option {\n  position: relative;\n  border: 1px solid rgba(36, 40, 51, .10);\n  border-radius: 18px;\n  padding: 20px 18px 18px;\n  background: #ffffff;\n  cursor: pointer;\n  color: inherit;\n  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;\n}\n\n.hlp-option:hover {\n  border-color: #d13633;\n  box-shadow: 0 8px 20px rgba(36, 40, 51, .06);\n}\n\n.hlp-option.is-active {\n  border: 2px solid #d13633;\n  background: rgba(209, 54, 51, .045);\n  box-shadow: 0 12px 24px rgba(209, 54, 51, .12);\n}\n\n.hlp-option:focus-visible {\n  outline: 3px solid rgba(209, 54, 51, .25);\n  outline-offset: 4px;\n}\n\n.hlp-featured {\n  background: #fffafa;\n}\n\n\/* Row *\/\n.hlp-option-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n\/* Main part *\/\n.hlp-option-main {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  min-width: 0;\n}\n\n\/* Radio dot *\/\n.hlp-radio-dot {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #d13633;\n  border-radius: 50%;\n  background: #ffffff;\n  position: relative;\n  flex: 0 0 auto;\n}\n\n.hlp-option.is-active .hlp-radio-dot {\n  background: #d13633;\n  box-shadow: inset 0 0 0 5px #ffffff;\n}\n\n\/* Badges *\/\n.hlp-badge,\n.hlp-mini-badge {\n  position: absolute;\n  top: -16px;\n  right: 18px;\n  z-index: 5;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 30px;\n  padding: 7px 16px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 850;\n  text-transform: uppercase;\n  line-height: 1;\n  letter-spacing: .04em;\n  white-space: nowrap;\n  box-shadow: 0 6px 14px rgba(36, 40, 51, .06);\n}\n\n.hlp-badge {\n  background: #fff1f1;\n  color: #d13633;\n  border: 1px solid rgba(209, 54, 51, .14);\n}\n\n.hlp-mini-badge {\n  background: #f4f4f4;\n  color: #5f6673;\n  border: 1px solid rgba(36, 40, 51, .08);\n}\n\n\/* Text *\/\n.hlp-option h3 {\n  margin: 0 0 4px;\n  color: #242833;\n  font-size: 21px;\n  font-weight: 900;\n  line-height: 1.15;\n}\n\n.hlp-option p {\n  margin: 0;\n  color: #5f6673;\n  font-size: 14px;\n  line-height: 1.35;\n  max-width: 360px;\n}\n\n\/* Price *\/\n.hlp-price-wrap {\n  flex: 0 0 auto;\n  text-align: right;\n}\n\n.hlp-price {\n  color: #242833;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.05;\n  white-space: nowrap;\n}\n\n.hlp-saving {\n  display: block;\n  margin-top: 5px;\n  color: #d13633;\n  font-size: 12px;\n  font-weight: 850;\n  white-space: nowrap;\n}\n\n\/* Details *\/\n.hlp-details {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  max-height: 0;\n  opacity: 0;\n  overflow: hidden;\n  margin-left: 28px;\n  display: grid;\n  gap: 8px;\n  transform: translateY(-4px);\n  transition: max-height .28s ease, opacity .22s ease, margin .22s ease, transform .22s ease;\n}\n\n.hlp-option.is-active .hlp-details {\n  max-height: 260px;\n  opacity: 1;\n  margin: 14px 0 12px 28px;\n  transform: translateY(0);\n}\n\n.hlp-details li {\n  color: #5f6673;\n  font-size: 14px;\n  line-height: 1.35;\n}\n\n.hlp-muted {\n  color: #9aa1ad !important;\n}\n\n\/* Choice indicator *\/\n.hlp-choice-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 36px;\n  margin-left: 28px;\n  padding: 8px 18px;\n  border-radius: 999px;\n  background: #f4f4f4;\n  color: #5f6673;\n  font-size: 13px;\n  font-weight: 850;\n}\n\n.hlp-option.is-active .hlp-choice-indicator {\n  background: #d13633;\n  color: #ffffff;\n}\n\n.hlp-option.is-active .hlp-choice-indicator::before {\n  content: \"✓\";\n  margin-right: 6px;\n}\n\n\/* Bundle note *\/\n.hlp-bundle-note {\n  margin: 14px 0 20px;\n  padding: 14px 16px;\n  border: 1px solid rgba(36, 40, 51, .08);\n  border-radius: 16px;\n  background: #fafafa;\n  color: #5f6673;\n  text-align: center;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.hlp-bundle-note strong {\n  color: #242833;\n  font-weight: 900;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hlp-option,\n  .hlp-details {\n    transition: none;\n  }\n\n  .hlp-option:hover {\n    transform: none;\n  }\n}\n\n\/* Tablet *\/\n@media screen and (min-width: 750px) and (max-width: 989px) {\n  #bundle-buybox {\n    scroll-margin-top: 90px;\n  }\n\n  .hlp-bundle-compare {\n    grid-template-columns: 1fr;\n    gap: 14px;\n    margin: 24px 0 18px;\n  }\n\n  .hlp-option {\n    padding: 20px 18px 18px;\n    border-radius: 18px;\n  }\n\n  .hlp-option-row {\n    gap: 10px;\n  }\n\n  .hlp-option-main {\n    gap: 9px;\n  }\n\n  .hlp-radio-dot {\n    width: 19px;\n    height: 19px;\n  }\n\n  .hlp-option h3 {\n    font-size: 21px;\n    line-height: 1.15;\n  }\n\n  .hlp-option p {\n    font-size: 14px;\n    line-height: 1.35;\n    max-width: 420px;\n  }\n\n  .hlp-price {\n    font-size: 24px;\n  }\n\n  .hlp-saving {\n    font-size: 12px;\n  }\n\n  .hlp-option.is-active .hlp-details {\n    margin: 13px 0 12px 28px;\n    max-height: 280px;\n  }\n\n  .hlp-details li {\n    font-size: 14px;\n  }\n\n  .hlp-choice-indicator {\n    margin-left: 28px;\n    font-size: 13px;\n    min-height: 35px;\n  }\n\n  .hlp-badge,\n  .hlp-mini-badge {\n    right: 18px;\n    font-size: 10.5px;\n  }\n\n  .hlp-bundle-note {\n    font-size: 14px;\n    padding: 14px 16px;\n    border-radius: 16px;\n  }\n}\n\n\/* Mobile *\/\n@media (max-width: 749px) {\n  #bundle-buybox {\n    scroll-margin-top: 86px;\n  }\n\n  .hlp-bundle-compare {\n    grid-template-columns: 1fr;\n    gap: 14px;\n    margin-top: 24px;\n  }\n\n  .hlp-option {\n    padding: 18px 16px 16px;\n    border-radius: 16px;\n  }\n\n  .hlp-option-row {\n    gap: 8px;\n  }\n\n  .hlp-radio-dot {\n    width: 18px;\n    height: 18px;\n  }\n\n  .hlp-option h3 {\n    font-size: 20px;\n  }\n\n  .hlp-option p {\n    font-size: 13.5px;\n  }\n\n  .hlp-price {\n    font-size: 22px;\n  }\n\n  .hlp-details {\n    margin-left: 28px;\n  }\n\n  .hlp-option.is-active .hlp-details {\n    margin: 12px 0 12px 28px;\n    max-height: 280px;\n  }\n\n  .hlp-choice-indicator {\n    margin-left: 28px;\n    font-size: 12.5px;\n    min-height: 34px;\n  }\n\n  .hlp-badge,\n  .hlp-mini-badge {\n    right: 16px;\n    font-size: 10.5px;\n  }\n\n  .hlp-bundle-note {\n    padding: 13px 14px;\n    font-size: 13.5px;\n  }\n}\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function () {\n  const compare = document.querySelector('[data-hlp-bundle-compare]');\n  if (!compare) return;\n\n  const cards = Array.from(compare.querySelectorAll('[data-hlp-option-value]'));\n  const values = cards.map(c =\u003e c.dataset.hlpOptionValue.trim());\n\n  let isSwitching = false;\n  let savedY = 0;\n  let allowManualScroll = false;\n\n  const originalScrollTo = window.scrollTo.bind(window);\n  const originalScrollBy = window.scrollBy.bind(window);\n  const originalScrollIntoView = Element.prototype.scrollIntoView;\n\n  const isMobile = () =\u003e window.matchMedia('(max-width: 749px)').matches;\n\n  function lockScroll() {\n    if (!isMobile()) return;\n    savedY = window.pageYOffset || window.scrollY;\n    isSwitching = true;\n  }\n\n  function restoreScroll() {\n    if (!isMobile()) return;\n    allowManualScroll = true;\n    originalScrollTo({ top: savedY, left: 0, behavior: 'auto' });\n    allowManualScroll = false;\n  }\n\n  function releaseLock() {\n    if (!isMobile()) return;\n\n    const start = Date.now();\n    const duration = 700;\n\n    function keep() {\n      restoreScroll();\n\n      if (Date.now() - start \u003c duration) {\n        requestAnimationFrame(keep);\n      } else {\n        restoreScroll();\n        isSwitching = false;\n      }\n    }\n\n    requestAnimationFrame(keep);\n    setTimeout(restoreScroll, 80);\n    setTimeout(restoreScroll, 180);\n    setTimeout(restoreScroll, 350);\n    setTimeout(restoreScroll, 600);\n  }\n\n  window.scrollTo = function () {\n    if (isSwitching \u0026\u0026 isMobile() \u0026\u0026 !allowManualScroll) return;\n    return originalScrollTo.apply(window, arguments);\n  };\n\n  window.scrollBy = function () {\n    if (isSwitching \u0026\u0026 isMobile() \u0026\u0026 !allowManualScroll) return;\n    return originalScrollBy.apply(window, arguments);\n  };\n\n  Element.prototype.scrollIntoView = function () {\n    if (isSwitching \u0026\u0026 isMobile()) return;\n    return originalScrollIntoView.apply(this, arguments);\n  };\n\n  function getVariantRadios() {\n    return Array.from(document.querySelectorAll('variant-selects input[type=\"radio\"]'))\n      .filter(radio =\u003e values.includes(radio.value.trim()));\n  }\n\n  function hideNativeVariants() {\n    document.querySelectorAll('variant-selects').forEach(el =\u003e {\n      const hasMatch = Array.from(el.querySelectorAll('input[type=\"radio\"]'))\n        .some(r =\u003e values.includes(r.value.trim()));\n\n      if (hasMatch) el.classList.add('hlp-hidden-variant-selects');\n    });\n\n    document.querySelectorAll('.product-form__input').forEach(el =\u003e {\n      const hasMatch = Array.from(el.querySelectorAll('input[type=\"radio\"]'))\n        .some(r =\u003e values.includes(r.value.trim()));\n\n      if (hasMatch) el.classList.add('hlp-hidden-variant-selects');\n    });\n  }\n\n  function setActive(value) {\n    cards.forEach(card =\u003e {\n      const active = card.dataset.hlpOptionValue.trim() === value.trim();\n\n      card.classList.toggle('is-active', active);\n      card.setAttribute('aria-pressed', active ? 'true' : 'false');\n\n      const indicator = card.querySelector('.hlp-choice-indicator');\n      if (indicator) indicator.textContent = active ? 'Selected' : 'Select set';\n    });\n  }\n\n  function selectVariant(value) {\n    lockScroll();\n\n    const radios = getVariantRadios();\n    const target = radios.find(radio =\u003e radio.value.trim() === value.trim());\n\n    if (!target) {\n      console.warn('Variant not found:', value);\n      isSwitching = false;\n      return;\n    }\n\n    if (!target.checked) {\n      target.checked = true;\n      target.dispatchEvent(new Event('input', { bubbles: true }));\n      target.dispatchEvent(new Event('change', { bubbles: true }));\n\n      const varSelect = target.closest('variant-selects');\n      if (varSelect) varSelect.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n\n    setActive(value);\n    releaseLock();\n  }\n\n  cards.forEach(card =\u003e {\n    const value = card.dataset.hlpOptionValue.trim();\n\n    card.addEventListener('click', () =\u003e selectVariant(value));\n\n    card.addEventListener('keydown', e =\u003e {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        selectVariant(value);\n      }\n    });\n  });\n\n  document.addEventListener('change', e =\u003e {\n    if (e.target.matches('variant-selects input[type=\"radio\"]')) {\n      const value = e.target.value.trim();\n      if (values.includes(value)) setActive(value);\n    }\n  });\n\n  hideNativeVariants();\n\n  const observer = new MutationObserver(hideNativeVariants);\n  observer.observe(document.body, { childList: true, subtree: true });\n\n  const checked = getVariantRadios().find(radio =\u003e radio.checked);\n\n  if (checked) {\n    setActive(checked.value.trim());\n  } else {\n    selectVariant('4 in 1 Set');\n  }\n});\n\u003c\/script\u003e\n","brand":"Happy Little Paws","offers":[{"title":"4 in 1 Set","offer_id":57891124183427,"sku":null,"price":59.9,"currency_code":"EUR","in_stock":false},{"title":"3 in 1 Set","offer_id":57891124150659,"sku":null,"price":49.9,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0910\/1321\/8691\/files\/WenigerHaareimZuhause_direktanderQuelle_ddeb609b-8a9f-4c47-b1da-ea1a45acb89e.jpg?v=1777230200","url":"https:\/\/happylittlepaws.de\/en\/products\/pflege","provider":"Happy Little Paws","version":"1.0","type":"link"}