/* ── KohR Fitment Finder ──────────────────────────────────────────────────────
   Light theme — matches kohrmotorsports.com white background.
   KohR red (#e8262d) kept as accent throughout.
   All selectors namespaced .kohr-* to prevent theme bleed.
   !important used only where WooCommerce/theme overrides are confirmed.
   Google Fonts enqueued via PHP — no @import here.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --kf-red:      #e8262d;
    --kf-red-dark: #c91f25;
    --kf-bg:       #ffffff;
    --kf-surface:  #f7f7f7;
    --kf-border:   #e0e0e0;
    --kf-border-d: #cccccc;
    --kf-text:     #1a1a1a;
    --kf-muted:    #777777;
    --kf-radius:   3px;
    --kf-shadow:   0 1px 4px rgba(0,0,0,0.08);
    --kf-shadow-h: 0 4px 12px rgba(0,0,0,0.12);
}

/* ── Finder wrapper ───────────────────────────────────────────────────────── */
.kohr-finder {
    background:  var(--kf-bg);
    font-family: 'Barlow', sans-serif;
    color:       var(--kf-text);
    padding:     28px 0 40px;
    border-top:  3px solid var(--kf-red);
}

/* ── Single-row search bar: FORD > MUSTANG > Year > Submodel > Engine ────── */
.kohr-finder-vehicle {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
}

/* .kohr-fixed-pill removed — Make and Model are now dynamic selects */

.kohr-fixed-sep {
    color:       var(--kf-border-d);
    font-size:   14px;
    line-height: 1;
    flex-shrink: 0;
    align-self:  center;
}

.kohr-select-wrap {
    flex: 1 1 130px;
    min-width: 120px;
}

.kohr-select {
    width:              100%;
    height:             44px;
    box-sizing:         border-box;
    padding:            0 36px 0 12px;
    background:         var(--kf-surface) !important;
    border:             1px solid var(--kf-border) !important;
    border-radius:      var(--kf-radius);
    color:              var(--kf-text) !important;
    font-family:        'Barlow', sans-serif;
    font-size:          14px;
    font-weight:        500;
    appearance:         none;
    -webkit-appearance: none;
    cursor:             pointer;
    transition:         border-color 0.15s, box-shadow 0.15s;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 12px center !important;
}

.kohr-select:focus {
    outline:      none;
    border-color: var(--kf-red) !important;
    box-shadow:   0 0 0 3px rgba(232,38,45,0.12);
}

.kohr-select:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* ── Loading indicator ────────────────────────────────────────────────────── */
.kohr-loading {
    display:       flex;
    align-items:   center;
    gap:           10px;
    /* Fixed position — floats over the page, never shifts layout */
    position:      fixed;
    bottom:        28px;
    right:         28px;
    z-index:       9999;
    background:    #1a1a1a;
    color:         #f0f0f0;
    font-size:     13px;
    font-family:   'Barlow', sans-serif;
    padding:       10px 16px;
    border-radius: 6px;
    box-shadow:    0 4px 16px rgba(0,0,0,0.25);
    pointer-events: none;
}

.kohr-spinner {
    display:          inline-block;
    width:            16px;
    height:           16px;
    border:           2px solid rgba(255,255,255,0.25);
    border-top-color: #e8262d;
    border-radius:    50%;
    animation:        kohr-spin 0.7s linear infinite;
    flex-shrink:      0;
}

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

/* ── Error / inline feedback ──────────────────────────────────────────────── */
.kohr-ajax-error,
.kohr-error {
    display:    block;
    font-size:  13px;
    color:      var(--kf-red);
    margin-top: 6px;
}

/* ── Results section wrapper ─────────────────────────────────────────────── */
.kohr-results-section {
    margin-top: 32px;
}

/* ── Cart button ─────────────────────────────────────────────────────────── */
.kohr-toolbar-left {
    display:     flex;
    align-items: center;
    gap:         12px;
    min-width:   0;
}

.kohr-cart-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    color:           #1a1a1a;
    text-decoration: none;
    border:          1px solid #e0e0e0;
    border-radius:   6px;
    background:      #f7f7f7;
    transition:      border-color 0.15s, background 0.15s;
}

.kohr-cart-btn:hover {
    border-color: #e8262d;
    background:   #fff;
    color:        #e8262d;
}

.kohr-cart-icon {
    width:  20px;
    height: 20px;
}

.kohr-cart-count {
    position:        absolute;
    top:             -7px;
    right:           -7px;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    background:      #e8262d;
    color:           #ffffff;
    font-size:       10px;
    font-weight:     700;
    font-family:     'Barlow', sans-serif;
    border-radius:   9px;
    border:          2px solid #ffffff;
    box-sizing:      border-box;
    pointer-events:  none;
    /* Flexbox ensures perfect vertical + horizontal centering */
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
}

/* ── Results toolbar (count + per-page + filter toggle) ──────────────────── */
.kohr-results-toolbar {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    margin-bottom: 16px;
    flex-wrap:   wrap;
}

.kohr-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

/* Shared size + style for every icon button in the toolbar */
.kohr-toolbar-icon {
    width:       20px;
    height:      20px;
    stroke:      currentColor;
    flex-shrink: 0;
}

.kohr-results-header {
    font-size:   14px;
    color:       var(--kf-muted);
    line-height: 1.5;
}

.kohr-results-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   20px;
    font-weight: 800;
    color:       var(--kf-red);
    margin-right: 4px;
}

.kohr-no-results {
    color:     var(--kf-muted);
    font-size: 14px;
    padding:   20px 0;
}

/* ── Per-page selector ────────────────────────────────────────────────────── */
.kohr-per-page-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.kohr-per-page-select {
    height:             36px;
    padding:            0 30px 0 10px;
    background:         var(--kf-surface) !important;
    border:             1px solid var(--kf-border) !important;
    border-radius:      var(--kf-radius);
    color:              var(--kf-text) !important;
    font-family:        'Barlow', sans-serif;
    font-size:          13px;
    font-weight:        600;
    appearance:         none;
    -webkit-appearance: none;
    cursor:             pointer;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 8px center !important;
    transition:          border-color 0.15s;
}

.kohr-per-page-select:focus {
    outline:      none;
    border-color: var(--kf-red) !important;
}

/* ── Collapsible filter toggle ────────────────────────────────────────────── */
.kohr-filter-wrap {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.kohr-filter-toggle {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      var(--kf-surface);
    border:          1px solid var(--kf-border-d);
    border-radius:   6px;
    color:           var(--kf-muted);
    cursor:          pointer;
    transition:      border-color 0.15s, color 0.15s;
    flex-shrink:     0;
}

.kohr-filter-toggle:hover,
.kohr-filter-toggle[aria-expanded="true"] {
    border-color: var(--kf-red);
    color:        var(--kf-red);
}

/* Active dot — small red pip shown when any filter is selected */
.kohr-filter-active-dot {
    position:     absolute;
    top:          4px;
    right:        4px;
    width:        7px;
    height:       7px;
    background:   var(--kf-red);
    border-radius:50%;
    border:       1.5px solid #ffffff;
    pointer-events: none;
}

/* Active filter tag — shown next to toggle when a filter is selected */
.kohr-active-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    height:         28px;
    padding:        0 8px 0 10px;
    background:     var(--kf-red);
    border:         none;
    border-radius:  2px;
    color:          #ffffff;
    font-family:    'Barlow', sans-serif;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.15s;
}

.kohr-active-tag:hover { background: var(--kf-red-dark); }

.kohr-active-tag-clear {
    font-size:   14px;
    line-height: 1;
    opacity:     0.85;
}

/* ── Collapsible cat-bar ──────────────────────────────────────────────────── */
.kohr-cat-collapsible {
    display:       none;   /* JS controls show/hide via slideDown */
    flex-wrap:     wrap;
    gap:           6px;
    padding:       12px 0 4px;
    border-bottom: 1px solid var(--kf-border);
    margin-bottom: 14px;
}

.kohr-cat-bar {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 18px;
}

.kohr-cat-pill {
    display:        inline-flex;
    align-items:    center;
    height:         28px;
    padding:        0 12px;
    background:     var(--kf-bg);
    border:         1px solid var(--kf-border-d);
    border-radius:  2px;
    color:          var(--kf-muted);
    font-family:    'Barlow', sans-serif;
    font-size:      12px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor:         pointer;
    transition:     background 0.15s, color 0.15s, border-color 0.15s;
    white-space:    nowrap;
}

.kohr-cat-pill:hover {
    border-color: var(--kf-red);
    color:        var(--kf-red);
}

.kohr-cat-pill.active {
    background:   var(--kf-red);
    border-color: var(--kf-red);
    color:        #ffffff;
}

/* ── Product grid ─────────────────────────────────────────────────────────── */
.kohr-results-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.kohr-product-card {
    display:        flex;
    flex-direction: column;
    background:     var(--kf-bg);
    border:         1px solid var(--kf-border);
    border-radius:  var(--kf-radius);
    overflow:       hidden;
    transition:     border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow:     var(--kf-shadow);
}

.kohr-product-card:hover {
    border-color: var(--kf-red);
    box-shadow:   var(--kf-shadow-h);
    transform:    translateY(-2px);
}

.kohr-card-media {
    display:         block;
    text-decoration: none;
}

.kohr-product-img {
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    background:   var(--kf-surface);
}

.kohr-product-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.2s;
}

.kohr-card-media:hover .kohr-product-img img {
    transform: scale(1.04);
}

.kohr-product-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        10px 12px 6px;
    flex:           1;
}

.kohr-product-sku {
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--kf-muted);
}

.kohr-product-title-link {
    text-decoration: none;
    display:         block;
}

.kohr-product-title {
    font-family: 'Barlow', sans-serif;
    font-size:   13px;
    font-weight: 600;
    line-height: 1.35;
    color:       var(--kf-text);
    margin:      0;
    flex:        1;
    transition:  color 0.15s;
}

.kohr-product-title-link:hover .kohr-product-title {
    color: var(--kf-red);
}

.kohr-product-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   16px;
    font-weight: 700;
    color:       var(--kf-text);
    margin-top:  4px;
}

/* WooCommerce sale price markup */
.kohr-product-price ins  { text-decoration: none; color: var(--kf-red); }
.kohr-product-price del  { opacity: 0.45; font-size: 13px; }

/* ── Card footer + Add to Cart button ─────────────────────────────────────── */
.kohr-card-footer {
    padding:    0 12px 12px;
    margin-top: auto;
}

.kohr-atc-btn {
    display:         block;
    width:           100%;
    padding:         8px 12px;
    text-align:      center;
    background:      var(--kf-red);
    border:          none;
    border-radius:   var(--kf-radius);
    color:           #ffffff !important;
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       13px;
    font-weight:     800;
    font-style:      italic;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    text-decoration: none !important;
    cursor:          pointer;
    transition:      background 0.15s;
    white-space:     nowrap;
    line-height:     1.3;
}

.kohr-atc-btn:hover:not(.kohr-atc-disabled) {
    background: var(--kf-red-dark);
    color:      #ffffff !important;
}

/* Select Options — outlined */
.kohr-atc-options {
    background:  transparent;
    border:      1px solid var(--kf-red);
    color:       var(--kf-red) !important;
}

.kohr-atc-options:hover {
    background: var(--kf-red);
    color:      #ffffff !important;
}

/* Out of Stock */
.kohr-atc-disabled {
    background:     var(--kf-surface);
    border:         1px solid var(--kf-border);
    color:          var(--kf-muted) !important;
    cursor:         not-allowed;
    pointer-events: none;
}

/* WooCommerce AJAX states */
.kohr-atc-btn.loading {
    opacity:        0.7;
    cursor:         wait;
    pointer-events: none;
}

.kohr-atc-btn.loading::after {
    content:   ' ●';
    animation: kohr-dots 1s steps(3, end) infinite;
}

.kohr-atc-btn.added {
    background: #2a7a2a;
}

.kohr-atc-btn.added::before { content: '✓ '; }

@keyframes kohr-dots {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.kohr-paging-wrap { margin-top: 24px; }

.kohr-paging {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px;
}

.kohr-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          34px;
    padding:         0 10px;
    background:      var(--kf-bg);
    border:          1px solid var(--kf-border-d);
    border-radius:   var(--kf-radius);
    color:           var(--kf-muted);
    font-family:     'Barlow', sans-serif;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    white-space:     nowrap;
}

.kohr-page-btn:hover {
    border-color: var(--kf-red);
    color:        var(--kf-red);
}

.kohr-page-btn.active {
    background:   var(--kf-red);
    border-color: var(--kf-red);
    color:        #ffffff;
    cursor:       default;
}

.kohr-paging-ellipsis {
    color:     var(--kf-muted);
    font-size: 13px;
    padding:   0 4px;
}

/* ── Section dividers ─────────────────────────────────────────────────────── */
.kohr-merch-section,
.kohr-garage-section {
    border-top:  1px solid var(--kf-border);
    padding-top: 24px;
    margin-top:  36px;
}

.kohr-section-divider { margin-bottom: 16px; }

.kohr-section-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      15px;
    font-weight:    600;
    font-style:     italic;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--kf-muted);
}

/* Merchandise — understated, no accent colour */
.kohr-merch-label { color: var(--kf-muted); }

/* Garage Sale — slight accent */
.kohr-garage-label { color: var(--kf-red); }

/* Smaller cards for merch/garage — less visual weight */
.kohr-merch-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.kohr-merch-grid .kohr-product-card {
    box-shadow: none;
    border-color: var(--kf-border);
}

.kohr-merch-grid .kohr-product-card:hover {
    box-shadow: var(--kf-shadow);
    transform:  none;
}

.kohr-merch-grid .kohr-product-title {
    font-size: 12px;
}

.kohr-merch-grid .kohr-product-price {
    font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kohr-finder { padding: 20px 0 32px; }

    .kohr-finder-vehicle {
        flex-direction: column;
        align-items:    stretch;
    }
    .kohr-fixed-sep  { display: none; }
    .kohr-select-wrap { width: 100%; flex: none; }

    .kohr-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .kohr-results-toolbar {
        flex-direction: column;
        align-items:    flex-start;
    }

    .kohr-cat-pill  { height: 26px; padding: 0 10px; font-size: 11px; }
    .kohr-page-btn  { min-width: 30px; height: 30px; font-size: 12px; }
}

/* ── Vehicle Fitment product tab ──────────────────────────────────────────── */
.kohr-fitment-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     'Barlow', sans-serif;
    font-size:       14px;
    margin-top:      8px;
}

/* Blanket override — prevent theme from coloring any cell */
.kohr-fitment-table th,
.kohr-fitment-table td {
    color: #1a1a1a !important;
}

.kohr-fitment-table thead th {
    background:     #f7f7f7;
    border:         1px solid #e0e0e0;
    padding:        8px 14px;
    text-align:     left;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #777777 !important;
    white-space:    nowrap;
}

.kohr-fitment-table tbody td {
    border:         1px solid #e0e0e0;
    padding:        8px 14px;
    color:          #1a1a1a !important;
    vertical-align: middle;
}

.kohr-fitment-table tbody tr:nth-child(even) td {
    background: #f7f7f7;
}

/* Years column — col 1, bold black */
.kohr-fitment-table tbody td:nth-child(1) {
    font-weight: 700 !important;
    color:       #1a1a1a !important;
    white-space: nowrap;
}

/* Submodel/Engine column — col 4, bold */
.kohr-fitment-table tbody td:nth-child(4) {
    font-weight: 600;
}

@media (max-width: 640px) {
    .kohr-fitment-table { font-size: 12px; }
    .kohr-fitment-table thead th,
    .kohr-fitment-table tbody td { padding: 6px 8px; }
    /* Hide Make/Model on mobile — implied on a product page */
    .kohr-fitment-table thead th:nth-child(2),
    .kohr-fitment-table thead th:nth-child(3),
    .kohr-fitment-table tbody td:nth-child(2),
    .kohr-fitment-table tbody td:nth-child(3) { display: none; }
}

/* ── WooCommerce product tab bar overrides ────────────────────────────────────
   High-specificity selectors to override theme styles on product pages.     */

/* All tab links — dark, readable text */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
    color:       #1a1a1a !important;
    font-weight: 500 !important;
    opacity:     1 !important;
}

/* Inactive tabs — slightly muted */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a,
.woocommerce-tabs ul.tabs li:not(.active) a {
    color: #555555 !important;
}

/* Active tab — red border top/left/right, white bottom blends with content panel */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active {
    /* Border approach — may be overridden by theme */
    border-top:    2px solid #e8262d !important;
    border-left:   1px solid #e8262d !important;
    border-right:  1px solid #e8262d !important;
    border-bottom: 2px solid #ffffff !important;
    border-radius: 3px 3px 0 0 !important;
    /* Box-shadow fallback — 3-sided inner glow that theme cannot suppress */
    box-shadow:    inset 0 3px 0 #e8262d,
                   inset 1px 0 0 #e8262d,
                   inset -1px 0 0 #e8262d !important;
    margin-bottom: -1px !important;
    position:      relative !important;
    z-index:       2 !important;
}

/* Active tab link — full black, bold */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
    color:       #1a1a1a !important;
    font-weight: 700 !important;
}

/* Inactive tab hover */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover,
.woocommerce-tabs ul.tabs li:not(.active):hover {
    border-top: 2px solid #e8262d !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover a,
.woocommerce-tabs ul.tabs li:not(.active):hover a {
    color: #1a1a1a !important;
}

/* ── Persistent header cart (all pages, fixed position) ──────────────────── */
#kohr-header-cart {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    top:             18px;
    right:           20px;
    z-index:         99999;
    width:           42px;
    height:          42px;
    background:      #1a1a1a;
    color:           #ffffff;
    border-radius:   50%;
    text-decoration: none;
    box-shadow:      0 2px 8px rgba(0,0,0,0.30);
    transition:      background 0.15s, transform 0.15s;
}

#kohr-header-cart:hover {
    background:  #e8262d;
    transform:   scale(1.08);
}

#kohr-header-cart svg {
    width:  20px;
    height: 20px;
    stroke: currentColor;
}

.kohr-header-cart-count {
    position:      absolute;
    top:           -4px;
    right:         -4px;
    min-width:     18px;
    height:        18px;
    padding:       0 4px;
    background:    #e8262d;
    color:         #ffffff;
    font-size:     10px;
    font-weight:   700;
    font-family:   'Barlow', sans-serif;
    line-height:   18px;
    text-align:    center;
    border-radius: 9px;
    border:        2px solid #ffffff;
    box-sizing:    border-box;
    pointer-events: none;
}

/* Nudge down when WP admin bar is present */
.admin-bar #kohr-header-cart {
    top: 50px;
}