/* ===================
   BASE CONTAINER
=================== */
.drs-container {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: #faf3ee;
  color: #222;
  padding: 10px 0 40px;
}

/* ===================
   TOOLBAR
=================== */
.drs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #d8cfc8;
  padding: 14px 12px;
}
.drs-actions {margin-left: auto; display:flex; gap:10px;}
.drs-btn {
  border: 1px solid #1f1f1f;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.drs-btn.primary {background:#000; color:#fff;}
.drs-btn.ghost {background:transparent;}
.drs-btn.small {padding: 4px 8px; font-size: 11px}

/* ===================
   SECTIONS
=================== */
.drs-section {padding:18px 12px; border-top:1px solid #e6ddd7;}
.drs-section-title {font-weight:700; margin-bottom:10px;}
.drs-grid {display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:900px){ .drs-grid{grid-template-columns:1fr;} }

/* ===================
   CHIPS
=================== */
.drs-chips {display:flex; gap:10px; flex-wrap:wrap;}
.drs-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #ccc;
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  background:#fff;
  font-size:16px;
  transition:all 0.2s ease;
}
.drs-chip img { width:20px; height:20px; object-fit:contain; }
.drs-chip input {display:none;}

/* ✅ Selected Chip */
.drs-chip:has(input:checked) {
  background:#9d7b49;
  border-color:#9d7b49;
  color:#fff !important;
}
.drs-chip:has(input:checked) span {
  color:#fff !important;
  font-weight:600;
}
.drs-chip:has(input:checked) img { filter:brightness(0) invert(1); }

/* ===================
   RANGE INPUTS
=================== */
.drs-range {
  display:grid;
  grid-template-columns:80px 1fr 100px;
  gap:10px;
  align-items:center;
}
.drs-range input[type="number"] {
  padding:6px;
  border:1px solid #c8c0b9;
  border-radius:8px;
  background:#fff;
  width:100%;
  font-size:12px;
}
.drs-range input[type="range"] {width:100%;}

/* ===================
   TABLE
=================== */
.drs-table-wrapper {
  overflow:auto;
  border:1px solid #ded6cf;
  border-radius:12px;
  background:#fff;
  max-height:480px;
}
.drs-table {
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:1100px;
  font-size:12px;
}
.drs-table thead th {
  position:sticky;
  top:0;
  background:#f2ebe6;
  z-index:1;
  border-bottom:1px solid #ded6cf;
  text-align:left;
  padding:6px 8px;
  font-size:17px;
}
.drs-table tbody td {
  padding:2px 2px;
  border-bottom:1px solid #f0e8e2;
  font-size:16px;
}
.drs-table tr:hover {background:#faf7f4;}
.drs-table td a {
  text-decoration:underline;
  color:#0073aa;
  font-size:11px;
}

/* ===================
   DETAIL BOX
=================== */
.drs-detail-box {
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:15px;
  background:#f9f6f3;
  border:1px solid #ddd;
  border-radius:12px;
}
.drs-detail-box img {
  max-width:200px;
  border:1px solid #ddd;
  border-radius:8px;
}
.drs-detail-box ul {list-style:none; padding:0; margin:0; font-size:13px;}
.drs-detail-box li {margin-bottom:6px;}

/* ===================
   SIDECART
=================== */
#drs-sidecart {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: #fffaf6;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  padding: 20px;
  z-index: 9999;
  overflow-y: auto;
  transition: all 0.3s ease;
}

#drs-sidecart h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#drs-sidecart p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
  color: #333;
}

#drs-close-sidecart {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #111;
}

.drs-sidecart-body {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  align-items: flex-start;
}

.drs-sidecart-img img {
  max-width: 180px;
  border-radius: 6px;
  border: 1px solid #ddd;
  display: block;
}

.drs-sidecart-details {flex: 1;}
.drs-sidecart-details h3 {font-size: 15px; margin-bottom: 8px; text-transform: uppercase;}
.drs-sidecart-details p {margin: 4px 0; font-size: 14px;}
.drs-sidecart-details strong {font-weight: 600;}

#drs-sidecart .button-group {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#drs-sidecart .drs-btn {
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  flex: 1;
}
#drs-sidecart .drs-btn.primary {background:#000; color:#fff;}
#drs-sidecart .drs-btn.ghost {background:transparent; color:#000;}
#drs-sidecart .drs-btn:hover {opacity:0.85;}

/* ===================
   RESPONSIVE (MOBILE)
=================== */
@media (max-width: 768px) {
  #drs-sidecart {
    width: 100%;
    padding: 15px;
  }

  .drs-sidecart-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .drs-sidecart-img img {
    max-width: 100%;
  }

  .drs-sidecart-details {margin-top: 12px;}

  #drs-sidecart .button-group {
    flex-direction: column;
  }

  #drs-sidecart .drs-btn {
    width: 100%;
  }

  #drs-sidecart .drs-btn + .drs-btn {
    margin-top: 0px;
  }
}