/* ======================================================
   KSCO PRODUCT PAGE - RESPONSIVE LAYER
   Loaded after product/sidebar/spare-parts styles.
   This file intentionally scopes all layout fixes to the
   product detail page to avoid side effects on Avada.
====================================================== */

/* ---------- Safe flex/grid shrink points ---------- */
.ksco-product-page .ksco-main,
.ksco-product-page .ksco-hero-info,
.ksco-product-page .ksco-hero-photo,
.ksco-product-page .ksco-tabs,
.ksco-product-page .ksco-tabs-content,
.ksco-product-page .ksco-tab-panel,
.ksco-product-page .ksco-models,
.ksco-product-page .ksco-models-toolbar,
.ksco-product-page .ksco-model-search-wrap,
.ksco-product-page .ksco-downloads-grid,
.ksco-product-page .ksco-download-card,
.ksco-product-page .ksco-download-card-inner,
.ksco-product-page .ksco-download-content,
.ksco-product-page .ksco-gallery,
.ksco-product-page .ksco-gallery-main,
.ksco-product-page .ksco-gallery-stage,
.ksco-product-page .ksco-gallery-thumbs,
.ksco-product-page .ksco-spare-parts-grid,
.ksco-product-page .ksco-spare-part-card,
.ksco-product-page .ksco-spare-part-content,
.ksco-product-page .ksco-specifications-grid,
.ksco-product-page .ksco-spec-column {
    min-width: 0;
    max-width: 100%;
}

.ksco-product-page,
.ksco-product-page .ksco-page,
.ksco-product-page .ksco-main {
    width: 100%;
    max-width: 100%;
}

/* Keep the wide models table inside its own scroll container. */
.ksco-product-page .ksco-models-table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

/* Sticky first model column must follow document direction. */
html[dir="rtl"] .ksco-product-page .ksco-models-table th:first-child,
html[dir="rtl"] .ksco-product-page .ksco-models-table td:first-child {
    right: 0;
    left: auto;
}

html[dir="ltr"] .ksco-product-page .ksco-models-table th:first-child,
html[dir="ltr"] .ksco-product-page .ksco-models-table td:first-child {
    left: 0;
    right: auto;
}

/* The original product lightbox allowed images to grow to 150vw. */
.ksco-product-page .ksco-lightbox-content img {
    max-width: 92vw;
    max-height: 92vh;
}

/* ======================================================
   TABLET + MOBILE
====================================================== */
@media (max-width: 1199px) {

    /* Root cause fix: when the flex axis becomes vertical,
       children must stretch instead of using max-content width. */
    .ksco-product-page .ksco-page {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
    }

    .ksco-product-page .ksco-sidebar,
    .ksco-product-page .ksco-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .ksco-product-page .ksco-product-tree {
        position: static;
        width: 100%;
        max-width: none;
    }

    /* Explicit directional selectors are required because the
       desktop LTR rule has higher specificity than the old mobile rule. */
    html[dir="rtl"] .ksco-product-page .ksco-hero-grid,
    html[dir="ltr"] .ksco-product-page .ksco-hero-grid {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 30px;
    }

    .ksco-product-page .ksco-hero-info,
    .ksco-product-page .ksco-hero-photo {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .ksco-product-page .ksco-hero-photo {
        justify-content: center;
    }

    .ksco-product-page .ksco-product-image-link {
        display: block;
        width: min(310px, 100%);
        max-width: 100%;
        margin-inline: auto;
    }

    .ksco-product-page .ksco-product-image {
        width: 100%;
        max-width: 100%;
    }

    /* Prevent long product codes/brands from defining viewport width. */
    .ksco-product-page .ksco-meta-item,
    .ksco-product-page .ksco-meta-value,
    .ksco-product-page .ksco-description,
    .ksco-product-page .ksco-overview-content,
    .ksco-product-page .ksco-faq-title,
    .ksco-product-page .ksco-spare-part-title,
    .ksco-product-page .ksco-download-content,
    .ksco-product-page .ksco-download-content h4 {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Product tabs: on tablet/mobile every section title must remain visible.
       Do not hide later tabs behind horizontal scrolling. */
    .ksco-product-page .ksco-tabs-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 8px;
        overflow: visible;
        padding-bottom: 12px;
    }

    .ksco-product-page .ksco-tab-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* Search/status toolbar must not force desktop width. */
    .ksco-product-page .ksco-models-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ksco-product-page .ksco-model-search-wrap,
    .ksco-product-page .ksco-model-search {
        width: 100%;
        max-width: 100%;
    }

    .ksco-product-page .ksco-models-status {
        align-self: flex-start;
    }

    /* The table is intentionally horizontally scrollable on narrow screens. */
    .ksco-product-page .ksco-models-table {
        width: max-content;
        min-width: 760px;
        max-width: none;
    }

    /* Downloads were 520px wide even when the viewport was narrower. */
    .ksco-product-page .ksco-downloads-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        justify-items: stretch !important;
    }

    .ksco-product-page .ksco-download-card {
        width: 100%;
        max-width: 100%;
    }

    .ksco-product-page .ksco-download-card-inner {
        width: 100%;
        max-width: 100%;
    }

    /* Specifications stay inside the available width. */
    .ksco-product-page .ksco-specifications-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .ksco-product-page .ksco-spec-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .ksco-product-page .ksco-spec-table th,
    .ksco-product-page .ksco-spec-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Gallery scales down instead of keeping a desktop-height canvas. */
    .ksco-product-page .ksco-gallery-main {
        width: 100%;
        height: clamp(280px, 60vw, 440px);
    }

    .ksco-product-page .ksco-gallery-thumbs {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .ksco-product-page .ksco-gallery-thumb {
        flex: 0 0 84px;
    }

    /* Rich text entered through ACF must not widen the page. */
    .ksco-product-page .ksco-overview-content img,
    .ksco-product-page .ksco-overview-content iframe,
    .ksco-product-page .ksco-overview-content video {
        max-width: 100%;
        height: auto;
    }

    .ksco-product-page .ksco-overview-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ksco-product-page .ksco-overview-content pre {
        max-width: 100%;
        overflow-x: auto;
    }

    .ksco-product-page .ksco-spare-parts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}

/* ======================================================
   PHONE
====================================================== */
@media (max-width: 640px) {

    .ksco-product-page .ksco-tabs-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ksco-product-page .ksco-page {
        padding-inline: 16px;
        padding-top: 22px;
        gap: 24px;
    }

    .ksco-product-page .ksco-hero {
        margin-bottom: 36px;
    }

    .ksco-product-page .ksco-title {
        font-size: clamp(24px, 8vw, 30px);
        overflow-wrap: anywhere;
    }

    .ksco-product-page .ksco-hero-meta {
        width: 100%;
        align-items: stretch;
    }

    .ksco-product-page .ksco-meta-item {
        width: 100%;
        flex-wrap: wrap;
    }

    .ksco-product-page .ksco-meta-value {
        flex: 1 1 auto;
    }

    .ksco-product-page .ksco-hero-actions {
        width: 100%;
        gap: 10px;
    }

    .ksco-product-page .ksco-btn {
        width: 100%;
        flex: 1 1 100%;
        padding-inline: 16px;
    }

    .ksco-product-page .ksco-tabs-section {
        margin-top: 20px;
        margin-bottom: 42px;
    }

    .ksco-product-page .ksco-tabs-content {
        margin-top: 20px;
    }

    .ksco-product-page .ksco-tab-panel {
        padding: 16px;
        border-radius: 10px;
    }

    .ksco-product-page .ksco-tab-button {
        padding: 10px 14px;
        font-size: 14px;
    }

    .ksco-product-page .ksco-model-search {
        height: 48px;
        padding-inline: 16px;
    }

    .ksco-product-page .ksco-models-table-wrapper {
        max-height: 65vh;
    }

    .ksco-product-page .ksco-spec-table th,
    .ksco-product-page .ksco-spec-table td {
        padding: 13px 12px;
        font-size: 13px;
    }

    .ksco-product-page .ksco-spec-table th {
        width: 42%;
    }

    .ksco-product-page .ksco-download-card-inner {
        gap: 12px;
        padding: 16px;
        min-height: 78px;
    }

    .ksco-product-page .ksco-download-icon {
        width: 42px;
        height: 42px;
    }

    .ksco-product-page .ksco-download-content h4 {
        font-size: 16px;
    }

    .ksco-product-page .ksco-gallery-main {
        height: clamp(240px, 70vw, 340px);
        padding: 10px;
    }

    .ksco-product-page .ksco-gallery-arrow {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .ksco-product-page .ksco-gallery-arrow.prev {
        left: 8px;
    }

    .ksco-product-page .ksco-gallery-arrow.next {
        right: 8px;
    }

    html[dir="rtl"] .ksco-product-page .ksco-gallery-arrow.prev {
        right: 8px;
        left: auto;
    }

    html[dir="rtl"] .ksco-product-page .ksco-gallery-arrow.next {
        left: 8px;
        right: auto;
    }

    .ksco-product-page .ksco-gallery-lightbox-prev,
    .ksco-product-page .ksco-gallery-lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .ksco-product-page .ksco-gallery-lightbox-prev {
        left: 10px;
    }

    .ksco-product-page .ksco-gallery-lightbox-next {
        right: 10px;
    }

    html[dir="rtl"] .ksco-product-page .ksco-gallery-lightbox-prev {
        right: 10px;
        left: auto;
    }

    html[dir="rtl"] .ksco-product-page .ksco-gallery-lightbox-next {
        left: 10px;
        right: auto;
    }

    .ksco-product-page .ksco-gallery-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .ksco-product-page .ksco-spare-parts-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .ksco-product-page .ksco-faq-question {
        gap: 12px;
    }
}

/* Very narrow phones. */
@media (max-width: 360px) {

    .ksco-product-page .ksco-page {
        padding-inline: 12px;
    }

    .ksco-product-page .ksco-tab-panel {
        padding: 12px;
    }

    .ksco-product-page .ksco-gallery-thumb {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }
}

/* ======================================================
   MOBILE MODELS TABLE - PIN MODEL COLUMN
   Keep the first/model column visible while the remaining
   model data scrolls horizontally inside the table wrapper.
====================================================== */
@media (max-width: 1199px) {

    .ksco-product-page .ksco-models-table th:first-child,
    .ksco-product-page .ksco-models-table td:first-child {
        position: sticky !important;
        inset-inline-start: 0;
        min-width: 92px;
        white-space: nowrap;
        background-clip: padding-box;
    }

    .ksco-product-page .ksco-models-table tbody td:first-child {
        z-index: 25;
        background: #fff;
    }

    .ksco-product-page .ksco-models-table tbody tr:nth-child(even) td:first-child {
        background: #FAFBFD;
    }

    .ksco-product-page .ksco-models-table tbody tr:hover td:first-child {
        background: #F3F7FC;
    }

    .ksco-product-page .ksco-models-table thead th:first-child {
        z-index: 45;
        background: var(--ksco-primary);
        color: #fff;
    }

    /* Visual separator on the scrolling edge of the pinned column. */
    html[dir="rtl"] .ksco-product-page .ksco-models-table th:first-child,
    html[dir="rtl"] .ksco-product-page .ksco-models-table td:first-child {
        right: 0;
        left: auto;
        box-shadow: -8px 0 10px -10px rgba(0, 0, 0, .28);
    }

    html[dir="ltr"] .ksco-product-page .ksco-models-table th:first-child,
    html[dir="ltr"] .ksco-product-page .ksco-models-table td:first-child {
        left: 0;
        right: auto;
        box-shadow: 8px 0 10px -10px rgba(0, 0, 0, .28);
    }
}