/* =========================================================
SOUTHERN ELECTRONICS
DESKTOP SHOP MEGA MENU
========================================================= */
.se-shop-mega-panel {
display: none;
}
/* =========================================================
DESKTOP
========================================================= */
@media (min-width: 801px) {
/*
* The navigation bar must act as the positioning reference
* for the full-width mega menu.
*/
.navPages {
position: relative;
}
.se-shop-nav-item {
position: static !important;
}
.se-shop-nav-item > .se-shop-trigger {
position: relative;
}
/* Blue underline below Shop while active */
.se-shop-nav-item > .se-shop-trigger::after {
background: #005baa;
bottom: -1px;
content: "";
height: 3px;
left: 50%;
position: absolute;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform .18s ease;
width: calc(100% - 22px);
}
.se-shop-nav-item.is-open > .se-shop-trigger::after,
.se-shop-nav-item:hover > .se-shop-trigger::after,
.se-shop-nav-item:focus-within > .se-shop-trigger::after {
transform: translateX(-50%) scaleX(1);
}
/* Rotate the Shop arrow while open */
.se-shop-nav-item.is-open
> .se-shop-trigger
.navPages-action-moreIcon,
.se-shop-nav-item:hover
> .se-shop-trigger
.navPages-action-moreIcon,
.se-shop-nav-item:focus-within
> .se-shop-trigger
.navPages-action-moreIcon {
transform: rotate(180deg);
}
/* Hide the normal Shop accordion on desktop */
.se-shop-mobile-menu {
display: none !important;
}
/* Main desktop panel */
.se-shop-mega-panel {
background: transparent;
display: block;
left: 0;
opacity: 0;
padding-top: 12px;
pointer-events: none;
position: absolute;
right: 0;
top: 100%;
transform: translateY(-8px);
transition:
opacity .16s ease,
transform .16s ease,
visibility .16s ease;
visibility: hidden;
width: 100%;
z-index: 1000;
}
.se-shop-nav-item.is-open
> .se-shop-mega-panel,
.se-shop-nav-item:hover
> .se-shop-mega-panel,
.se-shop-nav-item:focus-within
> .se-shop-mega-panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
visibility: visible;
}
/* White mega-menu container */
.se-shop-mega-shell {
background: #ffffff;
border: 1px solid #dfe5ea;
border-radius: 0 0 14px 14px;
box-shadow: 0 22px 55px rgba(19, 38, 56, .18);
margin: 0 auto;
max-width: 1440px;
overflow: hidden;
width: calc(100% - 48px);
}
/* =====================================================
TOP BAR
===================================================== */
.se-shop-mega-topbar {
align-items: center;
border-bottom: 1px solid #e7ebef;
display: flex;
justify-content: space-between;
padding: 18px 24px 16px;
}
.se-shop-mega-eyebrow,
.se-shop-pane-kicker,
.se-shop-feature-kicker {
color: #005baa;
display: block;
font-size: 11px;
font-weight: 900;
letter-spacing: .13em;
line-height: 1.2;
margin: 0 0 5px;
text-transform: uppercase;
}
.se-shop-mega-topbar h2 {
color: #172534;
font-size: 21px;
font-weight: 800;
line-height: 1.2;
margin: 0;
}
.se-shop-view-all {
align-items: center;
color: #005baa;
display: inline-flex;
font-size: 13px;
font-weight: 800;
gap: 8px;
text-decoration: none;
}
.se-shop-view-all:hover,
.se-shop-view-all:focus {
color: #003f7d;
text-decoration: underline;
}
/* =====================================================
THREE-COLUMN GRID
===================================================== */
.se-shop-mega-grid {
display: grid;
grid-template-columns:
minmax(225px, .82fr)
minmax(520px, 2.1fr)
minmax(275px, .98fr);
min-height: 470px;
}
/* =====================================================
COLUMN 1
DEPARTMENT LIST
===================================================== */
.se-shop-departments {
background: #f4f7f9;
border-right: 1px solid #e1e7eb;
padding: 14px 0;
}
.se-shop-department {
align-items: center;
appearance: none;
background: transparent;
border: 0;
color: #243746;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: 13px;
font-weight: 750;
justify-content: space-between;
line-height: 1.25;
min-height: 45px;
padding: 9px 18px 9px 22px;
position: relative;
text-align: left;
transition:
background .14s ease,
color .14s ease;
width: 100%;
}
.se-shop-department::before {
background: #005baa;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
transform: scaleY(0);
transition: transform .14s ease;
width: 4px;
}
.se-shop-department:hover,
.se-shop-department:focus,
.se-shop-department.is-active {
background: #ffffff;
color: #005baa;
outline: 0;
}
.se-shop-department:hover::before,
.se-shop-department:focus::before,
.se-shop-department.is-active::before {
transform: scaleY(1);
}
.se-shop-department-arrow {
color: #7e8e9a;
font-size: 22px;
font-weight: 400;
line-height: 1;
margin-left: 12px;
}
.se-shop-department.is-active
.se-shop-department-arrow {
color: #005baa;
}
/* =====================================================
COLUMN 2
SUBCATEGORY AREA
===================================================== */
.se-shop-subcategory-area {
background: #ffffff;
min-width: 0;
padding: 23px 28px 25px;
position: relative;
}
.se-shop-subcategory-pane {
display: none;
}
.se-shop-subcategory-pane.is-active {
animation: seMegaFade .16s ease;
display: block;
}
@keyframes seMegaFade {
from {
opacity: 0;
transform: translateX(5px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.se-shop-pane-heading {
align-items: flex-end;
border-bottom: 1px solid #e5eaee;
display: flex;
justify-content: space-between;
margin-bottom: 18px;
padding-bottom: 13px;
}
.se-shop-pane-heading h3 {
color: #172534;
font-size: 22px;
font-weight: 850;
line-height: 1.15;
margin: 0;
}
.se-shop-pane-all {
color: #005baa;
font-size: 12px;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
}
.se-shop-pane-all:hover,
.se-shop-pane-all:focus {
text-decoration: underline;
}
.se-shop-subcategory-grid {
column-gap: 30px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 22px;
}
.se-shop-subcategory-group {
min-width: 0;
}
.se-shop-subcategory-title {
color: #1c2f3e;
display: inline-block;
font-size: 14px;
font-weight: 850;
line-height: 1.25;
margin: 0 0 8px;
text-decoration: none;
}
.se-shop-subcategory-title:hover,
.se-shop-subcategory-title:focus {
color: #005baa;
text-decoration: underline;
}
.se-shop-subcategory-group ul {
list-style: none;
margin: 0;
padding: 0;
}
.se-shop-subcategory-group li {
line-height: 1.25;
margin: 0 0 6px;
}
.se-shop-subcategory-group li:last-child {
margin-bottom: 0;
}
.se-shop-subcategory-group li a {
color: #5d6b76;
font-size: 12.5px;
font-weight: 550;
text-decoration: none;
}
.se-shop-subcategory-group li a:hover,
.se-shop-subcategory-group li a:focus {
color: #005baa;
text-decoration: underline;
}
/* Empty department state */
.se-shop-empty-state {
align-items: flex-start;
background: #f5f8fa;
border: 1px solid #e1e8ed;
border-radius: 8px;
display: flex;
flex-direction: column;
padding: 24px;
}
.se-shop-empty-state p {
color: #4f616f;
font-size: 14px;
margin: 0 0 12px;
}
.se-shop-empty-state a {
color: #005baa;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.se-shop-empty-state a:hover,
.se-shop-empty-state a:focus {
text-decoration: underline;
}
/* =====================================================
COLUMN 3
SOURCING FEATURE CARD
===================================================== */
.se-shop-feature-card {
background: #eff4f7;
border-left: 1px solid #dfe6ea;
display: flex;
flex-direction: column;
min-width: 0;
}
.se-shop-feature-image {
background-color: #d8e2e8;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 165px;
width: 100%;
}
.se-shop-feature-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px 23px 24px;
}
.se-shop-feature-content h3 {
color: #172534;
font-size: 20px;
font-weight: 850;
line-height: 1.18;
margin: 0 0 10px;
}
.se-shop-feature-content p {
color: #52636f;
font-size: 13px;
line-height: 1.55;
margin: 0 0 18px;
}
.se-shop-feature-actions {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: auto;
width: 100%;
}
.se-shop-feature-actions .button {
border-radius: 5px;
font-size: 12px;
font-weight: 850;
margin: 0;
padding: 12px 16px;
width: 100%;
}
.se-shop-feature-link {
color: #005baa;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.se-shop-feature-link:hover,
.se-shop-feature-link:focus {
text-decoration: underline;
}
/* =====================================================
BOTTOM UTILITY BAR
===================================================== */
.se-shop-mega-footer {
align-items: center;
background: #172b3a;
display: flex;
gap: 15px;
justify-content: center;
min-height: 44px;
padding: 9px 20px;
}
.se-shop-mega-footer a {
color: #ffffff;
font-size: 11.5px;
font-weight: 750;
letter-spacing: .01em;
text-decoration: none;
}
.se-shop-mega-footer a:hover,
.se-shop-mega-footer a:focus {
color: #90d25d;
text-decoration: underline;
}
.se-shop-mega-footer > span {
background: rgba(255, 255, 255, .32);
height: 14px;
width: 1px;
}
}
/* =========================================================
SMALLER DESKTOP AND TABLET LANDSCAPE
========================================================= */
@media (min-width: 801px) and (max-width: 1180px) {
.se-shop-mega-shell {
width: calc(100% - 24px);
}
.se-shop-mega-grid {
grid-template-columns:
205px
minmax(430px, 1.8fr)
250px;
}
.se-shop-subcategory-area {
padding-left: 22px;
padding-right: 22px;
}
.se-shop-subcategory-grid {
column-gap: 22px;
}
.se-shop-department {
font-size: 12px;
padding-left: 17px;
padding-right: 13px;
}
.se-shop-feature-content {
padding-left: 18px;
padding-right: 18px;
}
}
/* =========================================================
MOBILE
USE THE THEME'S ORIGINAL ACCORDION MENU
========================================================= */
@media (max-width: 800px) {
.se-shop-mega-panel {
display: none !important;
}
.se-shop-mobile-menu {
display: block;
}
}
