.shop-page {
  --case-accent: #c9a95c;
  --case-accent-soft: rgba(201, 169, 92, 0.1);
  --case-line: rgba(201, 169, 92, 0.2);
}

.shop-page .case-hero-shot {
  width: min(100%, 650px);
  aspect-ratio: 1440 / 1050;
  padding: 10px;
  border-radius: 18px;
  transform: rotate(1deg);
}

.shop-page .case-hero-shot img {
  border-radius: 10px;
  object-fit: cover;
}

.shop-page .case-hero-shot:hover {
  transform: translateY(-6px) rotate(0deg);
}

.shop-page .case-hero-card-label {
  left: -15px;
  bottom: 34px;
}

.shop-page .case-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-page .screen-visual {
  aspect-ratio: 1440 / 1050;
}

.shop-page .screen-visual img {
  object-fit: cover;
}

.shop-page .shop-mobile-shot {
  grid-row: span 2;
}

.shop-page .shop-mobile-shot .screen-visual {
  aspect-ratio: 430 / 900;
}

.shop-page .shop-mobile-shot .screen-visual img {
  object-fit: contain;
}

.shop-page .live-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--case-accent);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  transition: color 0.25s ease, transform 0.25s ease;
}

.shop-page .live-link:hover {
  color: #f0d58e;
  transform: translateX(3px);
}

.shop-admin-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f5f6f8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shop-admin-shot:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.shop-admin-image {
  position: relative;
  aspect-ratio: 1440 / 720;
  overflow: hidden;
  cursor: zoom-in;
}

.shop-admin-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.shop-admin-shot:hover img {
  transform: scale(1.015);
}

.shop-admin-shot figcaption {
  padding: 14px 17px 16px;
  border-top: 1px solid rgba(20, 30, 45, 0.1);
  color: #606b78;
  background: #ffffff;
  font-size: 0.75rem;
  line-height: 1.5;
}

.shop-page .case-cta .btn-primary {
  gap: 10px;
}

@media (max-width: 1080px) {
  .shop-page .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-page .shop-mobile-shot { grid-row: auto; }
}

@media (max-width: 620px) {
  .shop-page .case-hero-shot {
    width: min(94vw, 650px);
    aspect-ratio: 430 / 900;
    transform: none;
  }

  .shop-page .case-hero-shot img { object-fit: cover; }
  .shop-page .case-hero-card-label { left: 0; bottom: 20px; }
  .shop-page .case-gallery { grid-template-columns: 1fr; }
  .shop-page .screen-visual { aspect-ratio: 1440 / 1050; }
  .shop-admin-shot { border-radius: 12px; }
  .shop-admin-image { aspect-ratio: 1440 / 720; }
}