/* Hunting Holsters: custom option radios (segmented pills) and checkboxes (add-on cards). */

/* ---------- Radio groups: segmented pill control ---------- */
.hh-options .options-list:has(input[type="radio"]) {
    align-items: stretch;
    gap: .375rem;
    padding: .3125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
}

.hh-options .options-list:has(input[type="radio"]) .field.choice {
    display: flex;
    min-height: 3rem;
}

.hh-options .options-list:has(input[type="radio"]) .field.choice > label {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    gap: .6rem;
    height: auto !important;
    min-height: 3rem;
    padding: 0 1rem;
    line-height: 1 !important;
    color: var(--color-fg-secondary);
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.hh-options .options-list:has(input[type="radio"]) .field.choice > label > span:empty {
    display: none;
}

/* Radio dot */
.hh-options .options-list:has(input[type="radio"]) .field.choice > label::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hh-options .options-list:has(input[type="radio"]) .field.choice:has(input:not(:checked)):hover > label {
    background: var(--color-surface);
    color: var(--color-fg);
}

.hh-options .options-list:has(input[type="radio"]) .field.choice:has(input:not(:checked)):hover > label::before {
    border-color: var(--color-primary, #ffc000);
}

.hh-options .options-list:has(input[type="radio"]) input[type="radio"]:checked + label {
    background: var(--color-primary, #ffc000);
    box-shadow: 0 6px 18px -6px rgba(255, 192, 0, .55);
    color: var(--color-on-primary);
}

.hh-options .options-list:has(input[type="radio"]) input[type="radio"]:checked + label::before {
    border-color: var(--color-line);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 3px var(--color-primary, #ffc000);
}

/* ---------- Checkboxes: selectable add-on card ---------- */
.hh-options .options-list:has(input[type="checkbox"]) {
    display: grid;
    gap: .625rem;
}

.hh-options .options-list:has(input[type="checkbox"]) .field.choice {
    position: relative;
    gap: .9rem;
    padding: 1rem 1.125rem;
    border: 1.5px dashed var(--color-line);
    border-radius: 1rem;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hh-options .options-list:has(input[type="checkbox"]) .field.choice:hover {
    border-color: rgba(255, 192, 0, .6);
    background: var(--color-surface);
}

.hh-options .options-list:has(input[type="checkbox"]) .field.choice:has(input:checked) {
    border-style: solid;
    border-color: var(--color-primary, #ffc000);
    background: linear-gradient(135deg, rgba(255, 192, 0, .14), rgba(255, 192, 0, .04));
}

.hh-options .options-list input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border: 2px solid var(--color-line);
    border-radius: .4rem;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hh-options .options-list input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: .375rem;
    height: .7rem;
    border: solid var(--color-line);
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform 160ms ease;
}

.hh-options .options-list input[type="checkbox"]:checked {
    border-color: var(--color-primary, #ffc000);
    background: var(--color-primary, #ffc000);
}

.hh-options .options-list input[type="checkbox"]:checked::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.hh-options .options-list input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary, #ffc000);
    outline-offset: 3px;
}

/* Label fills the card so the whole card toggles; price becomes a badge */
.hh-options .options-list:has(input[type="checkbox"]) .field.choice > label {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .75rem;
    color: var(--color-fg);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.hh-options .options-list:has(input[type="checkbox"]) .field.choice > label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hh-options .options-list:has(input[type="checkbox"]) .price-notice {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border: 1px solid rgba(255, 192, 0, .45);
    border-radius: 999px;
    color: var(--color-accent-ink);
    font-family: var(--font-display, "Barlow Condensed", sans-serif);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.hh-options .options-list:has(input[type="checkbox"]) .field.choice:has(input:checked) .price-notice {
    border-color: var(--color-primary, #ffc000);
    background: var(--color-primary, #ffc000);
    color: var(--color-on-primary);
}

@media (prefers-reduced-motion: reduce) {
    .hh-options .options-list label,
    .hh-options .options-list .field.choice,
    .hh-options .options-list input[type="checkbox"],
    .hh-options .options-list input[type="checkbox"]::after {
        transition: none;
    }
}

/* Wrap long option names without separating their number or required marker. */
.hh-options [data-option_id] > label {
    flex-wrap: nowrap;
}

.hh-options [data-option_id] > label::before,
.hh-options [data-option_id] > label > .sup {
    flex-shrink: 0;
}

.hh-options [data-option_id] > label > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Preserve the actual leather swatch image inside the existing circular control. */
.hh-options .hh-swatch-dot {
    overflow: hidden;
}

.hh-options .hh-swatch-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Checked indicators follow the foreground of the selected accent surface. */
.hh-options .options-list input[type="checkbox"]::after { border-color: var(--color-on-primary); }
.hh-options .options-list:has(input[type="radio"]) input[type="radio"]:checked + label::before {
    border-color: var(--color-on-primary); background: var(--color-on-primary);
}


/* Native customizable pickers retain Magento option pricing and validation.
 * Browsers without base-select keep their standard accessible system picker. */
@supports (appearance: base-select) {
    .hh-options select:not([multiple]):not([size]):not(.hh-select-hidden),
    .hh-options select:not([multiple]):not([size]):not(.hh-select-hidden)::picker(select) {
        appearance: base-select;
    }

    .hh-options select:not([multiple]):not([size]):not(.hh-select-hidden) {
        align-items: center;
        gap: calc(var(--spacing) * 3);
        background-image: none;
        cursor: pointer;
    }

    .hh-options select::picker-icon {
        color: var(--color-fg-secondary);
        margin-inline-start: auto;
    }

    .hh-options select:open {
        border-color: var(--color-primary);
    }

    .hh-options select::picker(select) {
        margin-block: var(--spacing);
        padding: var(--spacing);
        max-block-size: 50dvh;
        overflow-y: auto;
        color: var(--color-fg);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        color-scheme: inherit;
    }

    .hh-options select option {
        min-block-size: calc(var(--spacing) * 12);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
        gap: calc(var(--spacing) * 3);
        border-radius: var(--radius-lg);
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    .hh-options select option:is(:hover, :focus-visible) {
        color: var(--color-fg);
        background: var(--color-soft);
        outline: none;
    }

    .hh-options select option:checked {
        color: var(--color-on-primary);
        background: var(--color-primary);
        font-weight: 600;
    }

    .hh-options select option::checkmark {
        order: 1;
        margin-inline-start: auto;
    }

    .hh-options select option:disabled {
        color: var(--color-fg-secondary);
        cursor: not-allowed;
    }
}

/* Option metadata stays separate from native pricing and required-field validation. */
.hh-options [data-option_id] > label > .hh-option-optional {font-size:var(--text-xs);font-weight:400;letter-spacing:normal;text-transform:none;color:var(--color-fg-secondary);flex-shrink:0;}
.hh-options .hh-option-has-help {position:relative;display:grid;grid-template-columns:minmax(0,max-content) max-content minmax(0,1fr);column-gap:calc(var(--spacing) * 2);align-items:start;}
.hh-options .hh-option-has-help > label {padding-inline-end:0;grid-column:1;}
.hh-options .hh-option-has-help > :not(label):not(.hh-option-help-toggle) {grid-column:1/-1;}
.hh-options .hh-option-help-toggle {position:static;display:inline-flex;align-items:center;justify-content:center;width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);padding:0;margin-top:calc(var(--spacing) * -1);border:0;border-radius:var(--radius-full,50%);background:transparent;color:var(--color-accent-ink);cursor:help;}
.hh-options .hh-option-help-toggle svg {width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);pointer-events:none;}
.hh-options .hh-option-help-toggle:hover, .hh-options .hh-option-help-toggle[aria-expanded="true"] {background:var(--color-soft);color:var(--color-primary);}
.hh-options .hh-option-help-toggle:focus-visible {outline:2px solid var(--color-primary);outline-offset:var(--spacing);}
.hh-option-help-panel {position:fixed;z-index:50;width:calc(var(--spacing) * 72);max-width:calc(100vw - var(--spacing) * 8);padding:calc(var(--spacing) * 3);border:1px solid var(--color-sand);border-radius:var(--radius-lg);background:var(--color-white);color:var(--color-black);box-shadow:var(--shadow-lg);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:400;line-height:var(--leading-relaxed);letter-spacing:normal;text-transform:none;overflow-wrap:anywhere;}
.hh-option-help-content {display:block;max-height:calc(100dvh - var(--hh-header-height,128px) - var(--spacing) * 16);overflow-y:auto;}
.hh-option-help-panel::after {content:"";position:absolute;left:calc(var(--hh-help-arrow-x) - var(--spacing) * 1.5);width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);background:var(--color-white);transform:rotate(45deg);}
.hh-option-help-panel[data-placement="top"]::after {bottom:calc(var(--spacing) * -1.5);border-right:1px solid var(--color-sand);border-bottom:1px solid var(--color-sand);}
.hh-option-help-panel[data-placement="bottom"]::after {top:calc(var(--spacing) * -1.5);border-left:1px solid var(--color-sand);border-top:1px solid var(--color-sand);}
/* Keep one visible border for selection and keyboard focus. */
.hh-options .hh-pills--swatch button:focus,
.hh-options .hh-pills--swatch button:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--color-primary);
}
.hh-swatch-preview {
    position: fixed;
    z-index: 50;
    width: calc(var(--spacing) * 56 * .7);
    max-width: calc(100vw - var(--spacing) * 8);
    padding: calc(var(--spacing) * 2 * .7);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: calc(var(--spacing) * 5);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-xl);
    pointer-events: none;
    font-size: .7em;
}
.hh-swatch-preview[hidden] { display: none; }
.hh-swatch-preview-visual {
    aspect-ratio: 1;
    border-radius: calc(var(--spacing) * 3);
    overflow: hidden;
    background: var(--hh-preview-color, var(--color-soft));
}
.hh-swatch-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hh-swatch-preview img[hidden] { display: none; }
.hh-swatch-preview > span {
    display: block;
    padding: calc(var(--spacing) * 3 * .7) calc(var(--spacing) * 2 * .7) calc(var(--spacing) * .7);
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Compact field feedback; persistent invalid state is kept on the controls. */
.hh-options .hh-option-error {
    margin: .375rem 0 0;
    padding: 0;
    color: var(--color-error-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    transition: opacity 160ms ease;
}

.hh-options .hh-option-error.is-hiding {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hh-options .hh-option-error { transition: none; }
}