.pg-root{font-family:Arial,Helvetica,sans-serif}
.pg-topbar{margin-bottom:10px}
.pg-artist-tags{display:flex;flex-wrap:wrap;gap:8px}
.pg-tag{padding:6px 10px;border-radius:20px;background:transparent;border:1px solid rgba(0,0,0,0.06);text-decoration:none;color:inherit}
.pg-tag-active{background:#2b6cb0;color:#fff;border-color:#2b6cb0}
.pg-search-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg-search-row input{padding:8px;margin:0;border:1px solid #ddd;border-radius:4px;min-width:140px}
.pg-search-row button{padding:8px 10px;margin-left:6px}
.pg-clear{margin-left:8px;color:#666;text-decoration:none}
.pg-table{width:100%;border-collapse:collapse;background:#ffffff;border:1px solid #eee}
.pg-table th, .pg-table td{padding:10px;border-bottom:1px solid #f4f4f4;text-align:left;color:#222;vertical-align:middle}
.pg-artist-strong{font-weight:700;color:#2c3e50;text-decoration:none}
.pg-artist-strong:hover{text-decoration:underline}
.pg-thumb-wrap{position:relative;display:inline-block;overflow:hidden;border-radius:6px}

/* Mobile-first: thumbnails are full-width square by default (mobile) */
.pg-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  display: block;
  vertical-align: middle;
}
.pg-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .18s ease;
  display: block;
  cursor: pointer;
}
.pg-thumb:hover { transform: scale(1.05); }

/* Desktop: fixed square thumbnail */
@media (min-width: 801px) {
  .pg-thumb-wrap {
    width: 180px; /* квадратный контейнер на десктопе */
    display: inline-block;
    vertical-align: middle;
  }
}

.pg-sold{display:inline-block;padding:6px 10px;border-radius:6px;background:#d9534f;color:#fff;font-weight:600}
.pg-request{display:inline-block;padding:6px 10px;border-radius:6px;color:#fff;text-decoration:none}
.pg-request.pg-normal{background:#2b6cb0}
.pg-request.pg-reserved{background:#e6b800;color:#000}
.pg-request.pg-auction{background:#6f42c1}
.pg-row-sold{background:#ffe5d1}
.pg-row-reserved{background:#fff7c5}
.pg-row-auction{background:#f0e7ff}

/* lightbox */
.pg-lightbox{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s ease}
.pg-lightbox.pg-visible{opacity:1;pointer-events:auto}
.pg-lightbox-backdrop{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.7)}
.pg-lightbox-content{position:relative;width:90%;max-width:900px;max-height:80vh;background:#fff;border-radius:8px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,0.4);z-index:10000;overflow:auto;display:flex;flex-direction:column;align-items:center}
.pg-lightbox-close{position:absolute;right:8px;top:6px;background:transparent;border:0;font-size:30px;line-height:1;cursor:pointer;color:#333}

/* Make lightbox image compact and consistent on different screens */
.pg-lightbox-img {
  width: 100%;
  height: auto;
  max-width: 720px;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.pg-lightbox-desc{font-size:14px;color:#333;text-align:center;margin-top:8px}

/* mobile: transform table into stacked cards */
@media (max-width:800px){
  .pg-search-row{gap:10px}
  .pg-table, .pg-table thead, .pg-table tbody, .pg-table th, .pg-table td, .pg-table tr { display:block; width:100%; }
  .pg-table thead { display:none; }
  .pg-table tr { margin-bottom:12px; border:1px solid #eee; padding:10px; border-radius:6px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,0.03); overflow:hidden; }
  .pg-table td { display:block; padding:6px 0; box-sizing:border-box; width:100%; color:#222; }
  .pg-table td[data-label="Artist"]{order:-4;font-weight:700;color:#2c3e50;padding:6px 0;font-size:1.05rem}
  .pg-table td[data-label="Title"]{order:-3;font-weight:700;font-size:1.02rem;padding:6px 0}
  .pg-table td[data-label="Year"]{order:-2;font-weight:600;padding:6px 0}
  .pg-table td[data-label="Photo"]{order:-1;padding:0;margin-bottom:8px}
  .pg-table td[data-label="Photo"] .pg-thumb-wrap{width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:6px}
  .pg-table td[data-label="Photo"] .pg-thumb{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
  .pg-table td:not([data-label="Photo"]):not([data-label="Title"]):not([data-label="Artist"]):not([data-label="Year"]){padding:4px 0;margin:0}
  .pg-table td[data-label]{font-size:14px}
  /* hide the "Photo:" label on mobile */
  .pg-table td[data-label="Photo"]:before{content:"";display:none}
  .pg-table td[data-label]:before{content:attr(data-label) ": ";font-weight:700;margin-right:6px; display:inline-block; width:auto; color:#444}
  .pg-table td{margin-bottom:6px}
  .pg-price{margin-top:8px}
  .pg-request{padding:10px 12px;font-size:16px;border-radius:8px;display:inline-block}
  .pg-request.pg-normal{background:#2b6cb0}
  .pg-request.pg-reserved{background:#e6b800;color:#000}
  .pg-request.pg-auction{background:#6f42c1}
  .pg-sold{padding:10px 12px;font-size:16px;border-radius:8px}
  .pg-table td[data-label="Additional Info"]{display:none}
  .pg-lightbox-content{width:98%;max-width:640px;padding:10px}
  .pg-lightbox-img{max-height:70vh}
  /* slightly tighter spacing for mobile */
  .pg-table td{margin-bottom:4px;padding:4px 0}
  /* price value bold if plain text */
  .pg-price strong{font-weight:700;}
  /* ensure links readable on mobile */
  .pg-artist-link, .pg-artist-strong { color: #222 !important; text-decoration: none !important; }
}

/* Desktop adjustments: keep table look but ensure size column fits */
@media (min-width:801px){
  .pg-table th, .pg-table td { padding:12px; }
  /* make Size column a bit wider via class on td (if used) */
  .pg-table th:nth-child(6), .pg-table td:nth-child(6) { width:160px; max-width:240px; }
}

/* Small visual polish: header row soft background and rounded table container can be toggled in PHP */
.pg-table thead tr { background: #fafafa; }
/* скрываем подписи Photo: и Price: на мобильных */
@media (max-width:800px){
  .pg-table td[data-label="Photo"]::before,
  .pg-table td[data-label="Price"]::before {
    content: "";
    display: none;
  }
}