.wghyrawlook {
    margin-top: 24px;
    padding: 18px 0;
    color: #fff;
    background: #000
}

.wghyrawlook__title {
    margin: 0 0 18px;
    color: var(--Couleur-secondaire, #A8905D) !important;
    font-family: var(--secondary, Karantina) !important;
    font-size: 36px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
}

.wghyrawlook__item {
    position: relative;
    display: grid;
    grid-template-columns:86px 1fr;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 86px
}

.wghyrawlook__checkbox {
    position: absolute;
    left: 98px;
    top: 0;
    z-index: 2;
    margin: 0
}

.wghyrawlook__checkbox input {
    position: absolute;
    opacity: 0
}

.wghyrawlook__checkbox span {
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    background: transparent
}

.wghyrawlook__checkbox input:checked + span::after {
    content: "✓";
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    text-align: center
}

.wghyrawlook__image img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    display: block
}

.wghyrawlook__content {
    padding-left: 30px
}

.wghyrawlook__name {
    display: block;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.15;
    text-decoration: none;
    font-size: 14px
}

.wghyrawlook__price {
    margin-top: 8px;
    color: #c7a76b;
    font-size: 13px
}

.wghyrawlook__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.wghyrawlook__variant {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    cursor: pointer
}

.wghyrawlook__variant.is-active, .wghyrawlook__variant:hover {
    background: var(--Couleur-tertiaire);
    color: #fff;
    border: 1px solid var(--Couleur-tertiaire);
}


.wghyrawlook__variant.is-disabled, .wghyrawlook__variant:disabled {
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .25);
    text-decoration: line-through;
    cursor: not-allowed
}

.wghyrawlook__total {
    display: flex;
    justify-content: start;
    gap: 12px;
    margin-bottom: 14px;
    text-transform: uppercase
}

.wghyrawlook__total strong {
    color: #c7a76b
}

.wghyrawlook__add:disabled {
    opacity: .5;
    cursor: not-allowed
}

.wghyrawlook__message {
    margin-top: 10px;
    font-size: 13px;
    white-space: pre-line
}

.wghyrawlook__message.is-error {
    color: #ff8c8c
}

.wghyrawlook__message.is-success {
    color: #9be59b
}

.wghyrawlook__total {
    color: #FFF;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    align-items: center;
}

.wghyrawlook__total strong {
    color: var(--Couleur-secondaire, #A8905D);
    font-family: var(--primaryC);
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}

.wghyrawlook__summary {
    margin-top: 24px;
    padding-top: 18px;
}

.wghyrawlook__summary:before {
    content: "";
    border-top: 1px solid #c7a76b;
    width: 100px;
    height: 1px;
    display: block;
    margin-bottom: 20px;
}

.wghyrawlook__add {
    border: 0;
    background: var(--coleur-secondaire, #A8905D);
    padding: 7px 17px 7px 35px;
    cursor: pointer;
    color: #FFF;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.4px;
    position: relative;
}

.wghyrawlook__add::before {
    content: url('/img/hyraw/sac-bl.svg');
    position: absolute;
    left: 8px;
    top: 10px;
}