/* STEP 26 — contact artwork, robust Music ART hero backgrounds, refined preloader */

/* Contact image card */
.gimmons-contact-visual-panel {
    position: relative;
    display: block;
    min-height: clamp(440px, 46vw, 690px);
    overflow: hidden;
    background: #11100f;
    border: 1px solid rgba(23,20,17,.18);
    box-shadow: 0 35px 90px rgba(23,20,17,.16);
    text-decoration: none;
}
.gimmons-contact-visual-panel img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.002);
    transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease;
}
.gimmons-contact-visual-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.54) 100%);
    pointer-events: none;
}
.gimmons-contact-visual-panel:hover img {
    transform: scale(1.035);
    filter: brightness(1.04);
}
.gimmons-contact-visual-label {
    position: absolute;
    z-index: 2;
    left: clamp(20px,2.5vw,38px);
    right: clamp(20px,2.5vw,38px);
    bottom: clamp(20px,2.5vw,34px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: #f3eee8;
    font-size: clamp(17px,1.4vw,23px);
    letter-spacing: -.02em;
}
.gimmons-contact-visual-label i {
    transition: transform .3s ease;
}
.gimmons-contact-visual-panel:hover .gimmons-contact-visual-label i {
    transform: translate(4px,-4px);
}

/* Final robust background layer for the two buy/detail pages */
#hero.gimmons-music-hero-fixed {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #171411 !important;
    background-image:
      linear-gradient(90deg, rgba(13,11,10,.48) 0%, rgba(13,11,10,.16) 52%, rgba(13,11,10,.08) 100%),
      linear-gradient(0deg, rgba(13,11,10,.45) 0%, rgba(13,11,10,.02) 58%),
      var(--gimmons-project-bg) !important;
    background-size: cover !important;
    background-position: var(--gimmons-project-position, center center) !important;
    background-repeat: no-repeat !important;
}
#hero.gimmons-music-hero-fixed::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--gimmons-project-bg) !important;
    background-size: cover !important;
    background-position: var(--gimmons-project-position, center center) !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    transform: scale(1.012);
}
#hero.gimmons-music-hero-fixed::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(13,11,10,.54) 0%, rgba(13,11,10,.22) 48%, rgba(13,11,10,.06) 76%),
      linear-gradient(0deg, rgba(13,11,10,.55) 0%, rgba(13,11,10,.05) 56%, rgba(13,11,10,.10) 100%) !important;
}
#hero.gimmons-music-hero-fixed .gimmons-hero-art-bg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#hero.gimmons-music-hero-fixed .gimmons-hero-art-bg img {
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover !important;
    object-position: var(--gimmons-project-position, center center) !important;
}
#hero.gimmons-music-hero-fixed #hero-wrapper,
#hero.gimmons-music-hero-fixed #hero-caption,
#hero.gimmons-music-hero-fixed #hero-footer {
    position: relative !important;
    z-index: 4 !important;
}

/* Preloader: centered logo + explicit percent sign */
.preloader-wrap {
    background: #f3eee8;
}
.gimmons-preloader-logo {
    top: 46% !important;
    width: clamp(240px, 30vw, 520px) !important;
    filter: none;
}
.preloader-percentage {
    overflow: visible !important;
}
.percentage {
    position: relative;
    overflow: visible !important;
    padding-right: .42em;
}
.percentage::after {
    content: "%";
    position: absolute;
    right: -.08em;
    top: 0;
    font-size: .32em;
    line-height: 1;
    letter-spacing: 0;
    transform: translateY(.18em);
}
.preloader-info {
    opacity: .72;
}
@media only screen and (max-width: 900px) {
    .gimmons-contact-visual-panel { min-height: 440px; }
}
@media only screen and (max-width: 767px) {
    .gimmons-contact-visual-panel { min-height: 380px; }
    .gimmons-preloader-logo { top: 44% !important; width: min(74vw, 360px) !important; }
}