/* ViralNexa customer homepage styles (desktop/base). */
.vn-home{--green:#07994f;--green-dark:#067b40;--red:#f04444;--navy:#102b20;--muted:#687b70;--line:#e3eee7;color:var(--navy);font-family:Inter,"Segoe UI",Arial,sans-serif;padding-bottom:24px}
.vn-home *{box-sizing:border-box}.vn-home a{text-decoration:none}
.vn-banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:320px;margin:14px 14px 0;padding:34px 30px;overflow:hidden;border:0;border-radius:22px;background:linear-gradient(110deg,#eafff0 0%,#dff8e8 60%,#effff4 100%)}
.vn-banner-copy{position:relative;z-index:2;flex:1 1 54%;min-width:0}
.vn-eyebrow{margin:0 0 15px;color:#07994f;font-size:10px;font-weight:850;letter-spacing:3px;text-transform:uppercase}
.vn-banner h1{max-width:540px;margin:0 0 13px;color:var(--green);font-size:clamp(30px,4vw,52px);font-weight:850;line-height:.99;letter-spacing:-1.7px}
.vn-red{color:var(--red)}.vn-green{color:var(--green)}
.vn-banner p{max-width:440px;margin:0 0 18px;color:#61766a;font-size:13px;line-height:1.65}
.vn-actions{display:flex;flex-wrap:wrap;gap:10px}
.vn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 16px;border:0;border-radius:9px;background:#07994f;color:#fff!important;font-size:12px;font-weight:750;cursor:pointer;transition:background .15s}
.vn-btn:hover{background:#067b40}.vn-btn-secondary{background:#ff9f13}.vn-btn-secondary:hover{background:#e98b00}
.vn-benefits{display:flex;flex-wrap:wrap;gap:14px;margin-top:17px;color:#5c7667;font-size:10px}
.vn-banner-art{position:relative;display:flex;align-items:flex-end;justify-content:center;align-self:stretch;flex:0 1 43%;min-width:0;min-height:240px}
.vn-character{display:block;width:100%;height:100%;max-height:320px;object-fit:contain;object-position:center bottom}
.vn-float{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;max-width:185px;padding:10px 13px;border:1px solid rgba(255,255,255,.95);border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 9px 25px rgba(14,73,39,.10);color:#183d2b;font-size:11px;font-weight:800;line-height:1.2;white-space:normal;backdrop-filter:blur(8px)}
.vn-float .vn-float-icon{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e9f8ee;font-size:18px}
.vn-float small{display:block;margin-top:4px;color:#6c8073;font-size:9px;font-weight:500}
.vn-float-one{top:5%;left:0}.vn-float-two{top:5%;right:0}.vn-float-three{top:39%;left:-7%}.vn-float-four{top:39%;right:-6%}.vn-float-five{bottom:4%;left:0}.vn-float-six{bottom:4%;right:0}
.vn-feature-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 20px 25px;padding:14px 18px;border:1px solid #dfede4;border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(12,67,36,.035)}
.vn-feature{display:flex;align-items:center;gap:10px;min-width:0}
.vn-feature-icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#e8f8ed;color:#07994f;font-size:17px}
.vn-feature strong{display:block;color:#163a29;font-size:11px}.vn-feature small{display:block;margin-top:4px;color:#728477;font-size:9px}
.vn-section{margin:0 14px 23px}.vn-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vn-section-title h2{margin:0;color:#142f22;font-size:19px;font-weight:800;letter-spacing:-.25px}.vn-muted{color:#07994f;font-size:11px;font-weight:750}
.vn-category-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:20px}
.vn-category{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:#183b2b;text-align:center;font-size:10px;font-weight:650;line-height:1.25}
.vn-category-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #e8f0ea;border-radius:50%;background:#fff;font-size:24px;box-shadow:0 3px 10px rgba(18,48,30,.04)}
.vn-category:hover .vn-category-icon{border-color:#a8dfbb;background:#f0fff4}
.vn-product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vn-product{display:flex;flex-direction:column;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 3px 10px rgba(25,58,36,.035)}
.vn-product-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:112px;margin-bottom:8px;border-radius:9px;background:linear-gradient(145deg,#f0faf3,#f9fcfa);color:var(--navy);font-size:43px}
.vn-discount{position:absolute;top:5px;left:5px;padding:3px 5px;border-radius:4px;background:var(--green);color:#fff;font-size:9px;font-weight:700}
.vn-product h3{margin:0 0 4px;color:var(--navy);font-size:12px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}.vn-product h3 a{color:inherit}.vn-product h3 a:hover{color:var(--green)}
.vn-product-category{min-height:14px;color:var(--muted);font-size:10px}
.vn-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin:6px 0 9px}.vn-price{color:var(--navy);font-size:14px;font-weight:800}.vn-old-price{color:#8c97a9;font-size:10px;text-decoration:line-through}
.vn-product .vn-btn{width:100%;min-height:32px;margin-top:auto;padding:7px 8px;font-size:11px}
.vn-empty{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}.vn-empty h3{margin:0 0 6px;font-size:15px}.vn-empty p{margin:0;color:var(--muted);font-size:12px}
@media(min-width:1100px){.vn-banner,.vn-section{margin-left:20px;margin-right:20px}.vn-feature-strip{margin-left:28px;margin-right:28px}.vn-product-image{min-height:140px}}
@media(max-width:760px){
 .vn-banner{min-height:0;margin:8px 8px 0;padding:22px 16px 16px;gap:0;border-radius:14px}
 .vn-banner-copy{flex-basis:60%}.vn-eyebrow{margin-bottom:9px;font-size:8px;letter-spacing:1.7px}
 .vn-banner h1{font-size:clamp(22px,5.8vw,34px);letter-spacing:-.8px;line-height:1.03}
 .vn-banner p{margin-bottom:12px;font-size:10px;line-height:1.45}
 .vn-btn{min-height:31px;padding:8px 10px;font-size:10px}.vn-actions{gap:7px}
 .vn-benefits{gap:7px;margin-top:11px;font-size:8px}
 .vn-banner-art{flex:0 1 40%;min-height:180px;align-self:stretch}
 .vn-character{max-height:220px;object-position:center bottom}
 .vn-float{gap:5px;max-width:125px;padding:6px 8px;border-radius:14px;font-size:8px}.vn-float .vn-float-icon{flex-basis:25px;width:25px;height:25px;font-size:13px}.vn-float small{font-size:7px;margin-top:2px}.vn-float-one{top:2%;left:-2%}.vn-float-two{top:2%;right:-2%}.vn-float-three{top:38%;left:-3%}.vn-float-four{top:38%;right:-3%}.vn-float-five{bottom:1%;left:-2%}.vn-float-six{bottom:1%;right:-2%}
 .vn-feature-strip{gap:7px;margin:0 9px 20px;padding:10px 8px;border-radius:12px}
 .vn-feature{gap:6px}.vn-feature-icon{flex-basis:29px;width:29px;height:29px;font-size:13px}
 .vn-feature strong{font-size:9px}.vn-feature small{font-size:8px}
 .vn-section{margin-left:9px;margin-right:9px}.vn-section-title h2{font-size:16px}
 .vn-category-row{gap:5px}.vn-category{font-size:9px}.vn-category-icon{width:40px;height:40px;font-size:21px}
 .vn-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.vn-product{padding:6px}.vn-product-image{min-height:75px;font-size:30px}.vn-product h3{font-size:10px}.vn-product-category{font-size:8px}.vn-price{font-size:11px}.vn-product .vn-btn{min-height:27px;padding:5px 4px;font-size:9px}
}
@media(max-width:420px){
 .vn-banner{display:flex;align-items:center;padding:18px 12px 12px;gap:0}
 .vn-banner-copy{flex-basis:62%}.vn-banner h1{font-size:25px}
 .vn-banner-art{flex-basis:38%;min-height:155px}
 .vn-float-one{left:-30%}.vn-float-two{right:-9%}
 .vn-feature-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
 .vn-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vn-product-image{min-height:105px;font-size:38px}.vn-product h3{font-size:11px}.vn-price{font-size:13px}
}

/* Responsive repair: keep the grocery home page full-width and balanced */
.container:has(.vn-home) {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.vn-home {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}
.vn-banner {
    width: auto !important;
    min-height: 330px;
}
.vn-banner-copy { flex: 1 1 55%; }
.vn-banner-art { flex: 0 1 42%; }
.vn-character {
    width: 100%;
    max-width: 540px;
    max-height: 330px;
    object-fit: contain;
}
.vn-feature-strip, .vn-section { width: auto; }
@media (min-width: 1200px) {
    .vn-banner { padding: 34px 34px; }
    .vn-banner h1 { font-size: clamp(38px, 3.2vw, 54px); }
    .vn-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .container:has(.vn-home) {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .vn-home { padding-bottom: 14px; }
    .vn-banner {
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
        align-items: center;
        gap: 5px !important;
        min-height: 0 !important;
        margin: 8px 3px 0 !important;
        padding: 20px 12px 14px !important;
        border-radius: 16px !important;
    }
    .vn-banner-copy { min-width: 0; width: auto; }
    .vn-banner h1 {
        font-size: clamp(23px, 5.8vw, 34px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.8px !important;
        overflow-wrap: normal;
    }
    .vn-banner p { font-size: 11px !important; line-height: 1.45 !important; }
    .vn-banner-art {
        min-width: 0;
        min-height: 145px !important;
        width: 100%;
        align-self: center;
    }
    .vn-character {
        width: 100%;
        max-width: 100%;
        max-height: 190px !important;
        object-fit: contain;
    }
    .vn-float { white-space: normal; max-width: 95px; padding: 6px 7px !important; font-size: 8px !important; }
    .vn-float-one { top: 14% !important; left: -8% !important; }
    .vn-float-two { top: 44% !important; right: -5% !important; }
    .vn-actions { gap: 6px !important; }
    .vn-btn { padding: 8px 9px !important; font-size: 10px !important; }
    .vn-benefits { gap: 6px !important; font-size: 8px !important; }
    .vn-feature-strip { margin: 0 4px 17px !important; padding: 9px 7px !important; }
    .vn-section { margin-left: 5px !important; margin-right: 5px !important; }
    .vn-category-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
    .vn-category-icon { width: 39px; height: 39px; font-size: 21px; }
    .vn-category { font-size: 9px; }
    .vn-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
    .vn-product { padding: 8px !important; }
    .vn-product-image { min-height: 100px !important; }
    .vn-product h3 { font-size: 12px !important; }
    .vn-price { font-size: 14px !important; }
    .vn-product .vn-btn { min-height: 34px !important; font-size: 11px !important; }
}
@media (max-width: 380px) {
    .vn-banner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); padding: 17px 9px 12px !important; }
    .vn-banner h1 { font-size: 22px !important; }
    .vn-banner p { font-size: 10px !important; }
    .vn-character { max-height: 155px !important; }
    .vn-float { display: none; }
    .vn-benefits { flex-wrap: wrap; }
}


/* Six shopping highlights: keep all labels outside the character artwork */
.vn-banner-art { overflow: visible; }
.vn-banner-art .vn-character { position: relative; z-index: 1; }
.vn-feature-strip-six {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch;
}
.vn-feature-strip-six .vn-feature {
    padding: 8px 5px;
    gap: 7px;
    border-radius: 10px;
}
.vn-feature-strip-six .vn-feature-icon {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f8ee;
    font-size: 17px;
}
.vn-feature-strip-six .vn-feature strong {
    display: block;
    font-size: 11px;
    line-height: 1.25;
}
.vn-feature-strip-six .vn-feature small {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.3;
}
@media (max-width: 900px) {
    .vn-feature-strip-six {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .vn-feature-strip-six .vn-feature {
        padding: 7px 4px;
        align-items: center;
    }
}
@media (max-width: 420px) {
    .vn-feature-strip-six .vn-feature {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .vn-feature-strip-six .vn-feature-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
    .vn-feature-strip-six .vn-feature strong { font-size: 10px; }
    .vn-feature-strip-six .vn-feature small { font-size: 8px; }
}


/* Photo-based grocery picks */
.vn-photo-picks { margin: 0 14px 26px; }
.vn-photo-picks-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.vn-photo-picks-head h2 { margin:0; color:#142f22; font-size:19px; font-weight:850; }
.vn-photo-picks-head p { margin:4px 0 0; color:#687b70; font-size:11px; }
.vn-photo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.vn-photo-card { min-width:0; overflow:hidden; border:1px solid #e3eee7; border-radius:13px; background:#fff; box-shadow:0 4px 13px rgba(25,58,36,.045); }
.vn-photo-img { display:block; width:100%; aspect-ratio:1/0.88; background-color:#fff; background-image:url('https://viralnexa.online/ad/grocery-products-grid.png'); background-repeat:no-repeat; background-size:300% 200%; }
.vn-photo-img.tomatoes { background-position:0 0; }
.vn-photo-img.bananas { background-position:50% 0; }
.vn-photo-img.milk { background-position:100% 0; }
.vn-photo-img.noodles { background-position:0 100%; }
.vn-photo-img.bread { background-position:50% 100%; }
.vn-photo-img.oil { background-position:100% 100%; }
.vn-photo-info { padding:10px 10px 11px; }
.vn-photo-info h3 { margin:0 0 5px; color:#173528; font-size:12px; font-weight:800; line-height:1.3; }
.vn-photo-info p { margin:0 0 9px; color:#718176; font-size:10px; line-height:1.35; }
.vn-photo-link { display:flex; align-items:center; justify-content:center; min-height:31px; padding:7px 8px; border-radius:7px; background:#087dff; color:#fff!important; font-size:11px; font-weight:800; text-decoration:none; }
.vn-photo-link:hover { background:#0668d7; }
@media(max-width:900px) { .vn-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } }
@media(max-width:480px) {
  .vn-photo-picks { margin:0 8px 22px; }
  .vn-photo-picks-head h2 { font-size:17px; }
  .vn-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .vn-photo-img { aspect-ratio:1/0.82; }
  .vn-photo-info { padding:8px; }
  .vn-photo-info h3 { font-size:12px; }
  .vn-photo-info p { font-size:10px; }
}


/* Six stylish benefit badges surrounding the ViralNexa character */
.vn-banner-art{position:relative;overflow:visible;isolation:isolate;min-height:320px;flex:0 1 46%;}
.vn-banner-art:before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#bdf1ce 0%,rgba(189,241,206,.35) 58%,transparent 72%);left:12%;bottom:2%;z-index:0;}
.vn-banner-art .vn-character{position:relative;z-index:1;width:84%;max-width:460px;max-height:330px;object-fit:contain;object-position:center bottom;}
.vn-float-one{top:2%;left:-1%;}.vn-float-two{top:2%;right:-1%;}.vn-float-three{top:36%;left:-5%;}.vn-float-four{top:36%;right:-5%;}.vn-float-five{bottom:2%;left:0;}.vn-float-six{bottom:2%;right:0;}
.vn-float-one .vn-float-icon{background:#e6f8dc}.vn-float-two .vn-float-icon{background:#e9e7ff}.vn-float-three .vn-float-icon{background:#fff0d9}.vn-float-four .vn-float-icon{background:#ffe8e8}.vn-float-five .vn-float-icon{background:#dcf8e8}.vn-float-six .vn-float-icon{background:#e3f1ff}
.vn-eyebrow{font-size:clamp(10px,.9vw,13px);letter-spacing:2px;}
.vn-banner h1{font-size:clamp(32px,3.5vw,56px);line-height:1.02;letter-spacing:-1.6px;}
@media(max-width:760px){
 .vn-banner-art{grid-column:1/-1;min-height:265px!important;width:100%;margin-top:10px;}
 .vn-banner-art .vn-character{width:68%;max-height:260px!important;}
 .vn-float{max-width:145px;padding:7px 9px;font-size:9px;}
 .vn-float .vn-float-icon{flex-basis:29px;width:29px;height:29px;font-size:15px;}
 .vn-float small{font-size:8px;}
 .vn-float-one{top:1%;left:0}.vn-float-two{top:1%;right:0}.vn-float-three{top:34%;left:0}.vn-float-four{top:34%;right:0}.vn-float-five{bottom:0;left:0}.vn-float-six{bottom:0;right:0}
}
@media(max-width:420px){
 .vn-banner{grid-template-columns:minmax(0,1fr)!important;}
 .vn-banner-art{min-height:245px!important;margin-top:13px;}
 .vn-banner-art .vn-character{width:64%;max-height:230px!important;}
 .vn-float{max-width:125px;padding:6px 7px;font-size:8px;gap:5px;}
 .vn-float .vn-float-icon{flex-basis:25px;width:25px;height:25px;font-size:13px;}
 .vn-float small{font-size:7px;}
}


/* FINAL FIX: keep the hero character fully inside the banner and align categories */
.vn-banner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr) !important;
    align-items: center !important; gap: clamp(18px, 2vw, 32px) !important;
    min-height: 320px !important; overflow: hidden !important; margin-bottom: 0 !important;
}
.vn-banner-copy { align-self: center !important; }
.vn-banner-art { height: 280px !important; min-height: 280px !important; max-height: 280px !important; align-self: center !important; margin: 0 !important; overflow: hidden !important; }
.vn-banner-art .vn-character { width: auto !important; height: 100% !important; max-width: 78% !important; max-height: 280px !important; object-fit: contain !important; object-position: center bottom !important; }
.vn-banner-art .vn-float { max-width: 165px !important; padding: 8px 10px !important; font-size: 10px !important; }
.vn-banner-art .vn-float-one { top: 3% !important; left: 0 !important; }
.vn-banner-art .vn-float-two { top: 3% !important; right: 0 !important; }
.vn-banner-art .vn-float-three { top: 38% !important; left: 0 !important; }
.vn-banner-art .vn-float-four { top: 38% !important; right: 0 !important; }
.vn-banner-art .vn-float-five { bottom: 2% !important; left: 0 !important; }
.vn-banner-art .vn-float-six { bottom: 2% !important; right: 0 !important; }
.vn-home > .vn-section[aria-label="Product categories"] { margin: 0 18px 22px !important; padding-top: 12px !important; }
.vn-home > .vn-section[aria-label="Product categories"] .vn-category-row { grid-template-columns: repeat(6,minmax(0,1fr)) !important; align-items: start !important; justify-items: stretch !important; gap: 12px !important; margin: 0 !important; }
.vn-home > .vn-section[aria-label="Product categories"] .vn-category { justify-content: flex-start !important; gap: 7px !important; min-height: 92px !important; padding: 0 5px 8px !important; line-height: 1.3 !important; }
.vn-home > .vn-section[aria-label="Product categories"] .vn-category-icon { flex: 0 0 48px !important; width: 48px !important; height: 48px !important; margin: 0 auto !important; }
@media(max-width:900px) {
 .vn-banner { grid-template-columns: minmax(0,1fr) minmax(260px,.8fr) !important; min-height: 285px !important; }
 .vn-banner-art { height: 245px !important; min-height: 245px !important; max-height: 245px !important; }
 .vn-banner-art .vn-character { max-height: 245px !important; max-width: 76% !important; }
 .vn-home > .vn-section[aria-label="Product categories"] { margin: 0 10px 20px !important; padding-top: 10px !important; }
}
@media(max-width:600px) {
 .vn-banner { grid-template-columns: minmax(0,1fr) !important; min-height: 0 !important; padding: 20px 14px 14px !important; }
 .vn-banner-art { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin-top: 12px !important; overflow: visible !important; gap: 8px !important; }
 .vn-banner-art .vn-character { grid-column: 1/-1 !important; justify-self: center !important; width: min(68%,230px) !important; height: auto !important; max-width: 230px !important; max-height: 220px !important; }
 .vn-banner-art .vn-float { position: static !important; inset: auto !important; width: 100% !important; max-width: none !important; min-height: 48px !important; }
 .vn-home > .vn-section[aria-label="Product categories"] { margin: 0 8px 18px !important; padding-top: 8px !important; }
 .vn-home > .vn-section[aria-label="Product categories"] .vn-category-row { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px 8px !important; }
 .vn-home > .vn-section[aria-label="Product categories"] .vn-category { min-height: 84px !important; }
}