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

:root {
    --font-main: 'Quicksand', sans-serif;

    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 22px;
    --font-4xl: 24px;
    --font-5xl: 28px;
    --font-6xl: 32px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

html {
    font-size: var(--font-base);
}
body {
    font-family: var(--font-main) !important;
    font-size: var(--font-base);
    font-weight: var(--weight-regular);
    line-height: 1.5;
}

body :where(a, p, span, div, h1, h2, h3, h4, h5, h6, button, input, select, textarea, label, li, td, th, strong, small) {
    font-family: var(--font-main) !important;
}

button,
input,
select,
textarea {
    font-size: var(--font-base);
    line-height: 1.4;
}

button,
.btn,
.btn_login,
.btn_shopping,
.checkout_btn,
.add-to-cart-btn,
.buy-now-btn {
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
}

p,
span,
a,
li,
label,
td,
th {
    font-size: var(--font-base);
}

h1 {
    font-size: var(--font-6xl);
    line-height: 1.25;
    font-weight: var(--weight-bold);
}

h2 {
    font-size: var(--font-4xl);
    line-height: 1.3;
    font-weight: var(--weight-bold);
}

h3 {
    font-size: var(--font-2xl);
    line-height: 1.35;
    font-weight: var(--weight-semibold);
}

h4 {
    font-size: var(--font-xl);
    line-height: 1.4;
    font-weight: var(--weight-semibold);
}

h5 {
    font-size: var(--font-lg);
    line-height: 1.4;
    font-weight: var(--weight-semibold);
}

h6 {
    font-size: var(--font-base);
    line-height: 1.4;
    font-weight: var(--weight-semibold);
}


.f10 { font-size: 10px !important; }
.f12 { font-size: var(--font-xs) !important; }
.f13 { font-size: var(--font-sm) !important; }
.f14 { font-size: var(--font-base) !important; }
.f15 { font-size: var(--font-md) !important; }
.f16 { font-size: var(--font-lg) !important; }
.f18 { font-size: var(--font-xl) !important; }
.f20 { font-size: var(--font-2xl) !important; }
.f22 { font-size: var(--font-3xl) !important; }
.f24 { font-size: var(--font-4xl) !important; }
.f28 { font-size: var(--font-5xl) !important; }
.f32 { font-size: var(--font-6xl) !important; }

.bold { font-weight: var(--weight-bold) !important; }
.semibold { font-weight: var(--weight-semibold) !important; }
.medium { font-weight: var(--weight-medium) !important; }
.normal { font-weight: var(--weight-regular) !important; }


.navbar a,
.menu a,
.sidebar a,
.product-name,
.product-title,
.title,
.description,
.price,
.status_type,
.cart-toast {
    font-family: var(--font-main) !important;
}

.cart-toast {
    font-size: var(--font-base) !important;
    font-weight: var(--weight-medium) !important;
}

#cart-toast.cart-toast {
    position: fixed !important;
    top: 70px !important;
    right: 24px !important;
    z-index: 99999 !important;

    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px;

    border-radius: 10px;
    border-left: 5px solid transparent;

    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

    opacity: 0;
    transform: translateY(-12px);
    transition: all 0.3s ease;
}

#cart-toast.cart-toast.show {
    opacity: 1;
    transform: translateY(0);
}

#cart-toast.cart-toast.hidden {
    display: none;
}

#cart-toast.cart-toast.success {
    background-color: #ecfdf3 !important;
    color: #027a48 !important;
    border-left-color: #12b76a !important;
}

#cart-toast.cart-toast.error {
    background-color: #fff4f4 !important;
    color: #b42318 !important;
    border-left-color: #f04438 !important;
}

#cart-toast.cart-toast.warning {
    background-color: #fffaeb !important;
    color: #b54708 !important;
    border-left-color: #f79009 !important;
}