/**
 * KitUP typography — Lexend scale (Figma type guide).
 * Base: 1rem = 16px. Mobile breakpoint: 767px.
 */
:root {
    --kitup-font-family: "Lexend", "Open Sans", Arial, sans-serif;

    --kitup-font-light: 300;
    --kitup-font-normal: 400;
    --kitup-font-medium: 500;
    --kitup-font-semibold: 600;
    --kitup-font-bold: 700;
    --kitup-font-extrabold: 800;

    /* Figma-aligned defaults (Lexend reads heavy — prefer 400–500 on site) */
    --kitup-weight-display: 500;
    --kitup-weight-heading: 500;
    --kitup-weight-subheading: 400;
    --kitup-weight-body: 400;
    --kitup-weight-body-strong: 500;
    --kitup-weight-button: 500;
    --kitup-weight-caption: 400;

    /* Headings — desktop */
    --kitup-h1-size: 3.5rem;
    --kitup-h1-line: 1.2;
    --kitup-h2-size: 3rem;
    --kitup-h2-line: 1.2;
    --kitup-h3-size: 2.5rem;
    --kitup-h3-line: 1.2;
    --kitup-h4-size: 2rem;
    --kitup-h4-line: 1.3;
    --kitup-h5-size: 1.5rem;
    --kitup-h5-line: 1.4;
    --kitup-h6-size: 1.25rem;
    --kitup-h6-line: 1.4;
    --kitup-tagline-size: 1rem;
    --kitup-tagline-line: 1.5;

    /* Body scale — desktop & mobile */
    --kitup-text-large-size: 1.25rem;
    --kitup-text-large-line: 1.5;
    --kitup-text-medium-size: 1.125rem;
    --kitup-text-medium-line: 1.5;
    --kitup-text-regular-size: 1rem;
    --kitup-text-regular-line: 1.5;
    --kitup-text-small-size: 0.875rem;
    --kitup-text-small-line: 1.5;
    --kitup-text-tiny-size: 0.75rem;
    --kitup-text-tiny-line: 1.5;
}

@media (max-width: 767px) {
    :root {
        --kitup-h1-size: 2.5rem;
        --kitup-h2-size: 2.25rem;
        --kitup-h3-size: 2rem;
        --kitup-h4-size: 1.5rem;
        --kitup-h4-line: 1.4;
        --kitup-h5-size: 1.25rem;
        --kitup-h6-size: 1.125rem;
    }
}

/* ─── Global body ─── */
body,
.page-wrapper,
.page-main,
.columns,
.column.main,
.modal-content,
.checkout-container {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-regular-size) !important;
    line-height: var(--kitup-text-regular-line) !important;
    font-weight: var(--kitup-weight-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input,
select,
textarea,
button,
.btn {
    font-family: var(--kitup-font-family) !important;
}

/* ─── Headings ─── */
h1,
.h1,
.kitup-h1 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h1-size) !important;
    line-height: var(--kitup-h1-line) !important;
    font-weight: var(--kitup-weight-display) !important;
    letter-spacing: -0.02em !important;
}

h2,
.h2,
.kitup-h2 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h2-size) !important;
    line-height: var(--kitup-h2-line) !important;
    font-weight: var(--kitup-weight-display) !important;
    letter-spacing: -0.02em !important;
}

h3,
.h3,
.kitup-h3 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h3-size) !important;
    line-height: var(--kitup-h3-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
    letter-spacing: -0.01em !important;
}

h4,
.h4,
.kitup-h4 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h4-size) !important;
    line-height: var(--kitup-h4-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

h5,
.h5,
.kitup-h5 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h5-size) !important;
    line-height: var(--kitup-h5-line) !important;
    font-weight: var(--kitup-weight-subheading) !important;
}

h6,
.h6,
.kitup-h6 {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h6-size) !important;
    line-height: var(--kitup-h6-line) !important;
    font-weight: var(--kitup-weight-subheading) !important;
}

.kitup-tagline,
p.kitup-tagline {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-tagline-size) !important;
    line-height: var(--kitup-tagline-line) !important;
    font-weight: var(--kitup-weight-body) !important;
}

/* ─── Body text utilities ─── */
.kitup-text-large {
    font-size: var(--kitup-text-large-size) !important;
    line-height: var(--kitup-text-large-line) !important;
}

.kitup-text-medium {
    font-size: var(--kitup-text-medium-size) !important;
    line-height: var(--kitup-text-medium-line) !important;
}

.kitup-text-regular {
    font-size: var(--kitup-text-regular-size) !important;
    line-height: var(--kitup-text-regular-line) !important;
}

.kitup-text-small {
    font-size: var(--kitup-text-small-size) !important;
    line-height: var(--kitup-text-small-line) !important;
}

.kitup-text-tiny {
    font-size: var(--kitup-text-tiny-size) !important;
    line-height: var(--kitup-text-tiny-line) !important;
}

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

/* ─── Magento / theme mapping ─── */
.page-title-wrapper .page-title,
.page-title-wrapper h1.page-title,
.catalog-product-view .page-title-wrapper .page-title {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h2-size) !important;
    line-height: var(--kitup-h2-line) !important;
    font-weight: var(--kitup-weight-display) !important;
}

.block-title strong,
.block .title strong,
.sidebar .block .block-title strong {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h5-size) !important;
    line-height: var(--kitup-h5-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

.product-item-name,
.product-item-name a,
.product.name a,
.product-info-main .page-title-wrapper .page-title {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-medium-size) !important;
    line-height: var(--kitup-text-medium-line) !important;
    font-weight: var(--kitup-weight-body-strong) !important;
}

/* Category PLP grid — Figma: Lexend, bold titles, regular filters */
.catalog-category-view .products-grid .product-name a,
.catalogsearch-result-index .products-grid .product-name a {
    font-family: var(--kitup-font-family) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

.catalog-category-view .sidebar-main .filter-content,
.catalog-category-view .sidebar-main .filter-options-content,
.catalog-category-view .sidebar-main .kitup-layered-clear {
    font-family: var(--kitup-font-family) !important;
    font-weight: 400 !important;
}

.product-info-main .page-title-wrapper .page-title {
    font-size: var(--kitup-h3-size) !important;
    line-height: var(--kitup-h3-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

.price,
.price-box .price {
    font-family: var(--kitup-font-family) !important;
    font-weight: var(--kitup-weight-body-strong) !important;
}

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs strong {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-small-size) !important;
    line-height: var(--kitup-text-small-line) !important;
}

.action.primary,
button.action.primary,
.primary .action {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-regular-size) !important;
    line-height: var(--kitup-text-regular-line) !important;
    font-weight: var(--kitup-weight-button) !important;
}

.footer-container,
.page-footer,
.kitup-footer-bottom {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-small-size) !important;
    line-height: var(--kitup-text-small-line) !important;
}

.footer-container h4,
.footer-static-container h4,
.kitup-footer-static h4 {
    font-size: var(--kitup-h6-size) !important;
    line-height: var(--kitup-h6-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

/* Homepage KitUP sections */
.kitup-home-products-row__title,
.kitup-trusted-customers__title,
.kitup-latest-news__title,
.kitup-still-looking__title,
.cms-index-index .kitup-latest-news__title {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h3-size) !important;
    line-height: var(--kitup-h3-line) !important;
    font-weight: var(--kitup-weight-display) !important;
}

.kitup-home-products-row__subtitle,
.kitup-trusted-customers__subtitle,
.kitup-latest-news__subtitle {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-regular-size) !important;
    line-height: var(--kitup-text-regular-line) !important;
    font-weight: var(--kitup-weight-body) !important;
}

.kitup-newsletter-strip__title {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h4-size) !important;
    line-height: var(--kitup-h4-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

/* Account / checkout */
.account .legend,
.account .legend span,
.opc-block-summary > .title,
.checkout-index-index .opc-wrapper .step-title {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-h5-size) !important;
    line-height: var(--kitup-h5-line) !important;
    font-weight: var(--kitup-weight-heading) !important;
}

/* Theme/Bootstrap often forces 700 on strong — lighten to match Figma body emphasis */
.page-main strong,
.page-main b,
.column.main strong,
.column.main b {
    font-weight: var(--kitup-weight-body-strong) !important;
}

table th,
table td {
    font-family: var(--kitup-font-family) !important;
    font-size: var(--kitup-text-small-size) !important;
    line-height: var(--kitup-text-small-line) !important;
}

/* Beat Bootstrap heading sizes */
.bootstrap h1, .bootstrap .h1 { font-size: var(--kitup-h1-size) !important; }
.bootstrap h2, .bootstrap .h2 { font-size: var(--kitup-h2-size) !important; }
.bootstrap h3, .bootstrap .h3 { font-size: var(--kitup-h3-size) !important; }
.bootstrap h4, .bootstrap .h4 { font-size: var(--kitup-h4-size) !important; }
.bootstrap h5, .bootstrap .h5 { font-size: var(--kitup-h5-size) !important; }
.bootstrap h6, .bootstrap .h6 { font-size: var(--kitup-h6-size) !important; }