/* browse equipment */
.mb-4 {
    margin-bottom: 1rem;
}
/* --- Desktop Layout (Default: hidden, md:grid) --- */
.desktop-layout {
    display: none; /* Hidden by default */
}

@media (min-width: 768px) { /* md breakpoint */
    .desktop-layout {
        display: grid; /* md:grid */
        grid-template-columns: repeat(5, 1fr); /* md:grid-cols-5 */
        gap: 1.5rem; /* gap-6 */
    }
}

/* Left Container - Category List */
.category-list-panel {
    grid-column: span 2 / span 2; /* col-span-2 */
    background-color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    padding: 1rem; /* p-4 */
    height: 580px; /* h-[550px] */
    overflow-y: auto; /* Enable scrolling for long lists */
}

.category-list-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
}

.category-buttons-wrapper {
    /* space-y-1 */
}

    .category-buttons-wrapper > *:not(:last-child) {
        margin-bottom: 0.25rem; /* space-y-1 */
    }

.category-button {
    width: 100%; /* w-full */
    text-align: left; /* text-left */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
    border: none;
    background-color: transparent; /* Default transparent */
    cursor: pointer;
    color: #374151; /* text-gray-700 */
}

.category-button-text {
    font-weight: 500; /* font-medium */
    font-size: 0.875rem; /* text-sm */
}

.category-button.active {
    background-color: var(--daikin-blue); /* bg-[hsl(var(--daikin-blue))] */
    color: #fff; /* text-white */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
}

.category-button:not(.active):hover {
    background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/* Right Container - Selected Category Details */
.category-details-panel {
    grid-column: span 3 / span 3; /* col-span-3 */
    background-color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    padding: 1rem; /* p-4 */
    height: 580px; /* h-[550px] */
    overflow-y: auto; /* overflow-y-auto */
}

.category-details-content {
    display: none; /* hidden by default */
}

    .category-details-content.active {
        display: block; /* active state */
    }

.details-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.details-description {
    color: var(--gray-600); /* text-gray-600 */
    line-height: 1.625; /* leading-relaxed */
    font-size: 0.875rem; /* text-sm */
}

.details-subtitle {
    font-size: 1rem;
    font-weight: 600; /* font-semibold */
    color: var(--daikin-blue); /* text-[hsl(var(--daikin-blue))] */
    margin-bottom: 0.5rem; /* mb-2 */
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--gray-600); /* text-gray-600 */
    /* space-y-1 */
}

    .details-list li:not(:last-child) {
        margin-bottom: 0.25rem; /* space-y-1 */
    }

.details-list-item {
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem; /* text-sm */
}

.details-bullet {
    color: var(--daikin-blue); /* text-[hsl(var(--daikin-blue))] */
    margin-right: 0.5rem; /* mr-2 */
    flex-shrink: 0;
}

.details-text {
    color: var(--gray-600); /* text-gray-600 */
    font-size: 0.875rem; /* text-sm */
}

.brands-placeholder {
    min-height: 2rem;
    height: auto; /* h-8 */
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    border-radius: 0.25rem; /* rounded */
    display: flex;
    align-items: center;
    padding: 0.25rem; /* px-3 */
    gap: 1rem;
    justify-content: center;
}

/*.brands-placeholder img {
    width: 90px;
    height: auto;
    padding: 0.5rem;
    border: 1px solid var(--gray-400);
    border-radius: 0.5rem;
}*/

.brands-placeholder-text {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
}

.details-buttons-group {
    display: flex;
    gap: 0.5rem; /* gap-2 */
}

.details-button-outline {
    background-color: transparent;
    border: 1px solid #d1d5db; /* Common light border */
    color: var(--gray-600); /* Common text color for outline buttons */
}

.details-button-outline:hover {
    background-color: #f3f4f6; /* Subtle hover */
}

.details-button-filled {
    background-color: var(--daikin-blue); /* bg-[hsl(var(--daikin-blue))] */
    color: #fff; /* text-white */
}

    .details-button-filled:hover {
        background-color: rgba(0, 94, 184, 0.9); /* hover:bg-[hsl(var(--daikin-blue))]/90 */
    }

.details-button-outline,
.details-button-filled {
    padding: 0.5rem 0.75rem; /* px-3 py-2 (for sm size) */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold (common for buttons) */
    border-radius: 0.5rem; /* rounded-lg */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.brands-placeholder :is(img, a) {
    width: 64px;
    height: 32px;
    opacity: 0.7;
    object-fit: contain;
    flex-shrink: 0;
}

.brands-placeholder img:hover {
    opacity: 1;
}

:is(.category-details-content, .mobile-details-list-section) ul {
    list-style-type: disc;
    padding-left: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--daikin-blue);
}

:is(.category-details-content, .mobile-details-list-section) ul li {
    color: var(--gray-600);
    margin: 8px 0px;
}

:is(.category-details-content, .mobile-details-list-section) ul li::marker {
    color: var(--flamingo);
}

.details-button-icon {
    height: 0.75rem; /* h-3 */
    width: 0.75rem; /* w-3 */
    margin-right: 0.25rem; /* mr-1 */
    stroke: currentColor;
}


/* --- Mobile Layout (Hidden on desktop by default) --- */
.mobile-layout {
    display: block; /* Displayed by default on mobile */
}

@media (min-width: 768px) { /* md breakpoint */
    .mobile-layout {
        display: none; /* hidden on desktop */
    }
}

.mobile-select-wrapper {
    margin-bottom: 1rem; /* mb-4 */
}

.mobile-category-select {
    width: 100%; /* w-full */
    padding: 0.75rem; /* p-3 */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #fff; /* bg-white */
    color: #1f2937; /* text-gray-800 */
    font-weight: 500; /* font-medium */
    font-size: 0.875rem; /* text-sm */
    /* Remove default arrow in some browsers and add custom one if needed */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("/images/default-source/refrigeration/chev-down.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Adjust padding for custom arrow */
}

.mobile-category-details-panel {
    background-color: #fff; /* bg-white */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* Card p-4 assumed from React code */
}

.mobile-category-details-content {
    display: none; /* hidden by default */
}

    .mobile-category-details-content.active {
        display: block; /* active state */
    }

.mobile-details-subtitle {
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
    font-size: 0.875rem; /* text-sm */
}

.mobile-details-text {
    color: var(--gray-600); /* text-gray-600 */
    font-size: 0.875rem; /* text-sm */
}

.mobile-details-list-section {
    /* Mimics space-y-3 mb-4 */
    margin-bottom: 1rem;
}

    .mobile-details-list-section > *:not(:last-child) {
        margin-bottom: 0.75rem; /* space-y-3 */
    }

.mobile-details-label {
    font-weight: 600; /* font-semibold */
    font-size: 0.75rem; /* text-xs */
    color: #1f2937; /* text-gray-800 */
}

.mobile-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--gray-600); /* text-gray-600 */
    margin-top: 0.25rem; /* mt-1 */
    /* space-y-1 */
}

    .mobile-details-list li:not(:last-child) {
        margin-bottom: 0.25rem; /* space-y-1 */
    }

.mobile-details-list-item {
    display: flex;
    align-items: flex-start;
    font-size: 0.75rem; /* text-xs */
}

.mobile-details-bullet {
    color: #005EB8; /* text-daikin-blue */
    margin-right: 0.25rem; /* mr-1 */
    flex-shrink: 0;
}

.mobile-details-buttons-group {
    display: flex;
    flex-direction: column; /* flex-col */
    gap: 0.5rem; /* gap-2 */
}

.mobile-details-button-outline,
.mobile-details-button-filled {
    width: 100%; /* w-full */
    padding: 0.6rem 0.75rem; /* px-3 py-2 (sm size) */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-semibold */
    border-radius: 6px; /* rounded-lg */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.mobile-details-button-outline {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: var(--gray-600);
}

    .mobile-details-button-outline:hover {
        background-color: #f3f4f6;
    }

.mobile-details-button-filled {
    background-color: #005EB8; /* bg-[hsl(var(--daikin-blue))] */
    color: #fff;
    border: 1px solid transparent; /* Ensure button has border */
}

    .mobile-details-button-filled:hover {
        background-color: rgba(0, 94, 184, 0.9); /* hover:bg-[hsl(var(--daikin-blue))]/90 */
    }

.mobile-details-button-icon {
    height: 0.75rem; /* h-3 */
    width: 0.75rem; /* w-3 */
    margin-right: 0.25rem; /* mr-1 */
    stroke: currentColor;
}

.brands-placeholder {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    min-height: 60px; /* adjust as needed */
}

.brands-marquee {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 12s linear infinite;
    gap: 1.5rem;
}

.brand_footnote {
    font-size: 0.725rem;
    font-style: italic;
    display: inline-block;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(20%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* browse equipment end */

@media (min-width: 767px) {
    .starred-brands-list {
        position: relative;
        top: -10px;
    }
}