/* =========================================
   Product Overview Pages
   ========================================= */

/* Accordion symbol */
.acc-symbol {
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.3s ease;
}
.acc-symbol::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* fa-minus */
}
.collapsed .acc-symbol::before {
    content: "\f067"; /* fa-plus */
}
.collapsed .acc-symbol {
    transform: rotate(-90deg);
}

/* ── Main carousel ── */
.portfolio-single-gallery {
    position: relative;
}

.owl-carousel-wrap {
    position: relative;
}

.gallery-hover-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.gallery-hover-arrow.arr-left {
    left: 16px;
    transform: translateY(-50%) translateX(-20px);
}

.gallery-hover-arrow.arr-right {
    right: 16px;
    transform: translateY(-50%) translateX(20px);
}

.gallery-hover-arrow::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    color: #fff;
}

.gallery-hover-arrow.arr-left::before  { content: "\f060"; }
.gallery-hover-arrow.arr-right::before { content: "\f061"; }

.owl-carousel-wrap:hover .gallery-hover-arrow {
    opacity: 1;
    pointer-events: auto;
}

.owl-carousel-wrap:hover .gallery-hover-arrow.arr-left {
    transform: translateY(-50%) translateX(0);
}

.owl-carousel-wrap:hover .gallery-hover-arrow.arr-right {
    transform: translateY(-50%) translateX(0);
}

.gallery-hover-arrow:hover {
    background: rgba(0,0,0,0.85);
}

#portfolio-carousel-section .owl-nav,
#portfolio-carousel-section .owl-dots {
    display: none !important;
}

/* ── Thumbnail strip ── */
.thumb-strip-viewport {
    width: 100%;
    overflow: hidden;
}

.thumb-strip {
    display: flex;
    gap: 32px;
    margin-top: 8px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumb-item {
    flex: 0 0 calc(33.333% - 22px);
    aspect-ratio: 3.5 / 4;
    border-radius: 20px;
    border: 3px solid transparent;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.thumb-item.active { border-color: #000; }

/* Text layer — default visible */
.thumb-text {
    position: absolute;
    inset: 0;
    background-color: #ADE1FA;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.thumb-text p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #0A2638;
    line-height: 1.4;
}

/* Image layer — hidden by default, revealed on hover */
.thumb-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Hover: hide text, show image */
.thumb-item:hover .thumb-text { opacity: 0; }
.thumb-item:hover .thumb-img  { opacity: 1; }

/* Active: always show image */
.thumb-item.active .thumb-text { opacity: 0; }
.thumb-item.active .thumb-img  { opacity: 1; }

/* ── Thumbnail navigation arrows ── */
.thumb-arrows {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 48px;
}

.thumb-arrows button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.thumb-arrows button:hover { background: #FF6600; }

.thumb-arrows button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: #fff;
}

.thumb-arrows .arr-prev::before { content: "\f060"; }
.thumb-arrows .arr-next::before { content: "\f061"; }


/* ── Inline styles migrated from HTML ── */
.acc-symbol {
            display: inline-block;
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        .acc-symbol::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f068"; /* fa-minus */
        }
        .collapsed .acc-symbol::before {
            content: "\f067"; /* fa-plus */
        }
        .collapsed .acc-symbol {
            transform: rotate(-90deg);
        }

        /* Hover-reveal arrows on main carousel */
        .portfolio-single-gallery {
            position: relative;
        }

        .owl-carousel-wrap {
            position: relative;
        }

        .gallery-hover-arrow {
            position: absolute;
            top: 50%;
            z-index: 10;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(0,0,0,0.55);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
        }

        .gallery-hover-arrow.arr-left {
            left: 16px;
            transform: translateY(-50%) translateX(-20px);
        }

        .gallery-hover-arrow.arr-right {
            right: 16px;
            transform: translateY(-50%) translateX(20px);
        }

        .gallery-hover-arrow::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 18px;
            color: #fff;
        }

        .gallery-hover-arrow.arr-left::before  { content: "\f060"; }
        .gallery-hover-arrow.arr-right::before { content: "\f061"; }

        .owl-carousel-wrap:hover .gallery-hover-arrow {
            opacity: 1;
            pointer-events: auto;
        }

        .owl-carousel-wrap:hover .gallery-hover-arrow.arr-left {
            transform: translateY(-50%) translateX(0);
        }

        .owl-carousel-wrap:hover .gallery-hover-arrow.arr-right {
            transform: translateY(-50%) translateX(0);
        }

        .gallery-hover-arrow:hover {
            background: rgba(0,0,0,0.85);
        }
        #portfolio-carousel-section .owl-nav,
        #portfolio-carousel-section .owl-dots {
            display: none !important;
        }

        /* Thumbnail strip */
        .thumb-strip-viewport {
            width: 100%;
            overflow: hidden;
        }

        .thumb-strip {
            display: flex;
            gap: 32px;
            margin-top: 8px;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .thumb-item {
            flex: 0 0 calc(33.333% - 22px);
            aspect-ratio: 3.5 / 4;
            border-radius: 20px;
            border: 3px solid transparent;
            overflow: hidden;
            position: relative;
            transition: border-color 0.2s ease;
            cursor: pointer;
        }

        .thumb-item.active { border-color: #000; }

        /* Text layer — default visible */
        .thumb-text {
            position: absolute;
            inset: 0;
            background-color: #ADE1FA;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 14px 16px;
            opacity: 1;
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        .thumb-text p {
            margin: 0;
            font-size: 13px;
            font-weight: 500;
            color: #0A2638;
            line-height: 1.4;
        }

        /* Image layer — hidden by default, revealed on hover */
        .thumb-img {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center top;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
        }

        /* On hover: hide text, show image */
        .thumb-item:hover .thumb-text { opacity: 0; }
        .thumb-item:hover .thumb-img  { opacity: 1; }

        /* Active state always shows image */
        .thumb-item.active .thumb-text { opacity: 0; }
        .thumb-item.active .thumb-img  { opacity: 1; }

        /* Arrows below thumbnails */
        .thumb-arrows {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 40px;
            margin-bottom: 48px;
        }

        .thumb-arrows button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #000;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .thumb-arrows button:hover { background: #FF6600; }

        .thumb-arrows button::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 14px;
            color: #fff;
        }

        .thumb-arrows .arr-prev::before { content: "\f060"; }
        .thumb-arrows .arr-next::before { content: "\f061"; }