diff --git a/themes/ccchh/assets/pico-1.5.11/LICENSE.md b/themes/ccchh/assets/pico-1.5.13/LICENSE.md
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/LICENSE.md
rename to themes/ccchh/assets/pico-1.5.13/LICENSE.md
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/_functions.scss b/themes/ccchh/assets/pico-1.5.13/scss/_functions.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/_functions.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/_functions.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/_variables.scss b/themes/ccchh/assets/pico-1.5.13/scss/_variables.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/_variables.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/_variables.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_progress.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/components/_progress.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form-alt-input-types.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form-alt-input-types.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form-checkbox-radio.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form-checkbox-radio.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_typography.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/content/_typography.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_container.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_container.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_document.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_document.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_grid.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_grid.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_scroller.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_scroller.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_section.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_section.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_sectioning.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_sectioning.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.classless.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/pico.classless.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.fluid.classless.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/pico.fluid.classless.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.scss
similarity index 94%
rename from themes/ccchh/assets/pico-1.5.11/scss/pico.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/pico.scss
index b248799..6cdde55 100644
--- a/themes/ccchh/assets/pico-1.5.11/scss/pico.scss
+++ b/themes/ccchh/assets/pico-1.5.13/scss/pico.scss
@@ -1,6 +1,6 @@
 /*!
- * Pico CSS v1.5.11 (https://picocss.com)
- * Copyright 2019-2023 - Licensed under MIT
+ * Pico CSS v1.5.13 (https://picocss.com)
+ * Copyright 2019-2024 - Licensed under MIT
  */
 
 // Config
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss
similarity index 93%
rename from themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss
index cb9aa42..9916cc8 100644
--- a/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss
+++ b/themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss
@@ -1,6 +1,6 @@
 /*!
- * Pico CSS v1.5.11 (https://picocss.com)
- * Copyright 2019-2023 - Licensed under MIT
+ * Pico CSS v1.5.13 (https://picocss.com)
+ * Copyright 2019-2024 - Licensed under MIT
  *
  * Slim version example
  * You can export only the modules you need
diff --git a/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js b/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js
new file mode 100644
index 0000000..4eaff47
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  syntax: "postcss-scss",
+  map: false,
+  plugins: {
+    "css-declaration-sorter": { 
+      order: "smacss" 
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_colors.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_colors.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_dark.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_dark.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_light.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_light.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_styles.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_styles.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_accessibility.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_accessibility.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_loading.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_loading.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_reduce-motion.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_reduce-motion.scss
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_tooltip.scss
similarity index 100%
rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss
rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_tooltip.scss
diff --git a/themes/ccchh/assets/pico-2.1.1/LICENSE.md b/themes/ccchh/assets/pico-2.1.1/LICENSE.md
new file mode 100644
index 0000000..94af9b1
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2024 Pico
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/_index.scss
new file mode 100644
index 0000000..1058cdd
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/_index.scss
@@ -0,0 +1,49 @@
+@use "helpers/copyright";
+
+// Config
+@forward "settings";
+
+// Theming
+@use "themes/default";
+
+// Layout
+@use "layout/document"; // html
+@use "layout/landmarks"; // body, header, main, footer
+@use "layout/section"; // section
+@use "layout/container"; // .container, .container-fluid
+@use "layout/grid"; // .grid
+@use "layout/overflow-auto"; // .overflow-auto
+
+// Content
+@use "content/typography"; // headings, p, ul, blockquote, ...
+@use "content/link"; // a, role="link"
+@use "content/button"; // button, role="button", type="button", type="submit" ...
+@use "content/table"; // table, tr, td, ...
+@use "content/embedded"; // audio, canvas, iframe, img, svg, video
+@use "content/code"; // pre, code, ...
+@use "content/figure"; // figure, figcaption
+@use "content/misc"; // hr, template, [hidden], dialog, canvas
+
+// Forms
+@use "forms/basics"; // input, select, textarea, label, fieldset, legend
+@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
+@use "forms/input-color"; // type="color"
+@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
+@use "forms/input-file"; // type="file"
+@use "forms/input-range"; // type="range"
+@use "forms/input-search"; // type="search"
+
+// Components
+@use "components/accordion"; // details, summary
+@use "components/card"; // article
+@use "components/dropdown"; // details.dropdown
+@use "components/group"; // role="group"
+@use "components/loading"; // aria-busy=true
+@use "components/modal"; // dialog
+@use "components/nav"; // nav
+@use "components/progress"; // progress
+@use "components/tooltip"; // data-tooltip
+
+// Utilities
+@use "utilities/accessibility"; // -ms-touch-action, aria-*
+@use "utilities/reduce-motion"; // prefers-reduced-motion
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss b/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss
new file mode 100644
index 0000000..d1c3e46
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss
@@ -0,0 +1,143 @@
+@use "sass:map";
+
+// Settings
+// ––––––––––––––––––––
+
+// Theme color
+$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
+
+// Prefix for CSS variables
+$css-var-prefix: "--pico-" !default; // Must start with "--"
+
+// Define the root element used to target <header>, <main>, <footer>
+// with $enable-semantic-container and $enable-responsive-spacings
+$semantic-root-element: "body" !default;
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: false !default;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
+// Fluid layout if disabled
+$enable-viewport: true !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings by default
+$enable-responsive-spacings: false !default;
+
+// Enable responsive typography
+// Fixed root element size (rem) if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+// Enable transitions
+$enable-transitions: true !default;
+
+// Enable overriding with !important
+$enable-important: true !default;
+
+// Optional parent selector
+// If defined, all HTML tags are wrapped with this selector
+// :root is not wrapped
+$parent-selector: "" !default;
+
+// Breakpoints, viewports and root font size
+$breakpoints: () !default;
+$breakpoints: map.deep-merge(
+  (
+    // Small (landscape phones)
+    // Font size: 17px
+    sm: (
+        breakpoint: 576px,
+        viewport: 510px,
+        root-font-size: 106.25%,
+      ),
+
+    // Medium (tablets)
+    // Font size: 18px
+    md: (
+        breakpoint: 768px,
+        viewport: 700px,
+        root-font-size: 112.5%,
+      ),
+
+    // Large
+    // Font size: 19px
+    lg: (
+        breakpoint: 1024px,
+        viewport: 950px,
+        root-font-size: 118.75%,
+      ),
+
+    // Extra large
+    // Font size: 20px
+    xl: (
+        breakpoint: 1280px,
+        viewport: 1200px,
+        root-font-size: 125%,
+      ),
+
+    // Extra extra large
+    // Font size: 21px
+    xxl: (
+        breakpoint: 1536px,
+        viewport: 1450px,
+        root-font-size: 131.25%,
+      )
+  ),
+  $breakpoints
+);
+
+// Modules to export
+$modules: () !default;
+$modules: map.merge(
+  (
+    // Theme
+    "themes/default": true,
+
+    // Layout
+    "layout/document": true,
+    "layout/landmarks": true,
+    "layout/container": true,
+    "layout/section": true,
+    "layout/grid": true,
+    "layout/overflow-auto": true,
+
+    // Content
+    "content/link": true,
+    "content/typography": true,
+    "content/embedded": true,
+    "content/button": true,
+    "content/table": true,
+    "content/code": true,
+    "content/figure": true,
+    "content/misc": true,
+
+    // Forms
+    "forms/basics": true,
+    "forms/checkbox-radio-switch": true,
+    "forms/input-color": true,
+    "forms/input-date": true,
+    "forms/input-file": true,
+    "forms/input-range": true,
+    "forms/input-search": true,
+
+    // Components
+    "components/accordion": true,
+    "components/card": true,
+    "components/dropdown": true,
+    "components/group": true,
+    "components/loading": true,
+    "components/modal": true,
+    "components/nav": true,
+    "components/progress": true,
+    "components/tooltip": true,
+
+    // Utilities
+    "utilities/accessibility": true,
+    "utilities/reduce-motion": true
+  ),
+  $modules
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss
new file mode 100644
index 0000000..ec7c615
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss
@@ -0,0 +1,886 @@
+// B&W
+$black: #000;
+$white: #fff;
+
+// Red
+$red-950: #1c0d06;
+$red-900: #30130a;
+$red-850: #45150c;
+$red-800: #5c160d;
+$red-750: #72170f;
+$red-700: #861d13;
+$red-650: #9b2318;
+$red-600: #af291d;
+$red-550: #c52f21;
+$red-500: #d93526;
+$red-450: #ee402e;
+$red-400: #f06048;
+$red-350: #f17961;
+$red-300: #f38f79;
+$red-250: #f5a390;
+$red-200: #f5b7a8;
+$red-150: #f6cabf;
+$red-100: #f8dcd6;
+$red-50: #faeeeb;
+$red: $red-550;
+
+// Pink
+$pink-950: #25060c;
+$pink-900: #380916;
+$pink-850: #4b0c1f;
+$pink-800: #5f0e28;
+$pink-750: #740f31;
+$pink-700: #88143b;
+$pink-650: #9d1945;
+$pink-600: #b21e4f;
+$pink-550: #c72259;
+$pink-500: #d92662;
+$pink-450: #f42c6f;
+$pink-400: #f6547e;
+$pink-350: #f7708e;
+$pink-300: #f8889e;
+$pink-250: #f99eae;
+$pink-200: #f9b4be;
+$pink-150: #f9c8ce;
+$pink-100: #f9dbdf;
+$pink-50: #fbedef;
+$pink: $pink-500;
+
+// Fuchsia
+$fuchsia-950: #230518;
+$fuchsia-900: #360925;
+$fuchsia-850: #480b33;
+$fuchsia-800: #5c0d41;
+$fuchsia-750: #700e4f;
+$fuchsia-700: #84135e;
+$fuchsia-650: #98176d;
+$fuchsia-600: #ac1c7c;
+$fuchsia-550: #c1208b;
+$fuchsia-500: #d9269d;
+$fuchsia-450: #ed2aac;
+$fuchsia-400: #f748b7;
+$fuchsia-350: #f869bf;
+$fuchsia-300: #f983c7;
+$fuchsia-250: #fa9acf;
+$fuchsia-200: #f9b1d8;
+$fuchsia-150: #f9c6e1;
+$fuchsia-100: #f9daea;
+$fuchsia-50: #fbedf4;
+$fuchsia: $fuchsia-550;
+
+// Purple
+$purple-950: #1e0820;
+$purple-900: #2d0f33;
+$purple-850: #3d1545;
+$purple-800: #4d1a57;
+$purple-750: #5e206b;
+$purple-700: #6f277d;
+$purple-650: #802e90;
+$purple-600: #9236a4;
+$purple-550: #aa40bf;
+$purple-500: #b645cd;
+$purple-450: #c652dc;
+$purple-400: #cd68e0;
+$purple-350: #d47de4;
+$purple-300: #db90e8;
+$purple-250: #e2a3eb;
+$purple-200: #e7b6ee;
+$purple-150: #edc9f1;
+$purple-100: #f2dcf4;
+$purple-50: #f8eef9;
+$purple: $purple-600;
+
+// Violet
+$violet-950: #190928;
+$violet-900: #251140;
+$violet-850: #321856;
+$violet-800: #3f1e6d;
+$violet-750: #4d2585;
+$violet-700: #5b2d9c;
+$violet-650: #6935b3;
+$violet-600: #7540bf;
+$violet-550: #8352c5;
+$violet-500: #9062ca;
+$violet-450: #9b71cf;
+$violet-400: #a780d4;
+$violet-350: #b290d9;
+$violet-300: #bd9fdf;
+$violet-250: #c9afe4;
+$violet-200: #d3bfe8;
+$violet-150: #decfed;
+$violet-100: #e8dff2;
+$violet-50: #f3eff7;
+$violet: $violet-600;
+
+// Indigo
+$indigo-950: #110b31;
+$indigo-900: #181546;
+$indigo-850: #1f1e5e;
+$indigo-800: #272678;
+$indigo-750: #2f2f92;
+$indigo-700: #3838ab;
+$indigo-650: #4040bf;
+$indigo-600: #524ed2;
+$indigo-550: #655cd6;
+$indigo-500: #7569da;
+$indigo-450: #8577dd;
+$indigo-400: #9486e1;
+$indigo-350: #a294e5;
+$indigo-300: #b0a3e8;
+$indigo-250: #bdb2ec;
+$indigo-200: #cac1ee;
+$indigo-150: #d8d0f1;
+$indigo-100: #e5e0f4;
+$indigo-50: #f2f0f9;
+$indigo: $indigo-600;
+
+// Blue
+$blue-950: #080f2d;
+$blue-900: #0c1a41;
+$blue-850: #0e2358;
+$blue-800: #0f2d70;
+$blue-750: #0f3888;
+$blue-700: #1343a0;
+$blue-650: #184eb8;
+$blue-600: #1d59d0;
+$blue-550: #2060df;
+$blue-500: #3c71f7;
+$blue-450: #5c7ef8;
+$blue-400: #748bf8;
+$blue-350: #8999f9;
+$blue-300: #9ca7fa;
+$blue-250: #aeb5fb;
+$blue-200: #bfc3fa;
+$blue-150: #d0d2fa;
+$blue-100: #e0e1fa;
+$blue-50: #f0f0fb;
+$blue: $blue-550;
+
+// Azure
+$azure-950: #04121d;
+$azure-900: #061e2f;
+$azure-850: #052940;
+$azure-800: #033452;
+$azure-750: #014063;
+$azure-700: #014c75;
+$azure-650: #015887;
+$azure-600: #02659a;
+$azure-550: #0172ad;
+$azure-500: #017fc0;
+$azure-450: #018cd4;
+$azure-400: #029ae8;
+$azure-350: #01aaff;
+$azure-300: #51b4ff;
+$azure-250: #79c0ff;
+$azure-200: #9bccfd;
+$azure-150: #b7d9fc;
+$azure-100: #d1e5fb;
+$azure-50: #e9f2fc;
+$azure: $azure-550;
+
+// Cyan
+$cyan-950: #041413;
+$cyan-900: #051f1f;
+$cyan-850: #052b2b;
+$cyan-800: #043737;
+$cyan-750: #014343;
+$cyan-700: #015050;
+$cyan-650: #025d5d;
+$cyan-600: #046a6a;
+$cyan-550: #047878;
+$cyan-500: #058686;
+$cyan-450: #059494;
+$cyan-400: #05a2a2;
+$cyan-350: #0ab1b1;
+$cyan-300: #0ac2c2;
+$cyan-250: #0ccece;
+$cyan-200: #25dddd;
+$cyan-150: #3deceb;
+$cyan-100: #58faf9;
+$cyan-50: #c3fcfa;
+$cyan: $cyan-550;
+
+// Jade
+$jade-950: #04140c;
+$jade-900: #052014;
+$jade-850: #042c1b;
+$jade-800: #033823;
+$jade-750: #00452b;
+$jade-700: #015234;
+$jade-650: #005f3d;
+$jade-600: #006d46;
+$jade-550: #007a50;
+$jade-500: #00895a;
+$jade-450: #029764;
+$jade-400: #00a66e;
+$jade-350: #00b478;
+$jade-300: #00c482;
+$jade-250: #00cc88;
+$jade-200: #21e299;
+$jade-150: #39f1a6;
+$jade-100: #70fcba;
+$jade-50: #cbfce1;
+$jade: $jade-550;
+
+// Green
+$green-950: #0b1305;
+$green-900: #131f07;
+$green-850: #152b07;
+$green-800: #173806;
+$green-750: #1a4405;
+$green-700: #205107;
+$green-650: #265e09;
+$green-600: #2c6c0c;
+$green-550: #33790f;
+$green-500: #398712;
+$green-450: #409614;
+$green-400: #47a417;
+$green-350: #4eb31b;
+$green-300: #55c21e;
+$green-250: #5dd121;
+$green-200: #62d926;
+$green-150: #77ef3d;
+$green-100: #95fb62;
+$green-50: #d7fbc1;
+$green: $green-500;
+
+// Lime
+$lime-950: #101203;
+$lime-900: #191d03;
+$lime-850: #202902;
+$lime-800: #273500;
+$lime-750: #304100;
+$lime-700: #394d00;
+$lime-650: #435a00;
+$lime-600: #4d6600;
+$lime-550: #577400;
+$lime-500: #628100;
+$lime-450: #6c8f00;
+$lime-400: #779c00;
+$lime-350: #82ab00;
+$lime-300: #8eb901;
+$lime-250: #99c801;
+$lime-200: #a5d601;
+$lime-150: #b2e51a;
+$lime-100: #c1f335;
+$lime-50: #defc85;
+$lime: $lime-200;
+
+// Yellow
+$yellow-950: #141103;
+$yellow-900: #1f1c02;
+$yellow-850: #2b2600;
+$yellow-800: #363100;
+$yellow-750: #423c00;
+$yellow-700: #4e4700;
+$yellow-650: #5b5300;
+$yellow-600: #685f00;
+$yellow-550: #756b00;
+$yellow-500: #827800;
+$yellow-450: #908501;
+$yellow-400: #9e9200;
+$yellow-350: #ad9f00;
+$yellow-300: #bbac00;
+$yellow-250: #caba01;
+$yellow-200: #d9c800;
+$yellow-150: #e8d600;
+$yellow-100: #f2df0d;
+$yellow-50: #fdf1b4;
+$yellow: $yellow-100;
+
+// Amber
+$amber-950: #161003;
+$amber-900: #231a03;
+$amber-850: #312302;
+$amber-800: #3f2d00;
+$amber-750: #4d3700;
+$amber-700: #5b4200;
+$amber-650: #694d00;
+$amber-600: #785800;
+$amber-550: #876400;
+$amber-500: #977000;
+$amber-450: #a77c00;
+$amber-400: #b78800;
+$amber-350: #c79400;
+$amber-300: #d8a100;
+$amber-250: #e8ae01;
+$amber-200: #ffbf00;
+$amber-150: #fecc63;
+$amber-100: #fddea6;
+$amber-50: #fcefd9;
+$amber: $amber-200;
+
+// Pumpkin
+$pumpkin-950: #180f04;
+$pumpkin-900: #271805;
+$pumpkin-850: #372004;
+$pumpkin-800: #482802;
+$pumpkin-750: #593100;
+$pumpkin-700: #693a00;
+$pumpkin-650: #7a4400;
+$pumpkin-600: #8b4f00;
+$pumpkin-550: #9c5900;
+$pumpkin-500: #ad6400;
+$pumpkin-450: #bf6e00;
+$pumpkin-400: #d27a01;
+$pumpkin-350: #e48500;
+$pumpkin-300: #ff9500;
+$pumpkin-250: #ffa23a;
+$pumpkin-200: #feb670;
+$pumpkin-150: #fcca9b;
+$pumpkin-100: #fcdcc1;
+$pumpkin-50: #fceee3;
+$pumpkin: $pumpkin-300;
+
+// Orange
+$orange-950: #1b0d06;
+$orange-900: #2d1509;
+$orange-850: #411a0a;
+$orange-800: #561e0a;
+$orange-750: #6b220a;
+$orange-700: #7f270b;
+$orange-650: #942d0d;
+$orange-600: #a83410;
+$orange-550: #bd3c13;
+$orange-500: #d24317;
+$orange-450: #e74b1a;
+$orange-400: #f45d2c;
+$orange-350: #f56b3d;
+$orange-300: #f68e68;
+$orange-250: #f8a283;
+$orange-200: #f8b79f;
+$orange-150: #f8cab9;
+$orange-100: #f9dcd2;
+$orange-50: #faeeea;
+$orange: $orange-500;
+
+// Sand
+$sand-950: #111110;
+$sand-900: #1c1b19;
+$sand-850: #272622;
+$sand-800: #32302b;
+$sand-750: #3d3b35;
+$sand-700: #49463f;
+$sand-650: #55524a;
+$sand-600: #615e55;
+$sand-550: #6e6a60;
+$sand-500: #7b776b;
+$sand-450: #888377;
+$sand-400: #959082;
+$sand-350: #a39e8f;
+$sand-300: #b0ab9b;
+$sand-250: #beb8a7;
+$sand-200: #ccc6b4;
+$sand-150: #dad4c2;
+$sand-100: #e8e2d2;
+$sand-50: #f2f0ec;
+$sand: $sand-200;
+
+// Grey
+$grey-950: #111111;
+$grey-900: #1b1b1b;
+$grey-850: #262626;
+$grey-800: #303030;
+$grey-750: #3b3b3b;
+$grey-700: #474747;
+$grey-650: #525252;
+$grey-600: #5e5e5e;
+$grey-550: #6a6a6a;
+$grey-500: #777777;
+$grey-450: #808080;
+$grey-400: #919191;
+$grey-350: #9e9e9e;
+$grey-300: #ababab;
+$grey-250: #b9b9b9;
+$grey-200: #c6c6c6;
+$grey-150: #d4d4d4;
+$grey-100: #e2e2e2;
+$grey-50: #f1f1f1;
+$grey: $grey-300;
+
+// Zinc
+$zinc-950: #0f1114;
+$zinc-900: #191c20;
+$zinc-850: #23262c;
+$zinc-800: #2d3138;
+$zinc-750: #373c44;
+$zinc-700: #424751;
+$zinc-650: #4d535e;
+$zinc-600: #5c6370;
+$zinc-550: #646b79;
+$zinc-500: #6f7887;
+$zinc-450: #7b8495;
+$zinc-400: #8891a4;
+$zinc-350: #969eaf;
+$zinc-300: #a4acba;
+$zinc-250: #b3b9c5;
+$zinc-200: #c2c7d0;
+$zinc-150: #d1d5db;
+$zinc-100: #e0e3e7;
+$zinc-50: #f0f1f3;
+$zinc: $zinc-550;
+
+// Slate
+$slate-950: #0e1118;
+$slate-900: #181c25;
+$slate-850: #202632;
+$slate-800: #2a3140;
+$slate-750: #333c4e;
+$slate-700: #3d475c;
+$slate-650: #48536b;
+$slate-600: #525f7a;
+$slate-550: #5d6b89;
+$slate-500: #687899;
+$slate-450: #7385a9;
+$slate-400: #8191b5;
+$slate-350: #909ebe;
+$slate-300: #a0acc7;
+$slate-250: #b0b9d0;
+$slate-200: #bfc7d9;
+$slate-150: #cfd5e2;
+$slate-100: #dfe3eb;
+$slate-50: #eff1f4;
+$slate: $slate-600;
+
+$colors: (
+  red: (
+    950: $red-950,
+    900: $red-900,
+    850: $red-850,
+    800: $red-800,
+    750: $red-750,
+    700: $red-700,
+    650: $red-650,
+    600: $red-600,
+    550: $red-550,
+    500: $red-500,
+    450: $red-450,
+    400: $red-400,
+    350: $red-350,
+    300: $red-300,
+    250: $red-250,
+    200: $red-200,
+    150: $red-150,
+    100: $red-100,
+    50: $red-50,
+    main: $red,
+  ),
+  pink: (
+    950: $pink-950,
+    900: $pink-900,
+    850: $pink-850,
+    800: $pink-800,
+    750: $pink-750,
+    700: $pink-700,
+    650: $pink-650,
+    600: $pink-600,
+    550: $pink-550,
+    500: $pink-500,
+    450: $pink-450,
+    400: $pink-400,
+    350: $pink-350,
+    300: $pink-300,
+    250: $pink-250,
+    200: $pink-200,
+    150: $pink-150,
+    100: $pink-100,
+    50: $pink-50,
+    main: $pink,
+  ),
+  fuchsia: (
+    950: $fuchsia-950,
+    900: $fuchsia-900,
+    850: $fuchsia-850,
+    800: $fuchsia-800,
+    750: $fuchsia-750,
+    700: $fuchsia-700,
+    650: $fuchsia-650,
+    600: $fuchsia-600,
+    550: $fuchsia-550,
+    500: $fuchsia-500,
+    450: $fuchsia-450,
+    400: $fuchsia-400,
+    350: $fuchsia-350,
+    300: $fuchsia-300,
+    250: $fuchsia-250,
+    200: $fuchsia-200,
+    150: $fuchsia-150,
+    100: $fuchsia-100,
+    50: $fuchsia-50,
+    main: $fuchsia,
+  ),
+  purple: (
+    950: $purple-950,
+    900: $purple-900,
+    850: $purple-850,
+    800: $purple-800,
+    750: $purple-750,
+    700: $purple-700,
+    650: $purple-650,
+    600: $purple-600,
+    550: $purple-550,
+    500: $purple-500,
+    450: $purple-450,
+    400: $purple-400,
+    350: $purple-350,
+    300: $purple-300,
+    250: $purple-250,
+    200: $purple-200,
+    150: $purple-150,
+    100: $purple-100,
+    50: $purple-50,
+    main: $purple,
+  ),
+  violet: (
+    950: $violet-950,
+    900: $violet-900,
+    850: $violet-850,
+    800: $violet-800,
+    750: $violet-750,
+    700: $violet-700,
+    650: $violet-650,
+    600: $violet-600,
+    550: $violet-550,
+    500: $violet-500,
+    450: $violet-450,
+    400: $violet-400,
+    350: $violet-350,
+    300: $violet-300,
+    250: $violet-250,
+    200: $violet-200,
+    150: $violet-150,
+    100: $violet-100,
+    50: $violet-50,
+    main: $violet,
+  ),
+  indigo: (
+    950: $indigo-950,
+    900: $indigo-900,
+    850: $indigo-850,
+    800: $indigo-800,
+    750: $indigo-750,
+    700: $indigo-700,
+    650: $indigo-650,
+    600: $indigo-600,
+    550: $indigo-550,
+    500: $indigo-500,
+    450: $indigo-450,
+    400: $indigo-400,
+    350: $indigo-350,
+    300: $indigo-300,
+    250: $indigo-250,
+    200: $indigo-200,
+    150: $indigo-150,
+    100: $indigo-100,
+    50: $indigo-50,
+    main: $indigo,
+  ),
+  blue: (
+    950: $blue-950,
+    900: $blue-900,
+    850: $blue-850,
+    800: $blue-800,
+    750: $blue-750,
+    700: $blue-700,
+    650: $blue-650,
+    600: $blue-600,
+    550: $blue-550,
+    500: $blue-500,
+    450: $blue-450,
+    400: $blue-400,
+    350: $blue-350,
+    300: $blue-300,
+    250: $blue-250,
+    200: $blue-200,
+    150: $blue-150,
+    100: $blue-100,
+    50: $blue-50,
+    main: $blue,
+  ),
+  azure: (
+    950: $azure-950,
+    900: $azure-900,
+    850: $azure-850,
+    800: $azure-800,
+    750: $azure-750,
+    700: $azure-700,
+    650: $azure-650,
+    600: $azure-600,
+    550: $azure-550,
+    500: $azure-500,
+    450: $azure-450,
+    400: $azure-400,
+    350: $azure-350,
+    300: $azure-300,
+    250: $azure-250,
+    200: $azure-200,
+    150: $azure-150,
+    100: $azure-100,
+    50: $azure-50,
+    main: $azure,
+  ),
+  cyan: (
+    950: $cyan-950,
+    900: $cyan-900,
+    850: $cyan-850,
+    800: $cyan-800,
+    750: $cyan-750,
+    700: $cyan-700,
+    650: $cyan-650,
+    600: $cyan-600,
+    550: $cyan-550,
+    500: $cyan-500,
+    450: $cyan-450,
+    400: $cyan-400,
+    350: $cyan-350,
+    300: $cyan-300,
+    250: $cyan-250,
+    200: $cyan-200,
+    150: $cyan-150,
+    100: $cyan-100,
+    50: $cyan-50,
+    main: $cyan,
+  ),
+  jade: (
+    950: $jade-950,
+    900: $jade-900,
+    850: $jade-850,
+    800: $jade-800,
+    750: $jade-750,
+    700: $jade-700,
+    650: $jade-650,
+    600: $jade-600,
+    550: $jade-550,
+    500: $jade-500,
+    450: $jade-450,
+    400: $jade-400,
+    350: $jade-350,
+    300: $jade-300,
+    250: $jade-250,
+    200: $jade-200,
+    150: $jade-150,
+    100: $jade-100,
+    50: $jade-50,
+    main: $jade,
+  ),
+  green: (
+    950: $green-950,
+    900: $green-900,
+    850: $green-850,
+    800: $green-800,
+    750: $green-750,
+    700: $green-700,
+    650: $green-650,
+    600: $green-600,
+    550: $green-550,
+    500: $green-500,
+    450: $green-450,
+    400: $green-400,
+    350: $green-350,
+    300: $green-300,
+    250: $green-250,
+    200: $green-200,
+    150: $green-150,
+    100: $green-100,
+    50: $green-50,
+    main: $green,
+  ),
+  lime: (
+    950: $lime-950,
+    900: $lime-900,
+    850: $lime-850,
+    800: $lime-800,
+    750: $lime-750,
+    700: $lime-700,
+    650: $lime-650,
+    600: $lime-600,
+    550: $lime-550,
+    500: $lime-500,
+    450: $lime-450,
+    400: $lime-400,
+    350: $lime-350,
+    300: $lime-300,
+    250: $lime-250,
+    200: $lime-200,
+    150: $lime-150,
+    100: $lime-100,
+    50: $lime-50,
+    main: $lime,
+  ),
+  yellow: (
+    950: $yellow-950,
+    900: $yellow-900,
+    850: $yellow-850,
+    800: $yellow-800,
+    750: $yellow-750,
+    700: $yellow-700,
+    650: $yellow-650,
+    600: $yellow-600,
+    550: $yellow-550,
+    500: $yellow-500,
+    450: $yellow-450,
+    400: $yellow-400,
+    350: $yellow-350,
+    300: $yellow-300,
+    250: $yellow-250,
+    200: $yellow-200,
+    150: $yellow-150,
+    100: $yellow-100,
+    50: $yellow-50,
+    main: $yellow,
+  ),
+  amber: (
+    950: $amber-950,
+    900: $amber-900,
+    850: $amber-850,
+    800: $amber-800,
+    750: $amber-750,
+    700: $amber-700,
+    650: $amber-650,
+    600: $amber-600,
+    550: $amber-550,
+    500: $amber-500,
+    450: $amber-450,
+    400: $amber-400,
+    350: $amber-350,
+    300: $amber-300,
+    250: $amber-250,
+    200: $amber-200,
+    150: $amber-150,
+    100: $amber-100,
+    50: $amber-50,
+    main: $amber,
+  ),
+  pumpkin: (
+    950: $pumpkin-950,
+    900: $pumpkin-900,
+    850: $pumpkin-850,
+    800: $pumpkin-800,
+    750: $pumpkin-750,
+    700: $pumpkin-700,
+    650: $pumpkin-650,
+    600: $pumpkin-600,
+    550: $pumpkin-550,
+    500: $pumpkin-500,
+    450: $pumpkin-450,
+    400: $pumpkin-400,
+    350: $pumpkin-350,
+    300: $pumpkin-300,
+    250: $pumpkin-250,
+    200: $pumpkin-200,
+    150: $pumpkin-150,
+    100: $pumpkin-100,
+    50: $pumpkin-50,
+    main: $pumpkin,
+  ),
+  orange: (
+    950: $orange-950,
+    900: $orange-900,
+    850: $orange-850,
+    800: $orange-800,
+    750: $orange-750,
+    700: $orange-700,
+    650: $orange-650,
+    600: $orange-600,
+    550: $orange-550,
+    500: $orange-500,
+    450: $orange-450,
+    400: $orange-400,
+    350: $orange-350,
+    300: $orange-300,
+    250: $orange-250,
+    200: $orange-200,
+    150: $orange-150,
+    100: $orange-100,
+    50: $orange-50,
+    main: $orange,
+  ),
+  sand: (
+    950: $sand-950,
+    900: $sand-900,
+    850: $sand-850,
+    800: $sand-800,
+    750: $sand-750,
+    700: $sand-700,
+    650: $sand-650,
+    600: $sand-600,
+    550: $sand-550,
+    500: $sand-500,
+    450: $sand-450,
+    400: $sand-400,
+    350: $sand-350,
+    300: $sand-300,
+    250: $sand-250,
+    200: $sand-200,
+    150: $sand-150,
+    100: $sand-100,
+    50: $sand-50,
+    main: $sand,
+  ),
+  grey: (
+    950: $grey-950,
+    900: $grey-900,
+    850: $grey-850,
+    800: $grey-800,
+    750: $grey-750,
+    700: $grey-700,
+    650: $grey-650,
+    600: $grey-600,
+    550: $grey-550,
+    500: $grey-500,
+    450: $grey-450,
+    400: $grey-400,
+    350: $grey-350,
+    300: $grey-300,
+    250: $grey-250,
+    200: $grey-200,
+    150: $grey-150,
+    100: $grey-100,
+    50: $grey-50,
+    main: $grey,
+  ),
+  zinc: (
+    950: $zinc-950,
+    900: $zinc-900,
+    850: $zinc-850,
+    800: $zinc-800,
+    750: $zinc-750,
+    700: $zinc-700,
+    650: $zinc-650,
+    600: $zinc-600,
+    550: $zinc-550,
+    500: $zinc-500,
+    450: $zinc-450,
+    400: $zinc-400,
+    350: $zinc-350,
+    300: $zinc-300,
+    250: $zinc-250,
+    200: $zinc-200,
+    150: $zinc-150,
+    100: $zinc-100,
+    50: $zinc-50,
+    main: $zinc,
+  ),
+  slate: (
+    950: $slate-950,
+    900: $slate-900,
+    850: $slate-850,
+    800: $slate-800,
+    750: $slate-750,
+    700: $slate-700,
+    650: $slate-650,
+    600: $slate-600,
+    550: $slate-550,
+    500: $slate-500,
+    450: $slate-450,
+    400: $slate-400,
+    350: $slate-350,
+    300: $slate-300,
+    250: $slate-250,
+    200: $slate-200,
+    150: $slate-150,
+    100: $slate-100,
+    50: $slate-50,
+    main: $slate,
+  ),
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss
new file mode 100644
index 0000000..2656e81
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss
@@ -0,0 +1,74 @@
+@use "sass:list";
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+$enable-css-vars: map.get(settings.$utilities, "css-vars");
+$background-color-property-name: map.get(settings.$properties, "background-color");
+$color-property-name: map.get(settings.$properties, "color");
+$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+@mixin foreground-color($background-color) {
+  @if map.get(settings.$utilities, "color-for-background-colors") {
+    @if utils.foreground-brightness($background-color) == "light" {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-light);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "light-color"));
+      }
+    } @else {
+      @if $enable-css-vars {
+        color: var(#{$css-var-color-prefix}-dark);
+      } @else {
+        color: utils.display-color(map.get(settings.$palette, "dark-color"));
+      }
+    }
+  }
+}
+
+@mixin background-colors {
+  @if map.get(settings.$utilities, "background-colors") {
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$background-color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+
+          // Shades
+          @else if
+            list.index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            $value: $color-value;
+            @if $enable-css-vars {
+              $value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              background-color: $value;
+              @include foreground-color($color-value);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss
new file mode 100644
index 0000000..9f91fd6
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss
@@ -0,0 +1,51 @@
+@use "sass:list";
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin colors {
+  @if map.get(settings.$utilities, "colors") {
+    $enable-css-vars: map.get(settings.$utilities, "css-vars");
+    $color-property-name: map.get(settings.$properties, "color");
+    $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+    // Loop through color families
+    @each $family, $colors in colors.$colors {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
+        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+        $class-family-name: #{$color-property-name}-#{$family};
+
+        // Loop through colors
+        @each $shade, $color-value in $colors {
+          // Main color
+          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name} {
+              color: $color-value;
+            }
+          }
+
+          // Shades
+          @else if
+            list.index(map.get(settings.$palette, "shades"), $shade) and
+            map.get(settings.$palette, "enable-shades")
+          {
+            @if $enable-css-vars {
+              $color-value: var(#{$css-var-family-name}-#{$shade});
+            } @else {
+              $color-value: utils.display-color($color-value);
+            }
+            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
+              color: $color-value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss
new file mode 100644
index 0000000..8007d49
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss
@@ -0,0 +1,55 @@
+@use "sass:list";
+@use "sass:map";
+@use "../../colors";
+@use "settings";
+@use "utils";
+
+@mixin css-vars {
+  $enable-css-vars: map.get(settings.$utilities, "css-vars");
+  $color-property-name: map.get(settings.$properties, "color");
+  $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
+
+  @if $enable-css-vars {
+    :root,
+    :host {
+      // Loop through color families
+      @each $family, $colors in colors.$colors {
+        @if list.index(map.get(settings.$palette, "color-families"), $family) {
+          $css-var-family-name: #{$css-var-color-prefix}-#{$family};
+
+          // Loop through colors
+          @each $shade, $color-value in $colors {
+            // Main color
+            @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
+              #{$css-var-family-name}: #{utils.display-color($color-value)};
+            }
+
+            // Shades
+            @else if
+              list.index(map.get(settings.$palette, "shades"), $shade) and
+              map.get(settings.$palette, "enable-shades")
+            {
+              #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
+            }
+          }
+        }
+      }
+
+      // Black & white
+      @if map.get(settings.$palette, "enable-black-and-white") {
+        #{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
+        #{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
+      }
+
+      // Text color variables
+      @if map.get(settings.$utilities, "color-for-background-colors") {
+        #{$css-var-color-prefix}-light: #{utils.display-color(
+            map.get(settings.$palette, "light-color")
+          )};
+        #{$css-var-color-prefix}-dark: #{utils.display-color(
+            map.get(settings.$palette, "dark-color")
+          )};
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss
new file mode 100644
index 0000000..7ad384b
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss
@@ -0,0 +1,8 @@
+@forward "settings";
+@use "css-vars" as *;
+@use "colors" as *;
+@use "background-colors" as *;
+
+@include css-vars;
+@include colors;
+@include background-colors;
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss
new file mode 100644
index 0000000..2a52cd8
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss
@@ -0,0 +1,106 @@
+@use "sass:map";
+@use "../../settings" as pico-settings;
+
+// Prefix for CSS variables
+$css-var-prefix: "--pico-" !default; // Must start with "--"
+$css-class-prefix: "pico-" !default;
+
+// Palette
+$palette: () !default;
+$palette: map.merge(
+  (
+    // Color families
+    "color-families": (
+        red,
+        pink,
+        fuchsia,
+        purple,
+        violet,
+        indigo,
+        blue,
+        azure,
+        cyan,
+        jade,
+        green,
+        lime,
+        yellow,
+        amber,
+        pumpkin,
+        orange,
+        sand,
+        grey,
+        zinc,
+        slate
+      ),
+    // Shades
+    "shades": (
+        50,
+        100,
+        150,
+        200,
+        250,
+        300,
+        350,
+        400,
+        450,
+        500,
+        550,
+        600,
+        650,
+        700,
+        750,
+        800,
+        850,
+        900,
+        950
+      ),
+    // Export main color for each family
+    "enable-main-color": true,
+
+    // Export shades for each family
+    "enable-shades": true,
+
+    // Export black and white
+    "enable-black-and-white": false,
+
+    // Light color used for dark backgrounds
+    "light-color": #fff,
+
+    // Dark color used for light backgrounds
+    "dark-color": #000,
+
+    // Export as HEX, RGB or HSL values
+    "export-as": "hex" // hex | rgb | hsl
+  ),
+  $palette
+);
+
+// Properties names used for CSS variables and classes
+// Useful if you want to shorten the names
+$properties: () !default;
+$properties: map.merge(
+  (
+    "color": "color",
+    "background-color": "background",
+  ),
+  $properties
+);
+
+// Utilities to export
+$utilities: () !default;
+$utilities: map.merge(
+  (
+    // CSS Vars
+    "css-vars": true,
+
+    // Colors utility classes
+    "colors": true,
+
+    // Background color utility classes
+    "background-colors": true,
+
+    // Color value for background color utility classes
+    "color-for-background-colors": true
+  ),
+  $utilities
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss
new file mode 100644
index 0000000..3e1c17e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss
@@ -0,0 +1,60 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass:map";
+@use "settings";
+
+// Determines if the foreground needs to be light or dark
+// depending on the background color passed.
+// W3C reference: http://www.w3.org/TR/AERT#color-contrast
+// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
+@function foreground-brightness($background-color) {
+  $background-color-brightness: brightness($background-color);
+  $light-color-brightness: brightness(#ffffff);
+
+  @if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
+    @return "light";
+  } @else {
+    @return "dark";
+  }
+}
+
+// Calculates the color brightness
+// Color brightness is determined by the following formula:
+// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
+@function brightness($color) {
+  $color-brightness: round(
+    math.div(
+      (color.channel($color, "red") * 299) + (color.channel($color, "green") * 587) +
+        (color.channel($color, "blue") * 114),
+      1000
+    )
+  );
+
+  @return $color-brightness;
+}
+
+// Returns the color as RGB, HSL or HEX
+@function display-color($color) {
+  @if map.get(settings.$palette, "export-as") == "rgb" {
+    @return display-rgb($color);
+  }
+  @if map.get(settings.$palette, "export-as") == "hsl" {
+    @return display-hsl($color);
+  }
+  @return $color;
+}
+
+// Display color as HSL
+@function display-hsl($color) {
+  @return unquote(
+    "hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
+  );
+}
+
+// Display color as RGB
+@function display-rgb($color) {
+  @return unquote(
+    "rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
+      color.channel($color, "blue") + ")"
+  );
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss
new file mode 100644
index 0000000..28a0ad0
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss
@@ -0,0 +1,116 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/accordion") {
+  /**
+   * Accordion (<details>)
+   */
+
+  #{$parent-selector} details {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+
+    summary {
+      line-height: 1rem;
+      list-style-type: none;
+      cursor: pointer;
+
+      @if $enable-transitions {
+        transition: color var(#{$css-var-prefix}transition);
+      }
+
+      &:not([role]) {
+        color: var(#{$css-var-prefix}accordion-close-summary-color);
+      }
+
+      // Reset marker
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        display: none;
+      }
+
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+
+      // Marker
+      &::after {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+        float: right;
+        transform: rotate(-90deg);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+
+        @if $enable-transitions {
+          transition: transform var(#{$css-var-prefix}transition);
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        &:not([role]) {
+          color: var(#{$css-var-prefix}accordion-active-summary-color);
+        }
+      }
+
+      &:focus-visible {
+        &:not([role]) {
+          outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
+          outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
+          color: var(#{$css-var-prefix}primary);
+        }
+      }
+
+      // Type button
+      &[role="button"] {
+        width: 100%;
+        text-align: left;
+
+        // Marker
+        &::after {
+          height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        }
+      }
+    }
+
+    // Open
+    &[open] {
+      > summary {
+        margin-bottom: var(#{$css-var-prefix}spacing);
+
+        &:not([role]) {
+          &:not(:focus) {
+            color: var(#{$css-var-prefix}accordion-open-summary-color);
+          }
+        }
+
+        &::after {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} details {
+      summary {
+        text-align: right;
+
+        &::after {
+          float: left;
+          background-position: left center;
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss
new file mode 100644
index 0000000..19d8358
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/card") {
+  /**
+   * Card (<article>)
+   */
+
+  #{$parent-selector} article {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+    padding: var(#{$css-var-prefix}block-spacing-vertical)
+      var(#{$css-var-prefix}block-spacing-horizontal);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}card-background-color);
+    box-shadow: var(#{$css-var-prefix}card-box-shadow);
+
+    > header,
+    > footer {
+      margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
+      padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
+        var(#{$css-var-prefix}block-spacing-horizontal);
+      background-color: var(#{$css-var-prefix}card-sectioning-background-color);
+    }
+
+    > header {
+      margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+      border-bottom: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-top-right-radius: var(#{$css-var-prefix}border-radius);
+      border-top-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+
+    > footer {
+      margin-top: var(#{$css-var-prefix}block-spacing-vertical);
+      margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}card-border-color);
+      border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
+      border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss
new file mode 100644
index 0000000..963ba67
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss
@@ -0,0 +1,280 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/dropdown") and $enable-classes {
+  /**
+   * Dropdown (details.dropdown)
+   */
+
+  // Container
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown {
+    position: relative;
+    border-bottom: none;
+
+    // Marker
+    // ––––––––––––––––––––
+    > summary,
+    > button,
+    > a {
+      &::after {
+        display: block;
+        width: 1rem;
+        height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
+        margin-inline-start: 0.25rem;
+        float: right;
+        // TODO: find out why we need this magic number (0.2 rem)
+        // for the marker to be aligned with the regular select
+        transform: rotate(0deg) translateX(0.2rem);
+        background-image: var(#{$css-var-prefix}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+      }
+    }
+  }
+
+  // Container type accordion
+  // inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    // Override height
+    margin-bottom: 0;
+  }
+
+  // Button as a select
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown > summary:not([role]) {
+    height: calc(
+      1rem *
+        var(#{$css-var-prefix}line-height) +
+        var(#{$css-var-prefix}form-element-spacing-vertical) *
+        2 +
+        var(#{$css-var-prefix}border-width) *
+        2
+    );
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}form-element-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}form-element-background-color);
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:active,
+    &:focus {
+      border-color: var(#{$css-var-prefix}form-element-active-border-color);
+      background-color: var(#{$css-var-prefix}form-element-active-background-color);
+    }
+
+    &:focus {
+      box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+
+    // Reset focus visible from accordion component
+    &:focus-visible {
+      outline: none;
+    }
+
+    // Aria-invalid
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-valid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-valid-focus-color
+      );
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}form-element-border-color: var(
+        #{$css-var-prefix}form-element-invalid-border-color
+      );
+      #{$css-var-prefix}form-element-active-border-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+      #{$css-var-prefix}form-element-focus-color: var(
+        #{$css-var-prefix}form-element-invalid-focus-color
+      );
+    }
+  }
+
+  // Dropdown inside a nav
+  // ––––––––––––––––––––
+  #{$parent-selector} nav details.dropdown {
+    display: inline;
+    margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
+
+    > summary {
+      &::after {
+        transform: rotate(0deg) translateX(0rem);
+      }
+
+      &:not([role]) {
+        // Override height
+        height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
+        );
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+
+        &:focus-visible {
+          box-shadow: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}primary-focus);
+        }
+      }
+    }
+  }
+
+  // Submenu
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown > summary + ul {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
+    margin: 0;
+    margin-top: var(#{$css-var-prefix}outline-width);
+    padding: 0;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}dropdown-background-color);
+    box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
+    color: var(#{$css-var-prefix}dropdown-color);
+    white-space: nowrap;
+    opacity: 0;
+
+    @if $enable-transitions {
+      transition:
+        opacity var(#{$css-var-prefix}transition),
+        transform 0s ease-in-out 1s;
+    }
+
+    &[dir="rtl"] {
+      right: 0;
+      left: auto;
+    }
+
+    li {
+      width: 100%;
+      margin-bottom: 0;
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+      list-style: none;
+
+      &:first-of-type {
+        margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      &:last-of-type {
+        margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+      }
+
+      a {
+        display: block;
+        margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
+          calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
+        padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+          var(#{$css-var-prefix}form-element-spacing-horizontal);
+        overflow: hidden;
+        border-radius: 0;
+        color: var(#{$css-var-prefix}dropdown-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:focus-visible,
+        &[aria-current]:not([aria-current="false"]) {
+          background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+        }
+      }
+
+      label {
+        width: 100%;
+      }
+
+      // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+      &:has(label):hover {
+        background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
+      }
+    }
+  }
+
+  // Button opened
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] > summary {
+    margin-bottom: 0;
+  }
+
+  // Menu opened
+  // ––––––––––––––––––––
+  // 1. Inside container type accordion
+  #{$parent-selector} details.dropdown[open] > summary {
+    + ul {
+      transform: scaleY(1);
+      opacity: 1;
+
+      @if $enable-transitions {
+        transition:
+          opacity var(#{$css-var-prefix}transition),
+          transform 0s ease-in-out 0s;
+      }
+    }
+  }
+
+  // Close for dropdown
+  // inside container type accordion
+  // ––––––––––––––––––––
+  #{$parent-selector} details.dropdown[open] > summary {
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      inset: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+  // Label
+  // ––––––––––––––––––––
+  #{$parent-selector} label > details.dropdown {
+    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss
new file mode 100644
index 0000000..8b2631b
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss
@@ -0,0 +1,120 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/group") {
+  /**
+   * Group ([role="group"], [role="search"])
+   */
+
+  #{$parent-selector} [role="search"],
+  #{$parent-selector} [role="group"] {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    vertical-align: middle;
+    transition: box-shadow var(#{$css-var-prefix}transition);
+
+    > *,
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      position: relative;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:focus {
+        z-index: 2;
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"],
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      &:not(:first-child) {
+        margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"] {
+      width: auto;
+    }
+
+    @supports selector(:has(*)) {
+      // Group box shadow when a button is focused
+      &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-button
+        );
+
+        input:not([type="checkbox"], [type="radio"]),
+        select {
+          border-color: transparent;
+        }
+      }
+
+      // Group box shadow when an input is focused
+      &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+        #{$css-var-prefix}group-box-shadow: var(
+          #{$css-var-prefix}group-box-shadow-focus-with-input
+        );
+
+        // Adapt box shadow for buttons
+        button,
+        [type="submit"],
+        [type="button"],
+        [role="button"] {
+          #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-border);
+          #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
+            var(#{$css-var-prefix}primary-hover-border);
+        }
+      }
+
+      // Remove button box shadow if we have a group box shadow
+      button,
+      [type="submit"],
+      [type="reset"],
+      [type="button"],
+      [role="button"] {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} [role="search"] {
+    > * {
+      &:first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss
new file mode 100644
index 0000000..ab29d69
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss
@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/loading") {
+  /**
+   * Loading ([aria-busy=true])
+   */
+
+  // Everything except form elements
+  #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
+    white-space: nowrap;
+
+    &::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      background-image: var(#{$css-var-prefix}icon-loading);
+      background-size: 1em auto;
+      background-repeat: no-repeat;
+      content: "";
+      vertical-align: -0.125em; // Visual alignment
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
+      }
+    }
+
+    &:empty {
+      text-align: center;
+    }
+  }
+
+  // Buttons and links
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [role="button"],
+  #{$parent-selector} a {
+    &[aria-busy="true"] {
+      pointer-events: none;
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss
new file mode 100644
index 0000000..d17943b
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss
@@ -0,0 +1,177 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/modal") {
+  /**
+   * Modal (<dialog>)
+   */
+
+  :root,
+  :host {
+    #{$css-var-prefix}scrollbar-width: 0px;
+  }
+
+  #{$parent-selector} dialog {
+    display: flex;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    min-width: 100%;
+    height: inherit;
+    min-height: 100%;
+    padding: 0;
+    border: 0;
+    backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
+    background-color: var(#{$css-var-prefix}modal-overlay-background-color);
+    color: var(#{$css-var-prefix}color);
+
+    // Content
+    > article {
+      $close-selector: if(
+        $enable-classes,
+        ".close, :is(a, button)[rel=prev]",
+        ":is(a, button)[rel=prev]"
+      );
+      width: 100%;
+      max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
+      margin: var(#{$css-var-prefix}spacing);
+      overflow: auto;
+
+      @if map.get($breakpoints, "sm") {
+        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "sm"), "viewport");
+        }
+      }
+
+      @if map.get($breakpoints, "md") {
+        @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "md"), "viewport");
+        }
+      }
+
+      > header {
+        > * {
+          margin-bottom: 0;
+        }
+
+        #{$close-selector} {
+          margin: 0;
+          margin-left: var(#{$css-var-prefix}spacing);
+          padding: 0;
+          float: right;
+        }
+      }
+
+      > footer {
+        text-align: right;
+
+        button,
+        [role="button"] {
+          margin-bottom: 0;
+
+          &:not(:first-of-type) {
+            margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
+          }
+        }
+      }
+
+      // Close icon
+      #{$close-selector} {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
+        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-left: auto;
+        border: none;
+        background-image: var(#{$css-var-prefix}icon-close);
+        background-position: center;
+        background-size: auto 1rem;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        opacity: 0.5;
+
+        @if $enable-transitions {
+          transition: opacity var(#{$css-var-prefix}transition);
+        }
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Closed state
+    &:not([open]),
+    &[open="false"] {
+      display: none;
+    }
+  }
+
+  // Utilities
+  @if $enable-classes {
+    .modal-is-open {
+      padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
+      overflow: hidden;
+      pointer-events: none;
+      touch-action: none;
+
+      dialog {
+        pointer-events: auto;
+        touch-action: auto;
+      }
+    }
+  }
+
+  // Animations
+  @if $enable-classes and $enable-transitions {
+    $animation-duration: 0.2s;
+
+    :where(.modal-is-opening, .modal-is-closing) {
+      dialog,
+      dialog > article {
+        animation-duration: $animation-duration;
+        animation-timing-function: ease-in-out;
+        animation-fill-mode: both;
+      }
+
+      dialog {
+        animation-duration: ($animation-duration * 4);
+        animation-name: modal-overlay;
+
+        > article {
+          animation-delay: $animation-duration;
+          animation-name: modal;
+        }
+      }
+    }
+
+    .modal-is-closing {
+      dialog,
+      dialog > article {
+        animation-delay: 0s;
+        animation-direction: reverse;
+      }
+    }
+
+    @keyframes modal-overlay {
+      from {
+        backdrop-filter: none;
+        background-color: transparent;
+      }
+    }
+
+    @keyframes modal {
+      from {
+        transform: translateY(-100%);
+        opacity: 0;
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss
new file mode 100644
index 0000000..c14dc4a
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss
@@ -0,0 +1,160 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/nav") {
+  /**
+   * Nav
+   */
+
+  // Reboot based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+  // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+  :where(nav li)::before {
+    float: left;
+    content: "\200B";
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} nav,
+  #{$parent-selector} nav ul {
+    display: flex;
+  }
+
+  #{$parent-selector} nav {
+    justify-content: space-between;
+    overflow: visible;
+
+    ol,
+    ul {
+      align-items: center;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
+
+      &:first-of-type {
+        margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+      &:last-of-type {
+        margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
+      }
+    }
+
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      :where(a, [role="link"]) {
+        display: inline-block;
+        margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
+          calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        border-radius: var(#{$css-var-prefix}border-radius);
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+
+      // Minimal support for buttons and forms elements
+      button,
+      [role="button"],
+      [type="button"],
+      input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+      select {
+        height: auto;
+        margin-right: inherit;
+        margin-bottom: 0;
+        margin-left: inherit;
+        padding: calc(
+            var(#{$css-var-prefix}nav-link-spacing-vertical) -
+              (var(#{$css-var-prefix}border-width) * 2)
+          )
+          var(#{$css-var-prefix}nav-link-spacing-horizontal);
+      }
+    }
+
+    // Breadcrumb
+    &[aria-label="breadcrumb"] {
+      align-items: center;
+      justify-content: start;
+
+      & ul li {
+        &:not(:first-child) {
+          margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
+        }
+
+        a {
+          margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
+          margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+        }
+
+        &:not(:last-child) {
+          &::after {
+            display: inline-block;
+            position: absolute;
+            width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
+            margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
+            content: var(#{$css-var-prefix}nav-breadcrumb-divider);
+            color: var(#{$css-var-prefix}muted-color);
+            text-align: center;
+            text-decoration: none;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      // Minimal support for aria-current
+      & a[aria-current]:not([aria-current="false"]) {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
+    }
+  }
+
+  // Vertical Nav
+  #{$parent-selector} aside {
+    nav,
+    ol,
+    ul,
+    li {
+      display: block;
+    }
+
+    li {
+      padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}nav-element-spacing-horizontal);
+
+      a {
+        display: block;
+      }
+
+      // Minimal support for links as buttons
+      [role="button"] {
+        margin: inherit;
+      }
+    }
+  }
+
+  // Breadcrumb RTL
+  [dir="rtl"] {
+    #{$parent-selector} nav {
+      &[aria-label="breadcrumb"] {
+        & ul li {
+          &:not(:last-child) {
+            ::after {
+              content: "\\";
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss
new file mode 100644
index 0000000..576b8e4
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss
@@ -0,0 +1,102 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/progress") {
+  /**
+   * Progress
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add the correct display in Edge 18- and IE
+  // 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
+  #{$parent-selector} progress {
+    display: inline-block; // 1
+    vertical-align: baseline; // 2
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} progress {
+    // Reset the default appearance
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    // Styles
+    display: inline-block;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+    overflow: hidden;
+
+    // Remove Firefox and Opera border
+    border: 0;
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background-color: var(#{$css-var-prefix}progress-background-color);
+
+    // IE10 uses `color` to set the bar background-color
+    color: var(#{$css-var-prefix}progress-color);
+
+    &::-webkit-progress-bar {
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: none;
+    }
+
+    &[value]::-webkit-progress-value {
+      background-color: var(#{$css-var-prefix}progress-color);
+
+      @if $enable-transitions {
+        transition: inline-size var(#{$css-var-prefix}transition);
+      }
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(#{$css-var-prefix}progress-color);
+    }
+
+    // Indeterminate state
+    @media (prefers-reduced-motion: no-preference) {
+      &:indeterminate {
+        background: var(#{$css-var-prefix}progress-background-color)
+          linear-gradient(
+            to right,
+            var(#{$css-var-prefix}progress-color) 30%,
+            var(#{$css-var-prefix}progress-background-color) 30%
+          )
+          top left / 150% 150% no-repeat;
+        animation: progress-indeterminate 1s linear infinite;
+
+        &[value]::-webkit-progress-value {
+          background-color: transparent;
+        }
+
+        &::-moz-progress-bar {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    @media (prefers-reduced-motion: no-preference) {
+      #{$parent-selector} progress:indeterminate {
+        animation-direction: reverse;
+      }
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss
new file mode 100644
index 0000000..a6d61ba
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss
@@ -0,0 +1,215 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/tooltip") {
+  /**
+   * Tooltip ([data-tooltip])
+   */
+
+  #{$parent-selector} [data-tooltip] {
+    position: relative;
+
+    &:not(a, button, input, [role="button"]) {
+      border-bottom: 1px dotted;
+      text-decoration: none;
+      cursor: help;
+    }
+
+    &[data-placement="top"]::before,
+    &[data-placement="top"]::after,
+    &::before,
+    &::after {
+      display: block;
+      z-index: 99;
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      padding: 0.25rem 0.5rem;
+      overflow: hidden;
+      transform: translate(-50%, -0.25rem);
+      border-radius: var(#{$css-var-prefix}border-radius);
+      background: var(#{$css-var-prefix}tooltip-background-color);
+      content: attr(data-tooltip);
+      color: var(#{$css-var-prefix}tooltip-color);
+      font-style: normal;
+      font-weight: var(#{$css-var-prefix}font-weight);
+      font-size: 0.875rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    // Caret
+    &[data-placement="top"]::after,
+    &::after {
+      padding: 0;
+      transform: translate(-50%, 0rem);
+      border-top: 0.3rem solid;
+      border-right: 0.3rem solid transparent;
+      border-left: 0.3rem solid transparent;
+      border-radius: 0;
+      background-color: transparent;
+      content: "";
+      color: var(#{$css-var-prefix}tooltip-background-color);
+    }
+
+    &[data-placement="bottom"] {
+      &::before,
+      &::after {
+        top: 100%;
+        bottom: auto;
+        transform: translate(-50%, 0.25rem);
+      }
+
+      &:after {
+        transform: translate(-50%, -0.3rem);
+        border: 0.3rem solid transparent;
+        border-bottom: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="left"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: 100%;
+        bottom: auto;
+        left: auto;
+        transform: translate(-0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-left: 0.3rem solid;
+      }
+    }
+
+    &[data-placement="right"] {
+      &::before,
+      &::after {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 100%;
+        transform: translate(0.25rem, -50%);
+      }
+
+      &:after {
+        transform: translate(-0.3rem, -50%);
+        border: 0.3rem solid transparent;
+        border-right: 0.3rem solid;
+      }
+    }
+
+    // Display
+    &:focus,
+    &:hover {
+      &::before,
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    @if $enable-transitions {
+      // Animations, excluding touch devices
+      @media (hover: hover) and (pointer: fine) {
+        // Default (top)
+        &:focus,
+        &:hover {
+          &::before,
+          &::after {
+            #{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
+            transform: translate(-50%, 0.75rem);
+            animation-duration: 0.2s;
+            animation-fill-mode: forwards;
+            animation-name: tooltip-slide;
+            opacity: 0;
+          }
+
+          &::after {
+            #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
+            transform: translate(-50%, -0.25rem);
+            animation-name: tooltip-caret-slide;
+          }
+        }
+
+        // Bottom
+        &[data-placement="bottom"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
+              transform: translate(-50%, -0.75rem);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
+              transform: translate(-50%, -0.5rem);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Left
+        &[data-placement="left"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
+              transform: translate(0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
+              transform: translate(0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+
+        // Right
+        &[data-placement="right"] {
+          &:focus,
+          &:hover {
+            &::before,
+            &::after {
+              #{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
+              transform: translate(-0.75rem, -50%);
+              animation-name: tooltip-slide;
+            }
+
+            &::after {
+              #{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
+              transform: translate(-0.05rem, -50%);
+              animation-name: tooltip-caret-slide;
+            }
+          }
+        }
+      }
+
+      @keyframes tooltip-slide {
+        to {
+          transform: var(#{$css-var-prefix}tooltip-slide-to);
+          opacity: 1;
+        }
+      }
+
+      @keyframes tooltip-caret-slide {
+        50% {
+          opacity: 0;
+        }
+        to {
+          transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss
new file mode 100644
index 0000000..2887e7e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss
@@ -0,0 +1,209 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/button") {
+  /**
+   * Button
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin on controls in Safari
+  // 3. Show the overflow in Edge
+  #{$parent-selector} button {
+    margin: 0; // 2
+    overflow: visible; // 3
+    font-family: inherit; // 1
+    text-transform: none; // 1
+  }
+
+  // Correct the inability to style buttons in iOS and Safari
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} button,
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"],
+  #{$parent-selector} [type="file"]::file-selector-button,
+  #{$parent-selector} [role="button"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    #{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1rem;
+    line-height: var(#{$css-var-prefix}line-height);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"])),
+    &:is(:hover, :active, :focus) {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
+      #{$css-var-prefix}box-shadow: var(
+        #{$css-var-prefix}button-hover-box-shadow,
+        0 0 0 rgba(0, 0, 0, 0)
+      );
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      #{$css-var-prefix}box-shadow:
+        var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  #{$parent-selector} [type="submit"],
+  #{$parent-selector} [type="reset"],
+  #{$parent-selector} [type="button"] {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // .secondary, .contrast & .outline
+  @if $enable-classes {
+    // Secondary
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+
+    // Contrast
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
+      }
+
+      &:focus,
+      &:is([aria-current]:not([aria-current="false"])):focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
+      }
+    }
+
+    // Outline (primary)
+    #{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
+    [type="reset"].outline {
+      #{$css-var-prefix}background-color: transparent;
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: transparent;
+        #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
+      }
+    }
+
+    // Outline (secondary)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
+    [type="reset"].outline {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
+      }
+    }
+
+    // Outline (contrast)
+    #{$parent-selector}
+      :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
+      }
+    }
+  } @else {
+    // Secondary button without .class
+    #{$parent-selector} [type="reset"],
+    #{$parent-selector} [type="file"]::file-selector-button {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
+      #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      cursor: pointer;
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
+      }
+
+      &:focus {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+
+  // Button [disabled]
+  #{$parent-selector}
+    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss
new file mode 100644
index 0000000..9579009
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss
@@ -0,0 +1,77 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/code") {
+  /**
+   * Code
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance and scaling of font size in all browsers
+  // 2. Correct the odd `em` font sizing in all browsers
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
+    font-size: 0.875em; // 2
+    font-family: var(#{$css-var-prefix}font-family); // 1
+  }
+
+  #{$parent-selector} pre code,
+  #{$parent-selector} pre samp {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  // Prevent overflow of the container in all browsers (opinionated)
+  #{$parent-selector} pre {
+    -ms-overflow-style: scrollbar;
+    overflow: auto;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} pre,
+  #{$parent-selector} code,
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
+    border-radius: var(#{$css-var-prefix}border-radius);
+    background: var(#{$css-var-prefix}code-background-color);
+    color: var(#{$css-var-prefix}code-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    line-height: initial;
+  }
+
+  #{$parent-selector} code,
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
+    display: inline-block;
+    padding: 0.375rem;
+  }
+
+  #{$parent-selector} pre {
+    display: block;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    overflow-x: auto;
+
+    > code,
+    > samp {
+      display: block;
+      padding: var(#{$css-var-prefix}spacing);
+      background: none;
+      line-height: var(#{$css-var-prefix}line-height);
+    }
+  }
+
+  // kbd
+  #{$parent-selector} kbd {
+    background-color: var(#{$css-var-prefix}code-kbd-background-color);
+    color: var(#{$css-var-prefix}code-kbd-color);
+    vertical-align: baseline;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss
new file mode 100644
index 0000000..6bf11af
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss
@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/embedded") {
+  /**
+   * Embedded content
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Change the alignment on media elements in all browsers (opinionated)
+  #{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
+    vertical-align: middle;
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} audio,
+  #{$parent-selector} video {
+    display: inline-block;
+  }
+
+  // Add the correct display in iOS 4-7
+  #{$parent-selector} audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  // Remove the border on iframes in all browsers (opinionated)
+  #{$parent-selector} :where(iframe) {
+    border-style: none;
+  }
+
+  // 1. Remove the border on images inside links in IE 10.
+  // 2. Responsive by default
+  #{$parent-selector} img {
+    max-width: 100%; // 2
+    height: auto; // 2
+    border-style: none; // 1
+  }
+
+  // Change the fill color to match the text color in all browsers (opinionated)
+  #{$parent-selector} :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  // Hide the overflow in IE
+  #{$parent-selector} svg:not(:root),
+  #{$parent-selector} svg:not(:host) {
+    overflow: hidden;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss
new file mode 100644
index 0000000..d479f1f
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss
@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/figure") {
+  /**
+   * Figure
+   */
+
+  #{$parent-selector} figure {
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    figcaption {
+      padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
+      color: var(#{$css-var-prefix}muted-color);
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss
new file mode 100644
index 0000000..1e33115
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss
@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/link") {
+  /**
+   * Link
+   */
+
+  #{$parent-selector} :where(a:not([role="button"])),
+  #{$parent-selector} [role="link"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}primary);
+    #{$css-var-prefix}background-color: transparent;
+    #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color); // 1
+    color: var(#{$css-var-prefix}color);
+    text-decoration: var(#{$css-var-prefix}text-decoration);
+    text-decoration-color: var(#{$css-var-prefix}underline);
+    text-underline-offset: 0.125em;
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        text-decoration var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
+      #{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
+      #{$css-var-prefix}text-decoration: underline;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
+    }
+
+    @if $enable-classes {
+      // Secondary
+      &.secondary {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
+        }
+      }
+
+      // Contrast
+      &.contrast {
+        #{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
+        #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
+
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          #{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
+          #{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
+        }
+      }
+    }
+  }
+
+  #{$parent-selector} a {
+    &[role="button"] {
+      display: inline-block;
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss
new file mode 100644
index 0000000..f0a763d
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss
@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/misc") {
+  /**
+   * Misc
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Correct the inheritance of border color in Firefox
+  // 2. Add the correct box sizing in Firefox
+  #{$parent-selector} hr {
+    height: 0; // 2
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    border: 0;
+    border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
+    color: inherit; // 1
+  }
+
+  // Add the correct display in IE 10+
+  #{$parent-selector} [hidden],
+  #{$parent-selector} template {
+    @if $enable-important {
+      display: none !important;
+    } @else {
+      display: none;
+    }
+  }
+
+  // Add the correct display in IE 9-
+  #{$parent-selector} canvas {
+    display: inline-block;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss
new file mode 100644
index 0000000..1239bc6
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/table") {
+  /**
+   * Table
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Collapse border spacing in all browsers (opinionated)
+  // 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+  #{$parent-selector} :where(table) {
+    width: 100%;
+    border-collapse: collapse; // 1
+    border-spacing: 0;
+    text-indent: 0; // 2
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  // Cells
+  #{$parent-selector} th,
+  #{$parent-selector} td {
+    padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
+    border-bottom: var(#{$css-var-prefix}border-width)
+      solid
+      var(#{$css-var-prefix}table-border-color);
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    text-align: left;
+    text-align: start;
+  }
+
+  // Footer
+  #{$parent-selector} tfoot {
+    th,
+    td {
+      border-top: var(#{$css-var-prefix}border-width)
+        solid
+        var(#{$css-var-prefix}table-border-color);
+      border-bottom: 0;
+    }
+  }
+
+  // Striped
+  @if enable-classes {
+    #{$parent-selector} table {
+      &.striped {
+        tbody tr:nth-child(odd) th,
+        tbody tr:nth-child(odd) td {
+          background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss
new file mode 100644
index 0000000..d22956a
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss
@@ -0,0 +1,182 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "content/typography") {
+  /**
+   * Typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Add the correct font weight in Chrome, Edge, and Safari
+  #{$parent-selector} b,
+  #{$parent-selector} strong {
+    font-weight: bolder;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers
+  #{$parent-selector} sub,
+  #{$parent-selector} sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  #{$parent-selector} sub {
+    bottom: -0.25em;
+  }
+  #{$parent-selector} sup {
+    top: -0.5em;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} address,
+  #{$parent-selector} blockquote,
+  #{$parent-selector} dl,
+  #{$parent-selector} ol,
+  #{$parent-selector} p,
+  #{$parent-selector} pre,
+  #{$parent-selector} table,
+  #{$parent-selector} ul {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-style: normal;
+    font-weight: var(#{$css-var-prefix}font-weight);
+  }
+
+  // Headings
+  #{$parent-selector} h1,
+  #{$parent-selector} h2,
+  #{$parent-selector} h3,
+  #{$parent-selector} h4,
+  #{$parent-selector} h5,
+  #{$parent-selector} h6 {
+    margin-top: 0;
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height);
+    font-family: var(#{$css-var-prefix}font-family);
+  }
+
+  #{$parent-selector} h1 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
+  }
+  #{$parent-selector} h2 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
+  }
+  #{$parent-selector} h3 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
+  }
+  #{$parent-selector} h4 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
+  }
+  #{$parent-selector} h5 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
+  }
+  #{$parent-selector} h6 {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
+  }
+
+  // Margin-top for headings after a block
+  #{$parent-selector}
+    :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
+    ~ :is(h1, h2, h3, h4, h5, h6) {
+      margin-top: var(#{$css-var-prefix}typography-spacing-top);
+    }
+  }
+
+  // Paragraphs
+  #{$parent-selector} p {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+  }
+
+  // Heading group
+  #{$parent-selector} hgroup {
+    margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
+
+    > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:not(:first-child):last-child {
+      #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+      #{$css-var-prefix}font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+
+  // Lists
+  #{$parent-selector} :where(ol, ul) {
+    li {
+      margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+    }
+  }
+
+  // Margin-top for nested lists
+  // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+  #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
+    margin: 0; // 1
+    margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
+  }
+
+  #{$parent-selector} ul li {
+    list-style: square;
+  }
+
+  // Highlighted text
+  #{$parent-selector} mark {
+    padding: 0.125rem 0.25rem;
+    background-color: var(#{$css-var-prefix}mark-background-color);
+    color: var(#{$css-var-prefix}mark-color);
+    vertical-align: baseline;
+  }
+
+  // Blockquote
+  #{$parent-selector} blockquote {
+    display: block;
+    margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
+    padding: var(#{$css-var-prefix}spacing);
+    border-right: none;
+    border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
+    border-inline-end: none;
+
+    footer {
+      margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
+      color: var(#{$css-var-prefix}blockquote-footer-color);
+    }
+  }
+
+  // Abbreviations
+  // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+  #{$parent-selector} abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none; // 1
+    cursor: help;
+  }
+
+  // Ins
+  #{$parent-selector} ins {
+    color: var(#{$css-var-prefix}ins-color);
+    text-decoration: none;
+  }
+
+  // del
+  #{$parent-selector} del {
+    color: var(#{$css-var-prefix}del-color);
+  }
+
+  // selection
+  #{$parent-selector} ::selection {
+    background-color: var(#{$css-var-prefix}text-selection-color);
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss
new file mode 100644
index 0000000..39fbe1e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss
@@ -0,0 +1,471 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/basics") {
+  // Helper
+  $helper-previous-tags: "input, select, textarea, fieldset";
+  /**
+   * Basics form elements
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Change the font styles in all browsers
+  // 2. Remove the margin in Firefox and Safari
+  #{$parent-selector} input,
+  #{$parent-selector} optgroup,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin: 0; // 2
+    font-size: 1rem; // 1
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: inherit; // 1
+    letter-spacing: inherit; // 2
+  }
+
+  // Show the overflow in IE.
+  #{$parent-selector} input {
+    overflow: visible;
+  }
+
+  // Remove the inheritance of text transform in Edge, Firefox, and IE
+  #{$parent-selector} select {
+    text-transform: none;
+  }
+
+  // 1. Correct the text wrapping in Edge and IE
+  // 2. Correct the color inheritance from `fieldset` elements in IE
+  // 3. Remove the padding so developers are not caught out when they zero out
+  // `fieldset` elements in all browsers
+  #{$parent-selector} legend {
+    max-width: 100%; // 1
+    padding: 0; // 3
+    color: inherit; // 2
+    white-space: normal; // 1
+  }
+
+  // 1. Remove the default vertical scrollbar in IE
+  #{$parent-selector} textarea {
+    overflow: auto; // 1
+  }
+
+  // Remove the padding in IE 10
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    padding: 0;
+  }
+
+  // Correct the cursor style of increment and decrement buttons in Safari
+  #{$parent-selector} ::-webkit-inner-spin-button,
+  #{$parent-selector} ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the odd appearance in Chrome and Safari
+  // 2. Correct the outline style in Safari
+  #{$parent-selector} [type="search"] {
+    -webkit-appearance: textfield; // 1
+    outline-offset: -2px; // 2
+  }
+
+  // Remove the inner padding in Chrome and Safari on macOS
+  #{$parent-selector} [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // 1. Correct the inability to style clickable types in iOS and Safari
+  // 2. Change font properties to `inherit` in Safari
+  #{$parent-selector} ::-webkit-file-upload-button {
+    -webkit-appearance: button; // 1
+    font: inherit; // 2
+  }
+
+  // Remove the inner border and padding of focus outlines in Firefox
+  #{$parent-selector} ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  //  Remove the focus outline in Firefox
+  #{$parent-selector} :-moz-focusring {
+    outline: none;
+  }
+
+  // Remove the additional :invalid styles in Firefox
+  #{$parent-selector} :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  // Change the inconsistent appearance in IE (opinionated)
+  #{$parent-selector} ::-ms-expand {
+    display: none;
+  }
+
+  // Remove the border and padding in all browsers (opinionated)
+  #{$parent-selector} [type="file"],
+  #{$parent-selector} [type="range"] {
+    padding: 0;
+    border-width: 0;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  // Force height for alternatives input types
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
+    height: calc(
+      (1rem * var(#{$css-var-prefix}line-height)) +
+        (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+        (var(#{$css-var-prefix}border-width) * 2)
+    );
+  }
+
+  // Fieldset
+  #{$parent-selector} fieldset {
+    width: 100%;
+    margin: 0;
+    margin-bottom: var(#{$css-var-prefix}spacing);
+    padding: 0;
+    border: 0;
+  }
+
+  // Label & legend
+  #{$parent-selector} label,
+  #{$parent-selector} fieldset legend {
+    display: block;
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
+  }
+
+  #{$parent-selector} fieldset legend {
+    margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
+  }
+
+  // Blocks, 100%
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} button[type="submit"],
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    width: 100%;
+  }
+
+  // Reset appearance (Not Checkboxes, Radios, Range and File)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    appearance: none;
+    padding: var(#{$css-var-prefix}form-element-spacing-vertical)
+      var(#{$css-var-prefix}form-element-spacing-horizontal);
+  }
+
+  // Commons styles
+  #{$parent-selector} input,
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
+    #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
+    #{$css-var-prefix}box-shadow: none;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: var(#{$css-var-prefix}border-radius);
+    outline: none;
+    background-color: var(#{$css-var-prefix}background-color);
+    box-shadow: var(#{$css-var-prefix}box-shadow);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+
+    @if $enable-transitions {
+      transition:
+        background-color var(#{$css-var-prefix}transition),
+        border-color var(#{$css-var-prefix}transition),
+        color var(#{$css-var-prefix}transition),
+        box-shadow var(#{$css-var-prefix}transition);
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}background-color: var(
+        #{$css-var-prefix}form-element-active-background-color
+      );
+    }
+  }
+
+  // Active & Focus
+  #{$parent-selector}
+    input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:is(:active, :focus) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
+    }
+  }
+
+  // Focus
+  #{$parent-selector}
+    input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="range"],
+      [type="file"],
+      [readonly]
+    ),
+  #{$parent-selector} :where(select, textarea):not([readonly]) {
+    &:focus {
+      #{$css-var-prefix}box-shadow: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}form-element-focus-color);
+    }
+  }
+
+  // Disabled
+  #{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
+  #{$parent-selector} select[disabled],
+  #{$parent-selector} textarea[disabled],
+  #{$parent-selector} label[aria-disabled="true"],
+  #{$parent-selector}
+    :where(fieldset[disabled])
+    :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
+    pointer-events: none;
+  }
+
+  #{$parent-selector} label[aria-disabled="true"] input[disabled] {
+    opacity: 1;
+  }
+
+  // Aria-invalid
+  #{$parent-selector} :where(input, select, textarea) {
+    &:not(
+        [type="checkbox"],
+        [type="radio"],
+        [type="date"],
+        [type="datetime-local"],
+        [type="month"],
+        [type="time"],
+        [type="week"],
+        [type="range"]
+      ) {
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-right: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+          padding-inline-end: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
+          ) !important;
+        } @else {
+          padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+          padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+          padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+        }
+        background-position: center right 0.75rem;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+      }
+
+      &[aria-invalid="false"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"]:not(select) {
+        background-image: var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+
+    &[aria-invalid="false"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-valid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-valid-focus-color);
+          }
+        }
+      }
+    }
+
+    &[aria-invalid="true"] {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+
+      &:is(:active, :focus) {
+        @if $enable-important {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          ) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
+          }
+        } @else {
+          #{$css-var-prefix}border-color: var(
+            #{$css-var-prefix}form-element-invalid-active-border-color
+          );
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$css-var-prefix}box-shadow: 0
+              0
+              0
+              var(#{$css-var-prefix}outline-width)
+              var(#{$css-var-prefix}form-element-invalid-focus-color);
+          }
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input, select, textarea) {
+      &:not([type="checkbox"], [type="radio"]) {
+        &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+          background-position: center left 0.75rem;
+        }
+      }
+    }
+  }
+
+  // Placeholder
+  #{$parent-selector} input::placeholder,
+  #{$parent-selector} input::-webkit-input-placeholder,
+  #{$parent-selector} textarea::placeholder,
+  #{$parent-selector} textarea::-webkit-input-placeholder,
+  #{$parent-selector} select:invalid {
+    color: var(#{$css-var-prefix}form-element-placeholder-color);
+    opacity: 1;
+  }
+
+  // Margin bottom (Not Checkboxes and Radios)
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
+  #{$parent-selector} select,
+  #{$parent-selector} textarea {
+    margin-bottom: var(#{$css-var-prefix}spacing);
+  }
+
+  // Select
+  #{$parent-selector} select {
+    // Unstyle the caret on `<select>`s in IE10+.
+    &::-ms-expand {
+      border: 0;
+      background-color: transparent;
+    }
+
+    &:not([multiple], [size]) {
+      padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
+      padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
+      background-image: var(#{$css-var-prefix}icon-chevron);
+      background-position: center right 0.75rem;
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+    }
+
+    &[multiple] {
+      option {
+        &:checked {
+          background: var(#{$css-var-prefix}form-element-selected-background-color);
+          color: var(#{$css-var-prefix}form-element-color);
+        }
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} select {
+      &:not([multiple], [size]) {
+        background-position: center left 0.75rem;
+      }
+    }
+  }
+
+  // Textarea
+  #{$parent-selector} textarea {
+    display: block;
+    resize: vertical;
+
+    &[aria-invalid] {
+      @if $enable-important {
+        #{$css-var-prefix}icon-height: calc(
+          (1rem * var(#{$css-var-prefix}line-height)) +
+            (var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
+            (var(#{$css-var-prefix}border-width) * 2)
+        );
+        background-position: top right 0.75rem !important;
+        background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
+      }
+    }
+  }
+  @if map.get($modules, "layout/grid") and $enable-classes {
+    $helper-previous-tags: $helper-previous-tags + ", .grid";
+  }
+
+  #{$parent-selector} :where(#{$helper-previous-tags}) {
+    + small {
+      display: block;
+      width: 100%;
+      margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
+      margin-bottom: var(#{$css-var-prefix}spacing);
+      color: var(#{$css-var-prefix}muted-color);
+    }
+    &[aria-invalid="false"] {
+      + small {
+        color: var(#{$css-var-prefix}ins-color);
+      }
+    }
+    &[aria-invalid="true"] {
+      + small {
+        color: var(#{$css-var-prefix}del-color);
+      }
+    }
+  }
+
+  // Styles for Input inside a label
+  #{$parent-selector} label {
+    > :where(input, select, textarea) {
+      margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_checkbox-radio-switch.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_checkbox-radio-switch.scss
new file mode 100644
index 0000000..520bf70
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_checkbox-radio-switch.scss
@@ -0,0 +1,177 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/checkbox-radio-switch") {
+  /**
+   * Checkboxes, Radios and Switches
+   */
+
+  // Labels
+  // Not working in Firefox, which doesn't support the `:has()` pseudo-class
+  #{$parent-selector} label {
+    &:has([type="checkbox"], [type="radio"]) {
+      width: fit-content;
+      cursor: pointer;
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 1.25em;
+    height: 1.25em;
+    margin-top: -0.125em;
+    margin-inline-end: 0.5em;
+    border-width: var(#{$css-var-prefix}border-width);
+    vertical-align: middle;
+    cursor: pointer;
+
+    &::-ms-check {
+      display: none; // unstyle IE checkboxes
+    }
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-checkbox);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+
+    & ~ label {
+      display: inline-block;
+      margin-bottom: 0;
+      cursor: pointer;
+
+      &:not(:last-of-type) {
+        margin-inline-end: 1em;
+      }
+    }
+  }
+
+  // Checkboxes
+  #{$parent-selector} [type="checkbox"] {
+    &:indeterminate {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
+      background-image: var(#{$css-var-prefix}icon-minus);
+      background-position: center;
+      background-size: 0.75em auto;
+      background-repeat: no-repeat;
+    }
+  }
+
+  // Radios
+  #{$parent-selector} [type="radio"] {
+    border-radius: 50%;
+
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
+      border-width: 0.35em;
+      background-image: none;
+    }
+  }
+
+  // Switches
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+    #{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
+
+    // Config
+    $switch-height: 1.25em;
+    $switch-width: 2.25em;
+    $switch-transition: 0.1s ease-in-out;
+
+    // Styles
+    width: $switch-width;
+    height: $switch-height;
+    border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
+    border-radius: $switch-height;
+    background-color: var(#{$css-var-prefix}background-color);
+    line-height: $switch-height;
+
+    &:not([aria-invalid]) {
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:before {
+      display: block;
+      aspect-ratio: 1;
+      height: 100%;
+      border-radius: 50%;
+      background-color: var(#{$css-var-prefix}color);
+      box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
+      content: "";
+
+      @if $enable-transitions {
+        transition: margin $switch-transition;
+      }
+    }
+
+    &:focus {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
+    }
+
+    &:checked {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
+      #{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
+      background-image: none;
+
+      &::before {
+        margin-inline-start: calc(#{$switch-width} - #{$switch-height});
+      }
+    }
+
+    &[disabled] {
+      #{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
+    }
+  }
+
+  // Aria-invalid
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}background-color: var(
+          #{$css-var-prefix}form-element-invalid-border-color
+        );
+      }
+    }
+  }
+
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-color.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-color.scss
new file mode 100644
index 0000000..3b5f28c
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-color.scss
@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Wrapper
+@mixin color-wrapper {
+  padding: 0;
+}
+
+// Swatch
+@mixin color-swatch {
+  border: 0;
+  border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
+}
+
+@if map.get($modules, "forms/input-color") {
+  /**
+   * Input type color
+   */
+
+  #{$parent-selector} [type="color"] {
+    &::-webkit-color-swatch-wrapper {
+      @include color-wrapper;
+    }
+
+    &::-moz-focus-inner {
+      @include color-wrapper;
+    }
+
+    &::-webkit-color-swatch {
+      @include color-swatch;
+    }
+
+    &::-moz-color-swatch {
+      @include color-swatch;
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-date.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-date.scss
new file mode 100644
index 0000000..c1e1c20
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-date.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-date") {
+  /**
+   * Input type datetime
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+      #{$css-var-prefix}icon-position: 0.75rem;
+      #{$css-var-prefix}icon-width: 1rem;
+      padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
+      background-image: var(#{$css-var-prefix}icon-date);
+      background-position: center right var(#{$css-var-prefix}icon-position);
+      background-size: var(#{$css-var-prefix}icon-width) auto;
+      background-repeat: no-repeat;
+    }
+
+    // Time
+    &[type="time"] {
+      background-image: var(#{$css-var-prefix}icon-time);
+    }
+  }
+
+  // Calendar picker
+  #{$parent-selector} [type="date"],
+  #{$parent-selector} [type="datetime-local"],
+  #{$parent-selector} [type="month"],
+  #{$parent-selector} [type="time"],
+  #{$parent-selector} [type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      width: var(#{$css-var-prefix}icon-width);
+      margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
+      margin-left: var(#{$css-var-prefix}icon-position);
+      opacity: 0;
+    }
+  }
+
+  // Calendar icons are hidden in Firefox
+  @if $enable-important {
+    @-moz-document url-prefix() {
+      #{$parent-selector} [type="date"],
+      #{$parent-selector} [type="datetime-local"],
+      #{$parent-selector} [type="month"],
+      #{$parent-selector} [type="time"],
+      #{$parent-selector} [type="week"] {
+        padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
+        background-image: none !important;
+      }
+    }
+  }
+
+  [dir="rtl"]
+    #{$parent-selector}
+    :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+    text-align: right;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-file.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-file.scss
new file mode 100644
index 0000000..a550508
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-file.scss
@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-file") {
+  /**
+   * Input type file
+   */
+
+  // 1. Hack to display the outline on the focused file selector button
+  //    with the forced overflow hidden on the input[type="file"] element.
+  #{$parent-selector} [type="file"] {
+    #{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
+    margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
+    padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
+    padding-left: var(#{$css-var-prefix}outline-width); // 1
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    &::file-selector-button {
+      margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
+      padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
+        var(#{$css-var-prefix}form-element-spacing-horizontal);
+    }
+
+    &:is(:hover, :active, :focus) {
+      &::file-selector-button {
+        #{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
+        #{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
+      }
+    }
+
+    &:focus {
+      &::file-selector-button {
+        #{$css-var-prefix}box-shadow:
+          var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-range.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-range.scss
new file mode 100644
index 0000000..08b8124
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-range.scss
@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../settings" as *;
+
+// Config
+$height-track: 0.375rem;
+$height-thumb: 1.25rem;
+$border-thumb: 2px;
+
+// Slider Track
+@mixin slider-track {
+  width: 100%;
+  height: $height-track;
+  border-radius: var(#{$css-var-prefix}border-radius);
+  background-color: var(#{$css-var-prefix}range-border-color);
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      box-shadow var(#{$css-var-prefix}transition);
+  }
+}
+
+// Slider Thumb
+@mixin slider-thumb {
+  -webkit-appearance: none;
+  width: $height-thumb;
+  height: $height-thumb;
+  margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+  border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
+  border-radius: 50%;
+  background-color: var(#{$css-var-prefix}range-thumb-color);
+  cursor: pointer;
+
+  @if $enable-transitions {
+    transition:
+      background-color var(#{$css-var-prefix}transition),
+      transform var(#{$css-var-prefix}transition);
+  }
+}
+
+@if map.get($modules, "forms/input-range") {
+  /**
+   * Input type range
+   */
+
+  #{$parent-selector} [type="range"] {
+    // Styles
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: $height-thumb;
+    background: none;
+
+    &::-webkit-slider-runnable-track {
+      @include slider-track;
+    }
+
+    &::-moz-range-track {
+      @include slider-track;
+    }
+
+    &::-ms-track {
+      @include slider-track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include slider-thumb;
+    }
+
+    &::-moz-range-thumb {
+      @include slider-thumb;
+    }
+
+    &::-ms-thumb {
+      @include slider-thumb;
+    }
+
+    &:active,
+    &:focus-within {
+      #{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
+      #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
+    }
+
+    &:active {
+      // Slider Thumb
+      &::-webkit-slider-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-moz-range-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-ms-thumb {
+        transform: scale(1.25);
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-search.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-search.scss
new file mode 100644
index 0000000..f015906
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_input-search.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "forms/input-search") {
+  /**
+   * Input type search
+   */
+
+  // :not() are needed to add Specificity and avoid !important on padding
+  #{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &[type="search"] {
+      padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
+      background-image: var(#{$css-var-prefix}icon-search);
+      background-position: center
+        left
+        calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+
+      &[aria-invalid] {
+        @if $enable-important {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          ) !important;
+        } @else {
+          padding-inline-start: calc(
+            var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
+          );
+        }
+        background-position:
+          center left 1.125rem,
+          center right 0.75rem;
+      }
+
+      &[aria-invalid="false"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
+      }
+
+      &[aria-invalid="true"] {
+        background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    #{$parent-selector} :where(input) {
+      &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+        &[type="search"] {
+          background-position: center right 1.125rem;
+
+          &[aria-invalid] {
+            background-position:
+              center right 1.125rem,
+              center left 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/helpers/_copyright.scss b/themes/ccchh/assets/pico-2.1.1/scss/helpers/_copyright.scss
new file mode 100644
index 0000000..9a48ee8
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/helpers/_copyright.scss
@@ -0,0 +1,4 @@
+/*!
+ * Pico CSS ✨ v2.1.1 (https://picocss.com)
+ * Copyright 2019-2025 - Licensed under MIT
+ */
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/helpers/_functions.scss b/themes/ccchh/assets/pico-2.1.1/scss/helpers/_functions.scss
new file mode 100644
index 0000000..d1e9d75
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/helpers/_functions.scss
@@ -0,0 +1,55 @@
+@use "sass:color";
+@use "sass:string";
+
+// Display color as RGB
+@function display-rgb($color) {
+  @return string.unquote(
+    "rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
+      color.channel($color, "blue") + ")"
+  );
+}
+
+// Generate a shadow layer
+@function shadow-layer($elevation, $blur, $opacity, $color) {
+  @return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
+}
+
+// Generate a shadow with 7 layers
+@function shadow($color) {
+  $box-shadow-elevation: 1rem;
+  $box-shadow-blur-strength: 6rem;
+  $box-shadow-opacity: 0.06;
+
+  @return shadow-layer(
+      $box-shadow-elevation * 0.029,
+      $box-shadow-blur-strength * 0.029,
+      $box-shadow-opacity * 0.283,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.067,
+      $box-shadow-blur-strength * 0.067,
+      $box-shadow-opacity * 0.4,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.125,
+      $box-shadow-blur-strength * 0.125,
+      $box-shadow-opacity * 0.5,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.225,
+      $box-shadow-blur-strength * 0.225,
+      $box-shadow-opacity * 0.6,
+      $color
+    ),
+    shadow-layer(
+      $box-shadow-elevation * 0.417,
+      $box-shadow-blur-strength * 0.417,
+      $box-shadow-opacity * 0.717,
+      $color
+    ),
+    shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
+    0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_container.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_container.scss
new file mode 100644
index 0000000..0efa9ad
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_container.scss
@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/container") and $enable-classes {
+  /**
+   * Container
+   */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(#{$css-var-prefix}spacing);
+    padding-left: var(#{$css-var-prefix}spacing);
+  }
+
+  .container {
+    $first-breakpoint: true;
+    @each $key, $values in $breakpoints {
+      @if $values {
+        @media (min-width: map.get($values, "breakpoint")) {
+          max-width: map.get($values, "viewport");
+          @if $first-breakpoint {
+            $first-breakpoint: false;
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_document.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_document.scss
new file mode 100644
index 0000000..0acb965
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_document.scss
@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/document") {
+  /**
+   * Document
+   * Content-box & Responsive typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add border box sizing in all browsers (opinionated)
+  // 2. Backgrounds do not repeat by default (opinionated)
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; // 1
+    background-repeat: no-repeat; // 2
+  }
+
+  // 1. Add text decoration inheritance in all browsers (opinionated)
+  // 2. Add vertical alignment inheritance in all browsers (opinionated)
+  ::before,
+  ::after {
+    text-decoration: inherit; // 1
+    vertical-align: inherit; // 2
+  }
+
+  // 1. Change the line height in all browsers (opinionated)
+  // 2. Breaks words to prevent overflow in all browsers (opinionated)
+  // 3. Use a 4-space tab width in all browsers (opinionated)
+  // 4. Remove the grey highlight on links in iOS (opinionated)
+  // 5. Prevent adjustments of font size after orientation changes in iOS
+  :where(:root),
+  :where(:host) {
+    -webkit-tap-highlight-color: transparent; // 4
+    -webkit-text-size-adjust: 100%; // 5
+    text-size-adjust: 100%; // 5
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: var(#{$css-var-prefix}font-family);
+    text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word; // 2
+    tab-size: 4; // 3
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_grid.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_grid.scss
new file mode 100644
index 0000000..0f1fad4
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_grid.scss
@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/grid") and $enable-classes {
+  /**
+   * Grid
+   * Minimal grid system with auto-layout columns
+   */
+
+  .grid {
+    grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
+    grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @if map.get($breakpoints, "md") {
+      @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for children in overflow
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_landmarks.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_landmarks.scss
new file mode 100644
index 0000000..b5d5a4e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_landmarks.scss
@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/landmarks") {
+  /**
+   * Landmarks
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove the margin in all browsers (opinionated)
+  body {
+    width: 100%;
+    margin: 0; // 1
+  }
+
+  // Render the `main` element consistently in IE
+  main {
+    display: block;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} #{$semantic-root-element} {
+    > header,
+    > main,
+    > footer {
+      // <header>, <main>, <footer> as containers
+      @if $enable-semantic-container {
+        $first-breakpoint: true;
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(#{$css-var-prefix}block-spacing-vertical)
+          var(#{$css-var-prefix}block-spacing-horizontal);
+
+        @if $enable-viewport {
+          @each $key, $values in $breakpoints {
+            @if $values {
+              @media (min-width: map.get($values, "breakpoint")) {
+                max-width: map.get($values, "viewport");
+                @if $first-breakpoint {
+                  $first-breakpoint: false;
+                  padding-right: 0;
+                  padding-left: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Regular vertical spacings for <header>, <main>, <footer>
+      @else {
+        padding-block: var(#{$css-var-prefix}block-spacing-vertical);
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_overflow-auto.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_overflow-auto.scss
new file mode 100644
index 0000000..085d95a
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_overflow-auto.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/overflow-auto") and $enable-classes {
+  /**
+   * Overflow auto
+   */
+
+  #{$parent-selector} .overflow-auto {
+    overflow: auto;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/layout/_section.scss b/themes/ccchh/assets/pico-2.1.1/scss/layout/_section.scss
new file mode 100644
index 0000000..4f88496
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/layout/_section.scss
@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/section") {
+  /**
+   * Section
+   */
+
+  #{$parent-selector} section {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/pico.classless.scss b/themes/ccchh/assets/pico-2.1.1/scss/pico.classless.scss
new file mode 100644
index 0000000..88a8be9
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/pico.classless.scss
@@ -0,0 +1,5 @@
+// Pico classless version
+@use "index" with (
+  $enable-semantic-container: true,
+  $enable-classes: false
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/pico.colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/pico.colors.scss
new file mode 100644
index 0000000..68cc296
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/pico.colors.scss
@@ -0,0 +1,2 @@
+@use "helpers/copyright";
+@use "colors/utilities";
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/pico.conditional.scss b/themes/ccchh/assets/pico-2.1.1/scss/pico.conditional.scss
new file mode 100644
index 0000000..4ac9489
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/pico.conditional.scss
@@ -0,0 +1,4 @@
+// Pico conditional version
+@use "index" with (
+  $parent-selector: ".pico"
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/pico.fluid.classless.scss b/themes/ccchh/assets/pico-2.1.1/scss/pico.fluid.classless.scss
new file mode 100644
index 0000000..fa2037e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/pico.fluid.classless.scss
@@ -0,0 +1,6 @@
+// Pico classless version
+@use "index" with (
+  $enable-semantic-container: true,
+  $enable-viewport: false,
+  $enable-classes: false
+);
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/pico.scss b/themes/ccchh/assets/pico-2.1.1/scss/pico.scss
new file mode 100644
index 0000000..88490ff
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/pico.scss
@@ -0,0 +1,2 @@
+@forward "settings";
+@use "index";
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/postcss.config.js b/themes/ccchh/assets/pico-2.1.1/scss/postcss.config.js
new file mode 100644
index 0000000..4eaff47
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  syntax: "postcss-scss",
+  map: false,
+  plugins: {
+    "css-declaration-sorter": { 
+      order: "smacss" 
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/_default.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/_default.scss
new file mode 100644
index 0000000..dce217b
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/_default.scss
@@ -0,0 +1,5 @@
+// Styles
+@use "default/styles";
+
+// Colors schemes
+@use "default/schemes";
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_dark.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_dark.scss
new file mode 100644
index 0000000..857ff7f
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_dark.scss
@@ -0,0 +1,261 @@
+@use "sass:color";
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+// Default: Dark theme
+@mixin theme {
+  color-scheme: dark;
+  #{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-200};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-450};
+  #{$css-var-prefix}muted-border-color: #{$slate-850};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "dark");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$zinc-350};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$zinc-250};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-550};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-100};
+  #{$css-var-prefix}contrast-background: #{$slate-50};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$white};
+  #{$css-var-prefix}contrast-hover-background: #{$white};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$black};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-50};
+    #{$css-var-prefix}h2-color: #{$zinc-100};
+    #{$css-var-prefix}h3-color: #{$zinc-200};
+    #{$css-var-prefix}h4-color: #{$zinc-250};
+    #{$css-var-prefix}h5-color: #{$zinc-300};
+    #{$css-var-prefix}h6-color: #{$zinc-400};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{$azure-750};
+    #{$css-var-prefix}mark-color: #{$white};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
+    #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-400};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
+    #{$css-var-prefix}form-element-border-color: #{$slate-800};
+    #{$css-var-prefix}form-element-color: #{$zinc-100};
+    #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
+    #{$css-var-prefix}form-element-active-background-color: #{color.mix(
+        $slate-900,
+        $slate-850,
+        75%
+      )};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
+        $red-500,
+        $slate-600,
+        75%
+      )};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
+        $jade-450,
+        $slate-600,
+        75%
+      )};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-750};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-850};
+    #{$css-var-prefix}range-active-border-color: #{$slate-800};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: #{$slate-900};
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$slate-900};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-850};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-850};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Focus for buttons, radio and select
+  @if map.get($modules, "forms/basics") {
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+
+  // Chevron icons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    // Change the icon color to black for accordion and dropdown .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} details {
+        summary {
+          &[role="button"].contrast:not(.outline) {
+            &::after {
+              filter: brightness(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to black for .contrast buttons
+    @if $enable-classes {
+      #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+        &.contrast:is(
+            button,
+            [type="submit"],
+            [type="button"],
+            [type="reset"],
+            [role="button"]
+          ):not(.outline) {
+          &::before {
+            filter: brightness(0);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_light.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_light.scss
new file mode 100644
index 0000000..ee86255
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_light.scss
@@ -0,0 +1,221 @@
+@use "sass:color";
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+// Default: Light theme
+@mixin theme {
+  color-scheme: light;
+  #{$css-var-prefix}background-color: #{$white};
+
+  // Text color
+  #{$css-var-prefix}color: #{$zinc-750};
+
+  // Text selection color
+  #{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
+
+  // Muted colors
+  #{$css-var-prefix}muted-color: #{$zinc-550};
+  #{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
+
+  // Primary colors
+  #{$css-var-prefix}primary: theme-colors.get("primary", "light");
+  #{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
+  #{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
+  #{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
+  #{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
+  #{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
+  #{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
+  #{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
+  #{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
+  #{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
+
+  // Secondary colors
+  #{$css-var-prefix}secondary: #{$slate-550};
+  #{$css-var-prefix}secondary-background: #{$slate-600};
+  #{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
+  #{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
+  #{$css-var-prefix}secondary-hover: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-background: #{$slate-650};
+  #{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
+  #{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}secondary-inverse: #{$white};
+
+  // Contrast colors
+  #{$css-var-prefix}contrast: #{$slate-900};
+  #{$css-var-prefix}contrast-background: #{$slate-900};
+  #{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
+  #{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
+  #{$css-var-prefix}contrast-hover: #{$black};
+  #{$css-var-prefix}contrast-hover-background: #{$black};
+  #{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
+  #{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
+  #{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
+  #{$css-var-prefix}contrast-inverse: #{$white};
+
+  // Box shadow
+  #{$css-var-prefix}box-shadow: functions.shadow($slate-400);
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Headings colors
+    #{$css-var-prefix}h1-color: #{$zinc-800};
+    #{$css-var-prefix}h2-color: #{$zinc-750};
+    #{$css-var-prefix}h3-color: #{$zinc-700};
+    #{$css-var-prefix}h4-color: #{$zinc-650};
+    #{$css-var-prefix}h5-color: #{$zinc-600};
+    #{$css-var-prefix}h6-color: #{$zinc-550};
+
+    // Highlighted text (<mark>)
+    #{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
+    #{$css-var-prefix}mark-color: #{$zinc-950};
+
+    // Inserted (<ins>) & Deleted (<del>)
+    #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
+    #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
+
+    // Blockquote
+    #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Button
+  @if map.get($modules, "content/button") {
+    // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+    // Don't use, 'none, 'false, 'null', '0', etc.
+    #{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    #{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    #{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    #{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)};
+    #{$css-var-prefix}code-color: #{$zinc-550};
+    #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
+  }
+
+  // Form elements
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
+    #{$css-var-prefix}form-element-border-color: #{$slate-150};
+    #{$css-var-prefix}form-element-color: #{$zinc-850};
+    #{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
+    #{$css-var-prefix}form-element-active-background-color: #{$white};
+    #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
+    #{$css-var-prefix}form-element-disabled-opacity: 0.5;
+    #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
+        $red-500,
+        $zinc-350,
+        75%
+      )};
+    #{$css-var-prefix}form-element-invalid-focus-color: var(
+      #{$css-var-prefix}form-element-invalid-active-border-color
+    );
+    #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
+        $jade-450,
+        $zinc-350,
+        75%
+      )};
+    #{$css-var-prefix}form-element-valid-focus-color: var(
+      #{$css-var-prefix}form-element-valid-active-border-color
+    );
+  }
+
+  // Switch (input[type="checkbox"][role="switch"])
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    #{$css-var-prefix}switch-background-color: #{$slate-200};
+    #{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
+    #{$css-var-prefix}switch-color: #{$white};
+    #{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
+  }
+
+  // Range (input[type="range"])
+  @if map.get($modules, "forms/input-range") {
+    #{$css-var-prefix}range-border-color: #{$slate-100};
+    #{$css-var-prefix}range-active-border-color: #{$slate-200};
+    #{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
+    #{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Accordion (<details>)
+  @if map.get($modules, "components/accordion") {
+    #{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
+    #{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
+  }
+
+  // Card (<article>)
+  @if map.get($modules, "components/card") {
+    #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
+    #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
+    #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)};
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    #{$css-var-prefix}dropdown-background-color: #{$white};
+    #{$css-var-prefix}dropdown-border-color: #{$slate-50};
+    #{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
+    #{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
+    #{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
+  }
+
+  // Loading ([aria-busy=true])
+  @if map.get($modules, "components/loading") {
+    #{$css-var-prefix}loading-spinner-opacity: 0.5;
+  }
+
+  // Modal (<dialog>)
+  @if map.get($modules, "components/modal") {
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)};
+  }
+
+  // Progress
+  @if map.get($modules, "components/progress") {
+    #{$css-var-prefix}progress-background-color: #{$slate-100};
+    #{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
+  }
+
+  // Tooltip ([data-tooltip])
+  @if map.get($modules, "components/tooltip") {
+    #{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
+    #{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
+  }
+
+  // Form validation icons
+  @if map.get($modules, "forms/basics") {
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  // Focus for buttons, radio and select
+  @if map.get($modules, "forms/basics") {
+    input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_schemes.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_schemes.scss
new file mode 100644
index 0000000..295884e
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_schemes.scss
@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../../settings" as *;
+
+@use "light";
+@use "dark";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Color schemes
+   */
+
+  // Light color scheme (Default)
+  // Can be forced with data-theme="light"
+  [data-theme="light"],
+  :root:not([data-theme="dark"]),
+  :host(:not([data-theme="dark"])) {
+    @include light.theme;
+  }
+
+  // Dark color scheme (Auto)
+  // Automatically enabled if user has Dark mode enabled
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme]),
+    :host(:not([data-theme])) {
+      @include dark.theme;
+    }
+  }
+
+  // Dark color scheme (Forced)
+  // Enabled if forced with data-theme="dark"
+  [data-theme="dark"] {
+    @include dark.theme;
+  }
+
+  #{$parent-selector} progress,
+  #{$parent-selector} [type="checkbox"],
+  #{$parent-selector} [type="radio"],
+  #{$parent-selector} [type="range"] {
+    accent-color: var(#{$css-var-prefix}primary);
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_styles.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_styles.scss
new file mode 100644
index 0000000..2b82af8
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_styles.scss
@@ -0,0 +1,435 @@
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+@use "../../helpers/functions";
+@use "theme-colors";
+
+@if map.get($modules, "themes/default") {
+  /**
+   * Styles
+   */
+
+  :root,
+  :host {
+    // Typography
+    #{$css-var-prefix}font-family-emoji:
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    #{$css-var-prefix}font-family-sans-serif:
+      system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
+      sans-serif, var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family-monospace:
+      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
+      var(#{$css-var-prefix}font-family-emoji);
+    #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
+    #{$css-var-prefix}line-height: 1.5;
+    #{$css-var-prefix}font-weight: 400;
+    #{$css-var-prefix}font-size: 100%;
+    #{$css-var-prefix}text-underline-offset: 0.1rem;
+
+    // Borders
+    #{$css-var-prefix}border-radius: 0.25rem;
+    #{$css-var-prefix}border-width: 0.0625rem;
+    #{$css-var-prefix}outline-width: 0.125rem;
+
+    // Transitions
+    #{$css-var-prefix}transition: 0.2s ease-in-out;
+
+    // Spacings
+    #{$css-var-prefix}spacing: 1rem;
+
+    // Spacings for typography elements
+    @if map.get($modules, "content/typography") {
+      #{$css-var-prefix}typography-spacing-vertical: 1rem;
+    }
+
+    // Spacings for body > header, body > main, body > footer, section, article
+    @if map.get($modules, "layout/landmarks") or
+      map.get($modules, "layout/section") or
+      map.get($modules, "components/card") or
+      map.get($modules, "components/modal")
+    {
+      #{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
+    }
+
+    @if map.get($modules, "layout/grid") and $enable-classes {
+      #{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
+      #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
+    }
+
+    // Spacings for form elements and button
+    @if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
+      #{$css-var-prefix}form-element-spacing-horizontal: 1rem;
+    }
+
+    // Font weight for form labels & fieldsets legend
+    @if map.get($modules, "forms/basic") {
+      #{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
+    }
+
+    // Group (role="group")
+    @if map.get($modules, "components/group") {
+      #{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+      #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+        0
+        0
+        var(#{$css-var-prefix}outline-width)
+        var(#{$css-var-prefix}primary-focus);
+      #{$css-var-prefix}group-box-shadow-focus-with-input: 0
+        0
+        0
+        0.0625rem
+        var(#{$css-var-prefix}form-element-border-color);
+    }
+
+    // Modal (<dialog>)
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
+    }
+
+    // Spacings for nav component
+    @if map.get($modules, "components/nav") {
+      #{$css-var-prefix}nav-element-spacing-vertical: 1rem;
+      #{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
+      #{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
+      #{$css-var-prefix}nav-breadcrumb-divider: ">";
+    }
+
+    // Checkboxes icons
+    @if map.get($modules, "forms/checkbox-radio-switch") {
+      #{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Chevron icons
+    @if map.get($modules, "forms/basics") or
+      map.get($modules, "components/accordion") or
+      map.get($modules, "components/dropdown")
+    {
+      #{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Datetime icons
+    @if map.get($modules, "forms/input-date") {
+      #{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+      #{$css-var-prefix}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    }
+
+    // Search icon
+    @if map.get($modules, "forms/input-search") {
+      #{$css-var-prefix}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Close icon
+    @if map.get($modules, "components/modal") {
+      #{$css-var-prefix}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    // Loading icon (animated)
+    @if map.get($modules, "components/loading") {
+      // Inspired by https://codepen.io/aleksander351/pen/KzgKPo
+      #{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+    }
+
+    // Responsive root font size
+    @if $enable-responsive-typography {
+      @each $key, $values in $breakpoints {
+        @if $values {
+          @media (min-width: map.get($values, "breakpoint")) {
+            #{$css-var-prefix}font-size: map.get($values, "root-font-size");
+          }
+        }
+      }
+    }
+  }
+
+  // Responsive spacings
+  @if $enable-responsive-spacings {
+    // Landmarks and section
+    @if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
+      #{$semantic-root-element} > header,
+      #{$semantic-root-element} > main,
+      #{$semantic-root-element} > footer,
+      section {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+
+    // Card (<article>)
+    @if map.get($modules, "components/card") {
+      article {
+        @each $key, $values in $breakpoints {
+          @if $values {
+            @media (min-width: map.get($values, "breakpoint")) {
+              $multiplier: 1;
+              @if $key == "sm" {
+                $multiplier: 1.25;
+              } @else if $key == "md" {
+                $multiplier: 1.5;
+              } @else if $key == "lg" {
+                $multiplier: 1.75;
+              } @else if $key == "xl" {
+                $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
+              }
+
+              #{$css-var-prefix}block-spacing-vertical: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+              #{$css-var-prefix}block-spacing-horizontal: calc(
+                var(#{$css-var-prefix}spacing) * $multiplier
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Link
+  @if map.get($modules, "content/link") {
+    a {
+      #{$css-var-prefix}text-decoration: underline;
+
+      // Secondary & Contrast
+      @if $enable-classes {
+        &.secondary,
+        &.contrast {
+          #{$css-var-prefix}text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  // Typography
+  @if map.get($modules, "content/typography") {
+    // Small
+    small {
+      #{$css-var-prefix}font-size: 0.875em;
+    }
+
+    // Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      #{$css-var-prefix}font-weight: 700;
+    }
+
+    h1 {
+      #{$css-var-prefix}font-size: 2rem;
+      #{$css-var-prefix}line-height: 1.125;
+      #{$css-var-prefix}typography-spacing-top: 3rem;
+    }
+
+    h2 {
+      #{$css-var-prefix}font-size: 1.75rem;
+      #{$css-var-prefix}line-height: 1.15;
+      #{$css-var-prefix}typography-spacing-top: 2.625rem;
+    }
+
+    h3 {
+      #{$css-var-prefix}font-size: 1.5rem;
+      #{$css-var-prefix}line-height: 1.175;
+      #{$css-var-prefix}typography-spacing-top: 2.25rem;
+    }
+
+    h4 {
+      #{$css-var-prefix}font-size: 1.25rem;
+      #{$css-var-prefix}line-height: 1.2;
+      #{$css-var-prefix}typography-spacing-top: 1.874rem;
+    }
+
+    h5 {
+      #{$css-var-prefix}font-size: 1.125rem;
+      #{$css-var-prefix}line-height: 1.225;
+      #{$css-var-prefix}typography-spacing-top: 1.6875rem;
+    }
+
+    h6 {
+      #{$css-var-prefix}font-size: 1rem;
+      #{$css-var-prefix}line-height: 1.25;
+      #{$css-var-prefix}typography-spacing-top: 1.5rem;
+    }
+  }
+
+  // Table
+  @if map.get($modules, "content/table") {
+    thead,
+    tfoot {
+      th,
+      td {
+        #{$css-var-prefix}font-weight: 600;
+        #{$css-var-prefix}border-width: 0.1875rem;
+      }
+    }
+  }
+
+  // Code
+  @if map.get($modules, "content/code") {
+    pre,
+    code,
+    kbd,
+    samp {
+      #{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
+    }
+
+    kbd {
+      #{$css-var-prefix}font-weight: bolder;
+    }
+  }
+
+  // Inputs and Selects
+  input:not(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  :where(select, textarea) {
+    #{$css-var-prefix}outline-width: 0.0625rem;
+  }
+
+  [type="search"] {
+    #{$css-var-prefix}border-radius: 5rem;
+  }
+
+  // Checkboxes, Radios and Switches
+  @if map.get($modules, "forms/checkbox-radio-switch") {
+    [type="checkbox"],
+    [type="radio"] {
+      #{$css-var-prefix}border-width: 0.125rem;
+    }
+
+    [type="checkbox"][role="switch"] {
+      #{$css-var-prefix}border-width: 0.1875rem;
+    }
+  }
+
+  // Dropdown (details.dropdown)
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    details.dropdown {
+      summary:not([role="button"]) {
+        #{$css-var-prefix}outline-width: 0.0625rem;
+      }
+    }
+    nav {
+      details.dropdown {
+        summary:focus-visible {
+          #{$css-var-prefix}outline-width: 0.125rem;
+        }
+      }
+    }
+  }
+
+  // Group (role="group")
+  @if map.get($modules, "components/group") {
+    [role="search"] {
+      #{$css-var-prefix}border-radius: 5rem;
+    }
+
+    [role="search"],
+    [role="group"] {
+      @if $enable-classes {
+        &:has(
+            button.secondary:focus,
+            [type="submit"].secondary:focus,
+            [type="button"].secondary:focus,
+            [role="button"].secondary:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}secondary-focus);
+        }
+
+        &:has(
+            button.contrast:focus,
+            [type="submit"].contrast:focus,
+            [type="button"].contrast:focus,
+            [role="button"].contrast:focus
+          ) {
+          #{$css-var-prefix}group-box-shadow-focus-with-button: 0
+            0
+            0
+            var(#{$css-var-prefix}outline-width)
+            var(#{$css-var-prefix}contrast-focus);
+        }
+      }
+
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        #{$css-var-prefix}form-element-spacing-horizontal: 2rem;
+      }
+    }
+  }
+
+  // Chevron icons
+  // Change the icon color to white for accordion and dropdown buttons
+  @if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
+    #{$parent-selector} details {
+      summary {
+        $selector: '&[role="button"]';
+        @if $enable-classes {
+          $selector: "#{$selector}:not(.outline)";
+        }
+        #{$selector} {
+          &::after {
+            filter: brightness(0) invert(1);
+          }
+        }
+      }
+    }
+  }
+
+  // Loading icon (animated)
+  @if map.get($modules, "components/loading") {
+    // Change the icon color to white for buttons
+    #{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
+      $selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
+      @if $enable-classes {
+        $selector: "#{$selector}:not(.outline)";
+      }
+      #{$selector} {
+        &::before {
+          @if theme-colors.get("primary-inverse", "dark") == $white {
+            filter: brightness(0) invert(1);
+          } @else {
+            filter: brightness(0) invert(0);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_theme-colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_theme-colors.scss
new file mode 100644
index 0000000..3d823c3
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/themes/default/_theme-colors.scss
@@ -0,0 +1,491 @@
+@use "sass:color";
+@use "sass:map";
+@use "../../colors" as *;
+@use "../../settings" as *;
+
+$color-mappings: (
+  "amber": (
+    "dark": (
+      "text-selection-color": rgba($amber-350, 0.1875),
+      "primary": $amber-350,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-350, 0.5),
+      "primary-hover": $amber-250,
+      "primary-hover-background": $amber-150,
+      "primary-focus": rgba($amber-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($amber-400, 0.25),
+      "primary": $amber-550,
+      "primary-background": $amber-200,
+      "primary-underline": rgba($amber-550, 0.5),
+      "primary-hover": $amber-650,
+      "primary-hover-background": $amber-250,
+      "primary-focus": rgba($amber-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "azure": (
+    "dark": (
+      "text-selection-color": rgba($azure-350, 0.1875),
+      "primary": $azure-350,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-350, 0.5),
+      "primary-hover": $azure-250,
+      "primary-hover-background": $azure-500,
+      "primary-focus": rgba($azure-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($azure-400, 0.25),
+      "primary": $azure-550,
+      "primary-background": $azure-550,
+      "primary-underline": rgba($azure-550, 0.5),
+      "primary-hover": $azure-650,
+      "primary-hover-background": $azure-600,
+      "primary-focus": rgba($azure-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "blue": (
+    "dark": (
+      "text-selection-color": rgba($blue-350, 0.1875),
+      "primary": $blue-350,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-350, 0.5),
+      "primary-hover": $blue-250,
+      "primary-hover-background": $blue-500,
+      "primary-focus": rgba($blue-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($blue-400, 0.25),
+      "primary": $blue-550,
+      "primary-background": $blue-550,
+      "primary-underline": rgba($blue-550, 0.5),
+      "primary-hover": $blue-650,
+      "primary-hover-background": $blue-600,
+      "primary-focus": rgba($blue-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "cyan": (
+    "dark": (
+      "text-selection-color": rgba($cyan-350, 0.1875),
+      "primary": $cyan-350,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-350, 0.5),
+      "primary-hover": $cyan-250,
+      "primary-hover-background": $cyan-500,
+      "primary-focus": rgba($cyan-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($cyan-400, 0.25),
+      "primary": $cyan-550,
+      "primary-background": $cyan-550,
+      "primary-underline": rgba($cyan-550, 0.5),
+      "primary-hover": $cyan-650,
+      "primary-hover-background": $cyan-600,
+      "primary-focus": rgba($cyan-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "fuchsia": (
+    "dark": (
+      "text-selection-color": rgba($fuchsia-350, 0.1875),
+      "primary": $fuchsia-350,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-350, 0.5),
+      "primary-hover": $fuchsia-250,
+      "primary-hover-background": $fuchsia-500,
+      "primary-focus": rgba($fuchsia-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($fuchsia-400, 0.25),
+      "primary": $fuchsia-550,
+      "primary-background": $fuchsia-550,
+      "primary-underline": rgba($fuchsia-550, 0.5),
+      "primary-hover": $fuchsia-650,
+      "primary-hover-background": $fuchsia-600,
+      "primary-focus": rgba($fuchsia-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "green": (
+    "dark": (
+      "text-selection-color": rgba($green-350, 0.1875),
+      "primary": $green-350,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-350, 0.5),
+      "primary-hover": $green-250,
+      "primary-hover-background": $green-450,
+      "primary-focus": rgba($green-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($green-400, 0.25),
+      "primary": $green-550,
+      "primary-background": $green-500,
+      "primary-underline": rgba($green-550, 0.5),
+      "primary-hover": $green-650,
+      "primary-hover-background": $green-550,
+      "primary-focus": rgba($green-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "grey": (
+    "dark": (
+      "text-selection-color": rgba($grey-350, 0.1875),
+      "primary": $grey-350,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-350, 0.5),
+      "primary-hover": $grey-250,
+      "primary-hover-background": $grey-250,
+      "primary-focus": rgba($grey-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($grey-400, 0.25),
+      "primary": $grey-550,
+      "primary-background": $grey-300,
+      "primary-underline": rgba($grey-550, 0.5),
+      "primary-hover": $grey-650,
+      "primary-hover-background": $grey-350,
+      "primary-focus": rgba($grey-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "indigo": (
+    "dark": (
+      "text-selection-color": rgba($indigo-350, 0.1875),
+      "primary": $indigo-350,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-350, 0.5),
+      "primary-hover": $indigo-250,
+      "primary-hover-background": $indigo-550,
+      "primary-focus": rgba($indigo-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($indigo-400, 0.25),
+      "primary": $indigo-550,
+      "primary-background": $indigo-600,
+      "primary-underline": rgba($indigo-550, 0.5),
+      "primary-hover": $indigo-650,
+      "primary-hover-background": $indigo-650,
+      "primary-focus": rgba($indigo-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "jade": (
+    "dark": (
+      "text-selection-color": rgba($jade-350, 0.1875),
+      "primary": $jade-350,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-350, 0.5),
+      "primary-hover": $jade-250,
+      "primary-hover-background": $jade-500,
+      "primary-focus": rgba($jade-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($jade-400, 0.25),
+      "primary": $jade-550,
+      "primary-background": $jade-550,
+      "primary-underline": rgba($jade-550, 0.5),
+      "primary-hover": $jade-650,
+      "primary-hover-background": $jade-600,
+      "primary-focus": rgba($jade-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "lime": (
+    "dark": (
+      "text-selection-color": rgba($lime-350, 0.1875),
+      "primary": $lime-350,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-350, 0.5),
+      "primary-hover": $lime-250,
+      "primary-hover-background": $lime-150,
+      "primary-focus": rgba($lime-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($lime-400, 0.25),
+      "primary": $lime-550,
+      "primary-background": $lime-200,
+      "primary-underline": rgba($lime-550, 0.5),
+      "primary-hover": $lime-650,
+      "primary-hover-background": $lime-250,
+      "primary-focus": rgba($lime-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "orange": (
+    "dark": (
+      "text-selection-color": rgba($orange-350, 0.1875),
+      "primary": $orange-350,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-350, 0.5),
+      "primary-hover": $orange-250,
+      "primary-hover-background": $orange-450,
+      "primary-focus": rgba($orange-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($orange-400, 0.25),
+      "primary": $orange-550,
+      "primary-background": $orange-500,
+      "primary-underline": rgba($orange-550, 0.5),
+      "primary-hover": $orange-650,
+      "primary-hover-background": $orange-550,
+      "primary-focus": rgba($orange-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pink": (
+    "dark": (
+      "text-selection-color": rgba($pink-350, 0.1875),
+      "primary": $pink-350,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-350, 0.5),
+      "primary-hover": $pink-250,
+      "primary-hover-background": $pink-450,
+      "primary-focus": rgba($pink-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($pink-400, 0.25),
+      "primary": $pink-550,
+      "primary-background": $pink-500,
+      "primary-underline": rgba($pink-550, 0.5),
+      "primary-hover": $pink-650,
+      "primary-hover-background": $pink-550,
+      "primary-focus": rgba($pink-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "pumpkin": (
+    "dark": (
+      "text-selection-color": rgba($pumpkin-350, 0.1875),
+      "primary": $pumpkin-350,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-350, 0.5),
+      "primary-hover": $pumpkin-250,
+      "primary-hover-background": $pumpkin-250,
+      "primary-focus": rgba($pumpkin-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($pumpkin-400, 0.25),
+      "primary": $pumpkin-550,
+      "primary-background": $pumpkin-300,
+      "primary-underline": rgba($pumpkin-550, 0.5),
+      "primary-hover": $pumpkin-650,
+      "primary-hover-background": $pumpkin-350,
+      "primary-focus": rgba($pumpkin-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "purple": (
+    "dark": (
+      "text-selection-color": rgba($purple-350, 0.1875),
+      "primary": $purple-350,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-350, 0.5),
+      "primary-hover": $purple-250,
+      "primary-hover-background": $purple-550,
+      "primary-focus": rgba($purple-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($purple-400, 0.25),
+      "primary": $purple-550,
+      "primary-background": $purple-600,
+      "primary-underline": rgba($purple-550, 0.5),
+      "primary-hover": $purple-650,
+      "primary-hover-background": $purple-650,
+      "primary-focus": rgba($purple-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "red": (
+    "dark": (
+      "text-selection-color": rgba($red-350, 0.1875),
+      "primary": $red-350,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-350, 0.5),
+      "primary-hover": $red-250,
+      "primary-hover-background": $red-500,
+      "primary-focus": rgba($red-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($red-400, 0.25),
+      "primary": $red-550,
+      "primary-background": $red-550,
+      "primary-underline": rgba($red-550, 0.5),
+      "primary-hover": $red-650,
+      "primary-hover-background": $red-600,
+      "primary-focus": rgba($red-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "sand": (
+    "dark": (
+      "text-selection-color": rgba($sand-350, 0.1875),
+      "primary": $sand-350,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-350, 0.5),
+      "primary-hover": $sand-250,
+      "primary-hover-background": $sand-150,
+      "primary-focus": rgba($sand-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($sand-400, 0.25),
+      "primary": $sand-550,
+      "primary-background": $sand-200,
+      "primary-underline": rgba($sand-550, 0.5),
+      "primary-hover": $sand-650,
+      "primary-hover-background": $sand-250,
+      "primary-focus": rgba($sand-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "slate": (
+    "dark": (
+      "text-selection-color": rgba($slate-350, 0.1875),
+      "primary": $slate-350,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-350, 0.5),
+      "primary-hover": $slate-250,
+      "primary-hover-background": $slate-550,
+      "primary-focus": rgba($slate-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($slate-400, 0.25),
+      "primary": $slate-550,
+      "primary-background": $slate-600,
+      "primary-underline": rgba($slate-550, 0.5),
+      "primary-hover": $slate-650,
+      "primary-hover-background": $slate-650,
+      "primary-focus": rgba($slate-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "violet": (
+    "dark": (
+      "text-selection-color": rgba($violet-350, 0.1875),
+      "primary": $violet-350,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-350, 0.5),
+      "primary-hover": $violet-250,
+      "primary-hover-background": $violet-550,
+      "primary-focus": rgba($violet-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($violet-400, 0.25),
+      "primary": $violet-550,
+      "primary-background": $violet-600,
+      "primary-underline": rgba($violet-550, 0.5),
+      "primary-hover": $violet-650,
+      "primary-hover-background": $violet-650,
+      "primary-focus": rgba($violet-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+  "yellow": (
+    "dark": (
+      "text-selection-color": rgba($yellow-350, 0.1875),
+      "primary": $yellow-350,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-350, 0.5),
+      "primary-hover": $yellow-250,
+      "primary-hover-background": color.mix($yellow-100, $yellow-50),
+      "primary-focus": rgba($yellow-350, 0.375),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+    "light": (
+      "text-selection-color": rgba($yellow-400, 0.25),
+      "primary": $yellow-550,
+      "primary-background": $yellow-100,
+      "primary-underline": rgba($yellow-550, 0.5),
+      "primary-hover": $yellow-650,
+      "primary-hover-background": $yellow-150,
+      "primary-focus": rgba($yellow-400, 0.5),
+      "primary-inverse": $black,
+      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+    ),
+  ),
+  "zinc": (
+    "dark": (
+      "text-selection-color": rgba($zinc-350, 0.1875),
+      "primary": $zinc-350,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-350, 0.5),
+      "primary-hover": $zinc-250,
+      "primary-hover-background": $zinc-500,
+      "primary-focus": rgba($zinc-350, 0.375),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+    "light": (
+      "text-selection-color": rgba($zinc-400, 0.25),
+      "primary": $zinc-550,
+      "primary-background": $zinc-550,
+      "primary-underline": rgba($zinc-550, 0.5),
+      "primary-hover": $zinc-650,
+      "primary-hover-background": $zinc-600,
+      "primary-focus": rgba($zinc-400, 0.5),
+      "primary-inverse": $white,
+      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+    ),
+  ),
+);
+
+@function get($key, $mode: "light") {
+  @return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/utilities/_accessibility.scss b/themes/ccchh/assets/pico-2.1.1/scss/utilities/_accessibility.scss
new file mode 100644
index 0000000..4aa2fbc
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/utilities/_accessibility.scss
@@ -0,0 +1,57 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/accessibility") {
+  /**
+   * Accessibility & User interaction
+   */
+
+  // Based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // Accessibility
+
+  // Change the cursor on control elements in all browsers (opinionated)
+  #{$parent-selector} [aria-controls] {
+    cursor: pointer;
+  }
+
+  // Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+  #{$parent-selector} [aria-disabled="true"],
+  #{$parent-selector} [disabled] {
+    cursor: not-allowed;
+  }
+
+  // Change the display on visually hidden accessible elements in all browsers (opinionated)
+  #{$parent-selector} [aria-hidden="false"][hidden] {
+    display: initial;
+  }
+
+  #{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
+    clip: rect(0, 0, 0, 0);
+    position: absolute;
+  }
+
+  // User interaction
+  // Remove the tapping delay in IE 10
+  #{$parent-selector} a,
+  #{$parent-selector} area,
+  #{$parent-selector} button,
+  #{$parent-selector} input,
+  #{$parent-selector} label,
+  #{$parent-selector} select,
+  #{$parent-selector} summary,
+  #{$parent-selector} textarea,
+  #{$parent-selector} [tabindex] {
+    -ms-touch-action: manipulation;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+
+  #{$parent-selector} [dir="rtl"] {
+    direction: rtl;
+  }
+}
diff --git a/themes/ccchh/assets/pico-2.1.1/scss/utilities/_reduce-motion.scss b/themes/ccchh/assets/pico-2.1.1/scss/utilities/_reduce-motion.scss
new file mode 100644
index 0000000..89a36a0
--- /dev/null
+++ b/themes/ccchh/assets/pico-2.1.1/scss/utilities/_reduce-motion.scss
@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
+  /**
+   * Reduce Motion Features
+   */
+
+  // Based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    #{$parent-selector} *:not([aria-busy="true"]),
+    #{$parent-selector} :not([aria-busy="true"])::before,
+    #{$parent-selector} :not([aria-busy="true"])::after {
+      background-attachment: initial !important; // 2
+      animation-duration: 1ms !important; // 1
+      animation-delay: -1ms !important; // 1
+      animation-iteration-count: 1 !important; // 1
+      scroll-behavior: auto !important; // 3
+      transition-delay: 0s !important; // 4
+      transition-duration: 0s !important; // 4
+    }
+  }
+}
diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss
index 9784806..ee98425 100644
--- a/themes/ccchh/assets/sass/main.scss
+++ b/themes/ccchh/assets/sass/main.scss
@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 
+@use "../pico-2.1.1/scss/settings" as *;
 $roomstate_color_unknown: #dda218;
 $roomstate_color_open: var(--ins-color);
 $roomstate_color_closed: var(--del-color);
@@ -301,9 +302,7 @@ body>main {
 
 
   // When the header content doesn't display nicely anymore, switch to mobile mode.
-  @import "../pico-1.5.11/scss/variables";
-
-  @media (max-width: map.get($breakpoints, md)) {
+  @media (max-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
     .hamburger-button {
       display: unset;
       position: absolute;
@@ -384,14 +383,14 @@ body>main {
 
       // Use the media queries, which we need, from here:
       @if map.get($breakpoints, "sm") {
-        @media (min-width: map.get($breakpoints, "sm")) {
+        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
           ul {
             padding-left: 0;
             padding-right: 0;
           }
 
           .main-nav {
-            max-width: map.get($viewports, "sm");
+            max-width: map.get(map.get($breakpoints, "sm"), "viewport");
           }
         }
       }
diff --git a/themes/ccchh/assets/sass/pico-ccchh.scss b/themes/ccchh/assets/sass/pico-ccchh.scss
index c86b252..4297a06 100644
--- a/themes/ccchh/assets/sass/pico-ccchh.scss
+++ b/themes/ccchh/assets/sass/pico-ccchh.scss
@@ -1,13 +1,56 @@
 /*!
- * Pico CSS v1.5.11 (https://picocss.com)
- * Copyright 2019-2023 - Licensed under MIT
+ * Pico CSS ✨ v2.1.1 (https://picocss.com)
+ * Copyright 2019-2025 - Licensed under MIT
  */
 
 // Config
-@import "../pico-1.5.11/scss/variables";
+@forward "../pico-2.1.1/scss/settings";
 
 // Theming
-@import "../pico-1.5.11/scss/themes/default";
+@use "../pico-2.1.1/scss/themes/default";
+
+
+// Layout
+@use "../pico-2.1.1/scss/layout/document"; // html
+@use "../pico-2.1.1/scss/layout/landmarks"; // body, header, main, footer
+@use "../pico-2.1.1/scss/layout/section"; // section
+@use "../pico-2.1.1/scss/layout/container"; // .container, .container-fluid
+@use "../pico-2.1.1/scss/layout/grid"; // .grid
+@use "../pico-2.1.1/scss/layout/overflow-auto"; // .overflow-auto
+
+// Content
+@use "../pico-2.1.1/scss/content/typography"; // headings, p, ul, blockquote, ...
+@use "../pico-2.1.1/scss/content/link"; // a, role="link"
+@use "../pico-2.1.1/scss/content/button"; // button, role="button", type="button", type="submit" ...
+@use "../pico-2.1.1/scss/content/table"; // table, tr, td, ...
+@use "../pico-2.1.1/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
+@use "../pico-2.1.1/scss/content/code"; // pre, code, ...
+@use "../pico-2.1.1/scss/content/figure"; // figure, figcaption
+@use "../pico-2.1.1/scss/content/misc"; // hr, template, [hidden], dialog, canvas
+
+// Forms
+//@use "../pico-2.1.1/scss/forms/basics"; // input, select, textarea, label, fieldset, legend
+//@use "../pico-2.1.1/scss/forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
+//@use "../pico-2.1.1/scss/forms/input-color"; // type="color"
+//@use "../pico-2.1.1/scss/forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
+//@use "../pico-2.1.1/scss/forms/input-file"; // type="file"
+//@use "../pico-2.1.1/scss/forms/input-range"; // type="range"
+//@use "../pico-2.1.1/scss/forms/input-search"; // type="search"
+
+// Components
+@use "../pico-2.1.1/scss/components/accordion"; // details, summary
+@use "../pico-2.1.1/scss/components/card"; // article
+@use "../pico-2.1.1/scss/components/dropdown"; // details.dropdown
+@use "../pico-2.1.1/scss/components/group"; // role="group"
+//@use "../pico-2.1.1/scss/components/loading"; // aria-busy=true
+@use "../pico-2.1.1/scss/components/modal"; // dialog
+@use "../pico-2.1.1/scss/components/nav"; // nav
+@use "../pico-2.1.1/scss/components/progress"; // progress
+//@use "../pico-2.1.1/scss/components/tooltip"; // data-tooltip
+
+// Utilities
+@use "../pico-2.1.1/scss/utilities/accessibility"; // -ms-touch-action, aria-*
+@use "../pico-2.1.1/scss/utilities/reduce-motion"; // prefers-reduced-motion
 
 h1 {
   --font-size: 2rem;
@@ -33,36 +76,3 @@ h5 {
   --font-size: 1.125rem;
   --typography-spacing-vertical: 0.5rem;
 }
-
-// Layout
-@import "../pico-1.5.11/scss/layout/document"; // html
-@import "../pico-1.5.11/scss/layout/sectioning"; // body, header, main, footer
-@import "../pico-1.5.11/scss/layout/container"; // .container, .container-fluid
-@import "../pico-1.5.11/scss/layout/section"; // section
-@import "../pico-1.5.11/scss/layout/grid"; // .grid
-@import "../pico-1.5.11/scss/layout/scroller"; // figure
-
-// Content
-@import "../pico-1.5.11/scss/content/typography"; // a, headings, p, ul, blockquote, ...
-@import "../pico-1.5.11/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
-@import "../pico-1.5.11/scss/content/button"; // button, a[role=button], type=button, type=submit ...
-@import "../pico-1.5.11/scss/content/form"; // input, select, textarea, label, fieldset, legend
-@import "../pico-1.5.11/scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
-@import "../pico-1.5.11/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
-@import "../pico-1.5.11/scss/content/table"; // table, tr, td, ...
-@import "../pico-1.5.11/scss/content/code"; // pre, code, ...
-@import "../pico-1.5.11/scss/content/miscs"; // hr, template, [hidden], dialog, canvas
-
-// Components
-@import "../pico-1.5.11/scss/components/accordion"; // details, summary
-@import "../pico-1.5.11/scss/components/card"; // article
-@import "../pico-1.5.11/scss/components/modal"; // dialog
-@import "../pico-1.5.11/scss/components/nav"; // nav
-@import "../pico-1.5.11/scss/components/progress"; // progress
-@import "../pico-1.5.11/scss/components/dropdown"; // dropdown
-
-// Utilities
-// @import "../pico-1.5.11/scss/utilities/loading"; // aria-busy=true
-// @import "../pico-1.5.11/scss/utilities/tooltip"; // data-tooltip
-@import "../pico-1.5.11/scss/utilities/accessibility"; // -ms-touch-action, aria-*
-@import "../pico-1.5.11/scss/utilities/reduce-motion"; // prefers-reduced-motion