/* ============================================================
   PRODUCT GALLERY — Shanark Productions
   Scoped additions ONLY for the product cards (#products) and
   the gallery modal. Nothing here touches other sections.
   ============================================================ */

:root{
  --pg-bg:#0f0e0c;
  --pg-panel:#17150f;
  --pg-gold:#e9c46a;
  --pg-text:#f3efe6;
  --pg-muted:#b9b2a4;
  --pg-line:rgba(233,196,106,.25);
}

/* ---------- Card image (keeps existing crop-* classes/animation) ---------- */
.shanark-card-image-wrap.product-visual{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.shanark-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .6s ease;
}
.shanark-card-image-wrap:hover .shanark-card-img,
.shanark-card-image-wrap:focus-visible .shanark-card-img{
  transform:scale(1.06);
}
.shanark-card-image-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.shanark-card-image-wrap:hover::after,
.shanark-card-image-wrap:focus-visible::after{ opacity:1; }

.pg-view-hint{
  position:absolute; left:50%; bottom:14px; transform:translate(-50%,8px);
  color:#fff; font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; background:rgba(0,0,0,.55); border:1px solid var(--pg-line);
  padding:7px 14px; border-radius:30px; opacity:0; transition:opacity .35s ease, transform .35s ease;
  pointer-events:none; white-space:nowrap; z-index:2;
}
.shanark-card-image-wrap:hover .pg-view-hint,
.shanark-card-image-wrap:focus-visible .pg-view-hint{
  opacity:1; transform:translate(-50%,0);
}
.shanark-card-image-wrap:focus-visible{
  outline:2px solid var(--pg-gold); outline-offset:3px;
}

/* ---------- "View" button on each card ---------- */
.shanark-card-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:14px;
  padding:9px 26px;
  font-family:'Jost',sans-serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#141209;
  background:var(--pg-gold);
  border:1px solid var(--pg-gold);
  border-radius:30px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.shanark-card-view-btn:hover,
.shanark-card-view-btn:focus-visible{
  background:transparent;
  color:var(--pg-gold);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(233,196,106,.25);
}
.shanark-card-view-btn:focus-visible{
  outline:2px solid var(--pg-gold);
  outline-offset:3px;
}
.shanark-card-view-btn:active{
  transform:translateY(0);
}

/* ---------- Overlay / backdrop ---------- */
.pg-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(6,5,4,.82);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.pg-overlay.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
body.pg-lock{ overflow:hidden; }

/* ---------- Modal ---------- */
.pg-modal{
  position:relative;
  width:min(1100px, 100%);
  max-height:90vh;
  overflow-y:auto;
  background:var(--pg-panel);
  border:1px solid var(--pg-line);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:scale(.92) translateY(14px);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.pg-overlay.is-open .pg-modal{
  transform:scale(1) translateY(0);
  opacity:1;
}

.pg-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4); border:1px solid var(--pg-line);
  color:var(--pg-text); font-size:1.4rem; line-height:1; cursor:pointer;
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.pg-close:hover{ background:var(--pg-gold); color:#141209; transform:rotate(90deg); }

.pg-content{
  display:grid;
  grid-template-columns:1.1fr 1fr;
}
@media (max-width: 860px){
  .pg-content{ grid-template-columns:1fr; }
}

/* ---------- Gallery column ---------- */
.pg-gallery{ padding:28px; border-right:1px solid var(--pg-line); }
@media (max-width:860px){ .pg-gallery{ border-right:none; border-bottom:1px solid var(--pg-line);} }

/* ---------- Large image viewer (carousel) ---------- */
.pg-viewer{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#0a0a09;
  border:1px solid var(--pg-line);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
}
@media (max-width:600px){
  .pg-viewer{ aspect-ratio:1/1; }
}
.pg-main-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;   /* maintains aspect ratio, no stretching */
  display:block;
}

.pg-nav{
  position:absolute; top:50%; translate:0 -50%;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid var(--pg-line);
  color:#fff; font-size:1.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease;
  z-index:2;
}
.pg-nav:hover{ background:var(--pg-gold); color:#141209; }
.pg-prev{ left:12px; }
.pg-next{ right:12px; }
@media (max-width:600px){
  .pg-nav{ width:36px; height:36px; font-size:1.3rem; }
}

.pg-counter{
  position:absolute; bottom:12px; right:12px;
  background:rgba(0,0,0,.55); color:var(--pg-gold);
  font-family:'Jost',sans-serif; font-size:.74rem; letter-spacing:.08em;
  padding:4px 10px; border-radius:20px; border:1px solid var(--pg-line);
  z-index:2;
}

/* ---------- Thumbnails ---------- */
.pg-thumbs{
  display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding-bottom:6px;
}
.pg-thumbs::-webkit-scrollbar{ height:6px; }
.pg-thumbs::-webkit-scrollbar-thumb{ background:var(--pg-line); border-radius:3px; }
.pg-thumb{
  position:relative; flex:0 0 auto; width:70px; height:70px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:#0a0a09; padding:0;
  transition:border-color .25s ease, opacity .25s ease;
}
.pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-thumb.is-active{ border-color:var(--pg-gold); }
.pg-thumb:hover{ opacity:.9; }
.pg-thumb:focus-visible{ outline:2px solid var(--pg-gold); outline-offset:2px; }
@media (max-width:600px){
  .pg-thumb{ width:56px; height:56px; }
}

/* ---------- Details column (title only) ---------- */
.pg-details{ padding:30px 32px 32px; display:flex; flex-direction:column; justify-content:center; }
.pg-category{
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pg-gold); margin:0 0 8px;
}
.pg-name{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(1.5rem,2.4vw,2.1rem);
  color:var(--pg-text); margin:0;
}

@media (max-width:480px){
  .pg-details{ padding:24px 20px 26px; }
  .pg-gallery{ padding:20px; }
}