/*
 * ACMS SEO Category Product Page Styles
 * Master-Detail UI Layout
 *
 * Prefix: acms-cat- to avoid conflict with WP default category styles
 *
 * Structure:
 * - Hero Section (full width)
 * - 2-Column Layout:
 *   - Sidebar Left (sticky, scrollable product list)
 *   - Main Right (product detail + AI content + FAQ)
 */

/* ========================================
 * CATEGORY HERO
 * ======================================== */

.acms-cat-hero {
    padding: var(--space-10) 0 var(--space-8);
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 70%),
        linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle top accent line */
.acms-cat-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.acms-cat-hero__breadcrumb {
    margin-bottom: var(--space-4);
    text-transform: capitalize;
}

.acms-cat-hero__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    text-transform: capitalize;
}

@media (min-width: 768px) {
    .acms-cat-hero__title {
        font-size: var(--text-4xl);
    }
}

.acms-cat-hero__description {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0 auto var(--space-5);
    line-height: var(--leading-relaxed);
    max-width: 700px;
}

.acms-cat-hero__stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.acms-cat-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.acms-cat-hero__stat i {
    color: var(--color-primary);
    font-size: 16px;
}

/* ========================================
 * MASTER-DETAIL LAYOUT
 * ======================================== */

.acms-cat-content {
    padding: var(--space-6) 0 var(--space-12);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.acms-cat-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 1024px) {
    .acms-cat-layout {
        grid-template-columns: 350px 1fr;
        gap: var(--space-6);
    }
}

@media (min-width: 1200px) {
    .acms-cat-layout {
        grid-template-columns: 380px 1fr;
    }
}

/* ========================================
 * QUICK FILTER BAR (acms-fbar)
 * 4-column grid: Category | Brand | Rating | Price
 * ======================================== */

/* Global: replace square browser outline with rounded focus ring */
.acms-fbar *:focus {
    outline: none;
}
.acms-fbar *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(var(--color-primary-rgb), 0.4);
}

/* Container */
.acms-fbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);

    /* Sticky below header */
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
    z-index: calc(var(--z-sticky) - 10);
    transition: box-shadow var(--duration-200) var(--ease-out), border-radius var(--duration-200);
}

@media (min-width: 768px) {
    .acms-fbar {
        top: 59px;
    }
}

/* 3-Column Grid — 25/25/50 ratio */
.acms-fbar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 8px;
}

/* Each column — relative for dropdown positioning */
.acms-fbar__col {
    position: relative;
    min-width: 0;
}

/* Trigger button */
.acms-fbar__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--duration-150), color var(--duration-150), background var(--duration-150);
    font-family: inherit;
}
.acms-fbar__trigger:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}
.acms-fbar__trigger.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Icon inside trigger */
.acms-fbar__icon {
    font-size: 14px;
    flex-shrink: 0;
}
.acms-fbar__icon--star {
    font-size: 12px;
    color: var(--color-warning);
}
.acms-fbar__trigger.is-active .acms-fbar__icon--star {
    color: var(--color-primary);
}

/* Label text */
.acms-fbar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Chevron */
.acms-fbar__chevron {
    font-size: 10px;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform var(--duration-150);
}
.acms-fbar__chevron.is-open {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.acms-fbar__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    padding: 4px;
}
.acms-fbar__panel--sort {
    left: auto;
    right: 0;
    min-width: 170px;
}

/* Price column — inline slider (no dropdown) */
.acms-fbar__col--price {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 38px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* Min / Max labels at each end */
.acms-fbar__price-bound {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Slider area (track + tooltips) */
.acms-fbar__slider-inline {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    overflow: visible;
}
.acms-fbar__slider-inline .acms-fbar__slider-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: visible;
}
.acms-fbar__slider-inline .acms-fbar__slider-input {
    position: absolute;
    top: -20px; /* Adjusted to center thumb with track (44px height / 2 - track height / 2) */
    left: 0;
    width: 100%;
    height: 44px; /* Increased for better touch target */
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.acms-fbar__slider-inline .acms-fbar__slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; /* Increased from 16px for accessibility */
    height: 20px;
    background: #fff;
    border: 2.5px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
}
.acms-fbar__slider-inline .acms-fbar__slider-input::-moz-range-thumb {
    width: 20px; /* Increased from 16px for accessibility */
    height: 20px;
    background: #fff;
    border: 2.5px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
}

/* Mobile: Larger touch targets for better accessibility */
@media (max-width: 768px) {
    .acms-fbar__slider-inline .acms-fbar__slider-input {
        top: -22px; /* Adjusted for 48px height (48 / 2 - 2) */
        height: 48px;
    }
    .acms-fbar__slider-inline .acms-fbar__slider-input::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    .acms-fbar__slider-inline .acms-fbar__slider-input::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* Slider range highlight */
.acms-fbar__slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Floating tooltip — sits inside .acms-fbar__slider-track */
.acms-fbar__slider-tip {
    position: absolute;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}
.acms-fbar__slider-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-primary);
}

/* Scrollable list */
.acms-fbar__scroll {
    max-height: 260px;
    overflow-y: auto;
}
.acms-fbar__scroll::-webkit-scrollbar { width: 4px; }
.acms-fbar__scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* Checkbox option row */
.acms-fbar__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--color-text);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-150);
}
.acms-fbar__option:hover {
    background: var(--color-surface-hover);
}
.acms-fbar__option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.acms-fbar__option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acms-fbar__option-num {
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.acms-fbar__option-row {
    display: flex;
    align-items: center;
}
.acms-fbar__option-row .acms-fbar__option {
    flex: 1;
    min-width: 0;
}
.acms-fbar__option-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.acms-fbar__option-link:hover {
    color: var(--color-primary);
    background: var(--color-surface-hover);
}

/* Brand navigation link (replaces checkbox option for brands) */
.acms-fbar__brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--color-text);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-150), color var(--duration-150);
}
.acms-fbar__brand-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}
.acms-fbar__brand-link.is-current {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

/* Grid variant: no brand column → 2 columns */
.acms-fbar__grid--no-brand {
    grid-template-columns: 1fr 3fr;
}

/* Search input inside panel */
.acms-fbar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 4px 6px;
    padding: 6px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.acms-fbar__search i {
    font-size: 13px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.acms-fbar__search input {
    flex: 1;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--color-text);
    outline: none;
    box-shadow: none;
    font-family: inherit;
    min-width: 0;
}
.acms-fbar__search input:focus,
.acms-fbar__search input:focus-visible {
    outline: none;
    box-shadow: none;
}
.acms-fbar__search input::placeholder {
    color: var(--color-text-subtle);
}

/* Category tree inside panel */
.acms-fbar__tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.acms-fbar__tree .acms-fbar__tree {
    padding-left: 14px;
    margin-left: 6px;
    border-left: 1px solid var(--color-border-subtle);
}
.acms-fbar__tree-item {
    margin: 0;
}
.acms-fbar__tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 13px;
    color: var(--color-text);
}

/* Expand/collapse arrow button */
.acms-fbar__tree-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: 0;
    font-size: 9px;
    transition: color var(--duration-150), transform var(--duration-150);
}
.acms-fbar__tree-arrow:hover {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}
.acms-fbar__tree-arrow.is-open {
    transform: rotate(90deg);
}

/* Leaf dot */
.acms-fbar__tree-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.acms-fbar__tree-dot::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-border);
}

/* Category link (name + count) */
.acms-fbar__tree-link {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--duration-150) var(--ease-out);
    line-height: 1.3;
}
.acms-fbar__tree-link:hover {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}
.acms-fbar__tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acms-fbar__tree-count {
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Current category highlight */
.acms-fbar__tree-row.is-current > .acms-fbar__tree-link {
    color: var(--color-primary);
    background: var(--color-primary-light);
    font-weight: 600;
}
.acms-fbar__tree-row.is-current > .acms-fbar__tree-arrow {
    color: var(--color-primary);
}

/* Button option (rating, sort) */
.acms-fbar__btn-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-150);
    font-family: inherit;
}
.acms-fbar__btn-option:hover {
    background: var(--color-surface-hover);
}
.acms-fbar__btn-option.is-selected {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.acms-fbar__btn-option i {
    font-size: 12px;
    color: var(--color-text-muted);
}
.acms-fbar__btn-option.is-selected i {
    color: var(--color-primary);
}

/* Stars */
.acms-fbar__stars {
    display: inline-flex;
    gap: 1px;
}
.acms-fbar__stars i {
    font-size: 12px;
    color: var(--color-warning);
}
.acms-fbar__stars .bi-star {
    color: var(--color-border);
}

/* ---- Status Row ---- */
.acms-fbar__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 26px;
}

/* Product count */
.acms-fbar__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.acms-fbar__count i {
    font-size: 14px;
    color: var(--color-primary);
}

/* Divider */
.acms-fbar__divider {
    width: 1px;
    height: 14px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Filter Tags */
.acms-fbar__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.acms-fbar__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 99px;
    white-space: nowrap;
}
.acms-fbar__tag--star .bi-star-fill {
    font-size: 10px;
    color: var(--color-warning);
}
.acms-fbar__tag--price i {
    font-size: 10px;
}
.acms-fbar__tag button {
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--duration-150);
    line-height: 1;
}
.acms-fbar__tag button:hover { opacity: 1; }

/* Clear all */
.acms-fbar__clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-150);
}
.acms-fbar__clear:hover { color: var(--color-error); }

/* Sort */
.acms-fbar__sort {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}
.acms-fbar__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--duration-150), color var(--duration-150);
    font-family: inherit;
}
.acms-fbar__sort-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* ---- Responsive ---- */

/* Tablet: 2×2 grid
   Row 1: Category 50% | Brand 50%
   Row 2: Rating 35%   | Price 65%
   20-col micro-grid */
@media (max-width: 1023px) {
    /* Filter bar: normal flow; JS adds .is-stuck when scrolled past */
    .acms-fbar {
        position: relative;
        padding: 10px;
        gap: 8px;
        border-radius: var(--radius-lg);
    }

    /* JS-triggered fixed position (IntersectionObserver) */
    .acms-fbar.is-stuck {
        position: fixed;
        top: 53px;
        left: 0;
        right: 0;
        border-radius: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        z-index: calc(var(--z-sticky) - 5);
    }
    .acms-fbar__grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .acms-fbar__grid--no-brand {
        grid-template-columns: 1fr;
    }
    /* Row 1: 50% / 50% */
    .acms-fbar__col--cat    { grid-column: 1; }
    .acms-fbar__col--brand  { grid-column: 2; }
    /* Row 2: 100% */
    .acms-fbar__col--price  { grid-column: 1 / -1; }
}

/* Mobile: bigger touch targets, readable text */
@media (max-width: 767px) {
    .acms-fbar {
        padding: 5px;
        gap: 4px;
        border-radius: 0;
    }
    .acms-fbar__grid { gap: 6px; }

    /* Trigger buttons: large touch targets, base/lg font */
    .acms-fbar__trigger {
        height: 48px;
        font-size: var(--text-base);
        padding: 0 14px;
        gap: 8px;
        border-radius: var(--radius-md);
    }
    .acms-fbar__icon { font-size: 18px; }
    .acms-fbar__icon--star { font-size: 16px; }
    .acms-fbar__chevron { font-size: 12px; }

    /* Price column */
    .acms-fbar__col--price {
        height: 48px;
        padding: 0 14px;
        gap: 10px;
        border-radius: var(--radius-md);
    }
    .acms-fbar__price-bound { font-size: var(--text-base); font-weight: 600; }

    /* Tooltip */
    .acms-fbar__slider-tip { font-size: var(--text-sm); padding: 4px 10px; }

    /* Status row */
    .acms-fbar__status { flex-wrap: wrap; gap: 8px; }
    .acms-fbar__count { font-size: var(--text-base); }
    .acms-fbar__tag { font-size: var(--text-sm); padding: 5px 12px; }
    .acms-fbar__clear { font-size: var(--text-sm); }
    .acms-fbar__sort-btn { font-size: var(--text-sm); padding: 8px 14px; }

    /* Dropdown panels — full-width, relative to fbar (not column) */
    .acms-fbar__col {
        position: static;
    }
    .acms-fbar__panel {
        left: 0;
        right: 0;
        max-width: none;
        width: auto;
        max-height: 55vh;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    }
    .acms-fbar__panel--sort {
        left: 0;
        right: 0;
    }
    .acms-fbar__scroll {
        max-height: 48vh;
    }
    .acms-fbar__option { font-size: var(--text-base); padding: 12px 14px; }
    .acms-fbar__brand-link { font-size: var(--text-base); padding: 12px 14px; }
    .acms-fbar__btn-option { font-size: var(--text-base); padding: 12px 14px; }
    .acms-fbar__tree-row { font-size: var(--text-base); }
    .acms-fbar__tree-link { padding: 10px 12px; }
    .acms-fbar__search input { font-size: var(--text-base); }
}

/* Small phones: still readable */
@media (max-width: 400px) {
    .acms-fbar { padding: 8px; gap: 5px; }
    .acms-fbar__grid { gap: 5px; }
    .acms-fbar__trigger { height: 44px; font-size: var(--text-sm); padding: 0 10px; }
    .acms-fbar__col--price { height: 44px; padding: 0 10px; }
    .acms-fbar__price-bound { font-size: var(--text-sm); }
}

/* ========================================
 * SIDEBAR FILTERS (Collapsible)
 * ======================================== */

.acms-cat-filters {
    border-bottom: 1px solid var(--color-border-subtle);
}

.acms-cat-filters__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-150) var(--ease-out);
}

.acms-cat-filters__toggle:hover {
    background-color: var(--color-surface-hover);
}

.acms-cat-filters__toggle i:first-child {
    color: var(--color-primary);
    font-size: 16px;
}

.acms-cat-filters__toggle i:last-child {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}

.acms-cat-filters__content {
    padding: var(--space-4);
    background-color: var(--color-surface);
}

.acms-cat-filters__group {
    margin-bottom: var(--space-4);
}

.acms-cat-filters__group:last-child {
    margin-bottom: 0;
}

.acms-cat-filters__group-title {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.acms-cat-filters__checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
}

.acms-cat-filters__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.acms-cat-filters__checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.acms-cat-filters__checkbox:hover {
    color: var(--color-text);
}

.acms-cat-filters__count {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-left: auto;
}

/* Filter content transitions */
.acms-cat-filters__content.transition-enter {
    transition: all 0.2s ease-out;
}

.acms-cat-filters__content.transition-leave {
    transition: all 0.15s ease-in;
}

/* ========================================
 * CATEGORY TREE NAVIGATION
 * ======================================== */

.acms-cat-tree {
    display: none; /* TODO: re-enable when tree UX is finalized */
    border-bottom: 1px solid var(--color-border-subtle);
}

.acms-cat-tree__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
    background-color: var(--color-bg-alt);
}

.acms-cat-tree__header i {
    color: var(--color-primary);
    font-size: 14px;
}

.acms-cat-tree__nav {
    padding: var(--space-2) var(--space-3);
    max-height: 300px;
    overflow-y: auto;
}

.acms-cat-tree__nav::-webkit-scrollbar {
    width: 4px;
}

.acms-cat-tree__nav::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

.acms-cat-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acms-cat-tree__list .acms-cat-tree__list {
    padding-left: var(--space-3);
    margin-left: 6px;
    border-left: 1px solid var(--color-border-subtle);
}

/* Collapse children by default, expand for .is-expanded */
.acms-cat-tree__item > .acms-cat-tree__list {
    display: none;
}

.acms-cat-tree__item.is-expanded > .acms-cat-tree__list {
    display: block;
}

.acms-cat-tree__item {
    margin: 0;
}

.acms-cat-tree__row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1px;
}

/* Toggle button (expand/collapse arrow) */
.acms-cat-tree__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: 0;
    font-size: 10px;
    text-decoration: none;
    transition: color var(--duration-150), background-color var(--duration-150);
}

.acms-cat-tree__toggle:hover {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}

.acms-cat-tree__spin,
.acms-fbar__spin {
    animation: acms-spin 0.6s linear infinite;
}

@keyframes acms-spin {
    to { transform: rotate(360deg); }
}

.acms-cat-tree__link {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 4px 8px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--duration-150) var(--ease-out);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.acms-cat-tree__link:hover {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
}

.acms-cat-tree__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.acms-cat-tree__dot::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-border);
}

.acms-cat-tree__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acms-cat-tree__count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Current category */
.acms-cat-tree__item.is-current > .acms-cat-tree__row > .acms-cat-tree__link {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    font-weight: var(--font-semibold);
}

.acms-cat-tree__item.is-current > .acms-cat-tree__row > .acms-cat-tree__toggle {
    color: var(--color-primary);
}

/* Ancestor (expanded branch) */
.acms-cat-tree__item.is-ancestor > .acms-cat-tree__row > .acms-cat-tree__link {
    color: var(--color-text);
    font-weight: var(--font-medium);
}

.acms-cat-tree__item.is-ancestor > .acms-cat-tree__row > .acms-cat-tree__toggle {
    color: var(--color-text-secondary);
}

/* ========================================
 * RELATED KEYWORDS (inline tags in main column)
 * ======================================== */

.acms-cat-keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
}

.acms-cat-keywords__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.acms-cat-keywords__label i {
    font-size: 14px;
}

.acms-cat-keywords__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.acms-cat-keywords__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    transition: all var(--duration-150) var(--ease-out);
}

.acms-cat-keywords__tag:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.acms-cat-keywords__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-full);
    line-height: 1;
}

.acms-cat-keywords__tag:hover .acms-cat-keywords__count {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* ========================================
 * SIDEBAR - Product List (Sticky)
 * ======================================== */

.acms-cat-sidebar {
    /* Mobile: normal flow */
}

@media (min-width: 1024px) {
    .acms-cat-sidebar {
        position: sticky;
        top: 131px;
        max-height: calc(100vh - 131px - var(--space-4));
    }
}

.acms-cat-sidebar__inner {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.acms-cat-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    background-color: var(--color-bg-alt);
    flex-shrink: 0;
}

.acms-cat-sidebar__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
    margin: 0;
}

.acms-cat-sidebar__title i {
    color: var(--color-primary);
    font-size: 16px;
}

.acms-cat-sidebar__count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.acms-cat-products {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    max-height: 400px;
}

@media (min-width: 1024px) {
    .acms-cat-products {
        max-height: none;
    }
}

/* Custom scrollbar */
.acms-cat-products::-webkit-scrollbar {
    width: 6px;
}

.acms-cat-products::-webkit-scrollbar-track {
    background: var(--color-bg-alt);
    border-radius: var(--radius-full);
}

.acms-cat-products::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

.acms-cat-products::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong);
}

/* ========================================
 * PRODUCT CARD (Sidebar Item)
 * ======================================== */

.acms-cat-product-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-200) var(--ease-out);
}

.acms-cat-product-card:last-child {
    margin-bottom: 0;
}

.acms-cat-product-card:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border);
}

.acms-cat-product-card--active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
}

.acms-cat-product-card--active:hover {
    background-color: var(--color-primary-light);
}

.acms-cat-product-card__image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.acms-cat-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-1);
}

.acms-cat-product-card__content {
    flex: 1;
    min-width: 0;
}

.acms-cat-product-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acms-cat-product-card--active .acms-cat-product-card__title {
    color: var(--color-primary-dark);
}

.acms-cat-product-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.acms-cat-product-card__price {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: #b91c1c;
}

.acms-cat-product-card__score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    line-height: 1;
    color: var(--color-text-secondary);
}

.acms-cat-product-card__score i {
    display: flex;
    color: var(--color-primary);
    font-size: 12px;
}

.acms-cat-product-card__score span {
    line-height: 1;
    font-weight: var(--font-semibold);
}

.acms-cat-product-card__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-subtle);
    transition: all var(--duration-200) var(--ease-out);
}

.acms-cat-product-card--active .acms-cat-product-card__indicator {
    color: var(--color-primary);
}

.acms-cat-product-card:hover .acms-cat-product-card__indicator {
    transform: translateX(2px);
}

/* Empty State */
.acms-cat-products__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
    color: var(--color-text-muted);
}

.acms-cat-products__empty i {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

/* Load More Button */
.acms-cat-sidebar__load-more {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

.acms-cat-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    gap: var(--space-2);
}

.acms-cat-load-more:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

.acms-cat-load-more:disabled {
    cursor: wait;
    opacity: 0.7;
}

.acms-cat-load-more span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.acms-cat-load-more__count {
    color: var(--color-text-muted);
    font-weight: var(--font-normal);
}

/* ========================================
 * MAIN COLUMN (Detail + Content + FAQ)
 * ======================================== */

.acms-cat-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ========================================
 * DETAIL PANEL
 * ======================================== */

.acms-cat-detail {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 350px;
    scroll-margin-top: 131px;
}

/* Empty State */
.acms-cat-detail__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    text-align: center;
    height: 100%;
    min-height: 350px;
}

.acms-cat-detail__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(244, 165, 138, 0.1) 100%);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-4);
}

.acms-cat-detail__empty-icon i {
    font-size: 32px;
    color: var(--color-primary);
}

.acms-cat-detail__empty h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.acms-cat-detail__empty p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 280px;
}

/* Detail Content */
.acms-cat-detail__content {
    padding: var(--space-5);
}

@media (min-width: 768px) {
    .acms-cat-detail__content {
        padding: var(--space-6);
    }
}

/* Detail Header (Rich Card Layout) */
.acms-cat-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
    .acms-cat-detail__header {
        flex-direction: row;
        gap: var(--space-5);
    }
}

/* Image Wrapper with Ranking Badge */
.acms-cat-detail__image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .acms-cat-detail__image-wrap {
        width: 180px;
        margin: 0;
    }
}

.acms-cat-detail__rank {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.acms-cat-detail__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--color-border-subtle);
}

.acms-cat-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

/* Info Column */
.acms-cat-detail__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Prime Badge (inline with title) */
.acms-cat-detail__badge--prime {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: #1e40af;
    background-color: #dbeafe;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-right: var(--space-1-5);
    white-space: nowrap;
    flex-shrink: 0;
}

.acms-cat-detail__badge--prime i {
    color: #2563eb;
    font-size: 11px;
}

/* Title with Link (2-line clamp) */
.acms-cat-detail__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--leading-snug);
    /* 2-line max: 2 lines × line-height(~1.375) = ~2.75em */
    max-height: 2.75em;
    overflow: hidden;
}

.acms-cat-detail__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-150) var(--ease-out);
}

.acms-cat-detail__title a:hover {
    color: var(--color-primary);
}

.acms-cat-detail__title a i {
    font-size: 14px;
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    vertical-align: middle;
}

@media (min-width: 768px) {
    .acms-cat-detail__title {
        font-size: var(--text-xl);
        max-height: 2.75em;
    }
}

/* Meta Row */
.acms-cat-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    row-gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .acms-cat-detail__meta {
        gap: var(--space-2);
    }
}

/* Meta Items with separator */
.acms-cat-detail__meta-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding-right: var(--space-4);
}

.acms-cat-detail__meta-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: var(--color-border);
}

.acms-cat-detail__meta-item:last-child::after {
    display: none;
}

.acms-cat-detail__meta-item:last-child {
    padding-right: 0;
}

.acms-cat-detail__meta i {
    font-size: 14px;
}

/* Brand with Verified */
.acms-cat-detail__brand {
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.acms-cat-detail__brand i {
    color: #2563eb;
}

.acms-cat-detail__brand--link {
    text-decoration: none;
    transition: color var(--duration-150) var(--ease-out);
    min-height: 35spx;
}

.acms-cat-detail__brand--link:hover {
    color: var(--color-primary);
}

/* Stock Status — darker variants for WCAG AA contrast on white */
.acms-cat-detail__stock.in-stock {
    color: #047857;
}

.acms-cat-detail__stock.out-of-stock {
    color: #B91C1C;
}

/* Score with Tooltip */
.acms-cat-detail__score-wrap {
    font-weight: var(--font-medium);
    cursor: help;
}

.acms-cat-detail__score-wrap i.bi-bar-chart-fill {
    color: var(--color-primary);
}

/* Updated Date with Tooltip */
.acms-cat-detail__updated {
    cursor: help;
}

.acms-cat-detail__score-wrap strong {
    font-weight: var(--font-bold);
    color: var(--color-text);
}

/* Info Icon (tooltip trigger) */
.acms-cat-detail__info-icon {
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    font-size: 14px;
    cursor: help;
    transition: color var(--duration-150) var(--ease-out);
}

/* Hover on parent shows tooltip, highlight icon */
.acms-cat-detail__meta-item:hover .acms-cat-detail__info-icon {
    color: var(--color-primary);
}

/* Tooltip */
.acms-cat-detail__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: max-content;
    max-width: 280px;
    padding: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.acms-cat-detail__tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-border);
}

.acms-cat-detail__tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--color-surface);
}

/* Updated Date */
.acms-cat-detail__updated {
    color: var(--color-text-muted);
}

.acms-cat-detail__updated i.bi-clock {
    color: var(--color-text-subtle);
}

/* Tooltip position variant - right aligned */
.acms-cat-detail__tooltip--right {
    left: auto;
    right: 0;
    transform: none;
}

.acms-cat-detail__tooltip--right::before,
.acms-cat-detail__tooltip--right::after {
    left: auto;
    right: 16px;
    transform: none;
}

/* Rating Inline (in meta row - blends with other items) */
.acms-cat-detail__rating-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.acms-cat-detail__rating-inline .acms-cat-detail__stars {
    display: flex;
    gap: 1px;
}

.acms-cat-detail__rating-inline .acms-cat-detail__stars i {
    font-size: 14px;
    color: #fbbf24;
}

.acms-cat-detail__rating-inline .acms-cat-detail__stars i.bi-star {
    color: var(--color-border);
}

.acms-cat-detail__rating-inline .acms-cat-detail__rating-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.acms-cat-detail__rating-inline .acms-cat-detail__rating-text span:first-child {
    font-weight: var(--font-bold);
    color: var(--color-text);
}

/* Info + CTA Grid — 2-column layout (70/30) */
.acms-cat-detail__info-grid {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: var(--space-3);
    margin-top: auto;
    align-items: start;
}

.acms-cat-detail__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.acms-cat-detail__cta-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acms-cat-detail__price-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.acms-cat-detail__price {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: #b91c1c;
}

@media (min-width: 768px) {
    .acms-cat-detail__price {
        font-size: var(--text-3xl);
    }
}

.acms-cat-detail__price-original {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.acms-cat-detail__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 10px 12px;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-out);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    white-space: nowrap;
    width: 100%;
}

.acms-cat-detail__cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.acms-cat-detail__cta i {
    font-size: 14px;
}

/* Alternate CTA (affiliate links) */
.acms-cat-detail__cta-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 8px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
}

.acms-cat-detail__cta-alt:hover {
    color: #fff;
    background: var(--color-primary);
}

.acms-cat-detail__cta-alt i {
    font-size: 13px;
}

.acms-cat-detail__cta-price {
    font-size: 11px;
    font-weight: var(--font-bold);
    color: #b91c1c;
    margin-left: 2px;
}

.acms-cat-detail__cta-alt:hover .acms-cat-detail__cta-price {
    color: #fca5a5;
}

/* Detail Sections */
.acms-cat-detail__section {
    margin-bottom: var(--space-5);
}

.acms-cat-detail__section:last-child {
    margin-bottom: 0;
}

.acms-cat-detail__section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.acms-cat-detail__section-title i {
    color: var(--color-primary);
    font-size: 18px;
}

/* Features List */
.acms-cat-detail__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.acms-cat-detail__features li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.acms-cat-detail__features li::before {
    content: '\F26E'; /* Bootstrap icon check */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-success);
    font-size: 14px;
}

/* Description */
.acms-cat-detail__description {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* Quick Summary (AI Short Review) */
.acms-cat-detail__summary {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    padding: var(--space-3);
    /* background-color: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary); */
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Pros & Cons */
.acms-cat-detail__pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .acms-cat-detail__pros-cons {
        grid-template-columns: 1fr 1fr;
    }
}

.acms-cat-detail__pros,
.acms-cat-detail__cons {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
}

.acms-cat-detail__pros {
    background-color: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.acms-cat-detail__cons {
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.acms-cat-detail__pros-title,
.acms-cat-detail__cons-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-2);
}

.acms-cat-detail__pros-title {
    color: var(--color-success);
}

.acms-cat-detail__cons-title {
    color: var(--color-error);
}

.acms-cat-detail__pros-title i {
    color: var(--color-success);
}

.acms-cat-detail__cons-title i {
    color: var(--color-error);
}

.acms-cat-detail__pros-list,
.acms-cat-detail__cons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.acms-cat-detail__pros-list li,
.acms-cat-detail__cons-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.acms-cat-detail__pros-list li::before {
    content: '\F26E'; /* check icon */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-success);
    font-size: 12px;
}

.acms-cat-detail__cons-list li::before {
    content: '\F62A'; /* x icon */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-error);
    font-size: 12px;
}

/* ========================================
 * AI CONTENT SECTION (Inside Main Column)
 * Collapsible with Read More functionality
 * ======================================== */

.acms-cat-ai-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .acms-cat-ai-content {
        padding: var(--space-8);
    }
}

/* Wrapper for collapse functionality */
.acms-cat-ai-content__wrapper {
    position: relative;
    max-height: 320px;
    overflow: hidden;
    transition: max-height var(--duration-300) var(--ease-out);
}

/* Expanded state */
.acms-cat-ai-content__wrapper.is-expanded {
    max-height: none;
}

/* Gradient fade overlay */
.acms-cat-ai-content__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--color-surface) 70%,
        var(--color-surface) 100%
    );
    pointer-events: none;
}

/* Read More / Show Less button */
.acms-cat-ai-content__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-out);
}

.acms-cat-ai-content__toggle:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.acms-cat-ai-content__toggle i {
    font-size: 14px;
    transition: transform var(--duration-200) var(--ease-out);
}

.acms-cat-ai-content__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.acms-cat-ai-content__body h2,
.acms-cat-ai-content__body h3,
.acms-cat-ai-content__body h4 {
    color: var(--color-text);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.acms-cat-ai-content__body h2:first-child,
.acms-cat-ai-content__body h3:first-child {
    margin-top: 0;
}

.acms-cat-ai-content__body p {
    margin-bottom: var(--space-4);
}

.acms-cat-ai-content__body ul,
.acms-cat-ai-content__body ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.acms-cat-ai-content__body li {
    margin-bottom: var(--space-2);
}

.acms-cat-ai-content__body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-150) var(--ease-out);
}

.acms-cat-ai-content__body a:hover {
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration-thickness: 2px;
}

/* ========================================
 * MOBILE DETAIL MODAL
 * Wrapper for modal-header + product detail + reviews.
 * Transparent on desktop; fullscreen overlay on <1024px.
 * ======================================== */

/* Desktop: invisible wrapper, no layout impact */
.acms-cat-detail-modal {
    display: contents;
}

/* Modal header: hidden on desktop */
.acms-cat-modal-header {
    display: none;
}

/* ========================================
 * UTILITY: Cloak for Alpine.js
 * ======================================== */

[x-cloak] {
    display: none !important;
}

/* ========================================
 * RESPONSIVE ADJUSTMENTS
 * ======================================== */

/* ---- Tablet & Mobile: < 1024px ---- */
@media (max-width: 1023px) {
    /* Layout: single column, tighter gap */
    .acms-cat-layout {
        gap: var(--space-4);
    }

    /* Sidebar: normal flow, not sticky — primary content on mobile */
    .acms-cat-sidebar__inner {
        max-height: none;
    }

    /* Products list: full height (primary content, no cap) */
    .acms-cat-products {
        max-height: none;
    }

    /* Category tree: compact */
    .acms-cat-tree {
        border-top: 1px solid var(--color-border-subtle);
    }

    .acms-cat-tree__nav {
        max-height: 200px;
        overflow-y: auto;
    }

    /* ---- FULLSCREEN MODAL: .acms-cat-detail-modal ---- */
    /* Wraps modal-header + .acms-cat-detail (product detail + reviews) */
    /* Hidden off-screen by default, slides up when .is-open */
    .acms-cat-detail-modal {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: var(--color-bg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                    visibility 0.3s;
    }

    .acms-cat-detail-modal.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    /* Modal header: sticky bar with back button + product title */
    .acms-cat-modal-header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        position: sticky;
        top: 0;
        z-index: 10;
        padding: var(--space-3) var(--space-4);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .acms-cat-modal-header__back {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1-5) var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-primary);
        background: var(--color-primary-light);
        border: none;
        border-radius: var(--radius-full);
        cursor: pointer;
        white-space: nowrap;
    }

    .acms-cat-modal-header__back:active {
        opacity: 0.8;
    }

    .acms-cat-modal-header__title {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    /* Hide empty state on mobile (no product pre-selected, modal not visible) */
    .acms-cat-detail__empty {
        display: none;
    }

    /* Detail panel: no min-height needed in modal context */
    .acms-cat-detail {
        min-height: auto;
        border-radius: 0;
    }

    /* Meta: hide separators, use gap-based layout */
    .acms-cat-detail__meta-item::after {
        display: none;
    }
    .acms-cat-detail__meta-item {
        padding-right: 0;
    }

    /* Tooltip: constrain to viewport */
    .acms-cat-detail__tooltip {
        max-width: calc(100vw - 48px);
    }
}

/* ---- Mobile: < 768px ---- */
@media (max-width: 767px) {
    /* Hero: reduce vertical padding */
    .acms-cat-hero {
        padding: var(--space-6) 0 var(--space-5);
    }

    .acms-cat-hero__title {
        font-size: var(--text-2xl);
    }

    .acms-cat-hero__description {
        font-size: var(--text-sm);
        margin-bottom: var(--space-3);
    }

    .acms-cat-hero__stats {
        gap: var(--space-3);
    }

    .acms-cat-hero__stat {
        font-size: var(--text-sm);
    }

    /* Content section: less padding */
    .acms-cat-content {
        padding: var(--space-4) 0 var(--space-8);
    }

    /* Layout: tighter gap */
    .acms-cat-layout {
        gap: var(--space-3);
    }

    /* Sidebar: more compact */
    .acms-cat-sidebar__header {
        padding: var(--space-3);
    }

    .acms-cat-sidebar__title {
        font-size: var(--text-xs);
    }

    .acms-cat-products {
        padding: var(--space-1-5);
    }

    /* Product cards: primary content on mobile — roomy, prominent */
    .acms-cat-product-card {
        padding: var(--space-3);
        gap: var(--space-3);
        margin-bottom: var(--space-2);
    }

    .acms-cat-product-card__image {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-lg);
    }

    .acms-cat-product-card__title {
        font-size: var(--text-sm);
        -webkit-line-clamp: 2;
        margin-bottom: var(--space-1);
    }

    .acms-cat-product-card__price {
        font-size: var(--text-base);
    }

    .acms-cat-product-card__score {
        font-size: var(--text-xs);
    }

    .acms-cat-product-card__score i {
        font-size: 12px;
    }

    .acms-cat-product-card__indicator {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    /* Category tree: primary content on mobile — large touch targets */
    .acms-cat-tree__header {
        padding: var(--space-4);
        font-size: var(--text-base);
    }

    .acms-cat-tree__header i {
        font-size: 18px;
    }

    .acms-cat-tree__nav {
        max-height: 320px;
        padding: var(--space-3);
    }

    .acms-cat-tree__link {
        padding: 8px 10px;
        font-size: var(--text-base);
        line-height: 1.4;
    }

    .acms-cat-tree__toggle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .acms-cat-tree__dot {
        width: 28px;
        height: 28px;
    }

    .acms-cat-tree__dot::before {
        width: 5px;
        height: 5px;
    }

    .acms-cat-tree__count {
        font-size: var(--text-sm);
    }

    /* Detail content: less padding */
    .acms-cat-detail__content {
        padding: var(--space-4);
    }

    /* Detail header: stack vertically */
    .acms-cat-detail__header {
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
    }

    /* Image: smaller on mobile */
    .acms-cat-detail__image-wrap {
        max-width: 400px;
    }
    .acms-cat-detail__price-wrap{
        align-items: center;
    }

    .acms-cat-detail__rank {
        width: 30px;
        height: 30px;
        font-size: var(--text-sm);
        top: -6px;
        left: -6px;
    }

    /* Title */
    .acms-cat-detail__title {
        font-size: var(--text-base);
    }

    .acms-cat-detail__title a i {
        font-size: 12px;
    }

    /* Meta: compact wrapping */
    .acms-cat-detail__meta {
        font-size: var(--text-xs);
        gap: var(--space-2);
        row-gap: var(--space-1-5);
    }

    .acms-cat-detail__meta i {
        font-size: 12px;
    }

    .acms-cat-detail__info-icon {
        display: none;
    }

    /* Rating inline: smaller stars */
    .acms-cat-detail__rating-inline .acms-cat-detail__stars i {
        font-size: 12px;
    }

    .acms-cat-detail__rating-inline .acms-cat-detail__rating-text {
        font-size: var(--text-xs);
    }

    .acms-cat-detail__price {
        font-size: var(--text-xl);
    }

    .acms-cat-detail__info-grid {
        grid-template-columns: 1fr;
    }

    .acms-cat-detail__cta-col {
        flex-direction: column;
    }

    .acms-cat-detail__cta,
    .acms-cat-detail__cta-alt {
        width: 100%;
    }

    /* Sections: compact */
    .acms-cat-detail__section {
        margin-bottom: var(--space-4);
    }

    .acms-cat-detail__section-title {
        font-size: var(--text-sm);
        margin-bottom: var(--space-2);
    }

    .acms-cat-detail__section-title i {
        font-size: 16px;
    }

    /* Features, description, summary: smaller text */
    .acms-cat-detail__features li,
    .acms-cat-detail__description,
    .acms-cat-detail__summary {
        font-size: var(--text-sm);
    }

    .acms-cat-detail__features li {
        padding-left: var(--space-5);
    }

    .acms-cat-detail__summary {
        padding: var(--space-2);
    }

    /* Pros/Cons: smaller text */
    .acms-cat-detail__pros,
    .acms-cat-detail__cons {
        padding: var(--space-2);
    }

    .acms-cat-detail__pros-title,
    .acms-cat-detail__cons-title {
        font-size: var(--text-sm);
    }

    .acms-cat-detail__pros-list li,
    .acms-cat-detail__cons-list li {
        font-size: var(--text-sm);
        padding-left: var(--space-4);
    }

    /* Keywords: compact */
    .acms-cat-keywords {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
    }

    .acms-cat-keywords__label {
        font-size: var(--text-xs);
    }

    .acms-cat-keywords__tag {
        font-size: var(--text-xs);
        padding: 2px var(--space-2);
    }

    /* AI Content: less padding */
    .acms-cat-ai-content {
        padding: var(--space-4);
    }

    .acms-cat-ai-content__body {
        font-size: var(--text-sm);
    }

    .acms-cat-ai-content__wrapper {
        max-height: 240px;
    }

    /* Reviews: compact */
    .acms-cat-reviews {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
    }

    .acms-cat-reviews__stats {
        gap: var(--space-4);
        padding: var(--space-3);
    }

    .acms-cat-reviews__avg-value {
        font-size: var(--text-3xl);
    }

    .acms-cat-reviews__form {
        padding: var(--space-3);
    }

    .acms-cat-reviews__item {
        padding: var(--space-3);
    }
}

/* ---- Small phones: < 400px ---- */
@media (max-width: 400px) {
    .acms-cat-hero {
        padding: var(--space-5) 0 var(--space-4);
    }

    .acms-cat-hero__title {
        font-size: var(--text-xl);
    }

    .acms-cat-hero__breadcrumb {
        margin-bottom: var(--space-2);
    }

    .acms-cat-content {
        padding: var(--space-3) 0 var(--space-6);
    }

    .acms-cat-product-card__image {
        width: 56px;
        height: 56px;
    }

    .acms-cat-detail__content {
        padding: var(--space-3);
    }

    .acms-cat-detail__image-wrap {
        max-width: 400px;
    }

    .acms-cat-detail__cta {
        padding: var(--space-2-5) var(--space-3);
    }
}

/* ---- Mobile modal detail: ≤ 500px ---- */
/* Full-width image, no letterbox bars, centered text */
@media (max-width: 500px) {
    /* Image wrap: full width, no max-width cap */
    .acms-cat-detail-modal .acms-cat-detail__image-wrap {
        max-width: 100%;
        margin: 0;
    }

    /* Image container: natural height, no square ratio, no border/bg */
    .acms-cat-detail-modal .acms-cat-detail__image {
        aspect-ratio: auto;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

    /* Image: natural height with max for portrait, edge-to-edge */
    .acms-cat-detail-modal .acms-cat-detail__image img {
        height: auto;
        max-height: 360px;
        object-fit: contain;
    }

    /* Rank badge: reposition for full-width image */
    .acms-cat-detail-modal .acms-cat-detail__rank {
        top: var(--space-2);
        left: var(--space-2);
    }

    /* Center info column: title, meta, price */
    .acms-cat-detail-modal .acms-cat-detail__info {
        text-align: center;
        align-items: center;
    }

    /* Center meta row */
    .acms-cat-detail-modal .acms-cat-detail__meta {
        justify-content: center;
    }

    /* Center rating inline */
    .acms-cat-detail-modal .acms-cat-detail__rating-inline {
        justify-content: center;
    }

    .acms-cat-detail-modal .acms-cat-detail__price-wrap {
        justify-content: center;
    }

    .acms-cat-detail-modal .acms-cat-detail__info-icon {
        display: inline;
    }

    /* Tooltip: break out of small parent, span full meta row */
    .acms-cat-detail-modal .acms-cat-detail__score-wrap,
    .acms-cat-detail-modal .acms-cat-detail__updated {
        position: static;
    }

    .acms-cat-detail-modal .acms-cat-detail__meta {
        position: relative;
    }

    .acms-cat-detail-modal .acms-cat-detail__tooltip,
    .acms-cat-detail-modal .acms-cat-detail__tooltip.acms-cat-detail__tooltip--right {
        left: 0;
        right: 0;
        transform: none;
        max-width: none;
        width: auto;
    }

    .acms-cat-detail-modal .acms-cat-detail__tooltip::before,
    .acms-cat-detail-modal .acms-cat-detail__tooltip::after {
        display: none;
    }

    /* ---- Text size bump: +1 level inside modal ---- */
    /* <768px shrinks for sidebar; modal is fullscreen so restore readability */

    /* Title: text-base(16) → text-lg(18) */
    .acms-cat-detail-modal .acms-cat-detail__title {
        font-size: var(--text-lg);
    }

    /* Meta: text-xs(12) → text-sm(14) */
    .acms-cat-detail-modal .acms-cat-detail__meta {
        font-size: var(--text-sm);
    }

    .acms-cat-detail-modal .acms-cat-detail__meta i {
        font-size: 14px;
    }

    /* Rating stars: 12px → 14px */
    .acms-cat-detail-modal .acms-cat-detail__rating-inline .acms-cat-detail__stars i {
        font-size: 14px;
    }

    /* Rating text: text-xs(12) → text-sm(14) */
    .acms-cat-detail-modal .acms-cat-detail__rating-inline .acms-cat-detail__rating-text {
        font-size: var(--text-sm);
    }

    /* Price: text-xl(20) → text-2xl(24) */
    .acms-cat-detail-modal .acms-cat-detail__price {
        font-size: var(--text-2xl);
    }

    /* CTA button: text-sm(14) → text-base(16) */
    .acms-cat-detail-modal .acms-cat-detail__cta {
        font-size: var(--text-base);
    }

    /* Section titles: text-sm(14) → text-base(16) */
    .acms-cat-detail-modal .acms-cat-detail__section-title {
        font-size: var(--text-base);
    }

    .acms-cat-detail-modal .acms-cat-detail__section-title i {
        font-size: 18px;
    }

    /* Features, description, summary: text-sm(14) → text-base(16) */
    .acms-cat-detail-modal .acms-cat-detail__features li,
    .acms-cat-detail-modal .acms-cat-detail__description,
    .acms-cat-detail-modal .acms-cat-detail__summary {
        font-size: var(--text-base);
    }

    /* Pros/Cons titles: text-sm(14) → text-base(16) */
    .acms-cat-detail-modal .acms-cat-detail__pros-title,
    .acms-cat-detail-modal .acms-cat-detail__cons-title {
        font-size: var(--text-base);
    }

    /* Pros/Cons list: text-sm(14) → text-base(16) */
    .acms-cat-detail-modal .acms-cat-detail__pros-list li,
    .acms-cat-detail-modal .acms-cat-detail__cons-list li {
        font-size: var(--text-base);
    }

    /* Modal header: bump for consistency */
    .acms-cat-modal-header__back {
        font-size: var(--text-base);
    }

    .acms-cat-modal-header__title {
        font-size: var(--text-base);
    }
}

/* ========================================
 * USER REVIEWS SECTION
 * ======================================== */

.acms-cat-reviews {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
}

.acms-cat-reviews__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.acms-cat-reviews__count {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}

.acms-cat-reviews__write-btn {
    flex-shrink: 0;
}

/* Review Stats */
.acms-cat-reviews__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-4);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.acms-cat-reviews__avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 100px;
}

.acms-cat-reviews__avg-value {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    line-height: 1;
}

.acms-cat-reviews__avg-stars {
    display: flex;
    gap: 2px;
}

.acms-cat-reviews__avg-stars i {
    font-size: 16px;
    color: #fbbf24;
}

.acms-cat-reviews__avg-stars i.bi-star {
    color: var(--color-border);
}

.acms-cat-reviews__avg-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.acms-cat-reviews__distribution {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    min-width: 200px;
}

.acms-cat-reviews__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.acms-cat-reviews__bar-label {
    width: 28px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: right;
}

.acms-cat-reviews__bar-track {
    flex: 1;
    height: 8px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.acms-cat-reviews__bar-fill {
    height: 100%;
    background-color: #fbbf24;
    border-radius: var(--radius-full);
    transition: width var(--duration-300) var(--ease-out);
}

.acms-cat-reviews__bar-count {
    width: 24px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Review Form */
.acms-cat-reviews__form {
    padding: var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

/* Logged in user info */
.acms-cat-reviews__user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.acms-cat-reviews__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
}

.acms-cat-reviews__user-name {
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.acms-cat-reviews__logout {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.acms-cat-reviews__logout:hover {
    color: var(--color-primary);
}

.acms-cat-reviews__form-group {
    margin-bottom: var(--space-4);
}

.acms-cat-reviews__form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.acms-cat-reviews__form-group input[type="text"],
.acms-cat-reviews__form-group input[type="email"],
.acms-cat-reviews__form-group textarea {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-150) var(--ease-out);
}

.acms-cat-reviews__form-group input:focus,
.acms-cat-reviews__form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.acms-cat-reviews__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .acms-cat-reviews__form-row {
        grid-template-columns: 1fr;
    }
}

/* Rating Input */
.acms-cat-reviews__rating-input {
    display: flex;
    gap: var(--space-1);
}

.acms-cat-reviews__star-btn {
    padding: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    transition: transform var(--duration-150) var(--ease-out);
}

.acms-cat-reviews__star-btn:hover {
    transform: scale(1.2);
}

.acms-cat-reviews__star-btn i {
    font-size: 24px;
    color: var(--color-border);
    transition: color var(--duration-150) var(--ease-out);
}

.acms-cat-reviews__star-btn.active i,
.acms-cat-reviews__star-btn:hover i {
    color: #fbbf24;
}

/* Tags Input (Pros/Cons) */
.acms-cat-reviews__tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 44px;
}

.acms-cat-reviews__tag-input input {
    flex: 1;
    min-width: 120px;
    padding: var(--space-1) var(--space-2);
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.acms-cat-reviews__tag-input input:focus {
    outline: none;
}

.acms-cat-reviews__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.acms-cat-reviews__tag--pro {
    background-color: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.acms-cat-reviews__tag--con {
    background-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.acms-cat-reviews__tag button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.acms-cat-reviews__tag button:hover {
    opacity: 1;
}

/* Form Actions */
.acms-cat-reviews__form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.acms-cat-reviews__form-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.acms-cat-reviews__form-message {
    margin-top: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.acms-cat-reviews__form-message.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.acms-cat-reviews__form-message.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Reviews List */
.acms-cat-reviews__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.acms-cat-reviews__item {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.acms-cat-reviews__item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.acms-cat-reviews__item-author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.acms-cat-reviews__item-name {
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.acms-cat-reviews__item-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: #2563eb;
}

.acms-cat-reviews__item-rating {
    display: flex;
    gap: 2px;
}

.acms-cat-reviews__item-rating i {
    font-size: 14px;
    color: #fbbf24;
}

.acms-cat-reviews__item-rating i.bi-star {
    color: var(--color-border);
}

.acms-cat-reviews__item-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.acms-cat-reviews__item-content {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

.acms-cat-reviews__item-pros-cons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
}

.acms-cat-reviews__item-pros {
    color: #16a34a;
}

.acms-cat-reviews__item-cons {
    color: #dc2626;
}

.acms-cat-reviews__item-pros strong,
.acms-cat-reviews__item-cons strong {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-1);
}

.acms-cat-reviews__item-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.acms-cat-reviews__item-date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.acms-cat-reviews__item-helpful {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.acms-cat-reviews__item-helpful button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-out);
}

.acms-cat-reviews__item-helpful button:hover:not(:disabled) {
    background-color: var(--color-bg-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.acms-cat-reviews__item-helpful button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty & Loading States */
.acms-cat-reviews__empty,
.acms-cat-reviews__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

.acms-cat-reviews__empty i,
.acms-cat-reviews__loading i {
    font-size: 48px;
    opacity: 0.5;
}

/* Load More Button */
.acms-cat-reviews__load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-out);
}

.acms-cat-reviews__load-more:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-bg);
}

/* Spin animation */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
 * DARK MODE
 * ======================================== */

[data-theme="dark"] .acms-cat-product-card--active {
    background-color: rgba(20, 184, 166, 0.15);
}

[data-theme="dark"] .acms-cat-product-card--active .acms-cat-product-card__title {
    color: var(--color-primary);
}

[data-theme="dark"] .acms-cat-reviews__form,
[data-theme="dark"] .acms-cat-reviews__stats {
    background-color: var(--color-surface);
}

[data-theme="dark"] .acms-cat-reviews__tag-input {
    background-color: var(--color-bg);
}

/* ---- Filter Bar (acms-fbar) Dark Mode ---- */

/* Focus ring for dark mode */
[data-theme="dark"] .acms-fbar *:focus-visible {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(20, 184, 166, 0.5);
}

/* Slider thumb — white circle needs dark bg */
[data-theme="dark"] .acms-fbar__slider-inline .acms-fbar__slider-input::-webkit-slider-thumb {
    background: #2A2E38;
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
[data-theme="dark"] .acms-fbar__slider-inline .acms-fbar__slider-input::-moz-range-thumb {
    background: #2A2E38;
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* Checkbox accent in dark mode */
[data-theme="dark"] .acms-fbar__option input[type="checkbox"] {
    accent-color: var(--color-primary);
}

/* Panel shadow */
[data-theme="dark"] .acms-fbar__panel {
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
    border-color: var(--color-border-strong);
}

/* Search input placeholder */
[data-theme="dark"] .acms-fbar__search input::placeholder {
    color: var(--color-text-subtle);
}

/* ========================================
 * REVIEWS RESPONSIVE OVERRIDES
 * Must come AFTER base review styles (line 2431+)
 * to properly override via CSS cascade
 * ======================================== */

@media (max-width: 767px) {
    .acms-cat-reviews {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
    }

    .acms-cat-reviews__stats {
        gap: var(--space-4);
        padding: var(--space-3);
    }

    .acms-cat-reviews__avg-value {
        font-size: var(--text-3xl);
    }

    .acms-cat-reviews__form {
        padding: var(--space-3);
    }

    .acms-cat-reviews__item {
        padding: var(--space-3);
    }
}

/* ========================================
 * SSR PRODUCT DETAILS (hidden, SEO-only)
 * ======================================== */

.acms-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;
}