/* --- JTL OPC Smart Table: Wrapper & Layout --- */

/* 1. WRAPPER & LAYOUT */
.opc-table-wrapper {
    position: relative;
    width: 100%;
    max-width: 1158px;
    margin: 0 auto;
    overflow: visible;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.opc-smart-table {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    padding: 0 0 18px 0 !important;
    margin: 0 !important;
    border: none !important;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab;
}
.opc-smart-table::-webkit-scrollbar { display: none; }

.opc-smart-table:active {
    cursor: grabbing;
    user-select: none !important;
}

/* RESET */
.opc-smart-table table, .opc-smart-table tbody, .opc-smart-table tr, .opc-smart-table td, .opc-smart-table th {
    border: 0 !important; background: transparent !important; margin: 0 !important;
    border-spacing: 0 !important; border-collapse: separate !important; box-sizing: border-box !important;
}

/* 2. GRID LOGIK DESKTOP (1158px Content) */
.opc-smart-table tr > *:first-child { display: none !important; }
.opc-smart-table table { width: max-content !important; }

.opc-smart-table td {
    padding: 0 !important;
    vertical-align: top !important;
    text-align: left !important;
    border-right: 18px solid #ffffff !important;
    width: 294px !important; min-width: 294px !important; max-width: 294px !important;
}

.opc-smart-table tr > *:last-child {
    border-right: 0 !important;
    width: 276px !important; min-width: 276px !important; max-width: 276px !important;
}

/* 3. TYPOGRAFIE */
.opc-smart-table h3, .opc-smart-table strong {
    font-size: 18px !important; font-weight: 800 !important; color: #000 !important;
    margin: 0 0 5px 0 !important; line-height: 1.2 !important; display: block;
}
.opc-smart-table p, .opc-smart-table small {
    font-size: 13px !important; color: #333 !important; font-weight: 700 !important;
    margin: 0 0 40px 0 !important; line-height: 1.4 !important; display: block;
}

.opc-smart-table .cell-label {
    display: block; font-size: 13px !important; color: #b0b0b0 !important;
    margin-top: 10px !important; margin-bottom: 4px !important; font-weight: normal !important;
    padding-top: 10px !important;
    border-top: 1px solid #eaeaea !important;
}
.opc-smart-table .cell-value {
    display: block; font-size: 13px !important; color: #000 !important;
    font-weight: normal !important;
    border-bottom: none !important;
}

/* Erste Datenzeile: kein Strich oben */
.opc-smart-table .first-data-row td .cell-label {
    border-top: none !important;
    padding-top: 0 !important;
}

.price-box-inner {
    background: #f7f7f7 !important; padding: 15px 10px !important;
    text-align: center !important; margin-top: 10px !important;
    border-radius: 0 !important;
}
.price-label-text { display: block !important; font-size: 13px !important; color: #888 !important; font-weight: normal !important; text-transform: uppercase !important; }
.price-value-text { display: block !important; font-size: 18px !important; font-weight: 800 !important; color: #000 !important; margin-top: 2px !important; }

.opc-smart-table tr:last-child td .cell-value { border: none !important; }

/* 4. NAVIGATION */
.opc-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    background-color: #f1f1f1 !important;
    border: none !important; border-radius: 2px;
    z-index: 200; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.opc-nav-btn:hover { background-color: #e5e5e5 !important; }
.opc-nav-btn.is-hidden { opacity: 0; pointer-events: none; }

.nav-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' /%3E%3C/svg%3E"); }
.nav-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E"); }

/* Desktop Large: Outside */
@media (min-width: 1350px) {
    .nav-prev { left: -70px; }
    .nav-next { right: -70px; }
}
/* Laptop/Tablet: Overlay Light */
@media (max-width: 1349px) and (min-width: 769px) {
    .nav-prev { left: 0; background-color: rgba(241,241,241,0.95) !important; }
    .nav-next { right: 0; background-color: rgba(241,241,241,0.95) !important; }
}

/* 5. MOBILE SPECIAL LAYOUT */
@media (max-width: 768px) {
    .opc-table-wrapper { padding: 0 !important; width: 100% !important; overflow: hidden; }

    .opc-smart-table td {
        width: calc(100vw - 18px) !important;
        min-width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        border-right: 18px solid #ffffff !important;
        padding: 0 !important;
    }

    .opc-smart-table tr > *:last-child {
        border-right: 0 !important;
        width: calc(100vw - 18px - 18px) !important;
        min-width: calc(100vw - 18px - 18px) !important;
        max-width: calc(100vw - 18px - 18px) !important;
    }

    .opc-nav-btn {
        width: 44px !important; height: 60px !important;
        background-color: rgba(241, 241, 241, 0.85) !important;
        border-radius: 2px !important;
    }
    .nav-prev { left: 0 !important; }
    .nav-next { right: 0 !important; }
}

.scroll-dots-container { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.scroll-dot { width: 8px; height: 8px; background: #e5e5e5; border-radius: 50%; }
.scroll-dot.dot-active { background: #333; }

/* --- Portlet-spezifische Styles --- */

/* Äußerer Wrapper wie in der Produktliste (item_box), damit second-wrapper korrekt überlagert */
.opc-smart-table .productbox-image > .productbox-images.list-gallery {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Grauer Hintergrund und Hover-Fade wie in der Produktliste (productbox) */
.opc-smart-table .productbox-images {
    background-color: #F4F4F4;
}



/* 18px Abstand über der Preisbox */
.opc-smart-table td.paProductComparison-price-cell {
    padding-top: 18px !important;
}

/* Streichpreis und Einheiten-Label (/ Paar) auf 18px, normale Schriftstärke */
.paProductComparison-price-cell del.value,
.paProductComparison-price-cell .price_label.per_unit {
    font-size: 18px !important;
    font-weight: normal !important;
    color: #888;
}

/* Product title and price link to product page – use pointer cursor (override scroll hand) */
.paProductComparison-product-link,
.paProductComparison-price-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.paProductComparison-product-link:hover,
.paProductComparison-price-link:hover {
    color: inherit;
}

/* Produktname auf eine Zeile begrenzen, darüber mit … abschneiden */
.opc-smart-table td.paProductComparison-product-name strong {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.opc-smart-table .productbox-price {
    font-size: 18px !important;
}

/* Recommendation line "Unsere Empfehlung" above product title */
.paProductComparison-recommendation-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.paProductComparison-recommendation-text {
    color: #C09A5E; /* dark goldenrod */
    font-size: 18px !important;
    line-height: 1;
}
.paProductComparison-recommendation-icon {
    color: #b8860b;
    font-size: 1em;
}

/* Placeholder: same height as recommendation line so titles align in all columns */
.paProductComparison-recommendation-placeholder {
    min-height: 1.4em;
    margin-bottom: 6px;
}

/* Category under product name – normal font weight, no paCondensed */
.paProductComparison-category {
    font-weight: normal;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    margin-top: 4px;
    margin-bottom: 12px;
    line-height: 1;
    font-size: 13px !important;
}