{"id":7012,"date":"2023-05-11T14:53:01","date_gmt":"2023-05-11T11:53:01","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/feel-and-design\/"},"modified":"2026-01-23T13:02:34","modified_gmt":"2026-01-23T11:02:34","slug":"feel-and-design","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/feel-and-design\/","title":{"rendered":"Feel and Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7012\" class=\"elementor elementor-7012 elementor-2264\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-494550c e-flex e-con-boxed e-con e-parent\" data-id=\"494550c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65dc9e0 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"65dc9e0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/www.berling.gr\/wp-content\/uploads\/fandeck_berling_feel_and_design_2024.jpg\" class=\"attachment-full size-full wp-image-12554\" alt=\"\" srcset=\"https:\/\/www.berling.gr\/wp-content\/uploads\/fandeck_berling_feel_and_design_2024.jpg 600w, https:\/\/www.berling.gr\/wp-content\/uploads\/fandeck_berling_feel_and_design_2024-300x300.jpg 300w, https:\/\/www.berling.gr\/wp-content\/uploads\/fandeck_berling_feel_and_design_2024-150x150.jpg 150w, https:\/\/www.berling.gr\/wp-content\/uploads\/fandeck_berling_feel_and_design_2024-100x100.jpg 100w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66f5525 elementor-widget elementor-widget-heading\" data-id=\"66f5525\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Feel and Design<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-17f98a6 e-flex e-con-boxed e-con e-parent\" data-id=\"17f98a6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ced1953 elementor-widget elementor-widget-text-editor\" data-id=\"ced1953\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Berling&#8217;s new <strong>FEEL &amp; DESIGN<\/strong> color palette has arrived to revive the senses, recall memories and evoke emotions. Now, we can open our eyes and discover color beyond its literal meaning. We can feel the whole spectrum of human emotions through the shades and combinations of the unique <strong>FEEL &amp; DESIGN<\/strong> palette, fill us with joy, give us smiles, offer us a sense of calmness and harmony, as we travel to cherished moments. By incorporating our aesthetic choices, we can create spaces that reflect our personal style.<\/p><p>The <strong>FEEL &amp; DESIGN<\/strong> palette was created based on the many years of experience of our scientific staff and was inspired by our desire to offer an unprecedentedly unique color selection experience. For easier selection, the palette is organized by color scale. With more than 504 new shades, designed to meet your unique needs, the palette is here to harmonize each color individually and adapt to every surface &#8211; from walls, woods and metals to chalk colors, which give a vintage feel and romantic mood indoors and outdoors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1d3d23 elementor-widget elementor-widget-html\" data-id=\"b1d3d23\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"berling-fandeck-page\" class=\"bf\" data-json=\"\/wp-content\/uploads\/berling-fandecks\/feel-and-design.json\"><\/div>\n\n<script>\n(() => {\n  const mount = document.getElementById(\"berling-fandeck-page\");\n  if (!mount) return;\n  const DATA_URL = mount.dataset.json;\n\n  \/\/ --- WPML language detection (from <html lang=\"el\"> \/ <html lang=\"en-US\"> etc.)\n  const rawLang = (document.documentElement.getAttribute(\"lang\") || \"en\").toLowerCase();\n  const lang = rawLang.startsWith(\"el\") ? \"el\" : \"en\";\n\n  \/\/ --- i18n dictionary\n  const I18N = {\n    el: {\n      titleDefault: \"\u0392\u03b5\u03bd\u03c4\u03ac\u03bb\u03b9\u03b1 \u03a7\u03c1\u03c9\u03bc\u03ac\u03c4\u03c9\u03bd\",\n      descDefault: \"\u0395\u03c0\u03ad\u03bb\u03b5\u03be\u03b5 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7, \u03b4\u03b5\u03c2 \u03c4\u03b9\u03bc\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03ba\u03ac\u03bd\u03b5 \u03b1\u03bd\u03c4\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae.\",\n      searchPh: \"\u0391\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7 (\u03ba\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 \/ \u03cc\u03bd\u03bf\u03bc\u03b1)\u2026\",\n      catAll: \"\u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u03ba\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b5\u03c2\",\n      moodAll: \"\u038c\u03bb\u03b1 \u03c4\u03b1 \u03c3\u03c4\u03c5\u03bb\",\n      uvFilter: \"\u2600 \u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV)\",\n      uvFilterTitle: \"\u0394\u03b5\u03af\u03be\u03b5 \u03bc\u03cc\u03bd\u03bf \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03b9\u03c2 \u03ba\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7\",\n      sortCode: \"\u039a\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 (ColorID)\",\n      sortCatName: \"\u039a\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b1 \u2192 \u038c\u03bd\u03bf\u03bc\u03b1\",\n      sortNameAsc: \"\u038c\u03bd\u03bf\u03bc\u03b1 (A\u2192Z)\",\n      sortNameDesc: \"\u038c\u03bd\u03bf\u03bc\u03b1 (Z\u2192A)\",\n      sortLightDark: \"\u0391\u03bd\u03bf\u03b9\u03c7\u03c4\u03cc \u2192 \u03a3\u03ba\u03bf\u03cd\u03c1\u03bf\",\n      reset: \"Reset\",\n      statusLoading: \"\u03a6\u03cc\u03c1\u03c4\u03c9\u03c3\u03b7\u2026\",\n      statusUvLegend: \"\u2600 = \u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV resistant)\",\n      noResults: \"\u0394\u03b5\u03bd \u03b2\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1 \u2014 \u03b4\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 reset\/\u03ac\u03bb\u03bb\u03b7 \u03b1\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7.\",\n      modalCategory: \"\u039a\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b1\",\n      modalStyle: \"\u03a3\u03c4\u03c5\u03bb\",\n      modalUse: \"\u03a7\u03c1\u03ae\u03c3\u03b7\",\n      modalHex: \"HEX\",\n      modalRgb: \"RGB\",\n      modalHsl: \"HSL\",\n      copy: \"Copy\",\n      copyAll: \"Copy all\",\n      interiorChip: \"\u0395\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae\",\n      exteriorChip: \"\u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae\",\n      useExterior: \"\u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV Resistant)\",\n      useInterior: \"\u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7\",\n      useExplainExterior: \"\u2600 \u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7: \u03b7 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03b7\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c9\u03c2 UV resistant \u03ba\u03b1\u03b9 \u03c0\u03c1\u03bf\u03c4\u03b5\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03b5\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03ba\u03c4\u03af\u03b8\u03b5\u03bd\u03c4\u03b1\u03b9 \u03c3\u03b5 \u03b7\u03bb\u03b9\u03b1\u03ba\u03ae \u03b1\u03ba\u03c4\u03b9\u03bd\u03bf\u03b2\u03bf\u03bb\u03af\u03b1.\",\n      useExplainInterior: \"\u0393\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7: \u03b7 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7 \u03c0\u03c1\u03bf\u03c4\u03b5\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03ba\u03c5\u03c1\u03af\u03c9\u03c2 \u03b3\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c7\u03ce\u03c1\u03bf\u03c5\u03c2.\",\n      loadingTitle: \"\u03a6\u03cc\u03c1\u03c4\u03c9\u03c3\u03b7 \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03c9\u03bd\u2026\",\n      loadingSub: \"\u03a0\u03b1\u03c1\u03b1\u03ba\u03b1\u03bb\u03ce \u03c0\u03b5\u03c1\u03af\u03bc\u03b5\u03bd\u03b5 \u03bb\u03af\u03b3\u03bf.\",\n      \/\/ Category labels (key -> label)\n      catLabel: {\n        Whites: \"\u039b\u03b5\u03c5\u03ba\u03ac\",\n        Blacks: \"\u039c\u03b1\u03cd\u03c1\u03b1\",\n        Greys: \"\u0393\u03ba\u03c1\u03b9\",\n        Neutrals: \"\u039f\u03c5\u03b4\u03ad\u03c4\u03b5\u03c1\u03b1\",\n        Reds: \"\u039a\u03cc\u03ba\u03ba\u03b9\u03bd\u03b1\",\n        Oranges: \"\u03a0\u03bf\u03c1\u03c4\u03bf\u03ba\u03b1\u03bb\u03af\",\n        Yellows: \"\u039a\u03af\u03c4\u03c1\u03b9\u03bd\u03b1\",\n        \"Yellow-Greens\": \"\u039b\u03b1\u03c7\u03b1\u03bd\u03af\",\n        Greens: \"\u03a0\u03c1\u03ac\u03c3\u03b9\u03bd\u03b1\",\n        Teals: \"\u03a0\u03b5\u03c4\u03c1\u03cc\u03bb\",\n        Blues: \"\u039c\u03c0\u03bb\u03b5\",\n        Purples: \"\u039c\u03c9\u03b2\",\n        Pinks: \"\u03a1\u03bf\u03b6\",\n        Colors: \"\u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1\"\n      },\n      \/\/ Mood\/Style labels\n      moodOptions: {\n        Warm: \"\u0398\u03b5\u03c1\u03bc\u03ac\",\n        Cool: \"\u03a8\u03c5\u03c7\u03c1\u03ac\",\n        Pastel: \"\u03a0\u03b1\u03c3\u03c4\u03ad\u03bb\",\n        Earthy: \"\u0393\u03ae\u03b9\u03bd\u03b1\",\n        Vivid: \"\u0388\u03bd\u03c4\u03bf\u03bd\u03b1\",\n        Neutral: \"\u039f\u03c5\u03b4\u03ad\u03c4\u03b5\u03c1\u03b1\"\n      }\n    },\n    en: {\n      titleDefault: \"Color Fandeck\",\n      descDefault: \"Pick a shade, view values, and copy them.\",\n      searchPh: \"Search (code \/ name)\u2026\",\n      catAll: \"All categories\",\n      moodAll: \"All styles\",\n      uvFilter: \"\u2600 Exterior use (UV)\",\n      uvFilterTitle: \"Show only shades suitable for exterior use\",\n      sortCode: \"Code (ColorID)\",\n      sortCatName: \"Category \u2192 Name\",\n      sortNameAsc: \"Name (A\u2192Z)\",\n      sortNameDesc: \"Name (Z\u2192A)\",\n      sortLightDark: \"Light \u2192 Dark\",\n      reset: \"Reset\",\n      statusLoading: \"Loading\u2026\",\n      statusUvLegend: \"\u2600 = Suitable for exterior use (UV resistant)\",\n      noResults: \"No results \u2014 try reset or a different search.\",\n      modalCategory: \"Category\",\n      modalStyle: \"Style\",\n      modalUse: \"Use\",\n      modalHex: \"HEX\",\n      modalRgb: \"RGB\",\n      modalHsl: \"HSL\",\n      copy: \"Copy\",\n      copyAll: \"Copy all\",\n      interiorChip: \"Interior\",\n      exteriorChip: \"Exterior\",\n      useExterior: \"Suitable for exterior use (UV Resistant)\",\n      useInterior: \"Suitable for interior use\",\n      useExplainExterior: \"\u2600 Suitable for exterior use: this shade is marked UV resistant and recommended for applications exposed to sunlight.\",\n      useExplainInterior: \"For interior use: this shade is mainly recommended for indoor spaces.\",\n      loadingTitle: \"Loading shades\u2026\",\n      loadingSub: \"Please wait a moment.\",\n      catLabel: {\n        Whites: \"Whites\",\n        Blacks: \"Blacks\",\n        Greys: \"Greys\",\n        Neutrals: \"Neutrals\",\n        Reds: \"Reds\",\n        Oranges: \"Oranges\",\n        Yellows: \"Yellows\",\n        \"Yellow-Greens\": \"Yellow-Greens\",\n        Greens: \"Greens\",\n        Teals: \"Teals\",\n        Blues: \"Blues\",\n        Purples: \"Purples\",\n        Pinks: \"Pinks\",\n        Colors: \"Colors\"\n      },\n      moodOptions: {\n        Warm: \"Warm\",\n        Cool: \"Cool\",\n        Pastel: \"Pastel\",\n        Earthy: \"Earthy\",\n        Vivid: \"Vivid\",\n        Neutral: \"Neutral\"\n      }\n    }\n  };\n\n  const T = I18N[lang];\n  const catDisplay = (key) => (T.catLabel && T.catLabel[key]) ? T.catLabel[key] : (key || \"\");\n  const moodDisplay = (key) => (T.moodOptions && T.moodOptions[key]) ? T.moodOptions[key] : (key || \"\");\n\n  \/\/ Elementor global colors (fallbacks)\n  const css = getComputedStyle(document.documentElement);\n  const E_PRIMARY = css.getPropertyValue(\"--e-global-color-primary\").trim();\n  const E_TEXT = css.getPropertyValue(\"--e-global-color-text\").trim();\n  const E_ACCENT = css.getPropertyValue(\"--e-global-color-accent\").trim();\n\n  const theme = {\n    line: \"rgba(0,0,0,.12)\",\n    text: E_TEXT || \"rgba(0,0,0,.88)\",\n    muted: \"rgba(0,0,0,.60)\",\n    accent: E_ACCENT || E_PRIMARY || \"#0ea5e9\",\n    panel: \"rgba(255,255,255,.85)\"\n  };\n\n  mount.innerHTML = `\n  <style>\n    .bf{ --line:${theme.line}; --text:${theme.text}; --muted:${theme.muted}; --accent:${theme.accent}; --panel:${theme.panel};\n         color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }\n    .bf *{ box-sizing:border-box; }\n\n    .bf__wrap{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; }\n    .bf__top{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }\n    .bf__title h2{ margin:0; font-size:24px; letter-spacing:.2px; }\n    .bf__title p{ margin:6px 0 0; color:var(--muted); font-size:14px; }\n\n    .bf__controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n    .bf__search{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;\n                 border:1px solid var(--line); background:rgba(255,255,255,.65); min-width:320px; }\n    .bf__search input{ border:0; outline:0; background:transparent; color:var(--text); width:100%; font-size:14px; }\n    .bf select{ padding:10px 12px; border-radius:999px; border:1px solid var(--line);\n                background:rgba(255,255,255,.65); color:var(--text); font-size:14px; }\n    .bf select option{ color:#111; }\n\n    .bf__toggle{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;\n                 border:1px solid var(--line); background:rgba(255,255,255,.65); font-size:14px; color:var(--muted); }\n    .bf__toggle input{ accent-color:var(--accent); }\n\n    .bf__btn{ padding:10px 14px; border-radius:999px; border:1px solid var(--line);\n              background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); cursor:pointer; }\n    .bf__btn:hover{ filter:brightness(1.03); }\n\n    .bf__meta{ display:flex; justify-content:space-between; align-items:center; margin:12px 4px 8px; gap:10px; flex-wrap:wrap; }\n    .bf__status{ color:var(--muted); font-size:13px; }\n\n    \/* Virtualized viewport (scrollbar hidden) *\/\n    .bf__viewport{\n      margin-top:12px;\n      border-radius:18px;\n      border:1px solid rgba(0,0,0,.08);\n      background:rgba(255,255,255,.35);\n      max-height: 75vh;\n      overflow:auto;\n      position:relative;\n      padding: 10px;\n\n      scrollbar-width: none;          \/* Firefox *\/\n      -ms-overflow-style: none;       \/* IE\/old Edge *\/\n    }\n    .bf__viewport::-webkit-scrollbar{\n      width: 0; height: 0;            \/* Chrome\/Safari *\/\n    }\n\n    @media (max-height: 720px){\n      .bf__viewport{ max-height: 70vh; }\n    }\n\n    .bf__spacer{ position:relative; width:100%; height: 0px; }\n    .bf__layer{ position:absolute; inset:0; will-change: transform; transform: translateY(0px); }\n\n    .bf__grid{\n      display:grid;\n      grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));\n      gap:14px;\n      align-content:start;\n    }\n\n    @media (max-width: 1024px){ .bf__grid{ --cols: 3; } }\n    @media (max-width: 720px){ .bf__grid{ --cols: 2; } .bf__search{ min-width:240px; } }\n    @media (max-width: 420px){ .bf__grid{ --cols: 1; } }\n\n    .bf__card{ border-radius:18px; border:1px solid var(--line); overflow:hidden; background:rgba(255,255,255,.55); cursor:pointer; }\n    .bf__swatch{ height:120px; display:flex; align-items:flex-end; justify-content:space-between; padding:10px; position:relative; gap:8px; }\n    .bf__chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12);\n               background:rgba(255,255,255,.60); backdrop-filter: blur(10px); white-space:nowrap; max-width:100%;\n               overflow:hidden; text-overflow:ellipsis; }\n\n    .bf__uv{\n      position:absolute; top:10px; left:10px;\n      display:inline-flex; align-items:center; gap:8px;\n      padding:6px 10px; border-radius:999px;\n      border:1px solid rgba(0,0,0,.12);\n      background:rgba(255,255,255,.70);\n      font-size:12px; font-weight:700;\n    }\n\n    .bf__body{ padding:12px 12px 14px; display:flex; justify-content:space-between; gap:10px; }\n    .bf__name{ font-weight:900; font-size:14px; line-height:1.2; }\n    .bf__sub{ color:var(--muted); font-size:12px; margin-top:4px; }\n\n    \/* Modal *\/\n    .bf__modal{ position:fixed; inset:0; display:none; z-index:9999; }\n    .bf__modal[aria-hidden=\"false\"]{ display:block; }\n    .bf__modalBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }\n    .bf__modalCard{ position:relative; width:min(980px, calc(100% - 24px)); margin:6vh auto 0;\n                    border-radius:24px; border:1px solid rgba(255,255,255,.18); background:rgba(16,18,24,.98);\n                    box-shadow:0 20px 70px rgba(0,0,0,.5); overflow:hidden; color:#fff; }\n    .bf__modalClose{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:999px;\n                     border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; }\n    .bf__modalBody{ display:grid; grid-template-columns: 1.2fr 1fr; }\n    @media (max-width: 860px){ .bf__modalBody{ grid-template-columns:1fr; } }\n    .bf__modalSwatch{ min-height:360px; }\n    .bf__modalInfo{ padding:18px; }\n    .bf__modalName{ font-size:22px; font-weight:900; }\n    .bf__modalSub{ color:rgba(255,255,255,.72); margin-top:6px; font-size:13px; }\n    .bf__row{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0;\n              border-bottom:1px dashed rgba(255,255,255,.16); }\n    .bf__k{ color:rgba(255,255,255,.70); font-size:13px; width:95px; }\n    .bf__v{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }\n    .bf__v code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n                 background:rgba(0,0,0,.25); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.16); }\n    .bf__copy{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; }\n\n    \/* Loading overlay *\/\n    .bf__loading{\n      position:fixed; inset:0; z-index:9998;\n      display:flex; align-items:center; justify-content:center;\n      background:rgba(0,0,0,.45); backdrop-filter: blur(6px);\n    }\n    .bf__loadingCard{\n      width:min(520px, calc(100% - 36px));\n      border-radius:18px;\n      background:rgba(16,18,24,.98);\n      color:#fff;\n      border:1px solid rgba(255,255,255,.18);\n      box-shadow:0 20px 70px rgba(0,0,0,.5);\n      padding:18px;\n    }\n    .bf__loadingTitle{ font-weight:900; font-size:16px; }\n    .bf__loadingSub{ opacity:.75; margin-top:6px; font-size:13px; }\n    .bf__loadingBarWrap{ margin-top:14px; height:10px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }\n    .bf__loadingBar{ height:100%; width:35%; background:var(--accent); border-radius:999px; animation: bfLoad 1s infinite ease-in-out; }\n    @keyframes bfLoad {\n      0% { transform: translateX(-60%); }\n      50% { transform: translateX(120%); }\n      100% { transform: translateX(-60%); }\n    }\n\n    \/* Empty state *\/\n    .bf__empty{\n      padding:16px;\n      border:1px dashed rgba(0,0,0,.18);\n      border-radius:18px;\n      color:rgba(0,0,0,.70);\n      background:rgba(255,255,255,.5);\n    }\n  <\/style>\n\n  <div id=\"bfLoading\" class=\"bf__loading\" aria-hidden=\"false\">\n    <div class=\"bf__loadingCard\">\n      <div class=\"bf__loadingTitle\">${T.loadingTitle}<\/div>\n      <div class=\"bf__loadingSub\">${T.loadingSub}<\/div>\n      <div class=\"bf__loadingBarWrap\"><div class=\"bf__loadingBar\"><\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"bf__wrap\">\n    <div class=\"bf__top\">\n      <div class=\"bf__title\">\n        <h2 id=\"bfDeckTitle\">${T.titleDefault}<\/h2>\n        <p id=\"bfDeckDesc\">${T.descDefault}<\/p>\n      <\/div>\n\n      <div class=\"bf__controls\">\n        <label class=\"bf__search\">\n          <span style=\"opacity:.8;\">\u2315<\/span>\n          <input id=\"bfSearch\" type=\"search\" placeholder=\"${T.searchPh}\" \/>\n        <\/label>\n\n        <select id=\"bfCategory\">\n          <option value=\"\">${T.catAll}<\/option>\n        <\/select>\n\n        <select id=\"bfMood\">\n          <option value=\"\">${T.moodAll}<\/option>\n        <\/select>\n\n        <label class=\"bf__toggle\" title=\"${T.uvFilterTitle}\">\n          <input id=\"bfUvOnly\" type=\"checkbox\" \/>\n          <span>${T.uvFilter}<\/span>\n        <\/label>\n\n        <select id=\"bfSort\">\n          <option value=\"code_asc\" selected>${T.sortCode}<\/option>\n          <option value=\"cat_then_name\">${T.sortCatName}<\/option>\n          <option value=\"name_asc\">${T.sortNameAsc}<\/option>\n          <option value=\"name_desc\">${T.sortNameDesc}<\/option>\n          <option value=\"light_to_dark\">${T.sortLightDark}<\/option>\n        <\/select>\n\n        <button id=\"bfReset\" class=\"bf__btn\" type=\"button\">${T.reset}<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"bf__meta\">\n      <div id=\"bfStatus\" class=\"bf__status\">${T.statusLoading}<\/div>\n      <div class=\"bf__status\">${T.statusUvLegend}<\/div>\n    <\/div>\n\n    <div id=\"bfViewport\" class=\"bf__viewport\" aria-label=\"Colors list\">\n      <div id=\"bfSpacer\" class=\"bf__spacer\">\n        <div id=\"bfLayer\" class=\"bf__layer\">\n          <div id=\"bfGrid\" class=\"bf__grid\" style=\"--cols: 4;\" aria-live=\"polite\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div id=\"bfModal\" class=\"bf__modal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\n    <div class=\"bf__modalBackdrop\" data-close=\"1\"><\/div>\n    <div class=\"bf__modalCard\" role=\"document\">\n      <button class=\"bf__modalClose\" type=\"button\" data-close=\"1\" aria-label=\"Close\">\u2715<\/button>\n      <div class=\"bf__modalBody\">\n        <div class=\"bf__modalSwatch\" id=\"bfModalSwatch\"><\/div>\n        <div class=\"bf__modalInfo\">\n          <div class=\"bf__modalName\" id=\"bfModalName\">\u2014<\/div>\n          <div class=\"bf__modalSub\" id=\"bfModalSub\">\u2014<\/div>\n\n          <div style=\"margin-top:14px; border-top:1px solid rgba(255,255,255,.16); padding-top:12px;\">\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalCategory}<\/div><div class=\"bf__v\"><code id=\"bfCat\">\u2014<\/code><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalStyle}<\/div><div class=\"bf__v\"><code id=\"bfMoodVal\">\u2014<\/code><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalUse}<\/div><div class=\"bf__v\"><code id=\"bfUse\">\u2014<\/code><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalHex}<\/div><div class=\"bf__v\"><code id=\"bfHex\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"hex\">${T.copy}<\/button><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalRgb}<\/div><div class=\"bf__v\"><code id=\"bfRgb\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"rgb\">${T.copy}<\/button><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">${T.modalHsl}<\/div><div class=\"bf__v\"><code id=\"bfHsl\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"hsl\">${T.copy}<\/button><\/div><\/div>\n          <\/div>\n\n          <div id=\"bfUseExplain\" style=\"margin-top:12px; color:rgba(255,255,255,.75); font-size:13px; line-height:1.4;\"><\/div>\n\n          <div style=\"display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;\">\n            <button id=\"bfCopyAll\" class=\"bf__btn\" type=\"button\">${T.copyAll}<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  `;\n\n  const $ = (sel) => mount.querySelector(sel);\n\n  const els = {\n    title: $(\"#bfDeckTitle\"),\n    desc: $(\"#bfDeckDesc\"),\n    status: $(\"#bfStatus\"),\n    viewport: $(\"#bfViewport\"),\n    spacer: $(\"#bfSpacer\"),\n    layer: $(\"#bfLayer\"),\n    grid: $(\"#bfGrid\"),\n    loading: $(\"#bfLoading\"),\n    search: $(\"#bfSearch\"),\n    category: $(\"#bfCategory\"),\n    mood: $(\"#bfMood\"),\n    uvOnly: $(\"#bfUvOnly\"),\n    sort: $(\"#bfSort\"),\n    reset: $(\"#bfReset\"),\n    modal: $(\"#bfModal\"),\n    modalSwatch: $(\"#bfModalSwatch\"),\n    modalName: $(\"#bfModalName\"),\n    modalSub: $(\"#bfModalSub\"),\n    cat: $(\"#bfCat\"),\n    moodVal: $(\"#bfMoodVal\"),\n    use: $(\"#bfUse\"),\n    useExplain: $(\"#bfUseExplain\"),\n    hex: $(\"#bfHex\"),\n    rgb: $(\"#bfRgb\"),\n    hsl: $(\"#bfHsl\"),\n    copyAll: $(\"#bfCopyAll\")\n  };\n\n  \/\/ --- helpers\n  const clamp = (n,a,b)=>Math.max(a,Math.min(b,n));\n  const rgbToHex = (r,g,b)=>\"#\"+[r,g,b].map(x=>clamp(x,0,255).toString(16).padStart(2,\"0\")).join(\"\").toUpperCase();\n  const norm = (s)=>String(s||\"\").toLowerCase().trim();\n  const escapeHtml = (s)=>String(s).replace(\/[&<>\"']\/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]));\n\n  function debounce(fn, ms=140){\n    let t;\n    return (...args)=>{ clearTimeout(t); t=setTimeout(()=>fn(...args), ms); };\n  }\n\n  function rgbToHsl(r,g,b){\n    r\/=255; g\/=255; b\/=255;\n    const max=Math.max(r,g,b), min=Math.min(r,g,b);\n    let h=0,s=0,l=(max+min)\/2;\n    const d=max-min;\n    if(d!==0){\n      s=d\/(1-Math.abs(2*l-1));\n      switch(max){\n        case r: h=((g-b)\/d)%6; break;\n        case g: h=(b-r)\/d+2; break;\n        case b: h=(r-g)\/d+4; break;\n      }\n      h*=60; if(h<0) h+=360;\n    }\n    return {h:Math.round(h), s:Math.round(s*100), l:Math.round(l*100)};\n  }\n\n  function autoCategory(r,g,b){\n    const {h,s,l} = rgbToHsl(r,g,b);\n    if (l >= 92 && s <= 12) return \"Whites\";\n    if (l <= 12 && s <= 18) return \"Blacks\";\n    if (s <= 10) return \"Greys\";\n    if (s <= 18 && l < 85 && l > 15) return \"Neutrals\";\n    if (h < 15 || h >= 345) return \"Reds\";\n    if (h < 35) return \"Oranges\";\n    if (h < 65) return \"Yellows\";\n    if (h < 90) return \"Yellow-Greens\";\n    if (h < 150) return \"Greens\";\n    if (h < 190) return \"Teals\";\n    if (h < 250) return \"Blues\";\n    if (h < 290) return \"Purples\";\n    if (h < 345) return \"Pinks\";\n    return \"Colors\";\n  }\n\n  function autoMood(r,g,b){\n    const {h,s,l} = rgbToHsl(r,g,b);\n    if (s <= 12) return \"Neutral\";\n    if (l >= 75 && s <= 45) return \"Pastel\";\n    if (s >= 70) return \"Vivid\";\n    if (h >= 20 && h <= 95 && l >= 20 && l <= 70 && s >= 20 && s <= 65) return \"Earthy\";\n    if (h < 70 || h >= 330) return \"Warm\";\n    return \"Cool\";\n  }\n\n  function isLight(r,g,b){\n    const L = (0.2126*r + 0.7152*g + 0.0722*b) \/ 255;\n    return L > 0.62;\n  }\n\n  \/\/ --- IMPORTANT CHANGE #2:\n  \/\/ Sort dropdown options alphabetically by DISPLAY LABEL (not by internal key)\n  function buildSelectAlpha(sel, keys, allLabel, displayFn){\n    const uniqueKeys = [...new Set(keys.filter(Boolean))];\n    uniqueKeys.sort((a,b) => String(displayFn(a)).localeCompare(String(displayFn(b)), lang === \"el\" ? \"el\" : \"en\"));\n\n    const options = uniqueKeys\n      .map(k => `<option value=\"${escapeHtml(k)}\">${escapeHtml(displayFn(k))}<\/option>`)\n      .join(\"\");\n\n    sel.innerHTML = `<option value=\"\">${escapeHtml(allLabel)}<\/option>` + options;\n  }\n\n  function copyText(text){\n    if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);\n    const ta=document.createElement(\"textarea\"); ta.value=text; document.body.appendChild(ta); ta.select();\n    document.execCommand(\"copy\"); ta.remove();\n  }\n\n  \/\/ --- state\n  let all = [];\n  let filtered = [];\n\n  \/\/ virtualization state\n  let cols = 4;\n  let rowHeight = 176; \/\/ estimate\n  let gap = 14;\n  let lastRange = { start: 0, end: -1 };\n  let suppressScroll = false;\n\n  function computeCols(){\n    const w = els.viewport.clientWidth;\n    if (w <= 420) return 1;\n    if (w <= 720) return 2;\n    if (w <= 1024) return 3;\n    return 4;\n  }\n\n  function ensureMetrics(){\n    cols = computeCols();\n    els.grid.style.setProperty(\"--cols\", String(cols));\n\n    const card = els.grid.querySelector(\".bf__card\");\n    if (card) {\n      const rect = card.getBoundingClientRect();\n      rowHeight = Math.max(150, Math.round(rect.height + gap));\n    }\n  }\n\n  function updateSpacerHeight(){\n    const rows = Math.ceil(filtered.length \/ cols) || 0;\n    const total = Math.max(0, rows * rowHeight - gap);\n    els.spacer.style.height = total + \"px\";\n  }\n\n  function getVisibleRange(){\n    const scrollTop = els.viewport.scrollTop;\n    const viewH = els.viewport.clientHeight;\n\n    const startRow = Math.floor(scrollTop \/ rowHeight);\n    const endRow = Math.ceil((scrollTop + viewH) \/ rowHeight);\n\n    const overscan = 2;\n    const sRow = Math.max(0, startRow - overscan);\n    const eRow = Math.max(0, endRow + overscan);\n\n    const startIndex = sRow * cols;\n    const endIndex = Math.min(filtered.length - 1, (eRow * cols) - 1);\n\n    return { startIndex, endIndex, offsetY: sRow * rowHeight };\n  }\n\n  \/\/ --- IMPORTANT CHANGE #1:\n  \/\/ Removed HEX chip from card (kept in modal)\n  function cardHTML(c, i){\n    const {r,g,b} = c.rgb;\n    const hex = c.hex;\n    const light = isLight(r,g,b);\n    const text = light ? \"#0b0f14\" : \"#ffffff\";\n    const chipBg = light ? \"rgba(255,255,255,.65)\" : \"rgba(0,0,0,.35)\";\n    const useChip = c.uv_resistant ? T.exteriorChip : T.interiorChip;\n\n    return `\n      <article class=\"bf__card\" data-i=\"${i}\" tabindex=\"0\" data-bound=\"0\">\n        <div class=\"bf__swatch\" style=\"background:${hex}; color:${text}\">\n          ${c.uv_resistant ? `<span class=\"bf__uv\" style=\"background:${chipBg}; color:${text}\">\u2600 UV<\/span>` : ``}\n          <span class=\"bf__chip\" style=\"background:${chipBg}; color:${text}\">${escapeHtml(catDisplay(c.category))}<\/span>\n          <span class=\"bf__chip\" style=\"background:${chipBg}; color:${text}\">${escapeHtml(moodDisplay(c.mood))}<\/span>\n        <\/div>\n        <div class=\"bf__body\">\n          <div style=\"min-width:0\">\n            <div class=\"bf__name\">${escapeHtml(c.name || c.code || \"\u2014\")}<\/div>\n            <div class=\"bf__sub\">${escapeHtml(c.code || \"\")}<\/div>\n          <\/div>\n          <span class=\"bf__chip\">${escapeHtml(useChip)}<\/span>\n        <\/div>\n      <\/article>`;\n  }\n\n  function bindNewCards(){\n    const newCards = els.grid.querySelectorAll('.bf__card[data-bound=\"0\"]');\n    newCards.forEach(card=>{\n      card.dataset.bound = \"1\";\n      const open = ()=>openModal(Number(card.dataset.i));\n      card.addEventListener(\"click\", open);\n      card.addEventListener(\"keydown\", (e)=>{ if(e.key===\"Enter\"||e.key===\" \"){ e.preventDefault(); open(); }});\n    });\n  }\n\n  function renderVirtual(force=false){\n    if (filtered.length === 0) {\n      els.grid.innerHTML = `<div class=\"bf__empty\">${escapeHtml(T.noResults)}<\/div>`;\n      els.layer.style.transform = \"translateY(0px)\";\n      els.spacer.style.height = \"0px\";\n      return;\n    }\n\n    ensureMetrics();\n    updateSpacerHeight();\n\n    const { startIndex, endIndex, offsetY } = getVisibleRange();\n    if (!force && startIndex === lastRange.start && endIndex === lastRange.end) return;\n\n    lastRange = { start: startIndex, end: endIndex };\n    els.layer.style.transform = `translateY(${offsetY}px)`;\n\n    let html = \"\";\n    for (let i = startIndex; i <= endIndex; i++) {\n      const c = filtered[i];\n      if (!c) continue;\n      html += cardHTML(c, i);\n    }\n    els.grid.innerHTML = html;\n    bindNewCards();\n  }\n\n  function updateStatus(){\n    els.status.textContent = `${filtered.length} ${lang===\"el\" ? \"\u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03b9\u03c2\" : \"shades\"}`;\n  }\n\n  function applyFiltersAndSort({resetScroll=false} = {}){\n    const q = norm(els.search.value);\n    const catKey = els.category.value;\n    const moodKey = els.mood.value;\n    const uvOnly = els.uvOnly.checked;\n\n    filtered = all.filter(c=>{\n      if (catKey && c.category !== catKey) return false;\n      if (moodKey && c.mood !== moodKey) return false;\n      if (uvOnly && !c.uv_resistant) return false;\n      if (!q) return true;\n      const hay = norm([c.code,c.name,c.category,c.mood].filter(Boolean).join(\" \"));\n      return hay.includes(q);\n    });\n\n    const s = els.sort.value;\n    filtered.sort((a, b) => {\n      if (s === \"code_asc\") return (a.code || \"\").localeCompare(b.code || \"\", undefined, { numeric: true });\n      if (s === \"name_asc\") return (a.name || \"\").localeCompare(b.name || \"\");\n      if (s === \"name_desc\") return (b.name || \"\").localeCompare(a.name || \"\");\n      if (s === \"light_to_dark\") return (b.hsl.l - a.hsl.l);\n      if (s === \"cat_then_name\") {\n        const c = (a.category||\"\").localeCompare(b.category||\"\");\n        if (c !== 0) return c;\n        return (a.name || \"\").localeCompare(b.name || \"\");\n      }\n      return (a.code || \"\").localeCompare(b.code || \"\", undefined, { numeric: true });\n    });\n\n    updateStatus();\n    lastRange = { start: 0, end: -1 };\n\n    if (resetScroll) {\n      suppressScroll = true;\n      els.viewport.scrollTop = 0;\n      requestAnimationFrame(() => { suppressScroll = false; renderVirtual(true); });\n      return;\n    }\n    renderVirtual(true);\n  }\n\n  \/\/ --- modal\n  function openModal(i){\n    const c = filtered[i]; if(!c) return;\n    els.modalSwatch.style.background = c.hex;\n    els.modalName.textContent = c.name || c.code || \"\u2014\";\n    els.modalSub.textContent = c.code ? `Code: ${c.code}` : \"\";\n\n    els.cat.textContent = catDisplay(c.category);\n    els.moodVal.textContent = moodDisplay(c.mood);\n\n    els.use.textContent = c.uv_resistant ? T.useExterior : T.useInterior;\n    els.useExplain.textContent = c.uv_resistant ? T.useExplainExterior : T.useExplainInterior;\n\n    els.hex.textContent = c.hex;\n    els.rgb.textContent = `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`;\n    els.hsl.textContent = `hsl(${c.hsl.h} ${c.hsl.s}% ${c.hsl.l}%)`;\n\n    mount.querySelectorAll(\".bf__copy\").forEach(btn=>{\n      btn.onclick = () => {\n        const t = btn.dataset.copy;\n        const v = t===\"hex\" ? els.hex.textContent : (t===\"rgb\" ? els.rgb.textContent : els.hsl.textContent);\n        copyText(v);\n        btn.textContent = (lang===\"el\" ? \"\u0388\u03b3\u03b9\u03bd\u03b5!\" : \"Copied\");\n        setTimeout(()=>btn.textContent=T.copy, 900);\n      };\n    });\n\n    els.copyAll.onclick = () => {\n      const lines = [\n        els.modalName.textContent,\n        els.cat.textContent,\n        els.moodVal.textContent,\n        els.use.textContent,\n        els.hex.textContent,\n        els.rgb.textContent,\n        els.hsl.textContent\n      ].join(\"\\n\");\n      copyText(lines);\n      els.copyAll.textContent = (lang===\"el\" ? \"\u0388\u03b3\u03b9\u03bd\u03b5!\" : \"Copied!\");\n      setTimeout(()=>els.copyAll.textContent=T.copyAll, 900);\n    };\n\n    els.modal.setAttribute(\"aria-hidden\",\"false\");\n    document.body.style.overflow=\"hidden\";\n  }\n\n  \/\/ close modal\n  els.modal.addEventListener(\"click\",(e)=>{ if(e.target?.dataset?.close===\"1\") { els.modal.setAttribute(\"aria-hidden\",\"true\"); document.body.style.overflow=\"\"; }});\n  document.addEventListener(\"keydown\",(e)=>{ if(e.key===\"Escape\" && els.modal.getAttribute(\"aria-hidden\")===\"false\") { els.modal.setAttribute(\"aria-hidden\",\"true\"); document.body.style.overflow=\"\"; }});\n\n  \/\/ --- events\n  els.viewport.addEventListener(\"scroll\", () => {\n    if (suppressScroll) return;\n    requestAnimationFrame(() => renderVirtual(false));\n  });\n\n  els.search.addEventListener(\"input\", debounce(() => applyFiltersAndSort({resetScroll:true}), 140));\n  els.category.addEventListener(\"change\", () => applyFiltersAndSort({resetScroll:true}));\n  els.mood.addEventListener(\"change\", () => applyFiltersAndSort({resetScroll:true}));\n  els.uvOnly.addEventListener(\"change\", () => applyFiltersAndSort({resetScroll:true}));\n  els.sort.addEventListener(\"change\", () => applyFiltersAndSort({resetScroll:true}));\n\n  els.reset.addEventListener(\"click\", ()=>{\n    els.search.value=\"\";\n    els.category.value=\"\";\n    els.mood.value=\"\";\n    els.uvOnly.checked=false;\n    els.sort.value=\"code_asc\";\n    applyFiltersAndSort({resetScroll:true});\n  });\n\n  const onResize = debounce(() => {\n    lastRange = { start: 0, end: -1 };\n    renderVirtual(true);\n  }, 120);\n  window.addEventListener(\"resize\", onResize);\n\n  async function load(){\n    const res = await fetch(DATA_URL, { cache:\"no-store\" });\n    const json = await res.json();\n\n    const meta = json.meta || {};\n    const colors = Array.isArray(json.colors) ? json.colors : (Array.isArray(json) ? json : []);\n    if(colors.length===0) throw new Error(\"No colors in JSON\");\n\n    els.title.textContent = meta.deck || T.titleDefault;\n    els.desc.textContent = meta.description || T.descDefault;\n\n    all = colors.map((c, idx)=>{\n      const r = c.rgb?.r ?? c.colR ?? 0;\n      const g = c.rgb?.g ?? c.colG ?? 0;\n      const b = c.rgb?.b ?? c.colB ?? 0;\n\n      const hsl = c.hsl || rgbToHsl(r,g,b);\n      const category = c.category || autoCategory(r,g,b);\n      const mood = c.mood || autoMood(r,g,b);\n      const hex = c.hex || rgbToHex(r,g,b);\n\n      const uv = (c.uv_resistant === true) || (String(c.use_label || c.ColorUse || \"\").toLowerCase().includes(\"uv\"));\n\n      return {\n        id: c.id ?? (idx+1),\n        code: c.code || c.ColorID || \"\",\n        name: c.name || c.Colorname || c.code || c.ColorID || \"\",\n        rgb: { r, g, b },\n        hex,\n        hsl,\n        category,\n        mood,\n        uv_resistant: uv,\n        use_label: c.use_label || c.ColorUse || (uv ? \"UV Resistant\" : \"Interior Use\")\n      };\n    });\n\n    \/\/ Build filters (alphabetical by label)\n    buildSelectAlpha(els.category, all.map(x => x.category), T.catAll, catDisplay);\n    buildSelectAlpha(els.mood, all.map(x => x.mood), T.moodAll, moodDisplay);\n\n    els.sort.value = \"code_asc\";\n    applyFiltersAndSort({resetScroll:true});\n\n    requestAnimationFrame(() => { if (els.loading) els.loading.remove(); });\n  }\n\n  load().catch(err=>{\n    console.error(err);\n    els.status.textContent = (lang===\"el\")\n      ? \"\u0391\u03c0\u03bf\u03c4\u03c5\u03c7\u03af\u03b1 \u03c6\u03cc\u03c1\u03c4\u03c9\u03c3\u03b7\u03c2 JSON (\u03ad\u03bb\u03b5\u03b3\u03be\u03b5 \u03c4\u03bf path & format).\"\n      : \"Failed to load JSON (check path & format).\";\n    if (els.loading) els.loading.remove();\n  });\n})();\n<\/script>\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-123cfe5 e-flex e-con-boxed e-con e-parent\" data-id=\"123cfe5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de594ac elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"de594ac\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.berling.gr\/en\/fandecks\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Return to fandecks<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9027c27 elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"9027c27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Note:<\/strong><\/p>\n<p>The color samples photos may deviate from reality because of the limitations of each screen display or printing  For the full range of shades visit your nearest paint shop<\/p>\n<p>Tip 1: We recommend visiting the closest paint shop and asking for our colorcard or create a sample for you.<\/p>\n<p>Tip 2: Before painting interior or exterior surfaces we recommend asking for the specifications, surface preparation and any technical points in order to ensure great paint application results!<\/p>\n<p>Tip 3: Choose the color code you like and ask for the quantity you want.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Berling&#8217;s new FEEL &amp; DESIGN color palette has arrived to revive the senses, recall memories and evoke emotions. Now, we can open our eyes and discover color beyond its literal meaning. We can feel the whole spectrum of human emotions through the shades and combinations of the unique FEEL &amp; DESIGN palette, fill us with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12554,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7012","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/comments?post=7012"}],"version-history":[{"count":17,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7012\/revisions"}],"predecessor-version":[{"id":14454,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7012\/revisions\/14454"}],"up":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media\/12554"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=7012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}