/* PrimeNest - /listings/{slug} detail page: two-column layout + sticky
   Enquiry card (View Field Specifications A5) */

/* Scoped to this page only (this stylesheet only loads here) — lets the
   in-page tab nav's anchor jumps glide instead of snapping */
html {
    scroll-behavior: smooth;
}

.listing-detail-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.75rem 2rem 3rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.listing-detail-main {
    flex: 1;
    min-width: 0;
}

/* ---------- Breadcrumb ---------- */

.listing-detail-breadcrumb {
    margin-bottom: 1rem;
}

.listing-detail-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.listing-detail-breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin-left: 0.4rem;
    color: #c3ccd4;
}

.listing-detail-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.listing-detail-breadcrumb a:hover {
    color: var(--color-blue-primary);
}

.listing-detail-breadcrumb li[aria-current="page"] {
    color: #1a1a1a;
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Gallery ---------- */

.listing-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
    margin-bottom: 2.25rem;
    max-height: 280px;
}

.listing-gallery__main {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.listing-gallery__photo-btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.listing-gallery__main img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 280px;
    aspect-ratio: 4 / 1.9;
    object-fit: cover;
}

.listing-gallery__count {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
}

.listing-actions {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.listing-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: #4a5a6a;
    cursor: pointer;
}

.listing-actions__btn:hover {
    color: var(--color-blue-primary);
}

.listing-actions__btn[aria-pressed="true"],
.listing-actions__btn.is-active {
    color: var(--color-red-accent);
}

/* Saved = a solid red heart, not just a red outline. Scoped to the save
   button specifically (not the shared .listing-actions__btn class) so
   Compare's own icon, which shares that class, is untouched. */
#listing-save-btn[aria-pressed="true"] svg {
    fill: currentColor;
}

.listing-share {
    position: relative;
}

.listing-share__popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 30;
    width: 170px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 42, 71, 0.25);
    padding: 0.5rem;
}

.listing-share__popover[hidden] {
    display: none;
}

.listing-share__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.55rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.listing-share__item:hover {
    background: #f0f2f5;
}

.listing-share__item svg {
    flex-shrink: 0;
    color: var(--color-blue-primary);
}

.listing-gallery-notes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.listing-gallery-notes:has(> :not([hidden])) {
    margin-bottom: 1.25rem;
}

.listing-compare-note {
    margin: 0;
    font-size: 0.85rem;
    color: #1f7a4d;
    font-weight: 600;
}

.listing-gallery__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.5rem;
}

.listing-gallery__side img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 2.55;
    object-fit: cover;
    border-radius: 10px;
}

.listing-gallery__save-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.listing-gallery__save-note a {
    color: var(--color-blue-primary);
    font-weight: 600;
    text-decoration: none;
}

.listing-gallery__save-note-dismiss {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.4rem;
    color: var(--color-blue-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Builder chip + title ---------- */

.listing-builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    margin-bottom: 1rem;
}

.listing-builder-chip__logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #eef1f4;
    border: 1px solid #e2e7eb;
    flex-shrink: 0;
}

.listing-builder-chip__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-blue-primary);
}

.listing-detail-heading {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

.listing-detail-locality {
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ---------- Badges row ---------- */

.listing-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.listing-badges__tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.listing-badges__tag--buy {
    background: #e3f3ea;
    color: #1f7a4d;
}

.listing-badges__tag--rent {
    background: #e8f0fb;
    color: var(--color-blue-primary);
}

.listing-badges__negotiable {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-red-accent);
    background: #fbe9e9;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.listing-badges__amenities {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5a6a;
    background: #f0f2f5;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
}

/* ---------- Price block ---------- */

.listing-price-block {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.listing-price-block__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fdf0dc;
    color: #b8790a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-price-block__price {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
}

.listing-price-block__negotiable {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-red-accent);
    background: #fbe9e9;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.listing-price-block__per-sqft {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ---------- Shared main-column section heading (Floor Plan today;
   Specifications/Description/EMI/Amenities/Location/Builder reuse this
   once built) ---------- */

.listing-section-heading {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* ---------- Specifications ---------- */

.listing-specs {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.spec-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.spec-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    background: #f7f9fb;
    border-radius: 10px;
    padding: 1rem 0.5rem;
}

.spec-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-blue-primary);
    box-shadow: 0 2px 6px rgba(15, 42, 71, 0.08);
}

.spec-strip__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

.spec-strip__label {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.spec-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}

.spec-table tr {
    border-bottom: 1px solid #eef1f4;
}

.spec-table tr:last-child {
    border-bottom: none;
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: 0.7rem 0;
    font-size: 0.88rem;
    font-weight: 400;
}

.spec-table th {
    color: var(--color-text-muted);
    font-weight: 500;
}

.spec-table td {
    color: #1a1a1a;
    font-weight: 600;
    text-align: right;
}

/* ---------- Description ---------- */

.listing-description {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.listing-description__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #3a4653;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.listing-description__text.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.listing-description__toggle {
    margin-top: 0.6rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-blue-primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.listing-description__toggle:hover {
    color: var(--color-red-accent);
}

/* ---------- EMI Calculator ---------- */

.listing-emi {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.emi-calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background: #f7f9fb;
    border-radius: 14px;
    padding: 1.5rem;
}

.emi-calculator__inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.emi-calculator__field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5a6a;
    margin-bottom: 0.4rem;
}

.emi-calculator__field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.emi-calculator__field-head label {
    margin-bottom: 0;
}

.emi-calculator__field-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-blue-primary);
}

.emi-calculator__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #d7dde3;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}

.emi-calculator__input-wrap span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5a6a;
    flex-shrink: 0;
}

.emi-calculator__input-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1a1a;
    background: none;
}

.emi-calculator__field input[type="range"] {
    width: 100%;
    accent-color: var(--color-blue-primary);
}

.emi-calculator__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.emi-calculator__donut {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background: conic-gradient(var(--color-blue-primary) 0% 65%, var(--color-red-accent) 65% 100%);
    transition: background 0.2s ease;
}

.emi-calculator__donut::before {
    content: "";
    position: absolute;
    inset: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #eef1f4;
}

.emi-calculator__donut-center {
    position: absolute;
    inset: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.emi-calculator__emi-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}

.emi-calculator__emi-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
}

.emi-calculator__breakdown {
    width: 100%;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.emi-calculator__breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.emi-calculator__breakdown-item strong {
    margin-left: auto;
    color: #1a1a1a;
    font-weight: 700;
}

.emi-calculator__breakdown-label {
    color: #4a5a6a;
}

.emi-calculator__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.emi-calculator__swatch--principal {
    background: var(--color-blue-primary);
}

.emi-calculator__swatch--interest {
    background: var(--color-red-accent);
}

.emi-calculator__breakdown-item--total {
    padding-top: 0.5rem;
    border-top: 1px solid #e2e7eb;
}

.emi-calculator__breakdown-item--total .emi-calculator__breakdown-label {
    font-weight: 700;
    color: #1a1a1a;
}

/* ---------- Floor Plan ---------- */

.listing-floorplan {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

/* Card styled after the 99acres reference (icon+sqft row, area/BHK line,
   image, bottom action) — price/possession/callback dropped per the earlier
   audit; the bottom link jumps to our real Enquiry card instead */
.floorplan-card {
    max-width: 380px;
    background: #fff;
    border: 1px solid #e7ebef;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(15, 42, 71, 0.06);
    padding: 1.25rem;
}

.floorplan-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.floorplan-card__icon {
    display: inline-flex;
    color: var(--color-blue-primary);
}

.floorplan-card__sqft {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.floorplan-card__sqm {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.floorplan-card__type {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--color-blue-primary);
    font-weight: 600;
}

.floorplan-card__image {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    background: #f7f9fb;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.floorplan-card__cta {
    display: inline-block;
    color: var(--color-blue-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.floorplan-card__cta:hover {
    color: var(--color-red-accent);
}

.floorplan-card__image-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    margin-bottom: 1rem;
}

.floorplan-card__expand-hint {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26, 26, 26, 0.75);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
}

/* ---------- Floor Plan modal ---------- */

.floorplan-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.floorplan-modal[hidden] {
    display: none;
}

.floorplan-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 71, 0.6);
}

.floorplan-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: min(720px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.floorplan-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef1f4;
}

.floorplan-modal__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.floorplan-modal__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.floorplan-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.floorplan-modal__unit-toggle {
    display: inline-flex;
    background: #f0f2f5;
    border-radius: 999px;
    padding: 0.2rem;
}

.floorplan-modal__unit-toggle button {
    border: none;
    background: none;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5a6a;
    cursor: pointer;
}

.floorplan-modal__unit-toggle button.is-active {
    background: var(--color-blue-primary);
    color: #fff;
}

.floorplan-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #4a5a6a;
    cursor: pointer;
}

.floorplan-modal__close:hover {
    background: #e2e7eb;
}

.floorplan-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
}

.floorplan-modal__image-wrap {
    position: relative;
    margin-bottom: 1.25rem;
}

.floorplan-modal__image-wrap img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.floorplan-modal__hotspot {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.floorplan-modal__hotspot:hover {
    background: rgba(27, 95, 168, 0.12);
    border-color: rgba(27, 95, 168, 0.35);
}

.floorplan-modal__hotspot.is-active {
    background: rgba(27, 95, 168, 0.28);
    border-color: var(--color-blue-primary);
}

.floorplan-modal__rooms {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.floorplan-modal__rooms::-webkit-scrollbar {
    display: none;
}

.floorplan-modal__room-chip {
    flex-shrink: 0;
    border: 1px solid #d7dde3;
    background: #fff;
    color: #4a5a6a;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.floorplan-modal__room-chip:hover {
    border-color: var(--color-blue-primary);
    color: var(--color-blue-primary);
}

.floorplan-modal__room-chip.is-active {
    background: var(--color-blue-primary);
    border-color: var(--color-blue-primary);
    color: #fff;
}

.floorplan-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #eef1f4;
    text-align: right;
}

.floorplan-modal__enquire {
    display: inline-block;
    color: var(--color-blue-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.floorplan-modal__enquire:hover {
    color: var(--color-red-accent);
}

.listing-floorplan__empty {
    margin: 0;
    padding: 2rem;
    background: #f7f9fb;
    border: 1px dashed #d7dde3;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ---------- Amenities ---------- */

.listing-amenities {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.listing-amenities__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.listing-amenities__header .listing-section-heading {
    margin-bottom: 0;
}

.listing-amenities__viewall {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-blue-primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.listing-amenities__viewall:hover {
    color: var(--color-red-accent);
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.amenity-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    background: #f7f9fb;
    border-radius: 10px;
    padding: 1.1rem 0.5rem;
}

.amenity-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-blue-primary);
    box-shadow: 0 2px 6px rgba(15, 42, 71, 0.08);
}

.amenity-tile__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a5a6a;
}

/* ---------- Amenities modal (same pattern as the Floor Plan modal) ---------- */

.amenities-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.amenities-modal[hidden] {
    display: none;
}

.amenities-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 71, 0.6);
}

.amenities-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: min(560px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.amenities-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef1f4;
}

.amenities-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.amenities-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #4a5a6a;
    cursor: pointer;
}

.amenities-modal__close:hover {
    background: #e2e7eb;
}

.amenities-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
}

/* ---------- Location (real Google Maps embed, no API key needed) ---------- */

.listing-location {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.location-map {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 320px;
}

.location-map__directions {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26, 26, 26, 0.85);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 8px;
}

.location-map__directions:hover {
    background: #1a1a1a;
}

/* ---------- Location Advantages (demo-only, tracker D-17) ---------- */

.listing-location-advantages {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef1f4;
}

.listing-location-advantages__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.listing-location-advantages__header .listing-section-heading {
    margin-bottom: 0;
}

.location-advantages__scroller {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.location-advantages__scroller::-webkit-scrollbar {
    display: none;
}

.location-advantage-card {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #f7f9fb;
    border-radius: 10px;
    padding: 1rem;
}

.location-advantage-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-blue-primary);
    box-shadow: 0 2px 6px rgba(15, 42, 71, 0.08);
}

.location-advantage-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.location-advantage-card__distance {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ---------- Location Advantages modal (same pattern as the others) ---------- */

.location-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.location-modal[hidden] {
    display: none;
}

.location-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 71, 0.6);
}

.location-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: min(480px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.location-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef1f4;
}

.location-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.location-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #4a5a6a;
    cursor: pointer;
}

.location-modal__close:hover {
    background: #e2e7eb;
}

.location-modal__body {
    padding: 0.5rem 1.5rem 1.5rem;
    overflow-y: auto;
}

.location-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.location-advantage-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid #eef1f4;
}

.location-advantage-row:last-child {
    border-bottom: none;
}

.location-advantage-row__name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a1a;
}

.location-advantage-row__distance {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ---------- Gallery lightbox (closes tracker D-15) ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.lightbox__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 3rem 4rem;
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox__nav--prev {
    left: 1rem;
}

.lightbox__nav--next {
    right: 1rem;
}

.lightbox__count {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

/* ---------- Builder & Project ---------- */

.listing-builder {
    margin-bottom: 1rem;
}

.builder-card {
    background: #f7f9fb;
    border-radius: 14px;
    padding: 1.5rem;
}

.builder-card__builder {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.builder-card__logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #eef1f4;
    border: 1px solid #e2e7eb;
    flex-shrink: 0;
}

.builder-card__builder-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-blue-primary);
}

.builder-card__project {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    margin-bottom: 1rem;
}

.builder-card__project:hover {
    color: var(--color-blue-primary);
}

.builder-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.builder-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4a5a6a;
}

.builder-card__meta-item svg {
    flex-shrink: 0;
    color: var(--color-blue-primary);
    margin-top: 0.15rem;
}

.builder-card__amenities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e7eb;
}

.builder-card__amenity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-blue-primary);
    box-shadow: 0 2px 6px rgba(15, 42, 71, 0.08);
}

.builder-card__amenities-link {
    margin-left: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-blue-primary);
    text-decoration: none;
}

.builder-card__amenities-link:hover {
    color: var(--color-red-accent);
}

/* ---------- Similar Listings ---------- */

.similar-listings {
    margin-top: 1rem;
}

.similar-listings__scroller-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.similar-listings__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #dbe4ee;
    background: #fff;
    color: var(--color-blue-primary);
    cursor: pointer;
}

.similar-listings__nav:hover {
    background: #eaf2fb;
}

.similar-listings__scroller {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.similar-listings__scroller::-webkit-scrollbar {
    display: none;
}

.similar-card {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7ebef;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 16px rgba(15, 42, 71, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.similar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15, 42, 71, 0.12);
}

.similar-card__media {
    position: relative;
}

.similar-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 2.6;
    object-fit: cover;
}

.similar-card__tag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: #e3f3ea;
    color: #1f7a4d;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.similar-card__body {
    padding: 0.85rem 0.9rem 1rem;
}

.similar-card__price {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

.similar-card__negotiable {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-red-accent);
    background: #fbe9e9;
    padding: 0.12rem 0.35rem;
    border-radius: 4px;
}

.similar-card__specs {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #4a5a68;
}

.similar-card__project {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-card__locality {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.similar-card__builder {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-blue-primary);
    background: #eaf2fb;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* ---------- In-page jump nav ---------- */

/* position: sticky (not JS-toggled): sits in normal flow right where it's
   placed until scrolling would carry it above the fixed compact navbar
   (64px tall on interior pages), then it pins there — the same "appears
   once you scroll past the hero" effect as the 99acres reference, with no
   scroll listener needed. */
.listing-detail-tabs {
    position: sticky;
    top: 64px;
    z-index: 40;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    gap: 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e7ebef;
    margin-bottom: 1.75rem;
    scrollbar-width: none;
}

.listing-detail-tabs::-webkit-scrollbar {
    display: none;
}

/* Padding lives on the links themselves, not just the bar — gives each tab
   a proper ~44px touch target on mobile instead of just its text height */
.listing-detail-tabs a {
    flex-shrink: 0;
    padding: 0.9rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a5a6a;
    text-decoration: none;
}

.listing-detail-tabs a:hover {
    color: var(--color-blue-primary);
}

/* ---------- Enquiry card ---------- */

.listing-enquiry-card {
    flex: 0 0 340px;
    background: #fff;
    border: 1px solid #e7ebef;
    border-radius: 10px;
    padding: 1.25rem;
    position: sticky;
    top: 80px;
}

/* Above 900px the enquiry card always shows as the sticky sidebar it's
   always been — the [hidden] state below only drives the tablet/mobile
   modal behaviour. */
@media (min-width: 901px) {
    .listing-enquiry-card[hidden] {
        display: block;
    }
}

.listing-enquiry-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.listing-enquiry-card__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.listing-enquiry-card__close {
    display: none;
}

.listing-detail-enquire-btn {
    display: none;
}

.listing-enquiry-backdrop {
    display: none;
}

/* Visually-hidden but still reachable by screen readers — the label text
   moved into the field itself (as a placeholder) for sighted users, but a
   placeholder disappears the moment you start typing, so it's not a
   reliable stand-in for a real label. This keeps both. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.listing-enquiry-card__form {
    position: relative; /* so the success banner below can overlay exactly this box */
}

.listing-enquiry-card__field {
    margin-bottom: 0.85rem;
}

.listing-enquiry-card__field input,
.listing-enquiry-card__field textarea {
    width: 100%;
    border: 1px solid #d7dde3;
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: #1a1a1a;
}

.listing-enquiry-card__field input::placeholder,
.listing-enquiry-card__field textarea::placeholder {
    color: #8a97a5;
}

.listing-enquiry-card__field textarea {
    resize: vertical;
}

.listing-enquiry-card__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.listing-enquiry-card__submit {
    width: 100%;
    background: var(--color-red-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.7rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.listing-enquiry-card__submit:hover {
    background: var(--color-red-primary);
}

/* Covers the form in place on submit rather than pushing a message below it.
   The card itself already has rounded corners + padding, but the banner sits
   inside .listing-enquiry-card__form specifically (not the header above it),
   so "Interested? Enquire now" and the close button stay visible/usable the
   whole time — only the fields are covered. Auto-hides itself via JS. */
.listing-enquiry-card__success-banner {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: #e3f3ea;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    animation: listing-enquiry-banner-in 0.25s ease-out;
}

/* An explicit `display` on this class otherwise wins over the browser's own
   [hidden] behaviour — author styles always beat the user-agent stylesheet,
   regardless of specificity — so without this the banner shows immediately
   on page load instead of staying hidden until a real success. */
.listing-enquiry-card__success-banner[hidden] {
    display: none;
}

.listing-enquiry-card__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1f7a4d;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.listing-enquiry-card__success-banner p {
    margin: 0;
    color: #1f7a4d;
    font-size: 0.9rem;
    font-weight: 600;
}

@keyframes listing-enquiry-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.listing-enquiry-card__error {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.8rem;
    background: #fbe8e8;
    color: #a12b2b;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .listing-detail-page {
        flex-direction: column;
        /* align-items: flex-start (set above for the desktop row layout)
           controls the CROSS axis — vertical on desktop, but horizontal
           once flex-direction switches to column here. Left at flex-start,
           every child sizes to its own content's preferred width instead of
           filling the screen, which is what was forcing the whole page to
           scroll horizontally on mobile. */
        align-items: stretch;
        padding: 1.25rem 1rem 2.5rem;
    }

    .listing-detail-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .listing-detail-title-row .listing-detail-heading {
        flex: 1;
        min-width: 0;
    }

    .listing-detail-enquire-btn {
        display: block;
        flex: 0 0 auto;
        margin-top: 0.15rem;
        background: var(--color-red-accent);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .listing-enquiry-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(15, 23, 32, 0.5);
    }

    .listing-enquiry-backdrop[hidden] {
        display: none;
    }

    .listing-enquiry-card {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 90;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    }

    .listing-enquiry-card[hidden] {
        display: none;
    }

    .listing-enquiry-card__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        border: none;
        border-radius: 50%;
        background: #f1f3f5;
        color: #4a5a6a;
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
    }

    .listing-detail-breadcrumb ol {
        font-size: 0.78rem;
    }

    .listing-gallery {
        grid-template-columns: 1fr;
        max-height: none;
        margin-bottom: 1.5rem;
    }

    .listing-gallery__main img {
        max-height: 220px;
    }

    .listing-gallery__side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .listing-gallery__side img {
        aspect-ratio: 4 / 2.7;
    }

    .listing-builder-chip {
        margin-bottom: 0.75rem;
    }

    .listing-detail-heading {
        font-size: 1.3rem;
    }

    .listing-detail-locality {
        margin-bottom: 0.85rem;
    }

    .listing-badges {
        margin-bottom: 1rem;
    }

    .listing-detail-tabs {
        top: 64px;
        gap: 1.1rem;
        margin-bottom: 1.25rem;
    }

    .listing-detail-tabs a {
        padding: 0.75rem 0;
        font-size: 0.82rem;
    }

    .spec-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .emi-calculator {
        grid-template-columns: 1fr;
    }

    .emi-calculator__result {
        padding-top: 0.5rem;
    }
}

@media (max-width: 520px) {
    .listing-detail-page {
        padding: 1rem 0.85rem 2rem;
    }

    .listing-enquiry-card {
        padding: 1rem;
    }

    .listing-gallery__side {
        display: none;
    }

    .listing-gallery__main img {
        max-height: 190px;
    }

    .listing-detail-heading {
        font-size: 1.15rem;
    }

    .listing-detail-locality {
        font-size: 0.85rem;
    }

    .floorplan-modal {
        padding: 0;
    }

    .floorplan-modal__panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .floorplan-modal__header {
        padding: 1rem;
    }

    .floorplan-modal__title {
        font-size: 0.98rem;
    }

    .floorplan-modal__body {
        padding: 1rem;
    }

    .floorplan-modal__footer {
        padding: 0.85rem 1rem;
    }

    .listing-price-block__price {
        font-size: 1.15rem;
        flex-wrap: wrap;
    }

    .listing-section-heading {
        font-size: 1.1rem;
    }

    .listing-floorplan {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .floorplan-card {
        max-width: 100%;
        padding: 1rem;
    }

    .floorplan-card__image {
        max-height: 220px;
        padding: 0.5rem;
    }

    .listing-floorplan__empty {
        padding: 1.5rem 1rem;
    }

    .listing-detail-breadcrumb li[aria-current="page"] {
        max-width: 160px;
    }

    .listing-amenities {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

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

    .amenities-modal {
        padding: 0;
    }

    .amenities-modal__panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .amenities-modal__header {
        padding: 1rem;
    }

    .amenities-modal__body {
        padding: 1rem;
    }

    .listing-specs,
    .listing-description,
    .listing-location-advantages {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .spec-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .spec-table {
        max-width: 100%;
    }

    .location-advantage-card {
        flex-basis: 140px;
        padding: 0.85rem;
    }

    .location-modal {
        padding: 0;
    }

    .location-modal__panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .location-modal__header {
        padding: 1rem;
    }

    .location-modal__body {
        padding: 0.25rem 1rem 1rem;
    }

    .listing-emi {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .emi-calculator {
        padding: 1rem;
        gap: 1.5rem;
    }

    .emi-calculator__donut {
        width: 130px;
        height: 130px;
    }

    .emi-calculator__emi-value {
        font-size: 1rem;
    }

    .listing-builder {
        margin-bottom: 0.5rem;
    }

    .builder-card {
        padding: 1.1rem;
    }

    .builder-card__project {
        font-size: 1.05rem;
    }

    .lightbox__panel {
        padding: 3.5rem 1rem;
    }

    .lightbox__nav {
        width: 36px;
        height: 36px;
    }

    .lightbox__nav--prev {
        left: 0.4rem;
    }

    .lightbox__nav--next {
        right: 0.4rem;
    }

    .lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
    }

    .listing-location {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .location-map iframe {
        height: 220px;
    }

    .location-map__directions {
        font-size: 0.78rem;
        padding: 0.5rem 0.8rem;
    }

    .similar-card {
        flex-basis: 190px;
    }
}