/*
 * Khan design system – homepage hero, sections, category tiles, classicist
 * Ensures hero has height, sections layout correctly, no blank collapse
 */
:root {
    --khan-container: 1280px;
    --khan-bg: #fafafa;
    --khan-text: #111;
    --khan-color-primary: #111;
    --khan-color-muted: #6b6b6b;
    --khan-muted: #6b6b6b;
    --khan-border: #e7e7e7;
    --khan-radius: 16px;
    --khan-hero-radius: 24px;
    --khan-font-size-xs: 12px;
    --khan-font-size-sm: 13px;
    --khan-font-size-base: 14px;
    --khan-spacing-xs: 8px;
    --khan-spacing-sm: 12px;
    --khan-spacing-md: 16px;
    --khan-spacing-lg: 24px;
    /* reference: announcement bar height / vertical center */
    --khan-announcement-height: 36px;
    /* reference: main row min-height */
    --khan-header-main-row-height: 70px;
    /* reference: search pill */
    --khan-search-pill-height: 40px;
    --khan-search-pill-radius: 999px;
    /* reference: icon size in main row */
    --khan-header-icon-size: 20px;
    /* reference: nav first item (sale) */
    --khan-nav-sale: #c00;
}

/* Remove white empty space on home: don't stretch main wrapper to full viewport */
body.khan-home-page .aiz-main-wrapper {
    min-height: auto !important;
}

body.khan-home-page .aiz-main-wrapper>#homePage,
body.khan-home-page .aiz-main-wrapper>.khan-home {
    flex-grow: 0 !important;
}

body.khan-home-page {
    background: var(--khan-bg);
}

/* ----- Announcement bar (reference: black bar, centered "Sale: Up To 70% Off . SHOP NOW") ----- */
.khan-announcement-bar {
    background: #000;
    color: #fff;
    min-height: var(--khan-announcement-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: var(--khan-font-size-xs);
    font-weight: 400;
    position: relative;
    z-index: 1030;
}

.khan-announcement-bar__link {
    color: #fff !important;
    text-decoration: underline !important;
    margin-inline-start: 0.25rem;
}

.khan-announcement-bar__link:hover,
.khan-announcement-bar__link:focus {
    color: #fff !important;
    opacity: 0.9;
}

.khan-announcement-bar__link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* ----- Section 1: Top Header Bar ----- */
.khan-top-bar {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    padding: var(--khan-spacing-xs) 0;
}

.khan-top-bar__inner {
    gap: 0.5rem;
}

.khan-top-bar__link {
    font-size: var(--khan-font-size-xs);
    font-weight: 400;
    color: #333;
    text-decoration: none !important;
}

.khan-top-bar__link:hover {
    color: #111;
    opacity: 0.9;
}

.khan-top-bar__left {
    gap: 0.5rem;
}

.khan-top-bar__sep {
    font-size: var(--khan-font-size-xs);
    color: #ccc;
    margin: 0 0.25rem;
}

.khan-top-bar__right {
    gap: 0.25rem;
}

@media (max-width: 991.98px) {

    .khan-top-bar__left,
    .khan-top-bar__center {
        display: none !important;
    }

    .khan-top-bar__right {
        margin-left: auto;
    }
}

/* ----- Header v2 (Figma home header) ----- */
header.khan-header-layout {
    position: relative;
}

.khan-header-layout #bg-nav {
    background: #fff;
    border-bottom: 1px solid var(--khan-border);
}

/* When #bg-nav is absolute on home, start it below the announcement bar so the black bar is visible */
.khan-header-layout #bg-nav.position-absolute {
    top: var(--khan-announcement-height);
}

.khan-header-v2 .container {
    max-width: var(--khan-container);
}

.khan-header-main-row {
    min-height: var(--khan-header-main-row-height);
    padding: 10px 0;
    gap: 16px;
    align-items: center;
}

.khan-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--khan-color-primary);
    text-decoration: none !important;
    font-family: Georgia, "Times New Roman", serif;
}

.khan-header-left {
    gap: 14px;
}

.khan-header-search-center {
    min-width: 280px;
    max-width: 620px;
    flex: 1 1 auto;
}

.khan-search-input-wrap {
    border: 1px solid #e0e0e0 !important;
    border-radius: var(--khan-search-pill-radius) !important;
    height: var(--khan-search-pill-height);
    padding: 0 4px 0 12px;
    background: #fff;
    display: flex;
    align-items: center;
}

.khan-search-input-wrap .khan-search-icon {
    width: var(--khan-header-icon-size);
    height: var(--khan-header-icon-size);
    flex-shrink: 0;
    margin-inline-end: 10px;
    opacity: 0.6;
}

.khan-search-input {
    height: 100%;
    min-height: 36px;
    font-size: var(--khan-font-size-sm);
    color: var(--khan-text);
    background: transparent;
    border: none !important;
    flex: 1;
}

.khan-search-input::placeholder {
    color: #9e9e9e;
}

.khan-search-input:focus {
    outline: none;
}

.khan-search-input-wrap:focus-within {
    border-color: #bbb !important;
}

.khan-header-right-v2 .khan-sign-in__text {
    font-weight: 500;
}

.khan-cart-badge {
    right: -6px;
    top: -6px;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000 !important;
    color: #fff !important;
    border-radius: 50%;
}

.khan-header-right-v2 .khan-icon-inline {
    width: var(--khan-header-icon-size);
    height: var(--khan-header-icon-size);
}

.khan-deliver {
    gap: 8px;
    color: #222;
    font-size: 12px;
}

.khan-deliver__flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
}

.khan-deliver__label {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.khan-deliver__city {
    font-weight: 600;
}

.khan-currency-plain {
    font-size: 13px;
    margin-left: 8px;
}

.khan-lang-link {
    color: #222;
    text-decoration: none !important;
    font-weight: 500;
}

.khan-lang-link:hover,
.khan-lang-link:focus {
    opacity: 0.8;
}

.khan-lang-link:focus-visible {
    outline: 1px solid var(--khan-border);
    outline-offset: 2px;
}

.khan-header-link--aux {
    display: none;
}

/* Reference: show Deliver to on desktop; hide only currency/aux links in main row */
.khan-header-layout .khan-currency-plain,
.khan-header-link--aux {
    display: none !important;
}

/* ----- Header (Figma): Discover/Stories grey links ----- */
.khan-header-link {
    color: #222;
    text-decoration: none;
    font-weight: 500;
}

.khan-header-link:hover {
    color: #222;
    opacity: 0.8;
}

.khan-header-link--grey {
    color: #6c757d !important;
}

.khan-header-link--grey:hover {
    color: #495057 !important;
}

/* ----- Top bar dark (design: black bar, EN | USD left, Login | Register | Wishlist | Cart right) ----- */
.khan-top-bar--dark {
    background: #000 !important;
    color: #fff;
    padding: 10px 0;
}

.khan-top-bar--dark .khan-top-bar__link {
    color: #fff !important;
    font-size: var(--khan-font-size-xs);
}

.khan-top-bar--dark .khan-top-bar__link:hover {
    color: #fff !important;
    opacity: 0.9;
}

.khan-top-bar--dark .khan-top-bar__sep {
    color: rgba(255, 255, 255, 0.6);
}

/* ----- Promo strip (design: black bar, text left, SHOP NOW right) — kept for optional use ----- */
.khan-promo-strip {
    background: #000;
    color: #fff;
    padding: 10px 0;
}

.khan-promo-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.khan-promo-strip__text {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}

.khan-promo-strip__cta {
    color: #fff;
    text-decoration: underline;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.khan-promo-strip__cta:hover {
    color: #fff;
    opacity: 0.9;
}

.khan-promo-strip__cta--underline {
    text-decoration: underline;
}

/* Design: white pill button with black text */
.khan-promo-strip__cta--button {
    display: inline-block;
    padding: 6px 16px;
    background: #fff !important;
    color: #111 !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.khan-promo-strip__cta--button:hover {
    opacity: 0.9;
    color: #111 !important;
}

/* ----- Hero carousel: two banner types with distinct heights ----- */
/* Design: Product/Sale = compact (~1/3–1/2 height), Announcement/Program = tall hero */
.khan-hero-wrapper {
    position: relative;
    min-height: 450px;
    background: #e9e9e9;
    border-radius: var(--khan-hero-radius);
    overflow: hidden;
    max-width: var(--khan-container);
    margin: 24px auto 0;
}

.khan-hero-wrapper:last-of-type {
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .khan-hero-wrapper {
        min-height: 500px;
    }
}

@media (min-width: 992px) {
    .khan-hero-wrapper {
        min-height: 600px;
    }
}

/* Announcement / Program banner (top): compact height (~1/3–1/2 of main hero) */
.khan-hero-wrapper--announcement {
    min-height: 260px;
}

.khan-hero-wrapper--announcement .khan-hero {
    min-height: 260px;
}

@media (min-width: 768px) {
    .khan-hero-wrapper--announcement {
        min-height: 300px;
    }

    .khan-hero-wrapper--announcement .khan-hero {
        min-height: 300px;
    }
}

@media (min-width: 992px) {
    .khan-hero-wrapper--announcement {
        min-height: 340px;
    }

    .khan-hero-wrapper--announcement .khan-hero {
        min-height: 340px;
    }
}

/* Product / Sale banner (bottom): full hero height (dominant section) */
.khan-hero-wrapper--product {
    margin-top: 16px;
    min-height: 450px;
}

.khan-hero-wrapper--product .khan-hero {
    min-height: 450px;
}

@media (min-width: 768px) {
    .khan-hero-wrapper--product {
        min-height: 500px;
    }

    .khan-hero-wrapper--product .khan-hero {
        min-height: 500px;
    }
}

@media (min-width: 992px) {
    .khan-hero-wrapper--product {
        min-height: 600px;
    }

    .khan-hero-wrapper--product .khan-hero {
        min-height: 600px;
    }
}

.khan-hero-carousel {
    width: 100%;
    position: relative;
}

.khan-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .khan-hero {
        min-height: 500px;
    }
}

@media (min-width: 992px) {
    .khan-hero {
        min-height: 600px;
    }
}

.khan-hero__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.khan-hero__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.khan-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 1.5rem;
    max-width: 60%;
}

/* Figma: left-aligned block at 8% from edge */
.khan-hero--left .khan-hero__content {
    text-align: left;
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    max-width: 500px;
}

.khan-hero--right .khan-hero__content {
    text-align: right;
    margin-left: auto;
    margin-right: 2rem;
}

.khan-hero--center .khan-hero__content {
    margin-left: auto;
    margin-right: auto;
}

.khan-hero__title {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .khan-hero__title {
        font-size: 40px;
    }
}

@media (min-width: 992px) {
    .khan-hero__title {
        font-size: 48px;
    }
}

.khan-hero__title--sale {
    font-size: 2.1rem;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .khan-hero__title--sale {
        font-size: 2.6rem;
    }
}

.khan-hero__title-line2 {
    display: block;
    font-size: 1.25em;
    font-weight: 700;
}

@media (min-width: 768px) {
    .khan-hero__title-line2 {
        font-size: 1.35em;
    }
}

.khan-hero__subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.khan-hero__subtitle--sale {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.khan-hero__cta {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    font-size: var(--khan-font-size-base);
    text-decoration: none;
    border-radius: 999px;
    transition: opacity 0.2s;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.khan-hero__cta:hover {
    opacity: 0.9;
    color: inherit;
}

.khan-hero__cta--white {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #fff;
}

.khan-hero__cta--white-border {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.khan-hero__cta--dark {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff;
}

.khan-hero__cta--dark:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* Announcement / Program banner (compact): scaled-down content for short height */
.khan-hero-wrapper--announcement .khan-hero__content {
    padding: 1rem 1.5rem;
}

.khan-hero-wrapper--announcement .khan-hero__title {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.khan-hero-wrapper--announcement .khan-hero__title-line2 {
    font-size: 1.1em;
}

.khan-hero-wrapper--announcement .khan-hero__subtitle {
    font-size: 14px;
    margin-bottom: 0.5rem;
}

.khan-hero-wrapper--announcement .khan-hero__cta {
    padding: 0.4rem 1.25rem;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .khan-hero-wrapper--announcement .khan-hero__title {
        font-size: 1.75rem;
    }
}

@media (min-width: 992px) {
    .khan-hero-wrapper--announcement .khan-hero__title {
        font-size: 2rem;
    }
}

/* Hero arrows & dots */
.khan-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.khan-hero-arrow:hover {
    background: #fff;
}

.khan-hero-arrow--prev {
    left: 1rem;
}

.khan-hero-arrow--next {
    right: 1rem;
}

.khan-hero-dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 3;
}

.khan-hero-dot {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.khan-hero-dot.active {
    background: rgba(255, 255, 255, 0.95);
    width: 24px;
}

/* ----- Section titles & buttons ----- */
.khan-section-title {
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1rem;
    color: #222;
    text-align: left;
}

.khan-section-title--line {
    border-bottom: none;
    padding-bottom: 0;
}

.khan-section-desc {
    color: #555;
    margin-bottom: 0.5rem;
}

.khan-section-link {
    font-weight: 600;
    color: #222;
}

.khan-section-link:hover {
    color: #222;
    opacity: 0.8;
}

/* All primary CTAs: pill shape (Figma) */
.khan-btn-solid,
.khan-btn-pill {
    display: inline-block;
    padding: 0.55rem 1.6rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 999px;
    transition: opacity 0.2s;
}

.khan-btn-solid {
    background: #222;
    color: #fff !important;
}

.khan-btn-solid:hover {
    opacity: 0.9;
    color: #fff !important;
}

.khan-btn-pill {
    background: #fff;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.khan-btn-pill:hover {
    opacity: 0.9;
    color: #111 !important;
}

/* ----- Shop by category – grid so tiles don’t sit in one column ----- */
.khan-shop-by-category-section {
    background: #f7f7f7;
}

.khan-section-title--shop-category {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 48px;
    text-align: left;
    color: #111;
}

.khan-category-tiles {
    display: grid;
    gap: var(--khan-spacing-lg);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .khan-category-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.khan-category-tiles--3x2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .khan-category-tiles--3x2 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--khan-spacing-lg);
    }
}

.khan-category-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--khan-radius);
    background: #f2f2f2;
}

.khan-category-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(91, 89, 89, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* Reduced shadow: from rgba(0, 0, 0, 1) to rgba(0, 0, 0, 0.6) */
    z-index: 1;
}

.khan-category-tile img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Figma: solid dark band at bottom with category name */
.khan-category-tile a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0.75rem;
    font-weight: 600;
    font-size: var(--khan-font-size-base);
    color: #fff !important;
    /*background: rgba(0, 0, 0, 0.4) !important;  Reduced from 0.75 to 0.4 */
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
}

.khan-category-tile a:hover {
    color: #fff !important;
    opacity: 0.95;
}

/* ----- Classicist banners (3 columns) ----- */
.khan-classicist-banners .col-md-4 {
    margin-bottom: 1rem;
}

.khan-classicist-tile {
    display: block;
    text-decoration: none !important;
    color: inherit;
    border-radius: var(--khan-radius);
    overflow: hidden;
    background: #f5f5f5;
}

.khan-classicist-tile img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.khan-classicist-tile__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

/* ----- Section 6: Most Popular – title LEFT, SHOP All + arrows RIGHT (Figma) ----- */
.khan-carousel-header {
    flex-wrap: wrap;
}

.khan-carousel-header .khan-section-title {
    margin-bottom: 0;
}

.khan-carousel-header .khan-section-link {
    margin-left: auto;
}

.khan-carousel-arrows {
    display: flex;
    gap: 0.25rem;
}

.khan-carousel-arrows .slide-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--khan-border);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: #222;
}

.khan-carousel-arrows .slide-arrow:hover {
    opacity: 0.7;
}

.khan-carousel-arrows .link-disable {
    opacity: 0.4;
    cursor: default;
}

/* ----- Collections cards ----- */
.khan-collection-card {
    text-decoration: none !important;
    color: #222;
}

.khan-collection-card:hover {
    opacity: 0.9;
}

.khan-collection-card__img {
    display: block;
    overflow: hidden;
    border-radius: var(--khan-radius);
    background: #f5f5f5;
}

.khan-collection-card__img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.khan-collection-card__title {
    display: block;
    padding: 0.75rem 0;
    font-weight: 600;
}

.khan-collection-card--title-below .khan-collection-card__title {
    text-align: center;
}

/* ----- Section wrappers ----- */
.khan-section-rounded {
    border-radius: 8px;
}

.khan-collections-section {
    background: #e8e8e8;
}

.khan-collection-card__img {
    border-radius: var(--khan-radius);
}

.khan-new-arrivals {
    background: #F2F2F2 !important; /* From SVG: fill="#F2F2F2" */
    border-radius: 12px; /* From SVG: rx="12" */
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 992px) {
    .khan-new-arrivals .row.align-items-start {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: var(--khan-spacing-lg);
    }

    .khan-new-arrivals .col-lg-4 {
        max-width: 350px;
    }
}

.khan-best-sellers {
    background: transparent;
}

.khan-best-sellers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--khan-spacing-lg);
    width: 100%;
}

.khan-best-sellers-grid .khan-best-seller-item {
    min-width: 0;
    overflow: visible;
}

@media (min-width: 768px) {
    .khan-best-sellers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- Product cards on home (Figma node 2621-80708) ----- */
#homePage.khan-home {
    overflow: visible;
    background: var(--khan-bg);
}

#homePage.khan-home .aiz-card-box {
    border-radius: var(--khan-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    overflow: visible;
    max-width: 390px; /* From SVG: rect width="390" */
    margin: 0 auto;
}

#homePage.khan-home .aiz-card-box .img-fit {
    border-radius: 12px;
    height: 390px; /* Approximate based on card dimensions */
    object-fit: cover;
}

/* Product Card Height - From SVG: rect height="551" */
.khan-home .aiz-card-box {
    min-height: 551px; /* From SVG */
    display: flex;
    flex-direction: column;
}

/* Font styles for product cards - From SVG */
.khan-home .aiz-card-box h3 {
    font-family: var(--khan-font-sans);
    font-size: var(--khan-font-size-base);
    font-weight: 600;
}

.khan-home .aiz-card-box .product_dec {
    font-family: var(--khan-font-sans);
    font-size: var(--khan-font-size-sm);
    font-weight: 400;
}

#homePage.khan-home .khan-best-sellers .container,
#homePage.khan-home .khan-best-sellers-grid {
    overflow: visible;
}

/* ----- Footer (Figma: black background on home) ----- */
.khan-footer-wrapper-home {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
}

.khan-footer-dark {
    background: #222 !important;
    color: #fff;
}

.khan-footer-dark .footer-widget {
    background: #222 !important;
}

.khan-footer-hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0;
}

/* ----- Section 9: Newsletter – black bar, ~60px vertical padding ----- */
.khan-footer-newsletter-row {
    padding-top: 60px;
    padding-bottom: 60px;
}

.khan-footer-home .khan-footer-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.khan-footer-home .khan-footer-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Subscribe button: white bg, black text, pill (Figma) – strong overrides for .btn / RTL */
.khan-footer-home .khan-footer-subscribe-btn,
.khan-footer-home .khan-footer-newsletter-form button[type="submit"],
.khan-footer-home .btn.khan-footer-subscribe-btn {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
}

.khan-footer-home .khan-footer-subscribe-btn:hover,
.khan-footer-home .khan-footer-newsletter-form button[type="submit"]:hover {
    background: #f0f0f0 !important;
    color: #111 !important;
}

/* Bottom bar: slightly lighter dark (Figma) */
.khan-footer-bottom-bar {
    background: #1a1a1a !important;
    color: rgba(255, 255, 255, 0.9);
}

.khan-footer-bottom-bar .khan-footer-bottom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.khan-footer-bottom {
    background: rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.9);
}

body:not(.rtl) .khan-footer-bottom-bar .khan-footer-bottom-row {
    flex-direction: row;
}

.khan-footer-bottom .fw-700 {
    color: #fff;
}

.khan-footer-bottom .khan-footer-copyright {
    color: rgba(255, 255, 255, 0.9);
}

.khan-footer-bottom .khan-footer-logo {
    opacity: 0.95;
}

.khan-footer-socials a:hover {
    opacity: 0.85;
}

.khan-footer-top-row {
    align-items: flex-start;
}

@media (min-width: 768px) {
    .khan-footer-top-row {
        align-items: center;
    }
}

.khan-footer-payments .khan-payment-icon {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ----- Nav row (reference: 9 items, first red, thin divider above/below, regular weight) ----- */
.khan-nav-row {
    gap: 0.5rem 2rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--khan-border);
    border-bottom: 1px solid var(--khan-border);
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
}

.khan-nav-row__link {
    color: #222 !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: var(--khan-font-size-base);
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-transform: uppercase;
    transition: all 0.2s ease;
    padding: 8px 4px;
    position: relative;
    display: inline-block;
}

.khan-nav-row__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background: #222;
    transition: transform 0.2s ease;
}

.khan-nav-row__link:hover {
    color: #222 !important;
    opacity: 0.9;
    transform: translateY(-1px);
}

.khan-nav-row__link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.khan-nav-row__link:focus-visible {
    outline: 1px solid var(--khan-border);
    outline-offset: 2px;
}

.khan-nav-row__link--sale {
    color: var(--khan-nav-sale) !important;
    font-weight: 600;
}

.khan-nav-row__link--sale::after {
    background: var(--khan-nav-sale);
}

.khan-nav-row__link--sale:hover {
    color: var(--khan-nav-sale) !important;
    opacity: 0.9;
}

.khan-nav-row__link--active {
    border-bottom-color: var(--khan-nav-sale) !important;
    color: var(--khan-nav-sale) !important;
    font-weight: 600;
}

.khan-nav-row__link--active::after {
    background: var(--khan-nav-sale);
    transform: translateX(-50%) scaleX(1);
}

@media (min-width: 992px) {
    .khan-nav-row {
        flex-wrap: nowrap;
        gap: 0 32px;
    }
}

@media (max-width: 1024px) {
    .khan-nav-row {
        gap: 0 20px;
    }

    .khan-nav-row__link {
        font-size: var(--khan-font-size-sm);
    }
}

/* ----- Header RTL: layout mirrors (logo/deliver on right, actions on left) ----- */
[dir="rtl"] .khan-header-main-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .khan-header-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .khan-search-input-wrap .khan-search-icon {
    margin-inline-end: 0;
    margin-inline-start: 10px;
}

[dir="rtl"] .khan-header-right-v2 {
    flex-direction: row-reverse;
}

[dir="rtl"] .khan-nav-row {
    flex-direction: row-reverse;
}

/* Sidebar / Off-canvas */
.khan-sidebar-right {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
}

.khan-sidebar-right.active {
    right: 0;
}

.khan-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.khan-sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Offer Card - Figma Match */
.khan-offer-card {
    background: #fff;
    border: 1px solid #E9ECEF;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.khan-offer-card:hover {
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.khan-offer-card__header {
    background: #E8F5E9;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Ensure they stay together */
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.khan-offer-card__icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.khan-offer-card__header-title {
    font-size: 11px;
    font-weight: 700;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.khan-offer-card__body {
    padding: 12px 14px;
}

.khan-offer-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.khan-offer-card__desc {
    font-size: 12px;
    color: #777;
    margin-bottom: 12px;
    line-height: 1.3;
}

.khan-offer-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.khan-coupon-code-box {
    background: #F8F9FA;
    border: 1px dashed #CED4DA;
    border-radius: 4px;
    padding: 4px 10px;
    font-family: monospace;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    display: inline-block;
}

.khan-btn-apply {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.khan-btn-apply:hover {
    opacity: 0.9;
    color: #fff;
}

.khan-btn-apply:disabled {
    background: #E9ECEF;
    color: #ADB5BD;
    cursor: not-allowed;
}

/* Sidebar / Off-canvas */
.khan-sidebar-right {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
}

.khan-sidebar-right.active {
    right: 0;
}

.khan-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.khan-sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

.khan-offer-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}

.khan-offer-card:hover {
    border-color: #000;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* --- Footer Redesign (Figma Match) --- */
.khan-footer-dark {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding-top: 40px;
    padding-bottom: 20px;
}

.khan-footer-newsletter-row {
    padding-bottom: 20px;
}

.khan-footer-input {
    background-color: #1A1A1A !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-size: 13px;
    height: 40px;
}

.khan-footer-input::placeholder {
    color: #666;
}

.khan-footer-input:focus {
    background-color: #222 !important;
    border-color: #555 !important;
    box-shadow: none;
}

.khan-footer-subscribe-btn,
.khan-footer-wrapper-home .khan-footer-dark .khan-footer-newsletter-form .khan-footer-subscribe-btn,
.btn.khan-footer-subscribe-btn {
    height: 40px;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: #fff !important;
    color: #000 !important;
    border-radius: 8px;
    transition: opacity 0.2s;
    border: none !important;
}

.khan-footer-subscribe-btn:hover,
.btn.khan-footer-subscribe-btn:hover {
    background: #f0f0f0 !important;
    color: #000 !important;
    opacity: 1;
}

/* Copyright row links: Figma #848484 (not blue) */
.khan-footer-wrapper-home .khan-footer-dark .khan-footer-copyright-link,
.khan-footer-wrapper-home .khan-footer-dark .khan-footer-copyright-right a {
    color: #848484 !important;
    text-decoration: underline;
}
.khan-footer-wrapper-home .khan-footer-dark .khan-footer-copyright-right a:hover {
    color: #b0b0b0 !important;
}

.khan-footer-col h5 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.khan-footer-col ul li {
    margin-bottom: 10px;
}

.khan-footer-col ul li a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px;
    transition: color 0.2s;
    text-decoration: none;
    font-weight: 400;
}

.khan-footer-col ul li a:hover {
    color: #fff !important;
    text-decoration: underline;
}

.khan-footer-hr {
    border-top: 1px solid #222 !important;
    margin: 0;
    opacity: 1;
}

.khan-footer-socials {
    display: inline-flex;
    gap: 16px;
}

.khan-footer-socials li {
    margin: 0 !important;
}

.khan-footer-socials a {
    color: #fff !important;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: inline-block;
}

.khan-footer-socials a:hover {
    opacity: 1;
}

.khan-footer-socials i {
    font-size: 20px;
}

/* --- Cart/Checkout Footer (Figma footer-checkout-desktop) --- */
.khan-cart-footer-desktop {
    background: radial-gradient(50% 50% at 100% 0%, rgba(28, 28, 30, 1) 0%, rgba(14, 14, 15, 1) 50%, rgba(7, 7, 8, 1) 75%, rgba(0, 0, 0, 1) 100%);
    height: 82px;
    min-height: 82px;
    display: flex;
    align-items: center;
    color: #fff;
    width: 100%;
    padding: 0 var(--checkout-padding-x);
}

/* Override Container - inner 1180px, padding 21px 0 */
.khan-cart-footer-container {
    width: 100%;
    max-width: 1180px !important;
    padding: 21px 0 !important;
}

.khan-cart-footer-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.khan-cart-footer-logo {
    display: flex;
    align-items: center;
    padding-right: 30px;
}

.khan-cart-footer-contact {
    width: 293px;
    border-left: 1px solid #404043;
    padding-left: 21px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.khan-cart-footer-contact a:hover {
    opacity: 1 !important;
    text-decoration: underline;
}

.khan-cart-footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 0;
    width: 349px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #848484;
    white-space: nowrap;
}

.khan-cart-footer-legal-link {
    color: #848484;
    text-decoration: none;
}

.khan-cart-footer-legal-link:hover {
    color: #e4e4e4;
    text-decoration: none;
}

.khan-cart-footer-logo-img {
    max-width: 100px;
    max-height: 24px;
    display: block;
    filter: brightness(0) invert(1);
}

.khan-cart-footer-logo-text {
    font-family: 'Fine Art Sans Serif', serif;
    font-size: 24.04px;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.khan-cart-footer-contact-line {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    line-height: 14.95px;
    color: #e4e4e4;
    white-space: nowrap;
}

.khan-cart-footer-contact-link {
    color: #848484;
    text-decoration: underline;
    margin-left: 6px;
}

.khan-cart-footer-copyright {
    width: 253px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.khan-cart-footer-copyright-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    line-height: 14.95px;
    color: #e4e4e4;
}

.khan-cart-footer-divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 5px;
}

/* Mobile Cart Footer Elements */
.khan-cart-mobile-footer {
    background: #fff;
    padding: 20px 0 80px 0;
    /* Extra padding bottom for fixed nav */
    text-align: center;
}

.khan-cart-mobile-support-btn {
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    font-size: 14px;
    gap: 8px;
    transition: all 0.2s;
}

.khan-cart-mobile-support-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
    color: #000;
}

/* Fixed Bottom Nav (Mobile) */
.khan-mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 9999;
    padding: 8px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.khan-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #999;
    text-decoration: none;
    width: 20%;
}

.khan-nav-item:hover,
.khan-nav-item:focus {
    color: #666;
    text-decoration: none;
}

.khan-nav-item.active {
    color: #000;
    font-weight: 700;
}

.khan-nav-icon {
    font-size: 22px;
    margin-bottom: 4px;
    line-height: 1;
}

/* ----- Checkout Design System (Figma bit-level) ----- */
/* Checkout (Figma): Readex Pro for header, stepper, labels; Poppins for body/titles where specified. */
:root {
    --checkout-bg: #FAFAFA;
    --checkout-text: #333333;
    --checkout-text-secondary: #6B6B6B;
    --checkout-border: #E5E5E5;
    --checkout-border-light: #F0F0F0;
    --checkout-input-border: #C2C1C9;
    --checkout-card-bg: #FFFFFF;
    --checkout-header-h: 80px;
    /* Figma desktop (1440): 130px gutters, 1180px content */
    --checkout-padding-x: 130px;
    --checkout-content-max: 1180px;
    --checkout-main-width: 755px;
    --checkout-sidebar-width: 376px;
    --checkout-section-gap: 16px;
    --checkout-grid-gap: 16px;
    --checkout-card-radius: 12px;
    --checkout-card-padding: 16px;
    --checkout-input-h: 60px;
    --checkout-input-radius: 10px;
    --checkout-label-fs: 13px;
    --checkout-section-title-fs: 14px;
    --checkout-title-fs: 20px;
    --checkout-body-fs: 14px;
    --checkout-stepper-bg: #5C5C5C;
    --checkout-stepper-h: 60px;
    --checkout-step-active: #1FC16B;
    --checkout-step-connector: #BBBBBB;
    --checkout-logo-color: #020202;
    --checkout-shadow-header: -1px 3px 22px 0px rgba(65, 89, 96, 0.02);
    --checkout-shadow-card: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
}

.checkout-layout {
    display: flex;
    flex-direction: column;
    gap: var(--checkout-section-gap);
    background-color: var(--checkout-bg);
    min-height: 100vh;
    padding-bottom: 48px;
}

.checkout-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px var(--checkout-padding-x) 0;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    :root {
        --checkout-padding-x: 40px;
    }
}

@media (max-width: 991px) {
    :root {
        --checkout-padding-x: 16px;
        --checkout-header-h: 87px;
    }
}

/* Checkout Header - Figma (Back | Logo | Need help? WhatsApp Call Us) */
.checkout-header {
    height: var(--checkout-header-h);
    background: var(--checkout-card-bg);
    box-shadow: var(--checkout-shadow-header);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 1000;
    padding: 0 var(--checkout-padding-x);
}

.checkout-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--checkout-content-max);
    gap: 141px;
}

.checkout-header-left {
    width: 330px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.checkout-header-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--checkout-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.49em;
    font-family: 'Readex Pro', sans-serif;
}

.checkout-header-back:hover {
    color: var(--checkout-text);
    opacity: 0.8;
}

.checkout-header-back-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-header-back-icon img,
.checkout-header-back-icon .las {
    width: 24px;
    height: 24px;
    object-fit: contain;
    font-size: 24px !important;
}

.checkout-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.checkout-header .logo.checkout-header-logo {
    font-size: 36.8px;
    font-weight: 400;
    line-height: 1.028em;
    letter-spacing: 0;
    color: var(--checkout-logo-color);
    text-decoration: none !important;
    font-family: 'Readex Pro', sans-serif;
}

.checkout-header-right {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
}

.checkout-header-help-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--checkout-text);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5em;
    font-family: 'Readex Pro', sans-serif;
    transition: opacity 0.2s;
}

#checkout-need-help.checkout-header-help-item {
    font-size: 16px;
    font-weight: 500;
}

.checkout-header-help-item:hover {
    color: var(--checkout-text);
    opacity: 0.7;
}

.checkout-header-help-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Checkout Stepper - Figma: 60px bar #5C5C5C, 40px circles, 14px uppercase labels */
.checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--checkout-stepper-h);
    padding: 0 var(--checkout-padding-x);
    background: var(--checkout-stepper-bg);
    gap: 0;
}

.checkout-stepper-inner {
    display: flex;
    align-items: center;
    padding: 8px 0;
    max-width: var(--checkout-content-max);
    width: 100%;
    justify-content: center;
}

.checkout-stepper-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-stepper-step:not(:last-child)::after {
    content: '';
    width: 50px;
    height: 1px;
    background: var(--checkout-step-connector);
    margin: 0 8px;
    flex-shrink: 0;
}

.checkout-stepper-circle {
    width: 40px;
    height: 40px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Readex Pro', sans-serif;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    border: none;
}

.checkout-stepper-icon {
    font-size: 18px;
    line-height: 1;
}

.checkout-stepper-step.active .checkout-stepper-circle {
    background: var(--checkout-step-active);
    color: #fff;
}

.checkout-stepper-step.done .checkout-stepper-circle {
    background: var(--checkout-step-active);
    color: #fff;
}

.checkout-stepper-step:not(.active):not(.done) .checkout-stepper-circle {
    background: rgba(255, 255, 255, 0.19);
    color: rgba(255, 255, 255, 0.6);
}

.checkout-stepper-label {
    font-size: var(--checkout-section-title-fs);
    font-weight: 400;
    line-height: 1.15em;
    font-family: 'Readex Pro', sans-serif;
    text-transform: capitalize;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.checkout-stepper-step.active .checkout-stepper-label {
    color: var(--checkout-step-active);
    font-weight: 500;
}

.checkout-stepper-step.done .checkout-stepper-label {
    color: rgba(255, 255, 255, 0.9);
}

.checkout-stepper-step:not(.active):not(.done) .checkout-stepper-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Order Summary header row with Edit link (Frame 1) */
.checkout-product-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Left column section title (Payment Methods on step 2) - same as Shipping Address */
.checkout-main .checkout-product-list-title,
.checkout-main-card .checkout-product-list-title {
    font-size: var(--checkout-section-title-fs);
    font-weight: 400;
    line-height: 1.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.checkout-order-summary-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #222029;
    font-family: 'Readex Pro', sans-serif;
}

.checkout-step-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #222029;
    font-family: 'Readex Pro', sans-serif;
    text-transform: none;
    margin-bottom: 20px;
}

.checkout-order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.checkout-edit-link {
    font-size: 14px;
    font-weight: 500;
    font-family: 'Readex Pro', sans-serif;
    color: #333333;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.checkout-edit-link:hover {
    color: var(--checkout-text);
    opacity: 0.75;
}

/* When sidebar has explicit Order Summary row, hide duplicate heading in cart_summary */
.checkout-sidebar > div:first-child.checkout-order-summary-row + #cart_summary .summary-heading,
.checkout-sidebar .checkout-order-summary-row + #cart_summary .summary-heading,
.checkout-sidebar-card #cart_summary .summary-heading,
.checkout-sidebar-card .card-header h3 {
    display: none;
}

/* Single card appearance: sidebar card wraps Order Summary + content; inner card has no extra box */
.checkout-sidebar-card #cart_summary .card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* When sidebar has Order Summary row, hide duplicate header inside cart_summary */
.checkout-sidebar-card .checkout-order-summary-row + #cart_summary .card-header,
.checkout-sidebar-card .checkout-order-summary-row + #cart_summary .summary-heading {
    display: none !important;
}

.khan-checkout-map-container {
    border: 1px solid var(--checkout-border);
    padding: 16px;
    background: #fff;
    border-radius: 12px;
}

/* Figma: map block 754px wide, #E5E3DF; use larger height for usable map (Figma shows 160px) */
.checkout-map-figma {
    max-width: 754px;
    min-height: 160px;
    height: 350px;
    background: transparent;
    border-radius: 12px;
    border: none;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checkout-map-figma .checkout-label {
    margin-bottom: 4px;
    flex-shrink: 0;
    background: transparent !important;
    padding: 0 !important;
}

.checkout-map-figma .checkout-map-search-row {
    flex-shrink: 0;
    margin-bottom: 4px;
}

.checkout-map-figma .checkout-map-search-row .input-group-text,
.checkout-map-figma .checkout-map-search-row .form-control {
    height: 40px !important;
}

.checkout-map-figma #searchInput {
    height: 40px !important;
}

.checkout-map-figma .checkout-map-canvas,
.checkout-map-figma #map.checkout-map-canvas {
    flex: 1;
    min-height: 280px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.checkout-map-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkout-map-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Connector styles for checkout header & stepper */
.checkout-header {
    padding: 12px 16px;
    background: var(--checkout-bg, #fff);
    border-radius: 10px;
}
.checkout-header .checkout-brand img { max-height: 36px; }
.checkout-stepper { padding: 12px 0; }
.checkout-stepper .step { display: flex; align-items: center; gap:8px; }
.checkout-stepper .step-badge {
    width: 34px; height:34px; border-radius:50%; background:var(--primary, #0d6efd); color:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.checkout-stepper .step:not(.active) .step-badge { background: #e9ecef; color: #495057; }
.checkout-stepper .step-divider { width: 24px; height:2px; background:#dee2e6; margin:0 6px; }


/* Figma: two buttons below map */
.checkout-map-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkout-user-strip {
    background: #ffffff;
    border: 1px solid var(--checkout-border);
    border-radius: 12px;
    box-shadow: -1px 3px 22px rgba(65, 89, 96, 0.02);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #ededf2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #222029;
}

.checkout-user-meta {
    flex: 1;
    min-width: 0;
}

.checkout-user-name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
    line-height: 1.4;
}

.checkout-user-email {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #938F9C;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-user-selected {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #020202;
    display: inline-block;
    position: relative;
}

.checkout-user-selected::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: #020202;
}

.checkout-verified-pill {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #0DAC57;
    background: #fff;
    border-left: 0;
}

.checkout-otp-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.checkout-otp-left {
    flex: 1;
    min-width: 0;
}

.checkout-otp-title {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #222029;
    margin-bottom: 4px;
}

.checkout-otp-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #938F9C;
    line-height: 1.4;
}

.checkout-otp-inputs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.checkout-otp-input {
    width: 42px;
    height: 42px;
    border: 1px solid var(--checkout-input-border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

.checkout-otp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.checkout-otp-muted {
    font-size: 12px;
    color: #938F9C;
    font-family: 'Poppins', sans-serif;
}

.checkout-otp-resend {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #222029;
    text-decoration: underline;
    cursor: pointer;
}

.checkout-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.checkout-schedule-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.checkout-schedule-link {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #938F9C;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.checkout-schedule-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-schedule-option {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

.checkout-schedule-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-schedule-radio {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid #020202;
    position: relative;
    justify-self: start;
}

.checkout-schedule-option input:checked + .checkout-schedule-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #020202;
    border-radius: 999px;
}

.checkout-schedule-name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #222029;
}

.checkout-schedule-price {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.checkout-schedule-price--free {
    color: #0DAC57;
}

.checkout-btn-manual {
    border: 1px solid #020202;
    color: #212121;
    background: #fff;
    font-weight: 500;
    font-size: 14px;
}

.checkout-btn-manual:hover {
    background: #f5f5f5;
    border-color: #020202;
    color: #212121;
}

.checkout-btn-confirm-location {
    background: #ededf2;
    color: #bbb;
    border: none;
    font-weight: 500;
    font-size: 14px;
}

.checkout-btn-confirm-location--enabled {
    background: var(--checkout-step-active, #1FC16B);
    color: #fff;
}

.checkout-btn-confirm-location--enabled:hover {
    background: #1ab85f;
    color: #fff;
}

/* Breadcrumb Bar */
.checkout-breadcrumb-bar {
    background: #fafafa;
}

.checkout-breadcrumb-bar .text-primary {
    color: #111 !important;
    /* Brand standard for active steps is bold black in Figma */
    font-weight: 800;
}

.gap-20 {
    gap: 20px;
}

.letter-spacing-1 {
    letter-spacing: 0.1em;
}

/* Summary Refinements */
.checkout-summary .summary-item .item-img img {
    object-fit: cover;
}

.checkout-summary .summary-item .item-name {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.checkout-payment-methods img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s;
}

.checkout-payment-methods img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--checkout-grid-gap);
    padding-top: 12px;
    padding-bottom: 24px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .checkout-grid {
        grid-template-columns: var(--checkout-main-width) var(--checkout-sidebar-width);
        gap: var(--checkout-grid-gap);
        max-width: var(--checkout-content-max);
    }
}

.checkout-main {
    min-width: 0;
    max-width: var(--checkout-main-width);
}

/* White card wrapper for left column (form / payment methods) - Figma shadow/sm, 12px radius */
.checkout-main-card {
    background: var(--checkout-card-bg);
    border-radius: var(--checkout-card-radius);
    padding: var(--checkout-card-padding);
    border: 1px solid var(--checkout-border-light);
    box-shadow: var(--checkout-shadow-card);
}

/* Step 1 map/search block used in shipping and guest-address variant */
.checkout-map-card {
    background: #fff;
    border: 1px solid var(--checkout-border-light);
    border-radius: 12px;
    padding: 12px;
}

.checkout-map-search .form-control {
    height: 42px;
    border-radius: 10px !important;
    border: 1px solid #E0E0E5;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.checkout-map-body {
    margin-top: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E0E0E5;
}

.checkout-map-placeholder {
    height: 160px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #757575;
    background: #E5E3DF;
}

.checkout-map-placeholder--figma {
    position: relative;
    display: block;
    padding: 0;
}

.checkout-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -63%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.checkout-map-pin img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.checkout-map-edit-btn {
    position: absolute;
    right: 12px;
    top: 10px;
    border: 0;
    background: #020202;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-map-edit-btn i {
    font-size: 14px;
    line-height: 1;
}

.checkout-map-figma-footer {
    position: absolute;
    right: 14px;
    bottom: 10px;
    display: flex;
    gap: 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: #000;
    opacity: 0.7;
}

.checkout-map-figma-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #7f7b87;
}

.checkout-selected-location-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #222029;
    line-height: 1.4;
}

.checkout-selected-location-main {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: #222029;
}

.checkout-selected-location-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #7F7B87;
    line-height: 1.4;
}

.checkout-section-label .tracking-wide {
    letter-spacing: 0.08em;
}

.checkout-main-card .form-label {
    font-family: 'Readex Pro', sans-serif;
    font-size: 13px;
    color: #333;
}

.checkout-main-card .form-control,
.checkout-main-card .form-select,
.checkout-main-card select.form-control {
    height: 48px;
    border-radius: 10px !important;
    border: 1px solid var(--checkout-input-border);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #333;
}

.checkout-schedule {
    border: 1px solid var(--checkout-border-light);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.checkout-schedule a {
    font-size: 12px;
    color: #757575;
    text-decoration: none;
}

/* Payment (Figma) - express buttons + list rows */
.checkout-express-pay {
    margin: 8px 0 18px;
}

.checkout-express-btn {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--checkout-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.checkout-express-btn--apple {
    background: #020202;
    color: #fff;
    border-color: #020202;
    margin-top: 12px;
}

.checkout-express-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    width: 20px;
}

.checkout-express-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #A7A5AF;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

.checkout-express-divider::before,
.checkout-express-divider::after {
    content: '';
    height: 1px;
    background: #E0E0E5;
    flex: 1;
}

.checkout-payment-list {
    border-top: 1px solid #E0E0E5;
    border-bottom: 1px solid #E0E0E5;
}

.checkout-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 12px;
    border-top: 1px solid #E0E0E5;
    cursor: pointer;
    position: relative;
}

.checkout-payment-row:first-child {
    border-top: 0;
}

.checkout-payment-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-payment-radio {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #CDC1D2;
    flex-shrink: 0;
    margin-left: auto;
}

.checkout-payment-row input:checked ~ .checkout-payment-radio {
    border-color: #020202;
}

.checkout-payment-row input:checked ~ .checkout-payment-radio::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #020202;
    margin: 3px auto 0;
}

.checkout-payment-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.checkout-payment-row-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.checkout-payment-row-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
}

.checkout-payment-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
    white-space: nowrap;
}

.checkout-payment-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #A7A5AF;
    margin-left: 10px;
    white-space: nowrap;
}

.checkout-payment-footer {
    margin-top: 14px;
}

.checkout-payment-terms {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #A7A5AF;
    margin-bottom: 10px;
}

.checkout-payment-terms-link {
    color: #222029;
    font-weight: 600;
    text-decoration: underline;
}

/* Payment sidebar: address + wallet/coupon rows (Figma) */
.checkout-sidebar-address-card {
    background: #fff;
    border: 1px solid var(--checkout-border-light);
    border-radius: 12px;
    padding: 14px 16px;
}

.checkout-sidebar-address-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
    margin-bottom: 10px;
}

.checkout-sidebar-address-pin {
    font-size: 14px;
    line-height: 1;
}

.checkout-sidebar-address-body {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #57545B;
    line-height: 1.45;
}

.checkout-sidebar-address-line + .checkout-sidebar-address-line {
    margin-top: 6px;
}

.checkout-verified-mini {
    display: inline-block;
    margin-left: 8px;
    color: #0DAC57;
    font-weight: 600;
    font-size: 12px;
}

.checkout-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--checkout-border-light);
    border-radius: 12px;
    overflow: hidden;
}

.checkout-sidebar-action-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--checkout-border-light);
    padding: 12px 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkout-sidebar-action-row:last-child {
    border-bottom: 0;
}

.checkout-sidebar-action-left {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.checkout-sidebar-action-right {
    margin-left: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.checkout-sidebar-action-toggle {
    width: 16px;
    height: 16px;
    border: 1px solid #E0E0E5;
    border-radius: 4px;
    flex-shrink: 0;
}

.checkout-sidebar-action-chevron {
    margin-left: auto;
    color: #57545B;
}

/* Figma: ~39px vertical spacing between form fields */
.checkout-main-card .form-group {
    margin-bottom: 39px;
}

.checkout-main-card .row {
    margin-bottom: 39px;
}

/* Figma: First Name / Last Name two columns 371px each at desktop */
@media (min-width: 992px) {
    .checkout-main-card .checkout-name-row .col-md-6 {
        flex: 0 0 371px;
        max-width: 371px;
    }
}

.checkout-sidebar {
    position: relative;
    min-width: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .checkout-sidebar {
        position: sticky;
        top: 24px;
        height: fit-content;
        align-self: start;
        width: var(--checkout-sidebar-width);
    }
}

/* Order Summary Container (Figma): 376px, rx 12, 16px padding, inner content white box rx 4 */
/* Order Summary Container: outer card 376px, rx 12, subtle border (Figma uses filter/shadow) */
.checkout-sidebar-card {
    background: var(--checkout-card-bg);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #E9E9E9;
    box-shadow: var(--checkout-shadow-card);
    width: 100%;
    box-sizing: border-box;
}

/* Order Summary Container: inner content area (344×151 in design), white, rx 4 */
.checkout-sidebar-card #cart_summary .checkout-summary {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}
.checkout-sidebar-card .checkout-order-summary-row {
    margin-bottom: 12px;
}

.checkout-sidebar-card .summary-items {
    margin-bottom: 16px;
}

.checkout-sidebar-card .summary-divider {
    margin: 16px 0;
}

.checkout-sidebar-card .summary-total {
    margin-top: 6px;
    padding-top: 14px;
}

/* Checkout/Cart footer - Figma: 130px padding, 82px height, gradient, inner 1180px, 21px vertical padding */
.checkout-footer {
    height: 82px;
    min-height: 82px;
    background: radial-gradient(50% 50% at 100% 0%, rgba(28, 28, 30, 1) 0%, rgba(14, 14, 15, 1) 50%, rgba(7, 7, 8, 1) 75%, rgba(0, 0, 0, 1) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 var(--checkout-padding-x);
}

.checkout-footer .container-fluid,
.khan-cart-footer-desktop.checkout-footer .container-fluid {
    max-width: 1180px !important;
    padding: 21px 0 !important;
}

/* Section title in left column (Shipping Address, Payment Method) - Figma 14px, TITLE case */
.checkout-main .checkout-heading,
.checkout-main-card .checkout-heading {
    font-size: var(--checkout-section-title-fs);
    font-weight: 400;
    line-height: 1.15em;
    color: var(--checkout-text);
    margin-bottom: 20px;
    font-family: 'Readex Pro', sans-serif;
    text-transform: uppercase;
}

.checkout-section .checkout-heading:first-child {
    margin-top: 0;
}

.checkout-section + .checkout-section .checkout-heading {
    margin-top: 8px;
}

/* Order Summary title (right column) stays 20px */
.checkout-order-summary-title,
.checkout-sidebar .checkout-heading {
    font-size: var(--checkout-title-fs);
    font-weight: 500;
    text-transform: none;
}

.checkout-label {
    display: block;
    font-size: var(--checkout-label-fs);
    font-weight: 500;
    color: var(--checkout-text);
    margin-bottom: 8px;
    font-family: 'Readex Pro', sans-serif;
}

/* Shipping page Figma typography and section bars */
.checkout-main-card .checkout-heading {
    text-transform: none;
}

.checkout-main-card > form > .checkout-section:first-child > .checkout-heading {
    color: #222029;
    font-family: 'Readex Pro', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 12px;
}

.checkout-main-card .checkout-delivery-title {
    color: #000;
    font-family: 'Readex Pro', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin: 6px 0 16px;
}

.checkout-main-card #checkout-manual-fields .checkout-form-group-label-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f4f4;
    border-radius: 4px;
    padding: 9px 15px 8px;
    margin-bottom: 12px;
}

.checkout-main-card #checkout-manual-fields .checkout-form-group-label {
    color: #7b7b7b;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 12.65px;
    text-transform: uppercase;
}

.checkout-main-card #checkout-manual-fields .checkout-form-required {
    color: #cb202d;
    font-family: 'Readex Pro', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 13.8px;
}

.checkout-main-card #checkout-manual-fields .checkout-label {
    color: #222029;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    margin-bottom: 4px;
}

.checkout-main-card #checkout-manual-fields .checkout-label-sm {
    color: #000;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 12.65px;
}

.checkout-main-card #checkout-manual-fields .form-control.rounded-0,
.checkout-main-card #checkout-manual-fields .input-group-text.rounded-0,
.checkout-main-card #checkout-manual-fields .bootstrap-select .dropdown-toggle {
    border-color: #c2c1c9;
}

.checkout-shipping-page .checkout-sidebar-card .coupon-section {
    display: none !important;
}

.checkout-main-card #checkout-manual-fields .form-control.rounded-0,
.checkout-main-card #checkout-manual-fields .bootstrap-select .dropdown-toggle {
    font-family: 'Poppins', sans-serif;
}

/* Rebuilt shipping page from provided Figma HTML */
.figma-shipping-wrap {
    background: #fafafa;
    min-height: 100vh;
    font-family: 'Readex Pro', sans-serif;
}

.figma-header {
    height: 80px;
    background: #fff;
    box-shadow: -1px 3px 22px rgba(64, 89, 96, 0.02);
    padding: 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-header-inner {
    max-width: 1180px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.figma-back a { color: #333; font-size: 16px; font-weight: 500; text-decoration: none; }
.figma-logo { color: #020202; font-size: 36.81px; font-family: 'Fine Art Sans Serif', sans-serif; }
.figma-help { display: flex; gap: 20px; align-items: center; }
.figma-help span { font-size: 16px; font-weight: 500; color: #333; }
.figma-help a { font-size: 13px; color: #333; text-decoration: none; }

.figma-stepper {
    height: 60px;
    padding: 0 130px;
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1180px;
    margin: 0 auto;
}

.figma-step { font-size: 14px; color: #1e1e1c; }
.figma-step.active { color: #1fc16b; }
.figma-step.muted { color: #9b9b9b; }

.figma-content { max-width: 1180px; margin: 0 auto; padding: 12px 0 48px; }
.figma-titles { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.figma-titles h2 { margin: 0; color: #222029; font-size: 20px; font-weight: 500; }
.figma-order-title { width: 371px; display: flex; justify-content: space-between; align-items: flex-start; }
.figma-order-title h2 { font-weight: 700; }
.figma-order-title a { color: #bbb; font-size: 17px; text-decoration: underline; }

.figma-grid { display: grid; grid-template-columns: 788px 376px; gap: 16px; align-items: start; }
.figma-left-card, .figma-summary-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
}
.figma-left-card { padding: 16px; }
.figma-left-card h3 { margin: 0 0 15px; font-size: 20px; font-weight: 500; }

.figma-map-box { position: relative; margin-bottom: 12px; }
.figma-map-placeholder { height: 161px; border-radius: 8px; background: #e5e3df; display: flex; align-items: center; justify-content: center; color: #555; }
.figma-map-edit { position: absolute; right: 10px; top: 10px; border: 0; background: #020202; color: #fff; border-radius: 4px; padding: 6px 10px; font-size: 11.67px; }

.figma-section-label { background: #f4f4f4; border-radius: 4px; padding: 9px 15px 8px; display: flex; justify-content: space-between; margin: 12px 0; }
.figma-section-label span { color: #7b7b7b; font: 700 11px/12.65px 'Nunito Sans', sans-serif; }
.figma-section-label small { color: #cb202d; font-size: 12px; }

.figma-field { margin-bottom: 12px; }
.figma-field label { display: block; color: #222029; font: 500 16px/22.4px 'Poppins', sans-serif; margin-bottom: 4px; }
.figma-field input {
    width: 100%;
    height: 60px;
    border: 1px solid #c2c1c9;
    border-radius: 10px;
    padding: 0 20px;
    font: 500 16px/22.4px 'Poppins', sans-serif;
    color: #222029;
}

.figma-field input::placeholder { color: #757575; font: 400 14px 'Nunito Sans', sans-serif; }
.figma-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.figma-phone-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; }
.figma-code { text-align: center; }
.figma-verified { color: #1fc16b; font: 600 12px/16.8px 'Poppins', sans-serif; }

.figma-otp { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.figma-otp strong { font: 500 16px/22.4px 'Poppins', sans-serif; color: #222029; }
.figma-otp p { margin: 6px 0 0; color: #938f9c; font: 400 16px/22.4px 'Poppins', sans-serif; }
.figma-otp-inputs { display: flex; gap: 8px; align-items: center; }
.figma-otp-inputs input { width: 48px; height: 48px; border: 1px solid #c2c1c9; border-radius: 10px; text-align: center; }

.figma-schedule { margin-top: 8px; }
.figma-schedule-title { display: flex; justify-content: space-between; margin-bottom: 12px; }
.figma-schedule-title strong { color: #333; font: 600 16px/22.4px 'Poppins', sans-serif; }
.figma-schedule-title a { color: #777; font: 700 12px/13.8px 'Nunito Sans', sans-serif; text-transform: uppercase; text-decoration: underline; }
.figma-schedule label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #000; font: 400 14px/22px 'Nunito Sans', sans-serif; }
.figma-schedule label span { color: #222029; font: 600 14px/19.6px 'Poppins', sans-serif; }

.figma-bottom-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e9e9e9; display: flex; justify-content: space-between; align-items: center; }
.figma-bottom-actions a { color: #222029; text-decoration: none; font-weight: 500; }
.figma-bottom-actions button { width: 160px; height: 52px; border: 0; border-radius: 12px; background: #020202; color: #fff; font: 500 14px 'Instrument Sans', sans-serif; }

.figma-summary-card { padding: 16px; }
.figma-summary-card .coupon-section { display: none; }
.figma-summary-card .summary-heading { display: none; }

.figma-footer { height: 82px; background: radial-gradient(ellipse 100.26% 1401.63% at 100% -4950%, #1c1c1e 0%, #000 100%); padding: 0 130px; display: flex; align-items: center; }
.figma-footer-inner { max-width: 1180px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.figma-footer-logo { color: #fff; font-size: 24.04px; font-family: 'Fine Art Sans Serif', sans-serif; }
.figma-footer-contact { border-left: 1px solid #404043; padding-left: 21px; }
.figma-footer-contact p, .figma-footer-copy { margin: 0; color: #e4e4e4; font: 400 13px/14.95px 'Nunito Sans', sans-serif; }
.figma-footer-contact span { color: #848484; }
.figma-footer-links { display: flex; gap: 8px; }
.figma-footer-links a { color: #848484; font: 400 12px/16.8px 'Poppins', sans-serif; text-decoration: none; }

.checkout-main .form-control.rounded-0,
.checkout-main-card .form-control.rounded-0 {
    height: var(--checkout-input-h);
    border: 1px solid var(--checkout-input-border);
    background: var(--checkout-card-bg);
    padding: 0 16px;
    font-size: var(--checkout-body-fs);
    color: var(--checkout-text);
    border-radius: var(--checkout-input-radius);
    font-family: 'Readex Pro', sans-serif;
}

.checkout-main textarea.form-control.rounded-0,
.checkout-main-card textarea.form-control.rounded-0 {
    height: auto;
    min-height: 88px;
    padding: 12px 16px;
    border-radius: var(--checkout-input-radius);
}

.checkout-main .form-control.rounded-0:focus,
.checkout-main-card .form-control.rounded-0:focus {
    border-color: var(--checkout-text);
    box-shadow: 0 0 0 2px rgba(34, 32, 41, 0.12);
}

.checkout-main .input-group-text.rounded-0,
.checkout-main-card .input-group-text.rounded-0 {
    border: 1px solid var(--checkout-input-border);
    background: var(--checkout-card-bg);
    border-radius: var(--checkout-input-radius) 0 0 var(--checkout-input-radius);
    font-size: var(--checkout-body-fs);
}

.checkout-main .input-group .form-control.rounded-0,
.checkout-main-card .input-group .form-control.rounded-0 {
    border-radius: 0 var(--checkout-input-radius) var(--checkout-input-radius) 0;
}

.checkout-main .input-group:not(.has-validation) > .input-group-append:last-child .input-group-text,
.checkout-main-card select.form-control.rounded-0 {
    border-radius: var(--checkout-input-radius);
}

.checkout-main-card select.aiz-selectpicker,
.checkout-main .selectpicker {
    height: var(--checkout-input-h);
    border: 1px solid var(--checkout-input-border);
    border-radius: var(--checkout-input-radius);
}

/* Payment section (طريقة الدفع او السداد) - Figma: same section title 14px uppercase; cards 10px radius, 28px icons */
.checkout-payment-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--checkout-border);
}

.checkout-payment-section .checkout-heading {
    margin-bottom: 20px;
    font-size: var(--checkout-section-title-fs);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.15em;
    color: var(--checkout-text);
}

.tabby-card-wrap {
    margin-top: 16px;
}

/* Payment Options Grid */
.payment-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.checkout-main-card .payment-options-grid,
.checkout-payment-cards.payment-options-grid {
    gap: 12px;
}

.payment-option-item {
    cursor: pointer;
    margin-bottom: 0;
}

.payment-option-item input {
    display: none;
}

.payment-option-content {
    border: 2px solid var(--checkout-input-border);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--checkout-card-bg);
    transition: border-color 0.2s, background 0.2s;
    height: 100%;
    min-height: 88px;
    justify-content: center;
}

.payment-option-item input:checked + .payment-option-content {
    border-color: var(--checkout-text);
    background: rgba(34, 32, 41, 0.04);
}

.payment-option-content:hover {
    border-color: var(--checkout-input-border);
}

.checkout-payment-card-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.payment-option-content img,
.payment-option-content .checkout-payment-card-icon {
    height: 28px;
    width: 28px;
    object-fit: contain;
}

.payment-option-content img.fallback-icon {
    height: 28px;
    width: auto;
}

.payment-option-content span {
    font-size: var(--checkout-body-fs);
    font-weight: 500;
    color: var(--checkout-text);
    font-family: 'Readex Pro', sans-serif;
    text-align: center;
}

.btn-checkout {
    background: var(--checkout-text);
    color: #fff;
    font-weight: 600;
    font-size: var(--checkout-body-fs);
    font-family: 'Readex Pro', sans-serif;
    height: var(--checkout-input-h);
    border: none;
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}

.btn-checkout:hover {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

/* Thank You (order confirmed) */
.checkout-thankyou-main {
    float: none;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.checkout-thankyou-header {
    padding: 32px 0 40px;
}

.checkout-thankyou-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    position: relative;
}

.checkout-thankyou-title {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Readex Pro', sans-serif;
    color: var(--checkout-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .checkout-thankyou-title {
        font-size: 28px;
    }
}

.checkout-thankyou-message {
    font-size: var(--checkout-body-fs);
    color: var(--checkout-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.checkout-thankyou-section {
    border-top: 1px solid var(--checkout-border);
    padding-top: 28px;
}

.checkout-thankyou-section .checkout-heading {
    margin-bottom: 20px;
}

.checkout-thankyou-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--checkout-border);
}

.checkout-thankyou-date {
    font-size: var(--checkout-body-fs);
    color: var(--checkout-text-secondary);
}

.checkout-thankyou-actions {
    margin-top: 32px;
    padding-top: 24px;
}

.checkout-thankyou-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #57545B;
    border-top: 1px solid var(--checkout-border-light);
    border-bottom: 1px solid var(--checkout-border-light);
    padding: 12px 0;
}

.checkout-thankyou-orders {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkout-thankyou-order-card {
    border: 1px solid var(--checkout-border-light);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

.checkout-thankyou-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.checkout-thankyou-order-head h4 {
    margin: 0;
    font-family: 'Readex Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.checkout-thankyou-order-status {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #0DAC57;
    font-weight: 600;
}

.checkout-thankyou-order-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #F2F2F2;
}

.checkout-thankyou-order-row:first-of-type {
    border-top: 0;
}

.checkout-thankyou-order-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #222029;
}

.checkout-thankyou-order-qty,
.checkout-thankyou-order-price {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #57545B;
    white-space: nowrap;
}

.checkout-thankyou-lottie {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.checkout-thankyou-icon-fallback {
    display: none;
    width: 64px;
    height: 64px;
    background: #f0fdf4;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

/* Summary Styles */
/* ----- Order Summary (checkout sidebar card) ----- */
.checkout-summary {
    background: transparent;
    padding: 0;
    font-family: 'Readex Pro', sans-serif;
}

.summary-heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--checkout-text);
    font-family: 'Readex Pro', sans-serif;
}

.checkout-sidebar-card .summary-items {
    margin-bottom: 12px;
}
.checkout-sidebar-card .summary-divider {
    margin: 12px 0;
}
.checkout-sidebar-card .summary-calculations {
    gap: 6px;
}
.checkout-sidebar-card .summary-total {
    margin-top: 2px;
    padding-top: 10px;
}

.summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.summary-item:last-child {
    margin-bottom: 0;
}

.summary-item .item-img {
    width: 56px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--checkout-border);
}

/* Order Summary Container: product image ~100×151, rx 3 (path 19,18–119,168.94) */
.checkout-sidebar-card .summary-item .item-img {
    width: 100px;
    height: 150px;
    border-radius: 3px;
    border: 1px solid #E9E9E9;
}

.summary-item .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summary-item .item-info {
    flex: 1;
    min-width: 0;
}

.summary-item .item-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.summary-item .item-name {
    font-size: var(--checkout-body-fs);
    font-weight: 500;
    color: var(--checkout-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summary-item .item-qty {
    font-size: 12px;
    color: var(--checkout-text-secondary);
    margin-top: 2px;
}

.checkout-summary-attrs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.summary-item-attr {
    font-size: 12px;
    color: var(--checkout-text-secondary);
    line-height: 1.3;
}

.summary-item-low-stock {
    font-size: 12px;
    color: #CB202D;
    font-family: 'Readex Pro', sans-serif;
    line-height: 1.15;
    margin-top: 2px;
}

.summary-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.summary-item-price-amount {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #222029;
    font-family: 'Poppins', sans-serif;
}

.summary-item-price-currency {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #222029;
    font-family: aed, sans-serif;
}

.summary-item-attr-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.15;
}

.summary-item-attr-label {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #222029;
    line-height: 16.8px;
}

.summary-item-attr-value {
    font-size: 12px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #57545B;
    line-height: 16.8px;
}

.summary-item-qty-value {
    font-size: 12px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #7A7A7A;
    line-height: 13.8px;
}

.summary-item .item-name-row .item-price {
    font-size: var(--checkout-body-fs);
    font-weight: 600;
    color: var(--checkout-text);
    flex-shrink: 0;
}

.summary-item .item-price {
    font-size: var(--checkout-body-fs);
    font-weight: 600;
    color: var(--checkout-text);
}

/* Order Summary Container: product text #222029, quantity #57545B (Figma) */
.checkout-sidebar-card .summary-item .item-name,
.checkout-sidebar-card .summary-item .item-name-row .item-price,
.checkout-sidebar-card .summary-item .item-price {
    color: #57545B;
    font-size: 12px;
    font-weight: 500;
}
.checkout-sidebar-card .summary-item .item-qty {
    color: #57545B;
}

.summary-divider {
    height: 1px;
    background: #E9E9E9;
    margin: 16px 0;
}

.summary-calculations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    line-height: 1.4;
    color: var(--checkout-text);
}

.calc-row.coupon {
    color: #28a745;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 4px;
    padding-top: 12px;
}

.summary-total-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-inc-vat {
    font-size: 14px;
    color: #757575;
    font-weight: 400;
    line-height: 1.4;
}

.summary-total span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--checkout-text);
}

.summary-free-value {
    color: #0DAC57;
    font-weight: 600;
}

.summary-wallet-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-weight: 600;
    color: var(--checkout-text);
}

.summary-wallet-amount {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #14AE5C;
    font-family: Poppins;
}

.summary-wallet-currency {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #14AE5C;
    font-family: aed;
}

.summary-subtotal-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.summary-subtotal-amount {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #333333;
    font-family: Poppins;
}

.summary-subtotal-currency {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #333333;
    font-family: aed;
}

.summary-total-left > span:first-child {
    font-size: 20px !important;
    font-weight: 600;
    color: var(--checkout-text);
    line-height: 1.2;
}

.total-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.total-price-amount {
    font-size: 20px !important;
    font-weight: 600;
    line-height: 1.2;
    color: #0DAC57;
    font-family: 'Readex Pro', sans-serif;
}

.total-price-currency {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #0DAC57;
    font-family: aed;
}

/* Promo / coupon in Order Summary */
.checkout-sidebar-card .coupon-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--checkout-border);
}

.checkout-sidebar-card .coupon-form .input-group {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E0E0E0;
}

.checkout-sidebar-card .coupon-form .form-control {
    height: 44px;
    min-height: 44px;
    border: none;
    font-size: 14px;
    font-family: 'Readex Pro', sans-serif;
}

.checkout-sidebar-card .coupon-form .btn-dark {
    background: #020202;
    border-color: #020202;
    color: #fff;
    font-weight: 500;
    padding: 0 16px;
    height: 44px;
    min-height: 44px;
    font-size: 14px;
}

.checkout-sidebar-card .coupon-form .btn-dark:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* Order Summary: force layout and RTL alignment */
.checkout-sidebar-card .checkout-order-summary-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

[dir="rtl"] .checkout-sidebar-card .checkout-order-summary-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .summary-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .summary-item .item-name-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .calc-row,
[dir="rtl"] .summary-total {
    flex-direction: row-reverse;
}

/* Shipping page: Complete Order row */
/* Figma: terms checkbox 13×13, rx 6.5 */
.checkout-main-card .agree-box .aiz-square-check {
    width: 13px;
    height: 13px;
    border-radius: 6.5px;
    border: 2px solid var(--checkout-input-border);
}

.checkout-main-card .agree-box input:checked ~ .aiz-square-check {
    border-color: #020202;
}

.checkout-main-card .agree-box .aiz-square-check:after {
    margin-left: -1.5px;
    margin-top: -4px;
    width: 4px;
    height: 8px;
}

.checkout-main-card .agree-box + .d-flex,
.checkout-main-card .d-flex.justify-content-between.align-items-center {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--checkout-border);
}

.checkout-main-card .btn-checkout {
    min-width: 180px;
}

/* Responsive Overrides - Figma phone: single column, reduced padding (24px), full-width cards */
@media (max-width: 991px) {
    .checkout-container {
        padding-left: var(--checkout-padding-x);
        padding-right: var(--checkout-padding-x);
    }

    .checkout-stepper-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .checkout-stepper-step:not(:last-child)::after {
        width: 16px;
    }
    
    .cart-breadcrumb-section {
        padding-top: 10px;
        margin-bottom: 16px;
    }

    .cart-page-order-summary-title {
        display: none;
    }
    
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 10px;
        max-width: 100%;
    }

    .checkout-main {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .checkout-sidebar {
        position: static;
        margin-top: 40px;
        width: 100%;
    }
    
    .checkout-summary {
        width: 100%;
    }
    
    .cart-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 32px;
    }
    
    .order-summary-title-desktop {
        display: block;
    }
    
    .order-summary-title {
        display: block;
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
    
    .khan-cart-item-card {
        padding: 12px;
    }
    
    .khan-cart-img-wrap {
        width: 100px;
        height: 125px;
    }
    
    .order-summary-shipping-input {
        width: 100%;
        max-width: 334px;
    }
    
    .order-summary-checkout-button {
        width: 100%;
        max-width: 358px;
    }
    
    .order-summary-payment-methods {
        padding: 15px 0;
    }
    
    .order-summary-breakdown-row {
        font-size: 16px;
    }
    
    .order-summary-breakdown-label,
    .order-summary-breakdown-value {
        font-size: 16px;
    }
    
    .order-summary-breakdown-total-label,
    .order-summary-breakdown-total-value {
        font-size: 20px;
    }

    .checkout-header .help-link {
        display: none;
    }

    /* Mobile: Need help? bottom sheet (Figma: open help- phone) */
    .checkout-help-desktop {
        display: none !important;
    }
    #checkout-need-help {
        cursor: pointer;
    }
}

/* Checkout help overlay (mobile bottom sheet) */
.checkout-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s;
}
.checkout-help-overlay.open {
    visibility: visible;
    pointer-events: auto;
}
.checkout-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s;
}
.checkout-help-overlay.open .checkout-help-backdrop {
    opacity: 1;
}
.checkout-help-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    max-height: 70vh;
    overflow-y: auto;
}
.checkout-help-overlay.open .checkout-help-sheet {
    transform: translateY(0);
}
.checkout-help-sheet-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 20px;
}
.checkout-help-sheet-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--checkout-text, #222);
}
.checkout-help-sheet-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.checkout-help-sheet-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
.checkout-help-sheet-link:hover {
    background: #eee;
    color: inherit;
}
.checkout-help-sheet-close {
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--checkout-border, #e0e0e0);
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--checkout-text, #222);
}
@media (min-width: 992px) {
    .checkout-help-overlay {
        display: none;
    }
}

/* Cart Page Breadcrumbs (Figma-Aligned) */
.cart-breadcrumb-section {
    padding-top: 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}

/* Figma 11:4730: Order Summary = Readex Pro Bold 20px */
.cart-page-order-summary-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #222029;
    margin: 0;
    height: 30px;
    display: flex;
    align-items: center;
    font-family: 'Readex Pro', sans-serif;
}

.checkout-grid {
    padding-top: 0;
}

.cart-breadcrumb {
    display: flex;
    align-items: center;
    height: 30px;
    font-size: 13px;
    line-height: 1.38;
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
}

.cart-breadcrumb-link {
    color: #9E9E9E;
    text-decoration: none;
    font-weight: 400;
    height: 24px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.38;
}

.cart-breadcrumb-link:hover {
    color: #222029;
    opacity: 0.7;
}

.cart-breadcrumb-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    color: #9E9E9E;
}

.cart-breadcrumb-icon i {
    font-size: 16px;
}

.cart-breadcrumb-icon-img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.cart-breadcrumb-current {
    color: #222029;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    height: 24px;
    display: inline-flex;
    align-items: center;
    font-family: 'Readex Pro', sans-serif;
}

.cart-breadcrumb-count {
    font-size: 15px;
    font-weight: 500;
    color: #9E9E9E;
    margin-left: 4px;
    line-height: 22.5px;
}

/* Cart Page Header */
.cart-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 56px;
    height: 30px;
}

/* Figma desktop uses the breadcrumb row for the Cart title; keep the H1 only on mobile. */
@media (min-width: 992px) {
    .cart-page-header {
        display: none;
    }
}

.cart-page-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #222029;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Readex Pro', sans-serif;
}

/* Figma 11:4728: "(X items)" = 15px #9e9e9e */
.cart-item-count {
    font-size: 15px;
    font-weight: 500;
    color: #9E9E9E;
    margin-left: 4px;
    text-transform: none;
}

/* Hidden on desktop: "Order Summary" is in top row with breadcrumbs (Figma) */
.order-summary-title-desktop {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--checkout-text);
    margin: 0 0 16px 0;
    padding: 0 12px;
    display: none;
}

.order-summary-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--checkout-text);
    margin: 0;
    display: none; /* Hidden on desktop, shown on mobile */
}

/* Product Cards - Figma Design */
.khan-cart-list {
    margin-top: 0;
}

/* Figma 11:4734: same shadow as order summary cards */
.khan-cart-item-card {
    background: #fff;
    border: none;
    border-radius: 8px;
    margin-bottom: 0;
    padding: 12px;
    /* Figma Product Details uses a 16px vertical gap between cards */
    margin-bottom: 16px;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}

.khan-cart-item-card:last-child {
    margin-bottom: 0;
}

.khan-cart-item-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.khan-cart-item-image {
    flex-shrink: 0;
}

.khan-cart-img-wrap {
    width: 100px;
    height: 150.94px;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khan-cart-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.khan-cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.khan-cart-product-description {
    padding-left: 12px;
    margin-bottom: 2px;
}

/* Figma 11:4741: product name Neutral/900 #57545B */
.khan-cart-product-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #57545B;
    margin: 0 0 2px 0;
    font-family: 'Poppins', sans-serif;
}

.khan-cart-product-link {
    color: #57545B;
    text-decoration: none;
}

.khan-cart-product-link:hover {
    color: #222029;
    opacity: 0.7;
}

/* Figma: Colour label Bold, value #57545B */
.khan-cart-product-color {
    font-size: 12px;
    line-height: 1.4;
    color: #222029;
    margin: 2px 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.khan-cart-product-size-container {
    font-size: 12px;
    line-height: 1.4;
    color: #57545B;
    margin: 4px 0 0 0;
    display: flex;
    gap: 37px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.khan-cart-product-size,
.khan-cart-product-length,
.khan-cart-product-sleeve {
    font-size: 12px;
    line-height: 1.4;
    color: #57545B;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.khan-cart-product-price-container {
    padding-left: 12px;
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.khan-cart-original-price {
    font-size: 12px;
    line-height: 1.4;
    color: #757575;
    /* Figma uses a fixed 30px strike segment, not full text-decoration */
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    position: relative;
    display: inline-block;
}

.khan-cart-original-price::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #A7A5AF;
    transform: translateY(-50%);
    pointer-events: none;
}

.khan-cart-current-price {
    font-size: 12px;
    line-height: 1.4;
    color: #222029;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

/* Figma: discount badge Success/500 #0DAC57 */
.khan-cart-discount-badge {
    font-size: 12px;
    line-height: 1.4;
    color: #0DAC57;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.khan-cart-item-actions {
    padding-left: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.khan-cart-product-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Figma 11:4759/4762: border #BDBDBD, rounded ~4px, padding 8px 6px, text #757575 */
.khan-cart-remove-btn,
.khan-cart-wishlist-btn {
    display: flex;
    align-items: center;
    gap: 5.19px;
    background: #fff;
    border: 0.649px solid #BDBDBD;
    border-radius: 3.892px;
    padding: 6px 8px;
    height: 32px;
    cursor: pointer;
    color: #757575;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    font-family: 'Readex Pro', sans-serif;
}

.khan-cart-action-icon {
    width: 13.62px;
    height: 13.62px;
    font-size: 13.62px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.khan-cart-action-text {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    font-family: 'Readex Pro', sans-serif;
}

.khan-cart-quantity-selector {
    display: flex;
    align-items: center;
    gap: 17.5px;
}

/* Figma 11:4766: Qty = 12px #757575 */
.khan-cart-quantity-label {
    font-size: 12px;
    line-height: 1.4;
    color: #757575;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    text-transform: none;
}

/* Figma 11:4767: border #BDBDBD, rounded 5.818px, 35px height */
.khan-cart-quantity-container {
    position: relative;
    width: 52.36px;
    height: 35px;
    border: 0.97px solid #BDBDBD;
    border-radius: 5.818px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* Figma 11:4768: quantity value ~12px #757575 */
.khan-cart-quantity-value {
    font-size: 11.636px;
    line-height: 1.4;
    color: #757575;
    font-weight: 400;
    padding: 0 7.76px;
    font-family: 'Poppins', sans-serif;
}

.khan-cart-quantity-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.khan-cart-quantity-icon {
    position: absolute;
    top: 50%;
    right: 7.758px;
    transform: translateY(-50%);
    width: 13.576px;
    height: 13.576px;
    font-size: 13.576px;
    color: #9E9E9E;
    pointer-events: none;
    display: block;
    object-fit: contain;
}

/* RTL: quantity dropdown icon belongs on the left */
[dir="rtl"] .cart-page-layout .khan-cart-quantity-icon {
    right: auto;
    left: 7.758px;
}

/* RTL: dropdown chevrons should feel consistent */
[dir="rtl"] .cart-page-layout .order-summary-dropdown-icon-img {
    transform: scaleX(-1);
}

.cart-continue-shopping {
    margin-top: 32px;
}

/* Figma desktop frame doesn't show "Continue Shopping" on cart. Keep it for mobile. */
@media (min-width: 992px) {
    .cart-continue-shopping {
        display: none;
    }
}

.cart-continue-link {
    color: #222029;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Readex Pro', sans-serif;
}

.cart-continue-link:hover {
    color: #222029;
    opacity: 0.7;
}

/* Order Summary Sidebar - Figma Design (node 11:4711) */
/* Two-card layout: Details card + Breakdown card, then button + payment icons */
.checkout-summary {
    background: transparent;
    padding: 0;
    border: none;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Figma: each card rounded 12px, shadow, padding 16px 12px */
.order-summary-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    padding: 16px 12px;
}

.order-summary-details {
    padding: 0;
    padding-top: 16px;
}

.order-summary-divider {
    height: 1px;
    background: #E9E9E9;
    margin: 0 12px;
}

.order-summary-shipping-details {
    padding: 16px 12px 28px 12px;
}

.order-summary-shipping-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    margin-bottom: 24px;
}

.order-summary-apply-coupon-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 20px;
}

.order-summary-left-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #333333;
    flex-shrink: 0;
}

.order-summary-left-icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.order-summary-apply-coupon-text {
    font-size: 16px;
    line-height: 1.2;
    color: #333333;
    font-weight: 500;
    font-family: 'Readex Pro', sans-serif;
}

.order-summary-dropdown-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: #9E9E9E;
    cursor: pointer;
    flex-shrink: 0;
}

.order-summary-dropdown-icon-img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.order-summary-shipping-address-container {
    width: 100%;
}

/* Figma: coupon input with inline Apply on the right */
.order-summary-coupon-row {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: #fff;
    padding: 0 12px 0 16px;
    gap: 16px;
}

.order-summary-coupon-row .order-summary-shipping-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    padding: 0;
}

.order-summary-coupon-row .order-summary-shipping-input:focus {
    border: none;
    box-shadow: none;
}

.order-summary-apply-btn {
    background: none;
    border: none;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Readex Pro', sans-serif;
    color: #BBBBBB;
    text-decoration: underline;
    cursor: pointer;
    flex-shrink: 0;
}

.order-summary-apply-btn:hover {
    color: #222029;
}

/* Figma: 48px height, 8px radius, #E0E0E0 border */
.order-summary-shipping-input {
    width: 376px;
    max-width: 100%;
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: #fff;
    padding: 0 16px 0 12px;
    font-size: 14px;
    color: #333333;
    font-family: 'Readex Pro', sans-serif;
}

.order-summary-shipping-input::placeholder {
    color: #9E9E9E;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Readex Pro', sans-serif;
}

.order-summary-shipping-input:focus {
    border-color: #222029;
    outline: none;
    box-shadow: none;
}

.order-summary-payment-details-wallet {
    padding: 16px 12px;
}

.order-summary-payment-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 22px;
}

.order-summary-wallet-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 22px;
}

.order-summary-wallet-text {
    font-size: 19px;
    line-height: 19px;
    color: #333333;
    font-weight: 400;
}

.order-summary-wallet-amount {
    font-size: 22px;
    line-height: 22px;
    color: #333333;
    font-weight: 400;
    margin-left: 12px;
}

.order-summary-toggle {
    width: 18px;
    height: 18px;
    position: relative;
}

.order-summary-toggle-input {
    display: none;
}

.order-summary-toggle-label {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    cursor: pointer;
    background: #fff;
}

.order-summary-toggle-input:checked + .order-summary-toggle-label {
    background: #222029;
    border-color: #222029;
}

.order-summary-payment-details {
    padding: 16px 12px;
}

.order-summary-payment-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    margin-bottom: 12px;
}

.order-summary-payment-details-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 20px;
}

.order-summary-payment-details-text {
    font-size: 16px;
    line-height: 1.2;
    color: #333333;
    font-weight: 500;
    font-family: 'Readex Pro', sans-serif;
}

.order-summary-payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-summary-payment-option-card {
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.order-summary-tabby-promo-container {
    width: 100%;
}

.order-summary-tabby-promo-container > * {
    width: 100% !important;
}

/* Figma: Tabby #3bffc5 border, Tamara #eb7d6a border, 8px radius */
.order-summary-tabby-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid #3bffc5;
    border-radius: 8px;
}

.order-summary-tamara-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid #eb7d6a;
    border-radius: 8px;
}

.order-summary-tabby-logo {
    width: 53px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-summary-tabby-logo-img {
    width: 53px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.order-summary-tabby-text {
    font-size: 14px;
    font-weight: 600;
    color: #222029;
}

.order-summary-tamara-logo {
    width: 40px;
    height: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.order-summary-tabby-details,
.order-summary-tamara-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    height: 31px;
}

.order-summary-tabby-text-container,
.order-summary-tamara-text-container {
    height: 31px;
    display: flex;
    align-items: center;
}

.order-summary-tabby-payment-text,
.order-summary-tamara-payment-text {
    font-size: 12px;
    line-height: 1.4;
    color: #222029;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.order-summary-tabby-arrow,
.order-summary-tamara-arrow {
    width: 19px;
    height: 19px;
    font-size: 18.18px;
    color: #9E9E9E;
    flex-shrink: 0;
}

.order-summary-arrow-img {
    display: block;
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.order-summary-arrow-btn {
    border: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tabby-promo-offscreen {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 360px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.order-summary-breakdown {
    padding: 16px 12px;
}

.order-summary-breakdown-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-summary-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.order-summary-breakdown-label {
    font-size: 16px;
    line-height: 1.4;
    color: #333333;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.order-summary-breakdown-value {
    font-size: 16px;
    line-height: 1.4;
    color: #333333;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.order-summary-breakdown-value.order-summary-free {
    color: #0DAC57;
}

.order-summary-breakdown-divider {
    height: 1px;
    background: #E9E9E9;
    margin: 12px 0;
}

.order-summary-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    margin-top: 12px;
}

.order-summary-breakdown-total-label {
    font-size: 20px;
    line-height: 1.2;
    color: #333333;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* Figma: total amount in green #0DAC57 */
.order-summary-breakdown-total-value {
    font-size: 20px;
    line-height: 1.2;
    color: #0DAC57;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

.order-summary-checkout-button-container {
    padding: 0;
    /* Parent sidebar stack already has 16px gap (Figma); avoid double-spacing */
    margin-top: 0;
}

.order-summary-checkout-button {
    width: 400px;
    height: 49px;
    padding: 16px;
    background: #020202;
    color: #FFFFFF;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Instrument Sans', sans-serif;
    /* Figma button text is "Secure Check out" (title case), not all-caps */
    text-transform: none;
    letter-spacing: 0;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 12px;
}

.order-summary-checkout-button:hover {
    background: #020202;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Figma: payment row 80px height, gap 8px 16px */
.order-summary-payment-methods {
    /* Figma pay row is centered with no extra padding/margins */
    padding: 0;
    margin-top: 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.order-summary-payment-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
}

.order-summary-payment-icon {
    width: 54.19px;
    height: 21.55px;
    object-fit: contain;
    opacity: 1;
}

/* No hover fade in Figma */

.order-summary-payment-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.order-summary-tabby-logo-small,
.order-summary-tabby-logo-small-img {
    width: 53px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.order-summary-tamara-logo-small {
    width: 40px;
    height: 8px;
    object-fit: contain;
}

/* Checkout shipping step sidebar: payment logos (Figma) */
.checkout-sidebar-payment-methods {
    border-color: var(--checkout-border, #E5E5E5) !important;
}

.checkout-sidebar-payment-icons-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.checkout-sidebar-payment-icon {
    width: 54px;
    height: 21.55px;
    object-fit: contain;
    opacity: 1;
}

.checkout-sidebar-payment-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.checkout-sidebar-payment-tabby {
    width: 50.94px;
    height: 19.51px;
    object-fit: contain;
}

.checkout-sidebar-payment-tamara {
    width: 63.94px;
    height: 19.51px;
    object-fit: contain;
}

/* Cart page only: Figma layout (764px + 16px + 400px = 1180px, padding 10px 130px) */
.cart-page-layout .checkout-container {
    padding: 10px 130px 0;
    /* Keep the page container at 1440 like Figma; the inner grid is 1180px */
}

@media (min-width: 992px) {
    .cart-page-layout .checkout-grid {
        grid-template-columns: 764px 400px;
        gap: 16px;
        max-width: 1180px;
    }
    .cart-page-layout .checkout-main {
        max-width: 764px;
    }
    .cart-page-layout .checkout-sidebar {
        width: 400px;
    }
}

/* --- Cart page RTL fixes (keep layout like Figma, mirror content) --- */
[dir="rtl"] .cart-page-layout .checkout-grid {
    /* In RTL documents, CSS grid column placement starts from the right.
       Force LTR flow so main stays left and sidebar stays right. */
    direction: ltr;
}

[dir="rtl"] .cart-page-layout .checkout-main,
[dir="rtl"] .cart-page-layout .checkout-sidebar {
    /* Restore RTL text/content inside the columns */
    direction: rtl;
}

[dir="rtl"] .cart-page-layout .khan-cart-item-inner {
    flex-direction: row-reverse;
}

[dir="rtl"] .cart-page-layout .khan-cart-product-description,
[dir="rtl"] .cart-page-layout .khan-cart-product-price-container,
[dir="rtl"] .cart-page-layout .khan-cart-item-actions {
    padding-left: 0;
    padding-right: 12px;
}

[dir="rtl"] .cart-page-layout .khan-cart-product-size-container {
    /* Keep spacing but align items naturally in RTL */
    justify-content: flex-start;
}

[dir="rtl"] .cart-page-layout .cart-continue-shopping {
    text-align: right;
}

[dir="rtl"] .cart-page-layout .cart-continue-link {
    justify-content: flex-end;
}

[dir="rtl"] .cart-page-layout .cart-continue-link i {
    transform: scaleX(-1);
}

@media (max-width: 1200px) {
    .cart-page-layout .checkout-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 991px) {
    .cart-page-layout .checkout-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}