/*
Theme Name: MobileMart E-commerce Theme
Theme URI: https://yourwebsite.com/
Author: Your Name/Company
Author URI: https://yourwebsite.com/
Description: A responsive and SEO-friendly e-commerce theme for smartphone stores, built with Tailwind CSS and WooCommerce integration.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobilemart
Tags: e-commerce, mobile, responsive, clean, modern, woocommerce
*/

/* Custom styles for body and scrollbar for a polished look */
body {
    font-family: 'Inter', sans-serif; /* Using Inter font as specified */
    background-color: #f8fafc; /* Light gray background for the entire site */
    color: #334155; /* Dark slate gray for general text */
    
    /* Custom Font Sizes for Headings and Paragraphs */
h1 {
    font-size: 30px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 23px;
}

h4 {
    font-size: 21px;
}

p {
    font-size: 19px;
}

    
    
}

/* Custom scrollbar styling for a cleaner appearance */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
    background: #cbd5e1; /* Color of the scrollbar track */
    border-radius: 10px; /* Rounded corners for the track */
}
::-webkit-scrollbar-thumb {
    background: #64748b; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #475569; /* Darker color on hover for the thumb */
}

/* Custom class for related product images to ensure fixed size */
.related-product-image {
    width: 220px;
    height: 220px;
    object-fit: cover; /* Ensures images cover the area without distortion */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center the image if its container is wider */
}

/* Styles for the custom double-ended price slider */
.slider-container {
    height: 6px; /* Height of the track */
    background-color: #e2e8f0; /* bg-gray-200 */
    border-radius: 9999px; /* rounded-full */
    position: relative;
    cursor: pointer;
    margin: 1.5rem 0; /* Adjust vertical spacing */
}

.slider-track-highlight {
    background-color: #6366f1; /* bg-indigo-600 */
    border-radius: 9999px; /* rounded-full */
    position: absolute;
    height: 100%;
    left: 0;
    width: 100%;
}

.slider-handle {
    width: 20px; /* w-5 */
    height: 20px; /* h-5 */
    background-color: #6366f1; /* bg-indigo-600 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    z-index: 10; /* Ensure handles are above track */
}

.slider-handle:active {
    cursor: grabbing;
}

.left-handle {
    left: 0;
}

.right-handle {
    left: 100%;
}

/* Hide default scrollbar for horizontal menu */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* WooCommerce Product List Clearing */
.woocommerce ul.products,
.woocommerce-page ul.products {
    clear: both;
}






/* Desktop View (and larger screens) */
@media screen and (min-width: 769px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        columns: 4;
    }
}
    /* The 'columns' property is for text flow, not for grid layouts of items.
       The grid layout is handled by 'display: grid' on .products-columns-4 */
}

/* Custom CSS for responsive product columns using CSS Grid */
.products-columns-4 {
    display: grid; /* Ensure CSS Grid is used */
    gap: 1.5rem; /* Equivalent to Tailwind's gap-6 */
}

@media (max-width: 767px) { /* Targets mobile screens (up to 767px) */
    .products-columns-4 {
        /* gap is already defined on the grid container */
    }
}



/* Smartphone/Mobile View */
@media screen and (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        columns: 2;
    }
}

/* Styles for WooCommerce Catalog Ordering (Sort By dropdown) */
.woocommerce-ordering {
    display: flex; /* Use flexbox to align label and select */
    align-items: center; /* Vertically align items */
    margin-left: auto; /* Push to the right if in a flex container */
    /* Ensure the form itself is flexible if it's within a flex container */
    width: auto; /* Allow content to dictate width */
}

.woocommerce-ordering label {
    font-weight: 500; /* Medium font weight */
    color: #475569; /* text-gray-700 */
    margin-right: 0.5rem; /* Space between label and select */
    white-space: nowrap; /* Prevent "Sort By:" from wrapping */
}

.woocommerce-ordering select.orderby {
    /* Apply Tailwind-like styling to the select element */
    background-color: #f8fafc; /* bg-gray-50 */
    border: 1px solid #cbd5e1; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    color: #334155; /* text-gray-800 */
    appearance: none; /* Remove default system arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); /* Custom arrow icon */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Make space for the custom arrow */
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    max-width: 160px; /* Constrain width for better alignment */
}

.woocommerce-ordering select.orderby:focus {
    border-color: #6366f1; /* focus:border-indigo-500 */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); /* focus:ring-indigo-500 with opacity */
}


/* Custom Font Sizes for Headings and Paragraphs */
h1 {
    font-size: 30px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 23px;
}

h4 {
    font-size: 21px;
}

p {
    font-size: 19px;
}