/* =====================================================
   TZPN SPREADSHOP – BEREINIGTE VERSION 2.3
   Quelle: letzter bereitgestellter, funktionierender Stand

   WICHTIG:
   - Diese Datei enthält ausschließlich CSS.
   - Der komplette Spreadshop-Header und die Navigation bleiben bis 767 px unangetastet.
   - Eigene Header-/Navigationseinstellungen gelten ausschließlich ab 768 px.
   - Das originale mobile Burger-Menü wird über swipeMenu:false im HTML-Widget aktiviert.
   ===================================================== */

/* =====================================================
   TZPN SPREADSHOP
   Grundlayout, Typografie, Navigation, Buttons und Footer
   ===================================================== */


/* =====================================================
   1. GRUNDEINSTELLUNGEN
   ===================================================== */

#myShop,
#myShop .SprdMain {
    width: 100%;
    max-width: none;
}

/* Der mobile Spreadshop-Header wird von globalen Schriftregeln ausgenommen. */
#myShop button:not(.sprd-header *):not(.sprd-navigation *),
#myShop input:not(.sprd-header *):not(.sprd-navigation *),
#myShop select:not(.sprd-header *):not(.sprd-navigation *),
#myShop textarea:not(.sprd-header *):not(.sprd-navigation *) {
    font-family: "Work Sans", Arial, sans-serif !important;
}


/* =====================================================
   2. ÜBERSCHRIFTEN UND SHOP-TEXTE
   ===================================================== */

#myShop h1:not(.sprd-header *):not(.sprd-navigation *) {
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #1F2933 !important;
}

#myShop h2:not(.sprd-header *):not(.sprd-navigation *) {
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #1F2933 !important;
}

#myShop h3:not(.sprd-header *):not(.sprd-navigation *) {
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #1F2933 !important;
}

#myShop p:not(.sprd-header *):not(.sprd-navigation *),
#myShop label:not(.sprd-header *):not(.sprd-navigation *) {
    font-size: 16px;
    line-height: 1.5;
}

#myShop .sprd-product-list a,
#myShop [class*="product"] a,
#myShop [class*="product"] p,
#myShop [class*="design"] p {
    font-size: 15px;
    line-height: 1.4;
}


/* =====================================================
   3. BUTTONS
   ===================================================== */

#myShop :is(
    .sprd-button,
    .sprd-button-primary,
    .sprd-button-secondary,
    a[class*="sprd-button"],
    button[class*="sprd-button"]
):not(.sprd-header *):not(.sprd-navigation *) {
    min-height: 44px !important;
    padding: 12px 22px !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    border-radius: 2px !important;
}

#myShop :is(
    .sprd-button-primary,
    a[class*="sprd-button"][class*="primary"],
    button[class*="sprd-button"][class*="primary"]
):not(.sprd-header *):not(.sprd-navigation *) {
    color: #ffffff !important;
    background-color: #008C95 !important;
    border-color: #008C95 !important;
}

#myShop :is(
    .sprd-button-primary,
    a[class*="sprd-button"][class*="primary"],
    button[class*="sprd-button"][class*="primary"]
):not(.sprd-header *):not(.sprd-navigation *):hover {
    color: #ffffff !important;
    background-color: #006F76 !important;
    border-color: #006F76 !important;
}


/* Der zusätzliche Link „Zur TZPN-Webseite“ wird ausschließlich
   in der Desktop-/Tablet-Navigation ab 768 px eingefügt. Mobil bleibt
   die originale Spreadshop-Navigation vollständig unverändert. */

/* =====================================================
   5. DESKTOP-/TABLET-NAVIGATION
   Mobil bleibt die originale Spreadshop-Navigation erhalten.
   ===================================================== */

@media (min-width: 768px) {
    #myShop .tzpn-shop-header,
    #myShop .sprd-header {
        background-color: #ffffff !important;
        border-bottom: 1px solid #E2E8EA !important;
    }

    #myShop .sprd-navigation .tzpn-main-link {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 46px !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        padding: 11px 13px !important;
        font-family: "Work Sans", Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        color: #1F2933 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #myShop .sprd-navigation .tzpn-main-link:hover,
    #myShop .sprd-navigation .tzpn-main-link:focus {
        color: #008C95 !important;
    }

    #myShop .sprd-navigation .tzpn-main-link::after {
        content: "" !important;
        position: absolute !important;
        right: 13px !important;
        bottom: 3px !important;
        left: 13px !important;
        height: 2px !important;
        background-color: #008C95 !important;
        transform: scaleX(0) !important;
        transform-origin: center !important;
        transition: transform 0.2s ease !important;
    }

    #myShop .sprd-navigation .tzpn-main-link:hover::after,
    #myShop .sprd-navigation .tzpn-main-link:focus::after,
    #myShop .sprd-navigation .tzpn-main-link[aria-expanded="true"]::after,
    #myShop .sprd-navigation .tzpn-main-link.active::after,
    #myShop .sprd-navigation .tzpn-main-link.is-active::after {
        transform: scaleX(1) !important;
    }

    #myShop .sprd-navigation .tzpn-main-link[aria-expanded="true"],
    #myShop .sprd-navigation .tzpn-main-link.active,
    #myShop .sprd-navigation .tzpn-main-link.is-active {
        color: #008C95 !important;
    }

    #myShop .tzpn-category-column {
        min-width: 0 !important;
    }

    #myShop .sprd-navigation .tzpn-category-title {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 0 9px !important;
        padding: 0 0 9px !important;
        font-family: "Work Sans", Arial, sans-serif !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-decoration: none !important;
        color: #008C95 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 2px solid rgba(0, 140, 149, 0.24) !important;
        border-radius: 0 !important;
    }

    #myShop .sprd-navigation .tzpn-category-title:hover,
    #myShop .sprd-navigation .tzpn-category-title:focus {
        color: #006F76 !important;
        border-bottom-color: #008C95 !important;
    }

    #myShop .sprd-navigation .tzpn-subcategory {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 0 2px !important;
        padding: 5px 8px !important;
        font-family: "Work Sans", Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-decoration: none !important;
        color: #334E56 !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 4px !important;
        transition: color 0.18s ease, background-color 0.18s ease !important;
    }

    #myShop .sprd-navigation .tzpn-subcategory:hover,
    #myShop .sprd-navigation .tzpn-subcategory:focus {
        color: #006F76 !important;
        background-color: #EAF7F6 !important;
    }

    #myShop .sprd-navigation .tzpn-all-link {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 8px 0 0 !important;
        padding: 9px 8px 4px !important;
        font-family: "Work Sans", Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-decoration: none !important;
        color: #008C95 !important;
        background-color: transparent !important;
        border: 0 !important;
        border-top: 1px solid #DCE8E8 !important;
        border-radius: 0 !important;
    }

    #myShop .sprd-navigation .tzpn-all-link:hover,
    #myShop .sprd-navigation .tzpn-all-link:focus {
        color: #006F76 !important;
        background-color: #EAF7F6 !important;
    }

    #myShop .sprd-header button[aria-label*="Warenkorb"],
    #myShop .sprd-header a[aria-label*="Warenkorb"],
    #myShop .sprd-header button[aria-label*="cart"],
    #myShop .sprd-header a[aria-label*="cart"] {
        min-width: 48px !important;
        min-height: 48px !important;
    }
}

@media (min-width: 1100px) {
    #myShop .sprd-navigation .tzpn-shop-link {
        margin-left: clamp(38px, 4vw, 68px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    #myShop .sprd-navigation .tzpn-shop-link {
        margin-left: 22px !important;
    }

    #myShop .sprd-navigation .tzpn-main-link {
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 15px !important;
    }

    #myShop .sprd-navigation .tzpn-category-title {
        font-size: 16px !important;
    }

    #myShop .sprd-navigation .tzpn-subcategory,
    #myShop .sprd-navigation .tzpn-all-link {
        font-size: 14px !important;
    }
}

/* =====================================================
   HOVER-BRÜCKE ZWISCHEN „SHOP“ UND DROPDOWN
   ===================================================== */

@media (min-width: 768px) {

    #myShop .sprd-navigation,
    #myShop .tzpn-shop-header,
    #myShop .sprd-header {
        overflow: visible !important;
    }

    #myShop .sprd-navigation .tzpn-shop-link {
        position: relative !important;
    }

    /*
     * Unsichtbare Fläche unterhalb des Shop-Menüpunkts.
     * Dadurch bleibt „Shop“ aktiv, bis die Maus das
     * eigentliche Dropdown erreicht.
     */
    #myShop .sprd-navigation .tzpn-shop-link:hover::before,
    #myShop .sprd-navigation .tzpn-shop-link[aria-expanded="true"]::before {
        content: "" !important;

        position: absolute !important;
        top: calc(100% - 2px) !important;
        left: -30px !important;
        right: -30px !important;

        width: auto !important;
        height: 46px !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        pointer-events: auto !important;
        z-index: 10 !important;
    }
}

/* =====================================================
   10. SPREADSHOP-FOOTER
   ===================================================== */

#myShop .sprd-footer {
    margin-top: 36px !important;
    background-color: #ffffff !important;
}


/* Informationsbereich */

#myShop .sprd-info-footer {
    margin: 0 !important;
    padding: 24px 30px !important;

    column-gap: 32px !important;
    row-gap: 18px !important;

    color: #1F2933 !important;
    background-color: #EAF7F6 !important;
}


/* Footer-Spalten */

#myShop .sprd-info-footer__col {
    margin: 0 !important;
    padding: 0 !important;
}


/* Footer-Überschriften */

#myShop .sprd-info-footer__heading {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

#myShop .sprd-info-footer__toggle {
    min-height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;

    color: #008C95 !important;
    background: transparent !important;

    border: 0 !important;
}


/* Footer-Links */

#myShop .sprd-info-footer__link,
#myShop .sprd-info-footer__link:visited {
    display: block;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;

    color: #1F2933 !important;
}

#myShop .sprd-info-footer__link:hover {
    color: #008C95 !important;
}


/* Footer-Beschreibungstexte */

#myShop .sprd-info-footer__text {
    margin: 6px 0 0 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    color: #52606D !important;
}

#myShop .sprd-info-footer__text__link {
    color: #52606D !important;
    font-weight: 600 !important;
}


/* Telefonzeiten */

#myShop .sprd-info-footer__times {
    font-size: 12px !important;
    line-height: 1.3 !important;
}


/* Tracking-Schaltfläche */

#myShop .sprd-tracking-menu__toggle {
    min-height: auto !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;

    text-align: left !important;

    color: #1F2933 !important;
    background: transparent !important;

    border: 0 !important;
}


/* Zahlungs- und Versandlogos kompakter */

#myShop .sprd-footer > div:not(.sprd-info-footer) {
    min-height: 0 !important;

    padding-top: 9px !important;
    padding-bottom: 9px !important;
}


/* Mobiler Footer */

@media (max-width: 767px) {
    #myShop .sprd-footer {
        margin-top: 25px !important;
    }

    #myShop .sprd-info-footer {
        padding: 12px 20px !important;
    }

    #myShop .sprd-info-footer__col {
        border-bottom: 1px solid rgba(31, 41, 51, 0.12);
    }

    #myShop .sprd-info-footer__toggle {
        width: 100% !important;
        padding: 12px 0 !important;

        font-size: 15px !important;
    }

    #myShop .sprd-info-footer__link {
        font-size: 14px !important;
    }
}

/* Nicht benötigte Spreadshop-Footerlinks ausblenden */
#myShop .tzpn-hide-spread-footer-item {
    display: none !important;
}

/* =====================================================
   TZPN SPREADSHOP – PRODUKTDETAILSEITE
   ===================================================== */


/* Designname, z. B. „Ich bin nicht faul“ */

#myShop .tzpn-detail-design-title,
#myShop .sprd-detail-info__title {
    margin: 0 0 8px !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: clamp(36px, 3.1vw, 48px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;

    color: #1F2933 !important;
}


/* Textilprodukt, z. B. „Männer Premium Bio T-Shirt“ */

#myShop .tzpn-detail-product-title,
#myShop .sprd-detail-product-type__title {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: clamp(19px, 1.5vw, 23px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    color: #334E56 !important;
}


/* Bewertungsbereich insgesamt */

#myShop .tzpn-detail-rating {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 3px 0 14px !important;
    padding: 0 !important;

    gap: 3px !important;

    font-size: 13px !important;
    line-height: 1 !important;
}


/* Bewertungssterne deutlich verkleinern */

#myShop .tzpn-detail-rating svg,
#myShop .tzpn-detail-rating [class*="star"] svg,
#myShop .tzpn-detail-rating [class*="rating"] svg {
    width: 21px !important;
    height: 21px !important;

    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
}


/* Falls Sterne über Schriftzeichen oder Icons ausgegeben werden */

#myShop .tzpn-detail-rating [class*="star"] {
    font-size: 21px !important;
    line-height: 1 !important;
}


/* Anzahl der Bewertungen */

#myShop .tzpn-detail-rating-count {
    margin-left: 5px !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}


/* Preisbereich linksbündig */

#myShop .tzpn-detail-price-wrapper {
    display: block !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}


/* Preis */

#myShop .tzpn-detail-price,
#myShop .sprd-detail-info__price {
    display: block !important;

    width: 100% !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    text-align: left !important;

    color: #1F2933 !important;

    justify-content: flex-start !important;
    align-items: flex-start !important;
}


/* Preiszusätze ebenfalls linksbündig */

#myShop .tzpn-detail-price-wrapper p,
#myShop .tzpn-detail-price-wrapper span,
#myShop .tzpn-detail-price-wrapper div {
    text-align: left !important;
}


/* Produkt-Infospalte insgesamt */

#myShop .tzpn-detail-info-panel {
    text-align: left !important;
}


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

@media (min-width: 768px) and (max-width: 1099px) {

    #myShop .tzpn-detail-design-title,
    #myShop .sprd-detail-info__title {
        font-size: 36px !important;
    }

    #myShop .tzpn-detail-product-title,
    #myShop .sprd-detail-product-type__title {
        font-size: 20px !important;
    }

    #myShop .tzpn-detail-rating svg,
    #myShop .tzpn-detail-rating [class*="star"] svg,
    #myShop .tzpn-detail-rating [class*="rating"] svg {
        width: 19px !important;
        height: 19px !important;

        min-width: 19px !important;
        min-height: 19px !important;
        max-width: 19px !important;
        max-height: 19px !important;
    }

    #myShop .tzpn-detail-price,
    #myShop .sprd-detail-info__price {
        font-size: 26px !important;
    }
}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media (max-width: 767px) {

    #myShop .tzpn-detail-design-title,
    #myShop .sprd-detail-info__title {
        margin-bottom: 6px !important;

        font-size: 31px !important;
        line-height: 1.1 !important;
    }

    #myShop .tzpn-detail-product-title,
    #myShop .sprd-detail-product-type__title {
        margin-bottom: 13px !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    #myShop .tzpn-detail-rating {
        margin-bottom: 12px !important;
    }

    #myShop .tzpn-detail-rating svg,
    #myShop .tzpn-detail-rating [class*="star"] svg,
    #myShop .tzpn-detail-rating [class*="rating"] svg {
        width: 17px !important;
        height: 17px !important;

        min-width: 17px !important;
        min-height: 17px !important;
        max-width: 17px !important;
        max-height: 17px !important;
    }

    #myShop .tzpn-detail-rating [class*="star"] {
        font-size: 17px !important;
    }

    #myShop .tzpn-detail-rating-count {
        font-size: 12px !important;
    }

    #myShop .tzpn-detail-price,
    #myShop .sprd-detail-info__price {
        font-size: 25px !important;
    }
}
/* Preis auf der Produktdetailseite linksbündig */
#myShop .tzpn-detail-info-panel .sprd-detail-price,
#myShop .tzpn-detail-info-panel .tzpn-detail-price {
    align-items: flex-start !important;
    text-align: left !important;
}

#myShop .tzpn-detail-info-panel .sprd-detail-price > *,
#myShop .tzpn-detail-info-panel .tzpn-detail-price > * {
    text-align: left !important;
    align-self: flex-start !important;
}
/* Preise in der Kategorieansicht vereinheitlichen */
#myShop .sprd-product-list-item .tzpn-detail-price {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
}

#myShop .sprd-product-list-item .tzpn-detail-price-wrapper {
    width: 100% !important;
    margin: 0 !important;

    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}