/* =========================================================
   LiSo MäuseWerk
   SCHNITTMUSTER GRUNDLAGE
   ========================================================= */


/* =========================================================
   DETAILBEREICH
   ========================================================= */

.pattern-detail {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 60px;

    padding: 70px 65px 80px;

    background: var(--white);
}


/* =========================================================
   GALERIE
   Der grüne Bereich ist der eigentliche Kasten.
   Das Bild liegt kleiner darin.
   ========================================================= */

.pattern-gallery {
    position: relative;

    min-width: 0;

    padding: 35px;

    border-radius: 32px;

    background: var(--mint);

    box-shadow:
        0 15px 40px rgba(81, 75, 87, 0.10);
}


/* =========================================================
   HAUPTBILD
   ========================================================= */

.pattern-detail-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 24px;

    background: var(--white);

    box-shadow:
        0 10px 30px rgba(81, 75, 87, 0.10);
}


/* =========================================================
   GALERIE-NAVIGATION (BACK / NEXT)
   Sitzt jetzt als eigene Zeile zwischen dem Hauptbild
   und den Vorschaubildern statt auf dem Bild zu liegen.
   ========================================================= */

.gallery-nav-row {
    display: flex;

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

    margin-top: 14px;
}

.gallery-nav {
    position: relative;

    z-index: 3;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: var(--pink);

    color: var(--dark);

    box-shadow: var(--shadow-soft);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.gallery-nav:hover {
    background: #A9D9F0;

    color: var(--dark);

    transform: scale(1.08);
}

.gallery-nav img {
    width: 50px;
    height: 50px;

    object-fit: contain;

    pointer-events: none;
}


/*
   WICHTIG:
   Das Bild füllt NICHT mehr den grünen Bereich.
   Der grüne Bereich bleibt rundherum sichtbar.
*/

.pattern-detail-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        opacity 0.12s ease;
}



/* =========================================================
   FARBEN DER GALERIE NACH SCHWIERIGKEIT
   ========================================================= */

/*
   Die Klasse sitzt jetzt auf .pattern-gallery.
   Deshalb wird der komplette Hintergrund des Kastens
   entsprechend eingefärbt.
*/

.pattern-gallery.difficulty-easy-image {
    background: var(--mint);
}

.pattern-gallery.difficulty-medium-image {
    background: var(--light-lilac);
}

.pattern-gallery.difficulty-hard-image {
    background: var(--pink);
}


/* =========================================================
   TEXTBEREICH
   ========================================================= */

.pattern-detail-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}

.pattern-detail-content .small-title {
    margin-bottom: 14px;
}

.pattern-detail-content h1 {
    margin-bottom: 15px;

    font-size:
        clamp(3.2rem, 5vw, 5rem);
}

.detail-subtitle {
    max-width: 460px;

    margin-bottom: 22px;

    color: var(--soft-dark);

    font-size: 1rem;

    line-height: 1.65;
}


/* =========================================================
   META / TAGS
   ========================================================= */

.detail-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 27px;
}

.detail-meta-item {
    padding: 6px 11px;

    border-radius: 100px;

    background: var(--cream);

    color: var(--soft-dark);

    font-size: 0.67rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


/* Größe */

.detail-meta-item:nth-child(2) {
    background: var(--light-lilac);
}


/* =========================================================
   SCHWIERIGKEIT
   ========================================================= */

.detail-meta-item.difficulty-easy {
    background: var(--mint) !important;

    border-color: var(--mint) !important;

    color: var(--dark);
}

.detail-meta-item.difficulty-medium {
    background: var(--light-lilac) !important;

    border-color: var(--light-lilac) !important;

    color: var(--dark);
}

.detail-meta-item.difficulty-hard {
    background: var(--pink) !important;

    border-color: var(--pink) !important;

    color: var(--dark);
}


/* =========================================================
   GALERIE VORSCHAUBILDER
   ========================================================= */

.pattern-thumbnails-wrapper {
    width: 100%;

    margin-top: 14px;
}

.pattern-thumbnails {
    display: flex;

    gap: 10px;

    width: 100%;

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

    scroll-behavior: smooth;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(81, 75, 87, 0.20)
        transparent;

    padding-bottom: 5px;
}

.pattern-thumbnail {
    flex:
        0 0
        calc((100% - 30px) / 4);

    aspect-ratio: 1 / 1;

    padding: 0;

    border:
        3px solid
        transparent;

    border-radius: 14px;

    overflow: hidden;

    background: var(--white);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.pattern-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pattern-thumbnail:hover {
    transform: translateY(-2px);
}

.pattern-thumbnail.active {
    border-color: var(--dark);
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.detail-description {
    max-width: 500px;
}

.detail-description p {
    margin-bottom: 13px;

    color: var(--soft-dark);

    font-size: 0.86rem;

    line-height: 1.7;
}

.detail-description p:last-child {
    margin-bottom: 0;
}

.detail-description strong {
    color: var(--dark);
}


/* =========================================================
   FAKTEN
   ========================================================= */

.detail-facts {
    display: grid;

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

    gap: 10px;

    margin: 26px 0 25px;
}

.detail-fact {
    min-height: 105px;

    padding: 13px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border-radius: 18px;

    background: #faf8f5;
}

.fact-icon {
    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    background: var(--light-lilac);

    font-size: 0.8rem;
}

.detail-fact:nth-child(2) .fact-icon {
    background: var(--mint);
}

.detail-fact:nth-child(3) .fact-icon {
    background: var(--pink);
}

.detail-fact strong {
    display: block;

    margin-bottom: 2px;

    font-size: 0.68rem;
}

.detail-fact span:last-child {
    display: block;

    color: var(--soft-dark);

    font-size: 0.63rem;

    line-height: 1.4;
}


/* =========================================================
   DOWNLOAD BUTTON
   ========================================================= */

.download-button {
    width: 100%;

    min-height: 58px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 100px;

    background: var(--dark);

    color: var(--white);

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.download-button:hover {
    transform: translateY(-2px);

    background: var(--pink);

    color: var(--dark);

    box-shadow:
        0 10px 25px
        rgba(81, 75, 87, 0.14);
}

.download-arrow {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    font-size: 1rem;
}

.download-small {
    margin-top: 9px;

    text-align: center;

    color: #aaa4ae;

    font-size: 0.65rem;
}


/* =========================================================
   MENSCHEN-ABFRAGE
   ========================================================= */

.modal-open {
    overflow: hidden;
}

.human-check {
    position: fixed;

    z-index: 1000;

    inset: 0;

    padding: 25px;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(81, 75, 87, 0.45);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}

.human-check.show {
    display: flex;
}

.human-check-box {
    position: relative;

    width: min(100%, 460px);

    padding: 42px 38px 35px;

    border-radius: 30px;

    background: var(--white);

    text-align: center;

    box-shadow:
        0 25px 70px
        rgba(81, 75, 87, 0.22);
}

.close-check {
    position: absolute;

    top: 13px;
    right: 15px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #f4f1ed;

    color: var(--soft-dark);

    font-size: 1.2rem;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.close-check svg {
    width: 15px;
    height: 15px;
}

.close-check:hover {
    background: var(--cream);

    color: var(--dark);
}

.human-check-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 17px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mint);

    font-size: 1.5rem;
}

.human-check-box .small-title {
    margin-bottom: 10px;
}

.human-check-box h2 {
    margin-bottom: 12px;

    font-size: 2rem;
}

.human-check-box h2 span {
    display: block;

    color: var(--pink);
}

.human-check-box >
p:not(.small-title):not(.human-check-note) {
    margin-bottom: 23px;

    color: var(--soft-dark);

    font-size: 0.82rem;

    line-height: 1.6;
}


/* =========================================================
   DANKE-FENSTER NACH DOWNLOAD
   ========================================================= */

/*
   Nutzt dieselbe .human-check / .human-check-box Optik,
   nur der Icon-Kreis ist rosa statt mint eingefärbt.
*/

#downloadThanks .human-check-icon {
    background: var(--pink);
}

.facebook-follow-button {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    min-height: 52px;

    margin-top: 4px;

    border-radius: 100px;

    background: #1877f2;

    color: var(--white);

    font-size: 0.78rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.facebook-follow-button:hover {
    transform: translateY(-2px);

    background: #0f5fcc;
}

.facebook-follow-button svg {
    width: 17px;
    height: 17px;

    fill: var(--white);
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.human-check-label {
    position: relative;

    min-height: 58px;

    padding: 10px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

    border:
        2px solid
        #e8e3e8;

    border-radius: 16px;

    color: var(--dark);

    font-size: 0.78rem;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.human-check-label input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.custom-checkbox {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;

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

    border:
        2px solid
        var(--light-lilac);

    border-radius: 8px;

    color: transparent;

    font-size: 0.8rem;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.human-check-label input:checked
+ .custom-checkbox {
    border-color: var(--mint);

    background: var(--mint);

    color: var(--dark);
}

.human-check-label:focus-within {
    border-color: var(--lilac);
}

.human-check-label:has(input:checked) {
    border-color: var(--mint);

    background: #f8fffb;
}


/* =========================================================
   DOWNLOAD BESTÄTIGEN
   ========================================================= */

.confirm-download {
    width: 100%;

    min-height: 52px;

    margin-top: 13px;

    border: 0;

    border-radius: 100px;

    background: var(--dark);

    color: var(--white);

    font-size: 0.78rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.confirm-download span {
    margin-left: 8px;
}

.confirm-download:not(:disabled):hover {
    transform: translateY(-2px);

    background: var(--pink);

    color: var(--dark);
}

.confirm-download:disabled {
    opacity: 0.35;

    cursor: not-allowed;
}

.human-check-note {
    margin-top: 12px;

    color: #aaa4ae;

    font-size: 0.62rem;
}


/* =========================================================
   INFORMATIONSBEREICH
   ========================================================= */

.pattern-info {
padding: 75px 65px;

background: var(--cream);

}

/* =========================================================
TAB-FLÄCHE
========================================================= */

.pattern-info-tabs {
width: min(100%, 1000px);

margin: 0 auto;

overflow: hidden;

border-radius: 28px;

background: var(--white);

box-shadow:
    0 12px 35px rgba(81, 75, 87, 0.08);

}

/* =========================================================
TAB-NAVIGATION
========================================================= */

.pattern-tab-buttons {
display: grid;

grid-template-columns: repeat(4, 1fr);

border-bottom: 1px solid #eee9e6;

background: #faf8f5;

}

.pattern-tab-button {
position: relative;

min-height: 62px;

padding: 16px 20px;

border: 0;

background: transparent;
color: #aaa4ae;

font-family: "DM Sans", sans-serif;

font-size: 0.7rem;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.08em;

cursor: pointer;

transition:
    color 0.2s ease,
    background 0.2s ease;

}

.pattern-tab-button:hover {
color: var(--dark);
background: rgba(255, 255, 255, 0.7);
}

.pattern-tab-button.active {
color: var(--dark);
background: var(--white);
}

/* Aktiver Balken */

.pattern-tab-button.active::after {
content: "";

position: absolute;

left: 18%;
right: 18%;
bottom: -1px;

height: 3px;

border-radius: 100px;

background: var(--lilac);

}

/* =========================================================
TAB-INHALT
========================================================= */

.pattern-tab-content {
padding: 45px 50px 50px;
}

.pattern-tab-panel {
max-width: 780px;

margin: 0 auto;

}

/* =========================================================
TAB ÜBERSCHRIFT
========================================================= */

.pattern-tab-panel .small-title {
margin-bottom: 10px;
}

.pattern-tab-panel h2 {
margin-bottom: 22px;

font-size: clamp(2rem, 4vw, 3rem);

}

/* =========================================================
TEXT
========================================================= */

.pattern-tab-panel p:not(.small-title) {
margin-bottom: 15px;

color: var(--soft-dark);

font-size: 0.86rem;
line-height: 1.75;

}

.pattern-tab-panel p:last-child {
margin-bottom: 0;
}

.pattern-tab-panel strong {
color: var(--dark);
}

/* =========================================================
DETAIL-INFORMATIONEN
========================================================= */

.pattern-info-details {
display: grid;

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

gap: 12px;

margin-top: 30px;

}

.pattern-info-details > div {
min-height: 82px;

padding: 16px 18px;

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

border-radius: 17px;

background: #faf8f5;

}

.pattern-info-details strong {
display: block;

margin-bottom: 5px;

color: var(--dark);

font-size: 0.68rem;

text-transform: uppercase;
letter-spacing: 0.05em;

}

.pattern-info-details span {
color: var(--soft-dark);

font-size: 0.72rem;
line-height: 1.45;

}

/* =========================================================
MATERIAL
========================================================= */

#materialPanel {
max-width: 780px;
}

#materialPanel p:not(.small-title) {
margin-bottom: 17px;
}

.material-list {
display: flex;
flex-direction: column;

gap: 10px;

margin-top: 22px;
}

.material-list > div {
padding: 15px 18px;

display: flex;
flex-direction: column;

gap: 3px;

border-radius: 15px;

background: #faf8f5;
}

.material-list strong {
color: var(--dark);

font-size: 0.68rem;

text-transform: uppercase;
letter-spacing: 0.05em;
}

.material-list span {
color: var(--soft-dark);

font-size: 0.78rem;
line-height: 1.5;
}

/* =========================================================
NUTZUNGSRECHT
========================================================= */

#rightsPanel {
max-width: 780px;
}

#rightsPanel p:not(.small-title) {
margin-bottom: 17px;
}

/* =========================================================
AUSBLENDEN DER INAKTIVEN FLÄCHE
========================================================= */

.pattern-tab-panel[hidden] {
display: none;
}

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

@media (max-width: 950px) {

.pattern-info {
    padding-left: 40px;
    padding-right: 40px;
}

.pattern-tab-content {
    padding: 40px 35px 45px;
}

}

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

@media (max-width: 700px) {

.pattern-info {
    padding: 55px 20px;
}


.pattern-info-tabs {
    border-radius: 23px;
}


.pattern-tab-button {
    min-height: 56px;

    padding: 14px 10px;

    font-size: 0.62rem;
}


.pattern-tab-button.active::after {
    left: 12%;
    right: 12%;
}


.pattern-tab-content {
    padding: 32px 22px 35px;
}


.pattern-tab-panel h2 {
    margin-bottom: 18px;

    font-size: 2rem;
}


.pattern-tab-panel p:not(.small-title) {
    font-size: 0.82rem;

    line-height: 1.7;
}


.pattern-info-details {
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 25px;
}


.pattern-info-details > div {
    min-height: 70px;

    padding: 14px 16px;
}


.material-list > div {
    padding: 13px 16px;
}

}

/* =========================================================
SEHR KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

.pattern-tab-button {
    font-size: 0.56rem;

    letter-spacing: 0.05em;
}


.pattern-tab-content {
    padding: 28px 18px 30px;
}


.pattern-tab-panel h2 {
    font-size: 1.8rem;
}

}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

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

.pattern-tab-button {
    transition: none !important;
}

}


/* =========================================================
   RECHTLICHER HINWEIS
   ========================================================= */

.pattern-rights {
    padding: 25px 65px 25px;

    background: var(--white);

    text-align: center;
}

.pattern-rights p {
    max-width: 750px;

    margin: auto;

    color: #aaa4ae;

    font-size: 0.63rem;

    line-height: 1.6;
}


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

@media (max-width: 950px) {

    .pattern-detail {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 55px 40px 65px;
    }

    .pattern-gallery {
        padding: 30px;
    }

    .pattern-detail-content {
        max-width: 700px;

        margin: 0 auto;
    }

    .pattern-info,
    .pattern-recommendations {
        padding-left: 40px;

        padding-right: 40px;
    }

}


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

@media (max-width: 700px) {

    .pattern-detail {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px 20px 55px;
    }

    /*
       Auf kleinen Bildschirmen etwas weniger
       Abstand im grünen Galerie-Kasten.
    */

    .pattern-gallery {
        padding: 20px;

        border-radius: 25px;
    }

    .pattern-detail-image {
        aspect-ratio: 1 / 1;

        border-radius: 19px;
    }

    .gallery-nav {
        width: 34px;
        height: 34px;
    }

    .gallery-nav img {
        width: 40px;
        height: 40px;
    }

    .gallery-nav-row {
        margin-top: 10px;
    }

    .detail-number {
        right: 12px;
        bottom: 12px;

        width: 45px;
        height: 45px;
    }

    .pattern-detail-content h1 {
        font-size: 3rem;
    }

    .detail-subtitle {
        font-size: 0.88rem;
    }

    .detail-facts {
        grid-template-columns: 1fr;
    }

    .detail-fact {
        min-height: auto;

        flex-direction: row;

        align-items: center;
    }

    .download-button {
        min-height: 55px;

        font-size: 0.74rem;
    }

    .pattern-info {
        padding: 55px 20px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-card {
        min-height: auto;
    }

    .pattern-recommendations {
        padding: 55px 20px 60px;
    }

    .recommendation-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .recommendation-card {
        border-radius: 22px;
    }

    .recommendation-image {
        aspect-ratio: 1.35;
    }

    .pattern-rights {
        padding: 20px 20px 40px;
    }

    .human-check {
        padding: 15px;
    }

    .human-check-box {
        padding: 38px 23px 28px;

        border-radius: 25px;
    }

    .human-check-box h2 {
        font-size: 1.7rem;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 420px) {

    .pattern-gallery {
        padding: 15px;

        border-radius: 22px;
    }

    .pattern-detail-content h1 {
        font-size: 2.65rem;
    }

    .detail-meta-item {
        font-size: 0.6rem;
    }

    .section-heading h2 {
        font-size: 2rem;
    }

    .download-button {
        font-size: 0.7rem;
    }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

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

    .pattern-detail-image img,
    .recommendation-card,
    .recommendation-image img,
    .download-button,
    .confirm-download,
    .facebook-follow-button {
        transition: none !important;
    }

}


/* =========================================================
   BILD-VOLLANSICHT (LIGHTBOX)
   ========================================================= */

.pattern-detail-image {
    cursor: zoom-in;
}

.pattern-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 50px;

    background: rgba(81, 75, 87, 0.94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.pattern-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.pattern-lightbox-image {
    width: 20cm;
    height: 20cm;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 18px;

    box-shadow: var(--shadow);

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}

.pattern-lightbox-close {
    position: absolute;

    top: 26px;
    right: 26px;

    z-index: 2;

    width: 46px;
    height: 46px;

    display: flex;

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

    border: 0;
    border-radius: 50%;

    background: var(--pink);

    color: var(--dark);

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    box-shadow: var(--shadow-soft);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.pattern-lightbox-close:hover {
    background: #A9D9F0;

    transform: scale(1.08);
}

.pattern-lightbox-nav {
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    width: 52px;
    height: 52px;

    display: flex;

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

    border: 0;
    border-radius: 50%;

    background: var(--pink);

    color: var(--dark);

    cursor: pointer;

    box-shadow: var(--shadow-soft);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.pattern-lightbox-nav:hover {
    background: #A9D9F0;

    transform: translateY(-50%) scale(1.08);
}

.pattern-lightbox-nav img {
    width: 55px;
    height: 55px;

    object-fit: contain;

    pointer-events: none;
}

.pattern-lightbox-prev {
    left: 26px;
}

.pattern-lightbox-next {
    right: 26px;
}

@media (max-width: 640px) {

    .pattern-lightbox {
        padding: 16px;
    }

    .pattern-lightbox-close {
        top: 14px;
        right: 14px;

        width: 40px;
        height: 40px;

        font-size: 22px;
    }

    .pattern-lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .pattern-lightbox-nav img {
        width: 44px;
        height: 44px;
    }

    .pattern-lightbox-prev {
        left: 8px;
    }

    .pattern-lightbox-next {
        right: 8px;
    }

}