:root {
    /* =========================================================
     EDITOR GLASS CONTROLS — SAFE TO EDIT
     Raise/lower these values to change the frosted-glass look
     across the main panels, header wordmark, legal dialogs,
     trending section and How It Works.
     Suggested ranges:
       --glass-bg-alpha:     .18 light  → .68 heavy
       --glass-blur:         6px light  → 28px heavy
       --glass-saturation:   1.00       → 1.35
       --glass-border-alpha: .12        → .45
     ========================================================= */
    --glass-bg-alpha: .42;
    --glass-bg-alpha-soft: -2.23;
    --glass-blur: 6px;
    --glass-saturation: 2.4;
    --glass-border-alpha: 3;
    --glass-highlight-alpha: .08;
    --panel-line: rgba(56, 138, 220, 0.72);
    --panel-line-soft: #a657ff;
    --text: #f7fbff;
    --muted: #a8b5c7;
    --cyan: #2df3ff;
    --purple: #a657ff;
    --pink: #ed4dff;
    --orange: #ff8b11;
    --editor-max: 1580px;
    --parallax-x: 0px;
    --parallax-y: 0px;
    --parallax-bx: 0px;
    --parallax-by: 0px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Arial,Helvetica,sans-serif;
    background: transparent;
    overflow-x: hidden;
}

button,
input,
textarea {
    font: inherit;
}

button {
    touch-action: manipulation;
}

.site-bg,
.site-glow {
    position: fixed;
    inset: -6%;
    pointer-events: none;
    will-change: transform,background-position,opacity,filter;
}

.site-bg {
    background-image: linear-gradient(rgba(2,7,18,.15),rgba(2,7,18,.24)),
    url('../images/backgrounds/desktop.png');
    background-size: contain;
    background-position: calc(50% + var(--parallax-bx)) calc(50% + var(--parallax-by));
    background-repeat: no-repeat;
    background-color: #15100f;
    filter: saturate(1.04) brightness(.98);
    transform: translate3d(calc(var(--parallax-x) * .34),calc(var(--parallax-y) * .34),0) scale(1.018);
    animation: backgroundPulse 8s ease-in-out infinite alternate;
}

.site-bg::before,
.site-bg::after,
.site-glow::before,
.site-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-bg::before {
    background: radial-gradient(circle at 18% 20%,rgba(255,123,75,.08),transparent 18%),
    radial-gradient(circle at 70% 16%,rgba(75,220,255,.07),transparent 18%),
    radial-gradient(circle at 65% 72%,rgba(255,76,205,.08),transparent 22%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12));
    mix-blend-mode: screen;
    opacity: .95;
}

.site-bg::after {
    background: linear-gradient(115deg,transparent 0 30%,rgba(255,255,255,.04) 39%,transparent 48%,transparent 100%);
    mix-blend-mode: screen;
    opacity: .45;
    animation: ambientSweep 12s ease-in-out infinite alternate;
}

.site-glow {
    background: radial-gradient(circle at 14% 18%,rgba(255,106,214,.12),transparent 20%),
    radial-gradient(circle at 78% 18%,rgba(78,221,255,.12),transparent 22%),
    radial-gradient(circle at 66% 82%,rgba(255,163,66,.10),transparent 24%),
    radial-gradient(circle at 34% 66%,rgba(49,235,255,.08),transparent 25%);
    transform: translate3d(calc(var(--parallax-x) * -.34),calc(var(--parallax-y) * -.34),0) scale(1.03);
    animation: glowPulse 10s ease-in-out infinite alternate;
}

.site-glow::before {
    background: linear-gradient(90deg,transparent 0 7%,rgba(51,239,255,.09) 10%,transparent 13%),
    linear-gradient(90deg,transparent 0 84%,rgba(236,61,255,.08) 88%,transparent 92%),
    linear-gradient(180deg,transparent 0 70%,rgba(255,149,74,.07) 77%,transparent 84%);
    mix-blend-mode: screen;
    opacity: .7;
    animation: lightSweep 9s ease-in-out infinite alternate;
}

.site-glow::after {
    background: radial-gradient(circle at 10% 14%,rgba(255,149,74,.95) 0 1.2px,transparent 3px) 0 0/180px 180px,
    radial-gradient(circle at 84% 19%,rgba(245,72,255,.82) 0 1px,transparent 3px) 0 0/220px 220px,
    radial-gradient(circle at 62% 78%,rgba(80,245,255,.86) 0 1px,transparent 3px) 0 0/200px 200px;
    opacity: .22;
    filter: blur(.25px);
    mix-blend-mode: screen;
    animation: sparkleDrift 14s ease-in-out infinite alternate;
}

@keyframes backgroundPulse{
    0%,
    100% {
        filter: saturate(1.02) brightness(.94);
    }

    50% {
        filter: saturate(1.1) brightness(1);
    }
}

@keyframes ambientSweep{
    from {
        transform: translate3d(-2.5%,0,0) scale(1);
        opacity: .28;
    }

    to {
        transform: translate3d(2.8%,-.5%,0) scale(1.03);
        opacity: .5;
    }
}

@keyframes glowPulse{
    from {
        opacity: .72;
    }

    to {
        opacity: 1;
    }
}

@keyframes lightSweep{
    from {
        transform: translate3d(-3.5%,0,0) scale(1);
        opacity: .48;
    }

    50% {
        opacity: .85;
    }

    to {
        transform: translate3d(3.5%,0,0) scale(1.03);
        opacity: .62;
    }
}

@keyframes sparkleDrift{
    from {
        transform: translate3d(-1.2%,.5%,0);
        opacity: .14;
    }

    to {
        transform: translate3d(1.5%,-.8%,0);
        opacity: .3;
    }
}

.site-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px 22px 36px;
}

.top-utility-nav {
    position: absolute;
    z-index: 8;
    top: 22px;
    left: clamp(18px,4vw,70px);
    right: clamp(18px,4vw,70px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}

.utility-image-btn {
    position: relative;
    pointer-events: auto;
    border: 1px solid rgba(218,235,248,.24);
    border-radius: 18px;
    padding: 4px;
    background: linear-gradient(135deg,rgba(27,39,53,.36),rgba(7,16,29,.20));
    box-shadow: 0 12px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.075),0 0 18px rgba(47,233,255,.045);
    backdrop-filter: blur(15px) saturate(1.18);
    -webkit-backdrop-filter: blur(15px) saturate(1.18);
    cursor: pointer;
    line-height: 0;
    filter: drop-shadow(0 0 10px rgba(44,238,255,.12));
    transition: transform .18s ease,filter .18s ease,background .18s ease;
}

.utility-image-btn:hover {
    transform: translateY(-2px) scale(1.025);
    filter: drop-shadow(0 0 14px rgba(44,238,255,.28));
}

.utility-image-btn img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.cart-utility-btn {
    width: clamp(155px,17vw,245px);
}

.track-utility-btn {
    width: clamp(185px,20vw,285px);
}

.cart-count {
    position: absolute;
    right: 4%;
    top: 8%;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(45,243,255,.9);
    border-radius: 999px;
    background: rgba(3,12,24,.82);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 10px rgba(45,243,255,.35);
}

.utility-dialog {
    width: min(620px,calc(100vw - 28px));
    max-height: min(78vh,720px);
    padding: 0;
    border: 1px solid rgba(210,230,244,.30);
    border-radius: 18px;
    color: #f7fbff;
    background: linear-gradient(135deg,rgba(22,33,46,.62),rgba(7,15,27,.44));
    box-shadow: 0 24px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: blur(20px) saturate(1.22);
    -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

.utility-dialog::backdrop {
    background: rgba(1,5,15,.52);
    backdrop-filter: blur(5px);
}

.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(89,134,170,.28);
}

.dialog-head h2 {
    margin: 1px 0 0;
    font-size: 24px;
    line-height: 1;
}

.dialog-kicker {
    color: #43f2ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.dialog-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(126,161,191,.45);
    border-radius: 9px;
    color: #fff;
    background: rgba(8,22,39,.52);
    font-size: 22px;
    cursor: pointer;
}

.cart-dialog-body {
    display: grid;
    gap: 9px;
    max-height: 410px;
    overflow: auto;
    padding: 14px 20px;
}

.cart-empty {
    padding: 28px 10px;
    text-align: center;
    color: #a9b8c9;
    font-size: 13px;
}

.cart-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(210,230,244,.18);
    border-radius: 11px;
    background: rgba(24,36,49,.26);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cart-row strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.cart-row span {
    color: #9fb0c2;
    font-size: 11px;
    line-height: 1.35;
}

.cart-row-total {
    color: #eaffff!important;
    font-size: 13px!important;
    font-weight: 900;
}

.dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(89,134,170,.28);
}

.dialog-primary,
.dialog-secondary {
    min-height: 42px;
    border-radius: 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.dialog-primary {
    border: 1px solid rgba(49,239,255,.85);
    background: linear-gradient(90deg,rgba(22,104,148,.82),rgba(70,65,155,.84),rgba(137,49,146,.82));
    box-shadow: 0 0 10px rgba(45,243,255,.14);
}

.dialog-secondary {
    border: 1px solid rgba(108,133,162,.45);
    background: rgba(9,21,38,.46);
}

.track-order-form {
    display: grid;
    gap: 13px;
    padding: 18px 20px 22px;
}

.track-order-form label {
    display: grid;
    gap: 6px;
    color: #b9c6d4;
    font-size: 11px;
    font-weight: 800;
}

.track-order-form input {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 1px solid #4d6279;
    border-radius: 9px;
    outline: none;
    color: #fff;
    background: rgba(4,13,25,.65);
}

.track-order-form input:focus {
    border-color: #34efff;
    box-shadow: 0 0 0 2px rgba(52,239,255,.07);
}

.track-submit {
    margin-top: 3px;
}

.tracking-status {
    min-height: 18px;
    margin: 0;
    color: #9fadc0;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.customer-tracking-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(45,232,255,.68);
    border-radius: 999px;
    color: #67efff;
    background: rgba(5,37,55,.42);
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: .04em;
}

.customer-tracking-link:hover,
.customer-tracking-link:focus-visible {
    border-color: #d85cff;
    color: #fff;
    box-shadow: 0 0 12px rgba(45,232,255,.12);
}

.brand-header {
    position: relative;
    z-index: 6;
    width: min(1360px,98vw);
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
}

.brand-logo {
    width: min(245px,28vw);
    height: 118px;
    object-fit: contain;
    margin-bottom: -10px;
    filter: drop-shadow(0 0 12px rgba(42,224,255,.26));
}

.brand-wordmark-text {
    position: relative;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(760px,82vw);
    margin-top: 0;
    padding: 0 16px 10px;
    filter: drop-shadow(0 5px 13px rgba(0,0,0,.34));
}

.brand-title {
    font-family: "Arial Black",Impact,Arial,sans-serif;
    font-size: clamp(46px,5vw,82px);
    line-height: .9;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .035em;
    color: #fff;
    background: linear-gradient(180deg,#ffffff 0%,#f7fdff 42%,#8cecff 72%,#d9faff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 13px rgba(55,229,255,.28);
    white-space: nowrap;
}

.brand-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg,transparent,#2ef2ff 18%,#8edcff 50%,#c252ff 82%,transparent);
    box-shadow: 0 0 12px rgba(46,242,255,.42);
}

.brand-subtitle {
    margin-top: 9px;
    font-size: clamp(15px,1.45vw,23px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
    color: #f8fbff;
    text-shadow: 0 2px 7px rgba(0,0,0,.72),0 0 7px rgba(62,226,255,.15);
    white-space: nowrap;
}

.brand-wordmark {
    display: none;
}

.creator-row {
    width: min(var(--editor-max),100%);
    margin: 0 auto 38px;
    display: grid;
    grid-template-columns: minmax(340px,1fr) minmax(690px,1.75fr) minmax(320px,.95fr);
    gap: 22px;
    align-items: stretch;
    min-height: 535px;
}

.panel-shell {
    border: 1px solid rgba(220,235,246,.34);
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(24,35,49,.48),rgba(8,17,29,.29));
    box-shadow: 0 20px 52px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 42px rgba(88,193,255,.028);
    backdrop-filter: blur(18px) saturate(1.20);
    -webkit-backdrop-filter: blur(18px) saturate(1.20);
}

.panel-shell h2 {
    margin: 0 0 16px;
    text-align: center;
    font-size: 29px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: .01em;

    /* text-shadow: 0 3px 10px rgba(101, 222, 255, 0.86) */
    color: #ffffff;
    font-family: 'Carter One', cursive;
    text-indent: 1px;
    box-shadow: 0px 3px 15px 9px #0098ff;
    border-radius: 20px;
}

.design-studio {
    padding: 24px;
}

.vision-box,
.upload-box {
    padding: 18px;
    border-radius: 12px;
    background: linear-gradient(135deg,rgba(27,39,52,.34),rgba(9,18,31,.20));
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.vision-box {
    border: 1px solid rgba(45,239,255,.54);
}

.upload-box {
    border: 1px solid rgba(220,72,255,.54);
}

.ai-edit-source-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(64,231,255,.48);
    border-radius: 10px;
    background: linear-gradient(135deg,rgba(10,28,44,.82),rgba(30,14,50,.72));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(40,194,255,.08);
}

.ai-edit-source-card[hidden] {
    display: none !important;
}

.ai-edit-source-copy {
    min-width: 0;
}

.ai-edit-source-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #dffcff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ai-edit-source-copy p {
    margin: 0;
    color: #c4d4e3;
    font-size: 11px;
    line-height: 1.35;
}

.ai-edit-source-clear {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(224,109,255,.68);
    border-radius: 999px;
    background: rgba(17,10,27,.78);
    color: #f3e8ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
}

.ai-edit-source-clear:hover,
.ai-edit-source-clear:focus-visible {
    outline: none;
    filter: brightness(1.08);
    box-shadow: 0 0 12px rgba(224,109,255,.20);
}

.vision-box h3,
.upload-box h3 {
    margin: 0 0 9px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
}

#designPrompt {
    width: 100%;
    min-height: 132px;
    padding: 10px 11px;
    resize: vertical;
    color: #fff;
    background: rgba(4,13,24,.68);
    border: 1px solid #526379;
    border-radius: 8px;
    outline: none;
    line-height: 1.4;
    font-size: 13px;
}

#designPrompt:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(45,243,255,.08);
}

#designPrompt::placeholder {
    color: #9ba9bc;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.design-style-presets {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(210,230,244,.17);
}

.design-style-presets-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.design-style-presets-heading strong {
    color: #f3fdff;
    font-size: 10px;
    letter-spacing: .08em;
}

.design-style-presets-heading span,
.preset-help,
.preset-selection-status,
.design-action-help {
    color: #9fb0c1;
    font-size: 11px;
    line-height: 1.45;
}

.design-style-presets-heading span {
    font-size: 8px;
    text-align: right;
}

.preset-help,
.preset-selection-status,
.design-action-help {
    margin: 0;
}

.style-preset-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 10px 0 8px;
}

.style-preset-btn {
    display: block;
    width: 100%;
    padding: 4px;
    border: 1px solid rgba(90,159,201,.35);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(18,38,58,.16),rgba(8,17,30,.08));
    cursor: pointer;
    transition: .16s ease;
}

.style-preset-btn img {
    display: block;
    width: 100%;
    height: auto;
}

.style-preset-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(97,228,255,.75);
    box-shadow: 0 0 12px rgba(46,242,255,.12);
}

.style-preset-btn.selected {
    border-color: #2ef2ff;
    box-shadow: 0 0 14px rgba(46,242,255,.20), inset 0 0 0 1px rgba(46,242,255,.14);
    background: linear-gradient(145deg,rgba(18,44,68,.22),rgba(8,17,30,.12));
}

.style-preset-btn:focus-visible {
    outline: 2px solid rgba(76,233,255,.95);
    outline-offset: 3px;
}

.design-action-stack {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.design-action-help {
    text-align: center;
}

.or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    color: #e9fdff;
    font-size: 12px;
    font-weight: 800;
}

.or-divider:before,
.or-divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg,transparent,rgba(116,144,174,.4));
}

.or-divider:after {
    background: linear-gradient(90deg,rgba(116,144,174,.4),transparent);
}

.neon-btn {
    position: relative;
    width: 100%;
    min-height: 52px;
    margin-top: 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: .15s ease;
}

.neon-cyan {
    border: 1px solid rgba(61,240,255,.96);
    background: linear-gradient(90deg,rgba(22,88,125,.88),rgba(48,75,130,.88));
    box-shadow: 0 0 7px rgba(38,239,255,.78),inset 0 0 12px rgba(38,239,255,.09);
}

.neon-purple {
    border: 1px solid rgba(130,104,255,.92);
    background: linear-gradient(90deg,rgba(38,82,127,.88),rgba(97,50,137,.9));
    box-shadow: -2px 0 8px rgba(54,215,255,.65),2px 0 10px rgba(225,62,255,.5);
}

.neon-btn:hover,
.checkout-btn:hover,
.trend-customize-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.inline-status,
.checkout-note {
    min-height: 16px;
    margin: 8px 0 0;
    text-align: center;
    color: #b8c8d8;
    font-size: 11px;
    line-height: 1.35;
}

.realtime-viewer {
    padding: 22px;
}

.viewer-stage {
    position: relative;
    height: 405px;
    overflow: hidden;
    border-radius: 14px;
    background: #03101d;
    box-shadow: inset 0 0 32px rgba(46,235,255,.055);
    isolation: isolate;
}

/* Lightweight animated fitting-room environment behind the shirt.
   Uses responsive still images + CSS motion only: no video, no autoplay, no large runtime downloads. */
.viewer-stage {
    --viewer-bg-image: url('../images/viewer/realtime-background-desktop.webp');
}

/* SAFE TO MOVE: Real-Time Viewer measurements control. DO NOT RENAME IDS / CLASSES. */
.viewer-measurements-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(94,224,255,.66);
    border-radius: 999px;
    background: rgba(3,12,26,.58);
    color: #eafcff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 0 14px rgba(45,243,255,.14), inset 0 0 12px rgba(255,255,255,.035);
}

.viewer-measurements-btn:hover,
.viewer-measurements-btn:focus-visible,
.viewer-measurements-btn.is-open {
    border-color: rgba(224,109,255,.82);
    box-shadow: 0 0 16px rgba(226,88,255,.20), 0 0 12px rgba(45,243,255,.12);
    outline: none;
}

.viewer-measurements-overlay {
    position: absolute;
    inset: 43px 11px 11px;
    z-index: 9;
    overflow: auto;
    border-radius: 15px;
}

.viewer-measurements-overlay[hidden] {
    display: none !important;
}

.measurements-glass-card {
    min-height: 100%;
    padding: 18px;
    border: 1px solid rgba(143,219,255,.34);
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(8,20,42,.73),rgba(21,10,43,.68));
    color: #f3fbff;
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: 0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 28px rgba(80,194,255,.055);
}

.measurements-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.measurements-kicker {
    display: block;
    margin-bottom: 3px;
    color: #69eaff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.measurements-header h3 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.1;
}

.measurements-header p {
    margin: 4px 0 0;
    color: #b9c7d6;
    font-size: 10px;
}

.measurements-close {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.measurements-close:hover,
.measurements-close:focus-visible {
    border-color: rgba(98,232,255,.65);
    outline: none;
}

.measurements-table-wrap {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(2,8,18,.28);
}

.measurements-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #effaff;
    font-size: 11px;
}

.measurements-table th,
.measurements-table td {
    padding: 8px 9px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    text-align: right;
}

.measurements-table thead th {
    color: #9edfff;
    background: rgba(25,117,173,.12);
    font-size: 8px;
    letter-spacing: .08em;
}

.measurements-table th:first-child,
.measurements-table td:first-child {
    width: 23%;
    text-align: left;
}

.measurements-table tbody th {
    color: #fff;
    font-weight: 900;
}

.measurements-table tbody tr:last-child th,
.measurements-table tbody tr:last-child td {
    border-bottom: 0;
}

.viewer-stage::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: 0;
    background: linear-gradient(rgba(2,11,21,.06),rgba(2,11,21,.18)),
        var(--viewer-bg-image) center center/cover no-repeat;
    transform: scale(1.04) translate3d(0,0,0);
    will-change: auto;
}

.viewer-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%,rgba(25,150,255,.10),transparent 35%),
        linear-gradient(110deg,transparent 30%,rgba(54,170,255,.045) 48%,transparent 66%);
    background-size: 100% 100%,180% 100%;
    animation: daViewerGlowPulse 7s ease-in-out infinite alternate, daViewerLightSweep 11s ease-in-out infinite alternate;
}

.viewer-light-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.viewer-light-particles span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(94,202,255,.88);
    box-shadow: 0 0 8px rgba(49,167,255,.72),0 0 18px rgba(36,120,255,.35);
    opacity: .25;
    animation: daViewerParticleRise var(--dur) linear infinite;
    animation-delay: var(--delay);
}

.viewer-light-particles span:nth-child(3n) {
    background: rgba(169,225,255,.92);
}

.viewer-light-particles span:nth-child(4n) {
    opacity: .18;
}

@keyframes daViewerGlowPulse {
    from {
        opacity: .62;
    }

    to {
        opacity: 1;
    }
}

@keyframes daViewerLightSweep {
    from {
        background-position: center center,-20% center;
    }

    to {
        background-position: center center,120% center;
    }
}

@keyframes daViewerParticleRise {
    0% {
        transform: translate3d(0,28px,0) scale(.75);
        opacity: 0;
    }

    12% {
        opacity: .24;
    }

    62% {
        opacity: .52;
    }

    100% {
        transform: translate3d(var(--drift),-150px,0) scale(1.15);
        opacity: 0;
    }
}

@media (max-width:980px){
    .viewer-stage {
        --viewer-bg-image: url('../images/viewer/realtime-background-tablet.webp');
    }
}

@media (max-width:620px){
    .viewer-stage {
        --viewer-bg-image: url('../images/viewer/realtime-background-mobile.webp');
    }

    .viewer-light-particles span:nth-child(n+9) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce){
    .viewer-stage::before,
    .viewer-stage::after,
    .viewer-light-particles span {
        animation: none!important;
    }

    .viewer-light-particles {
        display: none;
    }
}

.viewer-shirt-wrap {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 13px;
    width: 350px;
    height: 384px;
    transform: translateX(-50%) scale(var(--viewer-shirt-scale,1));
    transform-origin: top center;
}

.viewer-shirt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;

    /* EDITOR BACKEND GLOW CONTROL:
       Edit the inline variables on .viewer-shirt-wrap in index.html.
       --shirt-glow-color accepts any CSS color, e.g. #5ecaff, #8b5cff, white.
       --shirt-glow-brightness accepts 0% to 100%. 0% disables the glow. */
    filter: drop-shadow(0 18px 23px rgba(0,0,0,.36))
        drop-shadow(0 0 10px color-mix(in srgb, var(--shirt-glow-color, #5ecaff) var(--shirt-glow-brightness, 65%), transparent))
        drop-shadow(0 0 22px color-mix(in srgb, var(--shirt-glow-color, #5ecaff) calc(var(--shirt-glow-brightness, 65%) * .58), transparent))
        drop-shadow(0 0 36px color-mix(in srgb, var(--shirt-glow-color, #5ecaff) calc(var(--shirt-glow-brightness, 65%) * .30), transparent));
    transition: filter .25s ease;
}

.art-zone {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 48%;
    width: 36%;
    height: 42%;
    transform: translate(-50%,-50%);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.viewer-artwork {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.viewer-placeholder {
    width: 86%;
    padding: 8px 6px;
    border: 1px dashed rgba(45,243,255,.85);
    border-radius: 6px;
    background: rgba(2,10,18,.7);
    color: #eaffff;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 0 12px rgba(45,243,255,.11);
}

.template-chip {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 5px 8px;
    border: 1px solid rgba(45,243,255,.6);
    border-radius: 999px;
    background: rgba(1,8,18,.78);
    color: #d8fdff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.viewer-controls {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 22px;
    padding: 14px 42px 0;
}

.control-label {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
    color: #e6eef7;
}

.choice-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.choice-btn {
    height: 38px;
    min-width: 47px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0, 194, 255, 0.39);
    border: 1px solid rgba(49, 49, 49, 0.19);
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
}

.choice-btn.selected {
    border-color: var(--cyan);
    box-shadow: 0 0 6px  rgba(45,243,255,.72);
    font-weight: bold;
}

.choice-black {
    background: #000000;
    color: #ffffff;
    border-color: #4f5560;
}

.choice-white {
    background: #f7f6f2;
    color: #222;
}

.choice-navy {
    background: #132744;
}

.choice-grey {
    background: #727984;
}

.choice-blue {
    background: #0b55c7;
}

.choice-green {
    background: #233c31;
}

.choice-red {
    background: #781e2a;
}

.choice-pink {
    background: #f0cdd2;
    color: #25181b;
}

.choice-purple {
    background: #6b2db8;
}

.size-btn {
    min-width: 30px;
    padding: 0 8px;
}

.checkout-panel {
    padding: 24px;
}

.checkout-panel h2 {
    text-align: center;
    margin-bottom: 2px;
    font-size: 31px;
}

.checkout-brand {
    color: #c4ced9;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}

.price-qty-row {
    display: grid;
    grid-template-columns: 1fr 78px;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.summary-label {
    display: block;
    color: rgba(0, 250, 23, 0.41);
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: bold;
}

#productPrice {
    font-size: 34px;
    text-shadow: -4px 0px 3px #007eff;
}

.qty-box {
    color: #9faabb;
    font-size: 12px;
    padding-top: 0px;
    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    margin-right: 111px;
    margin-left: 141px;
}

@media (min-width: 430px) {
    .qty-box {
        margin-right: 0px;
        margin-left: 146px;
        padding-left: 0px;
        right: 1px;
        left: 64px;
        padding-right: 0px;
        font-weight: bold;
        color: #ffffff;
        font-size: 16px;
    }
}

.qty-box input {
    display: block;
    width: 64px;
    height: 31px;
    margin-top: 3px;
    padding: 0 5px 0 0px;
    color: #fff;
    text-align: center;
    background: rgba(8,21,35,.72);
    border: 1px solid #56677a;
    border-radius: 7px;
    outline: none;
    background-color: #0074ff;
}

.product-summary {
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 14px;
    text-align: center;
}

.product-summary strong {
    font-weight: 400;
}

.checkout-btn {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    transition: .15s ease;
}

.add-cart-btn {
    margin-bottom: 11px;
    border: 1px solid #ffd247;
    background: linear-gradient(180deg,#d96c09,#b95105);
    box-shadow: 0 0 5px #ffd54c,0 0 13px rgba(255,103,0,.76);
}

.pay-print-btn {
    border: 1px solid rgba(74,243,255,.95);
    background: linear-gradient(90deg,rgba(28,105,150,.96),rgba(53,72,142,.96),rgba(132,48,143,.96));
    box-shadow: -3px 0 9px rgba(44,235,255,.65),4px 0 12px rgba(235,61,255,.55);
}

.how-section {
    position: relative;
    overflow: hidden;
    width: min(1080px,100%);
    margin: 0 auto 34px;
    padding: 12px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(20,30,42,.35),rgba(8,17,29,.19));
    border: 1px solid rgba(210,230,244,.23);
    box-shadow: 0 16px 38px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(15px) saturate(1.16);
    -webkit-backdrop-filter: blur(15px) saturate(1.16);
}

.how-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,rgba(44,238,255,.055),transparent 30%,transparent 70%,rgba(236,61,255,.05));
    pointer-events: none;
}

.how-section picture,
.how-section img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.how-section img {
    mix-blend-mode: screen;
    opacity: .98;
    filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 10px rgba(18,179,255,.08));
}

.trending-section {
    width: min(1220px,100%);
    margin: 0 auto;
    padding: 16px;
    border: 1px solid rgba(210,230,244,.25);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(20,30,42,.40),rgba(8,17,29,.24));
    box-shadow: 0 18px 45px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(17px) saturate(1.18);
    -webkit-backdrop-filter: blur(17px) saturate(1.18);
}

.trending-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.trending-head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Carter One', cursive;
    letter-spacing: 2px;

    /* text-shadow: 0 3px 10px rgba(101, 222, 255, 0.86) */
    box-shadow: 0 3px 15px 9px #0098ff;
    text-align: center;
    padding: 0px;
    border-radius: 20px;
}

.trending-head p {
    margin: 5px 0 0;
    color: #ffffff;
    font-size: 11px;
}

.trending-head span {
    font-size: 11px;
    color: #c9f9ff;
    white-space: nowrap;
}

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

.trend-card {
    border: 1px solid rgba(210,230,244,.20);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(27,38,52,.32),rgba(8,17,29,.18));
    overflow: hidden;
    outline: none;
    transition: .15s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.trend-card:hover {
    transform: translateY(-2px);
    border-color: rgba(80,214,233,.8);
}

.trend-card.selected {
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(45,243,255,.58);
}

.trend-image-window {
    position: relative;
    aspect-ratio: 1/1;
    background: transparent;
    overflow: hidden;
}

.trend-image-window img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trend-selected-badge {
    display: none;
    position: absolute;
    right: 7px;
    top: 7px;
    padding: 4px 6px;
    border: 1px solid var(--cyan);
    border-radius: 999px;
    background: rgba(2,9,18,.78);
    font-size: 8px;
    font-weight: 900;
}

.trend-card.selected .trend-selected-badge {
    display: block;
}

.trend-card-meta {
    padding: 7px;
    display: grid;
    gap: 7px;
}

.trend-card-meta strong {
    font-size: 10px;
    min-height: 22px;
    display: flex;
    align-items: center;
}

.trend-customize-btn {
    width: 100%;
    height: 31px;
    border: 1px solid rgba(54,235,255,.85);
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(90deg,rgba(23,105,150,.88),rgba(99,55,146,.88));
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: -2px 0 6px rgba(47,225,255,.4),2px 0 7px rgba(231,61,255,.35);
    transition: .15s ease;
}

.site-footer {
    width: min(1180px,100%);
    margin: 18px auto 0;
    padding: 13px 5px 0;
    border-top: 1px solid rgba(95,128,159,.24);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #8293a7;
    font-size: 10px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 20;
    transform: translate(-50%,18px);
    max-width: min(520px,calc(100vw - 24px));
    padding: 10px 14px;
    border: 1px solid rgba(52,237,255,.6);
    border-radius: 10px;
    background: rgba(2,10,20,.94);
    color: #f3fdff;
    font-size: 12px;
    box-shadow: 0 0 18px rgba(48,228,255,.16);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%,0);
}

@media (max-width:980px){
    .site-bg {
        background-image: linear-gradient(rgba(2,7,18,.18),rgba(2,7,18,.28)),url('../images/backgrounds/desktop.png');
        background-size: contain;
        background-position: calc(50% + var(--parallax-bx)) calc(50% + var(--parallax-by));
        background-color: #15100f;
    }

    .creator-row {
        grid-template-columns: 1fr 1.25fr;
    }

    .checkout-panel {
        grid-column: 1/-1;
        max-width: 370px;
        width: 100%;
        justify-self: center;
    }

    .trend-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .brand-logo {
        height: 100px;
    }
}

@media (max-width:700px){
    .site-shell {
        padding: 12px 10px 28px;
    }

    .brand-header {
        width: min(600px,94vw);
        margin-bottom: 16px;
    }

    .brand-logo {
        width: 190px;
        height: 92px;
    }

    .brand-wordmark {
        width: min(530px,94vw);
    }

    .creator-row {
        grid-template-columns: 1fr;
        width: min(620px,100%);
        gap: 12px;
    }

    .checkout-panel {
        grid-column: auto;
        max-width: none;
    }

    .panel-shell {
        border-color: rgba(100,133,166,.56);
    }

    .viewer-stage {
        height: 270px;
    }

    .viewer-shirt-wrap {
        width: 225px;
        height: 252px;
    }

    .trend-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .trending-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer {
        flex-direction: column;
        gap: 5px;
    }

    .how-section {
        width: min(560px,100%);
        padding: 10px 10px;
    }
}

@media (max-width:430px){
    .site-bg {
        background-image: linear-gradient(rgba(2,7,18,.20),rgba(2,7,18,.30)),url('../images/backgrounds/desktop.png');
        background-size: contain;
        background-position: center top;
        background-color: #15100f;
    }

    .brand-logo {
        width: 155px;
        height: 78px;
    }

    .panel-shell h2 {
        font-size: 18px;
    }

    .viewer-controls {
        padding: 8px 3px 0;
        grid-template-columns: 1fr;
    }

    .trend-grid {
        gap: 8px;
    }

    .trending-section {
        padding: 10px;
    }

    .trend-card-meta strong {
        font-size: 9px;
    }

    .trend-customize-btn {
        font-size: 8px;
    }

    .checkout-panel h2 {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion:reduce){
    html {
        scroll-behavior: auto;
    }

    .site-bg,
    .site-glow {
        animation: none;
    }

    .neon-btn:hover,
    .checkout-btn:hover,
    .trend-customize-btn:hover,
    .trend-card:hover {
        transform: none;
    }
}

@media (max-width:760px){
    .top-utility-nav {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: min(580px,96vw);
        margin: 0 auto 10px;
        align-items: center;
    }

    .cart-utility-btn {
        width: min(180px,42vw);
    }

    .track-utility-btn {
        width: min(210px,48vw);
    }

    .brand-header {
        margin-top: 0;
    }

    .cart-count {
        min-width: 20px;
        height: 20px;
        font-size: 9px;
    }
}

@media (max-width:430px){
    .top-utility-nav {
        gap: 8px;
    }

    .cart-utility-btn {
        width: 42vw;
    }

    .track-utility-btn {
        width: 48vw;
    }

    .dialog-actions {
        grid-template-columns: 1fr;
    }

    .utility-dialog {
        border-radius: 14px;
    }
}

@media (max-width:760px){
    :root {
        --parallax-x: 0px!important;
        --parallax-y: 0px!important;
        --parallax-bx: 0px!important;
        --parallax-by: 0px!important;
    }

    .site-bg,
    .site-glow {
        inset: -4%;
    }
}

@media (prefers-reduced-motion:reduce){
    .site-bg,
    .site-glow,
    .site-bg::after,
    .site-glow::before,
    .site-glow::after {
        animation: none!important;
    }

    :root {
        --parallax-x: 0px;
        --parallax-y: 0px;
        --parallax-bx: 0px;
        --parallax-by: 0px;
    }
}

@media (max-width:1280px){
    .creator-row {
        grid-template-columns: minmax(300px,1fr) minmax(520px,1.55fr) minmax(280px,.9fr);
        gap: 16px;
        min-height: 485px;
    }

    .viewer-stage {
        height: 360px;
    }

    .viewer-shirt-wrap {
        width: 305px;
        height: 342px;
    }

    .panel-shell h2 {
        font-size: 25px;
    }

    .checkout-panel h2 {
        font-size: 28px;
    }
}

@media (max-width:980px){
    .brand-wordmark-text {
        width: min(690px,88vw);
    }

    .brand-title {
        font-size: clamp(42px,7vw,68px);
    }

    .brand-subtitle {
        font-size: clamp(13px,2.2vw,19px);
    }
}

@media (max-width:700px){
    .brand-header {
        margin-bottom: 20px;
    }

    .brand-wordmark-text {
        width: 94vw;
    }

    .brand-title {
        font-size: clamp(36px,11vw,54px);
    }

    .brand-subtitle {
        font-size: clamp(11px,3.3vw,15px);
        letter-spacing: .12em;
    }
}

.brand-wordmark-image {
    display: block;
    width: min(1310px,96vw);
    height: auto;
    margin: -4px auto 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.34)) drop-shadow(0 0 16px rgba(46,242,255,.18));
}

@media (max-width:980px){
    .brand-wordmark-image {
        width: min(900px,94vw);
    }
}

@media (max-width:700px){
    .brand-wordmark-image {
        width: min(640px,96vw);
    }
}

@media (max-width:430px){
    .brand-wordmark-image {
        width: min(96vw,500px);
    }
}

.brand-wordmark-text,
.brand-title,
.brand-subtitle {
    display: none!important;
}

/* =========================================================
   MOBILE LAYOUT LOCK — keep after all other media rules.
   Prevents desktop/tablet rules from overriding the phone UI.
   ========================================================= */
@media (max-width:760px){
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Mobile background: intentionally zoom the landscape artwork so it fills
     the portrait viewport instead of letterboxing/compressing. */
    .site-bg {
        inset: -5%;
        background-image: linear-gradient(rgba(2,7,18,.20),rgba(2,7,18,.31)),url('../images/backgrounds/desktop.png');
        background-size: cover;
        background-position: 54% center;
        background-repeat: no-repeat;
        background-color: #11131a;
        transform: scale(1.04);
    }

    .site-glow {
        inset: -4%;
    }

    .site-shell {
        width: 100%;
        max-width: 100%;
        padding: 10px 10px 28px;
    }

    .top-utility-nav {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 560px;
        margin: 0 auto 8px;
        padding: 0 2px;
        gap: 8px;
    }

    .cart-utility-btn {
        width: min(176px,42vw);
    }

    .track-utility-btn {
        width: min(208px,48vw);
    }

    .brand-header {
        width: 100%;
        max-width: 620px;
        margin: 0 auto 18px;
        overflow: visible;
    }

    .brand-logo {
        width: 155px;
        height: 78px;
        margin-bottom: -5px;
    }

    .brand-wordmark-image {
        width: min(96vw,560px);
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* Main attraction: one complete panel per row. */
    .creator-row {
        display: grid;
        grid-template-columns: minmax(0,1fr) !important;
        width: 100%;
        max-width: 620px;
        min-height: 0;
        margin: 0 auto 24px;
        gap: 16px;
    }

    .creator-row > * {
        grid-column: 1 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .panel-shell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 17px;
        backdrop-filter: blur(16px) saturate(1.18);
        -webkit-backdrop-filter: blur(16px) saturate(1.18);
    }

    .panel-shell h2 {
        font-size: clamp(20px,6vw,26px);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .design-studio {
        padding: 16px;
    }

    .vision-box,
    .upload-box {
        padding: 14px;
    }

    #designPrompt {
        min-height: 116px;
    }

    .neon-btn {
        min-height: 48px;
    }

    .realtime-viewer {
        padding: 14px;
    }

    .viewer-stage {
        width: 100%;
        height: 325px;
        border-radius: 12px;
    }

    .viewer-shirt-wrap {
        top: 8px;
        width: 265px;
        height: 300px;
    }

    .viewer-controls {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 4px 2px;
    }

    .viewer-control-group {
        min-width: 0;
    }

    .choice-row {
        gap: 7px;
    }

    .choice-btn {
        height: 36px;
        min-width: 43px;
        padding: 0 9px;
    }

    .checkout-panel {
        grid-column: 1 !important;
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

    .checkout-panel h2 {
        font-size: clamp(23px,7vw,29px);
    }

    .checkout-brand {
        font-size: 16px;
    }

    #productPrice {
        font-size: 30px;
    }

    .product-summary {
        font-size: 15px;
    }

    .checkout-btn {
        height: 51px;
        font-size: 16px;
    }

    .how-section {
        width: 100%;
        max-width: 620px;
        padding: 9px;
        margin-bottom: 24px;
    }

    .trending-section {
        width: 100%;
        max-width: 620px;
        padding: 10px;
    }

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

    /* Parallax pointer movement is not useful on touch screens. */
    :root {
        --parallax-x: 0px !important;
        --parallax-y: 0px !important;
        --parallax-bx: 0px !important;
        --parallax-by: 0px !important;
    }
}

@media (max-width:430px){
    .site-bg {
        background-size: cover;
        background-position: 53% center;
        transform: scale(1.06);
    }

    .site-shell {
        padding-left: 8px;
        padding-right: 8px;
    }

    .brand-logo {
        width: 142px;
        height: 72px;
    }

    .brand-wordmark-image {
        width: 96vw;
    }

    .creator-row {
        gap: 13px;
    }

    .design-studio,
    .realtime-viewer,
    .checkout-panel {
        padding: 13px;
    }

    .viewer-stage {
        height: 292px;
    }

    .viewer-shirt-wrap {
        width: 238px;
        height: 278px;
    }

    .viewer-placeholder {
        font-size: 9px;
    }

    .choice-btn {
        height: 34px;
        min-width: 39px;
        padding: 0 8px;
        font-size: 11px;
    }

    .trend-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }
}

/* =========================================================
   RESPONSIVE BACKGROUND OVERRIDES — authoritative final rules
   Use art-directed desktop / tablet / mobile background images
   so the background always fills the viewport intentionally.
   ========================================================= */
.site-bg {
    background-image: linear-gradient(rgba(2,7,18,.15),rgba(2,7,18,.24)),
    url('../images/backgrounds/desktop.png') !important;
    background-size: cover !important;
    background-position: 52% center !important;
    background-repeat: no-repeat !important;
    background-color: #12131a !important;
}

@media (max-width: 1100px){
    .site-bg {
        background-image: linear-gradient(rgba(2,7,18,.17),rgba(2,7,18,.26)),
      url('../images/backgrounds/tablet.png') !important;
        background-size: cover !important;
        background-position: 56% center !important;
    }
}

@media (max-width: 760px){
    .site-bg {
        background-image: linear-gradient(rgba(2,7,18,.20),rgba(2,7,18,.30)),
      url('../images/backgrounds/mobile.png') !important;
        background-size: cover !important;
        background-position: 58% center !important;
        background-repeat: no-repeat !important;
        background-color: #10131b !important;
        transform: scale(1.04) !important;
    }
}

@media (max-width: 430px){
    .site-bg {
        background-image: linear-gradient(rgba(2,7,18,.22),rgba(2,7,18,.32)),
      url('../images/backgrounds/mobile.png') !important;
        background-size: cover !important;
        background-position: 60% center !important;
        transform: scale(1.06) !important;
    }
}

/* Bundle pricing / coupons */
.pricing-detail {
    display: block;
    margin-top: 5px;
    color: #00ff36;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.25;
    text-shadow: 1px 0px 12px #ffffff;
}

.bundle-offers {
    display: grid;
    gap: 8px;
    margin: 15px 0 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(218,235,248,.22);
}

.bundle-offers-title {
    color: #eafcff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
}

.bundle-coupon {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(68,231,255,.35);
    border-radius: 10px;
    color: #fff;
    text-align: left;
    background: linear-gradient(135deg,rgba(25,41,58,.40),rgba(12,20,36,.24));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: .16s ease;
}

.bundle-coupon:hover {
    border-color: rgba(68,238,255,.72);
    background: linear-gradient(135deg,rgba(31,57,76,.48),rgba(31,24,58,.31));
    transform: translateY(-1px);
}

.bundle-coupon.clipped {
    border-color: #2ef2ff;
    box-shadow: 0 0 10px rgba(46,242,255,.28),inset 0 1px 0 rgba(255,255,255,.07);
    background: linear-gradient(135deg,rgba(25,83,101,.46),rgba(76,35,104,.38));
}

.bundle-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bundle-copy strong {
    font-size: 11px;
    line-height: 1.1;
    color: #fff;
}

.bundle-copy small {
    font-size: 9px;
    color: #aebdcd;
    line-height: 1.2;
}

.coupon-clip {
    flex: 0 0 auto;
    min-width: 83px;
    padding: 7px 6px;
    border: 1px solid rgba(220,86,255,.56);
    border-radius: 7px;
    color: #f9efff;
    background: linear-gradient(90deg,rgba(28,113,147,.58),rgba(122,50,144,.63));
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.bundle-coupon.clipped .coupon-clip {
    border-color: #2ef2ff;
    color: #e9ffff;
    background: rgba(30,155,177,.34);
}

.bulk-note {
    color: #9fb1c4;
    font-size: 9px;
    line-height: 1.3;
}

.cart-pricing-label {
    display: block!important;
    margin-top: 3px;
    color: #55ecff!important;
    font-size: 9px!important;
    font-weight: 800;
}

.cart-total-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 12px 4px;
    color: #dce9f5;
    font-size: 12px;
    border-top: 1px solid rgba(210,230,244,.20);
}

.cart-total-summary strong {
    color: #fff;
    font-size: 16px;
}

@media (max-width:760px){
    .bundle-coupon {
        min-height: 50px;
    }

    .bundle-copy strong {
        font-size: 10px;
    }

    .coupon-clip {
        min-width: 78px;
        font-size: 7px;
    }
}

/* IMAGE-BASED ACTION BUTTONS */
/* loading state for image action buttons */
.image-action-btn {
    position: relative;
    overflow: hidden;
}

.image-action-btn:disabled {
    cursor: not-allowed;
    opacity: .7;
}

.image-action-btn.is-loading:disabled {
    cursor: wait;
    opacity: 1;
}

.image-action-btn.is-loading img {
    opacity: .28;
    filter: saturate(.75) brightness(.95);
}

.image-action-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(5,19,35,.48),rgba(17,57,90,.34));
    color: #ecfeff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(46,242,255,.18);
}

.image-action-btn.is-loading .image-action-loading {
    display: inline-flex;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(141,241,255,.32);
    border-top-color: #72f1ff;
    box-shadow: 0 0 10px rgba(46,242,255,.22);
    animation: daOutletSpin .85s linear infinite;
}

.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8bf2ff;
    opacity: .28;
    animation: daOutletPulse 1.15s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: .16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: .32s;
}

@keyframes daOutletSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes daOutletPulse {
    0%,
    80%,
    100% {
        transform: scale(.75);
        opacity: .22;
    }

    40% {
        transform: scale(1.15);
        opacity: 1;
    }
}

.image-action-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    cursor: pointer;
}

.image-action-btn img {
    display: block;
    width: 100%;
    height: auto;
}

.image-action-btn:focus-visible {
    outline: 2px solid rgba(76,233,255,.95);
    outline-offset: 4px;
    border-radius: 18px;
}

.studio-image-btn {
    margin-top: 12px;
}

.checkout-image-btn {
    margin-top: 14px;
}

.checkout-image-btn + .checkout-image-btn {
    margin-top: 10px;
}

#generateDesign.neon-btn,
#uploadImageButton.neon-btn,
#addToCart.checkout-btn,
#payAndPrint.checkout-btn {
    box-shadow: none;
    min-height: 0;
}

/* =========================================================
   MAIN PANEL FILL / RECENT GENERATIONS / ADVANCED PLACEMENT
   ========================================================= */
@media (min-width:981px){
    .creator-row {
        align-items: stretch;
        min-height: 760px;
    }

    .creator-row > .panel-shell {
        height: 100%;
    }

    .design-studio,
    .realtime-viewer,
    .checkout-panel {
        min-height: 760px;
    }
}

.design-studio {
    display: flex;
    flex-direction: column;
}

.vision-box,
.upload-box {
    flex: 0 0 auto;
}

.inline-status {
    margin-top: 10px;
}

.vision-help {
    margin: 0 0 11px;
    color: #c9cfd0;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.vision-help strong {
    color: #e9fdff;
}

.recent-generations-block {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(210,230,244,.17);
}

.recent-generations-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.recent-generations-heading strong {
    color: #f3fdff;
    font-size: 10px;
    letter-spacing: .08em;
}

.recent-generations-heading span {
    color: #9fb0c1;
    font-size: 11px;
    text-align: right;
}

.recent-generations-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
}

.recent-generation-slot {
    position: relative;
    aspect-ratio: 1/1;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(92,159,196,.48);
    border-radius: 9px;
    background: linear-gradient(145deg,rgba(22,42,59,.40),rgba(7,17,30,.24));
    color: #708397;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: .15s ease;
}

.recent-generation-slot:hover:not(.empty) {
    transform: translateY(-1px);
    border-color: #2ef2ff;
    box-shadow: 0 0 10px rgba(46,242,255,.20);
}

.recent-generation-slot.selected {
    border-color: #2ef2ff;
    box-shadow: 0 0 11px rgba(46,242,255,.32),inset 0 0 12px rgba(46,242,255,.04);
}

.recent-generation-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(2,10,18,.45);
}

.recent-slot-empty {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    font-size: 14px;
    font-weight: 900;
    color: #557088;
}

.recent-generation-slot.filled .recent-slot-empty {
    display: none;
}

/* Larger, fuller Real-Time Viewer controls */
.viewer-controls {
    display: grid!important;
    grid-template-columns: 1.35fr .72fr .72fr!important;
    gap: 16px 18px!important;
    padding: 15px 24px 4px!important;
    align-items: start;
}

.viewer-control-group {
    min-width: 0;
}

.viewer-controls .control-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

.viewer-controls .control-label small {
    color: #71efff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

.viewer-controls .choice-btn {
    min-height: 39px;
    padding: 0 11px;
    font-size: 12px;
}

.placement-group {
    grid-column: 1/-1;
}

.placement-choice-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.placement-btn {
    width: 100%;
    min-width: 0!important;
    font-size: 16px;
    padding: 0 7px!important;
}

.view-btn {
    min-width: 70px!important;
    font-weight: bold;
}

/* Seven precise placement zones, shared by Front and Back views.
   Every position uses the same print footprint so 100% means the same
   visible artwork size no matter where the customer places it. */
.art-zone.placement-upper-center {
    left: 50%;
    top: 36%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-mid-center {
    left: 50%;
    top: 49%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-low-center {
    left: 50%;
    top: 61%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-upper-left {
    left: 42%;
    top: 38%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-upper-right {
    left: 58%;
    top: 38%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-low-left {
    left: 42%;
    top: 60%;
    width: 32%;
    height: 30%;
}

.art-zone.placement-low-right {
    left: 58%;
    top: 60%;
    width: 32%;
    height: 30%;
}

.checkout-panel {
    display: flex;
    flex-direction: column;
}

.checkout-note {
    margin-top: 12px;
}

@media (max-width:980px){
    .creator-row > .panel-shell {
        min-height: 0;
    }

    .viewer-controls {
        grid-template-columns: 1fr 1fr!important;
        padding: 14px 8px 3px!important;
    }

    .placement-group {
        grid-column: 1/-1;
    }

    .placement-choice-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .recent-generations-heading,
    .design-style-presets-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .recent-generations-heading span,
    .design-style-presets-heading span {
        text-align: left;
    }

    .viewer-controls {
        grid-template-columns: 1fr!important;
        gap: 12px!important;
        padding: 12px 4px 2px!important;
    }

    .placement-group {
        grid-column: 1;
    }

    .placement-choice-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    .viewer-controls .choice-btn {
        min-height: 36px;
        font-size: 11px;
    }

    .placement-btn {
        font-size: 10px!important;
    }
}

@media (max-width:430px){
    .recent-generations-grid {
        gap: 5px;
    }

    .placement-choice-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   GLOBAL FROSTED GLASS OVERRIDES — controlled by :root above
   ========================================================= */
.panel-shell,
.how-section,
.trending-section,
.utility-dialog {
    background: rgba(35, 51, 72, 0);
    border-color: #00b3ff!important;
    box-shadow: 0 20px 52px rgba(255, 251, 127, 0.2),
    inset 0 1px 0 rgb(255 255 255 / var(--glass-highlight-alpha)),
    inset 0 0 42px rgba(88,193,255,.024);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation))!important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation))!important;
}

.vision-box,
.upload-box,
.trend-card,
.recent-generation-slot {
    background: linear-gradient(145deg,
      rgb(27 39 52 / calc(var(--glass-bg-alpha) * .72)),
      rgb(8 17 29 / calc(var(--glass-bg-alpha-soft) * .82)))!important;
    backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturation))!important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturation))!important;
}

/* Header wordmark — deliberately no glass panel */
.brand-wordmark-glass {
    width: min(1340px,97vw);
    margin: -4px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent!important;
    box-shadow: none!important;
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important;
    overflow: visible;
}

.brand-wordmark-glass .brand-wordmark-image {
    width: 100%!important;
    max-width: none!important;
    margin: 0 auto!important;
}

/* Checkout international notice */
.international-shipping-note {
    margin: 10px 0 0;
    padding: 9px 10px;
    border-top: 1px solid rgba(210,230,244,.16);
    color: #aebdca;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}

/* Footer legal controls */
.site-footer {
    width: min(1220px,100%)!important;
    margin: 22px auto 0!important;
    padding: 16px 8px 8px!important;
    display: grid!important;
    gap: 14px!important;
}

.footer-brand-row {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    color: #8fa0b2;
    font-size: 10px;
}

.legal-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.legal-footer-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(69,225,244,.30);
    border-radius: 999px;
    background: linear-gradient(135deg,rgba(20,42,58,.33),rgba(49,25,65,.27));
    color: #eafcff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: .15s ease;
}

.legal-footer-btn:hover {
    border-color: #2ef2ff;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(46,242,255,.18);
}

/* Legal dialogs */
.legal-dialog {
    width: min(820px,calc(100vw - 28px));
    max-height: min(86vh,900px);
}

.legal-dialog-body {
    padding: 4px 22px 24px;
    overflow: auto;
    max-height: calc(86vh - 92px);
}

.legal-copy {
    color: #cfdae5;
    font-size: 12px;
    line-height: 1.62;
}

.legal-copy h3 {
    margin: 18px 0 6px;
    color: #f4fdff;
    font-size: 13px;
    line-height: 1.25;
}

.legal-copy p {
    margin: 0 0 10px;
}

.policy-date {
    margin: 0 0 13px;
    color: #72eefe;
    font-size: 10px;
    font-weight: 800;
}

.legal-small {
    color: #95a7b9;
    font-size: 10px;
    line-height: 1.45;
}

.contact-form {
    display: grid;
    gap: 11px;
    margin-top: 15px;
}

.contact-form label {
    display: grid;
    gap: 5px;
    color: #d7e6f1;
    font-size: 11px;
    font-weight: 800;
}

.contact-form label span {
    color: #8fa1b3;
    font-weight: 400;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    color: #fff;
    background: rgba(4,13,24,.56);
    border: 1px solid rgba(134,163,191,.46);
    border-radius: 9px;
    padding: 10px 11px;
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #2ef2ff;
    box-shadow: 0 0 0 2px rgba(46,242,255,.07);
}

.hidden-field {
    position: absolute!important;
    left: -10000px!important;
}

.site-copyright {
    width: min(980px, 92vw);
    margin: 0 auto;
    color: #8fa1b3;
    font-size: 9px;
    line-height: 1.55;
    text-align: center;
}

/* Cookie choices */
.privacy-choice-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid rgba(210,230,244,.14);
}

.privacy-choice-row:first-of-type {
    margin-top: 14px;
}

.privacy-choice-row strong {
    display: block;
    color: #eefcff;
    font-size: 12px;
}

.privacy-choice-row small {
    display: block;
    margin-top: 4px;
    color: #98aabb;
    font-size: 10px;
    line-height: 1.45;
}

.privacy-choice-row.locked {
    opacity: .78;
}

.privacy-optout {
    margin-top: 5px;
}

.gpc-status {
    display: block;
    margin-top: 5px;
    color: #58efff;
    font-size: 9px;
    font-weight: 800;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
}

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

.switch-slider {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(115,143,170,.54);
    border-radius: 999px;
    background: rgba(6,17,30,.76);
    cursor: pointer;
    transition: .18s ease;
}

.switch-slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #a7b5c3;
    transition: .18s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
}

.switch input:checked + .switch-slider {
    border-color: #2ef2ff;
    background: linear-gradient(90deg,rgba(17,117,145,.82),rgba(106,45,135,.82));
    box-shadow: 0 0 10px rgba(46,242,255,.20);
}

.switch input:checked + .switch-slider:before {
    transform: translateX(24px);
    background: #efffff;
}

.switch input:disabled + .switch-slider {
    cursor: not-allowed;
}

.cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 8px;
    margin: 16px 0;
}

.cookie-copy {
    padding-top: 5px;
    border-top: 1px solid rgba(210,230,244,.13);
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 14px;
    width: min(980px,calc(100vw - 24px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid rgb(220 235 246 / var(--glass-border-alpha));
    border-radius: 16px;
    background: linear-gradient(135deg,rgba(14,29,43,.82),rgba(10,14,28,.74));
    box-shadow: 0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.cookie-banner[hidden] {
    display: none!important;
}

.cookie-banner strong {
    display: block;
    color: #f3feff;
    font-size: 11px;
    letter-spacing: .06em;
}

.cookie-banner p {
    margin: 5px 0 0;
    color: #b0bfcd;
    font-size: 10px;
    line-height: 1.4;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.cookie-banner-btn {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 8px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.cookie-banner-btn.secondary {
    border: 1px solid rgba(118,151,181,.52);
    background: rgba(8,22,37,.74);
}

.cookie-banner-btn.primary {
    border: 1px solid #2ef2ff;
    background: linear-gradient(90deg,rgba(19,116,150,.9),rgba(98,51,143,.9));
    box-shadow: 0 0 9px rgba(46,242,255,.18);
}

@media (max-width:760px){
    .brand-wordmark-glass {
        width: 96vw;
        padding: 0;
        border-radius: 0;
    }

    .footer-brand-row {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .legal-dialog-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cookie-actions {
        grid-template-columns: 1fr;
    }

    .cookie-banner {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-banner-btn {
        flex: 1 1 120px;
    }
}

/* =========================================================
   EXTRAS + MULTI-DESIGN VIEWER CONTROLS
   ========================================================= */
.secondary-art-zone {
    z-index: 4;
}

.no-print-message {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    padding: 9px 12px;
    border: 1px dashed rgba(82,231,255,.58);
    border-radius: 9px;
    background: rgba(3,15,26,.62);
    color: #dffcff;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 0 12px rgba(46,242,255,.08);
    pointer-events: none;
}

.placement-btn:disabled {
    opacity: .30;
    cursor: not-allowed;
    filter: saturate(.35);
}

.placement-btn[data-placement="none"] {
    border-style: dashed;
    color: #b8c6d5;
}

.placement-hint,
.extras-hint {
    margin: 8px 0 0;
    color: #9eb0c2;
    font-size: 10px;
    line-height: 1.35;
}

.viewer-control-separator {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 1px 0 -1px;
    color: #8befff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.viewer-control-separator::before,
.viewer-control-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg,transparent,rgba(90,222,241,.32),transparent);
}

.extras-group {
    grid-column: 1/-1;
}

.design-notes-wrap {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.design-notes-label {
    color: #b9d8ea;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.design-notes-label small {
    color: #7fa0b5;
    font-size: 9px;
    font-weight: 700;
}

.design-notes-input {
    width: 100%;
    min-height: 58px;
    max-height: 90px;
    resize: vertical;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(137,204,235,.24);
    border-radius: 10px;
    background: rgba(4,14,27,.42);
    color: #eefbff;
    font: inherit;
    font-size: 11px;
    line-height: 1.35;
}

.design-notes-input::placeholder {
    color: #7e96a7;
}

.design-notes-input:focus {
    outline: none;
    border-color: rgba(74,230,255,.72);
    box-shadow: 0 0 0 2px rgba(55,203,255,.08);
}

.extras-choice-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.extra-btn {
    width: 100%;
    min-width: 0!important;
    font-size: 13px!important;
    white-space: normal;
    line-height: 1.15;
    padding: 7px 8px!important;
    font-weight: bold;
}

.extra-btn.selected,
.extra-btn[aria-pressed="true"] {
    border-color: #2ef2ff!important;
    box-shadow: 0 0 10px rgba(46,242,255,.18),inset 0 0 10px rgba(91,48,145,.14)!important;
}

.design-layer-group {
    grid-column: 1/-1;
    padding: 10px;
    border: 1px solid rgba(104,137,170,.28);
    border-radius: 10px;
    background: rgba(7,18,31,.16);
}

.design-layer-group[hidden] {
    display: none!important;
}

.layer-btn {
    min-width: 100px!important;
}

.product-summary strong#summaryPlacement,
.product-summary strong#summaryExtras {
    font-size: 11px;
    line-height: 1.35;
}

/* None has no visible artwork zone; render JS controls display state. */
.art-zone.placement-none {
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

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

    .extra-btn {
        font-size: 10px!important;
    }

    .design-layer-group {
        padding: 8px;
    }

    .design-notes-input {
        min-height: 52px;
        font-size: 10px;
    }
}

/* EXTRA PRICE LABELS */
.extra-price {
    display: inline-block;
    margin-left: 5px;
    color: #67f4ff;
    font-size: .88em;
    font-weight: 900;
    white-space: nowrap;
}

.extra-btn.selected .extra-price {
    color: #fff;
}

/* =========================================================
   SHOW YA SHIRT — CUSTOMER PHOTO REVIEWS
   ========================================================= */
.show-shirt-section {
    width: min(1220px,calc(100% - 32px));
    margin: 22px auto 0;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
}

.show-shirt-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.show-shirt-kicker {
    display: block;
    color: #64efff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    margin-bottom: 4px;
}

.show-shirt-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    letter-spacing: .04em;
    line-height: 1;
}

.show-shirt-head p {
    margin: 8px 0 0;
    max-width: 660px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.45;
}

.show-shirt-submit-btn,
.review-upload-btn {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(63,231,255,.72);
    border-radius: 11px;
    background: linear-gradient(100deg,rgba(17,93,122,.76),rgba(76,42,125,.74));
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
    box-shadow: 0 0 13px rgba(54,225,255,.14),inset 0 1px 0 rgba(255,255,255,.08);
}

.show-shirt-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}

.show-shirt-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(193,221,242,.20);
    border-radius: 17px;
    background: linear-gradient(145deg,rgba(18,35,49,.42),rgba(12,17,32,.33));
    box-shadow: 0 14px 30px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px) saturate(1.13);
    -webkit-backdrop-filter: blur(12px) saturate(1.13);
}

.review-source-badge {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(4,14,25,.70);
    color: #e4fcff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.show-shirt-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: rgba(3,8,15,.45);
}

.show-shirt-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .25s ease;
}

.show-shirt-card:hover .show-shirt-image img {
    transform: scale(1.025);
}

.show-shirt-copy {
    padding: 13px 14px 14px;
}

.review-stars {
    color: #ffb54a;
    font-size: 14px;
    letter-spacing: 2px;
    text-shadow: 0 0 7px rgba(255,151,47,.20);
}

.show-shirt-copy p {
    min-height: 58px;
    margin: 8px 0 12px;
    color: #d7e1ea;
    font-size: 11px;
    line-height: 1.5;
}

.reviewer-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(200,223,240,.11);
}

.reviewer-line strong {
    color: #fff;
    font-size: 10px;
}

.reviewer-line span {
    color: #6cefff;
    font-size: 9px;
}

.review-moderation-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(200,223,240,.13);
    color: #91a4b6;
    font-size: 9px;
    text-align: center;
}

.review-moderation-note span {
    color: #ffffff;
    font-weight: 900;
    letter-spacing: .08em;
}

.review-moderation-note p {
    margin: 0;
    font-size: 11px;
}

/* Review submission popup */
.review-submit-dialog {
    width: min(680px,calc(100vw - 28px));
}

.review-submit-form {
    padding: 0 20px 22px;
}

.review-upload-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/8.5;
    border: 1px dashed rgba(73,229,255,.42);
    border-radius: 13px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,rgba(4,16,27,.66),rgba(36,17,51,.36));
    color: #6d8398;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.review-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050b13;
}

.review-upload-btn {
    display: block;
    width: 100%;
    margin: 9px 0 13px;
}

.review-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.review-submit-form label {
    display: grid;
    gap: 5px;
    color: #dceaf4;
    font-size: 10px;
    font-weight: 800;
}

.review-submit-form input[type="text"],
.review-submit-form textarea {
    width: 100%;
    padding: 10px 11px;
    color: #fff;
    border: 1px solid rgba(128,158,187,.43);
    border-radius: 9px;
    background: rgba(3,13,24,.56);
    outline: none;
}

.review-submit-form input[type="text"]:focus,
.review-submit-form textarea:focus {
    border-color: #31ecff;
    box-shadow: 0 0 0 2px rgba(49,236,255,.06);
}

.review-text-label {
    margin-top: 12px;
}

.review-rating-fieldset {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.review-rating-fieldset legend {
    color: #dceaf4;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 5px;
}

.review-rating-buttons {
    display: flex;
    gap: 4px;
}

.review-rating-buttons button {
    width: 35px;
    height: 34px;
    border: 1px solid rgba(134,156,179,.28);
    border-radius: 7px;
    background: rgba(7,20,34,.70);
    color: #52677a;
    font-size: 17px;
    cursor: pointer;
}

.review-rating-buttons button.selected,
.review-rating-buttons button.active {
    color: #ffb348;
    border-color: rgba(255,179,72,.55);
    box-shadow: 0 0 9px rgba(255,179,72,.12);
}

.review-permission {
    grid-template-columns: auto 1fr!important;
    align-items: flex-start;
    gap: 9px!important;
    margin: 12px 0 0;
    color: #9eb0c0!important;
    font-weight: 500!important;
    line-height: 1.45;
}

.review-permission input {
    margin-top: 2px;
}

.review-submit-status {
    min-height: 16px;
    margin: 10px 0 0;
    color: #70efff;
    font-size: 9px;
    line-height: 1.4;
}

.review-send-btn {
    width: 100%;
    margin-top: 4px;
}

@media (max-width:950px){
    .show-shirt-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:650px){
    .show-shirt-section {
        width: calc(100% - 20px);
        padding: 14px;
    }

    .show-shirt-head {
        align-items: stretch;
        flex-direction: column;
    }

    .show-shirt-submit-btn {
        width: 100%;
    }

    .show-shirt-grid {
        grid-template-columns: 1fr;
    }

    .show-shirt-copy p {
        min-height: 0;
    }

    .review-form-grid {
        grid-template-columns: 1fr;
    }

    .review-moderation-note {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
    }
}

/* =========================================================
   DESIGN SIZE + PRINT-SAFE BOUNDARY
   ========================================================= */
.design-size-group {
    grid-column: 1/-1;
    padding: 10px 11px 9px;
    border: 1px solid rgba(96,154,190,.22);
    border-radius: 11px;
    background: linear-gradient(135deg,rgba(8,23,36,.22),rgba(42,20,55,.13));
}

.design-size-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.design-size-heading output {
    min-width: 48px;
    color: #72f5ff;
    font-size: 13px;
    font-weight: 900;
    text-align: right;
}

.design-size-slider {
    width: 100%;
    height: 6px;
    margin: 5px 0 4px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(90deg,rgba(45,231,255,.74),rgba(175,64,232,.78));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),0 0 9px rgba(50,225,255,.10);
}

.design-size-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    border: 2px solid #dffeff;
    border-radius: 50%;
    background: #0b2335;
    box-shadow: 0 0 0 3px rgba(46,240,255,.16),0 0 12px rgba(46,240,255,.30);
    cursor: pointer;
}

.design-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #dffeff;
    border-radius: 50%;
    background: #0b2335;
    box-shadow: 0 0 0 3px rgba(46,240,255,.16),0 0 12px rgba(46,240,255,.30);
    cursor: pointer;
}

.design-size-slider:disabled {
    opacity: .30;
    filter: saturate(.35);
    cursor: not-allowed;
}

.design-size-slider:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

.design-size-scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #73899b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .05em;
}

.design-size-scale span:last-child {
    color: #70dfea;
}

.design-size-hint {
    margin: 7px 0 0;
    color: #9eb0c2;
    font-size: 9px;
    line-height: 1.35;
}

/* This outline is a UI guide only; it is never part of the printed artwork. */
.art-zone.active-edit-zone:not(.placement-none) {
    outline: 1px dashed rgba(74,239,255,.72);
    outline-offset: 2px;
    border-radius: 5px;
}

.art-zone.active-edit-zone:not(.placement-none)::after {
    content: "PRINT SAFE";
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(2,12,21,.64);
    color: rgba(202,252,255,.76);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: .07em;
    line-height: 1;
    pointer-events: none;
}

.viewer-artwork {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-summary strong#summaryDesignSize {
    font-size: 11px;
    line-height: 1.35;
}

/* Six size choices should wrap cleanly without crowding the viewer. */
.size-group .choice-row {
    flex-wrap: wrap;
}

.size-btn {
    min-width: 48px!important;
    font-weight: bold;
}

@media (max-width:760px){
    .design-size-group {
        padding: 9px;
    }

    .design-size-hint {
        font-size: 8px;
    }

    .size-btn {
        min-width: 44px!important;
    }
}

/* =========================================================
   COMPACT DESIGN SIZE CONTROL
   Keeps the pre-slider viewer layout nearly unchanged.
   ========================================================= */
.design-size-group {
    grid-column: 1/-1!important;
    display: grid!important;
    grid-template-columns: auto minmax(120px,1fr) 44px!important;
    align-items: center!important;
    gap: 9px!important;
    min-height: 30px!important;
    padding: 0 2px 2px!important;
    border: 0!important;
    border-radius: 0!important;
    background: transparent!important;
}

.design-size-group .control-label {
    margin: 0!important;
    white-space: nowrap;
    font-size: 12px!important;
}

.design-size-group .control-label small {
    font-size: 8px!important;
}

.design-size-group output {
    min-width: 44px;
    color: #72f5ff;
    font-size: 11px;
    font-weight: 900;
    text-align: right;
}

.design-size-slider {
    width: 100%;
    height: 4px!important;
    margin: 0!important;
}

.design-size-slider::-webkit-slider-thumb {
    width: 15px!important;
    height: 15px!important;
}

.design-size-slider::-moz-range-thumb {
    width: 13px!important;
    height: 13px!important;
}

.design-size-heading,
.design-size-scale,
.design-size-hint {
    display: none!important;
}

/* Artwork fills its safe zone at 100%; JS scales the actual image down/up. */
.viewer-artwork {
    width: 100%!important;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 100%!important;
    object-fit: contain!important;
    transform-origin: center center!important;
    will-change: transform;
}

@media (max-width:760px){
    .design-size-group {
        grid-template-columns: auto minmax(90px,1fr) 40px!important;
        gap: 7px!important;
        min-height: 28px!important;
        padding: 0!important;
    }

    .design-size-group .control-label {
        font-size: 11px!important;
    }

    .design-size-group .control-label small {
        display: none;
    }

    .design-size-group output {
        min-width: 40px;
        font-size: 10px;
    }
}

/* =========================================================
   UPLOAD ART DESCRIPTION
   ========================================================= */
.upload-help {
    margin: 18px 0 9px;
    color: #c9cfd0;
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
}

/* =========================================================
   PLACEHOLDER FOLLOWS DESIGN SIZE
   JS scales this element with the same 35%-100% value used
   by the actual artwork.
   ========================================================= */
.viewer-placeholder {
    transform-origin: center center;
    will-change: transform;
    transition: transform .08s linear;
}

/* =========================================================
   GOLDEN TICKET BUNDLE COUPONS
   ========================================================= */
.bundle-offers {
    position: relative;
}

.bundle-offers-title {
    color: #ffeaa5!important;
    text-shadow: 0 0 8px rgba(255,196,61,.22);
}

.bundle-coupon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,220,105,.86)!important;
    color: #241600!important;
    background: linear-gradient(110deg,
      #8c5a06 0%,
      #d99a16 14%,
      #fff1a1 30%,
      #e9b52b 44%,
      #9a6407 60%,
      #f7d45a 77%,
      #fff0a0 88%,
      #ba790d 100%)!important;
    box-shadow: 0 0 12px rgba(255,187,41,.24),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 7px rgba(102,56,0,.28)!important;
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important;
}

.bundle-coupon::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -35%;
    left: -46%;
    width: 32%;
    height: 175%;
    transform: skewX(-19deg);
    background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.12),
    rgba(255,255,255,.88),
    rgba(255,255,255,.20),
    transparent);
    filter: blur(.4px);
    animation: goldTicketShine 3.8s ease-in-out infinite;
    pointer-events: none;
}

.bundle-coupon::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    border: 1px dashed rgba(104,59,0,.40);
    border-radius: 7px;
    pointer-events: none;
}

.bundle-coupon > * {
    position: relative;
    z-index: 1;
}

.bundle-coupon:hover {
    border-color: #fff0a3!important;
    filter: brightness(1.08) saturate(1.06);
    transform: translateY(-1px);
    box-shadow: 0 0 17px rgba(255,196,48,.38),
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -2px 8px rgba(102,56,0,.25)!important;
}

.bundle-coupon.clipped {
    border-color: #fff4b3!important;
    background: linear-gradient(110deg,
      #b97908 0%,
      #f3bd2f 17%,
      #fff7c4 33%,
      #ffd85e 48%,
      #c5840b 63%,
      #ffe474 79%,
      #fff9d5 89%,
      #d99510 100%)!important;
    box-shadow: 0 0 18px rgba(255,209,70,.48),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -2px 8px rgba(116,65,0,.24)!important;
}

.bundle-copy strong {
    color: #2c1b00!important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

.bundle-copy small {
    color: #5d3b00!important;
    font-weight: 700;
}

.coupon-clip {
    border: 1px solid rgba(91,50,0,.48)!important;
    color: #2d1a00!important;
    background: linear-gradient(180deg,rgba(255,247,190,.92),rgba(227,165,31,.88))!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65),
    0 1px 5px rgba(81,44,0,.18)!important;
    text-shadow: 0 1px 0 rgba(255,255,255,.34);
}

.bundle-coupon.clipped .coupon-clip {
    border-color: rgba(85,48,0,.62)!important;
    color: #2b1800!important;
    background: linear-gradient(180deg,#fff7bd,#f0b82d)!important;
    box-shadow: 0 0 8px rgba(255,230,111,.44),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
}

@keyframes goldTicketShine{
    0%,
    22% {
        left: -46%;
        opacity: 0;
    }

    34% {
        opacity: 1;
    }

    58% {
        left: 118%;
        opacity: .95;
    }

    60%,
    100% {
        left: 118%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce){
    .bundle-coupon::before {
        animation: none;
    }
}

/* =========================================================
   CLEAN SHIRT PREVIEW
   Print-safe sizing rules remain enforced in JS/backend.
   Only the visible guide border/label is removed.
   ========================================================= */
.art-zone.active-edit-zone:not(.placement-none) {
    outline: none!important;
    outline-offset: 0!important;
    border-radius: 0!important;
}

.art-zone.active-edit-zone:not(.placement-none)::after {
    content: none!important;
    display: none!important;
}

/* ADMIN ENTRY — bottom-of-page owner access */
.admin-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none!important;
    border-color: rgba(176,71,244,.56)!important;
    background: linear-gradient(135deg,rgba(12,35,53,.48),rgba(80,27,100,.42))!important;
    color: #f4e9ff!important;
}

.admin-footer-btn:hover {
    border-color: #dc66ff!important;
    box-shadow: 0 0 12px rgba(206,67,255,.22)!important;
}

/* =========================================================
   EDITOR — REAL-TIME VIEWER SHIRT SIZE
   Select .viewer-shirt-wrap in Pinegrow and change the inline
   custom property --viewer-shirt-scale.
   Examples: .90 = 90%, 1 = current size, 1.15 = 115%.
   The responsive base dimensions remain intact automatically.
   ========================================================= */
/* =========================================================
   RESPONSIVE CREATOR PANEL ALIGNMENT — v13
   Authoritative final overrides. Keeps desktop unchanged while
   preventing the later <=1280px three-column rule from squeezing
   tablet layouts. Also keeps the shirt mathematically centered.
   ========================================================= */
/* Separate centering from Pinegrow scaling so scaling never shifts the shirt. */
.viewer-shirt-wrap {
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: -50% 0;
    scale: var(--viewer-shirt-scale,1);
    transform-origin: top center;
}

/* Standard portrait tablets: stack complete panels at a comfortable width. */
@media (min-width:761px) and (max-width:980px){
    .creator-row {
        grid-template-columns: minmax(0,1fr) !important;
        width: min(760px,100%) !important;
        max-width: 760px !important;
        min-height: 0 !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .creator-row > .panel-shell {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        justify-self: stretch !important;
    }

    .design-studio,
    .realtime-viewer,
    .checkout-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .checkout-panel {
        grid-column: 1 !important;
        justify-self: stretch !important;
    }

    .viewer-stage {
        height: clamp(380px,52vw,455px) !important;
    }

    .viewer-shirt-wrap {
        top: 12px !important;
        width: min(350px,48vw) !important;
        height: min(384px,52vw) !important;
    }

    .viewer-controls {
        grid-template-columns: 1.35fr .72fr .72fr !important;
        gap: 15px 18px !important;
        padding: 15px 18px 4px !important;
    }

    .design-size-group,
    .placement-group,
    .viewer-control-separator,
    .extras-group,
    .design-layer-group {
        grid-column: 1 / -1 !important;
    }
}

/* Wider tablets / small laptops: two balanced columns, checkout spans underneath. */
@media (min-width:981px) and (max-width:1180px){
    .creator-row {
        grid-template-columns: minmax(300px,1fr) minmax(0,1.35fr) !important;
        width: min(1080px,100%) !important;
        max-width: 1080px !important;
        min-height: 0 !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .creator-row > .panel-shell {
        min-width: 0 !important;
    }

    .checkout-panel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/* Phones: lock the shirt to the true horizontal center of the live-view stage. */
@media (max-width:760px){
    .viewer-shirt-wrap {
        left: 50% !important;
        right: auto !important;
        margin-inline: 0 !important;
        translate: -50% 0 !important;
        scale: var(--viewer-shirt-scale,1);
        transform: none !important;
    }
}

@media (max-width:430px){
    .viewer-stage {
        height: 318px !important;
    }

    .viewer-stage::before {
        inset: -2% -3% -3% !important;
        background: linear-gradient(rgba(2,11,21,.06),rgba(2,11,21,.18)),
            var(--viewer-bg-image) center top/cover no-repeat !important;
        transform: scale(1.015) translate3d(0,0,0) !important;
    }

    .viewer-shirt-wrap {
        top: 14px !important;
        left: 50% !important;
        translate: -50% 0 !important;
        width: min(228px,61vw) !important;
        height: min(266px,72vw) !important;
    }
}

@media (max-width: 620px) {
    .viewer-measurements-btn {
        top: 8px;
        right: 8px;
        min-height: 25px;
        padding: 0 8px;
        font-size: 8px;
    }

    .viewer-measurements-overlay {
        inset: 39px 8px 8px;
    }

    .measurements-glass-card {
        padding: 13px 11px;
    }

    .measurements-header h3 {
        font-size: 16px;
    }

    .measurements-table {
        font-size: 10px;
    }

    .measurements-table th,
    .measurements-table td {
        padding: 7px 5px;
    }

    .measurements-table thead th {
        font-size: 7px;
    }
}

/* SAFE TO MOVE: Dynamic storefront coupon list. DO NOT RENAME .bundle-coupon-list. */
.bundle-coupon-list {
    display: grid;
    gap: 8px;
}

.trend-empty {
    grid-column: 1/-1;
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed rgba(59,210,255,.35);
    border-radius: 10px;
    color: #a8bed1;
    text-align: center;
    font-size: 12px;
    background: rgba(4,15,30,.55);
}

/* OFFICIAL CART CONTROLS — v2 */
.cart-row-side {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 8px;
}

.cart-remove-btn {
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(244,93,126,.62);
    border-radius: 5px;
    background: rgba(91,19,39,.28);
    color: #ff9ab0;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

.cart-remove-btn:hover {
    background: rgba(133,24,52,.38);
}

@media (max-width:620px){
    .cart-row-side {
        justify-items: start;
    }

    .cart-remove-btn {
        min-height: 28px;
    }
}

/* SAFE TO MOVE: FOOTER PROMO LINKS */
.footer-promo-links {
    width: min(1380px, 92vw);
    margin: 2px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    justify-items: center;
}

.footer-promo-link {
    display: block;
    width: 100%;
    max-width: 460px;
    line-height: 0;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(32, 169, 255, .20);
    border-radius: 10px;
    background: #020914;
    box-shadow: 0 0 20px rgba(0, 133, 255, .12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.footer-promo-link:hover,
.footer-promo-link:focus-visible {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(39, 194, 255, .55);
    box-shadow: 0 0 28px rgba(0, 153, 255, .24);
    outline: none;
}

.youtube-promo-link {
    border-color: rgba(255, 48, 48, .25);
    box-shadow: 0 0 20px rgba(255, 30, 30, .10);
}

.youtube-promo-link:hover,
.youtube-promo-link:focus-visible {
    border-color: rgba(255, 64, 64, .62);
    box-shadow: 0 0 30px rgba(255, 30, 30, .22);
}

.bulk-orders-promo-link {
    border-color: rgba(137, 89, 255, .34);
    box-shadow: 0 0 22px rgba(83, 124, 255, .13), 0 0 18px rgba(174, 66, 255, .08);
}

.bulk-orders-promo-link:hover,
.bulk-orders-promo-link:focus-visible {
    border-color: rgba(156, 121, 255, .68);
    box-shadow: 0 0 30px rgba(56, 165, 255, .20), 0 0 28px rgba(181, 75, 255, .18);
}

.da-gives-promo-link {
    border-color: rgba(255, 125, 230, .34);
    box-shadow: 0 0 24px rgba(86, 214, 255, .14), 0 0 20px rgba(255, 110, 214, .11);
}

.da-gives-promo-link:hover,
.da-gives-promo-link:focus-visible {
    border-color: rgba(255, 162, 236, .7);
    box-shadow: 0 0 34px rgba(92, 223, 255, .24), 0 0 28px rgba(255, 118, 224, .2);
}

.footer-promo-link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
}

@media (max-width: 650px) {
    .footer-promo-links {
        width: min(380px, 78vw);
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0 auto;
    }

    .footer-promo-link {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 430px) {
    .footer-promo-links {
        width: min(330px, 84vw);
    }
}

/* END SAFE TO MOVE: FOOTER PROMO LINKS */
/* =========================================================
   DA OUTLET — BULK PRICING + SHIPPING CHECKOUT v10
   ========================================================= */
.bulk-pricing-card {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(83,220,255,.28);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(19,47,75,.34),rgba(9,17,31,.32));
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.bulk-pricing-title {
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: center;
}

.bulk-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
}

.bulk-pricing-grid span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 7px;
    border: 1px solid rgba(170,225,248,.15);
    border-radius: 6px;
    background: rgba(4,14,27,.36);
    font-size: 9px;
}

.bulk-pricing-grid span:last-child {
    grid-column: 1/-1;
}

.bulk-pricing-grid b {
    color: #9cb4c6;
}

.bulk-pricing-grid strong {
    color: #f3fcff;
}

.bulk-pricing-card p {
    margin: 7px 0 0;
    color: #91a7b8;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.bulk-pricing-card .bulk-invoice-note {
    color: #c7dbeb;
}

.shipping-checkout-dialog {
    width: min(700px,calc(100vw - 28px));
}

.shipping-quote-form {
    padding: 18px 20px 20px;
}

.shipping-dialog-intro {
    margin: 0 0 15px;
    color: #a9bdcc;
    font-size: 12px;
    line-height: 1.55;
}

.shipping-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.shipping-fields-grid label {
    display: grid;
    gap: 6px;
    color: #8ea9bd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.shipping-fields-grid label span {
    font-weight: 600;
    color: #6f8495;
}

.shipping-fields-grid input,
.shipping-fields-grid select {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(137,204,235,.28);
    border-radius: 8px;
    background: rgba(4,14,27,.58);
    color: #eefbff;
    outline: 0;
}

.shipping-fields-grid input:focus,
.shipping-fields-grid select:focus {
    border-color: rgba(74,230,255,.72);
    box-shadow: 0 0 0 2px rgba(55,203,255,.08);
}

.shipping-calc-btn {
    width: 100%;
    margin-top: 14px;
}

.shipping-quote-result {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(132,208,237,.2);
    border-radius: 10px;
    background: rgba(4,15,28,.42);
    color: #9fb4c5;
    font-size: 11px;
    line-height: 1.5;
}

.shipping-quote-result.ready {
    border-color: rgba(102,236,255,.48);
    background: rgba(14,54,77,.28);
}

.shipping-quote-breakdown {
    display: grid;
    gap: 7px;
}

.shipping-quote-breakdown>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.shipping-quote-breakdown span {
    color: #8ca5b7;
}

.shipping-quote-breakdown strong {
    color: #f0fbff;
}

.shipping-quote-breakdown .shipping-total {
    padding-top: 8px;
    border-top: 1px solid rgba(144,212,239,.2);
    font-size: 13px;
}

.shipping-tier-pill {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 7px;
    border: 1px solid rgba(99,230,255,.38);
    border-radius: 999px;
    color: #9cf3ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
}

.shipping-checkout-actions {
    display: grid;
    grid-template-columns: .8fr 1.6fr;
    gap: 10px;
    margin-top: 14px;
}

.shipping-checkout-actions button {
    min-height: 44px;
}

.shipping-checkout-actions button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.shipping-checkout-note {
    margin: 12px 0 0;
    color: #71889a;
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width:600px){
    .shipping-fields-grid {
        grid-template-columns: 1fr;
    }

    .shipping-checkout-actions {
        grid-template-columns: 1fr;
    }

    .bulk-pricing-grid {
        grid-template-columns: 1fr;
    }

    .bulk-pricing-grid span:last-child {
        grid-column: auto;
    }
}

/* DA Outlet v11 — free standard shipping confirmation */
.free-shipping-confirmation {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(117,255,215,.38);
    border-radius: 8px;
    background: rgba(44,174,137,.10);
    color: #baffea;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    box-shadow: inset 0 0 18px rgba(96,255,214,.05);
}

/* =========================================================
   PACKAGE 2 — FINAL CREATOR PANEL / PRESET RESPONSIVE TUNING
   Desktop: keep all three main panels the same length and give the
   Design Studio a little more horizontal room.
   Mobile: keep style presets compact in two columns.
   ========================================================= */
@media (min-width:1181px){
    .creator-row {
        grid-template-columns: minmax(340px,1.18fr) minmax(500px,1.62fr) minmax(270px,.90fr) !important;
        align-items: stretch !important;
        min-height: 0 !important;
    }

    .creator-row > .panel-shell,
    .design-studio,
    .realtime-viewer,
    .checkout-panel {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
}

@media (max-width:760px){
    .style-preset-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    .style-preset-btn {
        padding: 2px !important;
        border-radius: 9px !important;
    }

    .style-preset-btn img {
        width: 100% !important;
        height: auto !important;
    }

    .design-style-presets {
        margin-top: 10px;
        padding-top: 9px;
    }

    .preset-help,
    .preset-selection-status {
        font-size: 10px;
    }
}

@media (max-width:380px){
    .style-preset-grid {
        gap: 5px !important;
    }

    .style-preset-btn {
        padding: 1px !important;
    }
}

/* =========================================================
   PACKAGE 2 EXPERIMENT — INTEGRATED DESIGN STUDIO + VIEWER
   Design Studio tools now live inside the Real-Time Viewer panel.
   Keep IDs/data attributes intact for AI/viewer logic and Pinegrow editing.
   ========================================================= */
.integrated-creator-panel {
    padding: 22px;
    min-width: 0;
}

.integrated-studio-intro {
    margin-bottom: 16px;
}

.integrated-studio-title,
.integrated-viewer-title {
    margin-bottom: 14px !important;
}

.studio-intro-copy {
    padding: 14px 18px;

    /* border: 1px solid rgba(45, 239, 255, 0.42) */
    border-radius: 14px;
    background: 0px(135deg,rgba(27,39,52,.26),rgba(9,18,31,.16));

    /* backdrop-filter: blur(10px) */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255,255,255,.045);
    text-align: center;
}

.studio-intro-copy h3 {
    margin: 0 0 5px;
    color: #f1fdff;
    font-size: 27px;
    font-weight: 900;
    border-color: #007eff;
    border-left-width: 0px;
    text-shadow: -4px 0px 6px #007eff;
}

.studio-intro-quote {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 14px;
}

.studio-intro-points {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.studio-intro-points p {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #007eff;
    border-radius: 9px;

    /* background: rgba(3,14,27,.24) */
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
}

.studio-intro-points strong {
    color: #effdff;
}

.integrated-creator-panel .viewer-stage {
    width: 100%;
}

.studio-prompt-card {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #007eff;
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(15,31,49,.28),rgba(7,16,30,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.studio-prompt-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.studio-prompt-heading strong {
    color: #f3fdff;
    font-size: 11px;
    letter-spacing: .08em;
}

.studio-prompt-heading span {
    color: #9fb0c1;
    font-size: 11px;
    text-align: right;
}

.integrated-creator-panel #designPrompt {
    min-height: 106px;
    resize: vertical;
}

.studio-workbench {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(310px,.82fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.studio-presets-column,
.studio-actions-column {
    min-width: 0;
}

.studio-presets-column .design-style-presets {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(91,189,229,.30);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(16,32,50,.25),rgba(7,16,29,.14));
}

.studio-presets-column .style-preset-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
}

.studio-presets-column .style-preset-btn {
    min-width: 0;
    padding: 2px;
    border-radius: 9px;
}

.studio-presets-column .style-preset-btn img {
    width: 100%;
    height: auto;
}

.studio-actions-column {
    padding: 14px;
    border: 1px solid rgba(174,103,255,.25);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(18,28,48,.25),rgba(12,10,31,.14));
}

.studio-actions-column .design-action-stack {
    margin-top: 0;
    gap: 8px;
}

.studio-actions-column .studio-image-btn {
    margin-top: 0;
}

.studio-actions-column .recent-generations-block {
    margin-top: 12px;
}

.studio-actions-column .or-divider {
    margin: 12px 0;
}

.studio-actions-column .upload-box {
    padding: 12px;
}

.studio-actions-column .upload-box h3 {
    font-size: 14px;
}

.studio-actions-column .upload-help {
    font-size: 11px;
    line-height: 1.35;
}

.studio-actions-column .inline-status {
    margin-top: 9px;
}

.integrated-creator-panel .viewer-controls {
    margin-top: 18px;
    border-top: 1px solid rgba(137,205,239,.16);
    padding-top: 18px !important;
}

@media (min-width:1181px){
    .integrated-creator-row {
        grid-template-columns: minmax(0,2.65fr) minmax(300px,.78fr) !important;
        width: min(var(--editor-max),100%) !important;
        max-width: none !important;
        gap: 22px !important;
        align-items: start !important;
        min-height: 0 !important;
    }

    .integrated-creator-row > .integrated-creator-panel {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .integrated-creator-row > .checkout-panel {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        justify-self: stretch !important;
    }

    .integrated-creator-panel .viewer-stage {
        height: 470px !important;
    }

    .integrated-creator-panel .viewer-shirt-wrap {
        top: 12px !important;
        width: 405px !important;
        height: 444px !important;
    }
}

@media (min-width:981px) and (max-width:1180px){
    .integrated-creator-row {
        grid-template-columns: minmax(0,2.25fr) minmax(285px,.85fr) !important;
        width: min(1120px,100%) !important;
        max-width: 1120px !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .integrated-creator-row > .integrated-creator-panel {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .integrated-creator-row > .checkout-panel {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        justify-self: stretch !important;
    }

    .studio-workbench {
        grid-template-columns: minmax(0,1.35fr) minmax(280px,.9fr);
    }

    .studio-presets-column .style-preset-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width:980px){
    .integrated-creator-row {
        grid-template-columns: minmax(0,1fr) !important;
        width: min(760px,100%) !important;
        max-width: 760px !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .integrated-creator-row > .integrated-creator-panel,
    .integrated-creator-row > .checkout-panel {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        justify-self: stretch !important;
    }

    .studio-workbench {
        grid-template-columns: minmax(0,1fr) !important;
    }

    .studio-presets-column .style-preset-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .integrated-creator-panel {
        padding: 12px !important;
    }

    .integrated-studio-intro {
        margin-bottom: 12px;
    }

    .studio-intro-copy {
        padding: 11px;
    }

    .studio-intro-points {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .studio-intro-points p {
        padding: 6px 8px;
        font-size: 10px;
    }

    .studio-prompt-card {
        margin-top: 12px;
        padding: 10px;
    }

    .studio-prompt-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .studio-prompt-heading span {
        text-align: left;
    }

    .integrated-creator-panel #designPrompt {
        min-height: 92px;
    }

    .studio-workbench {
        margin-top: 12px;
        gap: 12px;
    }

    .studio-presets-column .design-style-presets,
    .studio-actions-column {
        padding: 10px;
    }

    .studio-presets-column .style-preset-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    .studio-presets-column .style-preset-btn {
        min-height: 0 !important;
        max-height: 48px;
        padding: 1px !important;
        overflow: hidden;
    }

    .studio-presets-column .style-preset-btn img {
        width: 100% !important;
        height: 46px !important;
        object-fit: contain;
    }

    .studio-actions-column .design-action-stack {
        gap: 6px;
    }

    .studio-actions-column .image-action-btn {
        width: min(100%,380px);
        margin-inline: auto;
    }

    .studio-actions-column .recent-generations-grid {
        max-width: 420px;
        margin-inline: auto;
    }

    .integrated-creator-panel .viewer-controls {
        margin-top: 14px;
        padding-top: 14px !important;
    }
}

@media (max-width:420px){
    .studio-presets-column .style-preset-btn {
        max-height: 42px;
    }

    .studio-presets-column .style-preset-btn img {
        height: 40px !important;
    }
}

/* =========================================================
   PACKAGE 2 — VIEWER-FIRST STUDIO + PRECISION PLACEMENT
   Shirt controls surround the viewer; presets live inside the prompt card.
   ========================================================= */
.viewer-top-controls {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid  #007eff;
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(12,29,47,.22),rgba(6,15,27,.10));
}

.viewer-top-controls .control-label,
.viewer-under-controls .control-label {
    display: block;
    margin-bottom: 7px;
    color: #f3fdff;
    font-size: 13px;
    font-weight: 800;
}

.viewer-top-controls .choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.viewer-under-controls {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid  #007eff;
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(12,29,47,.18),rgba(6,15,27,.08));
}

.viewer-under-size .choice-row,
.viewer-under-view .choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.viewer-under-view {
    justify-self: end;
    text-align: right;
}

.viewer-under-view .choice-row {
    justify-content: flex-end;
}

.viewer-recent-generations {
    margin-top: 10px !important;
    padding: 12px !important;
    border: 1px solid #007eff;
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(16,32,50,.20),rgba(7,16,29,.10));
}

.studio-prompt-card {
    margin-top: 12px !important;
}

.prompt-style-presets {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(210,230,244,.15);
}

.prompt-style-presets .design-style-presets-heading {
    margin-bottom: 7px;
}

.prompt-style-presets .style-preset-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(75,219,255,.50) rgba(5,17,31,.20);
}

.prompt-style-presets .style-preset-btn {
    flex: 0 0 104px;
    min-width: 104px;
    padding: 1px !important;
    border-radius: 9px !important;
    scroll-snap-align: start;
}

.prompt-style-presets .style-preset-btn img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.prompt-style-presets .preset-selection-status {
    margin-top: 2px;
    font-size: 9px;
}

.integrated-action-zone {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #007eff;
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(18,28,48,.20),rgba(12,10,31,.10));
}

.primary-ai-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    align-items: center;
}

.primary-ai-actions .studio-image-btn {
    width: 100%;
    margin: 0;
}

.compact-upload-zone {
    display: grid;
    grid-template-columns: minmax(180px,1fr) minmax(220px,360px);
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(137,205,239,.14);
}

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

.compact-upload-copy strong {
    color: #ffffff;
    font-size: 11px;
    letter-spacing: .07em;
}

.compact-upload-copy span {
    margin-top: 3px;
    color: #9fb0c1;
    font-size: 10px;
    padding-right: 0px;
}

.compact-upload-zone .studio-image-btn {
    margin: 0;
}

.precision-viewer-controls {
    display: grid !important;
    grid-template-columns: minmax(230px,.72fr) minmax(0,1.45fr) !important;
    gap: 16px !important;
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
}

.precision-viewer-controls .design-size-group,
.precision-viewer-controls .precision-placement-group {
    grid-column: auto !important;
}

.precision-viewer-controls .viewer-control-separator,
.precision-viewer-controls .extras-group,
.precision-viewer-controls .design-layer-group {
    grid-column: 1 / -1 !important;
}

.precision-placement-shell {
    display: grid;
    grid-template-columns: minmax(0,1fr) 76px;
    grid-template-areas: "horizontal vertical"
      "actions vertical";
    gap: 12px 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(72,213,255,.25);
    border-radius: 12px;
    background: rgba(4,17,31,.22);
}

.placement-horizontal-control {
    grid-area: horizontal;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px 10px;
    align-items: center;
}

.precision-slider-label {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    color: #8ea8ba;
    font-size: 8px;
    letter-spacing: .06em;
}

.precision-slider-label strong {
    color: #eafcff;
    text-align: center;
    font-size: 10px;
}

.placement-axis-slider {
    accent-color: #45e6ff;
    cursor: ew-resize;
}

.placement-x-slider {
    width: 100%;
}

.placement-horizontal-control output,
.placement-vertical-control output {
    color: #70efff;
    font-size: 10px;
    font-weight: 900;
}

.placement-vertical-control {
    grid-area: vertical;
    display: grid;
    grid-template-rows: auto 150px auto auto;
    justify-items: center;
    gap: 5px;
    min-width: 66px;
}

.placement-y-slider {
    width: 150px;
    height: 24px;
    transform: rotate(90deg);
    transform-origin: center;
    margin: 63px 0;
    cursor: ns-resize;
}

.axis-word {
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
}

.placement-utility-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.precision-placement-btn {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
}

.no-print-btn.selected {
    border-color: rgba(255,155,65,.92) !important;
    box-shadow: 0 0 10px rgba(255,126,35,.18) !important;
}

.art-zone.placement-custom {
    left: var(--art-x,50%);
    top: var(--art-y,49%);
    width: 32%;
    height: 30%;
}

@media (min-width:1181px){
    .integrated-creator-row {
        grid-template-columns: minmax(0,3.05fr) minmax(300px,.78fr) !important;
    }

    .integrated-creator-panel .viewer-stage {
        height: 500px !important;
        box-shadow: 0px 0px 69px 2px #00b4ff , 0px 0px 1px 3px #007eff;
    }

    .integrated-creator-panel .viewer-shirt-wrap {
        width: 430px !important;
        height: 470px !important;
    }
}

@media (max-width:760px){
    .viewer-top-controls {
        padding: 8px;
        margin-bottom: 8px;
    }

    .viewer-top-controls .choice-row {
        gap: 5px;
    }

    .viewer-top-controls .choice-btn {
        min-height: 32px !important;
        padding-inline: 9px !important;
        font-size: 10px !important;
    }

    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 8px;
        padding: 8px;
        margin-top: 8px;
    }

    .viewer-under-size .choice-row,
    .viewer-under-view .choice-row {
        gap: 4px;
    }

    .viewer-under-controls .choice-btn {
        min-height: 31px !important;
        min-width: 42px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .viewer-under-view .view-btn {
        min-width: 52px !important;
    }

    .viewer-recent-generations {
        padding: 9px !important;
        margin-top: 8px !important;
    }

    .prompt-style-presets .style-preset-grid {
        gap: 5px !important;
        padding-bottom: 6px;
    }

    .prompt-style-presets .style-preset-btn {
        flex-basis: 82px;
        min-width: 82px;
        max-height: 36px;
        overflow: hidden;
    }

    .prompt-style-presets .style-preset-btn img {
        height: 34px !important;
        object-fit: contain;
    }

    .primary-ai-actions {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .primary-ai-actions .studio-image-btn,
    .compact-upload-zone .studio-image-btn {
        width: min(100%,360px);
        margin-inline: auto;
    }

    .compact-upload-zone {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 7px;
    }

    .precision-viewer-controls {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .precision-placement-shell {
        grid-template-columns: minmax(0,1fr) 66px;
        gap: 10px 10px;
        padding: 10px;
    }

    .placement-vertical-control {
        min-width: 58px;
    }

    .precision-placement-btn {
        flex: 1 1 130px;
    }
}

@media (max-width:430px){
    .prompt-style-presets .style-preset-btn {
        flex-basis: 74px;
        min-width: 74px;
        max-height: 32px;
    }

    .prompt-style-presets .style-preset-btn img {
        height: 30px !important;
    }

    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) auto;
    }

    .viewer-under-controls .choice-btn {
        min-width: 38px !important;
        padding: 0 5px !important;
    }
}

/* =========================================================
   PACKAGE 2 — VIEWER-INTEGRATED PRECISION CONTROLS REFINEMENT
   Design size across top, vertical placement left, horizontal placement bottom.
   Extras precede Recent Generations. Checkout follows page on desktop.
   ========================================================= */
/* Precision sliders live inside the actual T-shirt viewer window. */
.viewer-stage {
    position: relative;
}

.viewer-overlay-control {
    position: absolute !important;
    z-index: 8;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid  rgba(0, 207, 255, 0.42);
    border-radius: 10px !important;
    background: rgba(85, 163, 255, 0.3);
    box-shadow: 0 5px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(7px) saturate(125%);
    -webkit-backdrop-filter: blur(7px) saturate(125%);
}

.viewer-design-size-overlay {
    top: 10px;
    left: 16px;
    right: 118px;
    display: grid !important;
    grid-template-columns: auto minmax(120px,1fr) auto;
    gap: 8px;
    align-items: center;
}

.viewer-design-size-overlay .control-label {
    margin: 0 !important;
    white-space: nowrap;
    color: #f2fdff;
    font-size: 10px !important;
    font-weight: 900;
}

.viewer-design-size-overlay .control-label small {
    display: none;
}

.viewer-design-size-overlay .design-size-slider {
    width: 100%;
    margin: 0;
}

.viewer-design-size-overlay output {
    min-width: 38px;
    color: #7ff2ff;
    font-size: 10px;
    font-weight: 900;
    text-align: right;
}

.viewer-horizontal-placement-overlay {
    left: 72px;
    right: 18px;
    bottom: 10px;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 4px 8px !important;
    align-items: center;
}

.viewer-horizontal-placement-overlay .precision-slider-label {
    grid-column: 1 / -1;
    font-size: 7px;
}

.viewer-horizontal-placement-overlay .precision-slider-label strong {
    font-size: 9px;
}

.viewer-horizontal-placement-overlay .placement-x-slider {
    width: 100%;
    margin: 0;
}

.viewer-horizontal-placement-overlay output,
.viewer-vertical-placement-overlay output {
    color: #7ff2ff;
    font-size: 9px;
    font-weight: 900;
}

.viewer-vertical-placement-overlay {
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    min-width: 52px !important;
    height: 244px;
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
    justify-items: center;
    align-items: center;
    gap: 3px !important;
}

.viewer-vertical-placement-overlay .placement-y-slider {
    width: 174px;
    height: 20px;
    transform: rotate(90deg);
    transform-origin: center;
    margin: 0;
}

.viewer-vertical-placement-overlay .axis-word {
    font-size: 7px;
    line-height: 1;
}

/* Placement utility controls remain just below Shirt Size / Shirt View. */
.placement-utility-group {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(82,206,246,.18);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(12,29,47,.18),rgba(6,15,27,.08));
}

.placement-utility-group > .control-label {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.placement-utility-group .precision-placement-shell {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.placement-utility-group .placement-utility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.placement-utility-group .placement-hint {
    margin: 7px 0 0;
}

/* Extras now sit above Recent Generations. */
.integrated-creator-panel > .viewer-control-separator {
    margin-top: 12px;
}

.integrated-creator-panel > .extras-group,
.integrated-creator-panel > .design-layer-group {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px solid #007eff;
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(12,29,47,.18),rgba(6,15,27,.08));
}

.integrated-creator-panel > .extras-group .extras-choice-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.viewer-recent-generations {
    margin-top: 10px !important;
}

/* Design Notes belongs to ORDER T-SHIRT now. */
.checkout-design-notes-wrap {
    display: block;
    margin: 16px 0 4px;
    padding: 11px;
    border: 1px solid rgba(89,205,244,.20);
    border-radius: 11px;
    background: linear-gradient(145deg,rgba(13,29,48,.20),rgba(7,16,29,.10));
}

.checkout-design-notes-wrap .design-notes-label {
    margin-bottom: 7px;
    color: #ffffff;
}

.checkout-design-notes-wrap .design-notes-input {
    min-height: 72px;
}

/* Desktop: order panel follows the viewport but stops at the bottom of the studio row. */
@media (min-width:981px){
    .integrated-creator-row > .checkout-panel {
        position: sticky !important;
        top: 16px;
        align-self: start !important;
    }
}

/* Mobile/tablet: normal document flow, no sticky checkout. */
@media (max-width:980px){
    .integrated-creator-row > .checkout-panel {
        position: static !important;
        top: auto !important;
    }
}

/* Mobile presets: 5 across × 2 rows, no horizontal scrolling. */
@media (max-width:760px){
    .prompt-style-presets .style-preset-grid {
        display: grid !important;
        grid-template-columns: repeat(5,minmax(0,1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 3px 0 5px !important;
        scroll-snap-type: none !important;
    }

    .prompt-style-presets .style-preset-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        max-height: none !important;
        padding: 1px !important;
        border-radius: 6px !important;
    }

    .prompt-style-presets .style-preset-btn img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 1;
        object-fit: contain;
    }

    .prompt-style-presets .design-style-presets-heading span {
        display: none;
    }

    .viewer-design-size-overlay {
        top: 7px;
        left: 8px;
        right: 96px;
        grid-template-columns: auto minmax(70px,1fr) auto;
        padding: 5px 7px !important;
    }

    .viewer-design-size-overlay .control-label {
        font-size: 8px !important;
    }

    .viewer-horizontal-placement-overlay {
        left: 56px;
        right: 8px;
        bottom: 7px;
        padding: 5px 7px !important;
    }

    .viewer-vertical-placement-overlay {
        left: 5px;
        width: 44px;
        min-width: 44px !important;
        height: 206px;
        padding: 5px !important;
    }

    .viewer-vertical-placement-overlay .placement-y-slider {
        width: 144px;
    }

    .integrated-creator-panel > .extras-group .extras-choice-grid {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .checkout-design-notes-wrap {
        margin-top: 12px;
    }
}

@media (max-width:430px){
    .prompt-style-presets .style-preset-grid {
        gap: 3px !important;
    }

    .viewer-design-size-overlay {
        right: 86px;
    }

    .viewer-horizontal-placement-overlay .precision-slider-label strong {
        font-size: 8px;
    }
}

/* =========================================================
   PACKAGE 2 — PRECISION SLIDER VISIBILITY / PLACEMENT FIX
   Final authoritative overrides.
   ========================================================= */
@keyframes daPrecisionControlGlow {
    0%,
    100% {
        border-color: rgba(72,220,255,.42);
        box-shadow: 0 0 8px rgba(45,235,255,.13), inset 0 1px 0 rgba(255,255,255,.05);
    }

    50% {
        border-color: rgba(122,243,255,.88);
        box-shadow: 0 0 18px rgba(45,235,255,.34), 0 0 28px rgba(96,106,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
    }
}

@keyframes daPrecisionThumbGlow {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(46,240,255,.14), 0 0 9px rgba(46,240,255,.28);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(46,240,255,.24), 0 0 18px rgba(46,240,255,.70);
    }
}

/* Make the three in-viewer controls visibly interactive without obscuring the shirt. */
.viewer-design-size-overlay,
.viewer-horizontal-placement-overlay,
.viewer-vertical-placement-overlay {
    animation: daPrecisionControlGlow 2.15s ease-in-out infinite !important;
}

.viewer-horizontal-placement-overlay {
    animation-delay: -.7s !important;
}

.viewer-vertical-placement-overlay {
    animation-delay: -1.35s !important;
}

/* Keep Design Size clear of MEASUREMENTS on every desktop width. */
.viewer-design-size-overlay {
    left: 16px !important;
    right: 175px !important;
    max-width: 520px !important;
    grid-template-columns: auto minmax(78px,1fr) auto !important;
}

/* Give all range controls a more obvious luminous rail. */
.viewer-overlay-control input[type="range"] {
    filter: drop-shadow(0 0 4px rgba(70,235,255,.70));
}

.viewer-overlay-control input[type="range"]::-webkit-slider-thumb {
    animation: daPrecisionThumbGlow 1.8s ease-in-out infinite;
}

.viewer-overlay-control input[type="range"]::-moz-range-thumb {
    animation: daPrecisionThumbGlow 1.8s ease-in-out infinite;
}

.placement-axis-slider::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(54,224,255,.92),rgba(134,100,255,.90));
    box-shadow: 0 0 10px rgba(54,224,255,.36);
}

.placement-axis-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #efffff;
    border-radius: 50%;
    background: #092033;
}

.placement-axis-slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(54,224,255,.92),rgba(134,100,255,.90));
    box-shadow: 0 0 10px rgba(54,224,255,.36);
}

.placement-axis-slider::-webkit-slider-thumb {
    margin-top: -6px;
}

/* Correct the vertical control: keep its rail truly vertical and centered
   just to the left of the shirt, rather than using an oversized rotated box. */
.viewer-vertical-placement-overlay {
    left: calc(50% - 245px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px;
    min-width: 38px !important;
    height: 222px !important;
    padding: 6px 4px !important;
    grid-template-rows: auto minmax(0,1fr) auto auto !important;
    gap: 4px !important;
}

.viewer-vertical-placement-overlay .placement-y-slider {
    width: 18px !important;
    height: 154px !important;
    margin: 0 !important;
    transform: none !important;
    writing-mode: vertical-lr;
    direction: ltr;
    cursor: ns-resize;
    justify-self: center;
    align-self: center;
    accent-color: #45e6ff;
}

.viewer-vertical-placement-overlay .placement-y-slider::-moz-range-track {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,rgba(54,224,255,.92),rgba(134,100,255,.90));
}

.viewer-vertical-placement-overlay .placement-y-slider::-webkit-slider-runnable-track {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,rgba(54,224,255,.92),rgba(134,100,255,.90));
}

.viewer-vertical-placement-overlay .axis-word {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap;
    font-weight: bold;
}

.viewer-vertical-placement-overlay output {
    font-size: 8px !important;
}

@media (min-width:981px) and (max-width:1180px) {
    .viewer-vertical-placement-overlay {
        left: calc(50% - 228px) !important;
    }
}

@media (max-width:980px) {
    .viewer-design-size-overlay {
        left: 10px !important;
        right: 132px !important;
        max-width: none !important;
    }

    .viewer-vertical-placement-overlay {
        left: max(7px, calc(50% - 145px)) !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 200px !important;
        padding: 5px 3px !important;
    }

    .viewer-vertical-placement-overlay .placement-y-slider {
        width: 18px !important;
        height: 136px !important;
    }
}

@media (max-width:620px) {
    .viewer-design-size-overlay {
        top: 7px !important;
        left: 7px !important;
        right: 118px !important;
        padding: 5px 6px !important;
        grid-template-columns: auto minmax(48px,1fr) 30px !important;
        gap: 5px !important;
    }

    .viewer-design-size-overlay .control-label {
        font-size: 7px !important;
    }

    .viewer-design-size-overlay output {
        min-width: 28px !important;
        font-size: 8px !important;
    }

    .viewer-vertical-placement-overlay {
        left: max(5px, calc(50% - 137px)) !important;
        height: 184px !important;
    }

    .viewer-vertical-placement-overlay .placement-y-slider {
        height: 122px !important;
    }
}

@media (max-width:430px) {
    .viewer-design-size-overlay {
        right: 112px !important;
    }

    .viewer-vertical-placement-overlay {
        left: max(4px, calc(50% - 132px)) !important;
        width: 32px !important;
        min-width: 32px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-design-size-overlay,
    .viewer-horizontal-placement-overlay,
    .viewer-vertical-placement-overlay,
    .viewer-overlay-control input[type="range"]::-webkit-slider-thumb,
    .viewer-overlay-control input[type="range"]::-moz-range-thumb {
        animation: none !important;
    }
}

/* =========================================================
   PACKAGE 2 — PRECISION SLIDER COLOR + INLINE OPTIONS REFINEMENT
   Authoritative overrides. Slider colors are inherited from the inline
   Pinegrow-editable CSS variables on each viewer overlay control.
   ========================================================= */
/* Shared slider geometry so horizontal and vertical placement rails match. */
.viewer-stage {
    --precision-slider-length: 154px;
}

/* Remove native white range backgrounds and make placement rails visually
   match the Design Size slider. */
.viewer-overlay-control input[type="range"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 0px !important;
    box-shadow: none !important;
    accent-color: var(--slider-track-start,#2de7ff) !important;
    filter: drop-shadow(0 0 4px var(--slider-glow-color,#2ef0ff)) !important;
    margin-right: 0px;
}

/* Design Size uses the same Pinegrow-editable colors. */
.viewer-design-size-overlay .design-size-slider {
    background: linear-gradient(90deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),
                0 0 10px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-overlay-control input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-overlay-control input[type="range"]::-moz-range-thumb {
    width: 13px !important;
    height: 13px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

/* Horizontal placement: compact control centered under the shirt.
   The rail itself is exactly the same length as the vertical rail. */
.viewer-horizontal-placement-overlay {
    left: 50% !important;
    right: auto !important;
    bottom: 4px;
    width: calc(var(--precision-slider-length) + 80px);
    max-width: calc(100% - 96px) !important;
    transform: translateX(-50%) !important;
    grid-template-columns: var(--precision-slider-length) 34px !important;
    justify-content: center !important;
    padding: 6px 8px !important;
}

.viewer-horizontal-placement-overlay .precision-slider-label {
    width: var(--precision-slider-length) !important;
    justify-self: start !important;
}

.viewer-horizontal-placement-overlay .placement-x-slider {
    width: var(--precision-slider-length) !important;
    min-width: var(--precision-slider-length) !important;
    height: 15px !important;
    margin: 0 !important;
}

.placement-x-slider::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.placement-x-slider::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.placement-x-slider::-webkit-slider-thumb {
    margin-top: -5.5px !important;
}

/* Vertical placement: same rail length as horizontal, no native white strip. */
.viewer-vertical-placement-overlay {
    height: calc(var(--precision-slider-length) + 68px) !important;
}

.viewer-vertical-placement-overlay .placement-y-slider {
    width: 18px !important;
    height: var(--precision-slider-length) !important;
    min-height: var(--precision-slider-length) !important;
    background: transparent !important;
    writing-mode: vertical-lr !important;
    direction: ltr !important;
}

.viewer-vertical-placement-overlay .placement-y-slider::-webkit-slider-runnable-track {
    width: 4px !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-vertical-placement-overlay .placement-y-slider::-moz-range-track {
    width: 4px !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

/* Precise Placement now lives inline between Shirt Size and Shirt View.
   Remove the former separate panel treatment entirely. */
.viewer-under-controls {
    grid-template-columns: minmax(0,1fr) minmax(190px,.72fr) auto !important;
    align-items: end !important;
}

.precision-inline-placement {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0;
}

.precision-inline-placement .control-label {
    margin-bottom: 7px !important;
    text-align: center;
}

.precision-inline-placement .control-label small {
    display: block;
    margin-top: 2px;
    color: #71efff;
    font-size: 8px;
}

.precision-inline-placement .placement-utility-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.precision-inline-placement .precision-placement-btn {
    width: 100%;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    font-weight: bold;
}

/* The old standalone placement panel is gone; keep any generic styling from
   recreating a panel around the moved controls. */
.placement-utility-group.precision-inline-placement {
    border: 0 !important;
    background: transparent !important;
}

@media (min-width:621px) and (max-width:980px) {
    .viewer-stage {
        --precision-slider-length: 136px;
    }

    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) minmax(174px,.82fr) auto !important;
        gap: 10px !important;
    }

    .precision-inline-placement .precision-placement-btn {
        min-height: 32px !important;
        font-size: 8px !important;
        padding: 0 6px !important;
    }
}

@media (max-width:620px) {
    .viewer-stage {
        --precision-slider-length: 122px;
    }

    .viewer-horizontal-placement-overlay {
        width: calc(var(--precision-slider-length) + 50px) !important;
        grid-template-columns: var(--precision-slider-length) 28px !important;
        max-width: calc(100% - 76px) !important;
        bottom: 7px !important;
    }

    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 8px !important;
    }

    .precision-inline-placement {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .precision-inline-placement .control-label {
        text-align: left;
    }

    .precision-inline-placement .control-label small {
        display: inline;
        margin-left: 4px;
    }

    .precision-inline-placement .placement-utility-actions {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   PACKAGE 2 — FINAL VIEWER CONTROL RESTORE
   Keep Shirt View at the far-right beneath the viewer.
   Restore Design Size inside the viewer and make all three slider rails
   share the same visual language. Pinegrow-editable colors still come from
   the inline --slider-* variables on each overlay in index.html.
   ========================================================= */
/* Keep the under-viewer row in the intended Size | Precise Placement | View order. */
@media (min-width:621px) {
    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) minmax(190px,.72fr) auto !important;
        align-items: end !important;
    }

    .viewer-under-size {
        justify-self: stretch !important;
    }

    .precision-inline-placement {
        justify-self: stretch !important;
    }

    .viewer-under-view {
        justify-self: end !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    .viewer-under-view .control-label {
        justify-content: flex-end !important;
        text-align: right !important;
    }

    .viewer-under-view .choice-row {
        justify-content: flex-end !important;
    }
}

/* Design Size: visible, compact, centered above the shirt on desktop. */
@media (min-width:981px) {
    .viewer-design-size-overlay {
        top: 10px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(var(--precision-slider-length) + 135px);
        max-width: calc(100% - 230px) !important;
        transform: translateX(-50%) !important;
        grid-template-columns: 70px var(--precision-slider-length) 34px !important;
        gap: 6px !important;
        padding: 6px 8px !important;
    }
}

.viewer-design-size-overlay {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.viewer-design-size-overlay .design-size-slider {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: var(--precision-slider-length) !important;
    min-width: var(--precision-slider-length) !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: drop-shadow(0 0 4px var(--slider-glow-color,#2ef0ff)) !important;
}

/* Same luminous rail used by the horizontal placement slider. */
.viewer-design-size-overlay .design-size-slider::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-design-size-overlay .design-size-slider::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
      var(--slider-track-start,#2de7ff),
      var(--slider-track-end,#af40e8)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-design-size-overlay .design-size-slider::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    margin-top: -5.5px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-design-size-overlay .design-size-slider::-moz-range-thumb {
    width: 13px !important;
    height: 13px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-design-size-overlay .control-label {
    margin: 0 !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
}

.viewer-design-size-overlay output {
    min-width: 30px !important;
    text-align: right !important;
}

/* Tablet: keep Design Size compact and clear of MEASUREMENTS. */
@media (min-width:621px) and (max-width:980px) {
    .viewer-design-size-overlay {
        top: 8px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(var(--precision-slider-length) + 104px) !important;
        max-width: calc(100% - 190px) !important;
        transform: translateX(-50%) !important;
        grid-template-columns: 62px var(--precision-slider-length) 30px !important;
        gap: 5px !important;
        padding: 5px 7px !important;
    }
}

/* Mobile keeps Shirt View on the right beneath the viewer while letting the
   precision utility controls wrap below without moving View away from the corner. */
@media (max-width:620px) {
    .viewer-under-controls {
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: end !important;
    }

    .viewer-under-view {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        text-align: right !important;
    }

    .viewer-under-view .choice-row {
        justify-content: flex-end !important;
    }

    .precision-inline-placement {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .viewer-design-size-overlay {
        top: 7px !important;
        left: 8px !important;
        right: 112px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        grid-template-columns: auto minmax(56px,1fr) 28px !important;
        gap: 5px !important;
        padding: 5px 6px !important;
    }

    .viewer-design-size-overlay .design-size-slider {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   PACKAGE 2 — SHIRT VIEW DESKTOP/TABLET POSITION LOCK
   Keep Shirt View anchored to the far-right corner directly beneath
   the T-shirt viewer while Shirt Size remains left and Precise Placement
   stays between them. Mobile positioning is intentionally unchanged.
   ========================================================= */
@media (min-width:621px) {
    .viewer-under-controls {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: max-content minmax(210px,1fr) max-content !important;
        grid-template-areas: "size placement view" !important;
        column-gap: 18px !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }

    .viewer-under-size {
        grid-area: size !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .precision-inline-placement {
        grid-area: placement !important;
        justify-self: center !important;
        width: min(100%, 360px) !important;
        min-width: 210px !important;
    }

    .viewer-under-view {
        grid-area: view !important;
        justify-self: end !important;
        align-self: end !important;
        width: max-content !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    .viewer-under-view .control-label {
        width: 100% !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }

    .viewer-under-view .choice-row {
        width: max-content !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }
}

/* =========================================================
   PACKAGE 2 — ROTATION / ANIMATED GLOW / SELECTED CONTROL HIGHLIGHT
   PINEGROW SAFE TO EDIT:
   - Slider colors live on each overlay's inline --slider-* variables.
   - Animated shirt glow intensity/color/speed live on .viewer-shirt-wrap.
   - Selected control highlight color/tint live on #daRealtimeViewer.
   ========================================================= */
/* Rotate control: mirrors the vertical placement control on the right side. */
.viewer-rotate-overlay {
    right: calc(50% - 245px) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    min-width: 38px !important;
    height: calc(var(--precision-slider-length) + 68px) !important;
    padding: 6px 4px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 4px !important;
}

.viewer-rotate-overlay .rotate-slider {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: var(--precision-slider-length) !important;
    min-height: var(--precision-slider-length) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    writing-mode: vertical-lr !important;
    direction: rtl !important;
    cursor: ns-resize;
    filter: drop-shadow(0 0 4px var(--slider-glow-color,#2ef0ff)) !important;
}

.viewer-rotate-overlay .rotate-slider::-webkit-slider-runnable-track {
    width: 4px !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
      var(--slider-track-end,#af40e8),
      var(--slider-track-start,#2de7ff)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-rotate-overlay .rotate-slider::-moz-range-track {
    width: 4px !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
      var(--slider-track-end,#af40e8),
      var(--slider-track-start,#2de7ff)) !important;
    box-shadow: 0 0 9px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-rotate-overlay .rotate-slider::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-rotate-overlay .rotate-slider::-moz-range-thumb {
    width: 13px !important;
    height: 13px !important;
    border: 2px solid var(--slider-thumb-border,#dffeff) !important;
    border-radius: 50% !important;
    background: var(--slider-thumb,#0b2335) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
                0 0 12px var(--slider-glow-color,#2ef0ff) !important;
}

.viewer-rotate-overlay .axis-word {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap;
    font-weight: bold;
}

.viewer-rotate-overlay output {
    color: #7ff2ff;
    font-size: 8px !important;
    font-weight: 900;
}

@media (min-width:981px) and (max-width:1180px) {
    .viewer-rotate-overlay {
        right: calc(50% - 228px) !important;
    }
}

@media (max-width:980px) {
    .viewer-rotate-overlay {
        right: max(7px, calc(50% - 145px)) !important;
        width: 34px !important;
        min-width: 34px !important;
        height: calc(var(--precision-slider-length) + 64px) !important;
        padding: 5px 3px !important;
    }
}

@media (max-width:620px) {
    .viewer-rotate-overlay {
        right: max(5px, calc(50% - 137px)) !important;
    }
}

@media (max-width:430px) {
    .viewer-rotate-overlay {
        right: max(4px, calc(50% - 132px)) !important;
        width: 32px !important;
        min-width: 32px !important;
    }
}

/* Animated glow around the shirt. Intensity/color/speed are editable inline
   on .viewer-shirt-wrap in index.html so Pinegrow can change them easily. */
.viewer-shirt {
    animation: daShirtGlowPulse var(--shirt-glow-speed,4s) ease-in-out infinite alternate;
}

@keyframes daShirtGlowPulse {
    0% {
        filter: drop-shadow(0 18px 23px rgba(0,0,0,.36))
            drop-shadow(0 0 7px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) calc(var(--shirt-glow-brightness,65%) * .45),transparent))
            drop-shadow(0 0 16px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) calc(var(--shirt-glow-brightness,65%) * .28),transparent))
            drop-shadow(0 0 26px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) calc(var(--shirt-glow-brightness,65%) * .16),transparent));
    }

    100% {
        filter: drop-shadow(0 18px 23px rgba(0,0,0,.36))
            drop-shadow(0 0 12px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) var(--shirt-glow-brightness,65%),transparent))
            drop-shadow(0 0 26px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) calc(var(--shirt-glow-brightness,65%) * .62),transparent))
            drop-shadow(0 0 42px color-mix(in srgb,var(--shirt-glow-color,#5ecaff) calc(var(--shirt-glow-brightness,65%) * .34),transparent));
    }
}

/* Highlight the WHOLE selected customization button. The tint is layered
   over the original button color so shirt-color swatches remain recognizable. */
.integrated-creator-panel .choice-btn.selected {
    border-color: var(--selected-control-color,#2ef0ff) !important;
    box-shadow: inset 0 0 0 999px color-mix(in srgb,var(--selected-control-color,#2ef0ff) var(--selected-control-tint,30%),transparent),
        inset 0 0 0 1px color-mix(in srgb,var(--selected-control-color,#2ef0ff) 70%,white),
        0 0 var(--selected-control-glow,18px) color-mix(in srgb,var(--selected-control-color,#2ef0ff) 72%,transparent) !important;
    transform: translateY(-1px);
}

.integrated-creator-panel .style-preset-btn.selected {
    border-color: var(--selected-control-color,#2ef0ff) !important;
    background: color-mix(in srgb,var(--selected-control-color,#2ef0ff) var(--selected-control-tint,30%),rgba(7,20,34,.35)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--selected-control-color,#2ef0ff) 68%,white),
        0 0 var(--selected-control-glow,18px) color-mix(in srgb,var(--selected-control-color,#2ef0ff) 72%,transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
    .viewer-shirt,
    .viewer-rotate-overlay,
    .viewer-rotate-overlay .rotate-slider::-webkit-slider-thumb,
    .viewer-rotate-overlay .rotate-slider::-moz-range-thumb {
        animation: none !important;
    }
}

/* =========================================================
   PINEGROW-SAFE: CENTER UPLOAD YOUR ART UNDER AI ACTIONS
   Desktop + tablet only. Mobile layout below 760px remains unchanged.
   ========================================================= */
@media (min-width:761px){
    .integrated-action-zone .compact-upload-zone {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .integrated-action-zone .compact-upload-copy {
        width: min(100%,520px);
        margin-inline: auto;
        text-align: center;
    }

    .integrated-action-zone .compact-upload-copy strong,
    .integrated-action-zone .compact-upload-copy span {
        text-align: center;
        font-size: 15px;
    }

    .integrated-action-zone #uploadImageButton {
        width: min(100%,360px) !important;
        margin-inline: auto !important;
        justify-self: center !important;
    }
}

/* =========================================================
   PACKAGE 2 — FINAL PRECISION SLIDER GLOW + MOBILE FIT
   PINEGROW SAFE TO EDIT:
   Each precision control already exposes --slider-glow-color inline in
   index.html. This final override uses that same variable for the entire
   control border/glow as well as the rail/thumb glow.
   ========================================================= */
@keyframes daPrecisionBorderGlowEditable {
    0%,
    100% {
        border-color: color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 52%,transparent);
        box-shadow: 0 0 7px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 22%,transparent),
            inset 0 0 0 1px rgba(255,255,255,.035),
            inset 0 1px 0 rgba(255,255,255,.06);
    }

    50% {
        border-color: color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 94%,white 6%);
        box-shadow: 0 0 13px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 58%,transparent),
            0 0 24px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 24%,transparent),
            inset 0 0 0 1px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 24%,transparent),
            inset 0 1px 0 rgba(255,255,255,.10);
    }
}

/* Glow the complete border of every in-viewer slider control, including Rotate. */
.viewer-design-size-overlay,
.viewer-horizontal-placement-overlay,
.viewer-vertical-placement-overlay,
.viewer-rotate-overlay {
    border: 1px solid color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 62%,transparent) !important;
    overflow: visible !important;
    animation: daPrecisionBorderGlowEditable 2.15s ease-in-out infinite !important;
}

.viewer-horizontal-placement-overlay {
    animation-delay: -.52s !important;
}

.viewer-vertical-placement-overlay {
    animation-delay: -1.04s !important;
}

.viewer-rotate-overlay {
    animation-delay: -1.56s !important;
}

/* Keep every rail visibly luminous while retaining Pinegrow-editable slider colors. */
.viewer-overlay-control input[type="range"] {
    filter: drop-shadow(0 0 5px var(--slider-glow-color,#2ef0ff)) !important;
}

.viewer-overlay-control input[type="range"]::-webkit-slider-runnable-track {
    box-shadow: 0 0 7px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 72%,transparent),
        0 0 13px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 32%,transparent) !important;
}

.viewer-overlay-control input[type="range"]::-moz-range-track {
    box-shadow: 0 0 7px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 72%,transparent),
        0 0 13px color-mix(in srgb,var(--slider-glow-color,#2ef0ff) 32%,transparent) !important;
}

/* Mobile: keep all four precision controls compact, inside the stage, and
   clear of one another. The rail length scales with the viewport. */
@media (max-width:620px) {
    .viewer-stage {
        --precision-slider-length: clamp(96px,28vw,116px) !important;
    }

    .viewer-design-size-overlay {
        top: 7px !important;
        left: 7px !important;
        right: 106px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
        grid-template-columns: auto minmax(46px,1fr) 28px !important;
        gap: 5px !important;
        padding: 5px 6px !important;
        box-sizing: border-box !important;
    }

    .viewer-design-size-overlay .design-size-slider {
        width: 100% !important;
        min-width: 0 !important;
    }

    .viewer-vertical-placement-overlay {
        left: 7px !important;
        right: auto !important;
        top: 50% !important;
        width: 40px !important;
        min-width: 40px !important;
        height: calc(var(--precision-slider-length) + 60px) !important;
        padding: 5px 4px !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }

    .viewer-vertical-placement-overlay .placement-y-slider {
        height: var(--precision-slider-length) !important;
        min-height: var(--precision-slider-length) !important;
    }

    .viewer-rotate-overlay {
        right: 7px !important;
        left: auto !important;
        top: 50% !important;
        width: 40px !important;
        min-width: 40px !important;
        height: calc(var(--precision-slider-length) + 60px) !important;
        padding: 5px 4px !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }

    .viewer-rotate-overlay .rotate-slider {
        height: var(--precision-slider-length) !important;
        min-height: var(--precision-slider-length) !important;
    }

    .viewer-horizontal-placement-overlay {
        left: 50% !important;
        right: auto !important;
        bottom: 7px !important;
        width: calc(var(--precision-slider-length) + 66px) !important;
        max-width: calc(100% - 108px) !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0,var(--precision-slider-length)) 28px !important;
        gap: 5px !important;
        padding: 5px 7px !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
    }

    .viewer-horizontal-placement-overlay .precision-slider-label,
    .viewer-horizontal-placement-overlay .placement-x-slider {
        width: var(--precision-slider-length) !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .viewer-vertical-placement-overlay .axis-word,
    .viewer-rotate-overlay .axis-word {
        font-size: 8px !important;
    }

    .viewer-vertical-placement-overlay output,
    .viewer-rotate-overlay output,
    .viewer-horizontal-placement-overlay output {
        font-size: 8px !important;
    }
}

@media (max-width:390px) {
    .viewer-stage {
        --precision-slider-length: 96px !important;
    }

    .viewer-design-size-overlay {
        right: 100px !important;
        grid-template-columns: auto minmax(40px,1fr) 27px !important;
    }

    .viewer-horizontal-placement-overlay {
        width: calc(var(--precision-slider-length) + 58px) !important;
        max-width: calc(100% - 100px) !important;
    }

    .viewer-vertical-placement-overlay,
    .viewer-rotate-overlay {
        width: 36px !important;
        min-width: 36px !important;
        padding-inline: 3px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-design-size-overlay,
    .viewer-horizontal-placement-overlay,
    .viewer-vertical-placement-overlay,
    .viewer-rotate-overlay {
        animation: none !important;
    }
}

/* =========================================================
   PACKAGE 2 — MOBILE LABEL + QUANTITY ALIGNMENT FIX
   Keeps precision-control labels inside their cards and centers Qty.
   ========================================================= */
@media (max-width:620px) {
    /* Horizontal LEFT / RIGHT labels: ignore Pinegrow-era inline offsets on phone. */
    .viewer-horizontal-placement-overlay .precision-slider-label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: var(--precision-slider-length) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .viewer-horizontal-placement-overlay .precision-slider-label > span {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Give TOP/BOTTOM enough room to stay fully inside the left slider card. */
    .viewer-vertical-placement-overlay {
        width: 44px !important;
        min-width: 44px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .viewer-vertical-placement-overlay .axis-word {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    /* Qty belongs in the visual center of the Order T-Shirt panel on phones. */
    .checkout-panel .qty-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        min-width: 64px !important;
        margin: 16px auto 0 !important;
        padding: 0 !important;
        inset: auto !important;
        position: static !important;
        text-align: center !important;
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 14px !important;
    }

    .checkout-panel .qty-box input {
        margin: 4px auto 0 !important;
    }
}

@media (max-width:390px) {
    .viewer-vertical-placement-overlay {
        width: 42px !important;
        min-width: 42px !important;
    }

    .viewer-vertical-placement-overlay .axis-word,
    .viewer-horizontal-placement-overlay .precision-slider-label > span {
        font-size: 6.5px !important;
    }
}

/* =========================================================
   BULK PRICING PROMO TARGET + LIGHT PARALLAX RESTORE
   SAFE TO EDIT IN PINEGROW
   ========================================================= */
:root {
    /* LIGHT PARALLAX — SAFE TO EDIT
       Increase/decrease these for more/less movement. */
    --site-parallax-strength-x: 10;
    --site-parallax-strength-y: 7;

    /* BULK PROMO SPOTLIGHT — SAFE TO EDIT */
    --bulk-spotlight-color: #8fe8ff;
    --bulk-spotlight-soft: rgba(143, 232, 255, .42);
    --bulk-spotlight-speed: 1.15s;
}

/* Restore the parallax-aware positions after the final art-directed
   background rules above. The image choice remains desktop/tablet/mobile. */
@media (min-width:761px){
    .site-bg {
        background-position: calc(52% + var(--parallax-bx)) calc(50% + var(--parallax-by)) !important;
        transform: translate3d(calc(var(--parallax-x) * .34),calc(var(--parallax-y) * .34),0) scale(1.018) !important;
        transition: filter .25s ease;
    }

    .site-glow {
        transform: translate3d(calc(var(--parallax-x) * -.42),calc(var(--parallax-y) * -.42),0) scale(1.03) !important;
    }
}

@media (min-width:761px) and (max-width:1100px){
    .site-bg {
        background-position: calc(56% + var(--parallax-bx)) calc(50% + var(--parallax-by)) !important;
    }
}

.bulk-pricing-card {
    position: relative;
    isolation: isolate;
    scroll-margin-top: 28px;
}

@property --bulk-orbit-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.bulk-pricing-card.bulk-pricing-spotlight {
    border-color: color-mix(in srgb, var(--bulk-spotlight-color) 78%, white 22%) !important;
    box-shadow: 0 0 18px var(--bulk-spotlight-soft),
        0 0 34px rgba(91, 214, 255, .20),
        inset 0 0 16px rgba(143, 232, 255, .08) !important;
}

.bulk-pricing-card.bulk-pricing-spotlight::after {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--bulk-orbit-angle),
        transparent 0deg 250deg,
        rgba(143,232,255,.08) 270deg,
        var(--bulk-spotlight-color) 302deg,
        #e9fbff 318deg,
        var(--bulk-spotlight-color) 334deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px var(--bulk-spotlight-color));
    animation: bulkBorderOrbit var(--bulk-spotlight-speed) linear 4;
}

@keyframes bulkBorderOrbit {
    to {
        --bulk-orbit-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce){
    .bulk-pricing-card.bulk-pricing-spotlight::after {
        animation: none;
    }
}

/* =========================================================
   PACKAGE 2 — DESKTOP/TABLET QUANTITY CENTERING FIX
   Keeps Qty visually centered in ORDER T-SHIRT without
   changing the already-correct phone layout.
   ========================================================= */
@media (min-width:621px) {
    .checkout-panel .qty-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        min-width: 64px !important;
        margin: 16px auto 14px !important;
        padding: 0 !important;
        inset: auto !important;
        position: static !important;
        text-align: center !important;
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 16px !important;
    }

    .checkout-panel .qty-box input {
        margin: 4px auto 0 !important;
    }
}