*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#2a210d 0,#080706 35%,#000 75%);color:#fff;font-family:Arial,sans-serif}.page{width:min(820px,100%);margin:auto;padding:18px}.hero{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 0 24px}.logo{width:130px;height:130px;object-fit:cover;border-radius:22px;box-shadow:0 0 0 1px #6a5526,0 18px 55px #000}.eyebrow{margin:0;color:#f3dc9b;font-weight:900;letter-spacing:1.5px}h1{margin:5px 0 0;font-size:31px}.tagline{color:#b9b09a}.card{background:linear-gradient(#15130f,#090908);border:1px solid #3e341f;border-radius:20px;padding:18px;margin-bottom:15px}h2{margin:0 0 14px;color:#f3dc9b;font-size:16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label span{display:block;color:#f3dc9b;font-size:12px;font-weight:800;margin-bottom:6px}input{width:100%;padding:13px 14px;border:1px solid #4b4027;border-radius:12px;background:#050505;color:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.section-head p{margin:0;color:#b9b09a;font-size:12px}.search{max-width:270px}.product{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #2b2517}.pname{font-weight:900}.meta{display:flex;gap:8px;margin-top:6px}.price{color:#f3dc9b;font-weight:800}.badge{font-size:10px;border:1px solid #443a23;border-radius:999px;padding:3px 8px;color:#cfc6b1}.qty{display:flex;align-items:center;gap:8px}.qty button{width:40px;height:40px;border-radius:12px;border:1px solid #5a4c2b;background:#181713;color:#f3dc9b;font-size:21px}.qty span{min-width:30px;text-align:center;font-weight:900}.status{padding:16px;text-align:center;color:#b9b09a}.summary{display:grid;grid-template-columns:1fr auto;gap:9px}.summary strong{color:#f3dc9b}.grand{font-size:22px;border-top:1px solid #3e341f;padding-top:14px;margin-top:5px}.primary{width:100%;margin-top:18px;padding:15px;border:0;border-radius:14px;background:linear-gradient(135deg,#9d6c12,#f3d77d,#99680f);font-weight:900}.message{display:none;margin-top:13px;padding:13px;border-radius:12px}.message.ok{display:block;background:#0e2816;color:#b9f5c8;border:1px solid #275c35}.message.err{display:block;background:#321313;color:#ffb4b4;border:1px solid #6d2b2b}.selected{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #332c1c}.mobile{display:none}@media(max-width:640px){.page{padding:10px 10px 92px}.hero{gap:12px}.logo{width:92px;height:92px}.eyebrow{font-size:12px}h1{font-size:21px}.grid{grid-template-columns:1fr}.section-head{display:block}.search{max-width:none;margin-top:10px}.mobile{display:flex;position:fixed;left:10px;right:10px;bottom:10px;justify-content:space-between;align-items:center;padding:10px 13px;border:1px solid #5a4b29;border-radius:15px;background:#0f0e0bf2}.mobile strong{display:block;color:#f3dc9b}.mobile button{padding:10px 13px;border:0;border-radius:11px;background:linear-gradient(135deg,#aa7718,#efd071);font-weight:900}}

body.modal-open{overflow:hidden}
button{font-family:inherit}
button:disabled{opacity:.55;cursor:not-allowed}

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  padding:18px;
  background:rgba(0,0,0,.82);
  align-items:center;
  justify-content:center;
  overflow:auto;
}
.modal.show{display:flex}
.modal-card{
  position:relative;
  width:min(680px,100%);
  max-height:92vh;
  overflow:auto;
  border:1px solid #69552c;
  border-radius:20px;
  background:linear-gradient(180deg,#17150f,#080807);
  box-shadow:0 28px 90px #000;
  padding:22px;
}
.modal-close{
  position:absolute;
  right:12px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #5a4b2b;
  background:#181713;
  color:#f3dc9b;
  font-size:25px;
  cursor:pointer;
}
.invoice-header{
  display:flex;
  gap:14px;
  align-items:center;
  padding-right:40px;
  border-bottom:1px solid #41351f;
  padding-bottom:14px;
}
.invoice-header img{
  width:74px;
  height:74px;
  object-fit:cover;
  border-radius:14px;
}
.invoice-header h2{margin:0 0 4px;font-size:20px}
.invoice-header p{margin:0;color:#b9b09a;font-size:12px}
.invoice-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:16px 0;
}
.invoice-meta div{
  background:#0d0c09;
  border:1px solid #332b1b;
  border-radius:11px;
  padding:10px;
}
.invoice-meta span{
  display:block;
  color:#a89e88;
  font-size:10px;
  margin-bottom:5px;
}
.pending-tag{color:#ffd26b}
.invoice-items{
  border-top:1px dashed #4c4025;
  border-bottom:1px dashed #4c4025;
  padding:8px 0;
}
.invoice-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
}
.invoice-totals{padding-top:12px}
.invoice-totals>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:6px 0;
}
.invoice-grand{
  margin-top:8px;
  padding-top:14px!important;
  border-top:1px solid #69552c;
  font-size:24px;
  color:#f3dc9b;
}
.invoice-note{
  margin:14px 0 0;
  color:#c9bea7;
  text-align:center;
  font-size:12px;
}
.invoice-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.action{
  border:0;
  border-radius:12px;
  padding:13px 12px;
  font-weight:900;
  cursor:pointer;
}
.action.gold{background:linear-gradient(135deg,#a97517,#f0d176);color:#080808}
.action.green{background:#1fa85b;color:#fff}
.action.blue{background:#1766c2;color:#fff}
.action.dark{background:#2c2b28;color:#fff;border:1px solid #5b5034}
.action.full{width:100%;margin-top:14px}
.modal-title{text-align:center;font-size:22px}
.bank-box{
  background:#0d0c09;
  border:1px solid #463a23;
  border-radius:14px;
  padding:14px;
  margin-bottom:16px;
}
.bank-box>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:7px 0;
}
.bank-box span{color:#a89e88}
.qr-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.qr-grid figure{
  margin:0;
  background:#fff;
  border-radius:14px;
  padding:10px;
  color:#111;
  text-align:center;
}
.qr-grid img{
  width:100%;
  max-height:430px;
  object-fit:contain;
  display:block;
  border-radius:8px;
}
.qr-grid figcaption{
  font-weight:800;
  margin-top:8px;
}

@media(max-width:640px){
  .modal{padding:8px}
  .modal-card{padding:16px;border-radius:16px}
  .invoice-meta{grid-template-columns:1fr}
  .invoice-actions{grid-template-columns:1fr}
  .qr-grid{grid-template-columns:1fr}
}

@media print{
  body *{visibility:hidden!important}
  #invoiceModal,#invoiceModal *{visibility:visible!important}
  #invoiceModal{
    display:block!important;
    position:static;
    background:#fff;
    padding:0;
  }
  #invoiceModal .modal-card{
    width:100%;
    max-height:none;
    overflow:visible;
    box-shadow:none;
    border:0;
    color:#000;
    background:#fff;
  }
  .invoice-actions,.modal-close{display:none!important}
  .invoice-meta div,.bank-box{background:#fff}
  .invoice-header h2,.invoice-grand{color:#000}
}

/* ===========================
   DECLARATION SECTION
=========================== */

.declaration-card{
    margin-top:25px;
    padding:20px;
    border:1px solid #5a4722;
    border-radius:16px;
    background:linear-gradient(180deg,#11100d,#080807);
}

.declaration-card h2{
    margin-bottom:12px;
    color:#f3dc9b;
}

.decl-note{
    color:#cfc6b1;
    margin-bottom:18px;
    line-height:1.6;
}

.declaration-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.declaration-list label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    line-height:1.6;
    color:#f5f5f5;
    font-size:15px;
}
.declaration-list input[type="checkbox"]{
    width:20px;
    height:20px;
    padding:0;
    margin-top:2px;
    border:none;
    border-radius:0;
    background:transparent;
    accent-color:#d4af37;
    flex-shrink:0;
}
.warning-box{
    margin-top:20px;
    padding:16px;
    border-radius:12px;
    border:1px solid #8d5f12;
    background:#2b1b05;
}

.warning-box strong{
    display:block;
    margin-bottom:10px;
    color:#ffd76a;
    font-size:16px;
}

.warning-box p{
    margin:0;
    color:#fff2cc;
    line-height:1.6;
}

#submitBtn:disabled{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(100%);
}

#submitBtn:not(:disabled){
    opacity:1;
    filter:none;
}

/* ===========================
   PRODUCT IMAGES
=========================== */

.product{
  grid-template-columns:110px 1fr auto;
  gap:16px;
}

.product-image{
  width:110px;
  height:110px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #4b3d21;
  background:#080706;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.product-info{
  min-width:0;
}

@media(max-width:640px){
  .product{
    grid-template-columns:82px 1fr;
    gap:12px;
    align-items:center;
  }

  .product-image{
    width:82px;
    height:82px;
    grid-row:1 / span 2;
  }

  .product-info{
    grid-column:2;
  }

  .qty{
    grid-column:2;
    justify-content:flex-start;
  }

  .pname{
    font-size:14px;
    line-height:1.3;
  }

  .meta{
    flex-wrap:wrap;
  }
}
/* READY STOCK - SET INFO */
.ready-set {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
}

.ready-set strong {
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .5px;
}

.ready-set div {
  opacity: .85;
  font-size: 11px;
}

/* PRODUCT CATEGORY FILTER */
.category-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0 12px;
  margin-top: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.category-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.category-btn.active {
  background: currentColor;
}

.category-btn.active::first-line {
  color: initial;
}

@media (max-width: 600px) {
  .category-filters {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .category-btn {
    padding: 7px 12px;
    font-size: 11px;
  }
}

/* CATEGORY ACTIVE - BLACK GOLD FIX */
.category-btn {
  color: #f3dc9b;
  border-color: #5a4c2b;
  background: #181713;
}

.category-btn:hover {
  border-color: #f3dc9b;
}

.category-btn.active {
  background: linear-gradient(135deg,#a97517,#f0d176);
  color: #080808;
  border-color: #f0d176;
}

.category-btn.active::first-line {
  color: #080808;
}

/* CATEGORY DASHBOARD - SHOW ALL WITHOUT HORIZONTAL SCROLL */
.category-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  white-space: normal !important;
  gap: 8px !important;
  padding: 10px 0 12px !important;
}

.category-btn {
  flex: 0 0 auto !important;
}

@media (max-width: 600px) {
  .category-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .category-btn {
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    min-height: 42px !important;
    padding: 8px 6px !important;
  }
}

/* CART RESPONSIVE - DESKTOP + MOBILE */
.mobile {
  display: flex !important;
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  z-index: 999;
  min-width: 320px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid #5a4b29;
  border-radius: 16px;
  background: #0f0e0bf2;
  box-shadow: 0 10px 35px rgba(0,0,0,.55);
}

.mobile small {
  display: block;
  color: #cfc6b1;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 3px;
}

.mobile strong {
  display: block;
  color: #f3dc9b;
  font-size: 18px;
}

.mobile button {
  padding: 11px 15px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg,#aa7718,#efd071);
  color: #080808;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 640px) {
  .mobile {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    min-width: 0;
    width: auto;
    gap: 10px;
  }

  .mobile button {
    padding: 10px 13px;
  }
}

/* ===========================
   SHOPPING CART MODAL
=========================== */

.cart-modal-card {
  width: min(520px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg,#18150e,#080706);
  border: 1px solid #5a4b29;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.75);
}

.cart-modal-card h2 {
  font-size: 20px;
  color: #f3dc9b;
  margin: 0 40px 18px 0;
}

#cartModalItems {
  margin-bottom: 18px;
}

#cartModalItems .selected {
  padding: 12px 0;
  align-items: center;
}

#cartModalItems .selected span {
  line-height: 1.5;
}

#cartModalItems .selected > strong {
  color: #f3dc9b;
  white-space: nowrap;
}

.cart-modal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #5a4b29;
  padding-top: 16px;
  margin-top: 8px;
  font-weight: 900;
}

.cart-modal-total span {
  color: #f3dc9b;
}

.cart-modal-total strong {
  color: #f3dc9b;
  font-size: 24px;
}

#proceedCheckoutBtn {
  cursor: pointer;
  font-size: 14px;
}

@media (max-width:640px) {
  .cart-modal-card {
    width: 100%;
    max-height: 82vh;
    padding: 18px;
  }

  .cart-modal-total strong {
    font-size: 21px;
  }
}

/* EDIT CART CONTROLS */
.cart-edit-item {
  padding: 14px 0;
  border-bottom: 1px dashed #3e341f;
}

.cart-edit-info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cart-edit-info strong {
  color: #fff;
}

.cart-edit-info span {
  color: #f3dc9b;
  white-space: nowrap;
  font-size: 13px;
}

.cart-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-edit-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-edit-qty button {
  width: 36px;
  height: 36px;
  border: 1px solid #5a4c2b;
  border-radius: 10px;
  background: #181713;
  color: #f3dc9b;
  font-size: 20px;
  cursor: pointer;
}

.cart-edit-qty strong {
  min-width: 24px;
  text-align: center;
}

.cart-remove {
  padding: 9px 11px;
  border: 1px solid #704040;
  border-radius: 9px;
  background: #241010;
  color: #ffb4b4;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.cart-line-total {
  margin-left: auto;
  color: #f3dc9b;
  white-space: nowrap;
}

@media (max-width:640px) {
  .cart-edit-info {
    flex-direction: column;
    gap: 4px;
  }

  .cart-edit-actions {
    flex-wrap: wrap;
  }

  .cart-line-total {
    margin-left: auto;
  }
}