/* ==========================================================================
   Lebanese Sooq redesign
   Loaded only on pages that set ViewData["Redesign"] = true. Every class is
   prefixed rd- so nothing collides with Bootstrap or the old theme
   (main-style.css), which still load on the same pages.

   Concept: a market street. The striped awning from the logo caps each
   category stall, featured ads hang from a rail like price tags, and the
   shelves below hold the goods.
   ========================================================================== */

.rd {
    --rd-paper: #F6F5FC;      /* page ground, lavender-tinted */
    --rd-surface: #FFFFFF;    /* cards, search counter */
    --rd-sunk: #ECEBF7;       /* image wells, chips */
    --rd-ink: #1B1951;        /* logo navy: text, rail, strings */
    --rd-muted: #5D5C88;
    --rd-line: #DAD9EE;
    --rd-plum: #5856A6;       /* logo purple */
    --rd-flame: #F26936;      /* logo orange: actions */
    --rd-flame-text: #C4461B; /* orange that passes contrast as text */
    --rd-on-flame: #FFFFFF;
    --rd-band: #1B1951;
    --rd-on-band: #F1F0FF;
    --rd-aw-a: #5856A6;
    --rd-aw-b: #F26936;
    --rd-shadow: 0 1px 2px rgb(27 25 81 / .06), 0 8px 24px -12px rgb(27 25 81 / .18);

    --rd-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
    --rd-body: "Readex Pro", "Segoe UI", system-ui, sans-serif;
    --rd-display-ar: "Lalezar", "Readex Pro", system-ui, sans-serif;

    --rd-wrap: 1240px;
    --rd-r: 14px;

    /* The old theme (main-style.css, site.css) reads these variables. Pointing
       them at the new palette and fonts re-skins every component that hasn't
       been rebuilt yet: dashboard, post-ad forms, chat, rewards. */
    --main-color-one: var(--rd-flame);
    --main-color-two: var(--rd-plum);
    --secondary-color: var(--rd-flame);
    --heading-color: var(--rd-ink);
    --paragraph-color: var(--rd-muted);
    --paragraph-color-two: var(--rd-muted);
    --paragraph-color-four: var(--rd-ink);
    --bg-light-one: var(--rd-paper);
    --bg-light-two: var(--rd-sunk);
    --heading-font: var(--rd-body);
    --body-font: var(--rd-body);

    background: var(--rd-paper);
    color: var(--rd-ink);
    font: 400 15px/1.55 var(--rd-body);
}

/* ---------- Neutralise old-theme globals inside redesigned pages ---------- */
/* main-style sets overflow-x: hidden on html and body. On body that makes it a
   scroll container, which stops the sticky header from sticking; clip hides
   the overflow without that side effect. */
body.rd { overflow-x: clip; }

.rd h1, .rd h2, .rd h3, .rd h4, .rd h5, .rd h6 {
    color: inherit; font-family: inherit; margin: 0; text-wrap: balance;
}
.rd p { color: inherit; font-family: inherit; margin: 0; hyphens: manual; }
.rd a { color: inherit; text-decoration: none; }
.rd a:hover, .rd a:focus, .rd a:active { color: inherit; }
.rd button, .rd input, .rd select { font: inherit; color: inherit; }
.rd ul, .rd ol { margin: 0; padding: 0; }
.rd li { list-style: none; }
.rd :focus-visible { outline: 2.5px solid var(--rd-flame) !important; outline-offset: 2px; border-radius: 6px; }
.rd svg { flex-shrink: 0; }

.rd-wrap { max-width: var(--rd-wrap); margin-inline: auto; padding-inline: 20px; }
.rd-main { padding-bottom: 0; }

/* ==========================================================================
   Bridge: the existing pages, re-skinned
   Listing, details, account, dashboard and content pages still use the old
   theme's markup, and their scripts (filters, post-ad, chat) depend on those
   class names. These rules restyle that markup in the new design without
   renaming anything. Selectors stay at low specificity so the redesign
   components further down this file win where both apply.
   ========================================================================== */

/* ---------- Page frame ---------- */
.rd-main .container,
.rd-main .container-fluid { max-width: var(--rd-wrap); padding-inline: 20px; margin-inline: auto; }
.rd-main .plr { padding-inline: 0; }
.rd-main .section-padding2,
.rd-main .section-padding { padding-block: 36px 56px; }

/* Page headings. Ad titles are user text and keep the body face (see the
   ad details rules below). */
.rd-main h1 {
    font: 800 clamp(36px, 4.8vw, 56px)/.95 var(--rd-display);
    text-transform: uppercase; letter-spacing: .005em; margin-bottom: 10px;
}
.rd-main h2 { font: 600 clamp(20px, 2.2vw, 25px)/1.25 var(--rd-body); }
.rd-main h3 { font: 600 17px/1.35 var(--rd-body); }
.rd-main h4, .rd-main h5 { font-family: var(--rd-body); font-weight: 600; }
.rd[dir="rtl"] .rd-main h1 { font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.rd-main .tittle { color: var(--rd-ink); }
.rd-main h2.tittle a:hover { color: var(--rd-flame-text); }

/* Breadcrumbs */
.rd .ad-breadcrumb { margin-bottom: 14px; }
.rd .ad-breadcrumb-list { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--rd-muted); }
.rd .ad-breadcrumb-item { display: inline-flex; align-items: center; gap: 6px; }
.rd .ad-breadcrumb-item a:hover { color: var(--rd-flame-text); text-decoration: underline; }
.rd .ad-breadcrumb-item [aria-current] { color: var(--rd-ink); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.rd .ad-breadcrumb-item { min-width: 0; white-space: normal; }
.rd .ad-breadcrumb-sep { opacity: .5; }

/* SEO content blocks (guides, market, district hub, listing intros) */
.rd .seo-meta-note { color: var(--rd-muted); font-size: 13.5px; margin-bottom: 4px; }
.rd .seo-meta-note a { color: var(--rd-flame-text); font-weight: 600; }
.rd .seo-answer {
    font-size: 17px; line-height: 1.6; max-width: 68ch; margin-block: 8px 26px;
    padding: 16px 20px; background: var(--rd-surface); border-radius: var(--rd-r);
    border-inline-start: 4px solid var(--rd-flame); box-shadow: var(--rd-shadow);
}
.rd .seo-intro { font-size: 15.5px; line-height: 1.7; color: var(--rd-muted); max-width: 70ch; margin-block: 6px 12px; }
.rd .seo-list { margin-block: 6px 14px; display: grid; gap: 6px; max-width: 70ch; }
.rd .seo-list li { position: relative; padding-inline-start: 20px; color: var(--rd-muted); line-height: 1.6; }
.rd .seo-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .65em; width: 7px; height: 7px; border-radius: 2px; background: var(--rd-flame); }
.rd .seo-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-block: 12px 18px; }
.rd .seo-links li a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%;
    padding: 13px 16px; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 12px;
    font-weight: 500; transition: border-color .15s, color .15s;
}
.rd .seo-links li a::after { content: "→"; color: var(--rd-flame-text); font-weight: 700; }
.rd[dir="rtl"] .seo-links li a::after { content: "←"; }
.rd .seo-links li a:hover { border-color: var(--rd-plum); color: var(--rd-plum); }
.rd .seo-faq { display: grid; gap: 10px; margin-top: 10px; max-width: 76ch; }
.rd .seo-faq > * { background: var(--rd-surface); border-radius: 12px; padding: 14px 18px; box-shadow: var(--rd-shadow); }
.rd .seo-faq h3 { margin-bottom: 4px; }
.rd .seo-faq p { color: var(--rd-muted); }
.rd .seo-table-wrap { overflow-x: auto; background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); margin-block: 10px 20px; }
.rd .seo-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rd .seo-table th { text-align: start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-muted); background: var(--rd-sunk); padding: 12px 16px; font-weight: 600; }
.rd .seo-table td { padding: 12px 16px; border-top: 1px solid var(--rd-line); }
.rd .toc { background: var(--rd-surface); border-radius: 12px; padding: 14px 18px; box-shadow: var(--rd-shadow); margin-block: 10px 18px; }

/* ---------- Forms ---------- */
.rd .input-form, .rd .input-form2 { position: relative; margin-bottom: 12px; }
.rd .input-form input, .rd .input-form2 input,
.rd .input-form textarea, .rd .input-form2 textarea,
.rd .rd-main .form-control, .rd .modal .form-control {
    width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--rd-line); border-radius: 12px;
    background: var(--rd-surface); color: var(--rd-ink); font-size: 15px; box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.rd .input-form .icon ~ input, .rd .input-form input:has(~ .icon) { padding-inline-start: 42px; }
.rd .input-form input:focus, .rd .input-form2 input:focus,
.rd .input-form textarea:focus, .rd .input-form2 textarea:focus,
.rd .rd-main .form-control:focus, .rd .modal .form-control:focus {
    border-color: var(--rd-plum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-plum) 18%, transparent); outline: none;
}
.rd .input-form .icon { color: var(--rd-muted); }
.rd .infoTitle, .rd label { color: var(--rd-ink); font-weight: 500; }
.rd input[type="checkbox"], .rd input[type="radio"] { accent-color: var(--rd-plum); }
.rd input[type="radio"] { border-color: var(--rd-plum); }

/* nice-select2 dropdowns (filters, post-ad) */
.rd .nice-select {
    min-height: 46px; height: auto; line-height: 44px; border: 1px solid var(--rd-line); border-radius: 12px;
    background: var(--rd-surface); color: var(--rd-ink); font-size: 14.5px; padding-inline: 14px 34px; float: none; width: 100%;
}
.rd .nice-select:hover, .rd .nice-select.open, .rd .nice-select:focus { border-color: var(--rd-plum); }
.rd .nice-select::after { border-color: var(--rd-muted); }
.rd .nice-select .nice-select-dropdown, .rd .nice-select .list {
    border-radius: 12px; border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow); background: var(--rd-surface);
}
.rd .nice-select .option { line-height: 40px; min-height: 40px; }
.rd .nice-select .option:hover, .rd .nice-select .option.focus, .rd .nice-select .option.selected.focus { background: var(--rd-sunk); }
.rd .nice-select .option.selected { color: var(--rd-plum); font-weight: 600; }
.rd .nice-select .nice-select-search { border-radius: 8px; border: 1px solid var(--rd-line); }

/* ---------- Buttons ---------- */
.rd .cmn-btn1, .rd .cmn-btn2, .rd .cmn-btn4, .rd .cmn-btn02,
.rd .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rd-flame); color: var(--rd-on-flame); border: 0; border-radius: 999px;
    padding: 12px 22px; font-weight: 600; font-size: 15px; line-height: 1.3; box-shadow: none;
    transition: background-color .15s ease, transform .15s ease;
}
.rd .cmn-btn1:hover, .rd .cmn-btn2:hover, .rd .cmn-btn4:hover, .rd .cmn-btn02:hover, .rd .btn-primary:hover,
.rd .cmn-btn1:focus, .rd .cmn-btn2:focus, .rd .cmn-btn4:focus, .rd .cmn-btn02:focus {
    background: color-mix(in srgb, var(--rd-flame) 88%, var(--rd-ink)); color: var(--rd-on-flame);
}
.rd .cmn-btn3, .rd .cmn-btn-outline0, .rd .cmn-btn-outline2, .rd .btn-secondary, .rd .account-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rd-surface); color: var(--rd-ink); border: 1.5px solid var(--rd-ink); border-radius: 999px;
    padding: 11px 20px; font-weight: 600; font-size: 15px; line-height: 1.3; box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
.rd .cmn-btn3:hover, .rd .cmn-btn-outline0:hover, .rd .cmn-btn-outline2:hover, .rd .btn-secondary:hover, .rd .account-btn:hover {
    background: var(--rd-ink); color: var(--rd-paper);
}
.rd .cmn-btn-outline2 .icon, .rd .cmn-btn-outline0 .icon { font-size: 18px; }

/* Chips the old markup still renders */
.rd .pro-btn1, .rd .pro-btn2 {
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 6px;
    font-weight: 500; text-transform: none; letter-spacing: 0; border: 0;
}
.rd .pro-btn1 { background: var(--rd-sunk); color: var(--rd-muted); }
.rd .pro-btn2 { background: color-mix(in srgb, var(--rd-flame) 14%, transparent); color: var(--rd-flame-text); }

/* ---------- Listing pages (shared by every /ads/... view) ---------- */
.rd .cateSidebar {
    position: relative; background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow);
    padding: 26px 20px 22px; margin-bottom: 24px; overflow: hidden;
}
.rd .cateSidebar::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 6px;
    background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 26px, var(--rd-aw-b) 26px 52px);
}
.rd .catTittle2 { font: 800 26px/1 var(--rd-display); text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--rd-ink); }
.rd[dir="rtl"] .catTittle2 { font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; }
.rd .catTittle2 a {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--rd-sunk); color: var(--rd-ink); font-size: 17px;
}
.rd .catTittle2 a:hover { background: var(--rd-ink); color: var(--rd-paper); }
.rd .catTittle { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 8px; }
.rd[dir="rtl"] .catTittle { letter-spacing: 0; }
.rd .cateSidebar .mb-30 { margin-bottom: 18px !important; }
.rd .cateSidebar .btn-wrapper { margin-top: 8px; }
.rd .cateSidebar .cmn-btn4 { width: 100%; }

.rd .listing-heading { margin-bottom: 4px; }
.rd .viewItems {
    background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow);
    padding: 10px; margin-block: 14px 20px;
}
.rd .viewItems .row { --bs-gutter-x: 10px; row-gap: 10px; align-items: center; }
.rd .viewItems .select-itms { position: relative; }
.rd .viewItems .select-itms > .icon { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--rd-muted); z-index: 2; pointer-events: none; }
.rd .viewItems .select-itms .nice-select { padding-inline-start: 38px; }
.rd .SearchWrapper { display: flex; gap: 10px; align-items: center; }
.rd .SearchWrapper .searchBox-wrapper { flex: 1; min-width: 0; }
.rd .SearchWrapper .input-form { margin: 0; display: flex; }
.rd .SearchWrapper .input-form input { border-start-end-radius: 0; border-end-end-radius: 0; }
.rd .search-button {
    border: 0; background: var(--rd-flame); color: var(--rd-on-flame); padding-inline: 16px; min-height: 48px; height: 48px; margin: 0; display: grid; place-items: center; flex-shrink: 0;
    border-start-end-radius: 12px; border-end-end-radius: 12px; position: static;
}
.rd .search-button .icon { position: static; color: inherit; font-size: 20px; }
.rd .view { display: flex; gap: 6px; background: var(--rd-sunk); padding: 4px; border-radius: 12px; }
.rd .customTab { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 9px; color: var(--rd-muted); font-size: 20px; display: grid; place-items: center; }
.rd .customTab.active { background: var(--rd-surface); color: var(--rd-ink); box-shadow: var(--rd-shadow); }
.rd .gridView .row > [class*="col-"] { display: flex; }
.rd .gridView .rd-card { width: 100%; }

.rd-filter-toggle {
    display: none; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px;
    padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--rd-ink); background: var(--rd-surface);
    color: var(--rd-ink); font-weight: 600; cursor: pointer;
}
.rd-filter-toggle[aria-expanded="true"] { background: var(--rd-ink); color: var(--rd-paper); }
.rd-filter-toggle i { font-size: 19px; }
@media (max-width: 991px) {
    .rd-filter-toggle { display: flex; }
    .rd .cateSidebar:not(.rd-open) { display: none; }
}

/* One card per row on small phones either way, so the grid/list switch only
   squeezes the search box there. */
@media (max-width: 575px) { .rd .viewItems .view { display: none; } }

/* Two-column summary tables fit the screen; wider ones keep their scroll. */
.rd .seo-table:not(:has(td:nth-child(3))) { min-width: 0; }
.rd .seo-table th { white-space: normal; }

/* Pagination (partial ships its own <style>; these win on specificity) */
.rd .ls-pagination .page-number { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-line); border-radius: 999px; }
.rd .ls-pagination .page-number:hover { background: var(--rd-sunk); color: var(--rd-ink); border-color: var(--rd-plum); }
.rd .ls-pagination .page-number.current { background: var(--rd-ink); color: var(--rd-paper); border-color: var(--rd-ink); box-shadow: none; }
.rd .ls-pagination .page-number.dots { border: 0; background: transparent; }
.rd .ls-pagination .page-number.disabled { background: var(--rd-surface); }
.rd .ls-pagination .pagination-summary { color: var(--rd-muted); }

/* ---------- Generic panels used across account, contact and dashboard ---------- */
.rd .sellerMessage, .rd .proDescription, .rd .accountSidebar, .rd .login-Wrapper, .rd .contactArea .contact-form,
.rd .myAccount, .rd .dashboard-card {
    background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); border: 0;
}
.rd .modal-content { border: 0; border-radius: 18px; box-shadow: var(--rd-shadow); }
.rd .modal-header, .rd .modal-footer { border-color: var(--rd-line); }
.rd .modal-title { font-weight: 600; }

/* Account (login, register, password) */
.rd .loginArea .loginLeft-img, .rd .loginLeft-img { background: var(--rd-sunk) !important;
}
.rd .loginLeft-img .loginLeft-img::before { display: none; }
.rd .loginArea > .container > .row > .loginLeft-img { position: relative; border-radius: var(--rd-r) 0 0 var(--rd-r); overflow: hidden; }
.rd .loginLeft-img::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 40px;
    background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 48px, var(--rd-aw-b) 48px 96px);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% 22px no-repeat, radial-gradient(24px 18px at 50% 0, #000 98%, #0000 101%) 0 22px / 48px 18px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% 22px no-repeat, radial-gradient(24px 18px at 50% 0, #000 98%, #0000 101%) 0 22px / 48px 18px repeat-x;
}
.rd[dir="rtl"] .loginLeft-img { border-radius: 0 var(--rd-r) var(--rd-r) 0; }
.rd .loginArea .login-cap .tittle, .rd .loginLeft-img h2, .rd .loginLeft-img .tittle {
    font: 800 clamp(32px, 3.6vw, 46px)/.95 var(--rd-display); text-transform: uppercase; color: var(--rd-ink);
}
.rd[dir="rtl"] .loginArea .login-cap .tittle, .rd[dir="rtl"] .loginLeft-img h2, .rd[dir="rtl"] .loginLeft-img .tittle { font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; line-height: 1.3; }
.rd .login-Wrapper a:not(.cmn-btn1):not(.cmn-btn2):not(.cmn-btn4):not(.cmn-btn-outline2):not(.cmn-btn-outline0),
.rd .forgetPassword, .rd .signUp a { color: var(--rd-plum); font-weight: 600; }

/* Dashboard sidebar */
.rd .accountSidebar { padding: 12px; }
.rd .accountSidebar .listItem .items { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-weight: 500; color: var(--rd-ink); }
.rd .accountSidebar .listItem .items .icon { font-size: 20px; color: var(--rd-muted); }
.rd .accountSidebar .listItem .items:hover { background: var(--rd-sunk); }
.rd .accountSidebar .listItem .items.active { background: var(--rd-ink); color: var(--rd-paper); }
.rd .accountSidebar .listItem .items.active .icon { color: var(--rd-flame); }
.rd .accountSidebar .accessAccount { border-top: 1px solid var(--rd-line); margin-top: 10px; padding-top: 12px; }
.rd .accountSidebar .account-btn { width: 100%; }

/* Bootstrap validation states (post/edit ad, contact). The border rules above
   would otherwise hide them. */
.rd .was-validated .form-control:invalid, .rd .form-control.is-invalid,
.rd .was-validated .input-form input:invalid, .rd .was-validated .input-form textarea:invalid { border-color: #D93B3B; }
.rd .was-validated .form-control:invalid:focus, .rd .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgb(217 59 59 / .18); }
.rd .was-validated .form-control:valid, .rd .form-control.is-valid { border-color: #2E9E6A; }
.rd .invalid-feedback { color: #C02F2F; }

/* Post / edit ad */
.rd .listingDetails-Wrapper .listingDetails {
    background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); padding: 26px 24px; border: 0;
}
.rd .listingDetails hr { border-color: var(--rd-line); opacity: 1; margin-block: 24px; }
.rd .browseCategory { row-gap: 14px; margin-top: 8px; }
.rd .singleCategory {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 0 !important; height: 100%;
    background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-r); box-shadow: none;
    transition: border-color .15s, transform .15s;
}
.rd .singleCategory:hover { border-color: var(--rd-plum); transform: translateY(-2px); }
.rd .singleCategory .icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--rd-sunk); color: var(--rd-plum); font-size: 24px; margin: 0; }
.rd .singleCategory h5 { margin: 0; font-size: 16px; }
.rd .effectBorder { accent-color: var(--rd-plum); width: 18px; height: 18px; }

/* My Account: reward points */
.rd .rewardPoints, .rd .transactionHistory { background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); border: 0; }
.rd .rewardStat { border-radius: 12px; border: 1px solid var(--rd-line); background: var(--rd-paper); }
.rd .rewardStat-value { font-family: var(--rd-display); font-weight: 800; font-size: 30px; color: var(--rd-ink); }
.rd .transactionHistory-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-muted); background: var(--rd-sunk); }

/* Chat (bubbles keep their own styles; they pick up the palette through the
   remapped theme variables) */
.rd .messagesWrapper .userList { background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); padding: 8px; display: grid; gap: 2px; }
.rd .messagesWrapper .userList .singleUser {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 12px; margin: 0; border: 0; border-radius: 12px; box-shadow: none; background: transparent;
}
.rd .messagesWrapper .userList a + a .singleUser { border-top: 1px solid var(--rd-line); border-radius: 0; }
.rd .messagesWrapper .userList .singleUser:hover { background: var(--rd-sunk); border-radius: 12px; }
.rd .messagesWrapper .userList .singleUser::before { display: none; }
.rd .messagesWrapper .userList .singleUser .listCap .userProduct-group { margin: 0; }
.rd .messagesWrapper .userList .singleUser .listCap .userProduct-group .userProduct-img {
    display: block; width: 56px; height: 56px; margin: 0; padding: 0; border-radius: 12px; overflow: hidden; flex-shrink: 0;
}
.rd .messagesWrapper .userList .singleUser .listCap .userProduct-group .userProduct-img .productImg {
    width: 100%; height: 100%; border-radius: 12px; object-fit: cover; display: block;
}
@media (max-width: 520px) {
    .rd .messagesWrapper .userList .singleUser .listCap .userProduct-group .userProduct-img { width: 48px; height: 48px; }
}
.rd .messagesWrapper .userList .listCap, .rd .messagesWrapper .userList .userProduct-group { display: contents; }
.rd .messagesWrapper .userList .userProduct-img { width: 56px; height: 56px; margin: 0; }
.rd .messagesWrapper .userList .productImg { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.rd .messagesWrapper .userList .proCaption { min-width: 0; display: grid; gap: 1px; }
.rd .messagesWrapper .userList .messageTittle { font: 600 15px/1.3 var(--rd-body); margin: 0; }
.rd .messagesWrapper .userList .messageCap { font-size: 13px; color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.rd .messagesWrapper .userList .pricing { font-size: 13.5px; color: var(--rd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd .messagesWrapper .userList .pricing b { font-weight: 600; color: var(--rd-plum); }
.rd .messagesWrapper .userList .timmer { margin: 0 !important; display: grid; justify-items: end; gap: 6px; align-self: start; padding-top: 2px; }
.rd .messagesWrapper .userList .time { font-size: 12px; color: var(--rd-muted); white-space: nowrap; }
.rd .messagesWrapper .userList .timmer .badge { margin: 0 !important; background: var(--rd-flame) !important; font-size: 11px; }
@media (max-width: 520px) {
    .rd .messagesWrapper .userList .singleUser { grid-template-columns: 48px minmax(0, 1fr); }
    .rd .messagesWrapper .userList .userProduct-img, .rd .messagesWrapper .userList .productImg { width: 48px; height: 48px; }
    .rd .messagesWrapper .userList .timmer { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
}
.rd .sendTime { color: var(--rd-muted); font-size: 11.5px; }

/* Dashboard sidebar: the old theme pins it to the viewport height */
.rd .accountSidebar { height: auto; overflow: visible; position: sticky; top: 96px; padding: 12px; margin-bottom: 24px; }
.rd .accountSidebar .listScroll { height: auto; max-height: none; overflow: visible; }
.rd .accountSidebar .accessAccount { position: static; }
.rd .accountSidebar .accessAccount .account-btn { margin: 0; color: var(--rd-ink); letter-spacing: 0; }
.rd .accountSidebar .accessAccount .account-btn .icon { margin: 0; font-size: 20px; vertical-align: 0; }
@media (max-width: 767px) { .rd .accountSidebar { position: static; } }

/* My Account section headers (inline styles on that page use a gradient) */
.rd .accountWrapper .rewardPoints .rewardPoints-header,
.rd .accountWrapper .transactionHistory .transactionHistory-header { background: var(--rd-ink); }

/* Post / edit / delete ad: the "Category - Subcategory" bar */
.rd .listingDetails label.infoTitle.bg-secondary {
    display: flex !important; align-items: center; justify-content: flex-start !important; text-align: start !important;
    width: 100%; background: var(--rd-ink) !important; color: var(--rd-paper) !important; border: 0 !important;
    border-radius: 12px !important; padding: 12px 18px !important; margin-bottom: 18px;
    font: 800 22px/1.1 var(--rd-display); text-transform: uppercase; letter-spacing: .02em;
}
.rd[dir="rtl"] .listingDetails label.infoTitle.bg-secondary { font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; letter-spacing: 0; }
.rd .badge.bg-primary { background: var(--rd-plum) !important; }

/* ---------- Chat ---------- */
.rd .messagesArea.section-padding2 { padding-block: 28px 48px; }
.rd .rd-chat-title { margin-bottom: 18px; }
.rd .messagesArea .messagesWrapper { background: none; padding: 0; box-shadow: none; border: 0; }

/* Dates and times are digits and Latin AM/PM; isolating them keeps
   "05/23/2026 05:21 PM" in order on Arabic pages. */
.rd .messagesWrapper .time, .rd .rd-conv .sendTime { direction: ltr; unicode-bidi: isolate; }

/* Conversation */
.rd-conv {
    display: flex; flex-direction: column; background: var(--rd-surface); border-radius: var(--rd-r);
    box-shadow: var(--rd-shadow); overflow: hidden; max-width: 860px; margin-inline: auto;
    height: min(78vh, 760px); min-height: 460px;
}
.rd-conv-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rd-line);
    position: relative;
}
.rd-conv-head::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 4px;
    background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 26px, var(--rd-aw-b) 26px 52px);
}
.rd-conv-back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--rd-sunk); flex-shrink: 0; }
.rd-conv-back svg { width: 18px; height: 18px; }
.rd .rd-conv-back:hover { background: var(--rd-ink); color: var(--rd-paper); }
.rd-conv-thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--rd-sunk); flex-shrink: 0; }
.rd-conv-who { display: grid; min-width: 0; }
.rd-conv-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-conv-ad { font-size: 13px; color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rd-conv-messages {
    flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--rd-plum) 9%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
        var(--rd-paper);
}
.rd-conv-older { text-align: center; margin-bottom: 4px; }
.rd-conv-older button {
    border: 1px solid var(--rd-line); background: var(--rd-surface); color: var(--rd-muted);
    font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.rd .rd-conv-older button:hover { color: var(--rd-ink); border-color: var(--rd-plum); }
#oldMessages { display: flex; flex-direction: column; gap: 10px; }

/* Bubbles. Received messages sit at the reading start, the user's own at the
   reading end, so the layout mirrors on Arabic pages. */
.rd-conv .leftMessage, .rd-conv .rightMessage { display: flex; }
.rd-conv .leftMessage { justify-content: flex-start; }
.rd-conv .rightMessage { justify-content: flex-end; }
.rd-conv .singleLeft-message, .rd-conv .singleRight-message { max-width: min(78%, 520px); margin: 0; }
.rd-conv .messageText { display: block; margin: 0; }
.rd-conv .messageImg { display: none; }
.rd-conv .messageCaption { display: grid; gap: 3px; }
.rd-conv .rightMessage .messageCaption { justify-items: end; }
.rd-conv .leftMessage .messageCaption { justify-items: start; }
.rd-conv .messagePera {
    margin: 0; padding: 9px 14px; font-size: 15px; line-height: 1.5; border-radius: 18px;
    white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(27 25 81 / .06);
}
.rd-conv .leftMessage .messagePera { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-line); border-end-start-radius: 6px; }
.rd-conv .rightMessage .messagePera { background: var(--rd-plum); color: #fff; border-end-end-radius: 6px; }
.rd-conv .sendTime { font-size: 11px; color: var(--rd-muted); padding-inline: 6px; }

/* Send bar */
.rd-conv-send { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--rd-line); background: var(--rd-surface); margin: 0; }
.rd-conv-send input {
    flex: 1; min-width: 0; height: 48px; padding-inline: 18px; border-radius: 999px; border: 1px solid var(--rd-line);
    background: var(--rd-paper); color: var(--rd-ink); font-size: 15px; outline: none;
}
.rd-conv-send input:focus { border-color: var(--rd-plum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-plum) 18%, transparent); }
.rd-conv-send button {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding-inline: 20px; border: 0; border-radius: 999px;
    background: var(--rd-flame); color: var(--rd-on-flame); font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.rd-conv-send button:disabled { opacity: .55; cursor: progress; }
.rd-conv-send button svg { width: 18px; height: 18px; }
@media (max-width: 575px) {
    .rd-conv { height: calc(100dvh - 210px); min-height: 420px; border-radius: 12px; }
    .rd-conv-send-label { display: none; }
    .rd-conv-send button { width: 48px; padding: 0; justify-content: center; }
    .rd-conv-messages { padding: 14px 12px; }
}

/* Badges (Bootstrap) keep their meaning colours but take the new shape */
.rd .badge { border-radius: 999px; font-weight: 600; padding: .45em .8em; }

/* Old decorative effects that don't belong in the new design */
.rd .bouncingAnimation, .rd .routedOne, .rd .bounce-animate { animation: none; }

/* ---------- Awning ---------- */
.rd-awning {
    --stripe: 72px; --drop: 22px; --body-h: 18px;
    height: calc(var(--body-h) + var(--drop));
    background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 var(--stripe), var(--rd-aw-b) var(--stripe) calc(var(--stripe) * 2));
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% var(--body-h) no-repeat,
        radial-gradient(calc(var(--stripe) / 2) var(--drop) at 50% 0, #000 98%, #0000 101%) 0 var(--body-h) / var(--stripe) var(--drop) repeat-x;
            mask:
        linear-gradient(#000 0 0) top / 100% var(--body-h) no-repeat,
        radial-gradient(calc(var(--stripe) / 2) var(--drop) at 50% 0, #000 98%, #0000 101%) 0 var(--body-h) / var(--stripe) var(--drop) repeat-x;
}
.rd-awning-slim { --stripe: 56px; --drop: 14px; --body-h: 8px; }
.rd-brand-rule { height: 4px; background: linear-gradient(90deg, var(--rd-aw-a) 0 50%, var(--rd-aw-b) 50% 100%); }

/* ---------- Header ---------- */
.rd-header {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--rd-paper) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rd-line);
}
.rd-nav { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.rd-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rd-brand img { width: 40px; height: 40px; }
.rd-word { font: 800 25px/.9 var(--rd-display); letter-spacing: .02em; text-transform: uppercase; color: var(--rd-plum); }
.rd-word small { display: block; font: 500 10.5px/1.3 var(--rd-body); letter-spacing: .08em; color: var(--rd-muted); text-transform: none; }
.rd-links { display: flex; gap: 4px; margin-inline-start: 8px; }
.rd-links a { padding: 8px 12px; border-radius: 999px; font-weight: 500; color: var(--rd-muted); white-space: nowrap; }
.rd .rd-links a:hover, .rd .rd-links a[aria-current] { color: var(--rd-ink); background: var(--rd-sunk); }
.rd-nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.rd-seg { display: inline-flex; border: 1px solid var(--rd-line); border-radius: 999px; padding: 3px; background: var(--rd-surface); margin: 0; }
.rd-seg button {
    border: 0; background: transparent; padding: 5px 11px; border-radius: 999px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--rd-muted); line-height: 1.4;
}
.rd-seg button[aria-pressed="true"] { background: var(--rd-ink); color: var(--rd-paper); }

.rd-icon-btn {
    position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px;
    border: 1px solid var(--rd-line); background: var(--rd-surface); cursor: pointer; color: var(--rd-ink); padding: 0;
}
.rd-icon-btn svg { width: 19px; height: 19px; }
.rd-avatar { font-weight: 700; color: var(--rd-plum); }
.rd-dot {
    position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--rd-flame); box-shadow: 0 0 0 2px var(--rd-surface);
}

.rd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease;
}
.rd-btn:active { transform: translateY(1px); }
.rd-btn svg { width: 18px; height: 18px; }
.rd .rd-btn-flame, .rd .rd-btn-flame:hover, .rd .rd-btn-flame:focus { background: var(--rd-flame); color: var(--rd-on-flame); }
.rd .rd-btn-flame:hover { background: color-mix(in srgb, var(--rd-flame) 88%, var(--rd-ink)); }

/* Dropdowns (chat, account) */
.rd-drop { position: relative; }
.rd-drop-panel {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 40; width: min(340px, calc(100vw - 32px));
    background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-r); box-shadow: var(--rd-shadow);
    padding: 14px;
}
.rd-drop-panel h6 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 8px; font-weight: 600; }
.rd-chat-panel ul { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.rd-chat-panel li a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.rd .rd-chat-panel li a:hover { background: var(--rd-sunk); }
.rd-chat-panel img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--rd-sunk); }
.rd-chat-text { display: grid; min-width: 0; }
.rd-chat-who { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.rd-chat-sub { font-size: 12.5px; color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-count { background: var(--rd-flame); color: var(--rd-on-flame); font-size: 11px; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.rd-drop-foot { display: block; text-align: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rd-line); font-weight: 600; }
.rd .rd-drop-foot { color: var(--rd-flame-text); }
.rd-menu-list a { display: block; padding: 9px 10px; border-radius: 8px; font-weight: 500; }
.rd .rd-menu-list a:hover { background: var(--rd-sunk); }

.rd-menu-btn { display: none; }
.rd-mobile-panel { display: none; }

/* ---------- Hero ---------- */
.rd-hero { padding-block: 44px 28px; }
.rd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; }
.rd-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-plum);
}
.rd-cedar { width: 16px; height: 16px; color: var(--rd-flame); }
.rd-hero h1 {
    font: 900 clamp(52px, 8.4vw, 112px)/.86 var(--rd-display);
    text-transform: uppercase; letter-spacing: -.005em; margin-block: 14px 18px;
}
.rd-l2 { display: block; color: var(--rd-flame-text); }
.rd .rd-lead { font-size: 17px; color: var(--rd-muted); max-width: 52ch; }

.rd-counter {
    margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; align-items: stretch;
    background: var(--rd-surface); border: 2px solid var(--rd-ink); border-radius: 18px; padding: 6px;
    box-shadow: 6px 6px 0 var(--rd-plum);
}
.rd-counter:focus-within { box-shadow: 6px 6px 0 var(--rd-flame); }
.rd-field { display: flex; align-items: center; gap: 10px; padding-inline: 14px; min-width: 0; margin: 0; }
.rd-field + .rd-field { border-inline-start: 1px solid var(--rd-line); }
.rd-field svg { width: 20px; height: 20px; color: var(--rd-muted); }
.rd-field input, .rd-field select {
    border: 0; background: transparent; outline: none; width: 100%; min-width: 0; padding-block: 12px; font-size: 16px; height: auto; box-shadow: none;
}
.rd-field select { cursor: pointer; padding-inline-end: 6px; }
.rd .rd-field input:focus-visible, .rd .rd-field select:focus-visible { outline: none !important; }
.rd-counter .rd-btn { padding-inline: 24px; border-radius: 12px; }

.rd-quick { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rd-quick-label { font-size: 13px; color: var(--rd-muted); margin-inline-end: 4px; }
.rd-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
    background: var(--rd-surface); border: 1px solid var(--rd-line); font-size: 13.5px; font-weight: 500;
    transition: border-color .15s, color .15s;
}
.rd .rd-chip:hover { border-color: var(--rd-plum); color: var(--rd-plum); }

/* Hanging price tags */
.rd-rack { position: relative; padding-top: 6px; }
.rd-rod { height: 7px; border-radius: 4px; background: var(--rd-ink); margin-inline: 6px; position: relative; }
.rd-rod::before, .rd-rod::after { content: ""; position: absolute; top: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--rd-ink); }
.rd-rod::before { inset-inline-start: -6px; }
.rd-rod::after { inset-inline-end: -6px; }
.rd-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rd-hang {
    display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
    animation: rd-sway 6s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgb(27 25 81 / .16)); min-width: 0;
}
.rd-hang:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
.rd-hang:nth-child(3) { animation-delay: -4s; animation-duration: 6.5s; }
.rd-string { width: 2px; background: var(--rd-ink); opacity: .7; }
.rd-hang:nth-child(1) .rd-string { height: 30px; }
.rd-hang:nth-child(2) .rd-string { height: 92px; }
.rd-hang:nth-child(3) .rd-string { height: 52px; }
@keyframes rd-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.rd-tag {
    width: 100%; background: var(--rd-surface); position: relative; display: block;
    clip-path: polygon(22% 0, 78% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
    padding: 26px 12px 14px;
}
.rd-tag::before {
    content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0;
    width: 10px; height: 10px; border-radius: 50%; background: var(--rd-paper); box-shadow: inset 0 0 0 2px var(--rd-ink);
}
.rd-tag-thumb { aspect-ratio: 1; border-radius: 10px; background: var(--rd-sunk); overflow: hidden; display: grid; place-items: center; }
.rd-tag-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rd-tag-thumb img.rd-thumb-ph, .rd-thumb img.rd-thumb-ph { width: 45%; height: auto; opacity: .35; }
.rd-tag-title {
    margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-tag .rd-price-row { display: block; margin-top: 6px; }
.rd-tag .rd-price { font-size: 24px; color: var(--rd-flame-text); display: block; }
.rd-tag .rd-price2 { font-size: 11.5px; display: block; }
.rd-tag-where { font-size: 11.5px; color: var(--rd-muted); margin-top: 4px; }
.rd .rd-rack-note { margin-top: 18px; font-size: 12.5px; color: var(--rd-muted); text-align: center; }

/* ---------- Sections ---------- */
.rd-block { padding-block: 44px; }
.rd-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.rd-sec-head h2 { font: 800 clamp(34px, 4.6vw, 50px)/.95 var(--rd-display); text-transform: uppercase; letter-spacing: .005em; }
.rd .rd-sub { color: var(--rd-muted); margin-top: 6px; font-size: 14.5px; }
.rd .rd-see-all { font-weight: 600; color: var(--rd-flame-text); display: inline-flex; align-items: center; gap: 6px; }
.rd .rd-see-all:hover { text-decoration: underline; color: var(--rd-flame-text); }
.rd-see-all svg { width: 16px; height: 16px; }
[dir="rtl"] .rd-flip { transform: scaleX(-1); }

/* Category stalls */
.rd-stalls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.rd-stall {
    position: relative; background: var(--rd-surface); border-radius: 0 0 var(--rd-r) var(--rd-r); box-shadow: var(--rd-shadow);
    display: flex; flex-direction: column; transition: transform .2s ease;
}
.rd-stall:hover { transform: translateY(-4px); }
.rd-stall .rd-awning { --stripe: 26px; --drop: 10px; --body-h: 10px; }
.rd-stall:nth-child(even) .rd-awning { background: repeating-linear-gradient(90deg, var(--rd-aw-b) 0 26px, var(--rd-aw-a) 26px 52px); }
.rd-stall-inner { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rd-stall img { width: 52px; height: 52px; margin-bottom: 8px; }
.rd-stall h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.rd-count-text { font-size: 13px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-subs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; position: relative; z-index: 2; }
.rd .rd-subs a { color: var(--rd-plum); }
.rd .rd-subs a:hover { text-decoration: underline; color: var(--rd-plum); }

/* Cards */
.rd-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rd-scroller {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 12px;
}
.rd-scroller::-webkit-scrollbar { display: none; }
.rd-scroller > * { scroll-snap-align: start; }
.rd-arrows { display: flex; gap: 8px; }
.rd-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.rd-card {
    position: relative; background: var(--rd-surface); border-radius: var(--rd-r); overflow: hidden; box-shadow: var(--rd-shadow);
    display: flex; flex-direction: column; min-width: 0; transition: transform .2s ease;
}
.rd-card:hover { transform: translateY(-3px); }
.rd-media { position: relative; aspect-ratio: 4 / 3; background: var(--rd-sunk); display: grid; place-items: center; overflow: hidden; }
.rd-media .rd-photo { width: 100%; height: 100%; object-fit: cover; }
.rd-ph {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--rd-plum) 7%, transparent) 14px 28px);
}
.rd-ph img { width: 64px; opacity: .35; }
.rd-badge {
    position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 5px;
    background: var(--rd-flame); color: var(--rd-on-flame); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
}
.rd-badge svg { width: 13px; height: 13px; }
.rd-pill {
    position: absolute; bottom: 10px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
    background: rgb(15 14 39 / .66); color: #fff; display: inline-flex; gap: 5px; align-items: center;
}
.rd-pill-ago { inset-inline-start: 10px; }
.rd-pill-views { inset-inline-end: 10px; }
.rd-pill svg { width: 13px; height: 13px; }
.rd-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rd-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Prices can be long (LBP-only ads run to 12+ digits), so they may wrap. */
.rd-price { font: 800 28px/1 var(--rd-display); color: var(--rd-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; overflow-wrap: anywhere; min-width: 0; }
.rd-per { white-space: nowrap; }
.rd-per { font: 500 13px var(--rd-body); color: var(--rd-muted); }
.rd-price2 { font-size: 12px; color: var(--rd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-card h3 { font-size: 15px; font-weight: 500; line-height: 1.35; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-where { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--rd-muted); min-width: 0; }
.rd-where svg { width: 14px; height: 14px; }
.rd-specs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.rd-spec { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--rd-sunk); color: var(--rd-muted); font-weight: 500; }
.rd-spec i { font-size: 14px; }
.rd-spec-neg { background: color-mix(in srgb, var(--rd-flame) 14%, transparent); color: var(--rd-flame-text); }

/* Wide card (list view on listing pages) */
.rd-card-wide { flex-direction: row; margin-bottom: 18px; width: 100%; }
/* The photo fills a fixed-shape box (cropped) instead of setting the card's
   height from its own proportions; tall photos used to stretch the card. */
.rd-card-wide .rd-media { width: 38%; max-width: 280px; aspect-ratio: auto; min-height: 210px; align-self: stretch; flex-shrink: 0; }
.rd-card-wide .rd-media .rd-photo, .rd-card-wide .rd-media .rd-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd .listingView .row > [class*="col-"] { display: flex; }
.rd-card-wide .rd-card-body { justify-content: center; min-width: 0; }
.rd-card-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--rd-muted); }
.rd-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rd-card-meta svg { width: 14px; height: 14px; }
@media (max-width: 520px) {
    .rd-card-wide { flex-direction: column; }
    .rd-card-wide .rd-media { width: 100%; max-width: none; aspect-ratio: 4 / 3; min-height: 0; align-self: auto; }
}

/* Ad slot */
.rd-adslot { text-align: center; padding-block: 8px; }

/* Tabs */
.rd-tabs { display: inline-flex; gap: 6px; padding: 5px; background: var(--rd-sunk); border-radius: 999px; flex-wrap: wrap; }
.rd-tabs button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--rd-muted); }
.rd-tabs button[aria-selected="true"] { background: var(--rd-surface); color: var(--rd-ink); box-shadow: var(--rd-shadow); }
.rd-shelf-all { margin-top: 18px; }

/* Districts */
.rd-districts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; border-top: 2px solid var(--rd-ink); }
.rd-district {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 2px; border-bottom: 1px solid var(--rd-line); transition: color .15s;
}
.rd .rd-district:hover { color: var(--rd-flame-text); }
.rd-district-name { font: 700 22px/1.05 var(--rd-display); text-transform: uppercase; letter-spacing: .02em; }
.rd-district svg { width: 16px; height: 16px; opacity: .45; }
.rd-district:hover svg { opacity: 1; }

/* Recent */
.rd-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rd-row-card {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center;
    background: var(--rd-surface); border-radius: 12px; padding: 10px; box-shadow: var(--rd-shadow);
}
.rd-thumb { width: 92px; height: 92px; border-radius: 9px; background: var(--rd-sunk); display: grid; place-items: center; overflow: hidden; }
.rd-thumb .rd-photo { width: 100%; height: 100%; object-fit: cover; }
.rd-row-text { min-width: 0; }
.rd-row-card h3 { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-row-card .rd-price { font-size: 23px; margin-top: 4px; display: inline-block; }
.rd-row-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--rd-muted); margin-top: 2px; }

/* Sell */
.rd-sell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.rd-sell h2 { font: 900 clamp(40px, 5.6vw, 70px)/.9 var(--rd-display); text-transform: uppercase; }
.rd-sell h2 span { color: var(--rd-flame-text); }
.rd-sell .rd-lead { font-size: 16px; margin-block: 14px 22px; max-width: 44ch; }
.rd-steps { display: grid; gap: 12px; counter-reset: rd-step; }
.rd-steps li {
    counter-increment: rd-step; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center;
    background: var(--rd-surface); border-radius: var(--rd-r); padding: 16px 18px; box-shadow: var(--rd-shadow);
}
.rd-steps li::before { content: counter(rd-step); font: 900 54px/1 var(--rd-display); color: var(--rd-plum); text-align: center; }
.rd-steps h3 { font-size: 16.5px; font-weight: 600; }
.rd .rd-steps p { font-size: 14px; color: var(--rd-muted); margin-top: 2px; }

/* App band + footer */
.rd-band { background: var(--rd-band); color: var(--rd-on-band); margin-top: 28px; }
.rd-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding-block: 40px 48px; }
.rd-band h2 { font: 800 clamp(34px, 4.6vw, 52px)/.95 var(--rd-display); text-transform: uppercase; }
.rd-band p { opacity: .8; margin-top: 8px; }
.rd-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.rd-stores img { height: 46px; width: auto; display: block; }

.rd-footer { background: var(--rd-band); color: var(--rd-on-band); border-top: 1px solid color-mix(in srgb, var(--rd-on-band) 14%, transparent); }
.rd-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-block: 40px 28px; }
.rd-foot-grid h4 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; font-weight: 600; }
.rd-foot-grid ul { display: grid; gap: 8px; font-size: 14px; }
.rd .rd-foot-grid a:hover { color: var(--rd-flame); }
.rd-foot-logo { width: 120px; height: auto; display: block; }
.rd-foot-brand p { opacity: .75; font-size: 14px; margin-top: 12px; max-width: 36ch; }
.rd-social { display: flex; gap: 16px; margin-top: 14px; font-size: 13.5px; font-weight: 500; }
.rd .rd-social a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--rd-on-band) 35%, transparent); }
.rd-legal { padding-block: 16px 24px; font-size: 12.5px; opacity: .6; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Empty and error states ---------- */
.rd-empty { padding-block: 40px 64px; text-align: center; }
.rd-empty lottie-player { margin-inline: auto; max-width: 100%; }
.rd-empty h1 { margin-top: 8px; }
.rd-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Guides index ---------- */
.rd-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.rd-guide-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--rd-surface);
    border-radius: 0 0 var(--rd-r) var(--rd-r); box-shadow: var(--rd-shadow); padding: 26px 22px 20px; transition: transform .2s ease;
}
.rd-guide-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 26px, var(--rd-aw-b) 26px 52px); }
.rd-guide-card:nth-child(even)::before { background: repeating-linear-gradient(90deg, var(--rd-aw-b) 0 26px, var(--rd-aw-a) 26px 52px); }
.rd-guide-card:hover { transform: translateY(-3px); }
.rd-guide-card h2 a::after { content: ""; position: absolute; inset: 0; }
.rd-guide-card .seo-intro { margin: 0; flex: 1; font-size: 14.5px; }
.rd-guide-card .rd-see-all { margin-top: 4px; }
@media (max-width: 760px) { .rd-guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ad details ---------- */
.rd .rd-btn-ink, .rd .rd-btn-ink:hover, .rd .rd-btn-ink:focus { background: var(--rd-ink); color: var(--rd-paper); }
.rd .rd-btn-ghost { background: var(--rd-surface); color: var(--rd-ink); border: 1.5px solid var(--rd-ink); }
.rd .rd-btn-ghost:hover { background: var(--rd-ink); color: var(--rd-paper); }
.rd-btn i { font-size: 19px; }

.rd-ad { padding-block: 28px 48px; }
.rd-ad-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.rd-ad-main, .rd-ad-side { display: grid; gap: 24px; min-width: 0; }
.rd-ad-side { position: sticky; top: 96px; }

/* Slick sizes its track from the slider's width; without these caps a flex
   parent lets the slider grow to the full track width. */
.rd-ad-gallery, .rd-ad-gallery .gallery-main-wrap, .rd-ad-gallery .thumb-wrap,
.rd-ad-gallery .shop-details-gallery-slider, .rd-ad-gallery .shop-details-gallery-nav { min-width: 0; max-width: 100%; }
.rd-ad-layout > *, .rd-ad-main > *, .rd-ad-side > * { min-width: 0; }
.rd-ad-gallery { background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); padding: 10px; overflow: hidden; }
.rd-ad-gallery .gallery-main-wrap { position: relative; border-radius: 10px; overflow: hidden; background: var(--rd-sunk); }
.rd-ad-gallery .single-main-image img { width: 100%; height: clamp(280px, 48vw, 540px); object-fit: contain; background: var(--rd-sunk); }
.rd-ad-gallery .thumb-wrap { margin-top: 10px; background: none; box-shadow: none; padding: 0; border: 0; }
.rd-ad-gallery .single-thumb { padding: 0 4px; }
.rd-ad-gallery .thumb-link img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; opacity: .7; cursor: pointer; }
.rd-ad-gallery .slick-current .thumb-link img { opacity: 1; outline: 2px solid var(--rd-flame); outline-offset: -2px; }
.rd-ad-gallery .gallery-counter {
    position: absolute; bottom: 12px; left: auto; right: 12px; transform: none; width: auto; background: rgb(15 14 39 / .7); color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.rd[dir="rtl"] .rd-ad-gallery .gallery-counter { right: auto; left: 12px; }

.rd-ad-details { background: var(--rd-surface); border-radius: var(--rd-r); box-shadow: var(--rd-shadow); padding: 24px; }
.rd-ad-details > h2, .rd-related h2, .rd-safety h2 { font: 600 13px/1.3 var(--rd-body); letter-spacing: .1em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 12px; }
.rd[dir="rtl"] .rd-ad-details > h2, .rd[dir="rtl"] .rd-related h2, .rd[dir="rtl"] .rd-safety h2 { letter-spacing: 0; }
.rd-ad-details .ad-description { white-space: pre-wrap; font-size: 15.5px; line-height: 1.7; max-width: 72ch; }

/* The per-type spec partials render "<b>Label: </b><span>value</span>" rows;
   laid out here as a two-column sheet without touching the 20 partials. */
.rd-specsheet:not(:empty) { margin-top: 22px; }
.rd-specsheet hr { display: none; }
.rd-specsheet > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 2px solid var(--rd-ink); }
.rd-specsheet > div > div { margin: 0 !important; padding: 11px 2px; border-bottom: 1px solid var(--rd-line); display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.rd-specsheet > div > div > b { font-weight: 500; color: var(--rd-muted); }
.rd-specsheet > div > div > span { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
/* Extras / amenities checklist under the sheet */
.rd-specsheet > div > .row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 16px 0 4px; border: 0; justify-content: flex-start; }
.rd-specsheet > div > .row > [class*="col-"] {
    width: auto; flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; background: var(--rd-sunk);
    font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
}
.rd-specsheet > div > .row .icon { color: var(--rd-plum) !important; }
.rd-specsheet > div > .d-flex { grid-column: 1 / -1; justify-content: flex-start !important; font: 800 22px/1.1 var(--rd-display); text-transform: uppercase; }
.rd[dir="rtl"] .rd-specsheet > div > .d-flex { font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; }

.rd-ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rd-line); flex-wrap: wrap; }
.rd-ad-social { display: flex; gap: 6px; }
.rd-ad-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--rd-sunk); font-size: 21px; }
.rd .rd-ad-social a:hover { background: var(--rd-ink); color: var(--rd-paper); }

.rd-ad-summary { position: relative; background: var(--rd-surface); border-radius: 0 0 var(--rd-r) var(--rd-r); box-shadow: var(--rd-shadow); padding: 26px 22px 22px; display: grid; gap: 12px; }
.rd-ad-summary::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 6px;
    background: repeating-linear-gradient(90deg, var(--rd-aw-a) 0 26px, var(--rd-aw-b) 26px 52px);
}
.rd-ad-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rd .rd-ad-summary .ad-details-title { font: 600 clamp(22px, 2.4vw, 27px)/1.25 var(--rd-body); text-transform: none; letter-spacing: 0; margin: 0; overflow-wrap: anywhere; }
.rd-fav-on { color: var(--rd-flame); }
.rd-ad-summary .rd-price-row { display: grid; gap: 4px; }
.rd-ad-summary .rd-price { font-size: clamp(38px, 4vw, 48px); }
.rd-ad-summary .rd-price2 { font-size: 14px; }
.rd-ad-summary .rd-specs { margin: 0; }
.rd-ad-summary .rd-specs:empty { display: none; }
.rd-ad-facts { display: grid; gap: 7px; font-size: 14px; color: var(--rd-muted); padding-block: 12px; border-block: 1px solid var(--rd-line); }
.rd-ad-facts li { display: flex; align-items: center; gap: 8px; }
.rd-ad-facts svg, .rd-ad-facts i { width: 16px; height: 16px; font-size: 16px; }
.rd-ad-contact { display: grid; gap: 8px; }
.rd-ad-contact .rd-btn { width: 100%; padding-block: 13px; }
.rd-seller { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.rd-seller-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rd-plum); color: #fff; display: grid; place-items: center; font: 800 20px var(--rd-display); flex-shrink: 0; }
.rd-seller-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rd-seller-since { font-size: 13px; color: var(--rd-muted); }

.rd-ad-more { display: grid; gap: 24px; }
.rd-safety { background: color-mix(in srgb, var(--rd-flame) 8%, var(--rd-surface)); border-radius: var(--rd-r); padding: 18px 20px; }
.rd-safety h2 { display: flex; align-items: center; gap: 8px; color: var(--rd-flame-text); }
.rd-safety p { font-weight: 600; margin-bottom: 6px; }
.rd-safety ul { display: grid; gap: 6px; font-size: 14px; color: var(--rd-muted); }
.rd-safety li { position: relative; padding-inline-start: 22px; }
.rd-safety li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--rd-flame-text); font-weight: 700; }
.rd-related { display: grid; gap: 10px; }
.rd-ad .rd-adslot { margin-top: 28px; }

@media (max-width: 991px) {
    /* One column: photos, then the summary (price, contact), then the
       description, then safety and similar ads. */
    .rd-ad-layout { display: flex; flex-direction: column; gap: 20px; }
    .rd-ad-main, .rd-ad-side { display: contents; }
    .rd-ad-gallery { order: 1; }
    .rd-ad-summary { order: 2; }
    .rd-ad-details { order: 3; }
    .rd-ad-more { order: 4; }
}
@media (max-width: 560px) {
    .rd-specsheet > div { grid-template-columns: minmax(0, 1fr); }
    .rd-ad-details { padding: 18px; }
}

/* ---------- Arabic ---------- */
.rd[dir="rtl"] .rd-hero h1, .rd[dir="rtl"] .rd-sec-head h2, .rd[dir="rtl"] .rd-sell h2,
.rd[dir="rtl"] .rd-band h2, .rd[dir="rtl"] .rd-district-name {
    font-family: var(--rd-display-ar); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.rd[dir="rtl"] .rd-hero h1 { font-size: clamp(50px, 7.6vw, 100px); line-height: 1.15; }
.rd[dir="rtl"] .rd-sec-head h2, .rd[dir="rtl"] .rd-band h2 { line-height: 1.25; }
.rd[dir="rtl"] .rd-sell h2 { line-height: 1.2; }
.rd[dir="rtl"] .rd-district-name { font-size: 20px; }
.rd[dir="rtl"] .rd-eyebrow, .rd[dir="rtl"] .rd-foot-grid h4 { letter-spacing: 0; }
.rd[dir="rtl"] .rd-counter { box-shadow: -6px 6px 0 var(--rd-plum); }
.rd[dir="rtl"] .rd-counter:focus-within { box-shadow: -6px 6px 0 var(--rd-flame); }

/* ---------- Responsive ---------- */
/* The header holds brand, five links, two toggles and the post button; Arabic
   labels run wider, so the tagline and then the links give way earlier. */
@media (max-width: 1360px) { .rd-word small { display: none; } .rd-links a { padding-inline: 10px; } }
/* Signed in, the header also carries chat, favourites, notifications and the
   account menu. That never leaves room for the text links inside the 1240px
   frame, so they always live in the menu; below 1024px the currency and
   language switches and favourites move there too (the panel has all three). */
.rd-header-auth .rd-links { display: none; }
.rd-header-auth .rd-menu-btn { display: grid; }
.rd-header-auth .rd-mobile-panel { border-top: 1px solid var(--rd-line); padding-block: 14px 18px; }
.rd-header-auth .rd-mobile-panel.rd-open { display: grid; gap: 14px; }
.rd-header-auth .rd-mobile-panel nav { display: grid; }
.rd-header-auth .rd-mobile-panel nav a { padding: 10px 2px; border-bottom: 1px solid var(--rd-line); font-weight: 500; }
.rd-header-auth .rd-mobile-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1024px) {
    .rd-header-auth .rd-hide-sm, .rd-header-auth .rd-post-text { display: none !important; }
    .rd-header-auth .rd-post { padding: 10px 12px; }
}
@media (max-width: 1240px) {
    .rd-links { display: none; }
    .rd-menu-btn { display: grid; }
    .rd-mobile-panel { border-top: 1px solid var(--rd-line); padding-block: 14px 18px; }
    .rd-mobile-panel.rd-open { display: grid; gap: 14px; }
    .rd-mobile-panel nav { display: grid; }
    .rd-mobile-panel nav a { padding: 10px 2px; border-bottom: 1px solid var(--rd-line); font-weight: 500; }
    .rd-mobile-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 1100px) {
    .rd-stalls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rd-scroller { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
    .rd-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rd-grid4 > :nth-child(4) { display: none; }
    .rd-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .rd-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .rd-rack { max-width: 520px; margin-inline: auto; width: 100%; }
    .rd-sell { grid-template-columns: minmax(0, 1fr); }
    .rd-districts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-foot-grid { grid-template-columns: 1fr 1fr; }
    .rd-band-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .rd-hide-sm, .rd-post-text { display: none !important; }
    .rd-post { padding: 10px 12px; }
    .rd-nav { gap: 12px; }
    .rd-nav-end { gap: 8px; }
    .rd-word small { display: none; }
    .rd-hero { padding-block: 28px 12px; }
    .rd-counter { grid-template-columns: minmax(0, 1fr); box-shadow: 4px 4px 0 var(--rd-plum); }
    .rd[dir="rtl"] .rd-counter { box-shadow: -4px 4px 0 var(--rd-plum); }
    .rd-field + .rd-field { border-inline-start: 0; border-top: 1px solid var(--rd-line); }
    .rd-counter .rd-btn { margin-top: 6px; padding-block: 13px; }
    .rd-stalls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .rd-scroller { grid-auto-columns: 78%; }
    .rd-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .rd-grid4 > :nth-child(4) { display: flex; }
    .rd-recent { grid-template-columns: minmax(0, 1fr); }
    .rd-tags { gap: 8px; }
    .rd-tag { padding-inline: 8px; }
    .rd-tag .rd-price { font-size: 19px; }
    .rd-hang:nth-child(2) .rd-string { height: 60px; }
    .rd-foot-grid { grid-template-columns: 1fr; }
    .rd-block { padding-block: 32px; }
    .rd-card-body { padding: 12px; }
    .rd-price { font-size: 23px; }
    .rd-price-row { flex-wrap: wrap; row-gap: 2px; }
}
/* Signed in on a phone: chat, notifications, account, post and menu need the
   room, so the brand shows as the logo mark only. */
@media (max-width: 520px) { .rd-header-auth .rd-word { display: none; } }
@media (max-width: 460px) {
    .rd-wrap { padding-inline: 16px; }
    .rd-grid4 { grid-template-columns: minmax(0, 1fr); }
    .rd-districts { grid-template-columns: minmax(0, 1fr); }
    .rd-word { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-hang { animation: none; }
    .rd-stall, .rd-card, .rd-btn { transition: none; }
}