/* ================================
   PRODUCT HERO
================================ */

.product-hero {

    padding: 120px 0 70px;

    background: #f7f9fc;

}

.breadcrumbs {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 35px;

    font-size: 14px;

    color: #777;

}

.breadcrumbs a {

    color: var(--color-primary);

}

.product-category {

    display: inline-block;

    margin-bottom: 20px;

    padding: 8px 18px;

    background: rgba(0,91,172,.08);

    color: var(--color-primary);

    border-radius: 40px;

    font-size: 14px;

    font-weight: 600;

}

.product-title {

    font-size: clamp(2.5rem,5vw,4rem);

    line-height: 1.1;

    margin-bottom: 20px;

}

.product-code {

    font-size: 18px;

    margin-bottom: 25px;

    color: #666;

}

.product-intro {

    max-width: 760px;

    font-size: 18px;

    color: #666;

    line-height: 1.8;

    margin-bottom: 40px;

}

.product-actions {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}


.product-gallery-section {
    padding: 80px 0;
}

.gallery-column {
    max-width: 900px;
    margin: 0 auto;
    min-width: 0;
}

.product-gallery {
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    background: #f8f8f8;
}

.product-thumbs {
    min-width: 0;
}



.swiper {
    width: 100%;
    min-width: 0;
}

.technical-column{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.technical-drawing,
.product-highlights{
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:24px;
}

.technical-drawing h3,
.product-highlights h3{
    margin-bottom:20px;
}

.technical-drawing img{
    width:100%;
    object-fit:contain;
}

.product-highlights ul{
    display:grid;
    gap:14px;
}

.product-highlights li{
    display:flex;
    align-items:center;
    font-weight:500;
}

/*==================================
PRODUCT OVERVIEW
==================================*/

.product-overview{
    padding:100px 0;
}

.overview-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:60px;
}

.overview-content{

    font-size:17px;

    line-height:1.9;

    color:#555;

}

.overview-content p{

    margin-bottom:20px;

}

.overview-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.overview-card{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:16px;

    padding:28px;

    transition:.3s;

}

.overview-card:hover{

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.overview-card h3{

    margin-bottom:20px;

    color:var(--color-primary);

    font-size:20px;

}

.application-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.application-badge{

    background:#eef6ff;

    color:var(--color-primary);

    padding:10px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:500;

}

.material-list{

    display:grid;

    gap:12px;

}

.material-list li{

    position:relative;

    padding-left:22px;

}

.material-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:10px;

    width:8px;

    height:8px;

    background:var(--color-primary);

    border-radius:50%;

}

@media(max-width:991px){

.overview-grid{

grid-template-columns:1fr;

}

}

/* ==================================
   OPERATING LIMITS
================================== */

.product-operating-limits {
    padding: 100px 0;
    background: #f8fafc;
}

.limits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.limit-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: .3s ease;
}

.limit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.limit-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
    letter-spacing: .08em;
}

.limit-card h3 {
    font-size: 28px;
    color: var(--color-primary);
    margin: 0;
}

.spec-table-wrapper {
    overflow-x: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table thead {
    background: var(--color-primary);
}

.spec-table th {
    color: #fff;
    padding: 18px 24px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
}

.spec-table td {
    padding: 18px 24px;
    border-bottom: 1px solid #ececec;
}

.spec-table tbody tr:hover {
    background: #f8fbff;
}

@media (max-width: 991px) {

    .limits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 576px) {

    .limits-grid {
        grid-template-columns: 1fr;
    }

}

/*==================================
ENGINEERING DATA
==================================*/

.engineering-data{
    padding:100px 0;
}

.engineering-tabs{
    display:flex;
    gap:16px;
    margin-bottom:40px;
    border-bottom:1px solid #e5e7eb;
}

.engineering-tab{
    background:none;
    border:none;
    padding:18px 0;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:#666;
    position:relative;
    transition:.3s;
}

.engineering-tab.active{
    color:var(--color-primary);
}

.engineering-tab.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:3px;
    background:var(--color-primary);
}

.engineering-panel{
    display:none;
}

.engineering-panel.active{
    display:block;
}

/* ==================================
   PRODUCT CARD
================================== */

.product-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.product-card__image{
    display:block;
    background:#fff;
    aspect-ratio:1/1;
    overflow:hidden;
}

.product-card__img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:30px;
    transition:.35s;
}

.product-card:hover .product-card__img{
    transform:scale(1.05);
}

.product-card__content{
    padding:28px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.product-card__category{
    color:var(--color-primary);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.product-card__title{
    margin:12px 0;
    font-size:24px;
}

.product-card__code{
    color:#666;
    margin-bottom:18px;
}

.product-card__description{
    color:#666;
    line-height:1.7;
    margin-bottom:24px;
}

.product-card__link{
    margin-top:auto;
    color:var(--color-primary);
    font-weight:600;
}
/* ==================================
   PRODUCTS ARCHIVE
================================== */

.archive-hero{
    background:#f8fafc;
    padding:120px 0 80px;
    text-align:center;
}

.products-list{
    padding:80px 0 120px;
}

.products-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:50px;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.pagination-wrapper{
    margin-top:70px;
    display:flex;
    justify-content:center;
}

.empty-products{
    text-align:center;
    padding:80px 20px;
}

@media(max-width:992px){

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:640px){

    .products-grid{

        grid-template-columns:1fr;

    }

}


.product-top{

    padding:120px 0 80px;

    background:#f7f9fc;

}

.product-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    gap: 60px;
    align-items: start;
}

.gallery-column {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.product-gallery {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.product-gallery .swiper-wrapper {
    align-items: center;
}

.product-gallery .swiper-slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-gallery img {
    width: 100%;
    max-width: 100%;
    height: 500px;
    object-fit: contain;
    display: block;
}

.product-info {
    min-width: 0;
}

.product-gallery{

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    margin-bottom:20px;

}

.product-gallery img{

    width:100%;

    height:550px;

    object-fit:contain;

    display:block;

}

.product-thumbs{

    margin-top:20px;

}

.product-thumbs .swiper-slide{

    cursor:pointer;

    border:1px solid #ddd;

    border-radius:12px;

    overflow:hidden;

    opacity:.6;

}

.product-thumbs .swiper-slide-thumb-active{

    opacity:1;

    border-color:var(--color-primary);

}

.product-thumbs img{

    width:100%;

    height:90px;

    object-fit:contain;

}

@media(max-width:992px){

    .product-top-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .product-info{

        position:static;

    }

}

@media (max-width: 768px) {

    .product-top {
        padding: 90px 0 40px;
    }

    .product-top-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-gallery {
        margin-bottom: 12px;
        aspect-ratio: 1 / 1;
    }

    .product-gallery img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        padding: 15px;
    }

    .product-thumbs img {
        height: 70px;
        object-fit: contain;
        padding: 6px;
    }

    .product-thumbs .swiper-slide {
        height: auto;
    }

    .product-info {
        position: static;
    }

}


.product-top .btn-outline{

    background: transparent;

    color: var(--color-primary);

    border: 2px solid var(--color-primary);

}

.product-top .btn-outline:hover{

    background: var(--color-primary);

    color: #fff;

}