{"id":7887,"date":"2026-10-09T14:55:07","date_gmt":"2026-10-09T06:55:07","guid":{"rendered":"https:\/\/www.ht-kitchenware.com\/tasty\/?page_id=7887"},"modified":"2026-10-09T15:03:14","modified_gmt":"2026-10-09T07:03:14","slug":"silicone-magnetic-oil-splash-guard","status":"publish","type":"page","link":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/silicone-magnetic-oil-splash-guard\/","title":{"rendered":"Silicone Magnetic Oil Splash Guard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7887\" class=\"elementor elementor-7887\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf2721b e-con-full e-flex e-con e-parent\" data-id=\"bf2721b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51ff533 elementor-widget elementor-widget-html\" data-id=\"51ff533\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  COLOR OPTION GALLERY \u00b7 Elementor HTML widget\r\n  Paste the complete file into one HTML widget.\r\n\r\n  PRODUCT: Silicone Splatter Guard \u00b7 1HT-SG-01S\r\n  EDIT IMAGES: Two color variants defined below. Every option has five\r\n  gallery slots: product view in slot 1, four empty scenes in slots 2\u20135.\r\n  Paste WordPress Media Library URLs into hero and scenes entries.\r\n  Empty slots stay visible but cannot be opened. Changing color resets to slot 1.\r\n\r\n  This is a visual B2B selector, independent of WooCommerce variations.\r\n-->\r\n<section class=\"ht-lid-selector\" data-ht-lid-selector aria-labelledby=\"htls-title\">\r\n  <div class=\"htls-gallery\" aria-label=\"Selected product image gallery\">\r\n    <div class=\"htls-thumbs\" data-htls-thumbs role=\"group\" aria-label=\"Product and lifestyle images\"><\/div>\r\n    <div class=\"htls-stage\">\r\n      <button class=\"htls-main-open\" data-htls-open type=\"button\" aria-label=\"Enlarge product image\">\r\n        <img class=\"htls-main-image\" data-htls-main alt=\"\" decoding=\"async\">\r\n        <span class=\"htls-zoom-cue\" aria-hidden=\"true\">\u2197 &nbsp; Enlarge<\/span>\r\n      <\/button>\r\n      <div class=\"htls-gallery-footer\">\r\n        <span data-htls-counter>01 \/ 05<\/span>\r\n        <div class=\"htls-arrows\">\r\n          <button type=\"button\" data-htls-prev aria-label=\"Previous image\">&#8592;<\/button>\r\n          <button type=\"button\" data-htls-next aria-label=\"Next image\">&#8594;<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"htls-details\">\r\n    <p class=\"htls-eyebrow\">SILICONE SPLATTER GUARD \u00b7 1HT-SG-01S<\/p>\r\n    <h2 id=\"htls-title\">One Guard.<br>Two Color Options.<\/h2>\r\n    <p class=\"htls-intro\">Food-grade silicone splatter guard for stovetop cooking. Heat-resistant, flexible, and easy to clean. Select a color to see its product image and variant details.<\/p>\r\n    <div class=\"htls-specs\" aria-label=\"Shared product specifications\">\r\n      <div><span>MATERIAL<\/span><strong>Food-Grade Silicone + Stainless Steel Core<\/strong><\/div>\r\n      <div><span>DIMENSIONS<\/span><strong>\u00d833 cm \u00d7 H1.5 cm (with handle)<\/strong><\/div>\r\n      <div><span>WEIGHT<\/span><strong>185 g<\/strong><\/div>\r\n      <div><span>HEAT RESISTANCE<\/span><strong>Up to 230\u00b0C \/ 446\u00b0F<\/strong><\/div>\r\n    <\/div>\r\n    <p class=\"htls-lid-detail\" data-htls-lid-detail aria-live=\"polite\"><\/p>\r\n    <div class=\"htls-group-heading\">\r\n      <strong>Choose a Color<\/strong>\r\n      <span>2 options<\/span>\r\n    <\/div>\r\n    <div class=\"htls-options\" data-htls-options role=\"group\" aria-label=\"Choose a color variant\"><\/div>\r\n    <div class=\"htls-selected\" aria-live=\"polite\">\r\n      <span>SELECTED VARIANT<\/span>\r\n      <strong data-htls-selected><\/strong>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"htls-lightbox\" data-htls-lightbox hidden role=\"dialog\" aria-modal=\"true\" aria-label=\"Product image preview\">\r\n    <button class=\"htls-lightbox-close\" data-htls-close type=\"button\" aria-label=\"Close image preview\">\u00d7<\/button>\r\n    <button class=\"htls-lightbox-prev\" data-htls-lightbox-prev type=\"button\" aria-label=\"Previous image\">\u2190<\/button>\r\n    <img data-htls-lightbox-image alt=\"\">\r\n    <button class=\"htls-lightbox-next\" data-htls-lightbox-next type=\"button\" aria-label=\"Next image\">\u2192<\/button>\r\n    <span class=\"htls-lightbox-counter\" data-htls-lightbox-counter><\/span>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .ht-lid-selector {\r\n    --htls-ink: #1e292c;\r\n    --htls-muted: #687577;\r\n    --htls-line: #dfe5e3;\r\n    --htls-soft: #f5f7f6;\r\n    --htls-active: #edf4f8;\r\n    --htls-accent: #285e80;\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);\r\n    gap: clamp(28px, 4.6vw, 72px);\r\n    align-items: start;\r\n    width: min(100%, 1380px);\r\n    margin: 0 auto;\r\n    padding: clamp(22px, 3vw, 48px);\r\n    color: var(--htls-ink);\r\n    background: #fff;\r\n    font-family: inherit;\r\n  }\r\n  .ht-lid-selector, .ht-lid-selector *, .ht-lid-selector *::before,\r\n  .ht-lid-selector *::after { box-sizing: border-box; }\r\n  .htls-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; min-width: 0; }\r\n  .htls-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; scrollbar-width: thin; }\r\n  .htls-thumb {\r\n    width: 76px; height: 76px; flex: 0 0 76px; border: 1px solid var(--htls-line) !important;\r\n    border-radius: 8px !important; padding: 0 !important; background: #fff !important;\r\n    box-shadow: none !important; cursor: pointer; overflow: hidden;\r\n  }\r\n  .htls-thumb[aria-pressed=\"true\"] { border: 2px solid var(--htls-accent) !important; }\r\n  .htls-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }\r\n  .htls-thumb--empty {\r\n    display: grid; place-items: center; border-style: dashed !important;\r\n    background: #f7f9fa !important; color: #8d9ba1 !important;\r\n    font-size: 13px; font-weight: 600; letter-spacing: .04em;\r\n  }\r\n  .htls-thumb--empty:disabled { opacity: 1; cursor: default; }\r\n  .htls-stage {\r\n    position: relative; display: grid; place-items: center; min-width: 0;\r\n    aspect-ratio: 1 \/ 1; background: var(--htls-soft); border-radius: 12px; overflow: hidden;\r\n  }\r\n  .htls-main-open {\r\n    position: absolute; inset: 0; display: block; width: 100%; height: 100%;\r\n    border: 0 !important; border-radius: 0 !important; padding: 0 !important;\r\n    background: transparent !important; box-shadow: none !important; cursor: zoom-in;\r\n  }\r\n  .htls-main-image { display: block; width: 100%; height: 100%; object-fit: contain; }\r\n  .htls-zoom-cue {\r\n    position: absolute; top: 15px; right: 15px; padding: 7px 10px; border-radius: 5px;\r\n    background: rgba(255,255,255,.9); color: var(--htls-ink);\r\n    font-size: 11px; font-weight: 600; line-height: 1;\r\n  }\r\n  .htls-gallery-footer {\r\n    position: absolute; z-index: 1; right: 16px; bottom: 15px; left: 16px;\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    color: var(--htls-ink); font-size: 12px; font-weight: 600; letter-spacing: .06em;\r\n    pointer-events: none;\r\n  }\r\n  .htls-gallery-footer > span { padding: 6px 9px; border-radius: 5px; background: rgba(255,255,255,.88); }\r\n  .htls-arrows { display: flex; gap: 6px; pointer-events: auto; }\r\n  .htls-arrows button {\r\n    display: grid; place-items: center; width: 35px; height: 35px;\r\n    border: 1px solid var(--htls-line) !important; border-radius: 50% !important;\r\n    padding: 0 !important; background: rgba(255,255,255,.92) !important;\r\n    color: var(--htls-ink) !important; box-shadow: none !important;\r\n    font-size: 18px; line-height: 1; cursor: pointer;\r\n  }\r\n  .htls-arrows button:disabled { opacity: .4; cursor: default; }\r\n  .htls-details { padding-top: clamp(4px, 1.3vw, 18px); }\r\n  .htls-eyebrow { margin: 0 0 14px !important; color: var(--htls-accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; }\r\n  .htls-details h2 { margin: 0 0 18px !important; color: var(--htls-ink); font-size: clamp(34px, 3.5vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.04em; }\r\n  .htls-intro { max-width: 54ch; margin: 0 0 18px !important; color: var(--htls-muted); font-size: 14px; line-height: 1.55; }\r\n  .htls-specs {\r\n    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;\r\n    margin: 0 0 14px; border: 1px solid var(--htls-line); border-radius: 9px; overflow: hidden;\r\n  }\r\n  .htls-specs > div { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px 13px; border-bottom: 1px solid var(--htls-line); }\r\n  .htls-specs > div:nth-child(odd) { border-right: 1px solid var(--htls-line); }\r\n  .htls-specs > div:nth-last-child(-n+2) { border-bottom: 0; }\r\n  .htls-specs span { color: var(--htls-accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; }\r\n  .htls-specs strong { color: var(--htls-ink); font-size: 12px; line-height: 1.42; font-weight: 500; overflow-wrap: anywhere; }\r\n  .htls-lid-detail { margin: 0 0 23px !important; color: var(--htls-muted); font-size: 12px; line-height: 1.5; }\r\n  .htls-lid-detail strong { color: var(--htls-ink); font-weight: 600; }\r\n  .htls-group-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 13px; }\r\n  .htls-group-heading strong { font-size: 16px; }\r\n  .htls-group-heading span { color: var(--htls-muted); font-size: 13px; }\r\n  .htls-options { display: grid; gap: 10px; }\r\n  .htls-option {\r\n    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 82px;\r\n    border: 1px solid var(--htls-line) !important; border-radius: 9px !important;\r\n    padding: 9px 15px 9px 9px !important; background: #fff !important;\r\n    color: var(--htls-ink) !important; box-shadow: none !important;\r\n    font: inherit; text-align: left; text-transform: none !important; cursor: pointer;\r\n    transition: border-color .18s ease, background .18s ease;\r\n  }\r\n  .htls-option:hover { border-color: #a4bbca !important; }\r\n  .htls-option[aria-pressed=\"true\"] { border-color: var(--htls-accent) !important; background: var(--htls-active) !important; }\r\n  .htls-option img { display: block; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 5px; object-fit: contain; background: #fff; }\r\n  .htls-option-copy { display: grid; gap: 3px; min-width: 0; }\r\n  .htls-option-copy strong { color: var(--htls-ink); font-size: 15px; line-height: 1.25; font-weight: 600; }\r\n  .htls-option-copy small { color: var(--htls-muted); font-size: 12px; line-height: 1.4; }\r\n  .htls-check { margin-left: auto; display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border: 1px solid #aebbb7; border-radius: 50%; color: transparent; font-size: 14px; }\r\n  .htls-option[aria-pressed=\"true\"] .htls-check { border-color: var(--htls-accent); background: var(--htls-accent); color: #fff; }\r\n  .htls-selected { display: grid; gap: 6px; margin-top: 22px; padding: 15px 17px; border-left: 3px solid var(--htls-accent); background: var(--htls-soft); }\r\n  .htls-selected span { color: var(--htls-muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; }\r\n  .htls-selected strong { font-size: 14px; line-height: 1.35; font-weight: 600; }\r\n  .ht-lid-selector button:focus-visible { outline: 3px solid #7ea6bf; outline-offset: 2px; }\r\n  .htls-lightbox[hidden] { display: none !important; }\r\n  .htls-lightbox {\r\n    position: fixed; z-index: 2147483000; inset: 0; display: flex; align-items: center;\r\n    justify-content: center; padding: 42px; background: rgba(13,20,27,.91);\r\n  }\r\n  .htls-lightbox img { display: block; max-width: min(88vw, 1100px); max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 5px; background: #fff; }\r\n  .htls-lightbox button {\r\n    position: absolute; display: grid; place-items: center; width: 44px; height: 44px;\r\n    border: 1px solid rgba(255,255,255,.28) !important; border-radius: 50% !important;\r\n    padding: 0 !important; background: rgba(255,255,255,.14) !important;\r\n    box-shadow: none !important; color: #fff !important; font-size: 25px; cursor: pointer;\r\n  }\r\n  .htls-lightbox button:disabled { opacity: .32; cursor: default; }\r\n  .htls-lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }\r\n  .htls-lightbox-close { top: 17px; right: 17px; }\r\n  .htls-lightbox-prev { top: calc(50% - 22px); left: 17px; }\r\n  .htls-lightbox-next { top: calc(50% - 22px); right: 17px; }\r\n  .htls-lightbox-counter { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .08em; }\r\n  @media (max-width: 1020px) {\r\n    .ht-lid-selector { grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr); gap: 26px; padding: 24px; }\r\n    .htls-gallery { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; }\r\n    .htls-thumb { width: 58px; height: 58px; flex-basis: 58px; }\r\n  }\r\n  @media (max-width: 767px) {\r\n    .ht-lid-selector { display: flex; flex-direction: column; gap: 28px; padding: 18px 16px 38px; }\r\n    .htls-gallery { display: flex; flex-direction: column; width: 100%; gap: 10px; }\r\n    .htls-stage { order: 1; width: 100%; }\r\n    .htls-thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }\r\n    .htls-thumb { width: 64px; height: 64px; flex-basis: 64px; }\r\n    .htls-details { width: 100%; padding-top: 0; }\r\n    .htls-details h2 { font-size: clamp(33px, 9vw, 45px); }\r\n    .htls-intro { font-size: 14px; }\r\n    .htls-specs > div { padding: 11px; }\r\n    .htls-specs strong { font-size: 11px; }\r\n    .htls-option { min-height: 76px; }\r\n    .htls-option img { width: 56px; height: 56px; flex-basis: 56px; }\r\n    .htls-lightbox { padding: 40px 16px; }\r\n    .htls-lightbox img { max-width: 100%; max-height: 78vh; }\r\n    .htls-lightbox-prev { left: 8px; }\r\n    .htls-lightbox-next { right: 8px; }\r\n  }\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .htls-option { transition: none; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  \/\/ ================================================================\r\n  \/\/ EDIT IMAGES HERE. All hero and scene images are currently empty.\r\n  \/\/ To add a photo: replace src: \"\" with its WordPress Media Library URL,\r\n  \/\/ write a descriptive alt, and choose fit: \"cover\" or \"contain\".\r\n  \/\/ Do not change the number\/order of the four scene entries per option.\r\n  \/\/ ================================================================\r\n  const LID_OPTIONS = [\r\n    {\r\n      name: \"Grey\", model: \"1HT-SG-01S-GY\",\r\n      hero: \"\", heroAlt: \"Grey silicone splatter guard\",\r\n      detail: \"Neutral grey food-grade silicone splatter guard with stainless steel core. Fits most standard pans and skillets up to \u00d833 cm. Heat-resistant up to 230\u00b0C, dishwasher safe, and folds flat for compact storage.\",\r\n      scenes: [\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" }\r\n      ]\r\n    },\r\n    {\r\n      name: \"Red\", model: \"1HT-SG-01S-RD\",\r\n      hero: \"\", heroAlt: \"Red silicone splatter guard\",\r\n      detail: \"Vibrant red food-grade silicone splatter guard with stainless steel core. Adds a pop of color to your kitchen while protecting countertops from oil splatter. Heat-resistant up to 230\u00b0C, dishwasher safe, and folds flat for compact storage.\",\r\n      scenes: [\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" },\r\n        { src: \"\", alt: \"\", fit: \"cover\" }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  function init(root) {\r\n    if (root.dataset.htLidReady === \"true\") return;\r\n    root.dataset.htLidReady = \"true\";\r\n    const thumbs = root.querySelector(\"[data-htls-thumbs]\");\r\n    const choices = root.querySelector(\"[data-htls-options]\");\r\n    const main = root.querySelector(\"[data-htls-main]\");\r\n    const mainOpen = root.querySelector(\"[data-htls-open]\");\r\n    const counter = root.querySelector(\"[data-htls-counter]\");\r\n    const selectedLabel = root.querySelector(\"[data-htls-selected]\");\r\n    const lidDetail = root.querySelector(\"[data-htls-lid-detail]\");\r\n    const prev = root.querySelector(\"[data-htls-prev]\");\r\n    const next = root.querySelector(\"[data-htls-next]\");\r\n    const lightbox = root.querySelector(\"[data-htls-lightbox]\");\r\n    const lightboxImage = lightbox.querySelector(\"[data-htls-lightbox-image]\");\r\n    const lightboxCounter = lightbox.querySelector(\"[data-htls-lightbox-counter]\");\r\n    const lightboxClose = lightbox.querySelector(\"[data-htls-close]\");\r\n    const lightboxPrev = lightbox.querySelector(\"[data-htls-lightbox-prev]\");\r\n    const lightboxNext = lightbox.querySelector(\"[data-htls-lightbox-next]\");\r\n    let selectedPhoto = 0;\r\n    let gallery = [];\r\n    let oldBodyOverflow = \"\";\r\n    let previousFocus = null;\r\n    const choiceButtons = [];\r\n    document.body.append(lightbox);\r\n\r\n    function validPhoto(photo) {\r\n      return Boolean(photo && typeof photo.src === \"string\" && photo.src.trim());\r\n    }\r\n    function createImage(src, alt) {\r\n      const img = document.createElement(\"img\");\r\n      img.src = src;\r\n      img.alt = alt;\r\n      img.loading = \"lazy\";\r\n      return img;\r\n    }\r\n    function availableIndices() {\r\n      return gallery.map((photo, i) => validPhoto(photo) ? i : -1).filter(i => i !== -1);\r\n    }\r\n    function syncLightbox() {\r\n      if (lightbox.hidden) return;\r\n      const photo = gallery[selectedPhoto];\r\n      lightboxImage.src = photo.src;\r\n      lightboxImage.alt = photo.alt || \"Product photo\";\r\n      lightboxImage.style.objectFit = photo.fit === \"cover\" ? \"cover\" : \"contain\";\r\n      lightboxCounter.textContent = String(selectedPhoto + 1).padStart(2, \"0\") + \" \/ 05\";\r\n      const oneImage = availableIndices().length < 2;\r\n      lightboxPrev.disabled = oneImage;\r\n      lightboxNext.disabled = oneImage;\r\n    }\r\n    function showPhoto(index) {\r\n      if (!validPhoto(gallery[index])) return;\r\n      selectedPhoto = index;\r\n      const photo = gallery[selectedPhoto];\r\n      main.src = photo.src;\r\n      main.alt = photo.alt;\r\n      main.style.objectFit = photo.fit === \"cover\" ? \"cover\" : \"contain\";\r\n      counter.textContent = String(selectedPhoto + 1).padStart(2, \"0\") + \" \/ 05\";\r\n      Array.from(thumbs.children).forEach((button, i) => {\r\n        button.setAttribute(\"aria-pressed\", String(i === selectedPhoto));\r\n      });\r\n      const oneImage = availableIndices().length < 2;\r\n      prev.disabled = oneImage;\r\n      next.disabled = oneImage;\r\n      syncLightbox();\r\n    }\r\n    function stepPhoto(direction) {\r\n      const indices = availableIndices();\r\n      if (indices.length < 2) return;\r\n      const at = indices.indexOf(selectedPhoto);\r\n      showPhoto(indices[(at + direction + indices.length) % indices.length]);\r\n    }\r\n    function onLightboxKeydown(event) {\r\n      if (event.key === \"Escape\") closeLightbox();\r\n      if (event.key === \"ArrowLeft\") stepPhoto(-1);\r\n      if (event.key === \"ArrowRight\") stepPhoto(1);\r\n      if (event.key === \"Tab\") {\r\n        const focusable = [lightboxClose, lightboxPrev, lightboxNext].filter(button => !button.disabled);\r\n        const first = focusable[0];\r\n        const last = focusable[focusable.length - 1];\r\n        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }\r\n        else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }\r\n      }\r\n    }\r\n    function openLightbox() {\r\n      previousFocus = document.activeElement;\r\n      oldBodyOverflow = document.body.style.overflow;\r\n      lightbox.hidden = false;\r\n      document.body.style.overflow = \"hidden\";\r\n      syncLightbox();\r\n      lightboxClose.focus();\r\n      document.addEventListener(\"keydown\", onLightboxKeydown);\r\n    }\r\n    function closeLightbox() {\r\n      lightbox.hidden = true;\r\n      document.body.style.overflow = oldBodyOverflow;\r\n      document.removeEventListener(\"keydown\", onLightboxKeydown);\r\n      if (previousFocus && typeof previousFocus.focus === \"function\") previousFocus.focus();\r\n    }\r\n    function chooseOption(index) {\r\n      const option = LID_OPTIONS[index];\r\n      gallery = [{ src: option.hero, alt: option.heroAlt, fit: \"contain\" }, ...option.scenes.slice(0, 4)];\r\n      while (gallery.length < 5) gallery.push({ src: \"\", alt: \"\", fit: \"cover\" });\r\n      selectedLabel.textContent = option.name;\r\n      lidDetail.textContent = option.detail;\r\n      choiceButtons.forEach((button, i) => button.setAttribute(\"aria-pressed\", String(i === index)));\r\n      thumbs.replaceChildren();\r\n      gallery.forEach((photo, i) => {\r\n        const button = document.createElement(\"button\");\r\n        button.type = \"button\";\r\n        button.className = \"htls-thumb\";\r\n        if (validPhoto(photo)) {\r\n          button.setAttribute(\"aria-label\", \"View image \" + (i + 1) + \" for \" + option.name);\r\n          button.append(createImage(photo.src, \"\"));\r\n          button.addEventListener(\"click\", () => showPhoto(i));\r\n        } else {\r\n          button.classList.add(\"htls-thumb--empty\");\r\n          button.disabled = true;\r\n          button.setAttribute(\"aria-label\", \"Image slot \" + (i + 1) + \" reserved\");\r\n          button.textContent = String(i + 1).padStart(2, \"0\");\r\n        }\r\n        thumbs.append(button);\r\n      });\r\n      showPhoto(0);\r\n      root.dispatchEvent(new CustomEvent(\"ht-lid-change\", { detail: { index, name: option.name, model: option.model }, bubbles: true }));\r\n    }\r\n\r\n    LID_OPTIONS.forEach((option, i) => {\r\n      const button = document.createElement(\"button\");\r\n      button.type = \"button\";\r\n      button.className = \"htls-option\";\r\n      button.setAttribute(\"aria-label\", \"Select \" + option.name);\r\n      const copy = document.createElement(\"span\");\r\n      copy.className = \"htls-option-copy\";\r\n      const title = document.createElement(\"strong\");\r\n      title.textContent = option.name;\r\n      const note = document.createElement(\"small\");\r\n      note.textContent = option.model;\r\n      const check = document.createElement(\"span\");\r\n      check.className = \"htls-check\";\r\n      check.setAttribute(\"aria-hidden\", \"true\");\r\n      check.textContent = \"\u2713\";\r\n      copy.append(title, note);\r\n      if (option.hero) {\r\n        button.append(createImage(option.hero, \"\"), copy, check);\r\n      } else {\r\n        const swatch = document.createElement(\"span\");\r\n        swatch.style.cssText = \"display:block;width:62px;height:62px;flex:0 0 62px;border-radius:5px;background:\" +\r\n          (option.name === \"Grey\" ? \"#8a8d90\" : \"#c0392b\") + \";\";\r\n        button.append(swatch, copy, check);\r\n      }\r\n      button.addEventListener(\"click\", () => chooseOption(i));\r\n      choices.append(button);\r\n      choiceButtons.push(button);\r\n    });\r\n    prev.addEventListener(\"click\", () => stepPhoto(-1));\r\n    next.addEventListener(\"click\", () => stepPhoto(1));\r\n    mainOpen.addEventListener(\"click\", openLightbox);\r\n    lightboxClose.addEventListener(\"click\", closeLightbox);\r\n    lightboxPrev.addEventListener(\"click\", () => stepPhoto(-1));\r\n    lightboxNext.addEventListener(\"click\", () => stepPhoto(1));\r\n    lightbox.addEventListener(\"click\", event => { if (event.target === lightbox) closeLightbox(); });\r\n    chooseOption(0);\r\n  }\r\n\r\n  document.querySelectorAll(\"[data-ht-lid-selector]\").forEach(init);\r\n  if (window.jQuery) {\r\n    window.jQuery(window).on(\"elementor\/frontend\/init\", () => {\r\n      document.querySelectorAll(\"[data-ht-lid-selector]\").forEach(init);\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2197 &nbsp; Enlarge 01  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7887","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/comments?post=7887"}],"version-history":[{"count":4,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7887\/revisions"}],"predecessor-version":[{"id":7892,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7887\/revisions\/7892"}],"wp:attachment":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/media?parent=7887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}