/* deep-rebuild Phase 2: consolidated YMM form CSS extracted from per-template <style> blocks. */

/* ===== from form-hero-autostore.phtml ===== */
/* Garage panel (inline, inside hero) */
.nlh-hero-ymm__garage-panel {
    display: none;
    margin-top: 16px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__name {
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__action {
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__action--select {
    background: rgba(220, 53, 69, 0.95);
    color: #fff;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__action--select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__action--delete {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.85);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__ft {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__link {
    display: inline-block;
    text-decoration: none;
    border-radius: 12px;
    padding: 12px 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__link:hover {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.38);
    color: #fff;
}

.nlh-hero-ymm__garage-panel .nlh-garage-menu__empty {
    padding: 18px 10px;
    text-align: center;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
}

#nlh-ymm-hero .nlh-garage-menu__item.is-active .nlh-garage-menu__name {
    color: #bbb;
}

#nlh-ymm-hero .nlh-garage-menu__name {
    color: #fff;
}

#nlh-ymm-hero-garage-panel .nlh-garage-menu__content {
    padding: 0;
}

    
/* ========================================
   LUXURY DARK GLASS HERO VEHICLE SELECTOR
   Matches PremiumMegaMenu aesthetic
   ======================================== */

/* Container - No max-width, responsive positioning */
.nlh-hero-ymm {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
            top:18px;
}

/* The Glass Card */
.nlh-hero-ymm__glass {
    /* Dark glass effect */
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Luxury styling */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    
    /* Width */
    max-width: 410px;
    width: 100%;
    
    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: rgba(255, 255, 255, 0.95);
    
    /* Force clickability */
    pointer-events: auto !important;
}

/* ===== HEADER ===== */
.nlh-hero-ymm__header {
    margin-bottom: 8px;
}

.nlh-hero-ymm__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #dc3545;
    margin-bottom: 8px;
}

.nlh-hero-ymm__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.nlh-hero-ymm__subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* ===== FORM FIELDS ===== */
/* ===== FORM FIELDS (2 per row) ===== */
.nlh-hero-ymm__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
    margin-bottom: 20px;
}

/* make each label behave nicely in grid */
.nlh-hero-ymm__field {
    display: block;
    width: 100%;
    cursor: pointer;
}

/* Selects must be allowed to shrink in a grid cell */
.nlh-hero-ymm__select {
    width: 100%;
    min-width: 0;
}

/* Apply button spans full width */
.nlh-hero-ymm__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}



/* MOBILE: Keep 2 columns per row */
@media (max-width: 767px) {
    .nlh-hero-ymm__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px;
    }
    
    /* Make inputs more compact for mobile */
    .nlh-hero-ymm__select {
        height: 42px;
        padding: 0 12px;
        font-size: 13px;
    }
    
    /* Adjust header for mobile */
    .nlh-hero-ymm__eyebrow {
        font-size: 10px;
        margin-bottom: 6px;
    }
    
    .nlh-hero-ymm__title {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .nlh-hero-ymm__subtitle {
        font-size: 12px;
    }
    
    .nlh-hero-ymm__header {
        margin-bottom: 16px;
    }
    
    /* Smaller step circles */
    .nlh-hero-ymm__step {
        width: 20px;
        height: 20px;
        font-size: 11px;
        margin: 3px;
    }
    
    .nlh-hero-ymm__label-text {
        font-size: 10px;
    }
    
    /* Adjust buttons */
    .nlh-hero-ymm__btn--primary {
        height: 46px;
        font-size: 13px;
    }
    
    .nlh-hero-ymm__btn--ghost,
    .nlh-hero-ymm__btn--garage {
        height: 40px;
        font-size: 12px;
    }
    
    .nlh-hero-ymm__actions {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .nlh-hero-ymm__secondary {
        gap: 8px;
    }
    
    /* Reduce padding */
    .nlh-hero-ymm__glass {
        padding: 20px 16px;
        border-radius: 12px;
    }
}

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Keep 2x2 grid but make inputs slightly smaller */
    .nlh-hero-ymm__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    
    .nlh-hero-ymm__select {
        height: 44px;
        font-size: 14px;
    }
    
    .nlh-hero-ymm__glass {
        padding: 24px;
    }
    
    .nlh-hero-ymm__title {
        font-size: 24px;
    }
}

/* SMALL MOBILE (below 400px) */
@media (max-width: 400px) {
    /* Still maintain 2 columns but with tighter spacing */
    .nlh-hero-ymm__fields {
        gap: 10px 8px;
    }
    
    .nlh-hero-ymm__glass {
        padding: 16px 12px;
    }
    
    .nlh-hero-ymm__select {
        height: 40px;
        padding: 0 10px;
        font-size: 12px;
    }
    
    .nlh-hero-ymm__label-text {
        font-size: 9px;
    }
}

/* Circled Numbers - KEEPING THESE! */
.nlh-hero-ymm__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin: 5px;
}

.nlh-hero-ymm__field:hover .nlh-hero-ymm__step {
    background: rgba(220, 53, 69, 0.1);
    transform: scale(1.05);
}

.nlh-hero-ymm__label-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* Selects - Dark luxury style */
.nlh-hero-ymm__select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    
    /* Dark glass input */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    
    /* Typography */
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    
    /* Effects */
    outline: none;
    cursor: pointer !important;
    transition: all 0.2s ease;
    
    /* Native select - CLICKABLE */
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    
    /* Force clickability */
    pointer-events: auto !important;
}

.nlh-hero-ymm__select:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.nlh-hero-ymm__select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.nlh-hero-ymm__select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.03);
}

.nlh-hero-ymm__select option {
    background: #1a1a1a;
    color: #ffffff;
    padding: 12px;
}

/* ===== ACTIONS ===== */
.nlh-hero-ymm__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

/* Primary Button */
.nlh-hero-ymm__btn--primary {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Red gradient */
    background: var(--theme-color);
    border: none;
    border-radius: 8px;
    
    /* Typography */
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    
    /* Effects */
    cursor: pointer !important;
    box-shadow: 
        0 4px 12px rgba(220, 53, 69, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    
    /* Force clickability */
    pointer-events: auto !important;
}

.nlh-hero-ymm__btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--theme-color) 0%, #ff2a2aff 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nlh-hero-ymm__btn--primary:hover::before {
    opacity: 1;
}

.nlh-hero-ymm__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(220, 53, 69, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.nlh-hero-ymm__btn--primary:active {
    transform: translateY(0);
}

.nlh-hero-ymm__btn--primary span,
.nlh-hero-ymm__btn--primary svg {
    position: relative;
    z-index: 1;
}

/* Secondary Actions Row */
.nlh-hero-ymm__secondary {
    display: flex;
    gap: 10px;
}

/* Ghost & Garage Buttons */
.nlh-hero-ymm__btn--ghost{
}

.nlh-hero-ymm__btn--garage,
.nlh-hero-ymm__btn--ghost {
background: linear-gradient(
  180deg,
  rgba(58, 65, 74, 0.7),
  rgba(47, 53, 61, 0.7)
) ;
background-color: transparent !important;
}
    
.nlh-hero-ymm__btn--ghost,
.nlh-hero-ymm__btn--garage {
    flex: 1;
    height: 44px;
   
    /* Dark glass */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    
    /* Typography */
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    
    /* Effects */
    cursor: pointer !important;
    transition: all 0.2s ease;
    
    /* Force clickability */
    pointer-events: auto !important;
}

.nlh-hero-ymm__btn--ghost:hover,
.nlh-hero-ymm__btn--garage:hover {
    filter: brightness(1.1);
    background:  rgba(58, 65, 74, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff;
}

/* ===== STATUS ===== */
.nlh-hero-ymm__status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    
    /* Subtle background */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    
    /* Typography */
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.nlh-hero-ymm__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nlh-hero-ymm__status--active .nlh-hero-ymm__status-dot {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.nlh-hero-ymm__status-text {
    flex: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.nlh-hero-ymm__status--active .nlh-hero-ymm__status-text {
    color: #ffffff;
}

/* ===== RESPONSIVE BEHAVIOR ===== */

/* Desktop - Left aligned with logo */
@media (min-width: 1024px) {
    .nlh-hero-ymm__glass {
        margin-left: 0;
        margin-right: auto;
    }
}

/* Tablet - Still left aligned but slightly adjusted */
@media (min-width: 768px) and (max-width: 1023px) {
    .nlh-hero-ymm__glass {
        max-width: 360px;
        padding: 28px 24px;
        margin-left: 0;
        margin-right: auto;
    }
    
    .nlh-hero-ymm__title {
        font-size: 24px;
    }
}

/* Mobile - Center aligned, full width, below hero */
@media (max-width: 767px) {
    .nlh-hero-ymm {
        width: 100%;
        padding: 0 16px;
    }
    
    .nlh-hero-ymm__glass {
        max-width: 100%;
        padding: 24px 20px;
        margin: 0 auto;
        border-radius: 12px;
    }
    
    .nlh-hero-ymm__header {
        margin-bottom: 20px;
    }
    
    .nlh-hero-ymm__title {
        font-size: 22px;
    }
    
    .nlh-hero-ymm__subtitle {
        font-size: 13px;
    }
    
    .nlh-hero-ymm__fields {
        gap: 14px;
    }
    
    .nlh-hero-ymm__select {
        height: 46px;
    }
    
    .nlh-hero-ymm__btn--primary {
        height: 50px;
    }
}

/* Very small mobile */
@media (max-width: 374px) {
    .nlh-hero-ymm__glass {
        padding: 20px 16px;
    }
    
    .nlh-hero-ymm__title {
        font-size: 20px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nlh-hero-ymm__glass {
    animation: fadeIn 0.4s ease;
}

/* Loading state */
.nlh-hero-ymm__select.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Focus visible for accessibility */
.nlh-hero-ymm__btn:focus-visible,
.nlh-hero-ymm__select:focus-visible {

    outline-offset:0;
}

/* ===== from form-card.phtml ===== */

/* ===== from form-card-light.phtml ===== */

/* ===== from form-dark.phtml ===== */
#nlh-ymm-dark-clear,
    #nlh-ymm-dark-garage {
        background-color: rgba(57, 63, 71, 1.0);
    }

    #nlh-ymm-dark-clear:hover,
#nlh-ymm-dark-garage:hover {
    filter: brightness(1.1) !important;
    background:  rgba(78, 85, 94, 1.7) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

    /* Dark Luxury Vehicle Selector Styling */
    .nlh-ymm-dark-panel {
        position: fixed;
        top: 0;
        left: 50%;
        width: min(1280px, calc(100vw - 48px));
        background: rgba(20, 20, 20, 0.85);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
        z-index: 999;
        box-sizing: border-box;
        outline: none;
        /* EXACT same border approach as Categories/Brands/Home */
        border-top: 1px solid #dc3545;
        /* Red top border - EXACT match */
        border-radius: 12px;
        max-height: 65vh;
        overflow: visible;
        /* Allow dropdowns to extend outside */
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 10px 22px rgba(0, 0, 0, 0.28) !important;

    }

    .nlh-ymm-dark-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    /* Close Button - EXACT match to mega menu */
    .nlh-ymm-close {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 34px;
        height: 34px;
        background: var(--theme-color);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 800;
        color: #ffffff;
        transition: background 0.2s ease, transform 0.2s ease;
        z-index: 1000;
        padding: 0;
        line-height: 1;
        margin: 0;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 12px;
    }

    .nlh-ymm-close:hover {
        background: #bd2130;
        transform: scale(1.03);
    }

    .nlh-ymm-dark-content {
        padding: 30px 48px;
        overflow-y: auto;
        max-height: 85vh;
    }

    .nlh-ymm-dark-header {
        margin-bottom: 0;
        text-align: center;
    }

    .nlh-ymm-dark-title {
        font-size: 28px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .nlh-ymm-dark-subtitle {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.65);
        margin: 0;
        padding-bottom: 20px;
    }

    .nlh-ymm-dark-form {
        max-width: 900px;
        margin: 0 auto;
    }

    .nlh-ymm-dark-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 28px;
    }

    .nlh-ymm-dark-field {
        display: flex;
        flex-direction: column;
        position: relative;
        /* For dropdown positioning */
        z-index: 1;
        /* Ensure dropdowns stack properly */
    }

    .nlh-ymm-dark-label {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 10px;
        /* More space between label and select */
        display: block;
        /* Ensure label is on its own line */
    }

    .nlh-ymm-optional {
        font-size: 11px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.45);
        text-transform: none;
        letter-spacing: 0;
    }

    .nlh-ymm-dark-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 14px 40px 14px 16px;
        /* Increased vertical padding */
        font-size: 15px;
        font-family: inherit;
        color: #ffffff !important;
        cursor: pointer;
        transition: all 0.2s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        position: relative;
        z-index: 2;
        line-height: 1.4;
        /* Better line height for text centering */
        height: auto;
        /* Let padding control height */
        min-height: 48px;
        /* Ensure minimum height for text */
        background-color: rgba(255, 255, 255, 0.08);
        vertical-align: middle;
        /* Center text vertically */
        display: block;
        /* Full block for proper height */
        box-sizing: border-box;
        /* Include padding in height calculation */
        width: 100%;
        /* Full width of container */
        /* Webkit-specific fixes */
        -webkit-text-fill-color: #ffffff !important;
        -webkit-opacity: 1 !important;
        /* Fix text clipping */
        overflow: visible;
        text-overflow: clip;
    }

    .nlh-ymm-dark-select:hover:not(:disabled) {
        background-color: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .nlh-ymm-dark-select:focus {
        outline: none;
        border-color: #dc3545;
        background-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
        z-index: 999;
    }

    .nlh-ymm-dark-select:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        color: rgba(255, 255, 255, 0.4);
        -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
    }

    /* Ensure option text is visible */
    .nlh-ymm-dark-select option {
        background: #1a1a1a;
        color: #ffffff !important;
        padding: 8px 12px;
        -webkit-text-fill-color: #ffffff;
    }

    .nlh-ymm-dark-select option:checked,
    .nlh-ymm-dark-select option:checked:hover {
        background: #dc3545;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
    }

    .nlh-ymm-dark-select option:hover {
        background: rgba(220, 53, 69, 0.3);
    }

    .nlh-ymm-dark-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nlh-ymm-dark-btn {
        padding: 14px 28px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 0;
    }

    .nlh-ymm-dark-btn--primary {
        background: var(--theme-color);
        color: white;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .nlh-ymm-dark-btn--primary:hover {
        background: linear-gradient(135deg, var(--theme-color) 0%, #dc3545 100%);
        box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
        transform: translateY(-1px);
    }

    .nlh-ymm-dark-btn--secondary {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nlh-ymm-dark-btn--secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .nlh-ymm-dark-btn--link {
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
        padding: 14px 20px;
    }

    .nlh-ymm-dark-btn--link:hover {
        color: #dc3545;
        background: transparent;
        /* Keep background transparent on hover */
    }

    /* Garage Panel Styling */
    .nlh-ymm-garage-panel {
        display: none;
        /* Hidden by default */
        height: 100%;
        max-height: 100%;
        /* Enforce height limit */
        overflow: hidden !important;
        /* NEVER scroll outer panel */
        position: relative;
    }

    /* Garage content wrapper */
    .nlh-garage-menu__content {
        padding: 6px 48px 0 48px;
    }

    .nlh-garage-menu__title {
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 24px 0;
        text-transform: uppercase;
    }

    #nlh-ymm-dark-garage-panel .nlh-garage-menu__list {
        display: flex;
        flex-direction: column;
        gap: 12px;
       max-height: 400px;
        /* Fixed smaller height to ensure footer visible */
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
        margin-bottom: 20px;
        /* Space before footer */
    }


    /* Custom scrollbar for garage list */
    .nlh-garage-menu__list::-webkit-scrollbar {
        width: 6px;
    }

    .nlh-garage-menu__list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .nlh-garage-menu__list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .nlh-garage-menu__list::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .nlh-garage-menu__item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* Hover state - dark with red accent, NO white background */
    .nlh-garage-menu__item:hover {
        background: rgba(220, 53, 69, 0.15);
        /* Red tint */
        border-color: rgba(220, 53, 69, 0.4);
        transform: translateX(4px);
        /* Slide right slightly */
    }

    .nlh-garage-menu__item.is-active {
        border-color: #dc3545;
        background: rgba(220, 53, 69, 0.1);
    }

    /* Keep active items from sliding */
    .nlh-garage-menu__item.is-active:hover {
        transform: none;
    }

    .nlh-garage-menu__name {
        color: #ffffff;
        font-size: 15px;
        font-weight: 500;
    }

    .nlh-garage-menu__actions {
        display: flex;
        gap: 8px;
    }

    .nlh-garage-menu__action {
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .nlh-garage-menu__action--select {
        background: #dc3545;
        color: white;
        border: 0;
    }

    .nlh-garage-menu__action--select:hover:not(:disabled) {
        background: #bd2130;
    }

    .nlh-garage-menu__action--select:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .nlh-garage-menu__action--delete {
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nlh-garage-menu__action--delete:hover {
        background: rgba(220, 53, 69, 0.2);
        border-color: #dc3545;
        color: #dc3545;
    }

    /* Garage footer - compact */
    .nlh-garage-menu__ft {
        padding: 20px 48px 0 48px;
        /* More compact padding */
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center;
        border-top: 0 !important;
    }

    .nlh-garage-menu__link {
        color: #ffffff !important;
        /* Force white text */
        text-decoration: none !important;
        font-size: 15px;
        /* Slightly smaller for better fit */
        font-weight: 700;
        transition: all 0.2s ease;
        padding: 16px 32px;
        /* More padding for height */
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.15);
        /* More visible */
        border: 2px solid rgba(255, 255, 255, 0.3);
        /* More visible border */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        vertical-align: middle;
        /* Center text vertically */
    }

    .nlh-garage-menu__link:hover {
        color: #ffffff;
        background: #dc3545;
        /* Full red background on hover */
        border-color: #dc3545;
        transform: translateY(-1px);
        /* Lift effect */
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    }

    .nlh-garage-menu__empty {
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        padding: 40px 20px;
        font-size: 15px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .nlh-ymm-dark-panel {
            width: calc(100vw - 24px);
            max-height: 80vh;
        }

        .nlh-ymm-dark-content {
            padding: 32px 24px;
        }

        .nlh-ymm-dark-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .nlh-ymm-dark-actions {
            flex-direction: column;
        }

        .nlh-ymm-dark-btn {
            width: 100%;
        }
    }

/* ===== from form-modern.phtml ===== */
/* ===========================================================
   Modern high-end inline YMM selector (scoped)
   =========================================================== */
.nlh-ymm--modern {
    display: inline-block;
    padding: 1.25rem 1.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.96);
}

.nlh-ymm--modern .nlh-ymm__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

/* Field group */
.nlh-ymm--modern .nlh-ymm__select {
    min-width: 9rem;
    flex: 1 1 9rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f9fafb;
    padding: 0 1.75rem 0 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Simple custom caret using background gradient */
.nlh-ymm--modern .nlh-ymm__select {
    background-image:
        linear-gradient(45deg, #111 50%, transparent 50%),
        linear-gradient(135deg, #111 50%, transparent 50%);
    background-position:
        calc(100% - 1.1rem) 50%,
        calc(100% - 0.75rem) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
}

.nlh-ymm--modern .nlh-ymm__select:focus {
    outline: none;
    border-color: #111827;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 0 0 4px rgba(15, 23, 42, 0.06);
}

/* Disabled state */
.nlh-ymm--modern .nlh-ymm__select:disabled {
    cursor: not-allowed;
    color: #9ca3af;
    background: #f3f4f6;
    border-style: dashed;
    opacity: 0.9;
}

/* Buttons row */
.nlh-ymm--modern .nlh-ymm__apply,
.nlh-ymm--modern .nlh-ymm__clear,
.nlh-ymm--modern .nlh-ymm__garage {
    height: 2.75rem;
    padding: 0 1.4rem;
    border-radius: 999px;
    border: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

/* Primary: Apply */
.nlh-ymm--modern .nlh-ymm__apply {
    background: #111827;
    color: #f9fafb;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
}

.nlh-ymm--modern .nlh-ymm__apply:hover {
    background: #020617;
    transform: translateY(-1px);
}

.nlh-ymm--modern .nlh-ymm__apply:disabled {
    background: #4b5563;
    box-shadow: none;
    cursor: not-allowed;
}

/* Secondary: Clear */
.nlh-ymm--modern .nlh-ymm__clear {
    background: transparent;
    color: #4b5563;
    border: 1px solid rgba(148, 163, 184, 0.7);
}

.nlh-ymm--modern .nlh-ymm__clear:hover {
    background: #f3f4f6;
}

/* Tertiary: Garage */
.nlh-ymm--modern .nlh-ymm__garage {
    background: #f9fafb;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.nlh-ymm--modern .nlh-ymm__garage::before {
    content: "\01F698"; /* car emoji */
    margin-right: 0.4rem;
    font-size: 1rem;
}

.nlh-ymm--modern .nlh-ymm__garage:hover {
    background: #eef2ff;
}

/* Active vehicle label */
.nlh-ymm--modern .nlh-ymm__active {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.nlh-ymm--modern .nlh-ymm__active strong {
    color: #111827;
    font-weight: 600;
}

/* Layout tweaks on smaller screens */
@media (max-width: 767px) {
    .nlh-ymm--modern {
        padding: 1rem 1.25rem;
        border-radius: 0.85rem;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    }

    .nlh-ymm--modern .nlh-ymm__form {
        flex-direction: column;
        align-items: stretch;
    }

    .nlh-ymm--modern .nlh-ymm__select,
    .nlh-ymm--modern .nlh-ymm__apply,
    .nlh-ymm--modern .nlh-ymm__clear,
    .nlh-ymm--modern .nlh-ymm__garage {
        width: 100%;
    }

    .nlh-ymm--modern .nlh-ymm__apply,
    .nlh-ymm--modern .nlh-ymm__clear,
    .nlh-ymm--modern .nlh-ymm__garage {
        justify-content: center;
    }
}

/* ===== from form-inline.phtml ===== */

/* ===== from form.phtml ===== */

/* ===== from category-option1-card.phtml ===== */

/* === from form-card-light.phtml (.nlh-ymm-card--light) === */
.nlh-ymm-card--light {
    max-width: 100%;
  }

  .nlh-ymm-card--light .nlh-ymm-card__shell {
    background: radial-gradient(circle at top left, #ffffff 0, #fcfcfc 45%, #fefefe 100%);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    padding: 16px 14px 14px;

    color: #0f172a;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  @media (max-width: 700px) {
     .nlh-ymm-card--light .nlh-ymm-card__shell{
      margin-top:20px;
    }
  }

  .nlh-ymm-card--light .nlh-ymm-card__header {

    justify-content: space-between;
  }

  .nlh-ymm-card--light .nlh-ymm-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--theme-color-darker);
    filter: brightness(0.7);
    margin-bottom: 4px;
  }

  .nlh-ymm-card--light .nlh-ymm-card__eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(to right,
        rgba(191, 191, 191, 0.5),
        rgba(8, 94, 214, 0.1));
  }


  .nlh-ymm-card--light .nlh-ymm-card__title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0f172a;
    text-transform: uppercase;
  }

  .nlh-ymm-card--light .nlh-ymm-card__title-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: linear-gradient(135deg, #f9fafb, #e5e7eb);
  }

  .nlh-ymm-card--light .nlh-ymm-card__subtitle {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.7);
    margin: 8px 0;
  }

  .nlh-ymm-card--light .nlh-ymm {
    padding: 0;
    background: transparent;
    border-bottom: 0;
  }

  .nlh-ymm-card--light .nlh-ymm__form {
    display: block;
    margin-top: 12px;
  }

  .nlh-ymm-card--light .nlh-ymm__active {
    margin: 0;
    font-size: 11px;
    color: inherit;
  }

  .nlh-ymm-card--light .nlh-ymm-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  @media (max-width: 400px) {
    .nlh-ymm-card--light .nlh-ymm-card__grid {
      grid-template-columns: 1fr;
    }
  }

  .nlh-ymm-card--light .nlh-ymm-card__field-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.7);
    margin: 10px 0 6px 0;
  }

  .nlh-ymm-card--light .nlh-ymm-card__field-step {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.8);
    background: #f9fafb;
  }

  .nlh-ymm-card--light .nlh-ymm-card__field-input {
    position: relative;
  }

  .nlh-ymm-card--light .nlh-ymm__select {
    width: 100%;
    min-width: 0;
    padding: 7px 28px 7px 10px;
    background: #f9fafb;
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #0f172a;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }

  .nlh-ymm-card--light .nlh-ymm-card__field-input::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;

    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
  }



  .nlh-ymm-card--light .nlh-ymm-card__actions--split {
    margin: 20px 0 10px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nlh-ymm-card--light .nlh-ymm-card__btn {

    border: none;
    padding: 9px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, background 0.08s ease, border-color 0.08s ease;
  }

  .nlh-ymm-card--light .nlh-ymm-card__btn--primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color-darker));
    font-weight: 500;

  }

  .nlh-ymm-card--light .nlh-ymm-card__btn--ghost {
    background: transparent;
    border: 1px solid #ccc !important;
    color: #0f172a !important;
  }

  .nlh-ymm-card--light .nlh-ymm-card__btn--subtle {
    background: #ddd !important;
    border: 1px dashed rgba(148, 163, 184, 0.9);
    color: #0f172a !important;
  }

  .nlh-ymm-card--light .nlh-ymm-card__btn:hover {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    filter: brightness(1.03);
  }

  .nlh-ymm-card--light .nlh-ymm-card__btn:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(1.1);
  }

  .nlh-ymm-card--light .nlh-ymm-card__status {
    margin-top: 20px;
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nlh-ymm-card--light .nlh-ymm-card__status--has-selection {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(140, 210, 166, 0.45);
    display: none;
  }

  .nlh-ymm-card--light .nlh-ymm-card__status--no-selection {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.45);
  }

  .nlh-ymm-card--light .nlh-ymm-card__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .nlh-ymm-card--light .nlh-ymm-card__status-dot--ok {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  }

  .nlh-ymm-card--light .nlh-ymm-card__status-dot--none {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
  }

  .nlh-ymm-card--light .nlh-ymm-card__status-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 8px;
    opacity: 0.8;
  }

  .nlh-ymm-card--light .nlh-ymm-card__status-text {
    font-weight: 500;
    font-size: 10px;
    display: block;
    /* stop being inline */
    width: 100%;
    /* span fills the row */
    text-align: center;
    /* text centered horizontally */
  }

/* === from form-card.phtml (.nlh-ymm-card--dark) === */
.nlh-ymm-card--dark {
  max-width: 100%;
}
.nlh-ymm-card--dark .nlh-ymm-card__shell {
  background: radial-gradient(circle at top left, #23252b 0, #111217 55%, #08090c 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 14px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  color: #f9fafb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.nlh-ymm-card--dark .nlh-ymm-card__header {

  justify-content: space-between;
}
.nlh-ymm-card--dark .nlh-ymm-card__eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 3px;
}
.nlh-ymm-card--dark .nlh-ymm-card__title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nlh-ymm-card--dark .nlh-ymm-card__title-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.nlh-ymm-card--dark .nlh-ymm-card__subtitle {
  font-size: 10px;
  opacity: 0.72;
  margin-top: 3px;
}
.nlh-ymm-card--dark .nlh-ymm {
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
.nlh-ymm-card--dark .nlh-ymm__form {
  display: block;
  margin-top: 12px;
}
.nlh-ymm-card--dark .nlh-ymm__active {
  margin: 0;
  font-size: 11px;
  color: inherit;
}
.nlh-ymm-card--dark .nlh-ymm-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
@media (max-width: 400px) {
  .nlh-ymm-card--dark .nlh-ymm-card__grid {
    grid-template-columns: 1fr;
  }
}
.nlh-ymm-card--dark .nlh-ymm-card__field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
  margin-bottom: 3px;
}
.nlh-ymm-card--dark .nlh-ymm-card__field-step {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.nlh-ymm-card--dark .nlh-ymm-card__field-input {
  position: relative;
}
.nlh-ymm-card--dark .nlh-ymm__select {
  width: 100%;
  min-width: 0;
  padding: 7px 28px 7px 10px;
  background: rgba(4, 4, 8, 0.9);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f9fafb;
  font-size: 12px;
  line-height: 1.4;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.nlh-ymm-card--dark .nlh-ymm-card__field-input::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}
.nlh-ymm-card--dark .nlh-ymm__select:focus {
  border-color: #f5c245;
  box-shadow: 0 0 0 1px rgba(245, 194, 69, 0.45);
  background: rgba(10, 10, 15, 0.98);
}
.nlh-ymm-card--dark .nlh-ymm-card__actions--split {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.nlh-ymm-card--dark .nlh-ymm-card__btn {
  border-radius: 999px;
  border: none;
  padding: 9px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, background 0.08s ease, border-color 0.08s ease;
}
.nlh-ymm-card--dark .nlh-ymm-card__btn--primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f5c245, #f79b2e);
  color: #111;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.7);
}
.nlh-ymm-card--dark .nlh-ymm-card__btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #f9fafb;
}
.nlh-ymm-card--dark .nlh-ymm-card__btn--subtle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: #f9fafb;
}
.nlh-ymm-card--dark .nlh-ymm-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.75);
  filter: brightness(1.04);
}
.nlh-ymm-card--dark .nlh-ymm-card__btn:active {
  transform: translateY(0);
  box-shadow: none;
  filter: brightness(1);
}
.nlh-ymm-card--dark .nlh-ymm-card__status {
  margin-top: 11px;
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nlh-ymm-card--dark .nlh-ymm-card__status--has-selection {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.nlh-ymm-card--dark .nlh-ymm-card__status--no-selection {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.45);
}
.nlh-ymm-card--dark .nlh-ymm-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.nlh-ymm-card--dark .nlh-ymm-card__status-dot--ok {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.nlh-ymm-card--dark .nlh-ymm-card__status-dot--none {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}
.nlh-ymm-card--dark .nlh-ymm-card__status-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 8px;
  opacity: 0.8;
}
.nlh-ymm-card--dark .nlh-ymm-card__status-text {
  font-weight: 500;
  font-size: 10px;
}

/* === from category-option1-card.phtml (.nlh-ymm-cat-card) ===
   Restored to pixel-exact values from backup
   /home/mvpstore/backups/deep-rebuild/20260524-204737/Fitments/
       view/frontend/templates/ymm/category-option1-card.phtml
   inline <style> block (selectors `#<idBase>-card`). Template wrapper class
   list dropped `nlh-ymm-card--light` so those (now-shared) rules do not
   cascade in and override the originals. */
.nlh-ymm-cat-card {
    max-width: 100%;
    margin: 18px 0;
}

.nlh-ymm-cat-card .nlh-ymm-card__shell {
    background: radial-gradient(circle at top left, #ffffff 0, #fcfcfc 45%, #fefefe 100%);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    padding: 16px 18px 14px;
    color: #0f172a;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nlh-ymm-cat-card .nlh-ymm-card__header {
    justify-content: space-between;
    align-items: flex-start;
}

.nlh-ymm-cat-card .nlh-ymm-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--theme-color-darker);
    filter: brightness(0.7);
    margin-bottom: 4px;
}

.nlh-ymm-cat-card .nlh-ymm-card__eyebrow::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(to right,
            rgba(191, 191, 191, 0.6),
            rgba(8, 94, 214, 0.1));
}

.nlh-ymm-cat-card .nlh-ymm {
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.nlh-ymm-cat-card .nlh-ymm__form {
    display: block;
    margin-top: 12px;
}

/* 4 flexible selects + auto-width actions col */
.nlh-ymm-cat-card .nlh-ymm-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 8px 10px;
}

.nlh-ymm-cat-card .nlh-ymm-card__field--apply {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    justify-self: end;
}

.nlh-ymm-cat-card .nlh-ymm-card__actions-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1100px) {
    .nlh-ymm-cat-card .nlh-ymm-card__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .nlh-ymm-cat-card .nlh-ymm-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .nlh-ymm-cat-card .nlh-ymm-card__grid {
        grid-template-columns: 1fr;
    }

    .nlh-ymm-cat-card .nlh-ymm-card__field--apply {
        justify-content: stretch;
    }

    .nlh-ymm-cat-card .nlh-ymm-card__actions-inline {
        justify-content: stretch;
    }

    .nlh-ymm-cat-card .nlh-ymm-card__actions-inline .nlh-ymm-card__btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

.nlh-ymm-cat-card .nlh-ymm-card__field-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.7);
    margin: 8px 0 3px 0;
}

.nlh-ymm-cat-card .nlh-ymm-card__field-step {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(15, 23, 42, 0.8);
    background: #f9fafb;
}

.nlh-ymm-cat-card .nlh-ymm-card__field-input {
    position: relative;
}

/* Select styling matches the form-card-light backup inline rule
   (`padding: 7px 28px 7px 10px; line-height: 1.4`). Background, border,
   color, font-size, and box-sizing pulled verbatim from the backup.
   `appearance: auto` keeps the native browser arrow (the backup
   category-option1-card.phtml also used `appearance: auto`).
   A previous `padding-bottom: 1%` override on a more specific selector
   was making selects render at ~27px tall — that rule has been removed
   so the padding here is what the browser actually applies. Final
   computed height: ~33px (matches native HTML select look). */
.nlh-ymm-cat-card .nlh-ymm__select {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 7px 28px 7px 10px;
    background: #f9fafb;
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #0f172a;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    appearance: auto;
    -webkit-appearance: auto;
}

.nlh-ymm-cat-card .nlh-ymm__select:focus {
    border-color: var(--theme-color, #e63946);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}

.nlh-ymm-cat-card .nlh-ymm__select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f3f4f6;
}

.nlh-ymm-cat-card .nlh-ymm-card__field-input::after {
    content: none;
}

.nlh-ymm-cat-card .nlh-ymm-card__btn {
    border: none;
    padding: 9px 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, background 0.08s ease, border-color 0.08s ease;
}

.nlh-ymm-cat-card .nlh-ymm-card__btn--primary {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color-darker));
    font-weight: 500;
    color: #fff;
}

.nlh-ymm-cat-card .nlh-ymm-card__btn--secondary {
    background: #464646;
    border: 1px solid #d1d5db;
}

.nlh-ymm-cat-card .nlh-ymm-card__btn:hover {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    filter: brightness(1.03);
}

.nlh-ymm-cat-card .nlh-ymm-card__btn:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(1.08);
}


/* Inline garage panel — light overlay inside the light card */
.nlh-ymm-cat-card .nlh-ymm-card__garage-panel {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__title {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--theme-color-darker, #b8232f);
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__item.is-active {
    border-color: var(--theme-color, #e63946);
    background: rgba(230, 57, 70, 0.05);
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__name {
    font-size: 12px;
    font-weight: 500;
    color: #0f172a;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__actions {
    display: flex;
    gap: 6px;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__action {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.1s ease, background 0.1s ease;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__action--select {
    background: var(--theme-color, #e63946);
    color: #fff;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__action--select:disabled {
    opacity: 0.55;
    cursor: default;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__action--delete {
    background: transparent;
    color: rgba(15, 23, 42, 0.6);
    border-color: #d1d5db;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__action--delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.4);
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__empty {
    padding: 14px 8px;
    text-align: center;
    font-size: 12px;
    color: rgba(15, 23, 42, 0.55);
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__ft {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__link {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(15, 23, 42, 0.7);
    text-decoration: none;
}

.nlh-ymm-cat-card .nlh-ymm-card__garage-panel .nlh-garage-menu__link:hover {
    color: var(--theme-color, #e63946);
}

/* === from form-inline.phtml (.nlh-ymm-inline) === */
/* Do not change existing classes, keep styling intact */
.nlh-ymm-inline { padding: 8px 12px; background:#f6f6f6; border-bottom:1px solid #ddd; }
.nlh-ymm-inline .nlh-ymm__form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nlh-ymm-inline .nlh-ymm__select { min-width:140px; padding:6px 8px; }
.nlh-ymm-inline .nlh-ymm__apply, 
.nlh-ymm-inline .nlh-ymm__clear { padding:6px 10px; cursor:pointer; }
.nlh-ymm-inline .nlh-ymm__active { margin-top:6px; font-size:13px; color:#333; }

/* === from form.phtml (.nlh-ymm-plain) === */
/* Do not change existing classes, keep styling intact */
.nlh-ymm-plain { padding: 8px 12px; background:#f6f6f6; border-bottom:1px solid #ddd; }
.nlh-ymm-plain .nlh-ymm__form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nlh-ymm-plain .nlh-ymm__select { min-width:140px; padding:6px 8px; }
.nlh-ymm-plain .nlh-ymm__apply, 
.nlh-ymm-plain .nlh-ymm__clear { padding:6px 10px; cursor:pointer; }
.nlh-ymm-plain .nlh-ymm__active { margin-top:6px; font-size:13px; color:#333; }

/* ===== Category YMM card visibility rule =====
   When the vehicle-hydrator detects a vehicle in the customer-data section
   it adds `nlh-vehicle-active` to <body>. Hiding the card in that state
   keeps the FILTER BY VEHICLE prompt visible ONLY when the visitor has
   no fitment locked in yet — once they pick one, the card disappears so
   it doesn't take up real estate above the filtered product grid. */
body.nlh-vehicle-active #nlh-ymm-cat-card {
    display: none !important;
}