/* ======================================================================
   EMKAN v158 — ONLY the three requested corrections
   1) Internal R&D / Content context strip geometry
   2) Tree diagrams geometry
   3) Store filter/category hover + selected state
   Mega-menu and every other site area are intentionally untouched.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) INTERNAL R&D / CONTENT CONTEXT STRIPS
   These pages mount the breadcrumb/back bar inside narrower centered parents.
   The rule below converts the viewport target (same geometry already correct
   elsewhere) into a parent-relative physical left margin.
   ---------------------------------------------------------------------- */
@media (min-width:1280px){
  
}
@media (min-width:901px) and (max-width:1279px){
  
}
@media (min-width:901px){
  
}

/* ----------------------------------------------------------------------
   2) TREE DIAGRAMS
   One law for all existing desktop tree variants:
   - 24px reserved node rail
   - spine at 5px from the outer edge
   - 7px diamond centre exactly on the spine
   - no legacy li/branch connector marks
   ---------------------------------------------------------------------- */
@media (min-width:721px){
  /* ABOUT tree */
  html body .about-main .about-company-text-column .company-axis{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:0!important;
    width:min(100%,210px)!important;
    max-width:210px!important;
    min-width:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:20px!important;
    overflow:visible!important;
  }
  html[dir="rtl"] body .about-main .about-company-text-column .company-axis{
    padding-left:0!important;
    padding-right:24px!important;
  }
  html[dir="ltr"] body .about-main .about-company-text-column .company-axis{
    padding-right:0!important;
    padding-left:24px!important;
  }
  html body .about-main .about-company-text-column .company-axis::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:22px!important;
    bottom:22px!important;
    width:1px!important;
    height:auto!important;
    background:var(--line)!important;
    z-index:0!important;
  }
  html[dir="rtl"] body .about-main .about-company-text-column .company-axis::before{
    right:5px!important;left:auto!important;inset-inline:auto!important;
  }
  html[dir="ltr"] body .about-main .about-company-text-column .company-axis::before{
    left:5px!important;right:auto!important;inset-inline:auto!important;
  }
  html body .about-main .about-company-text-column .company-axis li{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  html body .about-main .about-company-text-column .company-axis li::before,
  html body .about-main .about-company-text-column .company-axis li::after,
  html body .about-main .about-company-text-column .company-axis .axis-line{
    content:none!important;
    display:none!important;
  }
  html body .about-main .about-company-text-column .company-axis .practice-button{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button{
    justify-content:flex-start!important;
    text-align:right!important;
  }
  html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button{
    justify-content:flex-start!important;
    text-align:left!important;
  }
  html body .about-main .about-company-text-column .company-axis .practice-button::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:50%!important;
    width:7px!important;
    height:7px!important;
    box-sizing:border-box!important;
    border:1px solid var(--line)!important;
    background:var(--bg)!important;
    transform:translateY(-50%) rotate(45deg)!important;
    transform-origin:center!important;
    z-index:2!important;
  }
  html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button::before{
    right:-22px!important;left:auto!important;inset-inline:auto!important;
  }
  html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button::before{
    left:-22px!important;right:auto!important;inset-inline:auto!important;
  }
  html body .about-main .about-company-text-column .company-axis .practice-button::after{
    content:none!important;display:none!important;
  }
  html body .about-main .about-company-text-column .company-axis .practice-button .axis-name{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    white-space:normal!important;
    overflow:visible!important;
    font-size:11px!important;
    line-height:1.65!important;
  }
  html[dir="rtl"] body .about-main .about-company-text-column .company-axis .practice-button .axis-name{text-align:right!important}
  html[dir="ltr"] body .about-main .about-company-text-column .company-axis .practice-button .axis-name{text-align:left!important}
  html body .about-main .about-company-text-column .company-axis .practice-button:is(:hover,:focus-visible,.is-active)::before{
    border-color:var(--hover-accent)!important;
  }
  html body .about-main .about-company-text-column .company-axis .practice-button.is-active::before{
    background:var(--hover-accent)!important;
  }

  /* EDUCATION trees — legacy/current and v115 detail */
  html body #contentApp :is(.learning-tree,.v115-learning-tree){
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
  }
  html[dir="rtl"] body #contentApp :is(.learning-tree,.v115-learning-tree){
    padding:0 24px 0 0!important;
  }
  html[dir="ltr"] body #contentApp :is(.learning-tree,.v115-learning-tree){
    padding:0 0 0 24px!important;
  }
  html body #contentApp :is(.learning-tree,.v115-learning-tree)::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:22px!important;
    bottom:22px!important;
    width:1px!important;
    height:auto!important;
    background:var(--line)!important;
    z-index:0!important;
  }
  html[dir="rtl"] body #contentApp :is(.learning-tree,.v115-learning-tree)::before{
    right:5px!important;left:auto!important;inset-inline:auto!important;
  }
  html[dir="ltr"] body #contentApp :is(.learning-tree,.v115-learning-tree)::before{
    left:5px!important;right:auto!important;inset-inline:auto!important;
  }
  html body #contentApp :is(.learning-branch,.v115-tree-branch){
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:7px 0!important;
    border:0!important;
    background:transparent!important;
    transform:none!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:break-word!important;
    line-height:1.7!important;
  }
  html[dir="rtl"] body #contentApp :is(.learning-branch,.v115-tree-branch){text-align:right!important;justify-content:flex-start!important}
  html[dir="ltr"] body #contentApp :is(.learning-branch,.v115-tree-branch){text-align:left!important;justify-content:flex-start!important}
  html body #contentApp :is(.learning-branch,.v115-tree-branch)::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:50%!important;
    width:7px!important;
    height:7px!important;
    box-sizing:border-box!important;
    border:1px solid var(--line)!important;
    background:var(--bg)!important;
    transform:translateY(-50%) rotate(45deg)!important;
    transform-origin:center!important;
    z-index:2!important;
  }
  html[dir="rtl"] body #contentApp :is(.learning-branch,.v115-tree-branch)::before{
    right:-22px!important;left:auto!important;inset-inline:auto!important;
  }
  html[dir="ltr"] body #contentApp :is(.learning-branch,.v115-tree-branch)::before{
    left:-22px!important;right:auto!important;inset-inline:auto!important;
  }
  html body #contentApp :is(.learning-branch,.v115-tree-branch)::after{
    content:none!important;
    display:none!important;
  }
  html body #contentApp :is(.learning-branch,.v115-tree-branch):is(:hover,:focus-visible,.is-active){
    color:var(--hover-accent)!important;
  }
  html body #contentApp :is(.learning-branch,.v115-tree-branch):is(:hover,:focus-visible,.is-active)::before{
    border-color:var(--hover-accent)!important;
  }
  html body #contentApp :is(.learning-branch,.v115-tree-branch).is-active::before{
    background:var(--hover-accent)!important;
  }
}

/* Preserve the existing mobile accordion/grid behavior; tree rail is desktop-only. */
@media (max-width:720px){
  html body #contentApp :is(.learning-tree,.v115-learning-tree)::before,
  html body #contentApp :is(.learning-branch,.v115-tree-branch)::before{
    display:none!important;
    content:none!important;
  }
}

/* ----------------------------------------------------------------------
   3) STORE FILTER/CATEGORY INTERACTION
   Resting item = normal.
   Hover/focus = accent only while pointer/focus is on it.
   Selected after click = bold foreground/black.
   Selected + hovered = accent but stays bold; when pointer leaves it is black.
   ---------------------------------------------------------------------- */
html body .store-category-side :is(
  .store-category-nav a,
  .store-subcategory-list a,
  .store-sort-list button
){
  color:var(--category-muted,var(--fg))!important;
  font-weight:400!important;
  text-shadow:none!important;
  transform:none!important;
}
html body .store-category-side :is(
  .store-category-nav a,
  .store-subcategory-list a,
  .store-sort-list button
):is(:hover,:focus-visible){
  color:var(--hover-accent)!important;
  font-weight:400!important;
  transform:none!important;
}
html body .store-category-side :is(
  .store-category-nav a.is-active,
  .store-subcategory-list a.is-active,
  .store-subcategory-list a[aria-current="page"],
  .store-sort-list button.is-active,
  .store-sort-list button[aria-pressed="true"]
){
  color:var(--fg)!important;
  font-weight:700!important;
  text-shadow:none!important;
  transform:none!important;
}
html body .store-category-side :is(
  .store-category-nav a.is-active,
  .store-subcategory-list a.is-active,
  .store-subcategory-list a[aria-current="page"],
  .store-sort-list button.is-active,
  .store-sort-list button[aria-pressed="true"]
):is(:hover,:focus-visible){
  color:var(--hover-accent)!important;
  font-weight:700!important;
}