/* DEFTERA portfolio photo cards & gallery — 21 Oct 2026 */
.product-art.photo-art {
  background:#e6effa;
  color:#fff;
  isolation:isolate;
  position:relative;
  padding:0;
}
.product-art.photo-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 67%,rgba(5,24,51,.60)); z-index:2; border:0; box-shadow:none; transform:none; width:auto; height:auto; right:0; top:0; border-radius:0; opacity:1 }
.photo-art .product-art-backdrop {
  position:absolute; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px);
  object-fit:cover; filter:blur(24px) brightness(1.05); opacity:.68; transform:scale(1.07); z-index:0;
}
.photo-art .product-art-photo {
  position:absolute; inset:0; margin:auto; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(12,30,59,.15)); z-index:1;
}
.photo-art .product-art-bottom {
  left:19px; bottom:17px; z-index:3; color:white; font-size:9px; letter-spacing:.13em; text-shadow:0 1px 8px #0008;
}
.photo-art .product-art-bottom::before { content:"●"; color:#b7d8ff; margin-right:7px; }
.portfolio-gallery {margin:26px 0 25px;}
.portfolio-gallery-main {
  background:#eaf0f7; height:355px; border-radius:18px; overflow:hidden; display:flex; align-items:center;
  justify-content:center; border:1px solid #d8e5f6;
}
.portfolio-gallery-main img { width:100%; height:100%; object-fit:contain; display:block }
.portfolio-gallery-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:13px 0 12px; color:#4f6d96; font-size:10px; font-weight:800; letter-spacing:.14em; }
.portfolio-gallery-meta span { color:#183d6a; font-variant-numeric:tabular-nums; }
.portfolio-gallery-thumbs { display:flex; gap:9px; overflow-x:auto; padding:2px 2px 12px; overscroll-behavior-x:contain; scroll-snap-type:x proximity; }
.portfolio-gallery-thumb {
  flex:0 0 73px; height:90px; border:2px solid transparent; border-radius:10px;
  background:#eaf0f7; padding:0; overflow:hidden; opacity:.72; transition:opacity .15s,border-color .15s,transform .15s;
  scroll-snap-align:start;
}
.portfolio-gallery-thumb:hover {opacity:1;transform:translateY(-2px)}
.portfolio-gallery-thumb.is-active {border-color:#2c6ccd;opacity:1;box-shadow:0 0 0 1px #2c6ccd44}
.portfolio-gallery-thumb img {width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px) {
 .portfolio-gallery-main {height:min(370px, 60vh);border-radius:13px}
 .portfolio-gallery-thumb {flex-basis:62px;height:76px}
 .photo-art .product-art-bottom {font-size:8px}
}
@media (prefers-reduced-motion:reduce){
 .product-open:hover .product-art, .portfolio-gallery-thumb:hover{ transform:none }
}