/* ============================================
   SPATULE - OPTIONS BUNDLE
   Dépendances : core.css, components.css, product-base.css
   Taille : ~0.8 KB (au lieu de 2 KB)
   ============================================ */

/* Container des options */
.product-options {
    margin-bottom: var(--spacing-md);
    width: 100%;
}

/* Option individuelle - Utilise .card de components.css comme base */
.product-option {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Hérite automatiquement de .card : */
    /* - background glassmorphism */
    /* - border-radius */
    /* - box-shadow */
    /* - transitions */
}

.product-option:last-child {
    margin-bottom: 0;
}

/* État sélectionné */
.product-option--selected {
    border-color: rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.9);
}

/* Label de l'option */
.product-option__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text);
}

/* Cache le radio natif */
.product-option__radio {
    display: none;
}

/* Prix principal */
.product-option__price {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

/* Prix unitaire (affichage du prix par unité) */
.product-option__unit-price {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-light);
    margin-left: var(--spacing-xs);
}

/* ============================================
   RESPONSIVE
   Géré automatiquement par product-base.css
   ============================================ */