/*  Breadcrum */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #6c757d;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/*  choose */
.choose {padding-block: 40px 20px; --_c-light-100: #f1f1f1;}
.choose .head {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 40px;}
.choose .head > :first-child {font-size: calc(var(--fs-xl, 36px) - 1px);}
.choose p > a {display: inline-block; color: var(--c-tertiary);}
.choose .product_style {display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; gap: 30px;}
.choose .style_detail {text-align: center; color: var(--c-tertiary); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.choose .style_detail div {padding: 10px; background-color: var(--_c-light-100);}
.choose .style_detail img { height: 296px; object-fit: contain;}
.choose .style_detail div :first-child {display: flex;justify-content:center; align-items:center;font-size: calc(var(--fs-md, 24px) - 2px);line-height: 30px; max-height: 60px; overflow-y: auto;height: 75px;}
.choose .style_detail:hover div :first-child {color: var(--c-secondary);}
.choose #loader{display: flex; margin-inline: auto;}
.modal {position: fixed; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0 0 0 / 0.3); z-index: 600;}  
.modal #close-btn {position: absolute; top: 2%; right: 2%; font-size: 40px; font-weight: 600;}
:where(.choose, .choose :where(.head, .head *, .product_style, .style_detail, .style_detail *, .modal, .modal *)) {transition: var(--transition);}

/* {Modal} */
.modal {width: 100%; height: 100%; position: fixed; top: 0; display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.733); padding-inline: 20px; margin-top: -1px; z-index: 100; animation: zoom 0.3s ease-in-out;}
.modal button:hover svg {fill: var(--c-light);}
.modal #close {position: absolute; top: 25px; right: 30px;}
.modal img {width: 25%; border-radius: 10px;}
:where(.modal, .modal :where(button, svg, img)) {transition: var(--transition);}
@keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

@media only screen and (max-width: 1200px) {
.modal img {max-width: 35%;}
}

@media only screen and (max-width: 991px) {
.choose .product_style {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.modal img {max-width: 45%; width:100%} 

}

@media only screen and (max-width: 767px) {
.choose {padding-block: 20px;}
.choose .head {grid-template-columns:1fr; gap: 10px;}
.choose .product_style {grid-template-columns: repeat(2, 1fr);}
.modal img {max-width:60%; width:100%} 
}

@media only screen and (max-width: 575px) {
.modal {padding-inline: 10px;}
.modal button svg {width: 24px; height: 24px;}
.modal #close {top: 15px; right: 20px;}
}

@media only screen and (max-width: 475px) {
.choose_block {padding-top: 20px;}
.choose .head {margin-bottom: 20px;}
.choose .product_style {grid-template-columns: 1fr;}
.choose_block .block_title h2 {margin-bottom: 5px;}
.choose_block .block_title p:not(:last-child) {margin-bottom: 15px;}
.modal img {max-width: 75%; width:100%} 
}