/**
 * Monogo_UnilayerNativeChrome — Salon Professional theme.
 *
 * Loaded instead of native-chrome.css on every native Magento page (customer
 * account, login, cart, checkout, ...) when admin selects the `salon` CSS
 * theme (`unilayer_native_chrome/general/css_theme`).
 *
 * Typography: Fira Sans everywhere, as on the Next.js storefront. Luma sets
 * its own base font (Open Sans) on `body`, and the header / footer CMS blocks
 * link the Web Components' Tailwind sheet into the document, whose
 * `*, body, html { font-family: Arial }` reaches every element of the page.
 * The selector below outranks both (class + element); elements carrying an
 * icon class keep their icon font.
 */

@import url("./native-chrome.css");

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');

body.monogo-native-chrome,
body.monogo-native-chrome *:not([class*="icon"]) {
    font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Sticky header (USPM-152), as on the Next.js storefront. The header Web
 * Component is sticky inside its shadow root, but its host sits in Luma's
 * `.page-header`, which is exactly as tall as the header, so it had nothing
 * to stick in. `.page-header` itself sticks within the full-height
 * `.page-wrapper`.
 */
body.monogo-native-chrome .page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
}

/*
 * CMS pages (USPM-152): their content is plain Luma, sized in rem from
 * Luma's `html { font-size: 62.5% }` (10px). The Web Components' Tailwind
 * sheet sets `html { font-size: 16px }`, which makes that content 1.6x too
 * large, and its preflight resets headings, paragraph margins and lists.
 * Restore Luma's base on CMS pages only: the login, account, cart and
 * checkout styles of the Unilayer modules are written for the 16px base.
 */
html:has(body.monogo-native-chrome.cms-page-view) {
    font-size: 62.5%;
}

body.monogo-native-chrome.cms-page-view {
    font-size: 1.4rem;
    line-height: 1.42857143;
}

body.monogo-native-chrome.cms-page-view .column.main h1 {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 2rem;
}

body.monogo-native-chrome.cms-page-view .column.main h2 {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 2.5rem 0 2rem;
}

body.monogo-native-chrome.cms-page-view .column.main h3 {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 2rem 0 1rem;
}

body.monogo-native-chrome.cms-page-view .column.main p {
    margin: 0 0 1rem;
}

body.monogo-native-chrome.cms-page-view .column.main ul {
    list-style: disc;
    padding-left: 2rem;
}

/*
 * Cookie consent (Amasty bar and settings modal) in the salon colours, like
 * the Next.js banner (frontend-app themes/salon/overrides.css). The neutral
 * black/white skin comes from Monogo_UnilayerCookieStyles, so the other
 * brands keep it. Colours from frontend-app themes/salon/tokens.css
 * (--accent, --pdp-cta-bg-hover).
 */
body.monogo-native-chrome {
    --salon-cookie-accent: #af0236;
    --salon-cookie-accent-hover: #cb5a7c;
}

body.monogo-native-chrome .amgdprcookie-bar-container,
body.monogo-native-chrome .modal-popup.amgdprcookie-bar-container._show {
    border-top: 3px solid var(--salon-cookie-accent) !important;
}

body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-accept,
body.monogo-native-chrome .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done,
body.monogo-native-chrome .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done {
    background: var(--salon-cookie-accent) !important;
    border-color: var(--salon-cookie-accent) !important;
    color: #ffffff !important;
}

body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow:hover,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save:hover,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-accept:hover,
body.monogo-native-chrome .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done:hover,
body.monogo-native-chrome .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done:hover {
    background: var(--salon-cookie-accent-hover) !important;
    border-color: var(--salon-cookie-accent-hover) !important;
    color: #ffffff !important;
}

body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-settings,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-decline {
    background: #ffffff !important;
    border-color: var(--salon-cookie-accent) !important;
    color: var(--salon-cookie-accent) !important;
}

/* As the native secondary button: stays white, text and border lighten. */
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-settings:hover,
body.monogo-native-chrome .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-decline:hover {
    background: #ffffff !important;
    border-color: var(--salon-cookie-accent-hover) !important;
    color: var(--salon-cookie-accent-hover) !important;
}

body.monogo-native-chrome .amgdprcookie-cookie-settings-modal .amgdprcookie-toggle-cookie .amgdprcookie-input {
    accent-color: var(--salon-cookie-accent);
}