@layer components{
  .main-header{ background:#fff; color:#111; border-bottom:1px solid #ccc; }

  .main-header .top-bar{
    display:flex; justify-content:space-between; align-items:center;
    padding:15px 40px; flex-wrap:wrap; background:#fff; color:#111;
  }

  .main-header .left .logo{ font-size:1.8rem; font-weight:700; color:var(--blue-accent); }

  .main-header .center{ flex:1; display:flex; justify-content:flex-start; }

  /* Search (matches header.php: .sp-search) */
  .main-header .sp-search{
    position:relative;
    width:100%;
    max-width:600px;
  }

  .main-header .sp-search-form{
    display:flex;
    width:100%;
  }

  .main-header .sp-search-form input{
    flex:1; padding:14px; font-size:1rem; border:1px solid #ccc;
    background:#fff; color:#111; border-radius:3px 0 0 3px;
  }
  .main-header .sp-search-btn{
    padding:14px 18px; background:var(--blue-accent); border:0;
    border-radius:0 3px 3px 0; color:#fff; cursor:pointer;
  }
  .main-header .sp-search-btn:hover{ filter:brightness(.95); }
  .main-header .sp-search-btn svg{ display:block; }

  /* Autocomplete panel */
  .main-header #sp-search-input:focus{
    border-color: var(--blue-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-accent) 20%, transparent);
    outline: none;
  }
  .main-header .sp-search-panel{
    position:absolute;
    top:52px;
    left:0;
    right:0;
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    padding:8px;
    z-index:1000;
    max-height:420px;
    overflow:auto;
  }
  .main-header .sp-search-list{ list-style:none; margin:0; padding:0; }
  .main-header .sp-search-item{
    display:flex; align-items:center; gap:10px;
    padding:8px; border-radius:8px; cursor:pointer;
  }
  .main-header .sp-search-item:hover,
  .main-header .sp-search-item[aria-selected="true"]{ background:#f5f7fb; }
  .main-header .sp-search-thumb{
    width:44px; height:44px; object-fit:cover;
    border-radius:6px; border:1px solid #eee;
  }
  .main-header .sp-search-name{ font-size:.95rem; line-height:1.2; }
  .main-header .sp-search-price{ margin-left:auto; font-weight:600; }
  .main-header .sp-search-empty{ padding:12px; color:#666; }
  .main-header .sp-search-viewall{
    display:block; margin-top:6px; padding:10px; text-align:center;
    border-radius:8px; border:1px solid #e6e8ef;
  }
  .main-header .sp-search-viewall:hover{ background:#f7f9ff; }

  .main-header .top-icons{ display:flex; align-items:center; gap:18px; }

  .main-header .main-nav{ background:#fff; padding:8px 40px; position:relative; z-index:2; }
  .main-header .main-nav ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
  .main-header .main-nav li{ position:relative; }
  .main-header .main-nav li a{
    color:#111; text-decoration:none; font-size:.95rem; font-weight:500;
    padding:10px; display:inline-block;
  }
  .main-header .main-nav li a:hover{ color:var(--blue-accent); }

  .main-header .dropdown{ position:relative; z-index:10; }

  .main-header .main-nav .dropdown-menu{
    display:none; position:absolute; top:100%; left:0;
    background:#1c2735; border:1px solid #2a3a4a; border-radius:4px;
    z-index:1000; min-width:180px; padding:0;
    box-shadow:0 4px 6px rgba(0,0,0,.4);
  }
  .main-header .main-nav .dropdown-menu li{ padding:8px 16px; transition:background-color .2s; }
  .main-header .main-nav .dropdown-menu li + li{ margin-top:2px; }
  .main-header .main-nav .dropdown-menu a{
    color:#e0e0e0; display:block; font-size:14px;
    padding:10px 16px; text-decoration:none;
  }
  .main-header .main-nav .dropdown-menu li:hover{ background:#263245; }
  .main-header .main-nav .dropdown:hover > .dropdown-menu{ display:block; }

  /* (moved: signin dropdown + top-icons link styles -> components.css) */

  /* Mobile open state (JS adds .open) */
  @media (max-width:992px){
    /* optional: disable hover behavior on touch */
    .main-header .main-nav .dropdown:hover > .dropdown-menu{ display:none; }
    .main-header .main-nav .dropdown.open > .dropdown-menu{ display:block; }
  }

  @media (max-width:768px){
    .main-header .top-icons{ width:100%; justify-content:center; flex-wrap:wrap; margin-top:10px; gap:12px; }
    .main-header .top-bar{ flex-direction:column; align-items:center; padding:10px 20px; text-align:center; }
    .main-header .left,.main-header .center,.main-header .top-icons{ width:100%; justify-content:center; margin-bottom:10px; }
    .main-header .sp-search{ margin-left:0; }
  }
  @media (max-width:576px){
    /* (moved: top-icons link/icon font sizing -> components.css) */
  }

  @media (max-width:640px){
    .main-header .sp-search{ max-width:none; }
    .main-header .sp-search-panel{ top:48px; }
  }
}