
/* ITNETCOM_GLOBAL_TYPOGRAPHY_SYSTEM_V1_1_BEGIN */

/*
 * ITNETCOM GLOBAL TYPOGRAPHY
 *
 * TITLE       Arial / Helvetica / 700
 * SUBTITLE    Arial / Helvetica / 600
 * TEXT        Arial / Helvetica / 400
 * EMPHASIS    Arial / Helvetica / 600
 *
 * Font-size, color, margin, padding and layout remain page-specific.
 */

:root {
    --itn-font:
        Arial,
        Helvetica,
        sans-serif;

    --itn-title-weight: 700;
    --itn-subtitle-weight: 600;
    --itn-text-weight: 400;
}


/* =========================================================
   COMMON FONT FAMILY
   ========================================================= */

html,
body,
body p,
body li,
body dt,
body dd,
body th,
body td,
body label,
body legend,
body input,
body textarea,
body select,
body option,
body button,
body a,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body b {
    font-family:
        var(--itn-font) !important;
}


/* =========================================================
   NORMAL TEXT
   ========================================================= */

body {
    font-weight:
        var(--itn-text-weight);
}

body p,
body dt,
body dd,
body td,
body address,
body blockquote,
body figcaption,
body small,
body textarea,
body select,
body option,
body input:not([type="button"]):not([type="submit"]):not([type="reset"]) {
    font-weight:
        var(--itn-text-weight) !important;
}


/* Product description = body reference */

body .product-short-description,
body .product-short-description p,
body .product-short-description li,
body .product-description,
body .product-description p,
body .product-description li,
body .product-description-content,
body .product-description-content p,
body .product-description-content li {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-text-weight) !important;
}


/* =========================================================
   TITLES
   Reference = shop product title
   ========================================================= */

body h1,
body h2,
body h3,
body .page-title,
body .section-title,
body .card-title,
body .product-title,
body .shop-product-name,
body .latest-product-name,
body #product-title,
body #product-main-title,
body .product-related-name,
body .product-related-title,
body .product-description-title {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-title-weight) !important;
}


/* Account title hierarchy */

body .account-page .account-hero h1,
body .account-page .account-panel-heading h2,
body .account-page .account-order-card h3,
body .account-page .account-empty h3,
body .account-page .account-rma-side h3,
body .account-page .account-login-card h1 {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-title-weight) !important;
}


/* =========================================================
   SUBTITLES / LABELS
   ========================================================= */

body h4,
body h5,
body h6,
body label,
body legend,
body th,
body .subtitle,
body .section-subtitle,
body .page-subtitle,
body .eyebrow,
body .kicker,
body .account-kicker,
body .account-panel-heading p,
body .account-order-label,
body .account-field {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-subtitle-weight) !important;
}


/* =========================================================
   HEADER / NAVIGATION / UI
   ========================================================= */

body header a,
body header button,
body nav a,
body nav button,
body .main-nav a,
body .main-navigation a,
body .main-nav-desktop-level1-item a,
body .main-nav-subcat-title,
body .main-nav-subcat-title a {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-subtitle-weight) !important;
}


/* Deeper navigation = normal text */

body .main-nav-subcat-links a,
body .main-nav-l4-links a {
    font-weight:
        var(--itn-text-weight) !important;
}


/* =========================================================
   BUTTONS / CTA
   ========================================================= */

body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"],
body .btn,
body .button,
body .account-primary-btn,
body .account-secondary-btn,
body .account-logout,
body .account-order-actions a {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-subtitle-weight) !important;
}


/* =========================================================
   CONTROLLED EMPHASIS
   ========================================================= */

body strong,
body b {
    font-weight:
        var(--itn-subtitle-weight) !important;
}


/* Customer values remain normal text */

body .account-page .account-data-grid strong,
body .account-page .account-rma-card strong {
    font-weight:
        var(--itn-text-weight) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

body footer p,
body footer li,
body footer a,
body footer address,
body footer small {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-text-weight) !important;
}

body footer h1,
body footer h2,
body footer h3,
body footer h4,
body footer h5,
body footer h6 {
    font-family:
        var(--itn-font) !important;

    font-weight:
        var(--itn-title-weight) !important;
}


/* =========================================================
   ICON FONT PROTECTION
   ========================================================= */

body .material-symbols-outlined {
    font-family:
        "Material Symbols Outlined" !important;

    font-weight:
        normal !important;
}

body .material-icons,
body .material-icons-outlined {
    font-family:
        "Material Icons" !important;

    font-weight:
        normal !important;
}


/* =========================================================
   CODE FONT PROTECTION
   ========================================================= */

body code,
body pre,
body kbd,
body samp {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace !important;
}

/* ITNETCOM_GLOBAL_TYPOGRAPHY_SYSTEM_V1_1_END */


/* =========================================================
   ITNETCOM_GLOBAL_TYPOGRAPHY_REFINEMENT_V1_2_BEGIN

   Refinement only:
   - normal header navigation 500
   - active navigation / CTA 600
   - consistent micro-label tracking
   - customer/product data 400
   - product title line-height 1.12
   - visible product prices 700
   ========================================================= */


/* ---------------------------------------------------------
   HEADER NAVIGATION
   Normal navigation is quieter than titles and CTAs.
   --------------------------------------------------------- */

body header a,
body .main-nav a,
body .main-navigation a {
    font-weight: 500 !important;
    letter-spacing: .01em !important;
}


/* Buttons/triggers such as category CTA remain secondary-bold. */

body header button,
body .main-nav button,
body .main-navigation button {
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}


/* Current / active navigation. */

body header a[aria-current="page"],
body .main-nav a[aria-current="page"],
body .main-navigation a[aria-current="page"],
body .main-nav .is-active > a,
body .main-nav .active > a,
body .main-navigation .is-active > a,
body .main-navigation .active > a {
    font-weight: 600 !important;
}


/* Deep category links remain reading-weight. */

body .main-nav-subcat-links a,
body .main-nav-l4-links a {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}


/* ---------------------------------------------------------
   ACCOUNT SIDEBAR
   --------------------------------------------------------- */

body .account-page aside a,
body .account-page .account-sidebar a,
body .account-page .account-side-nav a,
body .account-page .account-menu a {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

body .account-page aside a.is-active,
body .account-page aside a.active,
body .account-page aside a[aria-current="page"],
body .account-page .account-sidebar a.is-active,
body .account-page .account-sidebar a.active,
body .account-page .account-sidebar a[aria-current="page"],
body .account-page .account-side-nav a.is-active,
body .account-page .account-side-nav a.active,
body .account-page .account-side-nav a[aria-current="page"],
body .account-page .account-menu a.is-active,
body .account-page .account-menu a.active,
body .account-page .account-menu a[aria-current="page"] {
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   MICRO LABELS
   Same visual rhythm across account, commerce and editorial UI.
   --------------------------------------------------------- */

body .account-kicker,
body .account-panel-heading p,
body .account-order-label,
body .account-field,
body .account-data-grid span,
body .account-rma-card p,
body .latest-product-tag,
body .shop-product-tag,
body .eyebrow,
body .kicker,
body [class*="-eyebrow"],
body [class*="-kicker"] {
    font-weight: 600 !important;
    letter-spacing: .05em !important;
}


/* ---------------------------------------------------------
   PRODUCT METADATA / CUSTOMER VALUES
   Data is information, not a heading.
   --------------------------------------------------------- */

body .latest-product-brand,
body .latest-product-code,
body .latest-product-tech,
body .shop-product-brand,
body .shop-product-code,
body .shop-product-tech {
    font-weight: 400 !important;
    letter-spacing: .03em !important;
}

body .account-page .account-data-grid strong,
body .account-page .account-rma-card strong {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}


/* ---------------------------------------------------------
   PRODUCT TITLES
   Preserve 700 while improving multi-line rhythm.
   No size change.
   --------------------------------------------------------- */

body .shop-product-name,
body .latest-product-name,
body .product-title,
body #product-title,
body #product-main-title,
body .product-related-name,
body .product-related-title {
    font-weight: 700 !important;
    line-height: 1.12 !important;
}


/* ---------------------------------------------------------
   PRODUCT PRICES
   Important commercial information stays strong.
   --------------------------------------------------------- */

body .latest-product-price:not(.product-related-price-locked),
body .shop-product-price:not(.product-related-price-locked),
body .product-price:not(.product-related-price-locked) {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}


/* ---------------------------------------------------------
   BUTTON / CTA TRACKING
   Remove aggressive legacy spacing.
   --------------------------------------------------------- */

body button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"],
body .btn,
body .button,
body .account-primary-btn,
body .account-secondary-btn,
body .account-logout,
body .account-order-actions a {
    letter-spacing: .01em !important;
}


/* ---------------------------------------------------------
   NORMAL CONTENT
   Do not introduce decorative tracking into reading text.
   --------------------------------------------------------- */

body .product-short-description,
body .product-short-description p,
body .product-description,
body .product-description p,
body .product-description-content,
body .product-description-content p {
    letter-spacing: normal !important;
}


/* ITNETCOM_GLOBAL_TYPOGRAPHY_REFINEMENT_V1_2_END */
