/*
 * customCss-pdp-critical.css
 * Kraunama iš Head.cshtml per Add (PO kingdom.css) — be FOUC.
 * Tik tab antraštės / panelių apsauga + galerijos kryptis; likusi PDP logika — customCss-pdp.css.
 */

/* Galerija: miniatiūros apačioje — iškart, kad nebūtų kairiojo rail FOUC
   (PictureZoom: .gallery + .cloud-zoom-thumb-container) */
.html-product-details-page .product-essential .gallery {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    align-items: stretch;
}

.html-product-details-page .product-essential .gallery .details_picture-slider {
    width: 100% !important;
}

/* Iš karto ribojam aukštį — be milžiniško FOUC (aukšti kadrai) */
.html-product-details-page .product-essential .gallery .details_picture-slider .cloud-zoom,
.html-product-details-page .product-essential .gallery .details_picture-slider .swiper,
.html-product-details-page .product-essential .gallery .details_picture-slider #wrap,
.html-product-details-page .product-essential .gallery .picture {
    width: min(100%, 520px, 65vh);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
    overflow: visible;
    background: #fff;
}

.html-product-details-page .product-essential .gallery .details_picture-slider .swiper {
    overflow: hidden;
    height: 100%;
}

.html-product-details-page .product-essential .gallery .details_picture-slider .swiper-slide-active,
.html-product-details-page .product-essential .gallery .details_picture-slider .swiper-slide-active img {
    opacity: 1 !important;
    visibility: visible !important;
}

.html-product-details-page .gallery .ribbon-wrapper {
    overflow: visible !important;
    z-index: 2;
}

/* fit-content wrapperis + procentiniai vaikai = 0 plotis (žr. customCss-pdp.css [15g]) */
.html-product-details-page .product-essential .gallery .details_picture-slider .ribbon-wrapper {
    width: min(100%, 520px, 65vh);
    aspect-ratio: 1 / 1;
}

.html-product-details-page .product-essential .gallery .details_picture-slider .ribbon-wrapper #wrap,
.html-product-details-page .product-essential .gallery .details_picture-slider .ribbon-wrapper .cloud-zoom,
.html-product-details-page .product-essential .gallery .details_picture-slider .ribbon-wrapper .swiper {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: auto;
}

.html-product-details-page .product-essential .gallery .details_picture-slider .swiper:not(.swiper-initialized) .swiper-slide {
    width: 100% !important;
    height: 100% !important;
}

.html-product-details-page .product-essential .gallery .details_picture-slider img,
.html-product-details-page .product-essential .gallery .picture img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.html-product-details-page .product-essential .gallery .cloud-zoom-thumb-container {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

@media (min-width: 992px) {
    .html-product-details-page .product-essential.not-qv > .gallery {
        width: 36% !important;
        max-width: 36%;
        padding-left: 0 !important;
        padding-right: 16px !important;
    }

    .html-product-details-page .product-essential.not-qv > .overview {
        width: 64% !important;
        max-width: 64%;
    }
}


/* Aktyvus tab — ne --secondary-color (#ffee00), o įprastas tekstas */
#product-details-tab > ul a,
#product-details-tab > ul a .pdp-tab-link-heading,
#product-details-tab .ui-tabs-nav a,
#product-details-tab .ui-tabs-nav a .pdp-tab-link-heading,
#product-details-tab .ui-widget-header a,
#product-details-tab .ui-widget-header a .pdp-tab-link-heading,
#product-details-tab .ui-state-active a,
#product-details-tab .ui-state-active a .pdp-tab-link-heading,
#product-details-tab .ui-tabs-tab.ui-state-active a,
#product-details-tab .ui-tabs-tab.ui-state-active a .pdp-tab-link-heading {
    color: var(--jupoja-dark, #434242) !important;
}

/* H2 skirtuke — to paties dydžio kaip tab tekstas (ne browser/default h2) */
#product-details-tab .pdp-tab-link-heading {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
}

/* Dublikatinės antraštės panelėse — niekada nerodyti */
#product-details-tab > .pdp-tab-heading,
#product-details-tab > div > .pdp-tab-heading,
#full-description > .pdp-tab-heading,
#product-specification > .pdp-tab-heading,
#product-attachments > .pdp-tab-heading,
#product-review > .pdp-tab-heading,
#product-tag .product-tags-box > h2.title {
    display: none !important;
}

/* Kol jQuery UI dar nepridėjo .ui-tabs — rodyti tik pirmą panelę (po <ul>) */
#product-details-tab:not(.ui-tabs) > div {
    display: none !important;
}

#product-details-tab:not(.ui-tabs) > ul + div {
    display: block !important;
}

/* Kol tabs() neinicijuotas — ul jau atrodo kaip tab juosta, ne sąrašas */
#product-details-tab:not(.ui-tabs) > ul {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e6e6e6;
    gap: 0;
}

#product-details-tab:not(.ui-tabs) > ul > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#product-details-tab:not(.ui-tabs) > ul > li > a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    font-weight: 600;
    color: var(--jupoja-dark, #434242) !important;
}