/* Semantic badge styling using CSS variables so we can toggle size via .small-badges */
    :root {
        --badge-scale: 1;
        --badge-padding-vertical: 6px;
        --badge-padding-horizontal: 9px;
        --badge-font-size: 12px;
        --badge-gap: 6px;
        --badge-border-radius: 10px;
    }
    .small-badges {
        --badge-scale: 0.49;
        --badge-padding-vertical: 4px;
        --badge-padding-horizontal: 8px;
        --badge-font-size: 12px;
        --badge-gap: 8px;
    }
    /* Animated border for Change Location pill - cycles red → blue → green → orange → purple → grey */
    @keyframes pillBorderCycle {
        0% { border-color: #ff3b30; }
        16.66% { border-color: #3b82f6; }
        33.33% { border-color: #000000; }
        50% { border-color: #fb923c; }
        66.66% { border-color: #8b5cf6; }
        83.33% { border-color: #9ca3af; }
        100% { border-color: #ff3b30; }
    }
    /* Floating 'Change Grid location' pill — REMOVED conflicting rule, using consolidated rule below */
    /* Tight border around the label so it surrounds only the words */
    #changeGridLocationPill .c-pill-label {
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* Allow two lines to show */
        height: auto;
        min-height: 30px;
        line-height: normal;
        border: none !important;
        padding: 0 8px;
        border-radius: 6px;
        animation: pillBorderCycle 6s linear infinite;
        -webkit-animation: pillBorderCycle 6s linear infinite;
        cursor: pointer;
        background: rgba(107, 114, 128, 0.62);
        box-shadow: none;
        margin-left: -3px;
    }
    /* Pause the color cycle when user hovers or focuses the pill for clarity */
    #changeGridLocationPill:hover .c-pill-label, #changeGridLocationPill:focus .c-pill-label { animation-play-state: paused; -webkit-animation-play-state: paused; }

    /* Mobile-only grid spacing adjustments for small devices (≈5.4")
       Increase left/right and vertical spacing without affecting desktop. */
    @media (max-width: 420px) {
        .grid-wrapper { padding-left: 10px; padding-right: 10px; }
        /* Slightly larger row & column gaps to give posts more breathing room */
        #grid { gap: 22px 16px !important; }
        /* Add modest inner padding on each tile so content doesn't touch edges */
        #grid .grid-box { padding: 10px !important; box-sizing: border-box; border-radius: 12px; }
    }
    #changeGridLocationPill .c-pill-label { color: #ffffff !important; }
    /* remove decorative backcard and keep pill visually minimal */
    #changeGridLocationPill::before { display: none; }
    #changeGridLocationPill:focus, #changeGridLocationPill:hover {
        background: transparent;
        border-color: #ffffff;
        color: #ffffff;
        transform: translateY(-2px);
        outline: none;
        box-shadow: none;
    }

    /* Ensure modal Change Location button text is white */
    #changeGridModal .change-grid-actions #changeLocationBtn { color: #ffffff !important; }
    /* Highlighted state after a location is chosen from search */
    /* Use outline instead of border so layout/size doesn't change when highlighted */
    #changeGridModal .change-grid-actions #changeLocationBtn.btn-highlight {
        outline: 4px solid #000000 !important; /* black highlight per request */
        outline-offset: 0;
        box-shadow: 0 6px 30px rgba(0,0,0,0.18);
        padding: 10px 16px; /* keep tappable area stable */
        transition: outline 160ms ease, box-shadow 160ms ease;
        background: #ffffff !important; /* force white bg so text doesn't invert */
        background-image: none !important;
        color: #0f172a !important; /* dark text */
        border: 1px solid #e5e7eb !important;
    }
    /* Apply same black highlight to the Return Home (cancel) button when highlighted */
    #changeGridModal .change-grid-actions #comeHomeBtn.btn-highlight {
        outline: 4px solid #000000 !important;
        outline-offset: 0;
        box-shadow: 0 6px 30px rgba(0,0,0,0.18);
        padding: 10px 16px;
        transition: outline 160ms ease, box-shadow 160ms ease;
        background: #ffffff !important;
        background-image: none !important;
        color: #0f172a !important;
        border: 1px solid #e5e7eb !important;
    }
    #changeGridLocationPill .c-pill-icon {
        width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.04); border-radius: 4px; flex: 0 0 18px;
        cursor: pointer;
    }
    /* font-size + line-height for c-pill-label now set inline on child spans */
    /* Modal for Change Grid location (resized to fit two refine search fields; branded colors) */
    :root { --modal-backdrop-tint: rgba(0,0,0,0.45); }
    #changeGridModalBackdrop { display:none; position:fixed; inset:0; background:var(--modal-backdrop-tint); z-index:100000; align-items:center; justify-content:center; padding:20px; }
     /* Shared modal vertical positioning: mobile vs large screens
         Keep different heights per viewport but ensure both modals align to same top. */

    /* Enforce fixed positioning for the Add Content CTA and change-location pill
       so they do not shift while the page loads or scripts run. Use high
       specificity and !important to avoid transient inline style changes. */
    #addContentCTA {
        position: fixed !important;
        left: 22px !important;
        top: 8vh !important;
        z-index: 12000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 6px !important;
        pointer-events: auto !important;
        user-select: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }

    #addContentCTA #addContentIcon,
    #addContentIcon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        display: inline-block !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
        overflow: visible !important;
        transform: none !important;
    }

    .addContentText { min-width: 120px !important; }

    /* CONSOLIDATED: Change location pill positioning — fixed viewport position with explicit pixel values */
    /* Do NOT use vh units as they can shift when scrollbar appears/disappears */
    /* Position: left=39px (CTA icon + gap), top=130px (below Make a post button) */
    #changeGridLocationPill {
        position: fixed !important;
        left: 39px !important;
        top: 130px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 12002 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        border: none !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial !important;
        box-shadow: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
        user-select: none !important;
    }
    /* Both modals share ONE vertical position so they always align (same height on every device).
       Mobile value is higher than desktop. Change the variable to move BOTH together. */
    /* Raise modal popouts slightly so media pop-outs sit higher on screen */
    :root { --modal-translate: -15vh; }
    @media (max-width: 420px) { :root { --modal-translate: -5vh; } }
    @media (min-width: 1200px) { :root { --modal-translate: -8vh; } }

    #changeGridModal {
        /* light modal theme for Change Locations */
        background:#ffffff; /* white modal bg */
        /* make modal height flexible and let modal-body handle scrolling */
        /* Match the posting modal (.modal-content) width exactly */
        width: 95%;
        max-width: min(95vw, 400px);
        height: auto;
        min-height: 360px;
        max-height: 50vh;
        border-radius:18px;
        box-shadow: 0 20px 48px rgba(2,6,23,0.08);
        position:relative;
        overflow: hidden;
             /* Same vertical position as the posting modal */
             transform: translateY(var(--modal-translate));
        display:flex;
        flex-direction:column;
        border: 1px solid #e5e7eb; /* light border for modal */
    }
    /* Ensure rounded corners always apply to the Change Location modal and its parts.
       Some runtime inline styles can remove or override corner rounding; enforce
       a persistent radius and clipping so the modal always appears rounded. */
    #changeGridModal {
        border-radius: 18px !important;
        overflow: hidden !important;
        -webkit-border-radius: 18px !important;
    }
    /* Lower the change location modal slightly on mobile so it doesn't sit too high */
    @media (max-width: 600px) {
        /* Use the shared variable so animations and transforms stay consistent */
        :root { --modal-translate: -5vh; }
        /* Tiny downward nudge for Change Location only on mobile */
        #changeGridModal { transform: translateY(-4.5vh) !important; }
    }

    /* Apply the shared modal translate to post/media popouts so they sit higher
       on the viewport. Also ensure the content can scroll when tall media is shown. */
    .view-modal .view-modal-content {
        transform: translateY(calc(var(--modal-translate) - 6vh));
        max-height: 92vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Position photo/video pop-out just below the header — slightly lower than the shared default */
    #viewModal .view-modal-content {
        transform: translateY(calc(var(--modal-translate) - 4vh));
    }
    #changeGridModalBackdrop {
        border-radius: 18px !important;
        overflow: hidden !important;
    }
    /* Inner modal pieces should respect the modal's rounded shape */
    #changeGridModal .modal-body,
    #changeGridModal .change-grid-form,
    #changeGridModal .change-grid-actions,
    .change-grid-suggestions {
        border-radius: 12px !important;
        overflow: visible !important;
    }
    /* Modal header (match site's modal header styles) */
    /* Remove the modal header area entirely to avoid pushing modal content down */
    #changeGridModal .modal-header {
        display:none !important;
        height:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        border:0 none !important;
    }
    /* Tighten modal body top padding since header is removed */
    #changeGridModal .modal-close { background:none; border:none; color:#6b7280; font-size:24px; cursor:pointer; padding:0; width:30px; height:30px; }
    /* Make modal-body fill available space and be the single scrolling area */
    /* Add bottom padding so dropdowns inside the modal won't be clipped by the actions bar */
    #changeGridModal .modal-body { padding:8px 16px; padding-bottom:70px; color:#111827; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; position:relative; overflow:auto; flex:1 1 auto; }

    /* Ensure actions are hidden unless modal is open */
    #changeGridModal:not(.open) .change-grid-actions { display:none; }
    .change-grid-form { display:flex; flex-direction:column; gap:12px; }
    .change-grid-form label { font-size:13px; color:#374151; font-weight:600; }
    .change-grid-form .refine-input { width:100%; padding:10px 40px 10px 12px; border-radius:8px; border:1px solid #000000; font-size:14px; background:#ffffff; color:#111827; }
    .change-grid-form .refine-input:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: 0 !important;
        box-shadow: 0 0 0 2px #ffffff !important;
        border-color: #000000 !important;
    }
    /* Floating clear button inside the Change Location search field */
    #refinePrimaryClear {
        position:absolute; top:50%; right:8px; transform:translateY(-50%);
        width:24px; height:24px; border-radius:999px; border:none;
        background:#111827; color:#ffffff; font-size:16px; line-height:1;
        display:none; align-items:center; justify-content:center; cursor:pointer;
        box-shadow:0 2px 8px rgba(2,6,23,0.25); padding:0; z-index:5;
    }
    #refinePrimaryClear:hover { background:#000000; }
    /* Floating clear button on the posting composer refine search field */
    #customZoneTagClear {
        position:absolute; top:50%; right:12px; transform:translateY(-50%);
        width:24px; height:24px; border-radius:999px; border:none;
        background:#111827; color:#ffffff; font-size:16px; line-height:24px; text-align:center;
        align-items:center; justify-content:center; cursor:pointer;
        box-shadow:0 2px 8px rgba(2,6,23,0.25); padding:0; z-index:6; display:none;
    }
    #customZoneTagClear:hover { background:#000000; }
    .change-grid-form .actions { display:flex; gap:8px; margin-top:8px; }
    .btn-apply { background: #ffffff; color:#0f172a; border: 1px solid #e5e7eb; padding:8px 12px; border-radius:8px; cursor:pointer; }
    /* Force primary button text to white to avoid transient inline color overrides */
    #changeGridModal .btn-apply { color: #fff !important; }
    /* Override: keep the modal's Change Location button visually white (background)
       so it doesn't switch to green in selection/active states. Use high
       specificity and !important to override inline/gradient rules. */
    #changeGridModal .change-grid-actions .btn-apply {
        background: #ffffff !important;
        background-image: none !important;
        color: #0f172a !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 2px 6px rgba(16,24,40,0.06) !important;
    }
    #changeGridModal .change-grid-actions .btn-apply:hover,
    #changeGridModal .change-grid-actions .btn-apply:active,
    #changeGridModal .change-grid-actions .btn-apply:focus {
        background: #ffffff !important;
        color: #0f172a !important;
        outline: none !important;
    }
    .btn-cancel { background:transparent; border:1px solid #d1d5db; color:#374151; padding:8px 12px; border-radius:8px; cursor:pointer; }
    /* Highlight state for primary action when a suggestion is selected
       Matches the inner gradient/color of the Change Location button so
       applying a selection highlights Come Home with the same appearance. */
    .btn-highlight {
        background: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 6px 30px rgba(0,0,0,0.18) !important;
        transform: translateY(-1px);
        outline: 4px solid #000000 !important;
        outline-offset: 0 !important;
        border: 1px solid #e5e7eb !important;
    }
    /* Suggestions dropdown inside change-grid modal.
       Pin the dropdown above the modal action bar so it never appears behind UI.
       Use the --change-actions-height variable to calculate a bottom inset. */
    .change-grid-suggestions {
        /* Default hidden; JS toggles visibility. Keep positioned relative to the input
           and limit height so it never grows down into the modal actions area. */
        display: none;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(2,6,23,0.06);
        overflow: auto;
        margin-top: 8px;
        z-index: 100120;
        box-sizing: border-box;
        position: absolute;
        left: 20px;
        right: 20px;
        /* Do not force a bottom anchor — let it appear under the input by default. */
        bottom: auto;
          /* Cap the dropdown to a fixed number of visible rows so it never feels too long.
              Use a CSS variable for suggestion row height so we can tune easily. */
        --suggestion-item-height: 36px;
        /* Show only 3 visible rows to ensure the dropdown is short */
        max-height: calc(var(--suggestion-item-height) * 3);
        pointer-events: auto;
    }

    /* If JS needs to force the dropdown open, this helper ensures it shows */
    .change-grid-suggestions.open { display: block; }
    /* Make suggestion items slightly more compact and fixed height so the list can be limited */
    .change-grid-suggestion-item {
        padding:4px 8px; cursor:pointer; font-size:13px; line-height:1.05; color:#111827;
        height: var(--suggestion-item-height);
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    .change-grid-suggestion-item:hover { background:#f3f4f6; }

    /* Keep items flush inside the dropdown so they don't overflow the container */
    .change-grid-suggestions {
        padding: 6px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        max-height: 50vh !important;
    }
    /* Make suggestion rows flush (no black outlines) with subtle separators */
    .change-grid-suggestions .change-grid-suggestion-item {
        margin: 0 !important;
        border-radius: 0 !important;
        height: auto !important;
        padding: 10px 12px !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Ensure suggestion dropdowns are always white with dark text (posting page/compose) */
    .change-grid-suggestions {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
        box-shadow: 0 8px 24px rgba(2,6,23,0.06) !important;
        color: #111827 !important;
    }
    .change-grid-suggestions .change-grid-suggestion-item {
        background: transparent !important;
        color: #111827 !important;
    }
    .change-grid-suggestions .change-grid-suggestion-item:hover {
        background: #f3f4f6 !important;
        color: #111827 !important;
    }

    /* Strongly enforce a clean white card style for suggestion rows to remove dark outlines */
    #changeGridModal .change-grid-suggestions .change-grid-suggestion-item,
    .change-grid-suggestions .change-grid-suggestion-item,
    #refineLocationDropdown > div,
    #autocompleteDropdown > div {
        background: #ffffff !important;
        color: #111827 !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 10px !important;
        margin: 6px 8px !important;
        padding: 10px 12px !important;
        height: auto !important;
    }

    /* Prevent modal-level thick black border from visually framing inner suggestion rows */
    #changeGridModal { box-shadow: 0 8px 24px rgba(2,6,23,0.06) !important; border: 1px solid #e5e7eb !important; }

    /* Ensure dropdown result text is highly readable: use darker color and larger font */
    #refineLocationDropdown,
    #refineLocationDropdown *,
    #autocompleteDropdown,
    #autocompleteDropdown *,
    .change-grid-suggestions,
    .change-grid-suggestions * {
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    /* Make separators light instead of the thick black lines seen in screenshots */
    #refineLocationDropdown div,
    #autocompleteDropdown div,
    .change-grid-suggestions .change-grid-suggestion-item {
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Actions area pinned to bottom of modal and responsive two-up buttons */
    /* Reduce actions height to lower modal bottom spacing */
    :root { --change-actions-height: 56px; }
    #changeGridModal { position:relative; }
    #changeGridModal .change-grid-form { display:flex; flex-direction:column; }
    /* Pin action area to the modal bottom so buttons sit on modal page only */
    /* Actions container should match modal width so it doesn't force modal wider */
    /* Pin actions to the true bottom of the change-location modal page (inside modal) */
     /* Put actions back into normal flow so they appear immediately after the form
         (prevents large empty space pushing buttons to modal bottom). */
    /* Pin actions to the bottom of the modal so dropdowns have space above */
    #changeGridModal .change-grid-actions { position:absolute; left:0; right:0; bottom:0; display:flex; gap:12px; justify-content:space-between; align-items:center; padding:12px 16px; box-sizing:border-box; height:auto; width:100%; background:#ffffff; border-top:1px solid #e5e7eb; z-index:200000; flex-shrink:0; }
    #changeGridModal .change-grid-actions .btn-apply,
    #changeGridModal .change-grid-actions .btn-cancel {
        width:calc(50% - 6px);
        padding:8px 10px;
        font-size:15px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        min-height: 44px; /* ensure consistent vertical size */
        border-radius:10px;
        box-sizing:border-box;
        height:40px;
        font-weight:400;
        box-shadow: 0 4px 12px rgba(2, 6, 23, 0.18);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    /* Change Location modal uses the shared var(--modal-translate) on ALL devices so it
       stays exactly aligned with the posting modal. Do not add per-breakpoint transform
       overrides here or the two modals will drift apart. */
    /* Small screens: stack the buttons to preserve touch targets */
    @media (max-width: 420px) {
        #changeGridModal .change-grid-actions { flex-direction:column; height:auto; padding:12px; }
        #changeGridModal .change-grid-actions .btn-apply,
        #changeGridModal .change-grid-actions .btn-cancel { width:100%; }
    }
    /* Mobile: give the modal more vertical space so all content is visible */
    @media (max-width: 600px) {
        #changeGridModal { min-height: 460px; max-height: 72vh; }
    }
    /* Large screens: same compact fixed-height as all other screens */
    @media (min-width: 1200px) {
        #changeGridModal { min-height: 360px; max-height: 50vh; }
    }
    #changeGridModal .change-grid-actions .btn-cancel { background:transparent; border:1px solid #d1d5db; color:#374151; }

    /* The Come Home button should sit under Change Location inside the modal — keep default flow */

    .post-badges {
        position: absolute; top: 8px; right: 8px; left: auto;
        display:flex; gap:6px; z-index:20; justify-content:flex-end;
        pointer-events: auto;
        flex-wrap: nowrap;
        overflow: hidden; /* Avoid badges pushing layout when space is tight */
        max-width: calc(100% - 24px); /* keep badges constrained to slot bounds */
    }

    .post-badges .badge {
        display:flex; align-items:center; gap:var(--badge-gap);
        padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
        border-radius: var(--badge-border-radius);
        font-size: var(--badge-font-size);
        font-weight: 800;
        color: #fff;
        transform: scale(var(--badge-scale));
        transform-origin: center top;
        transition: transform 120ms ease, box-shadow 120ms ease;
        white-space: nowrap;
        flex: 0 0 auto; /* do not allow badges to grow or shrink unexpectedly */
        min-width: 0; /* allow ellipsis when needed */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Place the Buy/Sell badge on the left side of the post slot */
    .post-badges .badge--sell {
        position: absolute;
        left: 8px;
        top: 8px;
        right: auto;
        z-index: 22;
        transform-origin: left top;
    }

    /* Tighter spacing on small screens to avoid visual gaps */
    @media (max-width: 420px) {
        .post-badges { gap: 4px; top: 6px; right: 6px; }
        .post-badges .badge--sell { left: 6px; top: 6px; }
        .post-badges .badge { padding: calc(var(--badge-padding-vertical) - 2px) calc(var(--badge-padding-horizontal) - 2px); }
    }

    .badge--sell { background: linear-gradient(135deg,#06b6d4,#3b82f6); color: #04121a; box-shadow: 0 6px 18px rgba(59,130,246,0.28); }
    .badge--new  { position: absolute; left: 8px; top: 8px; background: linear-gradient(135deg,#ffffff,#e9eef5); color:#1f2937; box-shadow: 0 6px 18px rgba(255,255,255,0.28), inset 0 0 18px rgba(255,255,255,0.10); font-weight:900; }
    .badge--liked { background: linear-gradient(135deg,#ffffff,#e9eef5); color:#1f2937; box-shadow: 0 6px 18px rgba(255,255,255,0.28), inset 0 0 18px rgba(255,255,255,0.10); font-weight:900; }
    .badge--default { background: rgba(0,0,0,0.5); }

    /* Position badges (top-3) - styled like a 'dislike' chip but in gold */
    .badge--position1, .badge--position2, .badge--position3 {
        background: linear-gradient(135deg,#ffd54a,#f59e0b);
        color: #1f1f1f;
        box-shadow: 0 8px 26px rgba(245,158,11,0.22), inset 0 0 18px rgba(255,255,255,0.06);
        font-weight: 900;
        letter-spacing: 0.6px;
    }
    .badge--position1 { border-radius: 12px; padding: 6px 10px; }
    .badge--position2 { border-radius: 10px; padding: 5px 9px; }
    .badge--position3 { border-radius: 10px; padding: 5px 8px; }

    /* HIDE PODIUM BADGES: remove small gold 1st/2nd/3rd squares */
    .badge--position1, .badge--position2, .badge--position3 { display: none !important; }

    /* Left-anchored container holds boost + sell so the first badge is always flush-left
       and they flow side-by-side without one shifting the other. */
    .left-badges { position:absolute; top:8px; left:8px; z-index:30; display:flex; flex-direction:row; align-items:flex-start; gap:8px; pointer-events:auto; }

    /* Ensure boost sits at the left edge and is fixed there */
    .boost-badge-prominent { position:static; z-index:30; display:flex; align-items:center; gap:var(--badge-gap); pointer-events:auto; }
    .boost-badge-prominent .boost-inner {
        background: linear-gradient(135deg,#fcd34d,#f59e0b);
        padding: calc(var(--badge-padding-vertical) - 2px) calc(var(--badge-padding-horizontal) - 2px);
        border-radius:12px; display:flex; align-items:center; gap:var(--badge-gap);
        font-weight:900; color:#3a2600; text-transform:uppercase;
        box-shadow: none;
        transform: scale(var(--badge-scale)); transform-origin: left top;
    }
    .boost-inner .boost-icon { font-size: 1.4em; filter: none; }
    .boost-inner .boost-label { font-size: 0.95em; color:#3a2600; letter-spacing:0.6px; }
    /* Prominent sell/buy badge placed near top-left (visible on post) */
    /* Sell flows inside .left-badges; static positioning keeps it flush-left or beside boost */
    .sell-badge-prominent { position:static; z-index:28; display:flex; align-items:center; gap:var(--badge-gap); pointer-events:auto; }
    .sell-badge-prominent .sell-inner { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:linear-gradient(135deg,#06b6d4,#3b82f6); color:#04121a; box-shadow:0 6px 18px rgba(59,130,246,0.28); font-weight:800; }
    .sell-badge-prominent .sell-icon { font-size:16px; }
    .sell-badge-prominent .sell-label { font-size:13px; letter-spacing:0.4px; }
    /* Prominent NEW badge — white background, 75% the size of the Buy badge */
    .new-badge-prominent { position:static; z-index:27; display:flex; align-items:center; gap:var(--badge-gap); pointer-events:auto; }
    .new-badge-prominent .new-inner { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px; background:linear-gradient(135deg,#ffffff,#e9eef5); color:#1f2937; box-shadow:0 6px 18px rgba(255,255,255,0.28), inset 0 0 18px rgba(255,255,255,0.10); font-weight:800; }
    .new-badge-prominent .new-label { font-size:10px; letter-spacing:0.4px; }
    /* Prominent LIKED badge — white background, 75% the size of the Buy badge */
    .right-badges { position:absolute; top:8px; right:8px; z-index:30; display:flex; flex-direction:row; align-items:flex-start; gap:4px; pointer-events:auto; }
    .liked-badge-prominent { position:static; z-index:26; display:flex; align-items:center; gap:var(--badge-gap); pointer-events:auto; }
    .liked-badge-prominent .liked-inner { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:linear-gradient(135deg,#ffffff,#e9eef5); color:#1f2937; box-shadow:0 6px 18px rgba(255,255,255,0.28), inset 0 0 18px rgba(255,255,255,0.10); font-weight:800; transform:scale(0.75); transform-origin:right top; }
    .liked-badge-prominent .liked-label { font-size:13px; letter-spacing:0.4px; }
    /* Content offset is driven by the ACTUAL badge elements present on a tile.
       Posts without a BOOST/BUY/NEW/LIKED badge keep their content flush to the
       top; only tiles that truly render one of these badges push the text down
       so the badge never overlaps it. */
    .grid-box:has(.boost-badge-prominent) .post-text-content,
    .grid-box:has(.sell-badge-prominent) .post-text-content { padding-top: 8px !important; }
    .grid-box:has(.new-badge-prominent) .post-text-content,
    .grid-box:has(.liked-badge-prominent) .post-text-content { padding-top: 10px !important; }