/* ═══════════════════════════════════════════════════════════════
   ASIFIT — MAIN STYLESHEET
   css/style.css
═══════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Open Sans',sans-serif;background:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{background:none;border:none;cursor:pointer;font:inherit}
img{display:block}

/* ── LAYOUT ── */
.page-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;min-width:320px;background:#fff}

/* ── NAVBAR ── */
.navbar{position:fixed;top:35px;left:50%;transform:translateX(-50%);background:#fff;border-radius:600px;box-shadow:0 21px 20px -20px rgba(0,0,0,.25);padding:15px 18px;display:flex;align-items:center;gap:338px;z-index:1000;white-space:nowrap;transition:top .3s ease,box-shadow .3s ease}
.navbar--scrolled{top:16px;box-shadow:0 21px 30px -16px rgba(0,0,0,.35)}
.navbar-brand{display:flex;align-items:center;gap:28px}
.nav-logo{display:block;width:49px;height:22px;opacity:1;transition:opacity .2s;flex-shrink:0}
.nav-logo:hover{opacity:.7}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-link{padding:5.5px 12px;border-radius:6px;font-size:12.43px;color:#28903b;transition:background .2s;font-weight:400}
.nav-link:hover{background:#f0faf2}
.nav-actions{display:flex;gap:12px;align-items:center}
.nav-btn{display:flex;align-items:center;gap:4px;background:#28903b;color:#f5f5f5;border-radius:600px;padding:5.5px 12px;font-size:12.43px;font-weight:600;transition:background .2s;box-shadow:0 2.76px 13.8px rgba(40,144,59,.32)}
.nav-btn:hover{background:#1f6e2d}
.nav-btn-wrap{width:122px;display:flex}
.nav-btn-wrap .nav-btn{flex:1}

/* ── HERO BANNER ── */
.hero{position:relative;height:810px;width:100%;overflow:hidden;flex-shrink:0}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg img{position:absolute;width:100%;height:108.52%;top:-2.36%;left:0;object-fit:cover}
.hero-slide{opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-slide.active{opacity:1}
.hero-scroll{position:absolute;left:50%;transform:translateX(-50%);top:716px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0}
.scroll-text{color:#f5f5f5;font-size:10px;letter-spacing:.2px;transition:opacity .2s;font-weight:500}
.scroll-capsule{border:1.27px solid #fff;height:35px;width:21.6px;border-radius:600px;overflow:hidden;position:relative}
.scroll-ball{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:8.9px;height:8.9px;background:#fff;border-radius:50%;animation:scrollBounce 1.4s ease-in-out infinite}
@keyframes scrollBounce{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,14px)}
}
@media(hover:hover){
  .hero-scroll:hover .scroll-text{opacity:.7}
}
.hero-dots{position:absolute;left:calc(50% - 487px);top:761px;display:flex;gap:10px}
.hero-dot{width:50px;height:6px;border-radius:20px;background:#f5f5f5;opacity:.3;border:none;cursor:pointer;transition:opacity .3s;flex-shrink:0}
.hero-dot.active{opacity:1}

/* ── KISAH KASIH IBU ── */
.kki-section{position:relative;width:100%;flex-shrink:0}
.kki-bg{position:absolute;inset:0;pointer-events:none}
.kki-bg-green{position:absolute;inset:0;background:#28903b}
.kki-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kki-bg-grad{position:absolute;inset:0;background:linear-gradient(97.66deg,#fff 15.3%,rgba(255,255,255,0) 68.6%)}
.kki-inner{position:relative;display:flex;flex-direction:column;gap:33px;align-items:flex-start;justify-content:center;padding:82px 102px}
.kki-logo{width:306px;height:251px;object-fit:cover;flex-shrink:0}
.kki-text{font-size:18px;line-height:1.575;color:#28903b;width:482px;font-weight:400}
.kki-btn{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;place-items:start;cursor:pointer}
.kki-btn-bg{background:#28903b;width:209px;height:46px;border-radius:440px;box-shadow:0 35px 42px rgba(40,144,59,.09),0 13.5px 13.5px rgba(40,144,59,.05),0 2.9px 3.5px rgba(40,144,59,.04);grid-column:1;grid-row:1;transition:background .2s}
.kki-btn:hover .kki-btn-bg{background:#1f6e2d}
.kki-btn-text{grid-column:1;grid-row:1;color:#f5f5f5;font-size:16px;font-weight:600;padding:10px 37px;position:relative;white-space:nowrap}

/* ── PRODUCT SECTION ── */
.product-section{width:100%;flex-shrink:0;padding:13px 11px}
.main-frame{height:681px;position:relative;width:1418px}
.main-frame-bg{position:absolute;left:50%;transform:translateX(-50%);background:#f5f5f5;width:1418px;height:681px;border-radius:34px;top:0}
.product-label{position:absolute;left:24px;top:50px;color:#28903b;font-size:36px;font-weight:600;line-height:1.575;width:335px}
.product-big-name{position:absolute;left:24px;top:146px;color:#444;font-size:65px;font-weight:400;line-height:1.071;letter-spacing:-1.3px;white-space:nowrap}
.product-sub{position:absolute;left:24px;top:216px;color:#797979;font-size:16px;line-height:1.575;width:335px;font-weight:500;font-style:italic}
.product-desc{position:absolute;left:24px;top:262px;color:#797979;font-size:16px;font-weight:600;line-height:1.575;width:480px}
.product-img-wrap{position:absolute;left:532px;top:120px;width:538px;height:538px;overflow:hidden;pointer-events:none;z-index:2}
.product-img-wrap img{position:absolute;width:104.03%;height:104.4%;left:-3.95%;top:-1.6%;object-fit:cover}
.product-highlight{position:absolute;left:801px;top:30px;width:360px;height:460px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.product-highlight-inner{transform:rotate(15deg);width:264px;height:405px;overflow:hidden;position:relative}
.product-highlight-inner img{position:absolute;width:102.35%;height:100%;left:-1.18%;top:0;object-fit:cover}
.vitamin-cards{position:absolute;left:1206px;top:72px;display:flex;flex-direction:column;gap:23px}
.vitamin-card{background:#28903b;width:130px;height:121px;border-radius:13px;box-shadow:0 130px 104px rgba(0,0,0,.07),0 84px 61px rgba(0,0,0,.05),0 50px 33px rgba(0,0,0,.04),0 26px 17px rgba(0,0,0,.04);display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;flex-shrink:0}
.vitamin-card-text{grid-column:1;grid-row:1;color:#f5f5f5;text-align:center;padding:20px 23px;font-weight:700}
.vitamin-label{font-size:12.6px;line-height:.93;margin-bottom:3.7px;display:block}
.vitamin-num{font-size:52px;line-height:.9;display:block}
.halal-logo{position:absolute;left:275px;top:544px;width:38px;height:91px;z-index:3;display:flex;align-items:center}
.product-logo-row{position:absolute;left:24px;top:546px;display:flex;align-items:center;gap:20px}
.product-logo-row img{height:74px;object-fit:contain}
.kimia-farma-brand{position:absolute;left:calc(10.37%);top:400px;height:91px;width:auto;overflow:visible}
.kimia-farma-brand img{position:static;height:100%;width:auto;object-fit:contain}

/* ── AVAILABILITY ── */
.avail-body{background:#f9f9f9;border-radius:34px;width:100%;flex-shrink:0}
.avail-inner{display:flex;flex-direction:column;gap:64px;padding:38px 24px 48px}
.avail-header{display:flex;flex-direction:column;gap:16px;max-width:768px}
.avail-eyebrow{font-size:12px;font-weight:600;color:#28903b;letter-spacing:2.4px;text-transform:uppercase;line-height:16px}
.avail-heading{font-size:60px;font-weight:700;color:#28903b;letter-spacing:-3px;line-height:60px}
.avail-sub{font-size:18px;color:#3f4a3d;line-height:1.625;padding-top:8px}
.channel-section{display:flex;flex-direction:column;gap:32px}
.channel-title-row{position:relative;height:36px}
.channel-title{font-size:30px;font-weight:700;color:#28903b;letter-spacing:-.75px;line-height:36px}
.channel-line{position:absolute;left:228px;right:100px;top:28px;height:2px;background:rgba(190,202,185,.2)}
.channel-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.channel-card{background:#f5f5f5;border-radius:34px;height:355px;position:relative;display:flex;align-items:center;justify-content:center}
.channel-card-kimia{grid-column:1/span 4}
.channel-card-shopee{grid-column:5/span 4}
.channel-card-lazada{grid-column:9/span 4}
.channel-card-offline{grid-column:1/span 12;width:100%;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;padding:40px!important}
.offline-row{display:flex;align-items:center;justify-content:center}
.channel-card-offline img{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:auto!important;max-width:100%!important;object-fit:contain!important}
.offline-row:first-child img{height:130px!important}
.offline-row:last-child img{height:80px!important}
.kimia-app-heading{position:absolute;left:40px;right:74px;top:calc(50% - 85px);font-size:24px;font-weight:700;color:#28903b;line-height:32px}
.kimia-app-logo{position:absolute;left:40px;top:129px;width:163px;height:163px;border-radius:30px;overflow:hidden}
.kimia-app-logo img{width:100%;height:100%;object-fit:cover}
.store-btns{position:absolute;left:232px;top:154px;display:flex;flex-direction:column;gap:10px}
.store-btn{background:#fff;border-radius:6px;box-shadow:0 4px 30px rgba(98,255,63,.16);width:155px;height:52px;position:relative;display:block;transition:box-shadow .2s}
.store-btn:hover{box-shadow:0 8px 24px rgba(40,144,59,.25)}
.store-btn-inner{position:absolute;inset:0;display:flex;align-items:center;padding:0 10px}
.store-btn-icon{width:27px;height:31px;flex-shrink:0}
.store-btn-text{margin-left:10px}
.store-btn-text .get{font-size:9px;text-transform:uppercase;line-height:1;display:block;color:#000;font-family:'Inter',sans-serif}
.store-btn-text .name{font-size:18px;line-height:1;font-family:'Inter',sans-serif;font-weight:700;display:block;color:#000}
.mkt-card-inner{display:flex;align-items:center;justify-content:center;padding:40px;width:100%;height:100%}
.mkt-logo{object-fit:contain;max-width:220px}
.mkt-logo-shopee{height:70px}
.mkt-logo-lazada{height:58px;opacity:.7}
.mkt-title{font-size:24px;font-weight:700;color:#28903b;line-height:32px;text-align:center;padding-top:8px}
.mkt-btn{display:flex;align-items:center;gap:8px;background:#28903b;color:#fff;border-radius:9999px;padding:12px 32px;font-size:14px;font-weight:600;transition:background .2s;font-family:'Inter',sans-serif}
.mkt-btn:hover{background:#1f6e2d}
.mkt-card-content{display:flex;flex-direction:column;align-items:center;gap:16px}
.offline-logos{position:absolute;inset:0}
.offline-logos img{position:absolute;object-fit:contain}

/* ── AFFILIATE ── */
.affiliate-section{background:#fffdee;display:grid;grid-template-columns:repeat(2,1fr);border-radius:34px;overflow:hidden;box-shadow:0 20px 40px -10px rgba(0,107,27,.05);width:1400px;flex-shrink:0;position:relative}
.affiliate-content{display:flex;flex-direction:column;justify-content:center;padding:80px}
.affiliate-eyebrow{font-size:12px;font-weight:700;color:#28903f;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px}
.affiliate-heading{font-size:36px;font-weight:700;color:#1b1c18;line-height:45px;margin-bottom:24px}
.affiliate-text{font-size:18px;color:#3f4a3d;line-height:1.625;margin-bottom:40px}
.affiliate-btn{display:inline-flex;align-items:center;align-self:flex-start;background:#28903f;color:#fff;border-radius:9999px;padding:16px 40px;font-size:16px;font-weight:700;transition:background .2s}
.affiliate-btn:hover{background:#1f6e2d}
.affiliate-image{position:relative;overflow:hidden;min-height:490px}
.affiliate-image img{position:absolute;width:133.43%;height:255.41%;left:-16.71%;top:-77.71%;object-fit:cover}
.affiliate-image-overlay{position:absolute;inset:0;background:rgba(0,107,27,.1);mix-blend-mode:multiply}

/* ── ARTICLE ── */
.article-section{position:relative;height:1031px;width:100%;flex-shrink:0}
.article-inner{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:45px;padding:80px 11px 75px}
.article-header{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:900px;width:900px}
.article-title{font-size:40px;font-weight:600;color:#09090b;letter-spacing:-1.08px;line-height:32px;text-align:center}
.article-sub{font-size:13.5px;color:#71717a;letter-spacing:.27px;line-height:21.6px;text-align:center}
.article-explore-btn{display:flex;align-items:center;justify-content:center;background:#28903b;color:#f5f5f5;border-radius:48px;padding:10px 22px;font-size:13.3px;font-weight:600;transition:background .2s;height:30.5px}
.article-explore-btn:hover{background:#1f6e2d}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46.5px;height:755px;width:1378px}
.article-card{background:#f5f5f5;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:box-shadow .2s,transform .2s}
.article-card:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transform:translateY(-4px)}
.article-card-img{height:363px;overflow:hidden;position:relative;border-radius:19px;margin:19px;flex-shrink:0}
.article-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-card-body{display:flex;flex-direction:column;justify-content:space-between;padding:9px 37px 37px;flex:1}
.article-tag{display:inline-flex;align-self:flex-start;background:#28903b;color:#f5f5f5;border-radius:9999px;padding:4.6px 14px;font-size:16px;font-weight:700;letter-spacing:1.16px;text-transform:uppercase;line-height:17.5px;margin-bottom:19px}
.article-card-title{font-size:27.9px;font-weight:700;color:#28903b;line-height:34.9px;margin-bottom:19px}
.article-card-desc{color:#52525b;font-size:16.3px;line-height:26.5px;margin-bottom:29px}
.article-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:29px;border-top:1.16px solid rgba(228,228,231,.5)}
.article-time{font-size:14px;color:#a1a1aa;font-family:'Inter',sans-serif;font-weight:500}

/* ── TESTIMONIALS ── */
.testimonials-section{display:flex;flex-direction:column;gap:52px;max-width:1440px;width:1440px;padding:0 32px 96px;flex-shrink:0}
.testimonials-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-top:20px}
.testimonials-title{font-size:36px;font-weight:700;color:#1b1c18;line-height:40px}
.testimonials-sub{font-size:13.5px;color:#71717a;letter-spacing:.27px;line-height:21.6px}
.testimonials-bar{width:80px;height:4px;background:#006b1b;border-radius:9999px}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:32px}
.testimonial-featured{grid-column:1/span 3;grid-row:1;background:rgba(0,107,27,.05);border:1px solid rgba(0,107,27,.1);border-radius:40px}
.testimonial-card{grid-row:2;background:#f5f4ed;border-radius:40px;height:260px;position:relative;border:1px solid rgba(255,255,255,.5)}
.testimonial-card-inner{padding:33px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.stars{display:flex;gap:4px;margin-bottom:16px}
.testimonial-quote{font-size:16px;font-style:italic;color:#3f4a3d;line-height:26px;margin-bottom:32px;font-weight:400}
.testimonial-author{display:flex;align-items:center;gap:16px}
.testimonial-avatar{width:48px;height:48px;border-radius:9999px;overflow:hidden;background:rgba(38,134,48,.2);flex-shrink:0}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-name{font-size:16px;font-weight:700;color:#006b1b;line-height:24px}
.testimonial-role{font-size:12px;color:#3f4a3d;font-family:'Inter',sans-serif;font-weight:500;line-height:16px}
.testimonial-featured-inner{display:flex;align-items:center;gap:32px;padding:33px}
.testimonial-featured-avatar{width:96px;height:96px;border-radius:9999px;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);flex-shrink:0}
.testimonial-featured-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-featured-quote{font-size:27px;color:#1b1c18;line-height:40px;width:1104px;margin:8px 0}
.testimonial-featured-name{font-size:16px;font-weight:700;color:#006b1b;line-height:24px}
.testimonial-featured-role{font-size:12px;color:#3f4a3d;font-family:'Inter',sans-serif;font-weight:500}

/* ── FAQ ── */
.faq-section{background:#fff;width:100%;flex-shrink:0;padding-bottom:75px}
.faq-inner{display:flex;justify-content:center}
.faq-wrap{display:flex;flex-direction:column;gap:22.5px;align-items:center;max-width:600px;width:600px}
.faq-header{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.faq-title{font-size:27px;font-weight:600;color:#09090b;letter-spacing:-1.08px;line-height:32.4px}
.faq-sub{font-size:13.5px;color:#71717a;letter-spacing:.27px;line-height:21.6px}
.faq-list{width:100%}
.faq-item{border-bottom:.75px solid #e4e4e7;padding:15px 8px;cursor:pointer;border-radius:8px;transition:background .15s}
.faq-item:hover{background:#f9fafb}
.faq-item-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-question{font-size:13.5px;color:#09090b;letter-spacing:.27px;line-height:21.6px;max-width:500px}
.faq-toggle{background:#e4e4e7;border-radius:9999px;padding:4.5px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;flex-shrink:0;width:21px;height:21px;color:#09090b}
.faq-item.open .faq-toggle{transform:rotate(45deg);background:#28903b;color:#fff}
.faq-answer{font-size:12px;color:#71717a;letter-spacing:.36px;line-height:21.6px;margin-top:7.5px;max-width:545px}

/* ── STATIC PAGE ── */
.static-page-section{width:100%;padding:140px 24px 80px;min-height:60vh}
.static-page-inner{max-width:800px;margin:0 auto}
.static-page-title{font-size:32px;font-weight:700;color:#28903b;margin-bottom:32px}
.static-page-content{font-size:15px;line-height:1.8;color:#3f4a3d}
.static-page-content h2{font-size:20px;font-weight:700;margin:28px 0 12px}
.static-page-content h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.static-page-content p{margin-bottom:12px}
.static-page-content ul,.static-page-content ol{padding-left:24px;margin-bottom:12px}
.static-page-content li{margin-bottom:6px}
.static-page-content a{color:#28903b;text-decoration:underline}

/* ── FOOTER ── */
.footer{background:#28903b;height:628px;position:relative;overflow:hidden;width:100%;flex-shrink:0}
.footer-blur-1{position:absolute;width:660px;height:788px;left:995px;top:232px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.footer-blur-inner-1{transform:rotate(-21.13deg);width:448px;height:672px;overflow:hidden}
.footer-blur-1 img,.footer-blur-inner-2 img{width:100%;height:100%;object-fit:cover}
.footer-blur-2{position:absolute;width:517px;height:617px;left:-138px;top:196px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.footer-blur-inner-2{transform:scaleX(-1) rotate(-21.13deg);width:351px;height:526px;overflow:hidden}
.footer-left{position:absolute;left:64px;top:56px;width:560px;display:flex;flex-direction:column;gap:111px}
.footer-logo-area{display:flex;flex-direction:column;gap:32px}
.footer-desc{font-size:16px;color:#f5f5f5;line-height:1.4;width:420px;font-family:'Inter',sans-serif}
.footer-learn-more{display:flex;align-items:center;gap:12px;color:#fff;font-size:12px;font-weight:590;transition:all .2s}
.footer-learn-more:hover{text-decoration:underline}
.footer-learn-dot{width:10px;height:10px;background:#fff;border-radius:10px;transition:transform .2s}
.footer-learn-more:hover .footer-learn-dot{transform:scale(1.25)}
.footer-bottom{display:flex;align-items:flex-end;justify-content:space-between;width:100%}
.footer-socials{display:flex;flex-direction:column;gap:14px;background:none;padding:0;position:relative;z-index:1}
.footer-socials::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;background:radial-gradient(ellipse at center,rgba(255,255,255,0.2) 0%,transparent 70%);z-index:-1;pointer-events:none}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.5);transition:opacity .2s,transform .2s;flex-shrink:0;position:relative;z-index:1}
.footer-social-link:hover{opacity:.75;transform:scale(1.08)}
.footer-copyright{color:#f5f5f5;font-size:12px;line-height:1.4;text-align:right}
.footer-location-copyright{display:contents}
.footer-copyright-mobile{display:none}
.footer-right{position:absolute;left:816px;top:56px;width:560px;display:flex;flex-direction:column;justify-content:space-between;bottom:40px}
.footer-nav{display:grid;grid-template-columns:repeat(3,max-content);grid-template-rows:repeat(2,max-content);gap:41px;font-size:20px;color:#f5f5f5;font-weight:510}
.footer-nav a{color:#f5f5f5;transition:all .2s}
.footer-nav a:hover{color:#fff;text-decoration:underline}
.footer-location-row{display:flex;align-items:flex-end;justify-content:space-between;height:253px}
.footer-location-title{font-size:20px;font-weight:500;color:#fff;letter-spacing:-.2px;margin-bottom:16px;font-family:'Inter',sans-serif}
.footer-location-text{font-size:14px;color:#f5f5f5;line-height:1.6;width:267px;font-family:'Inter',sans-serif}
.footer-lang{display:flex;flex-direction:column;align-items:flex-end;gap:15px;background:rgba(0,0,0,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 14px;border-radius:14px}
.footer-lang-label{font-size:12px;color:#fff;font-weight:590;text-align:right}
.footer-lang-opts{display:flex;gap:20px;font-size:14px;line-height:1.6}
.footer-lang-opts .active{font-weight:860;color:#fff}
.footer-lang-opts .inactive{color:#f5f5f5}
.footer-contact-img{position:absolute;left:816px;top:269px;width:325px;height:85px;object-fit:cover;pointer-events:none}


/* ═══════════════════════════════════════════════════════════════
   POPUP (index.php)
═══════════════════════════════════════════════════════════════ */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.popup-overlay.show{opacity:1;pointer-events:all}
.popup-dialog{position:relative;width:918px;height:570px;flex-shrink:0}
.popup-bg{position:absolute;inset:0;background:#28903b;border-radius:20px;box-shadow:0 30px 50px rgba(61,174,43,.24)}
.popup-photo{position:absolute;top:0;right:0;width:291px;height:100%;border-radius:0 20px 20px 0;overflow:hidden}
.popup-photo img{position:absolute;left:-218.19%;top:0;height:100%;width:371.25%;max-width:none}
.popup-close{position:absolute;top:-26px;right:-26px;width:52px;height:52px;background:#fff;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:opacity .2s;z-index:2}
.popup-close:hover{opacity:.8}
.popup-content{position:absolute;left:54px;top:0;right:291px;bottom:0;display:flex;flex-direction:column;justify-content:center}
.popup-eyebrow{font-size:20px;color:#fff;font-weight:400;line-height:1.505;margin-bottom:12px}
.popup-heading{font-size:0;color:#fff;font-weight:700;line-height:normal;margin-bottom:24px}
.popup-heading span{font-size:24px;line-height:1.4}
.popup-heading strong{font-size:48px;font-weight:700}
.popup-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.popup-label{font-size:8.8px;font-weight:600;color:#f5f5f5;padding-left:3px}
.popup-input{background:#e9e8e1;border:none;border-radius:30px;padding:11px 13px;font-size:10px;color:#3f4a3d;outline:none;width:100%;font-family:inherit}
.popup-input::placeholder{color:rgba(63,74,61,.5)}
.popup-phone-row{display:flex;gap:8px}
.popup-phone-prefix{background:#e9e8e1;border-radius:13px;padding:10px;font-size:10px;color:#1b1c18;font-weight:500;white-space:nowrap;flex-shrink:0;line-height:1.5}
.popup-phone-input{background:#e9e8e1;border:none;border-radius:30px;padding:11px 13px;font-size:10px;color:#3f4a3d;outline:none;flex:1;font-family:inherit}
.popup-phone-input::placeholder{color:rgba(63,74,61,.5)}
.popup-form{max-width:257px;width:100%}
.popup-submit{width:100%;border:1px solid #f5f5f5;border-radius:9999px;padding:10px;font-size:10px;font-weight:700;color:#f5f5f5;background:transparent;cursor:pointer;transition:background .2s;margin-top:4px;font-family:inherit}
.popup-submit:hover{background:rgba(255,255,255,.15)}
.popup-note{position:absolute;bottom:22px;left:54px;font-size:12px;color:#fff;opacity:.85;letter-spacing:.24px}
.popup-thanks-title{font-size:40px;font-weight:700;color:#fff;line-height:1;margin-bottom:16px}
.popup-thanks-body{font-size:22px;color:#fff;line-height:1.4;margin-bottom:24px}
.popup-voucher-label{font-size:16px;color:#fff;line-height:1.505;letter-spacing:.32px;margin-bottom:8px}
.popup-voucher-code{font-size:36px;font-weight:700;color:#fff;line-height:.73;margin-bottom:32px;letter-spacing:1px}
.popup-voucher-btn{display:inline-block;align-self:flex-start;border:1px solid #f5f5f5;border-radius:9999px;padding:10px 32px;font-size:14px;font-weight:700;color:#f5f5f5;background:transparent;cursor:pointer;transition:background .2s;text-decoration:none;text-align:center}
.popup-voucher-btn:hover{background:rgba(255,255,255,.15)}


/* ═══════════════════════════════════════════════════════════════
   JOIN KOMUNITAS PAGE
═══════════════════════════════════════════════════════════════ */

/* HERO */
.jk-hero{padding:128px 32px;width:100%}
.jk-hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;max-width:1280px;margin:0 auto}
.jk-badge{display:inline-block;background:#d8e2dc;padding:4px 16px;border-radius:12px;font-size:12px;font-weight:700;color:#5b6560;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:24px}
.jk-h1{font-size:54px;font-weight:700;color:#28903b;letter-spacing:-1.8px;line-height:1.33}
.jk-sub{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-style:italic;color:#414844;line-height:1.33;margin-top:8px}
.jk-desc{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;color:#414844;line-height:1.625;margin-top:24px;max-width:565px}
.jk-btn-join{display:inline-flex;align-items:center;gap:12px;background:#28903b;color:#fff;border-radius:34px;padding:20px 40px;font-size:16px;font-weight:700;margin-top:16px;box-shadow:0 10px 50px -12px rgba(27,28,24,.06);transition:background .2s}
.jk-btn-join:hover{background:#1f6e2d}
.jk-hero-right{position:relative;padding-bottom:41px}
.jk-hero-img-main{border-radius:32px;overflow:hidden;transform:rotate(2deg);box-shadow:0 10px 50px -12px rgba(27,28,24,.1);aspect-ratio:4/5}
.jk-hero-img-main img{width:100%;height:100%;object-fit:cover;display:block}
.jk-hero-img-main-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(1,45,29,.4),rgba(1,45,29,0));border-radius:32px;pointer-events:none}
.jk-hero-img-badge{position:absolute;bottom:-41px;left:-39px;width:192px;height:192px;border-radius:34px;overflow:hidden;transform:rotate(-6deg);border:8px solid #fbf9f2;box-shadow:0 10px 50px -12px rgba(27,28,24,.1)}
.jk-hero-img-badge img{width:100%;height:100%;object-fit:cover;display:block}

/* KALENDER */
.jk-kalender-wrap{padding:0 20px 32px;width:100%}
.jk-kalender{background:#f0f0e2;border-radius:34px;height:544px;position:relative;overflow:hidden;max-width:1400px;margin:0 auto}
.jk-kalender-slides{position:absolute;left:588px;top:60px;width:754px;height:424px;border-radius:18px;overflow:hidden}
.jk-kslide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.jk-kslide.active{opacity:1;pointer-events:auto}
.jk-kslide img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}
.jk-kalender-content{position:absolute;left:34px;top:50%;transform:translateY(-50%)}
.jk-kalender-title{font-size:40px;font-weight:700;color:#28903b;letter-spacing:-1.8px;line-height:1.8}
.jk-kalender-desc{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;color:#414844;line-height:1.4625;width:497px;margin-top:12px}
.jk-kalender-dots{position:absolute;bottom:32px;left:calc(50% + 265px);display:flex;gap:10px}
.jk-kdot{width:50px;height:6px;border-radius:20px;background:#28903b;opacity:.3;cursor:pointer;transition:opacity .3s}
.jk-kdot.on{opacity:1}

/* BENEFITS */
.jk-benefits{background:#fbf9f2;padding:96px 32px;width:100%}
.jk-benefits-inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:64px}
.jk-benefits-hd{display:flex;flex-direction:column;gap:16px}
.jk-benefits-title{font-size:36px;font-weight:700;color:#28903b;letter-spacing:-.9px;line-height:1.11}
.jk-benefits-sub{font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:600;color:#414844;letter-spacing:1px;line-height:1.43;max-width:672px}
.jk-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:310px 304px;gap:24px}

/* Wide card (row 1) */
.jk-card-wide{grid-column:1/-1;background:#fff;border-radius:24px;position:relative;box-shadow:0 10px 50px 0 rgba(27,28,24,.06)}
.jk-card-wide-glow{position:absolute;top:0;right:0;width:814px;height:311px;pointer-events:none;opacity:1}
.jk-card-wide-content{position:absolute;top:50%;transform:translateY(-50%);left:40px;width:410px;display:flex;flex-direction:column;gap:16px}
.jk-card-wide-photo{position:absolute;right:40px;top:-47px;width:640px;height:358px;overflow:hidden}
.jk-card-wide-photo img{width:100.14%;height:100%;object-fit:cover;display:block}
.jk-icon-green{width:48px;height:48px;background:rgba(27,67,50,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jk-card-wide-ttl{font-size:24px;font-weight:700;color:#28903b;letter-spacing:-.6px;line-height:1.33;padding-top:8px}
.jk-card-wide-txt{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;color:#414844;line-height:1.625}

/* Dark image cards (row 2) */
.jk-card-dark{border-radius:24px;position:relative;overflow:hidden;box-shadow:0 10px 50px -12px rgba(27,28,24,.06)}
.jk-card-dark-bg{position:absolute;inset:0}
.jk-card-dark-bg img{width:100%;height:100%;object-fit:cover;display:block}
.jk-card-dark-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 44.8%,#000 108.45%),linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.34))}
.jk-card-dark-body{position:relative;padding:40px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px}
.jk-icon-outline{width:48px;height:48px;border:1px solid #fff;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jk-card-dark-ttl{font-size:24px;font-weight:700;color:#f5f5f5;letter-spacing:-.6px;line-height:1.33;padding-top:8px}
.jk-card-dark-txt{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:500;color:#f5f5f5;line-height:1.625}

/* VALUES */
.jk-values{padding:96px 32px;display:flex;justify-content:center;width:100%}
.jk-values-inner{max-width:1024px;width:100%;display:flex;flex-direction:column;gap:31px;align-items:center}
.jk-quote{font-size:44px;font-style:italic;color:#28903b;line-height:1;text-align:center}
.jk-values-body{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;color:#414844;line-height:1.625;text-align:center}
.jk-stats{display:flex;align-items:center;gap:34px;padding-top:17px}
.jk-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.jk-stat-num{font-size:57px;font-weight:700;color:#28903b;line-height:1.11}
.jk-stat-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:700;color:#717973;letter-spacing:1.9px;text-transform:uppercase}
.jk-stat-divider{width:1px;height:48px;background:rgba(193,200,194,.3);flex-shrink:0}

/* CTA */
.jk-cta-wrap{padding:0 20px 48px;width:100%}
.jk-cta{background:#1b4332;border-radius:48px;min-height:484px;position:relative;overflow:hidden;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:96px}
.jk-cta-grad{position:absolute;inset:0;opacity:.1;background:radial-gradient(ellipse 1211px 890px at 280px 145px,rgba(193,236,212,1) 0%,rgba(193,236,212,0) 40%);pointer-events:none}
.jk-cta-inner{display:flex;flex-direction:column;align-items:center;gap:32px;position:relative;z-index:1}
.jk-cta-title{font-size:60px;font-weight:700;color:#fbf9f2;letter-spacing:-1.5px;line-height:1;text-align:center}
.jk-cta-sub{font-size:20px;color:#f5f5f5;line-height:1.4;text-align:center;max-width:576px}
.jk-btn-cta{display:inline-flex;align-items:center;gap:30px;background:#fbf9f2;color:#28903b;border-radius:34px;padding:24px 48px;font-size:16px;font-weight:800;letter-spacing:2px;box-shadow:0 10px 50px -12px rgba(27,28,24,.06);transition:background .2s}
.jk-btn-cta:hover{background:#eee8d8}
.jk-cta-note{font-size:12px;font-weight:700;color:rgba(193,236,212,.4);letter-spacing:1.2px;text-transform:uppercase;text-align:center}


/* ═══════════════════════════════════════════════════════════════
   TENTANG PAGE OVERRIDES
═══════════════════════════════════════════════════════════════ */
.page-tentang .page-wrapper{background:#f5f5f5;padding-top:100px}
.page-tentang #tentang-asifit.product-section{margin-top:0}
.page-tentang .affiliate-section{margin-bottom:48px}

/* ═══════════════════════════════════════════════════════════════
   CHATBOT BUTTON (fixed, bottom-right)
═══════════════════════════════════════════════════════════════ */
.chatbot-btn{position:fixed;right:32px;bottom:32px;width:120px;display:block;z-index:999;transition:transform .2s;cursor:pointer}
.chatbot-btn:hover{transform:scale(1.06)}
.chatbot-btn img{width:100%;height:auto;display:block}


/* ═══════════════════════════════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════════════════════════════ */
.cookie-banner{position:fixed;bottom:24px;right:24px;width:100%;max-width:480px;z-index:1100;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(12px)}
.cookie-banner.show{opacity:1;pointer-events:all;transform:translateY(0)}
.cookie-banner-inner{background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.14);overflow:hidden}
.cookie-banner-close{position:absolute;top:16px;right:16px;width:28px;height:28px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:1}
.cookie-banner-close:hover{opacity:.6}
.cookie-banner-top{display:flex;gap:16px;align-items:flex-start;padding:24px 24px 16px}
.cookie-banner-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cookie-banner-title{font-size:17px;font-weight:700;color:#28903b;line-height:1.3;margin-bottom:8px}
.cookie-banner-desc{font-size:13px;color:#3f4a3d;line-height:1.6;font-family:'Plus Jakarta Sans',sans-serif}
.cookie-banner-divider{height:1px;background:#ebebeb;margin:0 24px}
.cookie-banner-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;flex-wrap:wrap}
.cookie-banner-agree{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#3f4a3d;font-family:'Plus Jakarta Sans',sans-serif;flex:1;min-width:0;visibility:hidden}
.cookie-banner-check{width:16px;height:16px;accent-color:#28903b;flex-shrink:0;cursor:pointer}
.cookie-banner-link{color:#28903b;text-decoration:underline;text-underline-offset:2px}
.cookie-banner-btns{display:flex;gap:8px;flex-shrink:0}
.cookie-banner-btn-kelola{padding:9px 20px;font-size:13px;font-weight:600;color:#1b1c18;background:#fff;border:1.5px solid #d1d5d0;border-radius:999px;cursor:pointer;font-family:inherit;transition:background .2s}
.cookie-banner-btn-kelola:hover{background:#f5f5f5}
.cookie-banner-btn-terima{padding:9px 20px;font-size:13px;font-weight:600;color:#fff;background:#28903b;border:none;border-radius:999px;cursor:pointer;font-family:inherit;transition:background .2s}
.cookie-banner-btn-terima:hover{background:#1f7a31}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   Breakpoints: 1199px (tablet), 767px (mobile), 480px (small)
═══════════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ── */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:6px; background:none; border:none; cursor:pointer; flex-shrink:0; }
.nav-hamburger span { display:block; width:100%; height:2px; background:#28903b; border-radius:2px; transition:transform .25s, opacity .25s; }
.nav-open .nav-hamburger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-open .nav-hamburger span:nth-child(2) { opacity:0; }
.nav-open .nav-hamburger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU OVERLAY ── */
.nav-mobile-menu { display:none; position:fixed; inset:0; top:0; background:rgba(0,0,0,.5); z-index:998; opacity:0; pointer-events:none; transition:opacity .25s; }
.nav-mobile-menu.active { opacity:1; pointer-events:auto; }
.nav-mobile-inner { position:absolute; top:0; left:0; right:0; background:#fff; border-radius:0 0 24px 24px; padding:80px 24px 32px; display:flex; flex-direction:column; gap:4px; box-shadow:0 8px 32px rgba(0,0,0,.15); transform:translateY(-100%); transition:transform .3s ease; }
.nav-mobile-menu.active .nav-mobile-inner { transform:translateY(0); }
.nav-mobile-link { display:block; padding:14px 16px; font-size:15px; color:#28903b; font-weight:500; border-radius:10px; transition:background .15s; }
.nav-mobile-link:hover, .nav-mobile-link:active { background:#f0faf2; }
.nav-mobile-link--btn { background:#28903b; color:#fff; font-weight:700; text-align:center; margin-top:8px; border-radius:9999px; }
.nav-mobile-link--btn:hover { background:#1f6e2d; }

/* ── Unlock fixed 1440px layout ── */
@media (max-width: 1199px) {
  body { min-width: 0; }
  .page-wrapper { width: 100%; min-width: 0; }
}


/* ══════════════════════════════════════════════════════════════
   TABLET  (768px – 1199px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  /* NAVBAR */
  .navbar { gap: 16px; padding: 12px 18px; left: 16px; right: 16px; transform: none; width: calc(100% - 32px); top: 16px; }
  .nav-links { display: none; }
  .nav-actions { gap: 8px; }
  .nav-btn-wrap { width: auto; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: block; }

  /* HERO */
  .hero { height: 520px; }
  .hero-scroll { top: 440px; }
  .hero-dots { left: 24px; top: 475px; }

  /* KKI */
  .kki-inner { padding: 64px 48px; }
  .kki-logo { width: 220px; height: 180px; }
  .kki-text { width: auto; max-width: 580px; }

  /* PRODUCT */
  .main-frame { width: 100%; }
  .main-frame-bg { width: 100%; }
  .product-big-name { font-size: 50px; }
  .product-desc { width: 340px; }
  .product-img-wrap { left: 370px; width: 410px; height: 410px; top: 130px; }
  .product-highlight { left: 610px; top: 20px; width: 260px; }
  .vitamin-cards { left: auto; right: 12px; top: 60px; }
  .vitamin-card { width: 110px; height: 105px; }

  /* AVAILABILITY */
  .avail-inner { padding: 32px 20px 40px; gap: 48px; }
  .avail-heading { font-size: 44px; line-height: 48px; letter-spacing: -2px; }
  .channel-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .channel-card-kimia { grid-column: 1 / span 3; }
  .channel-card-shopee { grid-column: 4 / span 3; }
  .channel-card-lazada { grid-column: 1 / span 6; height: 200px; }
  .channel-card-offline { grid-column: 1 / span 6; }
  .channel-line { display: none; }

  /* AFFILIATE */
  .affiliate-section { width: calc(100% - 32px); }
  .affiliate-content { padding: 48px 40px; }
  .affiliate-heading { font-size: 28px; line-height: 36px; }

  /* ARTICLES */
  .article-section { height: auto; }
  .article-inner { position: relative; height: auto; }
  .article-grid { width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .article-header { width: auto; max-width: 100%; }

  /* TESTIMONIALS */
  .testimonials-section { width: 100%; padding: 0 20px 64px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-featured { grid-column: 1 / span 2; }
  .testimonial-featured-quote { width: auto; font-size: 22px; line-height: 32px; }
  .testimonial-card { height: auto; min-height: 260px; }

  /* FAQ */
  .faq-wrap { max-width: 90%; width: 90%; }

  /* FOOTER */
  .footer { height: auto; display: flex; flex-direction: column; padding: 48px 0 40px; }
  .footer-left { position: relative; left: auto; top: auto; width: auto; padding: 0 40px; gap: 40px; }
  .footer-right { position: relative; left: auto; top: auto; width: auto; bottom: auto; padding: 40px 40px 0; gap: 40px; }
  .footer-contact-img { position: relative; left: auto; top: auto; width: auto; max-width: 325px; height: auto; margin: 48px 40px 0; }
  .footer-location-row { height: auto; flex-direction: column; gap: 24px; align-items: flex-start; }
  .footer-blur-1 { left: auto; right: -100px; top: 0; }
  .footer-blur-2 { left: -100px; top: 0; }

  /* JOIN KOMUNITAS */
  .jk-hero { padding: 110px 32px 80px; }
  .jk-h1 { font-size: 40px; }
  .jk-kalender { height: auto; }
  .jk-kalender-content { position: relative; left: auto; top: auto; transform: none; padding: 36px 36px 0; }
  .jk-kalender-desc { width: auto; max-width: 480px; }
  .jk-kalender-slides { position: relative; left: auto; top: auto; width: 100%; height: 300px; margin-top: 24px; border-radius: 0 0 34px 34px; }
  .jk-kslide img { border-radius: 0 0 34px 34px; }
  .jk-kalender-dots { position: relative; left: auto; bottom: auto; display: flex; justify-content: center; padding: 16px 0 4px; }
  .jk-card-wide-photo { right: 0; width: 380px; height: 310px; }
  .jk-cta-title { font-size: 44px; }
  .jk-quote { font-size: 34px; }
  .jk-stat-num { font-size: 44px; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE  (≤ 767px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* BASE */
  body { overflow-x: hidden; }
  .page-wrapper { overflow-x: hidden; padding-top: 56px; }

  /* NAVBAR — mobile: sticky top, full width, rectangular */
  .navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; border-radius: 0 !important; box-shadow: 0 1px 8px rgba(0,0,0,.08) !important; padding: 12px 16px !important; gap: 0 !important; justify-content: space-between !important; }
  .nav-links { display: none !important; }
  .nav-actions { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: block; }

  /* HERO */
  .hero { height: auto !important; width: 100% !important; align-self: stretch !important; overflow: hidden !important; position: relative !important; }
  .hero-bg { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: auto !important; overflow: hidden !important; }
  .hero-bg img { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero-bg img:first-child { position: relative !important; height: auto !important; }
  .hero-scroll { display: none !important; }
  .hero-dots { position: absolute !important; bottom: 10px !important; top: auto !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; justify-content: center !important; margin-top: 0 !important; padding-bottom: 0 !important; }

  /* KKI */
  .kki-section { width: calc(100% - 32px) !important; align-self: center !important; border-radius: 24px !important; overflow: hidden !important; margin-top: 20px !important; }
  .kki-bg-img { object-position: -230px 0px !important; }
  .kki-bg-grad { background: linear-gradient(80deg, #fff 40%, rgba(255,255,255,0) 80%) !important; }
  .kki-inner { padding: 20px 20px; gap: 14px; }
  .kki-logo { width: auto !important; height: 80px; align-self: flex-start !important; }
  .kki-text { font-size: 10px; line-height: 1.8; width: 55% !important; font-weight: 600; }
  .kki-btn { display: grid !important; width: 100% !important; grid-template-columns: 1fr !important; place-items: center !important; }
  .kki-btn-bg { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 40px; }
  .kki-btn-text { grid-column: 1 !important; grid-row: 1 !important; font-size: 13px; padding: 10px 18px; text-align: center !important; width: 100% !important; }

  /* ── PRODUCT SECTION: absolute → flow ── */
  .product-section { padding: 8px; }
  .main-frame {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 16px 28px !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .main-frame-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 20px !important; left: 0 !important; top: 0 !important; transform: none !important; z-index: 0 !important; }
  .product-label, .product-big-name, .product-sub, .product-desc, .product-img-wrap, .vitamin-cards, .product-logos-row, .kimia-farma-brand { position: relative !important; z-index: 1 !important; }
  .product-label { position: static !important; font-size: 20px !important; width: auto !important; }
  .product-big-name { position: static !important; font-size: 38px !important; line-height: 1 !important; display: none !important; }
  .product-sub { position: static !important; font-size: 11px !important; width: auto !important; display: none !important; }
  .product-desc { position: static !important; font-size: 13px !important; width: auto !important; max-width: 100% !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
  .product-img-wrap { position: relative !important; width: 100% !important; height: 300px !important; left: auto !important; top: auto !important; margin: 8px 0 !important; border-radius: 12px !important; overflow: hidden !important; }
  .product-img-wrap img { position: absolute !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: contain !important; }
  .product-highlight { display: flex !important; position: absolute !important; top: 30px !important; right: -30px !important; left: auto !important; width: 220px !important; height: 190px !important; z-index: 0 !important; pointer-events: none !important; }
  .product-highlight-inner { width: 150px !important; height: 200px !important; }
  .product-highlight-inner img { width: 100% !important; height: 100% !important; }
  /* Kimia Farma brand — show in mobile flow */
  .kimia-farma-brand { display: flex !important; justify-content: center !important; position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; overflow: visible !important; order: 7 !important; top: auto !important; left: auto !important; }
  .kimia-farma-brand img { position: static !important; width: 200px !important; height: auto !important; left: auto !important; top: auto !important; object-fit: contain !important; }
  /* Reorder: packaging → text → vitamins → logos */
  .product-label { order: 1 !important; }
  .product-img-wrap { order: 2 !important; }
  .product-big-name { order: 3 !important; }
  .product-sub { order: 4 !important; }
  .product-desc { order: 5 !important; }
  .vitamin-cards { order: 6 !important; }
  .product-logos-row { order: 8 !important; }
  /* Vitamin cards — 4 in 1 row */
  .vitamin-cards { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; margin-bottom: 10px !important; }
  /* Product logos row */
  .product-logos-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 16px !important; width: 100% !important; flex-wrap: wrap !important; position: relative !important; z-index: 1 !important; padding-top: 12px !important; }
  .product-logo-item { position: static !important; width: auto !important; height: auto !important; top: auto !important; left: auto !important; }
  .product-logo-item img { height: 60px !important; width: auto !important; object-fit: contain !important; }
  /* Halal logo → 3rd position in mobile row */
  .product-logos-row .product-logo-item:nth-child(1) { order: 3 !important; }
  .product-logos-row .product-logo-item:nth-child(2) { order: 1 !important; }
  .product-logos-row .product-logo-item:nth-child(3) { order: 2 !important; }
  .product-logos-row .product-logo-item:nth-child(4) { order: 4 !important; }
  .product-logos-row .product-logo-item:nth-child(5) { order: 5 !important; }
  .halal-logo { position: static !important; width: auto !important; height: auto !important; }
  .vitamin-card { flex: 1 !important; min-width: 0 !important; height: 80px !important; border-radius: 10px !important; flex-shrink: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .vitamin-card-text { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 4px !important; width: 100% !important; }
  .vitamin-label { font-size: 7.5px !important; line-height: 1.3 !important; display: block !important; }
  .vitamin-num { font-size: 34px !important; line-height: 1 !important; display: block !important; }

  /* ── AVAILABILITY ── */
  .avail-body { border-radius: 20px !important; }
  .avail-inner { padding: 20px 14px 28px !important; gap: 20px !important; }
  .avail-heading { font-size: 24px !important; line-height: 28px !important; letter-spacing: -0.5px !important; }
  .avail-sub { font-size: 13px !important; }
  .avail-eyebrow { font-size: 14px !important; letter-spacing: 1.5px !important; }
  .avail-header { gap: 8px !important; }
  .channel-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.3px !important; text-transform: none !important; }
  .channel-title-row { height: auto !important; }
  .channel-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .channel-card-kimia,
  .channel-card-shopee,
  .channel-card-lazada,
  .channel-card-offline { grid-column: 1 !important; }

  /* All cards: reset height to auto */
  .channel-card { height: auto !important; border-radius: 20px !important; }

  /* ── KIMIA FARMA APP CARD: logo left (spans rows), title+store buttons right ── */
  .channel-card-kimia {
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    grid-template-rows: auto auto !important;
    padding: 20px !important;
    gap: 8px 16px !important;
    align-items: center !important;
    min-height: 0 !important;
  }
  .kimia-app-logo { position: static !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 88px !important; height: 88px !important; border-radius: 20px !important; align-self: center !important; top: auto !important; left: auto !important; }
  .kimia-app-heading { position: static !important; grid-column: 2 !important; grid-row: 1 !important; font-size: 14px !important; line-height: 1.3 !important; top: auto !important; left: auto !important; right: auto !important; align-self: end !important; }
  .store-btns { position: static !important; grid-column: 2 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; top: auto !important; left: auto !important; width: 100% !important; align-self: start !important; }
  .store-btn { width: 100% !important; max-width: none !important; height: 40px !important; }
  .store-btn-text .get { font-size: 7px !important; }
  .store-btn-text .name { font-size: 11px !important; }
  .store-btn:last-child .store-btn-text .get { display: none !important; }

  /* ── SHOPEE / LAZADA: description left, button right ── */
  .channel-card-shopee,
  .channel-card-lazada { min-height: 0 !important; }
  .mkt-card-content {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 6px 14px !important;
    align-items: center !important;
    padding: 20px !important;
    width: 100% !important;
  }
  .mkt-logo { grid-column: 1 !important; grid-row: 1 !important; }
  .mkt-logo-shopee { height: 52px !important; }
  .mkt-logo-lazada { height: 40px !important; }
  .mkt-title { grid-column: 1 !important; grid-row: 2 !important; text-align: left !important; font-size: 14px !important; padding-top: 0 !important; white-space: nowrap !important; }
  .mkt-btn { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: center !important; flex-shrink: 0 !important; padding: 10px 12px !important; font-size: 12px !important; gap: 4px !important; white-space: normal !important; text-align: center !important; width: 110px !important; line-height: 1.3 !important; border-radius: 15px !important; }

  /* ── OFFLINE CHANNELS: 2-column logo grid ── */
  .channel-card-offline {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 20px !important;
    height: auto !important;
    overflow: visible !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .offline-row {
    display: contents !important;
  }
  .channel-card-offline img,
  .offline-row:first-child img,
  .offline-row:last-child img {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important;
    height: 80px !important;
    object-fit: contain !important;
  }

  /* ── AFFILIATE ── */
  .affiliate-section { width: calc(100% - 16px) !important; grid-template-columns: 1fr !important; border-radius: 20px !important; }
  .affiliate-content { padding: 32px 20px !important; align-items: flex-start !important; }
  .affiliate-heading { font-size: 20px !important; line-height: 26px !important; margin-bottom: 12px !important; }
  .affiliate-text { font-size: 14px !important; margin-bottom: 20px !important; line-height: 1.4 !important; }
  .affiliate-btn { padding: 12px 28px !important; font-size: 14px !important; align-self: flex-start !important; }
  .affiliate-image { min-height: 220px !important; }
  .affiliate-image img { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: cover !important; }

  /* ── ARTICLES ── */
  .article-inner { padding: 32px 16px 40px !important; gap: 20px !important; }
  .article-title { font-size: 22px !important; line-height: 26px !important; letter-spacing: -0.5px !important; }
  .article-sub { font-size: 12px !important; }
  .article-header { gap: 10px !important; }
  .article-explore-btn { font-size: 11px !important; height: 28px !important; padding: 8px 16px !important; }
  .article-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .article-card { border-radius: 20px !important; }
  .article-card-img { height: 240px !important; margin: 10px 10px 0 !important; border-radius: 12px !important; }
  .article-card-body { padding: 14px 14px 16px !important; }
  .article-card-title { font-size: 15px !important; line-height: 20px !important; margin-bottom: 6px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .article-card-desc { font-size: 13px !important; line-height: 20px !important; margin-bottom: 12px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .article-tag { font-size: 10px !important; padding: 3px 8px !important; margin-bottom: 6px !important; }
  .article-card-footer { padding-top: 12px !important; }
  .article-time { font-size: 11px !important; }

  /* ── TESTIMONIALS ── */
  .testimonials-section { width: 100% !important; padding: 0 16px 36px !important; }
  .testimonials-header { padding-top: 8px !important; gap: 6px !important; }
  .testimonials-title { font-size: 32px !important; line-height: 38px !important; }
  .testimonials-sub { font-size: 16px !important; margin-top: 10px !important; }
  .testimonials-bar { display: none !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  /* Featured: same layout as regular cards */
  .testimonial-featured { grid-column: 1 !important; grid-row: auto !important; order: -1 !important; border-radius: 16px !important; background: #f5f4ed !important; border: 1px solid rgba(255,255,255,.5) !important; }
  .testimonial-featured-inner { display: grid !important; grid-template-columns: 36px 1fr !important; grid-template-rows: auto auto auto auto !important; column-gap: 8px !important; padding: 16px !important; gap: 0 8px !important; }
  /* dissolve wrapper div so its children become grid items */
  .testimonial-featured-inner > div:last-child { display: contents !important; }
  .testimonial-featured-inner .stars { grid-column: 1 / -1 !important; grid-row: 1 !important; margin-bottom: 10px !important; }
  .testimonial-featured-quote { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 12px !important; font-style: italic !important; line-height: 18px !important; margin: 0 0 12px !important; color: #3f4a3d !important; }
  .testimonial-featured-avatar { grid-column: 1 !important; grid-row: 3 / 5 !important; align-self: center !important; position: static !important; width: 36px !important; height: 36px !important; border-radius: 9999px !important; overflow: hidden !important; background: rgba(38,134,48,.2) !important; border: none !important; box-shadow: none !important; }
  .testimonial-featured-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .testimonial-featured-name { grid-column: 2 !important; grid-row: 3 !important; align-self: flex-end !important; font-size: 13px !important; font-weight: 700 !important; color: #006b1b !important; line-height: 24px !important; padding-left: 0 !important; }
  .testimonial-featured-role { grid-column: 2 !important; grid-row: 4 !important; align-self: flex-start !important; font-size: 11px !important; color: #3f4a3d !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; line-height: 16px !important; padding-left: 0 !important; }
  .testimonial-card { grid-row: auto !important; }
  /* Regular cards: compact */
  .testimonial-card { height: auto !important; min-height: 0 !important; border-radius: 16px !important; }
  .testimonial-card-inner { padding: 16px !important; display: flex !important; flex-direction: column !important; height: auto !important; gap: 0 !important; }
  .testimonial-card-inner .stars { margin-bottom: 10px !important; }
  .testimonial-quote { font-size: 12px !important; line-height: 18px !important; margin-bottom: 12px !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .testimonial-author { margin-top: 4px !important; }
  .testimonial-name { font-size: 13px !important; }
  .testimonial-role { font-size: 11px !important; }
  .testimonial-avatar { width: 36px !important; height: 36px !important; }
  .stars img, .stars svg { width: 14px !important; height: 14px !important; }

  /* ── FAQ ── */
  .faq-section { padding: 0 16px 36px !important; }
  .faq-inner { padding: 0 !important; }
  .faq-wrap { max-width: 100% !important; width: 100% !important; gap: 16px !important; }
  .faq-header { gap: 6px !important; }
  .faq-title { font-size: 18px !important; letter-spacing: -0.5px !important; }
  .faq-sub { font-size: 12px !important; }
  .faq-item { padding: 12px 6px !important; }
  .faq-question { font-size: 12px !important; line-height: 1.5 !important; }
  .faq-answer { font-size: 11px !important; margin-top: 6px !important; }

  /* ── FOOTER: reflow + reorder ── */
  .footer { height: auto !important; display: flex !important; flex-direction: column !important; padding: 28px 0 24px !important; overflow: hidden !important; }
  .footer-blur-1 { display: none !important; }
  .footer-blur-2 { display: flex !important; position: absolute !important; left: -30px !important; top: 290px !important; width: 280px !important; height: 310px !important; z-index: 0 !important; }
  .footer-logo-area, .footer-nav, .footer-contact-img, .footer-socials, .footer-location-copyright { position: relative !important; z-index: 1 !important; }
  /* Dissolve wrappers so children become direct flex children of footer */
  .footer-left { display: contents !important; }
  .footer-right { display: contents !important; }
  .footer-bottom { display: contents !important; }
  /* Order: 1=logos, 2=nav, 3=contact, 4=socials, 5=location, 6=copyright */
  /* 1. Logo row: Asifit + Kimia Farma same height */
  .footer-logo-area { order: 1 !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 30px 20px 0 !important; }
  .footer-logo-area > img:first-child { height: 50px !important; width: auto !important; }
  .footer-kimia-mobile { display: block !important; height: 70px !important; width: auto !important; }
  .footer-kimia-desktop { display: none !important; }
  .footer-desc-block { display: none !important; }
  .footer-nav { order: 2 !important; padding: 35px 20px 0 !important; grid-template-columns: repeat(2, max-content) !important; font-size: 15px !important; gap: 12px 24px !important; }
  /* 2. Contact center full width */
  .footer-contact-img { order: 3 !important; position: relative !important; left: auto !important; top: auto !important; width: calc(100% - 60px) !important; max-width: calc(100% - 60px) !important; height: auto !important; margin: 20px 30px 0 !important; }
  /* 3. Social icons bigger + margin */
  .footer-socials { order: 4 !important; flex-direction: row !important; gap: 16px !important; padding: 20px 20px 0 !important; }
  .footer-socials::before { width: 600px !important; height: 400px !important; top: -100px !important; left: auto !important; right: 0px !important; bottom: auto !important; transform: none !important; background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 40%, transparent 70%) !important; }
  .footer-social-link { width: 65px !important; height: 65px !important; }
  /* 4. Lokasi Kami + Copyright in 1 row */
  .footer-location-copyright { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: stretch !important; order: 5 !important; padding: 20px 20px 16px !important; gap: 16px !important; }
  .footer-location-row { height: auto !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex: 1 !important; }
  .footer-copyright { display: none !important; }
  .footer-copyright-mobile { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; text-align: right !important; font-size: 11px !important; line-height: 1.5 !important; color: #f5f5f5 !important; flex-shrink: 0 !important; }
  .footer-location-title { font-size: 22px !important; margin-bottom: 4px !important; font-weight: 700 !important; }
  .footer-location-text { width: auto !important; font-size: 11px !important; line-height: 1.5 !important; margin-top: 8px !important; font-weight: 700 !important; }

  /* CHATBOT */
  .chatbot-btn { width: 76px !important; right: 12px !important; bottom: 12px !important; }

  /* ── POPUP ── */
  .popup-overlay { align-items: center !important; padding-bottom: 0 !important; }
  .popup-dialog { width: calc(100vw - 32px) !important; height: auto !important; display: flex !important; flex-direction: column !important; border-radius: 20px !important; overflow: visible !important; padding: 20px 20px 0 !important; position: relative !important; }
  .popup-bg { border-radius: 20px !important; }
  .popup-photo { display: block !important; position: relative !important; top: auto !important; right: auto !important; width: 100% !important; height: 200px !important; border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; }
  .popup-photo img { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .popup-close { top: -16px !important; right: -16px !important; width: 44px !important; height: 44px !important; }
  .popup-content { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; padding: 20px 20px 12px !important; }
  .popup-eyebrow { font-size: 15px !important; margin-bottom: 8px !important; }
  .popup-heading span { font-size: 16px !important; }
  .popup-heading strong { font-size: 32px !important; }
  .popup-note { position: relative !important; left: auto !important; bottom: auto !important; padding: 0 20px 20px !important; font-size: 11px !important; }
  .popup-form { max-width: 100% !important; }
  .popup-label { font-size: 9px !important; }
  .popup-input, .popup-phone-input { font-size: 12px !important; padding: 10px 12px !important; }
  .popup-submit { font-size: 12px !important; }

  /* ── JOIN KOMUNITAS ── */
  .jk-hero { padding: 90px 16px 56px; }
  .jk-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .jk-h1 { font-size: 28px; letter-spacing: -0.5px; line-height: 1.25; }
  .jk-sub { font-size: 16px; margin-top: 10px !important; margin-bottom: 10px !important; }
  .jk-desc { font-size: 14px; margin-top: 12px; }
  .jk-btn-join { padding: 14px 24px; font-size: 13px; margin-top: 12px; gap: 8px; border-radius: 24px; }
  .jk-hero-right { display: none !important; }
  .jk-hero-img-badge { width: 120px; height: 120px; left: -16px; bottom: -36px; border-width: 5px; }

  .jk-kalender-wrap { padding: 0 8px 20px; }
  .jk-kalender { border-radius: 20px; padding-bottom: 20px !important; }
  .jk-kalender-content { position: relative; left: auto; top: auto; transform: none; padding: 24px 20px 0; }
  .jk-kalender-title { font-size: 24px; letter-spacing: -0.5px; line-height: 1.4; }
  .jk-kalender-desc { font-size: 14px; width: auto; }
  .jk-kalender-slides { position: relative; left: auto; top: auto; width: calc(100% - 40px) !important; height: 200px; margin: 16px 20px 0 !important; border-radius: 20px !important; }
  .jk-kslide img { border-radius: 0 0 20px 20px; }
  .jk-kalender-dots { position: relative; left: auto; bottom: auto; display: flex; justify-content: center; padding: 10px 0 2px; }

  .jk-benefits { padding: 48px 16px; }
  .jk-benefits-title { font-size: 22px; line-height: 1.5 !important; }
  .jk-benefits-sub { font-size: 17px; max-width: 100%; }
  .jk-bento { grid-template-columns: 1fr; grid-template-rows: auto; gap: 14px; }
  .jk-card-wide { grid-column: 1; display: flex !important; flex-direction: column !important; }
  .jk-card-wide-photo { display: block !important; order: 1 !important; width: 100% !important; height: 350px !important; background: #fff !important; padding: 15px !important; box-sizing: border-box !important; border-radius: 20px 20px 0 0 !important; overflow: hidden !important; position: relative !important; }
  .jk-card-wide-photo img { position: absolute !important; top: 15px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100% - 150px) !important; object-fit: cover !important; display: block !important; }
  .jk-card-wide-content { background: #fff !important; position: relative !important; top: auto !important; transform: none; left: auto; width: auto; padding: 24px 20px 20px; gap: 10px; order: 2 !important; margin-top: -200px !important; z-index: 2 !important; border-radius: 0 0 20px 20px !important; }
  .jk-card-wide-glow { display: none; }
  .jk-card-wide-ttl { font-size: 18px; }
  .jk-card-wide-txt { font-size: 14px; }
  .jk-icon-green { width: 40px; height: 40px; }
  .jk-card-dark { margin-top: 20px !important; }
  .jk-card-dark-body { padding: 24px 20px; gap: 10px; }
  .jk-card-dark-ttl { font-size: 18px; }
  .jk-card-dark-txt { font-size: 14px; }

  .jk-values { padding: 48px 16px; }
  .jk-quote { font-size: 22px; line-height: 1.25; text-align: left !important; }
  .jk-values-body { font-size: 14px; text-align: left !important; }
  .jk-stats { flex-direction: row !important; gap: 65px !important; padding-top: 8px; }
  .jk-stat-divider { display: flex !important; }
  .jk-stat-num { font-size: 44px; }
  .jk-stat-label { font-size: 13px; letter-spacing: 1px; text-align: center; }

  .jk-cta-wrap { padding: 0 8px 24px; }
  .jk-cta { border-radius: 28px; padding: 48px 20px; min-height: 0; }
  .jk-cta-title { font-size: 28px; letter-spacing: -0.3px; }
  .jk-cta-sub { font-size: 14px; }
  .jk-btn-cta { padding: 16px 24px; font-size: 12px; letter-spacing: 1px; gap: 12px; border-radius: 20px; }

  /* TENTANG PAGE */
  .page-tentang .page-wrapper { padding-top: 56px !important; }

  /* COOKIE BANNER */
  .cookie-banner { bottom: 0 !important; right: 0 !important; left: 0 !important; max-width: 100% !important; padding: 0 !important; }
  .cookie-banner-inner { border-radius: 20px 20px 0 0 !important; }
  .cookie-banner-close { top: 6px !important; }
}


/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .product-big-name { font-size: 34px; }
  .product-label { font-size: 16px; }
  .avail-heading { font-size: 26px; }
  .article-title { font-size: 22px; }
  .article-card-img { height: 170px; }
  .testimonial-featured-quote { font-size: 14px; line-height: 22px; }
  .jk-h1 { font-size: 26px; }
  .jk-cta-title { font-size: 26px; }
  .jk-quote { font-size: 20px; }
  .nav-btn { padding: 5px 9px; font-size: 10px; }
  .affiliate-heading { font-size: 20px; }
  .store-btn { width: 130px; }
}