/* =========================================================
   LUX CARBON — RETINA / HI-DPI TYPOGRAPHY
   Maximum clean font rendering for Martfury
   ========================================================= */

:root {
    --primary-font:
        "Inter",
        "Inter Variable",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI Variable",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ---------------------------------------------------------
   CORE FONT RENDERING
   --------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;
}


body,
button,
input,
select,
textarea {
    font-family: var(--primary-font) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;

    font-feature-settings:
        "kern" 1,
        "liga" 1,
        "calt" 1;

    font-variant-ligatures:
        common-ligatures
        contextual;
}


/* ---------------------------------------------------------
   MAIN BODY TEXT
   --------------------------------------------------------- */

body {
    font-weight: 400;

    letter-spacing: -0.005em;

    color: var(--lc-text);
}


/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.ps-product--detail .ps-product__title {
    font-family: var(--primary-font) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;

    font-feature-settings:
        "kern" 1,
        "liga" 1,
        "calt" 1;

    font-weight: 600;

    letter-spacing: -0.022em;
}


/* H1 — premium tighter typography */

h1,
.ps-product--detail h1,
.ps-product--detail .ps-product__title {
    letter-spacing: -0.028em;
}


/* ---------------------------------------------------------
   HEADER / NAVIGATION
   Cleaner text on dark background
   --------------------------------------------------------- */

.header,
.header a,
.header span,
.header button,
.header .menu > li > a,
.header .navigation a,
.ps-navigation a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;

    font-weight: 500;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

button,
.ps-btn,
.btn,
.ec-cross-sale-section .ec-cross-sale-add-btn {
    font-family: var(--primary-font) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;

    font-weight: 600;

    letter-spacing: -0.01em;
}


/* ---------------------------------------------------------
   FORM FIELDS / SEARCH
   --------------------------------------------------------- */

input,
textarea,
select,
.form-control {
    font-family: var(--primary-font) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;

    font-weight: 400;

    letter-spacing: -0.005em;
}


input::placeholder,
textarea::placeholder {
    font-family: var(--primary-font) !important;

    font-weight: 400;

    -webkit-font-smoothing: antialiased;

    opacity: 1;
}


/* ---------------------------------------------------------
   PRODUCT CARDS
   --------------------------------------------------------- */

.ps-product .ps-product__title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;

    font-weight: 500 !important;

    letter-spacing: -0.012em;
}


/* ---------------------------------------------------------
   PRODUCT PRICE
   Crisp numbers
   --------------------------------------------------------- */

.ps-product__price,
.ps-product .ps-product__price,
.ps-product--detail .ps-product__price,
.price {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;

    font-variant-numeric:
        lining-nums
        tabular-nums;

    font-feature-settings:
        "kern" 1,
        "lnum" 1,
        "tnum" 1;

    font-weight: 600 !important;

    letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   SMALL UI TEXT
   Prevent thin blurry labels
   --------------------------------------------------------- */

small,
.small,
.ps-product__vendor,
.ps-product__rating,
.ps-product__meta,
.ps-breadcrumb,
.breadcrumb {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;
    font-optical-sizing: auto;
}


/* ---------------------------------------------------------
   SVG ICONS
   Higher precision on Retina / HiDPI
   --------------------------------------------------------- */

svg {
    shape-rendering: geometricPrecision;
}


/* ---------------------------------------------------------
   RETINA LOGO
   CSS cannot create pixels that do not exist.
   Best result = SVG or 3x source image.
   --------------------------------------------------------- */

.ps-logo img,
.header .ps-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-height: 48px !important;

    object-fit: contain !important;

    image-rendering: auto;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ---------------------------------------------------------
   NORMAL IMAGES
   Do not apply pixel-art scaling
   --------------------------------------------------------- */

img {
    image-rendering: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body {
        letter-spacing: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: -0.018em;
    }

    .ps-logo img,
    .header .ps-logo img {
        max-height: 40px !important;
    }

    .header a,
    .header span,
    .header button,
    .ps-navigation a {
        font-weight: 500;
    }
}


/* ---------------------------------------------------------
   RETINA / HiDPI DISPLAYS
   --------------------------------------------------------- */

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    html,
    body,
    button,
    input,
    select,
    textarea,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        text-rendering: optimizeLegibility;
    }

    svg {
        shape-rendering: geometricPrecision;
    }
}


/* ---------------------------------------------------------
   VERY HIGH DPI — 3x
   --------------------------------------------------------- */

@media
(-webkit-min-device-pixel-ratio: 3),
(min-resolution: 288dpi) {

    .ps-logo img,
    .header .ps-logo img {
        image-rendering: auto;
    }
}