/*
 * AI Search for WooCommerce — Front-end Styles
 *
 * Covers:
 *  1. CSS custom properties (theming)
 *  2. Search bar / pill input
 *  3. AJAX suggest dropdown
 *  4. Search Results page layout & product grid
 *  5. Pagination
 *  6. Zero-results / empty states
 *  7. Responsive breakpoints
 *  8. Accessibility & reduced-motion overrides
 *
 * Colour theming is driven by --aiswoo-primary which is:
 *  a) set inline by the Elementor widget control, or
 *  b) inherited from the Elementor global --e-global-color-primary, or
 *  c) falls back to #2e7d32 (site green).
 */

/* ─── 1. Custom Properties ──────────────────────────────────────────────── */
:root {
    --aiswoo-primary:       var(--e-global-color-primary, #2e7d32);
    --aiswoo-primary-dark:  color-mix(in srgb, var(--aiswoo-primary) 80%, #000 20%);
    --aiswoo-primary-light: color-mix(in srgb, var(--aiswoo-primary) 15%, #fff 85%);
    --aiswoo-text:          #1a1a1a;
    --aiswoo-text-muted:    #646970;
    --aiswoo-border:        #e0e0e0;
    --aiswoo-radius-pill:   999px;
    --aiswoo-radius-card:   10px;
    --aiswoo-shadow-sm:     0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --aiswoo-shadow-md:     0 4px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    --aiswoo-transition:    150ms ease;
    --aiswoo-input-width:   320px;
    --aiswoo-dropdown-max:  480px;
}

/* Minimal reset so styles don't leak or get broken by theme resets */
.aiswoo-search-wrap *,
.aiswoo-dropdown *,
.aiswoo-results-page * {
    box-sizing: border-box;
}

/* ─── 2. Search Bar ────────────────────────────────────────────────────── */
.aiswoo-search-wrap {
    position:   relative;
    display:    inline-flex;
    flex-direction: column;
    width:      var(--aiswoo-input-width);
    min-width:  160px; /* guard against slider accidentally set to 0 */
    max-width:  100%;
    font-family: inherit;
}

.aiswoo-search-form {
    display:        flex;
    align-items:    center;
    background:     #fff;
    border:         1.5px solid transparent;
    border-radius:  var(--aiswoo-radius-pill);
    box-shadow:     var(--aiswoo-shadow-sm);
    transition:     border-color var(--aiswoo-transition),
                    box-shadow var(--aiswoo-transition);
    overflow:       hidden;
    width:          100%;
}

.aiswoo-search-form:focus-within {
    border-color: var(--aiswoo-primary);
    box-shadow:   var(--aiswoo-shadow-md), 0 0 0 3px var(--aiswoo-primary-light);
    outline:      none;
}

.aiswoo-search-input {
    flex:           1;
    min-width:      0;
    border:         none;
    outline:        none;
    background:     transparent;
    padding:        10px 4px 10px 18px;
    font-size:      15px;
    line-height:    1.4;
    color:          var(--aiswoo-text);
    appearance:     none;
    -webkit-appearance: none;
}

/* Remove native search cancel × button */
.aiswoo-search-input::-webkit-search-cancel-button,
.aiswoo-search-input::-webkit-search-decoration {
    display: none;
}

.aiswoo-search-input::placeholder {
    color: var(--aiswoo-text-muted);
}

.aiswoo-search-icon-btn {
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        42px;
    height:       42px;
    border:       none;
    background:   transparent;
    color:        var(--aiswoo-primary);
    cursor:       pointer;
    transition:   color var(--aiswoo-transition),
                  background var(--aiswoo-transition);
    border-radius: var(--aiswoo-radius-pill);
    padding:      0;
    margin:       2px;
}

.aiswoo-search-icon-btn:hover,
.aiswoo-search-icon-btn:focus-visible {
    background: var(--aiswoo-primary-light);
    color:      var(--aiswoo-primary-dark);
    outline:    none;
}

/* Icon-left variant */
.aiswoo-icon-left .aiswoo-search-input {
    padding-left: 4px;
    padding-right: 18px;
}

/* ─── 3. AJAX Suggest Dropdown ─────────────────────────────────────────── */
.aiswoo-dropdown {
    position:     absolute;
    top:          calc(100% + 6px);
    left:         0;
    right:        0;
    background:   #fff;
    border:       1px solid var(--aiswoo-border);
    border-radius: var(--aiswoo-radius-card);
    box-shadow:   var(--aiswoo-shadow-md);
    overflow:     hidden;
    z-index:      999999;
    min-width:    min(var(--aiswoo-dropdown-max), 100vw - 32px);
    max-height:   80vh;
    overflow-y:   auto;
    animation:    aiswoo-fade-in 120ms ease;
}

.aiswoo-dropdown[hidden] {
    display: none;
}

@keyframes aiswoo-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Loading state */
.aiswoo-dropdown-loading {
    padding:    16px 18px;
    color:      var(--aiswoo-text-muted);
    font-size:  14px;
    text-align: center;
}

/* No results state */
.aiswoo-dropdown-empty {
    padding:    16px 18px;
    color:      var(--aiswoo-text-muted);
    font-size:  14px;
    text-align: center;
}

/* ── Suggest Item Row ─────────────────────────────────────────────────── */
.aiswoo-suggest-list {
    list-style:  none;
    margin:      0;
    padding:     6px 0;
}

.aiswoo-suggest-item {
    margin: 0;
    padding: 0;
}

.aiswoo-suggest-item a {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         8px 14px;
    text-decoration: none;
    color:           var(--aiswoo-text);
    transition:      background var(--aiswoo-transition);
    cursor:          pointer;
}

.aiswoo-suggest-item a:hover,
.aiswoo-suggest-item a:focus-visible,
.aiswoo-suggest-item.is-active a {
    background: var(--aiswoo-primary-light);
    outline:    none;
}

.aiswoo-suggest-thumb {
    flex-shrink: 0;
    width:       48px;
    height:      48px;
    object-fit:  cover;
    border-radius: 5px;
    background:  var(--aiswoo-border);
    display:     block;
}

.aiswoo-suggest-body {
    flex: 1;
    min-width: 0;
}

.aiswoo-suggest-title {
    display:       block;
    font-size:     14px;
    font-weight:   600;
    color:         var(--aiswoo-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.3;
}

.aiswoo-suggest-price {
    display:    block;
    font-size:  13px;
    color:      var(--aiswoo-text-muted);
    margin-top: 2px;
}

.aiswoo-suggest-unit {
    color:       var(--aiswoo-text-muted);
    font-weight: 400;
    font-size:   12px;
}

.aiswoo-suggest-badge {
    flex-shrink:   0;
    font-size:     11px;
    color:         #888;
    white-space:   nowrap;
}

/* ── "View All" footer link ───────────────────────────────────────────── */
.aiswoo-suggest-footer {
    border-top:  1px solid var(--aiswoo-border);
    padding:     0;
}

.aiswoo-suggest-footer a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         11px 14px;
    text-decoration: none;
    font-size:       13px;
    font-weight:     600;
    color:           var(--aiswoo-primary);
    transition:      background var(--aiswoo-transition);
}

.aiswoo-suggest-footer a:hover,
.aiswoo-suggest-footer a:focus-visible {
    background: var(--aiswoo-primary-light);
    outline:    none;
}

.aiswoo-suggest-footer a::after {
    content: '→';
}

/* ─── 4. Search Results Page ───────────────────────────────────────────── */

/* No max-width or horizontal padding here — Elementor's container/section
   is the width constraint. We only add vertical breathing room. */
.aiswoo-results-page {
    padding:    0 0 48px;
    width:      100%;
}

/* Header row: search bar + count.
   Bleeds edge-to-edge within whatever Elementor column it sits in. */
.aiswoo-results-header {
    background:  var(--aiswoo-primary);
    padding:     24px 0;
    margin:      0 0 28px;
}

.aiswoo-results-header-inner {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         16px;
    padding:     0 40px !important;
}

/* Override search bar colours inside the green header */
.aiswoo-results-header .aiswoo-search-form {
    background:  rgba(255,255,255,.97);
}

.aiswoo-results-header .aiswoo-search-icon-btn {
    color: var(--aiswoo-primary);
}

.aiswoo-results-count {
    color:      #fff;
    font-size:  15px;
    margin:     0;
}

.aiswoo-results-count .aiswoo-count {
    font-weight: 700;
    font-size:   18px;
}

.aiswoo-did-you-mean {
    width:      100%;
    color:      rgba(255,255,255,.9);
    font-size:  14px;
    margin:     -8px 0 0;
}

.aiswoo-did-you-mean a {
    color:           #fff;
    text-decoration: underline;
}

/* ── Full-width product grid ─────────────────────────────────────────── */
.aiswoo-results-main {
    width: 100%;
}

/*
 * Force a CSS Grid layout on the WooCommerce product list inside search results.
 *
 * We target both plain and Astra/WooCommerce-prefixed body classes so our
 * grid declaration always wins regardless of theme specificity.
 *
 * Full-width layout (no sidebar): 4 columns on desktop.
 * The inline <style> in search-results.php provides the definitive Astra
 * override; these rules serve as the external-stylesheet baseline.
 */
.aiswoo-results-main ul.products,
body .aiswoo-results-main ul.products,
.woocommerce .aiswoo-results-main ul.products,
.woocommerce-page .aiswoo-results-main ul.products {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   24px !important;
    list-style:            none !important;
    padding:               0    !important;
    margin:                0    !important;
    float:                 none !important;
}

/* Neutralise float / width rules the theme adds to <li> items.
   NOTE: we deliberately do NOT strip padding here — Astra uses padding
   on the <li> for its card chrome; removing it collapses the card. */
.aiswoo-results-main ul.products li.product,
.aiswoo-results-main ul.products li.product-category {
    width: 100% !important;
    margin: 0   !important;
    float: none !important;
    clear: none !important;
}

/* Remove WC's float clearfix pseudo-elements so they don't create gaps */
.aiswoo-results-main ul.products::before,
.aiswoo-results-main ul.products::after {
    display: none !important;
}

/* ── Astra Theme: convert horizontal card layout to vertical grid cards ─────
 *
 * Astra's customiser "horizontal" product layout sets each <li> to
 * display:flex / flex-direction:row (image left, summary right). Inside a
 * narrow grid column this makes every card look like a stacked list row.
 * We flip it back to column so the image sits on top and text falls below,
 * matching the standard WooCommerce grid-card appearance.
 */
.aiswoo-results-main ul.products li.product.ast-product-gallery-layout-horizontal {
    display:        flex          !important;
    flex-direction: column        !important;
    align-items:    stretch       !important;
}

/* Thumbnail wrapper — full width, no hard pixel constraint */
.aiswoo-results-main ul.products li.product .astra-shop-thumbnail-wrap,
.aiswoo-results-main ul.products li.product.ast-product-gallery-layout-horizontal .astra-shop-thumbnail-wrap {
    width:     100% !important;
    max-width: 100% !important;
    flex:      0 0 auto !important;
}

/* Thumbnail image — fill the wrapper */
.aiswoo-results-main ul.products li.product .astra-shop-thumbnail-wrap img {
    width:  100%  !important;
    height: auto  !important;
    display: block;
}

/* Summary wrapper — fill remaining card height */
.aiswoo-results-main ul.products li.product .astra-shop-summary-wrap,
.aiswoo-results-main ul.products li.product.ast-product-gallery-layout-horizontal .astra-shop-summary-wrap {
    flex:      1    !important;
    width:     100% !important;
    max-width: 100% !important;
}

/* ── Centre-align summary content (Astra horizontal layout fix) ──────────
 *
 * Astra's "horizontal" product-card layout sets text-align:left on the
 * summary area. After we flip the card back to a vertical column the text
 * and button remain left-anchored unless we explicitly re-centre them here.
 */
.aiswoo-results-main ul.products li.product .astra-shop-summary-wrap {
    text-align: center !important;
}

.aiswoo-results-main ul.products li.product .woocommerce-loop-product__title,
.aiswoo-results-main ul.products li.product .price {
    text-align: center !important;
}

/* "Add to cart" / "Select options" button — block so margin:auto centres it */
.aiswoo-results-main ul.products li.product .button,
.aiswoo-results-main ul.products li.product .add_to_cart_button,
.aiswoo-results-main ul.products li.product .ast-shop-product-actions {
    display:      block   !important;
    text-align:   center  !important;
    margin-left:  auto    !important;
    margin-right: auto    !important;
}

/* ── Hide star ratings in search results ─────────────────────────────────
 *
 * This site does not display product ratings. WooCommerce renders the
 * star-rating block inside every product card by default; hide it
 * specifically within the search results grid so it does not appear.
 */
.aiswoo-results-main .star-rating,
.aiswoo-results-main .woocommerce-product-rating {
    display: none !important;
}

/* ─── 4.5 Skeleton Loading ─────────────────────────────────────────────── */

/*
 * Skeleton grid: mirrors the 4→3→2→1 column layout of the real product grid.
 * Shown while /rendered-results fetch is in progress; hidden once JS inserts
 * real cards.
 */
.aiswoo-skeleton-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   24px;
}

@media (max-width: 1024px) {
    .aiswoo-skeleton-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .aiswoo-skeleton-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .aiswoo-skeleton-grid { grid-template-columns: 1fr; }
}

.aiswoo-skeleton-card {
    border-radius: var(--aiswoo-radius-card);
    overflow:      hidden;
    background:    #fff;
    border:        1px solid var(--aiswoo-border);
}

.aiswoo-skeleton-img {
    width:        100%;
    aspect-ratio: 1;
    background:   linear-gradient(90deg, #e8e8e8 0%, #f2f2f2 40%, #e8e8e8 80%);
    background-size: 200% 100%;
    animation:    aiswoo-shimmer 1.4s ease-in-out infinite;
}

.aiswoo-skeleton-line {
    margin:          12px 14px 8px;
    height:          14px;
    border-radius:   4px;
    background:      linear-gradient(90deg, #e8e8e8 0%, #f2f2f2 40%, #e8e8e8 80%);
    background-size: 200% 100%;
    animation:       aiswoo-shimmer 1.4s ease-in-out infinite;
}

.aiswoo-skeleton-line--title { width: 75%; }
.aiswoo-skeleton-line--price { width: 45%; height: 12px; margin-top: 4px; }

/* Count line placeholder inside the green header */
.aiswoo-skeleton-count {
    display:          inline-block;
    width:            160px;
    height:           20px;
    border-radius:    var(--aiswoo-radius-pill);
    background:       linear-gradient(90deg,
                          rgba(255,255,255,.15) 0%,
                          rgba(255,255,255,.40) 40%,
                          rgba(255,255,255,.15) 80%);
    background-size:  200% 100%;
    animation:        aiswoo-shimmer 1.4s ease-in-out infinite;
    vertical-align:   middle;
}

@keyframes aiswoo-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* Spinner for the results-page search icon while fetching */
@keyframes aiswoo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.aiswoo-search-icon-btn.aiswoo-loading svg {
    animation: aiswoo-spin 0.75s linear infinite;
}

/* ── Dropdown no-match state ──────────────────────────────────────────── */

/*
 * Shown in the suggest dropdown when the keyword search finds nothing.
 * Two rows: muted "No quick matches" text + a "Try a full AI search →" link
 * styled to match the .aiswoo-suggest-footer link.
 */
.aiswoo-suggest-no-match {
    padding:    12px 18px 0;
    text-align: center;
}

.aiswoo-suggest-no-match > span {
    display:        block;
    color:          var(--aiswoo-text-muted);
    font-size:      14px;
    padding-bottom: 10px;
}

.aiswoo-no-match-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin:          0 -18px;
    padding:         11px 14px;
    text-decoration: none;
    font-size:       13px;
    font-weight:     600;
    color:           var(--aiswoo-primary);
    border-top:      1px solid var(--aiswoo-border);
    transition:      background var(--aiswoo-transition);
}

.aiswoo-no-match-link:hover,
.aiswoo-no-match-link:focus-visible {
    background: var(--aiswoo-primary-light);
    outline:    none;
}

.aiswoo-no-match-link::after {
    content: '→';
}

/* ─── 5. Pagination ────────────────────────────────────────────────────── */
.aiswoo-pagination {
    margin-top: 32px;
}

.aiswoo-pagination .page-numbers {
    display:       inline-flex;
    flex-wrap:     wrap;
    list-style:    none;
    gap:           4px;
    margin:        0;
    padding:       0;
}

.aiswoo-pagination .page-numbers li {}

.aiswoo-pagination .page-numbers a,
.aiswoo-pagination .page-numbers span {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 10px;
    border:          1px solid var(--aiswoo-border);
    border-radius:   6px;
    font-size:       14px;
    text-decoration: none;
    color:           var(--aiswoo-text);
    transition:      background var(--aiswoo-transition),
                     border-color var(--aiswoo-transition),
                     color var(--aiswoo-transition);
}

.aiswoo-pagination .page-numbers a:hover,
.aiswoo-pagination .page-numbers a:focus-visible {
    background:   var(--aiswoo-primary-light);
    border-color: var(--aiswoo-primary);
    color:        var(--aiswoo-primary);
    outline:      none;
}

.aiswoo-pagination .page-numbers .current {
    background:   var(--aiswoo-primary);
    border-color: var(--aiswoo-primary);
    color:        #fff;
    font-weight:  600;
}

/* ─── 6. Empty & Zero-result States ────────────────────────────────────── */
.aiswoo-empty-notice {
    color:     var(--aiswoo-text-muted);
    font-size: 16px;
    padding:   32px 0;
    text-align: center;
}

.aiswoo-zero-results {
    padding:    24px 0;
}

.aiswoo-zero-title {
    font-size:   18px;
    margin-bottom: 16px;
}

.aiswoo-zero-results ul {
    margin-bottom: 24px;
    padding-left:  24px;
    color:         var(--aiswoo-text-muted);
    font-size:     14px;
}

.aiswoo-zero-results li {
    margin-bottom: 6px;
}

.aiswoo-suggested-cats h3 {
    font-size:     15px;
    margin-bottom: 12px;
}

.aiswoo-cat-links {
    list-style: none;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin:     0;
}

.aiswoo-cat-links li {}

.aiswoo-cat-links a {
    display:         inline-block;
    padding:         7px 16px;
    border:          1px solid var(--aiswoo-primary);
    border-radius:   var(--aiswoo-radius-pill);
    color:           var(--aiswoo-primary);
    text-decoration: none;
    font-size:       13px;
    font-weight:     500;
    transition:      background var(--aiswoo-transition),
                     color var(--aiswoo-transition);
}

.aiswoo-cat-links a:hover,
.aiswoo-cat-links a:focus-visible {
    background: var(--aiswoo-primary);
    color:      #fff;
    outline:    none;
}

/* ─── 7. Responsive ────────────────────────────────────────────────────── */

/* ≤1024px: tablet — 3 columns */
@media (max-width: 1024px) {
    #aiswoo-main ul.products,
    .aiswoo-results-main ul.products,
    body .aiswoo-results-main ul.products,
    .woocommerce .aiswoo-results-main ul.products,
    .woocommerce-page .aiswoo-results-main ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ≤768px: small tablet / large mobile — 2 columns */
@media (max-width: 768px) {
    .aiswoo-results-header-inner {
        flex-direction: column;
        align-items:    flex-start;
        padding:        0 20px !important;
    }

    .aiswoo-search-wrap {
        width: 100%;
    }

    .aiswoo-dropdown {
        min-width: 0;
        right:     0;
    }

    #aiswoo-main ul.products,
    .aiswoo-results-main ul.products,
    body .aiswoo-results-main ul.products,
    .woocommerce .aiswoo-results-main ul.products,
    .woocommerce-page .aiswoo-results-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* ≤480px: small phones — 1 column, tighten spacing */
@media (max-width: 480px) {
    .aiswoo-suggest-thumb {
        width:  40px;
        height: 40px;
    }

    .aiswoo-results-header {
        padding: 16px 0;
    }

    #aiswoo-main ul.products,
    .aiswoo-results-main ul.products,
    body .aiswoo-results-main ul.products,
    .woocommerce .aiswoo-results-main ul.products,
    .woocommerce-page .aiswoo-results-main ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 8. Accessibility ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .aiswoo-dropdown,
    .aiswoo-search-form,
    .aiswoo-search-icon-btn,
    .aiswoo-suggest-item a,
    .aiswoo-cat-links a,
    .aiswoo-skeleton-img,
    .aiswoo-skeleton-line,
    .aiswoo-skeleton-count,
    .aiswoo-search-icon-btn.aiswoo-loading svg {
        transition: none;
        animation:  none;
    }
}

/* High-contrast mode */
@media (forced-colors: active) {
    .aiswoo-search-form {
        border: 2px solid ButtonText;
    }

    .aiswoo-suggest-title {
        color: LinkText;
    }
}

/* ─── 9. Result Tabs (Products / Articles / Pages) ─────────────────────── */
.aiswoo-tabs {
    display:       flex;
    gap:           4px;
    flex-wrap:     wrap;
    border-bottom: 2px solid var(--aiswoo-border);
    margin:        8px 0 20px;
}
.aiswoo-tabs[hidden] { display: none; }
.aiswoo-tab {
    appearance:    none;
    background:    none;
    border:        0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding:       10px 16px;
    font-size:     15px;
    font-weight:   600;
    color:         var(--aiswoo-text-muted);
    cursor:        pointer;
    transition:    color var(--aiswoo-transition), border-color var(--aiswoo-transition);
}
.aiswoo-tab:hover { color: var(--aiswoo-text); }
.aiswoo-tab.is-active {
    color:               var(--aiswoo-primary);
    border-bottom-color: var(--aiswoo-primary);
}
.aiswoo-tab-count {
    display:       inline-block;
    min-width:     20px;
    padding:       0 6px;
    margin-left:   4px;
    font-size:     12px;
    line-height:   18px;
    text-align:    center;
    border-radius: var(--aiswoo-radius-pill);
    background:    var(--aiswoo-primary-light);
    color:        var(--aiswoo-primary-dark);
}
.aiswoo-tab-panel[hidden] { display: none; }

/* ─── 10. Content (blog / page) results ────────────────────────────────── */
.aiswoo-content-list {
    list-style:            none;
    margin:                0;
    padding:               0;
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px;
}
@media (max-width: 768px) { .aiswoo-content-list { grid-template-columns: 1fr; } }
.aiswoo-content-item { margin: 0; }
.aiswoo-content-item a {
    display:       flex;
    gap:           14px;
    align-items:   flex-start;
    padding:       14px;
    border:        1px solid var(--aiswoo-border);
    border-radius: var(--aiswoo-radius-card);
    background:    #fff;
    text-decoration: none;
    transition:    box-shadow var(--aiswoo-transition), border-color var(--aiswoo-transition);
}
.aiswoo-content-item a:hover {
    border-color: var(--aiswoo-primary);
    box-shadow:   var(--aiswoo-shadow-sm);
}
.aiswoo-content-thumb {
    width:         64px;
    height:        64px;
    flex:          0 0 64px;
    object-fit:    cover;
    border-radius: 8px;
}
.aiswoo-content-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aiswoo-content-title { font-weight: 600; color: var(--aiswoo-text); line-height: 1.3; }
.aiswoo-content-excerpt {
    font-size:   13px;
    color:       var(--aiswoo-text-muted);
    line-height: 1.45;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.aiswoo-content-meta { font-size: 12px; color: var(--aiswoo-text-muted); }

/* ─── 11. AI answer box ────────────────────────────────────────────────── */
.aiswoo-answer {
    border:        1px solid var(--aiswoo-border);
    border-left:   4px solid var(--aiswoo-primary);
    border-radius: var(--aiswoo-radius-card);
    background:    var(--aiswoo-primary-light);
    padding:       16px 18px;
    margin:        8px 0 16px;
}
.aiswoo-answer[hidden] { display: none; }
.aiswoo-answer-head {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-weight:   700;
    color:         var(--aiswoo-primary-dark);
    margin-bottom: 8px;
}
.aiswoo-answer-spark { font-size: 16px; }
.aiswoo-answer-body { color: var(--aiswoo-text); line-height: 1.6; font-size: 15px; }
.aiswoo-answer-sources {
    margin-top:  12px;
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    align-items: center;
}
.aiswoo-answer-sources-label {
    font-size:      12px;
    font-weight:    600;
    color:          var(--aiswoo-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.aiswoo-source-chip {
    font-size:       13px;
    padding:         4px 10px;
    border-radius:   var(--aiswoo-radius-pill);
    background:      #fff;
    border:          1px solid var(--aiswoo-border);
    color:           var(--aiswoo-primary-dark);
    text-decoration: none;
    transition:      border-color var(--aiswoo-transition), box-shadow var(--aiswoo-transition);
}
.aiswoo-source-chip:hover {
    border-color: var(--aiswoo-primary);
    box-shadow:   var(--aiswoo-shadow-sm);
}
/* Loading shimmer lines while the answer generates */
.aiswoo-answer-line {
    display:       block;
    height:        12px;
    margin:        8px 0;
    border-radius: 4px;
    background:    linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63%);
    background-size: 400% 100%;
    animation:     aiswoo-shimmer 1.4s ease infinite;
}
.aiswoo-answer-line.short { width: 60%; }
@keyframes aiswoo-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* ─── 12. "Shop by category" suggestions ───────────────────────────────── */
.aiswoo-categories:empty { display: none; }
.aiswoo-cat-suggest {
    display:        flex;
    align-items:    center;
    gap:            12px;
    flex-wrap:      wrap;
    margin:         0 0 20px;
    padding-bottom: 16px;
    border-bottom:  1px solid var(--aiswoo-border);
}
.aiswoo-cat-suggest-label {
    font-size:      13px;
    font-weight:    600;
    color:          var(--aiswoo-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.aiswoo-cat-suggest-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
}
.aiswoo-cat-suggest-list li { margin: 0; }
.aiswoo-cat-suggest-list a {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         8px 16px 8px 8px;
    border:          1px solid var(--aiswoo-border);
    border-radius:   var(--aiswoo-radius-pill);
    background:      #fff;
    text-decoration: none;
    transition:      border-color var(--aiswoo-transition), box-shadow var(--aiswoo-transition);
}
.aiswoo-cat-suggest-list a:hover {
    border-color: var(--aiswoo-primary);
    box-shadow:   var(--aiswoo-shadow-sm);
}
.aiswoo-cat-thumb {
    width:         40px;
    height:        40px;
    flex:          0 0 40px;
    border-radius: 50%;
    object-fit:    cover;
}
.aiswoo-cat-name  { font-weight: 600; color: var(--aiswoo-text); line-height: 1.2; }
.aiswoo-cat-count { font-size: 12px; color: var(--aiswoo-text-muted); }
@media (max-width: 600px) {
    .aiswoo-cat-suggest { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .aiswoo-answer-line,
    .aiswoo-content-item a,
    .aiswoo-tab,
    .aiswoo-source-chip,
    .aiswoo-cat-suggest-list a { transition: none; animation: none; }
}