:root{
      --bg:#0f1115;--card:#151821;--muted:#94a3b8;--text:#e5e7eb;--accent:#60a5fa;--ok:#22c55e;--warn:#f59e0b;
      --border:#1f2430
    }
    *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
    a{color:var(--accent);text-decoration:none}
    .container{max-width:1100px;margin:40px auto;padding:0 16px}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .thumb{aspect-ratio:16/9;background:#0b0d12 url('https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat}
    .badgebar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border)}
    .badge{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:#0f131b;color:var(--muted)}
    .content{padding:14px 14px 16px}
    .title{font-weight:700;margin:2px 0 6px}
    .sub{color:var(--muted);font-size:14px;margin-bottom:10px}
    .price{font-size:18px;font-weight:700}
    .cta{margin-top:12px;display:flex;gap:8px}
    .btn{background:var(--accent);color:#0b1220;border:none;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
    .btn.secondary{background:#0f131b;color:var(--text);border:1px solid var(--border)}

    /* Detail */
    .detail{margin-top:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
    @media (max-width:900px){.detail{grid-template-columns:1fr;}}
    .gallery{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px}
    .gallery .main{aspect-ratio:16/9;background:#0b0d12 url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?q=80&w=1600&auto=format&fit=crop') center/cover;border-radius:12px}
    .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
    .thumbs div{aspect-ratio:1/1;background:#0b0d12;border:1px solid var(--border);border-radius:8px}

    .facts{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
    .facts h2{margin:0 0 6px}
    .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;margin-top:10px}
    .kv div{padding:8px 0;border-bottom:1px dashed var(--border)}
    .kv div.label{color:var(--muted)}
    .price-line{font-weight:800;font-size:20px}

    .tiers{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px}
    .tiers table{width:100%;border-collapse:collapse}
    .tiers th,.tiers td{border-bottom:1px solid var(--border);padding:10px;text-align:left}

    .notes{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px}
    .note{color:var(--muted)}

    .inline-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px}
    .inline-form h3{margin:0 0 12px}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media (max-width:800px){.row{grid-template-columns:1fr}}
    input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:#0f131b;color:var(--text)}
    textarea{min-height:96px}
    .disclaimer{color:var(--muted);font-size:12px;margin-top:8px}
    .link{font-size:14px;color:var(--accent);cursor:pointer}
/* ---------------- Mobile Adjustments ---------------- */
/* Main gallery image */
.gallery .main {
  width: 100%;
  aspect-ratio: 16/9; /* fixed box */
  border-radius: 12px;
  overflow: hidden;
  background: var(--card); /* fallback background if image is smaller */
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery .main img.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures image covers the box */
  display: block;
}

/* Thumbnails */
.thumbs {
  display: flex; /* use flex for easier scrolling on mobile */
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto; /* horizontal scroll on mobile */
  padding-bottom: 4px;
}

.thumbs .thumb {
  flex: 0 0 auto; /* fixed width box */
  width: 80px;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card);
}

.thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures thumbnail fills box */
  display: block;
}

/* Active thumbnail highlight */
.gallery .thumb.active {
  border: 2px solid var(--accent);
  border-radius: 6px;
}


/* Gallery adjustments */
@media (max-width:700px){
    .gallery .thumbs {
        grid-template-columns: repeat(4,1fr);
    }
}

@media (max-width:500px){
    .gallery .thumbs {
        grid-template-columns: repeat(3,1fr);
    }
    .gallery .main {
        aspect-ratio: 4/3;
    }
}

/* Facts / product info adjustments */
@media (max-width:700px){
    .facts h2 {
        font-size: 18px;
    }
    .price-line {
        font-size: 18px;
    }
    .kv {
        grid-template-columns: 1fr 1fr;
        gap:6px 10px;
    }
    .kv div {
        padding:6px 0;
    }
}

/* Quantity tiers table adjustments */
@media (max-width:700px){
    .tiers table, .tiers thead, .tiers tbody, .tiers th, .tiers td, .tiers tr {
        display: block;
    }
    .tiers tr {
        margin-bottom: 12px;
        border-bottom:1px dashed var(--border);
        padding-bottom:6px;
    }
    .tiers td {
        display:flex;
        justify-content:space-between;
        padding:6px 0;
    }
    .tiers th {
        display:none;
    }
}

/* Notes & inline form adjustments */
@media (max-width:700px){
    .notes, .inline-form {
        padding:12px;
    }
    .inline-form h3 {
        font-size:16px;
    }
}

/* Lead form input spacing */
@media (max-width:500px){
    .inline-form .row {
        grid-template-columns:1fr;
    }
}

/* Buttons resizing for small screens */
@media (max-width:500px){
    .btn, .btn.secondary {
        padding:8px 12px;
        font-size:14px;
    }
    .cta {
        flex-direction: column;
        gap:8px;
    }
}

/* Gallery main image responsive */
@media (max-width:400px){
    .gallery .main {
        aspect-ratio: 1/1;
    }
}

/* Ensure container has padding on small screens */
@media (max-width:400px){
    .container {
        padding:0 12px;
    }
}