/* ---------------- PRODUCT GROUP CARD ---------------- */

.product-group{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:20px;
    width:100%;
    border:1px solid var(--border);
}

@media (max-width:600px){
.product-group{
    padding:10px;
}

}

.product-group h3{
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:12px;
    color:var(--text-dark);
}


/* ---------------- PRODUCT GRID ---------------- */

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
}


/* ---------------- PRODUCT CARD ---------------- */

.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px;
    border-radius:var(--radius);
    background:var(--card-soft);
    box-shadow:0 8px 20px rgba(15,23,42,0.10);
    border:1px solid var(--border);
    transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(15,23,42,0.14);
    border-color:rgba(79,70,229,0.35);
}


/* ---------------- PRODUCT IMAGE ---------------- */

.product-card img,
.product-img,
.group-image{
    width:90px;
    height:90px;
    object-fit:contain;
    display:block;
    margin:0 auto 10px auto;
    border-radius:10px;
    background:linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
}


/* ---------------- PRODUCT INFO ---------------- */

.product-info{
    text-align:center;
    border-top:1px solid var(--border);
    padding-top:10px;
}

.product-info span{
    display:block;
    font-size:13px;
    color:var(--text-light);
}

.lowest-price{
    color:var(--accent);
    font-weight:bold;
}


/* ---------------- PRODUCT GRID LIST ---------------- */

.product-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:18px;
    justify-content:start;
}


/* ---------------- SINGLE PRODUCT CARD ---------------- */

.product{
    background:var(--card);
    border-radius:var(--radius);
    padding:15px;
    box-shadow:var(--shadow);
    text-align:center;
    border:1px solid var(--border);
}


/* ---------------- GROUP CARD ---------------- */

.group-card{
    background:var(--card);
    border-radius:var(--radius);
    padding:15px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    text-align:center;
}


/* ---------------- GROUP TITLE ---------------- */

.group-title{
    font-weight:bold;
    font-size:14px;
    margin:10px 0 8px;
    padding-top:10px;
    border-top:1px solid rgba(15,23,42,0.12);
}


/* ---------------- APP PRICE ROW ---------------- */




/* ---------------- CHEAPEST PRICE ---------------- */

.cheapest{
    color:var(--accent);
    font-weight:bold;
    border-color:rgba(46,155,85,0.18);
    background:rgba(14,165,233,0.08);
}


/* .app-icon{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.app-icon:hover{
    transform: scale(1.1);
} */

.app-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 10px;
    margin:4px 0;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8fafc;
    text-decoration:none;
    color:inherit;
    transition:all 0.2s ease;
}

.app-row:hover{
    background:#eef2f7;
    border-color:rgba(79,70,229,0.25);
}

.logo-box {
    width: 55px;
    /* Increased height to fit both icon (e.g. 18px) + text (e.g. 12px) + gap */
    height: auto; 
    min-height: 28px; 
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: left;    /* Centers them horizontally */
    justify-content: center;
    gap: 1px;               /* Space between icon and "1 L" */
}

.app-icon {
    height:14px;
    width:auto;
    object-fit: contain;
}
/* Style the quantity div specifically */
.logo-box .quantity-text {
    font-size: 10px;
    line-height: 1;
    text-align: left;
    font-weight: 500;
    color: #6b7280; /* Adjust color to match your text-text-light-dark */
    opacity: 0.8;
}
/* price */
.app-price{
    font-size:13px;          /* smaller price */
    font-weight:600;
    color:#374151;
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.w-full {
    width: 100%;
}
.text-text-light-dark {
    color: var(--color-text-light-dark);
}
.font-normal {
    font-weight: 400;
}
.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}
.text-start {
    text-align: start;
}
/* .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
} */