/* Marketplace-style inventory tiles + swipe slider + lightbox
   Shared by inventory.html */

/* ---- Grid: 2 across on phones, 3 across on desktop ---- */
.mk-wrap{ max-width:1100px; margin:0 auto; padding:10px 14px 40px; }
.mk-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    align-items:start;
}
@media (min-width:768px){
    .mk-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:22px;
    }
}

/* ---- Tile ---- */
.mk-card{ text-align:left; }

/* Photo area (square, like Marketplace) */
.mk-media{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:10px;
    overflow:hidden;
    background:#000;
    box-shadow:0 3px 12px rgba(0,0,0,.2);
}
.mk-slider{
    display:flex;
    height:100%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.mk-slider::-webkit-scrollbar{ display:none; }
.mk-photo{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
    scroll-snap-align:start;
    cursor:zoom-in;
    display:block;
}

/* "Click to Enlarge" corner badge */
.mk-enlarge{
    position:absolute;
    top:8px; left:8px;
    z-index:3;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.3px;
    padding:5px 9px;
    border-radius:4px;
    cursor:zoom-in;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    -webkit-user-select:none;
    user-select:none;
}
.mk-enlarge:hover{ background:rgba(0,0,0,.82); }

/* Prev/next arrows (desktop hover only) */
.mk-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px; height:36px;
    border:none; border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#222;
    font-size:18px; line-height:36px;
    cursor:pointer;
    opacity:0;
    transition:opacity .15s;
    z-index:2;
}
.mk-media:hover .mk-arrow{ opacity:1; }
.mk-arrow.prev{ left:8px; }
.mk-arrow.next{ right:8px; }
@media (hover:none){ .mk-arrow{ display:none !important; } } /* touch: swipe instead */

/* Dots */
.mk-dots{
    position:absolute;
    bottom:8px; left:0; right:0;
    display:flex; justify-content:center; gap:6px;
    z-index:2;
    pointer-events:none;
}
.mk-dot{
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.55);
    pointer-events:auto;
    cursor:pointer;
}
.mk-dot.active{ background:#fff; }

/* Text */
.mk-info{ padding:8px 2px 0; }
.mk-price{ font-size:1.45rem; font-weight:700; line-height:1.1; }
.mk-title{ font-size:1.2rem; font-weight:600; margin-top:3px; }
.mk-desc{ color:#666; font-size:1.05rem; line-height:1.55; margin-top:6px; }

/* ---- Full-screen lightbox ---- */
.inv-lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(93,138,52,.97); /* hay green, matches the page header band */
    z-index:2000;
    text-align:center;
    overflow-y:auto;
}
.inv-lightbox.open{ display:block; }
.lb-stage{
    max-width:900px;
    margin:0 auto;
    padding:64px 16px 48px;
}
.inv-lightbox .lb-stage img{
    max-width:100%;
    max-height:76vh;
    border-radius:6px;
    box-shadow:0 6px 24px rgba(0,0,0,.6);
}
/* Repeated description under the enlarged photo */
.lb-caption{
    text-align:left;
    color:#f3f3f3;
    margin-top:18px;
}
.lb-caption .mk-price{ color:#fff; font-size:1.45rem; font-weight:700; }
.lb-caption .mk-title{ color:#fff; font-size:1.2rem; font-weight:600; margin-top:2px; }
.lb-caption .mk-desc{ color:#f0f0f0; font-size:1.05rem; line-height:1.55; margin-top:8px; }
.lb-caption a{ color:#fff; text-decoration:underline; }
.inv-lightbox .lb-close,
.inv-lightbox .lb-prev,
.inv-lightbox .lb-next{
    position:fixed;
    border:none;
    background:rgba(255,255,255,.12);
    color:#fff;
    cursor:pointer;
    z-index:2001;
}
.inv-lightbox .lb-close{
    top:14px; right:18px;
    width:48px; height:48px; border-radius:50%;
    font-size:30px; line-height:48px;
}
.inv-lightbox .lb-prev,
.inv-lightbox .lb-next{
    top:50%; transform:translateY(-50%);
    width:54px; height:74px;
    font-size:34px;
    border-radius:6px;
}
.inv-lightbox .lb-prev{ left:14px; }
.inv-lightbox .lb-next{ right:14px; }
.inv-lightbox .lb-close:hover,
.inv-lightbox .lb-prev:hover,
.inv-lightbox .lb-next:hover{ background:rgba(255,255,255,.28); }