/* ── Listing Grid Manager — Frontend v1.0.3 ──────────────────────────────── */
:root {
    --lgm-bg:           transparent;          /* inherit from theme section */
    --lgm-card:         #181818;
    --lgm-card-hover:   #202020;
    --lgm-border:       #2a2a2a;
    --lgm-border-hover: #404040;
    --lgm-text:         #d8d8d8;
    --lgm-muted:        #666;
    --lgm-accent:       #c8102e;
    --lgm-accent-h:     #e8213f;
    --lgm-white:        #ffffff;
    --lgm-radius:       3px;
    --lgm-trans:        .2s ease;
    --lgm-font:         'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.lgm-wrap {
    font-family: var(--lgm-font);
    background:  transparent;   /* never override the theme section background */
    padding:     1.5rem 0;      /* keep vertical breathing room; horizontal padding
                                   comes from the theme's own section padding */
    box-sizing:  border-box;
}

/* ── Grid ──────────────────────────────────────────────────── */
.lgm-grid {
    display: grid;
    gap:     1.25rem;
}
.lgm-grid--cols-1 { grid-template-columns: 1fr; }
.lgm-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.lgm-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.lgm-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .lgm-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .lgm-grid--cols-3,
    .lgm-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .lgm-grid--cols-2,
    .lgm-grid--cols-3,
    .lgm-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ── Card ──────────────────────────────────────────────────── */
.lgm-card {
    background:     var(--lgm-card);
    border:         1px solid var(--lgm-border);
    border-radius:  var(--lgm-radius);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    position:       relative;
    transition:     transform var(--lgm-trans),
                    box-shadow var(--lgm-trans),
                    border-color var(--lgm-trans);
}
.lgm-card:hover {
    transform:    translateY(-2px);
    box-shadow:   0 8px 30px rgba(0,0,0,.65);
    border-color: var(--lgm-border-hover);
}

/* ── Badge ─────────────────────────────────────────────────── */
.lgm-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    z-index:        3;
    font-size:      .6rem;
    font-weight:    700;
    letter-spacing: .14em;
    padding:        3px 8px;
    border-radius:  var(--lgm-radius);
    background:     rgba(30,30,30,.9);
    color:          #aaa;
    border:         1px solid #333;
    text-transform: uppercase;
}
.lgm-badge--new  { color: #5de89a; border-color: rgba(30,180,80,.35);  background: rgba(20,120,60,.3);  }
.lgm-badge--used { color: #ff6680; border-color: rgba(200,16,46,.35);  background: rgba(160,10,30,.25); }

/* ── Thumbnail ─────────────────────────────────────────────── */
.lgm-thumb {
    position:     relative;
    width:        100%;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   #0a0a0a;
    flex-shrink:  0;
}
.lgm-thumb__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .45s ease, filter .3s ease;
    filter:     brightness(.88);
}
.lgm-card:hover .lgm-thumb__img {
    transform: scale(1.04);
    filter:    brightness(1);
}
.lgm-thumb__placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .6rem;
    color:           #252525;
    font-size:       .65rem;
    letter-spacing:  .1em;
    text-transform:  uppercase;
}

/* ── Body ──────────────────────────────────────────────────── */
.lgm-body {
    padding: 1rem 1.1rem 0;
    flex:    1;
}

/* Title — bold uppercase, tight */
.lgm-title {
    font-size:      1rem;
    font-weight:    900;
    letter-spacing: .03em;
    color:          var(--lgm-white);
    margin:         0 0 .15rem;
    line-height:    1.2;
    text-transform: uppercase;
}

/* Subtitle — faint uppercase small caps below title */
.lgm-subtitle {
    font-size:      .65rem;
    font-weight:    400;
    letter-spacing: .1em;
    color:          var(--lgm-muted);
    text-transform: uppercase;
    margin:         0 0 .8rem;
    line-height:    1.4;
}

/* ── Meta list — matches Image 1 row style ─────────────────── */
.lgm-meta {
    list-style:  none;
    margin:      0 0 .5rem;
    padding:     0;
    border-top:  1px solid var(--lgm-border);
}
.lgm-meta li {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         .38rem 0;
    border-bottom:   1px solid var(--lgm-border);
    gap:             .5rem;
    font-size:       .73rem;
    line-height:     1.3;
}
.lgm-meta__label {
    color:       var(--lgm-muted);
    flex-shrink: 0;
    letter-spacing: .03em;
}
.lgm-meta__val {
    color:       var(--lgm-text);
    font-weight: 600;
    text-align:  right;
    word-break:  break-word;
}

/* ── Footer — price left, button right ─────────────────────── */
.lgm-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .85rem 1.1rem;
    margin-top:      auto;
    border-top:      1px solid var(--lgm-border);
    background:      rgba(0,0,0,.15);
    gap:             .5rem;
}

/* Price — matches Image 1: bold white + small currency label */
.lgm-price {
    font-size:      1.1rem;
    font-weight:    900;
    color:          var(--lgm-white);
    letter-spacing: .01em;
    line-height:    1;
}
.lgm-price__cur {
    font-size:      .62rem;
    font-weight:    400;
    color:          var(--lgm-muted);
    margin-left:    .2rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lgm-price--contact {
    font-size:   .82rem;
    font-weight: 400;
    color:       var(--lgm-muted);
}

/* Details button — matches Image 1: red text, no border fill */
.lgm-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    color:           var(--lgm-accent);
    background:      transparent;
    border:          1px solid var(--lgm-accent);
    padding:         .35rem .8rem;
    font-size:       .65rem;
    font-weight:     700;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    text-decoration: none;
    border-radius:   var(--lgm-radius);
    white-space:     nowrap;
    transition:      background var(--lgm-trans), color var(--lgm-trans);
}
.lgm-btn:hover {
    background: var(--lgm-accent);
    color:      #fff;
}

/* ── Utility ────────────────────────────────────────────────── */
.lgm-no-results,
.lgm-error {
    color:      var(--lgm-muted);
    font-size:  .88rem;
    text-align: center;
    padding:    2rem;
    font-family: var(--lgm-font);
}