/* SEARCH */
.search-page {background-color: var(--c-category); padding-top: 10px;}
.search-page .search-content {background-color: #fff; padding: 10px;}
.search-page .breadcrumb span {color: var(--c-hover);}
.search-page .title {font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--c-card-anchor); margin-bottom: 8px;}
.search-page .wrapper {display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 30px;}
.search-page .accessory-card {padding-top: 20px; transition: box-shadow var(--trans-3);}
.search-page .accessory-card:hover {box-shadow: 0 2px 25px 0 #0000001c;}

/* AUTH PAGE */
.auth-page.container {max-width: 700px;}
.auth-page .breadcrumb a {text-decoration: unset;}
.auth-page .breadcrumb a:hover {text-decoration: underline;}
.auth-page .breadcrumb span {color: var(--c-hover);}
.auth-page form {padding: 30px; border: 1px solid var(--c-auth-br); margin-bottom: 20px;}
.auth-page form > :first-child {font-size: 16px; font-weight: 700; text-transform: capitalize; line-height: 1.2; color: var(--c-card-anchor); padding-bottom: 15px; margin-bottom: 40px; position: relative;}
.auth-page form > :first-child::after {content: ""; width: 70px; height: 3px; position: absolute; bottom: 0; left: 0; background: var(--c-heading-after);}
.auth-page form label {display: block; font-size: 13px; color: #000; margin-bottom: 8px;}
.auth-page form input {height: 36px; font-size: 13px; background-color: #fff; padding: 6px 12px; border: 1px solid var(--c-input-complaint); border-radius: 3px; margin-bottom: 13px;}
.auth-page form .submit {display: flex; align-items: center; justify-content: space-between;}
.auth-page form .submit > * {height: 32px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; background-color: var(--c-primary); padding: 5px 15px; color: #fff; transition: background-color var(--trans-3);} 
.auth-page form .submit > :first-child {width: 90px;}
.auth-page form .submit > :last-child {width: 140px;}
.auth-page form .submit > *:hover {background-color: var(--c-hover-lg);}
.auth-page form .submit > * img {filter: invert(1);}

@media only screen and (max-width: 1200px) {
    /* SEARCH */
    .search-page .wrapper {gap: 0 15px;}
    /* AUTH PAGE */
    .auth-page.container {max-width: 600px;}
}

@media only screen and (max-width: 992px) {
    /* SEARCH */
    .search-page .wrapper {grid-template-columns: repeat(5, 1fr);}
    /* AUTH PAGE */
    .auth-page.container {max-width: 100%; padding-inline: 20px;}
    .auth-page form {padding: 25px;}
}

@media only screen and (max-width: 768px) {
    /* SEARCH */
    .search-page .wrapper {grid-template-columns: repeat(4, 1fr);}
    /* AUTH PAGE */
    .auth-page form {padding: 20px;}
    .auth-page form > :first-child {font-size: 15px; margin-bottom: 25px;}
}

@media only screen and (max-width: 576px) {
    /* SEARCH */
    .search-page .wrapper {grid-template-columns: repeat(3, 1fr);}
    /* AUTH PAGE */
    .auth-page.container {padding-inline: 15px;}
    .auth-page form {padding: 15px;}
    .auth-page form > :first-child {margin-bottom: 20px;}
    .auth-page form .submit { align-items: stretch; gap: 10px;}
    .auth-page form .submit > * {width: 100% !important;}
}

@media only screen and (max-width: 480px) {
    /* SEARCH */
    .search-page .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* AUTH PAGE */
    .auth-page form {padding: 12px;}
    .auth-page form label {font-size: 12px;}
    .auth-page form input {height: 34px; font-size: 12px;}
}