/* ==========================================================================
   QEMOSA redesign - BASE LAYER
   Author: TEDBG - https://tedbg.com
   Loaded after Journal's generated CSS, so it wins at equal specificity.
   Owns: design tokens, global typography, section titles, page background.
   Do not put grid / slider / footer / product-page rules here - they live in
   qemosa-r-grid.css, qemosa-r-slider.css, qemosa-r-footer.css,
   qemosa-r-product.css.
   ========================================================================== */

/* ----- 0. "Qemosa Sans" font stack ---------------------------------------
   The real Helvetica Neue, self-hosted per weight as woff2 (client-provided
   OTF set from the approved mockup, folder 07/helvetica-neue-5, subset to
   Latin + full Cyrillic, 44-69KB per weight). Devices that already have the
   face locally installed (Mac / iPhone) skip the download via local().
   Weights: 100 Thin, 300 Light, 400 Roman, 500 Medium, 700 Bold. */
@font-face {
    font-family: 'Qemosa Sans';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: local('Helvetica Neue Thin'), local('HelveticaNeue-Thin'),
         url('../fonts_custom/hn-thin.woff2') format('woff2');
}

@font-face {
    font-family: 'Qemosa Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Helvetica Neue Light'), local('HelveticaNeue-Light'),
         url('../fonts_custom/hn-light.woff2') format('woff2');
}

@font-face {
    font-family: 'Qemosa Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Helvetica Neue'), local('HelveticaNeue'),
         url('../fonts_custom/hn-roman.woff2') format('woff2');
}

@font-face {
    font-family: 'Qemosa Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'),
         url('../fonts_custom/hn-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Qemosa Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
         url('../fonts_custom/hn-bold.woff2') format('woff2');
}

:root {
    --qr-font: 'Qemosa Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --qr-bg: #f5f5f5;
    --qr-photo-bg: #f0f0f0;
    --qr-ink: #111111;
    --qr-muted: #6b6b6b;
    --qr-line: #e3e3e3;
    --qr-red: #b03038;
    --qr-badge: rgba(176, 48, 56, .55);
    --qr-footer-bg: #383838;

    --qr-w-thin: 100;
    --qr-w-light: 300;
    --qr-w-regular: 400;
    --qr-w-medium: 500;
    --qr-w-bold: 700;
}

/* ----- 1. Global font ---------------------------------------------------- */
/* Journal writes font-family on a lot of generated selectors, so this sweeps
   everything except the icon font and form controls that inherit anyway. */
html body,
html body input,
html body select,
html body textarea,
html body .module-title,
html body .title,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .product-thumb .name a,
html body .product-thumb .price,
html body button:not([class*='fa-']):not([class*='icon']),
html body .btn:not([class*='fa-']):not([class*='icon']),
html body p:not([class*='fa-']):not([class*='icon']),
html body a:not([class*='fa-']):not([class*='icon']),
html body li:not([class*='fa-']):not([class*='icon']),
html body td:not([class*='fa-']):not([class*='icon']),
html body th:not([class*='fa-']):not([class*='icon']),
html body label:not([class*='fa-']):not([class*='icon']),
html body span:not([class*='fa-']):not([class*='icon']) {
    font-family: var(--qr-font) !important;
}

/* Icon carriers keep whatever font the theme gives them.
   DO NOT force a font-family here. Journal remaps most FontAwesome class
   names onto its OWN icomoon codepoints (e.g. .fa-shopping-cart:before is
   U+EAA0, not FontAwesome's U+F07A) while leaving others on real
   FontAwesome (.fa-refresh U+F021, .fa-times-circle U+F057). An earlier
   version of this file set "font-family: icomoon, FontAwesome !important"
   on every .fa element, which put icomoon first for BOTH groups and wiped
   out the checkout icons (cart update/remove, the account buttons and the
   section headings). Inheritance is enough: the rules above never target
   these elements, so the theme's own declarations win. */

/* ----- 2. Page background ------------------------------------------------ */
html body,
html body .site-wrapper,
html body .global-wrapper {
    background-color: var(--qr-bg);
}

/* the full-bleed 100vw sections (grid, sliders, categories) can add a few px
   of horizontal scroll equal to the scrollbar width on desktop - clip it */
html body {
    overflow-x: clip;
}

/* ----- 3. Section titles ------------------------------------------------- */
/* Target: uppercase, centered, Helvetica Neue medium, no underline dash. */
html body .module-title,
html body div[class*='module-products-'] .module-body .module-title,
html body div[class*='module-manufacturers-'] .module-title,
html body div[class*='module-blocks-'] .module-title,
html body div[class*='module-banners_grid-'] .module-title {
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: var(--qr-ink) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 38px 0 18px !important;
}

/* kill Journal's 50px dash under every module title */
html body .module-title:after,
html body .module-title .page-title-text:after,
html body .module-title .filter-title-text:after {
    display: none !important;
}

html body .module-title .page-title-text,
html body .module-title .filter-title-text {
    text-align: center !important;
}

/* SALE keeps the red treatment from the mockup */
html body div[class*='module-products-485'] .module-title {
    color: var(--qr-red) !important;
}

@media (max-width: 767px) {
    html body .module-title,
    html body div[class*='module-products-'] .module-body .module-title {
        font-size: 24px !important;
        margin: 28px 0 14px !important;
    }
}