/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.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 Your Style */
.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 {height: 100%; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; color: var(--c-tertiary); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.choose .style_detail div {width: 100%; padding: 10px; background-color: var(--_c-light-100);}
.choose .style_detail div :first-child {display: block; font-size: calc(var(--fs-md, 24px) - 2px); line-height: 30px; margin-bottom: 8px;}
.choose .style_detail:hover div :first-child {color: var(--c-secondary);}
.choose .style_detail img {width: 100%; height: 269px; object-fit: contain;}
.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);}

/* Choose Details */
.choose_block {padding-block: 40px;}
.choose_block .block_title h2 {margin-bottom: 10px; font-size: calc(var(--fs-md, 24px) + 2px);}
.choose_block .block_title :where(h3, h4, h5, h6) {margin-bottom: 5px;}
.choose_block .block_title p:not(:last-child) {margin-bottom: 30px;}

/* Media Queries */
@media only screen and (max-width: 991px) {
    .choose .product_style {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
}
@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 {width: auto; height: auto;}
}
@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;}
}