/* ============================================================
   WP Super Menu — Front-end v3.0
   Left text links + right product photo tiles
   ============================================================ */

.wsmm-nav { display:flex; gap:4px; align-items:center; list-style:none; margin:0; padding:0; }
.wsmm-nav-item { position:relative; }
.wsmm-nav-link { display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#000; padding:8px 14px; border-radius:4px; transition:all .22s; text-decoration:none; white-space:nowrap; }
.wsmm-nav-link:hover, .wsmm-nav-item.wsmm-open > .wsmm-nav-link { color:#fff; background:rgba(0,0,0,.18); }
.wsmm-caret { font-size:8px; margin-left:4px; display:inline-block; transition:transform .22s; vertical-align:middle; }
.wsmm-nav-item.wsmm-open > .wsmm-nav-link .wsmm-caret { transform:rotate(180deg); }

/* ── Panel ───────────────────────────────────────────────── */
.wsmm-panel {
    position:fixed; left:0; right:0; top:0; z-index:99;
    background:#000;
    border-top:3px solid #CC0000;
    border-bottom:1px solid #2A2A2A;
    box-shadow:0 10px 50px rgba(0,0,0,.85);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.wsmm-panel.wsmm-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s; }

/* ── Panel inner: left | right ───────────────────────────── */
.wsmm-panel-inner { max-width:100%; margin:0; padding:28px 40px; display:flex; gap:24px; align-items:flex-start; box-sizing:border-box; max-height:80vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#CC0000 #1A1A1A; }

/* ── Left: links ─────────────────────────────────────────── */
.wsmm-panel-links {
    flex:1;
    min-width:0;
    column-count:2;
    column-gap:32px;
    column-fill:balance;
}

/* Column header (bold category title like "Backpacks") */
.wsmm-link-column {
    display:inline-block;
    width:100%;
    margin-bottom:20px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
}
.wsmm-link-group-header { padding:0 0 6px; margin-bottom:4px; border-bottom:1px solid #2A2A2A; }
.wsmm-link-group-header a { font-family:'DM Sans','Helvetica Neue',sans-serif; font-size:15px; font-weight:900; color:#CC0000; text-decoration:none; letter-spacing:.02em; text-transform:uppercase; transition:color .18s; }
.wsmm-link-group-header a:hover { color:#FF3333; }

/* Individual link row */
.wsmm-link-group {
    position:relative;
    display:inline-block;
    width:100%;
    margin-bottom:2px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
}
.wsmm-panel-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:5px; text-decoration:none; color:#fff; transition:background .18s, color .18s; border:1px solid transparent; }
.wsmm-panel-link:hover { background:#1A1A1A; border-color:#CC0000; }
.wsmm-link-thumb { width:36px; height:36px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#1A1A1A; }
.wsmm-link-text { display:flex; flex-direction:column; flex:1; min-width:0; }
.wsmm-link-label { font-family:'DM Sans','Helvetica Neue',sans-serif; font-size:14px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsmm-panel-link:hover .wsmm-link-label { color:#FF3333; }
.wsmm-link-desc { font-family:'DM Sans','Helvetica Neue',sans-serif; font-size:11px; color:#888; margin-top:2px; }
.wsmm-sub-arrow { font-size:10px; color:#555; margin-left:auto; flex-shrink:0; }
.wsmm-panel-link:hover .wsmm-sub-arrow { color:#CC0000; }

/* Sub-link (under a header — no box) */
.wsmm-sub-link { padding:5px 10px; color:#ccc; }
.wsmm-sub-link .wsmm-link-label { font-size:13px; font-weight:400; }
.wsmm-sub-link:hover { background:#1A1A1A; }
.wsmm-sub-link:hover .wsmm-link-label { color:#FF3333; }

/* Nested sub-panel (hover flyout) */
.wsmm-sub-panel {
    position:absolute; left:100%; top:0;
    min-width:200px;
    background:#0D0000; border:1px solid #CC0000;
    border-radius:5px; padding:10px;
    box-shadow:6px 6px 30px rgba(0,0,0,.7);
    z-index:10;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(6px);
    transition:opacity .18s, transform .18s, visibility 0s linear .18s;
}
.wsmm-sub-panel-inner {
    display:grid;
    grid-template-columns:1fr; /* overridden by inline style */
    gap:2px;
}
.wsmm-has-sub:hover > .wsmm-sub-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); transition:opacity .18s, transform .18s, visibility 0s linear 0s; }

/* ── Right: product photo tiles ──────────────────────────── */
.wsmm-panel-featured {
    display:grid;
    grid-template-columns: repeat(3, 252px);
    gap:16px;
    flex-shrink:0;
    align-content:start;
}
@media (max-width:1400px) {
    .wsmm-panel-featured { grid-template-columns: repeat(2, 252px); }
}
@media (max-width:1100px) {
    .wsmm-panel-featured { grid-template-columns: repeat(2, 210px); }
}
@media (max-width:850px) {
    .wsmm-panel-featured { grid-template-columns: 220px; }
}
.wsmm-featured-tile { display:block; text-decoration:none; border-radius:6px; overflow:hidden; border:1px solid #2A2A2A; background:#111; transition:border-color .22s, transform .22s, box-shadow .22s; }
.wsmm-featured-tile:hover { border-color:#CC0000; transform:translateY(-3px); box-shadow:0 8px 28px rgba(204,0,0,.28); }
.wsmm-featured-img { width:100%; height:364px; background-size:cover; background-position:center top; background-color:#1A1A1A; transition:transform .4s ease; }
.wsmm-featured-tile:hover .wsmm-featured-img { transform:scale(1.04); }
.wsmm-featured-placeholder { background:linear-gradient(135deg,#1A0000,#2A0000); display:flex; align-items:center; justify-content:center; }
.wsmm-featured-placeholder::after { content:'✝'; font-size:28px; color:rgba(204,0,0,.25); }
.wsmm-featured-label { padding:10px 12px 4px; font-family:'DM Sans','Helvetica Neue',sans-serif; font-size:13px; font-weight:700; color:#fff; transition:color .22s; line-height:1.3; min-height:36px; }
.wsmm-featured-tile:hover .wsmm-featured-label { color:#FF3333; }
.wsmm-featured-desc { display:none; }

/* ── Backdrop ─────────────────────────────────────────────── */
.wsmm-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:98; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, visibility 0s linear .22s; }
.wsmm-backdrop.wsmm-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s, visibility 0s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1024px) {
    .wsmm-panel-inner { flex-direction:column; }
    .wsmm-panel-featured {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        width:100%;
    }
    .wsmm-featured-tile { flex:1 1 180px; }
    .wsmm-featured-img { aspect-ratio:16/9; }

}
@media (max-width:768px) {
    .wsmm-nav { display:none; }

}

/* ── Depth-based link styling ───────────────────────────── */

/* Depth 1 — top level links in the panel, full weight */
.wsmm-depth-link.wsmm-depth-1 {
    padding: 9px 12px;
}
.wsmm-depth-link.wsmm-depth-1 .wsmm-link-label {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Depth 2 — first sub-level: slightly smaller, indented */
.wsmm-depth-link.wsmm-depth-2 {
    padding: 5px 12px 5px 20px;
    border: none !important;
    border-radius: 0 !important;
}
.wsmm-depth-link.wsmm-depth-2 .wsmm-link-label {
    font-size: 13px;
    font-weight: 400;
    color: #CCCCCC !important;
}
.wsmm-depth-link.wsmm-depth-2:hover {
    background: transparent !important;
}
.wsmm-depth-link.wsmm-depth-2:hover .wsmm-link-label {
    color: #FF3333 !important;
}

/* Depth 3 — second sub-level: further indented, lighter */
.wsmm-depth-link.wsmm-depth-3 {
    padding: 4px 12px 4px 32px;
    border: none !important;
    border-radius: 0 !important;
}
.wsmm-depth-link.wsmm-depth-3 .wsmm-link-label {
    font-size: 12px;
    font-weight: 400;
    color: #999999 !important;
    font-style: italic;
}
.wsmm-depth-link.wsmm-depth-3:hover {
    background: transparent !important;
}
.wsmm-depth-link.wsmm-depth-3:hover .wsmm-link-label {
    color: #FF3333 !important;
}

/* Depth 4 — third sub-level */
.wsmm-depth-link.wsmm-depth-4 {
    padding: 3px 12px 3px 44px;
    border: none !important;
    border-radius: 0 !important;
}
.wsmm-depth-link.wsmm-depth-4 .wsmm-link-label {
    font-size: 12px;
    font-weight: 400;
    color: #777777 !important;
}
.wsmm-depth-link.wsmm-depth-4:hover { background: transparent !important; }
.wsmm-depth-link.wsmm-depth-4:hover .wsmm-link-label { color: #FF3333 !important; }

/* Depth 5 — deepest level */
.wsmm-depth-link.wsmm-depth-5 {
    padding: 3px 12px 3px 56px;
    border: none !important;
    border-radius: 0 !important;
}
.wsmm-depth-link.wsmm-depth-5 .wsmm-link-label {
    font-size: 11px;
    font-weight: 400;
    color: #666666 !important;
}
.wsmm-depth-link.wsmm-depth-5:hover { background: transparent !important; }
.wsmm-depth-link.wsmm-depth-5:hover .wsmm-link-label { color: #FF3333 !important; }

/* Header columns at depth 2+ get indented too */
.wsmm-link-column.wsmm-depth-2 .wsmm-link-group-header a { font-size: 13px; }
.wsmm-link-column.wsmm-depth-3 .wsmm-link-group-header a { font-size: 12px; }

/* ── Random product skeleton loaders ─────────────────────── */
.wsmm-rand-wrap { display:contents; }
.wsmm-rand-skeleton { pointer-events:none; }
.wsmm-skeleton-img {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: wsmm-shimmer 1.4s infinite;
}
.wsmm-skeleton-label {
    height:14px; margin:10px 12px 12px;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    border-radius:4px;
    animation: wsmm-shimmer 1.4s infinite;
}
@keyframes wsmm-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Scrollable links panel */
.wsmm-panel-inner::-webkit-scrollbar { width:5px; }
.wsmm-panel-inner::-webkit-scrollbar-track { background:#1A1A1A; }
.wsmm-panel-inner::-webkit-scrollbar-thumb { background:#CC0000; border-radius:4px; }
.wsmm-panel-inner::-webkit-scrollbar-thumb:hover { background:#FF3333; }