/* ==========================================================================
   South Sudan Wholesale 2.7.0 — Master UI, Dark/Light Mode, Product System & RFQ Polish
   ========================================================================== */
:root {
    --tollo-focus: #0d8a70;
    --tollo-panel: #ffffff;
    --tollo-panel-text: #17211d;
    --tollo-subtle: #647067;
    --tollo-surface: #ffffff;
    --tollo-surface-alt: #f5f7f5;
    --tollo-text: #17211d;
    --tollo-text-muted: #5c6b64;
    --tollo-heading: #0a241e;
    --tollo-border: #e4ebe7;
    --tollo-card-shadow: 0 10px 30px rgba(15, 47, 39, 0.06);
    --tollo-lime: #c8ef50;
    --tollo-forest: #123c31;
    --tollo-teal: #18705c;
}

html[data-theme="dark"] {
    --tollo-panel: #14201b;
    --tollo-panel-text: #f2f7f3;
    --tollo-subtle: #b7c6bd;
    --tollo-focus: #c8ef50;
    --tollo-surface: #14201b;
    --tollo-surface-alt: #1a2a24;
    --tollo-text: #e8f0ec;
    --tollo-text-muted: #9eb0a8;
    --tollo-heading: #f4faf7;
    --tollo-border: #23362f;
    --tollo-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   1. RFQ DRAWER & MODALS — Top Stacking & Pristine Usability
   ========================================================================== */
.ag-rfq-drawer-overlay,
.ag-portal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(10, 20, 16, 0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 999999 !important;
    display: none !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.ag-portal-modal-overlay {
    justify-content: center !important;
    align-items: center !important;
}

.ag-rfq-drawer-overlay.active,
.ag-rfq-drawer-overlay.open,
.ag-rfq-drawer-overlay.is-open,
.ag-portal-modal-overlay.active,
.ag-portal-modal-overlay.open,
.ag-portal-modal-overlay.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ag-rfq-drawer {
    position: relative !important;
    z-index: 1000000 !important;
    width: min(560px, 100vw) !important;
    height: 100% !important;
    max-height: 100dvh !important;
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -12px 0 45px rgba(0, 0, 0, 0.28) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.ag-rfq-drawer-overlay.active .ag-rfq-drawer,
.ag-rfq-drawer-overlay.open .ag-rfq-drawer,
.ag-rfq-drawer-overlay.is-open .ag-rfq-drawer {
    transform: translateX(0) !important;
}

.ag-portal-modal-dialog {
    width: min(500px, 92vw) !important;
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    padding: 32px !important;
    position: relative !important;
    z-index: 1000000 !important;
}

.ag-rfq-header,
.ag-portal-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    background: var(--tollo-surface) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    flex-shrink: 0 !important;
}

.ag-rfq-header h3,
.ag-rfq-header h4,
.ag-portal-modal-header h3 {
    color: var(--tollo-heading) !important;
    margin: 0 !important;
}

.ag-rfq-close-btn,
.ag-portal-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: var(--tollo-surface-alt) !important;
    color: var(--tollo-text) !important;
    border: 1px solid var(--tollo-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.ag-rfq-close-btn:hover,
.ag-portal-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: scale(1.06) !important;
}

.ag-rfq-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px !important;
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
}

body.tollo-modal-open {
    overflow: hidden !important;
    touch-action: none !important;
}

/* ==========================================================================
   2. LIGHT / DARK MODE COMPREHENSIVE CONTRAST & VISIBILITY
   ========================================================================== */
body {
    background: var(--tollo-surface-alt) !important;
    color: var(--tollo-text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tollo-heading);
}

p, li, span, td, th {
    color: inherit;
}

/* Generic Section Containers & Cards */
.ag-section,
.ag-page-header,
.ag-content-area {
    color: var(--tollo-text);
}

.ag-page-header {
    background: var(--tollo-forest) !important;
    color: #ffffff !important;
}

.ag-page-header h1,
.ag-page-header h2,
.ag-page-header p,
.ag-page-header .ag-eyebrow {
    color: #ffffff !important;
}

.ag-page-header .ag-eyebrow {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* White Box / Card Overrides across all templates */
.ag-form-card,
.ag-contact-card,
.ag-sidebar-card,
.ag-division-card,
.ag-sector-card,
.ag-resource-card,
.ag-cert-card,
.ag-step-card,
.ag-brand-card,
.ag-product-card,
.ag-filter-panel,
.ag-product-detail-block,
.ag-spec-table-wrap,
.tolo-glass-card {
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border: 1px solid var(--tollo-border) !important;
    box-shadow: var(--tollo-card-shadow) !important;
}

.ag-contact-card h3,
.ag-contact-card h4,
.ag-sidebar-card h3,
.ag-sidebar-card h4,
.ag-form-card h2,
.ag-form-card h3 {
    color: var(--tollo-heading) !important;
}

/* Dark Card Variants */
.ag-card-dark {
    background: var(--tollo-forest) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.ag-card-dark h3,
.ag-card-dark h4,
.ag-card-dark p {
    color: #ffffff !important;
}

/* Forms & Inputs */
input[type="text"]:not(.ag-discovery-input),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"]:not(.ag-discovery-input),
select,
textarea {
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border: 1px solid var(--tollo-border) !important;
    border-radius: var(--ag-radius-sm, 6px) !important;
    padding: 10px 14px !important;
    font: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--tollo-text-muted) !important;
    opacity: 0.8 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--tollo-focus) !important;
    outline: 2px solid var(--tollo-focus) !important;
    outline-offset: 1px !important;
}

label {
    color: var(--tollo-heading) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

/* Tables */
table, .ag-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: var(--tollo-text) !important;
}

table th, table td,
.ag-spec-table th, .ag-spec-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    color: var(--tollo-text) !important;
}

table th, .ag-spec-table th {
    background: var(--tollo-surface-alt) !important;
    color: var(--tollo-heading) !important;
    font-weight: 700 !important;
}

/* Breadcrumbs */
.ag-breadcrumbs-wrapper {
    background: var(--tollo-surface) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
    padding: 12px 0 !important;
}
.ag-breadcrumbs-wrapper a {
    color: var(--tollo-text-muted) !important;
    text-decoration: none !important;
}
.ag-breadcrumbs-wrapper a:hover {
    color: var(--tollo-focus) !important;
}
.ag-breadcrumbs-wrapper span {
    color: var(--tollo-text) !important;
}

/* Products Mega Menu */
.ag-products-mega {
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border: 1px solid var(--tollo-border) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22) !important;
}
.ag-pmega-header h3,
.ag-pmega-header p {
    color: var(--tollo-heading) !important;
}
.ag-pmega-tile {
    color: var(--tollo-heading) !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.ag-pmega-tile:hover {
    background: var(--tollo-surface-alt) !important;
    color: var(--tollo-focus) !important;
}

/* Mobile Drawer */
.ag-mobile-drawer {
    background: var(--tollo-surface) !important;
    color: var(--tollo-text) !important;
    border-right: 1px solid var(--tollo-border) !important;
}
.ag-mobile-drawer-header {
    background: var(--tollo-surface) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}
.ag-mobile-nav-list li a,
.ag-mobile-products-toggle {
    color: var(--tollo-heading) !important;
    border-bottom: 1px solid var(--tollo-border) !important;
}
.ag-mobile-sub li a {
    color: var(--tollo-text) !important;
    background: var(--tollo-surface-alt) !important;
}

/* Badges */
.ag-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
}
.ag-badge-navy {
    background: var(--tollo-forest) !important;
    color: #ffffff !important;
}
.ag-badge-chilled {
    background: #0284c7 !important;
    color: #ffffff !important;
}
.ag-badge-frozen {
    background: #4f46e5 !important;
    color: #ffffff !important;
}
.ag-badge-ambient {
    background: #059669 !important;
    color: #ffffff !important;
}

/* Single Product & Catalog Dynamic Layout */
.ag-single-product-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 450px) 1fr !important;
    gap: 40px !important;
    margin: 40px 0 !important;
}
.ag-product-main-visual {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--tollo-border) !important;
    background: var(--tollo-surface) !important;
}
.ag-product-main-visual img {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    display: block !important;
}
.ag-product-gallery {
    display: flex !important;
    gap: 12px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}
.ag-product-gallery img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--tollo-border) !important;
    cursor: pointer !important;
}

@media (max-width: 860px) {
    .ag-single-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   2. MASTER INPUT ICON & PLACEHOLDER OVERLAP ELIMINATION
   ========================================================================== */
.ag-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.ag-input-wrap .ag-input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.ag-input-wrap .ag-input-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

.ag-input-wrap input,
.ag-lead-form .ag-input-wrap input,
.ag-lead-form-card .ag-input-wrap input,
.ag-form-card .ag-input-wrap input {
    width: 100% !important;
    height: 48px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 44px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    font-family: var(--ag-font-body, inherit) !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.ag-input-wrap input::placeholder,
.ag-lead-form .ag-input-wrap input::placeholder,
.ag-lead-form-card .ag-input-wrap input::placeholder {
    color: #94a3b8 !important;
    font-size: 0.86rem !important;
    opacity: 1 !important;
}

.ag-input-wrap input:focus,
.ag-lead-form .ag-input-wrap input:focus {
    background: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.ag-input-wrap input:focus + .ag-input-icon,
.ag-input-wrap input:focus ~ .ag-input-icon {
    color: #10b981 !important;
}

html[data-theme="dark"] .ag-input-wrap .ag-input-icon {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .ag-input-wrap input,
html[data-theme="dark"] .ag-lead-form .ag-input-wrap input,
html[data-theme="dark"] .ag-lead-form-card .ag-input-wrap input {
    background: #182e25 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding-left: 44px !important;
}

html[data-theme="dark"] .ag-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="dark"] .ag-input-wrap input:focus {
    border-color: #a3e635 !important;
    box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.2) !important;
}

/* ==========================================================================
   3. UNIVERSAL RESPONSIVE AUDIT & VIEWPORT OPTIMIZATIONS
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

.ag-container,
.ag-container-fluid,
.ag-shell {
    width: 100% !important;
    max-width: min(100%, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Tablets and Mobile General (< 860px) */
@media (max-width: 860px) {
    .ag-lform-grid,
    .ag-form-grid-2,
    .ag-grid-2col,
    .ag-form-row-2col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ag-lead-shell {
        grid-template-columns: 1fr !important;
        padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px) !important;
        gap: 32px !important;
    }

    .ag-lead-form-card {
        padding: 22px 18px !important;
    }

    .ag-hero-inner,
    .ag-hero-corporate .ag-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .ag-cpg-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ag-cpg-card--featured .ag-cpg-featured-body {
        flex-direction: column-reverse !important;
        gap: 20px !important;
    }

    .ag-cpg-featured-visual {
        width: 100% !important;
        max-height: 240px !important;
    }

    .ag-cpg-featured-visual img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    .ag-single-product-stage {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .ag-stats-grid,
    .ag-hero-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Mobile Category Filter Horizontal Scroll (< 768px) */
@media (max-width: 768px) {
    .ag-category-filter-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 4px 4px 12px 4px !important;
        scrollbar-width: none !important;
    }

    .ag-category-filter-bar::-webkit-scrollbar {
        display: none !important;
    }

    .ag-category-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }

    .ag-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Small Smartphone Optimizations (< 480px) */
@media (max-width: 480px) {
    .ag-products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ag-stats-grid,
    .ag-hero-stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .ag-sp-quick-specs {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ag-sp-actions-bar {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .ag-sp-actions-bar .ag-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .ag-sp-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ag-lead-points {
        font-size: 0.85rem !important;
    }

    .ag-lead-copy h2 {
        font-size: 1.6rem !important;
    }

    .ag-rfq-drawer {
        width: 100vw !important;
    }

    .ag-portal-modal-dialog {
        width: calc(100vw - 20px) !important;
        margin: 10px !important;
        padding: 20px 16px !important;
    }
}

/* Extra Small Devices (< 360px) */
@media (max-width: 360px) {
    .ag-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ag-lead-copy h2,
    .ag-page-header h1,
    .ag-hero h1 {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }

    .ag-btn {
        padding: 10px 16px !important;
        font-size: 0.84rem !important;
    }

    .ag-whatsapp-fab,
    .ag-rfq-float-btn {
        width: 42px !important;
        height: 42px !important;
        right: 12px !important;
    }

    .ag-rfq-float-btn {
        bottom: 68px !important;
    }

    .ag-whatsapp-fab {
        bottom: 12px !important;
    }
}

/* Mega-Menu Desktop Constraint */
@media (min-width: 1201px) {
    .ag-products-mega {
        width: min(92vw, 860px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 1200px) {
    .ag-products-mega {
        display: none !important;
    }
}

/* ==========================================================================
   4. ADVANCED RESPONSIVE COMPONENT POLISH
   ========================================================================== */
@media (max-width: 860px) {
    .ag-contact-terminal-grid,
    .ag-contact-grid,
    .ag-needs-matcher-grid,
    .ag-faq-desk-grid,
    .ag-depot-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .tolo-quick-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }

    .tolo-quick-chips::-webkit-scrollbar {
        display: none !important;
    }

    .tolo-quick-chip {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.82rem !important;
    }
}

@media (max-width: 480px) {
    .ag-header-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ag-header-actions {
        gap: 6px !important;
    }

    .ag-header-actions .ag-rfq-open-btn {
        padding: 6px 10px !important;
        font-size: 0.76rem !important;
    }

    .ag-brand-logo-img {
        max-height: 32px !important;
        width: auto !important;
    }

    .ag-topbar {
        font-size: 0.72rem !important;
        padding: 6px 0 !important;
    }

    .ag-topbar .ag-container {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center !important;
    }
}

/* Mobile Drawer Scroll & Sizing */
.ag-mobile-drawer {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.ag-mobile-nav-list {
    padding-bottom: 40px !important;
}

/* ==========================================================================
   5. COMPLETE SUBPAGE & COMPONENT RESPONSIVE MATRIX
   ========================================================================== */

/* Word Break and Text Containment */
h1, h2, h3, h4, h5, h6, p, span, strong, a, label {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Subpage Heroes and Banners */
.ag-page-header,
.ag-inner-hero {
    padding: clamp(50px, 8vw, 84px) 0 clamp(32px, 5vw, 54px) !important;
}

.ag-page-header h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
}

/* About Page Overview & Story Grid */
@media (max-width: 991px) {
    .ag-aoverview-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .ag-aoverview-visual-stack {
        max-width: 540px !important;
        margin: 0 auto !important;
    }
    .ag-aov-principals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .ag-aov-principals-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-aoverview-stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .ag-aov-float-badge {
        position: static !important;
        transform: none !important;
        margin-top: 12px !important;
        width: 100% !important;
    }
}

/* Divisions & Sectors Grid */
.ag-divisions-grid,
.ag-sectors-grid,
.ag-resources-grid,
.ag-certs-grid,
.ag-team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

@media (max-width: 768px) {
    .ag-divisions-grid,
    .ag-sectors-grid,
    .ag-resources-grid,
    .ag-certs-grid,
    .ag-team-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .ag-sector-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 18px !important;
    }
}

/* Sourcing Supply Chain Steps & Coverage Map */
.ag-sourcing-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 860px) {
    .ag-sourcing-steps-grid {
        grid-template-columns: 1fr !important;
    }
    .ag-coverage-regions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .ag-coverage-regions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Onboarding & Application Form Layouts */
@media (max-width: 900px) {
    .ag-onboard-layout,
    .ag-contact-layout {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .ag-benefits-sidebar {
        order: 2 !important;
    }
    .ag-enterprise-form {
        order: 1 !important;
    }
}

/* Global Footer CTA Bar & Navigation */
@media (max-width: 900px) {
    .ag-footer-cta-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .ag-footer-cta-btns {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .ag-footer-cta-btns .ag-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .ag-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px 24px !important;
    }
}

@media (max-width: 600px) {
    .ag-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .ag-footer-bottom .ag-container {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
}

/* Touch Device Target Optimization */
button, 
a.ag-btn,
.ag-category-pill,
.tolo-quick-chip,
.ag-tab-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   6. MASTER INTERACTIVE STAGES RESPONSIVE OVERRIDES
   ========================================================================== */

/* 1. Category Atmosphere Switcher (Hero Split) */
@media (max-width: 768px) {
    .ag-hero-switcher-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 24px !important;
    }
    .ag-switcher-label {
        font-size: 0.76rem !important;
    }
    .ag-switcher-pills {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        border-radius: 16px !important;
        gap: 6px !important;
        padding: 6px !important;
    }
    .ag-switch-pill {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        font-size: 0.84rem !important;
    }
    .ag-pill-badge {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
        flex-shrink: 0 !important;
    }
    .ag-split-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .ag-hero-main-title {
        font-size: clamp(1.7rem, 5.5vw, 2.3rem) !important;
        line-height: 1.2 !important;
    }
    .ag-hero-stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }
}

/* 2. Divisions Interactive Engine (Operational Divisions) */
@media (max-width: 991px) {
    .ag-divisions-engine-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ag-division-nav-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ag-div-trigger {
        width: 100% !important;
        padding: 14px 16px !important;
    }
    .ag-div-trigger.is-active {
        transform: none !important;
    }
    .ag-division-master-viewport {
        min-height: auto !important;
    }
    .ag-viewport-panel {
        min-height: auto !important;
    }
    .ag-viewport-panel.is-active {
        min-height: auto !important;
    }
    .ag-viewport-content {
        padding: 28px 20px !important;
    }
    .ag-viewport-meta {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 600px) {
    .ag-division-nav-stack {
        grid-template-columns: 1fr !important;
    }
    .ag-viewport-meta {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .ag-viewport-content {
        padding: 20px 16px !important;
    }
    .ag-div-trigger-text strong {
        font-size: 0.88rem !important;
    }
    .ag-div-trigger-text span {
        font-size: 0.76rem !important;
    }
}

/* 3. Knowledge Desk / FAQ Interactive Desk */
.ag-kanswer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.ag-kanswer-list li {
    display: block !important;
    position: relative !important;
    padding-left: 28px !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: var(--tollo-text, #334155) !important;
}

.ag-kanswer-list li .ag-check-mark {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--tollo-focus, #18705C) !important;
    font-weight: 800 !important;
    display: inline-block !important;
}

.ag-kanswer-list li strong {
    display: inline !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
}

.ag-knowledge-filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    .ag-knowledge-desk-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ag-knowledge-questions-pane {
        width: 100% !important;
    }
    .ag-knowledge-answers-pane,
    .ag-knowledge-answer-stage {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .ag-knowledge-filter-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 8px !important;
        padding-right: 16px !important;
    }
    .ag-knowledge-filter-pills::-webkit-scrollbar {
        display: none !important;
    }
    .ag-kfilter-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }
    .ag-kquestion-item {
        padding: 12px 14px !important;
    }
    .ag-kquestion-text strong {
        font-size: 0.88rem !important;
    }
    .ag-kquestion-text small {
        font-size: 0.76rem !important;
    }
    .ag-kanswer-panel {
        padding: 20px 16px !important;
    }
}

/* 4. Regional Logistics Explorer / Depot Finder */
@media (max-width: 991px) {
    .ag-logistics-explorer-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .ag-logistics-node-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ag-hub-node {
        width: 100% !important;
        padding: 14px 16px !important;
    }
    .ag-hub-node.is-active {
        transform: none !important;
    }
}

@media (max-width: 600px) {
    .ag-logistics-node-stack {
        grid-template-columns: 1fr !important;
    }
    .ag-hub-metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .ag-hmetric-card {
        padding: 10px 12px !important;
    }
    .ag-hmetric-card strong {
        font-size: 0.8rem !important;
    }
    .ag-hub-panel-body {
        padding: 18px 14px !important;
    }
    .ag-hub-detail {
        font-size: 0.84rem !important;
    }
}

@media (max-width: 380px) {
    .ag-hub-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5. Needs Matcher Interactive Quiz */
@media (max-width: 768px) {
    .tolo-matcher-shell {
        padding: 24px 18px !important;
    }
    .tolo-matcher-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .tolo-match-opt {
        width: 100% !important;
        padding: 14px !important;
    }
}

/* 6. Floating Action Buttons (Safe Mobile Offset) */
@media (max-width: 768px) {
    body {
        padding-bottom: 24px !important;
    }
    .ag-whatsapp-fab {
        width: 48px !important;
        height: 48px !important;
        bottom: 16px !important;
        right: 16px !important;
        z-index: 9999 !important;
    }
    .ag-rfq-float-btn {
        width: 48px !important;
        height: 48px !important;
        bottom: 78px !important;
        right: 16px !important;
        z-index: 9999 !important;
    }
}

/* 7. Brand Agency Interactive Panel & Constellation Stage */
@media (max-width: 991px) {
    .ag-constellation-grid,
    .ag-constellation-side-grid,
    .ag-agency-cards-grid,
    .ag-apanel-telemetry-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .ag-agency-tabs-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
    }
    .ag-agency-tabs-bar::-webkit-scrollbar {
        display: none !important;
    }
    .ag-agency-tab-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* 8. Contact Channels 4-Card Grid */
.ag-channels-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 600px) {
    .ag-channels-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 9. Bento Grids & CPG Badges */
@media (max-width: 900px) {
    .ag-bento-grid,
    .ag-cpg-bento-grid,
    .ag-proof-grid,
    .ag-pmk-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .ag-bento-split {
        grid-template-columns: 1fr !important;
    }
    .ag-bento-split-visual {
        width: 100% !important;
        min-height: 200px !important;
        max-height: 240px !important;
    }
    .ag-bento-split-visual img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }
    .ag-cpg-meta-grid,
    .ag-cpg-badges-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .ag-cpg-meta-grid,
    .ag-cpg-badges-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 10. Product Card Specs Row & Single Product Quick Specs */
@media (max-width: 600px) {
    .ag-pcard-specs {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .ag-sp-quick-specs {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 11. Universal Section Headers & Spacing Clamping */
.ag-section {
    padding: clamp(40px, 6vw, 84px) 0 !important;
}

.ag-section-header {
    margin-bottom: clamp(24px, 4vw, 44px) !important;
}

.ag-section-header h2 {
    font-size: clamp(1.6rem, 3.8vw, 2.4rem) !important;
    line-height: 1.25 !important;
}

.ag-section-header p {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    line-height: 1.65 !important;
}

/* 12. Subpage Cards, Sourcing Steps, and Process Timelines */
@media (max-width: 768px) {
    .ag-divisions-grid-section [style*="grid-template-columns"],
    .site-main section [style*="grid-template-columns: repeat(auto-fit, minmax(340px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Sourcing Supply Chain alternating steps */
    .site-main div[style*="display: flex; gap: 24px; background: var(--tollo-surface)"] {
        flex-direction: column !important;
        text-align: left !important;
        padding: 20px 16px !important;
        gap: 12px !important;
    }
    .site-main div[style*="display: flex; gap: 24px; background: var(--tollo-surface)"] > div {
        text-align: left !important;
    }

    /* Account Setup 3-step cards on customer/partner pages */
    .site-main section div[style*="grid-template-columns: repeat(auto-fit, minmax(260px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Sector articles on page-sectors.php */
    .site-main article[id="retail"],
    .site-main article[id="horeca"],
    .site-main article[id="restaurants"],
    .site-main article[id="facilities"],
    .site-main article[id="wholesalers"],
    .site-main article[id="institutions"] {
        width: 100% !important;
    }

    .site-main article div[style*="padding: 32px;"] {
        padding: 20px 16px !important;
    }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE OVERHAUL v2 — MOBILE-ONLY, DESKTOP SAFE
   All rules are explicitly scoped to mobile/tablet breakpoints.
   Desktop (>1200px) layout is PRESERVED AS-IS.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────
   FIX A: NAVIGATION — Desktop nav button never clipped
   The "Open B2B Account" button was being cut off on 1024-1280px laptops.
──────────────────────────────────────────────────────────────────── */
.ag-site-header .ag-header-container {
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

.ag-header-actions {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

/* Nav B2B button: shrink text size on medium laptops so it stays visible */
@media (max-width: 1280px) and (min-width: 1025px) {
    .ag-header-actions .ag-btn-accent,
    .ag-header-actions .ag-btn-outline,
    .ag-header-actions .ag-rfq-open-btn {
        font-size: 0.82rem !important;
        padding: 9px 14px !important;
    }
    .ag-main-nav {
        gap: 4px !important;
    }
    .ag-main-nav .ag-nav-link {
        font-size: 0.88rem !important;
        padding: 8px 10px !important;
    }
}

/* Hamburger: always visible on mobile, never hidden behind other elements */
@media (max-width: 1200px) {
    .ag-hamburger {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        z-index: 10000 !important;
        position: relative !important;
        padding: 10px 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ag-main-nav {
        display: none !important;
    }
}

/* Mobile drawer: always in front of everything */
.ag-mobile-drawer {
    z-index: 99999 !important;
}

.ag-mobile-drawer.open {
    right: 0 !important;
}

/* Mobile drawer overlay backdrop */
.ag-drawer-overlay {
    z-index: 99998 !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX B: About Page Principals Grid — PREVENT VERTICAL TEXT ON MOBILE
   Desktop (5 columns via navigation-fix.css) is NOT touched.
   Only mobile/tablet breakpoints are added.
──────────────────────────────────────────────────────────────────── */

/* Between 640px and 1100px: clamp to 2 or 3 columns */
@media (max-width: 1100px) and (min-width: 641px) {
    .ag-aov-principals-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) and (min-width: 641px) {
    .ag-aov-principals-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Single column on phones: override any existing rule */
@media (max-width: 640px) {
    .ag-aov-principals-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Each principal card: must have min-width:0 to prevent content overflow */
.ag-aov-pcard {
    min-width: 0 !important;
}

/* Card text must wrap horizontally, never vertically */
.ag-aov-pname,
.ag-aov-pdesc,
.ag-aov-pflag,
.ag-aov-pcountry {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX C: FAQ Knowledge Desk — prevent question/answer text overflow
──────────────────────────────────────────────────────────────────── */
.ag-kquestion-item {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.ag-kquestion-icon {
    flex-shrink: 0 !important;
}

.ag-kquestion-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.ag-kquestion-text strong,
.ag-kquestion-text small {
    display: block !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.ag-kquestion-arrow {
    flex-shrink: 0 !important;
}

/* Answer stage: contain content without clipping it visually */
.ag-knowledge-answer-stage {
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: visible !important; /* Was overflow:hidden — now visible so nothing is clipped */
}

.ag-kanswer-panel,
.ag-kanswer-body,
.ag-kanswer-list {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
}

.ag-kanswer-body p,
.ag-kanswer-list li {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* FAQ answer footer buttons: wrap on mobile only */
@media (max-width: 600px) {
    .ag-kanswer-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .ag-kanswer-footer .ag-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

@media (max-width: 400px) {
    .ag-kanswer-footer {
        flex-direction: column !important;
    }
    .ag-kanswer-footer .ag-btn {
        width: 100% !important;
    }
}

/* Disable translateX on question items that causes overflow on mobile */
@media (max-width: 991px) {
    .ag-kquestion-item:hover,
    .ag-kquestion-item.is-active {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX D: Product Catalog Category Pills — prevent clip on right edge
──────────────────────────────────────────────────────────────────── */
.ag-category-filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 4px 16px 12px 4px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-category-filter-bar::-webkit-scrollbar {
    display: none !important;
}

.ag-category-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX E: Category Atmosphere Switcher — mobile only stacking
──────────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    .ag-switcher-pills {
        flex-direction: column !important;
        width: 100% !important;
    }
    .ag-switch-pill {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

.ag-pill-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX F: Global overflow containment — contained correctly
──────────────────────────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Images and media always fluid — desktop safe */
img, video, canvas, iframe {
    max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX G: Lead form section — ensure content never clips
   Was causing the "Request commercial consultation" empty section issue
──────────────────────────────────────────────────────────────────── */
.ag-lead-form,
.ag-lform-section,
.ag-lead-shell {
    overflow: visible !important;
    position: relative !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX H: Knowledge concierge — mobile only block button
──────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ag-knowledge-concierge .ag-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX I: Section headers with flex between — wrap on mobile
──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ag-knowledge-head,
    .ag-logistics-head,
    .ag-section-header.ag-flex-between {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .ag-knowledge-sla-badge {
        flex-shrink: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX J: Product search bar — icon never overlaps input text
──────────────────────────────────────────────────────────────────── */
.ag-discovery-search-box {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.ag-discovery-input {
    width: 100% !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.ag-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
}

.ag-search-clear-btn {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX K: RFQ Drawer — viewport safe on all screens
──────────────────────────────────────────────────────────────────── */
#ag-rfq-drawer,
.ag-rfq-drawer {
    max-width: min(440px, 100vw) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

@media (max-width: 480px) {
    #ag-rfq-drawer,
    .ag-rfq-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX L: Contact page channels grid — mobile-first, expand on tablet+
──────────────────────────────────────────────────────────────────── */
@media (max-width: 859px) {
    .ag-contact-terminal-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 860px) {
    .ag-contact-terminal-grid {
        grid-template-columns: 1fr 1.5fr !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX M: Buttons — accessible sizes on very small screens
──────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .ag-btn {
        font-size: 0.82rem !important;
        padding: 10px 14px !important;
    }
    .ag-btn-sm {
        font-size: 0.78rem !important;
        padding: 7px 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FIX N: Odoo Portal Modal — always fits viewport
──────────────────────────────────────────────────────────────────── */
.ag-portal-modal,
.ag-portal-modal-dialog {
    max-width: min(540px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX O: Ultra-small screen typography scaling
──────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    h1 { font-size: clamp(1.35rem, 7vw, 1.7rem) !important; }
    h2 { font-size: clamp(1.2rem, 6vw, 1.5rem) !important; }
    h3 { font-size: clamp(1rem, 5vw, 1.25rem) !important; }
    .ag-eyebrow { font-size: 0.7rem !important; }
    .ag-badge { font-size: 0.68rem !important; padding: 2px 7px !important; }
}



/* ==========================================================================
   COMPREHENSIVE UI POLISH, LIGHT MODE FIX & FULL RESPONSIVE AUDIT v3
   ========================================================================== */

/* ─── LIGHT MODE: Privacy / consent text in lead form ─── */
.ag-lform-privacy,
.ag-lform-privacy small,
.ag-lform-privacy p {
    color: var(--tollo-text-muted, #64748B) !important;
    opacity: 1 !important;
}
[data-theme="dark"] .ag-lform-privacy,
[data-theme="dark"] .ag-lform-privacy small {
    color: rgba(255,255,255,0.6) !important;
}

/* ─── LIGHT MODE: Form inputs readable in both modes ─── */
.ag-lform-input, .ag-lead-input, .ag-input,
input[type="text"], input[type="email"],
input[type="tel"], input[type="number"],
input[type="search"], textarea, select {
    color: var(--tollo-heading, #0C1B2A) !important;
    background-color: var(--tollo-surface, #FFFFFF) !important;
    border-color: var(--tollo-border, #D1C9B8) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--tollo-text-muted, #94A3B8) !important;
    opacity: 1 !important;
}

/* ─── CATEGORY FILTER: Wrap instead of horizontal scroll ─── */
.ag-category-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px 6px !important;
    padding: 0 0 12px 0 !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: unset !important;
}
.ag-category-filter-bar::-webkit-scrollbar { display: none !important; }
.ag-category-pill {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 100px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1.5px solid var(--tollo-border, #D1C9B8) !important;
    background: var(--tollo-surface, #FFFFFF) !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}
.ag-category-pill.is-active, .ag-category-pill:hover {
    background: var(--tollo-focus, #18705C) !important;
    color: #FFFFFF !important;
    border-color: var(--tollo-focus, #18705C) !important;
}
@media (max-width: 600px) {
    .ag-category-pill {
        font-size: 0.8rem !important;
        padding: 7px 12px !important;
    }
}

/* ─── AGENCY TABS BAR ─── */
.ag-agency-tabs-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
}
@media (max-width: 640px) {
    .ag-agency-tabs-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .ag-agency-tabs-bar::-webkit-scrollbar { display: none !important; }
    .ag-agency-tabs-bar .ag-agency-tab { flex-shrink: 0 !important; }
}

/* ─── CONTAINER PADDING ─── */
.ag-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
    box-sizing: border-box !important;
}

/* ─── KNOWLEDGE ANSWER STAGE ─── */
.ag-knowledge-answer-stage {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
}
.ag-kanswer-panel, .ag-kanswer-body, .ag-kanswer-list {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
}
.ag-kanswer-body p, .ag-kanswer-list li, .ag-kanswer-body strong {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}
.ag-kanswer-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
}
@media (max-width: 480px) {
    .ag-knowledge-answer-stage { padding: 20px 16px !important; }
    .ag-kanswer-footer { flex-direction: column !important; }
    .ag-kanswer-footer .ag-btn { width: 100% !important; justify-content: center !important; }
}

/* ─── ABOUT VISUAL STACK ─── */
.ag-aoverview-visual-stack {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.ag-aoverview-visual-stack img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 16px !important;
    object-fit: cover !important;
}
@media (max-width: 640px) {
    .ag-aoverview-visual-stack {
        max-width: calc(100vw - 32px) !important;
        margin: 0 auto !important;
    }
    .ag-aov-float-badge,
    .ag-aov-float-top,
    .ag-aov-float-bottom {
        position: static !important;
        transform: none !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
}

/* ─── ABOUT OVERVIEW SECTION ─── */
.ag-about-overview-section { overflow: visible !important; }
@media (max-width: 991px) {
    .ag-aoverview-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ─── PRINCIPALS CARD: mobile padding reduction ─── */
@media (max-width: 640px) {
    .ag-aov-pcard {
        padding: 18px 16px !important;
    }
    .ag-aov-pcard-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .ag-aov-pname { font-size: 1rem !important; }
    .ag-aov-pdesc { font-size: 0.83rem !important; }
}

/* ─── FAQ QUESTION ITEMS ─── */
.ag-kquestion-item {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
}
.ag-kquestion-icon { flex-shrink: 0 !important; }
.ag-kquestion-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.ag-kquestion-text strong, .ag-kquestion-text small {
    display: block !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}
.ag-kquestion-arrow { flex-shrink: 0 !important; }
@media (max-width: 991px) {
    .ag-kquestion-item:hover, .ag-kquestion-item.is-active {
        transform: none !important;
    }
}

/* ─── PRODUCT SEARCH: no icon/text overlap ─── */
.ag-discovery-search-box {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}
.ag-discovery-input {
    width: 100% !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.ag-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.ag-search-clear-btn {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

/* ─── NAVIGATION ─── */
@media (max-width: 1200px) {
    .ag-hamburger {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        z-index: 10000 !important;
        position: relative !important;
        min-width: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
    }
    .ag-main-nav { display: none !important; }
}
.ag-header-actions { flex-shrink: 0 !important; flex-wrap: nowrap !important; }
.ag-mobile-drawer { z-index: 99999 !important; }

/* ─── LEAD FORM VISIBLE ─── */
.ag-lead-form, .ag-lform-section, .ag-lead-shell { overflow: visible !important; }

/* ─── GLOBAL OVERFLOW ─── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img, video, canvas { max-width: 100% !important; }

/* ─── RFQ DRAWER ─── */
#ag-rfq-drawer, .ag-rfq-drawer {
    max-width: min(440px, 100vw) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
@media (max-width: 480px) {
    #ag-rfq-drawer, .ag-rfq-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* ─── MODAL ─── */
.ag-portal-modal, .ag-portal-modal-dialog {
    max-width: min(540px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ─── BUTTONS: minimum sizes ─── */
@media (max-width: 400px) {
    .ag-btn { font-size: 0.82rem !important; padding: 10px 14px !important; }
    .ag-btn-sm { font-size: 0.78rem !important; padding: 7px 12px !important; }
}

/* ─── CONTACT TERMINAL GRID ─── */
@media (max-width: 859px) { .ag-contact-terminal-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 860px) { .ag-contact-terminal-grid { grid-template-columns: 1fr 1.5fr !important; } }

/* ─── KNOWLEDGE SECTION HEADER ─── */
@media (max-width: 768px) {
    .ag-knowledge-head, .ag-logistics-head, .ag-section-header.ag-flex-between {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
}

/* ─── ATMOSPHERE SWITCHER (mobile only) ─── */
@media (max-width: 479px) {
    .ag-switcher-pills { flex-direction: column !important; width: 100% !important; }
    .ag-switch-pill { width: 100% !important; justify-content: space-between !important; }
}
.ag-pill-badge { flex-shrink: 0 !important; white-space: nowrap !important; }

/* ─── ULTRA-SMALL TYPOGRAPHY ─── */
@media (max-width: 360px) {
    h1 { font-size: clamp(1.35rem, 7vw, 1.7rem) !important; }
    h2 { font-size: clamp(1.2rem, 6vw, 1.5rem) !important; }
    h3 { font-size: clamp(1rem, 5vw, 1.25rem) !important; }
    .ag-eyebrow { font-size: 0.7rem !important; }
}

/* ==========================================================================
   KNOWLEDGE DESK & ALL DUAL-PANE INTERACTIVE SECTIONS MASTERCLASS OVERHAUL
   Complete responsive, visual, layout, and contrast architecture across all viewports
   ========================================================================== */

/* ─── 1. KNOWLEDGE DESK SECTION ROOT & CONTAINER ─── */
.ag-knowledge-desk-section {
    padding: clamp(48px, 6vw, 96px) 0 !important;
    position: relative !important;
    overflow: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ─── 2. KNOWLEDGE DESK HEADER & SLA LIVE BADGE ─── */
.ag-knowledge-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: clamp(24px, 4vw, 40px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-knowledge-head > div:first-child {
    flex: 1 1 300px !important;
    min-width: 0 !important;
}

.ag-knowledge-sla-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: clamp(0.74rem, 1.8vw, 0.82rem) !important;
    font-weight: 700 !important;
    color: var(--tollo-focus, #18705C) !important;
    background: rgba(24, 112, 92, 0.08) !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

.ag-live-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
    flex-shrink: 0 !important;
}

/* ─── 3. DUAL-PANE DESK GRID LAYOUT (MOBILE-FIRST) ─── */
.ag-knowledge-desk-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .ag-knowledge-desk-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
        gap: clamp(20px, 3vw, 36px) !important;
    }
}


/* ─── 4. QUESTIONS PANE & FILTER PILLS ─── */
.ag-knowledge-questions-pane {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.ag-knowledge-filter-pills {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-kfilter-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--tollo-border, #E1DBCF) !important;
    background: var(--tollo-surface-alt, #F8F6F0) !important;
    font-family: inherit !important;
    font-size: clamp(0.76rem, 2vw, 0.82rem) !important;
    font-weight: 700 !important;
    color: var(--tollo-text-muted, #64748B) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.ag-kfilter-pill:hover {
    color: var(--tollo-heading, #0C1B2A) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

.ag-kfilter-pill.is-active {
    background: var(--tollo-heading, #0C1B2A) !important;
    color: #FFFFFF !important;
    border-color: var(--tollo-heading, #0C1B2A) !important;
}

/* ─── 5. QUESTION LIST & QUESTION ITEMS ─── */
.ag-knowledge-question-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.ag-kquestion-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: clamp(12px, 2vw, 15px) clamp(14px, 2.5vw, 18px) !important;
    background: var(--tollo-surface, #FFFFFF) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    border-radius: var(--ag-radius-lg, 14px) !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: all 0.22s ease !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.ag-kquestion-item:hover {
    border-color: var(--tollo-focus, #18705C) !important;
    box-shadow: 0 4px 14px rgba(12, 27, 42, 0.05) !important;
}

.ag-kquestion-item.is-active {
    background: var(--tollo-surface-alt, #F4F1EA) !important;
    border-color: var(--tollo-focus, #18705C) !important;
    box-shadow: 0 6px 18px rgba(24, 112, 92, 0.12) !important;
}

@media (min-width: 992px) {
    .ag-kquestion-item:hover {
        transform: translateX(4px) !important;
    }
    .ag-kquestion-item.is-active {
        transform: translateX(6px) !important;
    }
}

@media (max-width: 991px) {
    .ag-kquestion-item,
    .ag-kquestion-item:hover,
    .ag-kquestion-item.is-active {
        transform: none !important;
    }
}

.ag-kquestion-icon {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tollo-focus, #18705C) !important;
}

.ag-kquestion-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.ag-kquestion-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.ag-kquestion-text strong {
    font-size: clamp(0.84rem, 2.2vw, 0.92rem) !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    display: block !important;
}

.ag-kquestion-text small {
    font-size: clamp(0.72rem, 1.8vw, 0.78rem) !important;
    color: var(--tollo-text-muted, #64748B) !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    display: block !important;
}

.ag-kquestion-arrow {
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
    color: var(--tollo-focus, #18705C) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* ─── 6. ANSWER VIEWPORT STAGE ─── */
.ag-knowledge-answer-stage {
    background: var(--tollo-surface-alt, #F8F6F0) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    border-radius: var(--ag-radius-xl, 24px) !important;
    padding: clamp(20px, 3.5vw, 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 30px rgba(12, 27, 42, 0.05) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.ag-kanswer-panel {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.ag-kanswer-badge {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.ag-kanswer-badge .ag-badge {
    flex-shrink: 0 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
}

.ag-read-time {
    font-size: 0.74rem !important;
    color: var(--tollo-text-muted, #64748B) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.ag-kanswer-title {
    font-size: clamp(1.15rem, 3.2vw, 1.55rem) !important;
    font-weight: 800 !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.ag-kanswer-body {
    width: 100% !important;
    min-width: 0 !important;
}

.ag-kanswer-body p {
    font-size: clamp(0.88rem, 2.2vw, 0.95rem) !important;
    line-height: 1.65 !important;
    color: var(--tollo-text, #334155) !important;
    margin-bottom: 16px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.ag-kanswer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.ag-kanswer-list li {
    display: block !important;
    position: relative !important;
    padding-left: 28px !important;
    font-size: clamp(0.82rem, 2.2vw, 0.88rem) !important;
    line-height: 1.6 !important;
    color: var(--tollo-text, #334155) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-kanswer-list li .ag-check-mark {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--tollo-focus, #18705C) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.ag-kanswer-footer {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.ag-kanswer-footer .ag-btn {
    flex: 0 1 auto !important;
    padding: 10px 18px !important;
    font-size: clamp(0.78rem, 2vw, 0.88rem) !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .ag-kanswer-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ag-kanswer-footer .ag-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ─── 7. CONCIERGE SUPPORT CARD ─── */
.ag-knowledge-concierge {
    background: #FFFFFF !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    border-radius: var(--ag-radius-lg, 16px) !important;
    padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 22px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-concierge-icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tollo-focus, #18705C) !important;
}

.ag-concierge-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

.ag-concierge-copy {
    flex: 1 1 200px !important;
    min-width: 0 !important;
}

.ag-concierge-copy strong {
    display: block !important;
    font-size: clamp(0.82rem, 2vw, 0.88rem) !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
}

.ag-concierge-copy span {
    display: block !important;
    font-size: clamp(0.72rem, 1.8vw, 0.78rem) !important;
    color: var(--tollo-text-muted, #64748B) !important;
    line-height: 1.4 !important;
}

.ag-btn-whatsapp {
    flex-shrink: 0 !important;
    background: #25D366 !important;
    color: #FFFFFF !important;
    border-color: #25D366 !important;
}

@media (max-width: 640px) {
    .ag-knowledge-concierge {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
    }
    .ag-knowledge-concierge .ag-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ─── 8. KNOWLEDGE DESK DARK THEME CONTRAST ─── */
[data-theme="dark"] .ag-knowledge-desk-section {
    background: var(--tollo-bg, #0B1C17) !important;
}
[data-theme="dark"] .ag-kquestion-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .ag-kquestion-item:hover,
[data-theme="dark"] .ag-kquestion-item.is-active {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}
[data-theme="dark"] .ag-kquestion-text strong {
    color: #FFFFFF !important;
}
[data-theme="dark"] .ag-kquestion-text small {
    color: rgba(255, 255, 255, 0.6) !important;
}
[data-theme="dark"] .ag-kfilter-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
[data-theme="dark"] .ag-kfilter-pill.is-active {
    background: var(--tollo-lime, #C8EF50) !important;
    color: #0C1B2A !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}
[data-theme="dark"] .ag-knowledge-answer-stage {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .ag-kanswer-title {
    color: #FFFFFF !important;
}
[data-theme="dark"] .ag-kanswer-body p,
[data-theme="dark"] .ag-kanswer-list li {
    color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="dark"] .ag-knowledge-concierge {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .ag-concierge-copy strong {
    color: #FFFFFF !important;
}
[data-theme="dark"] .ag-concierge-copy span {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ─── 9. REGIONAL LOGISTICS EXPLORER RESPONSIVE HARMONY (MOBILE-FIRST) ─── */
.ag-logistics-explorer-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-logistics-node-stack {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ag-logistics-hub-viewport {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .ag-logistics-explorer-layout {
        grid-template-columns: 1fr 1.8fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 991px) {
    .ag-hub-node {
        width: 100% !important;
        padding: 14px 16px !important;
        transform: none !important;
    }
    .ag-hub-node:hover,
    .ag-hub-node.is-active {
        transform: none !important;
    }
    .ag-hub-panel-body {
        padding: 20px 16px !important;
    }
    .ag-hub-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .ag-hub-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ─── 10. DIVISIONS INTERACTIVE ENGINE RESPONSIVE HARMONY (MOBILE-FIRST) ─── */
.ag-divisions-engine-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ag-division-nav-stack {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ag-division-master-viewport {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .ag-divisions-engine-layout {
        grid-template-columns: 1fr 1.6fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 991px) {
    .ag-div-trigger {
        width: 100% !important;
        padding: 14px 16px !important;
        transform: none !important;
    }
    .ag-div-trigger:hover,
    .ag-div-trigger.is-active {
        transform: none !important;
    }
    .ag-viewport-meta {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .ag-viewport-content {
        padding: 20px 16px !important;
    }
    .ag-viewport-panel,
    .ag-viewport-panel.is-active {
        min-height: auto !important;
    }
}

/* ─── 10B. MOBILE HEADER ACTIONS & PROMINENT HAMBURGER ─── */
@media (max-width: 991px) {
    .ag-header-actions .ag-btn-outline {
        display: none !important;
    }
    .ag-header-actions .ag-rfq-open-btn {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }
    .ag-hamburger {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        z-index: 10000 !important;
        position: relative !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        margin-left: 6px !important;
        cursor: pointer !important;
    }
}

@media (max-width: 480px) {
    .ag-header-actions .ag-rfq-open-btn {
        display: none !important;
    }
}


/* ─── 11. ABOUT PAGE VISUAL STACK & OVERVIEW MASTERCLASS OVERHAUL ─── */

/* Desktop Base */
.ag-aoverview-visual-stack {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.ag-aov-glow-orb {
    position: absolute !important;
    width: 320px !important;
    height: 320px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(24, 112, 92, 0.2) 0%, transparent 70%) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    filter: blur(40px) !important;
    z-index: 1 !important;
}

[data-theme="dark"] .ag-aov-glow-orb {
    background: radial-gradient(circle, rgba(200, 239, 80, 0.18) 0%, transparent 70%) !important;
}

.ag-aov-main-frame {
    position: relative !important;
    width: 100% !important;
    height: clamp(320px, 42vw, 480px) !important;
    border-radius: var(--ag-radius-lg, 20px) !important;
    overflow: hidden !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    box-shadow: 0 20px 50px rgba(12, 27, 42, 0.12) !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.ag-aov-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-aov-main-frame:hover .ag-aov-hero-img {
    transform: scale(1.04) !important;
}

.ag-aov-frame-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 55%, rgba(12, 27, 42, 0.45) 100%) !important;
    pointer-events: none !important;
}

/* Floating badges on desktop */
.ag-aov-float-badge {
    position: absolute !important;
    background: var(--tollo-surface, #FFFFFF) !important;
    border: 1px solid var(--tollo-border, #E1DBCF) !important;
    border-radius: var(--ag-radius-md, 14px) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 12px 32px rgba(12, 27, 42, 0.14) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 3 !important;
    transition: transform 0.3s ease !important;
    box-sizing: border-box !important;
    max-width: 290px !important;
}

.ag-aov-float-badge:hover {
    transform: translateY(-4px) !important;
}

.ag-aov-float-top {
    top: 24px !important;
    left: -16px !important;
}

.ag-aov-float-bottom {
    bottom: 24px !important;
    right: -16px !important;
}

.ag-afloat-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(24, 112, 92, 0.12) !important;
    color: var(--tollo-focus, #18705C) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ag-afloat-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

[data-theme="dark"] .ag-afloat-icon {
    background: rgba(200, 239, 80, 0.15) !important;
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-afloat-copy strong {
    display: block !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #0C1B2A) !important;
    line-height: 1.25 !important;
}

.ag-afloat-copy span {
    display: block !important;
    font-size: 0.74rem !important;
    color: var(--tollo-text-muted, #64748B) !important;
    line-height: 1.35 !important;
}

/* Tablet (641px - 991px): Float badges stay safely within bounds */
@media (max-width: 991px) and (min-width: 641px) {
    .ag-aoverview-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .ag-aoverview-visual-stack {
        max-width: 540px !important;
        width: 100% !important;
    }
    .ag-aov-main-frame {
        height: clamp(280px, 45vw, 380px) !important;
    }
    .ag-aov-float-top {
        top: 14px !important;
        left: 14px !important;
    }
    .ag-aov-float-bottom {
        bottom: 14px !important;
        right: 14px !important;
    }
    .ag-aov-float-badge {
        padding: 10px 14px !important;
        max-width: calc(100% - 28px) !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* Mobile Phones (<=640px): Stacks cleanly without overlapping */
@media (max-width: 640px) {
    .ag-aoverview-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: 100% !important;
    }
    .ag-aoverview-visual-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: static !important;
    }
    .ag-aov-glow-orb {
        display: none !important;
    }
    .ag-aov-main-frame {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        min-height: 200px !important;
        max-height: 300px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 2px !important;
    }
    .ag-aov-float-badge {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: var(--tollo-surface-alt, #F8F6F0) !important;
        border: 1px solid var(--tollo-border, #E1DBCF) !important;
        box-shadow: 0 4px 12px rgba(12, 27, 42, 0.05) !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    .ag-aov-float-badge:hover {
        transform: none !important;
    }
    .ag-afloat-icon {
        width: 32px !important;
        height: 32px !important;
    }
    .ag-afloat-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .ag-afloat-copy strong {
        font-size: 0.84rem !important;
    }
    .ag-afloat-copy span {
        font-size: 0.72rem !important;
    }
    .ag-aoverview-stats-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 14px 0 !important;
    }
    .ag-aov-stat-num {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    }
    .ag-aov-stat-lbl {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 420px) {
    .ag-aoverview-stats-row {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
    }
    .ag-aov-stat-num {
        font-size: 1.35rem !important;
    }
    .ag-aov-stat-lbl {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
    }
}

/* Dark theme support for About Overview Stack */
[data-theme="dark"] .ag-aov-float-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .ag-afloat-copy strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .ag-afloat-copy span {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ─── 12. FOOTER LEGAL LINKS & COMPLIANCE STYLING ─── */
.ag-footer-legal-links {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ag-footer-legal-links p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: var(--tollo-text-muted, #94A3B8) !important;
}

.ag-footer-divider {
    color: var(--tollo-text-muted, #64748B) !important;
    font-size: 0.85rem !important;
}

.ag-footer-legal-link {
    font-size: 0.85rem !important;
    color: var(--tollo-text-muted, #94A3B8) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ag-footer-legal-link:hover {
    color: var(--tollo-lime, #C8EF50) !important;
    text-decoration: underline !important;
}

@media (max-width: 640px) {
    .ag-footer-legal-links {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    .ag-footer-divider {
        display: none !important;
    }
}

/* ==========================================================================
   FLOATING ACTION BUTTONS (WHATSAPP & RFQ) STRICT ANTI-OVERLAP ARCHITECTURE
   Guarantees clean, non-colliding vertical stacking across all resolutions & devices
   ========================================================================== */

/* 1. Desktop & Large Screens (> 768px) */
#ag-whatsapp-fab.ag-whatsapp-fab,
.ag-whatsapp-fab {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

#ag-rfq-trigger.ag-rfq-float-btn,
.ag-rfq-float-btn {
    position: fixed !important;
    right: 28px !important;
    bottom: 102px !important; /* 28px + 58px + 16px gap = 102px */
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    z-index: 9989 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* 2. Tablet & Mobile Landscape (<= 768px) */
@media (max-width: 768px) {
    #ag-whatsapp-fab.ag-whatsapp-fab,
    .ag-whatsapp-fab {
        right: 18px !important;
        bottom: 18px !important;
        width: 50px !important;
        height: 50px !important;
    }

    #ag-rfq-trigger.ag-rfq-float-btn,
    .ag-rfq-float-btn {
        right: 18px !important;
        bottom: 80px !important; /* 18px + 50px + 12px gap = 80px */
        width: 50px !important;
        height: 50px !important;
    }
}

/* 3. Small Mobile (<= 480px) */
@media (max-width: 480px) {
    #ag-whatsapp-fab.ag-whatsapp-fab,
    .ag-whatsapp-fab {
        right: 14px !important;
        bottom: 14px !important;
        width: 46px !important;
        height: 46px !important;
    }

    #ag-rfq-trigger.ag-rfq-float-btn,
    .ag-rfq-float-btn {
        right: 14px !important;
        bottom: 72px !important; /* 14px + 46px + 12px gap = 72px */
        width: 46px !important;
        height: 46px !important;
    }
}

/* 4. Ultra-compact (< 360px) */
@media (max-width: 360px) {
    #ag-whatsapp-fab.ag-whatsapp-fab,
    .ag-whatsapp-fab {
        right: 10px !important;
        bottom: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    #ag-rfq-trigger.ag-rfq-float-btn,
    .ag-rfq-float-btn {
        right: 10px !important;
        bottom: 62px !important; /* 10px + 42px + 10px gap = 62px */
        width: 42px !important;
        height: 42px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURED MANUFACTURER PRINCIPALS V2 (Creative Redesign)
───────────────────────────────────────────────────────────────────────────── */
.ag-principals-header-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.ag-principals-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(24, 112, 92, 0.1) !important;
    color: var(--tollo-focus, #18705C) !important;
    border: 1px solid rgba(24, 112, 92, 0.2) !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .ag-principals-count-badge {
    background: rgba(200, 239, 80, 0.12) !important;
    color: var(--tollo-lime, #C8EF50) !important;
    border-color: rgba(200, 239, 80, 0.25) !important;
}

.ag-principals-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 26px !important;
    margin-top: 28px !important;
    align-items: stretch !important;
}

.ag-pcard-v2 {
    background: var(--tollo-surface, #FFFFFF) !important;
    border: 1px solid var(--tollo-border, rgba(16, 43, 35, 0.12)) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 26px rgba(12, 27, 42, 0.06) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
    position: relative !important;
}

[data-theme="dark"] .ag-pcard-v2 {
    background: linear-gradient(145deg, #102B23 0%, #0D1D18 100%) !important;
    border-color: rgba(200, 239, 80, 0.15) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32) !important;
}

.ag-pcard-v2:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 22px 50px rgba(16, 43, 35, 0.16) !important;
    border-color: var(--tollo-focus, #18705C) !important;
}

[data-theme="dark"] .ag-pcard-v2:hover {
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--tollo-lime, #C8EF50) !important;
}

.ag-pcard-media {
    position: relative !important;
    width: 100% !important;
    height: 185px !important;
    overflow: hidden !important;
    background: #0C1B2A !important;
}

.ag-pcard-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ag-pcard-v2:hover .ag-pcard-img {
    transform: scale(1.08) !important;
}

.ag-pcard-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(12, 27, 42, 0.15) 0%, rgba(12, 27, 42, 0.65) 100%) !important;
    pointer-events: none !important;
}

.ag-pcard-floating-top {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 2 !important;
    gap: 8px !important;
}

.ag-pcard-origin-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    color: #0C1B2A !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] .ag-pcard-origin-badge {
    background: rgba(16, 43, 35, 0.92) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ag-badge-temp {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(8px) !important;
}

.ag-badge-temp-freeze {
    background: rgba(14, 116, 144, 0.92) !important;
    color: #E0F2FE !important;
    border: 1px solid rgba(186, 230, 253, 0.4) !important;
}

.ag-badge-temp-chilled {
    background: rgba(24, 112, 92, 0.92) !important;
    color: #D1FAE5 !important;
    border: 1px solid rgba(167, 243, 208, 0.4) !important;
}

.ag-badge-temp-ambient {
    background: rgba(180, 83, 9, 0.92) !important;
    color: #FEF3C7 !important;
    border: 1px solid rgba(253, 230, 138, 0.4) !important;
}

.ag-badge-temp-sanitation {
    background: rgba(79, 70, 229, 0.92) !important;
    color: #EDE9FE !important;
    border: 1px solid rgba(221, 214, 254, 0.4) !important;
}

.ag-pcard-body {
    padding: 22px 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ag-pcard-vertical-tag {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--tollo-focus, #18705C) !important;
    margin-bottom: 6px !important;
}

[data-theme="dark"] .ag-pcard-vertical-tag {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-pcard-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--tollo-heading, #102B23) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

[data-theme="dark"] .ag-pcard-title {
    color: #FFFFFF !important;
}

.ag-pcard-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--tollo-text-muted, #4A5568) !important;
    margin: 0 0 18px 0 !important;
    flex: 1 !important;
}

[data-theme="dark"] .ag-pcard-desc {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ag-pcard-specs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    background: var(--tollo-surface-alt, #F8F9FA) !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--tollo-border, rgba(16, 43, 35, 0.08)) !important;
    margin-bottom: 6px !important;
}

[data-theme="dark"] .ag-pcard-specs-grid {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.ag-pspec-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.ag-pspec-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--tollo-text-muted, #718096) !important;
}

[data-theme="dark"] .ag-pspec-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.ag-pspec-val {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #102B23) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[data-theme="dark"] .ag-pspec-val {
    color: #FFFFFF !important;
}

.ag-pcard-footer {
    padding: 14px 24px !important;
    background: var(--tollo-surface-alt, #F3F4F6) !important;
    border-top: 1px solid var(--tollo-border, rgba(16, 43, 35, 0.08)) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

[data-theme="dark"] .ag-pcard-footer {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.ag-pcard-compliance {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--tollo-heading, #102B23) !important;
}

[data-theme="dark"] .ag-pcard-compliance {
    color: rgba(255, 255, 255, 0.9) !important;
}

.ag-pcard-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--tollo-focus, #18705C) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

[data-theme="dark"] .ag-pcard-link {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-pcard-link:hover {
    transform: translateX(3px) !important;
}

@media (max-width: 768px) {
    .ag-principals-grid-v2 {
        grid-template-columns: 1fr !important;
    }
}

/* END OF COMPLETION.CSS v6 */






/* ==========================================================================
   HOMEPAGE DIRECT WHOLESALE INQUIRY & DARK COMPONENT CONTRAST FIX
   Ensures headings, paragraphs, and list items are vibrant and high-contrast
   across all themes in both Light and Dark modes.
   ========================================================================== */
.ag-lead-section .ag-lead-shell,
.ag-lead-shell {
    background: #0b2820 !important;
    border: 1px solid rgba(200, 239, 80, 0.25) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy h2,
.ag-lead-shell .ag-lead-copy h2,
.ag-lead-copy h2 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy .ag-eyebrow,
.ag-lead-shell .ag-lead-copy .ag-eyebrow {
    color: var(--tollo-lime, #C8EF50) !important;
    background: rgba(200, 239, 80, 0.14) !important;
    border: 1px solid rgba(200, 239, 80, 0.35) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy p,
.ag-lead-shell .ag-lead-copy p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-points span,
.ag-lead-shell .ag-lead-points span {
    color: #E2F899 !important;
}

.ag-footer-cta-text h3,
.ag-footer-cta-strip h3 {
    color: #FFFFFF !important;
}

.ag-footer-cta-text p,
.ag-footer-cta-strip p {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* ==========================================================================
   UNIVERSAL DARK CONTAINER CONTRAST SHIELD (LIGHT & DARK MODES)
   Guarantees 100% bright white text, crisp contrast, and legible headings
   on all dark cards, banners, strips, and interactive panels.
   ========================================================================== */

/* 1. Lead & Inquiry Section */
.ag-lead-section .ag-lead-shell,
.ag-lead-shell {
    background: #0b2820 !important;
    border: 1px solid rgba(200, 239, 80, 0.25) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy h2,
.ag-lead-shell .ag-lead-copy h2,
.ag-lead-copy h2,
.ag-lead-shell h2 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy .ag-eyebrow,
.ag-lead-shell .ag-lead-copy .ag-eyebrow {
    color: var(--tollo-lime, #C8EF50) !important;
    background: rgba(200, 239, 80, 0.14) !important;
    border: 1px solid rgba(200, 239, 80, 0.35) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-copy p,
.ag-lead-shell .ag-lead-copy p,
.ag-lead-shell p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.ag-lead-section .ag-lead-shell .ag-lead-points span,
.ag-lead-shell .ag-lead-points span {
    color: #E2F899 !important;
}

/* 2. Who We Serve: Dark Split Bento Cards */
.ag-bento-card--large.ag-bento-split,
.ag-bento-split,
.ag-bento-card--large {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.ag-bento-split .ag-bento-title,
.ag-bento-split h2,
.ag-bento-split h3,
.ag-bento-split h4,
.ag-bento-card--large h3,
.ag-bento-card--large .ag-bento-title {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.ag-bento-split .ag-bento-desc,
.ag-bento-split p,
.ag-bento-card--large p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.ag-bento-split .ag-bento-highlights li,
.ag-bento-card--large .ag-bento-highlights li {
    color: rgba(255, 255, 255, 0.92) !important;
}

.ag-bento-split .ag-bento-highlights li span svg,
.ag-bento-card--large .ag-bento-highlights li span svg {
    color: var(--tollo-lime, #C8EF50) !important;
    stroke: var(--tollo-lime, #C8EF50) !important;
}

/* 3. Footer CTA Strip & Footer Elements */
.ag-footer-cta-strip {
    background: linear-gradient(135deg, #0B1914 0%, #122820 100%) !important;
}

.ag-footer-cta-text h3,
.ag-footer-cta-strip h3,
.ag-footer-cta-strip h2 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.ag-footer-cta-text p,
.ag-footer-cta-strip p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.ag-footer-cta-kicker {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-footer-main h4,
.ag-footer-main h3,
.ag-footer-col h4 {
    color: #FFFFFF !important;
}

.ag-footer-main p,
.ag-footer-about {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ag-footer-links a,
.ag-footer-contact-item span,
.ag-footer-contact-item a {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 4. Subpage Headers & Inner Banners */
.ag-page-header,
.ag-inner-hero {
    background: linear-gradient(120deg, #0f3329 0%, #185c49 100%) !important;
}

.ag-page-header h1,
.ag-page-header h2,
.ag-inner-hero h1,
.ag-inner-hero h2 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.ag-page-header p,
.ag-inner-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.ag-page-header .ag-eyebrow,
.ag-inner-hero .ag-eyebrow {
    color: var(--tollo-lime, #C8EF50) !important;
    background: rgba(200, 239, 80, 0.15) !important;
    border: 1px solid rgba(200, 239, 80, 0.35) !important;
}

/* 5. Metrics & Operational Strips */
.ag-trust-strip,
.ag-div-metrics-strip,
.ag-hero-trust-metrics {
    background: #0B1914 !important;
}

.ag-div-metrics-strip h2,
.ag-div-metrics-strip h3,
.ag-div-metrics-strip strong,
.ag-div-metrics-strip span {
    color: #FFFFFF !important;
}

.ag-trust-metric .ag-metric-num {
    color: var(--tollo-lime, #C8EF50) !important;
}

.ag-trust-metric .ag-metric-lbl {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 6. Division CTA Boxes & Panels */
.ag-cta-box,
.ag-division-cta,
.ag-agency-panel,
.ag-aov-inquiry-panel,
.tolo-matcher-panel {
    background: linear-gradient(135deg, #102B23 0%, #0C1B2A 100%) !important;
}

.ag-cta-box h2,
.ag-cta-box h3,
.ag-division-cta h2,
.ag-division-cta h3,
.ag-agency-panel h2,
.ag-agency-panel h3,
.ag-aov-inquiry-panel h2,
.ag-aov-inquiry-panel h3,
.tolo-matcher-panel h2,
.tolo-matcher-panel h3 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.ag-cta-box p,
.ag-division-cta p,
.ag-agency-panel p,
.ag-aov-inquiry-panel p,
.tolo-matcher-panel p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 7. Topbar */
.ag-topbar {
    background: #07100D !important;
}

.ag-topbar span,
.ag-topbar a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ag-topbar strong {
    color: #FFFFFF !important;
}