/* ============================================================
   MOBILE v2 — desktop-like horizontal nav on phones (2026-08-16)
   Menu stays fully visible, same style as desktop (per tengyangcnc)
   ============================================================ */

/* ---------- Burger button: hidden (full menu shown instead) ---------- */
.nav-burger{display:none !important}

/* ---------- Mobile (<=1100px) ---------- */
@media (max-width:1100px){
  html,body{overflow-x:hidden}

  /* Header: logo + icons on row 1, full menu on row 2 */
  .header-inner{flex-wrap:wrap;padding:10px 16px;gap:6px 12px}
  .site-logo{order:1;margin-right:auto}
  .site-logo img{height:30px;width:auto}
  .search-wrap{order:2}
  .lang-switch{order:3}
  .nav-cta{display:none}

  /* Full horizontal nav, second row, same look as desktop */
  .main-nav{
    order:4;width:100%;display:block !important;
    position:static;transform:none;box-shadow:none;
    padding:6px 0 2px;background:transparent;overflow:visible;
  }
  .main-nav > ul{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:2px 4px;padding:4px 0;
  }
  .main-nav > ul > li{flex-shrink:0}
  .main-nav > ul > li > a{
    padding:7px 9px;font-size:12.5px;font-weight:600;white-space:nowrap;
    border-radius:6px;letter-spacing:.02em;
  }
  .main-nav > ul > li.has-dropdown > a::before{display:none}

  /* Dropdowns: tap-to-open panel below (no hover on mobile) */
  .main-nav .dropdown{
    position:absolute;top:100%;left:0;margin-top:8px;min-width:240px;
    padding:10px;border-radius:12px;
    background:linear-gradient(135deg,#0F2A43,#0D2439 60%,#0A1D33);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 50px rgba(15,42,67,.35);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .25s,transform .25s,visibility .25s;
    z-index:200;display:block;
  }
  /* Kill desktop hover rules on mobile: only .open (tap) shows dropdowns */
  .main-nav > ul > li:hover > .dropdown,
  .main-nav > ul > li:focus-within > .dropdown{opacity:0 !important;visibility:hidden !important;transform:translateY(8px) !important}
  .dropdown-l1 > li:hover > .dropdown-l2,
  .dropdown-l1 > li:focus-within > .dropdown-l2{opacity:0 !important;visibility:hidden !important;transform:translateY(8px) !important}
  .main-nav > ul > li.open > .dropdown{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
  .dropdown-l1 > li.open > .dropdown-l2{opacity:1 !important;visibility:visible !important;transform:none !important}
  .dropdown-l1{display:flex;flex-direction:column;gap:2px;padding:0;border:none;box-shadow:none;background:transparent}
  .dropdown-l1 > li{width:100%}
  .dropdown-l1 > li > a{padding:10px 12px;font-size:13.5px;color:rgba(255,255,255,.9);justify-content:space-between}
  .dropdown-l1 > li > a .dd-arrow{color:var(--c-coral)}
  .dropdown-l1 > li:hover > a{background:rgba(255,107,74,.25);color:#fff}
  .dropdown-l2{
    position:static;transform:none;margin:2px 0 4px 10px;min-width:0;
    opacity:1;visibility:visible;display:none;box-shadow:none;
    border:none;border-left:2px solid rgba(255,107,74,.4);border-radius:0;
    padding:2px 0 2px 8px;background:transparent;
  }
  .dropdown-l1 > li.open > .dropdown-l2{display:block}
  .dropdown-l2 li a{color:rgba(255,255,255,.85);padding:8px 10px;font-size:13px}
  .dropdown-l2 li a:hover{background:rgba(255,107,74,.2);color:#fff}

  /* For right-side menu items, open dropdown to the right edge */
  .main-nav > ul > li:nth-last-child(-n+3) .dropdown{left:auto;right:0}
}

/* ---------- Small screens (<=640px): content layout ---------- */
@media (max-width:640px){
  .header-inner{gap:8px}

  /* Category cards: single column, no overflow */
  .cats-showcase .cat-block{width:100% !important;min-width:0 !important}
  .cat-visual{width:100% !important;min-height:180px}

  /* Service cards / why cards stack */
  .svc-grid{grid-template-columns:1fr !important}
  .why-grid{grid-template-columns:1fr !important}

  /* Hero: tighter for mobile */
  .hero-slides{min-height:70vh}
  .hero-content h1{font-size:32px !important}
  .hero-content p{font-size:14.5px !important}
  .hero-btns{gap:10px}
  .hero-btns .btn-primary,.hero-btns .btn-ghost{padding:12px 20px;font-size:12.5px}
  .hero-tagline{display:none}

  /* Category page: sidebar on top, banner smaller */
  .cat-layout{flex-direction:column;gap:20px;padding:20px 0 40px}
  .cat-sidebar{width:100%;position:static}
  .cat-tree{flex-direction:row;flex-wrap:wrap;gap:6px}
  .cat-tree-l1{margin:0}
  .cat-tree-l2{width:100%}
  .cat-banner{height:160px}
  .cat-banner-text{padding:0 18px;max-width:88%}
  .cat-banner-text h2{font-size:22px}

  /* Product cards: 2 per row on phones */
  .cards{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  .card-img{height:140px;padding:8px}
  .card-body{padding:12px}
  .card-body h3{font-size:13.5px}
  .card-body p{font-size:11.5px}
}