/*
Theme Name: Hemp Hub Tailwind
Theme URI: https://hemphub.store
Author: Hemp Hub
Description: Premium Tailwind-based WooCommerce theme for Hemp Hub.
Version: 1.1
Text Domain: hemphub-tailwind
*/

/* --- PREVENT HORIZONTAL SCROLL ON ALL DEVICES --- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* --- 1. GLOBAL (Desktop & Mobile) --- */
.woocommerce-products-header {
    max-width: 800px !important;
    margin: 40px auto !important; /* Centers the header area */
    text-align: center !important;
    padding: 0 20px !important;
}

.woocommerce-products-header__title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(24px, 5vw, 42px) !important; /* Responsive size */
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.term-description {
    text-align: center !important;
    margin: 20px auto !important;
    max-width: 100% !important;
}

/* Hide Junk */
.woocommerce-result-count, .woocommerce-ordering, .archive aside.sidebar {
    display: none !important;
}

/* --- BUTTON FIX: PROPORTIONAL ON DESKTOP --- */
ul.products li.product .button {
    background-color: #2e4a33 !important;
    color: #fff !important;
    padding: 12px 20px !important; /* Proper button padding */
    border-radius: 4px !important;
    text-align: center !important;
    display: inline-block !important; /* Changed from block to inline-block */
    width: auto !important; /* Let it shrink to text size */
    min-width: 160px !important; /* But keep a minimum "click area" */
    margin: 15px auto 0 auto !important; /* Centers the button in the card */
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

/* Ensure the card container centers the inline button */
ul.products li.product {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- SHOP OUR RANGE SLIDER --- */
.shop-slider {
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.shop-slider::-webkit-scrollbar {
    display: none;
}
.shop-slide {
    scroll-snap-align: start;
}

/* --- HERO CONTENT POP-UP ANIMATION --- */
@keyframes heroPopUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-content {
    opacity: 0;
    animation: heroPopUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}

/* Keep Mobile Buttons Full Width (They look better that way on small screens) */
@media (max-width: 767px) {
    ul.products li.product .button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 0 0 !important;
        padding: 12px 5px !important;
    }
}
/* --- 3. DESKTOP GRID (3-4 Columns) --- */
@media (min-width: 1024px) {
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        max-width: 1200px !important;
        margin: 0 auto 60px auto !important; /* Bottom margin kills the white space */
    }
}

/* --- 4. MOBILE GRID (2 Columns) --- */
@media (max-width: 767px) {
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px !important;
    }
    ul.products li.product {
        background: #fff;
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}