/* Product Addons - Product Page (1440px baseline) */

.product-addons-section {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 6.944vw; /* 100px gap at bottom */
}

.product-addons-container {
    padding-left: 1.528vw; /* 22px / 1440 */
    padding-right: 1.528vw;
    width: 100%;
}

.addons-heading {
    font-family: 'Open Sans', sans-serif;
    font-size: calc((24 / 1440) * 100vw);
    font-weight: 400;
    color: #000;
    margin-bottom: 3.472vw; /* ~50px gap */
}

.addons-grid {
    display: flex;
    gap: 1.389vw; /* 20px gap */
    flex-wrap: wrap;
}

/* CARD SYSTEM */
.addon-card {
    width: calc((215 / 1440) * 100vw);
    display: flex;
    flex-direction: column;
    background: #FFF;
    transition: transform 0.3s ease;
}

.addon-card-img {
    width: calc((215 / 1440) * 100vw);
    height: calc((171 / 1440) * 100vw);
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 1.111vw; /* 16px gap */
}

.addon-card-content {
    display: flex;
    flex-direction: column;
}

.addon-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-size: calc((16 / 1440) * 100vw);
    line-height: calc((24 / 1440) * 100vw);
    color: #000;
    margin: 0;
}

.addon-desc {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-style: normal;
    font-size: calc((16 / 1440) * 100vw);
    line-height: calc((24 / 1440) * 100vw);
    color: #000;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .product-addons-container { padding: 0 5%; }
    .addons-heading { 
        font-size: 24px; 
        text-align: center; 
        margin-bottom: 40px;
    }
    .addons-grid { justify-content: center; gap: 30px; }
    .addon-card { width: 100%; border-bottom: 1px solid #EEEEEE; padding-bottom: 20px; }
    .addon-card-img { width: 100%; height: 50vw; border-radius: 4px; }
    .addon-card-content { text-align: center; }
    .addon-title { font-size: 16px; line-height: 24px; text-align: center; }
    .addon-desc { font-size: 16px; line-height: 24px; text-align: center; }
}

@media (max-width: 768px) {
    .addon-card { width: 100%; }
}