/* ss-search.css — Mobile бүтэн дэлгэцийн хайлт (Olive Young mobile хайлтыг дуурайсан).
   Reference: [[oliveyoung-search-reference]] — global.oliveyoung.com/mn/search + oliveyoung.co.kr.
   Namespace = .sss-* (Sweet Secret Search); одоо байгаа .ss-search-* dropdown-той ХОЛИХГҮЙ.
   Загвар = gooshop брэндбүүк токен (ss-tokens.css --g-*): accent --g-pink, ink --g-ink,
   muted --g-muted, line --g-line, tint --g-tint · Manrope. Эможигүй. */

.sss-overlay{
  position:fixed; inset:0; z-index:4000;
  background:#fff; display:flex; flex-direction:column;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--g-ink,#1A1A1A);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility .2s;
}
.sss-overlay.sss-open{ opacity:1; visibility:visible; transform:none; }
body.sss-lock{ overflow:hidden; }

/* ── Sticky бар: ← буцах + input pill + × цэвэрлэх ── */
.sss-bar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:#fff; border-bottom:1px solid var(--g-line,#E5EEF4);
  padding-top:max(10px, env(safe-area-inset-top));
}
.sss-back{
  flex:none; width:38px; height:38px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; color:var(--g-ink,#1A1A1A); transition:background .15s;
}
.sss-back:active{ background:var(--g-tint,#EAF4FB); }
.sss-field{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  height:44px; padding:0 14px; background:var(--g-tint,#EAF4FB);
  border:1.5px solid transparent; border-radius:999px; transition:border-color .18s, background .18s;
}
.sss-field:focus-within{ background:#fff; border-color:var(--g-pink,#E8547C); }
.sss-field > svg{ flex:none; }
.sss-input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font:500 15px/1.2 'Manrope',sans-serif; color:var(--g-ink,#1A1A1A); padding:0;
}
.sss-input::placeholder{ color:var(--g-muted,#8C8C8C); font-weight:500; }
.sss-clear{
  flex:none; width:22px; height:22px; border:none; border-radius:50%;
  background:#cdd7e1; color:#fff; cursor:pointer; display:none;
  align-items:center; justify-content:center; font-size:13px; line-height:1;
}
.sss-clear.sss-on{ display:flex; }

/* ── Гүйдэг бие ── */
.sss-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 18px 40px; }
.sss-sec{ margin-top:26px; }
.sss-sec:first-child{ margin-top:16px; }
.sss-sechead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sss-sectitle{ font:800 16px/1 'Manrope',sans-serif; letter-spacing:-.2px; color:var(--g-ink,#1A1A1A); }
.sss-secnote{ font:600 12px/1 'Manrope',sans-serif; color:var(--g-muted,#8C8C8C); }
.sss-secaction{ font:700 12.5px/1 'Manrope',sans-serif; color:#8a97a3; background:none; border:none; cursor:pointer; padding:2px 0; }
.sss-secaction:active{ color:var(--g-ink,#1A1A1A); }

/* Recent — устгаж болох pill-үүд */
.sss-recent{ display:flex; flex-wrap:wrap; gap:9px; }
.sss-rpill{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  padding:9px 12px 9px 15px; background:#fff; border:1.5px solid var(--g-line,#E5EEF4); border-radius:999px;
  font:600 13.5px/1 'Manrope',sans-serif; color:#3c4a57; cursor:pointer; transition:border-color .15s;
}
.sss-rpill:active{ border-color:#c9d5e0; }
.sss-rpill span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sss-rpill .sss-rx{
  flex:none; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  color:#a8b4bf; font-size:15px; line-height:1;
}

/* Popular — 1–10 ранк, 2 багана (нарийн дэлгэцэнд 1) */
.sss-pop{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; row-gap:2px; }
.sss-popitem{
  display:flex; align-items:center; gap:12px; padding:9px 2px;
  cursor:pointer; border-radius:8px; transition:background .12s;
}
.sss-popitem:active{ background:var(--g-tint,#EAF4FB); }
.sss-poprank{ flex:none; width:16px; text-align:center; font:800 14px/1 'Manrope',sans-serif; color:#c1ccd6; }
.sss-popitem.sss-top .sss-poprank{ color:var(--g-pink,#E8547C); }
.sss-popterm{ flex:1; min-width:0; font:600 14px/1.3 'Manrope',sans-serif; color:#33404c;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Category — chip grid */
.sss-cats{ display:flex; flex-wrap:wrap; gap:9px; }
.sss-cat{
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px;
  background:var(--g-tint,#EAF4FB); border:1px solid var(--g-line,#E5EEF4); border-radius:999px;
  font:600 13.5px/1 'Manrope',sans-serif; color:#3c4a57; cursor:pointer; transition:background .15s, border-color .15s;
}
.sss-cat:active{ background:var(--g-tint,#EAF4FB); border-color:#d3dfea; }
.sss-cat .sss-catdot{ width:7px; height:7px; border-radius:50%; background:var(--g-pink,#E8547C); flex:none; }

/* Brands — хэвтээ гүйдэг pill-үүд */
.sss-brands{ display:flex; flex-wrap:wrap; gap:10px; }   /* доош эвхэгдэн цувина (хэвтээ гүйлт биш) */
.sss-brands::-webkit-scrollbar{ display:none; }
.sss-brand{
  flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  background:#fff; border:1.5px solid var(--g-line,#E5EEF4); border-radius:999px;
  font:700 13.5px/1 'Manrope',sans-serif; color:#33404c; cursor:pointer; white-space:nowrap; transition:border-color .15s;
}
.sss-brand:active{ border-color:#c9d5e0; }
.sss-bemoji{ font-size:15px; line-height:1; }

/* ── Autocomplete (бичиж эхлэхэд landing-ийг сольдог) ── */
.sss-ac{ padding-top:6px; }
.sss-acrow{
  display:flex; align-items:center; gap:12px; padding:13px 2px;
  border-bottom:1px solid var(--g-line,#E5EEF4); cursor:pointer; transition:background .12s;
}
.sss-acrow:active{ background:var(--g-tint,#EAF4FB); }
.sss-acicon{ flex:none; width:20px; color:#c1ccd6; display:flex; }
.sss-actext{ flex:1; min-width:0; font:500 14.5px/1.35 'Manrope',sans-serif; color:#33404c;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sss-actext .sss-hl{ color:var(--g-pink,#E8547C); font-weight:800; }
.sss-actag{ flex:none; font:700 11px/1 'Manrope',sans-serif; color:#7c93a8; background:var(--g-tint,#EAF4FB);
  border:1px solid var(--g-line,#E5EEF4); padding:5px 9px; border-radius:7px; }
.sss-acrow--brand .sss-actext{ font-weight:700; color:var(--g-ink,#1A1A1A); }

/* Мессеж / хоосон төлөв */
.sss-msg{ padding:40px 16px; text-align:center; font:600 14px/1.5 'Manrope',sans-serif; color:var(--g-muted,#8C8C8C); }
.sss-msg b{ display:block; color:#33404c; font-weight:800; margin-bottom:4px; font-size:15px; }

/* ══════════════════════════════════════════════════════════════════
   Desktop dropdown — хайлтын самбарын доор гарах самбар (>860px).
   body-д залгагдаж position:fixed-ээр нүдний доор байрлана (overflow clip-гүй). */
.sss-dd{
  position:fixed; z-index:3600;
  background:#fff; border:1.5px solid var(--g-line,#E5EEF4); border-radius:18px;
  box-shadow:0 22px 52px rgba(45,65,90,.20);
  max-height:72vh; overflow-y:auto; padding:8px 20px 18px; display:none;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--g-ink,#1A1A1A);
}
/* ⚠️ Нээх төлөв нь opacity-г анимацаас ХАМААРУУЛАХГҮЙ: keyframe-ийн opacity:0 нь таб
   background болоод анимаци throttle болоход 0 дээр гацаж dropdown үл үзэгдэх алдаа
   өгдөг байсан (утасны overlay transition ашигладаг тул ажилладаг байсны ялгаа). Тиймээс
   opacity үргэлж 1, зөвхөн жижиг transform слайдыг л анимацилна — анимаци зогссон ч
   агуулга үргэлж харагдана. */
.sss-dd.sss-dd-open{ display:block; opacity:1; animation:sssDdIn .16s cubic-bezier(.22,.61,.36,1); }
@keyframes sssDdIn{ from{ transform:translateY(-6px); } to{ transform:none; } }
.sss-dd .sss-sec{ margin-top:20px; }
.sss-dd .sss-sec:first-child{ margin-top:12px; }
.sss-dd .sss-sectitle{ font-size:14px; }
.sss-dd .sss-pop{ column-gap:24px; }
.sss-dd .sss-popitem{ cursor:pointer; }
.sss-dd .sss-cat{ cursor:pointer; }
.sss-dd .sss-brand,.sss-dd .sss-rpill,.sss-dd .sss-acrow{ cursor:pointer; }
.sss-dd .sss-brands{ margin:0 -20px; padding-left:20px; padding-right:20px; }
.sss-dd .sss-acrow{ padding:11px 2px; }
.sss-dd .sss-acrow:last-child{ border-bottom:none; }
@media(prefers-reduced-motion:reduce){ .sss-dd.sss-dd-open{ animation:none; } }

/* Нарийн дэлгэц — Popular (Их хайгдсан) 2 БАГАНА хэвээр (нягт, богино), gap багасгав */
@media(max-width:420px){
  .sss-pop{ grid-template-columns:1fr 1fr; column-gap:14px; }
  .sss-body{ padding-left:16px; padding-right:16px; }
  .sss-brands{ margin:0 -16px; padding-left:16px; padding-right:16px; }
}

/* Хөдөлгөөн багасгах */
@media(prefers-reduced-motion:reduce){
  .sss-overlay{ transition:opacity .12s, visibility .12s; transform:none; }
}

/* ── 🖼 Зурган хайлт (SS_IMAGE_ORDER_ENABLED) ── */
.sss-cam{ flex:none; width:30px; height:30px; margin-left:2px; border:none; border-radius:50%;
  background:transparent; color:var(--g-pink,#E8547C); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s; }
.sss-cam:active{ background:rgba(232,84,124,.12); }
.sss-imgload{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:52px 20px; }
.sss-spin{ width:34px; height:34px; border:3px solid var(--g-line,#E5EEF4); border-top-color:var(--g-pink,#E8547C);
  border-radius:50%; animation:sssSpin .8s linear infinite; }
@keyframes sssSpin{ to{ transform:rotate(360deg); } }
.sss-imgload-t{ font:600 14px/1.3 'Manrope',sans-serif; color:var(--g-muted,#8C8C8C); }
.sss-imgres{ padding-top:2px; }
.sss-imgid{ margin:8px 2px 4px; padding:12px 14px; background:var(--g-tint,#EAF4FB); border-radius:12px; }
.sss-imgid-t{ font:800 11px/1 'Manrope',sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--g-pink,#E8547C); }
.sss-imgid-q{ margin-top:5px; font:700 15px/1.3 'Manrope',sans-serif; color:var(--g-ink,#1A1A1A); }
.sss-imgnote{ padding:12px 2px 4px; font:700 12px/1 'Manrope',sans-serif; letter-spacing:.2px; color:var(--g-muted,#8C8C8C); }
.sss-imgrow{ gap:12px; }
.sss-imgthumb{ flex:none; width:46px; height:46px; border-radius:9px; object-fit:cover;
  background:var(--g-tint,#EAF4FB); border:1px solid var(--g-line,#E5EEF4); }
.sss-imgprice{ flex:none; margin-left:auto; padding-left:8px; font:800 13.5px/1 'Manrope',sans-serif; color:var(--g-ink,#1A1A1A); }
.sss-imgsoon{ margin:14px 2px 6px; padding:13px 14px; border:1px dashed #d6e2ec; border-radius:12px;
  text-align:center; font:600 13px/1.4 'Manrope',sans-serif; color:var(--g-muted,#8C8C8C); }
/* Off-catalog — Olive Young-оос авчрах (Phase B) */
.sss-oy-search{ display:block; width:calc(100% - 4px); margin:14px 2px 8px; padding:14px; border:none;
  border-radius:12px; background:var(--g-pink,#E8547C); color:#fff; cursor:pointer;
  font:800 14px/1 'Manrope',sans-serif; letter-spacing:.2px; transition:opacity .15s; }
.sss-oy-search:active{ opacity:.85; }
.sss-oycard{ gap:12px; }
.sss-oycard.sss-oy-sold{ opacity:.5; }
.sss-oy-note{ padding:12px 2px 4px; font:500 12px/1.45 'Manrope',sans-serif; color:var(--g-muted,#8C8C8C); }