/* ===================================================
   Global Lexend Font Setup (Blocksy Child Theme)
   =================================================== */

/* Import Lexend */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Apply globally */
html,
body {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: #183153;
    /* neutral dark text */
    line-height: 1.6;
}

/* Force font on all elements that Blocksy or WooCommerce might override */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

a {
    @apply text-stone-200 transition-colors duration-300;
}

a:hover {
    @apply text-red-600;
}

/* Inputs, buttons, selects, textarea */
select,
textarea,
input:is([type=url], [type=tel], [type=text], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=number], [type=search], [type=password]),
fieldset .wc-stripe-elements-field,
.ff-inherit-theme-style .ff-el-form-control:not([size]):not([multiple]),
span.select2-dropdown,
span.select2-container .select2-selection--single .select2-selection__rendered {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 0 !important;
    background: #44403d !important;
    border-radius: 0.3rem !important;
    color: #FFF !important;
}

/* WooCommerce specific selectors */
.woocommerce input.input-text,
.woocommerce select,
.woocommerce button,
.woocommerce .button,
.woocommerce form .form-row input.input-text {
    font-family: 'Lexend', sans-serif !important;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 0 !important;
}

/* Tailwind helper class */
.font-lexend {
    font-family: 'Lexend', sans-serif !important;
}


/** Tailwind custom utilities (small) **/
:root {
    --site-max-width: 1200px;
}

.container {
    max-width: var(--site-max-width);
}

.product-card img {
    display: block;
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}