/* =========================================================
   DHANYA BIO — Biological Growth Promoters (BGP) section
   Hero banner + HPLC/Microbiology switch + 4-up card grids
   ========================================================= */
#dhanya-bgp-section{
    display:none;
    margin-top:34px;
    --dbgp-forest:#12341d; --dbgp-green-d:#1b5e20; --dbgp-green:#2e7d32; --dbgp-green-l:#4CAF34;
    --dbgp-gold:#f5cd62; --dbgp-gold-2:#e9b93d;
    --dbgp-ink:#20303a; --dbgp-muted:#5c6b63; --dbgp-line:rgba(46,125,50,.14);
    --dbgp-mint:#eef5ef; --dbgp-card:#ffffff;
    font-family:"DM Sans",sans-serif;
}
#dhanya-bgp-section *{ box-sizing:border-box; }

/* ---- Hero banner ---- */
.dhanya-bgp-banner{
    position:relative; overflow:hidden; border-radius:18px;
    padding:26px 34px;
    background:
        radial-gradient(circle at top right, rgba(245,205,98,.20), transparent 34%),
        linear-gradient(135deg,#12341d 0%,#1b5e20 45%,#2e7d32 100%);
    box-shadow:0 14px 34px rgba(18,52,29,.18);
    border:1px solid rgba(255,255,255,.06);
}
.dhanya-bgp-content{ position:relative; z-index:2; max-width:780px; }
.dhanya-bgp-kicker{
    margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:1.9px;
    text-transform:uppercase; color:rgba(255,255,255,.78);
}
.dhanya-bgp-title{
    margin:0; font-family:"Instrument Sans",sans-serif; font-size:34px; line-height:1.06;
    font-weight:800; letter-spacing:-.7px; color:var(--dbgp-gold);
    text-shadow:0 1px 0 rgba(0,0,0,.14);
}
.dhanya-bgp-shine{
    position:absolute; top:-20%; left:-18%; width:28%; height:160%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transform:rotate(18deg); animation:dhanyaBgpSweep 3.8s ease-in-out infinite; pointer-events:none;
}
@keyframes dhanyaBgpSweep{
    0%{left:-30%;opacity:0} 12%{opacity:1} 45%{left:120%;opacity:0} 100%{left:120%;opacity:0}
}

/* ---- Switch (tabs) ---- */
.dbgp-switch{
    display:inline-flex; gap:6px; margin:30px 0 4px; padding:6px;
    background:#f1f5f1; border:1px solid var(--dbgp-line); border-radius:999px;
}
/* base — id-scoped + !important so the theme's teal hover cannot leak in */
#dhanya-bgp-section .dbgp-tab{
    display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
    padding:12px 24px; border-radius:999px;
    background:transparent !important; box-shadow:none;
    font-family:"Instrument Sans",sans-serif; font-size:15px; font-weight:600;
    color:var(--dbgp-green-d) !important; letter-spacing:-.1px; text-decoration:none !important;
    transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
#dhanya-bgp-section .dbgp-tab .dbgp-tab-count{
    display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px;
    padding:0 7px; border-radius:999px; font-family:"DM Sans",sans-serif; font-size:12px;
    font-weight:700; background:rgba(46,125,50,.12) !important; color:var(--dbgp-green) !important;
    transition:background .25s ease, color .25s ease;
}
#dhanya-bgp-section .dbgp-tab:hover,
#dhanya-bgp-section .dbgp-tab:focus,
#dhanya-bgp-section .dbgp-tab:focus-visible{
    background:rgba(46,125,50,.10) !important; color:var(--dbgp-green-d) !important;
    box-shadow:none; outline:none;
}
#dhanya-bgp-section .dbgp-tab.is-active,
#dhanya-bgp-section .dbgp-tab.is-active:hover,
#dhanya-bgp-section .dbgp-tab.is-active:focus{
    background:linear-gradient(135deg,#2e7d32,#1b5e20) !important; color:#fff !important;
    box-shadow:0 8px 20px rgba(27,94,32,.28);
}
#dhanya-bgp-section .dbgp-tab.is-active .dbgp-tab-count{
    background:rgba(255,255,255,.22) !important; color:#fff !important;
}

/* ---- Panel ---- */
.dbgp-panel{ margin-top:22px; }
.dbgp-panel[hidden]{ display:none; }
.dbgp-panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-bottom:14px; margin-bottom:22px; border-bottom:2px solid var(--dbgp-green-d);
}
.dbgp-panel-head h3{
    margin:0; font-family:"Instrument Sans",sans-serif; font-size:26px; line-height:1.1;
    font-weight:700; letter-spacing:-.4px; color:var(--dbgp-green-d);
}
.dbgp-panel-head .dbgp-badge{
    display:inline-flex; align-items:center; height:30px; padding:0 15px; border-radius:999px;
    background:var(--dbgp-mint); color:var(--dbgp-green); font-size:13px; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase; white-space:nowrap;
}
.dbgp-intro{
    margin:-6px 0 20px; max-width:820px; color:var(--dbgp-muted); font-size:15px; line-height:1.65;
}

/* ---- Grid + cards (4 per row) ---- */
.dbgp-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch;
}
.dbgp-card{
    display:flex; flex-direction:column; min-width:0; overflow:hidden;
    background:var(--dbgp-card);
    border:1px solid var(--dbgp-line); border-top:3px solid var(--dbgp-green-l);
    border-radius:14px; padding:15px 17px 16px;
    box-shadow:0 5px 15px rgba(19,30,55,.06);
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.dbgp-card:hover{
    transform:translateY(-4px); box-shadow:0 14px 30px rgba(19,30,55,.12);
    border-top-color:var(--dbgp-green);
}
.dbgp-card-head{
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 9px;
    padding-bottom:10px; margin-bottom:11px; border-bottom:1px solid var(--dbgp-line);
}
.dbgp-num{ flex:0 0 auto; align-self:center; font-family:"Instrument Sans",sans-serif; font-size:12px; font-weight:700; color:#c3cfc6; letter-spacing:.5px; }
.dbgp-name{
    flex:1 1 100px; min-width:0; margin:0; font-family:"Instrument Sans",sans-serif;
    font-size:16px; line-height:1.25; font-weight:600; color:var(--dbgp-green-d); letter-spacing:-.2px;
    word-break:break-word; overflow-wrap:break-word; align-self:center;
}
.dbgp-chips{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; margin-left:auto; max-width:100%; flex:0 1 auto; }
.dbgp-chip{
    background:var(--dbgp-mint); color:var(--dbgp-green); font-size:11.5px; font-weight:700;
    padding:2px 8px; border-radius:5px; white-space:nowrap;
}

/* ---- Spec strip ---- */
.dbgp-specs{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--dbgp-line);
}
.dbgp-spec{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:9px; }
.dbgp-spec + .dbgp-spec{ align-self:stretch; padding-left:14px; border-left:1px solid var(--dbgp-line); }
.dbgp-spec-ico{
    flex:0 0 auto; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--dbgp-mint); color:var(--dbgp-green);
}
.dbgp-spec-ico svg{ width:17px; height:17px; display:block; }
.dbgp-spec-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.dbgp-spec-label{
    font-size:10px; line-height:1.25; color:var(--dbgp-muted);
    letter-spacing:.1px; overflow-wrap:break-word;
}
.dbgp-spec-val{
    font-family:"Instrument Sans",sans-serif; font-size:12.5px; line-height:1.28;
    font-weight:600; color:var(--dbgp-green-d); letter-spacing:-.1px; overflow-wrap:break-word;
}

.dbgp-points{ list-style:none; margin:0; padding:0; flex:1 1 auto; }
.dbgp-points li{
    position:relative; padding-left:15px; font-size:12.5px; line-height:1.42;
    color:#3d4b44; margin-bottom:5px; overflow-wrap:break-word;
}
.dbgp-points li:last-child{ margin-bottom:0; }
.dbgp-points li::before{
    content:""; position:absolute; left:0; top:6px; width:5px; height:5px;
    border-radius:50%; background:var(--dbgp-green-l);
}

/* ---- Footer note ---- */
.dbgp-note{
    margin-top:30px; border:1px dashed #c6d6cb; background:var(--dbgp-mint); border-radius:16px;
    padding:22px 26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.dbgp-note h4{
    margin:0; font-family:"Instrument Sans",sans-serif; font-size:18px; font-weight:700;
    color:var(--dbgp-green-d); overflow-wrap:break-word;
}
.dbgp-note p{ margin:0; flex:1; min-width:240px; color:#3d4b44; font-size:14px; line-height:1.55; }
.dbgp-note a{
    display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px;
    border-radius:10px; text-decoration:none; font-size:14px; font-weight:700; color:#fff !important;
    background:linear-gradient(135deg,#4CAF34,#2e7d32); white-space:nowrap; transition:all .28s ease;
}
.dbgp-note a:hover{ background:linear-gradient(135deg,#43a047,#1b5e20); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.15); }

/* ---- Motion ---- */
.dbgp-panel.is-active .dbgp-card{ animation:dbgpFade .45s ease both; }
@keyframes dbgpFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1200px){ .dbgp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

@media (max-width:991px){
    .dbgp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dhanya-bgp-banner{ padding:28px 24px; min-height:150px; }
    .dhanya-bgp-title{ font-size:30px; }
    .dbgp-panel-head h3{ font-size:23px; }
}

/* ================================================================
   MOBILE — ≤600 px
   FIX: .dbgp-switch was inline-flex (shrink-to-content) which caused
   the tab strip to overflow its container on narrow viewports when the
   two label strings are long ("Microbiology Grade Antibiotics").
   Switch to full-width flex so both tabs share available space equally,
   and allow the label text to wrap inside each button so nothing clips.
   No other values changed.
   ================================================================ */
@media (max-width:600px){
    #dhanya-bgp-section{ margin-top:24px; }

    .dhanya-bgp-banner{ padding:24px 18px 22px; border-radius:14px; min-height:auto; }
    .dhanya-bgp-content{ max-width:100%; }
    .dhanya-bgp-kicker{ margin-bottom:8px; font-size:11px; letter-spacing:1.4px; }
    .dhanya-bgp-title{ font-size:24px; line-height:1.18; letter-spacing:-.4px; }
    .dhanya-bgp-btn{ width:100%; min-width:100%; height:48px; }
    .dhanya-bgp-shine{ display:none; }

    /* Tab strip: full-width, tabs share space, text wraps */
    .dbgp-switch{
        display:flex;          /* was inline-flex — caused the overflow */
        width:100%;
        border-radius:14px;    /* softer on small screens */
    }
    #dhanya-bgp-section .dbgp-tab{
        flex:1;
        justify-content:center;
        padding:10px 8px;
        font-size:13px;
        gap:5px;
        /* allow the label to wrap so the pill stays within viewport */
        white-space:normal;
        text-align:center;
        line-height:1.3;
        height:auto;
        min-height:44px;       /* keep touch target comfortable */
    }
    /* Hide the count badge on very small screens to save space */
    #dhanya-bgp-section .dbgp-tab .dbgp-tab-count{
        display:none;
    }

    .dbgp-grid{ grid-template-columns:1fr; gap:14px; }

    .dbgp-specs{ flex-direction:column; gap:10px; }
    .dbgp-spec + .dbgp-spec{ padding-left:0; border-left:0; padding-top:10px; border-top:1px solid var(--dbgp-line); }

    .dbgp-note{ flex-direction:column; align-items:flex-start; }
    .dbgp-note a{ width:100%; }
}