/* ============================================================
   DEKOLOKAL (/services) — Dedicated Stylesheet
   Scoped to .dl-scope. Light theme to match the rest of the site.
   ============================================================ */

.dl-scope {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #ffffff;
    color: #0f172a;
    padding: 18px 0 40px;
}

/* Keep global header/navbar visible on DekoLokal pages.
   We still suppress the global mobile menu chrome to avoid overlap with the
   dedicated DekoLokal drawer + bottom navigation. */
body.dekolokal-page {
    background: #ffffff;
    color: #0f172a;
}
/* Keep the shop's mobile bottom nav hidden on DekoLokal pages (DekoLokal has its
   own `.dl-bottomnav`). The header's slide-out drawer (`.deko-mobile-menu`) is NOT
   hidden here — the top hamburger must be able to open it on DekoLokal pages too. */
body.dekolokal-page .deko-mobile-bottom-nav {
    display: none !important;
}

/* Defeat the global `*` selector in style.css (Futura PT) and the
   DekoWebMerchant style.css (Montserrat) which both force a font on every
   element. We scope Inter to every descendant of .dl-scope EXCEPT icon
   elements — Font Awesome ships its own font-family on .fa / .fas / .far /
   .fab / .fa-solid / .fa-regular / .fa-brands and overriding those makes
   icons render as empty squares. */
.dl-scope,
.dl-scope *,
.dl-scope *::before,
.dl-scope *::after {
    box-sizing: border-box;
}

.dl-scope,
.dl-scope p,
.dl-scope a,
.dl-scope span,
.dl-scope div,
.dl-scope h1, .dl-scope h2, .dl-scope h3,
.dl-scope h4, .dl-scope h5, .dl-scope h6,
.dl-scope button,
.dl-scope input,
.dl-scope label,
.dl-scope small,
.dl-scope strong,
.dl-scope li {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.dl-scope h1, .dl-scope h2, .dl-scope h3,
.dl-scope h4, .dl-scope h5, .dl-scope h6,
.dl-scope .dl-hero-title,
.dl-scope .dl-section-title,
.dl-scope .dl-cta-banner-title,
.dl-scope .dl-promo-title,
.dl-scope .dl-spons-hero-title,
.dl-scope .dl-spot-name,
.dl-scope .dl-right-card-title,
.dl-scope .dl-alert-title,
.dl-scope .dl-set-cta-text,
.dl-scope .dl-final-strip h3,
.dl-scope .dl-join-card h4 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

.dl-scope a {
    text-decoration: none;
    color: inherit;
}

.dl-scope img { max-width: 100%; display: block; }
.dl-scope p { margin: 0; }
.dl-scope ul { margin: 0; padding: 0; list-style: none; }

/* Match /shop exactly — see dekoshopping-redesign.css line 17.
   /shop sets the container to 100% wide (no hard cap) and relies on the
   Bootstrap `.px-xl-5` class to add 48px side padding at xl+ breakpoints.
   That gives the comfortable margins you see on /shop on wide monitors. */
.dl-scope .container,
.dl-scope .container.px-xl-5 {
    max-width: 100%;
}
@media (max-width: 991px) {
    .dl-scope .container,
    .dl-scope .container.px-xl-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Page shell — 3 column layout, identical breakpoints to /shop's deko-shop-grid */
.dl-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    gap: 20px;
    padding: 20px 0;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Critical: allow each column to shrink below its content's natural width so
   nothing pushes the layout horizontally beyond the viewport. */
.dl-left,
.dl-main,
.dl-right {
    min-width: 0;
    max-width: 100%;
}
.dl-main { overflow: visible; }  /* allow card hover shadows */

/* Sidebars flow with the page.
   They were previously capped at `max-height: calc(100vh - 24px)` with
   `overflow-y:auto` AND a hidden scrollbar. Once a rail's content grew past
   the viewport (e.g. the Announcements carousel in the right rail) the last
   card — "Join DekoHub" — fell below the cut-off with no visible scrollbar to
   reveal it, so it just looked clipped. Letting the rails size to their
   content means every card is reachable by scrolling the page normally. */
.dl-left,
.dl-right {
    max-height: none;
    overflow: visible;
    min-width: 0;
}

@media (max-width: 1280px) {
    .dl-shell {
        grid-template-columns: 240px minmax(0, 1fr) 280px;
        gap: 16px;
    }
}

@media (max-width: 1200px) {
    .dl-shell { grid-template-columns: 240px minmax(0, 1fr); }
    /* !important is required: the base `.dl-right { display: flex }` rule is
       declared LATER in this file with the same specificity, so without it
       that rule wins and the rail renders into a two-column grid — where it
       is auto-placed into the wrong cell and crushed. */
    .dl-right { display: none !important; }
}

@media (max-width: 991px) {
    .dl-shell { grid-template-columns: 1fr; padding: 12px 0; gap: 14px; }
    /* Hide the inline sidebars on mobile — their contents move into the
       slide-in drawer (see .dl-mobile-trigger / .dl-mobile-drawer below). */
    .dl-left  { display: none !important; }
    .dl-right { display: none !important; }
}

/* ============================================================
   MOBILE DRAWER (≤ 991px) — DekoLokal nav, activity, promo, ads
   ============================================================ */
.dl-mobile-trigger {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    color: #0f172a;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.dl-mobile-trigger i { font-size: 14px; color: #2563eb; }
.dl-mobile-trigger .dl-mt-loc {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.dl-mobile-trigger .dl-mt-loc i { font-size: 9px; color: #f97316; }

.dl-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1098;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.dl-mobile-overlay.active { opacity: 1; visibility: visible; }

.dl-mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 85vw;
    max-width: 320px;
    background: #ffffff;
    z-index: 1099;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
    padding: 14px;
}
.dl-mobile-drawer.active { transform: translateX(0); }

.dl-mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
}
.dl-mobile-drawer-close {
    background: transparent; border: none;
    color: #64748b; font-size: 18px;
    cursor: pointer; padding: 4px 8px; line-height: 1;
}
.dl-mobile-drawer-close:hover { color: #0f172a; }

/* Reset sticky + display rules so the drawer can render the same .dl-left
   markup that's hidden on the page. */
.dl-mobile-drawer .dl-left {
    display: flex !important;
    position: static;
    gap: 14px;
}
.dl-mobile-drawer .dl-promo-card,
.dl-mobile-drawer .dl-spons-card { font-size: 12px; }

/* Show the trigger only on mobile */
@media (max-width: 991px) {
    .dl-mobile-trigger { display: inline-flex; }
}

/* ============================================================
   LEFT SIDEBAR — light marketplace navigation rail.
   ============================================================ */
/* Not sticky — same reason as .dl-right: rail + promo + sponsored ads +
   footer exceed the viewport, and a taller-than-viewport sticky element can
   never scroll its bottom into view. */
.dl-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dl-rail,
.dl-mobile-drawer .dl-rail {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #334155 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.dl-rail-brand,
.dl-mobile-drawer .dl-rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 14px;
}

.dl-rail-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 12px 4px 8px;
}
.dl-brand-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
    flex-shrink: 0;
}
.dl-left .dl-brand-text,
.dl-mobile-drawer .dl-brand-text {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 17px; font-weight: 800; color: #0f172a !important; line-height: 1;
}
.dl-left .dl-brand-text span,
.dl-mobile-drawer .dl-brand-text span { color: #2563eb !important; }
.dl-left .dl-brand-section,
.dl-mobile-drawer .dl-brand-section {
    font-size: 11px;
    color: #2563eb !important;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.dl-left .dl-brand-loc,
.dl-mobile-drawer .dl-brand-loc {
    font-size: 11px; color: #64748b !important; font-weight: 600; margin-top: 4px;
    display: flex; align-items: center; gap: 4px;
}
.dl-left .dl-brand-loc i,
.dl-mobile-drawer .dl-brand-loc i { font-size: 9px; color: #f97316 !important; }

.dl-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dl-left .dl-nav-link,
.dl-mobile-drawer .dl-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 8px;
    color: #334155 !important; font-size: 13px; font-weight: 600;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.dl-left .dl-nav-link i,
.dl-mobile-drawer .dl-nav-link i {
    font-size: 14px; width: 18px; text-align: center; color: #64748b;
    flex-shrink: 0;
}
.dl-left .dl-nav-link span,
.dl-mobile-drawer .dl-nav-link span {
    flex: 1;
}
.dl-left .dl-nav-link:hover,
.dl-mobile-drawer .dl-nav-link:hover {
    background: #eff6ff; color: #1d4ed8 !important;
}
.dl-left .dl-nav-link.active,
.dl-mobile-drawer .dl-nav-link.active {
    background: #dbeafe;
    color: #1d4ed8 !important;
}
.dl-left .dl-nav-link.active i,
.dl-mobile-drawer .dl-nav-link.active i { color: #2563eb; }

.dl-left-cta {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 8px 4px;
}
.dl-btn-primary {
    background: #2563eb; color: #ffffff !important;
    font-size: 13px; font-weight: 700;
    padding: 10px 14px; border-radius: 8px;
    text-align: center; border: none; cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.dl-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); }

.dl-left .dl-btn-outline {
    background: #ffffff; color: #1d4ed8 !important;
    font-size: 12.5px; font-weight: 700;
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid #2563eb;
    text-align: center; cursor: pointer;
    transition: all 0.15s;
}
.dl-left .dl-btn-outline:hover { background: #eff6ff; }

.dl-left .dl-left-section-title,
.dl-mobile-drawer .dl-left-section-title {
    font-size: 10.5px; font-weight: 800;
    color: #64748b; text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 12px 8px;
}

.dl-activity {
    display: flex; flex-direction: column; gap: 1px;
}
.dl-left .dl-activity-link,
.dl-mobile-drawer .dl-activity-link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 6px;
    color: #334155 !important; font-size: 12.5px; font-weight: 600;
    text-decoration: none;
}
.dl-left .dl-activity-link i,
.dl-mobile-drawer .dl-activity-link i {
    font-size: 12px; width: 16px; text-align: center; color: #64748b;
    flex-shrink: 0;
}
.dl-left .dl-activity-link span:not(.dl-activity-badge),
.dl-mobile-drawer .dl-activity-link span:not(.dl-activity-badge) {
    flex: 1;
}
.dl-left .dl-activity-link:hover,
.dl-mobile-drawer .dl-activity-link:hover {
    background: #eff6ff; color: #1d4ed8 !important;
}
.dl-activity-badge {
    margin-left: auto;
    background: #2563eb; color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 1px 6px; border-radius: 8px;
    line-height: 1.3;
}

/* "List. Connect. Grow." promo card.

   The promo card kept rendering as a thin strip in the screenshot because
   global resets ($ * { ... } from style.css/merchant style.css) were
   collapsing the <p> description and the <a> button. Defensive fixes:
   - Card uses a flex column with explicit gap so every child must claim
     its own row regardless of inherited margin/padding state.
   - display: block !important on the description and inline-flex on the
     button so no parent display:inline rule can collapse them.
   - min-height on each child so a 0-line-height inheritance can't hide them.
   - Decorative ::before pushed behind everything via z-index. */
.dl-promo-card {
    background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 100%);
    border-radius: 12px;
    padding: 16px 16px 16px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 132px;
}
.dl-promo-card::before {
    content: ""; position: absolute; right: -16px; bottom: -12px;
    width: 76px; height: 76px;
    background: url('https://img.icons8.com/3d-fluency/256/grow.png') no-repeat center / contain;
    opacity: 0.45; pointer-events: none;
    z-index: 1;
}
.dl-promo-title {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    position: relative;
    z-index: 2;
    display: block !important;
}
.dl-promo-text {
    font-size: 11.5px !important;
    color: rgba(255,255,255,0.92) !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 82%;
    line-height: 1.45 !important;
    position: relative;
    z-index: 2;
    display: block !important;
    min-height: 16px;
}
.dl-promo-btn {
    display: inline-flex !important;
    align-items: center;
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    position: relative;
    z-index: 2;
    text-decoration: none !important;
    margin: 2px 0 0 !important;
    line-height: 1.2 !important;
    min-height: 28px;
}
.dl-promo-btn:hover { background: #f1f5f9 !important; }

/* Sponsored ads remain labeled and functional, but use quieter light cards. */
.dl-left .dl-spons-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.dl-spons-card + .dl-spons-card { margin-top: 10px; }
.dl-spons-card-img {
    width: 100%; height: 76px; object-fit: cover;
}
.dl-spons-card-body {
    padding: 10px 12px 12px;
}
.dl-left .dl-spons-card-tag {
    font-size: 9px; color: #64748b; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.dl-left .dl-spons-card-name {
    font-size: 12.5px; font-weight: 700; color: #0f172a;
    margin: 0 0 3px;
}
.dl-left .dl-spons-card-desc {
    font-size: 10.5px; color: #64748b;
    margin: 0 0 8px;
}
.dl-left .dl-spons-card-link {
    font-size: 10.5px; color: #2563eb; font-weight: 700;
}

/* ============================================================
   MAIN COLUMN
   ============================================================ */
.dl-main {
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
}

/* HERO BANNER */
.dl-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 240px;
    background: linear-gradient(115deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 55%, rgba(15, 23, 42, 0.1) 100%),
                url('https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=1600&auto=format&fit=crop&q=80') center / cover no-repeat;
    padding: 28px 30px;
    color: #ffffff;
}
.dl-hero-badge {
    display: inline-block;
    background: #2563eb;
    font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.dl-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px; font-weight: 800;
    margin: 0 0 6px; letter-spacing: -0.02em;
}
.dl-hero-sub {
    font-size: 14.5px; font-weight: 700; color: #ffffff;
    margin: 0 0 6px;
}
.dl-hero-desc {
    font-size: 12.5px; color: rgba(255,255,255,0.85); margin: 0 0 16px;
    max-width: 480px;
}
.dl-hero-buttons {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 8px;
}
.dl-hero-btn {
    font-size: 12px; font-weight: 700;
    padding: 9px 14px; border-radius: 8px;
    transition: all 0.15s;
}
.dl-hero-btn.primary {
    background: #2563eb; color: #fff !important;
}
.dl-hero-btn.primary:hover { background: #1d4ed8; }
.dl-hero-btn.secondary {
    background: rgba(255,255,255,0.18); color: #fff !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
}
.dl-hero-btn.secondary:hover { background: rgba(255,255,255,0.28); }
.dl-hero-pagination {
    position: absolute; right: 20px; bottom: 16px;
    display: flex; gap: 6px;
}
.dl-hero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
.dl-hero-dot.active { background: #ffffff; }
.dl-hero-pageno {
    position: absolute; right: 16px; top: 16px;
    background: rgba(15,23,42,0.55); backdrop-filter: blur(8px);
    color: #ffffff; font-size: 10.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
}

/* SECTION HEADER */
.dl-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.dl-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}
.dl-section-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 17px; font-weight: 800;
    color: #0f172a; margin: 0;
    letter-spacing: -0.01em;
}
.dl-section-link {
    font-size: 12px; font-weight: 700;
    color: #2563eb !important;
    white-space: nowrap;
}
.dl-section-link:hover { color: #1d4ed8 !important; }

/* Lokal Spotlight — 2 featured creator cards, collapses on tablet+ */
.dl-spotlight-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items: stretch;
}
@media (max-width: 768px) { .dl-spotlight-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .dl-spotlight-grid { gap: 12px; } }

.dl-spot-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.dl-spot-card:hover {
    border-color: #cbd5e1; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Wide landscape cover — fills the upper portion of the card with the
   business scene. A LARGE circular owner badge overlaps at the lower-LEFT
   with a thick white ring that creates the "cutout" look from the reference. */
.dl-spot-cover {
    position: relative;
    width: 100%;
    padding-top: 42%;                          /* ~21:9 wide scene */
    height: 0;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.dl-spot-feat {
    position: absolute; top: 12px; left: 12px;
    background: #f97316; color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
    z-index: 3;
}
/* Owner portrait — large round badge with a thick white "cutout" ring.
   The ring is the same color as the card body, so it reads as a notch
   carved out of the cover photo (matches the reference exactly).
   Half the badge sits on the cover, half sits on the body.

   Dimensions are forced with !important AND min-width/min-height so
   global img rules from style.css / DekoWebMerchant can't stretch the
   element into an oval. aspect-ratio guarantees a perfect square box. */
.dl-spot-avatar {
    position: absolute;
    left: 20px;
    bottom: -42px;                              /* ~50% overlap with body */
    width: 84px !important;
    height: 84px !important;
    min-width: 84px;
    min-height: 84px;
    max-width: 84px;
    max-height: 84px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50% !important;
    border: 5px solid #ffffff;                  /* the visible cutout ring */
    object-fit: cover;
    object-position: center;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
    z-index: 2;
    display: block;
    padding: 0;
    margin: 0;
}
.dl-spot-body {
    padding: 50px 20px 18px;                    /* top clears the larger avatar */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
}
.dl-spot-name {
    font-size: 15px; font-weight: 800; color: #0f172a; margin: 0;
    line-height: 1.25;
}
.dl-spot-tag {
    font-size: 12px; color: #64748b; margin: 0;
    font-weight: 500;
}
.dl-spot-desc {
    font-size: 12.5px; color: #475569; margin: 4px 0 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-spot-meta {
    font-size: 11.5px; color: #64748b;
    display: flex; align-items: center; gap: 4px;
    margin: 2px 0 12px;
}
.dl-spot-meta .stars { color: #f59e0b; font-size: 11px; }
.dl-spot-meta strong { color: #0f172a; font-weight: 700; }
.dl-spot-meta > span:last-child {
    margin-left: auto !important;
    font-size: 11px; color: #64748b; font-weight: 500;
}
.dl-spot-actions {
    display: flex; gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
.dl-spot-btn {
    flex: 1; text-align: center;
    font-size: 12px; font-weight: 700;
    padding: 10px 8px; border-radius: 8px;
    transition: all 0.15s;
}
.dl-spot-btn.outline {
    background: #ffffff; color: #475569 !important;
    border: 1px solid #cbd5e1;
}
.dl-spot-btn.outline:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a !important; }
.dl-spot-btn.solid {
    background: #2563eb; color: #fff !important;
    border: 1px solid #2563eb;
}
.dl-spot-btn.solid:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* Marketplace CTA banner — light surface with a clear blue action. */
.dl-cta-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    color: #0f172a;
}
.dl-cta-banner-left {
    display: flex; align-items: center; gap: 16px; flex: 1; min-width: 280px;
}
.dl-cta-banner-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #dbeafe;
    display: inline-flex; align-items: center; justify-content: center;
    color: #2563eb; font-size: 18px;
    flex-shrink: 0;
}
.dl-cta-banner-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px; font-weight: 800; color: #0f172a;
    margin: 0 0 3px;
}
.dl-cta-banner-text {
    font-size: 11.5px; color: #475569; margin: 0;
}
.dl-cta-banner-steps {
    display: flex; gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .dl-cta-banner { padding: 14px 16px; }
    .dl-cta-banner-steps { gap: 10px; }
    .dl-cta-step { font-size: 11px; }
}
.dl-cta-step {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: #334155;
}
.dl-cta-step i {
    width: 26px; height: 26px; border-radius: 50%;
    background: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: #2563eb;
}
.dl-cta-banner-btn {
    background: #2563eb; color: #fff !important;
    font-size: 12px; font-weight: 700;
    padding: 9px 16px; border-radius: 8px;
    transition: background 0.15s;
}
.dl-cta-banner-btn:hover { background: #1d4ed8; }

/* PRODUCT GRID (Lokal Finds, Local Deals, etc.) — mirrors /shop product-grid
   breakpoints (5-col default → 3-col @1200 → 2-col @576).
   Modifier .dl-cards--6 makes Lokal Finds a 6-up row to match the reference. */
.dl-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.dl-cards--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1400px) {
    .dl-cards--6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .dl-cards,
    .dl-cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 576px)  {
    .dl-cards,
    .dl-cards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dl-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}
.dl-card:hover {
    border-color: #cbd5e1; transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

/* Fixed-ratio media well so EVERY product image renders at identical
   dimensions regardless of source image proportions. Uses the padding-top
   trick universally — it works in every browser and is immune to the
   intrinsic-size quirks `aspect-ratio` can have in nested flex/grid layouts. */
.dl-card-media {
    position: relative;
    width: 100%;
    padding-top: 100%;             /* 1 : 1 well */
    height: 0;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}
.dl-card-media img,
.dl-card-media > * {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.dl-card-media .dl-card-badge {
    position: absolute;
    width: auto !important;
    height: auto !important;
    top: 8px; left: 8px;
}
.dl-card-badge {
    position: absolute; top: 8px; left: 8px;
    background: #ef4444; color: #fff;
    font-size: 9.5px; font-weight: 800;
    padding: 3px 7px; border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}
.dl-card-body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 4px;
}
.dl-card-name {
    font-size: 12.5px; font-weight: 700; color: #0f172a;
    margin: 0;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-card-price {
    font-size: 14px; font-weight: 800; color: #0f172a;
    margin: 0;
    line-height: 1.2;
}
.dl-card-price-old {
    color: #94a3b8; font-size: 10.5px; font-weight: 600;
    text-decoration: line-through; margin-left: 4px;
}
.dl-card-meta {
    font-size: 10.5px; color: #64748b;
    margin: auto 0 0;          /* push meta row to card bottom so heights align */
    padding-top: 4px;
    display: flex; align-items: center; gap: 4px;
    min-height: 18px;
}
.dl-card-meta .pickup {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    font-size: 9.5px; font-weight: 700;
    padding: 2px 7px; border-radius: 4px;
}

/* Garage Sales section — 4 col → 2 @991 → 1 @576 */
.dl-garage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 991px) { .dl-garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .dl-garage-grid { grid-template-columns: 1fr; } }

.dl-garage-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
    min-width: 0;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.dl-garage-card:hover {
    border-color: #cbd5e1; transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.dl-garage-media {
    position: relative;
    width: 100%;
    padding-top: 62.5%;             /* 16 : 10 well — universal aspect-ratio trick */
    height: 0;
    flex-shrink: 0;
    background: #f1f5f9;
    overflow: hidden;
}
.dl-garage-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.dl-garage-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.dl-garage-date {
    position: absolute; top: 8px; left: 8px;
    background: #ffffff; color: #0f172a;
    border-radius: 6px;
    padding: 4px 8px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dl-garage-date .day {
    font-size: 14px; font-weight: 900; line-height: 1;
}
.dl-garage-date .mon {
    font-size: 8.5px; font-weight: 800;
    text-transform: uppercase; color: #f97316;
    letter-spacing: 0.05em;
}
.dl-garage-body {
    padding: 10px 12px 12px;
}
.dl-garage-name {
    font-size: 12px; font-weight: 700; color: #0f172a;
    margin: 0 0 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-garage-meta {
    font-size: 10px; color: #64748b;
    margin: 0;
}

/* Yellow CTA box for "Set Up Sale Now" */
.dl-set-cta {
    background: linear-gradient(110deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.dl-set-cta-body {
    display: flex; align-items: center; gap: 12px;
}
.dl-set-cta-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: #f59e0b; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.dl-set-cta-text {
    font-family: 'Outfit', sans-serif;
    font-size: 13px; font-weight: 700; color: #78350f;
    margin: 0;
}
.dl-set-cta-text small {
    font-size: 10.5px; font-weight: 600; color: #92400e;
    display: block; margin-top: 2px;
}
.dl-set-cta-btn {
    background: #f97316; color: #fff !important;
    font-size: 11.5px; font-weight: 800;
    padding: 9px 16px; border-radius: 8px;
    white-space: nowrap;
}
.dl-set-cta-btn:hover { background: #ea580c; }

/* Local Businesses — 5 col → 3 @1200 → 2 @576 (matches /shop) */
.dl-biz-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
@media (max-width: 1200px) { .dl-biz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 576px)  { .dl-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dl-biz-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}
.dl-biz-card:hover {
    border-color: #cbd5e1; transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.dl-biz-media {
    position: relative;
    width: 100%;
    padding-top: 68.75%;            /* 16 : 11 well */
    height: 0;
    background: #f1f5f9;
    flex-shrink: 0;
    overflow: hidden;
}
.dl-biz-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.dl-biz-body {
    padding: 11px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 3px;
}
.dl-biz-name {
    font-size: 12.5px; font-weight: 700; color: #0f172a;
    margin: 0;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-biz-tag {
    font-size: 10.5px; color: #64748b;
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-biz-rating {
    font-size: 11px; color: #334155; font-weight: 600;
    margin: auto 0 0;             /* push rating to bottom for equal cards */
    padding-top: 4px;
}
.dl-biz-rating .star { color: #f59e0b; }

/* Top Contractors — 4 col → 2 @991 → 1 @576 (matches /shop) */
.dl-cont-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 991px) { .dl-cont-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .dl-cont-grid { grid-template-columns: 1fr; } }

.dl-cont-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex; align-items: center; gap: 12px;
    height: 100%;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dl-cont-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transform: translateY(-2px);
}
.dl-cont-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.dl-cont-icon.blue   { background: rgba(37,99,235,0.10);  color: #2563eb; }
.dl-cont-icon.amber  { background: rgba(245,158,11,0.12); color: #d97706; }
.dl-cont-icon.yellow { background: rgba(234,179,8,0.14);  color: #ca8a04; }
.dl-cont-icon.red    { background: rgba(239,68,68,0.12);  color: #dc2626; }
.dl-cont-body { min-width: 0; flex: 1; }
.dl-cont-name {
    font-size: 12.5px; font-weight: 700; color: #0f172a;
    margin: 0 0 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-cont-tag {
    font-size: 10.5px; color: #64748b; margin: 0 0 3px;
}
.dl-cont-bottom {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; color: #64748b;
}
.dl-cont-verified {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
}
.dl-cont-rating .star { color: #f59e0b; }

/* DekoHub social feed */
.dl-hub-tabs {
    display: flex; gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
    padding-bottom: 4px;
    overflow-x: auto;
}
.dl-hub-tab {
    font-size: 12px; font-weight: 700;
    padding: 6px 12px; border-radius: 6px;
    color: #64748b; white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.dl-hub-tab:hover { color: #0f172a; background: #f1f5f9; }
.dl-hub-tab.active { color: #1d4ed8; background: rgba(37,99,235,0.08); }
.dl-hub-share {
    margin-left: auto;
    font-size: 11px; color: #64748b;
    padding: 4px 10px;
}
.dl-hub-post-btn {
    background: #2563eb; color: #fff !important;
    font-size: 11px; font-weight: 700;
    padding: 5px 12px; border-radius: 6px;
}

.dl-feed {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;  /* every card stretches to the tallest row height */
}
@media (max-width: 1200px) { .dl-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 576px)  { .dl-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Feed cards — flex column so the meta (likes/comments) sticks to the bottom
   even when descriptions vary in length, making all cards align cleanly. */
.dl-feed-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dl-feed-media {
    position: relative;
    width: 100%;
    padding-top: 100%;          /* square images, easier to align across the row */
    height: 0;
    flex-shrink: 0;
    background: #f1f5f9;
    overflow: hidden;
}
.dl-feed-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}
.dl-feed-media .dl-feed-tag {
    position: absolute;
    width: auto !important;
    height: auto !important;
    top: 8px; left: 8px;
}
.dl-feed-tag {
    position: absolute; top: 8px; left: 8px;
    background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(8px);
    color: #fff; font-size: 9px; font-weight: 800;
    padding: 3px 7px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.dl-feed-body {
    padding: 10px 11px 11px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;            /* grow to fill remaining card height */
    min-height: 0;
}
.dl-feed-name {
    font-size: 12px; font-weight: 700; color: #0f172a;
    margin: 0 0 4px;
}
.dl-feed-text {
    font-size: 10.5px; color: #64748b;
    line-height: 1.4; margin: 0;
    /* clamp the description so every card has the same body height regardless
       of how chatty a post is */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-feed-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; color: #94a3b8;
    margin-top: auto;          /* push to bottom of card */
    padding-top: 8px;
}
.dl-feed-meta i { font-size: 9px; margin-right: 2px; }

/* Final connect/share/grow strip */
.dl-final-strip {
    background: linear-gradient(110deg, #1e3a8a 0%, #2563eb 100%);
    border-radius: 14px;
    padding: 20px 24px;
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.dl-final-strip h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px; font-weight: 800; margin: 0 0 4px;
}
.dl-final-strip p {
    font-size: 12px; color: rgba(255,255,255,0.85); margin: 0;
}
.dl-final-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-final-btn {
    background: #fff; color: #1d4ed8 !important;
    font-size: 11.5px; font-weight: 800;
    padding: 9px 14px; border-radius: 8px;
}
.dl-final-btn.outline {
    background: rgba(255,255,255,0.12); color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3);
}

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
/* NOT sticky: this rail is taller than the viewport (sponsored ad → quick
   actions → garage updates → town news → announcements carousel → join
   DekoHub). A sticky element taller than the viewport pins at the top and
   its bottom can never be scrolled into view, which hid the "Join DekoHub"
   card. Flowing with the page keeps every card reachable. */
.dl-right {
    display: flex; flex-direction: column; gap: 14px;
}

.dl-right-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.dl-right-card-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px; font-weight: 800; color: #0f172a;
    margin: 0 0 12px;
    min-width: 0;
}
.dl-right-card-title a {
    font-size: 11px; color: #2563eb; font-weight: 700;
    /* Keep "View All" on one line so it can't be squeezed into a column of
       single characters when the heading beside it is long. */
    flex-shrink: 0; white-space: nowrap;
}

/* Sponsored hero card on the right */
.dl-spons-hero {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    position: relative;
    min-height: 164px;
    overflow: hidden;
    color: #0f172a;
}
.dl-spons-hero-img {
    position: absolute; right: -10px; bottom: 0;
    width: 104px; height: auto; object-fit: contain;
    z-index: 1;
}
.dl-spons-hero-tag {
    font-size: 9px; font-weight: 800;
    color: #64748b;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 8px;
    position: relative; z-index: 2;
}
.dl-spons-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px; font-weight: 800; color: #0f172a;
    margin: 0 0 4px;
    position: relative; z-index: 2;
    max-width: 65%;
}
.dl-spons-hero-text {
    font-size: 11px; color: #475569; margin: 0 0 10px;
    max-width: 60%;
    position: relative; z-index: 2;
}
.dl-spons-hero-disc {
    display: inline-block;
    background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 4px;
    margin-bottom: 8px;
    position: relative; z-index: 2;
}
.dl-spons-hero-btn {
    display: inline-block;
    background: #2563eb; color: #fff !important;
    font-size: 11px; font-weight: 700;
    padding: 7px 12px; border-radius: 6px;
    position: relative; z-index: 2;
}

/* Quick actions list */
.dl-qa {
    display: flex; flex-direction: column; gap: 2px;
}
.dl-qa-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 6px;
    color: #475569; font-size: 12px; font-weight: 600;
    transition: background 0.15s;
}
.dl-qa-link i {
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(37,99,235,0.08);
    color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.dl-qa-link:hover { background: #f1f5f9; color: #0f172a; }
.dl-qa-link span:nth-child(3) {
    margin-left: auto; color: #94a3b8; font-size: 14px;
}

/* Update list (Garage Sale Updates, Town Updates & News) */
.dl-upd {
    display: flex; flex-direction: column; gap: 12px;
}
.dl-upd-item {
    display: flex; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.dl-upd-item:last-child { border-bottom: none; padding-bottom: 0; }
.dl-upd-date {
    width: 38px; flex-shrink: 0;
    background: #f1f5f9; border-radius: 6px;
    padding: 5px 0; text-align: center;
}
.dl-upd-date .mon {
    font-size: 8.5px; font-weight: 800;
    text-transform: uppercase; color: #f97316;
    letter-spacing: 0.04em;
}
.dl-upd-date .day {
    font-size: 14px; font-weight: 900; color: #0f172a;
    line-height: 1.1;
}
.dl-upd-body { min-width: 0; flex: 1; }
.dl-upd-name {
    font-size: 12px; font-weight: 700; color: #0f172a;
    margin: 0 0 3px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dl-upd-meta {
    font-size: 10.5px; color: #64748b; margin: 0;
}
.dl-upd-distance {
    font-size: 10px; color: #2563eb; font-weight: 700;
    margin-top: 3px;
}

/* Announcement big card (Road Closure) */
.dl-alert {
    background: linear-gradient(160deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 16px;
    color: #78350f;
}
.dl-alert-icon-wrap {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(217,119,6,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    color: #d97706; font-size: 18px;
    margin-bottom: 8px;
}
.dl-alert-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 800; color: #78350f;
    margin: 0 0 4px;
}
.dl-alert-text {
    font-size: 11.5px; color: #92400e;
    margin: 0 0 10px; line-height: 1.45;
}
.dl-alert-btn {
    display: inline-block;
    background: #f97316; color: #fff !important;
    font-size: 11px; font-weight: 700;
    padding: 6px 12px; border-radius: 6px;
}

/* Join DekoHub CTA card */
.dl-join-card {
    background: linear-gradient(160deg, #dbeafe 0%, #93c5fd 100%);
    border-radius: 12px;
    padding: 16px;
    color: #1e3a8a;
    position: relative;
    overflow: hidden;
}
.dl-join-card::before {
    content: ""; position: absolute; right: -10px; top: -10px;
    width: 80px; height: 80px;
    background: url('https://img.icons8.com/3d-fluency/256/conference.png') no-repeat center / contain;
    opacity: 0.6;
}
.dl-join-card h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px; font-weight: 800; color: #1e3a8a;
    margin: 0 0 6px; max-width: 70%;
    position: relative; z-index: 2;
}
.dl-join-card p {
    font-size: 11px; color: #1e40af;
    margin: 0 0 10px; max-width: 75%;
    position: relative; z-index: 2;
}
.dl-join-btn {
    display: inline-block;
    background: #2563eb; color: #fff !important;
    font-size: 11px; font-weight: 700;
    padding: 7px 12px; border-radius: 6px;
    position: relative; z-index: 2;
}
.dl-join-members {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px;
    font-size: 10px; color: #1e40af;
    position: relative; z-index: 2;
}
.dl-join-avatars { display: flex; }
.dl-join-avatars span {
    width: 18px; height: 18px; border-radius: 50%;
    background-size: cover; background-position: center;
    border: 2px solid #dbeafe;
    margin-left: -6px;
}
.dl-join-avatars span:first-child { margin-left: 0; }

/* Small announcement cards */
.dl-ann-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    display: flex; gap: 10px;
}
.dl-ann-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.dl-ann-icon.purple { background: rgba(168,85,247,0.12); color: #9333ea; }
.dl-ann-icon.green  { background: rgba(34,197,94,0.12);  color: #16a34a; }
.dl-ann-body { min-width: 0; }
.dl-ann-name {
    font-size: 12px; font-weight: 700; color: #0f172a;
    margin: 0 0 3px;
}
.dl-ann-text {
    font-size: 10.5px; color: #64748b;
    margin: 0 0 4px; line-height: 1.4;
}
.dl-ann-meta {
    font-size: 10px; color: #2563eb; font-weight: 700;
}

/* ============================================================
   GLOBAL RESPONSIVE GUARDS + SMALL-SCREEN TWEAKS
   ============================================================ */

/* Prevent any image or media inside the scope from overflowing its container */
.dl-scope img,
.dl-scope video {
    max-width: 100%;
    height: auto;
}

/* Both rails are static and unclipped at every breakpoint (see the .dl-left /
   .dl-right rules above) — these guards stay as a safety net in case a page
   re-introduces sticky/max-height on a rail locally. */
@media (max-width: 1200px) {
    .dl-right {
        position: static;
        max-height: none;
        overflow: visible;
    }
}
@media (max-width: 991px) {
    .dl-left {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Hero gets denser on tablet & mobile */
@media (max-width: 991px) {
    .dl-hero {
        min-height: 200px;
        padding: 22px 22px;
    }
    .dl-hero-title { font-size: 22px; }
    .dl-hero-sub   { font-size: 13px; }
    .dl-hero-desc  { font-size: 11.5px; margin-bottom: 12px; }
}
@media (max-width: 576px) {
    .dl-hero {
        min-height: 180px;
        padding: 18px 16px;
    }
    .dl-hero-title { font-size: 19px; }
    .dl-hero-sub   { font-size: 12.5px; }
    .dl-hero-desc  { font-size: 11px; }
    .dl-hero-buttons { gap: 6px; margin-bottom: 6px; }
    .dl-hero-btn { padding: 7px 11px; font-size: 11px; }
    .dl-hero-pageno { top: 10px; right: 10px; }
    .dl-hero-pagination { bottom: 10px; right: 14px; }
}

/* Sections get tighter padding on smaller screens */
@media (max-width: 991px) {
    .dl-section { padding: 14px 14px; border-radius: 12px; }
    .dl-section-title { font-size: 14.5px; }
    .dl-section-head { margin-bottom: 12px; }
}
@media (max-width: 576px) {
    .dl-section { padding: 12px 12px; }
}

/* Garage Sale "Set Up Sale" yellow CTA — stack on mobile */
@media (max-width: 576px) {
    .dl-set-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dl-set-cta-btn { width: 100%; text-align: center; }
}

/* DekoHub tabs row — allow wrap on small screens, share text fades */
@media (max-width: 768px) {
    .dl-hub-share { display: none; }
}

/* Final connect/share strip stacks on mobile */
@media (max-width: 768px) {
    .dl-final-strip { padding: 16px 18px; }
    .dl-final-strip h3 { font-size: 15px; }
}
@media (max-width: 576px) {
    .dl-final-actions { width: 100%; }
    .dl-final-btn { flex: 1; text-align: center; padding: 9px 8px; }
}

/* Card text never overflows on the tiniest screens */
@media (max-width: 576px) {
    .dl-card-name, .dl-biz-name, .dl-garage-name, .dl-cont-name, .dl-feed-name {
        font-size: 12px;
    }
    .dl-card-price { font-size: 13px; }
}

/* =========================================================================
   Mobile bottom navigation (Home / Finds / Deals / DekoHub / Account)
   Hidden on desktop; fixed light 5-tab bar where the rails collapse.
   ========================================================================= */
.dl-bottomnav { display: none; }
@media (max-width: 991px) {
    .dl-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: rgba(255,255,255,0.98);
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 16px rgba(15,23,42,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .dl-bottomnav .dl-bn-link {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 2px 7px;
        color: #475569 !important; text-decoration: none;
        font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
        transition: color 0.15s ease;
    }
    .dl-bottomnav .dl-bn-link i { font-size: 18px; line-height: 1; }
    .dl-bottomnav .dl-bn-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .dl-bottomnav .dl-bn-link.active { color: #1d4ed8 !important; }
    .dl-bottomnav .dl-bn-link.active i { color: #2563eb; }
    .dl-bottomnav .dl-bn-link:active { background: #eff6ff; }
    /* Keep page content clear of the fixed bar. */
    .dl-scope { padding-bottom: 64px; }
}

/* Keyboard focus remains visible on every shared interactive control. */
.dl-scope a:focus-visible,
.dl-scope button:focus-visible,
.dl-scope input:focus-visible,
.dl-scope select:focus-visible,
.dl-scope textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dl-scope *,
    .dl-scope *::before,
    .dl-scope *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   Sticky sidebars on desktop/tablet (≥992px): the left & right rails stay
   pinned in view while only the centre column scrolls. A rail taller than the
   viewport scrolls INTERNALLY via a visible slim scrollbar (the earlier sticky
   attempt used a hidden scrollbar, which clipped the last card — this doesn't).
   Header/navbar aren't sticky, so a small top offset is enough.
   ============================================================ */
@media (min-width: 992px) {
    .dl-left,
    .dl-right {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
        align-self: start;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dl-left::-webkit-scrollbar,
    .dl-right::-webkit-scrollbar { width: 6px; }
    .dl-left::-webkit-scrollbar-thumb,
    .dl-right::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .dl-left,
    .dl-right { scrollbar-width: thin; }
}