/**
 * WooCommerce Custom Styles with Tailwind Classes
 */

/* Product Grid */
.woocommerce ul.products {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8;
}

.woocommerce ul.products li.product {
    @apply bg-white rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden relative;
}

.woocommerce ul.products li.product a {
    @apply block no-underline;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    @apply relative;
}

.woocommerce ul.products li.product img {
    @apply w-full h-64 object-cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    @apply text-lg font-semibold text-gray-900 mb-2 px-4 pt-4;
}

.woocommerce ul.products li.product .price {
    @apply text-xl font-bold text-primary-600 px-4 pb-2;
}

.woocommerce ul.products li.product .price del {
    @apply text-gray-400 text-base mr-2;
}

.woocommerce ul.products li.product .price ins {
    @apply no-underline text-red-500;
}

.woocommerce ul.products li.product .button {
    @apply mx-4 mb-4;
}

/* Single Product */
.woocommerce div.product {
    @apply relative;
}

.woocommerce div.product .product_title {
    @apply text-3xl font-bold text-gray-900 mb-4;
}

.woocommerce div.product .price {
    @apply text-2xl font-bold text-primary-600 mb-4;
}

.woocommerce div.product .price del {
    @apply text-gray-400 text-xl mr-3;
}

.woocommerce div.product .price ins {
    @apply no-underline text-red-500;
}

.woocommerce div.product .woocommerce-product-rating {
    @apply flex items-center mb-4;
}

.woocommerce div.product .star-rating {
    @apply text-yellow-400 mr-2;
}

.woocommerce div.product .woocommerce-review-link {
    @apply text-sm text-gray-600 hover:text-primary-600;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    @apply text-gray-700 mb-6 pb-6 border-b border-gray-200;
}

/* Add to Cart Form */
.woocommerce div.product form.cart {
    @apply mb-6 pb-6 border-b border-gray-200;
}

.woocommerce div.product form.cart .variations {
    @apply mb-4;
}

.woocommerce div.product form.cart .variations td {
    @apply py-2;
}

.woocommerce div.product form.cart .variations label {
    @apply font-medium text-gray-700 mr-4;
}

.woocommerce div.product form.cart .variations select {
    @apply px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.woocommerce div.product form.cart .quantity {
    @apply inline-block mr-4;
}

.woocommerce div.product form.cart .quantity input {
    @apply w-20 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    @apply px-8 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-semibold;
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs {
    @apply mt-8;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    @apply flex border-b border-gray-200 mb-6;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    @apply mr-1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    @apply inline-block px-6 py-3 text-gray-700 hover:text-primary-600 font-medium transition-colors border-b-2 border-transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    @apply text-primary-600 border-primary-600;
}

.woocommerce div.product .woocommerce-tabs .panel {
    @apply p-6 bg-white rounded-lg;
}

/* Cart Table */
.woocommerce table.shop_table {
    @apply w-full bg-white;
}

.woocommerce table.shop_table th {
    @apply px-4 py-3 text-left font-semibold text-gray-700 bg-gray-50 border-b border-gray-200;
}

.woocommerce table.shop_table td {
    @apply px-4 py-4 border-b border-gray-100;
}

.woocommerce table.shop_table .product-thumbnail img {
    @apply w-20 h-20 object-cover rounded-lg;
}

/* Cart Totals */
.woocommerce .cart_totals {
    @apply bg-white rounded-lg shadow-sm p-6;
}

.woocommerce .cart_totals h2 {
    @apply text-xl font-bold mb-4 pb-2 border-b border-gray-200;
}

.woocommerce .cart_totals table {
    @apply w-full;
}

.woocommerce .cart_totals table th {
    @apply text-left py-2 font-medium text-gray-700;
}

.woocommerce .cart_totals table td {
    @apply text-right py-2;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    @apply text-xl font-bold text-primary-600 pt-4 border-t border-gray-200;
}

.woocommerce .cart_totals .wc-proceed-to-checkout a {
    @apply block w-full px-6 py-3 bg-primary-600 text-white text-center rounded-lg hover:bg-primary-700 transition-colors font-semibold;
}

/* Messages & Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    @apply mb-4 p-4 rounded-lg flex items-start;
}

.woocommerce-message {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.woocommerce-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
}

.woocommerce-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    @apply hidden;
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    @apply inline-flex items-center justify-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium no-underline;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    @apply bg-gray-600 hover:bg-gray-700;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
    @apply mt-8 flex justify-center;
}

.woocommerce nav.woocommerce-pagination ul {
    @apply flex space-x-2;
}

.woocommerce nav.woocommerce-pagination ul li {
    @apply inline-block;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    @apply inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors;
}

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

/* Sorting Dropdown */
.woocommerce .woocommerce-ordering select {
    @apply px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white;
}

/* Rating Stars */
.woocommerce .star-rating {
    @apply relative inline-block h-5 leading-5 text-yellow-400;
}

.woocommerce .star-rating::before {
    content: "☆☆☆☆☆";
    @apply absolute top-0 left-0 inline-block;
}

.woocommerce .star-rating span {
    @apply overflow-hidden absolute top-0 left-0 inline-block;
}

.woocommerce .star-rating span::before {
    content: "★★★★★";
    @apply top-0 left-0 absolute;
}

/* Product Categories Widget */
.woocommerce .widget_product_categories ul {
    @apply space-y-2;
}

.woocommerce .widget_product_categories ul li {
    @apply py-1;
}

.woocommerce .widget_product_categories ul li a {
    @apply text-gray-700 hover:text-primary-600 transition-colors;
}

.woocommerce .widget_product_categories ul li.current-cat > a {
    @apply text-primary-600 font-semibold;
}

/* Price Filter Widget */
.woocommerce .widget_price_filter .price_slider_wrapper {
    @apply mb-4;
}

.woocommerce .widget_price_filter .ui-slider {
    @apply relative h-2 bg-gray-300 rounded-full;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    @apply absolute h-2 bg-primary-600 rounded-full;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    @apply absolute w-4 h-4 bg-primary-600 rounded-full -mt-1 cursor-pointer;
}

.woocommerce .widget_price_filter .price_slider_amount {
    @apply flex justify-between items-center;
}

.woocommerce .widget_price_filter .price_slider_amount .button {
    @apply px-4 py-2;
}

/* Mini Cart Widget */
.woocommerce .widget_shopping_cart .cart_list li {
    @apply flex items-center py-3 border-b border-gray-100;
}

.woocommerce .widget_shopping_cart .cart_list li img {
    @apply w-12 h-12 object-cover rounded mr-3;
}

.woocommerce .widget_shopping_cart .total {
    @apply flex justify-between items-center py-3 border-t border-gray-200 font-semibold;
}

.woocommerce .widget_shopping_cart .buttons {
    @apply flex space-x-2 mt-4;
}

.woocommerce .widget_shopping_cart .buttons a {
    @apply flex-1 text-center;
}