/* ============================================================
   WP Super Menu — Front-end v3.1
   ============================================================ */

/* ── Nav bar ─────────────────────────────────────────────── */
.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); }

/* ── Dropdown 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 — scrolls as one unit ───────────────────── */
.wsmm-panel-inner {
    max-width:100%;
    margin:0;
    padding:28px 40px;
    display:flex;
    flex-direction:row;
    gap:32px;
    align-items:flex-start;
    box-sizing:border-box;
    max-height:80vh;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#CC0000 #1A1A1A;
}
.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; }

/* ── Left: link columns built by PHP ────────────────────── */
/* .wsmm-panel-links is a flex row containing exactly N .wsmm-col divs */
.wsmm-panel-links {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:row;
    gap:32px;
    align-items:flex-start;
}

/* Each column — PHP puts the right items in each one */
.wsmm-col {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:0;
}

/* Top-level group block (header + its children) */
.wsmm-link-column {
    display:block;
    margin-bottom:20px;
}

/* Link group (non-header item + possible children) */
.wsmm-link-group {
    position:relative;
    display:block;
    margin-bottom:2px;
}

/* Category header */
.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 */
.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-links */
.wsmm-sub-link { padding:5px 10px; color:#ccc !important; border:none !important; background:transparent !important; }
.wsmm-sub-link .wsmm-link-label { font-size:13px; font-weight:400; color:#ccc !important; }
.wsmm-sub-link:hover .wsmm-link-label { color:#FF3333 !important; }

/* Depth-based indentation */
.wsmm-depth-link.wsmm-depth-1 .wsmm-link-label { font-size:14px; font-weight:700; color:#fff; }
.wsmm-depth-link.wsmm-depth-2 { padding:5px 12px 5px 20px; border:none !important; }
.wsmm-depth-link.wsmm-depth-2 .wsmm-link-label { font-size:13px; font-weight:400; color:#ccc !important; }
.wsmm-depth-link.wsmm-depth-2:hover { background:transparent !important; }
.wsmm-depth-link.wsmm-depth-2:hover .wsmm-link-label { color:#FF3333 !important; }
.wsmm-depth-link.wsmm-depth-3 { padding:4px 12px 4px 32px; border:none !important; }
.wsmm-depth-link.wsmm-depth-3 .wsmm-link-label { font-size:12px; font-weight:400; color:#999 !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; }
.wsmm-depth-link.wsmm-depth-4 { padding:3px 12px 3px 44px; border:none !important; }
.wsmm-depth-link.wsmm-depth-4 .wsmm-link-label { font-size:12px; font-weight:400; color:#777 !important; }
.wsmm-depth-link.wsmm-depth-4:hover { background:transparent !important; }
.wsmm-depth-link.wsmm-depth-4:hover .wsmm-link-label { color:#FF3333 !important; }
.wsmm-depth-link.wsmm-depth-5 { padding:3px 12px 3px 56px; border:none !important; }
.wsmm-depth-link.wsmm-depth-5 .wsmm-link-label { font-size:11px; font-weight:400; color:#666 !important; }
.wsmm-depth-link.wsmm-depth-5:hover { background:transparent !important; }
.wsmm-depth-link.wsmm-depth-5:hover .wsmm-link-label { color:#FF3333 !important; }

/* ── Right: featured product photo tiles ─────────────────── */
.wsmm-panel-featured {
    display:grid;
    grid-template-columns:repeat(3, 220px);
    gap:16px;
    flex-shrink:0;
    align-content:start;
}
@media (max-width:1400px) { .wsmm-panel-featured { grid-template-columns:repeat(2, 220px); } }
@media (max-width:1000px) { .wsmm-panel-featured { grid-template-columns:repeat(2, 180px); } }
@media (max-width:800px)  { .wsmm-panel-featured { grid-template-columns:180px; } }

.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:320px; background-size:cover; background-position:center top; background-color:#1A1A1A; transition:transform .4s ease; display:block; }
.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; }
.wsmm-featured-tile:hover .wsmm-featured-label { color:#FF3333; }
.wsmm-featured-desc { padding:0 12px 10px; font-family:'DM Sans','Helvetica Neue',sans-serif; font-size:12px; color:#888; }

/* 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; } }

/* ── 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(3, 1fr); width:100%; }
}
@media (max-width:768px) { .wsmm-nav { display:none; } }