/**
 * Clinique brand styling (ATMOSUP-16248).
 *
 * Scoped under the .catalog-category-view-brand-clinique body class (added by
 * catalog_category_view_brand_clinique.xml). Styles the sidebar_tree brand menu to match the
 * production legacy microsite (.default-menu): section headers uppercase bold black, leaf items
 * grey, no borders.
 *
 * NOTE: the Druni_Menu sidebar_tree defaults are emitted as an inline <style> scoped by the
 * menu's ID (#sidebar-tree-<id> …), which outranks a body-class selector by specificity. So the
 * overrides below use !important — safe because they are fully scoped to the Clinique body class
 * (they never affect other brands or the shared menu defaults).
 */

.catalog-category-view-brand-clinique .sidebar-tree-menu {
    font-size: 16px !important;
    letter-spacing: normal !important;
}

/* Sub-item lists: 20px indent, no border, 25px gap after each section. */
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-children {
    padding-left: 20px !important;
    border-left: 0 !important;
    margin: 0 0 25px !important;
}

/* Leaf links: grey, regular weight, 16px. */
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-link {
    color: rgb(127, 129, 130) !important;
    padding: 0 !important;
    line-height: 1.43 !important;
}

.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-link:hover {
    color: #000 !important;
    text-decoration: none !important;
}

/* Section headers (level 0): uppercase bold black, 16px, with the production spacing. */
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-0 > .stm-row {
    margin: 15px 0 10px !important;
}

.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-0 > .stm-row > .stm-link {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
}

/* Sub-levels (1 and 2): grey, regular, not uppercase, 10px gap between items. */
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-1,
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-2 {
    margin: 0 0 10px !important;
}

.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-1 > .stm-row > .stm-link,
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-lvl-2 > .stm-row > .stm-link {
    color: rgb(127, 129, 130) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-transform: none !important;
}

/* Collapse caret: discreet grey (production has no caret; kept for the accordion). */
.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-toggle {
    color: #b3b3b3 !important;
}

.catalog-category-view-brand-clinique .sidebar-tree-menu .stm-toggle:hover {
    color: #000 !important;
}

/**
 * Landing "Sistema de 3 Pasos": skin-type section titles, one accent colour each, matching the
 * production legacy microsite (.title-1..4). Applied to a span class inside the smart-content
 * h2 — the smart-content sanitizer strips inline `style` and the JIT does not compile arbitrary
 * `text-[#hex]` classes used inside {{getText()}}, so the colour must live in a loaded stylesheet.
 * !important beats the h2's text-gray-900 utility on the inner span.
 */
.catalog-category-view-brand-clinique .title-1 { color: #46ab8c !important; } /* Seca (verde)   */
.catalog-category-view-brand-clinique .title-2 { color: #c48bc4 !important; } /* Mixta (lila)   */
.catalog-category-view-brand-clinique .title-3 { color: #f69f9f !important; } /* Grasa (rosa)   */
.catalog-category-view-brand-clinique .title-4 { color: #94cfd7 !important; } /* Muy grasa (azul)*/