/* === Base === */
.dgh-search{ position:relative; max-width:640px; margin:16px auto; }
.dgh-input-wrap{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e7e7e9;
  border-radius:14px; padding:10px 12px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.dgh-input-wrap:focus-within{ border-color:#111; box-shadow:0 8px 28px rgba(0,0,0,.08); }
#dgh-q{ flex:1; border:0; outline:0; font-size:15px; background:transparent; color:#111; }
#dgh-q::-webkit-search-cancel-button{ -webkit-appearance:none; }
.dgh-btn{ border:0; background:#111; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }
.dgh-btn:hover{ filter:brightness(1.02); }
.dgh-search ::placeholder{ color:#9CA3AF; opacity:1; }

/* === Panel === */
.dgh-panel{ position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border:1px solid #ececf1;
  border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.12); display:none; overflow:hidden; z-index:999; }
.dgh-panel.open{ display:block !important; visibility:visible !important; opacity:1 !important; }

.dgh-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #f1f1f4; }
.dgh-head .q{ font-weight:600; color:#111; }
.dgh-head .hint{ font-size:12px; color:#777; }

/* Chips */
.dgh-aux{ padding:8px 10px; border-bottom:1px solid #f1f1f4; display:flex; flex-direction:column; gap:8px }
.dgh-aux-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.dgh-aux .ttl{ font-size:12px; color:#6b7280; margin-right:2px; }
.dgh-chip{ display:inline-block; padding:6px 10px; font-size:12.5px; border:1px solid #ececf1; border-radius:999px; text-decoration:none; color:#374151; background:#fff }
.dgh-chip:hover{ background:#f6f7fb }

/* List */
.dgh-list{ list-style:none; margin:0; padding:6px; max-height:420px; overflow:auto; }
.dgh-item{ display:flex; gap:10px; padding:8px; border-radius:10px; cursor:pointer; align-items:center; text-decoration:none; color:inherit; }
.dgh-item:hover, .dgh-item.active{ background:#f6f7fb; }
.dgh-thumb{ width:48px; height:48px; border-radius:10px; background:#f2f4f7; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.dgh-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dgh-body{ min-width:0; }
.dgh-title{ font-size:14px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgh-title mark{ background:#fff1a6; padding:0 .15em; border-radius:4px; }
.dgh-meta{ font-size:12px; color:#6b7280; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgh-price{ font-weight:700; font-size:13px; margin-left:6px; color:#111; }
.dgh-old{ color:#9ca3af; text-decoration:line-through; font-weight:400; margin-left:6px; }

.dgh-foot{ border-top:1px solid #f1f1f4; }
.dgh-more{ display:block; text-align:center; padding:10px 12px; text-decoration:none; color:#111; font-weight:600; }
.dgh-more:hover{ background:#f6f7fb }

/* Empty/Loading */
.dgh-empty, .dgh-error, .dgh-loading{ padding:14px; text-align:center; color:#6b7280; }
.dgh-skeleton{ display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:6px; padding:6px; }
.dgh-sk{ display:flex; gap:10px; padding:8px; }
.dgh-sk .ph, .dgh-sk .l1, .dgh-sk .l2{
  border-radius:6px; background:linear-gradient(90deg,#f2f4f7 25%,#e9edf3 37%,#f2f4f7 63%); background-size:400% 100%;
  animation:dgh-shimmer 1.2s infinite;
}
.dgh-sk .ph{ width:48px; height:48px; border-radius:10px; }
.dgh-sk .l1{ height:12px; width:70%; } .dgh-sk .l2{ height:12px; width:40%; margin-top:6px; }
@keyframes dgh-shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Mobile */
@media (max-width: 540px){
  .dgh-search{ max-width:none; }
  .dgh-panel{ right:auto; left:0; width:100vw; transform:translateX(calc( -1 * ( (100vw - 100%) / 2 ) )); }
}

/* Suggested keywords */
.dgh-suggested{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px auto; max-width:760px; font-size:14px; }
.dgh-suggested .label{ color:#6b7280; margin-right:6px; }
.dgh-suggested .dgh-k{ cursor:pointer; padding:6px 10px; border:1px solid #ececf1; border-radius:999px; }
.dgh-suggested .dgh-k:hover{ background:#f6f7fb }