/* ==========================================================================
   Selistin Online Store & Auction — storefront theme

   Deliberately a different room from the main marketing site: that one is a dark
   green, generously spaced brochure; this is a light, dense, product-first catalogue.
   The brand anchors carry over (gold accent, Playfair headings, the same logo) so it
   still reads as the same business.
   ========================================================================== */

:root {
    --shop-bg: #eceae4;
    --shop-surface: #ffffff;
    --shop-ink: #1f2420;
    --shop-muted: #6f7873;
    --shop-line: #dcdad2;
    --shop-green: #1a3c34;
    --shop-gold: #c9a96e;
    --shop-gold-dark: #b08d4a;
    --shop-radius: 10px;
    --shop-shadow: 0 1px 3px rgba(20, 30, 25, 0.07);
    --shop-shadow-hover: 0 10px 28px rgba(20, 30, 25, 0.13);
}

body.shop-body {
    background: var(--shop-bg);
    color: var(--shop-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

.shop-body h1, .shop-body h2, .shop-body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--shop-green);
    line-height: 1.25;
}

/* ---------- Header ---------- */
.shop-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--shop-surface);
    border-bottom: 1px solid var(--shop-line);
}
.shop-header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
}
.shop-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.shop-brand img { max-height: 42px; width: auto; }
.shop-brand span {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    color: var(--shop-green);
    font-weight: 600;
}
.shop-nav { display: flex; gap: 4px; margin-left: 8px; }
.shop-nav a {
    color: var(--shop-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.94rem;
    padding: 8px 14px;
    border-radius: var(--shop-radius);
    transition: background-color .2s ease, color .2s ease;
}
.shop-nav a:hover { background: #f0efe9; color: var(--shop-green); }
.shop-nav a.active { background: var(--shop-green); color: #fff; }
.shop-header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The way back to the marketing site. It is the only exit from the store, so it is a
   real button rather than a faint link, and it survives down to the smallest screen. */
.shop-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--shop-green);
    background: #fff;
    border: 1px solid var(--shop-green);
    border-radius: var(--shop-radius);
    padding: 9px 16px;
    min-height: 42px;
    transition: background-color .2s ease, color .2s ease;
}
.shop-back:hover { background: var(--shop-green); color: #fff; }

/* ---------- Buttons ---------- */
.btn-shop {
    background: var(--shop-green);
    color: #fff;
    border: 1px solid var(--shop-green);
    border-radius: var(--shop-radius);
    font-weight: 600;
    padding: 11px 20px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .2s ease;
}
.btn-shop:hover { background: #142e28; color: #fff; }
.btn-shop-gold { background: var(--shop-gold); border-color: var(--shop-gold); color: #231c0c; }
.btn-shop-gold:hover { background: var(--shop-gold-dark); border-color: var(--shop-gold-dark); color: #fff; }
.btn-shop-ghost { background: transparent; color: var(--shop-green); border-color: var(--shop-line); }
.btn-shop-ghost:hover { background: #f0efe9; color: var(--shop-green); }
.btn-shop:disabled, .btn-shop.disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Page heading ---------- */
.shop-page-head { padding: 34px 0 20px; }
.shop-page-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 6px; }
.shop-page-head p { color: var(--shop-muted); margin: 0; max-width: 60ch; }
.shop-crumbs { font-size: 0.85rem; color: var(--shop-muted); margin-bottom: 10px; }
.shop-crumbs a { color: var(--shop-muted); text-decoration: none; }
.shop-crumbs a:hover { color: var(--shop-green); text-decoration: underline; }

/* ---------- Cards ---------- */
.lot-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.lot-card:hover { box-shadow: var(--shop-shadow-hover); transform: translateY(-3px); }
.lot-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #efeee9;
    overflow: hidden;
}
.lot-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot-card-media .ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #c3c6bf; font-size: 2rem;
}
.lot-card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex-grow: 1; }
.lot-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--shop-ink);
    margin: 0 0 4px;
    text-decoration: none;
    display: block;
}
.lot-card-title:hover { color: var(--shop-green); }
.lot-card-meta { font-size: 0.78rem; color: var(--shop-muted); margin-bottom: 10px; }
.lot-card-price {
    margin-top: auto;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--shop-green);
}
.lot-card-price small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--shop-muted); }

/* ---------- Badges ---------- */
.shop-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.shop-badge-buy { background: #e8f1ee; color: #1a3c34; }
.shop-badge-bid { background: #fbf2e0; color: #8a6a26; }
.shop-badge-sold { background: #f1e3e3; color: #8c3a3a; }
.shop-badge-live { background: #e4f3e8; color: #246b39; }
.shop-badge-upcoming { background: #eceef5; color: #46506e; }
.shop-badge-ended { background: #eeeeec; color: #6f7873; }
.lot-card-media .shop-badge { position: absolute; top: 9px; left: 9px; }

/* ---------- Event card ---------- */
.event-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.event-card:hover { box-shadow: var(--shop-shadow-hover); transform: translateY(-3px); }
.event-card-media { aspect-ratio: 16 / 9; background: #efeee9; position: relative; display: block; overflow: hidden; }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.event-card-body h2 { font-size: 1.2rem; margin: 0 0 6px; }
.event-card-body h2 a { color: inherit; text-decoration: none; }
.event-meta { font-size: 0.85rem; color: var(--shop-muted); margin-bottom: 12px; }
.event-meta i { color: var(--shop-gold); }

/* ---------- Detail page ---------- */
.lot-gallery-main {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.lot-gallery-main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.lot-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lot-thumbs button {
    width: 68px; height: 68px; padding: 0;
    border: 2px solid transparent; border-radius: 7px; overflow: hidden;
    background: #efeee9; cursor: pointer;
}
.lot-thumbs button.active { border-color: var(--shop-gold); }
.lot-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lot-panel {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 22px;
}
.lot-price-big { font-size: 1.9rem; font-weight: 700; color: var(--shop-green); line-height: 1.1; }
.lot-price-label { font-size: 0.8rem; color: var(--shop-muted); text-transform: uppercase; letter-spacing: .6px; }
.lot-spec { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--shop-line); font-size: 0.9rem; }
.lot-spec:last-child { border-bottom: 0; }
.lot-spec dt { color: var(--shop-muted); font-weight: 500; margin: 0; }
.lot-spec dd { margin: 0; text-align: right; font-weight: 600; }

.pickup-box {
    background: #f3f5f2;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 16px 18px;
    font-size: 0.9rem;
}
.pickup-box h3 { font-size: 1rem; margin: 0 0 8px; }
.pickup-box i { color: var(--shop-gold); }

/* ---------- Countdown ---------- */
.countdown {
    display: inline-flex; gap: 6px; align-items: baseline;
    font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--shop-green);
}
.countdown.ending { color: #b3261e; }


/* ---------- Empty-state skeleton ----------
   An empty catalogue page used to be a blank sheet, which gave no idea of where items
   would land. These ghost cards sketch the real grid so the page reads as "nothing
   here yet" rather than "nothing here, ever". */
.skeleton-grid { position: relative; margin-top: 26px; }
.skeleton-card {
    background: var(--shop-surface);
    border: 1px dashed var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    opacity: .75;
}
.skeleton-media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f1efe9 0%, #e7e4dc 100%);
    display: flex; align-items: center; justify-content: center;
    color: #c9c6bc; font-size: 1.5rem;
}
.skeleton-body { padding: 13px 14px 16px; }
.skeleton-line {
    height: 9px;
    border-radius: 4px;
    background: #e9e6df;
    margin-bottom: 8px;
}
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-45 { width: 45%; }
.skeleton-line.price { width: 35%; height: 13px; background: #e2ded4; margin-bottom: 0; margin-top: 12px; }
.skeleton-note {
    text-align: center;
    margin-top: 18px;
    font-size: .85rem;
    color: var(--shop-muted);
}

/* ---------- Empty state ---------- */
.shop-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--shop-muted);
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
}
.shop-empty i { font-size: 2.4rem; color: #c3c6bf; display: block; margin-bottom: 12px; }

/* ---------- Footer ---------- */
.shop-footer {
    margin-top: 60px;
    background: var(--shop-green);
    color: rgba(255, 255, 255, .75);
    padding: 34px 0 28px;
    font-size: 0.88rem;
}
.shop-footer a { color: var(--shop-gold); text-decoration: none; }
.shop-footer a:hover { text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .shop-nav a { padding: 8px 10px; font-size: 0.9rem; }
    .shop-back { padding: 8px 12px; font-size: .85rem; }
}
@media (max-width: 575.98px) {
    .shop-header-inner { gap: 10px; flex-wrap: wrap; padding: 10px 0; }
    .shop-brand span { display: none; }
    .shop-back span { display: none; }
    .shop-back { padding: 8px 11px; }
    .shop-nav { margin-left: 0; width: 100%; order: 3; overflow-x: auto; }
    .shop-nav a { white-space: nowrap; }
    .lot-card-body { padding: 12px 12px 14px; }
    .lot-panel { padding: 18px 16px; }
    .lot-price-big { font-size: 1.6rem; }
    .btn-shop { width: 100%; }
    .lot-thumbs button { width: 56px; height: 56px; }
}

/* ---------- Account button ---------- */
.shop-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--shop-green);
    border: 1px solid var(--shop-green);
    border-radius: var(--shop-radius);
    padding: 9px 16px;
    min-height: 42px;
    cursor: pointer;
}
.shop-account:hover { background: #142e28; color: #fff; }

/* ---------- Flash messages ---------- */
.shop-flash {
    border-radius: var(--shop-radius);
    padding: 12px 16px;
    font-size: .92rem;
    border: 1px solid transparent;
}
.shop-flash-ok { background: #e4f3e8; border-color: #c4e3cd; color: #1d5c31; }
.shop-flash-err { background: #fbe9e7; border-color: #f0cfca; color: #8c3a2f; }

/* ---------- Auth / account forms ---------- */
.auth-wrap { max-width: 520px; margin: 0 auto; padding: 40px 0 70px; }
.auth-wrap.wide { max-width: 760px; }
.auth-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 30px 28px;
}
.auth-card h1 { font-size: 1.6rem; margin: 0 0 6px; }
.auth-lead { color: var(--shop-muted); margin-bottom: 24px; font-size: .94rem; }
.auth-card .form-label { font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
.auth-card .form-control {
    border-color: var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 11px 13px;
    min-height: 46px;
}
.auth-card .form-control:focus {
    border-color: var(--shop-gold);
    box-shadow: 0 0 0 .18rem rgba(201, 169, 110, .22);
}
.auth-alt { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--shop-muted); }
.auth-alt a { color: var(--shop-green); font-weight: 600; }
.auth-note {
    background: #f3f5f2;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 12px 14px;
    font-size: .85rem;
    color: var(--shop-muted);
}

@media (max-width: 575.98px) {
    .auth-wrap { padding: 24px 0 50px; }
    .auth-card { padding: 22px 18px; }
    .shop-account span { display: none; }
    .shop-account { padding: 8px 11px; }
}

/* ---------- Cart button ---------- */
.shop-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--shop-radius);
    border: 1px solid var(--shop-line);
    background: #fff;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: 1.05rem;
}
.shop-cart:hover { border-color: var(--shop-green); color: var(--shop-green); }
.shop-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--shop-gold);
    color: #231c0c;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Sale stamp: a round, slightly turned stamp on discounted shop items ---------- */
.sale-stamp {
    position: absolute; top: 8px; right: 8px; width: 64px; height: 64px; border-radius: 50%;
    background: #b3261e; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-12deg); box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 3px 10px rgba(0,0,0,.25);
    line-height: 1; text-transform: uppercase; pointer-events: none;
}
.sale-stamp span { font-size: .62rem; letter-spacing: 1.5px; font-weight: 700; }
.sale-stamp strong { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.sale-price { color: #b3261e; }
.was-price { color: var(--shop-muted, #6f7873); font-weight: 400; font-size: .9em; }
.sale-pill { background: #b3261e; color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 575.98px) { .sale-stamp { width: 52px; height: 52px; } .sale-stamp strong { font-size: .9rem; } }
@media (forced-colors: active) { .sale-stamp, .sale-pill { border: 2px solid CanvasText; } }

/* ---------- Watch button ---------- */
.watch-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--shop-line, #dcdcd6); background: #fff; color: var(--shop-ink, #1f2a26);
             border-radius: 999px; padding: 5px 14px; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.watch-btn:hover { border-color: #1a3c34; color: #1a3c34; }
.watch-btn.on { background: #1a3c34; border-color: #1a3c34; color: #fff; }

/* Collection page: cover photo beside the title, stacked on phones */
.shop-collection-head { display: flex; gap: 20px; align-items: center; }
.shop-collection-head > div { min-width: 0; }
.shop-collection-cover { width: 240px; max-width: 40%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .shop-collection-head { flex-direction: column; align-items: stretch; }
    .shop-collection-cover { width: 100%; max-width: 100%; }
}