/**
 * WooCommerce Category Enhancer — Frontend Styles v1.0.2
 *
 * @package WooCategoryEnhancer
 */

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
    --wce-primary:          var(--theme-palette-color-1, #7f54b3);
    --wce-primary-dark:     var(--theme-palette-color-2, #6b46a0);
    --wce-primary-rgb:      127, 84, 179;
    --wce-text:             var(--theme-text-color,        #1d2327);
    --wce-text-muted:       var(--theme-text-color-muted,  #6b7280);
    --wce-bg:               var(--theme-palette-color-8,   #ffffff);
    --wce-border:           var(--theme-border-color,      #e5e7eb);
    --wce-placeholder-bg:   #f3f4f6;
    --wce-active-bg:        rgba(127, 84, 179, .07);

    --wce-shadow-card:      0 2px 8px rgba(0,0,0,.06);
    --wce-shadow-hover:     0 8px 24px rgba(var(--wce-primary-rgb), .20);
    --wce-shadow-dropdown:  0 12px 40px rgba(0,0,0,.14);

    --wce-radius-sm:   4px;
    --wce-radius-md:   8px;
    --wce-radius-full: 9999px;
    --wce-font-sm:     .8125rem;
    --wce-font-base:   .9375rem;
    --wce-transition:  .18s ease;

    /* Grid vars — overridden by PHP inline <style> */
    --wce-nav-cols:        4;
    --wce-nav-cols-tablet: 3;
    --wce-nav-cols-mobile: 2;
    --wce-nav-icon-w:     64px;
    --wce-nav-icon-h:     64px;
    --wce-nav-gap:        14px;
    --wce-nav-pad:        18px;
    --wce-nav-radius:     12px;
}

/* =========================================================================
   Nav wrapper
   ========================================================================= */
.wce-category-nav {
    width:         100%;
    margin-bottom: 28px;
    /* Stacking context so our absolute dropdowns stay inside */
    position:      relative;
    z-index:       10;
}

/* =========================================================================
   GRID — card list
   ========================================================================= */
.wce-category-nav--grid .wce-nav-grid {
    list-style:             none;
    margin:                 0;
    padding:                0;
    display:                grid;
    grid-template-columns:  repeat(var(--wce-nav-cols, 4), 1fr);
    gap:                    var(--wce-nav-gap, 14px);
    align-items:            start;   /* ← critical: don't stretch rows */
}

/* ── <li> wrapper ────────────────────────────────────────────────────── */
.wce-nav-item {
    position: relative;   /* anchors toggle btn + dropdown */
    min-width: 0;
}

/* =========================================================================
   Card link  (.wce-nav-card)
   ========================================================================= */
.wce-nav-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-start;
    gap:             8px;
    padding:         var(--wce-nav-pad, 18px) 14px 14px;
    background:      var(--wce-bg);
    border:          2px solid var(--wce-border);
    border-radius:   var(--wce-nav-radius, 12px);
    text-decoration: none;
    color:           var(--wce-text);
    text-align:      center;
    box-shadow:      var(--wce-shadow-card);
    transition:
        border-color  var(--wce-transition),
        box-shadow    var(--wce-transition),
        transform     var(--wce-transition),
        background    var(--wce-transition),
        color         var(--wce-transition);
    width:  100%;
    box-sizing: border-box;
    /* reserve space for the toggle btn (28px) on cards that have children */
}

.wce-nav-item--has-children .wce-nav-card {
    padding-top: 34px; /* room for toggle btn in top-right */
}

/* Hover */
.wce-nav-card:hover {
    border-color: var(--wce-primary);
    box-shadow:   var(--wce-shadow-hover);
    transform:    translateY(-3px);
    color:        var(--wce-primary);
}

/* Active / current */
.wce-nav-item--active > .wce-nav-card,
.wce-nav-card[aria-current="page"] {
    background:   var(--wce-primary);
    border-color: var(--wce-primary);
    color:        #fff;
    box-shadow:   var(--wce-shadow-hover);
}
.wce-nav-item--active > .wce-nav-card:hover {
    transform: translateY(-2px);
    background: var(--wce-primary-dark);
}

/* Ancestor (parent of active child) */
.wce-nav-item--ancestor > .wce-nav-card {
    border-color: var(--wce-primary);
    box-shadow:   0 0 0 3px rgba(var(--wce-primary-rgb),.12), var(--wce-shadow-card);
    color:        var(--wce-primary);
}

/* ── Icon area ─────────────────────────────────────────────────────────── */
.wce-nav-card__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           var(--wce-nav-icon-w, 64px);
    height:          var(--wce-nav-icon-h, 64px);
}

.wce-nav-card__img {
    width:         var(--wce-nav-icon-w, 64px);
    height:        var(--wce-nav-icon-h, 64px);
    object-fit:    contain;
    border-radius: var(--wce-radius-sm);
    display:       block;
}

/* Placeholder letter */
.wce-nav-card__placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--wce-nav-icon-w, 64px);
    height:          var(--wce-nav-icon-h, 64px);
    background:      var(--wce-placeholder-bg);
    border-radius:   var(--wce-radius-md);
    font-size:       clamp(18px, calc(var(--wce-nav-icon-w, 64px) * .45), 48px);
    font-weight:     800;
    color:           var(--wce-primary);
    line-height:     1;
    letter-spacing:  -.02em;
}

.wce-nav-item--active .wce-nav-card__placeholder {
    background: rgba(255,255,255,.22);
    color:      #fff;
}
.wce-nav-item--ancestor .wce-nav-card__placeholder {
    background: rgba(var(--wce-primary-rgb),.10);
}

/* "All" SVG icon */
.wce-nav-card__icon--all svg {
    width:   var(--wce-nav-icon-w, 64px);
    height:  var(--wce-nav-icon-h, 64px);
    color:   var(--wce-primary);
    opacity: .65;
}
.wce-nav-item--active .wce-nav-card__icon--all svg { color: #fff; opacity: 1; }

/* ── Name ──────────────────────────────────────────────────────────────── */
.wce-nav-card__name {
    font-size:   var(--wce-font-base);
    font-weight: 600;
    line-height: 1.3;
    word-break:  break-word;
    margin-top:  2px;
}

/* ── Count badge ───────────────────────────────────────────────────────── */
.wce-nav-card__count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     24px;
    font-size:     .75rem;
    font-weight:   600;
    background:    rgba(0,0,0,.06);
    color:         var(--wce-text-muted);
    padding:       2px 8px;
    border-radius: var(--wce-radius-full);
    line-height:   1.6;
}

.wce-nav-item--active .wce-nav-card__count {
    background: rgba(255,255,255,.22);
    color:      rgba(255,255,255,.9);
}
.wce-nav-item--ancestor .wce-nav-card__count {
    background: rgba(var(--wce-primary-rgb),.10);
    color:      var(--wce-primary);
}

/* =========================================================================
   TOGGLE BUTTON  — top-right corner of the card
   ========================================================================= */
.wce-nav-item__toggle {
    position:        absolute;
    top:             7px;
    right:           7px;
    z-index:         3;
    width:           26px;
    height:          26px;
    border:          1.5px solid var(--wce-border);
    border-radius:   var(--wce-radius-sm);
    background:      rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    color:           var(--wce-text-muted);
    transition:
        background    var(--wce-transition),
        border-color  var(--wce-transition),
        color         var(--wce-transition);
    /* Keep button INSIDE the card visually */
    pointer-events:  auto;
}

.wce-nav-item__toggle:hover {
    background:   var(--wce-primary);
    border-color: var(--wce-primary);
    color:        #fff;
}

/* Arrow rotation */
.wce-toggle-arrow { transition: transform .2s ease; display: block; }

.wce-nav-item--open    > .wce-nav-item__toggle .wce-toggle-arrow,
.wce-nav-item--ancestor > .wce-nav-item__toggle .wce-toggle-arrow {
    transform: rotate(180deg);
}

/* Active / ancestor card — colored toggle */
.wce-nav-item--active   > .wce-nav-item__toggle,
.wce-nav-item--ancestor > .wce-nav-item__toggle {
    background:   var(--wce-primary);
    border-color: var(--wce-primary);
    color:        #fff;
}

/* =========================================================================
   SUBCATEGORY DROPDOWN  — absolute overlay, never in document flow
   ========================================================================= */
.wce-subnav {
    list-style:     none;
    margin:         0;
    padding:        6px 0;

    /* Positioning — floats above content */
    position:       absolute;
    top:            calc(100% + 8px);
    left:           0;
    min-width:      220px;
    width:          max(220px, 100%);
    z-index:        9999;

    /* Appearance */
    background:     var(--wce-bg);
    border:         1px solid var(--wce-border);
    border-radius:  var(--wce-radius-md);
    box-shadow:     var(--wce-shadow-dropdown);

    /* Hidden by default — use visibility+opacity for CSS transitions */
    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(-6px) scale(.98);
    transform-origin: top left;
    transition:
        opacity    .18s ease,
        transform  .18s ease,
        visibility 0s linear .18s;   /* delay matches fade duration */
}

/* ── Show states ─────────────────────────────────────────────────────── */

/* Desktop hover on parent <li> */
@media (hover: hover) and (pointer: fine) {
    .wce-nav-item--has-children:hover > .wce-subnav {
        visibility:  visible;
        opacity:     1;
        pointer-events: auto;
        transform:   translateY(0) scale(1);
        transition:
            opacity   .18s ease,
            transform .18s ease,
            visibility 0s linear 0s;
    }
}

/* JS-toggled open */
.wce-nav-item--open > .wce-subnav {
    visibility:  visible;
    opacity:     1;
    pointer-events: auto;
    transform:   translateY(0) scale(1);
    transition:
        opacity   .18s ease,
        transform .18s ease,
        visibility 0s linear 0s;
}

/* Ancestor auto-open */
.wce-nav-item--ancestor > .wce-subnav {
    visibility:  visible;
    opacity:     1;
    pointer-events: auto;
    transform:   translateY(0) scale(1);
    transition:
        opacity   .18s ease,
        transform .18s ease,
        visibility 0s linear 0s;
}

/* ── Row items ─────────────────────────────────────────────────────────── */
.wce-subnav__item + .wce-subnav__item {
    border-top: 1px solid rgba(0,0,0,.05);
}

.wce-subnav__link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         9px 14px 9px 16px;
    text-decoration: none;
    color:           var(--wce-text);
    font-size:       var(--wce-font-base);
    position:        relative;
    transition:      background var(--wce-transition), color var(--wce-transition);
}

.wce-subnav__link:hover {
    background: var(--wce-active-bg);
    color:      var(--wce-primary);
}

/* Active row */
.wce-subnav__item--active .wce-subnav__link {
    background:  var(--wce-active-bg);
    color:       var(--wce-primary);
    font-weight: 600;
}

/* Left accent bar */
.wce-subnav__item--active .wce-subnav__link::before {
    content:      '';
    position:     absolute;
    left:         0; top: 5px; bottom: 5px;
    width:        3px;
    background:   var(--wce-primary);
    border-radius:0 2px 2px 0;
}

/* Small icon */
.wce-subnav__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.wce-subnav__icon img {
    width: 22px; height: 22px;
    object-fit: contain;
    border-radius: var(--wce-radius-sm);
}
.wce-subnav__letter {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width: 22px; height: 22px;
    background:    var(--wce-placeholder-bg);
    border-radius: var(--wce-radius-sm);
    font-size:     11px;
    font-weight:   700;
    color:         var(--wce-primary);
}
.wce-subnav__item--active .wce-subnav__letter {
    background: var(--wce-primary);
    color: #fff;
}

.wce-subnav__name  { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wce-subnav__count {
    flex-shrink:   0;
    font-size:     .75rem;
    color:         var(--wce-text-muted);
    background:    var(--wce-placeholder-bg);
    padding:       1px 7px;
    border-radius: var(--wce-radius-full);
}
.wce-subnav__check {
    flex-shrink: 0;
    color:       var(--wce-primary);
    font-size:   13px;
}

/* =========================================================================
   HORIZONTAL LAYOUT
   ========================================================================= */
.wce-category-nav--horizontal .wce-nav-list {
    list-style: none; margin:0; padding:0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--wce-nav-gap, 14px);
}

.wce-category-nav--horizontal .wce-nav-item {
    position: relative;
}

.wce-category-nav--horizontal .wce-nav-card {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    gap:             8px;
    padding:         8px 16px;
    background:      var(--wce-bg);
    border:          2px solid var(--wce-border);
    border-radius:   var(--wce-radius-full);
    text-decoration: none;
    color:           var(--wce-text);
    font-size:       var(--wce-font-base);
    transition:
        background   var(--wce-transition),
        color        var(--wce-transition),
        border-color var(--wce-transition),
        box-shadow   var(--wce-transition);
    white-space:     nowrap;
    box-shadow:      var(--wce-shadow-card);
}

.wce-category-nav--horizontal .wce-nav-card:hover {
    background:   var(--wce-active-bg);
    color:        var(--wce-primary);
    border-color: var(--wce-primary);
}

.wce-category-nav--horizontal .wce-nav-item--active > .wce-nav-card,
.wce-category-nav--horizontal .wce-nav-card[aria-current="page"] {
    background:  var(--wce-primary);
    border-color:var(--wce-primary);
    color:       #fff;
}

.wce-category-nav--horizontal .wce-nav-item--ancestor > .wce-nav-card {
    border-color: var(--wce-primary);
    color:        var(--wce-primary);
}

/* Toggle in horizontal — appears after the pill text */
.wce-category-nav--horizontal .wce-nav-item__toggle {
    position:     static;
    width:  20px; height: 20px;
    border:       none;
    background:   transparent;
    backdrop-filter: none;
    color:        inherit;
    padding:      0;
    border-radius:var(--wce-radius-sm);
}

.wce-category-nav--horizontal .wce-nav-item--has-children .wce-nav-card {
    padding-top:    8px;  /* reset the extra top padding for horizontal */
    padding-right:  6px;
    border-radius:  var(--wce-radius-full) 0 0 var(--wce-radius-full);
}

/* Horizontal items with children: card + toggle form a capsule */
.wce-category-nav--horizontal .wce-nav-item--has-children {
    display:     flex;
    align-items: stretch;
}

.wce-category-nav--horizontal .wce-nav-item__toggle {
    position:      static;
    width:         32px; height: auto;
    border:        2px solid var(--wce-border);
    border-left:   none;
    border-radius: 0 var(--wce-radius-full) var(--wce-radius-full) 0;
    background:    var(--wce-bg);
    color:         var(--wce-text-muted);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0 8px 0 4px;
    transition:    background var(--wce-transition), border-color var(--wce-transition), color var(--wce-transition);
    box-shadow:    var(--wce-shadow-card);
}

.wce-category-nav--horizontal .wce-nav-item--active > .wce-nav-item__toggle,
.wce-category-nav--horizontal .wce-nav-item--ancestor > .wce-nav-item__toggle {
    background:   var(--wce-primary);
    border-color: var(--wce-primary);
    color:        #fff;
}

.wce-category-nav--horizontal .wce-nav-item__toggle:hover {
    background:   var(--wce-primary);
    border-color: var(--wce-primary);
    color:        #fff;
}

/* Horizontal subnav */
.wce-category-nav--horizontal .wce-subnav {
    top: calc(100% + 6px);
    left: 0;
}

/* =========================================================================
   SLIDER
   ========================================================================= */
.wce-category-nav--slider { position: relative; }
.wce-nav-slider { display: flex; align-items: center; gap: 8px; }
.wce-nav-slider__track { overflow: hidden; flex: 1; }

.wce-nav-slider__track .wce-nav-list {
    display:    flex;
    flex-wrap:  nowrap;
    gap:        var(--wce-nav-gap, 14px);
    transition: transform .3s ease;
}

.wce-nav-slider__track .wce-nav-item { flex-shrink: 0; width: 150px; }

.wce-nav-slider__prev,
.wce-nav-slider__next {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border:       2px solid var(--wce-border);
    border-radius:var(--wce-radius-full);
    background:   var(--wce-bg);
    cursor:       pointer;
    font-size:    20px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   background var(--wce-transition), color var(--wce-transition);
    box-shadow:   var(--wce-shadow-card);
}

.wce-nav-slider__prev:hover,
.wce-nav-slider__next:hover {
    background: var(--wce-primary);
    color:      #fff;
    border-color:var(--wce-primary);
}

/* =========================================================================
   Category Logo (archive header / cards)
   ========================================================================= */
.wce-category-logo            { display: block; max-width: 100%; height: auto; }
.wce-archive-logo             { margin-bottom: 16px; }
.wce-category-logo--card      { width:64px; height:64px; object-fit:contain; border-radius:var(--wce-radius-sm); margin:0 auto 8px; }
.wce-category-logo--archive-header { width:80px; height:80px; object-fit:contain; border-radius:var(--wce-radius-md); box-shadow:var(--wce-shadow-card); }

.wce-category-hero { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; }
.wce-category-hero__logo img { width:100px; height:100px; object-fit:contain; border-radius:var(--wce-radius-md); box-shadow:var(--wce-shadow-card); }
.wce-category-hero__title { margin-top:0; }

/* =========================================================================
   Checklists
   ========================================================================= */
.wce-checklist { background:var(--wce-bg); border:1px solid var(--wce-border); border-radius:var(--wce-radius-md); margin-bottom:16px; overflow:hidden; box-shadow:var(--wce-shadow-card); }
.wce-checklist__header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--wce-border); }
button.wce-checklist__header { width:100%; border:none; cursor:pointer; text-align:left; font-size:inherit; background:var(--wce-bg); transition:background var(--wce-transition); }
button.wce-checklist__header:hover { background:var(--wce-active-bg); }
.wce-checklist__title { font-weight:600; font-size:var(--wce-font-base); }
.wce-checklist__arrow { font-size:10px; color:var(--wce-text-muted); transition:transform var(--wce-transition); }
.wce-checklist--collapsed .wce-checklist__arrow { transform:rotate(-90deg); }
.wce-checklist--collapsed .wce-checklist__body  { display:none; }
.wce-checklist__body { padding:8px 0; }
.wce-checklist--scrollable .wce-checklist__body { max-height:280px; overflow-y:auto; overscroll-behavior:contain; }
.wce-checklist--scrollable .wce-checklist__body::-webkit-scrollbar { width:4px; }
.wce-checklist--scrollable .wce-checklist__body::-webkit-scrollbar-thumb { background:var(--wce-primary); border-radius:var(--wce-radius-full); }
.wce-checklist__list { list-style:none; margin:0; padding:0; }
.wce-checklist__item { border-bottom:1px solid var(--wce-border); }
.wce-checklist__item:last-child { border-bottom:none; }
.wce-checklist__link { display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--wce-text); text-decoration:none; font-size:var(--wce-font-base); transition:background var(--wce-transition), color var(--wce-transition); }
.wce-checklist__link:hover { background:var(--wce-active-bg); color:var(--wce-primary); }
.wce-checklist__item--active .wce-checklist__link { background:var(--wce-active-bg); color:var(--wce-primary); font-weight:600; }
.wce-checklist__checkbox { width:18px; height:18px; flex-shrink:0; border:2px solid var(--wce-border); border-radius:var(--wce-radius-sm); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--wce-primary); transition:border-color var(--wce-transition), background var(--wce-transition); }
.wce-checklist__item--active .wce-checklist__checkbox { background:var(--wce-primary); border-color:var(--wce-primary); color:#fff; }
.wce-checklist__link:hover .wce-checklist__checkbox { border-color:var(--wce-primary); }
.wce-checklist__name  { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wce-checklist__count { font-size:var(--wce-font-sm); color:var(--wce-text-muted); flex-shrink:0; }

/* =========================================================================
   Blocksy specific
   ========================================================================= */
.ct-archive-logo { display:flex; align-items:center; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    .wce-category-nav--grid .wce-nav-grid {
        grid-template-columns: repeat(var(--wce-nav-cols-tablet, 3), 1fr);
    }
}

@media (max-width: 768px) {
    /* On mobile: subnav becomes a static accordion (no absolute) */
    .wce-subnav {
        position:       static !important;
        width:          100%;
        min-width:      unset;
        box-shadow:     none;
        border:         none;
        border-top:     1px solid var(--wce-border);
        border-radius:  0;
        background:     rgba(0,0,0,.025);

        /* Override desktop visibility/opacity approach */
        visibility:     hidden;
        opacity:        0;
        pointer-events: none;
        max-height:     0;
        overflow:       hidden;
        transform:      none !important;
        padding:        0;
        transition:     max-height .25s ease, opacity .2s ease, padding .15s ease;
    }

    .wce-nav-item--open    > .wce-subnav,
    .wce-nav-item--ancestor > .wce-subnav {
        visibility:     visible !important;
        opacity:        1 !important;
        pointer-events: auto !important;
        max-height:     600px;
        padding:        6px 0;
    }

    /* Reset hover-open on mobile */
    .wce-nav-item--has-children:hover > .wce-subnav {
        visibility:     hidden;
        opacity:        0;
        pointer-events: none;
        max-height:     0;
        padding:        0;
    }

    .wce-subnav__link { padding-left: 28px; }

    /* Toggle button back to absolute top-right on mobile */
    .wce-category-nav--horizontal .wce-nav-item__toggle {
        position:     absolute;
        top:          50%; right: 8px;
        transform:    translateY(-50%);
        width:        26px; height: 26px;
        border:       1.5px solid var(--wce-border);
        border-radius:var(--wce-radius-sm);
        background:   rgba(255,255,255,.92);
        box-shadow:   none;
    }
}

@media (max-width: 600px) {
    .wce-category-nav--grid .wce-nav-grid {
        grid-template-columns: repeat(var(--wce-nav-cols-mobile, 2), 1fr);
    }
    .wce-category-hero { flex-direction:column; }
}

/* =========================================================================
   Accessibility
   ========================================================================= */
.wce-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }