/* ===== Lumé · القالب النظيف الأبيض ===== */
body.cl{
  --primary:#111111;
  --ink:#111111;
  --accent:#e0464f;
  --accent-soft:#fde9ea;
  --muted:#6f6f6f;
  --line:#eeeeee;
  --soft:#f5f5f5;
  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --sale:#e0464f;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  background:#fff;
  color:var(--ink);
  font-family:"Cairo",system-ui,sans-serif;
}
body.cl,body.cl button,body.cl input,body.cl select,body.cl textarea{font-family:"Cairo",system-ui,sans-serif}
body.cl :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.cl .container{max-width:1320px;padding:0 24px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{inset-inline-start:12px;top:12px}

/* أزرار */
body.cl .btn{border-radius:12px;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
body.cl .btn-outline{background:#fff;color:var(--ink);border-color:var(--ink)}
body.cl .btn-light{background:var(--soft);color:var(--ink);border-color:var(--soft)}
.cl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:12px;padding:14px 30px;font-weight:700;font-size:15.5px;transition:background .15s}
.cl-btn:hover{background:#000}
.cl-more{font-size:14px;font-weight:700;color:var(--ink);border-bottom:1.5px solid transparent}
.cl-more:hover{border-color:var(--ink)}

/* ===== الهيدر ===== */
body.cl .announce{background:var(--ink);color:#fff;font-size:13px;padding:7px 12px;font-weight:500}
body.cl .site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:none;transition:box-shadow .2s}
body.cl .site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.06)}
body.cl .header-row{display:flex;align-items:center;gap:28px;min-height:76px}
body.cl .logo{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--ink);white-space:nowrap}
body.cl .logo img{max-height:44px;width:auto}
.cl-nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:15px;white-space:nowrap}
.cl-nav > a,.cl-nav .gw-dd-btn{color:var(--ink);padding:6px 0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;font-weight:600}
.cl-nav > a:hover,.cl-nav .gw-dd-btn:hover,.cl-nav > a.on{color:var(--accent)}
.cl-nav > a.hot{color:var(--accent)}
.gw-dd{position:relative}
.gw-dd-btn svg{width:16px;height:16px;transition:transform .2s}
.gw-dd.open .gw-dd-btn svg{transform:rotate(180deg)}
.gw-dd-panel{position:absolute;top:calc(100% + 22px);right:-20px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.12);padding:24px 26px;display:none;grid-template-columns:repeat(4,minmax(150px,1fr));gap:18px 28px;width:min(900px,92vw);max-height:72vh;overflow:auto;z-index:60}
.gw-dd.open .gw-dd-panel{display:grid}
.gw-dd-col{display:flex;flex-direction:column;gap:5px}
.gw-dd-col a{font-size:14px;color:var(--muted);font-weight:500}
.gw-dd-col a:hover{color:var(--accent)}
.gw-dd-col a.gw-dd-title{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:2px}
.cl-search{flex:1;display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:0 16px;height:46px;min-width:200px;border:1px solid transparent;transition:border-color .15s,background .15s}
.cl-search:focus-within{background:#fff;border-color:var(--ink)}
.cl-search svg{width:19px;height:19px;color:#777;flex:none}
.cl-search input{flex:1;border:0;background:transparent;font-size:14.5px;outline:none;min-width:0}
body.cl .header-icons{display:flex;align-items:center;gap:8px}
body.cl .icon-btn{width:44px;height:44px;border-radius:50%}
body.cl .icon-btn.soft{background:var(--soft)}
body.cl .icon-btn.dark{background:var(--ink);color:#fff}
body.cl .icon-btn.dark:hover{background:#000}
body.cl .icon-btn:hover{background:#ececec}
body.cl .cart-count{background:var(--accent);color:#fff;border:2px solid #fff}
body.cl .menu-toggle,.cl-search-btn{display:none!important}
body.cl .main-nav{display:none}
.hdr-search{padding:0 0 12px}
.hdr-search .container{display:flex;gap:8px}
.hdr-search input{flex:1;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:12px 16px;font-size:15px;outline:none}
.hdr-search button{width:48px;border-radius:12px;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}
.hdr-search button svg{width:20px;height:20px}
.cl-chips{border-top:1px solid var(--line)}
.cl-chips .container{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.cl-chips .container::-webkit-scrollbar{display:none}
.cl-chips a{flex:none;padding:7px 16px;border:1px solid #e6e6e6;border-radius:999px;font-size:13.5px;font-weight:600;color:#444;white-space:nowrap;transition:.15s}
.cl-chips a:hover{border-color:var(--ink);color:var(--ink)}
.cl-chips a.on{background:var(--ink);border-color:var(--ink);color:#fff}
body.cl .drawer-panel{background:#fff}
body.cl .drawer-search input{border-radius:12px;background:var(--soft)}

/* ===== البنر ===== */
.cl-hero{padding:22px 0 6px}
.cl-slider{position:relative;border-radius:24px;overflow:hidden;background:var(--soft)}
.cl-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cl-slides::-webkit-scrollbar{display:none}
.cl-slide{flex:0 0 100%;scroll-snap-align:start;display:block;aspect-ratio:1280/420;max-height:440px}
.cl-slide img{width:100%;height:100%;object-fit:cover}
.cl-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.cl-dots button{width:7px;height:7px;border-radius:4px;border:0;background:rgba(255,255,255,.7);padding:0;cursor:pointer;transition:width .2s}
.cl-dots button.on{width:24px;background:var(--ink)}
.cl-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--accent-soft);border-radius:24px;padding:48px 64px;min-height:360px;overflow:hidden}
.cl-banner-copy{max-width:500px}
.cl-kicker{font-size:15px;font-weight:700;color:var(--accent)}
.cl-banner h1{margin:8px 0 12px;font-size:clamp(32px,4.4vw,54px);line-height:1.2;font-weight:800}
.cl-banner p{margin:0 0 24px;font-size:17px;color:#555;line-height:1.8}
.cl-banner-art{display:flex;align-items:flex-end;gap:18px;flex:none}
.cl-bp{display:grid;place-items:center;background:#fff;border-radius:22px;box-shadow:0 20px 44px rgba(224,70,79,.16);overflow:hidden}
.cl-bp img{width:100%;height:100%;object-fit:contain;padding:12%}
.cl-bp0{width:170px;height:220px}
.cl-bp1{width:210px;height:280px}
.cl-bp2{width:150px;height:190px}

/* ===== العناوين ===== */
body.cl .section{padding:30px 0}
.gw-title{font-weight:800;font-size:clamp(20px,2.2vw,26px);margin:0;line-height:1.3}
.gw-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.gw-pill{font-size:14px;font-weight:700;color:var(--ink)}
.home-sec-sub{margin:4px 0 0;font-size:14px}

/* الفئات دوائر */
.cl-circles{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scroll-snap-type:x proximity}
.cl-circle{flex:0 0 132px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;scroll-snap-align:start}
.cl-circle span{width:132px;height:132px;border-radius:50%;background:#f8eef0;display:grid;place-items:center;overflow:hidden;transition:transform .2s}
.cl-circle:hover span{transform:scale(1.04)}
.cl-circle img{width:72%;height:72%;object-fit:contain}
.cl-circle b{font-size:14px;font-weight:700;line-height:1.4}

/* مربعات الأقسام (من أقسام الصفحة الرئيسية) */
.gw-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.gw-cats.gw-cats-rail{display:flex;overflow-x:auto;padding-bottom:8px}
.gw-cats-rail .gw-cat{flex:0 0 170px}
.gw-cat{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.gw-cat-img{width:100%;aspect-ratio:1/1;border-radius:50%;background:#f8eef0;display:grid;place-items:center;overflow:hidden}
.gw-cat-img img{width:72%;height:72%;object-fit:contain}
.gw-cat b{font-size:14px}
.gw-cat small{color:var(--muted);font-size:12.5px}

/* ===== كرت المنتج ===== */
body.cl .grid{gap:16px}
.cl-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body.cl .card{background:#fff;border:1px solid #efefef;border-radius:18px;padding:0;overflow:hidden;box-shadow:none;transition:box-shadow .2s,border-color .2s}
body.cl .card:hover{box-shadow:var(--shadow);border-color:#e6e6e6}
body.cl .card-img{margin:0!important;border-radius:0;background:#fff;aspect-ratio:1/1;position:relative;overflow:hidden;display:block}
body.cl .card-img img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .3s;mix-blend-mode:normal}
body.cl .card-img img.alt{display:none!important}
body.cl .card:hover .card-img img{transform:scale(1.03)}
body.cl .card-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:3px}
body.cl .card-brand{font-size:12px;color:#888;font-weight:600}
body.cl .card-title{font-size:14px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em;color:var(--ink)}
body.cl .card-rating{font-size:12px;color:var(--muted)}
body.cl .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
body.cl .price-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
body.cl .price{font-weight:800;font-size:16px;color:var(--ink)}
body.cl .price-row del,body.cl .price-row s{color:#aaa;font-size:12px}
body.cl .card-cart{flex:none;width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;transition:background .15s}
body.cl .card-cart:hover{background:var(--accent)}
body.cl .card-cart svg{width:20px;height:20px;stroke-width:2.2}
body.cl .card-cart.off{background:#ededed;color:#b5b5b5;cursor:not-allowed}
body.cl .card form{margin:0}
body.cl .tags{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:4px;z-index:1}
body.cl .tag{border-radius:999px;font-size:12px;font-weight:700;padding:3px 10px;background:var(--ink);color:#fff}
body.cl .tag-sale{background:var(--accent);color:#fff}
body.cl .soldout{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;border-radius:10px;background:rgba(17,17,17,.75);color:#fff;font-size:12.5px;font-weight:700;padding:6px}
body.cl .card.is-out .card-img img{opacity:1;filter:grayscale(.4)}

/* سلايدر المنتجات */
body.cl .slider .card{min-width:220px;max-width:240px}
body.cl .rail-btn{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:50%;color:var(--ink)}

/* مربعين الأقسام */
.cl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cl-tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:180px;border-radius:20px;background:#f3f0ea;padding:28px 32px;overflow:hidden;color:var(--ink)}
.cl-tile.dark{background:var(--ink);color:#fff}
.cl-tile-copy{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.cl-tile b{font-size:26px;font-weight:800}
.cl-tile small{font-size:14px;color:#666}
.cl-tile.dark small{color:#bbb}
.cl-tile i{font-style:normal;font-weight:700;font-size:14px;margin-top:10px}
.cl-tile img{width:150px;height:150px;object-fit:contain;background:#fff;border-radius:18px;padding:10px;flex:none}

/* الماركات */
.cl-brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cl-brand{height:90px;border:1px solid var(--line);border-radius:16px;display:grid;place-items:center;background:#fff;padding:10px;transition:border-color .15s}
.cl-brand:hover{border-color:var(--ink)}
.cl-brand img{max-width:80%;max-height:60px;object-fit:contain}
.cl-brand span{font-weight:800;font-size:15px;text-align:center;direction:ltr}

/* آراء */
.gw-rev{background:var(--soft);border-radius:18px;padding:22px;margin:0;min-width:290px;max-width:330px;display:flex;flex-direction:column;gap:12px}
.gw-rev blockquote{margin:0;font-size:14.5px;line-height:1.85;color:#444;flex:1}
.gw-rev figcaption{display:flex;align-items:center;gap:12px}
.gw-av{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800}
.gw-rev figcaption b{display:block;font-size:14px}
.gw-rev figcaption a{font-size:12.5px;color:var(--muted)}
.gw-stars{display:inline-flex;gap:2px;color:#f2a516}
.gw-stars svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* ===== المميزات + الفوتر ===== */
body.cl .features{background:#fff;border-top:1px solid var(--line);padding:26px 0;margin-top:30px}
body.cl .feature svg{color:var(--ink)}
body.cl .site-footer{background:var(--bg-soft);color:var(--ink);padding:44px 0 100px;border-top:1px solid var(--line)}
body.cl .site-footer h4{color:var(--ink);font-weight:800}
body.cl .site-footer a{color:#555}
body.cl .site-footer a:hover{color:var(--accent)}
body.cl .site-footer .muted,body.cl .site-footer p{color:#777}
body.cl .ft-logo{font-size:28px;font-weight:800;color:var(--ink)!important}
body.cl .copy{border-top:1px solid #e5e5e5;color:#888}
body.cl .wa-float{box-shadow:0 10px 28px rgba(0,0,0,.18)}

/* ===== صفحات المتجر ===== */
body.cl .page-title{font-weight:800;font-size:clamp(24px,3vw,34px)}
body.cl .filters,body.cl .panel,body.cl .summary,body.cl .auth-box,body.cl .success-box{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:none}
body.cl .chip,body.cl .pill{border-radius:999px;background:#fff;border:1px solid #e6e6e6}
body.cl .chip.active,body.cl .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
body.cl input[type=text],body.cl input[type=tel],body.cl input[type=email],body.cl input[type=password],body.cl input[type=number],body.cl input[type=search],body.cl select,body.cl textarea{border-radius:12px;border-color:#e3e3e3;background:#fff}
body.cl .pager a,body.cl .pager span{border-radius:10px}
body.cl .crumbs{color:var(--muted)}
body.cl .product-page{gap:40px}
body.cl .gallery-main{background:#fff!important;border:1px solid var(--line);border-radius:22px}
body.cl .gallery-main img{mix-blend-mode:normal}
body.cl .thumbs button{border-radius:12px;background:#fff;border:2px solid var(--line)}
body.cl .thumbs button.active{border-color:var(--ink)}
body.cl .pinfo h1{font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.45}
body.cl .pbrand{color:#888;font-weight:700}
body.cl .price-row.big .price{font-size:28px}
body.cl .variant{border-radius:10px}
body.cl .variants input:checked + .variant,body.cl .variant.active{border-color:var(--ink);background:var(--ink);color:#fff}
body.cl .qty{border-radius:12px;background:#fff}
body.cl .perks{background:var(--soft);border:0;border-radius:16px}
body.cl .perks svg{color:var(--ink)}
body.cl .tabs-box{background:#fff;border:1px solid var(--line);border-radius:18px}
body.cl .earn-box,body.cl .points-card{background:var(--accent-soft);border:0;border-radius:16px}
body.cl .review{background:var(--soft);border-radius:16px;border:0}
body.cl .cart-line{background:#fff;border:1px solid var(--line);border-radius:18px}
body.cl .cart-line img{border-radius:12px;background:#fff;border:1px solid var(--line)}
body.cl .pay-option{border-radius:14px}
body.cl .tag.big{font-size:13px}

/* ===== الشاشات الصغيرة ===== */
@media (max-width:1200px){
  .cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .cl-nav{gap:16px}
  .cl-brands{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1000px){
  .cl-nav,.cl-search{display:none}
  body.cl .menu-toggle,.cl-search-btn{display:inline-flex!important}
  body.cl .header-row{min-height:62px;gap:8px}
  body.cl .logo{font-size:26px;margin-inline-end:auto}
  .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cl-banner{padding:34px;min-height:0}
  .cl-bp0,.cl-bp2{display:none}
  .gw-cats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  body.cl .container{padding:0 14px}
  .cl-hero{padding-top:12px}
  .cl-slider,.cl-banner{border-radius:18px}
  .cl-slide{aspect-ratio:16/9}
  .cl-banner{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .cl-banner-art{display:none}
  .cl-banner p{font-size:15px}
  .cl-grid,body.cl .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  body.cl .card{border-radius:14px}
  body.cl .card-body{padding:8px 10px 10px}
  body.cl .card-title{font-size:13px}
  body.cl .price{font-size:14.5px}
  body.cl .card-cart{width:34px;height:34px}
  .cl-circle{flex-basis:86px}
  .cl-circle span{width:86px;height:86px}
  .cl-circle b{font-size:12.5px}
  .cl-tiles{grid-template-columns:1fr}
  .cl-tile{min-height:140px;padding:22px}
  .cl-tile b{font-size:21px}
  .cl-tile img{width:100px;height:100px}
  .cl-brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-brand{height:72px}
  .gw-cats{grid-template-columns:repeat(3,1fr);gap:10px}
  .gw-cats-rail .gw-cat{flex-basis:100px}
  body.cl .slider .card{min-width:160px;max-width:170px}
}
@media (prefers-reduced-motion:reduce){
  body.cl *{transition:none!important;scroll-behavior:auto!important}
}

/* شريط الأقسام: بالكمبيوتر كله يبين (سطرين إذا احتاج)، بالموبايل يتسحب */
@media (min-width:1001px){
  .cl-chips .container{flex-wrap:wrap;justify-content:center;overflow:visible;gap:6px 8px}
  .cl-chips a{padding:6px 14px;font-size:13px}
}
@media (max-width:1000px){
  .cl-chips .container{-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent);padding-inline-end:40px}
}
/* من تنزلين بالصفحة، شريط الأقسام يختفي حتى الهيدر يبقى صغير */
@media (min-width:1001px){.site-header.scrolled .cl-chips{display:none}}

/* دوائر الفئات: دائرة بيضاء نظيفة بإطار خفيف وظل ناعم (بدون وردي) */
.cl-circle span,.gw-cat-img{position:relative;background:#fff!important;border:1px solid #ececec;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.cl-circle:hover span,.gw-cat:hover .gw-cat-img{border-color:#111;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.cl-circle img,.gw-cat-img img{mix-blend-mode:normal;width:78%;height:78%;object-fit:contain;border-radius:50%}
.cl-circle b,.gw-cat b{margin-top:2px}
@media (max-width:640px){
  body.cl .section{padding:20px 0}
  .gw-row-head{margin-bottom:12px}
  .cl-circles{gap:12px}
}

/* البنر يبين كامل بكل الشاشات (بدون قص) */
.cl-slide{aspect-ratio:auto!important;max-height:none!important;height:auto}
.cl-slide img{width:100%;height:auto!important;object-fit:contain;display:block}
.cl-slides{align-items:flex-start}

/* ===== تسوّقي حسب مشكلتج ===== */
.cn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cn-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px 10px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.cn-tile:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-2px)}
.cn-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#f6f6f6;color:var(--ink)}
.cn-tile:nth-child(4n+1) .cn-ic{background:#fde9ea;color:#c23a43}
.cn-tile:nth-child(4n+2) .cn-ic{background:#e9f2fb;color:#2f63a8}
.cn-tile:nth-child(4n+3) .cn-ic{background:#eaf6ef;color:#2c7a52}
.cn-tile:nth-child(4n+4) .cn-ic{background:#f6effb;color:#7046a8}
.cn-ic svg{width:28px;height:28px;stroke-width:1.7}
.cn-tile b{font-size:14.5px;font-weight:800;line-height:1.4}
.cn-tile small{font-size:12.5px;color:var(--muted)}
@media (max-width:1000px){.cn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.cn-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cn-tile{padding:14px 6px 12px;border-radius:14px}.cn-ic{width:48px;height:48px}.cn-ic svg{width:24px;height:24px}.cn-tile b{font-size:12.5px}}

/* ===== اقتراحات البحث ===== */
.sg-host{position:relative}
.sg-box{position:absolute;top:calc(100% + 8px);right:0;left:0;min-width:320px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.14);z-index:80;max-height:min(70vh,560px);overflow:auto;padding:8px;text-align:right}
.hdr-search .sg-box{right:24px;left:24px;top:calc(100% - 4px)}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sg-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:700;color:var(--ink)}
.sg-chip img{height:18px;width:auto;max-width:40px;object-fit:contain}
.sg-chip:hover{background:var(--ink);color:#fff}
.sg-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;color:var(--ink)}
.sg-item:hover,.sg-item.on,.sg-chip.on,.sg-all.on{background:var(--soft)}
.sg-item img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;flex:none}
.sg-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.sg-txt small{font-size:11.5px;color:#888;font-weight:600}
.sg-txt b{font-size:13.5px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sg-pr{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-weight:800;font-size:13.5px;white-space:nowrap}
.sg-pr s{font-size:11.5px;color:#aaa;font-weight:500}
.sg-pr em{font-style:normal;font-size:11px;color:var(--accent);font-weight:700}
.sg-item.out img{filter:grayscale(.5)}
.sg-all{display:block;text-align:center;padding:12px;margin-top:4px;border-top:1px solid var(--line);font-weight:800;font-size:14px;color:var(--ink)}
.sg-empty{padding:18px;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:640px){.sg-box{min-width:0}.hdr-search .sg-box{right:14px;left:14px}}
.cl-search input:focus-visible,.hdr-search input:focus-visible{outline:none}