/* ================================================================
   HELSAN — PRODUCT DETAIL LAYER
   ----------------------------------------------------------------
   Absorbs the retired `product-detail-v2.css` (magenta token system)
   and rebases it on `--hs-*`. Loaded from `header_css.html` BEFORE the
   page-level `product-detail.css`, so every shared-component rule is
   scoped with a `body` prefix to outrank the base page CSS.

   Global tokens live only in helsan-tokens.css.
   ================================================================ */


/* ================================================================
   01 — IMAGE GALLERY
   ================================================================ */

body .container-image .box-image {
    border-radius: var(--hs-radius);
    overflow: hidden;
    box-shadow: var(--hs-shadow-sm);
}

body .container-image .product-showcase {
    position: relative;
    border-radius: var(--hs-radius);
    overflow: hidden;
    background: #f8f9fa;
}

body .container-image .product-showcase .img-big {
    position: relative;
    overflow: hidden;
    border-radius: var(--hs-radius);
    cursor: zoom-in;
}

body .container-image .product-showcase .img-big img {
    transition: transform var(--hs-dur-slow) var(--hs-ease-out);
    will-change: transform;
}

body .container-image .product-showcase .img-big:hover img {
    transform: scale(1.05);
}

body .img-zoom-lens {
    border: 2px solid rgba(68, 151, 97, .35);
    background: rgba(68, 151, 97, .05);
    border-radius: var(--hs-radius-xs);
    transition: opacity var(--hs-dur-fast) ease;
}

body .image-result-zoom-big {
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-lg);
    border: 1px solid var(--hs-border);
}

/* Thumbnail strip */
body .product-slider-container .owl-carousel .owl-item li {
    border-radius: var(--hs-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all var(--hs-dur) var(--hs-ease-out);
    cursor: pointer;
}

body .product-slider-container .owl-carousel .owl-item li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

body .product-slider-container .owl-carousel .owl-item li.active {
    border-color: var(--hs-green-600);
    box-shadow: 0 4px 12px rgba(52, 123, 77, .22);
}

/* Video play button */
body .video-big .play-circle,
body .product-video .play-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: all var(--hs-dur) var(--hs-ease-spring);
    animation: hpPulseSoft 2s ease-in-out infinite;
}

body .video-big .play-circle:hover,
body .product-video .play-circle:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}


/* ================================================================
   02 — STICKY MOBILE CTA BAR
   ================================================================ */

body .price-add-basket {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--hs-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
    transform: translateY(100%);
    transition: transform var(--hs-dur) var(--hs-ease-out);
}

body .price-add-basket.active {
    transform: translateY(0);
}

body .price-add-basket .action-add .btn-add-basket {
    padding: 14px 24px;
    border: 0;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(52, 123, 77, .35);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

body .price-add-basket .action-add .btn-add-basket:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(52, 123, 77, .45);
}

body .price-add-basket .price-product .price-org {
    font-size: 18px;
    font-weight: 800;
    color: var(--hs-green-800);
}

body .price-add-basket .price-product .discount-box .off {
    background: var(--hs-gradient-accent);
    color: #fff;
    border-radius: var(--hs-radius-pill);
    animation: hpPulse 2s ease-in-out infinite;
}


/* ================================================================
   03 — PRICE BOX
   ================================================================ */

body .price-container {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-xs);
    transition: box-shadow var(--hs-dur) var(--hs-ease-out);
}

body .price-container:hover {
    box-shadow: var(--hs-shadow-sm);
}

body .price-container .price-product .price-org {
    color: var(--hs-green-800);
    font-weight: 900;
    letter-spacing: -.5px;
}

body .price-container .price-product .discount-box .off {
    background: var(--hs-gradient-accent);
    color: #fff;
    border-radius: var(--hs-radius-pill);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(185, 103, 24, .3);
    animation: hpPulse 2s ease-in-out infinite;
}

body .price-container .price-product .discount-box .price-discount {
    color: var(--hs-text-3);
    text-decoration: line-through;
    opacity: .6;
}

body .price-container .desc-price-box li.highlight span {
    background-color: var(--hs-orange-100);
}

body .price-container .btn-add-price a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(52, 123, 77, .3);
    position: relative;
    overflow: hidden;
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

body .price-container .btn-add-price a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(52, 123, 77, .4);
}


/* ================================================================
   04 — SPECS & DESCRIPTION
   ================================================================ */

body .detail-product,
body .description-product {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    overflow: hidden;
}

body .detail-product .specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    transition: background var(--hs-dur-fast) ease;
}

body .detail-product .specs li:hover {
    background: var(--hs-green-50);
}

body .detail-product .specs li:nth-child(even) {
    background: rgba(0, 0, 0, .015);
}

body .detail-product .specs li .title {
    color: var(--hs-text-2);
    font-weight: 500;
}

body .detail-product .specs li .value {
    color: var(--hs-text);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--hs-dur-fast) ease;
}

body .detail-product .specs li .value:hover {
    color: var(--hs-green-700);
}

body .show-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--hs-radius-xs);
    color: var(--hs-green-700);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hs-dur) var(--hs-ease-out);
}

body .show-more a:hover {
    background: var(--hs-green-50);
}

body .row-comment-detail .head-row {
    border-bottom: 1px solid var(--hs-border);
}

body .row-comment-detail .head-row li.active {
    border-bottom: 3px solid var(--hs-green-600);
}

body .row-comment-detail .head-row li a {
    color: var(--hs-text-2);
    font-weight: 600;
    transition: color var(--hs-dur-fast);
}

body .row-comment-detail .head-row li.active a,
body .row-comment-detail .head-row li a:hover {
    color: var(--hs-green-700);
}

body .row-comment-detail .title-section-product {
    color: var(--hs-black);
    border-bottom: 2px solid var(--hs-green-600);
}


/* ================================================================
   05 — COMMENTS
   ================================================================ */

body .container-comment .list-comment-box .list-comment .item-comment {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    transition: all var(--hs-dur) var(--hs-ease-out);
}

body .container-comment .list-comment-box .list-comment .item-comment:hover {
    transform: translateY(-4px);
    box-shadow: var(--hs-shadow-sm);
    border-color: rgba(68, 151, 97, .15);
}

body .container-comment .rate-comment,
body .container-comment .list-comment-box .list-comment .item-comment .rate-comment {
    background: var(--hs-gradient-brand);
    color: #fff;
    border-radius: var(--hs-radius-sm);
    box-shadow: 0 4px 12px rgba(52, 123, 77, .25);
}

body .container-comment .box-btn-comment .btn-modal-comment {
    padding: 13px 20px;
    border: 1px solid var(--hs-green-600);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-gradient-brand);
    color: #fff;
    font-weight: 700;
}

body .container-comment .comment-empty .text-empty {
    color: var(--hs-text-2);
}

body .rating-circle span {
    cursor: pointer;
    transition: all var(--hs-dur-fast) var(--hs-ease-spring);
}

body .rating-circle span:hover,
body .rating-circle span.active {
    transform: scale(1.2);
    color: var(--hs-orange-500);
}


/* ================================================================
   06 — RELATED PRODUCTS
   ================================================================ */

body .related-products .item-product {
    transition: all var(--hs-dur) var(--hs-ease-out);
}

body .related-products .item-product:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(25, 65, 38, .13);
}


/* ================================================================
   07 — DIALOGS / MODALS
   ================================================================ */

body .dialog-comment,
body .dialog-comment-list,
body .dialog-video,
body .dialog-mobile-img {
    transform: scale(.92) translateY(20px);
    transition: transform var(--hs-dur) var(--hs-ease-spring);
}

body .holder-dialog-comment.show .dialog-comment,
body .holder-dialog-comment-list.show .dialog-comment-list,
body .holder-dialog-video.show .dialog-video,
body .holder-dialog-mobile-img.show .dialog-mobile-img {
    transform: scale(1) translateY(0);
}


/* ================================================================
   08 — LIGHTBOX
   ================================================================ */

.t1-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--hs-dur) var(--hs-ease-out),
        visibility var(--hs-dur);
}

.t1-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.t1-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.t1-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t1-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    transition:
        opacity var(--hs-dur) var(--hs-ease-out),
        transform var(--hs-dur) var(--hs-ease-spring);
}

.t1-lightbox-close,
.t1-lightbox-prev,
.t1-lightbox-next {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--hs-dur) var(--hs-ease-spring);
}

.t1-lightbox-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
}

.t1-lightbox-prev,
.t1-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.t1-lightbox-prev { left: 20px; }
.t1-lightbox-next { right: 20px; }

.t1-lightbox-close:hover,
.t1-lightbox-prev:hover,
.t1-lightbox-next:hover {
    background: rgba(255, 255, 255, .25);
    transform: scale(1.1);
}

.t1-lightbox-prev:hover { transform: translateY(-50%) scale(1.1); }
.t1-lightbox-next:hover { transform: translateY(-50%) scale(1.1); }

.t1-lightbox-close svg,
.t1-lightbox-prev svg,
.t1-lightbox-next svg {
    width: 24px;
    height: 24px;
}

.t1-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: var(--hs-radius-pill);
    background: rgba(0, 0, 0, .4);
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 500;
}


/* ================================================================
   09 — RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    body .price-container .price-product .price-org {
        font-size: 22px;
    }

    body .price-container .btn-add-price a {
        padding: 14px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    body .container-image .box-image,
    body .container-image .product-showcase {
        border-radius: var(--hs-radius-sm);
    }

    body .video-big .play-circle,
    body .product-video .play-circle {
        width: 48px;
        height: 48px;
    }
}


/* ================================================================
   10 — REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    body .price-container .price-product .discount-box .off,
    body .price-add-basket .price-product .discount-box .off,
    body .video-big .play-circle,
    body .product-video .play-circle {
        animation: none;
    }

    .t1-lightbox-img {
        transition: none;
    }
}