/* ===========================
   LI-HAN.RU — SHARED STYLES
   =========================== */

   @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Onest:wght@300;400;500;600&display=swap');

   :root {
     --black: #0a0a0a;
     --dark: #111214;
     --dark2: #181a1e;
     --dark3: #1e2126;
     --dark4: #23262c;
     --green: #2ECC71;
     --green-dim: #1a9e54;
     --green-glow: rgba(46,204,113,0.12);
     --green-line: rgba(46,204,113,0.3);
     --text: #e8eaed;
     --text-muted: #7a8290;
     --text-dim: #4a5261;
     --border: rgba(255,255,255,0.07);
     --border-hover: rgba(255,255,255,0.13);
     --border-green: rgba(46,204,113,0.22);
     --card: #141618;
     --radius: 12px;
     --radius-lg: 18px;
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   
   body {
     font-family: 'Onest', sans-serif;
     background: var(--black);
     color: var(--text);
     overflow-x: hidden;
     line-height: 1.6;
   }
   
   /* ---- HEADER ---- */
   .lh-header {
     position: fixed;
     top: 0; left: 0; right: 0;
     z-index: 200;
     height: 68px;
     display: flex;
     align-items: center;
     padding: 0 48px;
     background: rgba(10,10,10,0.9);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     gap: 48px;
   }
   
   .lh-logo {
     font-family: 'Unbounded', sans-serif;
     font-size: 20px;
     font-weight: 800;
     color: #fff;
     text-decoration: none;
     letter-spacing: -0.5px;
     flex-shrink: 0;
   }
   .lh-logo .dot { color: var(--green); }
   
   .lh-nav {
     display: flex;
     align-items: center;
     gap: 28px;
     flex: 1;
   }
   
   .lh-nav a {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-muted);
     text-decoration: none;
     transition: color 0.2s;
     white-space: nowrap;
   }
   .lh-nav a:hover, .lh-nav a.active { color: #fff; }
   .lh-nav a.active { color: var(--green); }
   
   /* Header search */
   .lh-header-search {
     flex: 1;
     max-width: 320px;
     position: relative;
   }
   .lh-header-search input {
     width: 100%;
     height: 38px;
     background: var(--dark3);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 0 36px 0 14px;
     font-family: 'Onest', sans-serif;
     font-size: 13px;
     color: var(--text);
     outline: none;
     transition: border-color 0.2s;
   }
   .lh-header-search input:focus { border-color: var(--green); }
   .lh-header-search input::placeholder { color: var(--text-dim); }
   .lh-header-search svg {
     position: absolute;
     right: 10px; top: 50%;
     transform: translateY(-50%);
     width: 16px; height: 16px;
     stroke: var(--text-dim);
     fill: none;
     stroke-width: 1.5;
     pointer-events: none;
   }
   
   .lh-header-right {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-shrink: 0;
   }
   
   .lh-tel {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-muted);
     text-decoration: none;
     transition: color 0.2s;
   }
   .lh-tel:hover { color: var(--green); }
   
   /* ---- BUTTONS ---- */
   .btn-g {
     display: inline-flex; align-items: center; gap: 8px;
     padding: 10px 20px;
     background: var(--green);
     color: #000;
     font-family: 'Onest', sans-serif;
     font-size: 14px; font-weight: 600;
     border-radius: 8px;
     border: none; cursor: pointer; text-decoration: none;
     transition: all 0.2s;
     white-space: nowrap;
   }
   .btn-g:hover { background: #2edf76; transform: translateY(-1px); }
   .btn-g svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
   
   .btn-o {
     display: inline-flex; align-items: center; gap: 8px;
     padding: 10px 20px;
     background: transparent;
     color: var(--green);
     font-family: 'Onest', sans-serif;
     font-size: 14px; font-weight: 500;
     border-radius: 8px;
     border: 1px solid var(--border-green); cursor: pointer; text-decoration: none;
     transition: all 0.2s;
     white-space: nowrap;
   }
   .btn-o:hover { background: var(--green-glow); border-color: var(--green); }
   
   .btn-ghost {
     display: inline-flex; align-items: center; gap: 8px;
     padding: 9px 16px;
     background: var(--dark3);
     color: var(--text-muted);
     font-family: 'Onest', sans-serif;
     font-size: 13px; font-weight: 500;
     border-radius: 8px;
     border: 1px solid var(--border); cursor: pointer; text-decoration: none;
     transition: all 0.2s;
   }
   .btn-ghost:hover { border-color: var(--border-hover); color: var(--text); }
   .btn-ghost svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
   
   /* ---- TAGS / BADGES ---- */
   .tag {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 5px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.3px;
   }
   .tag-new { background: rgba(46,204,113,0.12); color: var(--green); border: 1px solid var(--border-green); }
   .tag-hit { background: rgba(255,180,0,0.1); color: #f0a500; border: 1px solid rgba(255,180,0,0.22); }
   .tag-sale { background: rgba(220,80,60,0.1); color: #e05a40; border: 1px solid rgba(220,80,60,0.22); }
   .tag-oem { background: rgba(80,140,255,0.1); color: #6b9fff; border: 1px solid rgba(80,140,255,0.22); }
   .tag-instock { background: rgba(46,204,113,0.1); color: var(--green); }
   .tag-order { background: rgba(255,180,0,0.08); color: #f0a500; }
   .tag-out { background: rgba(200,200,200,0.07); color: var(--text-dim); }
   
   /* ---- SECTION TAG ---- */
   .sec-tag {
     display: inline-block;
     font-size: 11px; font-weight: 600;
     letter-spacing: 2px; text-transform: uppercase;
     color: var(--green); margin-bottom: 12px;
   }
   
   h2.sec-title {
     font-family: 'Unbounded', sans-serif;
     font-size: clamp(22px, 3vw, 36px);
     font-weight: 700; letter-spacing: -0.8px;
     color: #fff; line-height: 1.15;
     margin-bottom: 12px;
   }
   
   .sec-sub {
     font-size: 15px; color: var(--text-muted);
     font-weight: 300; line-height: 1.7;
   }
   
   /* ---- BREADCRUMB ---- */
   .breadcrumb {
     display: flex; align-items: center; gap: 6px;
     font-size: 13px; color: var(--text-dim);
     flex-wrap: wrap;
   }
   .breadcrumb a { color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
   .breadcrumb a:hover { color: var(--text-muted); }
   .breadcrumb span { color: var(--text-dim); }
   .breadcrumb .current { color: var(--text-muted); }
   
   /* ---- PAGE WRAPPER ---- */
   .page-wrap {
     padding-top: 68px;
     min-height: 100vh;
   }
   
   /* ---- FOOTER ---- */
   .lh-footer {
     background: var(--black);
     border-top: 1px solid var(--border);
     padding: 56px 48px 28px;
   }
   .lh-footer-wrap { max-width: 1320px; margin: 0 auto; }
   
   .lh-footer-top {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
     padding-bottom: 40px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 28px;
   }
   .lh-footer-brand p {
     font-size: 13px; color: var(--text-muted); font-weight: 300;
     line-height: 1.6; margin-top: 14px; max-width: 260px;
   }
   .lh-footer-col h5 {
     font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
     text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px;
   }
   .lh-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
   .lh-footer-col ul li a {
     font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.2s;
   }
   .lh-footer-col ul li a:hover { color: var(--text); }
   
   .lh-footer-bottom {
     display: flex; align-items: center; justify-content: space-between;
     font-size: 12px; color: var(--text-dim);
   }
   .lh-footer-socials { display: flex; gap: 10px; }
   .social-btn {
     width: 34px; height: 34px;
     background: var(--dark2); border: 1px solid var(--border);
     border-radius: 8px; display: flex; align-items: center; justify-content: center;
     cursor: pointer; transition: all 0.2s; text-decoration: none;
   }
   .social-btn:hover { border-color: var(--border-green); background: var(--green-glow); }
   .social-btn svg { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; transition: stroke 0.2s; }
   .social-btn:hover svg { stroke: var(--green); }
   
   /* ---- PRODUCT CARD ---- */
   .prod-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
     transition: all 0.22s;
     display: flex; flex-direction: column;
     text-decoration: none;
   }
   .prod-card:hover { border-color: var(--border-green); transform: translateY(-3px); }
   
   .prod-card-img {
     aspect-ratio: 4/3;
     background: var(--dark3);
     position: relative;
     display: flex; align-items: center; justify-content: center;
     overflow: hidden;
   }
   .prod-card-img img { width: 100%; height: 100%; object-fit: cover; }
   .prod-img-ph { width: 64px; height: 64px; opacity: 0.12; }
   .prod-img-ph svg { width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 0.8; }
   
   .prod-card-badge { position: absolute; top: 10px; left: 10px; }
   
   .prod-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
   .prod-card-sku { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.4px; }
   .prod-card-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 10px; flex: 1; }
   .prod-card-compat { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
   .compat-tag { padding: 2px 7px; background: var(--dark3); border-radius: 4px; font-size: 11px; color: var(--text-muted); }
   
   .prod-card-footer { display: flex; align-items: center; justify-content: space-between; }
   .prod-card-price { font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 700; color: #fff; }
   .prod-card-price small { font-family: 'Onest', sans-serif; font-size: 11px; font-weight: 400; color: var(--text-dim); text-decoration: line-through; display: block; }
   .prod-card-price .avail { font-family: 'Onest', sans-serif; font-size: 11px; font-weight: 500; display: block; margin-top: 2px; }
   .avail-yes { color: var(--green); }
   .avail-ord { color: #f0a500; }
   .avail-no  { color: var(--text-dim); }
   
   .btn-cart-sm {
     width: 36px; height: 36px;
     background: var(--green-glow);
     border: 1px solid var(--border-green);
     border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; transition: all 0.2s; flex-shrink: 0; border: none;
     border: 1px solid var(--border-green);
   }
   .btn-cart-sm:hover { background: var(--green); }
   .btn-cart-sm:hover svg { stroke: #000; }
   .btn-cart-sm svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 1.5; transition: stroke 0.2s; }
   
   /* ---- PAGINATION ---- */
   .pagination {
     display: flex; align-items: center; justify-content: center;
     gap: 6px; margin-top: 40px;
   }
   .page-btn {
     width: 38px; height: 38px;
     display: flex; align-items: center; justify-content: center;
     background: var(--dark2); border: 1px solid var(--border);
     border-radius: 8px; font-size: 14px; color: var(--text-muted);
     cursor: pointer; transition: all 0.2s; text-decoration: none;
   }
   .page-btn:hover { border-color: var(--border-hover); color: var(--text); }
   .page-btn.active { background: var(--green); border-color: var(--green); color: #000; font-weight: 700; }
   .page-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
   
   /* ---- CART ICON ---- */
   .cart-icon-btn {
     position: relative;
     width: 38px; height: 38px;
     display: flex; align-items: center; justify-content: center;
     background: var(--dark3); border: 1px solid var(--border);
     border-radius: 8px; cursor: pointer; transition: all 0.2s; text-decoration: none;
   }
   .cart-icon-btn:hover { border-color: var(--border-green); }
   .cart-icon-btn svg { width: 17px; height: 17px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; }
   .cart-count {
     position: absolute; top: -6px; right: -6px;
     width: 18px; height: 18px; border-radius: 50%;
     background: var(--green); color: #000;
     font-size: 10px; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
   }
   
   /* ---- MOBILE ---- */
   @media (max-width: 1100px) {
     .lh-header { padding: 0 24px; gap: 20px; }
     .lh-header-search { display: none; }
     .lh-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
   }
   @media (max-width: 700px) {
     .lh-header { padding: 0 16px; }
     .lh-nav { display: none; }
     .lh-footer { padding: 40px 20px 24px; }
     .lh-footer-top { grid-template-columns: 1fr; }
   }