/* 1R Reactor — frontend-sidebar-categories.css
 * Canonical structure: foundations → layout/components → context UI → states → responsive.
 */

/* === Foundations & Base === */
.categories-menu-link::before{display: none ;content: none ;}
.categories-menu-link__arrow::before{content: "" ;display: block ;width: 10px ;height: 10px ;border-right: 2px solid #9aa7ad ;border-bottom: 2px solid #9aa7ad ;transform: rotate(45deg) ;transition:
    transform 0.25s ease,
    border-color 0.25s ease ;}
.categories-menu-link:hover .categories-menu-link__arrow::before{border-color: #9aa7ad ;}
.categories-menu-list
  > li.is-current
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li.current-cat
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li.current-product-cat
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li.is-active
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-link.is-current .categories-menu-link__arrow::before,
.categories-menu-link[aria-current="page"]
  .categories-menu-link__arrow::before{border-color: #ffffff ;}
.categories-menu-sub
  > li.is-current
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-sub
  > li.current-cat
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-sub
  > li.current-product-cat
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-sub
  > li.is-active
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-sub
  > li
  > .categories-menu-link[aria-current="page"]
.categories-menu-link .categories-menu-link__arrow::before{transform: rotate(45deg) ;transform-origin: center ;transition:
    transform 0.25s ease,
    border-color 0.25s ease ;}
.categories-menu-list
  > li.is-open
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li.is-expanded
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-link._spoller-active
  .categories-menu-link__arrow::before,
.categories-menu-link.is-expanded
  .categories-menu-link__arrow::before,
.categories-menu-link[aria-expanded="true"]
  .categories-menu-link__arrow::before{transform: rotate(225deg) ;}
.categories-menu-list
  > li:has(> .categories-menu-sub-wrap[style*="display: none"])
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li:has(> .categories-menu-sub-wrap[style*="display:none"])
  > .categories-menu-link
  .categories-menu-link__arrow::before{transform: rotate(45deg) ;}
.categories-menu-list
  > li:has(> .categories-menu-sub-wrap[style*="display: block"])
  > .categories-menu-link
  .categories-menu-link__arrow::before,
.categories-menu-list
  > li:has(> .categories-menu-sub-wrap[style*="display:block"])
  > .categories-menu-link
.categories-menu .categories-menu-link:hover .categories-menu-link__arrow::before,
.categories-menu .categories-menu-link:focus-visible .categories-menu-link__arrow::before{border-color:var(--r1-cats-primary) ;}
.widget.r1-sidebar-categories-widget,
body .widget:has(.categories-menu[data-reactor-cats]){border:0 ;
  border-radius:0 ;
  box-shadow:none ;
  background:transparent ;
  padding:0 ;}
.widget.r1-sidebar-categories-widget > p:empty,
body .widget:has(.categories-menu[data-reactor-cats]) > p:empty{display:none ;}

/* === Navigation & Site UI === */
.categories-menu-list,
.categories-menu-sub{list-style: none ;margin: 0 ;padding: 0 ;}
.categories-menu-list{width: 100% ;max-width: 100% ;display: flex ;flex-direction: column ;gap: 8px ;}
.categories-menu-list > li,
.categories-menu-sub > li{width: 100% ;margin: 0 ;padding: 0 ;position: relative ;}
.categories-menu-link{width: 100% ;max-width: 100% ;display: flex ;align-items: center ;justify-content: space-between ;gap: 12px ;padding: 10px 14px ;text-decoration: none ;color: #121212 ;background: #ffffff ;border: 1px solid #edf2f4 ;border-radius: 16px ;box-shadow: none ;overflow: hidden ;position: relative ;transition:
    background-color 0.25s ease,
    border-color 0.25s ease ;}
.categories-menu-link__inner{display: flex ;align-items: center ;gap: 12px ;min-width: 0 ;width: 100% ;position: relative ;z-index: 2 ;}
.categories-menu-link__text{display: block ;min-width: 0 ;color: inherit ;font-size: 15px ;font-weight: 500 ;line-height: 1.35 ;word-break: break-word ;}
.categories-menu-link img{width: 40px ;height: 40px ;min-width: 40px ;max-width: 40px ;object-fit:cover;border-radius: 10px ;border: 1px solid #eef2f4 ;background: #f9fbfc ;display: block ;flex-shrink: 0 ;margin: 0 ;}
.categories-menu--thumbnail-contain .categories-menu-link img{object-fit: contain ;}
.categories-menu-link__arrow{width: 52px ;height: 100% ;min-width: 52px ;min-height: 44px ;flex: 0 0 52px ;flex-shrink: 0 ;position: relative ;display: flex ;align-items: center ;justify-content: center ;align-self: stretch ;border: 0 ;transform: none ;margin: 0 -12px 0 auto ;cursor: pointer ;touch-action: manipulation ;}
.categories-menu-link:hover{background: #f9fbfc ;border-color: #dfe8ec ;box-shadow: none ;transform: none ;}
.categories-menu-link:hover .categories-menu-link__text{color: #121212 ;}
.categories-menu-list > li.is-current > .categories-menu-link,
.categories-menu-list > li.current-cat > .categories-menu-link,
.categories-menu-list > li.current-product-cat > .categories-menu-link,
.categories-menu-list > li.is-active > .categories-menu-link,
.categories-menu-link.is-current,
.categories-menu-link[aria-current="page"]{background: var(--reactor-primary) ;border-color: var(--reactor-primary) ;box-shadow: none ;color: #ffffff ;}
.categories-menu-list > li.is-current > .categories-menu-link img,
.categories-menu-list > li.current-cat > .categories-menu-link img,
.categories-menu-list > li.current-product-cat > .categories-menu-link img,
.categories-menu-list > li.is-active > .categories-menu-link img,
.categories-menu-link.is-current img,
.categories-menu-link[aria-current="page"] img{border-color: rgba(255, 255, 255, 0.35) ;background: rgba(255, 255, 255, 0.15) ;}
.categories-menu-list
  > li.is-current
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-list
  > li.current-cat
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-list
  > li.current-product-cat
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-list
  > li.is-active
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-link.is-current .categories-menu-link__text,
.categories-menu-link[aria-current="page"] .categories-menu-link__text{color: #ffffff ;}
.categories-menu-list > li.is-parent-current > .categories-menu-link,
.categories-menu-list > li.current-cat-parent > .categories-menu-link,
.categories-menu-list > li.current-product-cat-parent > .categories-menu-link,
.categories-menu-list > li.is-active-parent > .categories-menu-link{background: #ffffff ;border-color: #edf2f4 ;box-shadow: none ;color: #121212 ;}
.categories-menu-sub-wrap{margin-top: 8px ;}
.categories-menu-sub{display: flex ;flex-direction: column ;gap: 6px ;padding-left: 18px ;}
.categories-menu-sub > li > .categories-menu-link{background: #f9fbfc ;border: 1px solid #eef3f5 ;border-radius: 14px ;padding: 8px 12px ;}
.categories-menu-sub > li > .categories-menu-link .categories-menu-link__inner{gap: 10px ;}
.categories-menu-sub > li > .categories-menu-link img{width: 34px ;height: 34px ;min-width: 34px ;max-width: 34px ;border-radius: 9px ;}
.categories-menu-sub > li > .categories-menu-link .categories-menu-link__text{font-size: 14px ;font-weight: 400 ;}
.categories-menu-sub > li > .categories-menu-link:hover{background: #f3f8f8 ;border-color: #dbe8e7 ;box-shadow: none ;transform: none ;}
.categories-menu-sub > li.is-current > .categories-menu-link,
.categories-menu-sub > li.current-cat > .categories-menu-link,
.categories-menu-sub > li.current-product-cat > .categories-menu-link,
.categories-menu-sub > li.is-active > .categories-menu-link,
.categories-menu-sub > li > .categories-menu-link[aria-current="page"]{background: var(--reactor-primary) ;border-color: var(--reactor-primary) ;color: #ffffff ;box-shadow: none ;}
.categories-menu-sub
  > li.is-current
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-sub
  > li.current-cat
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-sub
  > li.current-product-cat
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-sub
  > li.is-active
  > .categories-menu-link
  .categories-menu-link__text,
.categories-menu-sub
  > li
  > .categories-menu-link[aria-current="page"]
  .categories-menu-link__text{color: #ffffff ;}
.categories-menu-sub > li.is-current > .categories-menu-link img,
.categories-menu-sub > li.current-cat > .categories-menu-link img,
.categories-menu-sub > li.current-product-cat > .categories-menu-link img,
.categories-menu-sub > li.is-active > .categories-menu-link img,
.categories-menu-sub > li > .categories-menu-link[aria-current="page"] img{border-color: rgba(255, 255, 255, 0.35) ;background: rgba(255, 255, 255, 0.15) ;}
.categories-menu-link:not(:has(img)) .categories-menu-link__inner{gap: 0 ;}
.categories-menu{--r1-cats-primary:var(--r1-primary,var(--reactor-primary,#5e6737));
  --r1-cats-primary-hover:var(--r1-primary-hover,var(--reactor-primary-hover,var(--r1-cats-primary)));
  --r1-cats-text:var(--r1-text,#121212);
  --r1-cats-border:var(--r1-border,#edf2f4);
  --r1-cats-surface:var(--r1-surface,var(--r1-bg,#ffffff));
  --r1-cats-surface-soft:var(--r1-surface-soft,var(--r1-bg-soft,#f9fbfc));
  width:100% ;max-width:100% ;
  margin:0 ;padding:0 ;border:0 ;border-radius:0 ;
  background:transparent ;box-shadow:none ;}
/* Shared category surface + hierarchy (inactive, ancestor, selected). */
.categories-menu[data-reactor-cats] .categories-menu-link{
  color:var(--r1-cats-text);
  background:var(--r1-cats-surface);
  border-color:var(--r1-cats-border);
  border-radius:clamp(12px,var(--r1-card-radius,14px),18px);
}
.categories-menu[data-reactor-cats] .categories-menu-sub > li > .categories-menu-link{
  background:var(--r1-cats-surface-soft);
  border-color:var(--r1-cats-border);
}
.categories-menu[data-reactor-cats] .categories-menu-link:is(:hover,:focus-visible){
  color:var(--r1-cats-primary);
  background:var(--r1-cats-surface-soft);
  border-color:var(--r1-cats-primary);
}
.categories-menu[data-reactor-cats] .categories-menu-link:is(:hover,:focus-visible) .categories-menu-link__text{
  color:var(--r1-cats-primary);
}
/* Ancestors are softly marked; only the current category gets a solid accent. */
.categories-menu[data-reactor-cats] .categories-menu-list > li:is(.is-parent-current,.current-cat-parent,.current-product-cat-parent,.is-active-parent) > .categories-menu-link{
  color:var(--r1-cats-text);
  background:color-mix(in srgb,var(--r1-cats-primary) 6%,var(--r1-cats-surface));
  border-color:color-mix(in srgb,var(--r1-cats-primary) 18%,var(--r1-cats-border));
}
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li:is(.is-current,.current-cat,.current-product-cat,.is-active) > .categories-menu-link,
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li > .categories-menu-link[aria-current="page"]{
  background:var(--r1-cats-primary);
  border-color:var(--r1-cats-primary);
  color:#fff;
}
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li:is(.is-current,.current-cat,.current-product-cat,.is-active) > .categories-menu-link .categories-menu-link__text,
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li > .categories-menu-link[aria-current="page"] .categories-menu-link__text{
  color:#fff;
}
/* Selected cards must retain their fill and white copy even while hovered/focused. */
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li:is(.is-current,.current-cat,.current-product-cat,.is-active) > .categories-menu-link:is(:hover,:focus-visible),
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li > .categories-menu-link[aria-current="page"]:is(:hover,:focus-visible){
  background:var(--r1-cats-primary);
  border-color:var(--r1-cats-primary);
  color:#fff;
}
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li:is(.is-current,.current-cat,.current-product-cat,.is-active) > .categories-menu-link:is(:hover,:focus-visible) .categories-menu-link__text,
.categories-menu[data-reactor-cats] :is(.categories-menu-list,.categories-menu-sub) > li > .categories-menu-link[aria-current="page"]:is(:hover,:focus-visible) .categories-menu-link__text{
  color:#fff;
}
/* A filter and the category tree may share the same widget: keep them separate. */
.r1-sidebar-categories-widget:has(> .r1-filters) > .categories-menu[data-reactor-cats]{
  margin-top:24px;
}
.categories-menu[data-reactor-cats] .categories-menu-link__inner{
  align-items:center;
}
.categories-menu[data-reactor-cats] .categories-menu-link__text{
  align-self:center;
}

/* === Responsive & Conditional === */
@media (max-width: 767px){.categories-menu-list{gap: 6px ;}.categories-menu-link{border-radius: 14px ;padding: 9px 12px ;}.categories-menu-link__inner{gap: 10px ;}.categories-menu-link img{width: 40px ;height: 40px ;min-width: 40px ;max-width: 40px ;border-radius: 10px ;}.categories-menu-link__text{font-size: 14px ;line-height: 1.3 ;}.categories-menu-sub{padding-left: 14px ;margin-top: 6px ;}.categories-menu-sub > li > .categories-menu-link{padding: 8px 10px ;border-radius: 12px ;}.categories-menu-sub > li > .categories-menu-link img{width: 30px ;height: 30px ;min-width: 30px ;max-width: 30px ;border-radius: 8px ;}.categories-menu-sub
    > li
    > .categories-menu-link
    .categories-menu-link__text{font-size: 13px ;}}
@media only screen and (max-width: 767px){.categories-menu
    a.categories-menu-link[data-toggle]
    > .categories-menu-link__inner
    > .categories-menu-link__arrow{position: absolute ;z-index: 50 ;top: 0 ;right: 0 ;bottom: 0 ;width: 112px ;min-width: 112px ;height: 100% ;min-height: 60px ;margin: 0 ;padding: 0 ;display: flex ;align-items: center ;justify-content: center ;pointer-events: auto ;touch-action: manipulation ;}}

.categories-menu--thumbnail-cover .categories-menu-link img{object-fit:cover;}

/* Sidebar native category tree */
.categories-menu-link {
            position: relative;
            box-sizing: border-box;
        }

        .categories-menu-link__inner {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

        .categories-menu-link__text {
            text-align: left;
            flex: 1 1 auto;
            min-width: 0;
        }

        .categories-menu-link__arrow {
            margin-left: auto;
            flex: 0 0 auto;
            cursor: pointer;
        }

        @media only screen and (max-width: 767px) {
            .categories-menu a.categories-menu-link[data-toggle] {
                min-height: 60px;
                padding-right: 120px !important;
                display: flex;
                align-items: center;
            }

            .categories-menu a.categories-menu-link[data-toggle] .categories-menu-link__inner {
                align-items: center;
            }

            .categories-menu a.categories-menu-link[data-toggle] .categories-menu-link__arrow {
                position: absolute;
                z-index: 5;
                top: 0;
                right: 0;
                bottom: 0;
                width: 112px !important;
                min-width: 112px !important;
                height: 100% !important;
                margin: 0 !important;
                border: 0 !important;
                transform: none !important;
                display: flex !important;
                align-items: center;
                justify-content: center;
                touch-action: manipulation;
            }
        }

        .categories-menu-link__inner img {
            flex: 0 0 auto;
        }

        .categories-menu-sub-wrap {
            overflow: hidden;
        }