:root{
      --bg:#071019;
      --card:#0c1418;
      --muted:#9aa3a8;
      --accent1: #7CFC00; /* neon green */
      --accent2: #00e5ff; /* cyan */
      --glass: rgba(255,255,255,0.04);
      --border: rgba(255,255,255,0.04);
      --radius: 14px;
      --fw-700: 800;
    }
    /* existing page styles (kept) */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,var(--bg), #031019 80%);
      color:#e6eef3;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.4;
      overflow-x: hidden;

    }

/* safe global clamp — add near the end of your CSS */
html,body {
  max-width: 100%;
  overflow-x: hidden; /* hide accidental horizontal overflow */
}

/* make sure images, iframes and videos can't force width */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* clamp large fixed-width panels on very small screens */
.single-jh-cart, .single-jh-cart.open {
  max-width: 100vw;
  box-sizing: border-box;
}

/* ensure gallery tiles don't exceed viewport on tiny devices */
.gallery .tile { min-width: 200px; /* already exists — keep it small */ }
@media (max-width:420px){
  .gallery .tile { min-width: 160px; }
}

/* if you use big radial glows offset off-screen, prevent them from creating layout width */
.glow-blob {
  right: -120px;
  pointer-events: none;
  /* clip it so it can't expand layout */
  transform: translateZ(0);
  will-change: transform;
  max-width: none;
}

/* last-resort: hide overflow of big top-level containers (safer than body overflow hidden sometimes) */
.container, .single-jh-wrap, .single-jh-grid {
  overflow-x: hidden;
}


    .container{max-width:1180px;margin:0 auto;padding:28px}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#022;border:3px solid rgba(0,0,0,0.15);font-weight:800}
    .brand h1{font-size:20px;margin:0}
    .brand p{margin:0;font-size:12px;color:var(--muted)}

    nav.desktop{display:flex;gap:20px}
    nav.desktop a{color:var(--muted);text-decoration:none;font-size:14px}
    .actions{display:flex;align-items:center;gap:8px}
    .icon-btn{background:var(--glass);border:1px solid var(--border);padding:8px;border-radius:10px;cursor:pointer}
    .cart-badge{background:var(--accent1);color:#001;margin-left:8px;padding:2px 8px;border-radius:999px;font-weight:700;font-size:13px}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center;padding:48px 0}
    .hero h2{font-size:44px;margin:0;line-height:1.02}
    .gradient-text{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero p{color:var(--muted);max-width:46ch}
    .cta-row{display:flex;gap:12px;margin-top:20px}
    .btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#031;padding:14px 20px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
    .btn-ghost{background:transparent;border:1px solid var(--border);padding:12px 16px;border-radius:12px;color:var(--muted);cursor:pointer}

    /* Product panel */
    .panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:18px;border:1px solid var(--border);box-shadow:0 8px 30px rgba(2,6,12,0.6)}
    .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .card{background:var(--card);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
    .card img{width:100%;height:140px;object-fit:cover;display:block}
    .card .meta{padding:12px}
    .card .meta h4{margin:0 0 6px 0}
    .card .meta p{margin:0;font-size:13px;color:var(--muted)}
    .card .meta .price{font-weight:700}
    .card .meta .actions{display:flex;gap:8px;margin-top:10px}
    .pill{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:999px;font-size:12px;color:var(--muted)}

    /* Decorative */
    .glow-blob{position:absolute;right:-120px;top:-80px;width:360px;height:360px;border-radius:50%;filter:blur(50px);opacity:.35;background:radial-gradient(circle at 30% 30%,var(--accent2),transparent 45%),radial-gradient(circle at 70% 70%,var(--accent1),transparent 40%)}

    /* features */
    .features{display:flex;gap:12px;margin-top:30px}
    .feature{flex:1;background:transparent;padding:18px;border-radius:12px;border:1px solid var(--border)}
    .feature h4{margin:0 0 8px 0}

    /* gallery */
    .gallery{display:flex;gap:14px;overflow:auto;padding-bottom:6px}
    .gallery .tile{min-width:260px;border-radius:12px;background:var(--card);overflow:hidden;border:1px solid var(--border)}
    .gallery .tile img{width:100%;height:160px;object-fit:cover;display:block}
    .gallery .tile .gmeta{padding:12px}

    /* testimonials */
    .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
    .test{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid var(--border)}

    /* Newsletter */
    .newsletter{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#031218, #051722);padding:18px;border-radius:12px;border:1px solid var(--border);margin-top:28px}
    .newsletter input{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}

    footer{margin-top:48px;padding:28px 0;color:var(--muted);font-size:13px}

    /* mobile */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr;}
      nav.desktop{display:none}
      .panel{margin-top:18px}
      .product-grid{grid-template-columns:1fr}
      .test-grid{grid-template-columns:1fr}
      .gallery .tile{min-width:200px}
    }

    /* subtle animations */
    .fade-in{opacity:0;transform:translateY(8px);animation:enter .6s forwards}
    @keyframes enter{to{opacity:1;transform:none}}
.site-header-inner {
    width: 95%;

    
}

 /* Container */
    .single-jh-wrap{max-width:1200px;margin:0 auto;padding:28px}

    /* Top bar (small brand) */
    .single-jh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
    .single-jh-brand{display:flex;gap:12px;align-items:center}
    .single-jh-logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#022;font-weight:800}
    .single-jh-actions{display:flex;align-items:center;gap:8px}

    /* Product grid */
    .single-jh-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
    @media (max-width:980px){ .single-jh-grid{grid-template-columns:1fr; } .single-jh-right{order:2} .single-jh-left{order:1} }

    /* Left: big visual */
    .single-jh-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 40px rgba(2,6,12,0.6)}
    .single-jh-main-img{width:100%;height:540px;object-fit:contain;border-radius:14px;background:#071019;display:block}
    @media (max-width:980px){ .single-jh-main-img{height:420px} }

    .single-jh-preview-overlay{
      position:absolute;right:22px;top:22px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#012;padding:8px 12px;border-radius:10px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,0.5)
    }

    /* front/back toggle */
    .single-jh-toggle{display:flex;gap:8px;margin-top:12px}
    .single-jh-toggle button{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);cursor:pointer}
    .single-jh-toggle button.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#012;border:none}

    /* Right: details */
    .single-jh-details h1{font-size:28px;margin:0 0 6px 0}
    .single-jh-price{font-size:26px;font-weight:800;color:var(--accent1);margin-top:6px}
    .single-jh-meta{color:var(--muted);font-size:13px;margin-top:6px}

    .single-jh-options{margin-top:14px;display:flex;flex-direction:column;gap:12px}
    .single-jh-input, select{background:var(--card);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:12px;color:inherit}

    .single-jh-cta{display:flex;gap:10px;align-items:center;margin-top:12px}
    .single-jh-cta .btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#012;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,0.6);cursor:pointer;border:none}
    .single-jh-cta .btn-outline{padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);cursor:pointer}

    /* Customization mini */
    .single-jh-custom{margin-top:14px;background:rgba(255,255,255,0.01);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
    .single-jh-custom label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
    .single-jh-small{display:flex;gap:8px;align-items:center}
    .single-jh-small input[type="text"], .single-jh-small input[type="number"]{padding:10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:inherit}

    /* sliding cart */
    .single-jh-cart { position: fixed; right: 0; top: 0; height: 100vh; width: 380px; transform: translateX(110%); transition: transform .28s ease; z-index:60; background: linear-gradient(180deg,var(--card),#06121a); border-left:1px solid rgba(255,255,255,0.03); box-shadow: -12px 0 40px rgba(2,6,12,0.6); display:flex;flex-direction:column; }
    .single-jh-cart.open { transform: translateX(0%); }
    .single-jh-cart .cart-head{padding:18px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between}
    .single-jh-cart .cart-body{padding:16px;overflow:auto;flex:1}
    .single-jh-cart .cart-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;border-bottom:1px dashed rgba(255,255,255,0.02)}
    .single-jh-cart .cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
    .single-jh-cart .cart-foot{padding:16px;border-top:1px solid rgba(255,255,255,0.03)}

    /* quantity controls */
    .qty { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.01); padding:6px; border-radius:8px; border:1px solid rgba(255,255,255,0.02) }
    .qty button{background:transparent;border:none;color:var(--muted);cursor:pointer;font-weight:700;padding:6px 8px}

    /* small responsive */
    @media (max-width:420px){ .single-jh-cart{width:100%} .single-jh-main-img{height:340px} }

    /* subtle entrance */
    .single-jh-fade{opacity:0;transform:translateY(6px);animation: sjh-enter .6s forwards}
    @keyframes sjh-enter{to{opacity:1;transform:none}}



      /* Admin-specific */
    .admin-jh-header { background: linear-gradient(90deg,#02101788,#031621); border-bottom:1px solid rgba(255,255,255,0.03); }
    .admin-jh-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.03); }
    .admin-jh-btn { transition: transform .14s, box-shadow .14s; }
    .admin-jh-btn:hover { transform: translateY(-2px); }
    .admin-jh-badge { background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:#012; font-weight:700; padding:2px 8px; border-radius:999px; }
    /* drag placeholder */
    .dragging { opacity:.6; transform: scale(.995); }
    .drag-over { outline: 2px dashed rgba(124,58,237,0.25); }
    /* small helpers */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



     /* Unique floating labels */
    .checkout-jh-floating { position: relative; }
    .checkout-jh-floating label{
      position:absolute; left:14px; top:12px; pointer-events:none;
      color:var(--muted); transition:all .16s ease; background:transparent; padding:0 6px;
    }
    .checkout-jh-floating input:focus + label,
    .checkout-jh-floating input:not(:placeholder-shown) + label,
    .checkout-jh-floating textarea:focus + label,
    .checkout-jh-floating textarea:not(:placeholder-shown) + label,
    .checkout-jh-floating select:focus + label,
    .checkout-jh-floating select:not([value=""]) + label {
      transform: translateY(-20px);
      font-size:.72rem; color: var(--accent2); background: var(--card);
    }

    /* Small accessible helpers */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Card style */
    .checkout-jh-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); border-radius:14px; }

    /* Short print preview badge */
    .checkout-jh-badge { display:inline-block; padding:6px 10px; border-radius:10px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:#012; font-weight:700; }

    /* Sticky footer CTA */
    .checkout-jh-sticky { position: sticky; bottom:18px; z-index:40; }

    /* Validation */
    .checkout-jh-invalid { box-shadow: 0 0 0 3px rgba(255,0,0,0.08) !important; border-color: rgba(255,0,0,0.4) !important; }

    /* small responsive tweaks */
    @media (max-width:768px){
      .lg\\:col-span-2 { grid-column: span 2 / span 2; }
    }

    /* ============================================
       HEADER CART PANEL STYLES
       ============================================ */
    
    #cartBtn {
      position: relative;
    }

    #headerCartPanel {
      position: fixed;
      top: auto;
      right: 16px;
      bottom: auto;
      max-width: calc(100vw - 32px);
      z-index: 999;
    }

    @media (max-width: 640px) {
      #headerCartPanel {
        right: 8px;
        left: 8px;
        max-width: calc(100vw - 16px);
        width: auto;
      }
    }

    #headerCartPanel.hidden {
      display: none !important;
    }

    #headerCartPanel {
      background: linear-gradient(180deg, rgba(11,20,24,0.98), rgba(7,16,25,0.95));
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.04);
      animation: slideIn 0.2s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #headerCartPanel > div {
      background: transparent;
    }

    #headerCartPanel .divide-y {
      border-color: rgba(255,255,255,0.05);
    }

    #headerCartPanel button {
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
    }

    #headerCartPanel button:hover {
      transform: translateY(-1px);
    }

    #headerCheckoutBtn {
      box-shadow: 0 4px 15px rgba(124, 252, 0, 0.2);
    }

    #headerCheckoutBtn:hover {
      box-shadow: 0 6px 20px rgba(124, 252, 0, 0.3);
    }

    /* Cart notification */
    .animate-pulse {
      animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }