{"id":124,"date":"2026-05-15T15:33:50","date_gmt":"2026-05-15T15:33:50","guid":{"rendered":"https:\/\/hidrodoko.com\/?page_id=124"},"modified":"2026-06-29T13:38:14","modified_gmt":"2026-06-29T13:38:14","slug":"a-group","status":"publish","type":"page","link":"https:\/\/hidrodoko.com\/en\/","title":{"rendered":"Pjes\u00eb e A Group"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"124\" class=\"elementor elementor-124\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b6a1d6 e-con-full e-flex e-con e-parent\" data-id=\"9b6a1d6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-200c157 elementor-widget elementor-widget-html\" data-id=\"200c157\" data-element_type=\"widget\" data-e-type=\"widget\" data-no-translation=\"\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.elementor-element-200c157{display:none !important}<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33f10cd e-con-full e-flex e-con e-parent\" data-id=\"33f10cd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed31fa6 elementor-widget elementor-widget-html\" data-id=\"ed31fa6\" data-element_type=\"widget\" data-e-type=\"widget\" data-no-translation=\"\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n<title>Hidrodoko \u00b7 2026 Collection \u00b7 Preview<\/title>\r\n<style>body{margin:0;padding:0;background:#faf4e8}<\/style>\r\n<\/head>\r\n<body>\r\n<!-- ============================================================\r\n     HIDRODOKO \u00b7 2026 Collection \u2014 Snippet for Elementor\r\n     No <html>\/<head>\/<body> wrapper. All CSS scoped to #hidrodoko-paradise.\r\n     ============================================================ -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div id=\"hidrodoko-paradise\" data-hd-root>\r\n\r\n  <div class=\"hd-loader\" data-hd-loader>\r\n    <div class=\"hd-loader-inner\">\r\n      <img class=\"hd-loader-logo\" data-hd-logo-img alt=\"A Group H.M.D\" \/ loading=\"lazy\" decoding=\"async\">\r\n      <div class=\"hd-loader-tag\">2026 COLLECTION \u00b7 DIGITAL ATELIER<\/div>\r\n      <div class=\"hd-loader-bar\"><span><\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ======= DESKTOP \/ TABLET 3D STAGE ======= -->\r\n  <div class=\"hd-stage\" data-hd-stage><\/div>\r\n  <div class=\"hd-vignette\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"hd-cursor\" data-hd-cursor><\/div>\r\n\r\n  <div class=\"hd-ui\" data-hd-ui>\r\n\r\n    <div class=\"hd-hero\">\r\n      <div class=\"hd-hero-eyebrow\"><span><\/span>2026 Collection<\/div>\r\n      <h1 class=\"hd-hero-headline\">\r\n        Your bathroom,<br\/>\r\n        <em>completed.<\/em>\r\n      <\/h1>\r\n      <p class=\"hd-hero-sub\">\r\n        From solar energy to the smallest details \u2014\r\n        here are the products that transform every modern bathroom.\r\n      <\/p>\r\n      <a href=\"https:\/\/hidrodoko.com\/shop\/\" class=\"hd-cta\" data-hd-cta>\r\n        <span>Explore the collection<\/span>\r\n        <span class=\"hd-arrow\"><\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"hd-counter\" data-hd-counter>\r\n      <div class=\"hd-counter-num\" data-hd-counter-num>00<\/div>\r\n      <div class=\"hd-counter-label\" data-hd-counter-label><\/div>\r\n    <\/div>\r\n\r\n    <nav class=\"hd-index\" data-hd-index aria-label=\"Index\"><\/nav>\r\n\r\n    <article class=\"hd-detail\" data-hd-detail aria-hidden=\"true\">\r\n      <button type=\"button\" class=\"hd-detail-close\" data-hd-d-close aria-label=\"Close\">\u00d7<\/button>\r\n      <div class=\"hd-detail-inner\">\r\n        <div class=\"hd-detail-cat\" data-hd-d-cat><\/div>\r\n        <h2 class=\"hd-detail-name\" data-hd-d-name><\/h2>\r\n        <div class=\"hd-detail-model\" data-hd-d-model><\/div>\r\n        <p class=\"hd-detail-desc\" data-hd-d-desc><\/p>\r\n        <dl class=\"hd-detail-features\" data-hd-d-features><\/dl>\r\n        <div class=\"hd-detail-actions\">\r\n          <a href=\"https:\/\/hidrodoko.com\/product-category\/panele-diellore\/\" class=\"hd-detail-cta\">View category<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <aside class=\"hd-quote\" data-hd-quote>\r\n      <p>\"The modern bathroom begins with energy. From there, everything else follows naturally.\"<\/p>\r\n      <span>A GROUP H.M.D \u00b7 2026<\/span>\r\n    <\/aside>\r\n\r\n    <div class=\"hd-hints\">\r\n      <span><kbd>MOVE<\/kbd> Look around<\/span>\r\n      <span><kbd>DRAG<\/kbd> Rotate the showroom<\/span>\r\n      <span><kbd>CLICK<\/kbd> Open product<\/span>\r\n      <span><kbd>ALT + SCROLL<\/kbd> 3D zoom<\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ======= TABLET STRIP (additional products below 3D) ======= -->\r\n  <div class=\"hd-strip\" data-hd-strip>\r\n    <div class=\"hd-strip-header\">\r\n      <div class=\"hd-strip-title\">More from the collection<\/div>\r\n      <div class=\"hd-strip-hint\">\u2190 Swipe \u2192<\/div>\r\n    <\/div>\r\n    <div class=\"hd-strip-scroll\" data-hd-strip-scroll>\r\n      <!-- product cards populated by JS -->\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ======= MOBILE STACK (vertical product list, replaces 3D) ======= -->\r\n  <div class=\"hd-stack\" data-hd-stack>\r\n    <div class=\"hd-stack-intro\">\r\n      <div class=\"hd-stack-eyebrow\">2026 Collection<\/div>\r\n      <h2 class=\"hd-stack-headline\">Your bathroom, <em>reimagined.<\/em><\/h2>\r\n      <p class=\"hd-stack-sub\">\r\n        From solar energy to the smallest details \u2014\r\n        here are the products that transform every modern bathroom.\r\n      <\/p>\r\n    <\/div>\r\n    <div class=\"hd-stack-list\" data-hd-stack-list>\r\n      <!-- populated by JS, hero card first -->\r\n    <\/div>\r\n    <div class=\"hd-stack-foot\">A GROUP H.M.D \u00b7 2026 COLLECTION<\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* ============================================================\r\n   ALL STYLES SCOPED TO #hidrodoko-paradise\r\n   ============================================================ *\/\r\n#hidrodoko-paradise, #hidrodoko-paradise *,\r\n#hidrodoko-paradise *::before, #hidrodoko-paradise *::after {\r\n  margin: 0; padding: 0; box-sizing: border-box;\r\n}\r\n#hidrodoko-paradise {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 100vh;\r\n  overflow: hidden;\r\n  background:\r\n    radial-gradient(ellipse at 50% 16%, rgba(65, 103, 132, 0.62) 0%, transparent 48%),\r\n    radial-gradient(ellipse at 50% 86%, rgba(200, 106, 31, 0.18) 0%, transparent 58%),\r\n    linear-gradient(180deg,\r\n      #07111d 0%,\r\n      #0E2A47 42%,\r\n      #123b5d 72%,\r\n      #050b12 100%);\r\n  font-family: 'Inter', system-ui, sans-serif;\r\n  color: #fff;\r\n  cursor: none;\r\n  isolation: isolate;\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n\r\n  --hd-navy: #0E2A47;\r\n  --hd-copper: #C86A1F;\r\n  --hd-copper-light: #e09356;\r\n  --hd-cream: #f4e9d4;\r\n  --hd-bone: #faf4e8;\r\n  --hd-deep: #ffffff;\r\n  --hd-line: rgba(255, 255, 255, 0.24);\r\n  --hd-faint: rgba(255, 255, 255, 0.68);\r\n  --hd-glass: rgba(7, 17, 29, 0.76);\r\n}\r\n\r\n#hidrodoko-paradise .hd-stage {\r\n  position: absolute; inset: 0; z-index: 1;\r\n}\r\n#hidrodoko-paradise .hd-stage canvas {\r\n  display: block;\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n}\r\n#hidrodoko-paradise .hd-vignette {\r\n  position: absolute; inset: 0; z-index: 3; pointer-events: none;\r\n  background: radial-gradient(ellipse at center, transparent 50%, rgba(40, 25, 10, 0.28) 100%);\r\n}\r\n\r\n\/* Cursor *\/\r\n#hidrodoko-paradise .hd-cursor {\r\n  position: absolute;\r\n  width: 24px; height: 24px;\r\n  border: 1px solid var(--hd-copper);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  transform: translate(-50%, -50%);\r\n  transition: width 0.25s, height 0.25s, background 0.25s, border-color 0.25s;\r\n  z-index: 99;\r\n  mix-blend-mode: multiply;\r\n}\r\n#hidrodoko-paradise .hd-cursor::before {\r\n  content: '';\r\n  position: absolute; inset: 50% 50%;\r\n  width: 3px; height: 3px;\r\n  background: var(--hd-copper);\r\n  border-radius: 50%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n#hidrodoko-paradise .hd-cursor.hd-hover {\r\n  width: 64px; height: 64px;\r\n  border-color: var(--hd-deep);\r\n  background: rgba(250, 244, 232, 0.32);\r\n  mix-blend-mode: normal;\r\n}\r\n#hidrodoko-paradise .hd-cursor.hd-hover::before { opacity: 0; }\r\n#hidrodoko-paradise .hd-cursor.hd-hover::after {\r\n  content: 'VIEW';\r\n  position: absolute; inset: 50% 50%;\r\n  transform: translate(-50%, -50%);\r\n  font-size: 9px; letter-spacing: 3px;\r\n  color: var(--hd-deep); font-weight: 600;\r\n}\r\n\r\n\/* Loader *\/\r\n#hidrodoko-paradise .hd-loader {\r\n  position: absolute; inset: 0; z-index: 50;\r\n  background:\r\n    radial-gradient(ellipse at center, rgba(35, 77, 110, 0.86) 0%, rgba(14, 42, 71, 0.94) 52%, #050b12 100%);\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: opacity 0.9s ease;\r\n}\r\n#hidrodoko-paradise .hd-loader.hd-hidden { opacity: 0; pointer-events: none; }\r\n#hidrodoko-paradise .hd-loader-inner { display: flex; flex-direction: column; align-items: center; }\r\n#hidrodoko-paradise .hd-loader-logo {\r\n  width: 220px; height: auto; margin-bottom: 28px;\r\n  filter: drop-shadow(0 6px 24px rgba(14, 42, 71, 0.18));\r\n}\r\n#hidrodoko-paradise .hd-loader-tag {\r\n  font-size: 10px; letter-spacing: 6px;\r\n  color: var(--hd-deep); font-weight: 600;\r\n  margin-bottom: 30px;\r\n}\r\n#hidrodoko-paradise .hd-loader-bar {\r\n  width: 220px; height: 1px;\r\n  background: rgba(14, 42, 71, 0.15);\r\n  overflow: hidden; position: relative;\r\n}\r\n#hidrodoko-paradise .hd-loader-bar span {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(90deg, transparent, var(--hd-copper), transparent);\r\n  animation: hd-loadbar 1.6s infinite;\r\n}\r\n@keyframes hd-loadbar {\r\n  0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }\r\n}\r\n\r\n\/* UI *\/\r\n#hidrodoko-paradise .hd-ui {\r\n  position: absolute; inset: 0; z-index: 10;\r\n  pointer-events: none; opacity: 0;\r\n  transition: opacity 1s ease 0.3s;\r\n}\r\n#hidrodoko-paradise .hd-ui.hd-visible { opacity: 1; }\r\n\r\n\/* Hero text *\/\r\n#hidrodoko-paradise .hd-hero {\r\n  position: absolute;\r\n  left: 48px; top: 50%;\r\n  transform: translateY(-50%);\r\n  max-width: 380px;\r\n  pointer-events: none;\r\n}\r\n#hidrodoko-paradise .hd-hero-eyebrow {\r\n  font-size: 10px; letter-spacing: 5px;\r\n  color: var(--hd-copper); text-transform: uppercase;\r\n  font-weight: 600; margin-bottom: 22px;\r\n  display: flex; align-items: center; gap: 14px;\r\n}\r\n#hidrodoko-paradise .hd-hero-eyebrow span {\r\n  width: 36px; height: 1px;\r\n  background: var(--hd-copper);\r\n  display: block;\r\n}\r\n#hidrodoko-paradise .hd-hero-headline {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 64px; font-weight: 300;\r\n  line-height: 1; letter-spacing: -0.5px;\r\n  color: var(--hd-deep); margin-bottom: 24px;\r\n}\r\n#hidrodoko-paradise .hd-hero-headline em {\r\n  font-style: italic; color: var(--hd-copper); font-weight: 400;\r\n}\r\n#hidrodoko-paradise .hd-hero-sub {\r\n  font-size: 14px; line-height: 1.7;\r\n  color: #fff; opacity: 0.88;\r\n  margin-bottom: 32px; font-weight: 300;\r\n}\r\n#hidrodoko-paradise .hd-cta {\r\n  display: inline-flex; align-items: center; gap: 14px;\r\n  pointer-events: auto; text-decoration: none;\r\n  font-size: 10px; letter-spacing: 4px;\r\n  color: var(--hd-deep); text-transform: uppercase;\r\n  font-weight: 600; padding: 12px 0;\r\n  border-bottom: 1px solid var(--hd-copper);\r\n  transition: padding 0.4s, color 0.3s;\r\n}\r\n#hidrodoko-paradise .hd-cta:hover { padding-left: 8px; color: var(--hd-copper); }\r\n#hidrodoko-paradise .hd-arrow {\r\n  width: 26px; height: 1px;\r\n  background: var(--hd-deep);\r\n  position: relative;\r\n  transition: width 0.4s, background 0.3s;\r\n}\r\n#hidrodoko-paradise .hd-arrow::after {\r\n  content: ''; position: absolute;\r\n  right: 0; top: -3px;\r\n  width: 8px; height: 8px;\r\n  border-top: 1px solid var(--hd-deep);\r\n  border-right: 1px solid var(--hd-deep);\r\n  transform: rotate(45deg);\r\n  transition: border-color 0.3s;\r\n}\r\n#hidrodoko-paradise .hd-cta:hover .hd-arrow { width: 42px; background: var(--hd-copper); }\r\n#hidrodoko-paradise .hd-cta:hover .hd-arrow::after { border-color: var(--hd-copper); }\r\n\r\n\/* Counter *\/\r\n#hidrodoko-paradise .hd-counter {\r\n  position: absolute; top: 50%; left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  pointer-events: none; text-align: center;\r\n  opacity: 0; transition: opacity 0.6s; z-index: 5;\r\n}\r\n#hidrodoko-paradise .hd-counter.hd-show { opacity: 0.12; }\r\n#hidrodoko-paradise .hd-counter-num {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-style: italic; font-size: 280px;\r\n  font-weight: 300; line-height: 0.85;\r\n  color: var(--hd-copper);\r\n}\r\n#hidrodoko-paradise .hd-counter-label {\r\n  font-size: 10px; letter-spacing: 6px;\r\n  color: var(--hd-deep); margin-top: 4px;\r\n  text-transform: uppercase; font-weight: 600;\r\n}\r\n\r\n\/* Index sidebar *\/\r\n#hidrodoko-paradise .hd-index {\r\n  position: absolute; right: 32px; top: 50%;\r\n  transform: translateY(-50%);\r\n  display: flex; flex-direction: column;\r\n  gap: 2px; pointer-events: auto;\r\n  z-index: 30;\r\n  opacity: 1;\r\n  transition: opacity 0.35s ease, transform 0.35s ease;\r\n  max-height: calc(100vh - 48px);\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  padding-right: 6px;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: var(--hd-copper) rgba(255, 255, 255, 0.12);\r\n}\r\n#hidrodoko-paradise .hd-index::-webkit-scrollbar { width: 4px; }\r\n#hidrodoko-paradise .hd-index::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); }\r\n#hidrodoko-paradise .hd-index::-webkit-scrollbar-thumb {\r\n  background: var(--hd-copper);\r\n  border-radius: 2px;\r\n}\r\n#hidrodoko-paradise .hd-index::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -16px -20px;\r\n  border-radius: 8px;\r\n  background: rgba(7, 17, 29, 0);\r\n  -webkit-backdrop-filter: blur(0px);\r\n  backdrop-filter: blur(0px);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n  transition: background 0.3s ease, backdrop-filter 0.3s ease;\r\n}\r\n#hidrodoko-paradise .hd-index:hover::before {\r\n  background: rgba(7, 17, 29, 1);\r\n  -webkit-backdrop-filter: blur(18px) saturate(140%);\r\n  backdrop-filter: blur(18px) saturate(140%);\r\n}\r\n#hidrodoko-paradise.hd-detail-open .hd-index {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transform: translate(18px, -50%);\r\n}\r\n#hidrodoko-paradise .hd-idx-item {\r\n  display: flex; align-items: center; justify-content: flex-end;\r\n  gap: 18px; padding: 12px 16px 12px 0;\r\n  border-right: 1px solid transparent;\r\n  transition: all 0.4s; cursor: pointer;\r\n  pointer-events: auto;\r\n  position: relative;\r\n  z-index: 31;\r\n}\r\n#hidrodoko-paradise .hd-idx-item.hd-active { border-right-color: var(--hd-copper); }\r\n#hidrodoko-paradise .hd-idx-item.hd-hero-badge::before {\r\n  content: '\u2726'; color: var(--hd-copper);\r\n  margin-right: 6px; font-size: 12px;\r\n}\r\n#hidrodoko-paradise .hd-idx-label {\r\n  font-size: 11px; letter-spacing: 3px;\r\n  color: var(--hd-deep); text-transform: uppercase;\r\n  text-align: right; min-width: 170px;\r\n  font-weight: 700; transition: color 0.3s, letter-spacing 0.3s;\r\n}\r\n#hidrodoko-paradise .hd-idx-item:hover .hd-idx-label,\r\n#hidrodoko-paradise .hd-idx-item.hd-active .hd-idx-label {\r\n  color: var(--hd-deep); letter-spacing: 4px;\r\n}\r\n#hidrodoko-paradise .hd-idx-num {\r\n  font-family: 'Cormorant Garamond', serif; font-style: italic;\r\n  font-size: 16px; color: var(--hd-copper-light);\r\n  text-shadow: 0 0 8px rgba(200, 106, 31, 0.75);\r\n  transition: color 0.3s; min-width: 26px; text-align: right;\r\n}\r\n#hidrodoko-paradise .hd-idx-item:hover .hd-idx-num,\r\n#hidrodoko-paradise .hd-idx-item.hd-active .hd-idx-num { color: var(--hd-copper); }\r\n\r\n\/* Quote *\/\r\n#hidrodoko-paradise .hd-quote {\r\n  position: absolute; bottom: 100px; left: 48px;\r\n  max-width: 300px; pointer-events: none;\r\n  opacity: 0; transform: translateY(12px);\r\n  transition: opacity 0.6s, transform 0.6s;\r\n}\r\n#hidrodoko-paradise .hd-quote.hd-show { opacity: 1; transform: translateY(0); }\r\n#hidrodoko-paradise .hd-quote p {\r\n  font-family: 'Cormorant Garamond', serif; font-style: italic;\r\n  font-size: 19px; line-height: 1.45; color: var(--hd-deep);\r\n}\r\n#hidrodoko-paradise .hd-quote span {\r\n  display: block; margin-top: 12px;\r\n  font-family: 'Inter', sans-serif; font-size: 9px;\r\n  letter-spacing: 4px; color: var(--hd-faint); font-weight: 600;\r\n}\r\n\r\n\/* Detail panel *\/\r\n#hidrodoko-paradise .hd-detail {\r\n  position: absolute; right: 32px; top: clamp(118px, 18vh, 178px);\r\n  bottom: auto;\r\n  width: 380px; max-width: calc(100% - 64px);\r\n  max-height: calc(100vh - 156px);\r\n  overflow-y: auto;\r\n  background: var(--hd-glass);\r\n  backdrop-filter: blur(28px) saturate(140%);\r\n  -webkit-backdrop-filter: blur(28px) saturate(140%);\r\n  border: 1px solid var(--hd-line);\r\n  border-top: 2px solid var(--hd-copper);\r\n  pointer-events: auto; opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.6s, transform 0.6s;\r\n  box-shadow: 0 30px 60px -20px rgba(14, 42, 71, 0.25);\r\n  scrollbar-width: thin;\r\n  scrollbar-color: var(--hd-copper) rgba(255, 255, 255, 0.12);\r\n}\r\n#hidrodoko-paradise .hd-detail::-webkit-scrollbar { width: 4px; }\r\n#hidrodoko-paradise .hd-detail::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); }\r\n#hidrodoko-paradise .hd-detail::-webkit-scrollbar-thumb {\r\n  background: var(--hd-copper);\r\n  border-radius: 2px;\r\n}\r\n#hidrodoko-paradise .hd-detail.hd-show { opacity: 1; transform: translateY(0); }\r\n#hidrodoko-paradise .hd-detail-inner { padding: 64px 26px 24px; }\r\n#hidrodoko-paradise .hd-detail-cat {\r\n  font-size: 9px; letter-spacing: 4px;\r\n  color: var(--hd-copper); text-transform: uppercase;\r\n  font-weight: 600; margin-bottom: 12px;\r\n}\r\n#hidrodoko-paradise .hd-detail-name {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 34px; font-weight: 400; line-height: 1.05;\r\n  color: var(--hd-deep); margin-bottom: 6px;\r\n}\r\n#hidrodoko-paradise .hd-detail-name em { font-style: italic; color: var(--hd-copper); }\r\n#hidrodoko-paradise .hd-detail-model {\r\n  font-size: 9px; letter-spacing: 3px;\r\n  color: var(--hd-faint); text-transform: uppercase;\r\n  margin-bottom: 16px; font-weight: 600;\r\n}\r\n#hidrodoko-paradise .hd-detail-desc {\r\n  font-size: 13px; line-height: 1.65;\r\n  color: var(--hd-deep); opacity: 0.78;\r\n  margin-bottom: 20px; font-weight: 300;\r\n}\r\n#hidrodoko-paradise .hd-detail-features {\r\n  display: grid; grid-template-columns: 1fr 1fr;\r\n  gap: 12px 18px; padding-top: 16px;\r\n  border-top: 1px solid var(--hd-line);\r\n  margin-bottom: 20px;\r\n}\r\n#hidrodoko-paradise .hd-feat { display: flex; flex-direction: column; gap: 4px; }\r\n#hidrodoko-paradise .hd-feat dt {\r\n  font-size: 9px; letter-spacing: 2px;\r\n  color: var(--hd-faint); text-transform: uppercase; font-weight: 600;\r\n}\r\n#hidrodoko-paradise .hd-feat dd {\r\n  font-size: 12px; color: var(--hd-deep);\r\n  font-weight: 500; letter-spacing: 0.3px;\r\n}\r\n#hidrodoko-paradise .hd-detail-actions {\r\n  display: flex; justify-content: space-between; align-items: stretch; gap: 10px;\r\n  position: relative;\r\n  z-index: 90;\r\n  pointer-events: auto !important;\r\n}\r\n#hidrodoko-paradise .hd-detail-cta {\r\n  flex: 1 1 auto; background: #fff; color: var(--hd-navy);\r\n  padding: 14px 18px; text-decoration: none;\r\n  font-size: 10px; letter-spacing: 3px;\r\n  text-transform: uppercase; font-weight: 600;\r\n  text-align: center; transition: background 0.3s;\r\n  width: 100%; min-height: 52px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  position: relative; z-index: 92;\r\n  pointer-events: auto !important;\r\n  cursor: pointer;\r\n  touch-action: manipulation;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n#hidrodoko-paradise .hd-detail-cta:hover { background: var(--hd-copper); color: #fff; }\r\n#hidrodoko-paradise .hd-detail-close {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  z-index: 120;\r\n  flex: 0 0 56px;\r\n  background: rgba(7, 17, 29, 0.82); border: 1px solid var(--hd-line);\r\n  width: 56px; height: 56px;\r\n  min-width: 56px; min-height: 56px;\r\n  padding: 0;\r\n  font-size: 31px; color: var(--hd-deep);\r\n  cursor: pointer; transition: all 0.3s;\r\n  font-weight: 300; font-family: 'Inter', system-ui, sans-serif;\r\n  line-height: 1;\r\n  text-align: center;\r\n  pointer-events: auto !important;\r\n  touch-action: manipulation;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n#hidrodoko-paradise .hd-detail-close:hover {\r\n  background: #fff; color: var(--hd-navy); border-color: #fff;\r\n}\r\n\r\n#hidrodoko-paradise .hd-detail-cta,\r\n#hidrodoko-paradise .hd-mob-cta {\r\n  position: relative;\r\n  z-index: 82;\r\n  pointer-events: auto !important;\r\n  touch-action: manipulation;\r\n}\r\n#hidrodoko-paradise .hd-detail-cta {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 46px;\r\n}\r\n#hidrodoko-paradise .hd-mob-cta {\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 44px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 12px 16px;\r\n  border: 1px solid var(--hd-copper);\r\n  background: rgba(200, 106, 31, 0.12);\r\n}\r\n#hidrodoko-paradise .hd-detail-close::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -12px;\r\n  pointer-events: auto;\r\n}\r\n#hidrodoko-paradise .hd-detail-cta::before,\r\n#hidrodoko-paradise .hd-mob-cta::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n#hidrodoko-paradise .hd-strip-card.hd-card-tall .hd-strip-img { aspect-ratio: 3\/4; }\r\n#hidrodoko-paradise .hd-strip-card.hd-card-short .hd-strip-img { aspect-ratio: 4\/3; }\r\n#hidrodoko-paradise .hd-mob-card.hd-card-tall .hd-mob-img { aspect-ratio: 4\/5; }\r\n#hidrodoko-paradise .hd-mob-card.hd-card-short .hd-mob-img { aspect-ratio: 16\/10; }\r\n#hidrodoko-paradise .hd-mob-card.hd-mob-hero .hd-mob-img { aspect-ratio: 4\/4.6; }\r\n\r\n\r\n\/* Hints *\/\r\n#hidrodoko-paradise .hd-hints {\r\n  position: absolute; bottom: 26px; left: 48px;\r\n  display: flex; gap: 22px; flex-wrap: wrap;\r\n  pointer-events: none; max-width: 60%;\r\n}\r\n#hidrodoko-paradise .hd-hints span {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  font-size: 9px; letter-spacing: 2px;\r\n  color: var(--hd-faint); text-transform: uppercase; font-weight: 600;\r\n}\r\n#hidrodoko-paradise .hd-hints kbd {\r\n  padding: 3px 7px;\r\n  background: rgba(250, 244, 232, 0.5);\r\n  border: 1px solid var(--hd-line);\r\n  font-family: 'Inter', sans-serif; font-size: 8px;\r\n  letter-spacing: 1px; color: var(--hd-copper);\r\n  border-radius: 2px; font-weight: 600;\r\n}\r\n\/* ============================================================\r\n   TABLET STRIP (default hidden, visible 768-1024px)\r\n   ============================================================ *\/\r\n#hidrodoko-paradise .hd-strip {\r\n  display: none;\r\n  position: relative;\r\n  z-index: 20;\r\n  background: linear-gradient(180deg, rgba(7, 17, 29, 0) 0%, rgba(14, 42, 71, 0.96) 30%, #050b12 100%);\r\n  padding: 32px 24px 28px;\r\n  border-top: 1px solid var(--hd-line);\r\n}\r\n#hidrodoko-paradise .hd-strip-header {\r\n  display: flex; justify-content: space-between; align-items: baseline;\r\n  margin-bottom: 18px;\r\n}\r\n#hidrodoko-paradise .hd-strip-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 22px; font-weight: 500;\r\n  color: var(--hd-deep); font-style: italic;\r\n}\r\n#hidrodoko-paradise .hd-strip-hint {\r\n  font-size: 9px; letter-spacing: 3px;\r\n  color: var(--hd-copper); font-weight: 600;\r\n  text-transform: uppercase;\r\n}\r\n#hidrodoko-paradise .hd-strip-scroll {\r\n  display: flex; gap: 16px;\r\n  overflow-x: auto; overflow-y: hidden;\r\n  padding-bottom: 12px;\r\n  scroll-snap-type: x mandatory;\r\n  scrollbar-color: var(--hd-copper) rgba(200, 106, 31, 0.15);\r\n  scrollbar-width: thin;\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n#hidrodoko-paradise .hd-strip-scroll::-webkit-scrollbar { height: 4px; }\r\n#hidrodoko-paradise .hd-strip-scroll::-webkit-scrollbar-track {\r\n  background: rgba(200, 106, 31, 0.12);\r\n}\r\n#hidrodoko-paradise .hd-strip-scroll::-webkit-scrollbar-thumb {\r\n  background: var(--hd-copper); border-radius: 2px;\r\n}\r\n#hidrodoko-paradise .hd-strip-card {\r\n  flex: 0 0 220px; scroll-snap-align: start;\r\n  background: rgba(255, 255, 255, 0.10);\r\n  border: 1px solid var(--hd-line);\r\n  border-radius: 2px;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  transition: transform 0.3s, box-shadow 0.3s;\r\n  display: flex; flex-direction: column;\r\n}\r\n#hidrodoko-paradise .hd-strip-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 12px 30px -10px rgba(14, 42, 71, 0.2);\r\n}\r\n#hidrodoko-paradise .hd-strip-card.hd-active {\r\n  border-color: var(--hd-copper);\r\n  box-shadow: 0 12px 30px -10px rgba(200, 106, 31, 0.35);\r\n}\r\n#hidrodoko-paradise .hd-strip-img {\r\n  width: 100%; aspect-ratio: 3\/4;\r\n  background-size: cover; background-position: center;\r\n  background-color: #f4e9d4;\r\n}\r\n#hidrodoko-paradise .hd-strip-info { padding: 14px 14px 16px; }\r\n#hidrodoko-paradise .hd-strip-cat {\r\n  font-size: 8px; letter-spacing: 2.5px;\r\n  color: var(--hd-copper); text-transform: uppercase;\r\n  font-weight: 600; margin-bottom: 6px;\r\n}\r\n#hidrodoko-paradise .hd-strip-name {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 18px; color: var(--hd-deep);\r\n  font-weight: 500; line-height: 1.1;\r\n}\r\n\r\n\/* ============================================================\r\n   MOBILE STACK (hidden by default, visible <768px)\r\n   ============================================================ *\/\r\n#hidrodoko-paradise .hd-stack {\r\n  display: none;\r\n  position: relative; z-index: 20;\r\n  background: linear-gradient(180deg, #07111d 0%, #0E2A47 58%, #050b12 100%);\r\n  padding: 80px 20px 40px;\r\n  min-height: 100vh;\r\n}\r\n#hidrodoko-paradise .hd-stack-intro {\r\n  margin-bottom: 36px; text-align: left;\r\n}\r\n#hidrodoko-paradise .hd-stack-eyebrow {\r\n  font-size: 10px; letter-spacing: 5px;\r\n  color: var(--hd-copper); text-transform: uppercase;\r\n  font-weight: 600; margin-bottom: 16px;\r\n}\r\n#hidrodoko-paradise .hd-stack-headline {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 42px; font-weight: 300;\r\n  line-height: 1.02; letter-spacing: -0.5px;\r\n  color: var(--hd-deep); margin-bottom: 18px;\r\n}\r\n#hidrodoko-paradise .hd-stack-headline em {\r\n  font-style: italic; color: var(--hd-copper);\r\n}\r\n#hidrodoko-paradise .hd-stack-sub {\r\n  font-size: 14px; line-height: 1.65;\r\n  color: #fff; opacity: 0.86;\r\n  font-weight: 300;\r\n}\r\n#hidrodoko-paradise .hd-stack-list {\r\n  display: flex; flex-direction: column;\r\n  gap: 18px;\r\n}\r\n#hidrodoko-paradise .hd-mob-card {\r\n  background: rgba(255, 255, 255, 0.10);\r\n  border: 1px solid var(--hd-line);\r\n  border-radius: 3px;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n#hidrodoko-paradise .hd-mob-card.hd-mob-hero {\r\n  border-top: 3px solid var(--hd-copper);\r\n  box-shadow: 0 16px 40px -12px rgba(14, 42, 71, 0.2);\r\n}\r\n#hidrodoko-paradise .hd-mob-img {\r\n  width: 100%; aspect-ratio: 4\/5;\r\n  background-size: cover; background-position: center;\r\n  background-color: #f4e9d4;\r\n}\r\n#hidrodoko-paradise .hd-mob-card.hd-mob-hero .hd-mob-img { aspect-ratio: 4\/4.5; }\r\n#hidrodoko-paradise .hd-mob-info {\r\n  padding: 20px 18px 22px;\r\n}\r\n#hidrodoko-paradise .hd-mob-card.hd-mob-hero .hd-mob-info { padding: 26px 20px 28px; }\r\n#hidrodoko-paradise .hd-mob-cat {\r\n  font-size: 9px; letter-spacing: 3px;\r\n  color: var(--hd-copper); text-transform: uppercase;\r\n  font-weight: 600; margin-bottom: 8px;\r\n}\r\n#hidrodoko-paradise .hd-mob-name {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 26px; color: var(--hd-deep);\r\n  font-weight: 500; line-height: 1.05;\r\n  margin-bottom: 6px;\r\n}\r\n#hidrodoko-paradise .hd-mob-card.hd-mob-hero .hd-mob-name { font-size: 32px; }\r\n#hidrodoko-paradise .hd-mob-name em { font-style: italic; color: var(--hd-copper); }\r\n#hidrodoko-paradise .hd-mob-model {\r\n  font-size: 9px; letter-spacing: 2px;\r\n  color: var(--hd-faint); text-transform: uppercase;\r\n  margin-bottom: 12px; font-weight: 600;\r\n}\r\n#hidrodoko-paradise .hd-mob-desc {\r\n  font-size: 13px; line-height: 1.6;\r\n  color: var(--hd-deep); opacity: 0.75;\r\n  margin-bottom: 16px; font-weight: 300;\r\n}\r\n#hidrodoko-paradise .hd-mob-features {\r\n  display: grid; grid-template-columns: 1fr 1fr;\r\n  gap: 10px 14px; padding-top: 14px;\r\n  border-top: 1px solid var(--hd-line);\r\n  margin-bottom: 16px;\r\n}\r\n#hidrodoko-paradise .hd-mob-feat { display: flex; flex-direction: column; gap: 4px; }\r\n#hidrodoko-paradise .hd-mob-feat dt {\r\n  font-size: 8px; letter-spacing: 2px;\r\n  color: var(--hd-faint); text-transform: uppercase; font-weight: 600;\r\n}\r\n#hidrodoko-paradise .hd-mob-feat dd {\r\n  font-size: 11px; line-height: 1.35;\r\n  color: var(--hd-deep); font-weight: 500;\r\n}\r\n#hidrodoko-paradise .hd-mob-cta {\r\n  display: inline-flex; align-items: center;\r\n  gap: 10px; text-decoration: none;\r\n  font-size: 10px; letter-spacing: 3px;\r\n  color: var(--hd-deep); text-transform: uppercase;\r\n  font-weight: 600; padding: 8px 0;\r\n  border-bottom: 1px solid var(--hd-copper);\r\n}\r\n#hidrodoko-paradise .hd-mob-cta::after {\r\n  content: '\u2192'; color: var(--hd-copper);\r\n}\r\n#hidrodoko-paradise .hd-stack-foot {\r\n  margin-top: 40px; padding-top: 24px;\r\n  border-top: 1px solid var(--hd-line);\r\n  font-size: 9px; letter-spacing: 3px;\r\n  color: var(--hd-faint); text-transform: uppercase;\r\n  font-weight: 500; text-align: center;\r\n}\r\n\r\n\r\n\/* CTA click-area final override: keep the whole button surface clickable on mobile\/detail panels *\/\r\n#hidrodoko-paradise .hd-mob-card .hd-mob-cta {\r\n  display: flex !important;\r\n  width: 100% !important;\r\n  min-height: 44px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 12px 16px !important;\r\n  border: 1px solid var(--hd-copper) !important;\r\n  border-bottom: 1px solid var(--hd-copper) !important;\r\n  background: rgba(200, 106, 31, 0.12);\r\n}\r\n#hidrodoko-paradise .hd-detail-actions .hd-detail-cta {\r\n  display: flex !important;\r\n  width: 100% !important;\r\n  min-height: 52px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: auto !important;\r\n  cursor: pointer !important;\r\n}\r\n\r\n\r\n\/* X button final position: top-right of the product detail table\/panel *\/\r\n#hidrodoko-paradise .hd-detail > .hd-detail-close {\r\n  position: absolute !important;\r\n  top: 12px !important;\r\n  right: 12px !important;\r\n  left: auto !important;\r\n  bottom: auto !important;\r\n  z-index: 260 !important;\r\n  width: 58px !important;\r\n  height: 58px !important;\r\n  min-width: 58px !important;\r\n  min-height: 58px !important;\r\n  display: flex !important;\r\n  align-items: center !important;\r\n  justify-content: center !important;\r\n  opacity: 1 !important;\r\n  visibility: visible !important;\r\n  pointer-events: auto !important;\r\n  cursor: pointer !important;\r\n}\r\n#hidrodoko-paradise .hd-detail > .hd-detail-close::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -10px;\r\n  pointer-events: auto;\r\n}\r\n#hidrodoko-paradise .hd-detail-actions .hd-detail-close,\r\n#hidrodoko-paradise .hd-ui > .hd-detail-close {\r\n  display: none !important;\r\n}\r\n@media (max-width: 767px) {\r\n  #hidrodoko-paradise .hd-detail > .hd-detail-close {\r\n    top: 10px !important;\r\n    right: 10px !important;\r\n    width: 54px !important;\r\n    height: 54px !important;\r\n    min-width: 54px !important;\r\n    min-height: 54px !important;\r\n  }\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE BREAKPOINTS\r\n   ============================================================ *\/\r\n\/* Tablet: show the product strip first, without the empty 3D stage *\/\r\n@media (max-width: 1024px) and (min-width: 768px) {\r\n  #hidrodoko-paradise {\r\n    min-height: auto;\r\n    height: auto;\r\n    overflow: visible;\r\n    cursor: auto;\r\n  }\r\n  #hidrodoko-paradise * { cursor: auto !important; }\r\n  #hidrodoko-paradise .hd-loader,\r\n  #hidrodoko-paradise .hd-cursor,\r\n  #hidrodoko-paradise .hd-stage,\r\n  #hidrodoko-paradise .hd-vignette {\r\n    display: none !important;\r\n  }\r\n  #hidrodoko-paradise .hd-ui {\r\n    position: absolute;\r\n    inset: 0;\r\n    height: auto;\r\n    opacity: 1;\r\n    pointer-events: none;\r\n  }\r\n  #hidrodoko-paradise .hd-hero,\r\n  #hidrodoko-paradise .hd-index,\r\n  #hidrodoko-paradise .hd-quote,\r\n  #hidrodoko-paradise .hd-counter,\r\n  #hidrodoko-paradise .hd-hints {\r\n    display: none !important;\r\n  }\r\n  #hidrodoko-paradise .hd-strip {\r\n    display: block;\r\n    padding: 24px 24px 30px;\r\n    border-top: 0;\r\n    background:\r\n      radial-gradient(ellipse at 50% 0%, rgba(65, 103, 132, 0.36) 0%, transparent 55%),\r\n      linear-gradient(180deg, #07111d 0%, #0E2A47 62%, #050b12 100%);\r\n  }\r\n  #hidrodoko-paradise .hd-detail {\r\n    position: fixed;\r\n    right: 24px;\r\n    top: 28px;\r\n    bottom: auto;\r\n    z-index: 60;\r\n    max-height: calc(100vh - 56px);\r\n    overflow-y: auto;\r\n  }\r\n}\r\n\r\n@media (max-height: 760px) and (min-width: 768px) {\r\n  #hidrodoko-paradise .hd-detail {\r\n    top: clamp(76px, 12vh, 118px);\r\n    max-height: calc(100vh - 104px);\r\n  }\r\n  #hidrodoko-paradise .hd-detail-inner { padding: 46px 24px 20px; }\r\n  #hidrodoko-paradise .hd-detail-name { font-size: 30px; }\r\n  #hidrodoko-paradise .hd-detail-model { margin-bottom: 12px; }\r\n  #hidrodoko-paradise .hd-detail-desc {\r\n    line-height: 1.5;\r\n    margin-bottom: 14px;\r\n  }\r\n  #hidrodoko-paradise .hd-detail-features {\r\n    gap: 10px 16px;\r\n    padding-top: 12px;\r\n    margin-bottom: 14px;\r\n  }\r\n}\r\n\r\n\/* Mobile: hide 3D entirely, show vertical stack *\/\r\n@media (max-width: 767px) {\r\n  #hidrodoko-paradise { cursor: auto; min-height: auto; height: auto; }\r\n  #hidrodoko-paradise * { cursor: auto !important; }\r\n  #hidrodoko-paradise .hd-cursor,\r\n  #hidrodoko-paradise .hd-stage,\r\n  #hidrodoko-paradise .hd-vignette,\r\n  #hidrodoko-paradise .hd-ui,\r\n  #hidrodoko-paradise .hd-strip {\r\n    display: none !important;\r\n  }\r\n  #hidrodoko-paradise .hd-stack { display: block; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  const root = document.getElementById('hidrodoko-paradise');\r\n  if (!root || root.dataset.hdInitialized) return;\r\n  root.dataset.hdInitialized = '1';\r\n\r\n  const IMAGES = {\r\n    panele_diellore: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/panele-diellore.webp',\r\n    aksesore_salishente: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/aksesore-salishente.webp',\r\n    boljere_elektrike: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/boljere-elektrike.webp',\r\n    kabina_dushi: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/kabina-dushi.webp',\r\n    kaseta_banjo: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/kasete-per-WC.webp',\r\n    kondicionere: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/kondicionere.webp',\r\n    lavamane_banjo: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/lavamane-banjo.webp',\r\n    lavapjata_kuzhine: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/lavapjate-kushine.webp',\r\n    mishelatore: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/mishelatore.webp',\r\n    mobilje_banjo: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/Mobilje-banjoje.webp',\r\n    pompa_uji: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/pompa-uji.webp',\r\n    rekorderi: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/rekorderi.webp',\r\n    wc_bide: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/06\/wc-dhe-bide.webp',\r\n    logo: 'https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg'\r\n  };\r\n  const PRODUCTS = [{\"key\": \"panele_diellore\", \"image\": \"panele_diellore\", \"indexName\": \"Solar Panels\", \"category\": \"Solar Panels\", \"name\": \"Solar <em>Panels<\/em>\", \"model\": \"CATEGORY \u00b7 SOLAR ENERGY\", \"description\": \"Solar panels for efficient energy solutions, suitable for homes, businesses and modern water-heating systems.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Solar Panels\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Solar Panels\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/panele-diellore\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": true, \"slot\": 0}, {\"key\": \"aksesore_salishente\", \"image\": \"aksesore_salishente\", \"indexName\": \"Plumbing Accessories\", \"category\": \"Plumbing Accessories\", \"name\": \"Plumbing <em>Accessories<\/em>\", \"model\": \"CATEGORY \u00b7 INSTALLATION ACCESSORIES\", \"description\": \"Plumbing accessories for connections, fittings and sanitary installation maintenance with practical function and high durability.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Plumbing Accessories\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Plumbing Accessories\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/aksesore-salishente\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -1}, {\"key\": \"boljere_elektrike\", \"image\": \"boljere_elektrike\", \"indexName\": \"Electric Water Heaters\", \"category\": \"Electric Water Heaters\", \"name\": \"Electric <em>Water Heaters<\/em>\", \"model\": \"CATEGORY \u00b7 HOT WATER\", \"description\": \"Electric water heaters for reliable hot-water supply, available for bathrooms and family spaces with different capacity needs.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Electric Water Heaters\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Electric Water Heaters\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/boljere-elektrike\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 1}, {\"key\": \"kabina_dushi\", \"image\": \"kabina_dushi\", \"indexName\": \"Shower Cabins\", \"category\": \"Shower Cabins\", \"name\": \"Shower <em>Cabins<\/em>\", \"model\": \"CATEGORY \u00b7 SHOWER AREA\", \"description\": \"Shower cabins with functional design, quality glass and modern profiles for clean, safe and elegant bathrooms.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Shower Cabins\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Shower Cabins\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/kabina-dushi\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -2}, {\"key\": \"kaseta_banjo\", \"image\": \"kaseta_banjo\", \"indexName\": \"Bathroom Cisterns\", \"category\": \"Bathroom Cisterns\", \"name\": \"Bathroom <em>Cisterns<\/em>\", \"model\": \"CATEGORY \u00b7 WC SYSTEMS\", \"description\": \"Bathroom cisterns for WC systems, designed for practical installation, space saving and dependable operation.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Cisterns\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Cisterns\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/kaseta-te-ndryshme-banjo\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 2}, {\"key\": \"kondicionere\", \"image\": \"kondicionere\", \"indexName\": \"Air Conditioners\", \"category\": \"Air Conditioners\", \"name\": \"Air <em>Conditioners<\/em>\", \"model\": \"CATEGORY \u00b7 HEATING AND COOLING\", \"description\": \"Air conditioners for heating and cooling interiors, with efficient solutions for year-round comfort.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Air Conditioners\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Air Conditioners\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/kondicionere\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -3}, {\"key\": \"lavamane_banjo\", \"image\": \"lavamane_banjo\", \"indexName\": \"Bathroom Basins\", \"category\": \"Bathroom Basins\", \"name\": \"Bathroom <em>Basins<\/em>\", \"model\": \"CATEGORY \u00b7 BATHROOM BASINS\", \"description\": \"Bathroom basins in different styles and sizes, suitable for modern furniture, countertops and classic installations.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Basins\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Basins\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/lavamane-banjo\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 3}, {\"key\": \"lavapjata_kuzhine\", \"image\": \"lavapjata_kuzhine\", \"indexName\": \"Kitchen Sinks\", \"category\": \"Kitchen Sinks\", \"name\": \"Kitchen <em>Sinks<\/em>\", \"model\": \"CATEGORY \u00b7 KITCHEN\", \"description\": \"Practical and durable kitchen sinks for daily use, with forms that fit easily into any kitchen layout.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Kitchen Sinks\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Kitchen Sinks\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/lavapjata-kuzhine\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -4}, {\"key\": \"mishelatore\", \"image\": \"mishelatore\", \"indexName\": \"Mixers & Faucets\", \"category\": \"Mixers & Faucets\", \"name\": \"Mixers <em>& Faucets<\/em>\", \"model\": \"CATEGORY \u00b7 MIXERS AND FAUCETS\", \"description\": \"Mixers and faucets for bathrooms and kitchens, with easy water control, modern design and durable finishes.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Mixers & Faucets\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Mixers & Faucets\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/mishelatore\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 4}, {\"key\": \"mobilje_banjo\", \"image\": \"mobilje_banjo\", \"indexName\": \"Bathroom Furniture\", \"category\": \"Bathroom Furniture\", \"name\": \"Bathroom <em>Furniture<\/em>\", \"model\": \"CATEGORY \u00b7 BATHROOM FURNITURE\", \"description\": \"Bathroom furniture for organisation, aesthetics and functionality, including solutions for basins, cabinets and modern spaces.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Furniture\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Bathroom Furniture\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/mobilje-banjo\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -5}, {\"key\": \"pompa_uji\", \"image\": \"pompa_uji\", \"indexName\": \"Water Pumps\", \"category\": \"Water Pumps\", \"name\": \"Water <em>Pumps<\/em>\", \"model\": \"CATEGORY \u00b7 PRESSURE AND SUPPLY\", \"description\": \"Water pumps for supply, circulation and stable pressure in residential, technical and industrial installations.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Water Pumps\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Water Pumps\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/pompa-uji\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 5}, {\"key\": \"rekorderi\", \"image\": \"rekorderi\", \"indexName\": \"Fittings\", \"category\": \"Fittings\", \"name\": \"Fittings\", \"model\": \"CATEGORY \u00b7 FITTINGS\", \"description\": \"Fittings and connectors for sanitary installations, suitable for accurate, safe and long-lasting connections.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"Fittings\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"Fittings\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/rekorderi\/\", \"ctaLabel\": \"View category\", \"aspect\": 1.16, \"cardStyle\": \"short\", \"isHero\": false, \"slot\": -6}, {\"key\": \"wc_bide\", \"image\": \"wc_bide\", \"indexName\": \"WC & Bidet\", \"category\": \"WC & Bidet\", \"name\": \"WC & <em>Bidet<\/em>\", \"model\": \"CATEGORY \u00b7 SANITARYWARE\", \"description\": \"WC and bidet products for modern bathrooms, with practical forms, high hygiene and flexible design matching.\", \"features\": [{\"label\": \"CATEGORY\", \"value\": \"WC & Bidet\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryRows\": [{\"label\": \"CATEGORY\", \"value\": \"WC & Bidet\"}, {\"label\": \"INCLUDES\", \"value\": \"Selected products and solutions\"}, {\"label\": \"USE\", \"value\": \"Homes, bathrooms, kitchens and technical spaces\"}, {\"label\": \"LINK\", \"value\": \"Open category\"}], \"categoryUrl\": \"https:\/\/hidrodoko.com\/product-category\/wc-bide\/\", \"ctaLabel\": \"View category\", \"aspect\": 0.72, \"cardStyle\": \"tall\", \"isHero\": false, \"slot\": 6}];\r\n\r\n  \/\/ Inject logo\r\n  root.querySelectorAll('[data-hd-logo-img]').forEach(img => { img.src = IMAGES.logo; });\r\n\r\n  \/\/ Viewport detection\r\n  const MOBILE_BREAK = 768;\r\n  const TABLET_BREAK = 1024;\r\n  const isMobile = () => window.innerWidth < MOBILE_BREAK;\r\n  const isTablet = () => window.innerWidth >= MOBILE_BREAK && window.innerWidth < TABLET_BREAK;\r\n\r\n  \/\/ Build mobile stack always (visible only via CSS on mobile)\r\n  buildMobileStack();\r\n  buildTabletStrip();\r\n\r\n  function buildMobileStack() {\r\n    const list = root.querySelector('[data-hd-stack-list]');\r\n    \/\/ Hero first, then the rest\r\n    const hero = PRODUCTS.find(p => p.isHero);\r\n    const others = PRODUCTS.filter(p => !p.isHero);\r\n    const ordered = hero ? [hero, ...others] : PRODUCTS;\r\n    list.innerHTML = '';\r\n    ordered.forEach(p => {\r\n      const card = document.createElement('div');\r\n      card.className = 'hd-mob-card' + (p.isHero ? ' hd-mob-hero' : '') + (p.cardStyle === 'short' ? ' hd-card-short' : ' hd-card-tall');\r\n      card.innerHTML = `\r\n        <div class=\"hd-mob-img\" style=\"background-image:url('${IMAGES[p.image]}')\"><\/div>\r\n        <div class=\"hd-mob-info\">\r\n          <div class=\"hd-mob-cat\">${escapeHtml(p.category)}<\/div>\r\n          <h3 class=\"hd-mob-name\">${p.name}<\/h3>\r\n          <div class=\"hd-mob-model\">${escapeHtml(p.model)}<\/div>\r\n          ${p.description ? `<p class=\"hd-mob-desc\">${escapeHtml(p.description)}<\/p>` : ''}\r\n          <dl class=\"hd-mob-features\">${featureRowsHtml(p, 'hd-mob-feat')}<\/dl>\r\n          <a href=\"${escapeHtml(p.categoryUrl || '#')}\" class=\"hd-mob-cta\">${escapeHtml(p.ctaLabel || 'View category')}<\/a>\r\n        <\/div>`;\r\n      list.appendChild(card);\r\n    });\r\n  }\r\n\r\n  function buildTabletStrip() {\r\n    const scroll = root.querySelector('[data-hd-strip-scroll]');\r\n    scroll.innerHTML = '';\r\n    PRODUCTS.forEach((p, i) => {\r\n      const card = document.createElement('div');\r\n      card.className = 'hd-strip-card' + (p.cardStyle === 'short' ? ' hd-card-short' : ' hd-card-tall');\r\n      card.dataset.idx = i;\r\n      card.innerHTML = `\r\n        <div class=\"hd-strip-img\" style=\"background-image:url('${IMAGES[p.image]}')\"><\/div>\r\n        <div class=\"hd-strip-info\">\r\n          <div class=\"hd-strip-cat\">${escapeHtml(p.category)}<\/div>\r\n          <div class=\"hd-strip-name\">${p.name.replace(\/<[^>]*>\/g, '')}<\/div>\r\n        <\/div>`;\r\n      card.addEventListener('click', () => {\r\n        \/\/ Trigger detail panel for this product\r\n        if (window.__hdOpenDetail) window.__hdOpenDetail(i);\r\n      });\r\n      scroll.appendChild(card);\r\n    });\r\n  }\r\n\r\n  function escapeHtml(s) {\r\n    return String(s).replace(\/[&<>\"']\/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'})[c]);\r\n  }\r\n\r\n  function featureRowsHtml(p, className) {\r\n    return (p.categoryRows || p.features || [])\r\n      .map(f => `<div class=\"${className}\"><dt>${escapeHtml(f.label)}<\/dt><dd>${escapeHtml(f.value)}<\/dd><\/div>`)\r\n      .join('');\r\n  }\r\n\r\n  \/\/ On mobile, no need to load Three.js\r\n  if (isMobile()) {\r\n    root.querySelector('[data-hd-loader]').classList.add('hd-hidden');\r\n    return;\r\n  }\r\n\r\n  \/\/ Desktop \/ Tablet: load Three.js\r\n  function loadScript(src) {\r\n    return new Promise((res, rej) => {\r\n      if (window.THREE) return res();\r\n      const s = document.createElement('script');\r\n      s.src = src; s.onload = res; s.onerror = rej;\r\n      document.head.appendChild(s);\r\n    });\r\n  }\r\n\r\n  loadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js')\r\n    .then(boot)\r\n    .catch(err => {\r\n      console.error('Three.js failed', err);\r\n      root.querySelector('[data-hd-loader]').innerHTML =\r\n        '<div style=\"color:#0E2A47;font-family:serif;font-size:18px;padding:40px\">Loading error \u00b7 please refresh the page<\/div>';\r\n    });\r\n\r\n  function boot() {\r\n    const THREE = window.THREE;\r\n    const stage = root.querySelector('[data-hd-stage]');\r\n    const cursor = root.querySelector('[data-hd-cursor]');\r\n    const ui = root.querySelector('[data-hd-ui]');\r\n    const loader = root.querySelector('[data-hd-loader]');\r\n    const detail = root.querySelector('[data-hd-detail]');\r\n    const detailClose = root.querySelector('[data-hd-d-close]');\r\n    const counterEl = root.querySelector('[data-hd-counter]');\r\n    const counterNum = root.querySelector('[data-hd-counter-num]');\r\n    const counterLabel = root.querySelector('[data-hd-counter-label]');\r\n    const quoteEl = root.querySelector('[data-hd-quote]');\r\n    const idxContainer = root.querySelector('[data-hd-index]');\r\n\r\n    \/\/ Render every category in the 3D gallery on desktop. Tablet\/mobile use the lighter card layouts via CSS.\r\n    const tablet = isTablet();\r\n    const productsIn3D = PRODUCTS;\r\n    \/\/ Track original PRODUCTS indices for selected products\r\n    const indexMap = productsIn3D.map(p => PRODUCTS.indexOf(p));\r\n\r\n    let W = stage.clientWidth, H = stage.clientHeight;\r\n    if (!W || !H) { W = root.clientWidth; H = root.clientHeight; }\r\n\r\n    const scene = new THREE.Scene();\r\n    scene.fog = new THREE.Fog(0x07111d, 14, 42);\r\n\r\n    const camera = new THREE.PerspectiveCamera(tablet ? 48 : 52, W \/ H, 0.1, 200);\r\n    camera.position.set(0, 1.7, 7);\r\n\r\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\r\n    renderer.setSize(W, H);\r\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n    renderer.setClearColor(0x000000, 0);\r\n    stage.appendChild(renderer.domElement);\r\n\r\n    \/* ===== Sky dome ===== *\/\r\n    const skyCanvas = document.createElement('canvas');\r\n    skyCanvas.width = 2048; skyCanvas.height = 1024;\r\n    const sctx = skyCanvas.getContext('2d');\r\n    const skyGrad = sctx.createLinearGradient(0, 0, 0, 1024);\r\n    skyGrad.addColorStop(0, '#07111d');\r\n    skyGrad.addColorStop(0.34, '#0E2A47');\r\n    skyGrad.addColorStop(0.58, '#123b5d');\r\n    skyGrad.addColorStop(0.82, '#0a1d31');\r\n    skyGrad.addColorStop(1, '#050b12');\r\n    sctx.fillStyle = skyGrad; sctx.fillRect(0, 0, 2048, 1024);\r\n    const sun = sctx.createRadialGradient(1024, 400, 0, 1024, 400, 260);\r\n    sun.addColorStop(0, 'rgba(255, 255, 255, 0.24)');\r\n    sun.addColorStop(0.4, 'rgba(200, 106, 31, 0.14)');\r\n    sun.addColorStop(1, 'rgba(255, 255, 255, 0)');\r\n    sctx.fillStyle = sun; sctx.fillRect(0, 0, 2048, 1024);\r\n    const skyTex = new THREE.CanvasTexture(skyCanvas);\r\n    const skyDome = new THREE.Mesh(\r\n      new THREE.SphereGeometry(60, 32, 16),\r\n      new THREE.MeshBasicMaterial({ map: skyTex, side: THREE.BackSide, fog: false })\r\n    );\r\n    scene.add(skyDome);\r\n\r\n    \/* ===== Floor: clean marble ===== *\/\r\n    const floorCanvas = document.createElement('canvas');\r\n    floorCanvas.width = floorCanvas.height = 2048;\r\n    const fctx = floorCanvas.getContext('2d');\r\n    const fgrad = fctx.createRadialGradient(1024, 1024, 0, 1024, 1024, 1100);\r\n    fgrad.addColorStop(0, '#183858');\r\n    fgrad.addColorStop(0.52, '#0E2A47');\r\n    fgrad.addColorStop(1, '#050b12');\r\n    fctx.fillStyle = fgrad; fctx.fillRect(0, 0, 2048, 2048);\r\n    \/\/ Marble veining (subtle)\r\n    fctx.strokeStyle = 'rgba(255, 255, 255, 0.06)';\r\n    fctx.lineWidth = 1.2;\r\n    for (let i = 0; i < 70; i++) {\r\n      fctx.beginPath();\r\n      let x = Math.random() * 2048, y = Math.random() * 2048;\r\n      fctx.moveTo(x, y);\r\n      for (let j = 0; j < 35; j++) {\r\n        x += (Math.random() - 0.5) * 70;\r\n        y += (Math.random() - 0.5) * 70;\r\n        fctx.lineTo(x, y);\r\n      }\r\n      fctx.stroke();\r\n    }\r\n    \/\/ Concentric rings (subtle copper)\r\n    [340, 480, 640, 800].forEach((r, i) => {\r\n      fctx.strokeStyle = i === 0 ? 'rgba(200, 106, 31, 0.32)' :\r\n                         i === 1 ? 'rgba(200, 106, 31, 0.18)' :\r\n                                   'rgba(200, 106, 31, 0.10)';\r\n      fctx.lineWidth = i === 0 ? 2.5 : 1.5;\r\n      fctx.beginPath(); fctx.arc(1024, 1024, r, 0, Math.PI * 2); fctx.stroke();\r\n    });\r\n    const floorTex = new THREE.CanvasTexture(floorCanvas);\r\n    const floor = new THREE.Mesh(\r\n      new THREE.PlaneGeometry(45, 45),\r\n      new THREE.MeshBasicMaterial({ map: floorTex, transparent: true, opacity: 0.95 })\r\n    );\r\n    floor.rotation.x = -Math.PI \/ 2;\r\n    floor.position.y = -0.5;\r\n    scene.add(floor);\r\n\r\n    \/* ===== Decorative arches in the distance ===== *\/\r\n    function makeArch(x, z, scale, color, op) {\r\n      const archShape = new THREE.Shape();\r\n      archShape.moveTo(-0.6, 0);\r\n      archShape.lineTo(-0.6, 1.4);\r\n      archShape.quadraticCurveTo(-0.6, 1.9, 0, 1.9);\r\n      archShape.quadraticCurveTo(0.6, 1.9, 0.6, 1.4);\r\n      archShape.lineTo(0.6, 0);\r\n      const hole = new THREE.Path();\r\n      hole.moveTo(-0.42, 0);\r\n      hole.lineTo(-0.42, 1.3);\r\n      hole.quadraticCurveTo(-0.42, 1.72, 0, 1.72);\r\n      hole.quadraticCurveTo(0.42, 1.72, 0.42, 1.3);\r\n      hole.lineTo(0.42, 0);\r\n      archShape.holes.push(hole);\r\n      const arch = new THREE.Mesh(\r\n        new THREE.ShapeGeometry(archShape),\r\n        new THREE.MeshBasicMaterial({ color, transparent: true, opacity: op, side: THREE.DoubleSide })\r\n      );\r\n      arch.position.set(x, -0.5, z);\r\n      arch.scale.setScalar(scale);\r\n      return arch;\r\n    }\r\n    scene.add(makeArch(0, -12, 2.2, 0xffffff, 0.18));\r\n    scene.add(makeArch(0, -16, 3.0, 0xffffff, 0.16));\r\n    scene.add(makeArch(0, -20, 4.0, 0xC86A1F, 0.22));\r\n\r\n    \/* ===== Subtle ambient particles (gold dust only) ===== *\/\r\n    const partGeo = new THREE.BufferGeometry();\r\n    const partCount = 400;\r\n    const partPos = new Float32Array(partCount * 3);\r\n    for (let i = 0; i < partCount; i++) {\r\n      partPos[i*3]     = (Math.random() - 0.5) * 28;\r\n      partPos[i*3 + 1] = Math.random() * 6 - 0.4;\r\n      partPos[i*3 + 2] = (Math.random() - 0.5) * 28;\r\n    }\r\n    partGeo.setAttribute('position', new THREE.BufferAttribute(partPos, 3));\r\n    const particles = new THREE.Points(partGeo, new THREE.PointsMaterial({\r\n      size: 0.04, color: 0xffffff, transparent: true, opacity: 0.45,\r\n      blending: THREE.AdditiveBlending, depthWrite: false\r\n    }));\r\n    scene.add(particles);\r\n\r\n    \/* ===== Pedestals (simple white marble cylinders with copper rim) ===== *\/\r\n    function makePedestal(x, z, isHero) {\r\n      const group = new THREE.Group();\r\n      const h = isHero ? 0.5 : 0.4;\r\n      const w = isHero ? 1.3 : 1.1;\r\n      const cyl = new THREE.Mesh(\r\n        new THREE.CylinderGeometry(w*0.5, w*0.52, h, 32),\r\n        new THREE.MeshBasicMaterial({ color: 0xfaf4e8 })\r\n      );\r\n      cyl.position.y = h\/2 - 0.5;\r\n      const topRing = new THREE.Mesh(\r\n        new THREE.CylinderGeometry(w*0.5 + 0.02, w*0.5 + 0.02, 0.025, 32),\r\n        new THREE.MeshBasicMaterial({ color: 0xC86A1F })\r\n      );\r\n      topRing.position.y = h - 0.5 + 0.012;\r\n      const botRing = new THREE.Mesh(\r\n        new THREE.CylinderGeometry(w*0.52 + 0.02, w*0.52 + 0.02, 0.022, 32),\r\n        new THREE.MeshBasicMaterial({ color: 0xC86A1F })\r\n      );\r\n      botRing.position.y = -0.5 + 0.011;\r\n      group.add(cyl, topRing, botRing);\r\n      group.position.set(x, 0, z);\r\n      return group;\r\n    }\r\n\r\n    \/* ===== Build product gallery \u2014 CLEAN, NO EFFECTS ON IMAGES ===== *\/\r\n    const galleryGroup = new THREE.Group();\r\n    scene.add(galleryGroup);\r\n    const cards = [];\r\n    const cardsByProductIndex = new Map();\r\n    const texLoader = new THREE.TextureLoader();\r\n\r\n    const positions = {\r\n      'center':    { angle: 0,       radius: 3.8, scale: 1.0 },\r\n      'left':      { angle: -0.50,   radius: 5.0, scale: 0.92 },\r\n      'right':     { angle:  0.50,   radius: 5.0, scale: 0.92 },\r\n      'left-far':  { angle: -0.95,   radius: 6.3, scale: 0.85 },\r\n      'right-far': { angle:  0.95,   radius: 6.3, scale: 0.85 },\r\n    };\r\n\r\n    \/\/ On tablet, tighten the arc since fewer products\r\n    if (tablet) {\r\n      positions.left.angle = -0.65;\r\n      positions.left.radius = 5.5;\r\n      positions.right.angle = 0.65;\r\n      positions.right.radius = 5.5;\r\n    }\r\n\r\n    productsIn3D.forEach((product, localIdx) => {\r\n      const origIdx = indexMap[localIdx];\r\n      const slot = typeof product.slot === 'number' ? product.slot : localIdx - ((productsIn3D.length - 1) \/ 2);\r\n      const absSlot = Math.abs(slot);\r\n      const desktopGap = 0.40;\r\n      const desktopRadius = 6.0 + Math.min(absSlot, 6) * 0.42;\r\n      const desktopScale = Math.max(0.68, 0.91 - Math.min(absSlot, 6) * 0.025);\r\n      const pos = {\r\n        \/\/ Wider desktop arc: the 13 cards breathe and users rotate the showroom to see the rest.\r\n        angle: slot * (tablet ? 0.27 : desktopGap),\r\n        radius: product.isHero ? 4.1 : (tablet ? 5.4 + Math.min(absSlot, 6) * 0.30 : desktopRadius),\r\n        scale: product.isHero ? 1.02 : (tablet ? Math.max(0.70, 0.92 - Math.min(absSlot, 6) * 0.03) : desktopScale)\r\n      };\r\n      const x = Math.sin(pos.angle) * pos.radius;\r\n      const z = -Math.cos(pos.angle) * pos.radius;\r\n\r\n      const aspect = product.aspect;\r\n      const baseHeight = product.isHero ? 3.2 : 2.7;\r\n      const h = baseHeight * pos.scale;\r\n      const w = h * aspect;\r\n\r\n      \/\/ Pedestal\r\n      const ped = makePedestal(x, z, product.isHero);\r\n      galleryGroup.add(ped);\r\n\r\n      \/\/ Texture with CRISP settings\r\n      const tex = texLoader.load(IMAGES[product.image]);\r\n      tex.anisotropy = renderer.capabilities.getMaxAnisotropy();\r\n      tex.minFilter = THREE.LinearFilter;\r\n      tex.magFilter = THREE.LinearFilter;\r\n      tex.generateMipmaps = false;\r\n      if (THREE.SRGBColorSpace !== undefined) {\r\n        tex.colorSpace = THREE.SRGBColorSpace;\r\n      }\r\n\r\n      \/\/ CLEAN image plane \u2014 no blending, no transparency tricks\r\n      const imgMat = new THREE.MeshBasicMaterial({\r\n        map: tex,\r\n        transparent: true,\r\n        side: THREE.DoubleSide,\r\n        toneMapped: false\r\n      });\r\n      const card = new THREE.Mesh(new THREE.PlaneGeometry(w, h), imgMat);\r\n\r\n      const baseY = product.isHero ? 1.85 : 1.6;\r\n      card.position.set(x, baseY, z);\r\n      card.lookAt(0, baseY, 0);\r\n\r\n      const lookTarget = new THREE.Vector3(0, baseY, 0);\r\n      const fwd = new THREE.Vector3().subVectors(lookTarget, card.position).normalize();\r\n\r\n      \/\/ Simple white backing (slightly behind image, only visible at edges)\r\n      const frame = new THREE.Mesh(\r\n        new THREE.PlaneGeometry(w + 0.10, h + 0.10),\r\n        new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 1 })\r\n      );\r\n      frame.position.copy(card.position).add(fwd.clone().multiplyScalar(-0.008));\r\n      frame.lookAt(0, baseY, 0);\r\n\r\n      \/\/ Thin copper outer border\r\n      const borderMat = new THREE.MeshBasicMaterial({\r\n        color: 0xC86A1F,\r\n        transparent: true,\r\n        opacity: product.isHero ? 0.85 : 0.65\r\n      });\r\n      const border = new THREE.Mesh(\r\n        new THREE.PlaneGeometry(w + 0.16, h + 0.16),\r\n        borderMat\r\n      );\r\n      border.position.copy(card.position).add(fwd.clone().multiplyScalar(-0.012));\r\n      border.lookAt(0, baseY, 0);\r\n\r\n      galleryGroup.add(border, frame, card);\r\n\r\n      card.userData = {\r\n        product, origIdx, localIdx,\r\n        border, frame, ped,\r\n        baseY, pos\r\n      };\r\n      cards.push(card);\r\n      cardsByProductIndex.set(origIdx, card);\r\n    });\r\n\r\n    \/* ===== Build sidebar index (ALL products, including those not in 3D) ===== *\/\r\n    PRODUCTS.forEach((p, i) => {\r\n      const item = document.createElement('div');\r\n      item.className = 'hd-idx-item' + (p.isHero ? ' hd-hero-badge' : '');\r\n      item.innerHTML = `\r\n        <span class=\"hd-idx-label\">${escapeHtml(p.indexName)}<\/span>\r\n        <span class=\"hd-idx-num\">${String(i+1).padStart(2,'0')}<\/span>\r\n      `;\r\n      item.addEventListener('mouseenter', () => cursor.classList.add('hd-hover'));\r\n      item.addEventListener('mouseleave', () => cursor.classList.remove('hd-hover'));\r\n      item.addEventListener('mousedown', (e) => e.stopPropagation());\r\n      item.addEventListener('mouseup', (e) => {\r\n        isDragging = false;\r\n        e.stopPropagation();\r\n      });\r\n      item.addEventListener('pointerdown', (e) => e.stopPropagation());\r\n      item.addEventListener('pointerup', (e) => {\r\n        isDragging = false;\r\n        e.stopPropagation();\r\n      });\r\n      item.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });\r\n      item.addEventListener('touchend', (e) => {\r\n        isDragging = false;\r\n        e.stopPropagation();\r\n      });\r\n      item.addEventListener('click', (e) => {\r\n        e.stopPropagation();\r\n        openDetailByIndex(i);\r\n      });\r\n      item.addEventListener('keydown', (e) => {\r\n        if (e.key !== 'Enter' && e.key !== ' ') return;\r\n        e.preventDefault();\r\n        openDetailByIndex(i);\r\n      });\r\n      item.setAttribute('role', 'button');\r\n      item.setAttribute('tabindex', '0');\r\n      idxContainer.appendChild(item);\r\n    });\r\n\r\n    \/* ===== Interaction ===== *\/\r\n    const raycaster = new THREE.Raycaster();\r\n    const mouseVec = new THREE.Vector2();\r\n    let hovered = null, selected = null;\r\n    let pX = 0, pY = 0;\r\n    let tYaw = 0, tPitch = 0, cYaw = 0, cPitch = 0;\r\n    let gTarget = 0, gCurr = 0;\r\n    let zTarget = 7, zCurr = 7;\r\n    let isDragging = false, dragX = 0, dragRot = 0;\r\n\r\n    function onPointerMove(e) {\r\n      const r = stage.getBoundingClientRect();\r\n      const lx = e.clientX - r.left, ly = e.clientY - r.top;\r\n      pX = (lx \/ W) * 2 - 1;\r\n      pY = -(ly \/ H) * 2 + 1;\r\n      mouseVec.x = pX; mouseVec.y = pY;\r\n      cursor.style.left = lx + 'px';\r\n      cursor.style.top = ly + 'px';\r\n      if (isUiTarget(e.target)) {\r\n        hovered = null;\r\n        return;\r\n      }\r\n      if (!selected) {\r\n        tYaw = pX * 0.20;\r\n        tPitch = -pY * 0.06;\r\n      }\r\n      if (isDragging) gTarget = dragRot + (e.clientX - dragX) * 0.004;\r\n    }\r\n    function onPointerDown(e) {\r\n      if (isUiTarget(e.target)) return;\r\n      isDragging = true; dragX = e.clientX; dragRot = gTarget;\r\n    }\r\n    function onPointerUp(e) {\r\n      const moved = Math.abs(e.clientX - dragX);\r\n      isDragging = false;\r\n      if (moved < 5 && !isUiTarget(e.target)) {\r\n        handleClick(pickCardAt(e.clientX, e.clientY));\r\n      }\r\n    }\r\n    function onWheel(e) {\r\n      if (selected || !e.altKey) return;\r\n      e.preventDefault();\r\n      zTarget += e.deltaY * 0.003;\r\n      zTarget = Math.max(4, Math.min(10, zTarget));\r\n    }\r\n    function isUiTarget(el) {\r\n      return el.closest('.hd-detail') || el.closest('.hd-index') ||\r\n             el.closest('.hd-hero') || el.closest('.hd-cta') ||\r\n             el.closest('.hd-strip');\r\n    }\r\n    function nearestGalleryRotation(angle) {\r\n      const base = angle;\r\n      const turn = Math.PI * 2;\r\n      return base + Math.round((gCurr - base) \/ turn) * turn;\r\n    }\r\n    function focusCard(card) {\r\n      const pos = card && card.userData && card.userData.pos;\r\n      if (!pos) return;\r\n      gTarget = nearestGalleryRotation(pos.angle || 0);\r\n      zTarget = card.userData.product && card.userData.product.isHero ? 6.4 : 6.0;\r\n      tYaw = 0;\r\n      tPitch = 0;\r\n      hovered = null;\r\n      cursor.classList.remove('hd-hover');\r\n    }\r\n    function pickCardAt(clientX, clientY) {\r\n      const r = stage.getBoundingClientRect();\r\n      const lx = clientX - r.left;\r\n      const ly = clientY - r.top;\r\n      if (lx < 0 || ly < 0 || lx > r.width || ly > r.height) return null;\r\n      mouseVec.x = (lx \/ r.width) * 2 - 1;\r\n      mouseVec.y = -(ly \/ r.height) * 2 + 1;\r\n      scene.updateMatrixWorld(true);\r\n      raycaster.setFromCamera(mouseVec, camera);\r\n      const hits = raycaster.intersectObjects(cards, false);\r\n      return hits.length ? hits[0].object : null;\r\n    }\r\n    function handleClick(clickedCard) {\r\n      if (clickedCard) {\r\n        openDetail(clickedCard);\r\n        return;\r\n      }\r\n      if (selected) { closeDetail(); return; }\r\n      if (hovered) openDetail(hovered);\r\n    }\r\n    function openDetailByIndex(productIdx) {\r\n      const card = cardsByProductIndex.get(productIdx);\r\n      if (card) { openDetail(card); return; }\r\n      const p = PRODUCTS[productIdx];\r\n      selected = null;\r\n      fillDetail(p, productIdx);\r\n      showDetailPanel();\r\n    }\r\n    function showDetailPanel() {\r\n      root.classList.add('hd-detail-open');\r\n      detail.classList.add('hd-show');\r\n      detail.setAttribute('aria-hidden', 'false');\r\n      quoteEl.classList.add('hd-show');\r\n      counterEl.classList.add('hd-show');\r\n    }\r\n    function focusStripCard(productIdx) {\r\n      root.querySelectorAll('.hd-strip-card').forEach((el) => {\r\n        el.classList.toggle('hd-active', Number(el.dataset.idx) === productIdx);\r\n      });\r\n      const stripCard = root.querySelector(`.hd-strip-card[data-idx=\"${productIdx}\"]`);\r\n      if (!stripCard || !stripCard.getClientRects().length) return;\r\n      stripCard.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\r\n    }\r\n    function fillDetail(p, origIdx) {\r\n      root.querySelector('[data-hd-d-cat]').textContent = p.category;\r\n      root.querySelector('[data-hd-d-name]').innerHTML = p.name;\r\n      root.querySelector('[data-hd-d-model]').textContent = p.model;\r\n      const descEl = root.querySelector('[data-hd-d-desc]');\r\n      descEl.textContent = p.description || '';\r\n      descEl.hidden = !p.description;\r\n      const featContainer = root.querySelector('[data-hd-d-features]');\r\n      featContainer.innerHTML = '';\r\n      (p.categoryRows || p.features || []).forEach(f => {\r\n        const div = document.createElement('div');\r\n        div.className = 'hd-feat';\r\n        div.innerHTML = `<dt>${escapeHtml(f.label)}<\/dt><dd>${escapeHtml(f.value)}<\/dd>`;\r\n        featContainer.appendChild(div);\r\n      });\r\n      const detailCta = root.querySelector('.hd-detail-cta');\r\n      detailCta.href = p.categoryUrl || '#';\r\n      detailCta.textContent = p.ctaLabel || 'View category';\r\n      counterNum.textContent = String(origIdx + 1).padStart(2, '0');\r\n      counterLabel.textContent = p.indexName;\r\n      root.querySelectorAll('.hd-idx-item').forEach((el, i) => {\r\n        el.classList.toggle('hd-active', i === origIdx);\r\n      });\r\n      focusStripCard(origIdx);\r\n    }\r\n    function openDetail(card) {\r\n      focusCard(card);\r\n      selected = card;\r\n      const p = card.userData.product;\r\n      fillDetail(p, card.userData.origIdx);\r\n      showDetailPanel();\r\n    }\r\n    function closeDetail() {\r\n      selected = null;\r\n      root.classList.remove('hd-detail-open');\r\n      detail.classList.remove('hd-show');\r\n      detail.setAttribute('aria-hidden', 'true');\r\n      quoteEl.classList.remove('hd-show');\r\n      counterEl.classList.remove('hd-show');\r\n      gTarget = nearestGalleryRotation(0);\r\n      zTarget = 7;\r\n      root.querySelectorAll('.hd-idx-item').forEach(el => el.classList.remove('hd-active'));\r\n      root.querySelectorAll('.hd-strip-card').forEach(el => el.classList.remove('hd-active'));\r\n    }\r\n\r\n    \/\/ Expose for tablet strip clicks\r\n    window.__hdOpenDetail = openDetailByIndex;\r\n\r\n    function eventPoint(e) {\r\n      const t = e.touches && e.touches[0] ? e.touches[0] : (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0] : e);\r\n      if (typeof t.clientX !== 'number' || typeof t.clientY !== 'number') return null;\r\n      return { x: t.clientX, y: t.clientY };\r\n    }\r\n    function pointInsideRect(e, el, pad = 0) {\r\n      const p = eventPoint(e);\r\n      if (!p || !el || !el.getClientRects().length) return false;\r\n      const r = el.getBoundingClientRect();\r\n      return p.x >= r.left - pad && p.x <= r.right + pad && p.y >= r.top - pad && p.y <= r.bottom + pad;\r\n    }\r\n    function ctaAtPoint(e) {\r\n      const targetLink = e.target && e.target.closest ? e.target.closest('.hd-detail-cta, .hd-mob-cta') : null;\r\n      if (targetLink && root.contains(targetLink)) return targetLink;\r\n      return Array.from(root.querySelectorAll('.hd-detail-cta, .hd-mob-cta')).find(link => pointInsideRect(e, link, 0)) || null;\r\n    }\r\n    function activateCta(e) {\r\n      const link = ctaAtPoint(e);\r\n      if (!link) return;\r\n      const href = link.getAttribute('href');\r\n      if (!href || href === '#') return;\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      if (e.stopImmediatePropagation) e.stopImmediatePropagation();\r\n      window.location.assign(href);\r\n    }\r\n    ['click', 'pointerup', 'touchend'].forEach(eventName => {\r\n      document.addEventListener(eventName, activateCta, { capture: true, passive: false });\r\n    });\r\n\r\n    function onDetailClose(e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      if (e.stopImmediatePropagation) e.stopImmediatePropagation();\r\n      isDragging = false;\r\n      cursor.classList.remove('hd-hover');\r\n      closeDetail();\r\n    }\r\n    function closeHit(e) {\r\n      return root.contains(e.target) && (\r\n        (e.target.closest && e.target.closest('[data-hd-d-close]')) ||\r\n        pointInsideRect(e, detailClose, 12)\r\n      );\r\n    }\r\n    function handleCloseCapture(e) {\r\n      if (!closeHit(e)) return;\r\n      onDetailClose(e);\r\n    }\r\n    ['pointerdown', 'mousedown', 'click', 'pointerup'].forEach(eventName => {\r\n      detailClose.addEventListener(eventName, onDetailClose, true);\r\n      document.addEventListener(eventName, handleCloseCapture, { capture: true, passive: false });\r\n    });\r\n    detailClose.addEventListener('touchstart', onDetailClose, { passive: false });\r\n    document.addEventListener('touchstart', handleCloseCapture, { passive: false, capture: true });\r\n    detailClose.addEventListener('mouseenter', () => cursor.classList.remove('hd-hover'));\r\n    detailClose.addEventListener('mouseleave', () => cursor.classList.remove('hd-hover'));\r\n    document.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Escape' && detail.classList.contains('hd-show')) closeDetail();\r\n    });\r\n\r\n    root.addEventListener('mousemove', onPointerMove);\r\n    root.addEventListener('mousedown', onPointerDown);\r\n    root.addEventListener('mouseup', onPointerUp);\r\n    root.addEventListener('wheel', onWheel, { passive: false });\r\n\r\n    \/\/ Touch\r\n    let tStartX = 0, tStartActive = false;\r\n    stage.addEventListener('touchstart', (e) => {\r\n      if (e.touches.length === 1) {\r\n        tStartX = e.touches[0].clientX;\r\n        dragX = e.touches[0].clientX;\r\n        dragRot = gTarget; tStartActive = true;\r\n      }\r\n    }, { passive: true });\r\n    stage.addEventListener('touchmove', (e) => {\r\n      if (e.touches.length === 1 && tStartActive) {\r\n        gTarget = dragRot + (e.touches[0].clientX - tStartX) * 0.005;\r\n      }\r\n    }, { passive: true });\r\n    stage.addEventListener('touchend', () => { tStartActive = false; });\r\n\r\n    root.querySelectorAll('[data-hd-cta], .hd-detail-cta').forEach(el => {\r\n      el.addEventListener('mouseenter', () => cursor.classList.add('hd-hover'));\r\n      el.addEventListener('mouseleave', () => cursor.classList.remove('hd-hover'));\r\n    });\r\n\r\n    \/* ===== Resize: rebuild on viewport mode change ===== *\/\r\n    let lastMode = isMobile() ? 'mobile' : (isTablet() ? 'tablet' : 'desktop');\r\n    function onResize() {\r\n      W = stage.clientWidth || root.clientWidth;\r\n      H = stage.clientHeight || root.clientHeight;\r\n      camera.aspect = W \/ H;\r\n      camera.updateProjectionMatrix();\r\n      renderer.setSize(W, H);\r\n      \/\/ Detect mode change \u2192 suggest reload for clean state\r\n      const newMode = isMobile() ? 'mobile' : (isTablet() ? 'tablet' : 'desktop');\r\n      if (newMode !== lastMode) {\r\n        lastMode = newMode;\r\n        \/\/ Soft reload: re-init by reloading the page (cleanest path)\r\n        location.reload();\r\n      }\r\n    }\r\n    window.addEventListener('resize', debounce(onResize, 250));\r\n\r\n    function debounce(fn, ms) {\r\n      let t; return function(...a){ clearTimeout(t); t = setTimeout(() => fn.apply(this,a), ms); };\r\n    }\r\n\r\n    \/* ===== Animation loop \u2014 NO float, clean motion ===== *\/\r\n    const clock = new THREE.Clock();\r\n    let introT = 0;\r\n\r\n    function animate() {\r\n      requestAnimationFrame(animate);\r\n      const dt = clock.getDelta();\r\n      const t = clock.getElapsedTime();\r\n\r\n      \/\/ Intro dolly-in\r\n      if (introT < 1) {\r\n        introT = Math.min(1, introT + dt * 0.32);\r\n        const e = 1 - Math.pow(1 - introT, 3);\r\n        camera.position.z = 11 - e * 4;\r\n        camera.position.y = 2.6 - e * 0.9;\r\n      }\r\n\r\n      cYaw += (tYaw - cYaw) * 0.05;\r\n      cPitch += (tPitch - cPitch) * 0.05;\r\n      gCurr += (gTarget - gCurr) * 0.06;\r\n      galleryGroup.rotation.y = gCurr;\r\n\r\n      if (!selected) {\r\n        zCurr += (zTarget - zCurr) * 0.06;\r\n        if (introT >= 1) camera.position.z = zCurr;\r\n        camera.rotation.order = 'YXZ';\r\n        camera.rotation.y = cYaw;\r\n        camera.rotation.x = cPitch;\r\n        camera.position.y = 1.7 + cPitch * 0.4;\r\n\r\n        raycaster.setFromCamera(mouseVec, camera);\r\n        const hits = raycaster.intersectObjects(cards);\r\n        const newHover = (hits.length && !isDragging) ? hits[0].object : null;\r\n        if (newHover !== hovered) {\r\n          hovered = newHover;\r\n          cursor.classList.toggle('hd-hover', !!hovered);\r\n        }\r\n      } else {\r\n        zCurr += (zTarget - zCurr) * 0.06;\r\n        if (introT >= 1) camera.position.z = zCurr;\r\n        const tgt = new THREE.Vector3();\r\n        selected.getWorldPosition(tgt);\r\n        const dir = tgt.sub(camera.position).normalize();\r\n        const dYaw = Math.atan2(dir.x, -dir.z);\r\n        const dPitch = Math.asin(dir.y) * 0.4;\r\n        cYaw += (dYaw - cYaw) * 0.05;\r\n        cPitch += (dPitch - cPitch) * 0.05;\r\n        camera.rotation.order = 'YXZ';\r\n        camera.rotation.y = cYaw;\r\n        camera.rotation.x = cPitch;\r\n      }\r\n\r\n      \/\/ Card states: scale + opacity ONLY, no float, no glow\r\n      cards.forEach(card => {\r\n        const ud = card.userData;\r\n        let tScale = ud.pos.scale;\r\n        let tOpacity = 1;\r\n        let tFrameOpacity = 1;\r\n        let tBorderOpacity = ud.product.isHero ? 0.85 : 0.65;\r\n\r\n        if (selected) {\r\n          if (card === selected) {\r\n            tScale = ud.pos.scale * 1.18;\r\n            tBorderOpacity = 1;\r\n          } else {\r\n            tOpacity = 0.18;\r\n            tFrameOpacity = 0.16;\r\n            tBorderOpacity = 0.12;\r\n          }\r\n        } else if (hovered) {\r\n          if (card === hovered) {\r\n            tScale = ud.pos.scale * 1.05;\r\n            tBorderOpacity = 0.9;\r\n          } else {\r\n            tOpacity = 0.6;\r\n            tFrameOpacity = 0.55;\r\n            tBorderOpacity = 0.35;\r\n          }\r\n        }\r\n\r\n        card.scale.x += (tScale - card.scale.x) * 0.1;\r\n        card.scale.y += (tScale - card.scale.y) * 0.1;\r\n        card.material.opacity += (tOpacity - card.material.opacity) * 0.1;\r\n\r\n        if (ud.frame) {\r\n          ud.frame.scale.x = card.scale.x;\r\n          ud.frame.scale.y = card.scale.y;\r\n          ud.frame.material.opacity += (tFrameOpacity - ud.frame.material.opacity) * 0.1;\r\n        }\r\n        if (ud.border) {\r\n          ud.border.scale.x = card.scale.x;\r\n          ud.border.scale.y = card.scale.y;\r\n          ud.border.material.opacity += (tBorderOpacity - ud.border.material.opacity) * 0.1;\r\n        }\r\n        \/\/ Position stays static \u2014 no float animation\r\n        card.position.y = ud.baseY;\r\n        if (ud.frame) ud.frame.position.y = ud.baseY;\r\n        if (ud.border) ud.border.position.y = ud.baseY;\r\n      });\r\n\r\n      \/\/ Particles drift gently\r\n      const pPos = particles.geometry.attributes.position.array;\r\n      for (let i = 0; i < pPos.length \/ 3; i++) {\r\n        pPos[i*3 + 1] += 0.006;\r\n        if (pPos[i*3 + 1] > 6) pPos[i*3 + 1] = -0.4;\r\n      }\r\n      particles.geometry.attributes.position.needsUpdate = true;\r\n      particles.rotation.y += 0.0003;\r\n\r\n      renderer.render(scene, camera);\r\n    }\r\n\r\n    function startup() {\r\n      loader.classList.add('hd-hidden');\r\n      ui.classList.add('hd-visible');\r\n      animate();\r\n    }\r\n    setTimeout(startup, 1200);\r\n    setTimeout(() => {\r\n      if (!loader.classList.contains('hd-hidden')) startup();\r\n    }, 3500);\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>Hidrodoko \u00b7 2026 Collection \u00b7 Preview 2026 COLLECTION \u00b7 DIGITAL ATELIER 2026 Collection Your bathroom, completed. From solar energy to the smallest details \u2014 here are the products that transform every modern bathroom. Explore the collection 00 \u00d7 View category &#8220;The modern bathroom begins with energy. From there, everything else follows naturally.&#8221; A GROUP H.M.D [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":649,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-124","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pjes\u00eb e A Group - Hidro Doko<\/title>\n<meta name=\"description\" content=\"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hidrodoko.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pjes\u00eb e A Group - Hidro Doko\" \/>\n<meta property=\"og:description\" content=\"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hidrodoko.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"Hidro Doko\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-29T13:38:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"55 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"name\":\"Pjes\u00eb e A Group - Hidro Doko\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"datePublished\":\"2026-05-15T15:33:50+00:00\",\"dateModified\":\"2026-06-29T13:38:14+00:00\",\"description\":\"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hidrodoko.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"contentUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"width\":1000,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hidrodoko.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pjes\u00eb e A Group\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#website\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"name\":\"Hidro Doko\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hidrodoko.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#organization\",\"name\":\"Hidro Doko\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"contentUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"width\":1000,\"height\":600,\"caption\":\"Hidro Doko\"},\"image\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pjes\u00eb e A Group - Hidro Doko","description":"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hidrodoko.com\/en\/","og_locale":"en_US","og_type":"article","og_title":"Pjes\u00eb e A Group - Hidro Doko","og_description":"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike","og_url":"https:\/\/hidrodoko.com\/en\/","og_site_name":"Hidro Doko","article_modified_time":"2026-06-29T13:38:14+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"55 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hidrodoko.com\/","url":"https:\/\/hidrodoko.com\/","name":"Pjes\u00eb e A Group - Hidro Doko","isPartOf":{"@id":"https:\/\/hidrodoko.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hidrodoko.com\/#primaryimage"},"image":{"@id":"https:\/\/hidrodoko.com\/#primaryimage"},"thumbnailUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","datePublished":"2026-05-15T15:33:50+00:00","dateModified":"2026-06-29T13:38:14+00:00","description":"Hidro Doko, pjes\u00eb e A Group me 35 vite eksperienc\u00eb n\u00eb jugun e Shqip\u00ebris\u00eb sjell tek ju produktet hidrosanitare m\u00eb cil\u00ebsore me \u00e7mime fantastike","breadcrumb":{"@id":"https:\/\/hidrodoko.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hidrodoko.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hidrodoko.com\/#primaryimage","url":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","contentUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","width":1000,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/hidrodoko.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hidrodoko.com\/"},{"@type":"ListItem","position":2,"name":"Pjes\u00eb e A Group"}]},{"@type":"WebSite","@id":"https:\/\/hidrodoko.com\/#website","url":"https:\/\/hidrodoko.com\/","name":"Hidro Doko","description":"","publisher":{"@id":"https:\/\/hidrodoko.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hidrodoko.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hidrodoko.com\/#organization","name":"Hidro Doko","url":"https:\/\/hidrodoko.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hidrodoko.com\/#\/schema\/logo\/image\/","url":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","contentUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","width":1000,"height":600,"caption":"Hidro Doko"},"image":{"@id":"https:\/\/hidrodoko.com\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":152,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/124\/revisions\/1174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/media\/649"}],"wp:attachment":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}