.account-page,
.auth-page {
    background: #fafafa;
    font-family: Inter, Arial, sans-serif;
    color: #222;
}

.account-page *,
.auth-page * {
    box-sizing: border-box;
}

.account-page .container {
    max-width: calc(1920px - 50px);
    width: 95vw;
    overflow: visible;
}

.auth-page .container {
    max-width: 1240px;
    width: 100%;
    overflow: visible;
}

.account-page .grid.grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.account-page .grid {
    display: grid;
}

.account-page .col-span-12 {
    grid-column: span 12 / span 12;
    min-width: 0;
}

.account-page .flex {
    display: flex;
}

.account-page .hidden {
    display: none;
}

.account-page .items-center {
    align-items: center;
}

.account-page .justify-center {
    justify-content: center;
}

.account-page .justify-between {
    justify-content: space-between;
}

.account-page .flex-col {
    flex-direction: column;
}

.account-page .shrink-0 {
    flex-shrink: 0;
}

.account-page .grow {
    flex-grow: 1;
}

.account-page .min-w-0 {
    min-width: 0;
}

.account-page .gap-2 {
    gap: 8px;
}

.account-page .gap-4 {
    gap: 16px;
}

.account-page .space-y-1 > * + * {
    margin-top: 4px;
}

.account-page .space-y-2 > * + * {
    margin-top: 8px;
}

.account-page .mt-2 {
    margin-top: 8px;
}

.account-page .mt-4 {
    margin-top: 16px;
}

.account-page .mt-6 {
    margin-top: 24px;
}

.account-page .p-2 {
    padding: 8px;
}

.account-page .p-4 {
    padding: 16px;
}

.account-page .px-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.account-page .px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.account-page .py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.account-page .py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.account-page .pb-4 {
    padding-bottom: 16px;
}

.account-page .text-center {
    text-align: center;
}

.account-page .text-sm {
    font-size: 14px;
    line-height: 1.35;
}

.account-page .text-lg {
    font-size: 18px;
    line-height: 1.35;
}

.account-page .text-xl {
    font-size: 20px;
    line-height: 1.3;
}

.account-page .text-2xl {
    font-size: 24px;
    line-height: 1.25;
}

.account-page .font-medium {
    font-weight: 500;
}

.account-page .font-semibold {
    font-weight: 600;
}

.account-page .size-4 {
    width: 16px;
    height: 16px;
}

.account-page .size-5 {
    width: 20px;
    height: 20px;
}

.account-page .size-6 {
    width: 24px;
    height: 24px;
}

.account-page .size-8 {
    width: 32px;
    height: 32px;
}

.account-page .size-10 {
    width: 40px;
    height: 40px;
}

.account-page .size-20 {
    width: 80px;
    height: 80px;
}

.account-page .object-contain {
    object-fit: contain;
}

.account-page .object-cover {
    object-fit: cover;
}

.account-page input[type="text"],
.account-page input[type="email"],
.account-page input[type="tel"],
.auth-page input[type="text"],
.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="date"],
.auth-page select,
.auth-page textarea {
    display: block;
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.2;
    color: #222;
}

.auth-page textarea {
    height: auto;
    min-height: 94px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.account-page input:focus,
.auth-page input:focus {
    border-color: #42a62c;
    outline: 2px solid rgba(66, 166, 44, .16);
    outline-offset: 0;
}

.account-page label,
.auth-page label {
    font-size: 14px;
    line-height: 1.35;
}

.account-page button,
.auth-page button {
    font-family: inherit;
}

.account-page [class*="rounded-xl"],
.account-page [class*="rounded-lg"],
.auth-page [class*="rounded-2xl"],
.auth-page [class*="rounded-lg"] {
    border-radius: 10px;
}

.account-page .bg-white,
.auth-page .bg-white {
    background-color: #fff;
}

.account-page .border,
.auth-page .border {
    border-width: 1px;
    border-style: solid;
    border-color: #d8d8d8;
}

.account-page [class*="bg-[#42A62C]"],
.account-page [class*="bg-[#41A62C]"],
.auth-page [class*="bg-[#42A62C]"],
.auth-page [class*="bg-[#41A62C]"] {
    background-color: #42a62c;
}

.account-page [class*="text-[#42A62C]"],
.account-page [class*="text-[#41A62C]"],
.auth-page [class*="text-[#42A62C]"],
.auth-page [class*="text-[#41A62C]"] {
    color: #42a62c;
}

.account-page .text-white,
.auth-page .text-white {
    color: #fff;
}

.account-page .w-full,
.auth-page .w-full {
    width: 100%;
}

.account-page .block,
.auth-page .block {
    display: block;
}

.account-page .inline-block,
.auth-page .inline-block {
    display: inline-block;
}

.account-page .shadow-md {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
}

.account-page .account-repeat-form {
    margin: 0;
}

.account-page .account-repeat-form button {
    font-size: 15px;
    font-weight: 700;
}

.auth-page .required::after {
    content: "";
}

.auth-page .auth-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    width: 100%;
    overflow: hidden;
}

.auth-page .auth-error {
    color: #ef4444;
    font-size: 14px;
    line-height: 1.35;
}

.account-page .account-alert {
    margin: 0 0 16px;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.4;
}

.account-page .account-alert-success {
    border: 1px solid rgba(66, 166, 44, .32);
    background: rgba(66, 166, 44, .1);
    color: #25791a;
}

.account-page .account-alert-error {
    border: 1px solid rgba(220, 38, 38, .28);
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
}

.account-page .account-products-carousel {
    width: 100%;
    max-width: none;
    overflow: visible;
}

.account-page .container.account-products-carousel,
.account-page .account-products-carousel .container {
    width: 100%;
    max-width: none;
    overflow: visible;
}

.account-page .account-products-carousel .main_small {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
}

.account-page .account-products-carousel .main_small::-webkit-scrollbar {
    height: 8px;
}

.account-page .account-products-carousel .main_small::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 999px;
}

.account-page .account-products-carousel .main_small::-webkit-scrollbar-thumb {
    background: #42a62c;
    border-radius: 999px;
}

.account-page .account-products-carousel .product-small-card {
    flex: 0 0 min(270px, 78vw);
    min-width: min(270px, 78vw);
    max-width: min(270px, 78vw);
    scroll-snap-align: start;
}

.account-page .account-order-expanded {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.account-page .account-order-info,
.account-page .account-order-products {
    min-width: 0;
}

.account-page .account-order-info .account-repeat-form,
.account-page .account-order-info .account-repeat-form + button {
    width: 100%;
}

.account-page .account-order-info > .mt-4:first-of-type {
    max-width: 360px;
}

.account-page .account-order-products .text-lg {
    font-size: 18px;
}

.account-page .account-review-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-page .account-review-form label {
    display: grid;
    gap: 8px;
    color: #222222;
    font-size: 15px;
    font-weight: 700;
}

.account-page .account-review-form input[type="text"],
.account-page .account-review-form select,
.account-page .account-review-form textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid #DCE2D9;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: #222222;
    font-size: 16px;
    line-height: 1.35;
    padding: 12px 14px;
}

.account-page .account-review-form textarea {
    min-height: 120px;
    resize: vertical;
}

.account-page .account-review-form__full {
    grid-column: 1 / -1;
}

.account-page .account-review-form__grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-page .account-review-upload input[type="file"] {
    border: 1px dashed #A8C9A1;
    border-radius: 10px;
    padding: 14px;
}

.account-page .account-review-form button[type="submit"] {
    grid-column: 1 / -1;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    background-color: #41A62C;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    padding: 14px 24px;
}

@media (min-width: 1024px) {
    .account-page .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .account-page .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }

    .account-page .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-page .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-page .lg\:flex-row {
        flex-direction: row;
    }

    .account-page .lg\:items-center {
        align-items: center;
    }

    .account-page .lg\:inline-block {
        display: inline-block;
    }
}

@media (min-width: 1280px) {
    .account-page .account-products-carousel .product-small-card {
        flex-basis: calc((100% - 48px) / 5);
        min-width: calc((100% - 48px) / 5);
        max-width: calc((100% - 48px) / 5);
    }
}

@media (min-width: 768px) {
    .account-page .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-page .md\:flex-row {
        flex-direction: row;
    }

    .account-page .md\:text-start {
        text-align: start;
    }
}

@media (max-width: 767px) {
    .account-page .container,
    .auth-page .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .auth-page .container {
        padding-top: 24px;
    }

    .auth-page .auth-card {
        padding: 20px !important;
        border-radius: 14px;
    }

    .auth-page .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .auth-page [class*="lg:col-span"],
    .auth-page [class*="col-span"] {
        grid-column: 1 / -1 !important;
    }

    .auth-page h1 {
        margin-top: 18px;
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    .auth-page input[type="text"],
    .auth-page input[type="email"],
    .auth-page input[type="password"],
    .auth-page input[type="date"],
    .auth-page select,
    .auth-page textarea {
        font-size: 16px;
    }

    .account-page .account-review-form,
    .account-page .account-review-form__grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 900px) {
    .account-page .account-order-expanded {
        grid-template-columns: 1fr;
    }

    .account-page .account-order-info > .mt-4:first-of-type {
        max-width: none;
    }
}