/* =========================================================
   KAMAYO VARIANT MODAL CSS - SEPARATED SAFE v20260503
   ---------------------------------------------------------
   Upload as: /assets/css/home/variant-modal.css

   Rules:
   - This file owns only variant popup/modal layout.
   - Mini cart / sticky cart CSS remains in /assets/css/home.css for now.
   - Product card CSS remains in /assets/css/home/product-card.css.
   - Category CSS remains in /assets/css/home/category-section.css.
   - Hero CSS remains in /assets/css/home/hero-section.css.
   - Quick strip CSS remains in /assets/css/home/quick-strip.css.
   - No cart calculation / delivery / rewards logic here.
========================================================= */

/* =========================================================
   VARIANT MODAL - BLINKIT INSPIRED
========================================================= */

.km-variant-modal-overlay{
    position:fixed;
    inset:0;
    z-index:9998;
    display:none;
    background:rgba(15,23,42,.56);
    backdrop-filter:blur(6px);
}

.km-variant-modal-overlay.is-open{display:block;}

.km-variant-modal{
    position:fixed;
    left:50%;
    top:50%;
    z-index:9999;
    display:none;
    width:min(680px,calc(100vw - 24px));
    max-height:min(86vh,760px);
    transform:translate(-50%,-50%);
    overflow:hidden;
    border:1px solid rgba(16,24,40,.08);
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.28);
}

.km-variant-modal.is-open{display:flex;flex-direction:column;}

.km-variant-modal-head{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:18px 18px 14px;
    background:linear-gradient(180deg,#fff 0%,#fbfffd 100%);
    border-bottom:1px solid rgba(16,24,40,.06);
}

.km-variant-modal-title-wrap{min-width:0;padding-right:4px;}
.km-variant-modal-title{
    margin:0;
    color:#111827;
    font-size:18px;
    line-height:1.22;
    font-weight:950;
    letter-spacing:-.025em;
}

.km-variant-modal-subtitle{
    margin:4px 0 0;
    color:#667085;
    font-size:12px;
    line-height:1.45;
    font-weight:650;
}

.km-variant-modal-close{
    appearance:none;
    flex:0 0 auto;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(16,24,40,.08);
    border-radius:14px;
    background:#fff;
    color:#111827;
    font-size:24px;
    line-height:1;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.km-variant-modal-body{
    padding:12px;
    overflow:auto;
    max-height:calc(86vh - 154px);
    background:#f6f8fb;
    -webkit-overflow-scrolling:touch;
}

.km-variant-modal-items{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.km-variant-row{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 116px;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(16,24,40,.06);
    box-shadow:0 8px 18px rgba(15,23,42,.045);
}

.km-variant-row.is-active{
    background:#f0fdf4;
    border-color:rgba(22,163,74,.34);
}

.km-variant-row.is-disabled{
    opacity:.65;
}

.km-variant-info{
    min-width:0;
}

.km-variant-top{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    margin-bottom:6px;
}

.km-variant-label{
    min-width:0;
    color:#1f2937;
    font-size:16px;
    line-height:1.2;
    font-weight:950;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.km-variant-tag{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    padding:0 8px;
    border-radius:999px;
    background:#ecfdf3;
    color:#047857;
    font-size:9px;
    line-height:1;
    font-weight:950;
}

.km-variant-tag.best{
    background:#dcfce7;
}

.km-variant-meta{
    color:#667085;
    font-size:12px;
    line-height:1.2;
    font-weight:750;
    margin-bottom:8px;
}

.km-variant-price-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex-wrap:wrap;
}

.km-variant-price{
    color:#0f172a;
    font-size:18px;
    line-height:1.05;
    font-weight:950;
}

.km-variant-mrp{
    color:#98a2b3;
    font-size:11px;
    font-weight:850;
    text-decoration:line-through;
}

.km-variant-points{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    padding:0 8px;
    border-radius:999px;
    background:#ecfdf3;
    color:#047857;
    font-size:10px;
    font-weight:950;
}

.km-variant-action{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.km-variant-select-btn{
    appearance:none;
    width:100%;
    min-width:0;
    max-width:116px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    border:1px solid rgba(22,163,74,.26);
    background:#ecfdf3;
    color:#047857;
    font-size:12px;
    line-height:1;
    font-weight:950;
    cursor:pointer;
}

.km-variant-select-btn.selected{
    background:var(--km-green);
    color:#fff;
    border-color:var(--km-green);
}

.km-variant-select-btn:disabled{
    opacity:.58;
    cursor:not-allowed;
}

.km-variant-row .km-qty-controller{
    max-width:116px;
}

.km-variant-modal-foot{
    padding:11px 18px 16px;
    border-top:1px solid rgba(16,24,40,.06);
    background:#fff;
}

.km-variant-modal-note{
    color:#667085;
    font-size:12px;
    line-height:1.45;
    font-weight:650;
}

/* =========================================================
   VARIANT MODAL RESPONSIVE
========================================================= */

@media (max-width:767.98px){
    .km-variant-modal{
    width:calc(100vw - 18px);
    max-height:86vh;
    border-radius:22px;
    }

    .km-variant-modal-head{padding:16px 16px 12px;}
    .km-variant-modal-title{font-size:17px;}
    .km-variant-modal-body{padding:10px;max-height:calc(86vh - 146px);}
    .km-variant-row{
    grid-template-columns:minmax(0,1fr) 92px;
    gap:9px;
    padding:12px;
    border-radius:17px;
    }

    .km-variant-label{font-size:14px;}
    .km-variant-meta{font-size:11px;margin-bottom:7px;}
    .km-variant-price{font-size:17px;}
    .km-variant-points{min-height:20px;padding:0 6px;font-size:9px;}
    .km-variant-select-btn{max-width:92px;height:38px;border-radius:12px;font-size:11px;}
    .km-variant-row .km-qty-controller{max-width:92px;}
}

/* =========================================================
   KAMAYO FINAL SCOPED VARIANT ROW POLISH - 2026-05-03
   Goal: Blinkit-style variant rows without affecting mini cart/cart logic.
========================================================= */

.km-variant-modal-items,
#km-variant-modal-items{
    display:grid !important;
    gap:10px !important;
}

.km-variant-row.km-variant-row-blinkit{
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) minmax(112px,auto) !important;
    gap:12px !important;
    align-items:center !important;
    padding:12px !important;
    border-radius:17px !important;
    background:#ffffff !important;
    border:1px solid rgba(16,24,40,.06) !important;
    box-shadow:0 6px 16px rgba(15,23,42,.045) !important;
    min-height:96px !important;
}

.km-variant-row.km-variant-row-blinkit.is-active{
    background:#f2fcf6 !important;
    border-color:rgba(22,163,74,.30) !important;
}

.km-variant-row.km-variant-row-blinkit.is-disabled{
    opacity:.72 !important;
}

.km-variant-thumb{
    width:76px !important;
    height:76px !important;
    border-radius:14px !important;
    background:#f7fafc !important;
    border:1px solid rgba(16,24,40,.04) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
}

.km-variant-thumb img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    padding:7px !important;
}

.km-variant-row-blinkit .km-variant-info{
    display:grid !important;
    gap:5px !important;
    min-width:0 !important;
}

.km-variant-row-blinkit .km-variant-top{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
}

.km-variant-row-blinkit .km-variant-label{
    color:#111827 !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.km-variant-row-blinkit .km-variant-meta{
    color:#64748b !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:750 !important;
}

.km-variant-row-blinkit .km-variant-price-row{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    flex-wrap:wrap !important;
}

.km-variant-row-blinkit .km-variant-price{
    color:#0f172a !important;
    font-size:17px !important;
    font-weight:950 !important;
    line-height:1 !important;
}

.km-variant-row-blinkit .km-variant-mrp{
    color:#9ca3af !important;
    font-size:11px !important;
    font-weight:800 !important;
    text-decoration:line-through !important;
}

.km-variant-row-blinkit .km-variant-points{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:20px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    background:#ecfdf3 !important;
    color:#047857 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}

.km-variant-row-blinkit .km-variant-action{
    width:112px !important;
    min-width:112px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
}

.km-variant-row-blinkit .km-variant-select-btn{
    width:104px !important;
    min-width:104px !important;
    min-height:42px !important;
    height:42px !important;
    border-radius:13px !important;
    border:1px solid rgba(22,163,74,.22) !important;
    background:#eafaf0 !important;
    color:#15803d !important;
    font-size:13px !important;
    font-weight:950 !important;
    cursor:pointer !important;
}

.km-variant-row-blinkit .km-variant-select-btn.selected,
.km-variant-row-blinkit .km-variant-select-btn:hover{
    background:#16a34a !important;
    border-color:#16a34a !important;
    color:#ffffff !important;
}

.km-variant-row-blinkit .km-qty-controller{
    width:112px !important;
    min-width:112px !important;
    height:42px !important;
    min-height:42px !important;
    display:grid !important;
    grid-template-columns:32px minmax(28px,1fr) 32px !important;
    gap:4px !important;
    padding:5px !important;
    border-radius:13px !important;
    background:#16a34a !important;
    border:1px solid #16a34a !important;
}

.km-variant-row-blinkit .km-qty-btn{
    width:32px !important;
    min-width:32px !important;
    height:30px !important;
    border-radius:9px !important;
    border:0 !important;
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:950 !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
}

.km-variant-row-blinkit .km-qty-number{
    color:#fff !important;
    min-width:28px !important;
    font-size:13px !important;
    font-weight:950 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

@media (max-width:575.98px){
    .km-variant-row.km-variant-row-blinkit{
    grid-template-columns:58px minmax(0,1fr) 84px !important;
    gap:9px !important;
    padding:10px !important;
    min-height:78px !important;
    border-radius:15px !important;
    }

    .km-variant-thumb{
    width:58px !important;
    height:58px !important;
    border-radius:12px !important;
    }

    .km-variant-thumb img{
    padding:5px !important;
    }

    .km-variant-row-blinkit .km-variant-label{
    font-size:12.8px !important;
    }

    .km-variant-row-blinkit .km-variant-meta{
    font-size:10px !important;
    }

    .km-variant-row-blinkit .km-variant-price{
    font-size:14px !important;
    }

    .km-variant-row-blinkit .km-variant-mrp{
    font-size:10px !important;
    }

    .km-variant-row-blinkit .km-variant-points,
    .km-variant-row-blinkit .km-variant-tag{
    display:none !important;
    }

    .km-variant-row-blinkit .km-variant-action{
    width:84px !important;
    min-width:84px !important;
    }

    .km-variant-row-blinkit .km-variant-select-btn{
    width:78px !important;
    min-width:78px !important;
    height:35px !important;
    min-height:35px !important;
    border-radius:10px !important;
    font-size:11px !important;
    }

    .km-variant-row-blinkit .km-qty-controller{
    width:84px !important;
    min-width:84px !important;
    height:35px !important;
    min-height:35px !important;
    grid-template-columns:24px minmax(18px,1fr) 24px !important;
    gap:2px !important;
    padding:3px !important;
    border-radius:10px !important;
    }

    .km-variant-row-blinkit .km-qty-btn{
    width:24px !important;
    min-width:24px !important;
    height:27px !important;
    border-radius:8px !important;
    font-size:15px !important;
    }

    .km-variant-row-blinkit .km-qty-number{
    min-width:18px !important;
    font-size:11px !important;
    }
}

/* =========================================================
   KAMAYO APP MOBILE VARIANT MODAL FORCE v20260503
   Purpose: Android/TWA/Chrome sometimes reports desktop viewport.
   Safe: variant modal layout only; no cart/order calculation logic.
========================================================= */

html.km-mobile-device .km-variant-modal{
    width:calc(100vw - 18px)!important;
    max-height:86dvh!important;
    border-radius:20px!important;
}

html.km-mobile-device .km-variant-row.km-variant-row-blinkit{
    grid-template-columns:58px minmax(0,1fr) 84px!important;
    gap:9px!important;
    padding:10px!important;
    min-height:78px!important;
}

html.km-mobile-device .km-variant-thumb{
    width:58px!important;
    height:58px!important;
}

html.km-mobile-device .km-variant-row-blinkit .km-variant-label{
    font-size:12.8px!important;
}

html.km-mobile-device .km-variant-row-blinkit .km-variant-points,
html.km-mobile-device .km-variant-row-blinkit .km-variant-tag{
    display:none!important;
}

html.km-mobile-device .km-variant-row-blinkit .km-variant-action{
    width:84px!important;
    min-width:84px!important;
}

html.km-mobile-device .km-variant-row-blinkit .km-variant-select-btn{
    width:78px!important;
    min-width:78px!important;
    height:35px!important;
    min-height:35px!important;
    font-size:11px!important;
}