/* 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);}

/* PRODUCT */
.product {padding-block: 25px 16px; --_c-light-50: #eee; --_c-light-100: #dedbd3; --_c-light-200: #c9c9c9; --_c-heading: #525D63; --_c-gray-drk: #5a5a5a;}
.product .head {text-align: center; margin-bottom: 36px;}
.product .head > :first-child {font-size: calc(var(--fs-md, 24px) + 2px); color: var(--_c-heading); margin-bottom: 20px;}
.product .head .custom__scroll {max-height: 75px;}
.product .head :where(ul, ol) {margin-bottom: 12px;}
.product .head li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.product .head li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}
.product .wrapper {display: grid; grid-template-columns: minmax(275px , 306px) minmax(500px , 636px) minmax(275px , 306px) ; gap:0 24px;}
.product .details {grid-row: 1 / 2; width: fit-content; display: flex; flex-direction: column; padding: 15px; border: 1px solid #dedbd3; margin-bottom: 20px;}
.product .details > :first-child {font-size: 24px; color: #ef233c; padding-bottom: 10px; border-bottom: 1px solid #dedbd3; margin-bottom: 8px;}
.product .details li:not(:last-child) {padding-bottom: 8px; border-bottom: 1px solid #dedbd3; margin-bottom: 8px;}
.product .details > ul {margin-bottom: auto;}
.product .details > img {margin-block: 10px 20px;}
.product .details > a {color: #d5001a; margin-inline: auto;}
.product .details > a strong {font-size: var(--fs-sm, 18px); color: #212529; margin-left: 4px;}
.product .categories  {grid-row: 2 / 3;}
.product .categories > :first-child {display: block; padding: 12px 10px; border-bottom: solid 2px #c9c9c9; border-radius: 3px; background:#eee;}
.product .showcase {grid-row: 1 / 2;}
.product .showcase .images {display: flex; align-items: center; justify-content: space-evenly; gap: 10px; margin-bottom: 30px;}
.product .showcase .images img {width: 100%; height: 104px; border: 1px solid #eee; object-fit: contain;}
.product .showcase .images button.active img {border-color: var(--c-primary);}
.product .showcase .carousel a {width: 100%;}
.product .showcase .carousel img {width: 100%; height: 360px; object-fit: contain;}
.product .content {grid-row: 2 / 3; max-height: 600px;}
.product .content :where(h2,h3,h4,h5,h6) {text-align: justify; color: var(--_c-heading);}
.product .content :where(h2,h3) {margin-bottom: 10px;}
.product .content h2 {font-size: var(--fs-md, 24px);}
.product .content :where(p, ul) {margin-bottom: 15px;}
.product .content p {text-align: justify;}
.product .content :where(ul, ol) {list-style-position: inside; padding-left: 25px; margin-bottom: 12px;}
.product .content li[data-list="bullet"] {list-style: disc;}
.product .content li[data-list="ordered"] {list-style: decimal;}
.product .quote-form {grid-row: 1 / 3;}
.product .quote-form > a {margin-inline: auto; background:linear-gradient(#eb0000, #a70000 ); padding: 10px; font-size: 20px; height: 50px; color: #fff; margin-bottom: 20px;}
.product .categories {background-color: var(--_c-light-50); padding-right: 0;}
.product .categories > :first-child {display: block; font-family: var(--ff-secondary); padding: 12px 10px; border-bottom: 2px solid var(--_c-light-200); border-radius: 3px;}
.product .categories li {padding: 9px 10px; background: linear-gradient(#fff, #e9e9e9);}
.product .categories li a {font-size: var(--fs-xs, 14px); font-weight: 600; color: var(--_c-gray-drk);}
.product .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; left:0;}  
.product .modal #close-btn {position: absolute; top: 2%; right: 2%; font-size: 40px; font-weight: 600;}

table {width: 100%; border-spacing: 0; margin-block: 15px;}
table tr {display: grid; grid-template-columns: 25% 30% 1fr;}
table thead :is(th, td),
table tbody tr:not(:last-of-type) :is(th, td) {border-bottom: none;}
table :is(th, td) {display: flex; align-items: center; line-height: 1.3; padding: 6px 8px; border: 1px solid #000; word-break: break-word;}
table :is(th, td):not(:nth-of-type(2n+3)) {border-right: none;}
table th {justify-content: center; padding: 10px;}
table tbody tr > td:first-of-type {font-weight: 700;}

/* MEDIA QUERIES */
@media only screen and (max-width: 1200px) {
    .product .wrapper {grid-template-columns: 30% 1fr; gap: 20px;}
    .product .wrapper > * {grid-area: auto;}
    .product .details {grid-area: 1 / 1 / 2 / 2; margin: 0;}
    .product .showcase {grid-area: 1 / 2 / 2 / 3; gap: 15px; display: flex; align-items: center;}
    .product .quote-form {grid-area: 2 / 1 / 3 / 2; margin: 0;}
    .product .content {grid-area: 2 / 2 / 3 / 3; max-height: 936px;}
    .product .showcase .carousel {width: 100%;}
    .product .showcase .carousel img {height: 430px;}
    .product .showcase .images {flex-direction: column; margin: 0;}
    .product .showcase .images img {height: 75px;}
    .product .categories {display: none;}
}

@media only screen and (max-width: 991px) {
    .product .wrapper {grid-template-columns: 35% 1fr;}
    .product .showcase {display: block;}
    .product .showcase .carousel img {height: 415px;}
    .product .showcase .images {flex-direction: row;}
}

@media only screen and (max-width: 767px) {
    .product .wrapper {grid-template-columns: 1fr;}
    .product .wrapper > * {grid-area: auto; margin-inline: auto;}
    .product .showcase {order: 1;}
    .product .quote-form {order: 2;}
    .product .details {order: 3; width: 100%; max-width: 568px;}
    .product .details > img {margin-inline: auto;}
    .product .content {order: 4; max-width: 568px;}
}

@media only screen and (max-width: 575px) {
    .product .head > :first-child {margin-bottom: 10px;}
    .product .wrapper > * {width: 100%;}
    .product .details > a {margin: 0;}
    .product .showcase .carousel img {height: 360px;}
    .product .modal {display: none !important;}
}

@media only screen and (max-width: 475px) {
    .product .showcase .images {justify-content: center;}
}