/* =========================================================
   ROOM REALISM STACK (NO FILTERS ON #lyrRoomObjs)
   Uses explicit overlay elements:
   - #lyrWallBase  (base + depth + floor falloff)
   - #lightFX      (dynamic window light + tonal grade overlay)
   - #lyrGrain     (grain)
========================================================= */

/* ---------- 0) BASE ROOM CONTAINER (NO GRADING HERE) ---------- */
#lyrRoomObjs {
    position: absolute;
    overflow: hidden;
    isolation: isolate;
    filter: none !important; /* IMPORTANT: don't affect all children */
}

/* ---------- WALL BASE (SUBTLE) ---------- */
.wallBase {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -10;
    background: radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,0) 55%, rgba(0,0,0,.08));
}

/* ---------- 1) GLOBAL DEPTH + FLOOR FALLOFF (MOVED OFF #lyrRoomObjs) ---------- */
#lyrWallBase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 44%, rgba(0,0,0,.24) 100%), linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 36%), radial-gradient(ellipse at 50% 15%, rgba(255,255,255,.08), rgba(255,255,255,0) 62%);
    mix-blend-mode: multiply;
    opacity: .30;
}

/* floor falloff (masked to bottom only => no line across drapes) */
#lyrWallBase::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
    mix-blend-mode: multiply;
    opacity: .32;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 54%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 54%, rgba(0,0,0,0) 100%);
}

/* ---------- 2) WINDOW LIGHT (DYNAMIC) ---------- */
#lightFX {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3; /* behind props */
    --winCx: 50%;
    --winCy: 50%;
    --winW: 300px;
    --winH: 300px;
    opacity: var(--dayOp,.46);
    filter: blur(var(--dayBlur,0px));
    -webkit-mask-image: radial-gradient( ellipse calc(var(--winW)*.78) calc(var(--winH)*.70) at var(--winCx) var(--winCy), #000 0%, transparent 60%);
    mask-image: radial-gradient( ellipse calc(var(--winW)*.78) calc(var(--winH)*.70) at var(--winCx) var(--winCy), #000 0%, transparent 60%);
}

    #lightFX::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( ellipse calc(var(--winW)*.60) calc(var(--winH)*.52) at var(--winCx) calc(var(--winCy) - 18px), rgba(255,255,245,.28), rgba(255,255,245,0) 62%), radial-gradient( ellipse calc(var(--winW)*1.42) calc(var(--winH)*1.20) at calc(var(--winCx) + 18px) calc(var(--winCy) + 28px), rgba(255,255,245,.07), rgba(255,255,245,0) 72%);
        mix-blend-mode: screen;
    }

/* ---------- 2b) GLOBAL TONAL GRADE (OVERLAY, NOT A FILTER) ---------- */
#lightFX {
    --roomGrade: 0.22;
}

    #lightFX::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 58%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.00) 45%, rgba(0,0,0,0.18) 100%);
        opacity: var(--roomGrade);
        mix-blend-mode: soft-light;
    }

/* ---------- Optional grain ---------- */
.grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: .035;
    mix-blend-mode: multiply;
    background-image: url("/images/noise_256.png");
    background-repeat: repeat;
}

/* ---------- 3) GROUNDED SHADOWS ---------- */
.roomObj {
    position: absolute;
}

    .roomObj img {
        display: block;
    }

.grounded {
    --sx: 18px;
    --sy: 10px;
    --soft: 14px;
    --castOp: .32;
    --contactL: 22%;
    --contactR: 22%;
    --contactH: 14px;
    --castL: 14%;
    --castR: 10%;
    --castH: 36px;
}

    .grounded::before {
        content: "";
        position: absolute;
        left: var(--contactL);
        right: var(--contactR);
        bottom: 6px;
        height: var(--contactH);
        pointer-events: none;
        background: radial-gradient(ellipse, rgba(0,0,0,.34), transparent 70%);
        filter: blur(1.6px);
        opacity: .62;
    }

    .grounded::after {
        content: "";
        position: absolute;
        left: var(--castL);
        right: var(--castR);
        bottom: 10px;
        height: var(--castH);
        pointer-events: none;
        background: radial-gradient(ellipse at left, rgba(0,0,0,.24), transparent 72%);
        filter: blur(var(--soft));
        transform: translate(var(--sx),var(--sy));
        opacity: var(--castOp);
    }

/* ---------- 4) LAYER ORDER (ROOM ONLY) ---------- */
#lyrChNRug {
    z-index: 20;
}

#lyrWallShelf {
    z-index: 22;
}

#lyrTallCab {
    z-index: 26;
}

#lyrPhotosLeft {
    z-index: 40;
}

#lyrPhotosRight {
    z-index: 40;
}

#lyrPhotosRightSwatch {
    z-index: 80;
}
/* always above room effects */

#lyrTallPlant {
    z-index: 28;
    isolation: isolate;
}
/* behind table */
#lyrDiningTable {
    z-index: 45;
}

[id^="lyrPl_"] {
    z-index: 30;
}

#lyrDrps {
    z-index: 55;
    position: absolute;
}

#lyrDrpHW {
    z-index: 56;
    position: absolute;
}

/* UI/Menus always win */
#lyrValanceMenu,
#lyrEditSizes,
#lyrColorPal,
#lyrPopup,
.popupLayer,
.uiMenu {
    z-index: 9999 !important;
    position: absolute;
}

/* ---------- 5) DRAPES ---------- */
#lyrValance {
    filter: saturate(1.18) contrast(1.08) brightness(1.02) !important;
    mix-blend-mode: normal;
}

#lyrDrps {
    filter: saturate(1.18) contrast(1.08) brightness(1.02) !important;
    mix-blend-mode: normal;
}

#tblDrpLeftOpened, #tblDrpRightOpened,
#tblDrpLeftClosed, #tblDrpRightClosed {
    position: absolute;
    overflow: hidden;
}

    #tblDrpLeftOpened::after,
    #tblDrpRightOpened::after,
    #tblDrpLeftClosed::after,
    #tblDrpRightClosed::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient( to right, rgba(0,0,0,.07) 0px, rgba(0,0,0,0) 6px, rgba(0,0,0,.09) 12px), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.14));
        mix-blend-mode: multiply;
        opacity: .30;
    }

/* ---------- 5b) DRAPERY HARDWARE SHADOW ---------- */
#lyrDrpHW {
    position: absolute;
    isolation: isolate;
}

    #lyrDrpHW img {
        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.18)) drop-shadow(0px 8px 10px rgba(0,0,0,0.12));
    }

        #lyrDrpHW img[src*="Ball_"] {
            filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.22)) drop-shadow(0px 4px 6px rgba(0,0,0,0.14));
        }

    #lyrDrpHW::before,
    #lyrDrpHW::after {
        content: "";
        position: absolute;
        pointer-events: none;
        left: var(--rodL, 0px);
        width: var(--rodW, 0px);
    }

    #lyrDrpHW::before {
        height: var(--contactH, 3px);
        top: calc(var(--rodT, 0px) + var(--rodH, 0px) + 2px);
        left: calc(var(--rodL, 0px) + (var(--rodW, 0px) * 0.06));
        width: calc(var(--rodW, 0px) * 0.88);
        background: radial-gradient( ellipse at 50% 50%, rgba(0,0,0,var(--contactOp, 0.32)) 0%, rgba(0,0,0,0) 75%);
        filter: blur(1.2px);
        transform: translateY(0.4px);
        mix-blend-mode: multiply;
        opacity: 0.48;
    }

    #lyrDrpHW::after {
        height: var(--castH, 18px);
        top: calc(var(--rodT, 0px) + var(--rodH, 0px) + 4px);
        left: calc(var(--rodL, 0px) + (var(--rodW, 0px) * 0.03));
        width: calc(var(--rodW, 0px) * 0.94);
        background: radial-gradient( ellipse at 50% 0%, rgba(0,0,0,var(--castOp, 0.14)) 0%, rgba(0,0,0,0) 70%);
        filter: blur(var(--castBlur, 12px));
        transform: translateY(1px);
        mix-blend-mode: multiply;
        opacity: 0.18;
    }

/* ---------- 6) PHOTOS (FRAME DEPTH + GLASS) ---------- */
#lyrPhotosLeft,
#lyrPhotosRight {
    position: absolute;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.16)) drop-shadow(0 2px 4px rgba(0,0,0,0.10));
}

    #lyrPhotosLeft::after,
    #lyrPhotosRight::after {
        content: "";
        position: absolute;
        inset: 3px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0) 45%, rgba(0,0,0,.08));
        mix-blend-mode: multiply;
        opacity: 0.32;
    }

    #lyrPhotosLeft::before,
    #lyrPhotosRight::before {
        content: "";
        position: absolute;
        inset: 6px;
        pointer-events: none;
        background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 38%);
        mix-blend-mode: screen;
        opacity: .28;
    }

/* SWATCH — no tint on fabric (IMG only) */
#lyrPhotosRightSwatch > img {
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
}

/* SWATCH FRAME SHADOW (DYNAMIC + SAFE) */
#lyrPhotosRightSwatch {
    position: absolute;
    isolation: isolate;
    overflow: visible;
    z-index: 80;
    display: inline-block;
    --swY: 7px;
    --swBlur: 16px;
    --swOpA: 0.18;
    --swOpB: 0.10;
    box-shadow: 0 var(--swY) var(--swBlur) rgba(0,0,0,var(--swOpA)), 0 2px 6px rgba(0,0,0,var(--swOpB));
}

/* Wall cast behind swatch (room overlay) */
#swatchWallShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 78; /* behind swatch (80) */
    mix-blend-mode: multiply;
    background: radial-gradient( ellipse at 50% 45%, rgba(0,0,0,0.32), rgba(0,0,0,0) 72%);
    filter: blur(18px);
}

/* ---------- 7) PLANT REALISM ---------- */
#lyrTallPlant {
    position: absolute;
    isolation: isolate;
    overflow: visible;
}

    #lyrTallPlant img {
        filter: contrast(1.07) saturate(1.05) brightness(0.95) drop-shadow(0 10px 14px rgba(0,0,0,0.22));
    }

    #lyrTallPlant.grounded {
        --contactL: 34%;
        --contactR: 34%;
        --contactH: 12px;
        --castL: 26%;
        --castR: 20%;
        --castH: 30px;
        --soft: 16px;
        --castOp: .24;
    }

/* ---------- 8) DYNAMIC OCCLUSION ELEMENTS ---------- */
#tableWallShadow {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    opacity: 0;
    filter: blur(16px);
    mix-blend-mode: multiply;
    background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.26), rgba(0,0,0,0) 70%);
}

#plantLightOcc {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    filter: blur(10px);
    mix-blend-mode: multiply;
    background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.34), rgba(0,0,0,0) 72%);
}

body.drapesClosed #lightFX {
    opacity: .14;
    filter: blur(18px);
}

body.drapesClosed #plantLightOcc {
    opacity: 0 !important;
}

/* ---------- WINDOW REALISM ---------- */
#lyrWindowOrDoor, #lyrWindowOrDoorL {
    position: absolute;
    isolation: isolate;
}

    #lyrWindowOrDoor table, #lyrWindowOrDoorL table {
        background-size: auto 100% !important;
        background-repeat: repeat-x !important;
        background-position: center center !important;
        filter: contrast(1.06) saturate(0.92) brightness(0.88) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 10px 22px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35);
    }

    #lyrWindowOrDoor img[src*="window_"],
    #lyrWindowOrDoorL img[src*="window_"] {
        filter: brightness(1.05) contrast(0.98) saturate(0.98) !important;
    }

    #lyrWindowOrDoor::before, #lyrWindowOrDoorL::before {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 3;
        --frame: 14px;
        left: var(--frame);
        top: var(--frame);
        right: var(--frame);
        bottom: var(--frame);
        background: radial-gradient(ellipse at 50% 32%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.00) 62%), linear-gradient(to bottom, rgba(220,235,220,0.08) 0%, rgba(220,235,220,0.00) 50%, rgba(160,185,160,0.05) 100%);
        mix-blend-mode: screen;
        opacity: var(--glassHazeOp, 0.55);
    }

    #lyrWindowOrDoor::after, #lyrWindowOrDoorL::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 4;
        --frame: 14px;
        left: var(--frame);
        top: var(--frame);
        right: var(--frame);
        bottom: var(--frame);
        background: linear-gradient(115deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.14) 34%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.00) 72%), repeating-linear-gradient(to right, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.00) 7px, rgba(255,255,255,0.010) 14px);
        mix-blend-mode: screen;
        opacity: var(--glassSpecOp, 0.28);
        filter: blur(0.35px);
    }

/* ---------- PLANT TRANSLUCENCY ---------- */
#plantTranslucency {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    --hx: 60%;
    --hy: 30%;
    background: radial-gradient(ellipse at var(--hx) var(--hy), rgba(255,255,240,0.26) 0%, rgba(255,255,240,0.10) 26%, rgba(255,255,240,0.00) 62%);
    mix-blend-mode: screen;
    filter: blur(1px);
}

body.drapesClosed #plantTranslucency {
    opacity: 0 !important;
}

/* ---------- COUCH FLOOR CONTACT ---------- */
#lyrChNRug {
    position: absolute;
    isolation: isolate;
    overflow: visible;
}

    #lyrChNRug img {
        filter: brightness(0.965) contrast(1.04) saturate(0.98);
    }

    #lyrChNRug::after {
        content: "";
        position: absolute;
        pointer-events: none;
        left: 14%;
        right: 14%;
        bottom: 8px;
        height: 16px;
        background: radial-gradient( ellipse, rgba(0,0,0,0.42), rgba(0,0,0,0.00) 72%);
        filter: blur(1.8px);
        opacity: 0.55;
        z-index: -1;
    }

/* ---------- ROOM OVERLAY WALL SHADOWS ---------- */
#couchWallShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 18;
    mix-blend-mode: multiply;
    filter: blur(18px);
    background: radial-gradient( ellipse at 50% 15%, rgba(0,0,0,0.30), rgba(0,0,0,0.00) 72%);
}

#plantWallShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 24;
    mix-blend-mode: multiply;
    filter: blur(22px);
    background: radial-gradient( ellipse at 50% 50%, rgba(0,0,0,0.34), rgba(0,0,0,0.00) 72%);
}

/* ---------- WALL SHELF SHADOWS ---------- */
#lyrWallShelf {
    position: absolute;
    isolation: isolate;
    overflow: visible;
}

    #lyrWallShelf img {
        display: block;
        filter: drop-shadow(0 6px 10px rgba(0,0,0,0.16)) drop-shadow(0 1px 2px rgba(0,0,0,0.12));
    }

#shelfWallShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 21;
    mix-blend-mode: multiply;
    filter: blur(18px);
    background: radial-gradient( ellipse at 50% 50%, rgba(0,0,0,0.26), rgba(0,0,0,0.00) 72%);
}

#shelfUnderShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 21;
    mix-blend-mode: multiply;
    filter: blur(12px);
    background: radial-gradient(ellipse at 50% 33%, rgba(0,0,0,0.28), rgba(0,0,0,0.00) 70%), radial-gradient(ellipse at 50% 78%, rgba(0,0,0,0.28), rgba(0,0,0,0.00) 70%);
}

/* =========================================================
   ✅ TALL CABINET (lyrTallCab) SHADOWS
========================================================= */
#lyrTallCab {
    position: absolute;
    isolation: isolate;
    overflow: visible;
}

    #lyrTallCab img {
        display: block;
        filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18)) drop-shadow(0 2px 5px rgba(0,0,0,0.12));
    }

    #lyrTallCab::after {
        content: "";
        position: absolute;
        pointer-events: none;
        left: 12%;
        right: 10%;
        bottom: 10px;
        height: 18px;
        background: radial-gradient(ellipse, rgba(0,0,0,0.42), rgba(0,0,0,0.00) 72%);
        filter: blur(2.0px);
        opacity: 0.40;
        z-index: -1;
    }

#cabinetWallShadow {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 25;
    mix-blend-mode: multiply;
    background: radial-gradient( ellipse at 50% 45%, rgba(0,0,0,0.30), rgba(0,0,0,0.00) 72%);
    filter: blur(22px);
}

/* =========================================================
   ✅ CEILING REALISM (lyrCeiling) — tuned for open/closed
   - Open: brighter near window, subtle depth
   - Closed: heavier, but not a dark band
========================================================= */
/* =======================
   CEILING (tuned OPEN)
   ======================= */
#lyrCeiling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(3.5%, 6vh, 9%);
    pointer-events: none;
    z-index: 1;
    isolation: isolate;
    /* Default (OPEN drapes) */
    --ceiling-shadow: 0.34; /* slightly less multiply so the glow reads */

    background:
    /* stronger corner vignette (more contrast) */
    radial-gradient( ellipse at 50% 58%, rgba(0,0,0,0.00) 26%, rgba(0,0,0,0.055) 62%, rgba(0,0,0,0.17) 100% ),
    /* depth toward seam (bottom of strip) */
    linear-gradient( to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.045) 56%, rgba(0,0,0,0.085) 100% ),
    /* base tone */
    linear-gradient(to bottom, #f6f6f4 0%, #f0f0ee 55%, #e9e9e6 100%);
    box-shadow: inset 0 -18% 26% rgba(0,0,0,0.040), inset 0 1px 0 rgba(255,255,255,0.72);
    transition: box-shadow .4s ease, filter .4s ease;
}

    /* Window bounce highlight (SCREEN) — stronger center glow ABOVE window */
    #lyrCeiling::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
        /* tight hot-spot centered above window (adds the “difference”) */
        radial-gradient( ellipse at 50% 88%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.46) 18%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.00) 66% ),
        /* broader soft lift (keeps it natural, not a stripe) */
        radial-gradient( ellipse at 50% 120%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.18) 34%, rgba(255,255,255,0.00) 70% ),
        /* gentle top rolloff */
        linear-gradient( to bottom, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 28%, rgba(255,255,255,0.00) 60% );
        mix-blend-mode: screen;
        opacity: 0.95; /* was 0.85 – less wash, more “spot” */
        filter: blur(0.25px);
    }

    /* Drape cast shade (MULTIPLY) — keep depth but avoid flattening the glow */
    #lyrCeiling::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
        /* shade gathers toward seam, but stays off the center glow */
        radial-gradient( ellipse at 50% 118%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.075) 32%, rgba(0,0,0,0.00) 70% ), linear-gradient( to bottom, rgba(0,0,0,0.045) 0%, rgba(0,0,0,0.105) 56%, rgba(0,0,0,0.17) 100% );
        mix-blend-mode: multiply;
        opacity: var(--ceiling-shadow);
        transition: opacity .4s ease;
    }

/* -----------------------
   CLOSED: keep your look
   (only small safety tweak)
   ----------------------- */
body.drapesClosed #lyrCeiling {
    --ceiling-shadow: 0.62; /* keep your closed look */
}

/* OPEN: make sure we use the tuned default (optional clarity) */
body:not(.drapesClosed) #lyrCeiling {
    --ceiling-shadow: 0.34;
}

/* Toolbar links (all three) */
.rdButtonDTQuote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Roboto, Arial, "museo_sans_500", Helvetica, "Helvetica Neue", sans-serif;
    font-size: 15px; /* bigger */
    font-weight: 600;
    line-height: 1;
    color: #5f5f5f;
    text-decoration: none;
    white-space: nowrap; /* prevents wrapping */
    padding: 6px 10px;
    background: transparent; /* “not buttony” */
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .rdButtonDTQuote:hover {
        background: rgba(0,0,0,.05);
        color: #2a2a2a;
    }

    /* Ensure icons align */
    .rdButtonDTQuote img {
        height: 15px;
        width: auto;
    }

/* Specifically force Wall Color to stay on one line */
#lyrColPal .rdButtonDTQuote {
    min-width: 110px; /* enough for "▼ Wall Color" */
    justify-content: flex-start;
}

#lyrRdrBtnOptions,
#lyrColPal {
    font-size: 15px; /* ensures everything inside is bigger */
}


    /* Override the inline 11px table font ONLY for this toolbar area */
    #lyrRdrBtnOptions,
    #lyrRdrBtnOptions a,
    #lyrColPal,
    #lyrColPal a {
        font-size: 15px !important;
        font-family: Roboto, Arial, "museo_sans_500", Helvetica, "Helvetica Neue", sans-serif;
    }

/* Make the two groups align vertically */
#lyrRdrBtnOptions,
#lyrColPal {
    display: flex;
    align-items: center;
}

/* Space between "Close Drapes" and "Show Sizes" (instead of the t.gif spacer) */
#lyrRdrBtnOptions {
    gap: 18px;
}

    #lyrRdrBtnOptions img[src="images/t.gif"] {
        display: none !important;
    }


.rdButtonDTQuote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 15px !important; /* force bigger despite table 11px */
    font-weight: 600;
    line-height: 1;
    color: #5f5f5f;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
}

    .rdButtonDTQuote:hover {
        background: rgba(0,0,0,.05);
        color: #222;
    }

    /* Normalize the icon in Show Sizes */
    .rdButtonDTQuote img {
        height: 15px !important;
        width: auto;
        display: inline-block;
        vertical-align: middle;
    }

/* Mobile font size boost */
@media (max-width: 768px) {
    #lyrRdrBtnOptions,
    #lyrRdrBtnOptions a,
    #lyrColPal,
    #lyrColPal a,
    .rdButtonDTQuote {
        font-size: 24px;/* bigger + tap friendly */
    }

    #lyrRdrBtnOptions,
    #lyrColPal {
        display: flex;
        justify-content: center; /* horizontal */
        align-items: center;
    }

    .rdButtonDTQuote {
        padding: 10px 12px; /* more finger space */
    }

        /* Icons scale with text */
        .rdButtonDTQuote img {
            height: 24px;
        }

    /* Spectrum color square */
    #lyrColPal .sp-preview {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .rdButtonDTQuote {
        font-size: 26px;
        font-weight: 600;
    }
}