/* ==========================================================================
   MT - Garland Builder
   Length + colour story + finishes around a live CSS balloon garland preview.
   Balloon and leaf positions are generated (see the rules at the end).
   ========================================================================== */

.elementor-widget-mtfe-garland-builder { width: 100%; }

.mtfe-gb {
    --gb-ink: #191326;
    --gb-muted: #5F566B;
    --gb-accent: #2340D8;
    --gb-hover: #191326;
    --gb-chrome: #E9B949;
    --gb-panel: #FFFFFF;
    --gb-stage: #191326;

    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 340px);
    gap: 24px;
    align-items: stretch;
    color: var(--gb-ink);
}

/* ---------- panels ---------- */
.mtfe-gb__panel {
    background: var(--gb-panel);
    border-radius: 24px;
    padding: 26px 24px;
    box-shadow: 0 24px 50px -36px rgba(25, 19, 38, 0.5);
    border: 1px solid rgba(25, 19, 38, 0.08);
}
.mtfe-gb .mtfe-gb__heading {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--gb-ink);
}
.mtfe-gb .mtfe-gb__heading--finish { margin-top: 24px; }

.mtfe-gb__panel--lengths { align-self: start; }
.mtfe-gb__lengths { display: flex; flex-direction: column; gap: 12px; }
.mtfe-gb .mtfe-gb__length {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px;
    text-align: left;
    border-radius: 16px;
    border: 2px solid rgba(25, 19, 38, 0.1);
    background: transparent;
    color: var(--gb-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.mtfe-gb .mtfe-gb__length:hover { border-color: rgba(35, 64, 216, 0.45); background: transparent; color: var(--gb-ink); }
.mtfe-gb .mtfe-gb__length.is-active { border-color: var(--gb-accent); background: rgba(35, 64, 216, 0.06); box-shadow: 0 10px 24px -18px rgba(35, 64, 216, 0.9); }
.mtfe-gb .mtfe-gb__length:focus-visible { outline: 2px solid var(--gb-accent); outline-offset: 2px; }
.mtfe-gb__length-icon { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px; background: rgba(25, 19, 38, 0.05); }
.mtfe-gb__length-icon i { width: 9px; height: 9px; border-radius: 50%; background: var(--gb-accent); margin: 0 -1px; }
.mtfe-gb__length-icon i:nth-child(2n) { width: 7px; height: 7px; background: #FFB800; }
.gb-icon--small i:nth-child(n+4) { display: none; }
.gb-icon--medium i:nth-child(n+5) { display: none; }
.mtfe-gb__length-text strong { display: block; font-size: 16px; line-height: 1.2; }
.mtfe-gb__length-text strong span { font-weight: 600; color: var(--gb-accent); }
.mtfe-gb__length-text em { display: block; font-style: normal; font-size: 13px; color: var(--gb-muted); margin-top: 2px; }
.mtfe-gb__length-price { font-weight: 800; font-size: 17px; }

.mtfe-gb__stories { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtfe-gb .mtfe-gb__story {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px;
    border-radius: 14px;
    border: 2px solid rgba(25, 19, 38, 0.1);
    background: transparent;
    color: var(--gb-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mtfe-gb .mtfe-gb__story:hover { border-color: rgba(35, 64, 216, 0.45); background: transparent; color: var(--gb-ink); }
.mtfe-gb .mtfe-gb__story.is-active { border-color: var(--gb-accent); background: rgba(35, 64, 216, 0.06); }
.mtfe-gb .mtfe-gb__story:focus-visible { outline: 2px solid var(--gb-accent); outline-offset: 2px; }
.gb-dots { display: inline-flex; flex: none; }
.gb-dots i { width: 16px; height: 16px; border-radius: 50%; margin-left: -6px; border: 2px solid #FFFFFF; background: var(--gb-c1); box-shadow: 0 0 0 1px rgba(25, 19, 38, 0.12); }
.gb-dots i:first-child { margin-left: 0; }
.gb-dots i:nth-child(2) { background: var(--gb-c2); }
.gb-dots i:nth-child(3) { background: var(--gb-c3); }
.gb-dots i:nth-child(4) { background: var(--gb-c4); }

.mtfe-gb__finishes { display: flex; flex-direction: column; gap: 8px; }
.mtfe-gb__finish {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(25, 19, 38, 0.1);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mtfe-gb__finish input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gb-check { display: inline-flex; width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(25, 19, 38, 0.25); align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease; }
.gb-check svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mtfe-gb__finish input:checked + .gb-check { background: var(--gb-accent); border-color: var(--gb-accent); }
.mtfe-gb__finish input:checked + .gb-check svg { opacity: 1; }
.mtfe-gb__finish input:focus-visible + .gb-check { outline: 2px solid var(--gb-accent); outline-offset: 2px; }
.mtfe-gb__finish:has(input:checked) { border-color: var(--gb-accent); background: rgba(35, 64, 216, 0.05); }
.gb-finish-price { color: var(--gb-muted); font-size: 14px; }

.mtfe-gb__summary { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(25, 19, 38, 0.18); }
.mtfe-gb__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--gb-muted); padding: 3px 0; }
.mtfe-gb__row strong { color: var(--gb-ink); text-align: right; }
.mtfe-gb__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 700; }
.mtfe-gb__total strong { font-size: 30px; font-weight: 800; color: var(--gb-accent); }

.mtfe-gb__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 22px;
    border-radius: 40px;
    background: var(--gb-accent);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.mtfe-gb__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mtfe-gb__btn:hover, .mtfe-gb__btn:focus-visible { background: var(--gb-hover); color: #FFFFFF; transform: translateY(-2px); }
.mtfe-gb__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--gb-muted); text-align: center; }

/* ---------- live preview ---------- */
.mtfe-gb__stage {
    position: relative;
    min-height: 520px;
    border-radius: 24px;
    overflow: hidden;
    container-type: inline-size;
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 255, 255, 0.08), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 64px),
        var(--gb-stage);
    box-shadow: 0 30px 60px -40px rgba(25, 19, 38, 0.7);
}
.mtfe-gb__caption {
    position: absolute;
    top: 18px;
    left: 20px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mtfe-gb__garland {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 72%;
    height: 44%;
    transform: translateX(-50%);
    transition: width 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.mtfe-gb__garland.gb-size--small { width: 44%; }
.mtfe-gb__garland.gb-size--large { width: 92%; }
.mtfe-gb__garland.gb-size--small .gb-b:nth-of-type(n+21) { scale: 0; opacity: 0; }
.mtfe-gb__garland.gb-size--medium .gb-b:nth-of-type(n+31) { scale: 0; opacity: 0; }

.gb-b {
    --c: #2340D8;
    --s: 4;
    position: absolute;
    width: calc(var(--s) * 1cqw);
    aspect-ratio: 1 / 1.1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.75) 0 6%, rgba(255, 255, 255, 0.22) 14%, transparent 34%),
        radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.22), transparent 55%),
        var(--c);
    box-shadow: inset -4px -6px 12px rgba(0, 0, 0, 0.16), 0 8px 14px -8px rgba(0, 0, 0, 0.6);
    transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, background-color 0.5s ease;
    animation: gb-breathe 4.5s ease-in-out infinite;
}
.gb-leaf {
    position: absolute;
    width: 9cqw;
    height: 3.4cqw;
    border-radius: 0 100% 0 100%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #4F7A4C, #8DB38A);
    z-index: 1;
    opacity: 0;
    scale: 0.4;
    transition: opacity 0.4s ease, scale 0.4s ease;
}
.mtfe-gb__stage.has-greenery .gb-leaf { opacity: 1; scale: 1; }

.mtfe-gb__neon {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%) rotate(-3deg);
    font-size: clamp(22px, 5cqw, 40px);
    font-weight: 800;
    font-style: italic;
    white-space: nowrap;
    color: #FFFFFF;
    text-shadow: 0 0 4px #FFFFFF, 0 0 12px #FFB800, 0 0 26px #FFB800, 0 0 44px #FFB800;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.mtfe-gb__stage.has-neon .mtfe-gb__neon { opacity: 1; }

.mtfe-gb__ruler {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 72%;
    height: 14px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top: 0;
    transition: width 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.mtfe-gb__stage .mtfe-gb__garland.gb-size--small ~ .mtfe-gb__ruler { width: 44%; }
.mtfe-gb__stage .mtfe-gb__garland.gb-size--large ~ .mtfe-gb__ruler { width: 92%; }
.mtfe-gb__ruler-val {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--gb-stage);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
}

@keyframes gb-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) {
    .gb-b { animation: none; }
    .mtfe-gb__garland, .mtfe-gb__ruler, .gb-b, .gb-leaf { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .mtfe-gb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mtfe-gb__stage { grid-column: 1 / -1; grid-row: 1; min-height: 420px; }
}
@media (max-width: 767px) {
    .mtfe-gb { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .mtfe-gb__stage { min-height: 300px; border-radius: 20px; }
    .mtfe-gb__garland { top: 18%; }
    .mtfe-gb__panel { padding: 20px 16px; border-radius: 20px; }
    .mtfe-gb__stories { grid-template-columns: 1fr; }
}

/* ---------- generated positions ---------- */
.mtfe-gb__garland .gb-b:nth-of-type(1) { left: 1.54%; top: 23.61%; --s: 8.44; z-index: 2; --c: var(--gb-c1); animation-delay: 0.29s; }
.mtfe-gb__garland .gb-b:nth-of-type(2) { left: 6.60%; top: 43.95%; --s: 3.78; z-index: 4; --c: var(--gb-c2); animation-delay: 0.58s; }
.mtfe-gb__garland .gb-b:nth-of-type(3) { left: 12.52%; top: 34.99%; --s: 6.26; z-index: 3; --c: var(--gb-c3); animation-delay: 0.87s; }
.mtfe-gb__garland .gb-b:nth-of-type(4) { left: 18.24%; top: 51.29%; --s: 8.80; z-index: 2; --c: var(--gb-c1); animation-delay: 1.16s; }
.mtfe-gb__garland .gb-b:nth-of-type(5) { left: 24.49%; top: 68.22%; --s: 3.69; z-index: 4; --c: var(--gb-c4); animation-delay: 1.45s; }
.mtfe-gb__garland .gb-b:nth-of-type(6) { left: 30.19%; top: 53.16%; --s: 5.82; z-index: 3; --c: var(--gb-c2); animation-delay: 1.74s; }
.mtfe-gb__garland .gb-b:nth-of-type(7) { left: 36.92%; top: 67.03%; --s: 8.70; z-index: 2; --c: var(--gb-c4); animation-delay: 2.03s; }
.mtfe-gb__garland .gb-b:nth-of-type(8) { left: 43.29%; top: 76.37%; --s: 3.90; z-index: 4; --c: var(--gb-c1); animation-delay: 2.32s; }
.mtfe-gb__garland .gb-b:nth-of-type(9) { left: 47.79%; top: 54.97%; --s: 5.46; z-index: 3; --c: var(--gb-c3); animation-delay: 2.61s; }
.mtfe-gb__garland .gb-b:nth-of-type(10) { left: 53.97%; top: 67.94%; --s: 9.61; z-index: 2; --c: var(--gb-c2); animation-delay: 2.90s; }
.mtfe-gb__garland .gb-b:nth-of-type(11) { left: 60.47%; top: 76.11%; --s: 3.54; z-index: 4; --c: var(--gb-c1); animation-delay: 3.19s; }
.mtfe-gb__garland .gb-b:nth-of-type(12) { left: 66.53%; top: 54.90%; --s: 5.92; z-index: 3; --c: var(--gb-c4); animation-delay: 3.48s; }
.mtfe-gb__garland .gb-b:nth-of-type(13) { left: 71.18%; top: 58.40%; --s: 8.84; z-index: 2; --c: var(--gb-c4); animation-delay: 0.27s; }
.mtfe-gb__garland .gb-b:nth-of-type(14) { left: 76.99%; top: 62.64%; --s: 3.45; z-index: 4; --c: var(--gb-c2); animation-delay: 0.56s; }
.mtfe-gb__garland .gb-b:nth-of-type(15) { left: 83.76%; top: 35.13%; --s: 6.25; z-index: 3; --c: var(--gb-c3); animation-delay: 0.85s; }
.mtfe-gb__garland .gb-b:nth-of-type(16) { left: 89.76%; top: 40.96%; --s: 8.46; z-index: 2; --c: var(--gb-c1); animation-delay: 1.14s; }
.mtfe-gb__garland .gb-b:nth-of-type(17) { left: 94.92%; top: 43.94%; --s: 3.46; z-index: 4; --c: var(--gb-c2); animation-delay: 1.43s; }
.mtfe-gb__garland .gb-b:nth-of-type(18) { left: 4.28%; top: 17.95%; --s: 5.91; z-index: 3; --c: var(--gb-c4); animation-delay: 1.72s; }
.mtfe-gb__garland .gb-b:nth-of-type(19) { left: 10.09%; top: 37.33%; --s: 9.20; z-index: 2; --c: var(--gb-c1); animation-delay: 2.01s; }
.mtfe-gb__garland .gb-b:nth-of-type(20) { left: 16.34%; top: 56.66%; --s: 3.33; z-index: 4; --c: var(--gb-c3); animation-delay: 2.30s; }
.mtfe-gb__garland .gb-b:nth-of-type(21) { left: 22.23%; top: 40.87%; --s: 5.83; z-index: 3; --c: var(--gb-c4); animation-delay: 2.59s; }
.mtfe-gb__garland .gb-b:nth-of-type(22) { left: 27.52%; top: 59.49%; --s: 9.04; z-index: 2; --c: var(--gb-c2); animation-delay: 2.88s; }
.mtfe-gb__garland .gb-b:nth-of-type(23) { left: 33.97%; top: 75.12%; --s: 3.74; z-index: 4; --c: var(--gb-c1); animation-delay: 3.17s; }
.mtfe-gb__garland .gb-b:nth-of-type(24) { left: 40.03%; top: 54.79%; --s: 6.34; z-index: 3; --c: var(--gb-c4); animation-delay: 3.46s; }
.mtfe-gb__garland .gb-b:nth-of-type(25) { left: 45.51%; top: 66.35%; --s: 8.82; z-index: 2; --c: var(--gb-c3); animation-delay: 0.25s; }
.mtfe-gb__garland .gb-b:nth-of-type(26) { left: 51.37%; top: 78.45%; --s: 3.26; z-index: 4; --c: var(--gb-c2); animation-delay: 0.54s; }
.mtfe-gb__garland .gb-b:nth-of-type(27) { left: 56.65%; top: 55.50%; --s: 6.28; z-index: 3; --c: var(--gb-c1); animation-delay: 0.83s; }
.mtfe-gb__garland .gb-b:nth-of-type(28) { left: 63.37%; top: 63.35%; --s: 8.21; z-index: 2; --c: var(--gb-c4); animation-delay: 1.12s; }
.mtfe-gb__garland .gb-b:nth-of-type(29) { left: 69.71%; top: 70.60%; --s: 3.81; z-index: 4; --c: var(--gb-c3); animation-delay: 1.41s; }
.mtfe-gb__garland .gb-b:nth-of-type(30) { left: 74.11%; top: 42.90%; --s: 5.56; z-index: 3; --c: var(--gb-c4); animation-delay: 1.70s; }
.mtfe-gb__garland .gb-b:nth-of-type(31) { left: 80.58%; top: 52.70%; --s: 9.18; z-index: 2; --c: var(--gb-c1); animation-delay: 1.99s; }
.mtfe-gb__garland .gb-b:nth-of-type(32) { left: 86.29%; top: 55.03%; --s: 3.44; z-index: 4; --c: var(--gb-c2); animation-delay: 2.28s; }
.mtfe-gb__garland .gb-b:nth-of-type(33) { left: 93.60%; top: 21.41%; --s: 5.43; z-index: 3; --c: var(--gb-c3); animation-delay: 2.57s; }
.mtfe-gb__garland .gb-b:nth-of-type(34) { left: 97.98%; top: 26.30%; --s: 9.05; z-index: 2; --c: var(--gb-c1); animation-delay: 2.86s; }
.mtfe-gb__garland .gb-leaf:nth-of-type(1) { left: 6.25%; top: 40.26%; rotate: -35deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(2) { left: 18.75%; top: 57.67%; rotate: -32deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(3) { left: 31.25%; top: 61.95%; rotate: 66deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(4) { left: 43.75%; top: 55.98%; rotate: -70deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(5) { left: 56.25%; top: 61.99%; rotate: 32deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(6) { left: 68.75%; top: 66.15%; rotate: 48deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(7) { left: 81.25%; top: 57.44%; rotate: 43deg; }
.mtfe-gb__garland .gb-leaf:nth-of-type(8) { left: 93.75%; top: 22.71%; rotate: -34deg; }
.mtfe-gb__stage.has-chrome .gb-b:nth-of-type(7), .mtfe-gb__stage.has-chrome .gb-b:nth-of-type(12), .mtfe-gb__stage.has-chrome .gb-b:nth-of-type(18), .mtfe-gb__stage.has-chrome .gb-b:nth-of-type(24), .mtfe-gb__stage.has-chrome .gb-b:nth-of-type(30) {
    --c: var(--gb-chrome);
    background:
        radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0.35) 16%, transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%, rgba(0, 0, 0, 0.25) 100%),
        var(--c);
}

/* photo mode */
.mtfe-gb__stage.is-photo { background: #EEF1F8; }
.mtfe-gb .mtfe-gb__stage img.mtfe-gb__wall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.mtfe-gb__stage.is-photo .mtfe-gb__caption { background: rgba(25, 19, 38, 0.78); color: #FFFFFF; z-index: 8; }
.mtfe-gb__stage.is-photo .mtfe-gb__ruler { bottom: 26px; border-color: rgba(25, 19, 38, 0.5); z-index: 7; }
.mtfe-gb__stage.is-photo .mtfe-gb__ruler-val { background: #191326; color: #FFFFFF; }
.mtfe-gb__stage.is-photo .mtfe-gb__neon { top: 15%; font-size: clamp(20px, 4.4cqw, 34px); z-index: 7; color: #F5F8FF; text-shadow: 0 0 3px #FFFFFF, 0 0 10px #3D6BFF, 0 0 22px #3D6BFF, 0 0 40px #3D6BFF; }
.mtfe-gb__stage.is-clusters .mtfe-gb__garland { top: 3%; height: 46%; }
.gb-cl, .gb-gr, .gb-ch { position: absolute; display: block; translate: -50% -50%; font-style: normal; text-decoration: none; transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; }
.gb-cl { width: calc(var(--w) * 1cqw); rotate: var(--r); z-index: var(--z); }
/* no transitions until the builder is ready, so nothing animates into place on page load */
.mtfe-gb:not(.gb-ready) *, .mtfe-gb:not(.gb-ready) *::before, .mtfe-gb:not(.gb-ready) *::after { transition: none !important; }
.gb-cl img, .gb-gr img, .gb-ch img { display: block; width: 100%; height: auto; max-width: none; }
.mtfe-gb .gb-cl img { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity 0.45s ease; filter: drop-shadow(0 14px 14px rgba(25, 19, 38, 0.28)); }
.gb-cl { aspect-ratio: 1; }
.mtfe-gb__garland.gb-size--small .gb-cl:nth-of-type(n+7) { scale: 0; opacity: 0; }
.mtfe-gb__garland.gb-size--medium .gb-cl:nth-of-type(n+11) { scale: 0; opacity: 0; }
.gb-gr { width: 22cqw; z-index: 1; opacity: 0; scale: 0.5; }
.mtfe-gb__stage.has-greenery .gb-gr { opacity: 1; scale: 1; }
.gb-ch { width: 6cqw; z-index: 6; opacity: 0; scale: 0.3; }
.mtfe-gb__stage.has-chrome .gb-ch { opacity: 1; scale: 1; }
.mtfe-gb .gb-ch img { filter: drop-shadow(0 8px 8px rgba(25, 19, 38, 0.3)); }
.mtfe-gb__stage.gb-show-0 .gb-cl img.gb-st-0 { opacity: 1; }
.mtfe-gb__stage.gb-show-1 .gb-cl img.gb-st-1 { opacity: 1; }
.mtfe-gb__stage.gb-show-2 .gb-cl img.gb-st-2 { opacity: 1; }
.mtfe-gb__stage.gb-show-3 .gb-cl img.gb-st-3 { opacity: 1; }
.mtfe-gb__stage.gb-show-4 .gb-cl img.gb-st-4 { opacity: 1; }
.mtfe-gb__stage.gb-show-5 .gb-cl img.gb-st-5 { opacity: 1; }
.mtfe-gb__stage.gb-show-6 .gb-cl img.gb-st-6 { opacity: 1; }
.mtfe-gb__stage.gb-show-7 .gb-cl img.gb-st-7 { opacity: 1; }
.mtfe-gb__garland .gb-cl:nth-of-type(1) { left: 3.50%; top: 33.53%; --w: 27.5; --r: 3deg; --z: 2; }
.mtfe-gb__garland .gb-cl:nth-of-type(2) { left: 96.34%; top: 33.97%; --w: 27.3; --r: 11deg; --z: 4; }
.mtfe-gb__garland .gb-cl:nth-of-type(3) { left: 54.25%; top: 66.89%; --w: 27.6; --r: -1deg; --z: 2; }
.mtfe-gb__garland .gb-cl:nth-of-type(4) { left: 28.91%; top: 59.57%; --w: 25.3; --r: 12deg; --z: 2; }
.mtfe-gb__garland .gb-cl:nth-of-type(5) { left: 78.47%; top: 53.38%; --w: 26.9; --r: -5deg; --z: 2; }
.mtfe-gb__garland .gb-cl:nth-of-type(6) { left: 20.20%; top: 52.55%; --w: 28.2; --r: -12deg; --z: 4; }
.mtfe-gb__garland .gb-cl:nth-of-type(7) { left: 70.74%; top: 59.37%; --w: 26.4; --r: 3deg; --z: 4; }
.mtfe-gb__garland .gb-cl:nth-of-type(8) { left: 46.37%; top: 65.16%; --w: 26.8; --r: -2deg; --z: 4; }
.mtfe-gb__garland .gb-cl:nth-of-type(9) { left: 13.19%; top: 46.44%; --w: 26.9; --r: 4deg; --z: 3; }
.mtfe-gb__garland .gb-cl:nth-of-type(10) { left: 86.65%; top: 41.68%; --w: 27.7; --r: 9deg; --z: 3; }
.mtfe-gb__garland .gb-cl:nth-of-type(11) { left: 36.96%; top: 61.90%; --w: 25.2; --r: 11deg; --z: 3; }
.mtfe-gb__garland .gb-cl:nth-of-type(12) { left: 61.55%; top: 64.95%; --w: 25.4; --r: -12deg; --z: 3; }
.mtfe-gb__garland .gb-gr:nth-of-type(1) { left: 7.14%; top: 29.61%; rotate: -95deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(2) { left: 21.43%; top: 58.94%; rotate: 72deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(3) { left: 35.71%; top: 68.73%; rotate: -94deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(4) { left: 50.00%; top: 72.00%; rotate: 83deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(5) { left: 64.29%; top: 68.73%; rotate: 80deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(6) { left: 78.57%; top: 58.94%; rotate: 77deg; }
.mtfe-gb__garland .gb-gr:nth-of-type(7) { left: 92.86%; top: 29.61%; rotate: -70deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(1) { left: 10.94%; top: 46.59%; rotate: -25deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(2) { left: 26.56%; top: 62.21%; rotate: -21deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(3) { left: 42.19%; top: 61.02%; rotate: 11deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(4) { left: 57.81%; top: 70.02%; rotate: 10deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(5) { left: 73.44%; top: 53.21%; rotate: -14deg; }
.mtfe-gb__garland .gb-ch:nth-of-type(6) { left: 89.06%; top: 37.59%; rotate: 15deg; }
@media (max-width: 767px) {
    .mtfe-gb__stage.is-photo { min-height: 360px; }
    .mtfe-gb__stage.is-clusters .mtfe-gb__garland { top: 8%; height: 46%; }
    .mtfe-gb__stage.is-photo .mtfe-gb__neon { top: 14%; font-size: 18px; }
}

/* sticky "Choose a length" panel */
@media (min-width: 1101px) {
    .mtfe-gb.is-sticky-lengths .mtfe-gb__panel--lengths { position: sticky; top: var(--gb-sticky-top, 30px); }
    body.admin-bar .mtfe-gb.is-sticky-lengths .mtfe-gb__panel--lengths { top: calc(var(--gb-sticky-top, 30px) + 32px); }
}
.mtfe-gb a.mtfe-gb__btn, .mtfe-gb a.mtfe-gb__btn:visited, .mtfe-gb a.mtfe-gb__btn:hover { color: #FFFFFF; }