#add-to-cart-btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1e5f3b;
  --bs-btn-border-color: #1e5f3b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1e5f3b;
  --bs-btn-hover-border-color: #1e5f3b;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1e5f3b;
  --bs-btn-active-border-color: #1e5f3b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1e5f3b;
  --bs-btn-disabled-border-color: #1e5f3b;
}
table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: center; }
th, td { border: 1px solid #ccc; padding: 10px; }
th { background-color: #f4f4f4; color: #b30000; }
input[type="number"] { width: 80px; padding: 5px; text-align: right; }
.controls {width: 20%;}
.controls label{ margin-bottom: 15px; }

    #calc-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    #calc-table th, #calc-table td { border: 0; padding: 12px; text-align: center; }
    .dark-theme #calc-table td {
      border: 1px solid transparent;
      padding: 12px;
      text-align: center;
      background: #1f1f20;
      color: white;
    }
    .dark-theme #calc-table td:first-child {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .dark-theme #calc-table td:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .dark-theme #calc-table th{
        border: 1px solid transparent;
    }
    #calc-table th { background-color: #1e5f3b; color: white; }
    #calc-table input { width: 140px;
  padding: 7px 15px;
  border: 1px solid rgb(233, 202, 5);
  text-align: center;
  margin: 0 auto;
  background: white; }
  .dark-theme #calc-table input {
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  color: white;
}
  
@media (max-width: 768px) {
    .controls {
        width: 50%;
    }
    /* 1. Hide the table head entirely */
    #calc-table thead {
        display: none !important;
    }
    #calc-table tfoot {
        width: 100%;
        display: block;
    }
    /* 2. Turn the table and its children into blocks */
    #calc-table, #calc-table tbody, #calc-table tr, #calc-table td {
        display: block !important;
        width: 100% !important;
    }

    /* 3. Style each row like a card */
    #calc-table tr {
        border: 1px solid #dee2e6 !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
        background-color: #fff !important;
    }
    .dark-theme #calc-table tr {
    border: 1px solid #1f1f20 !important;
    background-color: #1f1f20 !important;
    }
    /* 4. The magic: Flexbox for Label (Left) and Value (Right) */
    #calc-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 5px 0 !important;
    }

    /* 5. Inject the Label text using the data-label attribute */
    #calc-table td::before {
        content: attr(data-label) !important;
        font-weight: 600;
        color: #1e5f3b !important;
        margin-right: 10px !important;
        font-size: 16px;
    }
    .dark-theme #calc-table td::before{
        color: #facc15 !important;
    }
    /* Ensure inputs don't look weirdly stretched */
    #calc-table td input {
        width: 120px !important;
        margin: auto 0 auto auto;
    }
    
    /* Ensure footer rows behave like data rows */
    #calc-table tfoot tr {
        display: block !important;
        padding: 10px !important;
    }

    #calc-table tfoot td {
        display: flex !important;
        justify-content: space-between !important;
        border: none !important;
        padding: 5px 0 !important;
    }
     #calc-table tfoot td::before {
        color: #000 !important;
     }
    
}