/* Factor Fast MegaMenu - Desktop layout (based on mega.html)
   Classes are completely separate from mobile (.ffmm-*) to avoid collisions.
*/

/* Backdrop overlay for blackened background */
.ffdesk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--ffdesk-z, 5000); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.ffdesk-overlay.active { opacity: 1; visibility: visible; }

.ffdesk-container { width: 100%; height: 100%; margin: 0; display: flex; gap: 0; container-type: size; container-name: ffdesk; }

.ffdesk-sidebar { width: 100%; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-radius: 8px; overflow: visible; position: relative; z-index: calc(var(--ffdesk-z, 5000) + 1); height: 100%; }

.ffdesk-main { list-style: none; position: relative; min-height: 0; height: 100%; margin: 0; padding: 0; }

.ffdesk-item { border-bottom: 1px solid #f0f0f0; }
.ffdesk-item:last-child { border-bottom: none; }

.ffdesk-link { display: flex; align-items: center; padding: 10px 10px; text-decoration: none; color: #2c3e50; font-size: 14px; transition: all 0.3s ease; position: relative; }
.ffdesk-item:hover > .ffdesk-link { background: #f8f9fa; color: #3498db; }

.ffdesk-icon { width: 24px; height: 24px; margin-right: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ffdesk-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Thumbs (SVG or image) next to labels */
.ffdesk-thumb { display: inline-flex; align-items: center; justify-content: center; margin-right: 5px; }
.ffdesk-thumb img { width: 24px; height: 24px; object-fit: contain; display: block; }
.ffdesk-thumb.ffdesk-svg svg { width: 24px; height: 24px; display: block; }

.ffdesk-item.ffdesk-has-mega > .ffdesk-link { font-weight: 500; transition: none; }
.ffdesk-item.ffdesk-has-mega:hover > .ffdesk-link { background: #fff5e6; color: #ff8c00; border-left: 4px solid #ff8c00; }

.ffdesk-dropdown { position: absolute; left: 100%; top: 0; width: min(80vw, 1200px); min-height: 100%; background: #ffffff; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 12px; padding: 40px; display: none; opacity: 0; transform: translateX(-20px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: calc(var(--ffdesk-z, 5000) + 2); overflow: hidden; /* container handles own scrolls */ flex-direction: column; }
.ffdesk-item.ffdesk-has-mega:hover > .ffdesk-dropdown { display: flex; opacity: 1; transform: translateX(0); }

.ffdesk-dropdown.ffdesk-lighting { grid-template-columns: repeat(5, 1fr); gap: 24px; }

.ffdesk-col { min-width: 0; }

.ffdesk-cat { display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: 20px; padding: 15px; border-radius: 8px; transition: all 0.3s ease; }
.ffdesk-cat:hover { background: #f8f9fa; transform: translateY(-2px); }

.ffdesk-cat-main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 160px; min-height: 170px; margin-bottom: 10px; }
.ffdesk-cat-main .ffdesk-cat-imglink { display: block; }
.ffdesk-cat-main img { width: 140px; height: auto; aspect-ratio: 16/10; margin-bottom: 10px; border-radius: 8px; transition: transform 0.3s ease; object-fit: contain; background: #fff; flex-shrink: 0; }
.ffdesk-cat-main.has-img h4 { margin-top: 4px; }
.ffdesk-cat:hover .ffdesk-cat-main img { transform: scale(1.02); }
.ffdesk-cat-main h4 { min-height: 44px; display: flex; align-items: end; justify-content: center; margin: 0; font-size: 13px; line-height: 1.25; text-align: center; }

/* Links inside image layout */
.ffdesk-cat > a { display: block; color: #5a6c7d; text-decoration: none; padding: 4px 0 4px 15px; font-size: 13px; line-height: 1.5; transition: all 0.3s ease; position: relative; border-radius: 4px; margin-top: 5px; }
.ffdesk-cat > a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #ff8c00; border-radius: 50%; opacity: 0; transition: all 0.3s ease; }
.ffdesk-cat > a:hover { color: #ff8c00; background: #fff5e6; }
.ffdesk-cat > a:hover::before { opacity: 1; left: 5px; }

/* Column headers and links */
.ffdesk-cols-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 30px; align-items: start; }
@media (max-width: 1360px) { .ffdesk-cols-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (max-width: 1100px) { .ffdesk-cols-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 860px)  { .ffdesk-cols-grid { grid-template-columns: repeat(1, minmax(220px, 1fr)); } }
.ffdesk-col h4 { position: relative; margin-top: 15px; }
.ffdesk-col h4 a { color: #2c3e50; text-decoration: none; font-size: 15px; font-weight: 700; display: inline-block; padding-bottom: 8px; border-bottom: 3px solid #ff8c00; transition: all 0.3s ease; }
.ffdesk-col h4 a:hover { color: #ff8c00; }
.ffdesk-col > a { display: block; color: #5a6c7d; text-decoration: none; padding: 8px 0 8px 15px; font-size: 13px; line-height: 1.5; transition: all 0.3s ease; position: relative; border-radius: 4px; text-align: left; }
.ffdesk-col > a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #ff8c00; border-radius: 50%; opacity: 0; transition: all 0.3s ease; }
.ffdesk-col > a:hover { color: #ff8c00; background: #fff5e6; }
.ffdesk-col > a:hover::before { opacity: 1; left: 5px; }

/* Brands row */
.ffdesk-brands { grid-column: 1 / -1; margin-top: auto; padding: 15px 0 10px 0; border-top: 1px solid #f0f0f0; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ffdesk-brands-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 15px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; width: 100%; }
.ffdesk-brand-img { width: 120px; height: auto; max-height: 48px; object-fit: contain; opacity: 0.8; transition: opacity 0.3s ease, transform 0.3s ease; filter: grayscale(30%); flex-shrink: 0; }
.ffdesk-brand-text { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; height: 48px; padding: 0 12px; font-size: 14px; color: #5a6c7d; background: #f8f9fa; border-radius: 6px; }
.ffdesk-brands-row a:hover .ffdesk-brand-text { color: #ff8c00; background: #fff5e6; }
.ffdesk-brand-img:hover { opacity: 1; transform: scale(1.05); filter: grayscale(0%); }

/* Scrollbar styling */
.ffdesk-dropdown::-webkit-scrollbar { width: 8px; }
.ffdesk-dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.ffdesk-dropdown::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.ffdesk-dropdown::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.ffdesk-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: start; justify-items: start; justify-content: start; overflow: auto; flex: 1 1 auto; }
/* Responsive columns for image grid based on container width */
@container ffdesk (min-width: 1400px) {
  .ffdesk-cat-grid { grid-template-columns: repeat(6, 1fr); }
}
@container ffdesk (max-width: 1100px) {
  .ffdesk-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@container ffdesk (max-width: 900px) {
  .ffdesk-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@container ffdesk (max-width: 700px) {
  .ffdesk-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@container ffdesk (max-width: 420px) {
  .ffdesk-cat-grid { grid-template-columns: repeat(1, 1fr); }
}
/* centralized to .ffdesk-cat-grid; remove conflicting template */

/* Banner styles (optional, if used in mega.html) */
.ffdesk-banner { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.ffdesk-banner img { display: block; width: 100%; height: auto; }
.ffdesk-banner .ffdesk-banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); }

@container ffdesk (max-width: 500px) {
  .ffdesk-sidebar { width: 220px; }
  .ffdesk-link { font-size: 12px; padding: 12px 16px; }
  .ffdesk-icon { margin-right: 12px; }
  .ffdesk-icon svg { width: 16px; height: 16px; }
  .ffdesk-dropdown { left: 220px; padding: 28px; }
  .ffdesk-cat-main { width: 140px; }
  .ffdesk-cat-main img { width: 120px; }
}
@container ffdesk (min-width: 501px) and (max-width: 700px) {
  .ffdesk-sidebar { width: 260px; }
  .ffdesk-link { font-size: 13px; padding: 14px 18px; }
  .ffdesk-icon { margin-right: 14px; }
  .ffdesk-icon svg { width: 18px; height: 18px; }
  .ffdesk-dropdown { left: 260px; padding: 34px; }
  .ffdesk-cat-main { width: 150px; }
  .ffdesk-cat-main img { width: 130px; }
}
@container ffdesk (min-width: 701px) {
  .ffdesk-sidebar { width: 280px; }
  .ffdesk-link { font-size: 14px; padding: 16px 20px; }
  .ffdesk-icon { margin-right: 15px; }
  .ffdesk-icon svg { width: 20px; height: 20px; }
  .ffdesk-dropdown { left: 280px; padding: 40px; }
  .ffdesk-cat-main { width: 160px; }
  .ffdesk-cat-main img { width: 140px; }
}

@container ffdesk (max-height: 520px) {
  .ffdesk-link { padding: 10px 14px; }
  .ffdesk-dropdown { padding: 24px; }
  .ffdesk-cat-grid { gap: 16px; }
  .ffdesk-cat-main { width: 140px; min-height: 150px; }
  .ffdesk-cat-main img { width: 120px; }
  .ffdesk-brands { height: 64px; }
  .ffdesk-brand-img { max-height: 40px; }
}
@container ffdesk (max-height: 380px) {
  .ffdesk-link { padding: 8px 12px; }
  .ffdesk-dropdown { padding: 16px; }
  .ffdesk-cat-grid { gap: 12px; }
  .ffdesk-cat-main { width: 130px; min-height: 140px; }
  .ffdesk-cat-main img { width: 110px; }
  .ffdesk-brands { height: 56px; }
  .ffdesk-brand-img { max-height: 36px; }
}

/* Fluid mode: sidebar fills parent; dropdown opens at the end regardless of width */
.ffdesk-container.ffdesk-fluid { width: 100%; height: 100%; }
.ffdesk-container.ffdesk-fluid .ffdesk-sidebar { width: 100%; height: 100%; }
/* Ensure dropdown is positioned immediately after the sidebar's right edge */
.ffdesk-container.ffdesk-fluid .ffdesk-dropdown { left: 100% !important; width: min(80vw, 1200px); }

@media (max-width: 1200px) {
  .ffdesk-dropdown { width: calc(100vw - 320px); grid-template-columns: repeat(2, 1fr); }
}