:root{
    --bg:#0f1115;
    --panel:#111217;
    --muted:#9aa3b2;
    --accent:#7b5cff;
    --accent-2:#4ad9c8;
    --card:#0e1116;
    --glass: rgba(255,255,255,0.03);
    --radius:12px;
    --text:#e8eef6;
  }
  
  /* base */
  *{box-sizing:border-box}
  html,body,#root{height:100%}
  body{
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(600px 400px at 10% 10%, rgba(123,92,255,0.06), transparent),
                radial-gradient(500px 300px at 90% 90%, rgba(74,217,200,0.04), transparent),
                var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
  }
  
  /* layout */
  .app{
    display:flex;
    gap:24px;
    padding:28px;
    align-items:stretch;
  }
  
  /* sidebar */
  .sidebar{
    width:300px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:var(--radius);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    border:1px solid rgba(255,255,255,0.03);
  }
  
  .brand{display:flex;gap:12px;align-items:center}
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(123,92,255,0.12), rgba(74,217,200,0.06));
    overflow: hidden;
  }
  
  .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* atau object-fit: contain kalau logomu punya ruang kosong */
    border-radius: 12px;
  }
  .logo {
    box-shadow: 0 0 20px rgba(123,92,255,0.2);
  }
  
  .brand h1{margin:0;font-size:18px}
  .muted{color:var(--muted);font-size:13px;margin:0}
  
  /* filters */
  .filters{display:flex;flex-direction:column;gap:10px}
  .label{font-size:12px;color:var(--muted);margin-top:6px}
  input[type="search"], input[type="number"], input, textarea, select{
    background:var(--glass); border:1px solid rgba(255,255,255,0.03);
    padding:10px;border-radius:8px;color:var(--text);outline:none;
  }
  input:focus, textarea:focus, select:focus{box-shadow:0 6px 20px rgba(123,92,255,0.06);border-color:rgba(123,92,255,0.25)}
  .categories{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:8px}
  .categories li{
    padding:10px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:14px;
  }
  .categories li.active{background:linear-gradient(90deg, rgba(123,92,255,0.08), rgba(74,217,200,0.03)); color:var(--text);border:1px solid rgba(255,255,255,0.03)}
/* ---------- FORCE FULL MEDIA - AGGRESSIVE OVERRIDE ---------- */
.product-main-image,
.gallery-image-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important; /* sesuaikan */
  display: block !important;
  overflow: hidden !important;
}

/* Target iframe youtube & video, gunakan !important untuk kalahkan inline attr untuk pemutaran youtube */
.product-main-image iframe[src*="youtube.com"],
.product-main-image iframe[src*="youtu.be"],
.product-main-image video,
.product-main-image embed,
.product-main-image object,
.gallery-image-wrap iframe,
.gallery-image-wrap video {
  position: absolute !important;
  inset: 0 !important;            /* top:0; left:0; right:0; bottom:0; */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  display: block !important;
  object-fit: contain !important; /* atau cover sesuai kebutuhan */
}

/* Buat wadah responsif dengan rasio 16:9 agar ukuran konsisten */
.product-main-image .media-aspect {
  width: 100% !important;
  height: 0 !important;
  padding-top: 56.25% !important; /* 16:9 */
  position: relative !important;
}
.product-main-image .media-aspect > * {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

  /* price range */
/* Refined Price List Button */
#priceBtn {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  
  #priceBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    background: linear-gradient(90deg, #4f46e5, #a855f7);
  }
  
  #priceBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  
  /* buttons */
  .btn-primary{
    background:linear-gradient(90deg,var(--accent), #3467FF);
    color:white;padding:12px;border-radius:10px;border:none;cursor:pointer;font-weight:600;
  }
  .btn-secondary{
    background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;color:var(--text);cursor:pointer;
  }
  .btn-contact{
    background:linear-gradient(90deg,var(--accent), #4be18f);
    color:white;padding:12px;border-radius:10px;border:none;cursor:pointer;font-weight:600;
  }
  .btn-shortlist-panel{
    padding:8px 12px;
    font-size:13px;
  }
  
  .btn-shortlist-toggle{
    font-size:12px;
    padding:6px 8px;
  }
  
  .contact-channels .btn-social { min-width:100px; text-align:center; }
  /* main content */
  .content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:16px;
    min-height:70vh;
  }
  .topbar{
    display:flex;justify-content:space-between;align-items:center;padding:12px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    border-radius:12px;border:1px solid rgba(255,255,255,0.03);
  }
  .topbar h2{margin:0}
  .topbar .right{display:flex;gap:16px;align-items:center}
  .sort select{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:6px;color:var(--text)}
  .currency select{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:6px;color:var(--text)}
  /* -------- Banner Slider -------- */
/* ---------- Banner (improved) ---------- */
.banner-slider{
  position: relative;
  width: 100%;
  /* target ratio ~ 2.7:1 (851x315) */
  aspect-ratio: 2.7 / 1;
  /* fallback for older browsers */
  height: calc(100vw / 2.7);
  max-height: 360px;            /* optional limit on very tall screens */
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* track and slides stretch to full container (no fixed px heights) */
.banner-track{
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
}

.banner-slide{
  min-width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background: #0b0c0f; /* background for letterboxing */
}

/* image: keep entire image visible, centered, responsive */
.banner-slide img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;      /* <-- important: show full image */
  display: block;
  margin: 0 auto;
  background-color: transparent; /* change if you prefer solid bg */
  transition: transform .35s ease; /* small hover subtlety if desired */
}

/* optional: slight zoom on hover for effect (disable mobile via media-query) */
.banner-slide img:hover{ transform: scale(1.02); }

/* overlay caption (optional) */
.banner-slide .banner-caption{
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: var(--text);
  background: rgba(0,0,0,0.35);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}

/* nav buttons */
.banner-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
.banner-nav.left{ left: 12px; }
.banner-nav.right{ right: 12px; }

/* indicators */
.banner-indicators{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index: 30;
}
.banner-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.03);
}
.banner-dot.active{
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(123,92,255,0.1);
}

/* responsive adjustments */
@media (max-width: 980px){
  .banner-slider{
    aspect-ratio: 2.2 / 1;              /* slightly taller on small screens */
    height: calc(100vw / 2.2);          /* fallback */
    max-height: 240px;
  }
  .banner-slide img:hover{ transform: none; } /* no hover zoom on small */
  .banner-nav{ width:36px; height:36px; }
}

/* safety: if browser doesn't support aspect-ratio and calc fallback isn't desired,
   you can uncomment a fixed height fallback (optional):
.banner-slider{ height: 230px; }
.banner-slide{ height: 230px; }
*/

  
  /* product grid */
  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap:18px;
  }
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.03);
    display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
  .thumb{
    height:140px;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);
    border:1px solid rgba(255,255,255,0.03);
    overflow:hidden;
  }
  .thumb img{max-width:100%;max-height:100%;object-fit:cover}
  .card h4{margin:0;font-size:15px}
/* ===== Price alignment: badge kiri, harga+rating rata kanan ===== */
.price {
  margin-top: auto;
  display: flex;
  align-items: center;

  /* pastikan area mengambil lebar penuh dan item diatur ke kanan */
  justify-content: flex-end;
  gap: 12px;               /* jarak antar elemen */
}

/* Biarkan badge tetap di kiri dengan "push" menggunakan margin-right:auto */
.price .badge {
  margin-right: auto;      /* badge akan tetap di kiri, harga/rating di kanan */
  background: rgba(255,255,255,0.04);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Kolom meta: harga + rating, di-align ke kanan */
.price .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* arahkan isi ke kanan */
  text-align: right;
}

/* styling harga (opsional keep existing weight) */
.price .value {
  font-weight: 700;
  white-space: nowrap;     /* mencegah price pecah bila sempit */
}

  .price .value{font-weight:700}

  .badge{background:rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;font-size:13px;color:var(--muted)}
  .actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;   /* supaya muat + bisa pindah baris */
  }
  .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px;border-radius:8px;color:var(--text);cursor:pointer}
  
  /* spotlight card (bigger pop) */
  .card.featured{
    grid-column: span 2;
  }
  
  /* empty */
  .empty{padding:40px;border-radius:12px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03)}
  
  /* modal */
  .modal{
    position:fixed;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;
    z-index:40;backdrop-filter: blur(4px);
  }
  .modal[aria-hidden="true"]{display:none}
  .modal-panel{width:420px;background:linear-gradient(180deg,#0c0d10, #0f1115);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);position:relative}
  .modal-close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:var(--muted);font-size:22px;cursor:pointer}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
  /* ---- Cart / shortlist modal ---- */
.cart-modal-panel {
  width: 100%;
  max-width: 520px;
}

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 6px;
}

.cart-item-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}

.cart-item-remove:hover {
  background: rgba(255,255,255,0.06);
  color: #fca5a5;
}


.cart-note-wrap {
  margin-top: 8px;
}

#shortlistNote {
  width: 100%;
  margin-top: 4px;
  resize: vertical;
}

.cart-actions {
  margin-top: 14px;
  justify-content: space-between;
}
/* Add to Cart button style */
.btn-cart {
  background: #f59e0b; /* amber / orange */
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
  transition: .2s;
}

.btn-cart:hover {
  background: #d97706; /* darker hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 159, 0, 0.4);
}

.btn-cart:active {
  transform: translateY(0);
  box-shadow: none;
}
/* ==== Cart button in top bar ==== */
.btn-cart-panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #16a34a;           /* hijau */
  color: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(22,163,74,0.4);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}

.btn-cart-panel:hover {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22,163,74,0.5);
}

.btn-cart-panel:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(22,163,74,0.35);
}

.btn-cart-panel .cart-icon {
  font-size: 16px;
  line-height: 1;
}

.btn-cart-panel .cart-label {
  line-height: 1;
}

/* badge jumlah item */
.btn-cart-panel .cart-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f9fafb;
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.7);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

/* jika cart berisi item, badge muncul penuh */
.btn-cart-panel.has-items .cart-badge {
  opacity: 1;
  transform: scale(1);
}
/* ==== Floating cart button for mobile ==== */
.mobile-cart-fab {
  display: none; /* default: tidak muncul di desktop */
}

/* Hanya tampil di layar <= 980px */
@media (max-width: 980px) {
  .mobile-cart-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999; /* di atas konten, masih di bawah toast/modal */
    bottom: 22px; /* sedikit lebih tinggi dari sebelumnya */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: #16a34a;
    color: #f9fafb;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  }

  .mobile-cart-fab .cart-icon {
    font-size: 18px;
    line-height: 1;
  }

  .mobile-cart-fab .cart-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f9fafb;
    color: #065f46;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }

  .mobile-cart-fab.has-items .cart-badge {
    opacity: 1;
    transform: scale(1);
  }
}

  /* gallery modal */
  .gallery-modal{
    position:fixed;inset:0;background:rgba(2,6,23,0.7);display:flex;align-items:center;justify-content:center;
    z-index:60;backdrop-filter: blur(6px);
  }
  .gallery-modal[aria-hidden="true"]{display:none}
  .gallery-panel{
    width: min(1100px, 96%);
    background: linear-gradient(180deg,#0c0d10,#0f1115);
    border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.04);
    position:relative;display:flex;flex-direction:column;gap:12px;
  }
  .gallery-close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:var(--muted);font-size:26px;cursor:pointer}
  .gallery-body{display:flex;align-items:center;gap:12px;justify-content:center}
  .gallery-image-wrap{width:720px;height:420px;display:flex;align-items:center;justify-content:center;background:var(--glass);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
  .gallery-image-wrap img{max-width:100%;max-height:100%;object-fit:contain}
  .nav{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:var(--text);cursor:pointer}
  .gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px}
  .gallery-thumbs img{width:84px;height:56px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer}
  .gallery-thumbs img.active{border-color:var(--accent)}
  .gallery-caption{color:var(--muted);font-size:13px;padding:0 6px}
  
  .contact-channels{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .btn-social{
    padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);
    background:transparent;color:var(--text);cursor:pointer;font-weight:600;text-decoration:none;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-social.whatsapp{background:linear-gradient(90deg,#25D366,#128C7E);color:white}
  .btn-social.facebook{background:linear-gradient(90deg,#1877F2,#0B5DD7);color:white}
  .btn-social.instagram{
    background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    color:white;
  }
  .btn-youtube{
    background: linear-gradient(90deg,#FF0000,#CC0000);
    color: #fff;
    padding:8px 10px;
    border-radius:8px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    border: none;
  }
  .btn-youtube:hover{ filter:brightness(.95) }
  .price-table{display:flex;flex-direction:column;gap:10px}
  .price-row{display:flex;justify-content:space-between;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
  .price-row .label{font-weight:600}

  /* responsive */
  @media (max-width:980px){
    .app{padding:16px;flex-direction:column}
    .sidebar{width:100%}
    .card.featured{grid-column:auto}
    .gallery-image-wrap{width:92%;height:360px}
  }
  /* ---- Toast Notification (dynamic) ---- */
.toast {
  position: fixed; /* we will set left/top inline */
  min-width: 160px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.98);
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1), transform 260ms cubic-bezier(.2,.9,.2,1);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  gap:10px;
  align-items:center;
}

/* toast visible */
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

/* variants */
.toast.success { background: linear-gradient(135deg,#10b981,#059669); }
.toast.error   { background: linear-gradient(135deg,#ef4444,#dc2626); }
.toast.info    { background: linear-gradient(135deg,#2563eb,#4f46e5); }

/* small "check" icon box */
.toast .icon {
  width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;
  flex:0 0 28px;
}
.toast .msg { line-height:1.1; font-weight:600; font-size:14px; color: #fff; }
/* ===== Sticky sidebar + internal scrolling for product content ===== */

/* pastikan .app memakai tinggi viewport penuh dan tak menyebabkan body scroll */
.app {
  height: calc(100vh - 56px); /* sesuaikan jika padding .app berubah */
  overflow: hidden;           /* cegah halaman utama ikut bergulir */
  align-items: stretch;
}

/* sidebar tetap terlihat (sticky) saat konten discroll;
   juga beri overflow jika isi sidebar terlalu panjang */
.sidebar {
  position: sticky;
  top: 28px; /* sama dengan padding-top .app (28px) agar sejajar */
  height: calc(100vh - 56px);
  overflow: auto;
}

/* konten utama jadi area scroll sendiri */
.content {
  height: calc(100vh - 56px);
  overflow: auto;
  padding: 16px 18px; /* opsional: sesuaikan agar rapi */
}

/* jangan ganggu elemen yang harus fixed (modal, toast, dll.) */
.modal, .gallery-modal, #toast {
  position: fixed;
  z-index: 9999;
}
#toast {
  position: fixed !important;
  z-index: 12000 !important;
}

/* pada layar kecil, kembalikan ke layout stacked supaya sticky tidak mengganggu */
@media (max-width: 980px) {
  .app {
    height: auto;
    overflow: visible;
    flex-direction: column;
    padding: 16px; /* seperti aturan responsive yang sudah ada */
  }
  .sidebar {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    width: 100%;
  }
  .content {
    height: auto;
    overflow: visible;
    padding: 0;
  }
}
/* ===== Fix: prevent banner from shrinking inside .content (sticky layout) ===== */

/* Pastikan banner tidak dipaksa mengecil ketika .content adalah flex-column */
.content .banner-slider {
  flex: 0 0 auto;       /* jangan shrink, jangan grow */
  align-self: stretch;  /* lebar mengikuti container */
  min-height: 200px;    /* minimal tinggi yang nyaman — sesuaikan jika perlu */
  max-height: 360px;    /* seperti batas sebelumnya */
}

/* jika ingin banner lebih tinggi di layar besar */
@media (min-width: 1200px) {
  .content .banner-slider { min-height: 260px; }
}

/* mobile: buat banner lebih ramping agar tidak memakan ruang berlebihan */
@media (max-width: 980px) {
  .content .banner-slider {
    min-height: 160px;
    aspect-ratio: 2.2 / 1; /* seperti responsive rule yang ada */
    height: auto;          /* biarkan aspect-ratio bekerja */
  }
}
/* --- Grid view toggle styles --- */
.grid.view-compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.grid.view-large {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.grid.view-compact .thumb { height: 140px; }
.grid.view-large .thumb { height: 220px; border-radius:14px; }

.grid.view-large .card { padding:18px; }
.grid.view-compact .card { padding:12px; }

#gridViewSelect { min-width:130px; }
/* FIX: hide mobile panel/handle/overlay by default on desktop */
.mobile-controls-panel {
  display: none;
  left: -320px; /* keep hidden off-canvas */
}
.mobile-controls-handle {
  display: none;
}
.mobile-overlay {
  display: none;
}

@media (max-width:980px){
  .grid.view-large { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
  .grid.view-compact { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
  .grid.view-large .thumb { height:180px; }
}
/* ===== Mobile-only: slide-in controls & header fix ===== */
@media (max-width: 980px) {
  /* small round toggle button in topbar */
  .mobile-controls-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:38px;
    height:38px;
    border-radius:10px;
    border:none;
    background: linear-gradient(135deg, rgba(123,92,255,0.12), rgba(74,217,200,0.06));
    color:var(--text);
    font-weight:700;
    margin-right:10px;
    cursor:pointer;
  }

  /* topbar left area tweaks so title wraps nicely */
  .topbar {
    gap: 8px;
    padding: 10px 12px;
    align-items: flex-start;
  }
  .topbar .left h2 {
    font-size: 18px;
    margin: 0 0 6px 0;
    line-height: 1.05;
  }
  .topbar .left p.muted { display: none; } /* hide subtitle on very narrow mobile for cleaner header */

  /* hide the .right controls inline; they will be available via slide panel */
  .topbar .right { display: none; }

  /* create off-canvas left panel for controls */
  .mobile-controls-panel {
    position: fixed;
    top: 0;
    left: -320px; /* hidden by default */
    width: 300px;
    height: 100vh;
    background: linear-gradient(180deg,#0c0d10,#0f1115);
    border-right: 1px solid rgba(255,255,255,0.03);
    box-shadow: 8px 0 30px rgba(2,6,23,0.6);
    z-index: 9998;
    padding: 18px;
    transition: left 240ms cubic-bezier(.2,.9,.2,1);
    overflow:auto;
  }
  .mobile-controls-panel.open { left: 0; }

  /* small handle tab visible when panel closed, placed at left edge */
  .mobile-controls-handle {
    position: fixed;
    left: 6px;
    top: 60px;
    z-index: 9999;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    padding:8px 10px;
    border-radius:8px;
    font-weight:700;
    box-shadow:0 8px 24px rgba(2,6,23,0.5);
    cursor:pointer;
  }

  /* inside panel: spacing */
  .mobile-controls-panel .section { margin-bottom: 16px; }
  .mobile-controls-panel label.muted { display:block; margin-bottom:6px; font-size:13px; color:var(--muted); }

  /* ensure content area uses full width when panel open? add small overlay */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .mobile-overlay.show { opacity: 1; pointer-events: auto; }

  /* adjust product grid spacing for mobile so header + toggles not overlapping */
  .content { padding-top: 8px; }
}
/* Mobile: hide desktop sidebar and make content full-width */
@media (max-width: 980px) {
  .sidebar {
    display: none !important;    /* sembunyikan sidebar di layar kecil */
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Pastikan konten utama mengambil ruang penuh */
  .app {
    padding: 12px;
    flex-direction: column; /* stack content vertically */
  }
  .content {
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 8px 0;
  }
}
/* --- Refined Action Buttons --- */

/* "View" button — jadi fokus utama, tegas tapi elegan */
.btn-outline,
button.view-btn {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}
.btn-outline:hover,
button.view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}
.btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* YouTube button — lebih tenang, bukan merah mencolok */
.btn-youtube {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  color: #fff;
  font-weight: 600;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn-youtube:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  transform: translateY(-1px);
}

/* Contact button — soft teal gradient */
.btn-contact {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-weight: 600;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(16,185,129,0.25);
}
.btn-contact:hover {
  background: linear-gradient(135deg, #10b981, #34d399);
  transform: translateY(-1px);
}
/* Layout tombol di dalam card */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Setiap tombol jadi 2 kolom di desktop, otomatis stack di mobile */
.actions button,
.actions a {
  flex: 1 1 calc(50% - 8px); /* 2 tombol per baris */
  min-width: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Product modal: Steam-like layout ===== */
.product-modal {
  position: fixed; inset: 0;
  background: rgba(2,6,23,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; backdrop-filter: blur(6px);
}
.product-modal[aria-hidden="true"] { display: none; }

.product-panel {
  width: min(1100px, 96%);
  max-height: 92vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0d10, #0f1115);
  border-radius: 12px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(2,6,23,0.7);
}

.product-close {
  position: absolute; right: 18px; top: 10px;
  background: transparent; border: none; color: var(--muted);
  font-size: 28px; cursor: pointer;
}

/* panel body two-column */
.product-body {
  display: flex; gap: 18px; align-items: flex-start;
}

/* Left gallery */
.product-left {
  flex: 1.4;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 420px;
}

.product-main-wrap {
  display:flex; align-items:center; gap:12px; justify-content:center;
}
.product-main-image {
  flex: 1; background: var(--glass); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; height:420px; border:1px solid rgba(255,255,255,0.03);
}
.product-main-image img { max-width:100%; max-height:100%; object-fit:contain; display:block; opacity:1;}

.gallery-nav {
  background: transparent; border:1px solid rgba(255,255,255,0.04); color:var(--text);
  padding:8px; border-radius:8px; cursor:pointer;
}
/* hide sku block visually on all devices */
#productSKUWrap { display: none; }

/* thumbnails */
.product-thumbs { display:flex; gap:8px; overflow-x:auto; padding-top:8px; }
.product-thumbs img { width:96px; height:64px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.product-thumbs img.active { border-color: var(--accent); transform: translateY(-3px); }

/* caption */
.product-caption { color:var(--muted); font-size:13px; padding-top:6px; }

/* Right details */
.product-right {
  flex: 0.8; min-width:260px; display:flex; flex-direction:column; gap:12px;
}
.product-meta h2 { margin:0; font-size:20px; }
.product-price { font-weight:800; font-size:20px; margin-top:6px; color:var(--text); }
.product-desc { color:var(--muted); font-size:14px; line-height:1.5; max-height:40vh; overflow:auto; padding-right:6px; }
.product-tag {
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  border:1px solid rgba(255,255,255,0.02);
}
.product-right img#productRightThumb { object-fit: contain; }
/* SVG star sizing in cards */
.star-svg { width:14px; height:14px; display:inline-block; vertical-align:middle; margin-right:4px; }
.stars { display:inline-flex; gap:4px; align-items:center; }
.rating-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.rate-value { font-size:12px; color:var(--muted); margin-left:4px; }



/* responsive: stack on small screens */
@media (max-width: 980px) {
  .product-body { flex-direction: column; }
  .product-left { min-width: auto; }
  .product-main-image { height: 300px; }
  .product-right { width: 100%; }
  .product-thumbs img { width:72px; height:48px; }
}
/* Card description excerpt: potong jadi 3 baris, tampil rapi dengan ellipsis */
/* Card description excerpt: potong jadi 3 baris, tampil rapi dengan ellipsis */
.card .excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* vendor + standard: tambahkan keduanya untuk menghilangkan warning editor */
  -webkit-line-clamp: 3;   /* ganti angka ini untuk jumlah baris yang diinginkan */
  line-clamp: 3;

  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 13px;
  margin: 0;
  line-height: 1.45;
  color: var(--muted);
}


/* ===== About modal tweaks (paste near the end of storepage.css) ===== */
.modal-panel .about-wrap { width: 100%; }
.about-inner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;          /* responsive: will stack on narrow screens */
}

/* left media */
.about-media {
  flex: 0 0 160px;          /* fixed but modest width */
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-media img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 10px;
  border: 4px solid rgba(0,0,0,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* content area (scroll inside if tall) */
.about-content {
  flex: 1 1 320px;
  min-width: 200px;
  max-height: 62vh;         /* keep modal height reasonable */
  overflow: auto;           /* internal scroll for long text */
  padding-right: 6px;
}
.about-content h2 { margin: 0 0 8px 0; }
.about-text { color: var(--muted); line-height: 1.6; font-size: 14px; }

/* buttons row */
.about-actions { margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

/* ensure close button is visible and placed */
.modal-panel .modal-close {
  right: 16px;
  top: 10px;
  z-index: 5;
}

/* widen modal-panel for About (but keep product modal layout intact) */
.modal-panel {
  max-width: 920px;        /* allow wide modal for About / Price */
  width: min(920px, 96%);
}
#aboutModal .about-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

.btn-software {
  display:inline-block;
  width:100%;
  padding:10px;
  border-radius:8px;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  color: #fff;
  background: linear-gradient(135deg, #1040b9, #041d5c); /* hijau pekat -> lembut */
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(16,185,129,0.12);
}
.btn-software:hover {
  transform: translateY(-2px);
}

/* fallback for small screens */
@media (max-width: 760px) {
  .about-media { flex: 0 0 120px; }
  .about-media img { width: 110px; height:110px; }
  .modal-panel { width: calc(100% - 24px); margin: 0 12px; }
}



/* Hide mobile menu button on desktop */
#mobileControlsToggle {
  display: none;
}

/* ===== FIX: Mobile Controls Slide Panel Visibility ===== */
@media (max-width: 980px) {
  .mobile-controls-panel {
    display: block;
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: linear-gradient(180deg,#0c0d10,#0f1115);
    border-right: 1px solid rgba(255,255,255,0.03);
    box-shadow: 8px 0 30px rgba(2,6,23,0.6);
    z-index: 9998;
    padding: 18px;
    transition: left 240ms cubic-bezier(.2,.9,.2,1);
    overflow-y: auto;
  }

  .mobile-controls-panel.open {
    left: 0; /* panel keluar dari sisi kiri */
  }

  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }
}
/* ===== Mobile: tidy up categories & controls (paste inside mobile rules or after them) ===== */
@media (max-width: 980px) {
  /* sections spacing inside panel */
  .mobile-controls-panel .section {
    margin-bottom: 18px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255,255,255,0.02);
  }
  .mobile-controls-panel .section:last-child {
    border-bottom: none;
    margin-bottom: 6px;
  }

  /* unify label style */
  .mobile-controls-panel label.muted,
  .mobile-controls-panel .section > label {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
  }

  /* search input full-width, consistent style */
  #searchMobile {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.035);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(123,92,255,0.03);
    outline: none;
  }
  #searchMobile::placeholder { color: rgba(255,255,255,0.25); }

  /* mobile category list clean, no bullets, vertical cards */
  #categoryListMobile {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #categoryListMobile li {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--muted);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.02);
    transition: all 180ms ease;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* hover / active */
  #categoryListMobile li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2,6,23,0.45);
    color: var(--text);
    border-color: rgba(255,255,255,0.04);
  }
  #categoryListMobile li.active {
    background: linear-gradient(90deg, rgba(123,92,255,0.10), rgba(74,217,200,0.04));
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.04);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(123,92,255,0.06);
  }

  /* make selects full-width and visually consistent */
  #sortSelectMobile, #gridViewSelectMobile, #currencySelectMobile {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.035);
    color: var(--text);
    outline: none;
  }

  /* unify action buttons to full width and consistent height */
  #priceBtnMobile, #contactBtnMobile {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(2,6,23,0.4);
    border: none;
    cursor: pointer;
  }
  #priceBtnMobile { background: linear-gradient(90deg,#6d5cff,#7b7dff); color: #fff; }
  #contactBtnMobile { background: linear-gradient(90deg,#20b58d,#10b981); color: #fff; }

  /* small helper: collapse icon handle so it doesn't overlap content */
  .mobile-controls-toggle {
    box-shadow: 0 6px 16px rgba(2,6,23,0.45);
  }

  /* scrollbar styling inside panel for nicer look */
  .mobile-controls-panel::-webkit-scrollbar { width: 8px; }
  .mobile-controls-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(123,92,255,0.18), rgba(74,217,200,0.12));
    border-radius: 8px;
  }

  /* ensure spacing from top so it doesn't collide with header */
  .mobile-controls-panel { padding-top: 22px; padding-left: 18px; padding-right: 18px; }
}
/* ===== MOBILE-FIX: product modal (mobile only) ===== */
@media (max-width: 480px) {
  /* panel sizing */
  .product-panel {
    width: 94%;
    padding: 12px;
    border-radius: 10px;
    max-height: 92vh; /* keep modal scrollable inside */
    overflow: auto;
  }

  /* stack main columns vertically */
  .product-body {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  /* left gallery becomes full width */
  .product-left {
    order: 1;
    min-width: auto;
    width: 100%;
    display: block;
  }

  /* ensure wrapper is relative so nav buttons can be absolute */
  .product-main-wrap { position: relative; }

  /* main image: responsive, not too tall */
  .product-main-image {
    width: 100%;
    height: 260px;        /* comfortable height for mobile */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* cover gives nicer full-bleed on small screens */
    display: block;
  }

  /* nav buttons overlay on image, smaller */
  .product-main-wrap .gallery-nav,
  .product-main-wrap .gallery-nav.prev,
  .product-main-wrap .gallery-nav.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    z-index: 30;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  }
  .product-main-wrap .gallery-nav.prev { left: 8px; }
  .product-main-wrap .gallery-nav.next { right: 8px; }

  /* thumbs: horizontal scroll, below main image */
  .product-thumbs {
    order: 2;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
  }
  .product-thumbs img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    flex: 0 0 auto;
  }
  .product-thumbs img.active { transform: translateY(-2px); border-color: var(--accent); }

  /* caption small and left aligned */
  .product-caption { order: 3; text-align: left; padding-left: 6px; color: var(--muted); }

  /* product details move under gallery */
  .product-right {
    order: 4;
    width: 100%;
    min-width: auto;
    padding: 8px 0;
    display: block;
  }

  /* hide the large right-side thumbnail on mobile to save space */
  #productRightThumb { display: none !important; }

  /* description should be scrollable but limited height */
  .product-desc {
    max-height: 30vh;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* actions (YouTube / Contact) stack and stretch full width for easy tap */
  .product-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .product-actions .btn-youtube,
  .product-actions .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
    text-align: center;
  }

  /* smaller close button, reachable */
  .product-close { right: 8px; top: 8px; font-size: 22px; }

  /* reduce modal shadow & spacing a bit for small screens */
  .product-panel { box-shadow: 0 14px 40px rgba(2,6,23,0.6); }
}
  .product-thumb-mini {
    width: 86px; height: 54px; object-fit: cover;
    filter: blur(6px);
    transition: filter .28s ease, transform .12s ease;
  }
  .product-thumb-mini.loaded { filter: none; }
  .product-thumb-mini[data-type="video"] {
    position: relative;
    /* optionally add a darker overlay to indicate video */
  }
  .product-thumb-mini[data-type="video"]::after {
    content: '▶';
    position: absolute;
    color: white;
    font-size: 18px;
    left: 6px;
    top: 6px;
    background: rgba(0,0,0,0.35);
    padding: 2px 6px;
    border-radius: 4px;
  }


/* ========== Mobile button styling inside mobile controls panel ========== */
@media (max-width: 480px) {
  /* ensure mobile control panel spacing is consistent */
  #mobileControlsPanel .section,
  #mobileControlsPanel > div {
    margin-bottom: 10px;
  }

  /* Price List mobile button already uses btn-primary; make sure full width */
  #priceBtnMobile.btn-primary {
    width: 100%;
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 600;
    text-align: center;
  }

  /* Software link: make it look & behave like same full-width button */
  #mobileControlsPanel #softwareBtn.btn-software {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff; /* ensure readable */
    background: linear-gradient(180deg, #0b66c2, #063a7a); /* blue gradient */
    border: none;
    box-shadow: none;
    font-weight: 600;
    margin: 1px 0;
  }

  /* About button in mobile panel */
  #mobileControlsPanel #aboutBtn.btn-contact {
    width: 100%;
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
  }

  /* small tweak: enlarge touch targets for accessibility */
  #mobileControlsPanel button, #mobileControlsPanel a {
    min-height: 44px;
    line-height: 1.1;
  }
}
/* ===== MOBILE: Force-unify all control panel buttons (final override) ===== */
@media (max-width: 480px) {
  /* target semua tombol/anchor yang muncul di mobile controls panel */
  #mobileControlsPanel,
  #mobileControlsPanel button,
  #mobileControlsPanel a#softwareBtn,
  #mobileControlsPanel .btn-social,
  #mobileControlsPanel .btn-primary,
  #mobileControlsPanel .btn-contact {
    /* ensure panel base */
    color: #fff !important;
    font-family: inherit !important;
  }

  /* unified button base */
  #mobileControlsPanel button,
  #mobileControlsPanel a#softwareBtn,
  #mobileControlsPanel .btn-social {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 120ms ease !important;
    box-shadow: 0 10px 28px rgba(2,6,23,0.45) !important;
    color: #fff !important;
  }

  /* neutralize odd inherited backgrounds: set neutral base then per-variant colors below */
  #mobileControlsPanel button,
  #mobileControlsPanel a#softwareBtn,
  #mobileControlsPanel .btn-social {
    background: linear-gradient(90deg, #222428, #1b1d20) !important;
    opacity: 1 !important;
  }

  /* variant colors (explicit, high-specificity) */
  #mobileControlsPanel #priceBtnMobile,
  #mobileControlsPanel .price-variant {
    background: linear-gradient(90deg, #6d5cff, #7b7dff) !important;
  }

  #mobileControlsPanel a#softwareBtn,
  #mobileControlsPanel .software-variant {
    background: linear-gradient(90deg, #0f5fb8, #063a7a) !important;
  }

  #mobileControlsPanel #aboutBtn,
  #mobileControlsPanel .about-variant {
    background: linear-gradient(90deg, #10b981, #059669) !important;
  }

  /* subtle press effect */
  #mobileControlsPanel button:active,
  #mobileControlsPanel a#softwareBtn:active,
  #mobileControlsPanel .btn-social:active {
    transform: translateY(1px) !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.34) !important;
    opacity: 0.98 !important;
  }

  /* ensure anchors behave like buttons on mobile (prevent default underline) */
  #mobileControlsPanel a#softwareBtn { text-decoration: none !important; display:block !important; }

  /* keep accessibility: minimum hit area */
  #mobileControlsPanel button, #mobileControlsPanel a#softwareBtn { min-height: 48px !important; line-height: 1.2 !important; }

  /* remove conflicting shadows or borders from previous rules */
  #mobileControlsPanel button,
  #mobileControlsPanel a#softwareBtn {
    border: none !important;
    outline: none !important;
  }

  /* optional: if desktop styles leak, force font color for icons inside */
  #mobileControlsPanel button svg, #mobileControlsPanel a#softwareBtn svg {
    fill: #fff !important;
    color: #fff !important;
  }
}
/* ===== MOBILE: normalize spacing for mobile controls panel ===== */
@media (max-width: 480px) {
  /* Buat semua direct child di panel konsisten spacing-nya */
  #mobileControlsPanel > * {
    margin: 0 0 1px 0;            /* jarak vertikal konsisten */
    padding: 0;
  }

  /* Pastikan setiap tombol/anchor fill width dan tidak mewarisi margin wrapper */
  #mobileControlsPanel button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;         /* hilangkan margin ganda */
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* Jika ada wrapper <div> tanpa kelas buat kerapihan, jangan biarkan dia beri extra spacing */
  #mobileControlsPanel > div:not(.section) {
    margin-bottom: 0;
  }

  /* Pastikan ikon / elemen dalam tidak mempengaruhi tinggi visual */
  #mobileControlsPanel > * > * { margin: 0; }
}
/* === Sticky recommendation slot (bottom) === */
.sticky-recs {
  position: fixed;
  left: calc(28px + 300px);  /* biar tidak nabrak sidebar kiri */
  right: 28px;
  top: 28px;                 /* <-- pindahkan dari bottom ke top */
  z-index: 11000;
  background: linear-gradient(180deg, rgba(15,16,20,0.95), rgba(12,13,16,0.92));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  max-height: 120px;
  backdrop-filter: blur(6px);
}
@media (max-width: 980px) {
  .sticky-recs {
    left: 12px;
    right: 12px;
    top: 12px;
  }
}


/* inner container aligns nav + track */
.sticky-recs .sticky-inner {
  display:flex;
  align-items:center;
  width:100%;
  gap:10px;
}

/* nav arrows */
.sticky-recs .recs-nav {
  width:40px;height:40px;border-radius:8px;border:none;background:rgba(0,0,0,0.4);
  color:var(--text); font-size:20px; cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* close button */
.sticky-recs .recs-close {
  position:absolute; right:8px; top:6px; background:transparent; border:none; color:var(--muted); font-size:16px; cursor:pointer;
}

/* track viewport */
.recs-track-wrap {
  overflow: hidden;
  flex:1;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), transparent);
}

/* horizontal track */
.recs-track {
  display:flex;
  gap:10px;
  padding:8px;
  will-change: transform;
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
  align-items:center;
}

/* each recommendation card */
.recs-item {
  flex: 0 0 auto;
  width: 140px;
  border-radius:8px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
}
.product-nav-items {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.product-nav-items .btn-secondary {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
}
/* ==== Similar products section (under gallery row) ==== */
.similar-products {
  margin-top: 18px;
}

.similar-products h3 {
  font-size: 14px;
  margin: 0 0 8px 0;
}

.similar-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

/* kartu */
.similar-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease;
}

.similar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.similar-card img {
  width: 100%;
  max-height: 130px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

.similar-card p {
  margin: 6px 0 0 0;
  font-size: 13px;
}

/* mobile: 1 kolom biar enak di-tap */
@media (max-width: 640px) {
  .similar-wrapper {
    grid-template-columns: 1fr;
  }
}

/* media & text */
.recs-item img { width:100%; height:80px; object-fit:cover; border-radius:6px; }
.recs-item .label { font-size:13px; font-weight:700; color:var(--text); }
.recs-item .muted { font-size:12px; color:var(--muted); }

/* small screens: full width bottom bar */
@media (max-width: 980px) {
  .sticky-recs { left: 12px; right: 12px; bottom: 12px; border-radius: 10px; padding:8px; min-height:72px; }
  .recs-item { width: 120px; }
  .stcky-recs .recs-nav { display:none; } /* hide arrows on very small */
}
/* default variable (bisa disesuaikan) */
:root { --sticky-recs-gap: 28px; } /* jarak dari bawah jika mau */
/* collapsed state */
.sticky-recs.collapsed {
  height: 42px;
  min-height: 42px;
  padding: 6px;
  border-radius: 8px;
}
.sticky-recs.collapsed .recs-track { transform: translateX(0); opacity: 0; pointer-events: none; }
.sticky-recs.collapsed .recs-nav { display: none; }
.sticky-recs.collapsed .recs-close { right: 6px; top: 4px; }

/* expand on hover / focus */
.sticky-recs.collapsed:hover,
.sticky-recs.collapsed:focus-within {
  height: 110px;
  min-height: 110px;
}
.sticky-recs.collapsed:hover .recs-track,
.sticky-recs.collapsed:focus-within .recs-track {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 220ms;
}
/* === Mobile fix for sticky recommendations === */
@media (max-width: 980px) {
  .sticky-recs {
    top: 60px;                   /* geser ke bawah agar tidak menabrak menu */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    z-index: 5000 !important;    /* cukup tinggi, tapi tidak menutup menu */
  }

  .sticky-recs .sticky-inner {
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (max-width: 980px) {
  .sticky-recs {
    position: sticky;
  }
}

/* if your sidebar is not present on mobile, the left calc is harmless */