/* DA Goodies v8.2 — hard modal + snack ticker fix.
This file loads LAST. It overrides earlier Pinegrow edits that accidentally broke:
1. Modal position/display
2. Modal font sizes
3. Snack ticker visibility/animation */
/* IMPORTANT: earlier CSS accidentally made .dg-modal position: relative.
   That is what made the page feel frozen after clicking a pack. */
.dg-modal {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 24px !important;
    background: rgba(0,0,0,.66) !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    font-family: var(--dg-font, Arial, Helvetica, sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.dg-modal.is-open {
    display: flex !important;
}

/* Undo accidental Pinegrow desktop rule: font-size:1px; line-height:0px */
.dg-modal,
.dg-modal * {
    line-height: normal !important;
}

.dg-modal-card {
    position: relative !important;
    width: min(100%, 1100px) !important;
    max-height: min(88vh, 920px) !important;
    overflow: auto !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,255,226,.98)) !important;
    border: 3px solid var(--dg-ink, #101010) !important;
    border-radius: 26px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 42px rgba(159,230,26,.24) !important;
    padding: 28px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    pointer-events: auto !important;
}

.dg-modal-title {
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: .98 !important;
}

.dg-choice-head h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
}

.dg-choice-card strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.dg-close {
    position: absolute !important;
    right: 16px !important;
    top: 14px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

/* Make sure decorative effects never block clicks. */
body.dg-page-bg::before,
body.dg-page-bg::after,
.dg-home-shell::before,
.dg-home-shell::after,
.dg-hero::after,
.asset-delivery-panel::after,
.asset-packs-section::after,
.asset-checkout-panel::after {
    pointer-events: none !important;
}

/* Stable visible CSS-only snack ticker.
   Uses the cropped strip as a repeating background; no stacked img tags. */
.dg-snack-strip,
.asset-snack-strip {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: clamp(118px, 10.5vw, 184px) !important;
    min-height: clamp(118px, 10.5vw, 184px) !important;
    max-height: clamp(118px, 10.5vw, 184px) !important;
    overflow: hidden !important;
    margin-left: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: #061015 !important;
    border-bottom: 2px solid rgba(120,211,19,.55) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12), 0 0 24px rgba(159,230,26,.20) !important;
    z-index: 2 !important;
}

.dg-stable-snack-ticker {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("../assets/snacks-strip-cropped.png") !important;
    background-repeat: repeat-x !important;
    background-size: auto 100% !important;
    background-position: 0 50% !important;
    animation: dgStableSnackTickerV82 18s linear infinite !important;
    will-change: background-position !important;
    pointer-events: none !important;
}

@keyframes dgStableSnackTickerV82 {
    from {
        background-position: 0 50%;
    }

    to {
        background-position: -2149px 50%;
    }
}

/* Hide older ticker remnants if any are still present. */
.dg-snack-loop-window,
.dg-snack-loop-img,
.dg-snack-marquee,
.asset-snack-marquee,
.dg-snack-track,
.asset-snack-track,
.dg-snack-marquee-img {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep buttons clickable above decorative layers. */
[data-pack-id],
[data-open-modal],
[data-close-modal],
.dg-pay-overlay-btn,
.dg-overlay-btn,
.dg-clear-overlay,
.dg-cart-pill,
.dg-nav button,
.dg-nav a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

@media (max-width: 760px) {
    .dg-snack-strip,
    .asset-snack-strip {
        height: clamp(94px, 18vw, 146px) !important;
        min-height: clamp(94px, 18vw, 146px) !important;
        max-height: clamp(94px, 18vw, 146px) !important;
    }

    .dg-stable-snack-ticker {
        animation-duration: 16s !important;
    }
}

@media (max-width: 440px) {
    .dg-snack-strip,
    .asset-snack-strip {
        height: clamp(82px, 20vw, 118px) !important;
        min-height: clamp(82px, 20vw, 118px) !important;
        max-height: clamp(82px, 20vw, 118px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-stable-snack-ticker {
        animation: none !important;
    }
}

/* ================================================================================
v8.3 — Permanent Snacks In Rotation Scrolling Fix
================================================================================
Permanent ticker fix for every future package.

This version does not use JavaScript and does not use stacked image tags.
It uses one ticker window plus a ::before pseudo-element that repeats the cropped
snack strip horizontally and animates it with transform.
================================================================================ */
.dg-stable-snack-ticker {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    background-image: none !important;
    animation: none !important;
    pointer-events: none !important;
}

.dg-stable-snack-ticker::before {
    content: "";
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 300vw !important;
    min-width: 6400px !important;
    height: 100% !important;
    background-image: url("../assets/snacks-strip-cropped.png") !important;
    background-repeat: repeat-x !important;
    background-size: auto 100% !important;
    background-position: 0 50% !important;
    animation: daGoodiesSnackTickerMove 14s linear infinite !important;
    will-change: transform !important;
    transform: translate3d(0, 0, 0);
}

@keyframes daGoodiesSnackTickerMove {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-2149px, 0, 0);
    }
}

/* ================================================================================
v8.4 — Legal Footer, Legal Overlay Panels, Cookie Slider, Fade Scroll
================================================================================ */
.dg-legal-footer {
    width: min(calc(100% - 32px), var(--dg-content-max, 1320px));
    margin: 30px auto 44px;
    padding: 18px;
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,255,215,.96));
    box-shadow: 0 14px 30px rgba(0,0,0,.14), 0 0 28px rgba(159,230,26,.20);
}

.dg-legal-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.dg-legal-small {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: rgba(16,16,16,.78);
}

.dg-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.dg-legal-links button {
    appearance: none;
    border: 2px solid var(--dg-ink, #101010);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #ecffd5);
    color: var(--dg-ink, #101010);
    padding: 10px 14px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: 0 3px 0 var(--dg-ink, #101010), 0 0 14px rgba(159,230,26,.16);
    cursor: pointer;
}

.dg-legal-links button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--dg-ink, #101010), 0 0 24px rgba(159,230,26,.30);
}

.dg-legal-card {
    width: min(100%, 960px) !important;
    background: radial-gradient(circle at 12% 0%, rgba(159,230,26,.24), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(255,141,27,.18), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(240,255,219,.99)) !important;
}

.dg-legal-copy {
    display: grid;
    gap: 14px;
    font-size: 16px;
    line-height: 1.55 !important;
    color: rgba(16,16,16,.90);
}

.dg-legal-copy p {
    margin: 0;
}

.dg-cookie-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f4ffe5);
    box-shadow: inset 0 0 0 2px rgba(159,230,26,.18);
}

.dg-cookie-choice strong,
.dg-cookie-choice span {
    display: block;
}

.dg-cookie-choice span {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 800;
    color: rgba(16,16,16,.68);
}

.dg-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 70px;
    height: 38px;
}

.dg-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dg-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d8d8d8;
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--dg-ink, #101010);
    transition: .22s ease;
}

.dg-slider::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
    background: #ffffff;
    border: 2px solid var(--dg-ink, #101010);
    border-radius: 50%;
    transition: .22s ease;
}

.dg-switch input:checked + .dg-slider {
    background: linear-gradient(180deg, #a9f319, #76d216);
}

.dg-switch input:checked + .dg-slider::before {
    transform: translateX(31px);
}

.dg-cookie-status {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(159,230,26,.16);
    font-weight: 900;
}

/* Fading scroll effect */
.dg-fade-section {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .75s ease, transform .75s ease, filter .75s ease;
    filter: saturate(.92);
}

.dg-fade-section.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: saturate(1);
}

@media (max-width: 760px) {
    .dg-legal-footer-inner,
    .dg-legal-links,
    .dg-cookie-choice {
        align-items: stretch;
        flex-direction: column;
    }

    .dg-legal-links button {
        width: 100%;
    }

    .dg-switch {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-fade-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ================================================================================
v8.5 — Repeat Fade-On-Scroll Refinement
================================================================================
Fade sections now fade every time they enter and leave the viewport.
================================================================================ */
.dg-fade-section {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .70s ease, transform .70s ease, filter .70s ease;
    filter: saturate(.92) blur(.2px);
}

.dg-fade-section.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: saturate(1) blur(0);
    z-index: 86;
    padding-bottom: 21px;
    margin-bottom: -1px;
    padding-top: 0px;
    margin-top: 0px;
}

/* ================================================================================
v8.6 — Mock Order Success Page
================================================================================
Temporary Square-hosted checkout return page.
================================================================================ */
.dg-success-page .dg-topbar {
    position: sticky;
    top: 0;
    z-index: 169;
}

.dg-success-shell {
    width: min(calc(100% - 32px), 1120px);
    margin: 48px auto 80px;
    min-height: calc(100vh - 160px);
    display: grid;
    align-items: center;
}

.dg-success-card {
    position: relative;
    overflow: hidden;
    border: 4px solid var(--dg-ink, #101010);
    border-radius: 34px;
    padding: clamp(26px, 5vw, 58px);
    background: radial-gradient(circle at 14% 0%, rgba(159,230,26,.28), transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(255,141,27,.20), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,255,215,.98));
    box-shadow: 0 24px 70px rgba(0,0,0,.24), 0 0 42px rgba(159,230,26,.22);
}

.dg-success-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(16,16,16,.16);
    border-radius: 26px;
    pointer-events: none;
}

.dg-success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    padding: 10px 16px;
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 999px;
    background: linear-gradient(180deg, #a9f319, #76d216);
    color: var(--dg-ink, #101010);
    font-size: 14px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 4px 0 var(--dg-ink, #101010);
}

.dg-success-card h1 {
    margin: 0;
    max-width: 880px;
    font-size: clamp(40px, 7vw, 86px);
    line-height: .88;
    text-transform: uppercase;
    letter-spacing: -.05em;
    color: var(--dg-ink, #101010);
}

.dg-success-lede {
    max-width: 780px;
    margin: 20px 0 0;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.45;
    font-weight: 850;
    color: rgba(16,16,16,.78);
}

.dg-success-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0;
}

.dg-success-grid article {
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 22px;
    padding: 18px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 5px 0 var(--dg-ink, #101010), 0 0 20px rgba(159,230,26,.14);
}

.dg-success-grid span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(16,16,16,.58);
}

.dg-success-grid strong {
    display: block;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1;
    color: var(--dg-ink, #101010);
}

.dg-success-note {
    padding: 20px;
    border-radius: 24px;
    background: rgba(7,16,21,.92);
    color: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(159,230,26,.20);
}

.dg-success-note h2 {
    margin: 0 0 8px;
    font-size: clamp(22px, 3vw, 34px);
    text-transform: uppercase;
}

.dg-success-note p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    color: rgba(255,255,255,.82);
}

.dg-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.dg-success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 20px;
    border: 3px solid var(--dg-ink, #101010);
    border-radius: 999px;
    background: #ffffff;
    color: var(--dg-ink, #101010);
    text-decoration: none;
    font-weight: 1000;
    text-transform: uppercase;
    box-shadow: 0 5px 0 var(--dg-ink, #101010);
}

.dg-success-btn.is-primary {
    background: linear-gradient(180deg, #a9f319, #76d216);
}

.dg-success-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--dg-ink, #101010), 0 0 26px rgba(159,230,26,.28);
}

.dg-success-small {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 800;
    color: rgba(16,16,16,.56);
}

@media (max-width: 760px) {
    .dg-success-grid {
        grid-template-columns: 1fr;
    }

    .dg-success-actions {
        flex-direction: column;
    }

    .dg-success-btn {
        width: 100%;
    }
}

/* ================================================================================
v8.7 — Public Page Reorganization: Tracker, Success, Footer, Active Nav
================================================================================
Static-image only. No video backgrounds.
Preserves v8.6/v8.5/v8.4/v8.3/v8.2 settings and adds public-page polish.
================================================================================ */
/* Page backgrounds */
body {
    background-image: url("../assets/page-backgrounds/home-desktop.png") !important;
    background-color: #071015 !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.dg-tracker-page {
    background-image: url("../assets/page-backgrounds/tracker-desktop.png") !important;
}

body.dg-success-page {
    background-image: url("../assets/page-backgrounds/success-desktop.png") !important;
}

@media (max-width: 1100px) {
    body {
        background-image: url("../assets/page-backgrounds/home-tablet.png") !important;
        background-attachment: fixed !important;
    }

    body.dg-tracker-page {
        background-image: url("../assets/page-backgrounds/tracker-tablet.png") !important;
    }

    body.dg-success-page {
        background-image: url("../assets/page-backgrounds/success-tablet.png") !important;
    }
}

@media (max-width: 640px) {
    body {
        background-image: url("../assets/page-backgrounds/home-mobile.png") !important;
        background-attachment: scroll !important;
    }

    body.dg-tracker-page {
        background-image: url("../assets/page-backgrounds/tracker-mobile.png") !important;
    }

    body.dg-success-page {
        background-image: url("../assets/page-backgrounds/success-mobile.png") !important;
    }
}

/* Header/nav consistency */
.dg-global-header .dg-topbar-inner {
    max-width: 1500px;
}

.dg-nav .is-active::after {
    width: 88px !important;
}

.dg-nav a:not(.is-active)::after,
.dg-nav button:not(.is-active)::after {
    width: 0;
}

/* Public page layout */
.dg-public-page-shell {
    width: min(calc(100% - 32px), 1320px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) 0 34px;
}

.dg-page-hero {
    position: relative;
    min-height: clamp(210px, 25vw, 360px);
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    align-items: center;
    gap: 18px;
    color: #fff;
}

.dg-fast-badge {
    justify-self: center;
    display: inline-grid;
    gap: 6px;
    transform: rotate(-5deg);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.dg-fast-badge strong {
    display: block;
    padding: 12px 14px 6px;
    background: rgba(7,16,21,.95);
    color: #fff;
    border: 3px solid #111;
    border-bottom: 0;
    font-size: clamp(24px, 3vw, 38px);
    line-height: .9;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #111;
}

.dg-fast-badge-image {
    display: block;
    width: clamp(150px, 17vw, 235px);
    height: auto;
}

.dg-fast-badge span {
    display: inline-flex;
    padding: 8px 10px;
    background: #ff8d1b;
    color: #111;
    border: 3px solid #111;
    font-weight: 1000;
    text-transform: uppercase;
    transform: skewX(-6deg);
}

.dg-tracker-title-lockup,
.dg-payment-title-lockup {
    text-align: center;
    text-transform: uppercase;
    filter: drop-shadow(0 12px 0 rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(159,230,26,.30));
}

.dg-tracker-title-lockup h1,
.dg-payment-title-lockup h1 {
    margin: 0;
    font-size: clamp(52px, 8vw, 132px);
    line-height: .78;
    letter-spacing: -.055em;
    color: #fff;
    -webkit-text-stroke: 4px #111;
    text-shadow: 0 6px 0 #111, 4px 10px 0 rgba(255,141,27,.75);
}

.dg-tracker-title-lockup h1 span,
.dg-payment-title-lockup h1 span {
    color: #a9f319;
}

.dg-tracker-title-lockup p,
.dg-payment-title-lockup p {
    display: inline-flex;
    margin: 12px auto 0;
    padding: 8px 24px;
    background: #111;
    color: #a9f319;
    font-size: clamp(18px, 3vw, 38px);
    font-weight: 1000;
    line-height: 1;
    transform: skewX(-9deg);
    letter-spacing: -.02em;
}

.dg-payment-title-lockup p {
    background: #a9f319;
    color: #111;
}

.dg-payment-title-lockup p strong {
    color: #f05a24;
}

.dg-bike-lockup {
    justify-self: center;
    display: grid;
    justify-items: center;
    color: #fff;
    text-transform: uppercase;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
}

.dg-bike-icon {
    font-size: clamp(42px, 6vw, 76px);
}

.dg-bike-lockup strong {
    font-size: clamp(28px, 4vw, 56px);
    line-height: .85;
    color: #fff;
    -webkit-text-stroke: 2px #111;
}

.dg-bike-lockup em {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 10px;
    background: #a9f319;
    color: #111;
    border: 3px solid #111;
    font-style: normal;
    font-weight: 1000;
    transform: rotate(-3deg);
}

.dg-payment-check {
    justify-self: center;
    width: clamp(84px, 11vw, 150px);
    height: clamp(84px, 11vw, 150px);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 7px solid #a9f319;
    background: rgba(7,16,21,.94);
    color: #a9f319;
    font-size: clamp(58px, 9vw, 108px);
    font-weight: 1000;
    box-shadow: 0 0 30px rgba(159,230,26,.65), inset 0 0 0 6px rgba(159,230,26,.18);
}

/* Shared black neon cards */
.dg-page-card {
    position: relative;
    overflow: hidden;
    border: 4px solid #9fe61a;
    border-radius: 32px;
    background: radial-gradient(circle at 50% 0%, rgba(159,230,26,.10), transparent 34%),
        linear-gradient(180deg, rgba(3,10,14,.96), rgba(2,8,12,.96));
    box-shadow: 0 20px 70px rgba(0,0,0,.38), 0 0 34px rgba(159,230,26,.32);
    color: #fff;
}

/* Goodie Tracker dashboard */
.dg-tracker-dashboard-card {
    display: grid;
    grid-template-columns: minmax(300px, .95fr) 1.15fr;
    gap: 28px;
    padding: clamp(22px, 4vw, 44px);
}

.dg-tracker-entry {
    padding-right: 28px;
    border-right: 2px solid rgba(55,161,255,.52);
}

.dg-tracker-entry h2,
.dg-status-head h2,
.dg-success-code h2,
.dg-success-status h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(24px, 3vw, 38px);
    line-height: .95;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 2px 3px 0 #111;
}

.dg-tracker-entry h2 span,
.dg-status-head h2,
.dg-success-code h2,
.dg-success-status h2 {
    color: #a9f319;
}

.dg-code-boxes,
.dg-success-code-boxes {
    display: grid;
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    gap: 14px;
    margin: 18px 0 20px;
}

.dg-code-input,
.dg-success-code-boxes span {
    min-height: clamp(70px, 8vw, 104px);
    border: 3px solid #c4ff00;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20,24,26,.95), rgba(3,6,8,.95));
    color: #fff;
    text-align: center;
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 1000;
    box-shadow: inset 0 0 18px rgba(255,255,255,.04), 0 0 18px rgba(159,230,26,.20);
}

.dg-hidden-phone {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dg-neon-action,
.dg-help-link {
    appearance: none;
    border: 3px solid #111;
    border-radius: 999px;
    background: linear-gradient(180deg, #c6ff0d, #83dd12);
    color: #111;
    box-shadow: 0 6px 0 #111, 0 0 26px rgba(159,230,26,.45);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 1000;
    font-style: italic;
    text-transform: uppercase;
    min-height: 64px;
    padding: 12px 28px;
    width: 100%;
}

.dg-neon-action:hover,
.dg-success-btn:hover {
    transform: translateY(-3px);
}

.dg-tracker-message-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 16px;
    padding: 16px;
    border: 2px solid rgba(55,161,255,.65);
    border-radius: 18px;
    background: rgba(0,0,0,.28);
}

.dg-tracker-message-box span {
    font-size: 42px;
    color: #a9f319;
}

.dg-tracker-message-box strong {
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    font-style: italic;
}

.dg-tracker-message-box p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.76);
    font-weight: 800;
}

.dg-help-link {
    margin-top: 8px;
    min-height: 44px;
    padding: 8px;
    background: transparent;
    color: #fff;
    box-shadow: none;
    border: 0;
    font-size: 20px;
}

.dg-help-link span {
    color: #a9f319;
}

.dg-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.dg-status-head span {
    display: inline-flex;
    margin-top: 2px;
    padding: 8px 14px;
    border: 2px solid #c4ff00;
    border-radius: 999px;
    color: #fff;
    font-weight: 1000;
    text-transform: uppercase;
}

.dg-refresh-dot {
    width: 48px;
    height: 48px;
    border: 3px solid #c4ff00;
    border-radius: 999px;
    background: rgba(7,16,21,.70);
    color: #c4ff00;
    font-size: 26px;
    box-shadow: 0 0 18px rgba(159,230,26,.30);
}

.dg-track-steps {
    display: grid;
    gap: 12px;
}

.dg-track-step {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 78px;
    padding: 12px 18px;
    border: 2px solid rgba(55,161,255,.70);
    border-radius: 20px;
    background: rgba(0,0,0,.26);
    color: #fff;
}

.dg-track-step.active {
    border-color: #c4ff00;
    background: linear-gradient(90deg, rgba(159,230,26,.28), rgba(159,230,26,.06));
    box-shadow: 0 0 26px rgba(159,230,26,.52), inset 0 0 0 2px rgba(159,230,26,.16);
}

.dg-step-number {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #101820;
    border: 4px solid #37a1ff;
    color: #fff;
    font-size: 30px;
    font-weight: 1000;
}

.dg-track-step.active .dg-step-number {
    background: #a9f319;
    color: #111;
    border-color: #a9f319;
}

.dg-track-step strong {
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.05;
    font-style: italic;
    text-transform: none;
}

.dg-track-step small {
    display: block;
    margin-top: 4px;
    color: #c4ff00;
    font-size: 14px;
    font-weight: 900;
}

.dg-track-step em {
    font-style: normal;
    font-size: 38px;
    opacity: .9;
}

.dg-tracker-photo img {
    width: 100%;
    border-radius: 18px;
    margin-top: 18px;
}

/* Order success card */
.dg-success-dashboard-card {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 26px;
    padding: clamp(22px, 4vw, 44px);
}

.dg-success-code {
    border-right: 2px solid rgba(255,255,255,.22);
    padding-right: 26px;
}

.dg-success-code p {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.86);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
}

.dg-success-code p span {
    color: #a9f319;
    font-size: 34px;
}

.dg-success-code p strong {
    color: #a9f319;
}

.dg-success-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 12px;
}

.dg-success-progress article {
    position: relative;
    min-height: 148px;
    padding: 18px 14px;
    border-left: 2px solid rgba(255,255,255,.25);
    text-align: center;
}

.dg-success-progress article span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border: 4px solid #a9f319;
    border-radius: 999px;
    color: #a9f319;
    font-size: 28px;
    box-shadow: 0 0 22px rgba(159,230,26,.36);
}

.dg-success-progress article.is-current span {
    width: 82px;
    height: 82px;
    margin-top: -12px;
    font-size: 40px;
    box-shadow: 0 0 34px rgba(159,230,26,.72);
}

.dg-success-progress strong {
    display: block;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    font-size: 16px;
}

.dg-success-progress .is-current strong {
    color: #a9f319;
}

.dg-success-progress small {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-weight: 800;
}

.dg-success-message {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 16px 18px;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 18px;
    background: rgba(0,0,0,.22);
}

.dg-success-message span {
    color: #c4ff00;
    font-size: 44px;
}

.dg-success-message p {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
}

.dg-success-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
}

.dg-success-btn {
    min-width: min(360px, 100%);
    min-height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 28px;
    border: 3px solid #c4ff00;
    border-radius: 999px;
    background: rgba(2,8,12,.88);
    color: #fff;
    text-decoration: none;
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 1000;
    text-transform: uppercase;
    font-style: italic;
    box-shadow: 0 6px 0 #111, 0 0 24px rgba(159,230,26,.22);
}

.dg-success-btn.is-primary {
    background: linear-gradient(180deg, #c6ff0d, #83dd12);
    color: #111;
    border-color: #111;
    box-shadow: 0 6px 0 #111, 0 0 32px rgba(159,230,26,.48);
}

/* Benefit strip */
.dg-benefit-strip {
    width: min(100%, 1120px);
    margin: 26px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 3px solid #9fe61a;
    border-radius: 22px;
    background: rgba(4,13,18,.94);
    box-shadow: 0 14px 32px rgba(0,0,0,.30), 0 0 26px rgba(159,230,26,.24);
    overflow: hidden;
}

.dg-benefit-strip article {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 16px 18px;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.35);
}

.dg-benefit-strip article:last-child {
    border-right: 0;
}

.dg-benefit-strip span {
    grid-row: 1 / span 2;
    color: #a9f319;
    font-size: 40px;
}

.dg-benefit-strip strong {
    text-transform: uppercase;
    font-size: 18px;
    font-style: italic;
}

.dg-benefit-strip small {
    color: rgba(255,255,255,.75);
    font-weight: 800;
}

/* Shared public footer */
.dg-site-footer {
    width: min(calc(100% - 32px), 1420px);
    margin: 34px auto 0;
    color: #fff;
}

.dg-site-footer-panel {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, .92fr) .9fr 1.4fr;
    gap: 24px;
    align-items: center;
    padding: 28px 34px;
    border-top: 2px solid rgba(159,230,26,.60);
    background: linear-gradient(180deg, rgba(3,10,14,.95), rgba(2,7,10,.98));
    box-shadow: 0 -12px 32px rgba(0,0,0,.26);
}

.dg-footer-brand img {
    width: 170px;
    max-width: 100%;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.dg-footer-brand p {
    margin: 12px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.dg-footer-brand strong {
    color: #a9f319;
}

.dg-footer-column,
.dg-footer-social {
    min-height: 120px;
    padding-left: 24px;
    border-left: 1px dashed rgba(255,255,255,.42);
}

.dg-footer-column h3,
.dg-footer-social h3 {
    margin: 0 0 12px;
    color: #a9f319;
    text-transform: uppercase;
    font-size: 18px;
    font-style: italic;
}

.dg-footer-column a,
.dg-footer-column button {
    appearance: none;
    display: block;
    margin: 8px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.dg-footer-column a:hover,
.dg-footer-column button:hover {
    color: #a9f319;
}

.dg-social-row {
    display: flex;
    gap: 12px;
}

.dg-social-row a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid #a9f319;
    border-radius: 999px;
    color: #a9f319;
    text-decoration: none;
    font-size: 23px;
    font-weight: 1000;
}

.dg-footer-thanks {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 2px solid #a9f319;
    border-radius: 16px;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    font-size: 19px;
    line-height: 1.15;
}

.dg-heart-icon {
    color: #c4ff00;
    font-size: 52px;
    line-height: 1;
}

.dg-footer-slogan {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #a9f319, #8edb12);
    color: #111;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: clamp(16px, 2vw, 24px);
    font-style: italic;
}

.dg-footer-slogan strong {
    color: #f05a24;
}

/* Mobile/tablet */
@media (max-width: 1100px) {
    .dg-page-hero {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
        padding: 30px 0;
    }

    .dg-fast-badge,
    .dg-bike-lockup,
    .dg-payment-check {
        justify-self: center;
    }

    .dg-tracker-dashboard-card,
    .dg-success-dashboard-card {
        grid-template-columns: 1fr;
    }

    .dg-tracker-entry,
    .dg-success-code {
        padding-right: 0;
        border-right: 0;
        border-bottom: 2px solid rgba(55,161,255,.52);
        padding-bottom: 24px;
    }

    .dg-benefit-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-site-footer-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-footer-brand,
    .dg-footer-thanks {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .dg-public-page-shell {
        width: min(calc(100% - 22px), 640px);
        padding-top: 24px;
    }

    .dg-tracker-title-lockup h1,
    .dg-payment-title-lockup h1 {
        -webkit-text-stroke: 2px #111;
        font-size: clamp(46px, 15vw, 76px);
    }

    .dg-tracker-title-lockup p,
    .dg-payment-title-lockup p {
        font-size: clamp(17px, 5vw, 25px);
        padding: 8px 12px;
    }

    .dg-page-card {
        border-radius: 24px;
        padding: 20px;
    }

    .dg-code-boxes,
    .dg-success-code-boxes {
        gap: 9px;
    }

    .dg-track-step {
        grid-template-columns: 54px 1fr;
    }

    .dg-track-step em {
        display: none;
    }

    .dg-success-progress {
        grid-template-columns: 1fr;
    }

    .dg-success-progress article {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.22);
    }

    .dg-success-actions {
        flex-direction: column;
    }

    .dg-success-btn {
        min-width: 100%;
    }

    .dg-benefit-strip {
        grid-template-columns: 1fr;
    }

    .dg-benefit-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.25);
    }

    .dg-site-footer-panel {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .dg-footer-brand,
    .dg-footer-thanks {
        grid-column: auto;
    }

    .dg-footer-column,
    .dg-footer-social {
        border-left: 0;
        border-top: 1px dashed rgba(255,255,255,.34);
        padding-left: 0;
        padding-top: 18px;
        min-height: 0;
    }

    .dg-footer-slogan {
        flex-wrap: wrap;
    }
}

/* ================================================================================
v8.8 — Image Hero Lockups + HTML Data Panels
================================================================================
Uses generated image assets for hero text/logos while keeping tracker codes,
statuses, buttons, modals, and page data as editable HTML/CSS.
================================================================================ */
.dg-hero-image-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    filter: drop-shadow(0 12px 0 rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(159,230,26,.34));
}

.dg-hero-title-image {
    display: block;
    width: min(100%, 980px);
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    pointer-events: none;
    user-select: none;
}

.dg-goodie-tracker-title-img {
    width: min(100%, 1040px);
}

.dg-payment-received-title-img {
    width: min(100%, 860px);
    margin-top: -18px;
}

.dg-image-bike-lockup {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.dg-bike-logo-image {
    display: block;
    width: min(100%, 260px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(159,230,26,.24));
    pointer-events: none;
    user-select: none;
}

.dg-success-bike-lockup .dg-bike-logo-image {
    width: min(100%, 245px);
}

/* Keep the HTML data panels editable while the hero artwork is image-based. */
.dg-tracker-dashboard-card,
.dg-success-dashboard-card,
.dg-benefit-strip,
.dg-site-footer,
.dg-success-actions,
.dg-tracker-entry,
.dg-tracker-status-panel {
    position: relative;
}

@media (max-width: 1100px) {
    .dg-hero-title-image {
        width: min(100%, 880px);
    }

    .dg-payment-received-title-img {
        width: min(100%, 760px);
        margin-top: 0;
    }

    .dg-bike-logo-image,
    .dg-success-bike-lockup .dg-bike-logo-image {
        width: min(100%, 220px);
    }
}

@media (max-width: 760px) {
    .dg-page-hero {
        gap: 16px;
    }

    .dg-hero-title-image {
        width: min(100%, 640px);
    }

    .dg-goodie-tracker-title-img {
        width: min(100%, 650px);
    }

    .dg-payment-received-title-img {
        width: min(100%, 620px);
    }

    .dg-bike-logo-image,
    .dg-success-bike-lockup .dg-bike-logo-image {
        width: min(82%, 220px);
    }
}

/* ================================================================================
v8.10 — Clickable Checkout + Suggestion Buttons
================================================================================
Makes the overlay buttons visually read as real clickable buttons instead of flat
transparent hit areas.
================================================================================ */
.dg-pay-overlay-btn,
.dg-overlay-btn.is-orange {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-style: solid !important;
    border-width: 3px !important;
    border-radius: 999px !important;
    color: #101010 !important;
    font-size: clamp(15px, 1.55vw, 24px) !important;
    font-weight: 1000 !important;
    font-style: italic !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32) !important;
    cursor: pointer !important;
    transform: translateY(0) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease !important;
    outline: none !important;
}

/* Proceed to Payment */
.dg-pay-overlay-btn {
    border-color: #101010 !important;
    background: linear-gradient(180deg, rgba(231,255,43,1) 0%, rgba(155,231,14,1) 48%, rgba(112,201,12,1) 100%) !important;
    box-shadow: 0 6px 0 #101010,
        0 11px 18px rgba(0,0,0,.34),
        0 0 28px rgba(159,230,26,.45),
        inset 0 2px 0 rgba(255,255,255,.42),
        inset 0 -4px 0 rgba(0,0,0,.14) !important;
}

.dg-pay-overlay-btn::after {
    content: "";
    position: absolute;
    inset: 7px 14px auto 14px;
    height: 30%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
    pointer-events: none;
}

/* Submit Suggestion */
.dg-overlay-btn.is-orange {
    border-color: #101010 !important;
    background: linear-gradient(180deg, rgba(255,184,43,1) 0%, rgba(255,141,27,1) 50%, rgba(232,94,9,1) 100%) !important;
    box-shadow: 0 6px 0 #101010,
        0 11px 18px rgba(0,0,0,.34),
        0 0 28px rgba(255,141,27,.42),
        inset 0 2px 0 rgba(255,255,255,.38),
        inset 0 -4px 0 rgba(0,0,0,.18) !important;
}

.dg-overlay-btn.is-orange::after {
    content: "";
    position: absolute;
    inset: 7px 13px auto 13px;
    height: 30%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
    pointer-events: none;
}

/* Hover/active states */
.dg-pay-overlay-btn:not([disabled]):hover,
.dg-overlay-btn.is-orange:hover {
    transform: translateY(-3px) scale(1.018) !important;
    filter: brightness(1.06) saturate(1.08) !important;
}

.dg-pay-overlay-btn:not([disabled]):hover {
    box-shadow: 0 9px 0 #101010,
        0 15px 24px rgba(0,0,0,.40),
        0 0 40px rgba(159,230,26,.68),
        inset 0 2px 0 rgba(255,255,255,.48),
        inset 0 -4px 0 rgba(0,0,0,.12) !important;
}

.dg-overlay-btn.is-orange:hover {
    box-shadow: 0 9px 0 #101010,
        0 15px 24px rgba(0,0,0,.40),
        0 0 40px rgba(255,141,27,.64),
        inset 0 2px 0 rgba(255,255,255,.44),
        inset 0 -4px 0 rgba(0,0,0,.16) !important;
}

.dg-pay-overlay-btn:not([disabled]):active,
.dg-overlay-btn.is-orange:active {
    transform: translateY(4px) scale(.995) !important;
    box-shadow: 0 2px 0 #101010,
        0 5px 10px rgba(0,0,0,.30),
        0 0 22px rgba(159,230,26,.30),
        inset 0 2px 0 rgba(255,255,255,.30),
        inset 0 -2px 0 rgba(0,0,0,.20) !important;
}

/* Disabled state still looks like a button, but clearly not ready yet. */
.dg-pay-overlay-btn[disabled] {
    color: rgba(16,16,16,.62) !important;
    cursor: not-allowed !important;
    opacity: .72 !important;
    filter: grayscale(.20) saturate(.75) !important;
    background: linear-gradient(180deg, rgba(224,232,190,1), rgba(151,171,110,1)) !important;
    box-shadow: 0 4px 0 #101010,
        0 8px 14px rgba(0,0,0,.26),
        inset 0 2px 0 rgba(255,255,255,.30),
        inset 0 -3px 0 rgba(0,0,0,.16) !important;
    transform: none !important;
}

@media (max-width: 760px) {
    .dg-pay-overlay-btn,
    .dg-overlay-btn.is-orange {
        font-size: clamp(13px, 3.2vw, 18px) !important;
        border-width: 2px !important;
        box-shadow: 0 4px 0 #101010,
            0 7px 12px rgba(0,0,0,.30),
            0 0 22px rgba(159,230,26,.34),
            inset 0 2px 0 rgba(255,255,255,.35),
            inset 0 -3px 0 rgba(0,0,0,.14) !important;
    }
}

/* ================================================================================
v8.11 — Updated Panel Images + Button Alignment
================================================================================
Uses the new panel artwork where the old button art was erased, then positions
real CSS buttons cleanly inside the empty spaces.
================================================================================ */
/* Hard reset the overlay buttons from the v8.10 experiment so no old padding,
   huge overlay, duplicate text, or disabled-glass effect survives. */
.dg-pay-overlay-btn,
.dg-pay-overlay-btn[disabled],
.dg-overlay-btn.is-orange,
.dg-overlay-btn.is-orange[disabled] {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border-style: solid !important;
    border-width: 3px !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-weight: 1000 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.dg-pay-overlay-btn::after,
.dg-overlay-btn.is-orange::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: 7px !important;
    height: 26% !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0)) !important;
}

/* Proceed To Payment — aligned to the clean blank area in the updated checkout panel. */
.dg-pay-overlay-btn,
.dg-pay-overlay-btn[disabled] {
    left: 51.2% !important;
    top: 70.4% !important;
    width: 38.8% !important;
    height: 6.9% !important;
    min-height: 50px !important;
    max-height: 78px !important;
    color: #101010 !important;
    font-size: clamp(15px, 1.45vw, 23px) !important;
    border-color: #101010 !important;
    background: linear-gradient(180deg, #eaff4f 0%, #b6f416 42%, #7dd715 100%) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.34) !important;
    box-shadow: 0 6px 0 #101010,
        0 12px 18px rgba(0,0,0,.42),
        0 0 24px rgba(159,230,26,.42),
        inset 0 2px 0 rgba(255,255,255,.42),
        inset 0 -4px 0 rgba(0,0,0,.16) !important;
}

/* Disabled still looks like a real button, just not ready yet. */
.dg-pay-overlay-btn[disabled] {
    cursor: not-allowed !important;
    filter: saturate(.82) brightness(.93) !important;
    color: rgba(16,16,16,.78) !important;
    background: linear-gradient(180deg, #dff58c 0%, #b5d85f 44%, #88b941 100%) !important;
    box-shadow: 0 5px 0 #101010,
        0 10px 15px rgba(0,0,0,.34),
        0 0 16px rgba(159,230,26,.22),
        inset 0 2px 0 rgba(255,255,255,.32),
        inset 0 -4px 0 rgba(0,0,0,.14) !important;
}

/* Submit Suggestion — button design kept, but moved up/left to sit cleanly inside the right panel. */
.dg-overlay-btn.is-orange {
    left: 62.6% !important;
    top: 76.4% !important;
    width: 27.8% !important;
    height: 5.8% !important;
    min-height: 48px !important;
    max-height: 70px !important;
    color: #101010 !important;
    font-size: clamp(14px, 1.38vw, 22px) !important;
    border-color: #101010 !important;
    background: linear-gradient(180deg, #ffc057 0%, #ff921f 48%, #e86608 100%) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
    box-shadow: 0 6px 0 #101010,
        0 12px 18px rgba(0,0,0,.42),
        0 0 26px rgba(255,141,27,.44),
        inset 0 2px 0 rgba(255,255,255,.38),
        inset 0 -4px 0 rgba(0,0,0,.18) !important;
}

.dg-pay-overlay-btn:not([disabled]):hover,
.dg-overlay-btn.is-orange:hover {
    transform: translateY(-3px) scale(1.014) !important;
    filter: brightness(1.06) saturate(1.06) !important;
}

.dg-pay-overlay-btn:not([disabled]):active,
.dg-overlay-btn.is-orange:active {
    transform: translateY(4px) scale(.995) !important;
    box-shadow: 0 2px 0 #101010,
        0 5px 10px rgba(0,0,0,.34),
        inset 0 2px 0 rgba(255,255,255,.28),
        inset 0 -2px 0 rgba(0,0,0,.20) !important;
}

@media (max-width: 760px) {
    .dg-pay-overlay-btn,
    .dg-pay-overlay-btn[disabled] {
        left: 50.4% !important;
        top: 70.2% !important;
        width: 40.1% !important;
        height: 6.8% !important;
        min-height: 38px !important;
        font-size: clamp(10px, 2.6vw, 15px) !important;
        border-width: 2px !important;
        box-shadow: 0 4px 0 #101010,
            0 8px 12px rgba(0,0,0,.34),
            0 0 18px rgba(159,230,26,.30),
            inset 0 2px 0 rgba(255,255,255,.32),
            inset 0 -3px 0 rgba(0,0,0,.14) !important;
    }

    .dg-overlay-btn.is-orange {
        left: 60.8% !important;
        top: 76.3% !important;
        width: 31.0% !important;
        height: 5.8% !important;
        min-height: 38px !important;
        font-size: clamp(10px, 2.6vw, 15px) !important;
        border-width: 2px !important;
        box-shadow: 0 4px 0 #101010,
            0 8px 12px rgba(0,0,0,.34),
            0 0 18px rgba(255,141,27,.30),
            inset 0 2px 0 rgba(255,255,255,.32),
            inset 0 -3px 0 rgba(0,0,0,.14) !important;
    }
}

/* ================================================================================
v9.2 — Home Intro Hero Positioning
================================================================================
Matches the approved desktop direction:
- intro text sits big on the left
- snack/DA Goodies graphic sits large on the center/right
- graphics overlap like a real promo banner
- tablet/mobile have their own safe responsive layout
================================================================================ */
.dg-hero {
    position: relative !important;
    display: block !important;
    width: min(100%, 1520px) !important;
    min-height: clamp(420px, 36.5vw, 585px) !important;
    margin: 0 auto clamp(10px, 2.2vw, 30px) !important;
    padding: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.asset-hero-text,
.dg-hero-text {
    position: absolute !important;
    left: clamp(-317px, 44vw, -83px);
    top: clamp(68px, 9.2vw, 31px);
    width: clamp(468px, 35.1vw, 720px);
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 112;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(159,230,26,.18)) !important;
}

@media (min-width: 1180px) {
    .asset-hero-text,
    .dg-hero-text {
    }
}

.asset-hero-snacks,
.dg-hero-snacks {
    position: absolute !important;
    right: clamp(35px, -4.1vw, -22px);
    top: clamp(-95px, -16.6vw, 74px);
    width: clamp(760px, 67.5vw, 1129px);
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0px !important;
    left: auto !important;
    bottom: auto !important;
    justify-self: auto !important;
    transform: none !important;
    z-index: 5 !important;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.48)) drop-shadow(0 0 22px rgba(159,230,26,.18)) !important;
}

.dg-hero-sparkle {
    z-index: 6 !important;
}

.dg-hero-sparkle.s1 {
    left: 15.5% !important;
    bottom: 15.5% !important;
}

.dg-hero-sparkle.s2 {
    right: 5.5% !important;
    top: 17% !important;
}

@media (max-width: 1180px) {
    .dg-hero {
        min-height: clamp(430px, 54vw, 610px) !important;
        width: min(100%, 1100px) !important;
        overflow: visible !important;
    }

    .asset-hero-text,
    .dg-hero-text {
        left: clamp(-48px, 12vw, -33px);
        top: clamp(8px, 42vw, -44px);
        width: clamp(410px, 54vw, 610px) !important;
    }

    .asset-hero-snacks,
    .dg-hero-snacks {
        right: clamp(-29px, 12vw, -148px);
        top: clamp(-50px, -30vw, 175px);
        width: clamp(565px, 70vw, 820px) !important;
        left: 1px;
        margin-left: 32px;
    }
}

@media (max-width: 760px) {
    .dg-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 22px 10px 0 !important;
        margin: 0 auto 12px !important;
        overflow: hidden !important;
    }

    .asset-hero-text,
    .dg-hero-text {
        position: relative !important;
        left: -23px !important;
        top: -23px !important;
        right: -23px !important;
        bottom: -23px !important;
        width: min(94vw, 560px) !important;
        max-width: 100% !important;
        margin: 0 auto -34px !important;
        z-index: 5 !important;
    }

    .asset-hero-snacks,
    .dg-hero-snacks {
        position: relative !important;
        left: -37px !important;
        top: -37px !important;
        right: -37px !important;
        bottom: -37px !important;
        width: min(108vw, 620px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        z-index: 4 !important;
    }

    .dg-hero-sparkle.s1 {
        left: 11% !important;
        bottom: 18% !important;
    }

    .dg-hero-sparkle.s2 {
        right: 9% !important;
        top: 18% !important;
    }
}

@media (max-width: 440px) {
    .dg-hero {
        padding-top: 18px !important;
        margin-bottom: 8px !important;
    }

    .asset-hero-text,
    .dg-hero-text {
        width: min(96vw, 420px) !important;
        margin-bottom: -24px !important;
        max-width: -1px;
    }

    .asset-hero-snacks,
    .dg-hero-snacks {
        width: min(112vw, 470px) !important;
    }
}

/* ================================================================================
v9.3 — Mobile Checkout + Suggestion Overlay Fix
================================================================================
On small screens the image panels shrink, so desktop-sized overlay placeholders
and 3D buttons become too large. These mobile-only rules scale the live HTML
inputs/buttons down to the panel artwork so they stay aligned and usable.
================================================================================ */
@media (max-width: 760px) {
    .dg-checkout-panel,
    .asset-checkout-panel,
    .dg-suggest-panel,
    .asset-suggest-panel {
        overflow: visible !important;
    }

    .dg-checkout-overlay,
    .dg-suggest-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 5 !important;
        overflow: hidden !important;
    }

    .dg-checkout-overlay .dg-overlay-input,
    .dg-checkout-overlay .dg-overlay-textarea,
    .dg-suggest-overlay .dg-overlay-input,
    .dg-suggest-overlay .dg-overlay-textarea {
        box-sizing: border-box !important;
        min-height: 0 !important;
        border-radius: 5px !important;
        line-height: 1.05 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow: none !important;
    }

    /* Checkout fields: shrink placeholders so they no longer crowd the panel. */
    .dg-checkout-overlay .dg-overlay-input {
        font-size: clamp(6px, 1.95vw, 9px) !important;
        padding: 0 14px 0 24px !important;
    }

    .dg-checkout-notes {
        font-size: clamp(6px, 1.85vw, 8.5px) !important;
        padding: 4px 8px 4px 24px !important;
        line-height: 1.1 !important;
        resize: none !important;
    }

    .dg-checkout-name,
    .dg-checkout-dropoff,
    .dg-checkout-phone {
        height: var(--checkout-field-height) !important;
    }

    .dg-checkout-notes {
        height: var(--checkout-notes-height) !important;
    }

    /* Proceed button: no big minimum height on mobile. */
    .dg-pay-overlay-btn,
    .dg-pay-overlay-btn[disabled] {
        left: 51.1% !important;
        top: 70.55% !important;
        width: 38.9% !important;
        height: 6.25% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 5px !important;
        border-width: 1.5px !important;
        border-radius: 999px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
        line-height: 1 !important;
        box-shadow: 0 2px 0 #101010,
            0 4px 8px rgba(0,0,0,.26),
            0 0 12px rgba(159,230,26,.25),
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -2px 0 rgba(0,0,0,.14) !important;
    }

    .dg-pay-overlay-btn::after {
        left: 8px !important;
        right: 8px !important;
        top: 3px !important;
        height: 24% !important;
    }

    /* Suggest fields: mobile overlay text must stay inside the left form area. */
    .dg-suggest-overlay .dg-overlay-input {
        font-size: clamp(6px, 1.95vw, 9px) !important;
        padding: 0 7px !important;
        min-height: 0 !important;
        color: #ffffff !important;
    }

    .dg-suggest-overlay .dg-overlay-input::placeholder {
        color: rgba(255,255,255,.52) !important;
        opacity: 1 !important;
        font-size: inherit !important;
    }

    .dg-suggest-reason {
        font-size: clamp(6px, 1.85vw, 8.5px) !important;
        padding: 4px 7px !important;
        line-height: 1.1 !important;
        min-height: 0 !important;
        height: clamp(20px, 8vw, 34px) !important;
        resize: none !important;
    }

    .dg-suggest-snack,
    .dg-suggest-name,
    .dg-suggest-contact {
        height: clamp(14px, 4.8vw, 24px) !important;
    }

    /* Submit Suggestion: keep the button inside the panel, not hanging below it. */
    .dg-overlay-btn.is-orange {
        left: 62.2% !important;
        top: 77.55% !important;
        width: 29.3% !important;
        height: 5.35% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 5px !important;
        border-width: 1.5px !important;
        border-radius: 999px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
        line-height: 1 !important;
        box-shadow: 0 2px 0 #101010,
            0 4px 8px rgba(0,0,0,.28),
            0 0 12px rgba(255,141,27,.28),
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -2px 0 rgba(0,0,0,.16) !important;
    }

    .dg-overlay-btn.is-orange::after {
        left: 8px !important;
        right: 8px !important;
        top: 3px !important;
        height: 24% !important;
    }

    .dg-pay-overlay-btn:hover,
    .dg-overlay-btn.is-orange:hover {
        transform: translateY(-1px) scale(1.01) !important;
    }

    .dg-pay-overlay-btn:active,
    .dg-overlay-btn.is-orange:active {
        transform: translateY(1px) scale(.995) !important;
        box-shadow: 0 1px 0 #101010,
            0 2px 5px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 -1px 0 rgba(0,0,0,.18) !important;
    }
}

@media (max-width: 440px) {
    .dg-checkout-overlay .dg-overlay-input,
    .dg-suggest-overlay .dg-overlay-input {
        font-size: clamp(5.6px, 1.9vw, 8px) !important;
    }

    .dg-checkout-notes,
    .dg-suggest-reason {
        font-size: clamp(5.4px, 1.8vw, 7.5px) !important;
    }

    .dg-pay-overlay-btn,
    .dg-pay-overlay-btn[disabled] {
        font-size: clamp(5.4px, 1.8vw, 7.6px) !important;
        top: 70.75% !important;
    }

    .dg-overlay-btn.is-orange {
        font-size: clamp(5.4px, 1.8vw, 7.6px) !important;
        top: 77.75% !important;
    }
}

/* ================================================================================
v9.4 — Aligned Main Page Form Fields
================================================================================
The checkout and suggest-goodie panels are image panels with live HTML fields
overlaid on top. These rules align the live input/textarea/button hit areas to
the actual panel artwork so placeholders sit straight inside the boxes.
================================================================================ */
/* Checkout panel measured from updated order-checkout-panel.png: 1448 x 1086 */
.dg-checkout-overlay .dg-overlay-input,
.dg-checkout-overlay .dg-overlay-textarea {
    left: 50.83% !important;
    width: 40.75% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    transform: none !important;
}

.dg-checkout-name {
    top: 26.80% !important;
    height: 6.18% !important;
}

.dg-checkout-dropoff {
    top: 34.35% !important;
    height: 6.18% !important;
}

.dg-checkout-phone {
    top: 41.90% !important;
    height: 6.18% !important;
}

.dg-checkout-notes {
    top: 49.45% !important;
    height: 14.55% !important;
    min-height: 0 !important;
    resize: none !important;
    overflow: hidden !important;
}

/* Desktop/tablet checkout placeholder alignment */
.dg-checkout-overlay .dg-overlay-input {
    padding: 0 clamp(24px, 3vw, 58px) 0 clamp(34px, 3.8vw, 62px) !important;
    font-size: clamp(11px, 1.05vw, 16px) !important;
}

.dg-checkout-notes {
    padding: clamp(8px, 1.2vw, 16px) clamp(22px, 2.2vw, 34px) clamp(8px, 1.2vw, 16px) clamp(34px, 3.8vw, 62px) !important;
    font-size: clamp(11px, 1.02vw, 15px) !important;
}

/* Suggest panel measured from updated suggest-goodie-panel.png: 1402 x 1122 */
.dg-suggest-overlay .dg-overlay-input,
.dg-suggest-overlay .dg-overlay-textarea {
    left: 15.83% !important;
    width: 41.30% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 9px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    transform: none !important;
}

.dg-suggest-snack {
    top: 44.56% !important;
    height: 4.95% !important;
}

.dg-suggest-reason {
    top: 55.08% !important;
    height: 8.73% !important;
    min-height: 0 !important;
    resize: none !important;
    overflow: hidden !important;
}

.dg-suggest-name {
    top: 68.72% !important;
    height: 5.00% !important;
}

.dg-suggest-contact {
    top: 78.70% !important;
    height: 4.95% !important;
}

/* Desktop/tablet suggest placeholder alignment */
.dg-suggest-overlay .dg-overlay-input {
    padding: 0 clamp(12px, 1.4vw, 22px) !important;
    font-size: clamp(11px, 1vw, 15px) !important;
}

.dg-suggest-reason {
    padding: clamp(8px, 1.15vw, 15px) clamp(12px, 1.4vw, 22px) !important;
    font-size: clamp(11px, .98vw, 14px) !important;
}

/* Keep the live buttons straight in the blank panel button areas. */
.dg-pay-overlay-btn,
.dg-pay-overlay-btn[disabled] {
    left: 51.15% !important;
    top: 70.60% !important;
    width: 38.85% !important;
    height: 6.15% !important;
    margin: 0 !important;
    transform: none;
}

.dg-overlay-btn.is-orange {
    left: 62.20% !important;
    top: 77.55% !important;
    width: 29.30% !important;
    height: 5.35% !important;
    margin: 0 !important;
    transform: none;
}

/* Mobile: same measured alignment, smaller readable placeholder text. */
@media (max-width: 760px) {
    .dg-checkout-overlay .dg-overlay-input {
        padding: 0 14px 0 24px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
        line-height: 1.05 !important;
        border-radius: 5px !important;
    }

    .dg-checkout-notes {
        padding: 4px 8px 4px 24px !important;
        font-size: clamp(6px, 1.85vw, 8.5px) !important;
        line-height: 1.1 !important;
        border-radius: 5px !important;
    }

    .dg-suggest-overlay .dg-overlay-input {
        padding: 0 7px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
        line-height: 1.05 !important;
        border-radius: 5px !important;
    }

    .dg-suggest-reason {
        padding: 4px 7px !important;
        font-size: clamp(6px, 1.85vw, 8.5px) !important;
        line-height: 1.1 !important;
        border-radius: 5px !important;
    }

    .dg-pay-overlay-btn,
    .dg-pay-overlay-btn[disabled] {
        left: 51.15% !important;
        top: 70.60% !important;
        width: 38.85% !important;
        height: 6.15% !important;
        min-height: 0 !important;
        padding: 0 5px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
    }

    .dg-overlay-btn.is-orange {
        left: 62.20% !important;
        top: 77.55% !important;
        width: 29.30% !important;
        height: 5.35% !important;
        min-height: 0 !important;
        padding: 0 5px !important;
        font-size: clamp(6px, 1.95vw, 9px) !important;
    }
}

@media (max-width: 440px) {
    .dg-checkout-overlay .dg-overlay-input,
    .dg-suggest-overlay .dg-overlay-input {
        font-size: clamp(5.6px, 1.9vw, 8px) !important;
    }

    .dg-checkout-notes,
    .dg-suggest-reason {
        font-size: clamp(5.4px, 1.8vw, 7.5px) !important;
    }

    .dg-pay-overlay-btn,
    .dg-pay-overlay-btn[disabled],
    .dg-overlay-btn.is-orange {
        font-size: clamp(5.4px, 1.8vw, 7.6px) !important;
    }
}

/* ================================================================================
v9.5 — Square Checkout Button State
================================================================================ */
.dg-pay-overlay-btn.is-busy,
.dg-pay-overlay-btn.is-busy:hover {
    cursor: wait !important;
    filter: saturate(.85) brightness(.92) !important;
    transform: none !important;
}