/*
 * SHOPSTYLE ARTICLE MAGAZINE V1
 * PART 1
 */

.ssr-article {
    --ssr-ink: #1c1b1a;
    --ssr-muted: #746e68;
    --ssr-line: #e1dbd3;
    --ssr-paper: #f7f3ec;
    --ssr-champagne: #efe5d5;
    --ssr-gold: #9a7a49;

    position: relative;
    z-index: 1;
    width: 100%;
    color: var(--ssr-ink);
}


/* MENU ALWAYS ABOVE ARTICLE */

.nav-container,
.nav-container.fixed {
    z-index: 10000 !important;
}

.main-menu,
.main-menu > ul,
.main-menu > ul > li {
    z-index: 10020 !important;
}

.main-menu > ul > li > ul,
.main-menu ul li ul,
.main-menu .dropdown-menu,
.main-menu .mega-menu,
.main-menu .megamenu {
    z-index: 10050 !important;
}


/* =========================================================
   COVER
   ========================================================= */

.ssr-cover {
    position: relative;
    max-width: 1180px;
    margin: 12px auto 82px;
}

.ssr-cover-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 8.6;
    background: #ded9d1;
}

.ssr-cover-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssr-cover-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.01) 50%,
            rgba(0,0,0,.20) 100%
        );
}

.ssr-cover-card {
    position: relative;
    z-index: 2;

    width: min(
        840px,
        calc(100% - 100px)
    );

    margin:
        -108px
        auto
        0
        52px;

    padding:
        45px
        52px
        43px;

    background: #fff;

    box-shadow:
        0 18px 50px rgba(25,20,15,.08);
}

.ssr-no-hero .ssr-cover-card {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    border-top: 3px solid var(--ssr-gold);
}

.ssr-kicker {
    margin-bottom: 14px;
    color: var(--ssr-gold);

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .23em;
}

.ssr-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #817a73;

    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ssr-title {
    max-width: 790px;

    margin:
        0
        0
        22px;

    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            38px,
            4.4vw,
            67px
        );

    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -.045em;
}

.ssr-lead {
    max-width: 700px;

    margin:
        0
        0
        25px;

    color: #645f5a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
    line-height: 1.6;
}

.ssr-start {
    display: inline-flex;
    align-items: center;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        var(--ssr-gold);

    color: var(--ssr-ink) !important;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none !important;
}


/* =========================================================
   DESKTOP READING LAYOUT
   ========================================================= */

.ssr-reading {
    display: grid;

    grid-template-columns:
        120px
        minmax(0, 760px);

    gap: 55px;

    justify-content: center;

    max-width: 1060px;

    margin:
        0
        auto
        70px;
}


/* LEFT EDITORIAL RAIL */

.ssr-rail {
    position: relative;
}

.ssr-rail-inner {
    position: sticky;
    top: 120px;
    text-align: center;
}

.ssr-rail-logo {
    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;
    line-height: 1;
    letter-spacing: -.05em;
}

.ssr-rail-word {
    margin-top: 4px;

    color: var(--ssr-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .25em;
}

.ssr-rail-line {
    width: 1px;
    height: 58px;

    margin:
        19px
        auto;

    background:
        var(--ssr-line);
}

.ssr-rail time {
    display: block;

    color: #847e77;

    font-size: 9px;
    line-height: 1.3;
    letter-spacing: .08em;
}

.ssr-rail-min {
    margin-top: 18px;

    color: #aaa199;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
}


/* =========================================================
   ARTICLE TYPOGRAPHY
   ========================================================= */

.ssr-body {
    min-width: 0;

    color: #292725;

    font-size: 17px;
    line-height: 1.83;
}


/* CMS articles often contain a second H1 */

.ssr-body > h1:first-child,
.ssr-body > article > h1:first-child {
    display: none;
}


.ssr-body p {
    margin:
        0
        0
        27px;
}


/* MAGAZINE DROP CAP */

.ssr-body > p:first-of-type::first-letter,
.ssr-body > article > p:first-of-type::first-letter {
    float: left;

    margin:
        8px
        9px
        0
        0;

    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 72px;
    line-height: .72;
}


.ssr-body h2 {
    margin:
        62px
        0
        22px;

    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 37px;
    line-height: 1.13;
    font-weight: 400;
    letter-spacing: -.03em;
}


.ssr-body h3 {
    margin:
        42px
        0
        18px;

    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 400;
}


/* INTERNAL LINKS */

.ssr-body a {
    color: #7b5e36;

    border-bottom:
        1px solid
        rgba(123,94,54,.26);

    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.ssr-body a:hover {
    color: #332719;
    border-bottom-color: #7b5e36;
}


.ssr-body strong,
.ssr-body b {
    color: #1c1b1a;
}


/* QUOTES */

.ssr-body blockquote {
    position: relative;

    margin:
        50px
        -65px;

    padding:
        37px
        55px
        38px;

    border: 0;

    background:
        var(--ssr-paper);

    color: #37332f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 26px;
    line-height: 1.42;
}

.ssr-body blockquote::before {
    content: "“";

    position: absolute;

    top: 8px;
    left: 20px;

    color: #c0a881;

    font-family:
        Georgia,
        serif;

    font-size: 64px;
    line-height: 1;
}


/* LISTS */

.ssr-body ul,
.ssr-body ol {
    margin:
        26px
        0
        32px;

    padding-left: 25px;
}

.ssr-body li {
    margin-bottom: 11px;
}


/* IMAGES */

.ssr-body img {
    display: block;

    max-width: 100%;

    height: auto !important;
}

.ssr-body figure {
    margin:
        48px
        0;
}

.ssr-body figure img {
    width: 100%;
}

.ssr-body figcaption {
    margin-top: 10px;

    color: #888078;

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}


/*
 * Historical articles often contain
 * <p><img ...></p>
 */

.ssr-body p > img:only-child {
    width: 100%;

    margin:
        43px
        0;
}



/* =========================================================
   PART 2A
   GALLERY + MOBILE EDITORIAL READING
   ========================================================= */


/* =========================================================
   GALLERY
   ========================================================= */

.ssr-gallery {
    max-width: 1060px;

    margin:
        85px
        auto;

    padding-top: 38px;

    border-top:
        1px solid
        var(--ssr-line);
}

.ssr-gallery-title {
    margin-bottom: 25px;
}

.ssr-gallery-title span {
    color: var(--ssr-gold);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.ssr-gallery-title h2 {
    margin:
        7px
        0
        0;

    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;
    line-height: 1;
    font-weight: 400;
}

.ssr-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.ssr-gallery-item {
    display: block;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #eee;
}

.ssr-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.ssr-gallery-item:hover img {
    transform:
        scale(1.025);
}


/* =========================================================
   ARTICLE END
   ========================================================= */

.ssr-end {
    max-width: 760px;

    margin:
        85px
        auto
        45px;

    text-align: center;
}

.ssr-end-line {
    width: 1px;
    height: 55px;

    margin:
        0
        auto
        23px;

    background:
        var(--ssr-line);
}

.ssr-end-brand {
    color: var(--ssr-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
    line-height: 1;
    letter-spacing: .04em;
}

.ssr-end-text {
    margin:
        7px
        0
        22px;

    color: #918a83;

    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .09em;
}

.ssr-back {
    display: inline-block;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        var(--ssr-gold);

    color: var(--ssr-ink) !important;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 768px
)
and (
    max-width: 991px
) {

    .ssr-cover-card {
        width:
            calc(100% - 70px);

        margin-left: 35px;

        padding: 38px;
    }

    .ssr-reading {
        grid-template-columns:
            90px
            minmax(0, 680px);

        gap: 30px;

        padding:
            0
            25px;
    }

}


/* =========================================================
   MOBILE COVER
   ========================================================= */

@media (max-width: 767px) {

    .ssr-article {
        overflow: visible;
    }

    .ssr-cover {
        width: 100%;

        margin:
            0
            auto
            38px;
    }

    .ssr-cover-media {
        width: 100%;

        aspect-ratio: 4 / 5;
    }

    .ssr-cover-media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /*
     * The white "magazine cover" card
     * floats over the lower part of the image.
     */

    .ssr-cover-card {
        width:
            calc(100% - 28px);

        margin:
            -66px
            auto
            0;

        padding:
            27px
            22px
            28px;

        box-shadow:
            0 14px 38px
            rgba(25,20,15,.10);
    }

    .ssr-no-hero .ssr-cover-card {
        margin-top: 20px;
    }

    .ssr-kicker {
        margin-bottom: 11px;

        font-size: 9px;
    }

    .ssr-meta {
        flex-wrap: wrap;

        margin-bottom: 14px;

        font-size: 9px;
    }

    .ssr-title {
        max-width: none;

        margin-bottom: 17px;

        font-size: 35px;
        line-height: 1.04;
        letter-spacing: -.035em;
    }

    .ssr-lead {
        display: -webkit-box;

        max-width: none;

        overflow: hidden;

        margin-bottom: 20px;

        font-size: 15px;
        line-height: 1.55;

        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .ssr-start {
        font-size: 9px;
    }


    /* =====================================================
       MOBILE NORMAL READING
       ===================================================== */

    .ssr-reading {
        display: block;

        width: 100%;

        margin-bottom: 45px;
    }

    .ssr-rail {
        display: none;
    }

    .ssr-body {
        width: auto;

        padding:
            0
            18px;

        font-size: 16px;
        line-height: 1.76;
    }

    .ssr-body p {
        margin-bottom: 23px;
    }

    .ssr-body h2 {
        margin:
            46px
            0
            19px;

        font-size: 30px;
        line-height: 1.12;
    }

    .ssr-body h3 {
        margin:
            34px
            0
            16px;

        font-size: 24px;
    }


    /*
     * Smaller, elegant mobile drop cap.
     */

    .ssr-body > p:first-of-type::first-letter,
    .ssr-body > article > p:first-of-type::first-letter {
        margin:
            6px
            7px
            0
            0;

        font-size: 58px;
    }


    /* Quotes */

    .ssr-body blockquote {
        margin:
            35px
            0;

        padding:
            29px
            24px
            29px
            35px;

        font-size: 22px;
        line-height: 1.42;
    }

    .ssr-body blockquote::before {
        left: 11px;
        font-size: 48px;
    }


    /* Article images become magazine spreads */

    .ssr-body figure {
        margin:
            37px
            -18px;
    }

    .ssr-body figure img {
        width: 100%;
    }

    .ssr-body figcaption {
        padding:
            0
            18px;
    }

    .ssr-body p > img:only-child {
        width:
            calc(100% + 36px);

        max-width:
            calc(100% + 36px);

        margin:
            37px
            -18px;
    }


    /* =====================================================
       MOBILE GALLERY
       ===================================================== */

    .ssr-gallery {
        margin:
            55px
            18px;

        padding-top: 29px;
    }

    .ssr-gallery-title h2 {
        font-size: 30px;
    }

    .ssr-gallery-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .ssr-gallery-item {
        aspect-ratio: 16 / 10;
    }


    /* =====================================================
       MOBILE END
       ===================================================== */

    .ssr-end {
        margin:
            55px
            20px
            35px;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .ssr-cover-card {
        width:
            calc(100% - 20px);

        padding:
            24px
            18px
            25px;
    }

    .ssr-title {
        font-size: 31px;
    }

    .ssr-lead {
        font-size: 14px;

        -webkit-line-clamp: 3;
    }

    .ssr-body {
        padding:
            0
            15px;

        font-size: 15.5px;
    }

    .ssr-body figure {
        margin-left: -15px;
        margin-right: -15px;
    }

    .ssr-body p > img:only-child {
        width:
            calc(100% + 30px);

        max-width:
            calc(100% + 30px);

        margin-left: -15px;
        margin-right: -15px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ssr-gallery-item img {
        transition: none;
    }

}



/* =========================================================
   PART 2B
   MOBILE MAGAZINE SWIPE READER
   ========================================================= */

.ssr-reader {
    display: none;
}


/* =========================================================
   MOBILE READER
   ========================================================= */

@media (max-width: 767px) {

    /*
     * When JS activates magazine mode,
     * hide the normal source presentation.
     */

    .ssr-reader-active .ssr-body {
        display: none;
    }

    .ssr-reader-active .ssr-reader {
        display: block;

        width: 100%;

        margin:
            5px
            0
            46px;
    }


    /*
     * Normal reading can be restored
     * at any moment from the toolbar.
     */

    .ssr-normal-mobile .ssr-body {
        display: block;
    }

    .ssr-normal-mobile .ssr-reader {
        display: none;
    }


    /* =====================================================
       TOOLBAR
       ===================================================== */

    .ssr-reader-toolbar {
        display: flex;

        justify-content:
            space-between;

        align-items: center;

        gap: 15px;

        padding:
            0
            17px
            13px;
    }

    .ssr-reader-label {
        color: var(--ssr-gold);

        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .18em;
    }

    .ssr-reader-toggle {
        padding:
            7px
            0;

        border: 0;

        border-bottom:
            1px solid
            #ab9270;

        background:
            transparent;

        color: #514a43;

        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;

        cursor: pointer;
    }


    /* =====================================================
       PROGRESS
       ===================================================== */

    .ssr-reader-progress {
        position: relative;

        height: 2px;

        margin:
            0
            17px
            14px;

        overflow: hidden;

        background:
            #e6dfd6;
    }

    .ssr-reader-progress-bar {
        display: block;

        width: 0;
        height: 100%;

        background:
            var(--ssr-gold);

        transition:
            width .18s ease;
    }


    /* =====================================================
       HORIZONTAL "BOOK"
       ===================================================== */

    .ssr-reader-track {
        display: flex;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        padding:
            0
            17px
            13px;

        scroll-snap-type:
            x mandatory;

        scroll-padding-left:
            17px;

        overscroll-behavior-x:
            contain;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }

    .ssr-reader-track::-webkit-scrollbar {
        display: none;
    }


    /* =====================================================
       ONE MAGAZINE PAGE
       ===================================================== */

    .ssr-reader-page {
        position: relative;

        flex:
            0
            0
            calc(100vw - 42px);

        box-sizing:
            border-box;

        height:
            calc(100svh - 150px);

        min-height:
            510px;

        max-height:
            780px;

        overflow-x: hidden;
        overflow-y: auto;

        padding:
            49px
            25px
            35px;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.022),
                transparent 10px
            ),
            #faf7f1;

        box-shadow:
            0 12px 32px
            rgba(31,23,16,.10);

        color:
            #292622;

        font-size:
            16px;

        line-height:
            1.72;
    }


    /*
     * Alternate paper tone gives
     * the impression of turning pages.
     */

    .ssr-reader-page:nth-child(even) {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.018),
                transparent 10px
            ),
            #f5eee5;
    }


    /*
     * Subtle right-hand page edge.
     */

    .ssr-reader-page::after {
        content: "";

        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        width: 7px;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(67,49,31,.05)
            );
    }


    /* Page header */

    .ssr-reader-page-brand {
        position: absolute;

        top: 19px;
        left: 24px;

        color:
            var(--ssr-gold);

        font-size:
            8px;

        line-height: 1;

        font-weight:
            700;

        letter-spacing:
            .2em;
    }

    .ssr-reader-page-number {
        position: absolute;

        top: 18px;
        right: 20px;

        color:
            #aaa096;

        font-size:
            9px;

        line-height: 1;

        font-weight:
            700;

        letter-spacing:
            .12em;
    }


    /* =====================================================
       PAGE TYPOGRAPHY
       ===================================================== */

    .ssr-reader-page p {
        margin:
            0
            0
            22px;
    }

    .ssr-reader-page h2 {
        margin:
            0
            0
            23px;

        color:
            #1c1b1a;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            30px;

        line-height:
            1.1;

        font-weight:
            400;

        letter-spacing:
            -.025em;
    }

    .ssr-reader-page h3 {
        margin:
            0
            0
            19px;

        color:
            #1c1b1a;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            24px;

        line-height:
            1.17;

        font-weight:
            400;
    }

    .ssr-reader-page a {
        color:
            #765a34;

        border-bottom:
            1px solid
            rgba(118,90,52,.3);

        text-decoration:
            none;
    }

    .ssr-reader-page strong,
    .ssr-reader-page b {
        color:
            #1d1b19;
    }

    .ssr-reader-page ul,
    .ssr-reader-page ol {
        margin:
            18px
            0
            24px;

        padding-left:
            20px;
    }

    .ssr-reader-page li {
        margin-bottom:
            10px;
    }


    /* =====================================================
       IMAGES IN READER
       ===================================================== */

    .ssr-reader-page img {
        display:
            block;

        width:
            100% !important;

        max-width:
            100%;

        height:
            auto !important;
    }

    .ssr-reader-page figure {
        margin: 0;
    }

    .ssr-reader-page figcaption {
        margin-top:
            10px;

        color:
            #847c74;

        font-size:
            10px;

        line-height:
            1.45;
    }


    /*
     * Image-only spread.
     */

    .ssr-reader-page.is-image-page {
        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            47px
            16px
            26px;

        background:
            #181716;

        color:
            #fff;
    }

    .ssr-reader-page.is-image-page::after {
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.035)
            );
    }

    .ssr-reader-page.is-image-page
    .ssr-reader-page-brand {
        color:
            #c7a875;
    }

    .ssr-reader-page.is-image-page
    .ssr-reader-page-number {
        color:
            rgba(255,255,255,.48);
    }

    .ssr-reader-page.is-image-page img {
        max-height:
            calc(100svh - 220px);

        object-fit:
            contain;
    }

    .ssr-reader-page.is-image-page figcaption {
        color:
            rgba(255,255,255,.65);
    }


    /* =====================================================
       READER BOTTOM NAVIGATION
       ===================================================== */

    .ssr-reader-nav {
        display:
            flex;

        justify-content:
            space-between;

        align-items:
            center;

        gap:
            18px;

        padding:
            4px
            17px
            0;
    }

    .ssr-reader-button {
        display:
            inline-flex;

        justify-content:
            center;

        align-items:
            center;

        width:
            42px;

        height:
            42px;

        padding:
            0;

        border:
            1px solid
            #d8cfc4;

        border-radius:
            50%;

        background:
            #fff;

        color:
            #332f2b;

        font-size:
            20px;

        line-height:
            1;

        cursor:
            pointer;
    }

    .ssr-reader-button:disabled {
        opacity:
            .28;

        cursor:
            default;
    }

    .ssr-reader-counter {
        color:
            #817a72;

        font-size:
            10px;

        line-height:
            1;

        letter-spacing:
            .12em;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .ssr-reader-track {
        gap:
            9px;

        padding-left:
            10px;

        padding-right:
            10px;

        scroll-padding-left:
            10px;
    }

    .ssr-reader-page {
        flex-basis:
            calc(100vw - 30px);

        height:
            calc(100svh - 138px);

        padding-left:
            21px;

        padding-right:
            21px;
    }

}


/* =========================================================
   REDUCED MOTION FOR READER
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ssr-reader-track {
        scroll-behavior:
            auto !important;
    }

    .ssr-reader-progress-bar {
        transition:
            none;
    }

}



/* =========================================================
   SHOPSTYLE ARTICLE HERO DESKTOP V2
   Smaller desktop cover to protect lower-resolution images
   ========================================================= */

@media (min-width: 992px) {

    .ssr-cover {
        max-width: 960px;
        margin-top: 20px;
    }

    .ssr-cover-media {
        aspect-ratio: 16 / 7.5;
        max-height: 455px;
    }

    .ssr-cover-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .ssr-cover-card {
        width: min(
            760px,
            calc(100% - 80px)
        );

        margin-left: 40px;
        margin-top: -82px;

        padding:
            40px
            46px
            38px;
    }

    .ssr-title {
        font-size: clamp(
            38px,
            3.7vw,
            57px
        );
    }

}



/* =========================================================
   SHOPSTYLE ARTICLE HERO ORIGINAL IMAGE V3
   Desktop: natural image size, centered, no crop, no upscale
   ========================================================= */

@media (min-width: 768px) {

    .ssr-cover {
        max-width: 1180px;
        text-align: center;
    }

    .ssr-cover-media {
        display: inline-block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        overflow: visible;
        background: transparent;
        text-align: center;
    }

    .ssr-cover-media img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto !important;
        max-height: none;
        margin: 0 auto;
        object-fit: contain;
    }

    .ssr-cover-shade {
        display: none;
    }

    .ssr-cover-card {
        text-align: left;
    }

}



/* =========================================================
   SHOPSTYLE ARTICLE RAIL OFFSET V4
   Keep SS JOURNAL below sticky/dropdown navigation
   ========================================================= */

@media (min-width: 768px) {

    .ssr-rail-inner {
        top: 185px;
    }

}



/* =========================================================
   SHOPSTYLE ARTICLE DESKTOP COVER CARD V5
   One editorial frame: original image + article title
   MOBILE UNCHANGED
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Entire article cover becomes one magazine object.
     */

    .ssr-cover {
        display: grid;

        grid-template-columns:
            minmax(0, 44%)
            minmax(0, 56%);

        align-items: stretch;

        width: calc(100% - 40px);
        max-width: 1120px;

        margin:
            28px
            auto
            88px;

        overflow: hidden;

        border:
            1px solid
            #e5ded4;

        background:
            #f4efe7;

        box-shadow:
            0 20px 55px
            rgba(35,27,20,.075);

        text-align: left;
    }


    /* =====================================================
       IMAGE HALF
       ===================================================== */

    .ssr-cover-media {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: none;

        height: 100%;
        min-height: 520px;

        padding: 22px;

        box-sizing: border-box;

        overflow: hidden;

        background:
            #f0ebe3;

        text-align: center;
    }


    /*
     * Important:
     * no forced width:100%;
     * therefore smaller originals are not upscaled.
     */

    .ssr-cover-media img {
        display: block;

        width: auto;
        max-width: 100%;

        height: auto !important;
        max-height: 620px;

        margin: auto;

        object-fit: contain;
        object-position: center;
    }


    .ssr-cover-shade {
        display: none;
    }


    /* =====================================================
       EDITORIAL TEXT HALF
       ===================================================== */

    .ssr-cover-card {
        display: flex;

        flex-direction: column;
        justify-content: center;

        width: auto;
        max-width: none;

        min-width: 0;

        margin: 0;

        padding:
            55px
            52px
            52px;

        box-sizing: border-box;

        background:
            #fff;

        box-shadow: none;

        text-align: left;
    }


    /*
     * Small gold editorial accent.
     */

    .ssr-cover-card::before {
        content: "";

        display: block;

        width: 46px;
        height: 2px;

        margin-bottom: 25px;

        background:
            var(--ssr-gold);
    }


    .ssr-kicker {
        margin-bottom: 13px;
    }


    .ssr-meta {
        margin-bottom: 20px;
    }


    .ssr-title {
        max-width: 520px;

        margin-bottom: 22px;

        font-size:
            clamp(
                39px,
                3.4vw,
                55px
            );

        line-height: 1.03;
    }


    .ssr-lead {
        max-width: 500px;

        margin-bottom: 27px;

        font-size: 16px;
        line-height: 1.62;
    }


    /*
     * "Започни да четеш" is decorative/non-clickable,
     * but keeps its editorial appearance.
     */

    .ssr-start-disabled {
        align-self: flex-start;

        cursor: default;

        user-select: none;
    }


    /* =====================================================
       ARTICLE WITHOUT HERO IMAGE
       ===================================================== */

    .ssr-no-hero .ssr-cover {
        display: block;

        max-width: 850px;

        border-top:
            3px solid
            var(--ssr-gold);
    }

    .ssr-no-hero .ssr-cover-card {
        padding:
            58px
            65px;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

    .ssr-cover {
        grid-template-columns:
            minmax(0, 46%)
            minmax(0, 54%);
    }

    .ssr-cover-card {
        padding-left: 58px;
        padding-right: 58px;
    }

}



/* =========================================================
   SHOPSTYLE ARTICLE DESKTOP COVER V6
   FORCE image + title side by side
   Mirror / chrome editorial accents
   MOBILE UNCHANGED
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       MASTER FRAME
       ----------------------------------------------------- */

    .ssr-article .ssr-cover {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(360px, 46%)
            minmax(0, 54%) !important;

        grid-template-areas:
            "coverimage covertext" !important;

        align-items: stretch !important;

        width: calc(100% - 40px) !important;
        max-width: 1120px !important;

        margin:
            32px
            auto
            92px !important;

        padding: 8px !important;

        overflow: visible !important;

        border:
            1px solid
            rgba(159,157,153,.55) !important;

        background:
            linear-gradient(
                135deg,
                #f4f4f2 0%,
                #ffffff 18%,
                #d9d9d6 36%,
                #fafafa 51%,
                #c8c9c8 66%,
                #ffffff 83%,
                #e1ded7 100%
            ) !important;

        box-shadow:
            0 23px 60px
            rgba(28,23,18,.10) !important;

        text-align: left !important;
    }


    /*
     * Inner paper layer.
     */

    .ssr-article .ssr-cover::before {
        content: "";

        position: absolute;

        inset: 8px;

        z-index: 0;

        pointer-events: none;

        border:
            1px solid
            rgba(255,255,255,.95);

        box-shadow:
            inset 0 0 0 1px
            rgba(132,128,121,.18);
    }


    /*
     * Small mirrored corner ornament.
     */

    .ssr-article .ssr-cover::after {
        content: "";

        position: absolute;

        top: -7px;
        right: 28px;

        z-index: 5;

        width: 92px;
        height: 14px;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                #8e8f8f,
                #f8f8f7,
                #a6a7a7,
                #ffffff,
                #9b8563
            );

        box-shadow:
            0 2px 8px
            rgba(0,0,0,.10);
    }


    /* -----------------------------------------------------
       LEFT — IMAGE
       ----------------------------------------------------- */

    .ssr-article .ssr-cover-media {
        grid-area: coverimage !important;

        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 500px !important;

        margin: 0 !important;

        padding: 30px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                145deg,
                #f7f4ef,
                #ebe6de
            ) !important;

        text-align: center !important;
    }


    /*
     * Fine inner mirrored frame.
     */

    .ssr-article .ssr-cover-media::before {
        content: "";

        position: absolute;

        inset: 18px;

        pointer-events: none;

        border:
            1px solid
            rgba(173,171,166,.55);

        box-shadow:
            inset 0 0 0 1px
            rgba(255,255,255,.8);
    }


    .ssr-article .ssr-cover-media img {
        position: relative !important;
        z-index: 1 !important;

        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 600px !important;

        margin:
            auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        box-shadow:
            0 10px 30px
            rgba(26,22,18,.10);
    }


    .ssr-article .ssr-cover-shade {
        display: none !important;
    }


    /* -----------------------------------------------------
       RIGHT — ARTICLE TITLE
       ----------------------------------------------------- */

    .ssr-article .ssr-cover-card {
        grid-area: covertext !important;

        position: relative !important;

        z-index: 2 !important;

        display: flex !important;

        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: none !important;

        min-width: 0 !important;
        min-height: 500px !important;

        margin: 0 !important;

        padding:
            58px
            58px
            55px !important;

        box-sizing: border-box !important;

        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #fbfaf8 62%,
                #f1ede6 100%
            ) !important;

        box-shadow:
            inset 1px 0 0
            rgba(112,108,101,.14) !important;

        text-align: left !important;
    }


    /*
     * Chrome / champagne title accent.
     */

    .ssr-article .ssr-cover-card::before {
        content: "";

        display: block !important;

        width: 86px !important;
        height: 3px !important;

        margin:
            0
            0
            27px !important;

        background:
            linear-gradient(
                90deg,
                #7d7e7e,
                #eeeeec,
                #9b9c9c,
                #c5a979
            ) !important;
    }


    /*
     * Decorative lower-right mirrored corner.
     */

    .ssr-article .ssr-cover-card::after {
        content: "";

        position: absolute;

        right: 22px;
        bottom: 22px;

        width: 42px;
        height: 42px;

        border-right:
            1px solid
            #a28a63;

        border-bottom:
            1px solid
            #a28a63;

        opacity: .62;

        pointer-events: none;
    }


    .ssr-article .ssr-kicker {
        margin-bottom: 14px !important;

        color:
            #8d7047 !important;
    }


    .ssr-article .ssr-meta {
        margin-bottom:
            22px !important;
    }


    .ssr-article .ssr-title {
        width: 100% !important;
        max-width: 500px !important;

        margin:
            0
            0
            23px !important;

        font-size:
            clamp(
                38px,
                3.35vw,
                54px
            ) !important;

        line-height:
            1.035 !important;
    }


    .ssr-article .ssr-lead {
        width: 100% !important;
        max-width: 480px !important;

        margin-bottom:
            27px !important;

        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    /* -----------------------------------------------------
       SAFETY: force both elements into SAME GRID ROW
       ----------------------------------------------------- */

    .ssr-article .ssr-cover > .ssr-cover-media {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .ssr-article .ssr-cover > .ssr-cover-card {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

}


/* =========================================================
   WIDE DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

    .ssr-article .ssr-cover {
        grid-template-columns:
            minmax(380px, 47%)
            minmax(0, 53%) !important;
    }

}


/* =========================================================
   DESKTOP ONLY — MOBILE/TABLET REMAIN EXACTLY AS BEFORE
   ========================================================= */



/* =========================================================
   SHOPSTYLE ARTICLE FOOTER CENTER V7
   Center journal end block
   ========================================================= */

.ssr-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.ssr-end-brand,
.ssr-end-text,
.ssr-back {
    text-align: center;
}

.ssr-back {
    align-self: center;
}