﻿h1, h2, h3, h4 { display: flex; align-items: center; gap: 9px; }

.product-header { position: fixed; left: 0; top: 0; right: 0; width: calc(100% - 40px); justify-content: space-between; align-items: center; margin: 18px 16px; display: none; }
.product-header a.img { display: flex; }
.product-header a.img img { width: 40px; height: 40px; }
.product-header a.back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background-color: white; }

.grid { margin-top: 20px; }

.images { display: flex; gap: 10px; }
.image { max-height: 520px; overflow: hidden; flex: 1; margin-bottom: 10px; min-height: 200px; display: flex; justify-content: center; align-items: center; }
.image img { max-width: 100%; max-height: 100%; object-fit: cover; }

.info { background: white; border-radius: 5px; padding: 30px; position: relative; }
.info h2 { margin: 0; padding: 0; font-size: 18px; color: #121212; font-weight: 800; border-bottom: 1px solid #A4A4A4; padding-bottom: 7px; }
.info p { font-size: 15px; font-weight: 400; color: #676D7C; line-height: 28px; margin-bottom: 40px; }

.bar { height: 25px; background-image: url('/images/dots.svg'); background-repeat: repeat-x; border: 3px solid #E30D29; margin-top: 15px; background-position: right; }

.related-header { color: #121212; font-size: 16px; margin-top: 25px; font-weight: 600; }
.related-title { color: #121212; font-size: 14px; margin-top: 8px; font-weight: 800; }

.related { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.related:hover { text-decoration: none; }
.related .image { flex: 1; }

@media (max-width: 640px) {
    header { display: none; }

    .product-header { display: flex; }

    .image:not(.main) { display: none; }
    .main-content, .grid, .grid > *, header { padding: 0; margin: 0; }
    .info { margin-top: -50px; border-top-left-radius: 25px; border-top-right-radius: 25px; }
    .bar { display: none; }
    .related-header, .related { display: none; }

    .info h2 { border-bottom: none; }
}

.price { font-size: 20px; color: #A2C11C; font-weight: 700; }
.count { background-color: #F7F7F7; border-radius: 5px; display: inline-flex; align-items: center; }
.count .plus, .count .minus { text-align: center; width: 38px; padding: 8px 0px; cursor: pointer; }

.btn-add-to-cart { padding: 16px; font-size: 16px; margin-top: 12px; }