.breadcrumb {padding-block: 12px; margin-bottom: 12px;}
.breadcrumb ul {display: flex; align-items: center;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:first-child):before {content: ">"; color:var(--c-neutral-gry) ;  margin-inline: 5px; font-size: 22px;}
.breadcrumb li:nth-of-type(n+1):nth-of-type(-n+2) a {display: flex; align-items: center; gap: 5px; color: var(--c-primary); font-weight: 600;}
.breadcrumb li:nth-of-type(n+1):nth-of-type(-n+2) a:hover {color: var(--c-primary-drk);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb ul > :last-child {color: #000; font-weight: 600;}

.main {padding-block: 0 40px;}
.main .container .head{text-align:center;padding-bottom: 35px;}
.main .container .head  > :first-child {padding:10px}
.main .wrapper {display: grid; grid-template-columns: minmax(550px, 670px) minmax(375px, 502px); gap: 26px;}
.main .wrapper .product-img {display: flex; flex-direction: column;  gap: 20px;} 
.main .gallery {display: flex; align-items: flex-start; gap: 13px; height: fit-content;}
.main .gallery a {width: 100%;}
.main .gallery  > :first-child img {height: 404px; object-fit: cover;}
.main .gallery div > a {box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 12%); border-radius: 12px;}
.main .gallery div img {height: 90px; object-fit: cover; border-radius: 12px;}
.main .gallery div {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px;}
.modal {position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0 0 0 / 0.9); z-index: 300;}
.modal .modal-content {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.modal img {width: 40%;}
.modal :where(.prev, .next) {position: absolute; top: 50%; width: auto; font-size: 20px; font-weight: 700; background-color: var(--c-primary); color: #fff; padding: 16px; border-radius: 0 3px 3px 0; margin-top: -22px; cursor: pointer;}
.modal .next {right: 0; border-radius: 3px 0 0 3px;}
.modal .close {position: absolute; width: 50px; height: 50px; top: 15px; right: 35px; display: flex; justify-content: center; align-items: center; font-size: 35px; font-weight: 700; border-radius: 6px; color: #fff; background-color: var(--c-primary);}
.modal :where(.close:hover, .close:focus) {color: #bbb; text-decoration: none;}
:where(.main, .main *) {transition: var(--transition);}

.g-recaptcha {margin-left: 0;}

.details {padding-bottom: 30px;}
.details .tab-btn {display: flex; gap: 27px; margin-bottom:12px;}
.details .tab-btn button {color: var(--c-neutral-gry); font-size: var(--fs-sm); font-weight: 600; padding-bottom: 6px; border-bottom: 4px solid transparent ;}
.details  button:hover {color: var(--c-primary);}
.details  button.active {color: #000; font-weight: 600; border-bottom: 3px solid var(--c-primary);}
.details .content div[data-tab][aria-hidden="true"] {display: none;}
.details .content div :where(h1,h2,h3,h4,h5,h6,p) {margin-bottom: 20px;}
.details .content div :where(h1,h2,h3,h4,h5,h6) {line-height: 1.3;}
.details .content div h1 {font-size: var(--fs-xl, 34px);}
.details .content div h2 {font-size: var(--fs-lg, 30px);}
.details .content div p {color: #000; font-size: var(--fs-sm, 18px); line-height: 28.8px;}
.details .content div :where(h3, h4) {font-size: var(--fs-md, 24px);}
.details .content div :where(h5, h6) {font-size: var(--fs-sm, 18px);}
.details .content :where(ul, ol) {margin-block: 10spx;}
.details .content li {color: #000; font-size: var(--fs-sm, 18px); font-weight: 600; margin-bottom: 4px;}
.details .content li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.details .content li[data-list="decimal"] {list-style: decimal; list-style-position: inside;}
.details .content div p a {font-size: var(--fs-sm, 18px); color: var(--c-primary); display: inline;}
.details .additional :where(ul, ol) {list-style: none;}
.details .additional li {display: flex; align-items: center; gap: 20px; margin-bottom: 0; font-size: var(--fs-xs); color: var(--c-neutral-blk); border-bottom: 1px solid rgba(0, 0, 0, .1); border-inline: 1px solid rgba(0, 0, 0, .1);} 
.details .additional li:first-of-type {border-top: 1px solid rgba(0, 0, 0, .1); border-inline: 1px solid rgba(0, 0, 0, .1);}
.details .additional li * {position: relative; background: var(--c-primary); display: block; text-align: end; font-family: var(--ff-secondary); min-width: 300px; font-size: var(--fs-base); color: #fff; padding: 10px;}
.details .additional li span {display: none;}

/* ___ FAQ ___ */
faq {padding-bottom: 50px;}
.faq .title {background-color: var(--c-primary-drk); padding: 16px 24px; margin-bottom: 6px;}
.faq .title * {font-size: calc(var(--fs-sm, 18px) + 2px) !important; font-weight: 400; color: #fff; margin: 0 !important;}
.faq .accord-title {width: 100%; font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) - 1px) !important; font-weight: 500; text-align: left; background-color: var(--c-primary); color: #fff; padding: 16px 24px; margin-bottom: 6px;}
.faq .accord-title:hover {background-color: var(--c-primary-drk);}
.faq .accord-block {display: none; background-color: #cecece; padding: 10px 15px; margin-bottom: 6px;}
.faq .accord.show .accord-block {display: block;}
.faq .accord-block * {font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) - 1px) !important; font-weight: 500; color: #000;}
.faq .accord-block p {margin: 0; !important;}

.related-products {display: grid; grid-template-columns: repeat(4, 1fr); gap: 54px 40px; margin-top: 54px;}
.related-products .product {width: 100%; background-color: #fff; border-radius: 12px;}
.related-products .product {box-shadow: var(--shadow-sm);}
.related-products .product img {width: 100%; height: 176px; object-fit: cover; background-color: transparent; border-radius: 12px 12px 0 0;}
.related-products .product > :nth-child(2) {display: block; font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 500; line-height: 31px; text-align: center; color: var(--c-neutral-drk); padding: 10px; margin: 0px;}

@media only screen and (max-width: 1200px) {
    .main .gallery > :first-child img {width: 100%; max-width: 465px;}
    .main .gallery div img {max-width: 120px;}
    .related-products {gap: 40px;}
    .related-products .product > :nth-child(2) {padding: 18px;}
}

@media only screen and (max-width: 991px) {
    .main .wrapper {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .main .gallery {flex-direction: column; justify-content: center; width: 100%;}
    .main .gallery div {flex-direction: row; gap: 10px;}
    .main .gallery > :first-child img {max-width: 100%; height: 370px;}
    .main .gallery div img {max-width: 100%;}
    .main .wrapper .product-img {align-items: center;}
    .modal :where(.prev, .next) {padding: 12px;}
    .modal .close {width: 40px; height: 40px;}
    .related-products {grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px;}
}

@media only screen and (max-width: 767px) {
    .main .wrapper {grid-template-columns: 1fr;}
    .main .gallery {width: fit-content;}
    .main .gallery a {width: 100%;}
    .details .content div :where(h1,h2,h3,h4,h5,h6,p) {margin-bottom: 12px;}
    .details .additional li * {min-width: 200px;}
    .related-products {gap: 20px;}
    .related-products .product > :nth-child(2) {padding: 12px;}
    .related-products .product img {height: 150px;}
}

@media only screen and (max-width: 575px) {
    .main .gallery {flex-direction: column;} 
    .main .gallery div {flex-direction: row;}
    .details {padding-bottom: 20px;} 
    .details .content .scroll {max-height: 440px;}
    .details .content div :where(h1,h2,h3,h4,h5,h6) {line-height: 1.1;}
    .details .content div :where(h1,h2,h3,h4,h5,h6,p) {margin-bottom: 8px;}
    .details .additional li {flex-direction: column; padding-bottom: 10px; text-align: center; gap: 10px;}
    .details .additional li * {min-width: 100%; text-align: center;}
    .modal .close {width: 30px; height: 30px; font-size: 24px;}
    .modal :where(.prev, .next) {padding: 10px; font-size: 14px;}
    .faq {padding-bottom: 20px;}
    .faq .title,
    .faq .accord-title ,
    .faq .accord-block {padding: 8px 12px;}
    .related-products {grid-template-columns: repeat(2, 1fr); margin-top: 24px;}
    .related-products .product > :nth-child(2) {padding: 8px;}
}

@media only screen and (max-width: 475px) {
    .breadcrumb {margin-bottom: 0;}
    .main .gallery div  {flex-wrap: wrap;}
    .main .gallery div > * {width: calc(50% - 7px) ;}
    .main .gallery img {width: 100%;}
    .main {padding-block: 0 20px;}
    .details .content div p {line-height: 23px;}
    .details .content li {margin-bottom: 8px;}
    .modal .modal-img {max-width: 70%;}
    .main .gallery div img  {width: 100%; height:140px;}
    .details .additional li {margin-bottom: 0;}
    .related-products {grid-template-columns: 1fr;}
    .related-products .product img {height: auto;}
}

@media only screen and (max-width: 360px) {
    .main .gallery > :first-child img {height: auto;}
    .main .gallery div img  {height: 80px;}
}