/**
 * Custom CSS for the Boxyfy product page template.
 *
 * This stylesheet defines styles for various elements of the product page, 
 * including the main layout, product images, comparison boxes, ranking indicators, 
 * and slider functionality. It ensures a clean, responsive, and visually appealing 
 * design for product presentations.
 *
 * Key features:
 * - Flexible and responsive layout with `.ts-main` as the primary container.
 * - Custom styling for product ranking, better/worse comparison, and labels.
 * - Slider integration for product images with `.tsprodukt-slider-container`.
 * - Interactive elements such as hover effects, pagination dots, and price alerts.
 * - Optimized styles for mobile responsiveness and improved user experience.
 *
 * @package Boxyfy
 */

/* Hauptcontainer */
.ts-main {
    width: 100%;
    max-width: 1160px;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
/* Noten-Container */
.ts-main .tsplatz-noten-container {
    margin: 0;
    padding: 0;
    display: flex; 
    align-items: center; 
    gap: 10px;
}
.ts-main .tsplatz-noten-container span {
	margin: 0;
	font-weight: bold;
}
.boxyfy-rating-true-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    gap: 9px 40px; /* Zeilen | Spalten */
    justify-content: start;
    align-items: start;
    text-align: left;
	line-height: 1.5em;
	padding: 0 0 0 3px;
    margin: 25px 0 0 0;
}
.boxyfy-rating-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.boxyfy-rating-true-grid .boxyfy-rating-cell .boxyfy-rating-stars-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
	padding-top: 30px;
}
.boxyfy-rating-true-grid .boxyfy-rating-cell .tsverkaufsrang-wert {
	font-weight: bold;
	padding-top: 30px;
}
.boxyfy-rating-stars i {
    font-size: inherit;
    line-height: 1;
    margin: 0 1px;
}
.boxyfy-rating-average {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    line-height: 1;
    position: relative;
    top: 1px; /* 👈 justiert exakt nach oben */
}
/* Noten-Ausgabe */
.ts-main .tsnotenausgabe {
    display: flex; 
    align-items: center;
    padding: 8px 12px; 
    border-radius: 18px 18px 18px 2px;
    color: #000;
	font-size: 24px;
    font-weight: bold;
	line-height: 1.5em;
}
/* Bewertungs-Hintergrundfarben */
.tsnotenausgabe.note-green {
    background-color: rgba(12,179,3,0.61);
}
.tsnotenausgabe.note-yellow {
    background-color: #eef211;
}
.tsnotenausgabe.note-red {
    background-color: #fc7878;
}
/* Container für die Bewertungsanzeige (Note) */
.ts-main .tsnoteninfo-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Zusätzliche Regeln für die Rating-Anzeige */
.boxyfy-rating-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.boxyfy-rating-label {
    font-size: 16px;
    color: #333;
}
.boxyfy-rating-stars {
    color: #FFD700; /* Standardsternfarbe – kann dynamisch überschrieben werden */
    font-size: 16px;
}
.boxyfy-rating-value {
    /* Hier können weitere Styles ergänzt werden, falls nötig */
}
.boxyfy-salesrank-tooltip {
    position: relative;
    cursor: help;
}
.boxyfy-salesrank-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    z-index: 9999;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.boxyfy-salesrank-tooltip:hover::after {
    display: block;
}
/* Container für "better/worse" */
.ts-main .better-worse-tscontainer {
    display: flex;
    padding: 0 !important;
    gap: 6px;
    margin: 35px 0 0 0;
}
/* Box besseres/schlechteres Produkt */
.ts-main .better-worse-tscontainer a {
    border: 1px solid #dedcdc;
    padding: 7px;
    border-radius: 2px;
    width: 49.5%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    text-decoration: none;
    color: inherit;
	border-radius: 5px;
}
/* Rankingposition-Box (innerhalb der better/worse-Box) */
.ts-main .tsproduct-tsbox-rec div {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(224, 224, 224, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
	line-height: 1.5em;
    color: #333;
}
.ts-main .tsproduct-tsbox-rec p {
	display: -webkit-box;
    font-weight: 400;
	margin: 6px 1px 0 1px; 
	padding: 0;
	text-align: left; 
	line-height: 1.3em;
	-webkit-line-clamp: 2; /* Max. 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	word-break: break-word; /* Erlaubt Zeilenumbruch mitten im Wort */
    hyphens: auto;    
}
.tsrating-better-product, .tsrating-worse-product {
	position: absolute;
	padding: 1px 4px;
	top: 4px;
	right: 4px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5em;
}
.tsrating-better-product {
	border: 1px solid #0aa74e;
	color: #098f33;
}
.tsrating-worse-product {
	border: 1px solid #e70808;
	color: #e70808;
}
.ts-main .better-worse-tscontainer a:hover {
    border: 1px solid #a8a8a8;
}
.ts-main .tsproduct-tsbox-rec svg {
    width: 28px;
    height: 28px;
    margin-top: 10px;
    visibility: visible !important;
}
.ts-main .tsproduct-tsbox-rec img {
    width: auto;
    height: auto;
    max-width: 70px;
    max-height: 70px;
    margin: 0 0 0 16px;
    visibility: visible !important;
}

/* Slider-Container für Produktbilder */
.tsprodukt-slider-container {
    position: relative;
    width: 100%;
    margin: 0;
}

/* Bild-Container */
.tsprodukt_image {
    position: relative;
    overflow: hidden;
    width: auto;
    height: auto;
    padding: 10px;
    border: 1px solid #d6d6d6;
    border-radius: 7px;
    margin: auto;
    cursor: crosshair;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tsprodukt_image img {
    width: auto;
    height: auto;
    max-width: 342px;
    max-height: 342px;
    transition: transform 0.1s ease;
    transform-origin: center center;
}
.tsprodukt_image:hover::before {
    display: block;
}

/* Container für das Produktbild im Slider */
.ts-main .tsprodukt-image {
    display: flex;
    position: relative;
	width: 45%;
    margin-top: 2px !important;
    margin: 0 15px;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
}

/* Slider-Buttons */
.tsprodukt-slider-button {
    position: absolute;
    top: 45%;
    box-sizing: border-box;
    transform: translateY(-50%);
    background-color: rgba(237,236,236,0.84);
    border: none;
    color: #9c9a9a;
    width: 37px;
    height: 75px;
    cursor: pointer;
    font-size: 30px;
    touch-action: manipulation;
}
.tsprodukt-slider-button.tsprodukt-prev {
    border-radius: 0 33px 33px 0;
    padding: 10px 10px 10px 4px;
}
.tsprodukt-slider-button.tsprodukt-next {
    border-radius: 33px 0 0 33px;
    padding: 10px 4px 10px 10px;
}
.tsprodukt-slider-button:hover {
    color: #7a7575;
}
.tsprodukt-prev {
    left: 0px;
}
.tsprodukt-next {
    right: 0px;
}

.tsprodukt-pagination .dot {
    display: inline-block;
    width: 22px;
    height: 6px;
    margin: 0 2px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Pagination-Dots Container */
.tsprodukt-pagination {
    text-align: center;
    margin: 10px 0;
}
.tsprodukt-pagination .dot.active {
    background-color: red;
}
.tsprodukt-pagination .dot:hover {
    background-color: #999;
}

/* Produkt-Label oben */
.ts-main .tsprodukt-label {
    --r: 0.8em;
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
    left: 0;
    top: 36px;
    margin: 0 4px 5px 15px;
    padding: 3px 9px;
    line-height: 1.5em;
	min-height: 0 !important;
    border-radius: 5px;
	gap: 5px;
    width: auto;
    font-weight: 400;
    text-align: left;
    font-family: Open Sans, Arial, sans-serif;
}

.ts-main .tsprodukt-label svg {
	width: 21px;
	height: 21px;
}

/* Überschriften im Inhalt */
.tsprodukt-content-h1 {
    margin: 48px 25px 35px 15px;
    line-height: 1.3em;
    padding: 0;
}

/* Container zentriert den Inhalt */
.ts-container {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Container für Produktinformationen */
.tsprodukt-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 25px;
}
.tsprodukt-content {
    width: 47.9%;
    margin: 0 15px 0 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ts-main .produktseite-ranking-ausgabe-container {
    display: block;
    align-items: center;
    font-family: Open Sans, Arial, sans-serif;
}
.tsprodukt-content p {
    margin-bottom: 8px;
}
.tsprodukt-content p strong {
    font-weight: 500;
}
.tsprodukt-content-h2 {
    margin-top: 0px;
}
.tsprodukt-post-content {
    margin: 20px 0;
    width: 100%;
    padding: 15px;
    line-height: 1.5em;
    color: #000;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* Responsive Styles */
@media (max-width: 600px) {
    .tsprodukt-slider-container {
        width: 100%;
        margin: 0 15px;
        border: 1px solid #e4e1e1;
    }
    .ts-main .better-worse-tscontainer a {
        width: 100% !important;
        max-width: 49% !important;
    }
    .tsprodukt_image {
        border: none;
    }
    .tsproduct-tsbox-rec {
        width: 50%;
    }
    .boxyfy_vorteile_nachteile_container {
        flex-direction: column;
    }
    .boxyfy_vorteile,
    .boxyfy_nachteile {
        width: 100%;
    }
    /* Abstand zwischen den Blöcken */
    .boxyfy_vorteile + .boxyfy_nachteile {
        margin-top: 20px;
    }
    .boxyfy_vorteile ul,
    .boxyfy_nachteile ul {
        list-style: none;
        padding-left: 0;
    }
    .boxyfy_vorteile ul li,
    .boxyfy_nachteile ul li {
        margin-bottom: 8px;
    }
    /* Überschriften anpassen */
    .boxyfy_vorteile h2,
    .boxyfy_nachteile h2 {
        text-align: left;
        padding: 10px;
    }
    /* Icons in responsiver Ansicht */
    .icon {
        margin: 10px 0;
        width: 30px;
    }
    .ts-list-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
}

.boxyfy_vorteile_nachteile_container,
.boxyfy_vorteile,
.boxyfy_nachteile {
    transition: all 0.3s ease;
}

/* Preisvergleich */
.tsprodukt-preisvergleich-container {
    margin: 40px 0 0 0;
}
.tsprodukt-preisvergleich-head {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 15px !important;
    text-align: left;
    color: #4d4b4b;
    border-radius: 6px;
    padding: 0 0 0 7px;
    margin: 5px 0;
}
.tsprodukt-preisvergleich-container p {
    display: block;
    position: relative;
    box-sizing: border-box;
    font-weight: 500;
    height: 132px;
    max-height: 132px;
    padding: 10px;
    font-size: 20px;
	line-height: 1.5em;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    align-items: center;
}
.tsprodukt-preisvergleich-container .tsprodukt-shop-logo,
.tsprodukt-preisvergleich-container .tsprodukt-shopx-logo {
    display: flex;
    position: absolute;
    right: 13px;
    top: 13px;
    width: auto;
    max-width: 110px !important;
    height: auto;
    max-height: 32px !important;
}

/* Amazon-Kauf-Button */
.amazon-button-produktseite {
    display: flex;
    position: absolute;
    width: auto;
    right: 7px;
    top: 85px !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
	line-height: 1.4em;
    padding: 8px 15px;
    font-weight: 400 !important;
    margin-left: 12px;
    border-radius: 6px;
    color: #fff;
}
.amazon-button-produktseite:hover {
    filter: brightness(85%);
}
.preis-ersparnis-produktseite {
	display: inline-flex
    font-size: 21px;
    color: #d40606;
    letter-spacing: 1.3px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.uvp-preis-ausgabe {
    font-size: 12px;
    font-weight: 400;
    width: auto;
    padding: 1px 4px;
    margin-left: 2px;
    color: #000;
}

/* Produktinfo-Liste */
.ts-main .tsprodukt-produktinfo-list {
    display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    line-height: 1.23em;
    box-sizing: border-box !important;
    margin: 40px 0 0 0;
    font-family: Open Sans, Arial, sans-serif;
    gap: 6px 30px;
    align-items: center;
}

.tsprodukt-hidden {
    display: none !important;
}
.tsprodukt-info-label {
    text-align: left;
    box-sizing: border-box !important;
    padding: 6px 9px;
    border-radius: 3px;
    background-color: rgba(173,168,168,0.1);
}
.tsprodukt-info-value {
    text-align: left;
}
.tsprodukt-produktinfo-item {
    display: contents;
}
.tsprodukt-info-liste-icons {
    width: 14px;
    height: 14px;
    padding-bottom: 3px;
    margin-right: 2px;
    vertical-align: middle;
}

/* Logo-Vorschau in der "Weitere Preise"-Metabox */
.boxyfy-metabox .logo-preview {
	max-width: 150px;
	height: auto;
	margin-top: 6px;
}

/* Wird vom PHP-Template automatisch gesetzt */
.boxyfy-metabox .hidden {
	display: none;
}

/* Mehr-/Weniger-Anzeige */
.tsprodukt-show-more,
.tsprodukt-show-less {
    margin-top: 6px;
    padding: 6px 2px;
    color: #605c5c;
    font-size: 14px;
    border: none;
    cursor: pointer;
    background: transparent;
	text-transform: none;
}

.tsprodukt-show-less {
	display: none;
}

/* Container für weitere Preise */
.produkt-button-weitere-preise-wrapper {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    gap: 10px;
    margin-top: 10px;
}
.produkt-button-weitere-preise {
    display: block;
    align-items: center;
    gap: 15px;
    border-radius: 6px;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    height: 132px;
    max-height: 132px;
    padding: 10px;
	line-height: 1.5em;
}
.produkt-preis-weitere {
    font-size: 20px;
    font-weight: 500;
    padding: 0;
    line-height: 1.5;
}
/* weitere-Preise-Kauf-Button */
.produkt-weitere-buttons-shops {
    display: flex;
    position: absolute;
    width: auto;
    right: 7px;
    top: 85px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
	line-height: 1.4em;
    padding: 8px 15px;
    font-weight: 400 !important;
    margin-left: 12px;
    border-radius: 6px;
    color: #fff;
    transition: background-color 0.3s ease;
}
.produkt-weitere-buttons-shops:hover {
    filter: brightness(85%);
}
.produkt-button-link:hover {
    filter: brightness(85%);
}
.single-produktseite-rabatt {
    padding: 10px;
    margin-top: 10px;
    font-weight: 400 !important;
}
.produkt-weitere-buttons-shops svg,
.amazon-button-produktseite svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    padding: 0;
    margin: 0 6px 0 0;
    visibility: visible !important;
    opacity: 1;
}
.guenstigster-gesamtpreis {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    font-size: 12px;
	line-height: 1.5em;
    font-weight: 500;
    width: auto;
    border-radius: 4px;
    padding: 2px 5px;
    margin-top: 6px;
    text-align: left;
}
.guenstigster-gesamtpreis span {
    display: block;
    margin: 1px 0;
}
.guenstigster-gesamtpreis span:last-child {
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
}
.prime-status-produktseite,
.versand-status-produktseite {
    display: block;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
	line-height: 1.5em;
}

.affiliate-disclaimer {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5em;
	color: #6b6b6b;
}

/* Container für Vorteile und Nachteile */
.boxyfy_vorteile_nachteile_container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}
.boxyfy_vorteile,
.boxyfy_nachteile {
    flex: 1;
    padding: 14px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 10px;
}

/* Beide Überschriften */
.boxyfy_vorteile h2,
.boxyfy_nachteile h2 {
    display: flex;
    font-weight: bold;
    justify-content: center;
    align-items: center !important;
    margin: 0 0 20px 0;
    padding: 9px 10px 7px 10px;
    border-radius: 15px;
}
/* Icons vor Überschriften */
.boxyfy_vorteile h2 img {
    display: block;
    border-radius: 44px;
    padding: 0;
    margin: 0 5px 1px 0;
    width: 26px;
    height: 26px;
}
.boxyfy_nachteile h2 img {
    display: block;
    border-radius: 44px;
    padding: 0;
    margin: 0 5px 1px 0;
    width: 24px;
    height: 24px;
}
/* Überschriften */
.boxyfy_vorteile h2 {
    background-color: rgba(8,103,8,0.12);
    color: #086708;
}
.boxyfy_nachteile h2 {
    background-color: rgba(131,1,1,0.14);
    color: #830101;
}
.boxyfy_vorteile {
    border: 2px solid rgba(8,103,8,0.43);
}
.boxyfy_nachteile {
    border: 2px solid rgba(131,1,1,0.43);
}

/* Icons vor Listenelementen */
.ts-list-icon {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-right: 8px;
}
/* Listen */
.boxyfy_vorteile ul,
.boxyfy_nachteile ul {
    list-style: none;
    padding: 0 0 0 5px;
}
.boxyfy_vorteile ul li,
.boxyfy_nachteile ul li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

/* Autoren-Container */
.tsprodukt-autoren-container {
    width: 100%;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}
.tsprodukt-autoren-container h2 {
    font-size: 20px;
    margin: 20px 0 20px 0;
    font-family: "Open Sans", sans-serif;
}
/* Autoren-Box */
.tsprodukt-autoren-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #fff !important;
    box-shadow: 0 0 10px 4px #eaeaea;
}
/* Autorenbild */
.tsprodukt-autoren-image {
    flex-shrink: 0;
    margin-right: 20px;
}
.tsprodukt-autoren-image img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
}
/* Autoreninformationen */
.tsprodukt-autoren-info h3 {
    margin: 0 0 7px 0;
    color: #000;
    font-size: 18px;
}
.tsprodukt-autoren-box .expertise-ausgabe {
    font-size: 15px;
    color: #000000 !important;
    padding: 0 0 8px 0;
}
/* Icon+Expertise+Text */
.tsprodukt-autoren-box .tsprodukt-autoren-info .expertise-ausgabe {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
/* SVG-Icon + "Expertise" */
.tsprodukt-autoren-info .expertise-ausgabe strong {
    display: flex;
    align-items: center;
    color: #0173ab; /* Dieser Wert kann dynamisch per wp_add_inline_style gesetzt werden */
    margin: 0 5px 0 0;
}
/* SVG-Icon right angle */
.expertise-ausgabe strong .autor-right-angle-arrow {
    padding: 0;
    margin: 0 3px 7px 0;
    width: 15px;
    height: 15px;
}
.tsprodukt-autoren-info {
	width: 100%;
}
.tsprodukt-autoren-info p {
    margin: 0;
    font-size: 14px;
    color: #555;
}
.tsprodukt-autoren-box .tsprodukt-autoren-info hr {
    height: 1px;
    margin: 12px 0 20px 0;
    background-color: #ddd9d9;
    border: none;
}

/* Mobile-Optimierung */
@media screen and (max-width: 900px) {
    .tsprodukt-slider-container {
        margin: 0;
    }
	
	.ts-main .tsprodukt-image{
		width: 100% !important;
	}
	
    .tsprodukt-image {
        width: 100%;
    }
    .tsprodukt-post-content {
        padding: 15px 15px !important;
    }
    .tsprodukt-content {
        width: 100%;
        padding: 0;
        margin: 35px 15px !important;
    }
}

.tsprodukt-slider-container .tsprodukt_image {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tsprodukt-slider-container.tsbilder-sichtbar .tsprodukt_image {
	visibility: visible;
	opacity: 1;
}