body {
    padding: 0px;
    margin: 0px;
}

* {
    box-sizing: border-box
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .container, .container-sm {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container, .container-md, .container-sm {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px
    }
}

@media (min-width:1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px
    }
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5)
}

    .row > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-top: var(--bs-gutter-y)
    }

.col {
    flex: 1 0 0%
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%
}

@media (min-width:576px) {
    .col-sm {
        flex: 1 0 0%
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }
}

@media (min-width:768px) {
    .col-md {
        flex: 1 0 0%
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }
}

@media (min-width:992px) {
    .col-lg {
        flex: 1 0 0%
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }
}

@media (min-width:1200px) {
    .col-xl {
        flex: 1 0 0%
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }
}

@media (min-width:1400px) {
    .col-xxl {
        flex: 1 0 0%
    }

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-left: 8.33333333%
}

.offset-2 {
    margin-left: 16.66666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333333%
}

.offset-5 {
    margin-left: 41.66666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333333%
}

.offset-8 {
    margin-left: 66.66666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333333%
}

.offset-11 {
    margin-left: 91.66666667%
}

.g-0, .gx-0 {
    --bs-gutter-x: 0
}

.g-0, .gy-0 {
    --bs-gutter-y: 0
}

.g-1, .gx-1 {
    --bs-gutter-x: 0.25rem
}

.g-1, .gy-1 {
    --bs-gutter-y: 0.25rem
}

.g-2, .gx-2 {
    --bs-gutter-x: 0.5rem
}

.g-2, .gy-2 {
    --bs-gutter-y: 0.5rem
}

.g-3, .gx-3 {
    --bs-gutter-x: 1rem
}

.g-3, .gy-3 {
    --bs-gutter-y: 1rem
}

.g-4, .gx-4 {
    --bs-gutter-x: 1.5rem
}

.g-4, .gy-4 {
    --bs-gutter-y: 1.5rem
}

.g-5, .gx-5 {
    --bs-gutter-x: 3rem
}

.g-5, .gy-5 {
    --bs-gutter-y: 3rem
}

@media (min-width:576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.33333333%
    }

    .offset-sm-2 {
        margin-left: 16.66666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.33333333%
    }

    .offset-sm-5 {
        margin-left: 41.66666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.33333333%
    }

    .offset-sm-8 {
        margin-left: 66.66666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.33333333%
    }

    .offset-sm-11 {
        margin-left: 91.66666667%
    }

    .g-sm-0, .gx-sm-0 {
        --bs-gutter-x: 0
    }

    .g-sm-0, .gy-sm-0 {
        --bs-gutter-y: 0
    }

    .g-sm-1, .gx-sm-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-sm-1, .gy-sm-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-sm-2, .gx-sm-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-sm-2, .gy-sm-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-sm-3, .gx-sm-3 {
        --bs-gutter-x: 1rem
    }

    .g-sm-3, .gy-sm-3 {
        --bs-gutter-y: 1rem
    }

    .g-sm-4, .gx-sm-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-sm-4, .gy-sm-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-sm-5, .gx-sm-5 {
        --bs-gutter-x: 3rem
    }

    .g-sm-5, .gy-sm-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.33333333%
    }

    .offset-md-2 {
        margin-left: 16.66666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.33333333%
    }

    .offset-md-5 {
        margin-left: 41.66666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.33333333%
    }

    .offset-md-8 {
        margin-left: 66.66666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.33333333%
    }

    .offset-md-11 {
        margin-left: 91.66666667%
    }

    .g-md-0, .gx-md-0 {
        --bs-gutter-x: 0
    }

    .g-md-0, .gy-md-0 {
        --bs-gutter-y: 0
    }

    .g-md-1, .gx-md-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-md-1, .gy-md-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-md-2, .gx-md-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-md-2, .gy-md-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-md-3, .gx-md-3 {
        --bs-gutter-x: 1rem
    }

    .g-md-3, .gy-md-3 {
        --bs-gutter-y: 1rem
    }

    .g-md-4, .gx-md-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-md-4, .gy-md-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-md-5, .gx-md-5 {
        --bs-gutter-x: 3rem
    }

    .g-md-5, .gy-md-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333333%
    }

    .offset-lg-2 {
        margin-left: 16.66666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333333%
    }

    .offset-lg-5 {
        margin-left: 41.66666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333333%
    }

    .offset-lg-8 {
        margin-left: 66.66666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333333%
    }

    .offset-lg-11 {
        margin-left: 91.66666667%
    }

    .g-lg-0, .gx-lg-0 {
        --bs-gutter-x: 0
    }

    .g-lg-0, .gy-lg-0 {
        --bs-gutter-y: 0
    }

    .g-lg-1, .gx-lg-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-lg-1, .gy-lg-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-lg-2, .gx-lg-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-lg-2, .gy-lg-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-lg-3, .gx-lg-3 {
        --bs-gutter-x: 1rem
    }

    .g-lg-3, .gy-lg-3 {
        --bs-gutter-y: 1rem
    }

    .g-lg-4, .gx-lg-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-lg-4, .gy-lg-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-lg-5, .gx-lg-5 {
        --bs-gutter-x: 3rem
    }

    .g-lg-5, .gy-lg-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333333%
    }

    .offset-xl-2 {
        margin-left: 16.66666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333333%
    }

    .offset-xl-5 {
        margin-left: 41.66666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333333%
    }

    .offset-xl-8 {
        margin-left: 66.66666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333333%
    }

    .offset-xl-11 {
        margin-left: 91.66666667%
    }

    .g-xl-0, .gx-xl-0 {
        --bs-gutter-x: 0
    }

    .g-xl-0, .gy-xl-0 {
        --bs-gutter-y: 0
    }

    .g-xl-1, .gx-xl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xl-1, .gy-xl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xl-2, .gx-xl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xl-2, .gy-xl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xl-3, .gx-xl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xl-3, .gy-xl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xl-4, .gx-xl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xl-4, .gy-xl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xl-5, .gx-xl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xl-5, .gy-xl-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width:1400px) {
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xxl-0 {
        margin-left: 0
    }

    .offset-xxl-1 {
        margin-left: 8.33333333%
    }

    .offset-xxl-2 {
        margin-left: 16.66666667%
    }

    .offset-xxl-3 {
        margin-left: 25%
    }

    .offset-xxl-4 {
        margin-left: 33.33333333%
    }

    .offset-xxl-5 {
        margin-left: 41.66666667%
    }

    .offset-xxl-6 {
        margin-left: 50%
    }

    .offset-xxl-7 {
        margin-left: 58.33333333%
    }

    .offset-xxl-8 {
        margin-left: 66.66666667%
    }

    .offset-xxl-9 {
        margin-left: 75%
    }

    .offset-xxl-10 {
        margin-left: 83.33333333%
    }

    .offset-xxl-11 {
        margin-left: 91.66666667%
    }

    .g-xxl-0, .gx-xxl-0 {
        --bs-gutter-x: 0
    }

    .g-xxl-0, .gy-xxl-0 {
        --bs-gutter-y: 0
    }

    .g-xxl-1, .gx-xxl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xxl-1, .gy-xxl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xxl-2, .gx-xxl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xxl-2, .gy-xxl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xxl-3, .gx-xxl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xxl-3, .gy-xxl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xxl-4, .gx-xxl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xxl-4, .gy-xxl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xxl-5, .gx-xxl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xxl-5, .gy-xxl-5 {
        --bs-gutter-y: 3rem
    }
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.text-center {
    text-align: center !important
}

.d-none {
    display: none
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #6c757d;
    text-align: left
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6
}

    .table > :not(caption) > * > * {
        padding: .5rem .5rem;
        background-color: var(--bs-table-bg);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
    }

    .table > tbody {
        vertical-align: inherit
    }

    .table > thead {
        vertical-align: bottom
    }

    .table > :not(:last-child) > :last-child > * {
        border-bottom-color: currentColor
    }

.caption-top {
    caption-side: top
}

.table-sm > :not(caption) > * > * {
    padding: .25rem .25rem
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0
}

    .table-bordered > :not(caption) > * > * {
        border-width: 0 1px
    }

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color)
}

.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color)
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color)
}

.table-primary {
    --bs-table-bg: #cfe2ff;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bacbe6
}

.table-secondary {
    --bs-table-bg: #e2e3e5;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #cbccce
}

.table-success {
    --bs-table-bg: #d1e7dd;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c1d6cc;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bcd0c7
}

.table-info {
    --bs-table-bg: #cff4fc;
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #badce3;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfe2e9;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #badce3
}

.table-warning {
    --bs-table-bg: #fff3cd;
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e6dbb9;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #ece1be;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #e6dbb9
}

.table-danger {
    --bs-table-bg: #f8d7da;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfc2c4;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5c7ca;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfc2c4
}

.table-light {
    --bs-table-bg: #f8f9fa;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfe0e1
}

.table-dark {
    --bs-table-bg: #212529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

@media (max-width:575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

.fade {
    transition: opacity .15s linear;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: .5;
    }

/**/
#header {
    padding: 10px;
    border-bottom: 1px solid #000000;
    position: relative;
}

.logo-anchor {
    display: inline-block
}

.menu-icon-wrap {
    position: absolute;
    left: 20px;
    top: calc(50% - 13px);
    cursor: pointer;
}

.menu-close-icon-wrap {
    position: absolute;
    left: 23px;
    top: calc(50% - 13px);
    cursor: pointer;
    z-index: 99;
}

.cart-icon-wrap {
    position: absolute;
    right: 20px;
    top: calc(50% - 17px);
    cursor: pointer;
}

.menu-icon {
    width: 33px;
    height: 26px;
    display: inline-block;
    background-image: url(../img/sprite.svg);
    background-position: 0px 0px;
}

.menu-close-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    background-image: url(../img/sprite.svg);
    background-position: -70px 0px;
}

.cart-icon {
    width: 31px;
    height: 33px;
    display: inline-block;
    background-image: url(../img/sprite.svg);
    background-position: -34px 0px;
}

.menu-sidebar {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    overflow: auto;
    width: 100%;
    max-width: 300px;
    background-color: #ffffff;
    border-right: 1px solid #000000;
    z-index: 10;
    left: -302px;
    transition: all .15s linear;
}

    .menu-sidebar.show {
        transition: all .15s linear;
        left: 0px;
    }

.sidebar-menu {
    padding-top: 100px;
}

    .sidebar-menu ul {
        margin: 0;
        padding: 0;
    }

        .sidebar-menu ul li {
            margin: 0;
            padding: 0;
        }

            .sidebar-menu ul li a {
                font-family: Elsie;
                font-weight: 400;
                font-size: 21px;
                line-height: 100%;
                padding: 16px 24px;
                display: inline-block;
                width: 100%;
                box-sizing: border-box;
                text-decoration: none;
                color: #000000;
                border-bottom: 1px solid #000000;
                text-transform: uppercase;
            }

.social {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}

.menu-sidebar .social {
    padding-top: 30px;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.social li, .social li a {
    display: inline-flex;
}

.social-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background-image: url(../img/sprite.svg);
}

    .social-icon.facebook-icon {
        background-position: 0px -34px;
    }

    .social-icon.instagram-icon {
        background-position: -42px -34px;
    }

    .social-icon.linkedin-icon {
        background-position: -85px -34px;
    }

    .social-icon.phone-icon {
        background-position: -127px -34px;
    }

    .social-icon.facebook-icon:hover {
        background-position: 0px -77px;
    }

    .social-icon.instagram-icon:hover {
        background-position: -42px -77px;
    }

    .social-icon.linkedin-icon:hover {
        background-position: -85px -77px;
    }

    .social-icon.phone-icon:hover {
        background-position: -128px -77px;
    }

.submenu {
    height: 0;
    overflow: hidden;
    transition: all 0.5s linear;
}

.dropdown.show .submenu {
    height: auto;
    transition: all 0.5s linear;
}

.sidebar-menu ul li ul li a {
    padding: 16px 24px 16px 38px;
}

.sidebar-menu > ul > li.dropdown > a {
    position: relative;
    padding-right: 40px;
}

    .sidebar-menu > ul > li.dropdown > a:after {
        content: "";
        --b: 2px;
        width: 16px;
        aspect-ratio: 1;
        display: inline-block;
        border: none;
        background: conic-gradient(from 90deg at var(--b) var(--b), #fff 90deg, #000 0) calc(100% + var(--b) / 2) calc(100% + var(--b) / 2) / calc(50% + var(--b)) calc(50% + var(--b));
        position: absolute;
        right: 24px;
        top: calc(50% - 8px);
    }

.sidebar-menu > ul > li.dropdown.show > a:after {
    content: none;
}

.sidebar-menu > ul > li.dropdown > a:before {
    width: 16px;
    content: "";
    position: absolute;
    right: 24px;
    height: 2px;
    background-color: #000000;
    top: calc(50% - 1px);
}

@media screen and (max-width:575px) {
    .logo-anchor img {
        width: auto;
        height: 50px;
    }
}

/* Banner CSS */
#banner {
    padding: 20px 0px;
    border-bottom: 1px solid #000000;
}

.banner-wrapper {
    padding: 120px 0px;
    text-align: center;
}

    .banner-wrapper h1 {
        font-family: Elsie;
        font-weight: 400;
        font-size: 64px;
        line-height: 84px;
        text-align: center;
        max-width: 575px;
        margin: 0 auto;
        position: relative;
    }

        .banner-wrapper h1:before {
            content: "";
            position: absolute;
            left: -50px;
            top: -70px;
            background-image: url(../img/sprite.svg);
            background-position: 0px -120px;
            width: 116px;
            height: 95px;
        }

        .banner-wrapper h1 span {
            display: inline-block;
            width: 100%;
        }

        .banner-wrapper h1:after {
            content: "";
            position: absolute;
            right: 0px;
            bottom: -50px;
            background-image: url(../img/sprite.svg);
            background-position: 0px -120px;
            width: 116px;
            height: 95px;
        }

@media screen and (max-width:575px) {
    .banner-wrapper {
        padding: 70px 0px;
    }

        .banner-wrapper h1 {
            font-size: 36px;
            line-height: 48px;
            max-width: 375px;
        }

            .banner-wrapper h1:before {
                left: -26px;
                transform: scale(0.5);
            }

            .banner-wrapper h1:after {
                bottom: -44px;
                transform: scale(0.5);
            }
}

.section-heading {
    margin-bottom: 30px;
    width: 100%;
    display: inline-block;
}

    .section-heading h2 {
        font-family: Elsie;
        font-weight: 500;
        font-size: 40px;
        line-height: 84px;
        text-align: center;
        margin: 0px;
        display: inline-block;
        position: relative;
        text-transform: uppercase;
    }

    .section-heading.text-center h2 {
        margin: 0 auto;
    }

    .section-heading h2:before {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 6px;
        width: 80px;
        height: 2px;
        background-color: #000000;
    }

    .section-heading.text-center h2:before {
        left: calc(50% - 40px);
    }

@media screen and (max-width:575px) {
    .section-heading h2 {
        font-size: 28px;
        line-height: 64px;
    }
}
/*  */
#newArrival {
    padding: 60px 0px;
    border-bottom: 1px solid #000000;
}

.slider-img {
    text-align: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .slider-img img {
        /* margin: 0 auto;
    width: 100%;
    max-width: 219px; */

        display: block;
        width: auto;
        height: 100%;
        object-position: center;
        object-fit: cover;
        border-radius: 6px;
        aspect-ratio: 1;
    }

.newArrival-item {
    text-align: center;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #e8dfdf;
    transition: all 0.3s linear;
    position: relative;
}

.special-price {
    position: absolute;
    background: #ffffff;
    color: #000000;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 30px;
    right: 30px;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
}

.newArrival-item:hover .special-price {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.newArrival-item:hover {
    box-shadow: 0px 5px 20px 4px rgb(0 0 0 / 20%);
    transition: all 0.3s linear;
    background: #e8e8e8;
    transform: translateY(-6px);
}

.special-price span {
    display: none;
}

.special-price:hover span {
    position: absolute;
    display: block;
    background-color: #000000;
    font-size: 12px;
    top: calc(20px - 16px);
    display: flex;
    color: #ffffff;
    min-width: 78px;
    padding: 4px;
    text-align: center;
    justify-content: center;
    border-radius: 4px;
    right: calc(100% + 8px);
}

.newArrival-item h4 {
    margin-top: 0px;
    margin-bottom: 4px;
    text-align: center;
    font-family: Elsie;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
    text-transform: uppercase;
}

.product-price {
    font-family: Elsie;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.newArrival-item.price-show .regular-price {
    text-decoration: line-through;
}

.discount-price {
    display: none;
}

.newArrival-item.price-show .discount-price {
    display: block;
    color: red;
}

.newArrival-item .p-3 {
    padding: 10px 20px 20px;
}

.addCart-btn {
    background-color: #000000;
    width: 100%;
    max-width: 180px;
    margin: 9px auto 0px;
    padding: 7px 20px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    line-height: 20px;
    letter-spacing: 0px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0px 4px 4px 0px #0000001A;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.mySwiper .swiper-button-next, .mySwiper .swiper-button-prev {
    color: #000000;
}

@media screen and (max-width:767px) {
    .slider-img {
        padding: 10px;
    }

    .newArrival-item h4 {
        font-size: 18px;
        line-height: 26px;
    }

    .newArrival-item .p-3 {
        padding: 6px 10px 10px;
    }
}

@media screen and (max-width:575px) {
    #newArrival {
        padding: 30px 0px;
    }

    .slider-img {
        aspect-ratio: auto;
    }

        .slider-img img {
            height: 180px;
            width: auto;
        }
}

.product-design2 {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: 10px 20px 20px;
}

.product-design2-left {
    text-align: left;
}

    .product-design2-left .product-price {
        justify-content: flex-start;
    }

.product-design2-right .addCart-btn span {
    display: none;
}

.product-design2-right .addCart-btn {
    display: inline-flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

@media screen and (max-width:767px) {
    .product-design2 {
        padding: 6px 10px 10px;
    }
}
/*--------------*/
#about {
    padding: 60px 0px;
    border-bottom: 1px solid #000000;
}

.about-body {
    max-width: 575px;
    margin: 0 auto;
    position: relative;
}

    .about-body p {
        font-family: Elsie;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        color: #000000;
        text-align: center;
        margin-top: 0px;
    }

@media screen and (max-width:575px) {
    #about {
        padding: 30px 0px;
    }

    .about-body p {
        font-size: 22px;
        line-height: 34px;
    }
}

.footer-top {
    padding: 40px 0px;
    border-bottom: 1px solid #000000;
}

.footer-bottom {
    padding: 40px 0px 0px;
}

.footer-social-wrap {
    padding-bottom: 30px;
}

#footer .social {
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.phone-wrapp {
    padding-top: 30px;
    border-top: 1px solid #D7D7D7;
}

    .phone-wrapp a {
        font-family: Elsie;
        font-weight: 400;
        font-size: 24px;
        line-height: 24px;
        color: #000000;
        text-align: center;
        text-decoration: none;
    }

.footer-nav {
    text-align: center;
}

    .footer-nav ul {
        padding: 30px 0px;
        margin: auto;
    }

        .footer-nav ul li {
            padding: 0;
            margin: 0;
            display: inline-block;
            list-style: none;
            position: relative;
        }

            .footer-nav ul li a {
                font-family: Elsie;
                font-weight: 400;
                font-size: 18px;
                line-height: 22px;
                color: #000000;
                text-align: center;
                text-decoration: none;
                padding: 0px 24px;
                display: inline-block;
            }

            .footer-nav ul li:after {
                content: "";
                position: absolute;
                right: 0px;
                top: 0px;
                width: 1px;
                height: 100%;
                background-color: #000000;
            }

            .footer-nav ul li:last-child:after {
                content: none;
            }

.copyright {
    padding: 30px 0px;
    border-top: 1px solid #D7D7D7;
}

    .copyright p {
        margin: 0px;
        font-family: Elsie;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        color: #5A5A5A;
    }

@media screen and (max-width:575px) {
    .footer-nav ul li a {
        font-size: 16px;
        line-height: 18px;
        padding: 0px 16px;
    }

    .copyright {
        padding: 24px 0px;
    }
}

.cart-sidebar {
    position: fixed;
    top: 0px;
    height: 100vh;
    overflow: auto;
    width: 100%;
    max-width: 350px;
    background-color: #ffffff;
    border-left: 1px solid #000000;
    z-index: 10;
    right: -352px;
    transition: all .15s linear;
}

    .cart-sidebar.show {
        right: 0px;
    }

.cart-close-icon-wrap {
    position: absolute;
    left: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 99;
}

.cart-sidebar .section-heading {
    padding-top: 60px;
}

    .cart-sidebar .section-heading h2 {
        font-size: 22px;
        line-height: 56px;
    }

.cart-table img {
    width: 50px;
    min-width: 50px;
    height: auto;
    min-height: 60px;
    border: 1px solid #000;
}

.cart-table tr, .cart-table tr td {
    align-content: center;
}

    .cart-table tr td {
        font-family: Elsie;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        text-transform: uppercase;
    }

.checkout-btn {
    margin-top: 30px;
    padding: 0px 10px;
    text-align: center;
}

    .checkout-btn a {
        padding: 10px 24px;
        display: inline-block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #000000;
        box-sizing: border-box;
        text-transform: uppercase;
        max-width: 300px;
    }

    .checkout-btn button {
        padding: 10px 24px;
        display: inline-block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #000000;
        box-sizing: border-box;
        text-transform: uppercase;
        max-width: 300px;
        cursor: pointer;
    }

.product-attribute {
    display: flex;
    font-size: 14px;
    gap: 16px;
}

    .product-attribute > div {
        display: inline-flex;
        gap: 4px;
        align-items: center;
        justify-content: center;
    }

.product-color {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50px;
    font-size: 14px;
}

.input-text {
    height: 30px;
    width: 60px;
    border-radius: 0px;
    border: 1px solid #000;
    padding: 4px 12px;
    max-width: 60px;
}

.cart-number {
    display: flex;
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #000000;
    border-radius: 50px;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    top: -15px;
    right: -15px;
}

/* Sigle Page CSS */
#singlepage-wrapper {
    border-bottom: 1px solid #000000;
    padding: 40px 0px 60px;
}

.singlepage-sliderwrapper {
    width: 900px;
    margin: 0 auto;
    max-width: 100%;
}

    .singlepage-sliderwrapper .swiper {
        width: 100%;
        height: 100%;
    }

    .singlepage-sliderwrapper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .singlepage-sliderwrapper .swiper {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .singlepage-sliderwrapper .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .singlepage-sliderwrapper .mySwiper4 {
        height: 80%;
        max-height: 500px;
        width: 100%;
    }

    .singlepage-sliderwrapper .mySwiper2 {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }

        .singlepage-sliderwrapper .mySwiper2 .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
        }

        .singlepage-sliderwrapper .mySwiper2 .swiper-slide-thumb-active {
            opacity: 1;
        }

    .singlepage-sliderwrapper .swiper-button-next, .singlepage-sliderwrapper .swiper-button-prev {
        color: #000;
    }
/*  */
.single-product-name-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

    .single-product-name-wrap h1 {
        font-family: Elsie;
        font-weight: 600;
        font-size: 24px;
        line-height: 32px;
        color: #000000;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }

.product-detail-widget {
    margin-top: 30px;
}

    .product-detail-widget h2 {
        font-family: Elsie;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: rgb(0, 0, 0);
        margin-top: 0px;
        margin-bottom: 12px;
    }

.color-wrapper, .size-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .color-wrapper .color {
        width: 50px;
        height: 50px;
        border: 1px solid #d4d4d4;
        border-radius: 50px;
    }

    .size-wrapper .size {
        width: 50px;
        height: 50px;
        border: 1px solid #d4d4d4;
        border-radius: 50px;
        background-color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: Elsie;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #000000;
    }

@media screen and (max-width:575px) {
    #singlepage-wrapper {
        padding: 40px 0px
    }

    .color-wrapper .color {
        width: 36px;
        height: 36px;
    }

    .size-wrapper .size {
        width: 40px;
        height: 39px;
        font-size: 13px;
        line-height: 13px;
    }
}
/*  */
#category-wrapper {
    padding: 60px 0px;
    border-bottom: 1px solid #000000;
}

@media screen and (max-width:575px) {
    #category-wrapper {
        padding: 30px 0px;
    }
}

.order-detail-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
/*  */
.form-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.form-label {
    margin-bottom: .5rem;
    font-family: Elsie;
    display: inline-block;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: Elsie;
}
/* Login CSS */
#login-section {
    border-bottom: 1px solid #000000;
}

.login-wrapper {
    max-width: 500px;
    margin: 70px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 515px);
}

#loginform {
    text-align: center;
    margin-top: 14px;
    font-size: 16px;
    width: 100%;
}

    #loginform > div {
        margin-bottom: 20px;
        margin-top: 0px;
    }

    #loginform input[type="text"], form#loginform input[type="password"] {
        height: 45px;
        width: 100%;
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 6px;
        color: #272C37;
        border: 1px solid #DEE2E7;
    }

.forgetmenot {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .forgetmenot > * {
        margin: 0px;
    }

    .forgetmenot input[type=checkbox] {
        margin: 0px;
    }

    .forgetmenot > label {
        margin-right: auto;
        cursor: pointer;
    }

.lwa-links-remember {
    color: #000000;
    font-weight: 600;
}

#loginform > div.submit {
    margin-bottom: 0px;
}

#loginform input[type="submit"] {
    background-color: #000000;
    width: 100%;
    margin: 0px;
    padding: 0px 20px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    line-height: 20px;
    letter-spacing: 0px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0px 4px 4px 0px #0000001A;
    border: none;
    cursor: pointer;
}

.custom-toast {
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: slideInRight 0.4s ease;
    max-width: 320px;
    font-family: 'Poppins', sans-serif;
}

.toast-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.toast-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.toast-success {
    border-left: 5px solid #4CAF50;
}

.toast-error {
    border-left: 5px solid #f44336;
}

.toast-info {
    border-left: 5px solid #2196F3;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-out {
    opacity: 0;
    transform: translateX(100%);
}

h1:focus-visible {
    outline: none;
}
/* ---------- Toast Container ---------- */
.aurae-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none; /* allows clicks through gaps */
}
/* ---------- Individual Toast ---------- */
.aurae-toast {
    min-width: 220px;
    padding: 12px 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: auto;
}

    .aurae-toast.show {
        opacity: 1;
        transform: translateY(0);
    }
/* ---------- Color Variants ---------- */
.aurae-toast-success {
    background: linear-gradient(135deg, #00c853, #009624);
}

.aurae-toast-danger {
    background: linear-gradient(135deg, #d50000, #9b0000);
}

.aurae-toast-info {
    background: linear-gradient(135deg, #2196f3, #1565c0);
}

.aurae-toast-warning {
    background: linear-gradient(135deg, #ffa000, #f57c00);
}
/* ------------ Swiper Product Design -----------------*/
/* Main product gallery */
/* --- ProductDetails main gallery: show full image, never crop --- */
.singlepage-sliderwrapper .mySwiper4 {
    /* pick a responsive viewport for the image box */
    --detail-height: clamp(320px, 60vh, 720px);
    height: var(--detail-height);
    width: 100%;
}

    .singlepage-sliderwrapper .mySwiper4 .swiper-wrapper {
        align-items: center;
    }

    .singlepage-sliderwrapper .mySwiper4 .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* keeps nav arrows tidy */
        background: #0b0b0b; /* optional backdrop */
    }
        /* CRITICAL: beat any global img rules that cause crop/zoom */
        .singlepage-sliderwrapper .mySwiper4 .swiper-slide > img,
        .singlepage-sliderwrapper .mySwiper4 .swiper-slide picture > img {
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important; /* prevent forced width=100% + height=100% scaling */
            height: 100% !important; /* fill box vertically, keep aspect via object-fit */
            object-fit: contain !important;
            object-position: center center !important;
            display: block;
            aspect-ratio: auto !important;
        }
/* Optional: thumbnails can stay cropped for uniformity */
.singlepage-sliderwrapper .mySwiper2 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .singlepage-sliderwrapper .mySwiper2 .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.singlepage-sliderwrapper .mySwiper4 .swiper-slide {
    background: transparent; /* or #fff to match a white page */
}
/* -------------- Color Swiper -------------*/
/* Color swatches */
.color-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    /* keep size stable (no jump on select) */
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 0 #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .color:hover {
        transform: scale(1.06);
    }
    /* Selected: 2px black outer border + 2px white inner ring for contrast */
    .color.selected {
        border-color: #000; /* 2px black */
        /*box-shadow: inset 0 0 0 2px #fff;*/ /* inner white ring */
    }
/* --- Size Selection --- */
.size-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.size {
    position: relative;
    padding: 8px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #222;
    transition: all 0.2s ease;
    background-color: #fff;
    user-select: none;
    overflow: hidden;
}

    .size:hover {
        transform: scale(1.05);
        border-color: #aaa;
    }
    /* Selected size */
    .size.selected {
        border-color: #000;
        font-weight: 600;
    }
    /* Disabled / Out of stock */
    .size.disabled {
        color: #aaa;
        border-color: #e0e0e0;
        background-color: #f9f9f9;
        cursor: not-allowed;
    }
        /* Add diagonal line for disabled sizes */
        .size.disabled::after {
            content: "";
            position: absolute;
            top: 50%;
            left: -10%;
            width: 120%;
            height: 2px;
            background-color: #ccc;
            transform: rotate(-20deg);
            opacity: 0.8;
            pointer-events: none; /* make sure line doesn't block hover */
        }

        .size.disabled:hover::before {
            content: "Out of stock";
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            font-size: 12px;
            padding: 3px 6px;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0.9;
        }
/* --- Size Guide Hover --- */
.size-guide-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #222;
    cursor: pointer;
    user-select: none;
    margin-top: 14px;
    transition: color 0.2s ease;
}

    .size-guide-container::after {
        content: "🛈";
        font-size: 14px;
        color: #666;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .size-guide-container:hover {
        color: #000;
    }

        .size-guide-container:hover::after {
            color: #000;
            transform: scale(1.1);
        }
/* Tooltip styling */
.size-guide-tooltip {
    position: fixed; /* change from absolute to fixed */
    top: 50%; /* center vertically */
    left: 50%; /* center horizontally */
    transform: translate(-50%, -50%) scale(0.95);
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 10px;
    width: 500px;
    max-width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 9999; /* make sure it's always on top */
}
/* Add a fade-in with scale animation */
.size-guide-container:hover .size-guide-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}
/* Tooltip arrow */
.size-guide-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.1));
}
/* Image inside tooltip */
.size-guide-tooltip img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
/* --- Size tokens: available/selected/disabled --- */
.single-productdetail .size-wrapper .size {
    position: relative;
    padding: 8px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, transform .15s ease, color .15s ease, background-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* nice touch target */
}

    .single-productdetail .size-wrapper .size:hover {
        transform: scale(1.05);
        border-color: #aaa;
    }

    .single-productdetail .size-wrapper .size.selected {
        border-color: #000;
        font-weight: 600;
    }
    /* Disabled: soft gray, no pointer, and diagonal strike */
    .single-productdetail .size-wrapper .size.disabled {
        color: #9aa0a6 !important;
        border-color: #e1e4e8 !important;
        background: #f8f9fa !important;
        cursor: not-allowed !important;
        pointer-events: none; /* keep it non-clickable */
        transform: none; /* no hover lift */
    }
        /* The diagonal line */
        .single-productdetail .size-wrapper .size.disabled::after {
            content: "";
            position: absolute;
            left: -10%;
            right: -10%;
            top: 50%;
            height: 2px;
            background: #c7ccd1;
            transform: rotate(-18deg);
            opacity: 0.9;
            pointer-events: none;
        }
    /* --- Out-of-stock sizes (uses class "empty") --- */
    .single-productdetail .size-wrapper .size.empty {
        position: relative;
        color: #9aa0a6 !important;
        border-color: #e1e4e8 !important;
        background: #f8f9fa !important;
        cursor: not-allowed !important;
        pointer-events: none;
        transform: none;
    }
        /* Add diagonal line across */
        .single-productdetail .size-wrapper .size.empty::after {
            content: "";
            position: absolute;
            left: -10%;
            right: -10%;
            top: 50%;
            height: 2px;
            background: #c7ccd1;
            transform: rotate(-45deg); /* 45-degree line */
            opacity: 0.9;
            pointer-events: none;
        }

.product-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
    vertical-align: middle;
    font-size: 14px;
}

.table.cart-table td {
    vertical-align: middle;
}

.product-name {
    font-weight: 600;
}

.attribute-name {
    color: #666;
    margin-right: 6px;
}

.validation-message {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- Cart sidebar table: tidy, compact, bordered --- */
.cart-sidebar .table-responsive {
    overflow-x: auto;
    padding: 0 5px;
}

.cart-sidebar .cart-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb; /* outer border */
    border-radius: 8px;
    overflow: hidden; /* clip rounded corners */
    background: #fff;
    font-size: 13px;
}

    .cart-sidebar .cart-table td {
        padding: 10px 10px;
        vertical-align: middle;
        border-top: 1px solid #f0f2f5; /* separator between rows */
    }

    .cart-sidebar .cart-table tr:first-child td {
        border-top: none;
    }
    /* Columns: 1) thumb 2) info 3) price */
    .cart-sidebar .cart-table td:nth-child(1) {
        width: 84px;
    }

    .cart-sidebar .cart-table td:nth-child(2) {
        width: auto;
        overflow: hidden;
    }

    .cart-sidebar .cart-table td:nth-child(3) {
        width: 105px;
        text-align: right;
        white-space: nowrap;
        border-left: 1px solid #f0f2f5;
    }
    /* Image: no border/shadow/padding; compact */
    .cart-sidebar .cart-table img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        display: block;
        border: none;
        box-shadow: none;
        padding: 0;
        background: transparent;
        border-radius: 6px;
    }
/* Product name: single line with ellipsis (uncomment 2-line clamp if you prefer) */
.cart-sidebar .product-name {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Two-line clamp alternative:
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */
}
/* Stacked meta rows */
.cart-sidebar .meta {
    display: grid;
    gap: 4px;
}

.cart-sidebar .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px; /* smaller meta size */
    line-height: 1.2;
    color: #555;
}

.cart-sidebar .meta-label {
    color: #777;
    min-width: 42px; /* aligns labels */
}

.cart-sidebar .meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Color chip */
.cart-sidebar .product-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    font-size: 14px;
}
/* Qty badge on the Size line (small & neat) */
.cart-sidebar .qty-badge {
    margin-left: auto; /* push to the right end of the row */
    padding: 2px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: #333;
    background: #fafafa;
}
/* Stronger item separators if desired */
.cart-sidebar .cart-table tr.item-row + tr.item-row td {
    border-top: 1px solid #e5e7eb;
}
/* Total row: thicker top rule and emphasis */
.cart-sidebar .cart-table tr.total-row td {
    border-top: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 13px;
}

.checkout-wrapper {
    max-width: 720px;
}

.checkout-table .product-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    vertical-align: -2px;
    font-size: 14px;
}

.checkout-steps .step {
    padding: .25rem .75rem;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-weight: 600;
}

    .checkout-steps .step.active {
        color: #111827;
        border-color: #111827;
    }

.summary-list .list-group-item {
    padding: .5rem .75rem;
}

.checkout-table td {
    vertical-align: middle;
}
/* ===== Checkout Page Styling (Aurae 2025) ===== */
.checkout-container {
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
/* Step Indicator */
.checkout-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    counter-reset: step;
}

    .checkout-steps .step {
        position: relative;
        font-weight: 500;
        font-size: 15px;
        color: #aaa;
        padding: 0.5rem 1rem;
        margin: 0 0.75rem;
    }

        .checkout-steps .step.active {
            color: #000;
            border-bottom: 2px solid #000;
        }
/* Form elements */
.checkout-container label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: .35rem;
    display: inline-block;
}

.checkout-container .form-control,
.checkout-container .rz-dropdown {
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    font-size: 14px;
    min-height: 38px;
    transition: all .2s ease;
}

    .checkout-container .form-control:focus {
        border-color: #333;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
    }
/* Card summary */
.summary-list .list-group-item {
    font-size: 14px;
    border-color: #f0f0f0;
}
/* Table styling */
.checkout-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 14px;
}

    .checkout-table th {
        font-weight: 600;
        color: #444;
        border-bottom: 2px solid #eee;
    }

    .checkout-table td {
        vertical-align: middle;
        padding: .75rem .5rem;
        border-bottom: 1px solid #f3f3f3;
    }

    .checkout-table tr:last-child td {
        border-bottom: none;
    }
/* Buttons */
.checkout-container .btn {
    border-radius: 6px;
    font-size: 14px;
    padding: .5rem 1.2rem;
    font-weight: 500;
}

.checkout-container .btn-primary {
    background-color: #000;
    border-color: #000;
}

    .checkout-container .btn-primary:hover {
        background-color: #333;
    }

.checkout-container .btn-success {
    background-color: #058b6b;
    border-color: #058b6b;
}

    .checkout-container .btn-success:hover {
        background-color: #036a51;
    }
/* Quantity input */
.input-group-sm .form-control {
    max-width: 60px;
    text-align: center;
}
/* Modal */
.modal-content {
    border-radius: 10px;
}

.modal-title {
    font-weight: 600;
}
/* ---------  Checkout -------- */
.checkout-container {
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2rem;
}

    .checkout-steps .step {
        font-weight: 600;
        font-size: 15px;
        color: #9aa0a6;
        padding: .25rem .75rem;
        border-bottom: 2px solid transparent;
    }

        .checkout-steps .step.active {
            color: #111827;
            border-color: #111827;
        }

.checkout-container label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: .35rem;
}

.checkout-container .form-control {
    border-radius: 6px;
    border: 1px solid #ddd;
    min-height: 38px;
    font-size: 14px;
}

    .checkout-container .form-control:focus {
        border-color: #111;
        box-shadow: 0 0 0 2px rgba(0,0,0,.05);
    }

.validation-message, .validation-errors {
    color: #b45454;
    font-size: 12px;
}

.checkout-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    .checkout-table th {
        font-weight: 600;
        color: #444;
        border-bottom: 2px solid #eee;
    }

    .checkout-table td {
        vertical-align: middle;
        padding: .75rem .5rem;
        border-bottom: 1px solid #f3f3f3;
    }

    .checkout-table tr:last-child td {
        border-bottom: none;
    }

.btn {
    border-radius: 6px;
    font-size: 14px;
    padding: .5rem 1.2rem;
    font-weight: 600;
}

.btn-primary {
    background: #000;
    border-color: #000;
}

    .btn-primary:hover {
        background: #333;
    }

.btn-success {
    background: #058b6b;
    border-color: #058b6b;
}

    .btn-success:hover {
        background: #036a51;
    }

@media (max-width: 576px) {
    .checkout-container {
        padding: 1.25rem 1rem;
    }

    .checkout-steps {
        gap: 8px;
    }

        .checkout-steps .step {
            font-size: 14px;
            padding: .25rem .5rem;
        }
}
/* =======================
   Checkout Form Refinements
   ======================= */

/* --- 1) Validation: red borders + red messages --- */
/* Blazor Input* invalid states */
.form-control.input-validation-error,
.form-control.invalid,
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.08);
}
/* Radzen invalid states */
.rz-state-invalid .rz-inputtext,
.rz-state-invalid .rz-dropdown,
.rz-state-invalid .rz-dropdown .rz-dropdown-label {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.08);
}
/* Validation messages (text only, compact & red) */
.validation-message,
.validation-errors,
.validation-summary-errors {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    animation: none !important;
}
/* --- 2) Phone: prefix INSIDE the input --- */
.phone-field {
    position: relative;
    width: 100%;
}

    .phone-field .phone-prefix {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #333;
        pointer-events: none; /* no click stealing */
    }

        .phone-field .phone-prefix img {
            width: 20px;
            height: 14px;
            display: block;
            border-radius: 2px;
        }
    /* Add left padding to make room for the prefix */
    .phone-field .form-control {
        padding-left: 74px !important; /* ~ 10 + (20 img + 8 gap + ~30 code) + buffer */
        min-height: 38px;
    }
/* --- 3) Continue button: centered, white text, nice spacing --- */
.checkout-actions {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

    .checkout-actions .btn-primary {
        background-color: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
        padding: 10px 22px;
        min-width: 220px;
        border-radius: 6px;
        font-weight: 600;
    }

        .checkout-actions .btn-primary:hover {
            background-color: #333 !important;
            border-color: #333 !important;
        }
/* ============================
   1) Numbered Stepper
   ============================ */
.checkout-stepper {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

    .checkout-stepper li {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #9aa0a6;
        font-weight: 600;
    }

        .checkout-stepper li .step-index {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            color: #6b7280;
            border: 1px solid #e5e7eb;
            font-size: 14px;
        }

        .checkout-stepper li .step-label {
            font-size: 14px;
        }

        .checkout-stepper li.completed .step-index {
            background: #111827;
            color: #fff;
            border-color: #111827;
        }

        .checkout-stepper li.active .step-index {
            background: #000;
            color: #fff;
            border-color: #000;
        }

        .checkout-stepper li::after {
            content: "";
            position: absolute;
            top: 14px;
            left: calc(100% + 12px);
            width: 36px;
            height: 2px;
            background: #e5e7eb;
        }

        .checkout-stepper li:last-child::after {
            display: none;
        }

        .checkout-stepper li.completed::after {
            background: #111827;
        }
/* ============================
   2) Phone prefix inside input, with distinct bg
   ============================ */
.phone-field {
    position: relative;
    width: 100%;
}

    .phone-field .phone-prefix {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #111;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-right: none;
        padding: 9px 10px;
        border-radius: 6px 0 0 6px;
        pointer-events: none;
    }

        .phone-field .phone-prefix img {
            width: 20px;
            height: 14px;
            border-radius: 2px;
            display: block;
        }

    .phone-field .form-control {
        padding-left: 116px !important; /* room for prefix capsule */
        min-height: 38px;
        border-radius: 6px; /* keeps rounded on the right */
    }
/* ============================
   3) Shipping summary – definition grid
   ============================ */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin: 0;
}

    .summary-grid > div {
        display: grid;
        grid-template-columns: 120px 1fr;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #f3f3f3;
    }

        .summary-grid > div.full {
            grid-column: 1 / -1;
        }

    .summary-grid dt {
        margin: 0;
        color: #6b7280;
        font-weight: 600;
        font-size: 13px;
    }

    .summary-grid dd {
        margin: 0;
        color: #111827;
        font-size: 14px;
    }
/* ============================
   4) Review table – columns & qty control
   ============================ */
/* Columns: img | details | qty | price | actions */
.checkout-table {
    width: 100%;
    table-layout: fixed;
}

    .checkout-table th:nth-child(1), .checkout-table td:nth-child(1) {
        width: 84px;
    }

    .checkout-table th:nth-child(2),
    .checkout-table td:nth-child(2) {
        width: 38%; /* reduced width from “auto” to a fixed fraction */
        word-break: break-word;
    }

    .checkout-table th:nth-child(3), .checkout-table td:nth-child(3) {
        width: 140px;
        text-align: center;
    }

    .checkout-table th:nth-child(4), .checkout-table td:nth-child(4) {
        width: 140px;
        text-align: right;
        white-space: nowrap;
    }

    .checkout-table th:nth-child(5), .checkout-table td:nth-child(5) {
        width: 44px;
        text-align: center;
    }
/* Qty control (no vertical stacking) */
.qty-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 6px;
    background: #fff;
}

.btn-qty {
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

    .btn-qty:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.qty-input {
    width: 48px;
    height: 28px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
}
/* Images */
.checkout-table img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
/* Buttons (global touch-up) */
.btn-primary {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

    .btn-primary:hover {
        background: #333 !important;
        border-color: #333 !important;
    }
/* Validation red (kept from earlier; ensures borders/text go red) */
.form-control.input-validation-error,
.form-control.invalid,
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.08);
}

.validation-message, .validation-errors, .validation-summary-errors {
    color: #dc3545 !important;
}

.checkout-table th,
.checkout-table td {
    padding: 8px 10px;
}
/* Ensure the container can clip/scroll if absolutely necessary */
.table-responsive {
    overflow-x: auto;
}
/* Table should NOT exceed parent width */
.checkout-table {
    width: 100%;
    table-layout: fixed; /* prevents content from expanding columns */
    border-collapse: separate;
}
    /* Let long product names wrap instead of widening the table */
    .checkout-table th,
    .checkout-table td {
        overflow-wrap: anywhere; /* modern wrap */
        word-break: break-word; /* legacy fallback */
        padding: 8px 10px; /* slightly tighter */
    }
        /* Details column tighter (we also set via <colgroup>, but keep as safety) */
        .checkout-table th:nth-child(2),
        .checkout-table td:nth-child(2) {
            width: 38%;
        }
/* Qty control must not stretch */
.qty-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 6px;
    background: #fff;
    max-width: 140px; /* hard cap */
    width: 100%;
    justify-content: center;
}

.btn-qty {
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto; /* don't let buttons stretch */
}

    .btn-qty:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.qty-input {
    width: 48px; /* fixed input width */
    min-width: 44px;
    height: 28px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    flex: 0 0 auto; /* keep fixed */
}
/* Price cell can wrap if space is super-tight (prevents overflow on tiny screens) */
.checkout-table th:nth-child(4),
.checkout-table td:nth-child(4) {
    white-space: normal; /* was nowrap somewhere? allow wrap */
    text-align: right;
}
/* Image stays compact */
.checkout-table img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
/* Last column tiny */
.checkout-table th:nth-child(5),
.checkout-table td:nth-child(5) {
    text-align: center;
}
/* Mobile rescue: on very narrow screens, make details slightly smaller and compress qty */
@media (max-width: 480px) {
    .checkout-table th:nth-child(2),
    .checkout-table td:nth-child(2) {
        width: 34%;
    }

    .qty-control {
        max-width: 120px;
    }

    .qty-input {
        width: 40px;
    }
}

.checkout-success .checkmark {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    border: 2px solid #28a745;
    display: inline-block;
    font-size: 28px;
    color: #28a745;
    margin-bottom: 8px;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: .35rem 1rem;
    margin: 0;
}

    .summary-grid .full {
        grid-column: 1 / -1;
    }

    .summary-grid dt {
        font-weight: 600;
        color: #374151;
    }

    .summary-grid dd {
        margin: 0;
        color: #111827;
    }

@media (max-width: 576px) {
    .summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.table td, .table th {
    vertical-align: middle;
}
/* Enforced main gallery image behavior */
.mySwiper4 .swiper-slide > img {
    width: 100%;
    height: auto;
    object-fit: contain !important;
}

.custom-size-panel {
    margin-top: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px
}

.custom-size-group {
    margin-top: 10px
}

.custom-size-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px
}

.req {
    color: #c00
}

.muted {
    color: #666;
    font-size: .9rem
}

.invoice-table td .text-muted.small div + div {
    margin-top: 2px;
}

.flex-row {
    display: flex;
    align-items: center;
}

.gap-2 {
    gap: .5rem;
}

.field-error {
    margin-top: 6px;
    font-size: .85rem;
    color: #b00020; /* danger tone */
}

.invalid { /* wrapper */
    outline: none;
}

    .invalid .size,
    .invalid .color,
    .custom-size-input.invalid {
        box-shadow: 0 0 0 2px rgba(176,0,32,.25);
        border: 1px solid rgba(176,0,32,.55);
        border-radius: 10px;
    }

.flash {
    animation: auraeFlash .6s ease;
}

@keyframes auraeFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(176,0,32,.35);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(176,0,32,0);
    }
}
/* Cart CSS */
/* ==========================================================
   AURAE MINI-CART — FINAL OVERRIDES (place at very end)
   Specs:
     • Parent form width: 325px
     • Table width: 300px
     • Columns: 70 | 155 | 75
     • Row 3 (merged col1+col2) internal split: 155 | 70
     • Total column vertical-align: middle
   ========================================================== */

/* 0) Safety: confine everything to the drawer */
.cart-sidebar form {
    width: 350px !important; /* parent container width */
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Inner wrapper matches table width (breathing room inside the 325px form) */
.cart-sidebar .cart-inner {
    width: 350px !important; /* working width */
    padding: 0px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
/* 1) Target ONLY the minicart table (avoid global .table/.cart-table) */
.cart-sidebar .aurae-mini-cart {
    width: 345px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 auto !important;
    background: #fff !important;
    font-size: 13px !important;
    border: 1px solid #e9edf2 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
/* If old classes remain by accident, force them too */
.cart-sidebar table.aurae-mini-cart.cart-table,
.cart-sidebar table.aurae-mini-cart.cart-table--fixed {
    width: 300px !important;
    table-layout: fixed !important;
}
/* 2) Exact column widths: 70 | 155 | 75 */
.cart-sidebar .aurae-mini-cart col.col-1 {
    width: 70px !important;
}

.cart-sidebar .aurae-mini-cart col.col-2 {
    width: 155px !important;
}

.cart-sidebar .aurae-mini-cart col.col-3 {
    width: 110px !important;
}
/* 3) Cells — tidy spacing and borders */
.cart-sidebar .aurae-mini-cart td {
    padding: 4px 8px !important;
    vertical-align: top !important;
    border-bottom: 1px solid #f2f4f7 !important;
    /*background: #fff !important;*/
    overflow: hidden; /* prevents any inner margins from expanding width */
}

.cart-sidebar .aurae-mini-cart tr:last-child td {
    border-bottom: none !important;
}
/* 4) Row 1 — product title (colspan=2) + total (rowspan=3) */
.cart-sidebar .aurae-mini-cart .mc-title .mc-name {
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Total column: vertical middle + separator + safe sizing */
.cart-sidebar .aurae-mini-cart .mc-total {
    text-align: right !important;
    vertical-align: middle !important; /* ← centered vertically */
    white-space: nowrap !important;
    border-left: 1px solid #e9edf2 !important; /* vertical separator */
    padding-left: 8px !important;
    background: #fafbfc !important;
}

.cart-sidebar .aurae-mini-cart .mc-total-amount {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.1px !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
    /* If huge numbers appear, keep inside 75px gracefully */
    text-overflow: ellipsis !important;
}
/* 5) Row 2 — image + details */
.cart-sidebar .aurae-mini-cart .mc-img {
    text-align: center !important;
}

.cart-sidebar .aurae-mini-cart .mc-thumb {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    border: 1px solid #eceff3 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
/* Inline attributes */
.cart-sidebar .aurae-mini-cart .mc-detail-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

    .cart-sidebar .aurae-mini-cart .mc-detail-inline > * {
        margin: 0 !important;
    }

.cart-sidebar .aurae-mini-cart .mc-color {
    width: 14px !important;
    height: 14px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
}

.cart-sidebar .aurae-mini-cart .mc-size-label {
    color: #6b7280 !important;
    font-size: .8rem !important;
}

.cart-sidebar .aurae-mini-cart .mc-size-pill {
    border: 1px solid #e6eaf0 !important;
    border-radius: 999px !important;
    padding: 0 6px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    color: #111827 !important;
    background: #f9fafb !important;
}

.cart-sidebar .aurae-mini-cart .mc-custom {
    margin-top: 6px !important;
    display: inline-flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding: 4px 3px !important;
    border-radius: 999px !important;
    background: #f4f6fa00 !important;
    border: 1px solid #e8edf5 !important;
    font-size: .78rem !important;
    color: #2d3748 !important;
}

    .cart-sidebar .aurae-mini-cart .mc-custom .dot {
        opacity: .55 !important;
    }
/* 6) Row 3 — merged cell (colspan=2 = 225px), grid split: 155 | 70 */
.cart-sidebar .aurae-mini-cart .mc-controls {
    padding-top: 4px !important;
}

.cart-sidebar .aurae-mini-cart .mc-controls-grid {
    display: grid !important;
    grid-template-columns: 155px 65px !important; /* left=Qty, right=Remove */
    align-items: center !important;
    gap: 0 !important;
}
/* Qty left (155px) */
.cart-sidebar .aurae-mini-cart .mc-qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.cart-sidebar .aurae-mini-cart .mc-qty-label {
    color: #6b7280 !important;
    font-size: .8rem !important;
}

.cart-sidebar .aurae-mini-cart .mc-stepper {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 1px rgba(16,24,40,.04) !important;
}

.cart-sidebar .aurae-mini-cart .mc-step {
    width: 24px !important;
    height: 26px !important;
    border: none !important;
    background: #f7f8fa !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

    .cart-sidebar .aurae-mini-cart .mc-step:hover {
        background: #eef1f5 !important;
    }

.cart-sidebar .aurae-mini-cart .mc-qty-input {
    width: 36px !important;
    height: 26px !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #111827 !important;
}
/* Remove right (70px) */
.cart-sidebar .aurae-mini-cart .mc-remove {
    text-align: right !important;
}

.cart-sidebar .aurae-mini-cart .mc-remove-btn {
    border: 1px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 8px !important;
    color: #c62828 !important;
}

    .cart-sidebar .aurae-mini-cart .mc-remove-btn:hover {
        background: #fdecea !important;
        border-color: #f6b1b1 !important;
    }
/* 7) Last-mile safety: prevent any global table rules from sneaking in */
.cart-sidebar .aurae-mini-cart td,
.cart-sidebar .aurae-mini-cart th {
    /* neutralize stray global paddings/margins */
    margin: 0 !important;
}
/* ===== Qty stepper: lock widths so + can't be overlapped ===== */
.aurae-mini-cart .mc-stepper {
    display: inline-grid !important; /* grid = no flex growth */
    grid-template-columns: 24px 38px 24px !important; /* [-] [input] [+] */
    align-items: center !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 999px !important;
    overflow: hidden !important; /* keeps the rounded pill */
    background: #fff !important;
    box-shadow: 0 1px 1px rgba(16,24,40,.04) !important;
    height: 26px !important; /* stable height */
}
/* Buttons: fixed cells */
.aurae-mini-cart .mc-step {
    width: 24px !important;
    height: 26px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: #f7f8fa !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

    .aurae-mini-cart .mc-step:hover {
        background: #eef1f5 !important;
    }
/* Input: fixed cell that cannot grow over the + */
.aurae-mini-cart .mc-qty-input {
    width: 38px !important; /* matches grid slot */
    height: 26px !important;
    text-align: center !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    background: transparent !important;
}
    /* If you ever switch to type="number", remove native spinners */
    .aurae-mini-cart .mc-qty-input::-webkit-outer-spin-button,
    .aurae-mini-cart .mc-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .aurae-mini-cart .mc-qty-input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }
/* Grand total (col1 label + colspan col2+3 block) */
.aurae-mini-cart .mc-grandtotal-alt td {
    border-top: 2px solid #e5e7eb !important;
}

.aurae-mini-cart .mc-grandtotal-label {
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #555 !important;
    padding: 10px 8px !important;
    background: #fff !important;
    border-right: none !important;
}
/* The big total block across two columns */
.aurae-mini-cart .mc-grandtotal-block {
    text-align: right !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    letter-spacing: 0.3px !important;
    padding: 10px 12px !important;
    color: #ffffff !important; /* text color */
    background: linear-gradient(90deg, #111827, #1f2937) !important; /* rich dark gradient */
    border-radius: 0 0 10px 0 !important; /* match table rounding */
}
/* 1) Kill the old 300px clamp (or update it to 345) */
.cart-sidebar table.aurae-mini-cart.cart-table,
.cart-sidebar table.aurae-mini-cart.cart-table--fixed {
    width: 345px !important; /* was 300px; this mismatch causes overflow */
    table-layout: fixed !important;
}
/* 2) Hard containment for the drawer, form, and inner (no horizontal scroll) */
.cart-sidebar,
.cart-sidebar form,
.cart-sidebar .cart-inner {
    overflow-x: hidden !important;
}
/* 3) Grand total row: make the colspan block fill its cell and never overflow */
.aurae-mini-cart .mc-grandtotal-alt td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* The wide block (colspan=2 -> 155 + 110 = 265px) must not auto-size past its cell */
.aurae-mini-cart .mc-grandtotal-block {
    display: block !important; /* become a block in the cell */
    width: 100% !important; /* fill the available colspan area only */
    box-sizing: border-box !important;
    text-align: right !important;
    /* keep your current look */
    padding: 10px 12px !important;
    background: linear-gradient(90deg, #111827, #1f2937) !important;
    color: #fff !important;
    border-left: 1px solid #e9edf2 !important;
    border-radius: 0 0 10px 0 !important;
    /* prevent any inner text from pushing width */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    letter-spacing: .3px !important;
    line-height: 1.15 !important;
    font-variant-numeric: tabular-nums !important;
}
/* 4) Title bg: ensure it applies to the correct cell only (requires td.mc-title in markup) */
.cart-sidebar .aurae-mini-cart tr.item-row--title td.mc-title {
    background: #f7f8fa !important;
    border-bottom: 1px solid #e9edf2 !important;
}
/* 5) (Minor) Fix the broken selector so qty-input styles actually apply */
.cart-sidebar .aurae-mini-cart .mc-qty-input {
    /* keep your values */
    width: 38px !important;
    height: 26px !important;
    text-align: center !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    background: transparent !important;
}

td.mc-title {
    background: #fafbfc !important;
}
/* summary table same width/feel as items */
.cart-sidebar .aurae-mini-summary {
    width: 345px !important;
    max-width: 345px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    font-size: 13px !important;
    border: 1px solid #e9edf2 !important;
    border-radius: 10px !important;
    margin: 8px auto 0 !important;
    overflow: hidden !important;
}

.aurae-mini-summary col.sum-col-1 {
    width: 70px !important;
}

.aurae-mini-summary col.sum-col-23 {
    width: 265px !important;
}
/* 155 + 110 */
/* row look */
.aurae-mini-summary .mc-grandtotal-alt td {
    border-top: 2px solid #e5e7eb !important;
}

.aurae-mini-summary .mc-grandtotal-label {
    font-weight: 600 !important;
    color: #555 !important;
    background: #fff !important;
    padding: 10px 8px !important;
}

.aurae-mini-summary .mc-grandtotal-block {
    text-align: right !important;
    padding: 10px 12px !important;
    background: linear-gradient(90deg,#000,#000) !important;
    color: #fff !important;
    border-left: 1px solid #e9edf2 !important;
    border-radius: 0 0 10px 0 !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    letter-spacing: .3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* --------------------------------------------- */
/* Valdiation For Checkout */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.15);
}

.validation-message {
    color: #dc3545;
    font-size: 0.875rem;
}

.flash-error {
    animation: flashField 1s ease;
}

@keyframes flashField {
    0% {
        box-shadow: 0 0 0 .3rem rgba(220,53,69,.35);
    }

    100% {
        box-shadow: none;
    }
}

.product-description {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    max-width: 600px;
}
/* ============================================
   AURAE — CHECKOUT REVIEW (STEP 2)
   Polished table + qty steppers + icon-only delete
   ============================================ */
/* Table look */
.checkout-table {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

    .checkout-table thead th {
        background: #f8f9fb;
        border-bottom: 1px solid rgba(0,0,0,.08);
        font-weight: 600;
        color: #222;
    }

    .checkout-table td,
    .checkout-table th {
        vertical-align: middle;
    }

    .checkout-table tbody tr + tr {
        border-top: 1px solid rgba(0,0,0,.06);
    }
    /* Total row emphasis (kept inside tbody) */
    .checkout-table .checkout-total-row td {
        border-top: 2px solid rgba(0,0,0,.12);
        font-weight: 700;
    }
    /* Product thumbnail */
    .checkout-table img {
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
/* --------------------------------------------
   Quantity control — aligned & crisp
   -------------------------------------------- */
.aurae-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
}

.aurae-qty__btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .04s ease;
}

    .aurae-qty__btn:hover:not(:disabled) {
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        border-color: rgba(0,0,0,.18);
    }

    .aurae-qty__btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .aurae-qty__btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }
/* Input number centered, same height */
.aurae-qty__input {
    width: 64px;
    height: 36px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .aurae-qty__input:focus {
        border-color: rgba(0,0,0,.25);
        box-shadow: 0 0 0 4px rgba(0,0,0,.06);
    }
    /* Remove native spin buttons (Chrome/Edge/Safari) */
    .aurae-qty__input::-webkit-outer-spin-button,
    .aurae-qty__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .aurae-qty__input[type=number] {
        -moz-appearance: textfield; /* Firefox */
    }
/* --------------------------------------------
   Icon-only button — danger (remove)
   -------------------------------------------- */
.aurae-iconbtn {
    --btn-size: 36px;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: #111;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .04s ease;
    cursor: pointer;
}

    .aurae-iconbtn svg {
        display: block;
    }

.aurae-iconbtn--danger {
    color: #c92a2a; /* Aurae red tone */
    border-color: rgba(201,42,42,.15);
    background: rgba(201,42,42,.06);
}

    .aurae-iconbtn--danger:hover {
        background: rgba(201,42,42,.12);
        border-color: rgba(201,42,42,.25);
    }

    .aurae-iconbtn--danger:active {
        transform: translateY(1px);
    }
/* --------------------------------------------
   “Custom size” text in details — subtle box
   -------------------------------------------- */
.review-item-customsize {
    margin-top: .25rem;
    padding: .4rem .6rem;
    border-radius: 10px;
    background: #f8f9fb;
    border: 1px solid rgba(0,0,0,.06);
    font-size: .875rem;
}
/* Mobile tweaks */
@media (max-width: 576px) {
    .aurae-qty__btn {
        width: 34px;
        height: 34px;
    }

    .aurae-qty__input {
        width: 56px;
        height: 34px;
    }
}
/* Aurae — checkout error polish */
.aurae-error-card {
    border-radius: 16px;
}

.aurae-error-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(201,42,42,.08);
    color: #c92a2a;
    font-size: 20px;
    font-weight: 700;
}

.aurae-error-meta {
    padding: .5rem .75rem;
    border-radius: 10px;
    background: #f8f9fb;
    border: 1px solid rgba(0,0,0,.06);
}
/* ===== Aurae — Checkout Success (external CSS) ===== */
/* Card container */
.checkout-success .invoice.card {
    border-radius: 18px;
    padding: clamp(1.25rem, 2vw + 0.5rem, 2rem) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.06);
}
/* Brand */
.brand-logo {
    font-weight: 800;
    letter-spacing: .24em;
    font-size: 28px;
}

.brand-sub {
    font-size: 12px;
    color: #6c757d;
}
/* Section labels */
.section-label {
    font-weight: 700;
    letter-spacing: .02em;
    color: #111;
    margin-bottom: .75rem;
}
/* “Soft” cards */
.checkout-success .card.soft {
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fffdfc);
}
/* Status badge */
.status-badge {
    background: #111;
    color: #fff;
    border-radius: 999px;
    padding: .45rem .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}
/* Table spacing & bits */
.invoice-table th,
.invoice-table td {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.invoice-table .thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
}

.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 6px;
    border: 1px solid rgba(0,0,0,.15);
}
/* Mobile tweaks */
@media (max-width: 576px) {
    .checkout-success .invoice.card {
        padding: 1.25rem !important;
    }

    .invoice-table th:nth-child(3),
    .invoice-table th:nth-child(4),
    .invoice-table th:nth-child(5),
    .invoice-table td:nth-child(3),
    .invoice-table td:nth-child(4),
    .invoice-table td:nth-child(5) {
        font-size: .95rem;
    }
}