/*
 * SHOPSTYLE CATEGORY GUIDE
 * MODORA STYLE
 * 2026-09-29
 *
 * Adapted from the proven Modora.bg category editorial guide.
 */


/* =========================================================
   GUIDE
========================================================= */

.ss-category-guide {
    position: relative;

    width: 100%;

    margin:
        42px 0 22px !important;

    padding:
        48px 52px 50px !important;

    background:
        #f7f4ee !important;

    color:
        #393530 !important;

    border:
        1px solid
        rgba(25,22,18,.075) !important;

    border-top:
        1px solid
        rgba(25,22,18,.12) !important;

    box-shadow:
        none !important;

    overflow:
        hidden;
}


/* Gold Modora-style detail */

.ss-category-guide__accent {
    width: 42px;
    height: 2px;

    margin:
        0 0 25px !important;

    background:
        #a78352;
}


/* =========================================================
   READABLE COLUMN
========================================================= */

.ss-category-guide__content {
    width:
        100%;

    max-width:
        960px;

    margin:
        0 auto !important;

    color:
        #393530 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size:
        14px !important;

    line-height:
        1.8 !important;
}


.ss-category-guide__content p,
.ss-category-guide__content div,
.ss-category-guide__content span,
.ss-category-guide__content li {
    color:
        #393530 !important;
}


/* =========================================================
   PARTS
========================================================= */

.ss-category-guide__part {
    display:
        flow-root;

    clear:
        both;
}


.ss-category-guide__part
+
.ss-category-guide__part {
    margin-top:
        34px;

    padding-top:
        32px;

    border-top:
        1px solid
        rgba(25,22,18,.09);
}


/* =========================================================
   HEADINGS
========================================================= */

.ss-category-guide__content h1,
.ss-category-guide__content h2,
.ss-category-guide__content h3,
.ss-category-guide__content h4 {
    color:
        #171717 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    text-shadow:
        none !important;

    text-transform:
        none !important;
}


.ss-category-guide__content h2 {
    clear:
        both;

    margin:
        34px 0 16px !important;

    padding:
        0 !important;

    font-size:
        clamp(
            24px,
            2.5vw,
            34px
        ) !important;

    line-height:
        1.18 !important;

    font-weight:
        600 !important;

    letter-spacing:
        -1px !important;

    scroll-margin-top:
        110px;
}


.ss-category-guide__content
h2:first-child {
    margin-top:
        0 !important;
}


.ss-category-guide__content h3 {
    clear:
        both;

    margin:
        27px 0 12px !important;

    font-size:
        19px !important;

    line-height:
        1.3 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.35px !important;
}


.ss-category-guide__content h4 {
    margin:
        22px 0 10px !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.ss-category-guide__content p {
    max-width:
        960px;

    margin:
        0 0 17px !important;

    padding:
        0 !important;

    color:
        #393530 !important;

    font-size:
        14px !important;

    line-height:
        1.8 !important;

    font-weight:
        400 !important;

    text-align:
        left !important;
}


.ss-category-guide__content
p:last-child {
    margin-bottom:
        0 !important;
}


/* =========================================================
   STRONG
========================================================= */

.ss-category-guide__content strong,
.ss-category-guide__content b {
    color:
        #171717 !important;

    font-weight:
        700 !important;
}


/* =========================================================
   LINKS
========================================================= */

.ss-category-guide__content a {
    color:
        #87663d !important;

    font-weight:
        600 !important;

    text-decoration:
        underline !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        3px !important;
}


.ss-category-guide__content a:hover {
    color:
        #171717 !important;
}


/*
 * Old in-text anchor directory is superseded by
 * the editorial structure.
 */

.ss-category-guide__legacy-anchor {
    display:
        none !important;
}


/* =========================================================
   LISTS
========================================================= */

.ss-category-guide__content ul,
.ss-category-guide__content ol {
    margin:
        16px 0 21px !important;

    padding-left:
        23px !important;
}


.ss-category-guide__content li {
    margin:
        7px 0 !important;

    padding-left:
        4px !important;

    color:
        #393530 !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;
}


.ss-category-guide__content
li::marker {
    color:
        #9b7748;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.ss-category-guide__content blockquote {
    margin:
        27px 0 !important;

    padding:
        17px 21px !important;

    background:
        rgba(255,255,255,.58) !important;

    color:
        #282521 !important;

    border:
        0 !important;

    border-left:
        3px solid
        #a78352 !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;
}


/* =========================================================
   TABLES
========================================================= */

.ss-category-guide__content table {
    width:
        100% !important;

    margin:
        24px 0 !important;

    border-collapse:
        collapse !important;

    background:
        rgba(255,255,255,.62) !important;

    color:
        #2c2925 !important;
}


.ss-category-guide__content th,
.ss-category-guide__content td {
    padding:
        11px 13px !important;

    color:
        #2c2925 !important;

    border:
        1px solid
        rgba(25,22,18,.09) !important;

    text-align:
        left !important;

    font-size:
        12px !important;

    line-height:
        1.5 !important;
}


.ss-category-guide__content th {
    background:
        #ebe6dc !important;

    color:
        #171717 !important;

    font-weight:
        700 !important;
}


/* =========================================================
   IMAGES
========================================================= */

.ss-category-guide__content img {
    display:
        block;

    max-width:
        100% !important;

    height:
        auto !important;

    margin:
        25px auto !important;

    border-radius:
        0 !important;
}


/*
 * Neutralize old float layouts.
 */

.ss-category-guide__content
div[style*="float: right"],
.ss-category-guide__content
div[style*="float:right"],
.ss-category-guide__content
div[style*="float: left"],
.ss-category-guide__content
div[style*="float:left"] {
    float:
        none !important;

    width:
        100% !important;

    max-width:
        560px !important;

    margin:
        28px auto !important;

    text-align:
        center !important;
}


/* old gallery */

.ss-category-guide
.mySlides {
    display:
        none !important;
}


.ss-category-guide
.mySlides:first-child {
    display:
        block !important;
}


/* =========================================================
   MOBILE PANEL
========================================================= */

.ss-mobile-guide-panel {
    clear:
        both;

    width:
        100%;

    margin:
        0 0 18px;
}


/* =========================================================
   MOBILE BUTTON - MODORA STYLE
========================================================= */

@media(max-width:767px) {

    #combinationsBTN {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            8px !important;

        min-height:
            40px !important;

        margin:
            0 0 8px 4px !important;

        padding:
            10px 15px !important;

        background:
            #242424 !important;

        color:
            #f7f5f1 !important;

        border:
            1px solid
            #242424 !important;

        border-radius:
            2px !important;

        font-size:
            11px !important;

        line-height:
            1.2 !important;

        font-weight:
            700 !important;

        letter-spacing:
            .02em !important;

        text-decoration:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        position:
            relative !important;

        z-index:
            3 !important;
    }


    #combinationsBTN i {
        color:
            #c19a63 !important;
    }


    #combinationsBTN
    .ss-mobile-guide-btn__arrow {
        transition:
            transform
            .2s ease;
    }


    #combinationsBTN.ss-mobile-guide-btn--open
    .ss-mobile-guide-btn__arrow {
        transform:
            rotate(180deg);
    }


    /*
     * Modora mobile guide
     */

    .ss-mobile-guide-panel
    .ss-category-guide {
        margin:
            8px 0 14px !important;

        padding:
            29px 19px 31px !important;
    }


    .ss-category-guide {
        padding:
            29px 19px 31px !important;
    }


    .ss-category-guide__accent {
        margin-bottom:
            19px !important;
    }


    .ss-category-guide__content {
        font-size:
            13px !important;

        line-height:
            1.72 !important;
    }


    .ss-category-guide__content p {
        font-size:
            13px !important;

        line-height:
            1.72 !important;
    }


    .ss-category-guide__content h2 {
        margin:
            27px 0 13px !important;

        font-size:
            23px !important;

        letter-spacing:
            -.6px !important;
    }


    .ss-category-guide__content h3 {
        margin:
            23px 0 10px !important;

        font-size:
            17px !important;
    }


    .ss-category-guide__content table {
        display:
            block;

        max-width:
            100%;

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .ss-category-guide__part
    +
    .ss-category-guide__part {
        margin-top:
            28px;

        padding-top:
            25px;
    }

}