.grps__product-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.grps__variant-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.grps__tile {
    position: relative;
    appearance: none;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: var(--grps-text) !important;
    background: var(--grps-raised) !important;
    border: 1px solid var(--grps-line) !important;
    border-radius: 13px !important;
    font-family: 'Quicksand', Arial, sans-serif !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.grps__tile::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--grps-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.grps__tile:hover {
    border-color: rgba(7, 143, 218, .65) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .15);
}

.grps__tile:hover::after,
.grps__tile.is-selected::after {
    transform: scaleX(1);
}

.grps__tile:focus-visible {
    outline: 3px solid rgba(7, 143, 218, .28);
    outline-offset: 2px;
}

.grps__tile.is-selected {
    border-color: var(--grps-blue) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 131, 64, .34), transparent 55%),
        linear-gradient(145deg, #3a291f 0%, #2b211c 58%, #222629 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(7, 143, 218, .18),
        inset 0 0 34px rgba(236, 105, 40, .08),
        0 13px 30px rgba(0, 0, 0, .18);
}

.grps__tile--product {
    min-height: 154px;
    padding: 23px 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 7px;
}

.grps__tile--product::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    box-sizing: border-box;
    padding: 16px 18px;
    color: rgba(7, 143, 218, .9) !important;
    font: 400 20px/1 'Cal Sans', Arial, sans-serif;
    pointer-events: none;
}

.grps__tile--product:nth-child(1)::before {
    content: '01';
    background:
        radial-gradient(ellipse at 76% 10%, rgba(255, 255, 255, .075), transparent 48%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(12deg, rgba(0, 0, 0, .022) 0 1px, transparent 1px 5px);
}

.grps__tile--product:nth-child(2)::before {
    content: '02';
    background:
        radial-gradient(circle, rgba(255, 255, 255, .038) 0 .65px, transparent .85px) 0 0 / 5px 5px,
        radial-gradient(circle, rgba(0, 0, 0, .045) 0 .6px, transparent .85px) 2px 2px / 6px 6px;
}

.grps__tile--product:nth-child(3)::before {
    content: '03';
    background:
        linear-gradient(118deg, transparent 8%, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, .105) 31%, rgba(255, 255, 255, .018) 43%, transparent 58%),
        radial-gradient(ellipse at 82% 12%, rgba(255, 255, 255, .07), transparent 45%);
}

.grps__tile--product:nth-child(4)::before {
    content: '04';
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .027) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .038) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(255, 255, 255, .012) 7px 8px);
}

.grps__tile--product:nth-child(n+5)::before { content: '+'; }

.grps__tile--product strong {
    position: relative;
    z-index: 1;
    color: var(--grps-text) !important;
    font: 400 17px/1.15 'Cal Sans', Arial, sans-serif;
}

.grps__tile--product small {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--grps-muted) !important;
    font-size: 11px;
    line-height: 1.45;
}

.grps__tile--variant {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.grps__tile--variant span {
    color: var(--grps-text) !important;
    font: 400 22px/1.15 'Cal Sans', Arial, sans-serif;
    white-space: nowrap;
}

.grps__tile--variant strong {
    color: var(--grps-muted) !important;
    font: 800 16px/1.2 'Quicksand', Arial, sans-serif;
    white-space: nowrap;
}

.grps__tile--variant strong::before {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    margin: 1px auto 9px;
    border-radius: 1px;
    background: currentColor;
    opacity: .38;
}

.grps__tile.is-selected strong,
.grps__tile.is-selected span,
.grps__tile.is-selected small {
    color: #fff !important;
}

html[data-gr-theme='light'] .grps {
    --grps-bg: #f2eee8;
    --grps-surface: #fffdfa;
    --grps-raised: #f7f1e9;
    --grps-input: #fff;
    --grps-text: #1d2a34;
    --grps-muted: #64717b;
    --grps-line: rgba(80, 65, 48, .19);
    color: var(--grps-text) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(8, 121, 203, .1), transparent 34%),
        linear-gradient(145deg, #fffdfa 0%, #f8f2ea 100%);
    border-color: var(--grps-line);
    box-shadow: 0 22px 55px rgba(67, 52, 37, .13);
}

html[data-gr-theme='light'] .grps__panel {
    background: rgba(255, 253, 250, .9) !important;
    box-shadow: 0 16px 38px rgba(67, 52, 37, .08);
}

html[data-gr-theme='light'] .grps__steps b {
    background: #f2eee8;
}

html[data-gr-theme='light'] .grps__steps .is-active b {
    color: #fff !important;
    background: var(--grps-blue);
}

html[data-gr-theme='light'] .grps__tile.is-selected {
    background:
        radial-gradient(circle at 100% 0, rgba(8, 121, 203, .18), transparent 52%),
        #eaf4fa !important;
}

html[data-gr-theme='light'] .grps__tile.is-selected strong,
html[data-gr-theme='light'] .grps__tile.is-selected span,
html[data-gr-theme='light'] .grps__tile.is-selected small {
    color: #163348 !important;
}

html[data-gr-theme='light'] .grps__tile--product:nth-child(1)::before {
    background:
        radial-gradient(ellipse at 76% 10%, rgba(255, 255, 255, .5), transparent 48%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(12deg, rgba(70, 54, 38, .035) 0 1px, transparent 1px 5px);
}

html[data-gr-theme='light'] .grps__tile--product:nth-child(2)::before {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .32) 0 .65px, transparent .85px) 0 0 / 5px 5px,
        radial-gradient(circle, rgba(69, 54, 40, .075) 0 .6px, transparent .85px) 2px 2px / 6px 6px;
}

html[data-gr-theme='light'] .grps__tile--product:nth-child(3)::before {
    background:
        linear-gradient(118deg, transparent 8%, rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, .58) 31%, rgba(255, 255, 255, .1) 43%, transparent 58%),
        radial-gradient(ellipse at 82% 12%, rgba(255, 255, 255, .38), transparent 45%);
}

html[data-gr-theme='light'] .grps__tile--product:nth-child(4)::before {
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .19) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(70, 54, 38, .07) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(255, 255, 255, .08) 7px 8px);
}

html[data-gr-theme='light'] .grps__notice.is-success {
    color: #17613d !important;
    border-color: rgba(35, 142, 82, .34);
    background: linear-gradient(90deg, #edf8f1 0%, #e3f2e9 100%);
    box-shadow: inset 4px 0 0 rgba(35, 142, 82, .72);
}

html[data-gr-theme='light'] .grps__button--ghost {
    color: #1d2a34 !important;
    background: #ebe4db !important;
}

html[data-gr-theme='light'] .grps__preview button {
    border-color: #fffdfa;
}

/* Published-photo picker below the upload area. */
.grps__library {
    display: grid;
    grid-template-columns: minmax(185px, .9fr) minmax(310px, 1.25fr) minmax(180px, .72fr);
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    margin: 16px 0 20px;
    padding: 13px 15px;
    color: var(--grps-text);
    background: linear-gradient(110deg, rgba(27, 36, 41, .98), rgba(22, 31, 36, .94));
    border: 1px solid var(--grps-line);
    border-radius: 13px;
}

.grps__library-copy strong,
.grps__library-copy span {
    display: block;
}

.grps__library-copy strong {
    margin-bottom: 7px;
    color: var(--grps-text);
    font: 600 14px/1.25 'Cal Sans', 'Inter Tight', Arial, sans-serif;
    letter-spacing: -.01em;
}

.grps__library-copy span {
    max-width: 235px;
    color: var(--grps-muted);
    font-size: 10px;
    line-height: 1.55;
}

.grps__library-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.grps__library-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.7;
    min-height: 58px;
    padding: 0 !important;
    overflow: hidden;
    cursor: default;
    background: #10171b;
    border: 1px solid rgba(139, 166, 181, .22) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.grps__library-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease, opacity .2s ease;
}

.grps__library-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

body.grps-library-browser-open {
    overflow: hidden;
}

.grps-library-browser {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #f3f6f8;
    background: rgba(5, 9, 12, .82);
    backdrop-filter: blur(8px);
}

.grps-library-browser[hidden] {
    display: none !important;
}

.grps-library-browser__dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(1120px, 96vw);
    max-height: min(860px, 92vh);
    overflow: hidden;
    color: #f3f6f8;
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    background: #151c20;
    border: 1px solid rgba(142, 174, 194, .28);
    border-radius: 20px;
    box-shadow: 0 32px 95px rgba(0, 0, 0, .55);
}

.grps-library-browser__dialog > header {
    position: relative;
    padding: 24px 72px 18px 26px;
    border-bottom: 1px solid rgba(142, 174, 194, .18);
}

.grps-library-browser__dialog > header span {
    color: #f28424;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.grps-library-browser__dialog > header h2 {
    margin: 4px 0 4px !important;
    color: #f3f6f8 !important;
    font: 400 clamp(25px, 3vw, 36px)/1.08 'Cal Sans', 'Inter Tight', Arial, sans-serif !important;
}

.grps-library-browser__dialog > header p {
    margin: 0;
    color: #9ba8b1;
    font-size: 13px;
}

.grps-library-browser__close {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    cursor: pointer;
    color: #f3f6f8 !important;
    background: #20292e !important;
    border: 1px solid rgba(142, 174, 194, .24) !important;
    border-radius: 50% !important;
    font: 300 29px/1 Arial, sans-serif !important;
}

.grps-library-browser__search {
    padding: 16px 26px;
    background: rgba(8, 143, 218, .045);
    border-bottom: 1px solid rgba(142, 174, 194, .18);
}

.grps-library-browser__search label > span {
    display: block;
    margin-bottom: 6px;
    color: #bec9cf;
    font-size: 11px;
    font-weight: 700;
}

.grps-library-browser__search label > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.grps-library-browser__search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px !important;
    color: #f3f6f8 !important;
    background: #0f1519 !important;
    border: 1px solid rgba(142, 174, 194, .28) !important;
    border-radius: 9px !important;
    outline: none;
}

.grps-library-browser__search input:focus {
    border-color: #078fda !important;
    box-shadow: 0 0 0 3px rgba(7, 143, 218, .14) !important;
}

.grps-library-browser__search button,
.grps-library-browser__dialog > footer button {
    min-height: 44px;
    padding: 0 19px !important;
    cursor: pointer;
    color: #fff !important;
    background: #078fda !important;
    border: 1px solid #078fda !important;
    border-radius: 9px !important;
    font-weight: 700;
}

.grps-library-browser__body {
    display: grid;
    grid-template-columns: minmax(245px, 31%) minmax(0, 1fr);
    min-height: 360px;
    overflow: hidden;
}

.grps-library-browser__body > aside,
.grps-library-browser__body > main {
    min-height: 0;
    overflow: auto;
}

.grps-library-browser__body > aside {
    padding: 18px;
    background: #11171b;
    border-right: 1px solid rgba(142, 174, 194, .18);
}

.grps-library-browser__body > aside > strong {
    display: block;
    margin: 0 0 10px 3px;
    color: #9ba8b1;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.grps-library-browser__sources {
    display: grid;
    gap: 7px;
}

.grps-library-browser__sources > p,
.grps-library-browser__photos > p,
.grps-library-browser__empty {
    margin: 12px 4px;
    color: #9ba8b1;
    font-size: 13px;
    line-height: 1.5;
}

.grps-library-browser__source {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 7px !important;
    cursor: pointer;
    color: #f3f6f8 !important;
    text-align: left;
    background: #1a2227 !important;
    border: 1px solid rgba(142, 174, 194, .16) !important;
    border-radius: 9px !important;
}

.grps-library-browser__source:hover,
.grps-library-browser__source.is-active {
    background: #202b31 !important;
    border-color: #078fda !important;
}

.grps-library-browser__source img {
    display: block;
    width: 62px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.grps-library-browser__source span,
.grps-library-browser__source small,
.grps-library-browser__source strong,
.grps-library-browser__source em {
    display: block;
    min-width: 0;
}

.grps-library-browser__source small {
    color: #078fda;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.grps-library-browser__source strong {
    margin: 2px 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grps-library-browser__source em {
    color: #9ba8b1;
    font-size: 10px;
    font-style: normal;
}

.grps-library-browser__body > main {
    padding: 18px;
}

.grps-library-browser__progress {
    margin: 2px 0 16px;
    padding: 13px 15px;
    color: #dbe7ed;
    background: #11191e;
    border: 1px solid rgba(7, 143, 218, .3);
    border-radius: 11px;
}

.grps-library-browser__progress > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    font-size: 12px;
}

.grps-library-browser__progress > div span {
    color: #52bdf5;
    font-weight: 700;
    white-space: nowrap;
}

.grps-library-browser__progress > b {
    display: block;
    height: 8px;
    overflow: hidden;
    background: #27333a;
    border-radius: 999px;
}

.grps-library-browser__progress > b > i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #078fda, #40baf7, #f28424);
    border-radius: inherit;
    box-shadow: 0 0 14px rgba(7, 143, 218, .45);
    transition: width .22s ease;
}

.grps-library-browser__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.grps-library-browser__photo {
    position: relative;
    aspect-ratio: 1.45;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer;
    background: #0e1417 !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    transition: border-color .22s ease, box-shadow .22s ease, min-height .3s ease;
}

.grps-library-browser__photo-view {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    cursor: zoom-in;
    background: transparent !important;
    border: 0 !important;
}

.grps-library-browser__photo.is-expanded {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: min(56vh, 540px);
    background: #080c0e !important;
}

.grps-library-browser__photo.is-expanded .grps-library-browser__photo-view {
    cursor: zoom-out;
}

.grps-library-browser__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease, transform .3s ease;
}

.grps-library-browser__photo.is-expanded img {
    object-fit: contain;
}

.grps-library-browser__photo span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 8px 7px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(transparent, rgba(3, 9, 12, .88));
    font-size: 10px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grps-library-browser__photo:hover {
    border-color: rgba(7, 143, 218, .72) !important;
}

.grps-library-browser__photo.is-selected {
    border-color: #f28424 !important;
    box-shadow: 0 0 0 2px #078fda !important;
}

.grps-library-browser__photo-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.grps-library-browser__photo-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.grps-library-browser__photo-check i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    color: transparent;
    background: rgba(15, 22, 26, .82);
    border: 2px solid rgba(255, 255, 255, .78);
    border-radius: 7px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
    font-size: 17px;
    font-style: normal;
    line-height: 1;
    transition: .18s ease;
}

.grps-library-browser__photo-check input:checked + i {
    color: #fff;
    background: #f28424;
    border-color: #f28424;
    transform: scale(1.06);
}

.grps-library-browser__photo-check input:focus-visible + i {
    outline: 3px solid rgba(7, 143, 218, .72);
    outline-offset: 2px;
}

.grps-library-browser__photo.is-loading img {
    opacity: .45;
}

.grps-library-browser__dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-top: 1px solid rgba(142, 174, 194, .18);
}

.grps-library-browser__selection {
    overflow: hidden;
    color: #9ba8b1;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grps-library-browser__dialog > footer button:disabled {
    cursor: default;
    opacity: .42;
}

html[data-gr-theme='light'] .grps-library-browser__dialog {
    color: #1d2a34;
    background: #fffdfa;
    border-color: rgba(64, 91, 106, .23);
}

html[data-gr-theme='light'] .grps-library-browser__dialog > header h2,
html[data-gr-theme='light'] .grps-library-browser__source {
    color: #1d2a34 !important;
}

html[data-gr-theme='light'] .grps-library-browser__dialog > header p,
html[data-gr-theme='light'] .grps-library-browser__selection,
html[data-gr-theme='light'] .grps-library-browser__sources > p,
html[data-gr-theme='light'] .grps-library-browser__photos > p,
html[data-gr-theme='light'] .grps-library-browser__empty {
    color: #64717b;
}

html[data-gr-theme='light'] .grps-library-browser__body > aside {
    background: #f4f0ea;
}

html[data-gr-theme='light'] .grps-library-browser__source {
    background: #fff !important;
}

html[data-gr-theme='light'] .grps-library-browser__source:hover,
html[data-gr-theme='light'] .grps-library-browser__source.is-active {
    background: #edf6fb !important;
}

html[data-gr-theme='light'] .grps-library-browser__search input {
    color: #1d2a34 !important;
    background: #fff !important;
}

html[data-gr-theme='light'] .grps-library-browser__progress {
    color: #263843;
    background: #f3f8fb;
}

@media (max-width: 760px) {
    .grps-library-browser {
        place-items: stretch;
        padding: 0;
    }

    .grps-library-browser__dialog {
        width: 100%;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .grps-library-browser__dialog > header {
        padding: 17px 58px 13px 16px;
    }

    .grps-library-browser__close {
        top: 13px;
        right: 13px;
    }

    .grps-library-browser__search {
        padding: 12px 15px;
    }

    .grps-library-browser__body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 35%) minmax(0, 1fr);
    }

    .grps-library-browser__body > aside {
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(142, 174, 194, .18);
    }

    .grps-library-browser__body > main {
        padding: 12px;
    }

    .grps-library-browser__photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .grps-library-browser__photo.is-expanded {
        min-height: 46vh;
    }

    .grps-library-browser__dialog > footer {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 11px 14px;
    }

    .grps-library-browser__selection {
        min-height: 16px;
    }
}

@media (max-width: 460px) {
    .grps-library-browser__search label > div {
        grid-template-columns: 1fr;
    }

    .grps-library-browser__search button {
        display: none;
    }
}

/* Scrollbars follow the blue/orange visual language of the site. */
html,
.grps,
.grps-library-browser *,
.grps-photo-editor * {
    scrollbar-width: thin;
    scrollbar-color: #078fda #151c20;
}

html::-webkit-scrollbar,
.grps ::-webkit-scrollbar,
.grps-library-browser ::-webkit-scrollbar,
.grps-photo-editor ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
.grps ::-webkit-scrollbar-track,
.grps-library-browser ::-webkit-scrollbar-track,
.grps-photo-editor ::-webkit-scrollbar-track {
    background: #151c20;
}

html::-webkit-scrollbar-thumb,
.grps ::-webkit-scrollbar-thumb,
.grps-library-browser ::-webkit-scrollbar-thumb,
.grps-photo-editor ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #078fda, #0579ba);
    border: 2px solid #151c20;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
.grps ::-webkit-scrollbar-thumb:hover,
.grps-library-browser ::-webkit-scrollbar-thumb:hover,
.grps-photo-editor ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f28424, #078fda);
}

html[data-gr-theme='light'],
html[data-gr-theme='light'] .grps,
html[data-gr-theme='light'] .grps-library-browser *,
html[data-gr-theme='light'] .grps-photo-editor * {
    scrollbar-color: #078fda #ece7df;
}

html[data-gr-theme='light']::-webkit-scrollbar-track,
html[data-gr-theme='light'] .grps ::-webkit-scrollbar-track,
html[data-gr-theme='light'] .grps-library-browser ::-webkit-scrollbar-track,
html[data-gr-theme='light'] .grps-photo-editor ::-webkit-scrollbar-track {
    background: #ece7df;
}

html[data-gr-theme='light']::-webkit-scrollbar-thumb,
html[data-gr-theme='light'] .grps ::-webkit-scrollbar-thumb,
html[data-gr-theme='light'] .grps-library-browser ::-webkit-scrollbar-thumb,
html[data-gr-theme='light'] .grps-photo-editor ::-webkit-scrollbar-thumb {
    border-color: #ece7df;
}

.grps__cart-thumb .grps__cart-thumb-edit {
    position: static;
    width: 100%;
    min-width: 0;
    height: 31px;
    margin-top: 6px;
    padding: 0 10px;
    color: #fff !important;
    background: rgba(5, 121, 186, .94) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 7px !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.grps__cart-thumbs {
    align-items: start;
    gap: 18px;
    padding: 5px 3px;
}

.grps__cart-thumb {
    display: flex;
    flex-direction: column;
    width: 112px;
}

.grps__cart-thumbs .grps__cart-thumb img {
    width: 112px;
    height: 94px;
    border-radius: 10px;
}

.grps__cart-thumb .grps__cart-thumb-remove {
    top: -8px;
    right: -8px;
    width: 27px;
    height: 27px;
    font-size: 18px;
}

@media (min-width: 761px) {
    .grps__cart-thumbs {
        display: grid;
        grid-template-columns: repeat(3, 112px);
    }
}

@media (max-width: 760px) {
    .grps__cart-thumbs {
        gap: 16px;
    }

    .grps__cart-thumb,
    .grps__cart-thumbs .grps__cart-thumb img {
        width: 108px;
    }

    .grps__cart-thumbs .grps__cart-thumb img {
        height: 91px;
    }
}

@media (max-width: 400px) {
    .grps__cart-thumb,
    .grps__cart-thumbs .grps__cart-thumb img {
        width: 96px;
    }

    .grps__cart-thumbs .grps__cart-thumb img {
        height: 82px;
    }
}

.grps__cart-thumb .grps__cart-thumb-edit:hover {
    background: #f28424 !important;
}

body.grps-photo-editor-open {
    overflow: hidden;
}

.grps-photo-editor {
    --grps-blue: #078fda;
    --grps-blue-strong: #0579ba;
    --grps-text: #f3f6f8;
    position: fixed;
    inset: 0;
    z-index: 2147482600;
    display: grid;
    place-items: center;
    padding: 22px;
    color: #f3f6f8;
    background: rgba(5, 9, 12, .84);
    backdrop-filter: blur(8px);
}

.grps-photo-editor[hidden] {
    display: none !important;
}

.grps-photo-editor__dialog {
    position: relative;
    width: min(780px, 95vw);
    max-height: 92vh;
    padding: 26px;
    overflow: auto;
    color: #f3f6f8;
    font-family: 'Quicksand', Arial, sans-serif;
    background: #151c20;
    border: 1px solid rgba(142, 174, 194, .28);
    border-radius: 19px;
    box-shadow: 0 32px 95px rgba(0, 0, 0, .55);
}

.grps-photo-editor__workspace {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 20px 0 15px;
    padding: 16px;
    background: #0d1317;
    border: 1px solid rgba(142, 174, 194, .2);
    border-radius: 13px;
}

.grps-photo-editor__crop {
    position: relative;
    width: min(100%, 570px);
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    background: #05080a;
    border: 2px solid #078fda;
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    outline: none;
    transition: aspect-ratio .28s ease, box-shadow .2s ease;
}

.grps-photo-editor__crop:focus-visible {
    box-shadow: 0 0 0 3px rgba(7,143,218,.28), 0 12px 35px rgba(0,0,0,.35);
}

.grps-photo-editor__crop.is-dragging { cursor: grabbing; }

.grps-photo-editor__crop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    transition: transform .15s ease, transform-origin .08s linear, object-position .08s linear;
}

.grps-photo-editor__crop.is-dragging img { transition: transform .15s ease; }

.grps-photo-editor__crop > span {
    position: absolute;
    right: 9px;
    bottom: 9px;
    padding: 5px 8px;
    color: #fff;
    background: rgba(5,9,12,.68);
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

.grps-photo-editor__crop-help,
.grps-photo-editor__filename {
    color: #9ba8b1;
    font-size: 11px;
    text-align: center;
}

.grps-photo-editor__filename { overflow-wrap:anywhere; color:#d9e1e5; }

.grps-photo-editor__orientation {
    margin-bottom: 13px;
}

.grps-photo-editor__orientation > span,
.grps-photo-editor__zoom > span {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #bec9cf;
    font-size: 11px;
    font-weight: 700;
}

.grps-photo-editor__orientation > div {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.grps-photo-editor__orientation button {
    min-height: 42px;
    cursor: pointer;
    color: #dce5e9 !important;
    background: #10171b !important;
    border: 1px solid rgba(142,174,194,.26) !important;
    border-radius: 8px !important;
    font-weight: 700;
}

.grps-photo-editor__orientation button.is-active {
    color: #fff !important;
    background: #078fda !important;
    border-color: #22a9ef !important;
    box-shadow: 0 0 0 2px rgba(7,143,218,.18);
}

.grps-photo-editor__orientation small { display:none; margin-top:6px; color:#9ba8b1; font-size:10px; }
.grps-photo-editor__orientation.is-square small { display:block; }
.grps-photo-editor__orientation.is-square button { opacity:.55; }

.grps-photo-editor__zoom {
    display: block;
    margin: 0 0 13px;
    padding: 12px 14px;
    background: #10171b;
    border: 1px solid rgba(142,174,194,.2);
    border-radius: 9px;
}

.grps-photo-editor__zoom input { width:100%; accent-color:#078fda; cursor:pointer; }
.grps-photo-editor__zoom strong { color:#27aaf1; }

.grps-photo-editor__quality {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid rgba(142,174,194,.22);
    border-radius: 9px;
    color: #c4d0d6;
    background: #11181c;
    font-size: 11px;
    line-height: 1.4;
}

.grps-photo-editor__quality b { display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;font-size:17px; }
.grps-photo-editor__quality span { display:grid;gap:1px; }
.grps-photo-editor__quality span strong { color:inherit; }
.grps-photo-editor__quality.is-good { color:#bcebd2;border-color:rgba(38,171,105,.38);background:rgba(25,115,71,.15); }
.grps-photo-editor__quality.is-good b { color:#fff;background:#1d9459; }
.grps-photo-editor__quality.is-warning { color:#ffe2a6;border-color:rgba(242,166,36,.48);background:rgba(171,105,12,.16); }
.grps-photo-editor__quality.is-warning b { color:#201500;background:#f2a624; }
.grps-photo-editor__quality.is-bad { color:#ffc3bd;border-color:rgba(242,94,78,.52);background:rgba(170,47,36,.18); }
.grps-photo-editor__quality.is-bad b { color:#fff;background:#e94e3e; }
.grps-photo-editor__quality.is-unknown b { color:#fff;background:#536670; }

.grps__cart-thumb figcaption {
    margin-top: 4px;
    color: #91a0a9;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
}

.grps__cart-thumb figcaption.is-low-quality { color:#ff8276; font-weight:700; }

.grps__tile--panorama{border-style:dashed!important}.grps__tile--panorama span{font-size:15px!important}.grps__tile--panorama strong{max-width:135px;text-align:center;font-size:10px!important;line-height:1.35}
.grps__custom-length{margin-top:16px;padding:15px;background:#11181c;border:1px solid rgba(7,143,218,.5);border-radius:11px}.grps__custom-length>header{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}.grps__custom-length>header strong{color:#f4f8fa;font-size:16px}.grps__custom-length>header small{color:#93a3ac;font-size:10px}
.grps__custom-length>[data-custom-fields]{display:grid;grid-template-columns:minmax(150px,.45fr) minmax(0,1.55fr);gap:11px}.grps__custom-length>[data-custom-fields]>label>span,.grps__custom-length>[data-custom-fields]>div>span{display:block;margin-bottom:6px;color:#aebbc2;font-size:10px;font-weight:700}.grps__custom-length select{box-sizing:border-box;width:100%;min-height:46px;padding:0 10px;color:#f3f6f8!important;background:#0c1216!important;border:1px solid rgba(142,174,194,.28)!important;border-radius:8px!important}.grps__custom-results{padding:10px 12px;border-radius:8px;background:rgba(7,143,218,.1)}.grps__custom-results>[data-custom-result-list]{display:grid;gap:5px}.grps__custom-results p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:5px 0;border-bottom:1px solid rgba(142,174,194,.13)}.grps__custom-results p:last-child{border-bottom:0}.grps__custom-results p span{overflow:hidden;color:#aebbc2;text-overflow:ellipsis;white-space:nowrap}.grps__custom-results p strong{flex:none;color:#f4f8fa;font-size:14px}.grps__custom-results>small{display:block;margin-top:7px;color:#91a0a9;font-size:9px;line-height:1.35}
.grps__paper-finish{margin:16px 0!important;padding:15px!important;border:1px solid rgba(142,174,194,.2)!important;border-radius:11px!important}.grps__paper-finish legend{padding:0 6px;color:#f2f6f8!important;font-size:13px!important;font-weight:700!important}.grps__paper-finish label{display:flex;align-items:flex-start;gap:9px;margin:8px 0;cursor:pointer}.grps__paper-finish input{margin-top:3px;accent-color:#078fda}.grps__paper-finish label span{display:grid;gap:2px}.grps__paper-finish label strong{color:#e7edf0;font-size:12px}.grps__paper-finish label small{color:#91a0a9;font-size:10px}
html[data-gr-theme='light'] .grps__custom-length{background:#fffaf3;border-color:rgba(7,143,218,.45)}html[data-gr-theme='light'] .grps__custom-length>header strong,html[data-gr-theme='light'] .grps__custom-results p strong,html[data-gr-theme='light'] .grps__paper-finish legend,html[data-gr-theme='light'] .grps__paper-finish label strong{color:#25343e!important}html[data-gr-theme='light'] .grps__custom-length select{color:#25343e!important;background:#fff!important;border-color:#d8cec1!important}html[data-gr-theme='light'] .grps__custom-results{background:rgba(7,143,218,.07)}html[data-gr-theme='light'] .grps__paper-finish{border-color:#dcd2c5!important}
@media(max-width:650px){.grps__custom-length>[data-custom-fields]{grid-template-columns:1fr}.grps__custom-results p{align-items:flex-start;flex-direction:column;gap:2px}.grps__custom-results p strong{font-size:13px}}

.grps-photo-editor__dialog > header {
    padding-right: 45px;
}

.grps-photo-editor__dialog > header > span {
    color: #f28424;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.grps-photo-editor__dialog h2 {
    margin: 4px 0 !important;
    color: #f3f6f8 !important;
    font: 400 32px/1.08 'Cal Sans', 'Inter Tight', Arial, sans-serif !important;
}

.grps-photo-editor__dialog header p {
    margin: 0;
    color: #9ba8b1;
    font-size: 12px;
    line-height: 1.5;
}

.grps-photo-editor__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    cursor: pointer;
    color: #f3f6f8 !important;
    background: #20292e !important;
    border: 1px solid rgba(142, 174, 194, .24) !important;
    border-radius: 50% !important;
    font: 300 28px/1 Arial, sans-serif !important;
}

.grps-photo-editor__photo {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    padding: 10px;
    background: #11171b;
    border: 1px solid rgba(142, 174, 194, .18);
    border-radius: 11px;
}

.grps-photo-editor__photo img {
    display: block;
    width: 96px;
    height: 70px;
    object-fit: cover;
    border-radius: 7px;
}

.grps-photo-editor__photo strong {
    overflow-wrap: anywhere;
    color: #f3f6f8;
    font-size: 12px;
}

.grps-photo-editor__fields {
    display: grid;
    grid-template-columns: 1.1fr 1fr .55fr;
    gap: 11px;
}

.grps-photo-editor__fields label > span {
    display: block;
    margin-bottom: 6px;
    color: #bec9cf;
    font-size: 11px;
    font-weight: 700;
}

.grps-photo-editor__fields input,
.grps-photo-editor__fields select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 11px;
    color: #f3f6f8 !important;
    background: #0f1519 !important;
    border: 1px solid rgba(142, 174, 194, .28) !important;
    border-radius: 9px !important;
}

.grps-photo-editor__dialog > footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid rgba(142, 174, 194, .18);
}

html[data-gr-theme='light'] .grps-photo-editor__dialog {
    color: #1d2a34;
    background: #fffdfa;
}

html[data-gr-theme='light'] .grps-photo-editor {
    --grps-text: #1d2a34;
}

html[data-gr-theme='light'] .grps-photo-editor__dialog h2,
html[data-gr-theme='light'] .grps-photo-editor__photo strong {
    color: #1d2a34 !important;
}

html[data-gr-theme='light'] .grps-photo-editor__photo {
    background: #f4f0ea;
}

html[data-gr-theme='light'] .grps-photo-editor__workspace,
html[data-gr-theme='light'] .grps-photo-editor__zoom,
html[data-gr-theme='light'] .grps-photo-editor__quality {
    background: #f5f0e9;
    border-color: #ded5c9;
}

html[data-gr-theme='light'] .grps-photo-editor__filename,
html[data-gr-theme='light'] .grps-photo-editor__orientation > span,
html[data-gr-theme='light'] .grps-photo-editor__zoom > span { color:#35444e; }

html[data-gr-theme='light'] .grps-photo-editor__orientation button {
    color:#263640 !important;
    background:#fff !important;
    border-color:#d8cec1 !important;
}

html[data-gr-theme='light'] .grps-photo-editor__orientation button.is-active { color:#fff !important;background:#078fda !important;border-color:#078fda !important; }

html[data-gr-theme='light'] .grps-photo-editor__fields input,
html[data-gr-theme='light'] .grps-photo-editor__fields select {
    color: #1d2a34 !important;
    background: #fff !important;
}

@media (max-width: 650px) {
    .grps-photo-editor {
        place-items: end stretch;
        padding: 0;
    }

    .grps-photo-editor__dialog {
        width: 100%;
        max-height: 94vh;
        padding: 21px 15px;
        border-radius: 18px 18px 0 0;
    }

    .grps-photo-editor__fields {
        grid-template-columns: 1fr;
    }

    .grps-photo-editor__dialog > footer {
        flex-direction: column-reverse;
    }

    .grps-photo-editor__dialog > footer .grps__button {
        width: 100%;
    }
}

.grps__library-choose {
    width: 100%;
    min-height: 37px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.grps__library-actions > a {
    align-self: center;
    color: var(--grps-blue) !important;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none !important;
}

.grps__library-actions > a:hover {
    color: var(--grps-orange) !important;
}

html[data-gr-theme='light'] .grps__library {
    background: linear-gradient(110deg, #fffdfa, #f4f7f8);
    border-color: rgba(64, 91, 106, .2);
    box-shadow: 0 8px 22px rgba(31, 54, 67, .06);
}

html[data-gr-theme='light'] .grps__library-photo {
    background: #e8edf0;
    border-color: rgba(64, 91, 106, .22) !important;
}

@media (max-width: 940px) {
    .grps__library {
        grid-template-columns: minmax(170px, .8fr) minmax(300px, 1.35fr);
    }

    .grps__library-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .grps__library-choose {
        width: auto;
    }
}

@media (max-width: 650px) {
    .grps__library {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 15px;
    }

    .grps__library-copy span {
        max-width: none;
    }

    .grps__library-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .grps__library-choose {
        width: 100%;
    }
}

@media (max-width: 410px) {
    .grps__library-photos {
        gap: 6px;
    }

    .grps__library-photo {
        min-height: 52px;
    }
}

@media (max-width: 920px) {
    .grps__product-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .grps__product-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grps__tile--product {
        min-height: 142px;
        padding: 18px 14px 15px;
        gap: 5px;
    }

    .grps__tile--product::before {
        top: 11px;
        left: 11px;
        font-size: 18px;
    }

    .grps__tile--product strong {
        font-size: 15.5px;
        line-height: 1.12;
    }

    .grps__tile--product small {
        font-size: 10px;
        line-height: 1.38;
    }
}

@media (max-width: 760px) {
    .grps__variant-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .grps__tile--variant {
        padding: 8px;
        gap: 5px;
    }

    .grps__tile--variant span {
        font-size: clamp(15px, 4vw, 17px);
        line-height: 1.15;
        letter-spacing: -.015em;
    }

    .grps__tile--variant strong {
        font-size: clamp(12px, 3.5vw, 14px);
        font-weight: 800;
    }

    .grps__tile--variant strong::before {
        width: 20px;
        margin: 2px auto 6px;
    }
}

@media (max-width: 360px) {
    .grps__product-tiles {
        grid-template-columns: 1fr;
    }
}