{"section_id":"shopify-section-wp-products-cards","data":" <section id=\"shopify-section-wp-products-cards\" class=\"section\">\n  <style>\n    #shopify-section-wp-products-cards .jdgm-prev-badge {\n      display: flex;\n      align-items: center;\n      color: black;\n    }\n    #shopify-section-wp-products-cards .jdgm-prev-badge__stars{\n      margin-right: 4px;\n    }\n    #shopify-section-wp-products-cards .jdgm-prev-badge__text{\n      color: #000;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 300;\n      line-height: 171.429%;\n    }\n    #shopify-section-wp-products-cards .jdgm-star {\n      line-height: normal;\n      display: inline-block;\n      vertical-align: middle;\n    }\n    #shopify-section-wp-products-cards .jdgm-star::before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      display: block;\n    }\n    #shopify-section-wp-products-cards .jdgm-star.jdgm--on::before {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00056 12.1735L3.29826 14.8056L4.34848 9.5201L0.39209 5.86136L5.74345 5.22687L8.00056 0.333496L10.2576 5.22687L15.609 5.86136L11.6526 9.5201L12.7028 14.8056L8.00056 12.1735Z' fill='%23EA6C7E'/%3E%3C/svg%3E%0A\");\n    }\n    #shopify-section-wp-products-cards .jdgm-star.jdgm--half::before {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00056 10.6455L10.8317 12.2302L10.1994 9.04796L12.5814 6.8451L9.3595 6.46306L8.00056 3.51684V10.6455ZM8.00056 12.1735L3.29826 14.8056L4.34848 9.5201L0.39209 5.86136L5.74345 5.22687L8.00056 0.333496L10.2576 5.22687L15.609 5.86136L11.6526 9.5201L12.7028 14.8056L8.00056 12.1735Z' fill='%23EA6C7E'/%3E%3C/svg%3E%0A\");\n    }\n    #shopify-section-wp-products-cards .jdgm-star.jdgm--off::before {\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea6c7e'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z'%3E%3C/path%3E%3C/svg%3E\");\n    }\n    #shopify-section-wp-products-cards .product-item__label-list{\n      position: absolute;\n      top: 8px;\n      left: 8px;\n      z-index: 2;\n    }\n    #shopify-section-wp-products-cards .badge--on-sale {\n      background-color: #00836c;\n      color: #fff;\n    }\n    #shopify-section-wp-products-cards .badge--sold-out{\n      background-color: #dc2626;\n      color: #fff;\n    }\n    #shopify-section-wp-products-cards .badge {\n      display: inline-block;\n      padding: 4px 8px;\n      color: #fff;\n      border-radius: 8px;\n      font-weight: 500;\n      font-size: 12px;\n      line-height: 1.33;\n      vertical-align: top;\n      width: -webkit-max-content;\n      width: -moz-max-content;\n      width: max-content;\n    }\n  </style>\n\n  \n    <style>\n      #shopify-section-wp-products-cards{\n        --margin-top: 0px;\n        --margin-bottom: 0px;\n        --padding-top: 0px;\n        --padding-bottom: 16px;\n        --padding-left: 16px;\n        --padding-right: 16px;\n        --height: 376px;\n\n        --padding-box-shadow: 14px;\n\n        max-width: calc(1270px + calc(var(--padding-box-shadow) * 2));\n        margin: var(--margin-top) auto var(--margin-bottom);\n        isolation: isolate;\n        font-family: 'Montserrat';\n      }\n      #shopify-section-wp-products-cards > *{\n        font-family: 'Montserrat' !important;\n      }\n      #shopify-subsection-wp-products-cards{\n        padding: var(--padding-box-shadow) 0px;\n        height: var(--height);\n      }\n      #shopify-subsection-wp-products-cards .product_card-info_wrapper{\n        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);\n      }\n      #shopify-subsection-wp-products-cards-navigation{\n        display: flex;\n        align-items: center;\n        padding: 1px 0px 0px;\n        justify-content: space-between;\n      }\n      #shopify-subsection-wp-products-cards-navigation h3{\n        margin: 0;\n        color: #000;\n        font-size: 24px;\n        font-style: normal;\n        font-weight: 500;\n        line-height: 133.333%;\n      }\n      @media all and (min-width: 700px){\n        #shopify-subsection-wp-products-cards{\n          padding: var(--padding-box-shadow);\n        }\n        #shopify-subsection-wp-products-cards-navigation{\n          padding: 1px var(--padding-box-shadow) 0px;\n        }\n      }\n      @media all and (min-width: 991px){\n        #shopify-section-wp-products-cards{\n          --margin-top: 0px;\n          --margin-bottom: 0px;\n          --padding-top: 0px;\n          --padding-bottom: 16px;\n          --padding-left: 16px;\n          --padding-right: 16px;\n          --height: 376px;\n        }\n      }\n\n      #shopify-section-wp-products-cards .swiper-navigation-buttons{\n        --swiper-navigation-size: 10px;\n        --swiper-theme-color: black;\n        width: 100px;\n        display: none;\n        justify-content: space-between;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      }\n      #shopify-section-wp-products-cards .swiper-button-prev,\n      #shopify-section-wp-products-cards .swiper-button-next{\n        position: relative;\n        border-radius: 4px;\n        border: 1px solid #D9D9D9;\n        padding: 8px;\n        margin: 0;\n        width: 16px;\n        height: 16px;\n      }\n    </style>\n    \n    <link href=\"//www.kinkly.com/cdn/shop/t/38/assets/swiper-bundle.min.css?v=137567747852890216361756729684\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />\n    \n    <div id=\"shopify-subsection-wp-products-cards-navigation\">\n      <h3></h3>\n      <div class=\"swiper-navigation-buttons\">\n        <div class=\"swiper-button-prev\"></div>\n        <div class=\"swiper-button-next\"></div>\n      </div>\n    </div>\n\n    <div id=\"shopify-subsection-wp-products-cards\" class=\"swiper\">\n      <style>\n        #shopify-block-wp-products-cards .swiper-slide{\n          display: grid;\n          aspect-ratio: 0.60;\n          grid-template-rows: 220px 1fr;\n          border-radius: 8px;\n          overflow: hidden;\n          cursor: pointer;\n          text-decoration: none;\n          min-height: var(--height);\n          transition: box-shadow 0.6s;\n          -webkit-transition: box-shadow 0.6s;\n        }\n        #shopify-block-wp-products-cards .swiper-slide:active{\n          box-shadow: 0px 0px var(--padding-box-shadow) 0px rgba(0, 0, 0, 0.25);\n          transition: box-shadow 0.3s;\n          -webkit-transition: box-shadow 0.3s;\n        }\n        #shopify-block-wp-products-cards .swiper-slide .product_card-image_wrapper--has_secondary .product_card-image--hover{\n          display: none;\n        }\n        #shopify-block-wp-products-cards .swiper-slide:active .product_card-image_wrapper--has_secondary .product_card-image--hover{\n          display: block;\n        }\n        #shopify-block-wp-products-cards .swiper-slide:active .product_card-image_wrapper--has_secondary .product_card-image:not(.product_card-image--hover){\n          display: none;\n        }\n        #shopify-block-wp-products-cards .swiper-slide .product_card-info_wrapper{\n          display: grid;\n          grid-template-rows: auto 1fr auto auto;\n        }\n        /* Picture styles */\n        #shopify-block-wp-products-cards .product_card-image{\n          width: 100%;\n          height: 220px;\n          object-fit: cover;\n          object-position: center;\n        }\n        #shopify-block-wp-products-cards .product_card-image--gif {\n          object-fit: contain;\n        }\n        #shopify-block-wp-products-cards .product_card-image_wrapper.product_card-image_wrapper--sold-out .product_card-image:not(.product_card-image--hover){\n          filter: grayscale(1);\n        }\n        /* Vendor styles */\n        #shopify-block-wp-products-cards .product_card-vendor{\n          --vendor-margin-top: 8px;\n          --vendor-margin-bottom: 4px;\n          --vendor-font-size: 12px;\n          --vendor-line-height: 133%;\n          color: #999999;\n          font-size: var(--vendor-font-size);\n          line-height: var(--vendor-line-height);\n          margin-top: var(--vendor-margin-top);\n          margin-bottom: var(--vendor-margin-bottom);\n          text-transform: uppercase;\n        }\n        /* Title styles */\n        #shopify-block-wp-products-cards .product_card-title{\n          --title-margin-top: 0px;\n          --title-margin-bottom: 8px;\n          --title-font-size: 16px;\n          --title-line-height: 150%;\n          --title-color: #000;\n          --title-color-hover: #ea6c7e;\n          display: -webkit-box;\n          -webkit-line-clamp: 2;\n          -webkit-box-orient: vertical;  \n          overflow: hidden;\n          height: fit-content;\n          margin-top: var(--title-margin-top);\n          margin-bottom: var(--title-margin-bottom);\n          font-size: var(--title-font-size);\n          line-height: var(--title-line-height);\n          color: var(--title-color);\n        }\n        #shopify-block-wp-products-cards .swiper-slide:hover .product_card-title{\n          color: var(--title-color-hover);\n          transition: color 0.3s;\n          -webkit-transition: color 0.3s;\n        }\n        /* Price styles */\n        #shopify-block-wp-products-cards .product_card-price{\n          --price-margin-top: 0px;\n          --price-margin-bottom: 0px;\n          --price-font-size: 20px;\n          --price-line-height: 140%;\n          --price-color: #000;\n          --price-color-when-compare: #00836c;\n          --compare-price-color: #999999;\n          display: block;\n          margin-top: var(--price-margin-top);\n          margin-bottom: var(--price-margin-bottom);\n          font-size: var(--price-font-size);\n          line-height: var(--price-line-height);\n          margin-top: var(--price-margin-top);\n          margin-bottom: var(--price-margin-bottom);\n        }\n        #shopify-block-wp-products-cards .product_card-price .price{\n          font-weight: 500;\n          color: var(--price-color);\n          font-size: var(--price-font-size);\n          line-height: var(--price-line-height);\n        }\n        #shopify-block-wp-products-cards .product_card-price .price--highlight{\n          margin: unset;\n          color: var(--price-color-when-compare);\n        }\n        #shopify-block-wp-products-cards .product_card-price .price--compare{\n          text-decoration: line-through;\n          text-decoration-color: unset;\n          -webkit-text-decoration-color: unset;\n          margin-right: 8px;\n          color: var(--compare-price-color);\n        }\n        @media all and (min-width: 499px){\n          #shopify-block-wp-products-cards .swiper-slide:hover{\n            box-shadow: 0px 0px var(--padding-box-shadow) 0px rgba(0, 0, 0, 0.25);\n            transition: box-shadow 0.3s;\n            -webkit-transition: box-shadow 0.3s;\n          }\n          #shopify-block-wp-products-cards .swiper-slide:hover .product_card-image_wrapper--has_secondary .product_card-image--hover{\n            display: block;\n          }\n          #shopify-block-wp-products-cards .swiper-slide:hover .product_card-image_wrapper--has_secondary .product_card-image:not(.product_card-image--hover){\n            display: none;\n          }\n          #shopify-section-wp-products-cards .swiper-navigation-buttons{\n            display: flex;\n          }\n        }\n      </style>\n\n      <div id=\"shopify-block-wp-products-cards\" class=\"swiper-wrapper\"></div>\n    </div>\n\n    <script>\n      (()=>{\n        const swiperJS = document.createElement(\"script\");\n        swiperJS.src = \"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\";\n        swiperJS.defer = true;\n\n        const swiperCSS = document.createElement(\"link\");\n        swiperCSS.href = \"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css\";\n        swiperCSS.rel = \"stylesheet\";\n        swiperCSS.type = \"text/css\";\n\n        document.body.appendChild(swiperCSS);\n        document.body.appendChild(swiperJS);\n        swiperJS.addEventListener(\"load\", function () {\n          const swiper = new Swiper('.swiper', {\n            loop: false,\n            grabCursor: true,\n            centerInsufficientSlides: true,\n            direction: 'horizontal',\n            spaceBetween: 14,\n            slidesPerView: 1.2,\n            navigation: {\n              nextEl: '.swiper-button-next',\n              prevEl: '.swiper-button-prev',\n            },\n            breakpoints: {\n              340: {\n                slidesPerView: 1.4,\n              },\n              500: {\n                slidesPerView: 2,\n              },\n              700: {\n                slidesPerView: 3,\n              },\n              991: {\n                slidesPerView: 4,\n              },\n              1100: {\n                slidesPerView: 5\n              }\n            }\n          });\n        }, { once: true });\n      })();\n    </script>\n  \n</section>\n\n","request_url":"https://www.kinkly.com/a/kinkly/wordpress?v=1781422172501&source_id=0","post_id":null}