{"id":7872,"date":"2026-10-09T14:37:40","date_gmt":"2026-10-09T06:37:40","guid":{"rendered":"https:\/\/www.ht-kitchenware.com\/tasty\/?page_id=7872"},"modified":"2026-10-09T14:38:35","modified_gmt":"2026-10-09T06:38:35","slug":"silicone-storage-bag","status":"publish","type":"page","link":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/silicone-storage-bag\/","title":{"rendered":"Silicone Storage Bag"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7872\" class=\"elementor elementor-7872\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23767bc e-flex e-con-boxed e-con e-parent\" data-id=\"23767bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a275a2 elementor-widget elementor-widget-spacer\" data-id=\"7a275a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-69d4122 e-con-full e-flex e-con e-parent\" data-id=\"69d4122\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2823aff elementor-widget elementor-widget-html\" data-id=\"2823aff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!--\r\n  COLOR OPTION GALLERY \u00b7 Elementor HTML widget\r\n  Paste the complete file into one HTML widget.\r\n\r\n  EDIT IMAGES: Four product views are embedded below. Every option has five\r\n  gallery slots: its product view in slot 1 and four empty scenes in slots 2\u20135.\r\n  Paste WordPress Media Library URLs into each option's scenes entries.\r\n  Empty slots stay visible but cannot be opened. Changing color resets to slot 1.\r\n\r\n  LABELS, MODEL NUMBERS AND PRODUCT COPY: Follow the supplied 1HT-ST-01M\r\n  English specification. No weight or test certification is asserted.\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 color 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 \/ 01<\/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 STORAGE BAG \u00b7 1HT-ST-01M<\/p>\r\n    <h2 id=\"htls-title\">One Bag.<br>Four Color Options.<\/h2>\r\n    <p class=\"htls-intro\">The same silicone storage bag is available in four vibrant colors. Select a color to see its product image.<\/p>\r\n    <div class=\"htls-specs\" aria-label=\"Shared product specifications\">\r\n      <div><span>MATERIAL<\/span><strong>Food-Grade Silicone<\/strong><\/div>\r\n      <div><span>SIZE<\/span><strong>H140 \u00d7 L190 \u00d7 W65 mm<\/strong><\/div>\r\n      <div><span>WEIGHT<\/span><strong>195 g<\/strong><\/div>\r\n      <div><span>VOLUME<\/span><strong>2300 ml<\/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>4 colors<\/span>\r\n    <\/div>\r\n    <div class=\"htls-options\" data-htls-options role=\"group\" aria-label=\"Choose a color\"><\/div>\r\n    <div class=\"htls-selected\" aria-live=\"polite\">\r\n      <span>SELECTED COLOR<\/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. The four product photos are already embedded.\r\n  \/\/ Each scenes array reserves slots 2, 3, 4 and 5 for that color option.\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.\r\n  \/\/ ================================================================\r\n  const LID_OPTIONS = [\r\n    {\r\n      name: \"Red\", model: \"1HT-ST-01M-R\",\r\n      hero: \"\",\r\n      detail: \"Silicone Storage Bag in Red. Food-grade silicone, BPA-free, safe for food contact.\",\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: \"Blue\", model: \"1HT-ST-01M-B\",\r\n      hero: \"\",\r\n      detail: \"Silicone Storage Bag in Blue. Food-grade silicone, BPA-free, safe for food contact.\",\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: \"Yellow\", model: \"1HT-ST-01M-Y\",\r\n      hero: \"\",\r\n      detail: \"Silicone Storage Bag in Yellow. Food-grade silicone, BPA-free, safe for food contact.\",\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: \"White\", model: \"1HT-ST-01M-W\",\r\n      hero: \"\",\r\n      detail: \"Silicone Storage Bag in White. Food-grade silicone, BPA-free, safe for food contact.\",\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); \/\/ Escape Elementor container clipping.\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); \/\/ The reference page returns to the first image after a choice.\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      button.append(createImage(option.hero, \"\"), copy, check);\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-7872","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7872","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=7872"}],"version-history":[{"count":7,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions"}],"predecessor-version":[{"id":7879,"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/pages\/7872\/revisions\/7879"}],"wp:attachment":[{"href":"https:\/\/www.ht-kitchenware.com\/tasty\/index.php\/wp-json\/wp\/v2\/media?parent=7872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}