/* ==========================================
   Стрелки модальной галереи
========================================== */

.modal-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.88);

    color:#444;

    font-size:34px;

    line-height:54px;

    text-align:center;

    cursor:pointer;

    user-select:none;

    transition:.2s;

    z-index:20;

    box-shadow:0 3px 12px rgba(0,0,0,.18);

}

.modal-arrow:hover{

    background:#fff;

    color:#d00000;

    transform:translateY(-50%) scale(1.08);

}

#modalPrev{

    left:30px;

}

#modalNext{

    right:30px;

}

@media(max-width:700px){

    .modal-arrow{

        width:42px;

        height:42px;

        line-height:42px;

        font-size:28px;

    }

    #modalPrev{

        left:12px;

    }

    #modalNext{

        right:12px;

    }

}

/* =====================================
   PRODUCT CARD GRID
===================================== */


.product-card{

    display:grid;

    grid-template-columns:120px 1fr 420px;

    gap:24px;

    background:#fff;

    padding:30px;

    margin:30px auto;

    border-radius:10px;

}



.product-thumbs img{

    width:100%;

    margin-bottom:10px;

    border:2px solid transparent;

    cursor:pointer;

}



.product-thumbs img.active{

    opacity:.55;

    border-color:#c00;

}



.product-gallery-main img{

    width:100%;

    display:block;

}



.product-info h1{

    margin-top:0;

}


/* ===============================
   MODAL GALLERY
================================ */


#modal{

    display:none;

    position:fixed;

    inset:0;

    background:#fff;

    z-index:9999;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


#mimg{

    max-width:92vw;

    max-height:78vh;

    object-fit:contain;

}


.modal-thumbs{

    display:flex;

    gap:12px;

    margin-top:30px;

    justify-content:center;

}


.modal-thumbs img{

    width:95px;

    height:95px;

    object-fit:cover;

    border:1px solid #ddd;

    cursor:pointer;

}


#close{

    position:absolute;

    top:20px;

    right:30px;

    color:#bfbfbf;

    font-size:54px;

    cursor:pointer;

}


/* =====================================
   PRODUCT LABELS
===================================== */


.product-labels{

    display:flex;

    gap:12px;

    align-items:center;

    margin-bottom:18px;

}



.product-label{

    display:inline-block;

    padding:5px 10px;

    border-radius:4px;

    font-family:Arial,sans-serif;

    font-size:13px;

    line-height:1;

}



.product-label.new{

    background:#d32f2f;

    color:#fff;

}



.product-label.info{

    background:#f4f4f4;

    color:#333;

}


/* =====================================
   PRODUCT TABS
===================================== */


.product-tabs{

    background:#fff;

    max-width:1200px;

    margin:20px auto;

    border-radius:10px;

}



.product-tab-buttons{

    display:flex;

    border-bottom:1px solid #ddd;

}



.product-tab-buttons button{

    padding:16px 24px;

    border:0;

    background:#fff;

    cursor:pointer;

    font-family:Arial,sans-serif;

}



.product-tab-buttons button.active{

    border-bottom:3px solid #c00;

    font-weight:bold;

}



.product-tab{

    display:none;

    padding:24px;

}



.product-tab.active{

    display:block;

}