/* Default UUCD addon UI (uucd-common-addons--common); loaded via uucd_common_addons component */

/* =========== UUCD common addon (default) Start ========== */
#container-addons.uucd-common-addons--common .addon-section-label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    margin-bottom: 8px;
}
#container-addons.uucd-common-addons--common .addon-common-box {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    border: 1px solid #e0e0e0;
    border-radius: .8rem;
    background: #fff;
    margin-bottom: .8rem;
}
#container-addons.uucd-common-addons--common .addon-common-thumb {
    flex-shrink: 0;
    width: 9.6rem;
    height: 9.6rem;
    min-width: 9.6rem;
    min-height: 9.6rem;
    max-width: 9.6rem;
    max-height: 9.6rem;
    border-radius: .4rem;
    overflow: hidden;
    background: #f5f5f5;
}
#container-addons.uucd-common-addons--common .addon-common-thumb .product-image {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
#container-addons.uucd-common-addons--common .addon-common-thumb .product-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
#container-addons.uucd-common-addons--common .addon-common-info {
    flex: 1;
    min-width: 0;
}
#container-addons.uucd-common-addons--common .addon-common-name {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    font-weight: bold;
}
#container-addons.uucd-common-addons--common .addon-common-price {
    font-size: 13px;
    color: var(--text-color-sale-price);
}
#container-addons.uucd-common-addons--common .addon-common-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: .8rem;
}
#container-addons.uucd-common-addons--common .addon-common-qty-wrap {
    margin-top: 0;
    flex-shrink: 0;
    max-width: 12rem;
    min-height: 2.8rem;
}
#container-addons.uucd-common-addons--common .addon-common-qty-wrap > .col.pointer svg {
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: middle;
}
#container-addons.uucd-common-addons--common .addon-common-qty-input {
    width: 100%;
    height: 100%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-color-default);
}
#container-addons.uucd-common-addons--common .addon-common-btn-wrap {
    margin-top: 0;
    flex-shrink: 0;
}
#container-addons.uucd-common-addons--common .addon-common-description {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: .4rem;
}
#container-addons.uucd-common-addons--common .addon-common-add,
#container-addons.uucd-common-addons--common .addon-common-added {
    min-width: 10rem;
    max-width: 40%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    padding: .5rem .8rem;
    border-color: var(--btn-primary-border-color);
    font-size: 1.2rem;
}
#container-addons.uucd-common-addons--common .addon-common-add::before,
#container-addons.uucd-common-addons--common .addon-common-added::before {
    margin-right: 1rem;
}
#container-addons.uucd-common-addons--common .addon-common-add::before {
    content: '+';
}
#container-addons.uucd-common-addons--common .addon-common-added::before {
    content: '-';
}
/* =========== UUCD common addon (default) End ========== */

@media (max-width: 575px) {
    #container-addons.uucd-common-addons--common .addon-section-label {
        font-size: var(--font-size-lg);
        line-height: var(--gap-value-lg);
        font-weight: var(--font-weight-medium);
    }
    #container-addons.uucd-common-addons--common .addon-common-actions {
        gap: .8rem;
    }
}