@layer components {
    .card {
        @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
    }

    .link {
        @apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
    }

    .product-grid {
        @apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
    }

    .button-gray {
        @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
        hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
        focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
        dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
    }

    .page {
        @apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
    }

    .navbar-bg {
        @apply bg-white dark:bg-gray-800 antialiased;
    }

    .navbar-content {
        @apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
    }

    .navbar-align {
        @apply flex items-center justify-between;
    }

    .navbar-categories {
        @apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
    }

    .navbar-web-title {
        @apply text-xl font-semibold text-gray-900 dark:text-white;
    }

    .navbar-title {
        @apply flex items-center space-x-8;
    }

    .navbar-category-link {
        @apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
    }

    .navbar-dropdown-menu {
        @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3  px-4 mt-4;
    }

    .navbar-dropdown-menu-list {
        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
    }

    .navbar-dropdown-menu-list-items {
        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
    }

    .navbar-dropdown-menu-title {
        @apply hover:text-primary-700 dark:hover:text-primary-500;
    }

    .icon-button {
        @apply flex text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
    }

    .link-button {
        @apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
    }

    .cart-navbar-floating {
        @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
    }
}