/* Fonts */
/* -----------------------------------
   Tailwind Base
----------------------------------- */
@tailwind base;

/* WooCommerce reset fixes inside Tailwind */
.woocommerce table {
    @apply w-full border-collapse;
}

.woocommerce div.product div.images img,
.woocommerce div.product div.summary img {
    @apply rounded-lg;
}

/* -----------------------------------
   Tailwind Components
----------------------------------- */
@tailwind components;

/* Buttons (Global Woo Button Styling) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    @apply bg-gray-900 text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition;
}

/* Quantity Box */
.woocommerce .quantity input.qty {
    @apply border rounded-lg px-3 py-2 w-16 text-center;
}

/* Sale Badge */
.woocommerce span.onsale {
    @apply bg-red-600 text-white px-2 py-1 rounded-md text-xs font-semibold absolute top-2 left-2;
}

/* Product Grid Card */
.product-card {
    @apply border rounded-xl shadow-sm hover:shadow-md transition p-4 bg-white;
}

.product-card img {
    @apply rounded-lg;
}

.product-card-title {
    @apply text-lg font-semibold text-gray-800 mt-3;
}

.product-card-price {
    @apply text-gray-900 font-semibold mt-2;
}

/* Add to cart button inside card */
.product-card-btn {
    @apply mt-3 w-full text-center bg-gray-900 text-white py-2 rounded-lg hover:bg-gray-800 transition;
}

/* -----------------------------------
   Tailwind Utilities
----------------------------------- */
@tailwind utilities;

/* Remove Woo Pagination Ugly Style */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    @apply border border-gray-300 rounded-lg px-3 py-1 mx-1;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    @apply bg-gray-900 text-white border-gray-900;
}