/* ==========================================================================
   KUWA.BLOG — Base Design Tokens & Mappings (portable edition)
   Version: 2025-09-23r
   Model: Source (Kuwa) -> Brand Aliases -> Semantic Tokens -> Components
   Notes:
     - Components use ONLY semantic tokens.
     - Brand aliases derive from Kuwa source so you can rebrand by editing
       just the Kuwa source tokens (section 1) *or* by overriding brand.
   ========================================================================== */

/* 1) KUWA SOURCE TOKENS (fixed) — edit here to rebrand across sites */
:root {
  --kuwa-theme-version: "2025-09-23";

  /* Source hex */
  --kuwa-green-900:#1b5e20;
  --kuwa-green-700:#2e7d32;
  --kuwa-green-600:#388e3c;
  --kuwa-green-500:#43a047;
  --kuwa-leaf-300:#81c784;
  --kuwa-cream-50:#f8f7f1;
  --kuwa-ink-900:#222222;
  --kuwa-muted-600:#667085;
  --kuwa-brown-600:#6d4c41;
  --kuwa-honey-500:#c49a3b;

  --kuwa-danger:#b00020;
  --kuwa-warning:#b98500;
  --kuwa-info:#0a6ebd;

  /* Radii / shadows / space */
  --kuwa-radius-sm:.3rem;
  --kuwa-radius-md:.5rem;
  --kuwa-radius-lg:.75rem;
  --kuwa-shadow-soft:0 6px 18px rgba(0,0,0,.08);
  --kuwa-shadow-subtle:0 2px 8px rgba(0,0,0,.06);

  --kuwa-space-1:.25rem;
  --kuwa-space-2:.5rem;
  --kuwa-space-3:.75rem;
  --kuwa-space-4:1rem;
  --kuwa-space-5:1.5rem;
  --kuwa-space-6:2rem;

  /* HSL triplets for color-mix / alpha usage */
  --kuwa-green-900-hsl: 124 55% 24%;
  --kuwa-green-700-hsl: 123 46% 34%;
  --kuwa-green-600-hsl: 123 41% 39%;
  --kuwa-green-500-hsl: 123 41% 45%;
  --kuwa-leaf-300-hsl:  123 38% 64%;
  --kuwa-cream-50-hsl:   51 33% 96%;
  --kuwa-ink-900-hsl:     0  0% 13%;
  --kuwa-muted-600-hsl: 221 13% 46%;
  --kuwa-brown-600-hsl:  15 25% 34%;
  --kuwa-honey-500-hsl:  42 54% 50%;
  --kuwa-danger-hsl:    349 100% 35%;
  --kuwa-warning-hsl:    43 100% 36%;
  --kuwa-info-hsl:      206  90% 39%;

  /* Typography (scoped correctly) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-size-sm:.875rem;
  --font-size-md:1rem;
  --font-size-lg:1.125rem;
  --line-normal:1.5;
}

/* 2) BRAND ALIASES (can be overridden per site, but derive from Kuwa) */
:root {
  /* Primary (greens) */
  --brand-primary-900: hsl(var(--kuwa-green-900-hsl));
  --brand-primary-700: hsl(var(--kuwa-green-700-hsl));
  --brand-primary-600: hsl(var(--kuwa-green-600-hsl));
  --brand-primary-500: hsl(var(--kuwa-green-500-hsl));
  --brand-primary-300: hsl(var(--kuwa-leaf-300-hsl));

  /* Expose HSL triplets for brand mixing (useful in gradients) */
  --brand-primary-900-hsl: var(--kuwa-green-900-hsl);
  --brand-primary-700-hsl: var(--kuwa-green-700-hsl);
  --brand-primary-600-hsl: var(--kuwa-green-600-hsl);
  --brand-primary-500-hsl: var(--kuwa-green-500-hsl);
  --brand-primary-300-hsl: var(--kuwa-leaf-300-hsl);

  /* Neutrals / ink / surfaces */
  --brand-bg-50:   var(--kuwa-cream-50);
  --brand-bg-50-hsl: var(--kuwa-cream-50-hsl);
  --brand-ink-900: var(--kuwa-ink-900);
  --brand-ink-900-hsl: var(--kuwa-ink-900-hsl);
  --brand-muted-600: hsl(var(--kuwa-muted-600-hsl));

  /* Accents */
  --brand-accent-600: hsl(var(--kuwa-brown-600-hsl));
  --brand-accent-500: hsl(var(--kuwa-honey-500-hsl));

  /* Feedback */
  --brand-danger: hsl(var(--kuwa-danger-hsl));
  --brand-warning:hsl(var(--kuwa-warning-hsl));
  --brand-info:   hsl(var(--kuwa-info-hsl));

  /* Shape / effects */
  --brand-radius-sm: var(--kuwa-radius-sm);
  --brand-radius-md: var(--kuwa-radius-md);
  --brand-radius-lg: var(--kuwa-radius-lg);
  --brand-shadow-md: var(--kuwa-shadow-soft);

  /* Spacing */
  --brand-space-1: var(--kuwa-space-1);
  --brand-space-2: var(--kuwa-space-2);
  --brand-space-3: var(--kuwa-space-3);
  --brand-space-4: var(--kuwa-space-4);
  --brand-space-5: var(--kuwa-space-5);
  --brand-space-6: var(--kuwa-space-6);
}

/* 3) SEMANTIC TOKENS — components should use ONLY these */
:root {
  /* Base */
  --color-primary:       var(--brand-primary-700);
  --color-primary-weak:  var(--brand-primary-300);
  --color-primary-strong:var(--brand-primary-900);
  --color-primary-contrast: #fff;

  --color-bg:            var(--brand-bg-50);
  --color-surface:       #ffffff;
  --color-elevated:      #ffffff;

  --color-text:          var(--brand-ink-900);
  --color-text-muted:    var(--brand-muted-600);
  --color-border:        color-mix(in oklab, var(--brand-ink-900), white 85%);
  --color-border-strong: color-mix(in oklab, var(--color-primary), black 10%);

  --color-link:          var(--color-primary);
  --color-link-hover:    color-mix(in oklab, var(--color-primary), black 10%);
  --color-focus-ring:    color-mix(in oklab, var(--color-primary), white 35%);

  --radius-sm: var(--brand-radius-sm);
  --radius-md: var(--brand-radius-md);
  --radius-lg: var(--brand-radius-lg);
  --shadow-sm: var(--brand-shadow-md);
  
  --header-min-height: 64px;

  /* Pane defaults (semantic surface helpers) */
  --surface-bg: #fff;
  --surface-padding: 40px;
  --surface-border: var(--color-border);
  --surface-shadow: var(--shadow-sm);
  --surface-radius: var(--radius-md);

  /* Feedback */
  --color-danger: var(--brand-danger);
  --color-warning:var(--brand-warning);
  --color-info:   var(--brand-info);

  /* Bootstrap bridges */
  --bs-body-bg:          var(--color-bg);
  --bs-body-color:       var(--color-text);
  --bs-border-color:     var(--color-border);
  --bs-link-color:       var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-primary:          var(--color-primary);
}

/* 4) LIGHT / DARK THEME LOCKS (brand-neutral) */
:root.theme-light {
  color-scheme: light;
  --color-bg:      var(--brand-bg-50);
  --color-surface: #ffffff;
  --color-elevated:#ffffff;

  --color-text:       var(--brand-ink-900);
  --color-text-muted: var(--brand-muted-600);
  --color-border:     color-mix(in oklab, var(--brand-ink-900), white 85%);
}

@media (prefers-color-scheme: dark) {
  :root.theme-dark {
    color-scheme: dark;
    --color-bg:          hsl(var(--brand-ink-900-hsl) / 0.97);
    --color-surface:     hsl(0 0% 12%);
    --color-elevated:    hsl(0 0% 10%);
    --color-text:        hsl(0 0% 96%);
    --color-text-muted:  color-mix(in oklab, var(--color-text), black 40%);
    --color-border:      color-mix(in oklab, var(--color-text), black 85%);
    --color-link:        hsl(var(--brand-primary-300-hsl));
    --color-link-hover:  hsl(var(--brand-primary-500-hsl));
    --color-focus-ring:  color-mix(in oklab, hsl(var(--brand-primary-500-hsl)), white 45%);
  }
}

/* ============================ COMPONENTS ============================ */

/* 5) GLOBAL ELEMENTS */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: var(--line-normal);
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* 6) LAYOUT UTILITIES */
.container-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--brand-space-5);
}

.pane { display: block; background: var(--surface-bg); }
.pane--tight { --surface-padding: 24px; padding: var(--surface-padding); }
.pane--loose { --surface-padding: 56px; padding: var(--surface-padding); }
.pane--round { --surface-radius: var(--radius-lg); border-radius: var(--surface-radius); }
.pane--flat  { --surface-shadow: none; box-shadow: var(--surface-shadow); }
.pane--brand { --surface-border: var(--color-primary); border: 1px solid var(--surface-border); }

.stack { display: grid; gap: var(--brand-space-4); }
.cluster { display:flex; flex-wrap:wrap; gap: var(--brand-space-3); align-items:center; }

/* 7) HEADINGS & TEXT */
h1,h2,h3,h4,h5,h6 { color: var(--color-text); margin: .5em 0; }
.lead { font-size: var(--font-size-lg); color: var(--color-text-muted); }

/* 8) BUTTONS */
.btn,
button,
[type="button"],
[type="submit"] {
 /* --_bg: var(--color-primary); */
  --_fg: var(--color-primary-contrast);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid color-mix(in oklab, var(--_bg), black 15%);
  border-radius: var(--radius-sm);
  padding: .5rem .875rem;
  line-height: 1.2;
  cursor: pointer;
}
.btn:hover { background: color-mix(in oklab, var(--color-primary), black 7%); }
.btn:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Soft/outline variants (examples) */
.btn-soft {
  background: color-mix(in oklab, var(--color-primary), white 85%);
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary), white 70%);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 9) FORMS */
input, select, textarea {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 10) CARDS */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-header { padding: var(--brand-space-4) var(--brand-space-5); border-bottom: 1px solid var(--color-border); }
.card-body   { padding: var(--brand-space-5); }
.card-footer { padding: var(--brand-space-4) var(--brand-space-5); border-top: 1px solid var(--color-border); }

/* 11) NAVBAR / MENUS */
.navbar, .mod-menu.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.navbar .nav-link, .mod-menu .nav-link, .mod-menu a {
  display:inline-block;color: var(--color-text);
}
.navbar .nav-link:hover, .mod-menu a:hover { color: var(--color-link-hover); }

/* Footer horizontal menu */
footer .mod-menu.mod-list.nav > li { display:inline-block; margin-right: .75rem; }

/* 12) TABLES */
.table {
  width:100%; border-collapse: collapse; background: var(--color-surface);
  border:1px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden;
}
.table th, .table td { padding:.75rem; border-bottom:1px solid var(--color-border); }
.table thead th { background: color-mix(in oklab, var(--color-primary), white 90%); color: var(--color-text); }

/* 13) ALERTS */
.alert {
  border:1px solid var(--color-border);
  border-left-width: .25rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.alert-info    { border-left-color: var(--color-info); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-danger  { border-left-color: var(--color-danger); }

/* 14) BADGES */
.badge {
  display:inline-block;
  padding:.3rem .5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary), white 80%);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary), white 60%);
}

/* 15) MODALS */
.modal { background: color-mix(in oklab, black, transparent 70%); }
.modal-dialog {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* 16) BOOTSTRAP UTILS COMPAT */
.bg-primary { background: var(--color-primary) !important; color: var(--color-primary-contrast) !important; }
.text-primary { color: var(--color-primary) !important; }
.bg-info    { background: var(--color-info) !important; color:#fff !important; }
.bg-warning { background: var(--color-warning) !important; color:#111 !important; }
.bg-danger  { background: var(--color-danger) !important; color:#fff !important; }

/* 17) VENDOR COMPONENT BRIDGES — semantic only */
body.com_easyblog .eb-post,
body.com_easyblog .eb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
body.com_easyblog .btn,
body.com_easyblog .eb-button {
  background: var(--color-primary);
  color:#fff;
  border-color: color-mix(in oklab, var(--color-primary), black 12%);
}

/* EasySocial (generic) */
body.com_easysocial .btn-primary, body.com_easysocial .es-btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
}
body.com_easysocial .es-card,
body.com_easysocial .easysocial-card,
body.com_easysocial .es-stream {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
body.com_easysocial a { color: var(--color-link); }
body.com_easysocial a:hover { color: var(--color-link-hover); }
body.com_easysocial .es-meta { color: var(--color-text-muted); }

/* 18) Language typography helpers */
body.lang-ja-jp {
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-md: 1rem;
  --line-normal: 1.65;
  font-family: var(--font-sans);
  line-height: var(--line-normal);
  letter-spacing: .01em;
  word-break: keep-all;
}
body.lang-en-gb, body.lang-en-us {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --line-normal: 1.5;
}

/* 19) Menu / MetisMenu layout (semantic only) */
.navbar, .mod-menu { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

.navbar .nav-link:hover,
.mod-menu .nav-link:hover,
.mod-menu a:hover {
  background: var(--color-link-hover);
  color: var(--color-text);
}

.navbar .nav-link.active,
.mod-menu .current > a,
.mod-menu .active > a,
.mod-menu a[aria-current="page"] {
  border-bottom: var(--color-primary) 3px solid;
  border-radius: 10px;
}

/* Resets & structure */
#navbar ul, #navbar li { margin: 0; padding: 0; list-style: none; }
#navbar .metismenu-item { position: relative; }
#navbar .mm-collapse { padding: 0; margin: 0; }
#navbar .mm-collapsing { overflow: hidden; }

/* Full-width rows */
#navbar .metismenu-item > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .75rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, color .15s ease;
  cursor: pointer;
}

/* Depth-specific spacing example */
.metismenu.mod-menu .metismenu-item:is(.level-2) > ul { top:50px; }

/* Example active coloring */
li.metismenu-item:nth-child(4).mmactive { background-color: color-mix(in oklab, var(--color-primary), white 85%); }

/* Gradients for collapses */
ul.mm-collapsex {
  --grad-start: var(--color-primary);
  background: linear-gradient(to bottom, var(--grad-start) 0%, #ffffff 100%);
  background-color: #ffffff;
  background-attachment: local;
  border-radius: var(--radius-md);
  padding: .5rem;
}

ul.mm-collapse{
  --top: var(--brand-primary-700-hsl);
  --alpha-start: .495;
  --fade-end: 60%;
  background:
    linear-gradient(
      to bottom,
      hsl(var(--top) / var(--alpha-start)) 0%,
      hsl(var(--top) / 0) var(--fade-end)
    ), #fff;
  margin-top:-8px;
}

/* Expanded sizing */
ul.mm-collapse.mm-show, ul.mod-menu_dropdown-metismenu  {
  min-width:initial!important;
  width: fit-content;
  max-width: 90vw; 
  margin-top:-9px;
  left:30px;
  box-shadow: var(--shadow-sm)!important;
}

/* Header / footer bars with brand gradient */
.container-header{
	min-height:var(--header-min-height);
	position: sticky;
	top:0;
 }
.container-header, .footer {
  display:flex; 
  padding: 0rem 1.25rem 1rem 0rem;
  font-size: larger;
  text-decoration:none;
  --g-color: var(--brand-primary-500-hsl);
  --mid: 73%;
  --g-alpha-top: 1;
  --base-alpha: .6; 

  background:
    linear-gradient(
      to top,
      hsl(var(--g-color) / 0) 0%,
      hsl(var(--g-color) / var(--g-alpha-top)) var(--mid)
    ),
    hsl(var(--brand-bg-50-hsl) / var(--base-alpha));
}

.pane,.readmore{
  background-color: var(--surface-bg);
  padding: var(--surface-padding);
  border: 1px solid var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  margin-top:30px;
}
.readmore{background-color:var(--brand-primary-300);padding: initial;
  margin-top: initial;}

	.container-header .metismenu > li > a:hover::after, .container-header .metismenu > li > button:hover::before, .container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before {
text-decoration:none;
}
.container-header .mod-menu, .container-footer .mod-menu {
/*  padding-top:10px; */
  color: var(--color-text);
}
/* Resources > Library > "blog" */
.articleClass {display:flex;flex-flow:wrap;justify-content:space-evenly;}


.articleClass >.com-content-category-blog__item{padding:0px!important;width:300px!important;}
.item-content{padding:20px;}



/* Sidebar Right */
.hikaModule > .card-body {padding:initial;}
.hikaModule h3 {font-size:smaller;}
	
.sidebar-right .hikashop_product_image_subdiv {width:260px;}
#hikashop_category_information_module_279 div.hikashop_container {
  margin:initial!important;
}

.hikashop_product_item_left_part,.hikashop_product_item_right_part{width:initial!important;}


.container-sidebar-right .card {padding:inherit;margin:0 auto;margin-bottom:20px;}

.sidebar-right > h3 {text-align:center;margin:initial;}

@media (min-width: 400px) and (max-width: 992px) {
.container-sidebar-right .card {width:initial;}
.sidebar-right card hikaModule{width:100%;}
#hikashop_products_switcher_hikashop_category_information_module_279{display:flex;flex-flow:inherit;}

.hikashop_product {width:300px!important;}
}

.footer {
  margin-top: 1em;
  height: 7rem;
  font-size: larger;
  padding-top:2em;
}

.navbar, .mod-menu { background: initial; border-bottom: initial; }

.container-header nav {max-width:95%;/*margin-top:-5px;*/}
body.wrapper-fluid header > .grid-child, body.wrapper-fluid footer > .grid-child { padding: 0em; }
body.wrapper-fluid header > .grid-child { padding: .0em; }
body.wrapper-fluid header div:first-child{width:130px;padding:0px;margin-top:0px;}

/* Hover tweaks */
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: color-mix(in oklab, var(--color-primary-weak), white 10%);
  color: var(--color-link-hover);
}

/* Article surfaces */
.com-content-article,
 .com-content-category-blog__item,
 .hikashop_product_page {
  background-color: var(--color-surface);
  padding:40px;
  border: 1px solid color-mix(in oklab, var(--color-primary), white 65%);
  border-radius: 5px;
  box-shadow: 6px 7px 15px -4px rgba(0,0,0,0.53);
}


.blog-items .blog-item{padding:40px;width:300px;}


 
.container-sidebar-right h4,
.grid-child.container-sidebar-right h4 {
  font-size: 1.0em;   
  line-height: 1.2;
}

.floatLeft{float:left;margin-right:20px;}

.CD_BlogLayout h2{line-height:13px;text-align:center;}
.CD_BlogLayout h2 a {font-size:16px;}



/* Footer nav as horizontal flex */
.container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav {
  display: flex;  
  flex-direction: row; 
  gap: 1.25rem;  
  list-style: none;
  padding: 0;
  margin:0 auto;
}
.container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav > li { display: inline-flex; margin: 0; padding: 0; }
.container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav > li > a {
  display: block;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  color: inherit;
}
.container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav > li > a:hover,
.container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav > li.active > a {
  text-decoration: underline;
}

/* Example collapse inner */
.mm-collapse .mm-show {
  border: 1px solid var(--color-border-strong);
  border-radius: 0 0 5px 5px;
  background-color: color-mix(in oklab, var(--color-primary), white 85%);
}

.imageAuto{text-align:center;}
@media (min-width: 599px) {
  .imageAuto { margin-inline: 0; float: left; margin-right:1rem; }
}
@media (max-width: 480px) {
  .container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav { gap: 0.75rem; }
  .com-content-article, .com-content-category-blog__item, .hikashop_product_page { padding: 15px; }
}

/* Hamburger */
.container-header .navbar-toggler { 
  color: var(--color-primary);
  border: 1px solid var(--color-primary-strong);
}

/* Active anchor */
#navbar156 ul li a:active{
  background: color-mix(in oklab, var(--color-primary), white 60%);
  color: var(--color-text);
}

.container-header .mod-menu > li .current {
  border-bottom: var(--color-bg) 10px solid;
  border-radius: 0 0 5px 5px;
}

#navbar156, #navbar157 { border-radius:0px 10px 10px 0px; }
@media (width >= 992px){
  .container-header .mod-menu > li + li { margin-left: 0.0; }
}
 /*
@media (width <= 991.98px) {
  .container-header {
   position: absolute!important;
    top: 100%;           sits just under the header 
    left: 0;
    right: 0;
    z-index: 1050;
	    max-height: calc(100vh - var(--header-min-height));
    overflow: auto;  
  }
}
*/

/* ===================== Explicit Dark Mode Lock (manual) ===================== */
:root.theme-dark {
  --color-bg:            hsl(var(--brand-ink-900-hsl) / 0.97);
  --color-surface:       hsl(0 0% 12%);
  --color-text:          hsl(0 0% 96%);
  --color-text-muted:    color-mix(in oklab, var(--color-text), black 40%);
  --color-border:        color-mix(in oklab, var(--color-text), black 85%);
  --color-link:          hsl(var(--brand-primary-500-hsl));
  --color-link-hover:    color-mix(in oklab, hsl(var(--brand-primary-500-hsl)), white 20%);
  --color-focus-ring:    color-mix(in oklab, hsl(var(--brand-primary-500-hsl)), white 45%);

  --bs-body-bg:          var(--color-bg);
  --bs-body-color:       var(--color-text);
  --bs-border-color:     var(--color-border);
  --bs-link-color:       var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);

  --surface-bg: hsl(0 0% 12%);
  --surface-border: color-mix(in oklab, var(--surface-bg), white 25%);
  --surface-shadow: 0 2px 10px -2px rgba(0,0,0,.6);
}

/* Misc */
.com-content-categories__items { display: flex; flex-flow: wrap; justify-content: space-around; }
.com-content-categories__item{
  max-width: 355px;
  margin: 5px;
  border-bottom: 1px solid var(--color-primary);
  padding: 10px;
  border-radius: 5px;
  justify-content: initial;
}