/*
Theme Name: GadgetHike_TW_1
Theme URI: https://example.com/gadgethike
Author: Your Name/AI Assistant
Author URI: https://example.com
Description: A responsive, SEO-friendly, and lightweight e-commerce WordPress theme designed for gadget stores, inspired by TechlandBD.com.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gadgethike
Tags: e-commerce, woocommerce, responsive, custom-logo, custom-menu, featured-images, block-patterns, full-site-editing, translation-ready
*/

/* Basic CSS for initial setup - more styling will be added later */
body {
    font-family: 'Inter', sans-serif; /* Using Inter font as per instructions */
    /* Tailwind classes for basic text and background are now largely overridden by Customizer CSS */
    /* @apply text-gray-800 bg-gray-50; */
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Basic styling for content area */
.site-content {
    @apply container mx-auto px-4 py-8;
}

/* Clearfix for floats if needed (though Tailwind's flex/grid often negate this) */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Accessibility: Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Quick View Modal Overlay and Content Styling */
#gadgethike-quick-view-modal {
    /* Tailwind classes for fixed, inset-0, bg-black, bg-opacity-50, flex, items-center, justify-center, z-[9998], hidden, opacity-0, transition-opacity, duration-300 */
}

#gadgethike-quick-view-modal .quick-view-content {
    /* Tailwind classes for bg-white, rounded-lg, shadow-xl, relative, w-11/12, md:w-3/4, lg:w-2/3, xl:w-1/2, max-h-[90vh] overflow-y-auto, p-6, lg:p-8, transform, scale-95, transition-transform, duration-300 */
}

#gadgethike-quick-view-modal .close-quick-view {
    /* Tailwind classes for absolute, top-3, right-3, text-gray-500, hover:text-gray-800, text-2xl, focus:outline-none */
}

/* Hide WooCommerce default "View Cart" button after add to cart in quick view */
.woocommerce-message .button.wc-forward {
    display: none !important;
}

/* Custom WooCommerce Notice Styling */
.gadgethike-wc-notice {
    /* Base styling from functions.php: bg-*, text-*, border-l-4, border-*, p-4, rounded-md, shadow-sm, mb-4, flex, items-center */
    animation: fadeOutNotice 0.5s ease-out 5s forwards; /* Fade out after 5 seconds */
}

.gadgethike-wc-notice .close-notice-btn {
    cursor: pointer;
}


.woocommerce div.product .product_title {
    clear: none;
    margin-top: 0;
    padding: 0;
    font-size: 30px;
}



.compact-product-item .percentage-badge {
    line-height: 1;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    top: 0.5rem;
    left: 0.5rem;
}


.absolute {
    position: static;
}





.flex-shrink-0 {
    max-width: 300px;
}





@keyframes fadeOutNotice {
    from { opacity: 1; }
    to { opacity: 0; display: none; }
}

/* Back to Top Button Styling */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--gadgethike-primary-color);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 9999px; /* Fully rounded */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1000;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background-color: var(--gadgethike-primary-color); /* Maintain color on hover */
    filter: brightness(90%); /* Darken slightly on hover */
}

/* --- ARCHIVE PAGE CSS (Overriding WooCommerce Defaults) --- */

/* Top Description Area */
.woocommerce-products-header__description {
    @apply bg-white rounded-lg shadow-md p-6 mb-8;
}
.woocommerce-products-header__description h1 {
    @apply text-2xl font-bold text-gray-800 mb-4;
}
.woocommerce-products-header__description p {
    @apply text-gray-700 text-base leading-relaxed;
}

/* Brand/Category Filter Chips (if implemented as buttons/links) */
.archive-brand-filters {
    @apply flex flex-wrap gap-2 mb-8;
}
.archive-brand-filters a {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-blue-100 hover:text-blue-700 transition-colors duration-200 text-sm;
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
}
.archive-brand-filters a.active {
    @apply bg-blue-600 text-white border-blue-600;
}


/* Shop Header (Result Count, Ordering, View Toggle) */
.woocommerce-products-header {
    @apply flex flex-col md:flex-row justify-between items-start md:items-center mb-6;
}

.woocommerce-result-count {
    @apply text-sm text-gray-600 mb-4 md:mb-0;
}

.woocommerce-ordering {
    @apply relative;
}

.woocommerce-ordering select {
    @apply block w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 appearance-none pr-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

/* View Toggle Buttons (Grid/List) */
.shop-view-toggle {
    @apply flex ml-4;
}
.shop-view-toggle button {
    @apply p-2 border border-gray-300 text-gray-600 hover:bg-gray-100 transition-colors duration-200;
}
.shop-view-toggle button:first-child {
    @apply rounded-l-md;
}
.shop-view-toggle button:last-child {
    @apply rounded-r-md;
}
.shop-view-toggle button.active {
    @apply bg-blue-600 text-white border-blue-600;
}


/* Product Grid Wrapper */
/* The grid classes are now directly applied to ul.products via functions.php filter */
/* .products-grid-wrapper { } */


/* Individual Product Card Overrides (content-product.php) */
.product-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden flex flex-col; /* Removed hover transform here */
    position: relative; /* For badges */
}
/* Add hover zoom effect to the image */
.product-card .woocommerce-LoopProduct-link img {
    @apply w-full h-48 object-contain p-4; /* Ensure image fits and has padding */
    transition: transform 0.3s ease-in-out; /* Smooth transition for zoom */
}
.product-card:hover .woocommerce-LoopProduct-link img {
    transform: scale(1.05); /* Zoom in 5% on hover */
}


.product-card .product-info {
    @apply p-4 flex-grow flex flex-col justify-between;
}

.product-card .woocommerce-loop-product__title {
    @apply text-lg font-semibold mb-2 line-clamp-2;
}
.product-card .woocommerce-loop-product__title a {
    @apply text-gray-900 hover:text-blue-600 transition-colors duration-200;
}

.product-card .price {
    @apply text-xl font-bold text-gray-900; /* Make price stand out */
}

.product-card .price ins {
    @apply no-underline; /* Remove underline from sale price */
}

.product-card .price del {
    @apply text-gray-500 line-through text-sm ml-2; /* Style old price */
}

.product-card .star-rating {
    @apply text-yellow-500; /* Color stars */
    font-size: 0.9rem; /* Adjust star size */
    margin-bottom: 0.5rem; /* Space between rating and price */
}
.product-card .star-rating span {
    color: inherit; /* Inherit color for filled stars */
}
.product-card .star-rating::before {
    color: #cbd5e1; /* Light gray for empty stars */
}

/* Product Actions (Buttons below price/rating) */
.product-card .product-actions .add-to-cart-btn {
    @apply bg-blue-600 text-white py-2 px-4 rounded-md text-center hover:bg-blue-700 transition-colors duration-200 w-full;
}

.product-card .product-actions .quick-view-button,
.product-card .product-actions .compare-button,
.product-card .product-actions .wishlist-button {
    @apply flex items-center justify-center text-gray-600 hover:text-blue-600 transition-colors duration-200 focus:outline-none p-2 rounded-md;
    flex-grow: 1; /* Distribute space evenly */
}
.product-card .product-actions .compare-button.compared,
.product-card .product-actions .wishlist-button.wished {
    @apply text-blue-600 font-semibold; /* Indicate active state */
}
.product-card .product-actions .wishlist-button.wished i {
    @apply text-red-500; /* Red heart for wished items */
}

/* Sale Flash Badge on Product Card Image */
.product-card .onsale {
    @apply bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full absolute top-3 left-3 z-10;
    min-width: 40px; /* Ensure badge is visible */
    text-align: center;
    line-height: 1;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Save Badge (similar to Techland's "Save: X") */
.product-card .save-badge {
    @apply bg-gray-900 text-white text-xs font-bold px-3 py-1 rounded-full absolute top-3 right-3 z-10;
    min-width: 40px;
    text-align: center;
    line-height: 1;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
/* Ensure the save badge doesn't overlap the sale badge if both are present */
.product-card .onsale + .save-badge {
    left: auto; /* Reset left position */
    right: 3rem; /* Position to the right of the sale badge or adjust as needed */
}


/* Pagination Styling */
.woocommerce-pagination ul.page-numbers {
    @apply flex justify-center space-x-2 mt-8;
}

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

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    @apply block px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-blue-100 hover:text-blue-700 transition-colors duration-200;
}

.woocommerce-pagination ul.page-numbers li span.current {
    @apply bg-blue-600 text-white border-blue-600;
}

.woocommerce-pagination ul.page-numbers li .dots {
    @apply border-transparent bg-transparent cursor-default;
}

/* Specific override for the main product grid to ensure it's a grid */
/* This ensures functions.php's injected grid classes work as expected */
ul.products.grid {
    display: block;
    columns: 1;
    /* Tailwind classes from functions.php will handle the responsive columns */
}

/* WooCommerce Widgets (e.g., Layered Nav, Price Filter) */
.widget ul.woocommerce-widget-layered-nav-list,
.widget ul.product-categories,
.widget ul.product-tag-cloud {
    @apply list-none p-0 m-0;
}

.widget ul.woocommerce-widget-layered-nav-list li,
.widget ul.product-categories li,
.widget ul.product-tag-cloud li {
    @apply mb-2 last:mb-0;
}

.widget ul.woocommerce-widget-layered-nav-list li a,
.widget ul.product-categories li a {
    @apply text-gray-700 hover:text-blue-600 transition-colors duration-200 flex items-center;
}

.widget ul.woocommerce-widget-layered-nav-list li a .count,
.widget ul.product-categories li a .count {
    @apply ml-auto text-gray-500 text-sm;
}

.widget .price_slider_wrapper .price_slider {
    @apply my-4; /* Add some margin to the price slider */
}

.widget .price_slider_amount .button {
    @apply mt-4; /* Add margin to the filter button */
}

.widget .price_slider_amount .price_label {
    @apply text-gray-700 text-sm;
}

/* Price Filter specific styling */
.widget_price_filter .price_slider_amount {
    @apply flex justify-between items-center mt-2 text-sm text-gray-700;
}
.widget_price_filter .ui-slider .ui-slider-range {
    background: var(--gadgethike-primary-color); /* Color the slider range */
}
.widget_price_filter .ui-slider .ui-slider-handle {
    background: var(--gadgethike-primary-color); /* Color the slider handles */
    border-color: var(--gadgethike-primary-color);
}

/* Layered Nav (Attribute) filter styling */
.woocommerce-widget-layered-nav-list li.chosen a {
    @apply font-semibold text-blue-600; /* Highlight active filters */
}

/* Custom styling for the "Clear All" filters button */
.clear-filters-button {
    @apply bg-red-500 text-white px-4 py-2 rounded-md text-sm hover:bg-red-600 transition-colors duration-200 mt-4;
}

/* --- Home Page Compact Product List Styling --- */
.product-column {
    /* Styles applied in front-page.php: bg-white rounded-lg shadow-md p-6 */
}

.product-column h2 {
    @apply border-b border-gray-200 pb-4 mb-4; /* Separator for section titles */
}

.compact-product-item {
    @apply relative flex items-center mb-4 p-3 rounded-lg;
    border: 1px solid transparent; /* Default transparent border */
}

.compact-product-item:hover {
    @apply bg-gray-50; /* Hover background */
    border-color: #e5e7eb; /* Light border on hover */
}

.compact-product-item .percentage-badge {
    /* Styles applied in content-product-list-compact.php: bg-red-600 text-white text-xs font-bold px-2 py-0.5 rounded-md absolute -top-1 -left-1 z-10 */
    line-height: 1; /* Adjust line height for better vertical centering */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    top: 0.5rem; /* Adjusted positioning */
    left: 0.5rem; /* Adjusted positioning */
}

.compact-product-item .flex-shrink-0 img {
    @apply w-16 h-16 object-contain rounded-md;
    transition: transform 0.3s ease-in-out; /* Add transition for image zoom */
}
.compact-product-item:hover .flex-shrink-0 img {
    transform: scale(1.1); /* Zoom in 10% on hover */
}


.compact-product-item .flex-shrink-0 .fa-image {
    @apply text-2xl; /* Size for placeholder icon */
}

.compact-product-item h3 a {
    @apply text-gray-800 hover:text-blue-600 transition-colors duration-200;
}

.compact-product-item .star-rating {
    @apply text-yellow-500 text-sm;
}

.compact-product-item .price {
    @apply text-base font-bold text-gray-900;
}

.compact-product-item .price del {
    @apply text-gray-500 line-through text-xs ml-1; /* Smaller old price */
}

.flash-sale-section {
    @apply bg-gray-50 py-12 relative;
}

.flash-sale-section h2 {
    @apply mb-6;
}

/* Styles for global navigation buttons */
.flash-sale-swiper-prev-global,
.flash-sale-swiper-next-global {
    @apply bg-gray-200 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.flash-sale-swiper-prev-global:hover,
.flash-sale-swiper-next-global:hover {
    @apply bg-gray-300;
}
.flash-sale-swiper-prev-global {
    left: 1rem;
}
.flash-sale-swiper-next-global {
    right: 1rem;
}
.flash-sale-swiper-prev-global::after,
.flash-sale-swiper-next-global::after {
    font-size: 1rem;
    color: inherit;
}

.flash-sale-slider .swiper-slide {
    @apply w-64 md:w-72 lg:w-80;
    flex-shrink: 0;
}

.flash-sale-product-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden p-4 relative flex flex-col h-full;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.flash-sale-product-card:hover {
    @apply shadow-xl transform -translate-y-1;
}

.flash-sale-product-card .flash-sale-badge {
    @apply bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full absolute top-3 left-3 z-10 flex items-center;
    top: 0.5rem;
    left: 0.5rem;
}

.flash-sale-product-card .stock-left-badge {
    @apply bg-yellow-500 text-gray-900 text-xs font-bold px-3 py-1 rounded-full absolute top-3 right-3 z-10;
}

.flash-sale-product-card img {
    @apply w-full h-40 object-contain mx-auto;
    transition: transform 0.3s ease-in-out;
}
.flash-sale-product-card:hover img {
    transform: scale(1.05);
}

.flash-sale-product-card h3 {
    @apply text-base font-semibold mt-3 mb-2 line-clamp-2;
}
.flash-sale-product-card h3 a {
    @apply text-gray-900 hover:text-blue-600 transition-colors duration-200;
}

.flash-sale-product-card .price {
    @apply text-lg font-bold text-gray-900 text-center mb-3;
}
.flash-sale-product-card .price del {
    @apply text-gray-500 line-through text-sm ml-1;
}

.flash-sale-product-card .add-to-cart-btn {
    @apply bg-red-600 text-white py-2 px-4 rounded-md text-center hover:bg-red-700 transition-colors duration-200 w-full;
}

/* Swiper specific overrides for Flash Sale Slider */
.flash-sale-slider .swiper-button-next,
.flash-sale-slider .swiper-button-prev {
    display: none !important;
}

/* Ensure Swiper container is visible and handles overflow */
.swiper-container {
    overflow: hidden;
    padding-bottom: 2rem;
}
.flash-sale-slider {
    overflow: hidden;
}
.flash-sale-slider .swiper-wrapper {
    padding-bottom: 1rem;
}

/* Logo Max Width */
.site-branding img.custom-logo {
    max-width: 300px;
    height: auto;
}

/* Shop By Category New Styling */
.category-card-new {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    min-height: 150px;
    box-sizing: border-box;
}

.category-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.category-card-new .category-icon-wrapper {
    /* Styles applied in front-page.php: w-20 h-20 flex items-center justify-center mb-3 relative overflow-hidden */
}

.category-card-new .category-icon-wrapper img,
.category-card-new .category-icon-wrapper i {
    transition: transform 0.3s ease-in-out;
}

.category-card-new:hover .category-icon-wrapper img,
.category-card-new:hover .category-icon-wrapper i {
    transform: scale(1.15);
}

/* Gradient effect for icons (optional, if you want to match the image exactly) */
/* This requires a slightly different approach as Tailwind doesn't have direct gradient text utilities */
/* You might need to use a custom utility or inline style for this if it's critical */
/* Example:
.category-card-new .category-icon-wrapper i {
    background: linear-gradient(45deg, #a855f7, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
*/

/* New Hero Section Styling */
.new-hero-section .new-hero-main-slider .swiper-pagination-bullet {
    @apply bg-yellow-500 opacity-50;
}

.new-hero-section .new-hero-main-slider .swiper-pagination-bullet-active {
    @apply bg-yellow-500 opacity-100;
}

.new-hero-section .new-hero-main-slider .swiper-button-next,
.new-hero-section .new-hero-main-slider .swiper-button-prev {
    @apply text-white;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

.new-hero-section .hero-image-box {
    @apply flex-col justify-center text-center;
    min-height: 192px;
}

.new-hero-section .hero-image-box h3 {
    @apply text-xl;
}

.new-hero-section .hero-image-box p {
    @apply text-base;
}

/* Footer Contact Info Styling */
.footer-col.contact-us-info ul li {
    @apply flex items-center mb-2;
}

.footer-col.contact-us-info ul li i {
    @apply text-blue-400 mr-3 text-lg;
}

.footer-col.contact-us-info .social-icons .social-icon-circle {
    @apply bg-gray-700 hover:bg-blue-600 text-white w-9 h-9 rounded-full flex items-center justify-center transition-colors duration-200;
}

.footer-col.contact-us-info .social-icons .social-icon-circle i {
    @apply text-base;
}

/* Single Product Summary Styling (from product-summary.php) */

/* Main summary container */
.summary.entry-summary {
    /* width and padding already set by Tailwind classes in the PHP template */
}

/* Product Title */
.summary .product_title.entry-title {
    /* font-size, font-weight, color, margin-bottom already set by Tailwind classes in the PHP template */
}

/* Rating and Review Count */
.summary .flex.items-center.space-x-4 {
    /* flex, alignment, spacing already set by Tailwind classes in the PHP template */
}

.summary .star-rating {
    @apply text-yellow-500; /* Ensure stars are yellow */
    font-size: 1.125rem; /* Equivalent to text-lg */
}

.summary .star-rating::before {
    color: #cbd5e1; /* Light gray for empty stars */
}

.summary .text-sm.text-gray-600 {
    /* font-size, color, margin-left already set by Tailwind classes in the PHP template */
}

.summary a.text-blue-600 {
    /* color, hover, transition already set by Tailwind classes in the PHP template */
}

/* Price Section */
.summary .product-price-section .price {
    /* font-size, font-weight, color already set by Tailwind classes in the PHP template */
}

.summary .product-price-section .price ins {
    @apply no-underline; /* Remove underline from sale price */
}

.summary .product-price-section .price del {
    @apply text-gray-500 line-through text-lg ml-2; /* Style old price, slightly larger than default */
}

/* Short Description */
.summary .woocommerce-product-details__short-description {
    /* color, font-size, line-height, margin-bottom already set by Tailwind classes in the PHP template */
}

/* Product Meta Details */
.summary .product-meta-details {
    /* font-size, color, margin-bottom, border, padding already set by Tailwind classes in the PHP template */
}

.summary .product-meta-details p {
    @apply mb-1; /* Small margin for meta paragraphs */
}

.summary .product-meta-details strong {
    @apply font-semibold; /* Make labels bold */
}

/* Add to Cart Form (woocommerce_template_single_add_to_cart) */
/* This section's styling largely depends on WooCommerce's default output and its own templates */
/* We'll add some general overrides for quantity and button */

.summary .quantity {
    @apply flex items-center border border-gray-300 rounded-md overflow-hidden;
    max-width: 120px; /* Limit width of quantity input */
}

.summary .quantity .qty {
    @apply w-12 text-center border-none focus:ring-0 focus:outline-none py-2;
    -moz-appearance: textfield; /* Hide arrows on Firefox */
}

.summary .quantity input::-webkit-outer-spin-button,
.summary .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.summary .quantity .minus,
.summary .quantity .plus {
    @apply bg-gray-100 text-gray-700 px-3 py-2 hover:bg-gray-200 transition-colors duration-200 cursor-pointer;
}

.summary .single_add_to_cart_button {
    @apply bg-blue-600 text-white font-bold py-3 px-6 rounded-md hover:bg-blue-700 transition-colors duration-200;
    width: auto; /* Allow button to size naturally */
    flex-grow: 1; /* Allow it to take available space */
}

.summary .variations_form .single_add_to_cart_button {
    @apply w-full; /* Full width for variable product add to cart */
}

/* Product Actions Bottom (Wishlist & Social Share) */
.summary .product-actions-bottom {
    /* margin-top, flex, alignment, spacing already set by Tailwind classes in the PHP template */
}

.summary .add-to-wishlist-button {
    @apply text-gray-600 hover:text-red-500 transition-colors duration-200;
}

.summary .social-share-icons a {
    @apply text-gray-600 hover:text-blue-600 transition-colors duration-200;
    font-size: 1.25rem; /* Larger social icons */
}

.summary .social-share-icons .fab {
    /* Specific colors for social icons if desired */
    /* e.g., &.fa-facebook-f { color: #3b5998; } */
}

/* Ensure proper display of product attributes (variations) */
.woocommerce-variation-add-to-cart .variations_button {
    @apply flex items-center gap-4; /* Ensure quantity and button are in a row */
}

/* Styling for product variations table (if applicable) */
.variations_form .variations {
    @apply mb-4;
}

.variations_form .variations td {
    @apply p-1;
}

.variations_form .variations select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.reset_variations {
    @apply text-blue-600 hover:text-blue-700 text-sm mt-2 block;
}