
  /* Order button under each product */
 .suya9ja-order-btn{
    margin-top:8px;
    padding:3px 5px;          /* 🔽 reduced size */
    font-size:10px;           /* 🔽 smaller text */
    border:0;
    border-radius:6px;
    background:#d62828;       /* 🔴 red */
    color:#fff;
    font-weight:700;
    cursor:pointer;
    width:auto;               /* prevents full width */
  }
  .suya9ja-order-btn:hover{
    background:#b71c1c;       /* darker red on hover */
  }
  .suya9ja-order-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
  }

  /* Fullscreen transparent queue overlay */
  #suya9jaQueueOverlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
  }
  #suya9jaQueueOverlay .box{
    background:gray;
    border-radius:14px;
    padding:20px 22px;
    max-width:520px;
    width:92%;
    text-align:center;
  }
  #suya9jaQueueOverlay .title{
    font-size:18px;
    font-weight:800;
    margin:0 0 8px 0;
  }
  #suya9jaQueueOverlay .sub{
    font-size:14px;
    margin:0 0 14px 0;
  }
  #suya9jaQueueOverlay .spinner{
    width:26px;height:26px;
    border:4px solid #d7dbe0;
    border-top-color:#25D366;
    border-radius:50%;
    margin:0 auto 10px auto;
    animation:suya9jaSpin .8s linear infinite;
  }
  @keyframes suya9jaSpin{ to{ transform:rotate(360deg);} }

  /* =========================
     PRODUCT PHOTO LIGHTBOX
     ========================= */
  .suya9ja-product-photo{
    cursor:pointer;
  }

  #suya9jaLightbox{
    position:fixed; inset:0;
    background:rgba(0,0,0,.88);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999998; /* above everything (except chat if needed) */
    padding:18px;
  }
  #suya9jaLightbox .inner{
    position:relative;
    max-width:94vw;
    max-height:94vh;
    width:auto;
  }
  #suya9jaLightbox img{
    display:block;
    max-width:94vw;
    max-height:84vh;
    width:auto;
    height:auto;
    border-radius:14px;
    box-shadow:0 14px 50px rgba(0,0,0,.55);
    background:#111;
  }
  #suya9jaLightbox .caption{
    margin-top:10px;
    color:#fff;
    font-weight:800;
    text-align:center;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:14px;
    opacity:.95;
  }
  #suya9jaLightbox .closeBtn{
    position:absolute;
    top:-10px;
    right:-10px;
    width:40px;
    height:40px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:22px;
    font-weight:900;
    line-height:40px;
    text-align:center;
    backdrop-filter: blur(4px);
  }
  #suya9jaLightbox .navBtn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:0;
    border-radius:14px;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:26px;
    font-weight:900;
    line-height:44px;
    text-align:center;
    backdrop-filter: blur(4px);
  }
  #suya9jaLightbox .prevBtn{ left:-54px; }
  #suya9jaLightbox .nextBtn{ right:-54px; }

  @media (max-width: 520px){
    #suya9jaLightbox .prevBtn{ left:6px; }
    #suya9jaLightbox .nextBtn{ right:6px; }
    #suya9jaLightbox .closeBtn{ top:6px; right:6px; }
  }

  #suya9jaLightbox .hint{
    color:rgba(255,255,255,.8);
    text-align:center;
    font-size:12px;
    margin-top:6px;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }

/* SUYA9JA logo styling */
.suya9ja-logo {
  font-weight: 900;
}

/* SUYA text */
.suya-text {
  font-size: 32px;        /* increase SUYA size */
  color: #f00707;        /* keep SUYA white (change if you want) */
}

/* 9JA text */
.naija-text {
  font-size: 36px;        /* make 9JA slightly bigger */
  color: rgb(35, 159, 35);        /* 🍋 Lemon color */
  margin-left: 2px;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Make images and videos never overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Safety for bootstrap rows/containers if something breaks layout */
.container, .container-fluid {
  max-width: 100%;
}
