/**
 * V28 Typography — Global Scale (+10%)
 * T-Shirt Planet — mytshirt.be
 *
 * PURPOSE: Single source of truth for ALL typography across the site.
 *          Loads globally on every page. Individual v28-*.css files
 *          handle layout only — NO font rules there anymore.
 *
 * FONTS:
 *   Outfit ............. headings + body + buttons
 *   JetBrains Mono ..... labels, badges, mono UI
 *
 * SCALE (desktop — +10% bump applied):
 *   H1 .... 53px / 700 / 1.12      (page titles)
 *   H2 .... 40px / 700 / 1.15      (section titles)
 *   H3 .... 31px / 700 / 1.2       (card titles, product names)
 *   H4 .... 24px / 700 / 1.3       (sub-sections)
 *   H5 .... 20px / 600 / 1.4       (small headings)
 *   H6 .... 15px / 500 / 1.5       (JetBrains Mono label)
 *   Body .. 18px / 400 / 1.6
 *   Small . 15px / 400 / 1.5
 *   Tiny .. 13px / 400 / 1.4
 */


/* ═══════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════ */

:root {
    /* Fonts */
    --v28-font:       'Outfit', sans-serif;
    --v28-mono:       'JetBrains Mono', monospace;

    /* Scale (+10%) */
    --v28-h1:         53px;
    --v28-h2:         40px;
    --v28-h3:         31px;
    --v28-h4:         24px;
    --v28-h5:         20px;
    --v28-h6:         15px;
    --v28-body:       18px;
    --v28-small:      15px;
    --v28-tiny:       13px;

    /* Weights */
    --v28-heading-wt: 700;
    --v28-body-wt:    400;
    --v28-btn-wt:     600;
    --v28-label-wt:   500;

    /* Line heights */
    --v28-lh-tight:   1.12;
    --v28-lh-snug:    1.2;
    --v28-lh-normal:  1.4;
    --v28-lh-relaxed: 1.6;
}


/* ═══════════════════════════════════════════
   1. BASE — Body & Global Reset
   ═══════════════════════════════════════════ */

body,
body.woocommerce,
body.woocommerce-page,
body.archive,
body.single-product,
body.page {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
    font-weight: var(--v28-body-wt);
    line-height: var(--v28-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════
   2. HEADINGS — Enforce Scale
   ═══════════════════════════════════════════ */

h1,
.entry-title,
.page-title,
.woocommerce-products-header__title,
.v28-shop-title,
.wp-block-heading:is(h1) {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h1) !important;
    font-weight: var(--v28-heading-wt) !important;
    line-height: var(--v28-lh-tight) !important;
    letter-spacing: -0.02em;
}

h2,
.wp-block-heading:is(h2),
.woocommerce-loop-product__title {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h2) !important;
    font-weight: var(--v28-heading-wt) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
}

.product_title,
.qpc-modal h2,
.qpc-modal .qpc-title,
.qpc-overlay h2,
.qpc-overlay .qpc-title,
.v28-product-title,
.wc-block-cart .wc-block-cart-items__header {
    font-size: var(--v28-h3) !important;
    font-weight: var(--v28-heading-wt) !important;
    font-family: var(--v28-font) !important;
}

/* h2.qpc-title intentionally excluded above — qpc-modal.css sets it at 22px */

.woocommerce-Tabs-panel h2,
.woocommerce-Reviews-title,
#tab-description h2,
#tab-additional_information h2,
#tab-reviews h2 {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h4) !important;
    font-weight: var(--v28-heading-wt) !important;
}

h3,
.wp-block-heading:is(h3) {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h3) !important;
    font-weight: var(--v28-heading-wt) !important;
    line-height: var(--v28-lh-snug) !important;
}

h4,
.wp-block-heading:is(h4) {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h4) !important;
    font-weight: var(--v28-heading-wt) !important;
    line-height: 1.3 !important;
}

footer h4,
.v28-footer h4,
.site-footer h4 {
    font-size: var(--v28-small) !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h5,
.wp-block-heading:is(h5) {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-h5) !important;
    font-weight: 600 !important;
    line-height: var(--v28-lh-normal) !important;
}

h6,
.wp-block-heading:is(h6) {
    font-family: var(--v28-mono) !important;
    font-size: var(--v28-h6) !important;
    font-weight: var(--v28-label-wt) !important;
    line-height: 1.5 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════
   3. BODY TEXT — Paragraphs, Lists, etc.
   ═══════════════════════════════════════════ */

p,
li,
td,
th,
dd,
dt,
address,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.wc-block-components-notice-banner {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
    line-height: var(--v28-lh-relaxed);
}

small,
.woocommerce-result-count,
.woocommerce-breadcrumb,
figcaption,
.wp-element-caption {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-small) !important;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════
   4. LABELS — JetBrains Mono
   ═══════════════════════════════════════════ */

.qpc-section-label,
.qpc-modal .config-label,
.qpc-overlay .config-label,
.v28-label,
.section-label {
    font-family: var(--v28-mono) !important;
    font-size: var(--v28-tiny) !important;
    font-weight: var(--v28-label-wt) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.lang-badge,
.express-badge,
.onsale,
.v28-badge {
    font-family: var(--v28-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════ */

button,
.button,
.btn,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
input[type="submit"],
a.button,
a.btn {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
    font-weight: var(--v28-btn-wt) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em;
}

.single_add_to_cart_button,
.qpc-atc-btn,
.qpc-modal .add-to-cart-btn,
.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    font-size: 19px !important;
    font-weight: 700 !important;
}


/* ═══════════════════════════════════════════
   6. FORM INPUTS & SELECT
   ═══════════════════════════════════════════ */

input,
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__container select,
.select2-selection__rendered {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
    font-weight: var(--v28-body-wt);
}

label,
.wc-block-components-text-input label,
.wc-block-components-radio-control__label {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-small) !important;
    font-weight: 500;
}


/* ═══════════════════════════════════════════
   7. NAVIGATION (global header)
   ═══════════════════════════════════════════ */

.v28-nav a,
.v28-nav-link,
nav a {
    font-family: var(--v28-font) !important;
}


/* ═══════════════════════════════════════════
   8. PRICES
   ═══════════════════════════════════════════ */

.price,
.woocommerce-Price-amount,
.qpc-price,
.v28-price,
ins .woocommerce-Price-amount {
    font-family: var(--v28-font) !important;
    font-weight: 800 !important;
}

.summary .price,
.qpc-modal .price,
.qpc-overlay .price,
.v28-hero-price {
    font-size: var(--v28-h4) !important;
}

.woocommerce ul.products li.product .price,
.v28-card-price {
    font-size: 22px !important;
}

.qpc-garment-price,
.cross-sells .price,
.v28-mini-price {
    font-size: var(--v28-small) !important;
    font-weight: 700 !important;
}


/* ═══════════════════════════════════════════
   9. WOOCOMMERCE BLOCK OVERRIDES
   ═══════════════════════════════════════════ */

.wc-block-cart *,
.wp-block-woocommerce-cart * { font-family: var(--v28-font) !important; }

.wc-block-checkout *,
.wp-block-woocommerce-checkout * { font-family: var(--v28-font) !important; }

.wc-block-mini-cart__drawer *,
.wc-block-mini-cart * { font-family: var(--v28-font) !important; }

.wc-block-product-categories *,
.wp-block-woocommerce-product-filter *,
.wc-block-active-filters *,
.wc-block-attribute-filter *,
.wc-block-price-filter * { font-family: var(--v28-font) !important; }

.wc-block-cart .wc-block-components-product-name {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
    font-weight: 600 !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: var(--v28-small) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-body) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--v28-h5) !important;
    font-weight: 700 !important;
}


/* ═══════════════════════════════════════════
   10. WC TABS — Product page tabs
   ═══════════════════════════════════════════ */

.woocommerce-tabs .tabs li a,
.wc-tabs li a {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-small) !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════════
   11. LOGIN / REGISTER PAGE
   ═══════════════════════════════════════════ */

.woocommerce-account h2,
.v28-login h2,
.v28-auth-title {
    font-size: var(--v28-h3) !important;
}


/* ═══════════════════════════════════════════
   12. MY ACCOUNT — Complete Typography Map
   ═══════════════════════════════════════════
   All font rules for the My Account area.
   v28-my-account.css handles layout + color only.

   Scale inside My Account (+10%):
     Page title .. clamp(40px, 5.5vw, 53px) / 800
     Card title .. 20px (--v28-h5) / 700
     Nav link .... 18px / 500 (active: 600)
     Body text ... 17px / 400
     Table cell .. 17px / 400
     Table header  14px / 600 / UPPERCASE
     Stat value .. 31px / 800
     Stat label .. 14px / 500
     Form label .. 15px / 600 / UPPERCASE
     Helper text . 14px / 400
     Input ....... 18px / 400
     Button ...... 17px / 700
   ═══════════════════════════════════════════ */

/* ── 12a. Root font enforcement ──────────────── */
.woocommerce-account {
    font-family: var(--v28-font) !important;
    -webkit-font-smoothing: antialiased;
}

/* ── 12b. Page title ─────────────────────────── */
.woocommerce-account .entry-title,
.woocommerce-account .woocommerce-MyAccount-content > h2:first-of-type {
    font-size: clamp(40px, 5.5vw, var(--v28-h1)) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: var(--v28-lh-tight) !important;
}

/* ── 12c. Sidebar navigation ─────────────────── */
.woocommerce-MyAccount-navigation ul li a {
    font-size: 18px !important;
    font-weight: var(--v28-label-wt) !important;    /* 500 */
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
}

/* ── 12d. Card titles — unified 20px / 700 ───── */
.v28-account-card h3,
.v28-greeting,
.v28-profile-card-title,
.woocommerce-MyAccount-content form.edit-account fieldset legend,
.woocommerce-Address-title h2,
.v28-danger-zone h3 {
    font-size: var(--v28-h5) !important;            /* 20px */
    font-weight: var(--v28-heading-wt) !important;  /* 700 */
    line-height: var(--v28-lh-snug) !important;     /* 1.2 */
}

/* ── 12e. Dashboard stats ────────────────────── */
.v28-stat-val {
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: var(--v28-lh-snug) !important;
}
.v28-stat-label {
    font-size: 14px !important;
    font-weight: var(--v28-label-wt) !important;    /* 500 */
}

/* ── 12f. Tables — dashboard + orders tab ────── */
.v28-order-table {
    font-size: 17px !important;
}
.v28-order-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table th {
    font-size: 14px !important;
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.v28-order-table td,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
    font-size: 17px !important;
}
.v28-order-table td a {
    font-weight: var(--v28-btn-wt) !important;
}
.woocommerce-orders-table__cell-order-number a {
    font-weight: var(--v28-heading-wt) !important;  /* 700 */
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table th,
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table td {
    font-size: 17px !important;
}

/* ── 12g. Status badges ──────────────────────── */
.v28-status-badge,
mark.order-status {
    font-size: 14px !important;
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
    line-height: var(--v28-lh-normal) !important;
}

/* ── 12h. Empty state ────────────────────────── */
.v28-empty-state p {
    font-size: 17px !important;
    line-height: var(--v28-lh-relaxed) !important;
}

/* ── 12i. Buttons — My Account context ───────── */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"],
.v28-btn-sm,
.v28-btn-save {
    font-size: 17px !important;
    font-weight: var(--v28-heading-wt) !important;  /* 700 */
    line-height: var(--v28-lh-snug) !important;
}
.v28-btn-sm {
    font-size: var(--v28-small) !important;         /* 15px */
}
/* Outlined table buttons */
.v28-order-table .button,
.woocommerce-MyAccount-content .woocommerce-orders-table .button,
.woocommerce-MyAccount-content .woocommerce-orders-table a.button {
    font-size: 14px !important;
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
}
.v28-btn-danger {
    font-size: 17px !important;
    font-weight: var(--v28-heading-wt) !important;
}

/* ── 12j. Form labels ────────────────────────── */
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content .form-row label,
.v28-form-row label {
    font-size: var(--v28-small) !important;         /* 15px */
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Checkbox labels → sentence case */
.v28-checkbox-row label {
    font-size: 17px !important;
    font-weight: var(--v28-label-wt) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Required asterisk */
.woocommerce-MyAccount-content label .required {
    font-weight: var(--v28-heading-wt);
}

/* ── 12k. Form inputs ────────────────────────── */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.v28-form-row input[type="text"],
.v28-form-row select {
    font-size: var(--v28-body) !important;          /* 18px */
    font-weight: var(--v28-body-wt) !important;     /* 400 */
}
/* Helper text */
.woocommerce-MyAccount-content em {
    font-size: 14px !important;
    font-style: italic !important;
}
/* Placeholder */
.woocommerce-MyAccount-content input::placeholder,
.v28-form-row input::placeholder {
    opacity: 0.6;
}

/* ── 12l. Addresses tab ──────────────────────── */
/* h2 handled by 12d card titles */
.woocommerce-Address-title a.edit {
    font-size: 14px !important;
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
    line-height: var(--v28-lh-normal) !important;
}
.woocommerce-Address address {
    font-size: 17px !important;
    line-height: var(--v28-lh-relaxed) !important;
    font-style: normal !important;
}

/* ── 12m. Settings tab ───────────────────────── */
.v28-settings-label {
    font-family: var(--v28-font) !important;
    font-size: 17px !important;
    font-weight: var(--v28-btn-wt) !important;      /* 600 */
}
.v28-settings-desc {
    font-family: var(--v28-font) !important;
    font-size: var(--v28-small) !important;         /* 15px */
}
.v28-settings-select {
    font-family: var(--v28-font) !important;
    font-size: 17px !important;
    font-weight: var(--v28-label-wt) !important;    /* 500 */
}

/* ── 12n. Danger zone ────────────────────────── */
.v28-danger-desc {
    font-size: 17px !important;
    line-height: 1.5;
}

/* ── 12o. Notices ────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
    font-size: 19px !important;
    line-height: var(--v28-lh-relaxed) !important;
}
.woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-info .button {
    font-size: 17px !important;
}
.woocommerce-MyAccount-content .woocommerce-error {
    font-size: 19px !important;
    line-height: var(--v28-lh-relaxed) !important;
}

/* ── 12p. Login page ─────────────────────────── */
.woocommerce-account:not(.logged-in) #customer_login h2 {
    font-size: 32px !important;
    font-weight: var(--v28-heading-wt) !important;
}
.woocommerce-account:not(.logged-in) #customer_login label {
    font-size: var(--v28-small) !important;
    font-weight: var(--v28-btn-wt) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce-account:not(.logged-in) #customer_login .button {
    font-size: 21px !important;
    font-weight: var(--v28-heading-wt) !important;
}
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a {
    font-weight: var(--v28-label-wt) !important;
    font-size: var(--v28-small) !important;
}

/* ── 12q. My Account responsive (≤768px) ─────── */
@media (max-width: 768px) {
/* Page title */
/* Nav */
    .woocommerce-MyAccount-navigation ul li a { font-weight: var(--v28-label-wt) !important; }
    .woocommerce-MyAccount-navigation ul li.is-active a { font-weight: var(--v28-heading-wt) !important; }
/* Card titles */
/* Stats */
/* Tables */
/* Mobile table data-label pseudo */
    .v28-order-table td::before,
    .woocommerce-MyAccount-content .woocommerce-orders-table td::before { font-weight: var(--v28-btn-wt) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
}

/* ── 12r. My Account responsive (≤480px) ─────── */




/* ═══════════════════════════════════════════
   13. RESPONSIVE — Tablet (≤1024px)
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    :root {
        --v28-h1: 56px;
        --v28-h2: 45px;
        --v28-h3: 33px;
        --v28-h4: 29px;
        --v28-h5: 24px;
    }
}


/* ═══════════════════════════════════════════
   14. RESPONSIVE — Mobile (≤767px)
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {
    :root {
        --v28-h1: 52px;
        --v28-h2: 40px;
        --v28-h3: 31px;
        --v28-h4: 25px;
        --v28-h5: 23px;
        --v28-body: 22px;
        --v28-small: 18px;
    }
}


/* ═══════════════════════════════════════════
   15. RESPONSIVE — Small (≤480px)
   ═══════════════════════════════════════════ */

@media (max-width: 480px) {
    :root {
        --v28-h1: 45px;
        --v28-h2: 33px;
        --v28-h3: 29px;
        --v28-h4: 24px;
        --v28-h5: 22px;
        --v28-body: 22px;
    }
}


/* Section 16 (MOBILE BOOST font sizes) → v28-mobile.css */