/* ═══════════════════════════════════════════════════
   PRODUCT SINGLE
   Tokens inherited from global/style.css :root
   ═══════════════════════════════════════════════════ */

/* -- Typography -- */

/* -- Headings -- */

/* reset */
#main-content#main-content  {
   .container:before {
      width: 0;
   }
}

/* button */
.primary-btn {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-family: var(--font-mada);
   font-size: 14.4px;
   font-weight: 700;
   color: #FFF;
   background: transparent;
   border: 2.4px solid #BBCEB0;
   border-radius: 100px;
   padding: 8.8px 24px;
   cursor: pointer;
   transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;

   &.is-active {
      background: var(--LA-green, #BBCEB0);
      border-color: var(--LA-green, #BBCEB0);
      color: #000;
   }

   &:hover:not(.is-active) {
     background: var(--LA-green, #BBCEB0);
     
   }

}

.secondary-btn {
    display: inline-flex;
    color: var(--LA-black, #000);
    font-family: Mada;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 146%; /* 21.024px */
    padding: 8.8px 24px;
    background-color: white;
    border-radius: 9999px;
   /*  &:hover {
        background: var(--LA-green, #BBCEB0);
    } */
}


/* ── Hero Section ──────────────────────────────── */
#main-content .page-hero {
    position: relative;

    .page-hero__bg {
        display: block;
        width: 100%;
        height: 585px;
        object-fit: cover;
    }

    .page-hero__content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .page-hero__title {
      font-size: var(--text-3xl);
      color: var(--color-white, #FFF);
      font-family: var(--font-mada);
      font-weight: 700;
      line-height: normal;
    }
    .page-hero__leading-text {
      color: var(--color-white, #FFF);
      font-family: var(--font-mada);
      font-size: 22px;
      font-weight: 400;
      line-height: 1.44444;
    }
}
/* ── Split Section ─────────────────────────────── */

#main-content .product-split.product-split {
   h2 {
      font-size: var(--text-heading-h2);
      font-family: var(--font-mada);
      font-weight: 700;
      line-height: 1.16667;
      color:black;
   }
   .product-split__container, .container{
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-block: var(--spacing-section);
   }
   .product-split__col {
      display: flex;
      flex-direction: column;
      gap: 18px;
      p {
         font-size: var(--text-paragraph);
         line-height: var(--leading-paragraph);
         font-family: var(--font-mada);
         font-weight: 400;
         color: black;
      }
   }
}

/* Project Page */
.project-split {
    &.project-split--overlapping {
        margin-top: -55px;
    }
    .container {
        padding-top: 40px !important;
        padding-bottom: 60px;
        padding-inline: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 46px;
        row-gap: 22px;
    }

    .project-split__title {
        grid-column: 1 / -1;
        color: var(--LA-black, #000);
        font-family: Mada;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .project-split__col {
        p{
           color: var(--LA-black, #000);
            font-family: Mada;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; /* 144.444% */
        }
 
            a {
                color: var(--LA-black, #000);
                font-family: Mada;
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 26px;
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: none;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
                transition: underline 0.3s ease;
                &:hover {
                    text-decoration:none ;
                }
            }
    }
}

.project-slider {
    .container  {
        padding: 0;
        
    }
}


/* ── Tab Section ───────────────────────────────── */
#main-content .product-tabs {

    /* ── Nav bar ─────────────────────────────────── */
    .product-tabs__nav {
        position: relative;
        padding-block: 48px;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--LA-brown, #675A4C);
            opacity: 0.7;
            mix-blend-mode: multiply;
        }
    }

    .product-tabs__nav-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 50px;
        &.container {
         padding-top:0;
        }
    }

    .product-tabs__heading {
        color: #fff;
        font-family: var(--font-mada);
        font-size: var(--text-heading-h2);
        font-weight: 700;
        white-space: nowrap;
        margin: 0;
        padding-bottom: 0;
    }

    .product-tabs__btn-group {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
    }



    /* ── Panels ──────────────────────────────────── */
    .product-tabs__panels {
        background: var(--LA-brown, #675A4C);
        .container {
         padding-top: 0;
        }
    }

    .product-tabs__panel-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        /* padding-block: 80px; */
       /*  gap: 40px; */
    }

    /* ── Left content ────────────────────────────── */
    .product-tabs__left {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .product-tabs__variant-name {
        color: #fff;
        font-family: var(--font-mada);
        font-size: var(--text-3xl);
        font-weight: 400;
        line-height: 1.1;
        margin: 0;
    }

    .product-tabs__icon-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .product-tabs__icon-item {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .product-tabs__icon {
        flex-shrink: 0;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .product-tabs__icon-text {
        color: #fff;
        font-family: var(--font-mada);
        font-size: var(--text-paragraph);
        font-weight: 400;
    }

    .product-tabs__buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }


    .product-tabs__watch-icon {
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
        flex-shrink: 0;

        svg {
            width: 100%;
            height: 100%;
            circle {
               fill: #BBCEB0;
            }
        }
    }

    /* ── Right image ─────────────────────────────── */
    .product-tabs__right {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 595.8px;
            height: auto;
            aspect-ratio: 1 / 1;
            display: block;
            object-fit: contain;
        }
    }
}

/* ── Info Section ──────────────────────────────── */
.product-info {
   overflow-x: clip;
   margin-top: -3%;
   mix-blend-mode: multiply;

   .container {
      display: grid;
      grid-template-columns: 60% 40%;
      max-width: 1200px;

      margin-inline: auto;
      box-sizing: border-box;  
   }

   .product-info__list {
    list-style-type: none;
    padding: 0;
    line-height: normal;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .product-info__item {
        display: inline-flex;
        align-items: center;
        gap: 20px;
    }
   }

   .product-info__left {
      padding-block: var(--spacing-section-md);
      display: flex;
      flex-direction: column;
      gap: 45px;
      .product-info__title {
         font-size: var(--text-heading-h2);
         line-height: 26px;
         color: #000;
         font-family: var(--font-mada);
         font-weight: 700;
      }
   }

   .product-info__right {
    padding-top: var(--spacing-section-md);
    padding-left: 73px;
    position: relative;
      
      &::after {
         content: '';
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: -9999px;
         background: inherit;
         z-index: 0;
         background: var(--LA-green, #BBCEB0);
      }
      .product-info__wrapper {
        position: relative;
        z-index: 1;
        .product-info__col-title {
            color: #5E7551;
            font-family: var(--font-mada);
            font-size: var(--text-heading-h2);
            font-style: normal;
            font-weight: 700;
            line-height: 28px; /* 93.333% */
            margin-bottom: 29px;
        }


      }
   }
   .product-info__brochure-image {
      padding-top: 25px;
   }
}


/* ── Gallery Section (product) ─────────────────── */
.product-gallery {
    /* padding-top: 90px; */

    .product-gallery__title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        margin: 0;
        padding-top: 90px;

        h2 {
            text-align: center;
            font-family: var(--font-mada);
            font-size: var(--text-3xl);
            line-height: 40px;
            font-weight: 700;
            color: #fff;
        }

        .green-text {
            color: var(--LA-green, #BBCEB0);
        }
    }

    .product-gallery__swiper {
        position: relative;
        width: 100%;
        max-height: 727px;
        overflow: hidden;
    }

    .product-gallery__slide img {
        display: block;
        width: 100%;
        height: 727px;
        object-fit: cover;
    }

    .product-gallery__prev,
    .product-gallery__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.85);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;

        &::after {
            font-size: 16px;
            color: #000;
            font-weight: 700;
        }

        &:hover {
            background: #fff;
        }

        &.swiper-button-disabled {
            opacity: 0.3;
            pointer-events: none;
        }
    }

    .product-gallery__prev {
        left: 20px;
    }

    .product-gallery__next {
        right: 20px;
    }
}

/* ── Gallery Section (project) ────────────────── */
.project-gallery {
    padding-top: 130px;
    padding-bottom: 130px;
    .container {
        padding-top: 0 !important;
    }

    .project-gallery__title {
        color: var(--LA-black, #000);
        font-family: Mada;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 36px;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        h2 {
            text-align: center;
            font-family: var(--font-mada);
            font-size: var(--text-3xl);
            line-height: 40px;
            font-weight: 700;
            color: #000;
            margin: 0;
        }

        .green-text {
            color: var(--LA-green, #BBCEB0);
        }
    }

    .project-gallery__main-wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
        max-width: 1200px;
        margin-inline: auto;
    }

    .project-gallery__swiper {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        border-radius: 4px;
    }

    .project-gallery__slide img {
        display: block;
        width: 100%;
        height: 455px;
        object-fit: cover;
    }

    .project-gallery__prev,
    .project-gallery__next {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        background: var(--LA-brown, #675A4C);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;

        &:hover {
            background: #554a3e;
        }

        &.swiper-button-disabled {
            opacity: 0.3;
            pointer-events: none;
        }
    }

    .project-gallery__thumbs {
        max-width: 1200px;
        margin-inline: auto;
        margin-top: 36px;
        overflow: hidden;
        .swiper-wrapper {
            margin-inline: auto;
            justify-content: center;
        }
        .swiper-slide {
            max-width: 55px;
            max-height: 55px;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.2s ease;
            border-radius: 2px;
            overflow: hidden;

            &.swiper-slide-thumb-active {
                opacity: 1;
            }

            &:hover {
                opacity: 0.8;
            }
        }

        img {
            display: block;
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
    }
}

/* ── Product Listing ──────────────────────────────── */
.product-listing {
    background: var(--LA-brown, #675A4C);
    padding-block: var(--spacing-section);
    .container {
        padding-top: 0 !important;
    }

    .product-listing__title {
        text-align: center;
        font-family: var(--font-mada);
        font-size: var(--text-heading-h2);
        font-weight: 700;
        color: #fff;
        margin: 0 0 48px;
    }

    .product-listing__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* ── Product Card ────────────────────────────────── */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-card__media {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.product-card__image-link {
    display: block;
}

.product-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card__image-link:hover .product-card__image {
    transform: scale(1.03);
}

.product-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #fff;

    img {
        max-height: 48px;
        width: auto;
        display: block;
    }
}

.product-card__features {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-card__feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-card__feature-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

    img, svg {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.product-card__feature-text {
    font-family: var(--font-mada);
    font-size: var(--text-paragraph);
    font-weight: 400;
    color: #fff;
}

.product-card__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.product-card__watch-icon {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    svg {
        width: 100%;
        height: 100%;

        circle {
            fill: #BBCEB0;
        }
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 980px) {

    /* ── Hero ─────────────────────────────────────── */
    #main-content .page-hero {
        .page-hero__bg {
            height: 400px;
        }

        .page-hero__leading-text {
            font-size: var(--text-paragraph);
            padding-inline: var(--spacing-gutter);
        }
    }

    /* ── Split ────────────────────────────────────── */
    #main-content .product-split.product-split {
        .product-split__container, .container {
            grid-template-columns: 1fr;
            padding-block: var(--spacing-section-md);
            gap: 32px;
        }
    }

    .project-split .container {
        grid-template-columns: 1fr;
        padding-inline: var(--spacing-gutter);
    }

    /* ── Tabs ─────────────────────────────────────── */
    #main-content .product-tabs {
        .product-tabs__nav-inner {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .product-tabs__btn-group {
            gap: 12px;
        }

        .product-tabs__panel-inner {
            grid-template-columns: 1fr;
            gap: 32px;
            padding-top: 32px;
        }

        .product-tabs__right img {
            width: 100%;
            max-width: 400px;
        }
    }

    /* ── Info ─────────────────────────────────────── */
    .product-info {
        .container {
            grid-template-columns: 1fr;
        }

        .product-info__right {
            padding-left: 0;
            padding-top: var(--spacing-section-sm);

            &::after {
                right: 0;
                left: -9999px;
            }
        }
    }

    /* ── Gallery (product) ────────────────────────── */
    .product-gallery {
        padding-top: var(--spacing-section-sm);

        .product-gallery__title {
            padding-top: var(--spacing-section-sm);
        }

        .product-gallery__slide img {
            height: 450px;
        }

        .product-gallery__prev,
        .product-gallery__next {
            width: 40px;
            height: 40px;
        }
    }

    /* ── Product Listing ──────────────────────────── */
    .product-listing .product-listing__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* ── Gallery (project) ────────────────────────── */
    .project-gallery {
        padding-top: var(--spacing-section-md);
        padding-bottom: var(--spacing-section-md);

        .project-gallery__slide img {
            height: 320px;
        }

        .project-gallery__prev,
        .project-gallery__next {
            width: 40px;
            height: 40px;

            svg {
                width: 10px;
                height: 18px;
            }
        }

        .project-gallery__thumbs .swiper-slide {
            max-width: 45px;
            max-height: 45px;
        }
    }
}

@media (max-width: 768px) {

    /* ── Hero ─────────────────────────────────────── */
    #main-content .page-hero {
        .page-hero__bg {
            height: 300px;
        }

        .page-hero__leading-text {
            font-size: 16px;
        }
    }

    /* ── Split ────────────────────────────────────── */
    .project-split .container {
        column-gap: 0;
        padding-inline: var(--spacing-gutter);
    }

    .project-split .project-split__title {
        font-size: var(--text-heading-h2);
    }

    /* ── Tabs ─────────────────────────────────────── */
    #main-content .product-tabs {
        .product-tabs__nav {
            padding-block: 24px;
        }

        .product-tabs__heading {
            font-size: var(--text-heading-h2);
        }

        .product-tabs__variant-name {
            font-size: var(--text-heading-h2);
        }

        .product-tabs__right img {
            max-width: 100%;
        }
    }

    /* ── Info ─────────────────────────────────────── */
    .product-info .product-info__left {
        padding-block: var(--spacing-section-sm);
        gap: 24px;
    }

    /* ── Gallery (product) ────────────────────────── */
    .product-gallery {
        .product-gallery__slide img {
            height: 280px;
        }

        .product-gallery__prev {
            left: 10px;
        }

        .product-gallery__next {
            right: 10px;
        }
    }

    /* ── Product Listing ──────────────────────────── */
    .product-listing .product-listing__grid {
        grid-template-columns: 1fr;
    }

    /* ── Gallery (project) ────────────────────────── */
    .project-gallery {
        padding-top: var(--spacing-section-sm);
        padding-bottom: var(--spacing-section-sm);

        .project-gallery__main-wrapper {
            gap: 12px;
        }

        .project-gallery__slide img {
            height: 220px;
        }

        .project-gallery__prev,
        .project-gallery__next {
            width: 36px;
            height: 36px;

            svg {
                width: 8px;
                height: 16px;
            }
        }

        .project-gallery__thumbs {
            margin-top: 20px;

            .swiper-slide {
                max-width: 36px;
                max-height: 36px;
            }
        }
    }
}