/*
 * iPad/mobile fallbacks. This file is loaded directly so the fixes do not
 * depend on a complete Storefront build.
 */
@font-face {
    font-family: 'SHV Barlow';
    src: url('/bundles/shvlivedesigner/fonts/Barlow-Light.ttf?v=2.0.22') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'SHV Barlow';
    src: url('/bundles/shvlivedesigner/fonts/Barlow-Regular.ttf?v=2.0.22') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SHV Barlow';
    src: url('/bundles/shvlivedesigner/fonts/Barlow-SemiBold.ttf?v=2.0.22') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'SHV Barlow';
    src: url('/bundles/shvlivedesigner/fonts/Barlow-Bold.ttf?v=2.0.22') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.shv-live-designer,
.shv-live-designer * {
    min-width: 0;
    box-sizing: border-box;
}

.shv-live-designer {
    --shv-control-font-size: 16px;
    --shv-label-font-size: 16px;
}

.shv-live-designer .form-label {
    display: block;
    max-width: 100%;
    margin-bottom: .5rem;
    font-size: var(--shv-label-font-size) !important;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.shv-live-designer .form-control,
.shv-live-designer .form-select {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 7px 12px;
    color: #000;
    font-size: var(--shv-control-font-size) !important;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: clip;
}

.shv-live-designer .form-select {
    padding-right: 40px;
}

.shv-live-designer__empty-note,
.shv-live-designer .shv-live-designer__excel-note,
.shv-excel-upload p,
.shv-excel-upload .form-text {
    font-size: 16px !important;
    line-height: 1.5;
}

.shv-live-designer-gallery__legend {
    max-width: 40rem;
    padding: 16px 20px;
}

.shv-live-designer-gallery__notice {
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.5;
}

.shv-live-designer-gallery__preview,
.shv-live-designer-gallery__preview svg {
    max-width: 100%;
}

.shv-live-designer-gallery__preview svg {
    width: min(86%, 35rem);
    height: auto;
    max-height: 35rem;
}

.shv-line-item-design__thumbnail img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .shv-live-designer__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .shv-live-designer .form-control,
    .shv-live-designer .form-select {
        /* Above 16 px prevents Safari zooming and stays independent from theme sizes. */
        font-size: var(--shv-control-font-size) !important;
    }

    .shv-live-designer-gallery {
        min-height: clamp(23rem, 70vw, 38rem);
        padding-right: clamp(.75rem, 3vw, 2rem);
        padding-left: clamp(.75rem, 3vw, 2rem);
    }

    .shv-live-designer-gallery__preview {
        min-height: clamp(16rem, 53vw, 29rem);
    }

    .shv-live-designer-gallery__preview svg {
        width: min(96%, 32rem);
        height: auto;
    }
}

@media (max-width: 420px) {
    .shv-live-designer {
        --shv-control-font-size: 16px;
        --shv-label-font-size: 16px;
    }

    .shv-live-designer .form-control,
    .shv-live-designer .form-select {
        min-height: 40px;
    }

    .shv-live-designer-gallery__notice {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    .shv-live-designer__row:not(.shv-live-designer__row--single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
}