/*
 * Eigene CSS-Anpassungen für GP AUDIO
 *
 * Diese Datei wird nach den Standard-Styles geladen und kann
 * daher vorhandene JTL-/NOVA-Styles überschreiben.
 */


/* =========================================================
   GP AUDIO – FARBEN
   ========================================================= */

:root {
    --gp-audio-red: #DE1E32;
    --gp-audio-red-light: #E95867;
    --gp-white: #FFFFFF;
}


/* =========================================================
   LINKS
   ========================================================= */

a:hover {
    color: var(--gp-audio-red);
    text-decoration: none;
}

#header-top-bar a:hover:not(.dropdown-item):not(.btn),
header a:hover:not(.dropdown-item):not(.btn) {
    color: var(--gp-audio-red);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary {
    color: var(--gp-white) !important;
    background-color: var(--gp-audio-red) !important;
    border-color: var(--gp-audio-red) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--gp-white) !important;
    background-color: var(--gp-audio-red-light) !important;
    border-color: var(--gp-audio-red) !important;
}

.btn-link:hover {
    color: var(--gp-audio-red);
    text-decoration: none;
}


/* =========================================================
   NAVIGATION / TABS / FILTER
   ========================================================= */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: var(--gp-audio-red);
}

.tab-navigation .nav-link::after {
    border-color: var(--gp-audio-red);
}

.productlist-filter-categories > .nav-item > .nav-link::before {
    border-color: var(--gp-audio-red);
}

header .navbar-nav > .nav-item > .nav-link::before {
    border-color: var(--gp-audio-red);
}


/* =========================================================
   FORMULARE
   ========================================================= */

.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--gp-audio-red);
}


/* =========================================================
   WEITERE LINKS / ELEMENTE
   ========================================================= */

.page-link:hover,
.page-text:hover,
.form-icon-trigger-label:hover {
    color: var(--gp-audio-red);
}

.jqcloud-word a:hover {
    color: var(--gp-audio-red) !important;
}


/* =========================================================
   HEADER – KOPFZEILE UND KATEGORIEN
   ========================================================= */

/* Obere Kopfzeile: EUR / DE / Startseite / News / Kontakt */

#header-top-bar,
#header-top-bar a,
#header-top-bar .nav-link {
    font-size: 14px !important;
    line-height: 1.4;
}


/* Hauptnavigation / Kategorien */

header .navbar-nav > .nav-item > .nav-link {
    font-size: 18px !important;
    line-height: 1.35;
    font-weight: 500;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
}


/* Kleinere Desktopbreiten / Tablet */

@media (max-width: 1199.98px) {

    #header-top-bar,
    #header-top-bar a,
    #header-top-bar .nav-link {
        font-size: 13px !important;
    }

    header .navbar-nav > .nav-item > .nav-link {
        font-size: 16px !important;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   STARTSEITE – EINLEITUNGSBEREICH
   ========================================================= */

.gp-audio-intro {
    padding: 20px 20px 20px 0;
}

.gp-audio-intro h1 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--gp-audio-red);
}

.gp-audio-intro h2 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 600;
}

.gp-audio-intro p {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.55;
}


/* Tablet */

@media (max-width: 991.98px) {

    .gp-audio-intro h1 {
        font-size: 30px;
    }

    .gp-audio-intro h2 {
        font-size: 21px;
    }

    .gp-audio-intro p {
        font-size: 16px;
    }
}


/* Smartphone */

@media (max-width: 575.98px) {

    .gp-audio-intro {
        padding: 12px 0;
    }

    .gp-audio-intro h1 {
        font-size: 28px;
    }

    .gp-audio-intro h2 {
        font-size: 20px;
    }

    .gp-audio-intro p {
        font-size: 16px;
    }
}


/* =========================================================
   STARTSEITE – PORTRAIT
   DE + EN
   ========================================================= */

img[alt="Inhaber von GP AUDIO"],
img[alt="Owner of GP AUDIO"] {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}


/* Tablet */

@media (max-width: 991.98px) {

    img[alt="Inhaber von GP AUDIO"],
    img[alt="Owner of GP AUDIO"] {
        max-width: 190px;
    }
}


/* Smartphone */

@media (max-width: 575.98px) {

    img[alt="Inhaber von GP AUDIO"],
    img[alt="Owner of GP AUDIO"] {
        max-width: 170px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
}


/* =========================================================
   STARTSEITE – KATEGORIEKACHELN
   DE + EN
   ========================================================= */

/*
 * Einheitliche Bildfläche für die vier Hauptbereiche.
 * Unterschiedliche Bildformate bleiben unverzerrt.
 */

img[alt="Schallplatten-Waschmaschine bei GP AUDIO"],
img[alt="Record cleaning machine at GP AUDIO"],
img[alt="Professionelle Schallplattenreinigung bei GP AUDIO"],
img[alt="Professional record cleaning at GP AUDIO"],
img[alt="Vinyl und Schallplatten bei GP AUDIO"],
img[alt="Vinyl records at GP AUDIO"],
img[alt="Musik-Kassetten bei GP AUDIO"],
img[alt="Music cassettes at GP AUDIO"] {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 220px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}


/* Textbereich der Kacheln */

.gp-audio-category-tile {
    max-width: 380px;
    min-height: 170px;
    margin: 0 auto;
    padding: 10px 15px 15px 15px;
    text-align: center;
}

.gp-audio-category-tile h3 {
    min-height: 52px;
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--gp-audio-red);
}

.gp-audio-category-tile p {
    min-height: 72px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}


/* Tablet */

@media (max-width: 991.98px) {

    img[alt="Schallplatten-Waschmaschine bei GP AUDIO"],
    img[alt="Record cleaning machine at GP AUDIO"],
    img[alt="Professionelle Schallplattenreinigung bei GP AUDIO"],
    img[alt="Professional record cleaning at GP AUDIO"],
    img[alt="Vinyl und Schallplatten bei GP AUDIO"],
    img[alt="Vinyl records at GP AUDIO"],
    img[alt="Musik-Kassetten bei GP AUDIO"],
    img[alt="Music cassettes at GP AUDIO"] {
        max-width: 290px;
        height: 200px;
    }
}


/* Smartphone */

@media (max-width: 575.98px) {

    /*
     * Auf Mobilgeräten stehen die Kacheln untereinander.
     * Deshalb keine künstlichen Mindesthöhen.
     */

    .gp-audio-category-tile {
        min-height: 0;
        padding: 10px 15px 12px 15px;
        margin-bottom: 15px;
    }

    .gp-audio-category-tile h3,
    .gp-audio-category-tile p {
        min-height: 0;
    }

    /*
     * Abstand zwischen Button der vorherigen Kachel
     * und Bild der nächsten Kachel.
     */

    img[alt="Schallplatten-Waschmaschine bei GP AUDIO"],
    img[alt="Record cleaning machine at GP AUDIO"],
    img[alt="Professionelle Schallplattenreinigung bei GP AUDIO"],
    img[alt="Professional record cleaning at GP AUDIO"],
    img[alt="Vinyl und Schallplatten bei GP AUDIO"],
    img[alt="Vinyl records at GP AUDIO"],
    img[alt="Musik-Kassetten bei GP AUDIO"],
    img[alt="Music cassettes at GP AUDIO"] {
        max-width: 280px;
        height: 200px;
        margin-top: 30px;
    }
}


/* =========================================================
   STARTSEITE – ABHOLUNG / VERSAND / ZAHLUNG
   ========================================================= */

/*
 * Gleiche Mindesthöhe sorgt auf Desktop dafür, dass die
 * darunterliegenden Logos auf gleicher Höhe beginnen.
 */

.gp-audio-service-box {
    max-width: 380px;
    min-height: 165px;
    margin: 0 auto;
    padding: 15px 20px 5px 20px;
    text-align: center;
}

.gp-audio-service-box h3 {
    margin: 0 0 14px 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--gp-audio-red);
}

.gp-audio-service-box p {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   STARTSEITE – LOGOS ABHOLUNG / VERSAND / ZAHLUNG
   DE + EN
   ========================================================= */

img[alt="Click & Collect bei GP AUDIO"],
img[alt="Click & Collect at GP AUDIO"],
img[alt="DHL Versand bei GP AUDIO"],
img[alt="DHL shipping at GP AUDIO"],
img[alt="UPS Versand bei GP AUDIO"],
img[alt="UPS shipping at GP AUDIO"],
img[alt="DPD Versand bei GP AUDIO"],
img[alt="DPD shipping at GP AUDIO"],
img[alt="Hermes Versand bei GP AUDIO"],
img[alt="Hermes shipping at GP AUDIO"],
img[alt="Zahlung per Überweisung bei GP AUDIO"],
img[alt="Payment by bank transfer at GP AUDIO"],
img[alt="Zahlung per PayPal bei GP AUDIO"],
img[alt="Payment by PayPal at GP AUDIO"],
img[alt="Barzahlung bei GP AUDIO"],
img[alt="Cash payment at GP AUDIO"] {
    display: block !important;
    width: auto !important;
    max-width: 120px !important;
    height: 70px !important;
    object-fit: contain;
    margin: 0 auto !important;
}


/* Click & Collect ist breiter und wird auf Desktop leicht angehoben */

img[alt="Click & Collect bei GP AUDIO"],
img[alt="Click & Collect at GP AUDIO"] {
    max-width: 150px !important;
    transform: translateY(-10px);
}


/* =========================================================
   STARTSEITE – SERVICEBEREICH MOBIL
   ========================================================= */

@media (max-width: 767.98px) {

    .gp-audio-service-box {
        min-height: 0;
        margin-top: 10px;
        padding: 8px 15px 5px 15px;
    }

    .gp-audio-service-box h3 {
        margin-bottom: 12px;
    }

    .gp-audio-service-box p {
        margin-bottom: 10px;
    }

    /*
     * Click & Collect mobil nicht anheben.
     */

    img[alt="Click & Collect bei GP AUDIO"],
    img[alt="Click & Collect at GP AUDIO"] {
        transform: none;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    /*
     * Versand- und Zahlungslogos mobil mit einheitlichen,
     * kompakten vertikalen Abständen.
     */

    img[alt="DHL Versand bei GP AUDIO"],
    img[alt="DHL shipping at GP AUDIO"],
    img[alt="UPS Versand bei GP AUDIO"],
    img[alt="UPS shipping at GP AUDIO"],
    img[alt="DPD Versand bei GP AUDIO"],
    img[alt="DPD shipping at GP AUDIO"],
    img[alt="Hermes Versand bei GP AUDIO"],
    img[alt="Hermes shipping at GP AUDIO"],
    img[alt="Zahlung per Überweisung bei GP AUDIO"],
    img[alt="Payment by bank transfer at GP AUDIO"],
    img[alt="Zahlung per PayPal bei GP AUDIO"],
    img[alt="Payment by PayPal at GP AUDIO"],
    img[alt="Barzahlung bei GP AUDIO"],
    img[alt="Cash payment at GP AUDIO"] {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    /*
     * Zusätzlicher Abstand vor dem Schallplatten-Trennbild.
     */

    img[alt="Barzahlung bei GP AUDIO"],
    img[alt="Cash payment at GP AUDIO"] {
        margin-bottom: 30px !important;
    }
}


/* =========================================================
   STARTSEITE – SCHALLPLATTEN-TRENNBILD
   ========================================================= */

/*
 * Auf Desktop bleibt die im OPC eingestellte Höhe erhalten.
 * Auf Mobilgeräten wird der Parallax-Bereich deutlich flacher.
 */

@media (max-width: 767.98px) {

    body[data-page="18"] .opc-Container.parallax-window {
        min-height: 150px !important;
        height: 150px !important;
    }
}


/* =========================================================
   STARTSEITE – TOP-ARTIKEL
   ========================================================= */

/*
 * Auf Desktop ausreichend Abstand zum darüberliegenden
 * Schallplatten-Trennbild.
 */

body[data-page="18"] .product-slider-wrapper.product-slider-TopAngebot {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-top: 60px !important;
    padding-bottom: 0 !important;
}


/* Mobil etwas kompakter */

@media (max-width: 767.98px) {

    body[data-page="18"] .product-slider-wrapper.product-slider-TopAngebot {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
    }
}


/* =========================================================
   STARTSEITE – NEWS
   ========================================================= */

body[data-page="18"] .index-news-wrapper {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[data-page="18"] .index-news-wrapper .blog-header {
    margin-bottom: 20px !important;
}


/* =========================================================
   STARTSEITE – NEWS MOBIL
   ========================================================= */

@media (max-width: 767.98px) {

    body[data-page="18"] .index-news-wrapper {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body[data-page="18"] .index-news-wrapper .blog-header {
        margin-bottom: 15px !important;
    }

    /*
     * NOVA/Slick soll die News-Kacheln mobil nicht künstlich
     * auf dieselbe Mindesthöhe bringen.
     */

    body[data-page="18"] .index-news-wrapper .product-wrapper-news,
    body[data-page="18"] .index-news-wrapper .newsbox,
    body[data-page="18"] .index-news-wrapper .newsbox-body,
    body[data-page="18"] .index-news-wrapper .newsbox-footer {
        height: auto !important;
        min-height: 0 !important;
    }

    body[data-page="18"] .index-news-wrapper .newsbox {
        display: block !important;
    }

    body[data-page="18"] .index-news-wrapper .newsbox-footer {
        margin-top: 20px !important;
        position: static !important;
    }

    /*
     * Slick-Elemente ohne zusätzliche untere Abstände.
     */

    body[data-page="18"] .index-news-wrapper .slick-list,
    body[data-page="18"] .index-news-wrapper .slick-track {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /*
     * Der Slick-Track darf nicht durch einen längeren,
     * gerade unsichtbaren Newsbeitrag gestreckt werden.
     */

    body[data-page="18"] .index-news-wrapper .slick-track {
        height: auto !important;
        align-items: flex-start !important;
    }

    body[data-page="18"] .index-news-wrapper .product-wrapper-news {
        align-self: flex-start !important;
    }

    /*
     * Unsichtbare Slides dürfen keine Höhe belegen.
     * Das beseitigt den großen Leerraum vor dem Footer.
     */

    body[data-page="18"] .index-news-wrapper .slick-slide:not(.slick-active) {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body[data-page="18"] .index-news-wrapper .slick-slide.slick-active {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}


/* =========================================================
   FOOTER – KOMPAKTERE ABSTÄNDE
   ========================================================= */

#footer {
    padding-top: 30px !important;
    padding-bottom: 25px !important;
}

#footer .nav-panel .nav-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

#footer .box-normal {
    margin-bottom: 8px !important;
}


/* =========================================================
   MOBILE – FOOTER OHNE SCROLL-SPRUNG
   ========================================================= */

/*
 * Zusätzliche CSS-Absicherung.
 * Der eigentliche Hash-/Scroll-Fix erfolgt in custom.js.
 */

@media (max-width: 767.98px) {

    #footer,
    #footer * {
        overflow-anchor: none;
    }
}


/* =========================================================
   MOBILE – DOPPELTE SPRACHAUSWAHL IM HEADER ENTFERNEN
   ========================================================= */

@media (max-width: 991.98px) {

    /*
     * Erste Navigationsgruppe erhalten.
     */

    #jtl-nav-wrapper .nav-icons-wrapper > ul#shop-nav:nth-of-type(1) {
        display: flex !important;
    }

    /*
     * Nur deren doppelte Sprachauswahl ausblenden.
     */

    #jtl-nav-wrapper
    .nav-icons-wrapper
    > ul#shop-nav:nth-of-type(1)
    > li.language-dropdown {
        display: none !important;
    }
}

/* =========================================================
   GP AUDIO – LINK-HOVER EINHEITLICH ROT
   ========================================================= */

/*
 * NOVA verwendet an verschiedenen Stellen eigene,
 * spezifischere Hover-Farben.
 *
 * Alle normalen Textlinks sollen bei GP AUDIO
 * einheitlich rot statt gelb/orange erscheinen.
 *
 * Buttons werden ausdrücklich ausgenommen.
 */

body a:not(.btn):hover,
body a:not(.btn):focus {
    color: var(--gp-audio-red) !important;
}


/* Produktlisten / Slider / Zubehör / Stücklisten */

body .productbox a:not(.btn):hover,
body .productbox a:not(.btn):focus,
body .product-wrapper a:not(.btn):hover,
body .product-wrapper a:not(.btn):focus,
body .product-slider-wrapper a:not(.btn):hover,
body .product-slider-wrapper a:not(.btn):focus {
    color: var(--gp-audio-red) !important;
}


/* News */

body .newsbox a:not(.btn):hover,
body .newsbox a:not(.btn):focus,
body .index-news-wrapper a:not(.btn):hover,
body .index-news-wrapper a:not(.btn):focus {
    color: var(--gp-audio-red) !important;
}


/* Footer */

#footer a:not(.btn):hover,
#footer a:not(.btn):focus {
    color: var(--gp-audio-red) !important;
}