/* SRSHerbal v2.24.0 — mobile-first repair layer.
   Purpose: remove horizontal overflow, duplicate navigation/search clutter,
   content overlap and desktop-only sizing on phones/tablets without deleting features. */

:root{
    --v224-navy:#103b50;
    --v224-green:#0f735d;
    --v224-green-dark:#124e43;
    --v224-orange:#ff6f2f;
    --v224-line:#dbe7e8;
    --v224-soft:#f5faf8;
    --v224-shadow:0 12px 32px rgba(18,55,72,.10);
    --v224-dock-h:72px;
}

html{overflow-x:hidden}
body.v224-responsive{max-width:100%;overflow-x:hidden}
.mobile-head-actions-v224,.mobile-category-strip-v224{display:none}

/* Keep wide layouts contained even when individual modules have long content. */
.v224-responsive main,.v224-responsive section,.v224-responsive article,.v224-responsive form{min-width:0}
.v224-responsive input,.v224-responsive select,.v224-responsive textarea{max-width:100%}

/* ---------------- PUBLIC MARKETPLACE ---------------- */
@media(max-width:820px){
    body.locked-global-theme.v224-responsive{
        padding-bottom:calc(var(--v224-dock-h) + env(safe-area-inset-bottom,0px))!important;
        background:#fff;
    }

    /* Thin proof strip: no clipped fifth/sixth item on phones. */
    .locked-global-theme.v224-responsive .trustbar{
        min-height:29px!important;
        height:29px!important;
        padding:0 10px!important;
        gap:13px!important;
        justify-content:flex-start!important;
        overflow:hidden!important;
        white-space:nowrap!important;
        font-size:9px!important;
        position:relative;
        z-index:72;
    }
    .locked-global-theme.v224-responsive .trustbar span{flex:0 0 auto;font-size:9px!important}
    .locked-global-theme.v224-responsive .trustbar span:nth-child(n+4){display:none!important}

    /* Compact app-like header: logo + account actions, then one global search. */
    .locked-global-theme.v224-responsive .site-header.locked-header{
        position:sticky!important;
        top:0!important;
        z-index:70!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-areas:
            "brand actions"
            "search search"!important;
        gap:8px 10px!important;
        align-items:center!important;
        padding:9px 12px 10px!important;
        min-height:0!important;
        box-shadow:0 6px 20px rgba(18,54,74,.07)!important;
        border-bottom:1px solid #e4eded!important;
        background:rgba(255,255,255,.985)!important;
        backdrop-filter:blur(12px);
    }
    .locked-global-theme.v224-responsive .site-header .brand{
        grid-area:brand;
        min-width:0!important;
        width:max-content!important;
        max-width:100%;
    }
    .locked-global-theme.v224-responsive .site-header .brand-image img{
        width:184px!important;
        height:48px!important;
        object-fit:contain!important;
        object-position:left center!important;
    }
    .mobile-head-actions-v224{
        grid-area:actions;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:6px;
    }
    .mobile-head-actions-v224 a{
        width:43px;
        height:43px;
        display:grid;
        place-items:center;
        border:1px solid #dfe9e8;
        border-radius:13px;
        background:#f8fbfa;
        color:#244e55;
        box-shadow:0 4px 12px rgba(18,55,72,.04);
    }
    .mobile-head-actions-v224 a b{font-size:16px;line-height:1}
    .mobile-head-actions-v224 a span{display:none}

    .locked-global-theme.v224-responsive .site-header .search{
        grid-area:search;
        width:100%!important;
        height:44px!important;
        min-height:44px!important;
        border-radius:13px!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 54px!important;
        overflow:visible!important;
        box-shadow:0 5px 16px rgba(18,55,72,.055)!important;
    }
    .locked-global-theme.v224-responsive .site-header .search input{
        min-width:0!important;
        padding:0 13px!important;
        font-size:13px!important;
        text-overflow:ellipsis;
    }
    .locked-global-theme.v224-responsive .site-header .search button{
        width:54px!important;
        min-width:54px!important;
        padding:0!important;
        border-radius:0 12px 12px 0!important;
        font-size:18px!important;
    }
    .locked-global-theme.v224-responsive .header-actions{display:none!important}

    /* Desktop nav is replaced by four high-value mobile shortcuts. */
    .locked-global-theme.v224-responsive .mainnav.locked-nav{display:none!important}
    .mobile-category-strip-v224{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0;
        min-height:46px;
        background:#fff;
        border-bottom:1px solid #e7eeee;
        box-shadow:0 4px 14px rgba(18,55,72,.035);
        position:relative;
        z-index:40;
    }
    .mobile-category-strip-v224 a{
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:8px 4px;
        border-right:1px solid #edf2f1;
        color:#294f5b;
        font-size:10px;
        font-weight:850;
        white-space:nowrap;
    }
    .mobile-category-strip-v224 a:last-child{border-right:0}
    .mobile-category-strip-v224 a b{font-size:13px}

    /* One search is enough on phones: keep global search in header. */
    .v223-home .v223-herb-finder{display:none!important}

    /* First fold: compact, readable, no art pushed below a huge headline. */
    .v223-home .v223-hero,
    .v280-home .v250-hero{
        display:block!important;
        min-height:0!important;
        padding:0!important;
        background:
            radial-gradient(circle at 94% 5%,rgba(124,177,121,.12),transparent 28%),
            linear-gradient(145deg,#fffdf9,#f5faf7)!important;
    }
    .v223-home .v250-hero-copy,
    .v280-home .v250-hero-copy{
        max-width:none!important;
        padding:22px 18px 20px!important;
    }
    .v223-home .v250-eyebrow{
        display:inline-block;
        max-width:100%;
        margin-bottom:9px;
        padding:7px 10px;
        border-radius:999px;
        background:#eff8f4;
        border:1px solid #d7e9df;
        font-size:9px!important;
        line-height:1.35!important;
        letter-spacing:.14em!important;
    }
    .v223-home .v223-hero h1,
    .v280-home .v250-hero h1{
        font-size:clamp(40px,11.4vw,50px)!important;
        line-height:.92!important;
        letter-spacing:-.045em!important;
        margin:8px 0 12px!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
    }
    .v223-home .v223-hero h2{
        font-size:18px!important;
        line-height:1.22!important;
        margin:0 0 10px!important;
    }
    .v223-home .v223-hero p{
        font-size:13.5px!important;
        line-height:1.58!important;
        margin:0 0 13px!important;
        color:#596f78!important;
    }
    .v223-home .v223-hero-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
        margin:12px 0 8px!important;
    }
    .v223-home .v223-hero-actions .btn{
        min-width:0!important;
        min-height:42px!important;
        padding:9px 10px!important;
        font-size:10.5px!important;
        line-height:1.25!important;
    }
    .v223-home .v223-text-link{
        grid-column:1/-1;
        text-align:center;
        padding:5px 2px!important;
        font-size:11px!important;
    }
    .v223-home .v250-trust{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:5px 8px!important;
        margin-top:7px!important;
    }
    .v223-home .v250-trust span{
        min-width:0;
        font-size:9px!important;
        line-height:1.3!important;
    }
    .v223-home .v250-hero-art,
    .v280-home .v250-hero-art{display:none!important}

    /* Put useful marketplace numbers immediately after hero. */
    .v223-market-stats{
        grid-template-columns:1fr 1fr!important;
        margin:0!important;
        border-left:0!important;
        border-right:0!important;
        box-shadow:none!important;
    }
    .v223-market-stats a{
        min-height:66px;
        padding:11px 13px!important;
        gap:8px!important;
        border-bottom:1px solid #e7efed;
    }
    .v223-market-stats a:nth-child(2n){border-right:0!important}
    .v223-market-stats strong{font-size:20px!important}
    .v223-market-stats span{font-size:9px!important;line-height:1.25!important}

    /* Lower home modules: tighter but still touch-friendly. */
    .v280-home .v250-servicebar{grid-template-columns:1fr 1fr!important}
    .v280-home .v250-servicebar>div{padding:11px 9px!important;min-height:58px!important}
    .v280-home .v250-servicebar span{font-size:9.5px!important}
    .v250-category-section,.v250-herbs-section,.v250-partner-section,.v250-products,.v250-banner-grid,
    .section.v223-seller-accelerator{margin-left:0!important;margin-right:0!important}

    /* Fixed dock no longer hides page content; active state reads like an app. */
    .mobile-app-dock-v222.mobile-app-dock-v224{
        left:9px!important;
        right:9px!important;
        bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
        min-height:58px;
        padding:5px!important;
        border-radius:18px!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        box-shadow:0 14px 38px rgba(6,37,31,.28)!important;
        border:1px solid rgba(255,255,255,.10);
    }
    .mobile-app-dock-v224 a{
        min-height:48px!important;
        padding:5px 2px!important;
        border-radius:12px!important;
        font-size:8.5px!important;
    }
    .mobile-app-dock-v224 a b{font-size:15px!important}
    .mobile-app-dock-v224 a.active{background:#fff!important;color:#125f50!important}

    .quick-backbar{padding:6px 10px!important;overflow:auto!important;white-space:nowrap}
    .flash{margin:8px 10px!important;padding:10px 12px!important;font-size:12px!important}
}

@media(max-width:430px){
    .locked-global-theme.v224-responsive .site-header.locked-header{padding-left:10px!important;padding-right:10px!important}
    .locked-global-theme.v224-responsive .site-header .brand-image img{width:166px!important;height:44px!important}
    .mobile-head-actions-v224 a{width:40px;height:40px;border-radius:12px}
    .mobile-category-strip-v224 a{font-size:9px;padding-left:2px;padding-right:2px}
    .mobile-category-strip-v224 a b{font-size:12px}
    .v223-home .v250-hero-copy{padding:19px 16px 18px!important}
    .v223-home .v223-hero h1{font-size:clamp(38px,12.2vw,46px)!important}
    .v223-home .v223-hero h2{font-size:16.5px!important}
    .v223-home .v223-hero p{font-size:13px!important}
    .v223-home .v223-hero-actions{grid-template-columns:1fr!important}
    .v223-home .v223-text-link{grid-column:auto}
}

/* ---------------- ADMIN / OWNER PANEL ---------------- */
.admin-mobile-more-v224{display:none}

@media(max-width:820px){
    body.admin-theme.v224-responsive{
        padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
        overflow-x:hidden!important;
        background:#f4f8f8!important;
    }

    /* Compact owner header; desktop command icons move into More drawer. */
    .v221-admin.v224-responsive .admin-topbar{
        position:sticky!important;
        top:0!important;
        z-index:1000!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        height:auto!important;
        min-height:0!important;
        gap:7px!important;
        padding:8px 10px 9px!important;
        background:rgba(255,255,255,.985)!important;
        backdrop-filter:blur(12px);
    }
    .v221-admin.v224-responsive .admin-brand{
        width:max-content;
        max-width:100%;
    }
    .v221-admin.v224-responsive .admin-brand img{
        width:190px!important;
        height:46px!important;
        object-fit:contain!important;
        object-position:left center!important;
    }
    .v221-admin.v224-responsive .admin-brand span{display:none!important}
    .v221-admin.v224-responsive .admin-actions,
    .v221-admin.v224-responsive .admin-profile{display:none!important}
    .v221-admin.v224-responsive .admin-search{
        width:100%!important;
        height:44px!important;
        min-height:44px!important;
        grid-template-columns:32px minmax(0,1fr) 76px!important;
        border-radius:12px!important;
        overflow:hidden!important;
    }
    .v221-admin.v224-responsive .admin-search input{
        min-width:0!important;
        padding:0 4px!important;
        font-size:12.5px!important;
        text-overflow:ellipsis;
    }
    .v221-admin.v224-responsive .admin-search button{
        min-width:76px!important;
        padding:0 10px!important;
        font-size:11.5px!important;
        border-radius:0 11px 11px 0!important;
    }

    /* Two old horizontal navigation systems were the main overflow source. */
    .v221-admin.v224-responsive .v221-modulebar{display:none!important}
    .v221-admin.v224-responsive .v250-admin-nav,
    .v221-admin.v224-responsive .dash-nav:not(.v250-admin-nav){display:none!important}

    .v221-admin.v224-responsive .v250-admin-shell,
    .v221-admin.v224-responsive .dashboard-shell.admin-shell:not(.v250-admin-shell){
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-height:0!important;
        margin:0!important;
        border-radius:0!important;
        overflow:visible!important;
    }
    .v221-admin.v224-responsive .v250-admin-main,
    .v221-admin.v224-responsive .dashboard-shell.admin-shell:not(.v250-admin-shell)>.dash-main,
    .v221-admin.v224-responsive .dash-main{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:10px!important;
    }

    .admin-theme.v224-responsive .flash{
        margin:8px 10px!important;
        padding:10px 12px!important;
        border-radius:12px!important;
        font-size:12px!important;
        line-height:1.45!important;
    }

    /* Update/settings/subpage heroes should read as mobile cards, not squeezed desktop banners. */
    .v221-admin.v224-responsive .dash-hero,
    .v221-admin.v224-responsive .dash-hero.admin,
    .v221-admin.v224-responsive .section-head,
    .v221-admin.v224-responsive .v216-health-hero,
    .v221-admin.v224-responsive .v216-form-head{
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:flex-start!important;
        gap:10px!important;
        width:100%!important;
        padding:18px 16px!important;
        border-radius:18px!important;
    }
    .v221-admin.v224-responsive .dash-hero h1,
    .v221-admin.v224-responsive .section-head h1,
    .v221-admin.v224-responsive .v216-health-hero h1,
    .v221-admin.v224-responsive .v216-form-head h1{
        max-width:100%!important;
        margin:4px 0!important;
        font-size:clamp(27px,8vw,34px)!important;
        line-height:1.03!important;
        letter-spacing:-.035em!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
    }
    .v221-admin.v224-responsive .dash-hero p,
    .v221-admin.v224-responsive .section-head p,
    .v221-admin.v224-responsive .v216-health-hero p,
    .v221-admin.v224-responsive .v216-form-head p{
        font-size:12.5px!important;
        line-height:1.55!important;
    }
    .v221-admin.v224-responsive .version-chip,
    .v221-admin.v224-responsive .v216-version-chip{
        align-self:flex-start!important;
        padding:8px 12px!important;
        font-size:11px!important;
    }

    /* Panels, uploads and tables stay inside viewport. */
    .v221-admin.v224-responsive .panel,
    .v221-admin.v224-responsive .v216-form-card,
    .v221-admin.v224-responsive .settings-group{
        width:100%!important;
        max-width:100%!important;
        padding:15px!important;
        border-radius:16px!important;
        overflow:hidden;
    }
    .v221-admin.v224-responsive .panel h2,
    .v221-admin.v224-responsive .panel h3{font-size:18px!important;line-height:1.25!important}
    .v221-admin.v224-responsive .panel p{font-size:12.5px!important;line-height:1.55!important}
    .v221-admin.v224-responsive .upload-box{
        width:100%;
        padding:14px!important;
        border-radius:13px!important;
        overflow:hidden;
    }
    .v221-admin.v224-responsive .upload-box input[type=file]{
        width:100%!important;
        max-width:100%!important;
        padding:8px!important;
        font-size:11px!important;
    }
    .v221-admin.v224-responsive .check-line{font-size:11.5px!important;line-height:1.45!important}
    .v221-admin.v224-responsive .table-scroll,
    .v221-admin.v224-responsive .table-wrap{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;
    }
    .v221-admin.v224-responsive .admin-table{min-width:620px!important}

    /* Dashboard cards: two-up on normal phones, one-up on narrow screens. */
    .v221-admin.v224-responsive .v250-admin-welcome{
        min-height:0!important;
        padding:18px!important;
        border-radius:17px!important;
    }
    .v221-admin.v224-responsive .v250-admin-welcome h1{font-size:29px!important}
    .v221-admin.v224-responsive .v223-kpis,
    .v221-admin.v224-responsive .v250-kpis{
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }
    .v221-admin.v224-responsive .v223-kpis>a,
    .v221-admin.v224-responsive .v250-kpis>div{
        min-height:94px!important;
        padding:11px!important;
        border-radius:14px!important;
    }
    .v221-admin.v224-responsive .v250-analytics-grid,
    .v221-admin.v224-responsive .v250-ops-grid,
    .v221-admin.v224-responsive .v250-bottom-grid,
    .v221-admin.v224-responsive .v221-tool-grid,
    .v221-admin.v224-responsive .v221-ops-modules{
        grid-template-columns:1fr!important;
    }

    /* Bottom owner dock + complete module drawer. */
    .admin-mobile-dock-v223.admin-mobile-dock-v224{
        position:fixed!important;
        z-index:1400!important;
        left:9px!important;
        right:9px!important;
        bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        gap:3px!important;
        min-height:60px;
        padding:5px!important;
        border-radius:18px!important;
        background:rgba(10,53,62,.97)!important;
        border:1px solid rgba(255,255,255,.09);
        box-shadow:0 14px 40px rgba(6,32,38,.30)!important;
        backdrop-filter:blur(14px);
    }
    .admin-mobile-dock-v224>a,
    .admin-mobile-more-v224>summary{
        min-width:0;
        min-height:48px;
        display:flex!important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        padding:5px 2px!important;
        border-radius:12px;
        color:#edf7f5;
        text-decoration:none;
        font-size:8.5px!important;
        font-weight:850;
        list-style:none;
        cursor:pointer;
    }
    .admin-mobile-more-v224>summary::-webkit-details-marker{display:none}
    .admin-mobile-dock-v224>a b,
    .admin-mobile-more-v224>summary b{font-size:15px;line-height:1}
    .admin-mobile-dock-v224>a.active,
    .admin-mobile-more-v224>summary.active,
    .admin-mobile-more-v224[open]>summary{
        background:#fff!important;
        color:#116353!important;
    }
    .admin-mobile-more-v224{display:block;min-width:0}
    .admin-mobile-drawer-v224{
        position:fixed;
        z-index:1399;
        left:10px;
        right:10px;
        bottom:calc(75px + env(safe-area-inset-bottom,0px));
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
        max-height:min(66vh,520px);
        overflow:auto;
        padding:12px;
        border-radius:18px;
        border:1px solid #d9e7e3;
        background:rgba(255,255,255,.985);
        box-shadow:0 18px 60px rgba(9,40,46,.28);
        backdrop-filter:blur(16px);
    }
    .admin-mobile-drawer-v224>a{
        min-width:0;
        min-height:50px;
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:9px;
        padding:10px 11px;
        border:1px solid #e2ece9;
        border-radius:13px;
        background:#f8fbfa;
        color:#244e55;
        font-size:11px;
        font-weight:850;
    }
    .admin-mobile-drawer-v224>a b{
        width:26px;height:26px;display:grid;place-items:center;
        border-radius:8px;background:#eaf5f0;color:#176a58;font-size:12px;
        flex:0 0 auto;
    }
    .admin-mobile-drawer-head-v224{
        grid-column:1/-1;
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:10px;
        padding:2px 3px 7px;
        border-bottom:1px solid #e7efed;
    }
    .admin-mobile-drawer-head-v224 strong{font-size:14px;color:#153f4b}
    .admin-mobile-drawer-head-v224 small{font-size:9px;color:#78908c}
}

@media(max-width:430px){
    .v221-admin.v224-responsive .admin-brand img{width:174px!important;height:42px!important}
    .v221-admin.v224-responsive .admin-search{grid-template-columns:29px minmax(0,1fr) 68px!important}
    .v221-admin.v224-responsive .admin-search button{min-width:68px!important;font-size:10.5px!important;padding:0 6px!important}
    .v221-admin.v224-responsive .dash-main{padding:8px!important}
    .v221-admin.v224-responsive .v223-kpis,
    .v221-admin.v224-responsive .v250-kpis{grid-template-columns:1fr!important}
    .admin-mobile-drawer-v224{grid-template-columns:1fr 1fr;left:8px;right:8px;padding:10px;gap:6px}
    .admin-mobile-drawer-v224>a{padding:9px 8px;font-size:10px}
}