/* =========================================================================
   Blog-page CSS starts here 
========================================================================= */

/* SECTION */
.blog-page .blog {
    padding: clamp(4rem, 2.156rem + 6.585vi, 14.8rem) 0;
}

/* GRID */
.blog-page .blog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 6rem;
}

.blog-page .blog-title__tagline span {
    font-weight: 700;
}
/* CARD */
.blog-page .blog__card {
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* IMAGE */
.blog-page .blog__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* OVERLAY */
.blog-page .blog__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
}

/* LABEL */
.blog-page .blog__card-label {
    position: absolute;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--secondary-color);
    z-index: 2;
    letter-spacing: 0.1rem;
    font-size: clamp(2.7rem, 2.137rem + 2.012vi, 6rem);
    font-weight: 600;
    font-family: var(--font-clash-display);
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* HOVER */
.blog-page .blog__card:hover .blog__card-image {
    transform: scale(1.08);
}

/* -------------------------------------------------------------------
   BLOG SLIDER CSS starts here
------------------------------------------------------------------- */

.blog-page .blog-highlight__meta--slider {
    margin-bottom: 0 !important;
}

.blog-page .slider__title {
    margin-bottom: 0.8rem;
    font-size: clamp(1.6rem, 0.815rem + 2.805vi, 6.2rem);
    margin-bottom: clamp(0.4rem, 0.263rem + 0.488vi, 1.2rem);
    font-weight: 500;
}

.blog-page .slider__meta {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #2563eb;
    display: flex;
    gap: 8px;
}

/* -------------------------------------------------------------------
   BLOG SLIDER CSS ends here
------------------------------------------------------------------- */
/* ========================================
   Blog Page Response
   ======================================== */

/* ===== Large Desktop (max-width: 1499.98px) ===== */
@media (max-width: 1499.98px) {
    .blog-page .blog__grid {
        padding-top: 5rem;
    }

    .blog-page .blog__card-label {
        bottom: 6rem;
    }
}

/* ===== Desktop (max-width: 1199.98px) ===== */
@media (max-width: 1199.98px) {
    .blog-page .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 4.5rem;
    }

    .blog-page .blog__card-label {
        bottom: 5rem;
        letter-spacing: 0.12rem;
    }
}

/* ===== Tablet (max-width: 991.98px) ===== */
@media (max-width: 991.98px) {
    .blog-page .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 4rem;
    }

    .blog-page .blog__card-label {
        bottom: 4.5rem;
        letter-spacing: 0.1rem;
    }

    .blog-page .slider__meta {
        font-size: 1.1rem;
        gap: 0.6rem;
    }
    .blog-page .slider__nav {
        margin-top: clamp(0.8rem, 0.766rem + 0.122vi, 1rem);
    }
}

/* ===== Small Tablet (max-width: 767.98px) ===== */
@media (max-width: 767.98px) {
    .blog-page .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 3rem;
        gap: 0;
    }

    .blog-page .blog__card-label {
        bottom: 3.5rem;
        letter-spacing: 0.08rem;
    }

    .blog-page .slider__title {
        margin-bottom: 0.6rem;
    }
}

/* ===== Mobile (max-width: 575.98px) ===== */
@media (max-width: 575.98px) {
    .blog-page .blog__grid {
        grid-template-columns: 1fr;
        padding-top: 2.5rem;
    }

    .blog-page .blog__card-label {
        bottom: 3rem;
        letter-spacing: 0.06rem;
    }

    .blog-page .slider__meta {
        font-size: 1rem;
        gap: 0.5rem;
    }
}

/* ===== Small Mobile (max-width: 424.98px) ===== */
@media (max-width: 424.98px) {
    .blog-page .blog__grid {
        padding-top: 2rem;
    }

    .blog-page .blog__card-label {
        bottom: 2.5rem;
    }

    .blog-page .slider__title {
        margin-bottom: 0.4rem;
    }
}

/* ===== Extra Small Mobile (max-width: 374.98px) ===== */
@media (max-width: 374.98px) {
    .blog-page .blog__grid {
        padding-top: 1.8rem;
    }

    .blog-page .blog__card-label {
        bottom: 2rem;
        letter-spacing: 0.05rem;
    }

    .blog-page .slider__meta {
        font-size: 0.9rem;
    }
}

/* ===== Tiny Mobile (max-width: 319.98px) ===== */
@media (max-width: 319.98px) {
    .blog-page .blog__grid {
        padding-top: 1.5rem;
    }

    .blog-page .blog__card-label {
        bottom: 1.5rem;
        letter-spacing: 0.04rem;
    }

    .blog-page .slider__title {
        margin-bottom: 0.3rem;
    }

    .blog-page .slider__meta {
        font-size: 0.85rem;
        gap: 0.4rem;
    }
}

/* =========================================================================
   Blog-page CSS ends here 
========================================================================= */

/* =========================================================================
   Blog-detail CSS starts here 
========================================================================= */

.blog-detail-page .blog-details {
    padding-block: clamp(0rem, -1.622rem + 5.793vi, 9.5rem);
}

.blog-detail-page .blog-details__header {
    background: var(--blue);
    color: var(--secondary-color);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    padding: clamp(3.4rem, 2.307rem + 3.902vi, 9.8rem)
        clamp(2.2rem, 1.722rem + 1.707vi, 5rem);
}
.blog-details__back svg {
    width: clamp(1.8rem, 1.049rem + 2.683vi, 6.2rem);
    height: clamp(1.8rem, 1.049rem + 2.683vi, 6.2rem);
}
.blog-detail-page .blog-details__back {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.4rem, 0.161rem + 0.854vi, 1.8rem);
    font-size: clamp(1.8rem, 1.493rem + 1.098vi, 3.6rem);
    font-weight: 600;
}
.blog-detail-page .blog-details__steps {
    margin-top: 3.2rem;
}
.blog-detail-page .blog-details__heading {
    font-size: clamp(1.8rem, 1.39rem + 1.463vi, 4.2rem);
    font-weight: 500;
    font-family: var(--font-clash-display);
    margin-bottom: clamp(0.8rem, 0.663rem + 0.488vi, 1.6rem);
}
.blog-detail-page .blog-details__description {
    font-size: clamp(1.2rem, 0.995rem + 0.732vi, 2.4rem);
}
.blog-detail-page .blog-details__back-text {
    display: inline-block;
}

.blog-detail-page .blog-details__title {
    font-size: clamp(2.2rem, 1.176rem + 3.659vi, 8.2rem);
    width: 100%;
    max-width: 87rem;
    width: 100%;
    margin: 0 auto;
    font-weight: 400;
    text-align: center;
}

.blog-detail-page .blog-details__highlight {
    display: block;
    font-weight: 600;
}

.blog-detail-page .blog-details__section-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.blog-detail-page .blog-details__description {
    font-size: clamp(1.2rem, 0.995rem + 0.732vi, 2.4rem);
}

.blog-detail-page .blog-details__content {
    margin-top: 3.2rem;
}
/* Common blog in all sections */
.blog-title__tagline {
    font-size: clamp(1.6rem, 0.815rem + 2.805vi, 6.2rem);
    margin-bottom: clamp(0.4rem, 0.263rem + 0.488vi, 1.2rem);
    font-weight: 400;
    max-width: 59rem;
}

.blog-highlight__image-wrapper {
    overflow: hidden;
    border-radius: 2rem;
    position: relative;
}
.blog-details__wrapper {
    max-width: 140rem;
    padding: clamp(3rem, 0.985rem + 7.195vi, 14.8rem) 0;
    margin: 0 auto;
}
.blog-highlight__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   RELATED SECTION
========================= */
.blog-detail-page .blog-related {
    margin-bottom: clamp(2rem, 0.634rem + 4.878vi, 10rem);
}

.blog-detail-page .blog-related__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-detail-page .blog-related__title {
    font-size: clamp(2rem, 0.941rem + 3.78vi, 8.2rem);
    font-weight: 500;
}

.blog-detail-page .blog-related__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-detail-page .blog-related__close:hover {
    opacity: 0.7;
}

/* ========================================
   Blog Detail Page Response
   ======================================== */

/* ===== Large Desktop (max-width: 1499.98px) ===== */
@media (max-width: 1499.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(6.5rem, 5.5vw, 8.2rem);
        max-width: 80rem;
    }
    .blog-detail-page .blog-related {
        margin-bottom: 8rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 1.8rem;
        max-height: 70rem;
    }

    .blog-highlight__image {
        height: 70rem;
    }
}

/* ===== Desktop (max-width: 1199.98px) ===== */
@media (max-width: 1199.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(5.2rem, 5vw, 6.5rem);
        max-width: 72rem;
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 2.8rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.8rem, 1.6vw, 2rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(1.3rem, 1.2vw, 1.4rem);
    }

    .blog-detail-page .blog-related {
        margin-bottom: 7rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 1.6rem;
        max-height: 60rem;
    }

    .blog-highlight__image {
        height: 60rem;
    }
    .blog-highlight__card {
        flex-direction: column;
    }
}

/* ===== Tablet (max-width: 991.98px) ===== */
@media (max-width: 991.98px) {
    .blog-title__tagline {
        max-width: 100%;
    }

    .blog-detail-page .blog-details__title {
        font-size: clamp(4rem, 4.5vw, 5.2rem);
        max-width: 100%;
        text-align: center;
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 2.4rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.6rem, 1.5vw, 1.8rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(1.2rem, 1.1vw, 1.3rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 2.8rem;
    }

    .blog-detail-page .blog-related {
        margin-bottom: 6rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 1.4rem;
        max-height: 50rem;
    }

    .blog-highlight__image {
        height: 50rem;
    }
}

/* ===== Small Tablet (max-width: 767.98px) ===== */
@media (max-width: 767.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(3.2rem, 4vw, 4rem);
        max-width: 100%;
        padding-top: clamp(0.6rem, 0.37rem + 0.821vi, 1rem);
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 2rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.5rem, 1.4vw, 1.6rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(1.2rem, 1vw, 1.3rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 2.4rem;
    }

    .blog-detail-page .blog-related {
        margin-bottom: 5rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 1.2rem;
        max-height: 42rem;
    }

    .blog-highlight__image {
        height: 42rem;
    }
}

/* ===== Mobile (max-width: 575.98px) ===== */
@media (max-width: 575.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(2.6rem, 5vw, 3.2rem);
        max-width: 100%;
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 1.8rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.4rem, 2.4vw, 1.5rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(1.1rem, 2vw, 1.2rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 2rem;
    }

    .blog-detail-page .blog-related {
        margin-bottom: 4rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 1rem;
        max-height: 34rem;
    }

    .blog-highlight__image {
        height: 34rem;
    }
}

/* ===== Small Mobile (max-width: 424.98px) ===== */
@media (max-width: 424.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(2.2rem, 5vw, 2.6rem);
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 1.6rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.3rem, 2.4vw, 1.4rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(1rem, 2vw, 1.1rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 1.6rem;
    }

    .blog-detail-page .blog-related {
        margin-bottom: 3.5rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 0.8rem;
        max-height: 28rem;
    }

    .blog-highlight__image {
        height: 28rem;
    }
}

/* ===== Extra Small Mobile (max-width: 374.98px) ===== */
@media (max-width: 374.98px) {
    .blog-detail-page .blog-details__title {
        font-size: clamp(2rem, 5vw, 2.2rem);
    }

    .blog-detail-page .blog-details__steps {
        margin-top: 1.4rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.2rem, 2.4vw, 1.3rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(0.95rem, 2vw, 1rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 1.4rem;
    }

    .blog-detail-page .blog-related {
        margin-bottom: 3rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 0.6rem;
        max-height: 24rem;
    }

    .blog-highlight__image {
        height: 24rem;
    }
}

/* ===== Tiny Mobile (max-width: 319.98px) ===== */
@media (max-width: 319.98px) {
    .blog-detail-page .blog-details {
        padding-block: 2.5rem;
    }

    .blog-detail-page .blog-details__title {
        font-size: clamp(1.8rem, 5vw, 2rem);
    }
    .blog-detail-page .blog-details__steps {
        margin-top: 1.2rem;
    }

    .blog-detail-page .blog-details__section-title {
        font-size: clamp(1.1rem, 2.4vw, 1.2rem);
    }

    .blog-detail-page .blog-details__description {
        font-size: clamp(0.9rem, 2vw, 0.95rem);
    }

    .blog-detail-page .blog-details__content {
        margin-top: 1.2rem;
    }
    .blog-detail-page .blog-related {
        margin-bottom: 2.5rem;
    }
    .blog-highlight__image-wrapper {
        border-radius: 0.4rem;
        max-height: 20rem;
    }

    .blog-highlight__image {
        height: 20rem;
    }
}

/* =========================================================================
   Blog-detail CSS ends here 
========================================================================= */

/* =========================================================================
   Policy-pages CSS starts here 
========================================================================= */
.policy-page .policy-banner {
    padding: 11.5rem 0;
}
.policy-page .page-banner__link {
    color: var(--primary-color);
}
.policy-page .policy-banner-tagline {
    font-size: 6.2rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.policy-page .page-banner__separator {
    color: var(--primary-color);
}
.policy-page .page-banner__current {
    color: var(--primary-color);
    font-weight: 500;
}
.policy-page .policy__wrapper {
    max-width: 70.2rem;
    margin: 0 auto;
    text-align: center;
}
.policy-page .policy-pages__breadcrumb {
    padding-bottom: 8.4rem;
}
.policy-page .policy-page__text {
    margin-bottom: 3rem;
}

.policy-page .policy-page__title {
    font-size: 4.2rem;
    margin-bottom: 1.6rem;
    font-weight: 500;
}
.policy-page .policy-contents {
    margin-bottom: 13.3rem;
}
/* ========================================
   Policy  Page Response
   ======================================== */
/* ===== Large Desktop (max-width: 1499.98px) ===== */
@media (max-width: 1499.98px) {
    .policy-page .policy-banner {
        padding: 10rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(5.2rem, 4.2vw, 6.2rem);
        margin-bottom: 1rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 7rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(3.6rem, 2.8vw, 4.2rem);
        margin-bottom: 1.4rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 11rem;
    }
}

/* ===== Desktop (max-width: 1199.98px) ===== */
@media (max-width: 1199.98px) {
    .policy-page .policy-banner {
        padding: 8.5rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(4.4rem, 3.8vw, 5.2rem);
        margin-bottom: 1rem;
    }

    .policy-page .policy__wrapper {
        max-width: 60rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 6rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(3.2rem, 2.6vw, 3.6rem);
        margin-bottom: 1.2rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 2.6rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 10rem;
    }
}

/* ===== Tablet (max-width: 991.98px) ===== */
@media (max-width: 991.98px) {
    .policy-page .policy-banner {
        padding: 7rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(3.6rem, 3.5vw, 4.4rem);
        margin-bottom: 0.8rem;
    }

    .policy-page .policy__wrapper {
        max-width: 52rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 5rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(2.8rem, 2.4vw, 3.2rem);
        margin-bottom: 1.2rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 2.4rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 8.5rem;
    }
}

/* ===== Small Tablet (max-width: 767.98px) ===== */
@media (max-width: 767.98px) {
    .policy-page .policy-banner {
        padding: 6rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(3rem, 3.5vw, 3.6rem);
        margin-bottom: 0.8rem;
    }

    .policy-page .policy__wrapper {
        max-width: 100%;
        text-align: left;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 4rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(2.4rem, 2.4vw, 2.8rem);
        margin-bottom: 1rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 2.2rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 7rem;
    }
}

/* ===== Mobile (max-width: 575.98px) ===== */
@media (max-width: 575.98px) {
    .policy-page .policy-banner {
        padding: 5rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(2.4rem, 5vw, 3rem);
        margin-bottom: 0.6rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 3.2rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(2rem, 3.5vw, 2.4rem);
        margin-bottom: 1rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 2rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 6rem;
    }
}

/* ===== Small Mobile (max-width: 424.98px) ===== */
@media (max-width: 424.98px) {
    .policy-page .policy-banner {
        padding: 4rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(2rem, 5vw, 2.4rem);
        margin-bottom: 0.6rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 2.8rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(1.8rem, 3.5vw, 2rem);
        margin-bottom: 0.8rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 1.8rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 5rem;
    }
}

/* ===== Extra Small Mobile (max-width: 374.98px) ===== */
@media (max-width: 374.98px) {
    .policy-page .policy-banner {
        padding: 3.5rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(1.8rem, 5vw, 2rem);
        margin-bottom: 0.5rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 2.4rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(1.6rem, 3.5vw, 1.8rem);
        margin-bottom: 0.8rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 1.6rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 4rem;
    }
}

/* ===== Tiny Mobile (max-width: 319.98px) ===== */
@media (max-width: 319.98px) {
    .policy-page .policy-banner {
        padding: 3rem 0;
    }

    .policy-page .policy-banner-tagline {
        font-size: clamp(1.6rem, 5vw, 1.8rem);
        margin-bottom: 0.4rem;
    }

    .policy-page .policy-pages__breadcrumb {
        padding-bottom: 2rem;
    }

    .policy-page .policy-page__title {
        font-size: clamp(1.4rem, 3.5vw, 1.6rem);
        margin-bottom: 0.6rem;
    }

    .policy-page .policy-page__text {
        margin-bottom: 1.4rem;
    }

    .policy-page .policy-contents {
        margin-bottom: 3.5rem;
    }
}
/* =========================================================================
   Policy-pages CSS ends here 
========================================================================= */

/* =========================================================================
   Error-pages CSS ends here 
========================================================================= */
.error-page {
    padding-block: 10rem 8.7rem;
}
.error-page .error__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.error-page .error-title__tagline {
    font-size: clamp(1.6rem, 0.815rem + 2.805vi, 6.2rem);
    margin-bottom: clamp(0.4rem, 0.263rem + 0.488vi, 1.2rem);
}
.error-page .error-title__description {
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
}
.error-page .error-not-found {
    max-width: 83rem;
    text-align: center;
    margin: 0 auto;
}

/* ========================================
   Error  Page Response
   ======================================== */

/* ===== Large Desktop (max-width: 1499.98px) ===== */
@media (max-width: 1499.98px) {
    .error-page .error-page {
        padding: 9rem 7rem;
    }

    .error-page .error-not-found {
        max-width: 75rem;
    }
}

/* ===== Desktop (max-width: 1199.98px) ===== */
@media (max-width: 1199.98px) {
    .error-page .error-page {
        padding: 8rem 5.5rem;
    }

    .error-page .error-not-found {
        max-width: 65rem;
    }
}

/* ===== Tablet (max-width: 991.98px) ===== */
@media (max-width: 991.98px) {
    .error-page .error-page {
        padding: 7rem 4rem;
    }

    .error-page .error-not-found {
        max-width: 55rem;
    }
}

/* ===== Small Tablet (max-width: 767.98px) ===== */
@media (max-width: 767.98px) {
    .error-page .error-page {
        padding: 6rem 3rem;
    }

    .error-page .error-not-found {
        max-width: 46rem;
    }
}

/* ===== Mobile (max-width: 575.98px) ===== */
@media (max-width: 575.98px) {
    .error-page .error-page {
        padding: 5rem 2rem;
    }

    .error-page .error-not-found {
        max-width: 100%;
    }
}

/* ===== Small Mobile (max-width: 424.98px) ===== */
@media (max-width: 424.98px) {
    .error-page .error-page {
        padding: 4rem 1.6rem;
    }

    .error-page .error-not-found {
        max-width: 100%;
    }
}

/* ===== Extra Small Mobile (max-width: 374.98px) ===== */
@media (max-width: 374.98px) {
    .error-page .error-page {
        padding: 3.5rem 1.4rem;
    }

    .error-page .error-not-found {
        max-width: 100%;
    }
}

/* ===== Tiny Mobile (max-width: 319.98px) ===== */
@media (max-width: 319.98px) {
    .error-page .error-page {
        padding: 3rem 1.2rem;
    }

    .error-page .error-not-found {
        max-width: 100%;
    }
}
/* =========================================================================
   Error-pages CSS ends here 
========================================================================= */
/* =========================================================================
   Account Page CSS starts here 
========================================================================= */
/* Common account css for all Account pages starts */
.account {
    padding: clamp(1.8rem, 1.083rem + 2.561vi, 6rem) 0;
}

.account__wrapper {
    display: flex;
    gap: clamp(1.6rem, 0.917rem + 2.439vi, 5.6rem);
}
.account__sidebar {
    flex-shrink: 0;
    max-width: clamp(23rem, -5.862rem + 29.095vi, 50rem);
    width: 100%;
    background: var(--bg-light);
    border-radius: clamp(1.8rem, 1.424rem + 1.341vi, 4rem);
    padding: clamp(1.2rem, 0.859rem + 1.22vi, 3.2rem);
    position: sticky;
    top: clamp(7rem, 5.976rem + 3.659vi, 13rem);
    height: 100%;
}

.sidebar-nav__list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.2rem, 0.098rem + 0.366vi, 0.8rem);
}

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 0.459rem + 1.22vi, 2.8rem);
    padding-block: clamp(1rem, 0.624rem + 1.341vi, 3.2rem);
    padding-inline: clamp(1.4rem, 0.82rem + 2.073vi, 4.8rem);
    font-size: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    font-weight: 500;
    color: var(--primary-color);
    border-radius: clamp(1.2rem, 1.063rem + 0.488vi, 2rem);
    transition:
        0.3s ease,
        color 0.3s ease;
    cursor: pointer;
}

.sidebar-nav__link:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Active State - Black Pill */
.sidebar-nav__item--active .sidebar-nav__link {
    background: var(--primary-color);
    color: var(--secondary-color);
    font-weight: 600;
}

.sidebar-nav__item--active .sidebar-nav__link:hover {
    background: var(--primary-color);
}
.sidebar-nav__link svg {
    width: clamp(1.4rem, 1.161rem + 0.854vi, 2.8rem);
    height: clamp(1.4rem, 1.161rem + 0.854vi, 2.8rem);
}
.sidebar-nav__icon path,
.sidebar-nav__icon circle,
.sidebar-nav__icon rect {
    fill: currentColor;
}
.sidebar-nav__item--active .sidebar-nav__icon path,
.sidebar-nav__item--active .sidebar-nav__icon circle,
.sidebar-nav__item--active .sidebar-nav__icon rect {
    fill: var(--secondary-color);
}

.account__content {
    flex: 1;
    padding-top: clamp(0.8rem, 0.39rem + 1.463vi, 3.2rem);
}
/* Page content column must stretch to fill beside the sidebar */
.account-page,
.addresses-page,
.update-password-page {
    flex: 1;
    min-width: 0;
}
/* common css for Account pages ends */
/* ========================================
   Profile  portion CSS starts
   ======================================== */
.account-page .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0.8rem, 0.595rem + 0.732vi, 2rem);
    margin-bottom: clamp(2rem, 0.634rem + 4.878vi, 10rem);
}

.account-page .profile-header__info {
    flex: 1;
    min-width: 0;
}
.account-page .profile-edit__button svg {
    width: clamp(1.2rem, 1.014rem + 0.665vi, 2.29rem);
    height: clamp(1.2rem, 1.014rem + 0.665vi, 2.29rem);
}
.account-page .profile-edit__button {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.68rem + 0.427vi, 1.5rem);
    color: var(--blue);
    font-size: clamp(1.4rem, 1.236rem + 0.585vi, 2.36rem);
    font-weight: 500;
    font-family: var(--font-clash-display);
}
/* Badge */
.account-page .profile-header__badge {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.4rem, 0.332rem + 0.244vi, 0.8rem);
    font-weight: 500;
    color: var(--blue);
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
}
/* Title */
.account-page .profile-header__title {
    font-size: clamp(1.8rem, 1.39rem + 1.463vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}

.account-page .profile-header__title span {
    font-weight: 700;
}

/* Subtitle */
.account-page .profile-header__subtitle {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--grey-secondary);
}

.account-page .profile-details__wrapper {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 0.634rem + 4.878vi, 10rem);
}

.account-page .profile-details__item {
    display: flex;
    flex-direction: column;
    gap: clamp(0.2rem, 0.132rem + 0.244vi, 0.6rem);
    padding-bottom: clamp(1.8rem, 1.339rem + 1.646vi, 4.5rem);
}
.account-page .profile-deatils__info,
.account-page .profile-deatils__bio {
    width: 100%;
    max-width: 33rem;
}

.account-page .profile-details__label {
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    color: var(--grey-light);
}

.account-page .profile-details__value {
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    color: var(--primary-color);
}
/* ========================================
   Profile portion CSS ends
   ======================================== */
/* ========================================
   Account Sidebar Response
   ======================================== */

/* Tablet */
@media (max-width: 992px) {
    .account__sidebar {
        max-width: 22rem;
        padding: 1.6rem 1.2rem;
    }

    .profile-details__item {
        align-items: center;
    }
    .account-page .profile-details__value {
        text-align: center;
    }
}

/* Small tablet */
@media (max-width: 768px) {
    .account__wrapper {
        flex-direction: column;
        gap: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
    }

    .account__sidebar {
        max-width: 100%;
        position: relative;
        top: unset;
        border-radius: clamp(1.2rem, 1.132rem + 0.244vi, 1.6rem);
        padding: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    }
    /* Common CSS for Account pages */

    .sidebar-nav__list {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: space-between;
    }

    .sidebar-nav__list::-webkit-scrollbar {
        display: none;
    }

    .sidebar-nav__item {
        flex-shrink: 0;
    }

    .sidebar-nav__link {
        white-space: nowrap;
        padding: 0.8rem 1.2rem;
    }
    .account-page .profile-header {
        align-items: center;
    }
}

/* =========================================================================
   Account Page CSS ends here 
========================================================================= */

/* =========================================================================
   Edit-profile Page CSS starts here 
========================================================================= */
.account-page .edit-account__content {
    flex: 1;
    padding-top: clamp(2.4rem, 1.854rem + 1.951vi, 5.6rem);
}
.account-page .profile-form-section__title {
    font-size: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    font-weight: 500;
}
.form-field__label {
    font-size: clamp(1.6rem, 1.463rem + 0.488vi, 2.4rem);
}
.account-page .profile-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 1.5rem + 2vw, 4rem);
    row-gap: 0;
}

.profile-form__grid .form-field {
    margin-bottom: clamp(1rem, 0.693rem + 1.098vi, 2.8rem);
}

/* Beauty Preferences (Checkbox Group) */
.account-page .preferences {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.8rem, 0.663rem + 0.488vi, 1.6rem)
        clamp(2rem, 1.146rem + 3.049vi, 7rem);
}

.account-page .preferences__item {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.6rem, 0.532rem + 0.244vi, 1rem);
    cursor: pointer;
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.332rem + 0.244vi, 1.8rem);
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.account-page .preferences__label {
    line-height: 1;
    user-select: none;
}

/* Smaller checkbox for preferences */
.account-page .custom-checkbox__checkmark--profile-edit {
    width: clamp(1.2rem, 0.995rem + 0.732vi, 2.4rem);
    height: clamp(1.2rem, 0.995rem + 0.732vi, 2.4rem);
}

/* Form Actions (Cancel / Save) */
.account-page .profile-form__actions {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3.2rem);
    max-width: 60rem;
    margin-top: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    margin-left: auto;
    margin-right: auto;
}
.account-page .profile-form {
    padding-block: clamp(1.2rem, 0.859rem + 1.22vi, 3.2rem)
        clamp(3rem, 1.805rem + 4.268vi, 10rem);
}
.account-page .profile-form__actions .btn {
    flex: 1;
    max-width: 28rem;
    font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
    padding-block: clamp(1.4rem, 1rem + 1vw, 2rem);
    border-radius: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
}

/* Custom Select Dropdown Arrow */

.form-field__select {
    background-image: url("../images/icons/down-arrow.svg");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    background-size: 1.6rem;
    padding-right: 5rem;
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--grey-secondary);
}
/* ========================================
   Profile Section
   ======================================== */

/* Small tablet */
@media (max-width: 768px) {
    .account-page .profile-form__grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        column-gap: clamp(2rem, 1.5rem + 2vw, 4rem);
        row-gap: 0;
    }
    .account-page .preferences {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .profile-details__grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
}

/* =========================================================================
   Edit-profile Page CSS ends here 
========================================================================= */
/* ========================================
   Orders CSS starts here
   ======================================== */
.account-page .orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: clamp(1.4rem, 1.024rem + 1.341vi, 3.6rem)
        clamp(2rem, 1.59rem + 1.463vi, 4.4rem);
}
.account-page .order-item__title {
    font-size: clamp(1.6rem, 1.224rem + 1.341vi, 3.8rem);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.order-item__description {
    font-size: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
}
/* ===== Left Info Block ===== */
.account-page .orders-header__info {
    flex: 1;
    min-width: 0;
    max-width: 43rem;
}

.account-page .orders-header__title {
    font-size: clamp(1.6rem, 0.815rem + 2.805vi, 6.2rem);
    font-weight: 400;
    margin-bottom: clamp(0.4rem, 0.332rem + 0.244vi, 0.8rem);
}

.account-page .orders-header__subtitle {
    font-size: clamp(1.2rem, 1.132rem + 0.244vi, 1.6rem);
    color: var(--grey-secondary);
}

/* ===== Right Search Bar ===== */
.account-page .orders-header__search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    padding-inline: clamp(0.8rem, 0.612rem + 0.671vi, 1.9rem);
    padding-block: clamp(1.4rem, 1.178rem + 0.793vi, 2.7rem);
    max-width: clamp(22rem, -2.586rem + 24.784vi, 45rem);
    min-height: clamp(3.6rem, 2.746rem + 3.049vi, 8.6rem);
    width: 100%;
    flex-shrink: 0;
    gap: 1.6rem;
    transition: background 0.3s ease;
}

.account-page .orders-header__search:focus-within {
    background: var(--grey-extra-light);
}

.account-page .orders-header__search-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--primary-color);
}
.orders-header__search-label svg {
    width: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    height: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
}

.account-page .orders-header__search-input {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: clamp(1.4rem, 0.331rem + 1.078vi, 2.4rem);
}

.account-page .orders-header__search-input::placeholder {
    color: var(--primary-color);
    opacity: 1;
}

/* Remove default search input styling */
.account-page .orders-header__search-input::-webkit-search-decoration,
.account-page .orders-header__search-input::-webkit-search-cancel-button,
.account-page .orders-header__search-input::-webkit-search-results-button,
.account-page .orders-header__search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.account-page .orders__list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    flex: 1;
    margin-bottom: 4rem;
}
.account-page .order-item__left {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 0.732rem + 2.744vi, 6rem);
}
.account-page .order-item__image img {
    border-radius: clamp(1.5rem, 1.073rem + 1.524vi, 4rem);
    width: clamp(8rem, 6.156rem + 6.585vi, 18.8rem);
    height: clamp(8rem, 6.156rem + 6.585vi, 18.8rem);
}

.account-page .order-item__wrapper {
    background: var(--bg-light);
    border-radius: clamp(1.4rem, 0.956rem + 1.585vi, 4rem);
    padding: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-page .order-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 0.727rem + 0.976vi, 2.6rem);
    margin-top: clamp(1.4rem, 1.161rem + 0.854vi, 2.8rem);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    font-weight: 500;
    font-family: var(--font-clash-display);
    color: var(--grey-secondary);
}

.account-page .order-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.account-page .order-meta__divider {
    width: 0.1rem;
    height: 3.2rem;
    background: var(--grey-muted);
    display: inline-block;
}
.account-page .order-meta__item--payment {
    color: var(--green);
}

.account-page .order-actions {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1.161rem + 0.854vi, 2.8rem);
    margin-top: clamp(1rem, 0.693rem + 1.098vi, 2.8rem);
    flex-wrap: wrap;
}
/* Status color variants */

.account-page .order-actions__status {
    color: var(--blue);
    font-weight: 500;
}
.account-page .order-actions__status-value--processing {
    color: var(--yellow);
}

.account-page .order-actions__status-value--delivered {
    color: var(--green);
}

.account-page .order-actions__status-value--cancelled {
    color: var(--red);
}

/* Cancel Order Link */
.order-actions__cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    font-family: var(--font-clash-display);
    font-weight: 500;
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    transition: opacity 0.3s ease;
}
.order-actions__cancel:hover {
    opacity: 0.75;
    color: var(--red);
    text-decoration: underline;
}
.order-actions__cancel svg {
    width: clamp(1.4rem, 1.255rem + 0.518vi, 2.25rem);
    height: clamp(1.4rem, 1.255rem + 0.518vi, 2.25rem);
}
.account-page .order-price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    align-self: stretch;
    white-space: nowrap;
}

.account-page .order-price__amount {
    font-family: var(--font-clash-display);
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 500;
    color: var(--primary-color);
}

.account-page .order-price__view-details {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.6rem, 0.498rem + 0.366vi, 1.2rem);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    font-family: var(--font-clash-display);
    font-weight: 500;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.account-page .order-price__view-details:hover {
    color: var(--blue);
}

.account-page .order-price__view-details svg {
    transition: transform 0.3s ease;
}

.account-page .order-price__view-details:hover svg {
    transform: translateX(0.3rem);
}

/* ========================================
   Orders Section Response
   ======================================== */

/* Tablet */
@media (max-width: 992px) {
    .account-page .orders-header__search {
        min-width: 30rem;
    }
}

/* Small tablet */
@media (max-width: 767.98px) {
    .account-page .orders-header {
        flex-direction: column;
        gap: 1rem;
    }
    .account-page .order-item__wrapper {
        flex-direction: column;
    }
    .account-page .order-item__title {
        text-align: center;
    }
    .account-page .order-item__description {
        text-align: center;
    }
    .account-page .order-price {
        flex-direction: row;
        justify-content: center;
        gap: 0.8rem;
        align-items: center;
        min-width: unset;
        padding-top: 1rem;
    }
    .account-page .order-item__left {
        flex-direction: column;
        align-items: center;
    }
    .account-page .order-actions {
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .account-page .orders-header__search-input {
        font-size: 1.4rem;
    }
    .account-page .order-meta {
        align-items: center;
        flex-direction: column;
    }
    .account-page .order-meta__divider {
        display: none;
    }
    .order-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}
/* =========================================================================
   Order CSS ends here 
========================================================================= */

/* =========================================================================
   Order-details CSS starts here 
========================================================================= */
.order-details__wrapper {
    max-width: 140.8rem;
    margin: 0 auto;
}
.order-details {
    padding-block: clamp(2.6rem, 1.661rem + 3.354vi, 8.1rem)
        clamp(5.6rem, 4.2rem + 5vi, 13.8rem);
}

.order-details-page .order-details__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.8rem, 0.595rem + 0.732vi, 2rem);
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    flex-wrap: wrap;
}

.order-details-page .order-details__back {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.6rem, 0.566rem + 0.122vi, 0.8rem);
    font-family: var(--font-clash-display);
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 500;
    color: var(--primary-color);
    transition: opacity 0.3s ease;
}

.order-details-page .order-details__back:hover {
    opacity: 0.7;
    color: var(--primary-color);
}

.order-details-page .order-details__actions {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    flex-wrap: wrap;
}

.order-details-page .order-details__action {
    display: inline-flex;
    gap: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    font-weight: 500;
    align-items: center;
}

.order-details-page .order-details__action--download {
    color: var(--primary-color);
    text-decoration: none;
}

.order-details-page .order-details__action--download:hover {
    color: var(--primary-color);
    opacity: 0.7;
}
.order-details-page .order-details__action--download svg {
    width: clamp(1.4rem, 1.195rem + 0.732vi, 2.6rem);
    height: clamp(1.4rem, 1.195rem + 0.732vi, 2.6rem);
}
.order-details-page .order-details__product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
    flex-wrap: wrap;
}

.order-details-page .order-details__product-info {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.8rem, 1.083rem + 2.561vi, 6rem);
    flex: 1;
}

.order-details-page .order-details__product-content {
    display: flex;
    flex-direction: column;
}

.order-details-page .order-details__product-title {
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.order-details-page .order-details__product-description {
    font-size: clamp(1.2rem, 1.029rem + 0.61vi, 2.2rem);
    color: var(--grey-secondary);
    padding-bottom: clamp(1.2rem, 0.859rem + 1.22vi, 3.2rem);
}

.order-details-page .order-details__product-price {
    font-size: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.8rem, 0.663rem + 0.488vi, 1.6rem);
}

.order-details-page .order-details__product-meta {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.2rem, 0.961rem + 0.854vi, 2.6rem);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    color: var(--grey-secondary);
}

.order-details-page .order-details__product-divider {
    width: 0.1rem;
    height: clamp(1.4rem, 1.093rem + 1.098vi, 3.2rem);
    background: var(--grey-muted);
    display: inline-block;
}

/* Buy Again Button */
.order-details-page .order-details__buy-again {
    max-width: 33rem;
    padding: clamp(1.2rem, 1.012rem + 0.671vi, 2.3rem);
    font-size: clamp(1.4rem, 1.161rem + 0.854vi, 2.8rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    flex-shrink: 0;
    font-weight: 700;
}

.order-details-page .order-tracker {
    padding-block: clamp(1.8rem, 1.083rem + 2.561vi, 6rem);
}

.order-details-page .order-tracker__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.order-details-page .order-tracker__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    list-style: none;
}

/* Connector line */
.order-details-page .order-tracker__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0;
    right: -1rem;
    height: 0.2rem;
    background: var(--grey-muted);
    z-index: 0;
}
.order-details-page .order-tracker__step:last-child {
    flex: 0 0 auto;
}

/* Green connector for completed steps */
.order-details-page .order-tracker__step--completed:not(:last-child)::after {
    background: var(--green);
}

/* Marker (Circle) */
.order-details-page .order-tracker__marker {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: 0.2rem solid var(--grey-muted);
    z-index: 1;
    position: relative;
    flex-shrink: 0;
}

.order-details-page .order-tracker__step--completed .order-tracker__marker {
    background: var(--green);
    border-color: var(--green);
}

.order-details-page .order-tracker__step--pending .order-tracker__marker {
    background: var(--secondary-color);
    border-color: var(--primary-color);
}

/* Content below marker */
.order-details-page .order-tracker__content {
    margin-top: 1.2rem;
}

.order-details-page .order-tracker__date {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.order-details-page .order-tracker__status {
    font-size: 1.6rem;
}

.order-details-page .order-info {
    padding-bottom: clamp(0rem, -0.512rem + 1.829vi, 3rem);
}

.order-details-page .order-info__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.order-details-page .order-info__item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.order-details-page .order-info__label {
    font-size: clamp(1.4rem, 1.298rem + 0.366vi, 2rem);
}

.order-details-page .order-info__value {
    font-size: clamp(1.6rem, 1.463rem + 0.488vi, 2.4rem);
    font-weight: 500;
}

.order-details-page .order-info__value--success {
    color: var(--green);
}

.order-details-page .order-contact {
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.order-details-page .order-contact__grid {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 0.849rem + 2.683vi, 6rem);
}

.order-details-page .order-contact__item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.order-details-page .order-contact__label {
    font-size: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}

.order-details-page .order-contact__value {
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
    font-weight: 500;
}
.order-details-page .order-details__product-image {
    width: clamp(8rem, 6.156rem + 6.585vi, 18.8rem);
    height: clamp(8rem, 6.156rem + 6.585vi, 18.8rem);
}

/* ========================================
   Responsive: Tablet (max-width: 992px)
   ======================================== */
@media screen and (max-width: 992px) {
    .order-details-page .order-info__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem 2rem;
    }
    .order-details-page .order-details__product-info {
        padding-bottom: clamp(0.8rem, 0.266rem + 0.539vi, 1.3rem);
    }
}

/* ========================================
   Responsive: Mobile (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    .order-details-page .order-details__header {
        gap: 1.2rem;
    }

    .order-details-page .order-details__product {
        flex-direction: column;
        align-items: stretch;
    }

    .order-details-page .order-details__buy-again {
        max-width: 100%;
        width: 100%;
    }
    .order-details-page .order-contact__grid {
        justify-content: center;
    }
    .order-details-page .order-info__item {
        align-items: center;
    }
    .order-details-page .order-tracker__date {
        font-size: 1.3rem;
    }

    .order-details-page .order-tracker__status {
        font-size: 1.2rem;
    }
    .order-details-page .order-details__actions {
        width: 100%;
        justify-content: center;
    }
    .order-details-page .order-details__product-meta {
        justify-content: center;
    }

    .order-details-page .order-contact__item {
        align-items: center;
    }
}

/* ========================================
   Responsive: Small Mobile (max-width: 480px)
   ======================================== */
@media screen and (max-width: 480px) {
    .order-details-page .order-info__grid {
        grid-template-columns: 1fr;
    }

    .order-details-page .order-contact__grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    .order-details-page .order-tracker__step {
        min-width: 8rem;
    }
    .order-details-page .order-details__product-info {
        min-width: unset;
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================================
   Order-details CSS ends here 
========================================================================= */

/* ========================================
   Cancel Order Section Starts here
   ======================================== */
.cancel-order-page .cancel-order {
    padding-block: clamp(4.5rem, 3.459rem + 3.72vi, 10.6rem)
        clamp(6.5rem, 5.356rem + 4.085vi, 13.2rem);
}
.cancel-order-page .cancel-order__product {
    display: flex;
    align-items: flex-start;
    gap: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    padding-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}

.cancel-order-page .cancel-order__product-image {
    border-radius: 4rem;
}

.cancel-order-page .cancel-order__product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cancel-order-page .cancel-order__product-title {
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 700;
}

.cancel-order-page .cancel-order__product-description {
    font-size: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    padding-bottom: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
}

.cancel-order-page .cancel-order__product-price {
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 500;
    font-family: var(--font-clash-display);
}

.cancel-order-page .cancel-order__product-meta {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.2rem, 0.961rem + 0.854vi, 2.6rem);
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    color: var(--grey-secondary);
    margin-top: 1.6rem;
    flex-wrap: wrap;
    font-weight: 500;
}

.cancel-order-page .cancel-order__product-divider {
    width: 0.1rem;
    height: clamp(1.8rem, 1.561rem + 0.854vi, 3.2rem);
    background: var(--grey-muted);
    display: inline-block;
}

.cancel-order-page .cancel-form__section {
    margin-bottom: clamp(2.5rem, 1.817rem + 2.439vi, 6.5rem);
}

.cancel-order-page .cancel-form__label {
    display: block;
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    color: var(--grey-secondary);
    font-weight: 500;
    margin-bottom: clamp(1rem, 0.829rem + 0.61vi, 2rem);
}
.cancel-order-page .cancel-form__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
}

.cancel-order-page .custom-radio {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.663rem + 0.488vi, 1.6rem);
    cursor: pointer;
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    user-select: none;
    font-weight: 500;
}

.cancel-order-page .custom-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cancel-order-page .custom-radio__mark {
    width: clamp(1.4rem, 1.178rem + 0.793vi, 2.7rem);
    height: clamp(1.4rem, 1.178rem + 0.793vi, 2.7rem);
    border-radius: 50%;
    border: 0.15rem solid var(--grey-muted);
    background: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

.cancel-order-page .custom-radio input:checked + .custom-radio__mark {
    border-color: var(--blue);
    border-width: 0.2rem;
}

.cancel-order-page .custom-radio input:checked + .custom-radio__mark::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--blue);
}

.cancel-order-page .custom-radio__label {
    line-height: 1.3;
}

.cancel-order-page .cancel-form__textarea-wrapper {
    position: relative;
    border: 0.075rem solid var(--grey-muted);
    border-radius: clamp(1rem, 0.863rem + 0.488vi, 1.8rem);
    padding: 1.6rem 1.8rem 3rem;
    background: var(--secondary-color);
    transition: border-color 0.3s ease;
}

.cancel-order-page .cancel-form__textarea-wrapper:focus-within {
    border-color: var(--blue);
}

.cancel-order-page .cancel-form__textarea {
    width: 100%;
    min-height: 8rem;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.332rem + 0.244vi, 1.8rem);
    resize: none;
}

.cancel-order-page .cancel-form__textarea::placeholder {
    color: var(--grey-muted);
}

.cancel-order-page .cancel-form__counter {
    position: absolute;
    bottom: clamp(0.6rem, 0.566rem + 0.122vi, 0.8rem);
    right: clamp(1rem, 0.898rem + 0.366vi, 1.6rem);
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.332rem + 0.244vi, 1.8rem);
    color: var(--grey-muted);
}

.cancel-order-page .cancel-form__notice {
    display: flex;
    align-items: start;
    gap: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    padding: clamp(2rem, 1.693rem + 1.098vi, 3.8rem);
    border: 0.15rem solid var(--blue);
    border-radius: clamp(0.9rem, 0.746rem + 0.549vi, 1.8rem);
    margin-bottom: clamp(1.8rem, 1.083rem + 2.561vi, 6rem);
    background: var(--secondary-color);
}

.cancel-order-page .cancel-form__notice-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--blue);
    margin-top: 0.1rem;
}

.cancel-order-page .cancel-form__notice-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cancel-order-page .cancel-form__notice-text p {
    font-family: var(--font-clash-display);
    font-size: 1.8rem;
}

.cancel-order-page .cancel-form__actions {
    display: flex;
    justify-content: center;
    gap: clamp(1.8rem, 1.561rem + 0.854vi, 3.2rem);
    margin: 0 auto;
}

.cancel-order-page .cancel-form__btn {
    flex: 1;
    max-width: 33.2rem;
    min-height: clamp(4rem, 3.317rem + 2.439vi, 8rem);
    font-size: clamp(2rem, 1.863rem + 0.488vi, 2.8rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    font-weight: 600;
}

/* Danger Button (Red) */
.cancel-order-page .cancel-form__btn--danger {
    background-color: var(--dark-red);
    color: var(--secondary-color);
    transition: opacity 0.3s ease;
}

/* ========================================
   Responsive: Tablet (max-width: 992px)
   ======================================== */
@media screen and (max-width: 992px) {
    .cancel-order-page .cancel-form__options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Responsive: Mobile (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    .cancel-order-page .cancel-order__product {
        flex-direction: column;
        align-items: center;
    }

    .cancel-order-page .cancel-form__options {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .cancel-order-page .cancel-form__actions {
        flex-direction: column-reverse;
        max-width: 100%;
    }

    .cancel-order-page .cancel-form__btn {
        max-width: 100%;
        width: 100%;
    }
}

/* ========================================
   Responsive: Small Mobile (max-width: 480px)
   ======================================== */
@media screen and (max-width: 480px) {
    .cancel-order-page .cancel-order__product-meta {
        gap: 0.6rem;
    }

    .cancel-order-page .cancel-order__product-divider {
        display: none;
    }

    .cancel-order-page .cancel-form__notice {
        padding: 1.2rem;
    }

    .cancel-order-page .cancel-form__notice-text p {
        font-size: 1.2rem;
    }
}
/* =========================================================================
   Cancel-order CSS ends here 
========================================================================= */

/* =========================================================================
   Addresses CSS starts here 
========================================================================= */

.addresses-page .addresses {
    padding-block: clamp(1.4rem, 1.178rem + 0.793vi, 2.7rem)
        clamp(2.2rem, 1.21rem + 3.537vi, 8rem);
    flex: 1;
}

.addresses-page .addresses__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    flex-wrap: wrap;
}

.addresses-page .addresses__title {
    font-size: clamp(2.2rem, 1.859rem + 1.22vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}
.addresses-page .addresses__subtitle {
    font-size: clamp(1.2rem, 1.132rem + 0.244vi, 1.6rem);
}

.addresses-page .addresses__add-btn {
    max-width: 33.2rem;
    padding-block: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    font-size: clamp(1.8rem, 1.629rem + 0.61vi, 2.8rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    font-weight: 700;
}

.addresses-page .addresses__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
    max-width: 111rem;
}

.addresses-page .address-card {
    background: var(--bg-light);
    border-radius: clamp(1rem, -1.138rem + 2.155vi, 3rem);
    padding: clamp(1.4rem, -1.379rem + 2.802vi, 4rem)
        clamp(1.2rem, -0.831rem + 2.047vi, 3.1rem);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.addresses-page .address-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    flex-wrap: wrap;
    margin-bottom: clamp(1.4rem, 1.195rem + 0.732vi, 2.6rem);
}

.addresses-page .address-card__radio {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    cursor: pointer;
    user-select: none;
}

.addresses-page .address-card__radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.addresses-page .address-card__radio-mark {
    width: clamp(1.8rem, 1.578rem + 0.793vi, 3.1rem);
    height: clamp(1.8rem, 1.578rem + 0.793vi, 3.1rem);
    border-radius: 50%;
    border: 0.2rem solid var(--primary-color);
    background: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

.addresses-page .address-card__radio input:checked + .address-card__radio-mark {
    background: var(--green);
    border-color: var(--green);
}

.addresses-page
    .address-card__radio
    input:checked
    + .address-card__radio-mark::after {
    content: "";
    width: clamp(0.9rem, 0.78rem + 0.427vi, 1.6rem);
    height: clamp(0.4rem, 0.332rem + 0.244vi, 0.8rem);
    border-left: 0.2rem solid var(--secondary-color);
    border-bottom: 0.2rem solid var(--secondary-color);
    transform: rotate(-45deg) translate(0.1rem, -0.1rem);
    display: block;
}
.addresses-page .address-card__type {
    font-size: clamp(1.8rem, 1.595rem + 0.732vi, 3rem);
    font-weight: 500;
    font-family: var(--font-clash-display);
}

.addresses-page .address-card__actions {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.698rem + 0.366vi, 1.4rem);
}
.address-card__action svg {
    width: clamp(1.4rem, 1.246rem + 0.549vi, 2.3rem);
    height: clamp(1.4rem, 1.246rem + 0.549vi, 2.3rem);
}
.addresses-page .address-card__action {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem);
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.332rem + 0.244vi, 1.8rem);
    font-weight: 500;
    transition: opacity 0.3s ease;
    padding: clamp(0.8rem, 0.68rem + 0.427vi, 1.5rem);
}

.addresses-page .address-card__action--edit {
    color: var(--blue);
}

.addresses-page .address-card__action--edit:hover {
    color: var(--blue);
    opacity: 0.75;
}

.addresses-page .address-card__action--delete {
    color: var(--dark-red);
}

.addresses-page .address-card__action--delete:hover {
    color: var(--dark-red);
    opacity: 0.75;
}

.addresses-page .address-card__body {
    display: flex;
    flex-direction: column;
    max-width: 38.8rem;
}

.addresses-page .address-card__location {
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
}

.addresses-page .address-card__details {
    font-family: var(--font-clash-display);
    font-size: clamp(1.4rem, 1.28rem + 0.427vi, 2.1rem);
    margin-top: clamp(0.8rem, 0.68rem + 0.427vi, 1.5rem);
}
/* ========================================
   Responsive: Tablet (max-width: 992px)
   ======================================== */
@media screen and (max-width: 992px) {
    .addresses-page .addresses__grid {
        gap: 1.6rem;
    }
}

/* ========================================
   Responsive: Mobile (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    .addresses-page .addresses__header {
        flex-direction: column;
        align-items: stretch;
    }

    .addresses-page .addresses__header-info {
        max-width: 100%;
    }

    .addresses-page .addresses__add-btn {
        max-width: 100%;
        width: 100%;
        margin-top: 1rem;
    }

    .addresses-page .addresses__grid {
        grid-template-columns: 1fr;
    }

    .addresses-page .address-card__top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   Addresses CSS ends here 
========================================================================= */

/* =========================================================================
   Profile completeness CSS (validation, empty states, tabs, avatar)
========================================================================= */

/* Inline validation errors */
.field-error {
    display: block;
    margin-top: 0.4rem;
    font-size: clamp(1.2rem, 1.1rem + 0.2vw, 1.4rem);
    color: #c40003;
}

/* Runtime validation: invalid input gets a red border */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #e02424 !important;
}

/* Orders empty state + pagination */
.account-page .orders__empty {
    text-align: center;
    padding: clamp(3rem, 2rem + 3vw, 6rem) 0;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 2rem);
    color: var(--grey-secondary);
}

.account-page .orders__pagination {
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 4rem);
    display: flex;
    justify-content: center;
}

.account-page .orders__pagination .pagination {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.account-page .orders__pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 1rem;
    border-radius: 0.8rem;
    background: var(--bg-light);
    color: var(--primary-color);
    font-size: 1.4rem;
    text-decoration: none;
    transition: 0.2s ease;
}

.account-page .orders__pagination .page-item.active .page-link,
.account-page .orders__pagination .page-item .page-link:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.account-page .orders__pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Addresses empty state */
.account-page .addresses__empty {
    text-align: center;
    padding: clamp(3rem, 2rem + 3vw, 6rem) 0;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 2rem);
    color: var(--grey-secondary);
}

/* Order item content (used by orders + wishlist) */
.account-page .order-item__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.account-page .order-meta__payment-status {
    font-weight: 600;
}

/* Orders status filter tabs */
.account-page .orders-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 0.4rem + 0.5vw, 1.2rem);
    margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.6rem);
}

.account-page .orders-tabs__tab {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.8rem, 0.6rem + 0.4vw, 1.2rem) clamp(1.4rem, 1rem + 1vw, 2.4rem);
    border-radius: clamp(0.8rem, 0.6rem + 0.4vw, 1.2rem);
    background: var(--bg-light);
    color: var(--primary-color);
    font-size: clamp(1.3rem, 1.2rem + 0.3vw, 1.6rem);
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s ease;
}

.account-page .orders-tabs__tab:hover {
    background: rgba(0, 0, 0, 0.06);
}

.account-page .orders-tabs__tab--active {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Profile avatar upload */
.account-page .profile-form__avatar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: clamp(1.6rem, 1.2rem + 1vw, 2.8rem);
}

.account-page .profile-form__avatar-img {
    width: clamp(7rem, 6rem + 2vw, 10rem);
    height: clamp(7rem, 6rem + 2vw, 10rem);
    border-radius: 50%;
    object-fit: cover;
    border: 0.3rem solid #e0e0e0;
    transition: opacity 0.2s ease;
}

.account-page .profile-form__avatar:hover .profile-form__avatar-img {
    opacity: 0.6;
}

.account-page .profile-form__avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.account-page .profile-form__avatar:hover .profile-form__avatar-overlay {
    opacity: 1;
}

/* Track order action + back button + cancel info (tracking page) */
.order-details-page .order-details__action--track:hover {
    opacity: 0.7;
}

.account-page .account-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--primary-color);
    font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.8rem);
    font-weight: 500;
    text-decoration: none;
    margin-bottom: clamp(1.2rem, 1rem + 0.5vw, 2rem);
}

.account-page .account-back-btn:hover {
    opacity: 0.75;
}

.cancel-info-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    border-radius: 1rem;
    background: rgba(196, 0, 3, 0.06);
    color: #c40003;
    font-size: clamp(1.3rem, 1.2rem + 0.3vw, 1.6rem);
    margin-top: 1.6rem;
}

/* =========================================================================
   Profile completeness CSS ends
========================================================================= */

/* =========================================================================
   Add-addresses CSS starts here 
========================================================================= */

.add-addresses-page .add-address {
    flex: 1;
}

.add-addresses-page .add-address__section {
    margin-bottom: clamp(2.4rem, 2rem + 1.5vw, 3.2rem);
}

.add-addresses-page .add-address__section-title {
    font-family: var(--font-clash-display);
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    font-weight: 500;
    margin-bottom: clamp(1rem, 0.624rem + 1.341vi, 3.2rem);
}

.add-addresses-page .add-address__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 1.5rem + 2vw, 4rem);
    row-gap: 0;
}

/* Override form-field's default margin for consistency */
.add-addresses-page .add-address__grid .form-field {
    margin-bottom: clamp(1.2rem, 0.927rem + 0.976vi, 2.8rem);
}
.add-addresses-page .form-field--email {
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}
.add-addresses-page .add-address__actions {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 0.624rem + 1.341vi, 3.2rem);
    margin-top: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.add-addresses-page .add-address__btn {
    flex: 1;
    max-width: 33.2rem;
    font-size: clamp(1.8rem, 1.629rem + 0.61vi, 2.8rem);
    padding-block: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .add-addresses-page .add-address__grid {
        grid-template-columns: 1fr;
    }

    .add-addresses-page .add-address__actions {
        flex-direction: column-reverse;
        max-width: 100%;
    }

    .add-addresses-page .add-address__btn {
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================================
   Add-addresses CSS ends here 
========================================================================= */

/* =========================================================================
   Password CSS starts here 
========================================================================= */

.password-page .password {
    padding: 2.7rem 0;
    flex: 1;
}

.password-page .password__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
    flex-wrap: wrap;
}

.password-page .password__header-info {
    flex: 1;
    min-width: 25rem;
    max-width: 50rem;
}

.password-page .password__title {
    font-size: clamp(2.2rem, 1.859rem + 1.22vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}

.password-page .password__subtitle {
    font-size: clamp(1.1rem, 1.015rem + 0.305vi, 1.6rem);
    color: var(--grey-secondary);
}

.password-page .password__update-btn {
    max-width: 33.2rem;
    padding-block: clamp(1.4rem, 1.255rem + 0.518vi, 2.25rem);
    font-size: clamp(1.6rem, 1.395rem + 0.732vi, 2.8rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    flex-shrink: 0;
}

.password-page .password__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 1.5rem + 2vw, 4rem);
    row-gap: 2.4rem;
}

.password-page .password__grid .form-field {
    margin-bottom: 0;
}

.password-page .password-input {
    position: relative;
    width: 100%;
}

.form-field__label--current {
    margin-bottom: clamp(1rem, 0.966rem + 0.122vi, 1.2rem);
    font-size: clamp(1.6rem, 1.463rem + 0.488vi, 2.4rem);
}

.password-page .password-input__toggle {
    position: absolute;
    top: 50%;
    right: 2.1rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-secondary);
    transition: color 0.3s ease;
    z-index: 2;
}

.password-page .password-input__toggle:hover {
    color: var(--primary-color);
}

.password-page .password-input__icon {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
}

/* Default: Show hidden icon (crossed eye), hide visible icon */
.password-page .password-input__icon--visible {
    display: none;
}

/* When password is shown: swap icons */
.password-page .password-input.is-visible .password-input__icon--hidden {
    display: none;
}

.password-page .password-input.is-visible .password-input__icon--visible {
    display: block;
}

/* ========================================
   Responsive: Mobile (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    .password-page .password__header {
        flex-direction: column;
        align-items: stretch;
    }

    .password-page .password__header-info {
        max-width: 100%;
    }

    .password-page .password__update-btn {
        max-width: 100%;
        width: 100%;
        margin-top: 1rem;
    }

    .password-page .password__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Passsword CSS ends here 
========================================================================= */

/* =========================================================================
   Update-Passsword CSS starts here 
========================================================================= */

.update-password-page .update-password {
    padding: clamp(1.3rem, 1.061rem + 0.854vi, 2.7rem) 0;
    flex: 1;
}

.update-password-page .update-password__header {
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}

.update-password-page .update-password__title {
    font-size: clamp(2.6rem, 2.327rem + 0.976vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}

.update-password-page .update-password__subtitle {
    font-size: clamp(1.2rem, 1.132rem + 0.244vi, 1.6rem);
    color: var(--grey-secondary);
}

.update-password-page .update-password__row {
    margin-bottom: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
}

/* Full width row (Current Password) */
.update-password-page .update-password__row--full .form-field {
    max-width: calc(50% - 2rem); /* Same width as one grid column */
}

/* Grid row (New Password + Confirm New Password) */
.update-password-page .update-password__row--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 1.5rem + 2vw, 4rem);
    align-items: start;
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}

.update-password-page .update-password__row .form-field {
    margin-bottom: 0;
}

.update-password-page .password-input {
    position: relative;
    width: 100%;
}

.update-password-page .password-input__field {
    padding-right: 6rem !important;
    letter-spacing: 0.2rem;
}

.update-password-page .password-input__toggle {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: opacity 0.3s ease;
    z-index: 2;
}

.update-password-page .password-input__toggle:hover {
    opacity: 0.7;
}

.update-password-page .password-input__icon {
    width: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    height: clamp(1.4rem, 1.263rem + 0.488vi, 2.2rem);
    display: block;
}

/* Default: Show hidden (closed eye), hide visible (open eye) */
.update-password-page .password-input__icon--visible {
    display: none;
}

/* When password is shown: swap icons */
.update-password-page .password-input.is-visible .password-input__icon--hidden {
    display: none;
}

.update-password-page
    .password-input.is-visible
    .password-input__icon--visible {
    display: block;
}

.update-password-page .update-password__hint {
    font-size: 1.6rem;
    color: var(--grey-secondary);
    margin-top: 1.6rem;
}

.update-password-page .update-password__actions {
    display: flex;
    justify-content: center;
    gap: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.update-password-page .update-password__btn {
    flex: 1;
    max-width: 33.2rem;
    font-size: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    padding-block: clamp(1.4rem, 1.255rem + 0.518vi, 2.25rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    font-weight: 700;
}

/* ========================================
   Responsive: Tablet (max-width: 992px)
   ======================================== */
@media screen and (max-width: 992px) {
    .update-password-page .update-password__row--full .form-field {
        max-width: 100%;
    }
}

/* ========================================
   Responsive: Mobile (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    .update-password-page .update-password__row--grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .update-password-page .update-password__row--full .form-field {
        max-width: 100%;
    }

    .update-password-page .update-password__actions {
        flex-direction: column-reverse;
        max-width: 100%;
    }

    .update-password-page .update-password__btn {
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================================
  Update-Passsword CSS ends here 
========================================================================= */

/* =========================================================================
  Logout  CSS starts here 
========================================================================= */
.logout-page .logout {
    flex: 1;
}
.logout-page .logout__header-info {
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}
.logout-page .logout__title {
    font-size: clamp(2.2rem, 1.859rem + 1.22vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}
.logout-page .logout__subtitle {
    font-size: clamp(1.2rem, 1.132rem + 0.244vi, 1.6rem);
    color: var(--grey-secondary);
}
.logout-btn {
    font-size: clamp(1.8rem, 1.629rem + 0.61vi, 2.8rem);
    padding-block: clamp(1.6rem, 1.489rem + 0.396vi, 2.25rem);
    max-width: 33.2rem;
}
/* =========================================================================
  Logout CSS ends here 
========================================================================= */

/* =========================================================================
  Logout Confirmation CSS starts here 
========================================================================= */

.logout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* Active state - shown */
.logout-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.logout-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.logout-modal__content {
    position: relative;
    background: var(--bg-light);
    border-radius: clamp(2rem, 1.659rem + 1.22vi, 4rem);
    padding: clamp(2.8rem, 1.912rem + 3.171vi, 8rem);
    max-width: 116.3rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1;
}

.logout-modal.is-active .logout-modal__content {
    transform: scale(1);
}

.logout-modal__title {
    font-size: clamp(2.4rem, 2.093rem + 1.098vi, 4.2rem);
    font-weight: 500;
    margin-bottom: clamp(0.2rem, 0.166rem + 0.122vi, 0.4rem);
}

.logout-modal__subtitle {
    font-size: clamp(1.6rem, 1.463rem + 0.488vi, 2.4rem);
    color: var(--grey-secondary);
    margin-bottom: clamp(2.6rem, 2.207rem + 1.402vi, 4.9rem);
    margin-left: auto;
    margin-right: auto;
}

.logout-modal__actions {
    display: flex;
    justify-content: center;
    gap: clamp(1.6rem, 1.327rem + 0.976vi, 3.2rem);
    flex-wrap: wrap;
}

.logout-modal__btn {
    max-width: 33.2rem;
    font-size: clamp(1.8rem, 1.629rem + 0.61vi, 2.8rem);
    padding-block: clamp(1.6rem, 1.489rem + 0.396vi, 2.25rem);
    border-radius: clamp(1rem, 0.829rem + 0.61vi, 2rem);
    font-weight: 700;
    flex: 1;
}

body.modal-open {
    overflow: hidden;
}

/* ========================================
   Responsive: Mobile (max-width: 480px)
   ======================================== */
@media screen and (max-width: 480px) {
    .logout-modal__actions {
        flex-direction: column-reverse;
        gap: 1.2rem;
    }

    .logout-modal__btn {
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================================
  Logout Confirmation CSS ends here 
========================================================================= */
/* =========================================================================
   Common CSS starts here 
========================================================================= */

/* -------------------------------------------------------------------
   BLOG HIGHLIGHT Common CSS starts here
------------------------------------------------------------------- */
.blog-slider {
    padding: clamp(3rem, 0.985rem + 7.195vi, 14.8rem) 0;
}

/* CARD */
.blog-highlight__card {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: clamp(2rem, 0.959rem + 3.72vi, 8.1rem);
}

.blog-highlight__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-related__close svg {
    width: clamp(2.2rem, 1.415rem + 2.805vi, 6.8rem);
    height: clamp(2.2rem, 1.415rem + 2.805vi, 6.8rem);
}
/* META */
.blog-highlight__meta {
    display: flex;
    gap: clamp(0.6rem, 0.429rem + 0.61vi, 1.6rem);
    margin-block: clamp(0.6rem, 0.429rem + 0.61vi, 1.6rem)
        clamp(1.2rem, 0.859rem + 1.22vi, 3.2rem);
    color: var(--blue);
    font-weight: 500;
    flex-wrap: wrap;
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
}

.blog-highlight__meta span:not(:last-child)::after {
    content: "•";
    margin-left: clamp(0.6rem, 0.429rem + 0.61vi, 1.6rem);
}

/* DESCRIPTION */
.blog-highlight__description {
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
    margin-bottom: clamp(1.8rem, 1.083rem + 2.561vi, 6rem);
}
/* -------------------------------------------------------------------
   BLOG HIGHLIGHT Common CSS ends here
------------------------------------------------------------------- */
.section__wrapper {
    max-width: 67.2rem;
    margin: 0 auto;
    text-align: center;
}
/* Header */
.slider__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: clamp(2rem, 1.317rem + 2.439vi, 6rem);
}

/* Button */
.btn__arrow {
    width: clamp(6.5rem, 5.476rem + 3.659vi, 12.5rem);
    height: clamp(6.5rem, 5.476rem + 3.659vi, 12.5rem);
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 1.063rem + 0.488vi, 2rem);
}

.btn__arrow svg {
    transition: transform 0.4s ease;
    width: clamp(2.2rem, 1.841rem + 1.28vi, 4.3rem);
    height: clamp(2.2rem, 1.841rem + 1.28vi, 4.3rem);
}

.btn__arrow:hover svg {
    transform: rotate(45deg) translate(0.4rem, 0);
}

/* Keyframes */
@keyframes arrowMove {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    40% {
        transform: translate(10px, -10px); /* move top-right */
        opacity: 0;
    }
    41% {
        transform: translate(-10px, 10px); /* re-enter from bottom-left */
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Card */
.article-card {
    position: relative;
    border-radius: 3.2rem;
    overflow: hidden;
    cursor: pointer;
}

.article-card__overlay {
    position: absolute;
    inset: 0;
    background: var(--blue);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 3rem;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-card__content {
    color: var(--secondary-color);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease 0.3s;
}

.slide-card__title {
    color: var(--secondary-color);
    font-size: clamp(2rem, 1.283rem + 2.561vi, 6.2rem);
    font-weight: 400;
}
.slide-card__title span {
    font-weight: 700;
}
.article-card__desc {
    color: var(--secondary-color);
    margin-block: clamp(0.8rem, 0.732rem + 0.244vi, 1.2rem)
        clamp(1.8rem, 1.424rem + 1.341vi, 4rem);
    font-size: clamp(1.4rem, 1.229rem + 0.61vi, 2.4rem);
}

.slide-card__title strong {
    font-weight: 600;
}
.slide-card__wrapper {
    position: absolute;
    bottom: 6rem;
    left: 3.7rem;
    right: 0;
    color: var(--secondary-color);
}
/* Hover */
.article-card:hover .article-card__overlay {
    transform: translateY(0);
}

.article-card:hover .article-card__content {
    opacity: 1;
    transform: translateY(0);
}

.blog-swiper {
    overflow: hidden;
}
.swiper-slide {
    width: auto;
}
.slider__nav {
    display: flex;
    gap: clamp(1.2rem, 0.893rem + 1.098vi, 3rem);
}

.slider__btn {
    width: 10.5rem;
    height: 10.5rem;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.slider__slide {
    height: auto;
}
/* =========================================================================
   Response for Common CSS starts here 
========================================================================= */
@media (max-width: 991.98px) {
    .slider__header {
        align-items: center;
        flex-direction: column;
    }
}
/* =========================================================================
  Response for Common CSS ends here 
========================================================================= */
/* =========================================================================
   Common CSS ends here 
========================================================================= */