:root{
      --bg:#f4f6f9;
      --card:#121621;
      --muted:#475569;
      --text:#1c1f24;
      --accent:#8cff3c;
      --accent2:#ffd54a;
      --line:rgba(0,0,0,.08);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius:18px;
      --max: 1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:#111317;
      background: #f4f6f9;
}

    a{color:#0f1720; text-decoration:none;}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 60px; padding-left: calc(18px + env(safe-area-inset-left)); padding-right: calc(18px + env(safe-area-inset-right));}

    /* Header */
    header{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px;
      padding:12px 0 18px;
      border-bottom:1px solid var(--line);
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width: 240px;
    }
    .brand img{
      width:56px; height:56px; object-fit:contain;
      border-radius:14px; background:rgba(255,255,255,.06);
      padding:6px;
    }
    .brand .title{
      display:flex; flex-direction:column; line-height:1.1;
    }
    .brand .title strong{font-size:18px}
    .brand .title span{font-size:12px; color:var(--muted)}
    .nav{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;
    }
    .pill{
      border:1px solid var(--line);
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      transition: transform .15s ease, background .15s ease;
      font-size:14px;
    }
    .pill:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
    .cta{
      border:1px solid #0f1720;
      background:#0f1720;
      color:#ffffff !important;
      font-weight:600;
    }
    .cta:hover{
      background:#1e293b;
      border-color:#1e293b;
    }

    /* Hero */
    .hero{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:18px;
      padding:26px 0 18px;
    }
    @media (max-width: 900px){
      .hero{grid-template-columns: 1fr; }
      .brand{min-width:unset}
    }

    .card{
      background: #ffffff; color:#0f1720;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .heroText{padding:22px 22px 20px}
    h1{
      margin:0 0 10px;
      font-size:34px;
      letter-spacing:.2px;
    }
    .sub{
      margin:0 0 18px;
      color:var(--muted);
      font-size:15px;
      line-height:1.45;
    }

    .badges{display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 14px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: #ffffff; color:#0f1720;
      font-size:13px;
      color: #1c1f24;
    }
    .badge i{font-style:normal}

    .features{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top: 16px;
    }
    @media (max-width: 520px){
      .features{grid-template-columns: 1fr;}
    }
    .feat{
      border:1px solid var(--line);
      background: #ffffff; color:#0f1720;
      border-radius: 14px;
      padding: 12px 12px;
      color: #1c1f24;
      font-size: 14px;
      line-height: 1.35;
      display:flex; gap:10px;
    }
    .feat .ico{
      width:26px; height:26px; border-radius: 10px;
      background: rgba(140,255,60,.12);
      display:grid; place-items:center;
      flex: 0 0 26px;
    }
    .feat .ico span{filter: drop-shadow(0 6px 14px rgba(140,255,60,.25))}
    .feat small{display:block; color: #5f6b7a; margin-top: 2px}

    /* Carousel */
    .carousel{position:relative; overflow:hidden; border-radius: var(--radius)}
    .carousel .frame{
      display:flex;
      width:100%;
      transition: transform .55s ease;
    }
    .slide{
      min-width:100%;
      padding: 12px;
      display:grid;
      grid-template-rows: 1fr auto;
      gap:10px;
    }
    .slide .imgWrap{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid var(--line);
      background: rgba(0,0,0,.24);
      height: 360px;
      display:grid;
      place-items:center;
    }
    .slide img{
      max-width:100%;
      max-height:100%;
      object-fit: contain;
      display:block;
      transform: translateZ(0);
    }
    .cap{
      display:flex; justify-content:space-between; align-items:center;
      gap:10px;
      padding: 0 6px 4px;
      color: #5f6b7a;
      font-size: 13px;
    }
    .dots{
      position:absolute; left:50%; bottom:12px; transform: translateX(-50%);
      display:flex; gap:7px;
      padding:8px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      border: 1px solid var(--line);
      backdrop-filter: blur(6px);
    }
    .dot{
      width:9px; height:9px; border-radius: 999px;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.12);
      cursor:pointer;
    }
    .dot.active{background: var(--accent); border-color: rgba(140,255,60,.55)}
    .carBtn{
      position:absolute; top:50%; transform: translateY(-50%);
      border:none; cursor:pointer;
      width:42px; height:42px; border-radius: 999px;
      background: rgba(0,0,0,.40);
      border: 1px solid var(--line);
      color: var(--text);
      display:grid; place-items:center;
      backdrop-filter: blur(6px);
    }
    .carBtn:hover{background: rgba(0,0,0,.55)}
    .carBtn.prev{left:12px}
    .carBtn.next{right:12px}

    /* Section + Gallery */
    .sectionHead{
      display:flex; justify-content:space-between; align-items:end; gap:12px;
      padding: 26px 0 12px;
    }
    .sectionHead h2{margin:0; font-size:22px}
    .sectionHead p{margin:0; color:var(--muted); font-size:14px}

    .filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
    .chip{
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding:8px 10px;
      font-size:13px;
      cursor:pointer;
      user-select:none;
    }
    .chip.active{
      border-color: rgba(140,255,60,.45);
      background: rgba(140,255,60,.10);
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .item{
      grid-column: span 4;
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid var(--line);
      background: #ffffff; color:#0f1720;
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease;
      position:relative;
    }
    .item:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22)}
    .item img{width:100%; height: 220px; object-fit: cover; display:block}
    .item .meta{
      padding: 12px 12px 13px;
      display:flex; flex-direction:column; gap:6px;
    }
    .item .name{font-weight: 650}
    .item .desc{color: #5f6b7a; font-size: 13px; line-height: 1.35}
    /* ===== Refined Tag Styling (Transparent Blue Overlay) ===== */
    .item{position:relative;}
    .tag{
      position:absolute;
      top:10px;
      left:10px;
      background:rgba(37, 99, 235, 0.12);
      color:#1e3a8a;
      font-weight:600;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      letter-spacing:.3px;
      border:1px solid rgba(37, 99, 235, 0.25);
      backdrop-filter: blur(4px);
    }
    @media (max-width: 980px){ .item{grid-column: span 6} }
    @media (max-width: 560px){ .item{grid-column: span 12} .slide .imgWrap{height:300px} }

    /* Lightbox */
    .lightbox{
      position: fixed; inset: 0;
      display:none;
      place-items:center;
      padding: 18px;
      background: rgba(0,0,0,.70);
      backdrop-filter: blur(4px);
      z-index: 50;
    }
    .lightbox.open{display:grid}
    .lbCard{
      width: min(980px, 100%);
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(15,18,28,.85);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .lbTop{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }
    .lbTop strong{font-size:14px}
    .lbTop button{
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: var(--text);
      border-radius: 12px;
      padding: 8px 10px;
      cursor:pointer;
    }
    .lbTop button:hover{background: rgba(255,255,255,.09)}
    .lbBody{
      padding: 12px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
    }
    .lbImg{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid var(--line);
      background: rgba(0,0,0,.26);
      height: 460px;
      display:grid; place-items:center;
    }
    .lbImg img{max-width:100%; max-height:100%; object-fit:contain; display:block}
    .lbInfo{
      border-radius: 16px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.18);
      padding: 14px;
      color: #1c1f24;
    }
    .lbInfo p{margin:0 0 10px; color: #5f6b7a; font-size: 13px; line-height: 1.45}
    .lbInfo ul{margin:0; padding-left: 18px; color:#1a56db; font-size: 13px; line-height: 1.5}
    .lbInfo li{margin: 6px 0}
    .lbInfo .miniCta{
      margin-top: 14px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.05);
      cursor:pointer;
      font-size: 14px;
    }
    .btn.primary{
      border-color: rgba(140,255,60,.40);
      background: linear-gradient(180deg, rgba(140,255,60,.20), rgba(140,255,60,.07));
    }
    .btn:hover{background: rgba(255,255,255,.08)}
    @media (max-width: 900px){
      .lbBody{grid-template-columns: 1fr}
      .lbImg{height: 360px}
    }

    /* Footer */
    footer{
      margin-top: 30px;
      padding: 18px 0 0;
      border-top: 1px solid rgba(0,0,0,.12);
      color: #475569;
      font-size: 13px;
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    }
    footer a{
      color:#0f1720;
      font-weight:600;
    }
    footer a{color:#0f1720; text-decoration:none;}
  
    /* Mobile polish */
    h1{font-size: clamp(26px, 5vw, 34px);}
    .pill{padding: 10px 14px;}
    .carBtn{width:46px; height:46px;}
    .item img{height: 220px;}
    @media (max-width: 420px){
      header{padding-bottom:14px}
      .brand img{width:52px; height:52px}
      .heroText{padding:18px}
      .badge{font-size:12.5px}
      .slide .imgWrap{height: 280px}
      .item img{height: 200px}
      .lbImg{height: 320px}
      .btn{width:100%}
      .nav{gap:8px}
    }

  
    

    /* ===== Image fit overrides (show full product; no cropping) ===== */
    .slide .imgWrap{
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .slide .imgWrap img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      background: rgba(255,255,255,.03);
    }

    /* Gallery tiles: show full product */
    .item img{
      width:100%;
      height:240px;
      object-fit:contain;
      display:block;
      background: rgba(255,255,255,.03);
    }

    

    @media (max-width: 420px){
      .slide .imgWrap{height:280px;}
      .item img{height:220px;}
      .lbImg{height:320px;}
    }


    /* ===== Popup / Lightbox image fit (show full product) ===== */
    .lbImg{
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      background: rgba(0,0,0,.26);
      border-radius: 16px;
    }
    /* Make the image fit inside the popup box without cropping */
    #lbImg{
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display:block;
    }


    @media (max-width: 900px){
      .lbImg{height: 360px;}
    }
    @media (max-width: 420px){
      .lbImg{height: 320px;}
    }


    /* ===== Light Theme Popup Styling ===== */
    .lightbox{
      background: rgba(15,23,32,.55);
      backdrop-filter: blur(4px);
    }
    .lbCard{
      background:#ffffff;
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 20px 50px rgba(0,0,0,.15);
    }
    .lbTop{
      border-bottom:1px solid rgba(0,0,0,.08);
      color:#0f1720;
    }
    .lbTop button{
      background:#f1f5f9;
      border:1px solid rgba(0,0,0,.08);
      color:#0f1720;
    }
    .lbTop button:hover{
      background:#e2e8f0;
    }
    .lbInfo{
      background:#ffffff;
      color:#0f1720;
      border:1px solid rgba(0,0,0,.06);
    }
    .lbInfo ul{
      color:#0f1720;
    }
    .btn.primary{
      background:#0f1720;
      color:#ffffff;
      border:1px solid #0f1720;
    }
    .btn.primary:hover{
      background:#1e293b;
      border-color:#1e293b;
    }



    /* ===== Popup Text Contrast Improvements ===== */
    #lbTitle{color:#0f1720; font-weight:750;}
    #lbDesc{color:#334155;}
    #lbColors{color:#334155;}
    .lbInfo{color:#334155;}
    .lbInfo strong{color:#0f1720;}
    .lbTop{color:#0f1720;}
    .lbTop button{color:#0f1720;}

    /* ===== Carousel Arrow Theme Update (Transparent Blue) ===== */
    .carBtn{
      background:rgba(37, 99, 235, 0.12);
      color:#1e3a8a;
      border:1px solid rgba(37, 99, 235, 0.25);
      backdrop-filter: blur(4px);
    }
    .carBtn:hover{
      background:rgba(37, 99, 235, 0.20);
      border-color:rgba(37, 99, 235, 0.35);
    }


    

    /* ===== Hero Title Two-Line Centered ===== */
    .heroText{
      text-align:center !important;
    }
    .heroText h1{
      text-align:center !important;
    }
    .h1-sub{
      display:inline-block;
      margin-top:6px;
      font-size: 0.62em;
      font-weight: 650;
      color: #334155;
      letter-spacing: .2px;
    }