/* Top-level nav category labels — never wrap to a second line.
       Scoped tightly to the trigger labels so the rule does NOT cascade into
       .smartio-mega-panel descendants (which need normal wrapping for product
       titles, descriptions, etc.). */
    .nav-cats, .nav-cat { white-space: nowrap; }
    /* Defensive reset: anything inside the mega panel wraps normally. */
    .smartio-mega-panel, .smartio-mega-panel * { white-space: normal; }

    /* Nav category spacing — slightly tighter so they fit one line */
    .nav-cat { font-size: 13.5px; padding: 6px 10px; }

    /* Cart badge — smaller and more refined */
    .cart-badge, .fkcart-count {
      min-width: 16px; height: 16px; font-size: 9px;
      padding: 0 5px;
      background: var(--primary, #0d4877);
      box-shadow: 0 0 0 2px var(--bg-surface, #fff);
    }

    /* Hide cart badge when count is 0 (extra safety beyond inline style) */
    .fkcart-count:empty, .fkcart-count[data-count="0"] { display: none !important; }

    /* Bundle card dark mode — improve contrast */
    html.theme-dark .bundle-card,
    @media (prefers-color-scheme: dark) {
      html:not(.theme-light) .bundle-card {
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.12);
      }
      html:not(.theme-light) .bundle-card.active {
        background: rgba(123,208,202,0.12);
        border-color: var(--teal-1, #7bd0ca);
      }
      html:not(.theme-light) .bundle-desc,
      html:not(.theme-light) .bundle-inc-row { color: rgba(255,255,255,0.7); }
      html:not(.theme-light) .bundle-title { color: #fff; }
    }
    html.theme-dark .bundle-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
    html.theme-dark .bundle-card.active { background: rgba(123,208,202,0.12); border-color: var(--teal-1, #7bd0ca); }
    html.theme-dark .bundle-desc, html.theme-dark .bundle-inc-row { color: rgba(255,255,255,0.7); }
    html.theme-dark .bundle-title { color: #fff; }

    /* No global smooth-scroll — native browser scrolling is faster on desktop. */
    html { scroll-behavior: auto; }

    /* ── Theme mode flag — global override for all child-theme pages ───────
       html.theme-light  → force light vars (overrides prefers-color-scheme: dark)
       html.theme-dark   → force dark vars (overrides prefers-color-scheme: light)
       No class         → respects user's OS preference via prefers-color-scheme
       ─────────────────────────────────────────────────────────────────────── */
    html.theme-light {
      --bg: #f4f6f9 !important;
      --bg-surface: #ffffff !important;
      --text: #111827 !important;
      --text-mid: #556b85 !important;
      --text-soft: #a8b8cc !important;
      --border: #e8edf3 !important;
      --border-subtle: #d0d9e4 !important;
      color-scheme: light !important;
    }
    html.theme-dark {
      --bg: #0f1722 !important;
      --bg-surface: #18222f !important;
      --text: #e9eef5 !important;
      --text-mid: #9fb0c4 !important;
      --text-soft: #6e8198 !important;
      --border: #243245 !important;
      color-scheme: dark !important;
    }

    /* Better focus styles for keyboard accessibility */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
      outline: 2px solid var(--teal-1, #7bd0ca);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Disabled button visual */
    button:disabled { opacity: 0.6; cursor: not-allowed; }

    /* FiboSearch results dropdown — make it match brand */
    .dgwt-wcas-search-input { font-family: inherit !important; }
    .dgwt-wcas-suggestions-wrapp { border-radius: 12px !important; box-shadow: 0 12px 30px -8px rgba(13,72,119,.24) !important; }
    .dgwt-wcas-search-form { transition: box-shadow 200ms; }

    /* FunnelKit slide-in cart — ensure it matches brand on mobile */
    .fkcart-modal { font-family: inherit !important; }
    .fkcart-primary-button { background: var(--primary, #0d4877) !important; }

    /* Floating action button (whatsapp) on mobile shouldn't overlap content */
    @media (max-width: 768px) {
      body { padding-bottom: 70px; }
      .footer { padding-bottom: 50px; }
    }

    /* Better mobile nav drawer (when present) */
    @media (max-width: 768px) {
      .nav-cats { display: none; }
      .nav-search { min-width: 0; flex: 1; }
      /* 16px minimum — anything smaller makes iOS Safari zoom onto the input on focus. */
      .nav-search .dgwt-wcas-search-input { min-width: 0; font-size: 16px; padding: 8px 12px; }
      .nav-inner { gap: 10px; padding: 0 16px; }
      .nav-signin { padding: 7px 14px; font-size: 12px; }
    }

    /* Product card mobile — tighten */
    @media (max-width: 768px) {
      /* aspect-ratio 1/1 is set in archive-product.php — don't force a fixed height */
      .product-card .card-img { aspect-ratio: 1/1 !important; height: auto !important; }
      .product-card .card-img img { width: 96% !important; height: 96% !important; }
      .product-card .card-body { padding: 12px !important; gap: 3px !important; }
      .product-card .card-name { font-size: 13px !important; line-height: 1.25 !important; }
      .product-card .card-price { font-size: 16px !important; }
      .product-card .card-ask { padding: 5px 9px !important; font-size: 10px !important; }
      .product-grid { gap: 10px !important; }
      .filter-bar { padding: 8px 12px !important; }
      /* Don't horizontal-scroll filter pills — wrap to multiple rows instead.
         Horizontal scroll clips absolute-positioned dropdowns (the menu opens
         below a pill but gets cut off because overflow:auto creates a clip). */
      .filter-bar-in { flex-wrap: wrap !important; overflow: visible !important; padding-bottom: 0; }
      .filter-pill, .filter-link, .toggle-pill { font-size: 11px !important; padding: 6px 10px !important; }
    }

    /* Better announce-bar on narrow mobile — smaller text */
    @media (max-width: 480px) {
      .announce-bar { font-size: 11px !important; padding: 7px 12px !important; }
    }

    /* Card hover — disable on touch devices */
    @media (hover: none) {
      .product-card:hover, .bundle-card:hover, .value-card:hover, .bnd:hover {
        transform: none !important; box-shadow: var(--shadow-sm, 0 2px 8px rgba(13,72,119,.08)) !important;
      }
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Print styles — strip background colors for print */
    @media print {
      .top-nav, .footer, .announce-bar, .fkcart-modal, [class*="floating"], .nav-cart-wrap, .smartio-theme-toggle { display: none !important; }
      body { background: white !important; color: black !important; }
    }