/*@layer tokens, theme, bs.bridge, components, addons, bs.overrides, cd.site;

 =========================================================
   user.css (consolidated)
   Version: 2026-01-14
   Layers:
   tokens -> theme -> bs.bridge -> components -> addons -> bs.overrides -> cd.site
========================================================= */
 

/* ==========================================================================
   CDBASE — Source Tokens (Section 1 only)
   Version: 20260114-Tokens
   NOTE: *-hsl vars are HSL TRIPLETS (e.g., "208 56% 21%"), not colors.
   Use via hsl(var(--...-hsl)) in theme/brand layers.
 ========================================================================== */
 :root {
    --CDBASE-theme-version: "2026-01-14";
/* ================================
   1. BAMBOO & RIVERSTONE
   ================================ */

/* Paper / background */
--CDBASE-paper-50-hex: #F4F6F2;
--CDBASE-paper-50-hsl: 90 14% 96%;

/* Text / ink */
--CDBASE-ink-900-hex: #2A2E27;
--CDBASE-ink-900-hsl: 90 9% 17%;

/* Muted secondary text */
--CDBASE-muted-600-hex: #5E6356;
--CDBASE-muted-600-hsl: 84 6% 36%;

/* Primary brand ramp (BAMBOO GREEN) */
--CDBASE-primary-900-hex: #2E3D24;
--CDBASE-primary-700-hex: #4A5F38;
--CDBASE-primary-600-hex: #6B8E4A;
--CDBASE-primary-500-hex: #8DBA67;
--CDBASE-primary-300-hex: #B5D897;

--CDBASE-primary-900-hsl: 100 25% 18%;
--CDBASE-primary-700-hsl: 100 26% 29%;
--CDBASE-primary-600-hsl: 100 31% 41%;
--CDBASE-primary-500-hsl: 100 32% 55%;
--CDBASE-primary-300-hsl: 100 40% 72%;

/* Accent ramp (STONE & MIST) */
--CDBASE-accent-600-hex: #9CA39A;
--CDBASE-accent-500-hex: #B8BDB6;
--CDBASE-accent-300-hex: #D5D8D4;

--CDBASE-accent-600-hsl: 100 6% 61%;
--CDBASE-accent-500-hsl: 100 5% 72%;
--CDBASE-accent-300-hsl: 100 5% 84%;

/* Status */
--CDBASE-info-hex: #6B8E4A;
--CDBASE-warning-hex: #B8BDB6;
--CDBASE-danger-hex: #8A3324;

--CDBASE-info-hsl: 100 31% 41%;
--CDBASE-warning-hsl: 100 5% 72%;
--CDBASE-danger-hsl: 10 58% 34%;


    /* Radii / shadows / space */
    --CDBASE-radius-sm: .3rem;
    --CDBASE-radius-md: .5rem;
    --CDBASE-radius-lg: .75rem;

    --CDBASE-shadow-soft: 0 6px 18px rgba(0,0,0,.08);
    --CDBASE-shadow-subtle: 0 2px 8px rgba(0,0,0,.06);

    --CDBASE-space-1: .25rem;
    --CDBASE-space-2: .5rem;
    --CDBASE-space-3: .75rem;
    --CDBASE-space-4: 1rem;
    --CDBASE-space-5: 1.5rem;
    --CDBASE-space-6: 2rem;
  }
/* ==========================================================================
   Theme + semantic meanings
@layer theme {
   ========================================================================== */
  :root {
    /* Canonical HSL -> colors */
    --CDBASE-primary-900: hsl(var(--CDBASE-primary-900-hsl));
    --CDBASE-primary-700: hsl(var(--CDBASE-primary-700-hsl));
    --CDBASE-primary-600: hsl(var(--CDBASE-primary-600-hsl));
    --CDBASE-primary-500: hsl(var(--CDBASE-primary-500-hsl));
    --CDBASE-primary-300: hsl(var(--CDBASE-primary-300-hsl));

    --CDBASE-bg-50: hsl(var(--CDBASE-paper-50-hsl));
    --CDBASE-ink-900: hsl(var(--CDBASE-ink-900-hsl));
    --CDBASE-muted-600: hsl(var(--CDBASE-muted-600-hsl));

    --CDBASE-accent-600: hsl(var(--CDBASE-accent-600-hsl));
    --CDBASE-accent-500: hsl(var(--CDBASE-accent-500-hsl));

    --CDBASE-danger: hsl(var(--CDBASE-danger-hsl));
    --CDBASE-warning: hsl(var(--CDBASE-warning-hsl));
    --CDBASE-info: hsl(var(--CDBASE-info-hsl));

    --CDBASE-shadow-md: var(--CDBASE-shadow-soft);

    /* Core meanings */
    --color-primary: var(--CDBASE-primary-700);
    --color-primary-strong: var(--CDBASE-primary-900);
    --color-primary-weak: var(--CDBASE-primary-300);
    --color-primary-contrast: #fff;

    --color-bg: var(--CDBASE-bg-50);
    --color-surface: #fff;
    --color-elevated: #fff;

    --color-text: var(--CDBASE-ink-900);
    --color-text-muted: var(--CDBASE-muted-600);

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

    --color-link: var(--CDBASE-ink-900);
    --color-link-hover: color-mix(in oklab, var(--color-primary), white 50%);
    --color-hover-bg: color-mix(in oklab, var(--CDBASE-ink-900), white 90%);
    --color-focus-ring: color-mix(in oklab, var(--color-primary), white 35%);

    --color-danger: var(--CDBASE-danger);
    --color-warning: var(--CDBASE-warning);
    --color-info: var(--CDBASE-info);

    --radius-sm: var(--CDBASE-radius-sm);
    --radius-md: var(--CDBASE-radius-md);
    --radius-lg: var(--CDBASE-radius-lg);
    --shadow-sm: var(--CDBASE-shadow-md);

    --header-min-height: 64px;

    /* Space aliases */
    --space-1: var(--CDBASE-space-1);
    --space-2: var(--CDBASE-space-2);
    --space-3: var(--CDBASE-space-3);
    --space-4: var(--CDBASE-space-4);
    --space-5: var(--CDBASE-space-5);
    --space-6: var(--CDBASE-space-6);

    /* Pane defaults */
    --surface-bg: #fff;
    --surface-padding: var(--space-6);
    --surface-border: var(--color-border);
    --surface-shadow: var(--shadow-sm);
    --surface-radius: var(--radius-md);

/* Typography */
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", "Noto Sans JP", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             "Liberation Mono", "Courier New", monospace;

/* Base sizing (modern sans reading) */
--font-size-sm: .9375rem;   /* 15px */
--font-size-md: 1.0625rem;  /* 17px (base) */
--font-size-lg: 1.125rem;   /* 18px */
--line-normal: 1.75;        /* calm, readable */

/* Type scale (built around 17px base) */
--step--1: clamp(.9375rem, .92rem + .10vw, 1rem);                 /* ~15–16px */
--step-0: var(--font-size-md);                                    /* 17px */
--step-1: clamp(1.1875rem, 1.12rem + .30vw, 1.375rem);            /* ~19–22px */
--step-2: clamp(1.375rem, 1.27rem + .55vw, 1.75rem);              /* ~22–28px */
--step-3: clamp(1.625rem, 1.45rem + .85vw, 2.125rem);             /* ~26–34px */
--step-4: clamp(1.95rem, 1.65rem + 1.15vw, 2.75rem);              /* ~31–44px */

    --card-cap-color: hsl(0 0% 10%);
    --measure-reading: 68ch;
  }

  :is(html[data-theme="light"], :root.theme-light) { color-scheme: light; }

  :is(html[data-theme="dark"], :root.theme-dark) {
    color-scheme: dark;
    --card-cap-color: hsl(0 0% 96%);
    --color-bg: hsl(var(--CDBASE-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(--CDBASE-primary-300-hsl));
    --color-link-hover: hsl(var(--CDBASE-primary-500-hsl));
    --color-hover-bg: color-mix(in oklab, var(--color-link), black 85%);
    --color-focus-ring: color-mix(in oklab, hsl(var(--CDBASE-primary-500-hsl)), white 45%);

    --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);
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
      color-scheme: dark;
      --card-cap-color: hsl(0 0% 96%);
      --color-bg: hsl(var(--CDBASE-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(--CDBASE-primary-300-hsl));
      --color-link-hover: hsl(var(--CDBASE-primary-500-hsl));
      --color-hover-bg: color-mix(in oklab, var(--color-link), black 85%);
      --color-focus-ring: color-mix(in oklab, hsl(var(--CDBASE-primary-500-hsl)), white 45%);

      --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);
    }
  }

  @media (prefers-color-scheme: light) {
    html[data-theme="auto"] { color-scheme: light; }
  }

  /* Base element styles */
  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; text-underline-offset: .15em; }
  a:hover { color: var(--color-link-hover); text-decoration: underline; }

  a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

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

  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); }

  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-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
  textarea { min-height: 6rem; }
  
/*}
 ==========================================================================
   cd-bs-bridge.css — Bootstrap variable bridges
   ========================================================================== 
@layer bs.bridge {*/
  :root {
    --bs-font-sans-serif: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: var(--font-size-md, 1rem);
    --bs-body-line-height: var(--cd-body-lh, var(--line-normal, 1.5));

    --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);
    --bs-danger: var(--color-danger);
    --bs-warning: var(--color-warning);
    --bs-info: var(--color-info);

    --bs-heading-color: var(--color-text);
    --bs-headings-line-height: var(--cd-headings-lh, 1.15);
    --bs-headings-font-weight: var(--cd-headings-weight, 700);
  }
  
/* }
==========================================================================
   components — utilities + Joomla scoped }
   ========================================================================== 
@layer components {*/

  /* ------------------------------
     CD utilities (preferred) + legacy aliases
     ------------------------------ */

/* 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 0rem 0rem;
  font-size: larger;
  text-decoration:none;
  --g-color: var(--brand-primary-500-hsl);
  --mid: 73%;
  --g-alpha-top: 1;
  --base-alpha: .6; 
 background:#FFFF;
}







  /* surfaces */
  .container-surface,
  .cd-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5, 1.5rem);
  }

  /* pane (preferred: cd-pane) + legacy alias (.pane) */
  .pane,
  .cd-pane{
    display:block;
    background: var(--surface-bg, var(--color-surface));
    padding: var(--surface-padding, var(--space-5, 1.5rem));
    border: 1px solid var(--surface-border, var(--color-border));
    border-radius: var(--surface-radius, var(--radius-md));
    box-shadow: var(--surface-shadow, var(--shadow-sm));
    margin-top: var(--space-5, 1.5rem);
  }

  /* pane modifiers (preferred) + legacy aliases */
  .pane--tight, .cd-pane--tight { --surface-padding: 1.5rem; }
  .pane--loose, .cd-pane--loose { --surface-padding: 3.5rem; }
  .pane--round, .cd-pane--round { --surface-radius: var(--radius-lg); }
  .pane--flat,  .cd-pane--flat  { --surface-shadow: none; }
  .pane--brand, .cd-pane--brand { --surface-border: var(--color-border-strong); }

  /* layout */
  .stack, .cd-stack { display: grid; gap: var(--space-4, 1rem); }

  .cluster, .cd-cluster {
    display:flex;
    flex-wrap:wrap;
    gap: var(--space-3, .75rem);
    align-items:center;
  }

  /* content width (preferred cd-) + legacy aliases */
  .prose, .cd-prose{
    max-width: 70ch;
    font-size: var(--step-0);
  }
  .prose-wide, .cd-prose-wide{ max-width: 84ch; }
  .prose-narrow, .cd-prose-narrow{ max-width: 60ch; }
  .prose.center, .cd-prose.center{ margin-inline: auto; }

  .content-readable, .cd-content-readable{
    max-width: min(92vw, 72ch);
    margin-inline: auto;
  }
  .content-wide, .cd-content-wide{
    max-width: min(92vw, 1200px);
    margin-inline: auto;
  }

  /* flow (preferred cd-) + legacy alias */
  .flow > * , .cd-flow > * { margin-block-start: 0; margin-block-end: 0; }
  .flow > * + *, .cd-flow > * + *{
    margin-block-start: clamp(.6rem, .4rem + .8vw, 1.2rem);
  }

  /* floats/images (preferred cd-) + legacy aliases */
  .floatLeft, .cd-float-left { float:left; margin-right:20px; }

  .imageAuto, .cd-image-auto { text-align:center; }
  @media (min-width: 599px) {
    .imageAuto, .cd-image-auto { margin-inline: 0; float: left; margin-right:1rem; }
  }

 

  /* ------------------------------
     Article index / TOC + content fixes
     ------------------------------ */

  .article-index, .cd-article-index {
    background: var(--bs-gray-200, color-mix(in oklab, var(--color-bg), var(--color-text) 6%));
    border: 1px solid color-mix(in oklab, var(--color-primary), white 65%);
  }
  .article-index li, .cd-article-index li { margin-top: .1em; font-size: .875rem; }
  .article-index .py-1, .cd-article-index .py-1 { padding-top: .1rem !important; padding-bottom: .1rem !important; }

  a.toclink::before { content: "▸"; margin-right: .5rem; }
  .fa-loaded a.toclink::before{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f15c";
  }
  .article-index .toclink.active, .cd-article-index .toclink.active { font-weight: 700; }

  .com-content-article__body ul li p,
  .com-content-article__body ol li p { margin-bottom: inherit; }

  .com-content-article ol,
  .com-content-article ul { overflow: visible; }

  figure.introImage.item-image {
    float: left;
    width: fit-content;
    margin: 0 var(--space-3, .75rem) var(--space-3, .75rem) 0;
  }
  @supports not (width: fit-content) {
    figure.introImage.item-image { width: auto; }
  }
  figure.introImage.item-image img { display:block; max-width:100%; height:auto; }

  /* ------------------------------
     MENUS — scope to your menu module output
     - collapse container id: #navbar1
     - UL id: #cd-menu-tag
     - UL class: .cd-menu-class
     ------------------------------ */

 
  /* Footer menu: don’t inherit menu backgrounds */
  .container-footer .mod-menu { background: initial; border-bottom: initial; }

  /* ------------------------------
     Article surfaces + widths
     ------------------------------ */

  .eb-container__main,
  .com-users-profile__edit,
  .com-users-profile,
  .nav-MyPage,
  .com-users-login,
  .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);
  }
  
  /* apply to article container */
 .com-content-article {
  max-width: var(--measure-reading);
  margin-inline: auto;
  padding-inline: 1rem; /* prevents edge-to-edge on small screens */
}

.com-content-article img,
.com-content-article video,
.com-content-article iframe{
  max-width: 100%;
  height: auto;
}

  .eb-container__main,
  .com-users-profile__edit,
  .com-users-profile,
  .nav-MyPage,
  .com-users-login {
    max-width: 40rem;
    margin: 0 auto;
  }

  /* Rename your custom grid class (preferred cd-article-grid) + legacy alias */
  .articleClass, .cd-article-grid { display:flex; flex-flow:wrap; justify-content:space-evenly; }
  .articleClass > .com-content-category-blog__item,
  .cd-article-grid > .com-content-category-blog__item { padding:10px; width:300px; }
  .articleClass > .com-content-category-blog__item h2,
  .cd-article-grid > .com-content-category-blog__item h2 {font-size:var(--font-size-lg);text-align:center;}
  
  .com-content-category-blog__item .page-header h2 {font-size:var(--font-size-lg);text-align:center;}
  .com-content-category-blog__item .item-content p { text-align:center;padding-top:20px;}

  /* Tag list */
  .list-inline { text-align:center; }
  

  /* Put an icon before each tag pill */

  
  
  
  ul.tags.list-inline > li.list-inline-item > a.btn{
    position: relative;
    padding-left: 1.6em; /* room for icon */
  }

  ul.tags.list-inline > li.list-inline-item > a.btn::before{
    content: "\f02b";               /* Font Awesome "tag" */
    font-family: "Font Awesome 6 Free","Font Awesome 5 Free";
    font-weight: 900;               /* needed for FA Free solid */
    position: absolute;
    left: .55em;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95em;
    opacity: .95;
    pointer-events: none;
  }

  /* Blue underline (works even though it's a Bootstrap .btn) */
  
  
  ul.tags.list-inline > li.list-inline-item > a.btn{
    text-decoration: underline;
    text-decoration-color: var(--bs-primary, #0d6efd);
    text-decoration-thickness: .16em;
    text-underline-offset: .22em;
    text-decoration-skip-ink: auto;
	--_btn-bg: transparent;
	--_btn-fg: var(--bs-primary);
	--_btn-border: transparent;	
	padding:0px 24px;
  }
.readmore {text-align:center;}
 .tags .list-inline-item{margin: initial;} 

  /* Optional: underline gets a little stronger on hover/focus */
  ul.tags.list-inline > li.list-inline-item > a.btn:hover,
  ul.tags.list-inline > li.list-inline-item > a.btn:focus-visible{
    text-decoration-thickness: .22em;
  }
  
  /* Typography helpers */
  p + p { margin-top: .75em; }

  small, .text-small { font-size: var(--step--1); }

  blockquote{
    font-style: italic;
    border-inline-start: 4px solid var(--color-border);
    padding-inline: 1rem;
    margin-inline: 0;
  }

  code, kbd, samp{
    font-family: var(--font-mono);
    font-size: .95em;
    padding: .1em .3em;
    border: 1px solid var(--color-border);
    border-radius: .25rem;
    background: var(--color-surface);
  }

  /* Breadcrumbs */
  .breadcrumb-item.active { font-weight:bold; }
  .breadcrumb { background-color:transparent; }

  figure{ margin:0; }
  figure > img, figure > picture{ display:block; width:100%; height:auto; }
  figcaption{
    font-size: var(--step--1);
    line-height: 1.4;
    margin-top: .4rem;
    font-style: italic;
    color: var(--color-text-muted);
  }

  /* Tables: only sizing (colors handled in bs.overrides) */
  .com-content-article .table,
  .com-content-category-blog__item .table{
    font-size: var(--step--1);
    line-height: 1.35;
  }

  /* Categories list view */
  .com-content-categories__items { display:flex; flex-flow:wrap; justify-content:space-around; }
  .com-content-categories__item{
    max-width: 355px;
    margin: 5px;
    border: 1px solid var(--color-focus-ring);
    padding: 10px;
    border-radius: 5px;
    justify-content: initial;
  }
  .com-content-categories__item img{
    width:120px;
    height:120px;
    object-fit:contain;
    object-position:top;
    display:block;
  }
    .com-content-categories__item-title-wrapper{padding-top:0px;}
  .com-content-categories__item-title {text-align:center;width:100%;}
  .com-content-blog__link { margin-top:.5rem; }
  
  figure.item-image { margin-top:0px!important;}
   .item-content {padding-left: 1em;padding-right: 1em;}
   
   .cd-intro-article div > h2 {font-size:1.3rem;}

  /* Header spacing (single place, no repeats) */
  .container-header nav { max-width: 57%; margin-top: initial !important; }
  .container-header .navbar { margin-top: initial; }

  body.wrapper-fluid header > .grid-child,
  body.wrapper-fluid footer > .grid-child { padding: 0; }

  body.wrapper-fluid header > .grid-child { padding: .3em 0 0 .5em; }
  body.wrapper-fluid header div:first-child { padding: 0; margin-top: 0; }

  /* 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: .25rem .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;
  }

  @media (max-width: 480px) {
    .container-footer.footer.full-width .grid-child .mod-menu.mod-list.nav { gap: .75rem; }
    .com-content-article, .com-content-category-blog__item, .hikashop_product_page { padding: 15px; }
  }

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

  /* Print */
  @media print{
    :root{
      --bs-body-font-size: 11pt;
      --bs-body-line-height: 1.35;
    }
    .container-header, .container-footer, nav, .sidebar-right { display:none !important; }
    .prose, .content-readable { max-width: 100%; }
  }
  
/* }
==========================================================================
   addons — 3rd party component tweaks
   ========================================================================== 
@layer addons {*/

  @media screen {
    [data-rlta-element="container"][data-rlta-state="ready"] {
      background-color: var(--bs-gray-200, #e9ecef);
      padding: 12px;
      border: 1px solid color-mix(in oklab, var(--color-bg), black 15%);
      border-radius: 5px;
      box-shadow: 6px 7px 15px -4px rgba(0,0,0,0.53);
    }

    [data-rlta-element="container"][data-rlta-state="ready"]
    :is(h1,h2,h3,h4,h5,h6) a { text-decoration: none; }

    [data-rlta-element="container"][data-rlta-state="ready"] h1 { font-size: var(--step-2); font-weight: 800; }
    [data-rlta-element="container"][data-rlta-state="ready"] h2 { font-size: var(--step-1); font-weight: 700; }
    [data-rlta-element="container"][data-rlta-state="ready"] h3 { font-size: var(--step-0); font-weight: 700; }
    [data-rlta-element="container"][data-rlta-state="ready"] h4 { font-size: var(--step-0); font-weight: 650; }
    [data-rlta-element="container"][data-rlta-state="ready"] h5 { font-size: var(--step-0); font-weight: 600; }
    [data-rlta-element="container"][data-rlta-state="ready"] h6 { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; }
  }

  /* Sidebar Right */
  .hikaModule > .card-body { padding: initial; }
  .container-sidebar-right .card { padding: inherit; width: 300px; margin: 0 auto 20px; }
  .sidebar-right > h3 { text-align: center; margin: initial; }
  .sidebar-right .hikashop_product_image_subdiv { width: 260px; }

  #hikashop_category_information_module_279 div.hikashop_container { margin: initial !important; }

  /* EasyBlog */
  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 */
  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); }

  /* When MetisMenu marks a submenu open */
  ul.mm-collapse.mm-show {
    border: 1px solid var(--color-border-strong);
    border-radius: 0 0 5px 5px;
    background-color: color-mix(in oklab, var(--CDBASE-primary-300), white 85%);
  }
  
/*}
 ==========================================================================
   bs.overrides — Bootstrap component overrides (no tokens here)
   ==========================================================================
@layer bs.overrides { */

  .btn, .cd-reader-modal-link {
    --_btn-bg: var(--color-primary);
    --_btn-fg: var(--color-primary-contrast);
    --_btn-border: var(--color-border-strong);

    background: var(--_btn-bg);
    color: var(--_btn-fg);
    border: 1px solid var(--_btn-border);
    border-radius: var(--radius-sm);
    padding: .5rem .875rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
  }

  .btn:hover, .cd-reader-modal-link { background: color-mix(in oklab, var(--_btn-bg), black 7%); color: var(--_btn-fg); }
  .btn:active { background: color-mix(in oklab, var(--_btn-bg), black 12%); }

  .btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

  .btn:disabled, .btn.disabled { opacity: .6; cursor: not-allowed; }

  .btn.btn-soft {
    --_btn-bg: color-mix(in oklab, var(--color-primary), white 85%);
    --_btn-fg: var(--color-primary);
    --_btn-border: color-mix(in oklab, var(--color-primary), white 70%);
  }

  .btn.btn-outline {
    --_btn-bg: transparent;
    --_btn-fg: var(--color-primary);
    --_btn-border: var(--color-primary);
    background: var(--_btn-bg);
    color: var(--_btn-fg);
    border-color: var(--_btn-border);
  }
  
  .w-fit { width: fit-content; }
  .min-w-fit { min-width: fit-content; }
  .max-w-fit { max-width: fit-content; }


  /* 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(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
  .card-body { padding: var(--space-5); }
  .card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }

  /* Tables (consolidated) */
  .table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    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);
    border-right: 1px solid var(--color-border);
  }

  .table tbody tr:last-child > * { border-bottom: 0; }
  .table tr > :last-child { border-right: 0; }

  .table thead th{
    background: color-mix(in oklab, var(--color-primary), white 90%);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }

  /* 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); }

  /* Badges */
  .badge{
    display:inline-block;
    padding: .3rem .5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-primary), white 80%);
    color: var(--color-elevated);
    border: 1px solid color-mix(in oklab, var(--color-primary), white 60%);
  }
  
  .com-content-categories__item-title .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;        /* avoid vertical drift */
  padding: .35em .5em .35em .0em;  /* optional: make it look nicer */
}

  
  

  /* Modals */
  .modal-backdrop { opacity: .65; }
  .modal-content{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  
/*}
 ==========================================================================
   cd.site — last-mile site specific overrides
   ========================================================================== 
@layer cd.site {*/

  .container-header .navbar-toggler:hover {
    background: color-mix(in oklab, var(--color-primary), black 7%);
  }

  nav.navbar[aria-label="To-Do"] { background-color: var(--color-primary-weak); }

  .container-header .navbar-toggler:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  @media (width >= 992px) {
    .container-header .mod-menu > li + li { margin-left: 0; }
  }
}
/* ========================================== */
       UNLAYERED DEFINITIONS GO BELOW HERE
		  SO AS TO LOAD FIRST
/* ========================================== */
body.cd-base header.header {display:flex;}
body.cd-base .container-header .grid-child {display:flex;padding:0px;}
	.cd-container-header {display:flex;margin:0 0;}

 /* ------------------------------
     Joomla blog/category (already cd-)
     ------------------------------ */

  .cd-cat-hero { margin-bottom:20px; }
  .cd-brand-logo {max-width:320px;}
  .cd-cat-icon{
    width:120px;
    height:120px;
    object-fit:contain;
    flex: 0 0 auto;
    display:block;
  }
  .cd-cat-icon-wrap{ display:inline-flex; }

  .cd-cat-index .cd-cat-head img {
    width: 120px;
    height: 120px;
    object-fit: cover;
  }

  .cd-cat-blog .cd-cat-head h1,
  .cd-cat-blog .cd-cat-head h2 { font-size: clamp(1.25rem, 1.6vw, 1.8rem); }

  .cd-cat-index .cd-cat-head h1,
  .cd-cat-index .cd-cat-head h2 { font-size: clamp(1.6rem, 2.2vw, 2.4rem); }

  .cd-cat-blog .cd-cat-head img {
    width: 90px;
    height: 90px;
    object-fit: cover;
  }

  /* keep your legacy uppercase alias but stop inventing new ones */
  .cd-blog-layout h2, .CD_BlogLayout h2 { line-height: 1.15; text-align:center; }
  .cd-blog-layout h2, .CD_BlogLayout h2 a { font-size: 16px; }

  .cd-cat-hero-img {
    width: 60px;
    height: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cd-cat-hero-img-el {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
  
  .phone-number {margin-top:10px;}
  
 /* modules */
 .cd-mainmenu-class {}
 .cd-mod-mainmenu {}
 
  
  
  
    #navbar129 a[aria-current="page"],
  #navbar129 .active > a,
  #navbar129 .current > a 
  #navbar130 a[aria-current="page"],
  #navbar130 .active > a,
  #navbar130 .current > a {
/*    background: color-mix(in oklab, var(--color-primary-weak), white 60%); */
    color: var(--color-text);
  }

  #navbar129, #navbar130 { border-radius: 0 10px 10px 0; }

  
  
  
   /* Row hover + active */
  #navbar130 .cd-menu-class a:hover,   #navbar129 .cd-menu-class a:hover {
  /*  background: var(--color-hover-bg); */
    color: var(--color-text);
    border-bottom: 3px solid var(--color-primary);
    border-radius: 10px;
	padding-bottom:0.35rem;
  }

  #navbar130 .cd-menu-class a[aria-current="page"],
  #navbar130 .cd-menu-class .current > a,
  #navbar130 .cd-menu-class .active > a ,
    #navbar129 .cd-menu-class a[aria-current="page"],
  #navbar129 .cd-menu-class .current > a,
  #navbar129 .cd-menu-class .active > a {
    border-bottom: 3px solid var(--color-primary);
    border-radius: 10px;
	padding-bottom:0.35rem;
  }

  /* Reset only inside the collapse, not globally */
  #navbar130 ul, #navbar130 li, #navbar129 ul, #navbar129 li  { margin:0; padding:0; list-style:none; }
  #navbar130 .metismenu-item,  #navbar129 .metismenu-item { position: relative; color:var(--color-link)}

  /* Link rows */
  #navbar130 .metismenu-item > a,   #navbar129 .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;
  }

  /* Submenu gradient “lift” without negative margins */
  #navbar130 ul.mm-collapse,  #navbar129 ul.mm-collapse{
    --top: var(--CDBASE-primary-700-hsl);
    --alpha-start: .495;
    --fade-end: 60%;
    --lift: 0px; /* mobile default */

    margin-top: 0;

    background:
      linear-gradient(
        to bottom,
        hsl(var(--top) / var(--alpha-start)) 0%,
        hsl(var(--top) / 0) var(--fade-end)
      ),
      #fff;

    background-position: 0 calc(-1 * var(--lift)), 0 0;
    background-size: 100% calc(100% + var(--lift)), auto;
    background-repeat: no-repeat;

    border-radius: var(--radius-md);
    padding: .5rem;
  }

  @media (min-width: 992px){
    #navbar130 ul.mm-collapse,  #navbar129 ul.mm-collapse{ --lift: 8px; }
  } 

  /* Desktop hover only */
  @media (hover: hover) and (pointer: fine) {
    #navbar130 .metismenu-item > ul,  #navbar129 .metismenu-item > ul  {
      position: absolute;
      inset-inline-start: 30px;
      top: calc(100% - 9px);
      min-width: max(220px, 16rem);
      max-width: min(92vw, 420px);
      z-index: 1001;
      box-shadow: var(--shadow-sm);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      display: none;
    }

    #navbar130 .metismenu-item:hover > ul, #navbar129 .metismenu-item:hover > ul
    #navbar130 .metismenu-item:focus-within > ul, #navbar129 .metismenu-item:focus-within > ul { display:block; }
  }

  /* Touch devices: stacked blocks (MetisMenu controls .mm-show) */
  @media (hover: none) and (pointer: coarse) {
    #navbar130 .metismenu-item > ul, #navbar129 .metismenu-item > ul  {
      position: static;
      display: none;
      box-shadow: none;
      border: 0;
      background: transparent;
      max-width: 100%;
    }

    #navbar130 .metismenu-item > ul.mm-show, #navbar129 .metismenu-item > ul.mm-show  { display:block; padding-block:.25rem; }

    #navbar130 .metismenu-item > a, #navbar129 .metismenu-item > a {
      padding: .6rem .75rem;
      white-space: normal;
    }
  }

  /* Focus visibility */
  :where(#navbar130 .cd-menu-class a):focus-visible,   :where(#navbar129 .cd-menu-class a):focus-visible  {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
  
  
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); }

/* Regular Lab Modal */
.cd-reader-modal [data-modals-element="overlay"] {
--opacity: 0.3;}
.cd-reader-modal-link{background: color-mix(in oklab, var(--warning), black 7%);}
.cd-modal-container{display:flex;justify-content:center;}
.cd-modal-container p {margin:0 5px;}

/* language flags */
div.mod-languages ul li.lang-active {
	background-color: transparent;
}
div.mod-languages ul.lang-block li  {
		padding: 0 0;
}

/* Menu Classes */
.cd-blog-lead-article {}
.cd-intro-article {}
  .cd-com-content-categories__item {
    display: flex;
    flex-wrap: row;
  }
    .cd-margin-left {margin-left:14px;}
    
@media (max-width: 320px) {
  .cd-margin-left { margin-left: 14px; }
  .cd-com-content-categories__item {flex-wrap: wrap;text-align:center;}
  .cd-com-content-categories__item img { margin:0 auto;}
.breadcrumb a, .breadcrumb {font-size:10px;padding:10px 0px !important;}

}

@media (width <= 767.98px) {
.container-header .navbar-toggler {	margin-top: 1em;}
}