body {
     user-select: none;
}

header, .header {
    color: white;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    border-bottom: 1px solid #e00614;
}

.selcell {
    cursor: pointer;
    user-select: none;
}
.selcell .ohold {
    background: white;
    max-height: 160px;
    text-align: center;
    margin-top: 16px
}

.selcell .ihold {
    background: var(--primary);
    width: 100%;
    height: 60px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
}
/* Slightly darker red */
.selcell .ihold:hover{
    background-color: rgb(180, 0, 20);
}

.ohold img {
    max-height: 160px;
    margin-left: auto;
    margin-right: auto;
}

.ohold:hover {
    background: var(--primary);
}

.ohold:hover .w {
    display: block !important;
}

.ohold:hover .r {
    display: none !important;
}

.ihold img{
    display:none;
}

.csec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
    justify-content: center;
      }

.csec div {
    max-width: 220px; /* Maximum width for each box */
    margin: 0 auto; /* Center the divs within their column */
    background: #f4f4f4;
    padding: 16px;
    border: 1px solid #ddd;
}

      @media (max-width: 600px) {
        .csec {
          grid-template-columns: 1fr; /* Collapse to 1 column on small screens */
        }
    }

.bbtn {
    color: white; padding: 16px; background: var(--primary);
}

.pack-section {
    background-color: var(--primary-background);
}