/*
 * Configurator option override: Compact Phone
 *
 * This file intentionally targets the override attribute, so it composes over
 * whichever base skin is already selected for the option set.
 */
[data-configurator-option-skin-override="compact-phone"] {
    --configurator-option-container-max-width: 320px;
    --configurator-option-container-padding: 10px;
    --configurator-option-container-radius: 8px;
    --configurator-option-section-padding: 7px;
    --configurator-option-section-radius: 6px;
    --configurator-option-control-gap: 5px;
    --configurator-option-choice-gap: 4px;
    --configurator-option-choice-radius: 6px;
    --configurator-option-choice-padding-y: 4px;
    --configurator-option-choice-padding-x: 6px;
    --configurator-option-choice-font-size: 12px;
    --configurator-option-choice-line-height: 1.2;
    --configurator-option-swatch-size: 24px;
    --configurator-option-image-choice-min-width: 52px;
    --configurator-option-image-choice-card-size: 56px;
    --configurator-option-slider-track-height: 4px;
    --configurator-option-slider-thumb-size: 16px;
    --configurator-option-mobile-container-padding: 8px;
    --configurator-option-mobile-section-padding: 6px;
    --configurator-option-mobile-choice-gap: 4px;
    --configurator-option-mobile-image-choice-card-size: 52px;
    --configurator-option-mobile-swatch-size: 22px;
    --configurator-option-subtotal-display: none;
    --configurator-option-pricing-summary-mode: compact;
    --configurator-option-visual-rail-padding: 0px;
    --configurator-option-visual-rail-radius: 6px;
    --scene-product-options-pane-width: 304px;
    --scene-product-options-pane-horizontal-gutter: 18px;
    --scene-product-options-pane-vertical-gutter: 16px;
}

@media (max-width: 640px), (max-height: 520px) and (pointer: coarse) {
    [data-configurator-option-skin-override="compact-phone"]:not([data-configurator-option-ui="scene"]) {
        width: min(100%, var(--configurator-option-container-max-width, 320px));
        max-width: min(100%, var(--configurator-option-container-max-width, 320px));
        --configurator-option-container-padding: var(--configurator-option-mobile-container-padding, 8px);
        --configurator-option-section-padding: var(--configurator-option-mobile-section-padding, 6px);
        --configurator-option-choice-gap: var(--configurator-option-mobile-choice-gap, 4px);
        --configurator-option-image-choice-card-size: var(--configurator-option-mobile-image-choice-card-size, 52px);
        --configurator-option-swatch-size: var(--configurator-option-mobile-swatch-size, 22px);
        --configurator-option-control-gap: 5px;
    }

    [data-configurator-option-skin-override="compact-phone"].product-options-pane:not([data-configurator-option-ui="scene"]),
    [data-configurator-option-skin-override="compact-phone"] .product-options-pane:not([data-configurator-option-ui="scene"]) {
        max-width: min(100%, 304px);
    }

    [data-configurator-option-skin-override="compact-phone"].scene-hotspot-option-modal {
        width: min(304px, calc(100% - 18px)) !important;
        max-width: min(304px, calc(100% - 18px));
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-section {
        padding: var(--configurator-option-section-padding, 6px);
        gap: 6px;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-section + .product-option-section,
    [data-configurator-option-skin-override="compact-phone"][data-preview-renderer="shared"] .product-option-section + .product-option-section {
        margin-top: 6px;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-header {
        gap: 5px;
        min-height: 0;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-label,
    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-header-label {
        font-size: 12px;
        line-height: 1.2;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-description,
    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-help {
        font-size: 11px;
        line-height: 1.25;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-button,
    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-radio-wrapper,
    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-checkbox-wrapper {
        min-height: 28px;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-section.configurator-options-preview-pricing-summary {
        gap: 6px;
        padding-top: 0;
    }

    [data-configurator-option-skin-override="compact-phone"] [data-preview-renderer="shared"] .product-option-slider-labels,
    [data-configurator-option-skin-override="compact-phone"][data-preview-renderer="shared"] .product-option-slider-labels {
        display: none;
    }

    [data-configurator-option-skin-override="compact-phone"] .product-option-with-selected-visuals {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    [data-configurator-option-skin-override="compact-phone"] .product-option-selected-visual-rail {
        min-width: 42px;
    }

    [data-configurator-option-skin-override="compact-phone"] .product-option-selected-visual {
        width: 42px;
        height: 42px;
        border-radius: 6px;
    }

    [data-configurator-option-skin-override="compact-phone"] .product-option-selected-colour-preview {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-summary-header,
    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-summary-actions {
        gap: 6px;
    }

    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-summary-header {
        align-items: flex-start;
    }

    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-summary-actions .button,
    [data-configurator-option-skin-override="compact-phone"] .pricing-cart-button {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 12px;
        line-height: 1.2;
    }

    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-pricing-breakdown,
    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-pricing-breakdown-overlay {
        gap: 4px;
        padding: 6px;
        font-size: 12px;
    }

    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-pricing-line,
    [data-configurator-option-skin-override="compact-phone"] .configurator-options-preview-pricing-total-line {
        padding-top: 5px;
        margin-top: 3px;
        font-size: 12px;
    }
}