.mdh-pg {
    --mdh-pg-gap: 12px;
    --mdh-pg-per-view: 4;
    --mdh-pg-zoom-scale: 1.45;
    box-sizing: border-box;
    width: 100%;
}

.mdh-pg *,
.mdh-pg *::before,
.mdh-pg *::after { box-sizing: border-box; }

.mdh-pg__main-wrap,
.mdh-pg__main-image { width: 100%; }

.mdh-pg__main-image {
    border: 0 solid transparent;
    overflow: hidden;
    position: relative;
}

.mdh-pg__main-img {
    display: block;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform .22s ease;
    width: 100%;
}

.mdh-pg--hover-zoom .mdh-pg__main-img.is-zoomed {
    transform: scale(var(--mdh-pg-zoom-scale));
}

.mdh-pg__thumbs-wrap {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: var(--mdh-pg-gap);
    min-width: 0;
    width: 100%;
}

.mdh-pg--no-arrows .mdh-pg__thumbs-wrap { gap: 0; }

.mdh-pg__thumbs {
    display: flex;
    flex: 1 1 auto;
    gap: var(--mdh-pg-gap);
    min-width: 0;
    margin-block: -8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-y;
    width: 100%;
}

.mdh-pg__thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.mdh-pg__thumbs::-webkit-scrollbar { display: none; }

.mdh-pg--layout-wrap .mdh-pg__thumbs {
    flex-wrap: wrap;
    margin-block: 0;
    overflow: visible;
    padding-block: 0;
}

.mdh-pg__thumb {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 calc((100% - (var(--mdh-pg-per-view) - 1) * var(--mdh-pg-gap)) / var(--mdh-pg-per-view));
    margin: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mdh-pg__thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    width: 100%;
}

.mdh-pg--active-border .mdh-pg__thumb.is-active {
    border-color: #10284b;
    border-width: 2px;
}

.mdh-pg--thumb-hover-lift .mdh-pg__thumb:hover,
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:focus-visible {
    box-shadow: 0 8px 18px rgba(16, 40, 75, .14);
    transform: translateY(-2px);
}

.mdh-pg--thumb-hover-zoom .mdh-pg__thumb:hover img,
.mdh-pg--thumb-hover-zoom .mdh-pg__thumb:focus-visible img {
    transform: scale(1.04);
}

.mdh-pg__thumb:focus-visible {
    outline: 2px solid rgba(16, 40, 75, .35);
    outline-offset: 2px;
}

.mdh-pg__arrow {
    align-items: center;
    background: #fff;
    border: 1px solid #d7d1c7;
    border-radius: 999px;
    color: #10284b;
    cursor: pointer;
    display: flex;
    flex: 0 0 38px;
    font-size: 28px;
    height: 38px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 38px;
}

.mdh-pg__arrow:disabled { cursor: default; opacity: .35; }
.mdh-pg--hide-disabled .mdh-pg__arrow:disabled { visibility: hidden; }
.mdh-pg--no-arrows .mdh-pg__arrow { display: none !important; }
.mdh-pg--no-arrows .mdh-pg__thumbs { flex-basis: 100%; max-width: 100%; width: 100%; }

.mdh-pg__notice {
    background: #fff8e5;
    border: 1px solid #e7cf91;
    border-radius: 6px;
    padding: 14px;
}

@media (max-width: 767px) {
    .mdh-pg { --mdh-pg-per-view: 3; }
    .mdh-pg__arrow { flex-basis: 34px; height: 34px; width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .mdh-pg__main-img,
    .mdh-pg__thumb,
    .mdh-pg__thumb img,
    .mdh-pg__thumbs { scroll-behavior: auto; transition: none; }
}


/* v1.4.1: preserve thumbnail border during lift and clarify state styling */
.mdh-pg__thumb {
    position: relative;
}
.mdh-pg__thumb img {
    border-radius: inherit;
}
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:hover,
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:focus-visible {
    z-index: 2;
}
.mdh-pg--active-border .mdh-pg__thumb.is-active {
    border-style: solid;
}


/* v1.4.2: edge-to-edge thumbnails, stable state colours, optional scroll indicator */
.mdh-pg {
    --mdh-pg-thumb-border-top: 1px;
    --mdh-pg-thumb-border-right: 1px;
    --mdh-pg-thumb-border-bottom: 1px;
    --mdh-pg-thumb-border-left: 1px;
    --mdh-pg-active-border-width: 2px;
    --mdh-pg-thumb-normal-bg: transparent;
    --mdh-pg-thumb-hover-bg: transparent;
    --mdh-pg-thumb-active-bg: transparent;
    --mdh-pg-thumb-normal-border: transparent;
    --mdh-pg-thumb-hover-border: #10284b;
    --mdh-pg-thumb-active-border: #10284b;
}
.mdh-pg .mdh-pg__thumb {
    background-color: var(--mdh-pg-thumb-normal-bg) !important;
    border: 0 !important;
    box-shadow:
        inset var(--mdh-pg-thumb-border-left) 0 0 var(--mdh-pg-thumb-normal-border),
        inset calc(var(--mdh-pg-thumb-border-right) * -1) 0 0 var(--mdh-pg-thumb-normal-border),
        inset 0 var(--mdh-pg-thumb-border-top) 0 var(--mdh-pg-thumb-normal-border),
        inset 0 calc(var(--mdh-pg-thumb-border-bottom) * -1) 0 var(--mdh-pg-thumb-normal-border);
    isolation: isolate;
}
.mdh-pg .mdh-pg__thumb img {
    border-radius: inherit;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.mdh-pg .mdh-pg__thumb:hover,
.mdh-pg .mdh-pg__thumb:focus-visible {
    background-color: var(--mdh-pg-thumb-hover-bg) !important;
    box-shadow: inset 0 0 0 max(var(--mdh-pg-thumb-border-top), var(--mdh-pg-thumb-border-right), var(--mdh-pg-thumb-border-bottom), var(--mdh-pg-thumb-border-left)) var(--mdh-pg-thumb-hover-border);
}
.mdh-pg.mdh-pg--active-border .mdh-pg__thumb.is-active {
    background-color: var(--mdh-pg-thumb-active-bg) !important;
    box-shadow: inset 0 0 0 var(--mdh-pg-active-border-width) var(--mdh-pg-thumb-active-border);
}
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:hover,
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:focus-visible {
    transform: translateY(-2px);
}
.mdh-pg__scrollbar {
    background: #e6e3dd;
    cursor: pointer;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    overflow: hidden;
    position: relative;
    width: 70%;
}
.mdh-pg__scrollbar-thumb {
    background: #10284b;
    display: block;
    height: 100%;
    left: 0;
    min-width: 24px;
    position: absolute;
    top: 0;
    transform: translateX(0);
    width: 100%;
}
.mdh-pg__scrollbar.is-hidden { display: none; }


/* v1.4.3: restore visible thumbnail borders without image gaps */
.mdh-pg {
    --mdh-pg-thumb-border-style: solid;
}
.mdh-pg .mdh-pg__thumb {
    background-color: var(--mdh-pg-thumb-normal-bg) !important;
    border-style: var(--mdh-pg-thumb-border-style) !important;
    border-color: var(--mdh-pg-thumb-normal-border) !important;
    border-width:
        var(--mdh-pg-thumb-border-top)
        var(--mdh-pg-thumb-border-right)
        var(--mdh-pg-thumb-border-bottom)
        var(--mdh-pg-thumb-border-left) !important;
    box-shadow: none;
    isolation: auto;
    overflow: hidden;
    padding: 0;
}
.mdh-pg .mdh-pg__thumb img {
    border-radius: 0;
    display: block;
    height: 100%;
    inset: auto;
    object-fit: cover;
    position: static;
    transform-origin: center;
    width: 100%;
    z-index: auto;
}
.mdh-pg .mdh-pg__thumb:hover,
.mdh-pg .mdh-pg__thumb:focus-visible {
    background-color: var(--mdh-pg-thumb-hover-bg) !important;
    border-color: var(--mdh-pg-thumb-hover-border) !important;
    box-shadow: none;
}
.mdh-pg.mdh-pg--active-border .mdh-pg__thumb.is-active {
    background-color: var(--mdh-pg-thumb-active-bg) !important;
    border-color: var(--mdh-pg-thumb-active-border) !important;
    box-shadow: inset 0 0 0 var(--mdh-pg-active-border-width) var(--mdh-pg-thumb-active-border);
}
.mdh-pg--thumb-hover-lift .mdh-pg__thumbs {
    padding-top: 4px;
}
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:hover,
.mdh-pg--thumb-hover-lift .mdh-pg__thumb:focus-visible {
    transform: translateY(-2px);
}


/* v1.4.4: independent gallery spacing and sharper main image rendering */
.mdh-pg__main-img {
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.mdh-pg__thumbs-wrap {
    margin-top: 12px;
}