/**
 * Page: Single Product
 */

/* Back to Products Link */
.product-back-link {
    padding: 30px 0;
}

.section-related-products .product-cards__card {
    padding: 40px;
}

.product-back-link .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Product Hero Section */
.product-hero {
    margin-bottom: 38px;
    padding: 0 0 40px;
    background-color: #fff;
}

.product-hero__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

/* Left: Product Info */
/* .product-hero__info {
    padding-top: 20px;
} */

.product-category {
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px 0;
}

.product-title {
    margin-top: 0;
    color: #004789;
    margin-bottom: 10px;
}

.product-hero a.btn.btn--outline-primary.button.primary.transparent {
    margin-top: 40px;
}

.product-excerpt p {
    margin: 0;
}

/* CTA */
.product-cta .btn {
    padding: 14px 32px;
    font-size: 16px;
}


/* Min-height for 1440px and above */
@media (min-width: 1440px) {
    .product-hero_gallery {
        max-height: 676px;
    }
}

.product-hero_gallery:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* Contained Width - Aligns with Header */
    width: 100%;
    height: 100%;
    background-color: #F4F4F4;
    border-radius: 20px;
}

/* Desktop Defaults */
@media (min-width: 992px) {
    .product-hero_gallery {
        min-height: 550px;
        /* Ensure space for absolute thumbnails */
    }

    .product-hero__layout--configurable {
        display: grid;
        grid-template-columns: 530px 1fr;
        /* Same as standard layout */
        gap: 60px;
        align-items: start;
    }

    /* Center: Main Image */
    .product-hero_gallery {
        display: flex;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* Prevent flex item from expanding infinitely */
    }
}

.product-hero__main {
    position: relative;
    width: 100%;
    min-height: 100%;
    /* Fill parent at minimum */
    min-width: 0;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* Large Screens: Align with Header (1792px) */
@media (min-width: 1600px) {

    .product-hero_gallery:before,
    .product-hero__main {
        /* Revert to contained 100% width */
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1;
    }

    /* Match Header Container Width */
    .page-single-product.container {
        max-width: 1920px;
        padding: 0 94px;
    }

    .product-service-package .container {
        max-width: 1920px;
        padding: 0 94px;
    }
}

.product-hero__main-swiper {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.product-hero__main-image {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-hero__main-image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 676px;
    display: block;
    object-fit: contain;
}

/* Override existing cover style to match unified behavior */
.product-hero__main-image--cover img {
    object-fit: cover;
    /* User requested "image in middle", so usually contain is safer, or maybe cover if they want full fill? "ảnh sẽ nằm giữa" implies centering, "full width" implies container. Let's stick to contain/center for "image inside box" feel unless specified otherwise. actually user said "slider ảnh to sẽ full width bằng cái greybox", meaning the CONTAINER is full width. */
}


/* Right: Thumbnails Gallery (Swiper) */
.product-hero__thumbnails {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    /* Floating */
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    width: 100px;
    z-index: 10;
}

.product-hero__thumbs-swiper {
    width: 100%;
    /* Default to auto height so it shrinks for few items, allowing parent to center it */
    height: auto;
    max-height: 460px;
    overflow: hidden;
}

.product-hero__thumbs-swiper.thumbs-scroll-enabled {
    height: 460px;
    /* Fixed height for scrolling */
}

.product-hero__thumbs-swiper .swiper-slide {
    height: auto !important;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.product-hero__thumb {
    width: 100px;
    height: 100px;
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    background: #fff;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.product-hero__thumb:hover {
    border-color: #ccc;
}

/* Active thumb when synchronized with main slider */
/* Case > 4 items: Scroll enabled, rely on swiper-slide-active (loop/center logic) */
.product-hero__thumbs-swiper.thumbs-scroll-enabled .swiper-slide-active .product-hero__thumb {
    border-color: #0076C0;
}

/* Case <= 4 items: Scroll disabled, rely on swiper-slide-thumb-active (sync logic) */
.product-hero__thumbs-swiper:not(.thumbs-scroll-enabled) .swiper-slide-thumb-active .product-hero__thumb {
    border-color: #0076C0;
}

.product-hero__thumb img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Navigation Buttons */
.product-hero__nav-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #0077B6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    opacity: 0.7;
}

#hero-thumbs-prev {
    display: none;
}

.product-hero__nav-btn:hover {
    opacity: 1;
}

.product-hero__nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    display: none;
}

/* Legacy Support */
.product-breadcrumb {
    padding: 20px 0;
    font-size: 14px;
    color: #666;
}

.product-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.product-brand__name {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
/* Responsive */
@media (max-width: 991px) {
    .product-hero_gallery:before {
        display: none;
    }

    .product-hero__layout {
        display: flex;
        /* Switch to Flex on Mobile for easier ordering control and to avoid Grid overflow issues */
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }

    /* Configurator Box on Mobile */
    /* Configurable Layout Reordering */
    .product-hero__info {
        display: contents;
        /* Still need contents to split Details and Config */
    }

    /* 1. Title/CTA Section */
    .product-hero__details {
        order: -1;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 4. Configurator Box (Bottom) */
    .product-config-box {
        order: 10;
        border: 1px solid #E5E5E5;
        border-radius: 16px;
        padding: 20px;
        margin-top: 0;
        width: 100%;
        /* Grid gap handles spacing */
    }

    /* Reset margin for product category inside box */
    .product-category {
        margin-top: 0;
        margin-bottom: 10px;
    }

    /* 2 & 3. Gallery Parts */
    .product-hero_gallery {
        /* Remove display: contents to restore Swiper context */
        display: block;
        order: 5;
        /* Between Details (-1) and Config (10) */
        width: 100%;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-hero__main {
        /* No longer a direct grid item, back to normal block */
        width: 100%;
        background-color: #F4F4F4;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .product-hero__thumbs-swiper .swiper-wrapper {
        flex-direction: row !important;
        box-sizing: border-box !important;
    }

    .product-hero__thumbs-swiper .swiper-slide {
        height: auto !important;
        width: auto !important;
        /* Allow auto width based on content */
        margin-bottom: 0 !important;
        margin-right: 12px !important;
        /* Gap between thumbs */
    }

    .product-hero__thumbnails {
        /* Inside gallery wrapper, just normal flow */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* Vertically align arrows with thumbs */
        gap: 10px;
        width: 100%;
        min-width: 0;
        margin-top: 0;
        position: relative;
        transform: unset;
        right: unset;
    }

    /* Rotate Arrows for Horizontal Layout */
    #hero-thumbs-prev,
    .product-hero__nav-btn--prev {
        display: flex !important;
        transform: rotate(-90deg) !important;
    }

    #hero-thumbs-next,
    .product-hero__nav-btn--next {
        transform: rotate(-90deg) !important;
    }

    .product-hero__thumbs-swiper.thumbs-scroll-enabled {
        height: auto;
        /* Ensure specific width for 3 items + gaps if needed, or keeping full width */
        max-width: 340px;
        /* Limit width to keep arrows close */
    }

    /* Remove manual font-size override */
    .product-title {
        color: #004789;
        margin-bottom: 20px;
    }


}

/* ========================================
   Overview Section
======================================== */


.product-overview__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

.product-overview__header .section-title {
    text-align: left;
    margin: 0;
}

.product-overview__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Show More Button */
.product-overview__show-more-wrapper {
    padding-top: 8px;
}

.product-overview__show-more-wrapper.is-hidden {
    display: none;
}

/* Hidden Items */
.product-overview__hidden-items {
    display: none;
    padding-top: 24px;
}

section#overview {
    padding-bottom: 65px;
    border-bottom: 1px solid #DBDBDB;
}

.product-overview__hidden-items .product-spec-group {
    margin-bottom: 24px;
}

.product-overview__hidden-items .product-spec-group:last-child {
    margin-bottom: 0px;
}

/* Spec Groups - No borders */
.product-spec-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-label {
    margin-top: 8px;
    margin-bottom: 0px;
}

/* Water Options - 2 column grid */
.spec-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
}

.spec-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spec-icon__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.spec-icon__img svg {
    width: 40px;
    height: 40px;
}

/* Sector Tags */
.spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.spec-tag {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #004789;
    border-radius: 54px;
    color: #004789;
    background: transparent;
}

/* Serving Size with Icon */
.spec-tags--with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spec-tag-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spec-tag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #F4F4F4;
}

.spec-tag-icon svg {
    width: 22px;
    height: 22px;
    color: #8A8A8A;
}

.product-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.product-spec-group--wide {
    grid-column: 1 / -1;
}

/* Single Option - Image Top, Text Bottom (Manufacturer, Upgrade, Finishing, Tap, Dispense) */
.spec-option-single {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: baseline;
}

.spec-option-single__image {
    height: 110px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}


.spec-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.spec-option-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.spec-option-card__image {
    max-width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 12px;
}

.spec-option-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #003057;
}

.spec-option-card__desc {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Swatches */
.spec-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.spec-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.spec-swatch img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}

.spec-swatch span {
    font-size: 12px;
    color: #666;
}

/* Manufacturer in Overview */
.spec-manufacturer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spec-manufacturer__logo {
    max-height: 40px;
    width: auto;
}

.spec-manufacturer__name {
    font-size: 16px;
    font-weight: 600;
    color: #003057;
}

/* Clearance Grid */
.spec-clearance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.spec-clearance-item {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.spec-clearance-item__diagram {
    max-width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.spec-clearance-item__desc {
    font-size: 14px;
    color: #666;
    margin: 0;
}

@media (max-width: 991px) {
    .product-overview__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

section.section-related-products {
    margin-bottom: 150px;
}

/* ========================================
   Feature Highlights Section
======================================== */
.product-features {
    padding: 65px 0;
    background-color: #fff;
    border-bottom: 1px solid #DBDBDB;
}

.product-features__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

/* Left: Title Header */
.product-features__header .section-title {
    text-align: left;
    margin: 0;
}

/* Right: Content (Features + Slider) */
.product-features__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Feature List */
.product-features__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.feature-item {
    padding-bottom: 35px;
}

.feature-item:first-child {
    padding-top: 0;
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item__title {
    margin-top: 8px;
    margin-bottom: 4px;
}

.feature-item__desc {
    margin: 0;
}

.product-hero_gallery {
    justify-content: space-between;
}

/* Feature Slider */
.feature-slider {
    overflow: hidden;
    position: relative;
}

.feature-slider__track {
    display: flex;
    transition: transform 0.4s ease;
}

.feature-slider__slide {
    flex: 0 0 50%;
    min-width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
    max-height: 200px;
    overflow: hidden;
}

.intro-tabs__arrows.feature-slider__controls button span {
    color: var(--color-text);
}

.intro-tabs__counter span {
    color: var(--color-text);
}

.feature-slider__slide img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.product-features__slider .b-button--arrow::after,
.product-features__slider .b-button--arrow::before {
    background-image: url('../../image/arrow-black-hortizal.svg');
}

button.feature-slider__next.intro-tabs__arrow.intro-tabs__arrow--next {
    padding-right: 0;
}

.feature-slider__controls {
    justify-content: flex-end;
    margin-top: 40px;
}

@media (max-width: 991px) {
    .product-features__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .feature-slider__slide {
        flex: 0 0 100%;
        min-width: 100%;
        padding-right: 0;
    }
}

/* ========================================
   Certifications Section
======================================== */
.product-certifications {
    padding: 60px 0;
    background-color: #fff;
}

.product-certifications__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

.product-certifications__header .section-title {
    text-align: left;
    margin: 0;
}

.product-certifications__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.certification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.certification-card {
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.certification-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.certification-card__logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.certification-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.certification-card__name {
    text-align: center;
    margin: 0;
}

@media (max-width: 991px) {
    .product-certifications__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-certifications__grid {
        gap: 30px;
    }

    .certification-card {
        width: 150px;
        height: 150px;
    }
}

/* ========================================
   Specifications Section
======================================== */
.product-specifications {
    padding: 60px 0;
    background-color: #fff;
    border-bottom: 1px solid #DBDBDB;
}

.product-specs-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-specs-item__label {
    margin-bottom: 4px;
    margin-top: 0;
}

.product-specs-item__value p {
    margin: 0;
}

/* Specifications Layout */
.product-specifications__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

.product-specifications__header .section-title {
    text-align: left;
    margin: 0;
    position: sticky;
    top: 100px;
}

.product-specifications__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Other Model Specification */
.other-model-specs {
    margin-top: 20px;
}

.model-item {
    border-bottom: 1px solid #DBDBDB;
}

.model-item.is-active {
    border-bottom: 1px solid #004789;
}

.model-item__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: all 0.3s ease;
}

.model-item__header:hover {
    opacity: 0.85;
}

.model-item__number {
    min-width: 24px;
}

.model-item__title {
    flex: 1;
}

.model-item.is-active .model-item__title,
.model-item.is-active .model-item__number {
    color: #004789;
    margin-bottom: 20px;
}

/* Custom Icon - Plus/Minus Animation (same as FAQ) */
.model-item__icon-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-item__icon-line {
    position: absolute;
    background-color: #004789;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 1px;
}

.model-item__icon-line.line-horizontal {
    width: 16px;
    height: 2px;
}

.model-item__icon-line.line-vertical {
    width: 2px;
    height: 16px;
}

/* Rotate vertical line 90deg to form minus */
.model-item.is-active .model-item__icon-line.line-vertical {
    transform: rotate(90deg);
}

/* Rotate horizontal line 180deg for smooth effect */
/* .model-item.is-active .model-item__icon-line.line-horizontal {
    transform: rotate(180deg);
} */

/* Accordion Content */
.model-item__content {
    display: none;
    padding: 0 0 24px;
    padding-left: 44px;
    overflow: hidden;
}

.model-item__content p {
    margin: 0;
}

@media (max-width: 991px) {
    .product-specifications__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-specifications__header .section-title {
        position: static;
    }
}

/* ========================================
   FAQ Section
======================================== */
.product-faq {
    padding: 80px 0;
    background-color: #fff;
}



.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-item__icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item__question[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
}


/* ========================================
   Video Section
======================================== */
.product-video {
    padding: 80px 0;
    background-color: #fff;
}

.product-video__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

.product-video__header .section-title {
    text-align: left;
    margin: 0;
}

.product-video__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-video__item {
    position: relative;
}

/* Video Embed */
.product-video__embed {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-video__embed iframe {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    border: none;
}

.product-video__embed video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
}

/* Video Thumbnail with Play Button */
.product-video__thumbnail {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
}

.product-video__thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.product-video__thumbnail:hover img {
    transform: scale(1.02);
}

/* Play Button */
.product-video__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2;
}

.product-video__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.product-video__play-btn svg {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Overlay gradient */
.product-video__thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-video__thumbnail:hover::after {
    opacity: 1;
}

.product-video__thumbnail.is-playing::after {
    display: none;
}

/* Responsive */
@media (max-width: 991px) {
    .product-video__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}

@media (max-width: 576px) {
    .product-video {
        padding: 60px 0;
    }

    .product-video__embed,
    .product-video__thumbnail {
        border-radius: 16px;
    }

    .product-video__play-btn svg {
        width: 60px;
        height: 60px;
    }
}

/* Brand in Hero */
.product-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.product-brand__logo {
    max-height: 32px;
    width: auto;
}

/* ========================================
   Responsive - New Sections
======================================== */
@media (max-width: 768px) {
    .product-overview__grid {
        grid-template-columns: 1fr;
    }

    .product-features__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .feature-card {
        padding: 20px;
    }

    .product-specs-table th,
    .product-specs-table td {
        padding: 12px 16px;
    }

    .faq-item__question {
        padding: 16px 0;
    }
}

/* ========================================
   Service Package Section
======================================== */
.product-service-package {
    padding: 80px 0;
    background-color: #f8f9fa;
    border-top: 1px solid #DBDBDB;
    padding-bottom: 134.5px;
}


.product-service-package .section-title--left {
    text-align: left;
    margin-bottom: 50px;
}



.service-package-item {
    border-bottom: 1px solid #DBDBDB;
    transition: border-color 0.3s ease, padding-left 0.3s ease;
}

/* Active state - blue bottom border + slide in effect */
.service-package-item.is-active {
    border-bottom: 2px solid #0076C0;
    padding-left: 40px;
    /* Reset left border from previous style */
    border-left: none;
    margin-left: 0;
}

.service-package-item__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.service-package-item__number {

    min-width: 28px;
}

.service-package-item__title {
    flex: 1;
    padding-right: 20px;
}

/* Active state - blue title */
.service-package-item.is-active .service-package-item__title,
.service-package-item.is-active .service-package-item__number {
    color: #004789;
}

.service-package-item .service-package-item__title,
.service-package-item .service-package-item__number {
    color: #1A1A1A;
}

/* Custom Icon - Plus/Minus Animation */
.service-package-item__icon-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-package-item__icon-line {
    position: absolute;
    background-color: #0077B6;
    /* var(--color-primary) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-package-item__icon-line.line-horizontal {
    width: 22px;
    height: 2px;
}

.service-package-item__icon-line.line-vertical {
    width: 2px;
    height: 22px;
}

/* Rotate vertical line 90deg to form minus */
.service-package-item.is-active .service-package-item__icon-line.line-vertical {
    transform: rotate(90deg);
}

/* Accordion Content */
.service-package-item__content {
    display: none;
    padding: 0 0 60px 68px;
    overflow: hidden;
}

.service-package-item__desc {
    margin: 0 0 20px;
}

.service-package-item__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-package-item__checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {

    /* Layout Resets */
    .product-overview__layout,
    .product-features__layout,
    .product-specifications__layout,
    .product-video__layout,
    .product-faq__layout,
    .product-certifications__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Keep Overview Grid as 2 columns on mobile (Icons) */
    .product-overview__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Configurator Styles */
    .product-config-box__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .product-config-box__selected {
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        background-color: #004789;
        padding: 4px 12px;
        border-radius: 20px;
        display: inline-block;
    }

    /* Service Package Mobile - Restore background based on screenshot */
    .product-service-package {
        padding: 40px 0;
        margin-bottom: 0;
        background-color: #f8f9fa;
        padding-bottom: 90.5px;
    }

    .service-package-item__header {
        padding: 20px 0;
        gap: 10px;
    }

    .service-package-item__content {
        padding-left: 40px;
        padding-bottom: 25px;
    }

    /* FAQ Mobile: Active state has 0 padding left */
    .service-package-item.is-active {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }

    /* Specifications */
    .product-specifications__header .section-title {
        position: static;
        /* Remove sticky on mobile */
        margin-bottom: 20px;
    }

    .product-service-package {
        border-top: 0;
    }

    section.section-related-products {
        margin-bottom: 70px;
    }
}

/* ========================================
   Product FAQ Section
======================================== */
.product-faq {
    padding: 60px 0;
    background-color: #fff;
    border-bottom: 1px solid #DBDBDB;
}

.product-faq__layout {
    display: grid;
    grid-template-columns: 530px 1fr;
    gap: 60px;
    align-items: start;
}

.product-faq__header .section-title {
    text-align: left;
    margin: 0;
}

.product-faq__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-item.is-active {
    border-bottom: 1px solid #0076C0;
}

/* FAQ Item */
.faq-item {
    border-bottom: 1px solid #DBDBDB;
}

.faq-item--hidden {
    display: none;
}

.faq-item--hidden.is-visible {
    display: block;
}

.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}


.faq-item.is-active .faq-item__text {
    color: #004789;
}

/* Line-based +/- Icon */
.faq-item__icon-wrapper {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.faq-item__icon-line {
    position: absolute;
    background-color: #004789;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 1px;
}

.faq-item__icon-line.line-horizontal {
    width: 16px;
    height: 2px;
}

.faq-item__icon-line.line-vertical {
    width: 2px;
    height: 16px;
}

.faq-item.is-active .faq-item__icon-line.line-vertical {
    transform: rotate(90deg);
}

/* .faq-item.is-active .faq-item__icon-line.line-horizontal {
    transform: rotate(180deg);
} */

/* Answer */
.faq-item__answer {
    display: none;
    padding: 0 0 24px;
    overflow: hidden;
}




/* Show More Button */
.product-faq__toggle {
    padding-top: 8px;
}

.product-faq__show-more:hover {
    color: #005488;
}

@media (max-width: 991px) {
    .product-faq__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ========================================
   Product Configuration - Configurable Hero
======================================== */

/* Configurable Layout - same structure as standard */



/* Force Swiper to respect parent width in configurable layout */
.product-hero--configurable .product-hero__main {
    min-width: 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.product-hero--configurable .product-hero__main-swiper {
    width: 100%;
    max-width: 100%;
}

.product-hero--configurable .product-hero__main-swiper .swiper-wrapper {
    width: 100%;
    transition-property: transform !important;
    /* Force slide effect, override any opacity transitions */
}

.product-hero--configurable .product-hero__main-swiper .swiper-slide {
    width: 100% !important;
}

/* Configuration Tags */
.product-hero__config-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.config-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #003057;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

/* Info Section - Configurable */
.product-hero__info--configurable {
    display: flex;
    flex-direction: column;
    gap: 10px;
    order: 0;
}

/* ========================================
   Product Configuration Box
======================================== */
.product-config-box {
    margin-top: 40px;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #DBDBDB;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-config-box__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header row - label left, selected badge right */
.product-config-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Selected option badge */
.product-config-box__selected {
    display: none;
    padding: 6px 16px;
    background: #003057;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 100px;
    white-space: nowrap;
}

.product-config-box__selected.is-visible {
    display: inline-block;
}

/* Type Icon Buttons */
.product-config-box__type-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.config-type-btn {
    width: 70px;
    height: 70px;
    padding: 8px;
    background: #fff;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.config-type-btn:hover {
    border-color: #1A1A1A;
}

.config-type-btn.is-active {
    border-color: #1A1A1A;
}

.config-type-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.config-type-btn span {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* Finish Swatch Buttons */
.product-config-box__finish-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.config-finish-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    background: #fff;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.config-finish-btn:hover {
    border-color: #1A1A1A;
    transform: scale(1.05);
}

.config-finish-btn.is-active {
    border-color: #1A1A1A;

}

.config-finish-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.config-finish-btn__fallback {
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

/* ========================================
   Quick Navigation Bar
======================================== */
.product-quick-nav {
    position: sticky;
    top: 80px;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-quick-nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-quick-nav__list::-webkit-scrollbar {
    display: none;
}

.product-quick-nav__list li {
    flex-shrink: 0;
}

.product-quick-nav__link {
    display: block;
    padding: 16px 0;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.product-quick-nav__link:hover {
    color: #003057;
}

.product-quick-nav__link.is-active {
    color: #0077B6;
    border-bottom-color: #0077B6;
}

/* Gallery Transition */
#config-gallery-wrapper,
#config-thumbs-wrapper {
    transition: opacity 0.2s ease;
}

/* ========================================
   Responsive - Configurable Hero
======================================== */
@media (max-width: 991px) {
    .product-hero__layout--configurable {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-hero__gallery-wrapper {
        order: 1;
    }

    .product-hero__info--configurable {
        order: 2;
    }
}

@media (max-width: 768px) {
    .product-config-box {
        padding: 16px;
        margin-top: 10px;
    }

    .config-type-btn {
        width: 70px;
        height: 70px;
    }

    .config-finish-btn {
        width: 50px;
        height: 50px;
    }

    .product-quick-nav__list {
        gap: 24px;
    }

    .product-quick-nav__link {
        font-size: 13px;
        padding: 14px 0;
    }

    .product-hero {
        margin-bottom: 0px;

    }

    .product-features {
        margin-top: 0px;
        padding-top: 0;
    }

    .product-specifications {
        margin-top: 0px;
        padding-top: 0;
    }

    .product-video {
        margin-top: 0px;
        padding-top: 0;
    }

    section#overview {
        border-bottom: none;
    }

    .product-features {
        border-bottom: none;
    }

    .product-specifications {
        border-bottom: none;
    }

    .product-video {
        border-bottom: none;
    }

    .product-faq {
        margin-top: 0;
        border-bottom: none;
        padding-top: 0;
    }

    .product-certifications {
        margin-top: 0;
        padding-top: 0;
        border-bottom: none;
    }
}

/* ========================================
   Mobile Product Tabs
======================================== */
.product-mobile-tabs {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    margin-bottom: 10px;
    order: 12;
    /* Ensure it stays below config box (order varies) */
    width: calc(100% + 60px);
    max-width: 100vw;
    margin-left: -30px;
    margin-right: -30px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 70px;
}

/* Hide scrollbar */
.product-mobile-tabs::-webkit-scrollbar {
    display: none;
}

.product-mobile-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.product-mobile-tabs__item {
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    background: none;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: 500;
    color: #004789;
    /* Inactive color */
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.product-mobile-tabs__item.is-active {
    background-color: #004789;
    /* Active background */
    color: #fff;
    /* Active text */
    font-weight: 600;
}

@media (min-width: 992px) {
    .product-mobile-tabs {
        display: none !important;
    }
}

/* ========================================
   Related Products Slider (Mobile)
   ======================================== */
@media (max-width: 991px) {
    .related-products-slider {
        overflow: hidden;
        /* Optional: Allow slider to touch right edge if container has padding */
        margin-right: -20px;
        padding-right: 20px;
    }

    .related-products-slider .product-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0;
    }

    .related-products-slider .swiper-slide {
        width: 300px;
        flex-shrink: 0;
        height: auto;
    }

    /* Ensure card fills height */
    .related-products-slider .product-cards__card {
        height: 100%;
    }

    .section-related-products h2.section-title {
        margin-bottom: 30px;
    }
}

@media (min-width:992px) and (max-width:1439px) {
    .product-hero__thumbnails {
        right: 46px;
    }
}