/* ===== ICORE Mega Menu — front end ===== */ /* * On desktop, JavaScript moves the panel out to the end of and * positions it with `position: fixed`, so it can span the full page * width instead of being trapped inside the narrow "Tiles" menu item. * On mobile it's left in place as a simple accordion (see the * max-width media query below), so no JS repositioning happens there. */ .icmm-panel { display: none; background: #0d0d0d; z-index: 99999; } .icmm-panel.icmm-panel-open, .icmm-has-mega.icmm-open > .icmm-panel { display: block; } .icmm-panel-inner { max-width: 1400px; margin: 0 auto; padding: 28px 32px 24px; display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 32px; } .icmm-slot { display: flex; flex-direction: column; gap: 20px; } .icmm-slot > .icmm-column:not(:first-child) { border-top: 1px solid #2a2a2a; padding-top: 20px; } .icmm-column-heading { color: #c9962c; font-size: 12px; letter-spacing: 0.04em; margin: 0 0 14px; font-weight: 600; text-transform: uppercase; } .icmm-column-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .icmm-column-list a { color: #d6d6d6; font-size: 13px; text-decoration: none; } .icmm-column-list a:hover { color: #c9962c; } .icmm-view-all { display: inline-block; margin-top: 12px; color: #c9962c; font-size: 12px; text-decoration: none; } .icmm-view-all:hover { text-decoration: underline; } /* Carousel */ .icmm-carousel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .icmm-carousel-arrows { display: flex; gap: 6px; } .icmm-arrow { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #3a3a3a; background: transparent; color: #d6d6d6; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding: 0; } .icmm-arrow:hover { border-color: #c9962c; color: #c9962c; } .icmm-carousel-track { display: flex; gap: 14px; overflow: hidden; scroll-behavior: smooth; } .icmm-carousel-item { flex: 0 0 calc(50% - 7px); text-decoration: none; } .icmm-carousel-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background-size: cover; background-position: center; margin-bottom: 8px; background-color: #1c1c1c; } .icmm-carousel-title { display: block; color: #ffffff; font-size: 12px; margin-bottom: 2px; } .icmm-carousel-price { display: block; color: #9a9a9a; font-size: 11px; } /* ===== Desktop: full-width panel, positioned by frontend.js ===== */ @media (min-width: 901px) { .icmm-panel { position: fixed; left: 0; width: 100%; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); } } /* ===== Mobile: collapse into an accordion instead of a full-width panel ===== */ @media (max-width: 900px) { .icmm-panel { position: static; box-shadow: none; } .icmm-panel-inner { grid-template-columns: 1fr; padding: 16px 20px; gap: 20px; } .icmm-carousel-item { flex: 0 0 60%; } .icmm-carousel-track { overflow-x: auto; } }