/* Muh Custom Product Fields — product page option groups */

.muh-cpf-groups {
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.muh-cpf-group__title {
    margin-bottom: 6px;
}

/* The heading treatment sits on the label, so notes beside it inherit normal body text
   (weight, case) exactly like the description paragraph does. */
.muh-cpf-group__label {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.muh-cpf-group__desc {
    font-size: 12px;
    line-height: 1.45;
    opacity: .7;
    margin: 0 0 10px;
}

/* Sits beside a group heading, in the muted tone of the description. Weight and case are
   inherited rather than declared, so it matches the theme's body text like .desc does. */
.muh-cpf-group__note {
    font-size: 12px;
    opacity: .7;
}

.muh-cpf-group__note .woocommerce-Price-amount { color: inherit; }

/* Personalisation fields */
.muh-cpf-perso-fields {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.muh-cpf-perso-fields[hidden] { display: none; }

.muh-cpf-field { flex: 1 1 0; }

.muh-cpf-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.muh-cpf-field input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.muh-cpf-field input:focus {
    border-color: var(--muh-cpf-accent, #ea580c);
    outline: none;
}

.muh-cpf-field abbr.required {
    color: var(--muh-cpf-accent, #ea580c);
    border: 0;
    text-decoration: none;
}

@media (max-width: 480px) {
        .muh-cpf-perso-fields { flex-direction: column; }
}

/* ---- Patch categories & image swatches (65px squares, flex-wrap, 3px outline) ---- */

.muh-cpf-patch-cats { margin-top: 16px; }
.muh-cpf-patch-cats[hidden] { display: none; }

.muh-cpf-cat + .muh-cpf-cat { margin-top: 18px; }

.muh-cpf-cat__title {
    margin-bottom: 2px;
}

.muh-cpf-cat__label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .6px;
}

.muh-cpf-swatches {
    display: flex;
    flex-wrap: wrap;
    /* Their layout: 10px offset on top/left of every swatch. */
    margin-left: -10px;
}

.muh-cpf-swatch {
    display: block;
    margin: 10px 0 0 10px;
    cursor: pointer;
}

.muh-cpf-swatch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.muh-cpf-swatch__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--muh-cpf-swatch-size, 65px);
    height: var(--muh-cpf-swatch-size, 65px);
    background: #fff;
    border-radius: var(--muh-cpf-swatch-radius, 50%);
    outline: 3px solid transparent;
    outline-offset: 0;
    overflow: hidden;
    transition: outline-color .12s ease;
}

.muh-cpf-swatch__box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.muh-cpf-swatch:hover .muh-cpf-swatch__box { outline-color: rgba(10, 19, 29, .3); }

.muh-cpf-swatch input:checked + .muh-cpf-swatch__box { outline-color: #0a131d; }

.muh-cpf-swatch input:focus-visible + .muh-cpf-swatch__box {
    outline-color: var(--muh-cpf-accent, #ea580c);
}

/* Shown until a patch image is uploaded. */
.muh-cpf-swatch__fallback {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    padding: 4px;
    color: #6b7280;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ---- Controls: square checkboxes + plain text, matching outletdelcalcio ---- */

.muh-cpf-groups {
    --muh-cpf-ink: #0a131d;
    color: var(--muh-cpf-ink);
}

.muh-cpf-choices { display: block; }

.muh-cpf-choice {
    display: flex;
    align-items: flex-start;
    margin: 0 0 6px;
    cursor: pointer;
}

/* 16px square, 1px solid, no radius — a real control, not a pill. */
.muh-cpf-choice input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 8px 0 0;
    border: 1px solid #000;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.muh-cpf-choice input:checked::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: no-repeat center / contain
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Cpath d='M417.75 141.5c0 6.25-2.5 12.5-7 17l-215 215c-4.5 4.5-10.75 7-17 7s-12.5-2.5-17-7l-124.5-124.5c-4.5-4.5-7-10.75-7-17s2.5-12.5 7-17l34-34c4.5-4.5 10.75-7 17-7s12.5 2.5 17 7l73.5 73.75 164-164.25c4.5-4.5 10.75-7 17-7s12.5 2.5 17 7l34 34c4.5 4.5 7 10.75 7 17z'/%3E%3C/svg%3E");
}

.muh-cpf-choice input:focus-visible { outline: 2px solid var(--muh-cpf-ink); outline-offset: 2px; }

.muh-cpf-choice__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muh-cpf-ink);
}

.muh-cpf-price { white-space: nowrap; }
.muh-cpf-price .woocommerce-Price-amount { color: inherit; }

/* Selected-values summary shown beside a group / category title. */
.muh-cpf-acc {
    font-size: 16px;
    color: var(--muh-cpf-ink);
    margin-left: 6px;
}

.muh-cpf-acc:empty { display: none; }

.muh-cpf-group__title,
.muh-cpf-cat__title { color: var(--muh-cpf-ink); }