/**
 * Copyright 2026 LÍNEA GRÁFICA E.C.E S.L.
 *
 * @author    Línea Gráfica E.C.E. S.L.
 * @copyright Lineagrafica.es - Línea Gráfica E.C.E. S.L. all rights reserved.
 * @license   https://www.apache.org/licenses/LICENSE-2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.lgb {
    --lgb-accent: #1f7a4d;
    margin: 2rem 0;
    padding: 1.25rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    clear: both;
}

.lgb__title {
    margin: 0 0 .25rem;
    font-size: 1.25rem;
}

.lgb__offer {
    display: inline-block;
    margin: .25rem 0 .75rem;
    padding: .2rem .6rem;
    border-radius: 4px;
    background: var(--lgb-accent);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.lgb__body {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.lgb__images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.lgb__image {
    display: block;
    width: 110px;
    max-width: 28vw;
    transition: opacity .2s;
}

.lgb__image img,
.lgb__noimage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
}

.lgb__image--off {
    opacity: .35;
}

.lgb__plus {
    font-size: 1.5rem;
    font-weight: 700;
    color: #999;
}

.lgb__items {
    flex: 1 1 320px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lgb__item,
.lgb-cart__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.lgb__item:last-child,
.lgb-cart__item:last-child {
    border-bottom: 0;
}

.lgb__check {
    display: flex;
    flex: 1 1 200px;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.lgb__check input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--lgb-accent);
}

.lgb__check img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.lgb__combination {
    flex: 0 1 180px;
    width: auto;
    min-width: 120px;
    height: auto;
    padding: .25rem .5rem;
    font-size: .875rem;
}

.lgb__price {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 600;
}

.lgb__regular {
    margin-right: .25rem;
    color: #888;
    font-weight: 400;
}

.lgb__item--oos .lgb__name,
.lgb__item--oos .lgb__price {
    color: #999;
}

.lgb__oos {
    width: 100%;
    color: #b00020;
    font-size: .8rem;
}

.lgb__summary {
    flex: 0 1 260px;
    padding: 1rem;
    border-radius: 6px;
    background: #f7f7f7;
}

.lgb__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
}

.lgb__total-regular {
    color: #888;
}

.lgb__total-price {
    font-size: 1.4rem;
}

.lgb__saving {
    margin-top: .25rem;
    color: var(--lgb-accent);
    font-weight: 600;
}

.lgb__hint {
    margin-top: .5rem;
    font-size: .875rem;
    color: #555;
}

.lgb__button {
    width: 100%;
    margin-top: .75rem;
    border-color: var(--lgb-accent);
    background: var(--lgb-accent);
    color: #fff;
    white-space: normal;
}

.lgb__button:hover,
.lgb__button:focus {
    border-color: var(--lgb-accent);
    background: var(--lgb-accent);
    color: #fff;
    filter: brightness(.92);
}

.lgb__button[disabled] {
    opacity: .5;
}

.lgb--loading .lgb__button {
    cursor: wait;
}

.lgb__message {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--lgb-accent);
}

.lgb__message:empty {
    display: none;
}

.lgb__message--error {
    color: #b00020;
}

.lgb [hidden],
.lgb-cart [hidden] {
    display: none !important;
}

/* Cart: complete your pack */
.lgb-cart {
    --lgb-accent: #1f7a4d;
    margin: 1rem 0;
}

.lgb-cart__pack {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px dashed var(--lgb-accent);
    border-radius: 8px;
    background: #fff;
}

.lgb-cart__title {
    margin: 0 0 .25rem;
}

.lgb-cart__offer {
    display: block;
    color: var(--lgb-accent);
    font-weight: 600;
}

.lgb-cart__needed {
    margin: 0 0 .5rem;
    font-size: .875rem;
}

.lgb-cart__items {
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.lgb-cart .lgb__button {
    width: auto;
}

@media (max-width: 575px) {
    .lgb {
        padding: 1rem;
    }

    .lgb__summary {
        flex-basis: 100%;
    }

    .lgb__image {
        width: 80px;
    }
}