/* ============================================================================
   listing-hero.css — ჩამონათვალის გვერდების მუქი ჰერო (ერთადერთი წყარო)
   ----------------------------------------------------------------------------
   ვინ იყენებს:
     · /price-changes                                   (price-changes.php)
     · /markets /pharmacies /electronics /construction /kids
                                                        (templates/listing-v7.php)
   რას მოიცავს: სათაური + ქვესათაური, ფასის ცვლილების ოთხი მრიცხველი და
   ფილტრების ერთი რიგი (ძიება · მაღაზია · კატეგორია · ქალაქი · დალაგება).

   პრეფიქსი `lh-` = listing hero. წესები ბრტყელია — კომპონენტი ყოველთვის
   `.lh-hero`-ს შიგნითაა, ამიტომ base + override წყვილები გაერთიანებულია.
   `!important` არსად — სპეციფიკურობა საკმარისია (`.lh-hero .lh-search button`
   0,2,1 > `.v7-lsearch button` 0,1,1).
   ============================================================================ */

/* ── 1. ჰეროს კონტეინერი ─────────────────────────────────────────────────── */
/* ფონი და მინდვრები — ზუსტად ისეთი, როგორიც მთავარი გვერდის `.v7-hero`-ს აქვს
   (იგივე გრადიენტი, იგივე რადიუსი, იგივე ვერტიკალური მინდორი), რომ ჰედერიდან
   ქვემოთ ყველა გვერდი ერთნაირად იწყებოდეს.
   overflow:hidden განზრახ არ არის — ის მაღაზიის ჩამოსაშლელს კიდეზე ჭრიდა; ფონის
   კვეთას `.v7-hero-bg` თავის თავზე იღებს. */
.lh-hero{position:relative;border-radius:18px;margin:14px 0;
  padding:22px 22px 18px;color:#fff;
  background:radial-gradient(130% 130% at 0% 0%,#3b0764,#2e1065 42%,#0f0420)}
/* დეკორატიული სიმბოლოები — templates/partials/hero-symbols.php; სტილი და
   შვილების დაწყობა (`.v7-hero-bg~*`) css/home-v7.css-შია, ყველა ჰეროსთვის ერთად. */

/* ── 2. სათაური ──────────────────────────────────────────────────────────── */
.lh-head{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.lh-h1{display:flex;align-items:center;gap:11px;margin:0;color:#fff;
  font-family:'BPG No9','BPG Glaho Bold','Noto Sans Georgian',sans-serif;
  font-size:30px;line-height:1.05;font-weight:400;letter-spacing:.3px}
.lh-h1 .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;font-size:19px;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.lh-sub{margin:0;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.45}

/* ── 3. ოთხი მრიცხველი — ბარათის ნიშნების იგივე ფერები ───────────────────── */
.lh-counts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.lh-count{display:flex;align-items:center;gap:9px;flex:1;min-width:170px;
  padding:10px 13px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;text-align:left;text-decoration:none;
  font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.lh-count:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.lh-count .ci{flex:none;width:34px;height:34px;border-radius:9px;display:grid;
  place-items:center;color:#fff;font-size:15px}
/* .cn რჩება inline — ბლოკად ქცევა strut-ს აშორებს და ბარათს 3px-ით დაბლა ხდის */
.lh-count .cn{font-size:21px;font-weight:800;line-height:1}
.lh-count .cl{display:block;margin-top:2px;font-size:11px;font-weight:700;
  line-height:1.25;color:rgba(255,255,255,.75)}
.lh-count.both .ci{background:#7c3aed}.lh-count.both .cn{color:#c4b5fd}
.lh-count.disc .ci{background:#16a34a}.lh-count.disc .cn{color:#86efac}
.lh-count.drop .ci{background:#0891b2}.lh-count.drop .cn{color:#a5f3fc}
.lh-count.up   .ci{background:#dc2626}.lh-count.up   .cn{color:#fca5a5}
/* არჩეული — შევსებული ფონი, ნათელი ჩარჩო და რგოლი */
.lh-count.on{background:rgba(255,255,255,.2);border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.18),0 10px 24px -14px rgba(0,0,0,.7)}
.lh-count.on .cl{color:#fff}
.lh-count.on::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:10px;margin-left:auto;opacity:.85}

/* ── 4. ფილტრების რიგი ───────────────────────────────────────────────────── */
.lh-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0}

/* ძიება — .v7-lsearch-ის მუქ ფონზე მორგებული ვარიანტი */
.lh-search{flex:1;min-width:210px;height:42px;padding:0 4px 0 13px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.lh-hero .lh-search:focus-within{border-color:rgba(255,255,255,.9);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,.28)}
.lh-hero .lh-search button{width:34px;height:34px;border:0;border-radius:9px;
  background:#7c3aed;color:#fff}
.lh-hero .lh-search button:hover{background:#6d28d9}

/* native select (კატეგორია · ქალაქი · დალაგება) */
.lh-sel{appearance:none;-webkit-appearance:none;height:42px;padding:0 32px 0 13px;
  border-radius:11px;max-width:230px;cursor:pointer;
  background-color:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);
  color:#1e0b3a;font-family:inherit;font-size:13.5px;font-weight:700;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px}
.lh-sel:hover{border-color:rgba(255,255,255,.9)}
.lh-sel:focus,.lh-sel:focus-visible{outline:none;border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}

/* ── 5. მაღაზიის ჩამოსაშლელი (ძებნადი) ───────────────────────────────────── */
.lh-dd{position:relative}
.lh-dd-btn{display:inline-flex;align-items:center;gap:9px;min-height:42px;
  padding:8px 13px;border-radius:11px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:#1e0b3a;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5)}
.lh-dd-btn:hover{border-color:rgba(255,255,255,.9)}
.lh-dd-btn>i:first-child{color:#7c3aed}
.lh-dd-btn img{width:22px;height:22px;border-radius:50%;object-fit:contain;background:#fff}
.lh-dd-btn .lb{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-dd-btn .chev{margin-left:2px;color:#94a3b8;transition:transform .15s}
.lh-dd.open .lh-dd-btn .chev{transform:rotate(180deg)}
.lh-dd-panel{position:absolute;z-index:30;top:calc(100% + 7px);left:0;width:300px;
  max-width:84vw;padding:10px;display:none;background:#fff;border:1px solid #e2e8f0;
  border-radius:14px;box-shadow:0 20px 44px -18px rgba(2,32,20,.4)}
.lh-dd.open .lh-dd-panel{display:block;animation:lhDd .14s ease}
@keyframes lhDd{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.lh-dd-search{position:relative;margin-bottom:8px}
.lh-dd-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:#94a3b8;font-size:13px}
.lh-dd-search input{width:100%;box-sizing:border-box;border:1.5px solid #e2e8f0;
  border-radius:10px;padding:9px 12px 9px 33px;font-size:13.5px;font-family:inherit;
  color:#0f172a;background:#fff;-webkit-appearance:none;appearance:none}
.lh-dd-search input::placeholder{color:#94a3b8}
.lh-dd-search input:focus{outline:none;border-color:#7c3aed;background:#fff}
/* სქროლი — თხელი და ბრენდის იისფერი, არა სისტემური ნაცრისფერი ზოლი */
.lh-dd-list{max-height:300px;overflow-y:auto;overflow-x:hidden;display:flex;
  flex-direction:column;gap:2px;padding-right:4px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#ddd6fe transparent}
.lh-dd-list::-webkit-scrollbar{width:6px}
.lh-dd-list::-webkit-scrollbar-track{background:transparent}
.lh-dd-list::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:999px}
.lh-dd-list::-webkit-scrollbar-thumb:hover{background:#c4b5fd}
/* `.lh-dd`-ით დაწყებული სელექტორი აუცილებელია: `.v7 a{color:inherit}` (0,1,1) სხვა
   შემთხვევაში ჯაბნის და ჰეროს თეთრი ფერი ჩამოსაშლელში სახელებს უხილავს ხდის. */
.lh-dd .lh-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;border-radius:9px;background:none;text-align:left;text-decoration:none;
  color:#334155;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.lh-opt:hover{background:#f1f5f9}
.lh-opt.on{background:#f5f3ff;color:#6d28d9}
.lh-opt img{flex:none;width:24px;height:24px;border-radius:50%;object-fit:contain;
  background:#fff;border:1px solid #e8edf3}
.lh-opt .mono{flex:none;width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;background:#e2e8f0;color:#475569;font-weight:800;font-size:11px}
.lh-opt .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-opt .cnt{font-size:11.5px;color:#94a3b8;font-weight:700}
.lh-opt-none{padding:14px;text-align:center;color:#94a3b8;font-size:13px}

/* ── 6. დალაგება — რიგის მარჯვენა კიდეზე ─────────────────────────────────── */
.lh-sorts{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
/* ბმულ-ვარიანტი: `.v7 a{color:inherit}` (0,1,1) ჯაბნის `.lh-sort`-ს (0,1,0) — ვწევთ. */
.lh-sorts a.lh-sort{color:rgba(255,255,255,.9)}
.lh-sorts a.lh-sort.on{color:#fff}
.lh-sort{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;
  border-radius:11px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.3);transition:background .15s,border-color .15s}
.lh-sort:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.lh-sort.on{background:#7c3aed;color:#fff;border-color:rgba(255,255,255,.5);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.lh-sort.on:hover{background:#6d28d9;border-color:rgba(255,255,255,.75)}
.lh-sort.on.down{background:#16a34a}
.lh-sort.on.up{background:#dc2626}

/* ── 7. ვალუტის ჰერო — ცოცხალი დროშტამპი + კურსების დაფა ─────────────────── */
.lh-count.live .ci{background:#f59e0b}
.lh-count.live .cn{color:#fcd34d;font-size:15px}
/* სათაურის რიგი: მარცხნივ h1, მარჯვნივ მოქმედების ღილაკები */
.lh-head--row{flex-direction:row;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px}
.lh-controls--board{display:block}
.lh-board{margin:0;max-width:none}

/* ჰეროში დაფას საკუთარი ფონი არ სჭირდება — ჩიპები პირდაპირ ჰეროზე დგას */
.lh-board{background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin:0}
/* `.v7-wg:hover{transform:translateY(-3px)}` ვიჯეტ-ბარათებისთვისაა (მთავარი გვერდი).
   ჰეროში ვიჯეტი ბარათი აღარაა და ჰოვერზე არ უნდა ახტეს. სელექტორი განზრახ სამ
   კლასიანია — `.lh-hero .v7-wg:hover` (0,3,0) > `.v7-wg:hover` (0,2,0) — რომ შედეგი
   ფაილების ჩატვირთვის რიგზე არ იყოს დამოკიდებული. ერთადერთი რეაქცია — ტიკერის გაჩერება. */
.lh-hero .v7-wg,
.lh-hero .v7-wg:hover{transform:none;box-shadow:none;transition:none}
.lh-board .v7-wgh{margin:0 0 4px;padding-bottom:9px;border-bottom-color:rgba(255,255,255,.16)}
.lh-board .v7-wgt i{border-color:rgba(255,255,255,.4)}

/* ── 7a. მორბენალი სტრიქონი (.cb-ticker) ─────────────────────────────────── */
/* ორი იდენტური ნაკრები; ანიმაცია ზუსტად ერთ ნაკრებზე გადადის → ნაკერი არ ჩანს. */
.cb-ticker{overflow:hidden;margin-top:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.cb-track{display:flex;width:max-content;animation:cbRun 34s linear infinite}
.cb-set{display:flex;gap:10px;padding-right:10px}
.cb-set .v7-cb-row{flex:none;margin-top:0;gap:10px}
.cb-ticker:hover .cb-track,
.cb-ticker:focus-within .cb-track{animation-play-state:paused}
@keyframes cbRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .cb-track{animation:none}
  .cb-ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
/* ლეგენდა სათაურის რიგში — ფერები ტიკერში მნიშვნელობას ინარჩუნებს */
.cb-legend{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:11px;font-weight:700}
.cb-lg{display:inline-flex;align-items:center;gap:5px}
.cb-lg::before{content:"";width:8px;height:8px;border-radius:50%}
.cb-lg.buy{color:#34d399}.cb-lg.buy::before{background:#34d399;box-shadow:0 0 7px #34d399}
.cb-lg.sell{color:#f87171}.cb-lg.sell::before{background:#f87171;box-shadow:0 0 7px #f87171}
@media(max-width:560px){
  .lh-board{padding:12px}
  .cb-ticker{margin-top:8px}
  .cb-set .v7-cb-row{padding:9px 10px}
  .cb-set .v7-cb-p{font-size:16px}
  .cb-legend{gap:9px;font-size:10.5px}
}

/* ── 7b. საწვავის კალკულატორი — ერთი ბარათი ჰეროში ───────────────────────── */
/* ფაქტურა მრიცხველების იდენტურია (rgba .1 ფონი, 1.5px rgba .2 ჩარჩო), რომ ჰეროს
   სამივე რიგი — სათაური, მრიცხველები, კალკულატორი — ერთ ენაზე კითხულობდეს. */
.lh-calc{padding:12px 14px 13px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2)}
.lh-calc-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;color:rgba(255,255,255,.75)}
.lh-calc-h i{color:#c4b5fd;font-size:12px}
.lh-calc-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.lh-calc-row .lh-sel{flex:1 1 160px;max-width:240px}

/* ლიტრი — ველი და ერთეული ერთ ბლოკში, select-ების იმავე გეომეტრიაზე */
.lh-calc-qty{display:inline-flex;align-items:center;gap:8px;height:42px;
  padding:0 13px 0 4px;border-radius:11px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5)}
.lh-calc-qty:focus-within{border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.lh-num{width:62px;height:36px;padding:0 4px 0 9px;border:0;background:transparent;
  color:#1e0b3a;font-family:inherit;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.lh-num:focus,.lh-num:focus-visible{outline:none}
.lh-num--wide{width:96px}
.lh-calc-unit{font-size:12px;font-weight:700;color:#6d28d9;white-space:nowrap}

/* შედეგი — რიგის მარჯვენა კიდეზე, ბრენდის იისფერზე */
.lh-calc-out{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  height:42px;padding:0 16px;border-radius:11px;background:#7c3aed;
  border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.lh-calc-eq{font-size:14px;font-weight:800;color:rgba(255,255,255,.55)}
.lh-calc-total{font-family:'BPG No9','BPG Glaho Bold',sans-serif;font-size:21px;
  font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.lh-calc-lari{font-size:14px;font-weight:700;color:rgba(255,255,255,.75)}
@media(max-width:560px){
  .lh-calc-row .lh-sel{max-width:none;flex:1 1 100%}
  .lh-calc-qty{flex:1 1 auto}
  .lh-num{flex:1;width:auto}
  .lh-calc-out{margin-left:0;flex:0 0 auto}
}

/* ── 8. ჰეროს ქვემოთ — შედეგების ზოლი ────────────────────────────────────── */
.lh-toolbar{margin:0 2px 12px;color:#64748b;font-size:13.5px;font-weight:600}

/* ── 9. მინდვრები და მობილური — `.v7-hero`-ს იდენტური ─────────────────────── */
@media(min-width:768px){.lh-hero{margin:20px 0 16px;border-radius:22px}}
@media(min-width:1024px){.lh-hero{border-radius:24px}}
@media(max-width:560px){
  .lh-hero{margin:12px 0;padding:16px 15px 14px;border-radius:16px}
  .lh-h1{font-size:23px}
  .lh-h1 .ic{width:36px;height:36px;font-size:16px}
  .lh-sub{font-size:12.5px}
  .lh-count{flex:1;min-width:140px}
  .lh-sel{max-width:none;flex:1;min-width:140px}
  .lh-dd{flex:1;min-width:140px}
  .lh-dd-btn{width:100%}
  .lh-dd-btn .lb{flex:1;max-width:none}
  .lh-sorts{margin-left:0;width:100%}
  .lh-sorts .lh-sel{width:100%;max-width:none}
}
@media(prefers-reduced-motion:reduce){.lh-sort,.lh-count{transition:none}}