/* ==========================================================================
   AWS Product Categories Widget — visual styles.
   Accordion state: .aws-open on <li>, <a.aws-caret>, and <ul.aws-sub>.
   CSS hides all .aws-sub by default; .aws-sub.aws-open reveals them.
   Colors match legacy_logic exactly: text #606975, accent #CC0033, muted #9DA9B9
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bundled Font Awesome 4.7.0 — isolated as 'AwsFA4' font-face so it cannot
   conflict with Woodmart's FA5 declarations.  Only the fa-gg glyph (\f260)
   is actually used (the MSA "List All" icon), but the full font is loaded so
   any other FA4 class added to the widget in future also works.
   Font license: SIL OFL 1.1 — free for bundling.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'AwsFA4';
    src: url('../fonts/fa4/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fa4/fontawesome-webfont.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* fa-gg — the exact icon the legacy MSA link uses (unicode \f260 in FA4).
   Using our own class name to avoid any clash with FA5's .fa class rules. */
.aws-icon-gg {
    display: inline-block;
    font-family: 'AwsFA4' !important;
    font-style: normal;
    font-weight: normal;
    font-size: inherit;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600; /* matches legacy .MSA .fa { font-weight: 600 } */
}
.aws-icon-gg::before {
    content: "\f260"; /* fa-gg glyph */
}

/* --------------------------------------------------------------------------
   Widget wrapper
   -------------------------------------------------------------------------- */
.aws-product-categories-tabs {
    font-size: 13px;
    line-height: 1.5;
    color: #606975;
}

/* --------------------------------------------------------------------------
   Tab bar
   -------------------------------------------------------------------------- */
.aws-product-categories-tabs .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #e1e7ec !important;
    gap: 0 !important;
    box-shadow: none !important;
}

.aws-product-categories-tabs .nav-tabs .nav-item {
    flex: 1 1 0 !important;
    margin: 0 0 -1px !important;
}

.aws-product-categories-tabs .nav-tabs .nav-link {
    display: block !important;
    padding: 7px 6px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #606975 !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px 4px 0 0 !important;
    transition: color .3s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.aws-product-categories-tabs .nav-tabs .nav-link.active {
    color: #94a1b3 !important;
    background: #fff !important;
    border-color: #e1e7ec #e1e7ec #fff !important;
}

.aws-product-categories-tabs .nav-tabs .nav-link:not(.active):hover {
    color: #0da9ef !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   Tab content
   -------------------------------------------------------------------------- */
.aws-product-categories-tabs .tab-content {
    padding: 10px 5px !important;
    border-right: 1px solid #e1e7ec;
    border-bottom: 1px solid #e1e7ec;
    border-left: 1px solid #e1e7ec;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.aws-product-categories-tabs .tab-pane { display: none; }
.aws-product-categories-tabs .tab-pane.active { display: block; }

/* ==========================================================================
   Category tree
   ========================================================================== */

.aws-cat-tree,
.aws-cat-tree .aws-sub {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CLOSED by default — no library needed, pure CSS */
.aws-cat-tree .aws-sub {
    display: none !important;
}

/* OPEN — JS adds aws-open, or PHP adds it server-side for the active branch */
.aws-cat-tree .aws-sub.aws-open {
    display: block !important;
}

/* Every LI: 14px left gutter for the caret */
.aws-cat-tree li {
    position: relative !important;
    margin-bottom: 0 !important;
    padding-left: 14px !important;
}

/* --------------------------------------------------------------------------
   Navigation links
   -------------------------------------------------------------------------- */
.aws-cat-tree li > a.aws-cat-link,
.aws-cat-tree li.ln52 > a {
    display: inline-block !important;
    padding: 2px 0 !important;
    color: #606975 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: color 0.3s !important;
}

.aws-cat-tree li > a.aws-cat-link:hover,
.aws-cat-tree li.ln52 > a:hover {
    color: #CC0033 !important;
    text-decoration: none !important;
}

.aws-cat-tree li.aws-current > a,
.aws-cat-tree li > a.active {
    color: #CC0033 !important;
}

/* --------------------------------------------------------------------------
   Count badge
   -------------------------------------------------------------------------- */
.aws-cat-tree .aws-count {
    margin-left: 4px !important;
    color: #9DA9B9 !important;
    font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   MSA "List All" link — sibling between label and child UL, legacy exact match
   -------------------------------------------------------------------------- */
.aws-cat-tree li.has-children > a.MSA {
    display: inline-block !important;
    margin-left: 4px !important;
    padding: 1px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #606975 !important;
    text-decoration: none !important;
    border: 1px solid #e1e7ec !important;
    border-radius: 3px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    transition: color 0.3s, background 0.3s !important;
}

.aws-cat-tree li.has-children > a.MSA .fa {
    font-weight: 600;
    margin-right: 2px;
}

.aws-cat-tree li.has-children > a.MSA:hover {
    color: #CC0033 !important;
    border-color: #CC0033 !important;
}

/* --------------------------------------------------------------------------
   Caret toggle — <button type="button" class="aws-caret"> (NOT an anchor).
   Using a button avoids Woodmart's smooth-scroll intercepting all a[href^="#"].
   -------------------------------------------------------------------------- */
.aws-cat-tree li.has-children > .aws-caret {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 14px !important;
    display: block !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    -webkit-tap-highlight-color: transparent;
    /* Button element resets */
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Triangle — default: collapsed = pointing right (-90deg) */
.aws-cat-tree li.has-children > .aws-caret::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    transform: rotate(-90deg) !important;
    transition: transform 0.35s !important;
    border-top: 4px dashed #9DA9B9 !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
}

/* Open state: aws-open on the caret */
.aws-cat-tree li.has-children > .aws-caret.aws-open::before {
    transform: rotate(0deg) !important;
    border-top-color: #CC0033 !important;
}

.aws-cat-tree li.has-children > .aws-caret:focus-visible {
    outline: 2px solid #CC0033 !important;
    outline-offset: 1px !important;
    border-radius: 2px !important;
}

/* --------------------------------------------------------------------------
   Sub-tree child items
   -------------------------------------------------------------------------- */
.aws-cat-tree .aws-sub > li {
    background-color: #F5F5F5 !important;
    border-radius: 3px !important;
    padding-right: 5px !important;
}

.aws-cat-tree .aws-sub > li::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    left: 0 !important;
    width: 8px !important;
    height: 1px !important;
    border: 0 !important;
    background-color: #DEE5EA !important;
}

/* --------------------------------------------------------------------------
   Category banner (catbanner)
   -------------------------------------------------------------------------- */
.catban { margin-bottom: 12px; line-height: 0; }
.catban-img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* --------------------------------------------------------------------------
   No-products notice
   -------------------------------------------------------------------------- */
.aws-no-products { padding: 24px 0; text-align: center; }
.aws-no-products-msg { margin-bottom: 14px; color: #606975; font-size: 14px; }
.aws-reset-filters { font-size: 13px; }