/* ── Trust bar ─────────────────────────────────────────────────── */
        .smartio-trust-bar{
          background:linear-gradient(135deg,var(--primary,#0d4877) 0%, var(--primary-dark,#092f50) 100%);
          color:#fff;
        }
        .smartio-trust-bar-inner{
          max-width:var(--nav-max,1280px);margin:0 auto;
          display:grid;grid-template-columns:repeat(4,1fr);
          align-items:stretch;
        }
        .smartio-trust-cell{
          display:flex;align-items:center;justify-content:center;gap:8px;
          padding:8px 12px;color:#fff;text-decoration:none;
          font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1.2;
          border-right:1px solid rgba(255,255,255,.12);
          transition:background var(--transition-base,200ms ease);
          white-space:nowrap;
        }
        .smartio-trust-cell:last-child{border-right:none;}
        .smartio-trust-cell:hover{background:rgba(255,255,255,.06);color:#fff;}
        .smartio-trust-cell .smartio-mega-svg{color:var(--teal-1,#7bd0ca);flex-shrink:0;}
        .smartio-trust-cell-label{overflow:hidden;text-overflow:ellipsis;}

        @media (max-width:900px){
          .smartio-trust-bar-inner{grid-template-columns:repeat(2,1fr);}
          .smartio-trust-cell:nth-child(2){border-right:none;}
          .smartio-trust-cell:nth-child(3),.smartio-trust-cell:nth-child(4){border-top:1px solid rgba(255,255,255,.12);}
          .smartio-trust-cell{font-size:11px;padding:5px 8px;}
        }

        /* ── Trust bar popover (Free Delivery / Cash on Delivery) ───────── */
        /* Fixed positioning (not absolute) so JS only needs viewport-relative
           getBoundingClientRect() math — no containing-block/scroll-offset
           guesswork regardless of which template wraps the header. */
        .smartio-tb-popover{
          /* Must clear .top-nav's z-index:200 (sticky header) — otherwise the
             nav bar paints over the popover's top edge (title + arrow). */
          position:fixed;z-index:210;display:none;
          width:280px;max-width:calc(100vw - 24px);
          background:var(--bg-surface,#fff);color:var(--text,#111827);
          border:1px solid var(--border,#e8edf3);border-radius:14px;
          box-shadow:0 16px 40px -10px rgba(13,72,119,.28);
          padding:16px 18px;font-size:13px;line-height:1.55;text-align:left;
        }
        .smartio-tb-popover.is-open{display:block;}
        .smartio-tb-pop-arrow{position:absolute;top:-6px;left:24px;width:12px;height:12px;background:var(--bg-surface,#fff);border-left:1px solid var(--border,#e8edf3);border-top:1px solid var(--border,#e8edf3);transform:rotate(45deg);}
        .smartio-tb-pop-title{display:block;font-family:var(--font-brand,inherit);font-size:14px;font-weight:700;color:var(--primary,#0d4877);margin-bottom:6px;}
        .smartio-tb-pop-body{color:var(--text-mid,#556b85);margin:0 0 10px;}
        .smartio-tb-pop-link{font-weight:700;color:var(--primary,#0d4877);text-decoration:none;font-size:12.5px;}
        .smartio-tb-pop-link:hover{text-decoration:underline;}
        html.theme-dark .smartio-tb-popover{background:#18222f;border-color:#243245;}
        html.theme-dark .smartio-tb-pop-arrow{background:#18222f;border-color:#243245;}
        html.theme-dark .smartio-tb-pop-body{color:#9fb0c4;}
        html.theme-dark .smartio-tb-pop-title{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .smartio-tb-pop-link{color:var(--teal-1,#7bd0ca);}
        @media (max-width:900px){
          .smartio-tb-popover{left:12px !important;right:12px;width:auto;bottom:12px;}
          .smartio-tb-pop-arrow{display:none;}
        }

        /* ── Trust bar modal (Dekwaneh Pickup) ───────────────────────────── */
        .smartio-tb-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;}
        .smartio-tb-modal.is-open{display:flex;}
        .smartio-tb-modal-backdrop{position:absolute;inset:0;background:rgba(13,72,119,.55);backdrop-filter:blur(4px);}
        .smartio-tb-modal-card{position:relative;background:var(--bg-surface,#fff);border-radius:18px;padding:28px;max-width:420px;width:100%;box-shadow:0 20px 60px -10px rgba(0,0,0,.3);max-height:86vh;overflow:auto;}
        .smartio-tb-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:var(--bg,#f4f6f9);color:var(--text-mid,#556b85);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
        .smartio-tb-modal-close:hover{background:var(--border,#e8edf3);color:var(--primary,#0d4877);}
        .smartio-tb-modal-title{font-family:var(--font-brand,inherit);font-size:19px;font-weight:700;color:var(--primary,#0d4877);margin:0 0 12px;padding-right:28px;}
        .smartio-tb-modal-callout{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);border-left:4px solid #22c55e;border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.55;margin-bottom:12px;color:var(--text,#111827);}
        .smartio-tb-modal-body{font-size:13.5px;line-height:1.6;color:var(--text-mid,#556b85);margin:0 0 12px;}
        .smartio-tb-modal-ready{font-size:13px;color:var(--text-mid,#556b85);margin:0 0 14px;}
        .smartio-tb-modal-hours{display:grid;grid-template-columns:1fr auto;border:1px solid var(--border,#e8edf3);border-radius:10px;overflow:hidden;margin-bottom:16px;}
        .smartio-tb-modal-hours .tbh-row{display:contents;}
        .smartio-tb-modal-hours .tbh-row>*{padding:9px 13px;border-bottom:1px solid var(--border,#e8edf3);font-size:13px;margin:0;}
        .smartio-tb-modal-hours .tbh-row:last-child>*{border-bottom:none;}
        .smartio-tb-modal-hours .tbh-row span{color:var(--text-mid,#556b85);background:var(--bg,#f4f6f9);font-weight:600;}
        .smartio-tb-modal-hours .tbh-row strong{text-align:right;color:var(--text,#111827);}
        .smartio-tb-modal-hours .tbh-row.is-closed strong{color:var(--text-soft,#a8b8cc);}
        .smartio-tb-modal-full{display:inline-block;font-weight:700;color:var(--primary,#0d4877);text-decoration:none;font-size:13px;}
        .smartio-tb-modal-full:hover{text-decoration:underline;}
        .smartio-tb-modal-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;background:var(--primary,#0d4877);color:#fff;font-weight:700;font-size:14px;text-decoration:none;margin-bottom:14px;}
        .smartio-tb-modal-cta:hover{background:var(--primary-dark,#092f50);color:#fff;text-decoration:none;}
        .smartio-tb-modal-cta.is-wa{background:#25D366;}
        .smartio-tb-modal-cta.is-wa:hover{background:#128C7E;}
        .smartio-tb-modal-cta svg{flex-shrink:0;}
        html.theme-dark .smartio-tb-modal-card{background:#18222f;}
        html.theme-dark .smartio-tb-modal-title{color:#e9eef5;}
        html.theme-dark .smartio-tb-modal-body,html.theme-dark .smartio-tb-modal-ready{color:#9fb0c4;}
        html.theme-dark .smartio-tb-modal-close{background:#243245;color:#9fb0c4;}
        html.theme-dark .smartio-tb-modal-close:hover{background:#2f3f54;color:#e9eef5;}
        html.theme-dark .smartio-tb-modal-hours{border-color:#243245;}
        html.theme-dark .smartio-tb-modal-hours .tbh-row>*{border-color:#243245;}
        html.theme-dark .smartio-tb-modal-hours .tbh-row span{background:#0f1722;color:#9fb0c4;}
        html.theme-dark .smartio-tb-modal-hours .tbh-row strong{color:#e9eef5;}
        html.theme-dark .smartio-tb-modal-hours .tbh-row.is-closed strong{color:#6e8198;}
        html.theme-dark .smartio-tb-modal-callout{color:#d3e6da;border-color:rgba(34,197,94,.42);}
        html.theme-dark .smartio-tb-modal-full{color:var(--teal-1,#7bd0ca);}
        html.theme-dark .smartio-tb-modal-backdrop{background:rgba(2,10,20,.62);}

        /* ── Nav cat wrapper + mega trigger ────────────────────────────── */
        /* IMPORTANT: nav-cats + nav-cat-wrap are intentionally `position: static`.
           That makes .top-nav (sticky → positioned) the containing block for
           the absolutely-positioned mega panel, which is what gives the panel
           its full-viewport width. The wrap stays the DOM ancestor of the panel,
           so :hover still cascades when the cursor moves into the panel area. */
        .nav-cats{position:static;}
        .nav-cat-wrap{position:static;display:inline-flex;align-items:center;}
        .nav-cat-mega{display:inline-flex;align-items:center;gap:4px;}
        .nav-cat-chev{
          opacity:.6;margin-top:1px;
          transition:transform var(--transition-base,200ms ease),opacity var(--transition-base,200ms ease);
        }
        .nav-cat-wrap.has-mega:hover .nav-cat-chev,
        .nav-cat-wrap.is-open .nav-cat-chev{transform:rotate(180deg);opacity:1;}

        /* Teal underline on hover/open — matches design system accent */
        .nav-cat-mega{position:relative;}
        .nav-cat-mega::after{
          content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
          background:var(--teal-4,#61afcc);border-radius:2px;
          transform:scaleX(0);transform-origin:center;
          transition:transform var(--transition-base,200ms ease);
        }
        .nav-cat-wrap.has-mega:hover .nav-cat-mega::after,
        .nav-cat-wrap.is-open .nav-cat-mega::after,
        .nav-cat-mega:focus-visible::after{transform:scaleX(1);}

        /* Hover bridge: invisible strip below the trigger that fills the gap to
           the mega panel. Without it the cursor crosses ~14px of dead space when
           moving from trigger to panel, momentarily loses :hover on the wrap,
           and the panel starts to hide before the cursor lands. Pseudo lives on
           .nav-cat-mega (which is position:relative) so it anchors to it and
           extends the trigger's hit-test area downward without affecting layout. */
        .nav-cat-wrap.has-mega .nav-cat-mega::before{
          content:"";position:absolute;left:-4px;right:-4px;top:100%;height:22px;
          background:transparent;pointer-events:auto;
        }

        /* Defensive override: functions.php has a global safety net
              body > *, .top-nav, .breadcrumb-bar { overflow-x: clip; }
           that prevents horizontal overflow on weird pages. On desktop, that
           rule turns into `overflow: clip visible` on .top-nav, which (per
           the CSS overflow spec) implicitly clips the cross-axis too and
           kills hit-testing on the panel even though it still PAINTS. We
           need overflow: visible on desktop so the mega panel can receive
           pointer events below the nav. The mobile clip is still desired. */
        @media (min-width:901px){
          .top-nav{overflow:visible !important;}
        }

        /* ── Mega panel ────────────────────────────────────────────────── */
        /* Full-viewport-width panel, positioned relative to .top-nav (sticky).
           Panel left/right edges touch the viewport — content is constrained by
           the inner .smartio-mega-grid which uses the site max-width. */
        .smartio-mega-panel{
          position:absolute;top:100%;left:0;right:0;width:100%;
          background:var(--bg-surface,#fff);
          border-top:1px solid var(--border,#e8edf3);
          border-bottom:1px solid var(--border,#e8edf3);
          box-shadow:0 16px 32px rgba(13,72,119,.10);
          padding:0;  /* padding moved to .smartio-mega-grid */
          z-index:300;
          opacity:0;visibility:hidden;
          /* NB: no `pointer-events` toggling. visibility:hidden already makes
             the panel inert, AND because the visibility transition is delayed
             by 280 ms, the panel stays interactive during the hide animation
             — so the cursor can re-enter it from the trigger and keep it open.
             Toggling pointer-events here would flip instantly and kill that. */
          transform:translateY(-4px);
          /* HIDE transition: 120 ms delay so the cursor has time to bridge the
             gap between the trigger and the panel before we start fading.
             Visibility waits until after the fade so :hover on descendants
             still resolves correctly during the wind-down. */
          transition:
            opacity 160ms ease 120ms,
            transform 160ms ease 120ms,
            visibility 0s linear 280ms;
          user-select:none;
        }
        /* width classes now constrain the GRID, not the panel.
           The panel is always full-width; the grid is centered max-width. */
        .smartio-mega-wide .smartio-mega-grid{max-width:var(--nav-max,1280px);}
        .smartio-mega-narrow .smartio-mega-grid{max-width:1000px;}

        /* Show panel when wrapper hovered / focused / explicitly opened.
           focus-within handles keyboard nav; is-open handles click+touch.
           SHOW transition: no delay — panel appears the moment hover starts. */
        .nav-cat-wrap.has-mega:hover .smartio-mega-panel,
        .nav-cat-wrap.has-mega:focus-within .smartio-mega-panel,
        .nav-cat-wrap.is-open .smartio-mega-panel{
          opacity:1;visibility:visible;
          transform:translateY(0);
          transition:
            opacity 160ms ease 0s,
            transform 160ms ease 0s,
            visibility 0s linear 0s;
        }

        /* Re-hover guard. The panel is a descendant of the wrap and keeps a
           live, hittable box for ~280ms while it fades out (the visibility
           delay above). Without this, sweeping the cursor back UP into the
           area the panel just vacated re-satisfies .nav-cat-wrap:hover and
           reopens the menu — even though the user already left downward.
           On real mouseleave (cursor left trigger + bridge + panel) JS adds
           `mega-hover-off`; that makes the panel ignore the pointer, so the
           only way back in is to re-hover the trigger itself (JS clears the
           class on the trigger's mouseenter). */
        .nav-cat-wrap.mega-hover-off .smartio-mega-panel{
          pointer-events:none !important;
        }

        /* Inner grid — centered max-width container with padding */
        .smartio-mega-grid{
          display:grid;gap:32px;
          margin:0 auto;
          padding:28px var(--nav-pad,32px);
        }
        .smartio-mega-wide .smartio-mega-grid{grid-template-columns:1fr 1.7fr 1fr;}
        .smartio-mega-narrow .smartio-mega-grid{grid-template-columns:1fr 1.4fr;}
        /* Explore has 4 columns — auto-detect by counting children via CSS */
        .smartio-mega-wide .smartio-mega-grid:has(>:nth-child(4)){
          grid-template-columns:repeat(4,1fr);gap:24px;
        }
        /* 5-col variant (Explore with Discover · Brands · Tech · Help) */
        .smartio-mega-wide .smartio-mega-grid:has(>:nth-child(5)){
          grid-template-columns:repeat(5,1fr);gap:20px;
        }

        .smartio-mega-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
        .smartio-mega-heading{
          font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
          color:var(--teal-4,#61afcc);
          margin-bottom:8px;
        }

        /* Link list (categories, link-list type) */
        .smartio-mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
        .smartio-mega-list a{
          display:flex;align-items:center;justify-content:space-between;gap:8px;
          padding:7px 10px;margin:0 -10px;border-radius:var(--radius-md,8px);
          color:var(--text,#111827);font-size:14px;font-weight:500;
          text-decoration:none;
          transition:background var(--transition-base,200ms ease),color var(--transition-base,200ms ease);
        }
        .smartio-mega-list a:hover{background:var(--bg,#f4f6f9);color:var(--primary,#0d4877);}

        /* Badges */
        .smartio-mega-badge{
          font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
          padding:2px 7px;border-radius:var(--radius-pill,9999px);
          background:var(--warning,#f59e0b);color:#fff;
          line-height:1.4;
        }
        .smartio-mega-badge-new{background:var(--teal-3,#6bbac7);}
        .smartio-mega-badge-top,
        .smartio-mega-badge-hot{background:var(--warning,#f59e0b);}

        /* View All link at the bottom of category column */
        .smartio-mega-all,.smartio-mega-more,.smartio-mega-foot{
          margin-top:auto;padding-top:10px;
          font-size:13px;font-weight:600;color:var(--primary,#0d4877);
          text-decoration:none;display:inline-flex;align-items:center;gap:4px;
          transition:color var(--transition-base,200ms ease),gap var(--transition-base,200ms ease);
        }
        .smartio-mega-all:hover,.smartio-mega-more:hover,.smartio-mega-foot:hover{
          color:var(--teal-4,#61afcc);gap:8px;
        }
        .smartio-mega-foot{font-weight:500;color:var(--text-mid,#556b85);}

        /* Featured-products column — multiple sets stacked, only .is-active shown.
           The default set is the first; hovering a left-column category swaps
           in the matching sub-cat set via JS. */
        .smartio-mega-feat-sets{position:relative;}
        .smartio-mega-feat{display:none;flex-direction:column;gap:8px;}
        .smartio-mega-feat.is-active{display:flex;}
        .smartio-mega-feat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
        .smartio-mega-feat-grid.is-active{display:grid;}
        /* In the 2x2 grid (Govee-style 4-product preview) the cards are half
           width — compact the thumbnail + clamp bullets to keep rows even. */
        .smartio-mega-feat-grid .smartio-mega-feat-img{width:72px;height:72px;}
        .smartio-mega-feat-grid .smartio-mega-feat-card{padding:8px;gap:10px;}
        .smartio-mega-feat-grid .smartio-mega-feat-bullets{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
        /* Selected category link in the left column — sticky highlight that
           matches the currently-active featured set. */
        .smartio-mega-list a.is-active{background:var(--bg,#f4f6f9);color:var(--primary,#0d4877);}
        .smartio-mega-list a.is-active .smartio-mega-badge-hot,
        .smartio-mega-list a.is-active .smartio-mega-badge-new,
        .smartio-mega-list a.is-active .smartio-mega-badge-top{box-shadow:0 0 0 2px var(--bg-surface,#fff);}
        .smartio-mega-feat-card{
          display:flex;gap:12px;padding:10px;border-radius:var(--radius-lg,12px);
          background:var(--bg,#f4f6f9);
          text-decoration:none;color:inherit;
          transition:background var(--transition-base,200ms ease),transform var(--transition-base,200ms ease);
          align-items:flex-start;
        }
        .smartio-mega-feat-card:hover{background:var(--border,#e8edf3);}
        .smartio-mega-feat-img{
          flex-shrink:0;width:96px;height:96px;border-radius:var(--radius-md,8px);
          background:var(--bg-surface,#fff);
          display:flex;align-items:center;justify-content:center;overflow:hidden;
        }
        /* --feat-zoom equalises baked-in PNG margins per card (set inline by the
           renderer; content never exceeds 92% of the box, so nothing crops). */
        /* translateY sits BEFORE scale in the list, so the matrix applies it
           AFTER scaling — the correction stays a true on-screen distance and
           is not itself magnified by the zoom. The % resolves against the
           unscaled box, so one value is correct at both 96px and 72px. */
        .smartio-mega-feat-img img{
          width:100%;height:100%;object-fit:contain;
          transform:translateY(calc(var(--feat-shift,0) * var(--feat-zoom,1) * -100%)) scale(var(--feat-zoom,1));
        }
        .smartio-mega-feat-img-placeholder{
          width:32px;height:32px;border-radius:var(--radius-sm,4px);
          background:linear-gradient(135deg,var(--teal-1,#7bd0ca),var(--teal-4,#61afcc));
        }
        .smartio-mega-feat-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
        .smartio-mega-feat-name{
          font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:13px;font-weight:700;color:var(--text,#111827);line-height:1.3;
          overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
        }
        .smartio-mega-feat-bullets{
          list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
          font-size:11px;color:var(--text-mid,#556b85);line-height:1.4;
        }
        .smartio-mega-feat-bullets li{position:relative;padding-left:8px;}
        .smartio-mega-feat-bullets li::before{
          content:"";position:absolute;left:0;top:6px;width:3px;height:3px;border-radius:50%;
          background:var(--text-soft,#a8b8cc);
        }
        .smartio-mega-feat-price{
          font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:12px;font-weight:700;color:var(--primary,#0d4877);margin-top:2px;
        }
        .smartio-mega-feat-price del{color:var(--text-soft,#a8b8cc);font-weight:400;margin-left:4px;font-size:11px;}
        /* "From" prefix on variable products with a price range — muted label, bold price */
        .smartio-mega-feat-price .smartio-price-from{color:var(--text-soft,#a8b8cc);font-weight:400;font-size:11px;}
        /* Trello #24 — out-of-stock chip on featured cards (e.g. Govee E14) */
        .smartio-mega-feat-oos{
          align-self:flex-start;display:inline-block;margin-top:1px;
          font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
          color:var(--text-mid,#556b85);background:var(--border,#e8edf3);
          padding:1px 7px;border-radius:999px;line-height:1.5;
        }

        /* Image tiles (Shop by Room) — 2-col real-photo thumbnails */
        .smartio-mega-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
        .smartio-mega-tile{
          position:relative;aspect-ratio:4/3;border-radius:var(--radius-md,8px);overflow:hidden;
          display:flex;align-items:flex-end;
          padding:10px 12px;color:#fff;text-decoration:none;background:#0f1722;
          transition:transform var(--transition-base,200ms ease),box-shadow var(--transition-base,200ms ease);
        }
        .smartio-mega-tile-img{
          position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          transition:transform 400ms ease;
        }
        .smartio-mega-tile::before{
          content:"";position:absolute;inset:0;
          background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%);
        }
        .smartio-mega-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 4px 16px rgba(13,72,119,.10));}
        .smartio-mega-tile:hover .smartio-mega-tile-img{transform:scale(1.06);}
        .smartio-mega-tile-label{
          position:relative;font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:13px;font-weight:700;letter-spacing:.02em;
          text-shadow:0 1px 6px rgba(0,0,0,.55);
        }
        /* gradient fallback if a tile image is ever missing */
        .smartio-mega-tile-warm   {background:linear-gradient(135deg,#fbcfa3,#d97757);}
        .smartio-mega-tile-magenta{background:linear-gradient(135deg,#c084fc,#7c3aed);}
        .smartio-mega-tile-violet {background:linear-gradient(135deg,#a78bfa,#6d28d9);}
        .smartio-mega-tile-green  {background:linear-gradient(135deg,#86efac,#16a34a);}
        .smartio-mega-tile-navy   {background:linear-gradient(135deg,#3b82f6,#0d4877);}

        /* Brand grid */
        .smartio-mega-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
        .smartio-mega-brand{
          display:flex;align-items:center;justify-content:center;
          padding:14px 10px;border-radius:var(--radius-md,8px);
          background:var(--bg,#f4f6f9);
          border:1px solid var(--border,#e8edf3);
          text-decoration:none;
          transition:all var(--transition-base,200ms ease);
        }
        .smartio-mega-brand:hover{
          background:var(--bg-surface,#fff);
          border-color:var(--teal-4,#61afcc);
          box-shadow:var(--shadow-sm,0 2px 8px rgba(13,72,119,.08));
        }
        .smartio-mega-brand-name{
          font-family:var(--font-brand,'D-DIN Exp',sans-serif);
          font-size:13px;font-weight:700;color:var(--text,#111827);letter-spacing:.02em;
        }
        /* Brand logo variant — a transparent logo image replaces the text label.
           Non-featured chips get a FIXED light plate in every theme (light,
           toggled-dark, and always-dark templates) so a single colour logo is
           always legible — the mega panel has no dark-mode class to swap images
           on the always-dark templates, so we standardise the plate instead. */
        .smartio-mega-brand.has-logo:not(.is-featured){
          height:46px;padding:6px 10px;background:#ffffff;border-color:#e6ebf2;
        }
        html.theme-dark .smartio-mega-brand.has-logo:not(.is-featured){
          background:#ffffff;border-color:#33415a;
        }
        .smartio-mega-brand.has-logo:not(.is-featured):hover{
          background:#ffffff;border-color:var(--teal-4,#61afcc);
        }
        .smartio-mega-brand-logo{
          max-width:86px;width:auto;height:auto;object-fit:contain;display:block;
        }
        /* Per-brand OPTICAL heights: a single height cap makes wordmarks of
           different proportions look unequal (WYZE reads big, Tongou small
           because its arc eats vertical space). These heights equalise the
           visible LETTER size; the fixed 46px tile keeps every chip the same. */
        .smartio-mega-brand-logo.logo-sonoff{height:18px;}
        .smartio-mega-brand-logo.logo-tongou{height:23px;}
        .smartio-mega-brand-logo.logo-wyze{height:15px;}
        .smartio-mega-brand-logo.logo-shelly{height:18px;}
        .smartio-mega-brand-logo.logo-broadlink{height:21px;}
        .smartio-mega-brand-logo.logo-thirdreality{height:19px;max-width:98px;}
        /* Featured card (Govee) — white logo on the navy gradient, above tagline. */
        .smartio-mega-brand.is-featured .smartio-mega-brand-logo{height:22px;max-width:120px;}
        /* Screen-reader-only brand name kept for accessibility behind the logo. */
        .smartio-brand-sr{
          position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
          overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
        }

        /* Featured brand (exclusive distributor) — spans full row, larger,
           branded gradient. Sits at the top of the grid. */
        .smartio-mega-brand.is-featured{
          grid-column:1 / -1;
          flex-direction:column;align-items:flex-start;gap:4px;
          padding:14px 16px;
          background:linear-gradient(135deg,var(--primary,#0d4877),var(--primary-light,#1a6099));
          border-color:transparent;
          box-shadow:var(--shadow-sm,0 2px 8px rgba(13,72,119,.08));
        }
        .smartio-mega-brand.is-featured:hover{
          background:linear-gradient(135deg,var(--primary-light,#1a6099),var(--primary,#0d4877));
          border-color:transparent;
          box-shadow:var(--shadow-md,0 4px 16px rgba(13,72,119,.18));
        }
        .smartio-mega-brand.is-featured .smartio-mega-brand-name{
          color:#fff;font-size:18px;letter-spacing:.02em;
        }
        .smartio-mega-brand-tagline{
          font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
          color:var(--teal-1,#7bd0ca);
        }

        /* ── Tech-grid (Govee technology wordmarks in Explore) ──────────── */
        .smartio-mega-techs{
          display:grid;grid-template-columns:1fr;gap:6px;
        }
        .smartio-mega-tech{
          position:relative;
          display:flex;align-items:center;justify-content:center;
          height:56px;padding:6px 14px;border-radius:var(--radius-md,8px);
          background:#0c1f3a; /* matches the gv-tech-tile background on /govee/ */
          border:1px solid rgba(255,255,255,.05);
          text-decoration:none;
          transition:all var(--transition-base,200ms ease);
        }
        .smartio-mega-tech:hover{
          border-color:rgba(123,208,202,.45);
          transform:translateY(-1px);
          box-shadow:var(--shadow-sm,0 2px 8px rgba(13,72,119,.15));
        }
        .smartio-mega-tech-img{
          max-height:40px;max-width:100%;width:auto;height:auto;
          object-fit:contain;display:block;
          image-rendering:-webkit-optimize-contrast;
        }
        /* Text wordmark chip — used for cross-brand standards with no logo (Matter) */
        .smartio-mega-tech-text{
          color:var(--teal-1,#7bd0ca);font-weight:600;font-size:15px;letter-spacing:.02em;
        }
        .smartio-mega-tech-badge{
          position:absolute;top:5px;right:6px;
          background:var(--teal-1,#7bd0ca);color:#06243f;
          font-size:10px;font-weight:700;line-height:1;letter-spacing:.03em;text-transform:uppercase;
          padding:2px 5px;border-radius:999px;
        }

        /* Icon list (use cases / problems) */
        .smartio-mega-iconlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
        .smartio-mega-iconlist a{
          display:flex;align-items:center;gap:10px;
          padding:8px 10px;margin:0 -10px;border-radius:var(--radius-md,8px);
          color:var(--text,#111827);font-size:13px;font-weight:500;line-height:1.3;
          text-decoration:none;
          transition:background var(--transition-base,200ms ease),color var(--transition-base,200ms ease);
        }
        .smartio-mega-iconlist a:hover{background:var(--bg,#f4f6f9);color:var(--primary,#0d4877);}
        .smartio-mega-iconlist-icon{
          flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-md,8px);
          background:var(--bg,#f4f6f9);color:var(--teal-4,#61afcc);
          display:flex;align-items:center;justify-content:center;
        }
        .smartio-mega-iconlist a:hover .smartio-mega-iconlist-icon{
          background:var(--teal-1,#7bd0ca);color:var(--primary,#0d4877);
        }

        .smartio-mega-empty{
          font-size:13px;color:var(--text-soft,#a8b8cc);padding:24px 0;text-align:center;
        }

        /* Kill the panel the moment the sticky nav hides on scroll, or while
           scrolling with a stationary cursor (mega-suppressed). Without this
           the CSS :hover keeps a full-width panel floating over the page
           after its header has slid away. */
        .top-nav.is-hidden .smartio-mega-panel,
        .top-nav.mega-suppressed .smartio-mega-panel{
          opacity:0!important;visibility:hidden!important;
          transition:none!important;pointer-events:none!important;
        }

        /* Reduced motion: snap, don't slide. */
        @media (prefers-reduced-motion:reduce){
          .smartio-mega-panel,.nav-cat-chev,.nav-cat-mega::after,
          .smartio-mega-list a,.smartio-mega-tile,.smartio-mega-brand,
          .smartio-mega-iconlist a,.smartio-mega-feat-card{
            transition:none!important;
          }
        }

        /* Mobile: panels never show — the drawer takes over. */
        @media (max-width:900px){
          .smartio-mega-panel{display:none!important;}
          .nav-cat-chev{display:none!important;}
        }