:root {
    /* Orunk Primary Colors (from header.php) */
    --ork-primary: #2563eb; /* A primary blue */
    --ork-secondary: #7c3aed; /* A secondary purple */

    /* General UI Colors (based on bin-lookup-api.php) */
    --ui-blue: #2563eb;
    --ui-indigo: #4f46e5;
    --ui-purple: #7c3aed;
    --ui-dark: #0f172a;
    --ui-light: #f8fafc;
    --ui-green: #10b981;
    --ui-orange: #f59e0b;
    --ui-red: #ef4444;

    /* Gray Scale (standard Tailwind/modern defaults) */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --text-white: #ffffff;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background-color: var(--ui-light); /* Match main homepage background */
    color: var(--ui-dark); /* Set a default dark text color */
}

.product-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.05); /* Softer initial shadow */
}
.product-card:hover {
    transform: translateY(-5px); /* Less aggressive hover lift */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* More pronounced hover shadow */
}
.filter-btn {
    transition: all 0.2s ease;
    border: 1px solid var(--gray-300); /* Use new gray variable */
    background-color: white;
    color: var(--gray-700); /* Use new gray variable */
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow */
}
.filter-btn:hover:not(.active) {
    background-color: var(--gray-100); /* Use new gray variable */
    border-color: var(--gray-400); /* Use new gray variable */
    color: var(--ui-blue); /* Use new primary blue */
}
.filter-btn.active {
    background-color: var(--ui-blue); /* Active uses primary blue */
    color: white;
    font-weight: 600;
    border-color: var(--ui-blue);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3); /* Stronger shadow for active */
}

.price-tag {
    display: inline-block;
    padding: 0.2rem 0.65rem; /* Adjusted padding */
    font-size: 0.65rem; /* text-xs equivalent */
    font-weight: 700;
    border-radius: 9999px;
    color: var(--text-white);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--ui-blue); /* Default to primary blue */
}
/* You can add more specific price-tag colors if needed, e.g.: */
/* .price-tag-ONE-TIME { background-color: var(--ui-green); } */
/* .price-tag-SUBSCRIPTION { background-color: var(--ui-purple); } */

.category-icon-display {
    width: 36px; /* Slightly smaller */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1rem; /* Slightly smaller icon */
    transition: all 0.2s ease-in-out;
    background-color: var(--gray-100); /* Consistent background */
    color: var(--gray-600); /* Consistent color */
}

.loading-spinner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 0.75rem;
}
.product-grid-container.loading .loading-spinner-overlay { display: flex; }
.loading-spinner {
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: var(--ui-blue); /* Use new primary blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#category-tabs-container::-webkit-scrollbar { height: 4px; }
#category-tabs-container::-webkit-scrollbar-thumb { background: var(--orunk-gray-300); border-radius: 10px; }

/*
 * Specific styling for the product archive's search input and select dropdown.
 * By using the .product-search-container and #product-controls IDs, we make these
 * rules more specific, preventing them from conflicting with other elements on the site.
 */
.product-search-container input[type="search"],
#product-controls select {
    border-color: var(--gray-300);
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.product-search-container input[type="search"]:focus,
#product-controls select:focus {
    border-color: var(--ui-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    background-color: white;
    outline: none;
}

/*
 * FIX: This rule explicitly sets the color for the search icon inside our
 * custom container, ensuring it is always visible and overrides any conflicting
 * theme styles.
 */
.product-search-container .fa-search {
    color: var(--gray-400);
}

.btn-cta {
    background: linear-gradient(to right, var(--ui-blue), var(--ui-purple)); /* Gradient background */
    color: white;
    font-weight: 500; /* font-medium */
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3); /* Stronger shadow */
    transition: all 0.15s ease-in-out;
    border: none; /* Remove border if any */
}
.btn-cta:hover {
    background: linear-gradient(to right, var(--ork-primary), var(--ork-secondary)); /* Slightly darker gradient on hover */
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4); /* More pronounced shadow on hover */
}

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.star-rating {
    display: inline-flex;
    color: var(--ui-orange); /* Use new orange variable */
}
.star-rating i {
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.global-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 24px;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
    min-width: 300px;
    text-align: center;
}
.global-notification.show { opacity: 1; top: 40px; }
.global-notification.error { background-color: var(--ui-red); }
.global-notification.success { background-color: var(--ui-green); }