/* ═══════════════════════════════════════════
   WCS Mobile Category Menu  v1.1
   Popup-safe: overflow clipping on viewport
   only, wrapper itself is overflow:visible
   ═══════════════════════════════════════════ */

:root {
  --mm-navy:        #003580;
  --mm-yellow:      #f5a623;
  --mm-yellow-dk:   #d4891a;
  --mm-yellow-pale: #fffbf0;
  --mm-bg:          #ffffff;
  --mm-bg-off:      #f6f7f9;
  --mm-border:      #e4e6ea;
  --mm-text:        #1c1c1c;
  --mm-muted:       #6b7280;
  --mm-radius:      10px;
  --mm-item-h:      52px;
  --mm-icon-sz:     36px;
  --mm-dur:         0.27s;
  --mm-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── OUTER WRAPPER ──────────────────────────
   overflow: visible so nothing outside
   the viewport div is clipped.
   Popups need this to render correctly.
   ─────────────────────────────────────────── */
.wcsmm-wrap {
  width: 100%;
  position: relative;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  color: var(--mm-text);
}

/* ── VIEWPORT ───────────────────────────────
   This is the actual clipping container.
   overflow:hidden only here so popup
   parents are not affected.
   ─────────────────────────────────────────── */
.wcsmm-viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  background: var(--mm-bg);
  /* height is set by the active panel via JS */
}

/* ── PANELS ─────────────────────────────────
   All panels live inside the viewport.
   Inactive panels sit off-screen to the right
   using translateX, then slide in/out.
   ─────────────────────────────────────────── */
.wcsmm-panel {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--mm-bg);
  transform: translateX(100%);
  transition: transform var(--mm-dur) var(--mm-ease),
              opacity   var(--mm-dur) var(--mm-ease);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* Active (visible) panel */
.wcsmm-panel--active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  position: relative;   /* contributes to viewport height */
}

/* Exiting panel (pushed left) */
.wcsmm-panel--exit {
  transform: translateX(-28%);
  opacity: 0.3;
  pointer-events: none;
  position: absolute;
}

/* ── PANEL HEADER (back button bar) ─────────── */
.wcsmm-header {
  display: flex;
  align-items: center;
  background: var(--mm-navy);
  min-height: 48px;
  border-radius: var(--mm-radius) var(--mm-radius) 0 0;
  gap: 0;
}

.wcsmm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 14px 12px 16px;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: .01em;
}

.wcsmm-back-btn:hover { opacity: .7; }

.wcsmm-back-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.wcsmm-header-title {
  flex: 1;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

.wcsmm-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-yellow);
  text-decoration: none;
  padding: 0 16px 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.wcsmm-view-all:hover { color: #fff; text-decoration: none !important; }

/* ── VERTICAL LIST ──────────────────────────── */
.wcsmm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcsmm-item {
  border-bottom: 1px solid var(--mm-border);
  transition: background .12s;
}

.wcsmm-item:last-child { border-bottom: none; }

.wcsmm-item:active,
.wcsmm-item.pressing { background: #f0f2f5; }

.wcsmm-row {
  display: flex;
  align-items: center;
  min-height: var(--mm-item-h);
}

/* Icon circle */
.wcsmm-icon {
  width: var(--mm-icon-sz);
  height: var(--mm-icon-sz);
  border-radius: 50%;
  background: var(--mm-bg-off);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px 0 14px;
  flex-shrink: 0;
  color: var(--mm-muted);
  overflow: hidden;
  transition: background .18s, color .18s;
}

.wcsmm-item:hover .wcsmm-icon {
  background: var(--mm-yellow-pale);
  color: var(--mm-yellow-dk);
}

.wcsmm-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.wcsmm-icon svg {
  width: 16px;
  height: 16px;
}

/* Label: shared between <button> and <a> */
.wcsmm-label {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: var(--mm-item-h);
  padding: 10px 14px 10px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none !important;
  color: var(--mm-text);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  width: 100%;
  transition: color .15s;
}

.wcsmm-label:hover { color: var(--mm-navy); text-decoration: none !important; }
.wcsmm-item:hover  { background: #fafbfc; }

.wcsmm-name {
  flex: 1;
  line-height: 1.3;
}

.wcsmm-count {
  font-size: 11px;
  color: var(--mm-muted);
  background: var(--mm-bg-off);
  border-radius: 20px;
  padding: 2px 7px;
  font-weight: 600;
  flex-shrink: 0;
}

.wcsmm-chevron {
  width: 20px;
  height: 20px;
  color: var(--mm-muted);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}

.wcsmm-chevron svg { width: 18px; height: 18px; }
.wcsmm-item:hover .wcsmm-chevron { color: var(--mm-navy); }

/* ── SUBCATEGORY GRID ───────────────────────── */
.wcsmm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  padding: 18px 14px 22px;
}

/* Card */
.wcsmm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: mm-pop .24s var(--mm-ease) forwards;
}

.wcsmm-card:nth-child(1)  { animation-delay:.04s }
.wcsmm-card:nth-child(2)  { animation-delay:.08s }
.wcsmm-card:nth-child(3)  { animation-delay:.12s }
.wcsmm-card:nth-child(4)  { animation-delay:.16s }
.wcsmm-card:nth-child(5)  { animation-delay:.20s }
.wcsmm-card:nth-child(6)  { animation-delay:.24s }
.wcsmm-card:nth-child(7)  { animation-delay:.28s }
.wcsmm-card:nth-child(8)  { animation-delay:.32s }
.wcsmm-card:nth-child(9)  { animation-delay:.36s }
.wcsmm-card:nth-child(10) { animation-delay:.40s }
.wcsmm-card:nth-child(11) { animation-delay:.44s }
.wcsmm-card:nth-child(12) { animation-delay:.48s }

@keyframes mm-pop {
  from { opacity:0; transform: scale(.88) translateY(8px); }
  to   { opacity:1; transform: scale(1)   translateY(0);   }
}

.wcsmm-card-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  padding: 0;
  position: relative;
}

.wcsmm-card-circle {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 50%;
  background: var(--mm-bg-off);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .2s, transform .2s;
}

.wcsmm-card-btn:hover .wcsmm-card-circle,
.wcsmm-card-btn:active .wcsmm-card-circle {
  box-shadow: 0 5px 16px rgba(0,0,0,.14);
  transform: translateY(-2px);
}

.wcsmm-card-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
}

.wcsmm-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcsmm-card-placeholder svg {
  width: 40px;
  height: 40px;
}

.wcsmm-card-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mm-text);
  text-align: center;
  line-height: 1.3;
  transition: color .15s;
}

.wcsmm-card-btn:hover .wcsmm-card-name { color: var(--mm-navy); }

.wcsmm-card-arrow {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: var(--mm-yellow);
  color: var(--mm-navy);
  border-radius: 50%;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  font-weight: 900;
}

/* ── LOADING ──────────────────────────────────── */
.wcsmm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.wcsmm-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--mm-border);
  border-top-color: var(--mm-yellow);
  border-radius: 50%;
  animation: mm-spin .6s linear infinite;
}

@keyframes mm-spin { to { transform: rotate(360deg) } }

/* ── EMPTY / ERROR ────────────────────────────── */
.wcsmm-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--mm-muted);
  font-size: 13px;
}

.wcsmm-empty a {
  color: var(--mm-yellow-dk);
  font-weight: 600;
  text-decoration: none;
}

.wcsmm-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0;
}