/* ============================
   VELKÝ CRAFT RÁMEČEK — ŠEDÝ
   ============================ */

.craft-frame {
    width: 80%;
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;

    background: #6d6b6b;                     /* tvoje šedá */
    border-radius: 22px;

    background-size: cover;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.15),
        inset 0 0 0 3px rgba(255,255,255,0.25),
        0 20px 25px rgba(0,0,0,0.12);         /* čistý šedý stín */
}

/* ============================
   CRAFT GALERIE — ŠEDÁ
   ============================ */

.craft-gallery {
    width: 100%;
    padding: 20px;
}

/* ============================
   VELKÝ OBRÁZEK
   ============================ */

.craft-big {
    position: relative;
    padding: 12px;
    background: #fff;
    border-radius: 12px;

    /* jemná craft hrana */
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.craft-big img {
    width: 100%;
    border-radius: 8px;
}

/* Fade efekt */
.fade-img {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.fade-img.show {
    opacity: 1;
}

/* ============================
   ŠIPKY — ŠEDÉ
   ============================ */

.arrow-left,
.arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 34px;
    color: #6e6e6e;
    cursor: pointer;
    user-select: none;
    padding: 6px 12px;
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
    border: 1px solid #cfcfcf;
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
    transition: 0.2s;
}

.arrow-left:hover,
.arrow-right:hover {
    transform: translateY(-50%) scale(1.1);
}

.arrow-left { left: -20px; }
.arrow-right { right: -20px; }

/* ============================
   POSUVNÉ NÁHLEDY — ŠIRŠÍ, ČISTÉ
   ============================ */

.craft-thumbs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    padding-top: 12px;
    padding-bottom: 22px;        /* širší spodní pruh */
    margin-top: 1rem;

    border-radius: 12px;

    /* odstraněn béžový podklad */
    background: transparent;
    border: none;
    box-shadow: none;
}

.craft-thumbs {
    display: inline-flex;
    gap: 12px;
    padding: 12px;
}

.craft-thumbs img {
    width: 95px;                 /* větší náhledy */
    height: 75px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    border: 1px solid #d0d0d0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.10);
    transition: 0.25s;
}

.craft-thumbs img:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

/* ============================
   RESPONSIVE — TABLET
   ============================ */

@media (max-width: 768px) {
    .craft-frame {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }

    .craft-gallery {
        padding: 15px;
    }

    .craft-big img {
        width: 100%;
        height: auto;
    }

    .arrow-left { left: 5px; }
    .arrow-right { right: 5px; }

    .arrow-left,
    .arrow-right {
        font-size: 28px;
        padding: 4px 8px;
    }

    .craft-thumbs-wrapper {
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .craft-thumbs img {
        width: 75px;
        height: 60px;
        padding: 4px;
    }
}

/* ============================
   RESPONSIVE — MOBIL
   ============================ */

@media (max-width: 480px) {
    .craft-frame {
        padding: 15px;
    }

    .craft-big {
        padding: 8px;
    }

    .craft-thumbs img {
        width: 60px;
        height: 45px;
    }
}