/* ### BANNER ### */
.banner {
    background-color: var(--c-secondary-subtle);
    padding-block: 1rem;
}

.banner .wrapper {
    display: grid;
    place-items: center;
    gap: 1rem;
    transition: gap var(--trans-3);
}

.banner .main {
    max-width: 38rem;
    padding-block: 1rem;
    transition: max-width var(--trans-3), 
                padding-block var(--trans-5);
}

.banner .main > :first-child {
    font-size: var(--_fs-xl-add, 2.25rem);
    line-height: calc(var(--lh-xl) * 1.125);
    margin-bottom: 1rem;
    transition: max-width var(--trans-3);
}

.banner .main p {
    max-height: 5.75rem;
    margin-bottom: 1rem;
    transition: var(--trans-3);
}

.banner .main :where(ul, ol) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.375rem;
    margin-block: 1rem;
    transition: gap var(--trans-3);
}

.banner .main li {
    position: relative;
    color: var(--c-text);
    text-wrap: nowrap;
    padding-left: 1rem;
    transition: padding-left var(--trans-3);
}

.banner .main li::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.625rem;
    height: 0.625rem;
    background: no-repeat center/cover url('../images/icons/check-round.png');
    margin-block: auto;
    transition: width var(--trans-3),
                height var(--trans-3);
}

.banner .shell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    transition: gap var(--trans-3);
}

.banner .shell .block {
    position: relative;
    width: 100%;
}

.banner .instant-query {
    position: absolute;
    inset: calc(100% + 0.5rem) 0 0;
    width: max-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #fff;
    padding: 0.75rem;
    border-radius: var(--br-base, 5px);
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    box-shadow: var(--shdw-drk);
    transition: gap var(--trans-3),
                padding var(--trans-3),
                opacity var(--trans-5),
                visibility var(--trans-5);
}

.banner .instant-query.show {
    opacity: 1;
    visibility: visible;
}

.banner .instant-query :is(input, textarea) {
    display: block;
    padding-block: 0.375rem;
    border: 1px solid var(--c-border);
    border-radius: var(--br-sm, 2px);
}

.banner .instant-query .captcha label {
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 500;
    color: var(--c-dark);
}

.banner .instant-query .captcha input {
    max-width: 4.75rem;
}

.banner .instant-query .group {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.625rem;
}

.banner .instant-query .btn {
    line-height: 1;
}

.banner .shell .btn {
    max-width: 100%;
    font-size: var(--fs-base, 0.875rem);
}

.banner .image img {
    width: 100%;
}

/* ### CATEGORIES ### */
.categories {
    padding-top: 2.5rem;
    transition: var(--trans-3);
}

.categories .wrapper {
    display: grid;
    gap: 1.25rem;
    transition: gap var(--trans-3);
}

.categories .all-category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
}

.categories .label {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-sm, 1rem);
    font-weight: 600;
    color: var(--c-dark);
    transition: gap var(--trans-3), 
                font-size var(--trans-3),
                background-color var(--trans-3),
                color var(--trans-3) 
                padding var(--trans-3);
}

.categories .label img {
    filter: var(--fltr-white) invert(1);
    transition: var(--trans-3);
}

.categories .dropdown {  
    position: relative;
}

.categories .dropdown .dropdown-btn {
    position: relative;
    min-width: 11rem;
    padding: 0.375rem 1.25rem 0.375rem 0.5rem;
    border: 1px solid var(--c-primary);
    border-radius: var(--br-sm, 2px);
    transition: min-width var(--trans-3),
                padding var(--trans-3);
}

.categories .dropdown-btn::before {
    content: '';
    position: absolute;
    inset: 0 0.5rem 0 auto;
    width: 0.375rem;
    height: 0.25rem;
    background: no-repeat center/cover url('../images/icons/caret-down.png');
    margin-block: auto;
    transition: right var(--trans-3);
}

.categories .dropdown-btn span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
}

.categories .category {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-sm, 1rem);
    font-weight: 500;
    line-height: var(--lh-md);
    text-align: left;
    color: var(--c-dark); 
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--c-border);
    transition: gap var(--trans-3),
                background-color var(--trans-3),
                color var(--trans-3),
                padding var(--trans-3),
                border-radius var(--trans-3);
}

.categories .category:hover {
    background-color: var(--c-secondary-subtle);
    color: var(--c-primary);
}

.categories .shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--c-primary);
    border-radius: 0 0 var(--br-sm, 2px) var(--br-sm, 2px);
}

.categories .category.less {
    height: 100%;
    border-bottom: 1px solid #fff;
}

.categories .category.less:hover {
    background: none;
}

.categories .category.less:hover .icon {
    background-color: var(--c-secondary);
}

.categories .category:where(.more, .less) {
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    border-radius: 0;
}

.categories .category img {
    transition: width var(--trans-3);
}

.categories .category:where(.more, .less) .icon {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: var(--br-sm, 2px);
    transform: rotate(45deg);
    transition: width var(--trans-3),
                height var(--trans-3),
                background-color var(--trans-3),
                border-radius var(--trans-3);
}

.categories .category.more:hover .icon {
    background-color: var(--c-dark);
}

.categories .category:where(.more, .less) img {
    filter: var(--fltr-primary);
    transform: rotate(-45deg);
}

.categories .category.more:hover img {
    filter: var(--fltr-white);
}

.categories .dropdown-menu {
    position: absolute;
    inset: 100% 0 0;
    height: fit-content;
    display: none;
    background-color: #fff;
    border: 1px solid var(--c-border);
    border-radius: 0 0 var(--br-sm, 2px) var(--br-sm, 2px);
    z-index: 3;
}

.categories .dropdown-menu.show {
    display: grid;
}

.categories .products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-content: start;
    gap: 1rem;
    transition: gap var(--trans-3);
}

.categories .product {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.categories .product img {
    width: 100%;
    height: 100%;
    max-height: 10rem;
    object-fit: cover;
    border-radius: var(--br-base, 5px);
    transition: max-height var(--trans-3);
}

.categories .product > :nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-align: center;
    color: var(--c-dark);
    padding: 0.75rem 1rem;
    border-radius: var(--br-base, 5px);
    box-shadow: var(--shdw-primary);
    margin-top: 0.625rem;
    transition: height var(--trans-3),
                line-height var(--trans-3),
                background-color var(--trans-3),
                color var(--trans-3), 
                padding var(--trans-3),
                margin-top var(--trans-3);
}

.categories .product:hover > :nth-child(2) {
    background-color: var(--c-primary);
    color: #fff;
}

.categories .products .btn {
    grid-column: 1 / -1;
    max-width: 100%;
    margin-inline: auto;
}

/* ### INFORMATION ### */
.information {
    padding-block: 2rem;
    transition: var(--trans-3);
}

.information .wrapper {
    padding: 1.75rem 0 1.75rem 0.875rem;
    border: 1px solid var(--c-border);
    border-radius: var(--br-sm, 2px);
    box-shadow: var(--shdw-primary);
    transition: var(--trans-3);
}

.information .content {
    max-height: 30rem;
    transition: var(--trans-3);
}

.information .content > :first-child {
    font-size: var(--fs-xl, 2rem);
    margin-bottom: 0.625rem;
    transition: var(--trans-3);
}

.information .content h2 {
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.information .content :where(h3, h4, h5, h6) {
    font-size: var(--fs-base, 0.875rem);
    font-weight: 500;
    color: var(--c-dark);
    line-height: var(--lh-md);
    margin-bottom: 0.75rem;
    transition: margin-bottom var(--trans-3);
}

.information .content h3 {
    font-size: var(--fs-sm, 1rem);
    transition: var(--trans-3);
}

.information .content p {
    margin-bottom: 0.75rem;
}

.information .content :where(ul, ol) {
    margin-bottom: 1rem;
}

.information .content ol {
    counter-reset: list-index;
}

.information .content li {
    position: relative;
    font-weight: 500;
    color: var(--c-text);
    padding-left: 1.125rem;
    margin-bottom: 0.375rem;
    transition: padding-left var(--trans-3), 
                margin-bottom var(--trans-3);
}

.information .content li::before {
    content: '';
    position: absolute;
    inset: 0.25rem auto 0 0;
    width: 0.75rem;
    height: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--fs-2xs, 0.75rem) - 0.125rem);
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    transition: top var(--trans0-3),
                width var(--trans-3),
                height var(--trans-3),
                padding-left var(--trans-3);
}

.information .content ul li::before {
    background: no-repeat center/cover url('../images/icons/check-round.png');
}

.information .content ol li::before {
    content: counter(list-index);
    counter-increment: list-index;
    background: var(--c-primary);
}

.information .content table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 1rem;
    transition: margin-bottom var(--trans-3);
}

.information .content :where(th, td) {
    font-weight: 500;
    text-align: left;
    border: 1px solid var(--c-primary);
    padding: 0.875rem 0.5rem;
    transition: padding var(--trans-3);
}

.information .content th {
    font-size: var(--fs-sm, 1rem);
    color: var(--c-primary);
}

.information .content td:first-of-type {
    color: var(--c-dark);
}

.information .content td:nth-of-type(n+2) {
    color: var(--c-text);
}

.information .content :last-child:not(table) {
    margin-bottom: 0;
}

/* ### FAQ ### */
.faq {
    padding-bottom: 2.25rem;
    transition: var(--trans-3);
}

.faq .head {
    margin: 0 auto 1.25rem;
    transition: var(--trans-3);
}

.faq .head > :first-child {
    font-size: var(--fs-xl, 2rem);
    margin-bottom: 0.5rem;
    transition: margin-bottom var(--trans-3);
}

.faq .wrapper {
    max-width: 38rem;
    display: grid;
    align-items: center;
    gap: 1.25rem;
    margin-inline: auto;
    transition: max-width var(--trans-3), 
                gap var(--trans-3);
}

.faq .image img {
    width: 100%;
    height: 100%;
    max-height: 26.875rem;
    object-fit: cover;
    border-radius: var(--br-sm, 2px);
    transition: max-width var(--trans-3),
                border-radius var(--trans-3);
}

.faq .accordions {
    display: grid;
    place-content: start center;
    gap: 1rem;
    transition: gap var(--trans-3);
}

.faq .accord[data-expanded="true"] {
    border: 1px solid var(--c-primary);
    border-radius: var(--br-sm, 2px)
                   var(--br-sm, 2px) 
                   var(--br-base, 5px) 
                   var(--br-base, 5px);
    box-shadow: var(--shdw-primary);
    transition: border-radius var(--trans-3),
                box-shadow var(--trans-3);
}

.faq .accord-title {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-sm, 1rem);
    font-weight: 500;
    text-align: left;
    line-height: var(--lh-sm);
    color: var(--c-text);
    padding: 0.75rem 2.25rem 0.75rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--br-sm, 2px);
    transition: gap var(--trans-3),
                background-color var(--trans-3),
                color var(--trans-3),
                padding var(--trans-3);
}

.faq .accord-title:hover {
    background-color: var(--c-secondary-subtle);
    color: var(--c-primary);
}

.faq .accord[data-expanded="true"] .accord-title {
    border-top: none;
}

.faq .accord-title::before,
.faq .accord-title::after {
    content: '';
    position: absolute;
    inset: 0 0.625rem 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--c-primary);
    border-radius: 50%;
    margin-block: auto;
    transition: inset var(--trans-3),
                width var(--trans-3),
                height var(--trans-3),
                background-color var(--trans-3),
                transform var(--trans-3);
}

.faq .accord-title::after {
    background: no-repeat center/0.5rem url(../images/icons/chevron-down.png);
}

.faq .accord-title.active {
    font-weight: 600;
    background-color: var(--c-primary);
    color: #fff;
}

.faq .accord-title.active::before {
    background-color: #fff;

}
.faq .accord-title.active::after {
    filter: var(--fltr-primary);
    transform: rotate(180deg);
}

.faq .accord .block {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transform: translateY(-0.625rem);
    transition: var(--trans-3);
}

.faq .accord[data-expanded="true"] .block {
    max-height: 100vh;
    opacity: 1;
    padding: 1rem 0.625rem;
    overflow: visible;
    transform: translateY(0);
}

.faq .block :where(p, ul, ol) {
    margin-bottom: 0.5rem;
    transition: var(--trans-3);
}

.faq .block ul {
    margin-left: 1.25rem;
}

.faq .block ol {
    margin-left: 1rem;
}

.faq .block li {
    color: var(--c-text);
}

.faq .block ul li {
    list-style: disc;
}

.faq .block ol li {
    list-style: decimal;
}

.faq .block :last-child {
    margin-bottom: 0;
}

.faq .btn {
    max-width: 100%;
    margin: 1.25rem auto 0;
}


/* ~~~~~ MEDIA QUERIES ~~~~~ */
/* ===== MOBILE (Potrait) - Small : 384px ===== */
@media screen and (min-width: 24rem) {
    /* {{{ Banner }}} */
    .banner picture img {
        object-position: center;
    }

    .banner .shell .btn {
        max-width: fit-content;
    }

    /* {{{ Categories }}} */
    .categories .dropdown .dropdown-btn {
        min-width: 12rem;
    }
    
    .categories .product img {
        max-height: 11.75rem;
    }
}

/* ===== MOBILE (Potrait) : 480px ===== */
@media screen and (min-width: 30rem) {
    /* {{{ Banner }}} */
    .banner .main > :first-child {
        max-width: 90%;
    }

    .banner .shell {
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 1.25rem;
    }

    .banner .shell .block {
        width: fit-content;
    }

    .banner .instant-query {
        gap: 0.875rem;
        padding: 1.25rem;
    }

    .banner .instant-query .captcha input {
        max-width: 5.375rem;
    }

    /* {{{ Categories }}} */
    .categories .dropdown .dropdown-btn {
        min-width: 14.25rem;
    }
    
    .categories .products {
        gap: 1.25rem;
    }
    
    .categories .product img {
        max-height: 14rem;
    }

    .categories .products .btn {
        max-width: 16.25rem;
    }

    /* {{{ Information }}} */
    .information .wrapper {
        padding: 2rem 0 2rem 1.25rem;
    }

    .information .content {
        max-height: 31rem;
        padding-right: 1.25rem;
    }

    /* {{{ FAQ }}} */
    .faq .btn {
        max-width: 13rem;
        margin: 1.5rem auto 0;
    }
}

/* ===== MOBILE (Lanscape) : 608px ===== */
@media screen and (min-width: 38rem) {
    /* {{{ Banner }}} */
    .banner {
        background-position: center;
        padding-block: 1.25rem;
    }
    
    .banner .main {
        padding-block: 1.25rem;
    }

    .banner .main p {
        max-height: 6.25rem;
        margin-bottom: 1.25rem;
    }

    /* {{{ Categories }}} */
    .categories .wrapper {
        gap: 1.875rem;
    }
    
    .categories .label {
        gap: 0.5rem;
        font-size: var(--fs-md, 1.125rem);
    }

    .categories .label img {
        width: 1.125rem;
    }
    
    .categories .dropdown .dropdown-btn {
        min-width: 16rem;
        padding: 0.5rem 1.5rem 0.5rem 0.75rem;
    }

    .categories .dropdown-btn::before {
        right: 0.75rem;
    }
    
    .categories .category {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    .categories .shell {
        flex-direction: row;
    }

    .categories .category.less {
        width: 3rem;
        border-right: 1px solid #fff;
        border-bottom: none;
    }

    .categories .category.less > :nth-child(2) {
        display: none;
    }
    
    .categories .category:is(.more, .less) {
        gap: 0.625rem;
    }

    .categories .category img {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .categories .category:is(.more, .less) img {
        width: auto;
        height: auto;
    }
    
    .categories .product img {
        max-height: 18rem;
    }
    
    /* {{{ Information }}} */
    .information .content {
        max-height: 31.25rem;
    }
    
    .information .content :is(th, td) {
        padding: 1.125rem 0.75rem;
    }

    /* {{{ FAQ }}} */
    .faq .head {
        margin-bottom: 1.875rem;
    }

    .faq .accord[data-expanded="true"] .block {
        padding: 1.25rem 1rem;
    }
}

/* ===== TABLET (Potrait) : 768px ===== */
@media screen and (min-width: 48rem) {
    /* {{{ Banner }}} */
    .banner .wrapper {
        grid-template-columns: 55% 1fr;
        gap: 1.25rem;
    }
    
    .banner .main {
        max-width: 100%;
    }

    .banner .instant-query {
        inset: 0 0 0 calc(100% + 0.625rem);
        gap: 0.75rem;
        padding: 1rem;
        margin-block: auto;
    }

    /* {{{ Categories }}} */
    .categories {
        padding-top: 3rem;
    }
    
    .categories .products {
        grid-template-columns: repeat(3, 1fr);
    }

    .categories .product img {
        max-height: 16rem;
    }

    /* {{{ Information }}} */
    .information {
        padding-bottom: 3rem;
    }
    
    .information .wrapper {
        padding: 2.5rem 0 2.5rem 1.5rem;
    }

    .information .content {
        padding-right: 1.5rem;
    }
    
    .information .content li::before {
        top: 0.313rem;
    }

    /* {{{ FAQ }}} */
    .faq {
        padding-bottom: 3rem;
    }

    .faq .head {
        text-align: center;
    }
}

/* ===== LAPTOP : 992px ===== */
@media screen and (min-width: 62rem) {
    /* {{{ Banner }}} */
    .banner {
        padding-block: 1.5rem;
    }
    
    .banner .wrapper {
        grid-template-columns: minmax(34rem, 44rem) minmax(24rem, 30rem);
        gap: 1.5rem;
    }
    
    .banner .main {
        padding-block: 1.5rem;
    }
    
    .banner .main > :first-child {
        max-width: 80%;
    }

    .banner .main p {
        margin-bottom: 1.5rem;
    }

    .banner .instant-query :is(input, textarea) {
        border-radius: var(--br-base, 5px);
    }
    
    .banner .instant-query textarea {
        height: 5.375rem;
    }

    .banner .instant-query .captcha input {
        max-width: 7.25rem;
    }

    .banner .main :is(ul, ol) {
        gap:  0.75rem;
    }

    .banner .main li {
        padding-left: 1.375rem;
    }
    
    .banner .main li::before {
        width: 1rem;
        height: 1rem;
    }

    .banner .shell .btn.primary {
        max-width: 11.25rem;
    }

    .banner .shell .btn.transparent {
        max-width: 13rem;
        padding-inline: 0.875rem;
    }

    /* {{{ Categories }}} */
    .categories {
        padding-bottom: 3.75rem;
    }
    
    .categories .wrapper {
        grid-template-columns: 242px 1fr;
        gap: 1.25rem;
    }

    .categories .all-category {
        display: block;
    }

    .categories .label {
        gap: 0.625rem;
        background-color: var(--c-secondary);
        color: var(--c-primary);
        padding: 1rem;
        border-radius: var(--br-base, 5px) var(--br-base, 5px) 0 0;
    }

    .categories .label img {
        width: 1.25rem;
        filter: var(--fltr-primary);
    }
    
    .categories .dropdown .dropdown-btn {
        display: none;
    }
    
    .categories .dropdown-menu {
        position: static;
        display: block;
        border: none;
        box-shadow: var(--shdw-primary);
    }

    .categories .category {
        gap: 0.75rem;
        line-height: var(--lh-sm);
        padding: 1rem;
    }

    .categories .shell {
        border-radius: 0 0 var(--br-base, 5px) var(--br-base, 5px);
    }
    
    .categories .category:is(.more, .less) {
        gap: 0.875rem;
    }

    .categories .category.:is(.more, .less):hover {
        background-color: var(--c-dark);
        color: #fff;
    }

    .categories .category:is(.more, .less) .icon {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: var(--br-base, 5px);
    }

    .categories .category.active {
        background-color: var(--c-primary);
        color: #fff;
        padding-block: 1.125rem;
        border: none;
    }
    
    .categories .category.active:hover {
        background-color: var(--c-dark);
    }

    .categories .category img {
        width: 1.375rem;
        height: 1.375rem;
    }
    
    .categories .category.active img {
        filter: var(--fltr-white);
    }

    .categories :where(.label, .active, .more) span::selection {
        background-color: #fff;
        color: var(--c-primary);
    }
    
    .categories .product > :nth-child(2) {
        height: auto;
        margin-top: 1.25rem;
    }

    .categories .product img {
        max-height: 100%;
    }

    /* {{{ Information }}} */
    .information {
        padding-bottom: 3.75rem;
    }
    
    .information .wrapper {
        padding: 3rem 0 3rem 2rem;
        border-radius: var(--br-base, 5px);
    }
    
    .information .content {
        max-height: 32.75rem;
        padding-right: 2rem;
    }

    .information .content > :first-child {
        margin-bottom: 0.75rem;
    }

    .information .content h3 {
        font-size: var(--fs-md, 1.25rem);
    }

    .information .content :is(h3, h4, h5, h6) {
        margin-bottom: 0.375rem;
    }

    .information .content :is(p, ul, ol, table) {
        margin-bottom: 1.25rem;
    }

    .information .content li {
        padding-left: 1.75rem;
        margin-bottom: 0.625rem;
    }

    .information .content li::before {
        width: 1.125rem;
        height: 1.125rem;
    }

    .information .content ol li::before {
        content: counter(list-index, decimal-leading-zero);
        padding-left: 1px;
    }
    
    .information .content :is(th, td) {
        padding: 1.25rem 1.5rem;
    }

    /* {{{ FAQ }}} */
    .faq {
        padding-bottom: 3.75rem;
    }

    .faq .head {
        margin-bottom: 2.5rem;
    }

    .faq .head > :first-child {
        margin-bottom: 0.75rem;
    }

    .faq .wrapper {
        max-width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .faq .image img {
        max-height: 100%;
        border-radius: var(--br-base, 5px);
    }

    .faq .accordions {
        height: 33rem;
        gap: 1.25rem;
    }

    .faq .accord[data-expanded="true"] {
        border-radius: var(--br-base);
    }

    .faq .accord-title {
        border-radius: var(--br-base, 5px);
        gap: 1rem;
        padding: 1.25rem 3.75rem 1.25rem 1.75rem;
    }

    .faq .accord-title::before,
    .faq .accord-title::after {
        width: 1.25rem;
        height: 1.25rem;
        right: 1.75rem;
    }

    .faq .accord-title::after {
        background-size: 0.75rem;
    }

    .faq .accord[data-expanded="true"] .block {
        padding: 1.25rem 1.75rem;
    }

    .faq .block :is(p, ul, ol) {
        margin-bottom: 0.75rem;
    }

    .faq .btn {
        margin-top: 2rem;
    }
}

/* ===== DESKTOP : 1200px ===== */
@media screen and (min-width: 75rem) {
    /* {{{ Banner }}} */
    .banner .main {
        padding-block: 3rem;
    }

    /* {{{ Categories }}} */
    .categories .wrapper {
        grid-template-columns: 270px 1fr;
        gap: 1.875rem;
    }

    .categories .label {
        padding: 1.25rem;
    }

    .categories .category {
        padding-block: 1.125rem;
    }

    .categories .category.active {
        padding-block: 1.25rem;
    }

    .categories .products {
        gap: 1.875rem;
    }

    .categories .product > :nth-child(2) {
        line-height: var(--lh-sm);
        padding: 1rem 1.5rem;
    }
    
    /* {{{ FAQ }}} */
    .faq .wrapper {
        grid-template-columns: 32.875rem 38.75rem;
    }

    .faq .btn {
        margin-top: 2.5rem;
    }
}