AAA Guardian Pro

/* ========================================================= ICON SLIDER WRAPPER Controls overall width and overflow ========================================================= */ .pdp-icon-slider-wrapper { position: relative; width: 45vw !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden !important; height: 100%; /* Ensure wrapper takes full height of parent */ } .pdp-icon-slider { position: relative; overflow: hidden; /* Hide any content that overflows */ padding: 0 40px !important; box-sizing: border-box; /* Include padding in height calculation */ width: 100% !important; max-width: 100% !important; margin: 0 !important; left: 0 !important; } /* ========================================================= ICON SLIDER CONTAINER ========================================================= */ .pdp-icons-list { display: flex; /* For slider behaviour: no wrapping */ flex-wrap: nowrap; /* hide native scrollbar on desktop; JS controls paging */ overflow-x: auto; overflow-y: hidden; /* Prevent vertical scrolling */ /* Add padding to prevent content from touching the edges */ padding: 0 10px; /* hide scrollbars visually but allow programmatic scrolling */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; height: 100%; /* Take full height of parent */ align-items: center; /* Vertically center the icons */ } .pdp-icons-list::-webkit-scrollbar { display: none; /* hide WebKit scrollbar */ } /* ========================================================= SINGLE ICON WRAPPER ========================================================= */ .pdp-icon-wrapper { position: static; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 calc(12.5% - 1px); max-width: calc(12.5% - 1px); box-sizing: border-box; padding: 6px 0; margin: 0 0.5px; scroll-snap-align: start; z-index: 999; } .pdp-icon-svg { width: 1.5vw; height: 1.5vw; max-width: 50px; max-height: 50px; min-width: 40px; min-height: 40px; cursor: pointer; position: relative; background: transparent; display: flex; align-items: center; justify-content: center; } .pdp-icon-svg svg { fill: none; } /* ========================================================= ICON LABEL TEXT ========================================================= */ .pdp-icon-label { font-size: 0.6vw; font-weight: 400; width: 90%; max-width: 90%; word-wrap: break-word; word-break: break-word; white-space: normal; line-height: 1.2; box-sizing: border-box; min-height: 3.5em; } /* ========================================================= COLOR MODIFIERS ========================================================= */ .pdp-icon-label-white .pdp-icon-label { color: #ffffffc2 !important; } .pdp-icon-color-white .pdp-icon-s…