/* PHP-only menu / mobile / RTL helpers — do not import into Next.js */ /* Decorative UI icons (site.css lacks h-[26px] arbitrary sizes) */ .ui-icon { display: inline-block; flex-shrink: 0; max-width: none; vertical-align: middle; } .ui-icon-lg { width: 26px; height: 26px; } .ui-icon-md { width: 22px; height: 22px; } .ui-icon-btn { width: 17px; height: 17px; } .ui-icon-sm { width: 15px; height: 15px; } .ui-icon-xs { width: 14px; height: 14px; } [data-menu][data-open="true"] > [data-menu-panel], [data-menu-panel][data-open="true"], .mega-group[data-open="true"] .shop-panel { visibility: visible; opacity: 1; translate: 0 0; } /* Keep product-card pills to one short line */ .spec-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* —— Mobile compatibility —— */ /* Scrollable mobile nav (fixed under 64px bar) */ [data-mobile-panel][data-open="true"], [data-mobile-panel]:not(.hidden) { display: block; } @media (max-width: 1023px) { [data-mobile-panel] { position: fixed; inset-inline: 0; top: 4rem; /* 64px header bar */ bottom: 0; z-index: 45; max-height: calc(100dvh - 4rem); max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); } } body.mobile-nav-open { overflow: hidden; touch-action: none; } /* Compare dock: leave room + home indicator */ body.has-compare-dock main, body.has-compare-dock .site-footer { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)); } body.has-compare-dock .home-fab { bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); } #compare-dock { z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px); } #compare-dock [data-compare-list] { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0.15rem; } #compare-dock .js-compare-remove { display: grid; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; place-items: center; border: 1px solid var(--cisco-line); background: #fff; font-size: 1.25rem; line-height: 1; color: #525252; } /* iOS: avoid auto-zoom on focus (<16px) */ .field, input.field, textarea.field, select.field, [data-mobile-panel] input[type="search"], #top-product-search { font-size: 16px; } @media (min-width: 768px) { .field, input.field, textarea.field, select.field { font-size: 0.875rem; } } /* RTL: dir is on in PHP layout */ html[dir="rtl"] body { font-family: var(--font-source-sans, "Source Sans 3"), Tahoma, sans-serif; } /* Hero arrows: hide on very narrow screens (dots remain) */ @media (max-width: 479px) { [data-hero-prev], [data-hero-next] { display: none; } } /* Home FAB safe area */ .home-fab { inset-inline-end: 1.25rem; bottom: max(1.5rem, env(safe-area-inset-bottom)); right: auto; } html[dir="ltr"] .home-fab { right: 1.25rem; left: auto; inset-inline-end: auto; } /* News / long titles */ .section h1, .content-container h1 { overflow-wrap: anywhere; text-wrap: balance; }