:root {
        --bg: #fff;
        --card: #fff;
        --muted: #6c757d;
        --accent: #000;
        --accent-2: #333;
        --glass: rgba(0, 0, 0, 0.03);
        --accent-highlight: #000;
    }

    html {}

    html,
    body {
        height: 100%
    }

    body {
        background-color: var(--bg);
        color: #000;
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        padding: 36px 20px;
    }

    .page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .brand {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

    .logo-box {
        width: 56px;
        height: 56px;
        background: var(--accent-2);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
    }

    .logo-box i {
        font-size: 20px;
        color: var(--accent-highlight);
    }

    .group-title {
        font-size: 20px;
        color: var(--accent);
        font-weight: 700;
        margin: 24px 0 12px;
        border-left: 4px solid var(--accent);
        padding-left: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .cards-row {
        gap: 18px;
        display: flex;
    }

    .cards-row .col {
        display: flex;
    }

    .product-card {
        background: var(--card);
        border: 1px solid var(--accent-2);
        border-radius: 0;
        padding: 18px;
        transition: transform .18s ease, box-shadow .18s ease;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2)
    }

    .pc-head {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        font-weight:bold
    }

    .pc-icon {
        width: 56px;
        height: 56px;
        background: var(--glass);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        flex-shrink: 0
    }

    .pc-icon i {
        font-size: 20px;
        color: var(--accent)
    }

    .price {
        font-size: 20px;
        font-weight: 600;
        color: var(--accent)
    }

    .price small {
        font-size: 12px;
        color: var(--muted);
    }

    .pc-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
    }

    .btn-outline-custom {
        border: 1px solid var(--accent-2);
        color: var(--accent);
        background: transparent;
        border-radius: 0;
        transition: .2s
    }

    .btn-outline-custom:hover {
        background-color: var(--accent-2);
        color: #fff
    }

    /* Buy button updated to match screenshot style */
    .btn-primary.buy-btn {
        background: transparent;
        color: var(--accent);
        border: 2px solid var(--accent);
        border-radius: 0;
        font-weight: 600;
        padding: 6px 14px;
        transition: all 0.2s ease;
    }

    .btn-primary.buy-btn:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

    .pc-meta {
        color: var(--muted);
        font-size: 13px;
        margin-top: 10px
    }

    /* @media (max-width:767px){
      .cards-row{gap:12px}
      .pc-head{flex-direction:column;align-items:flex-start;gap:8px}
      .pc-actions{flex-direction:column;width:100%;gap:6px}
      .pc-actions .btn{width:100%}
    }
    @media (max-width:575px){.logo-box{width:44px;height:44px}.pc-icon{width:48px;height:48px}} */

    .border-buy {
        border-image: linear-gradient(to right, #910409 0%, #59a629 100%) 1;
        border-radius: 5px;
        /* this doesn't work */
        border-width: 4px;
        border-style: solid;
        padding: 5px;
        background-color: black;
        color: white;
    }

    .buymodel {

        border-radius: 0px;
        border: 2px solid var(--accent-2);
    }

    .buymodelhead {
        border-radius: 0px;
        padding: 5px;

        font-weight: 600;
    }

    .br {
        border-radius: 0px !important;
    }

    select {
        border-radius: 0px !important;
    }

    input {
        border-radius: 0px !important;
    }

    .dropdown-checkbox {
  position: relative;
  display: inline-block;
  width: 300px;
}

.selectBox {
  
  border-radius: 0.25rem;
  
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.checkboxes {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 2px;
}

.checkboxes label {
  display: block;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.checkboxes label:hover {
  background-color: #f8f9fa;
}

.checkboxes input:disabled + span {
  color: #aaa;
}

.input-group-text {
    background-color: #000000;
    border: 1px solid #ced4da;
    border-radius: 0px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.text-muted{
    color: white !important;
}

.hide{
    display: none !important;
}