/* Videos: no scroll, hover, zoom or stacking effects. */
#youtube .yt-card, #youtube .yt-card:hover,
#youtube .yt-thumb-wrap img, #youtube .yt-card:hover .yt-thumb-wrap img {
 animation: none; transform: none; transition: none;
}
#youtube .yt-thumb-wrap img, #youtube .yt-card:hover .yt-thumb-wrap img { opacity: 1; }
#youtube .yt-card { position: relative; top: auto; }
#youtube .yt-card:hover { box-shadow: 0 4px 20px oklch(0% 0 0 / 0.06); border-color: transparent; }
#youtube .yt-card:focus-visible { outline: 3px solid var(--red-main); outline-offset: 4px; }

#shop { position: relative; isolation: isolate; }
#shop::before {
 content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
 background-image: linear-gradient(#bb47600d 1px, transparent 1px), linear-gradient(90deg, #bb47600d 1px, transparent 1px);
 background-size: 48px 48px;
 mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
#shop .shop-card { border: 1px solid #e9a9bd; box-shadow: 0 16px 40px #9b25431a; }
.hero-art-stage::after { content: ''; position: absolute; inset: 4%; z-index: -1; pointer-events: none; border: 1px solid #c04d7033; border-radius: 50%; transform: rotate(12deg) scaleX(.9); }
@supports (animation-timeline: view()) {
 @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-art-stage { animation: portrait-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
 }
}
@keyframes portrait-depth { from { transform: translateY(0); } to { transform: translateY(36px); } }
@media (max-width: 480px) { #shop::before { background-size: 32px 32px; } }
@media (prefers-reduced-motion: reduce) {
 .hero-art-stage { animation: none !important; transform: none !important; }
}

/* Product showcase. Videos use an ordinary static list. */
#shop .shop-inner { max-width: 1080px; }
#shop .shop-grid { grid-template-columns: minmax(0, 1fr); gap: 72px; perspective: 1600px; }
#shop .shop-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); align-items: stretch; border-radius: 28px; background: #fff9fc; }
#shop .shop-card-img-wrap { aspect-ratio: 4 / 3; border-radius: 0; background: #fff; }
#shop .shop-card-thumb { object-fit: contain; background: #fff4f8; }
#shop .shop-card-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px, 4vw, 48px); background: linear-gradient(135deg, #fff9fc, #ffe7f1); }
#shop .shop-card-title { font-size: clamp(20px, 2.5vw, 30px); line-height: 1.65; color: var(--red-dark); }
#shop .shop-card-sub { margin-top: 12px; color: var(--text-mid); }
#shop .shop-card-price { font-size: 30px; margin-top: 20px; color: var(--red-main); }
#shop .shop-card-badge { color: var(--red-dark); background: #fbd2df; }
#shop .shop-card:nth-child(2) { margin-inline: 5% 0; }
#shop .shop-card:nth-child(3) { margin-inline: 0 5%; }
#shop .shop-card:focus-visible { outline: 3px solid var(--red-main); outline-offset: 6px; }
@supports (animation-timeline: view()) {
 @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #shop .shop-card { animation: product-depth linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  #shop .shop-card:nth-child(2) { animation-name: product-depth-reverse; }
  #shop .shop-card:focus-visible { animation: none; transform: none; }
 }
}
@keyframes product-depth { from { transform: translateY(70px) rotateX(8deg) rotateY(-10deg) scale(.88); } to { transform: translateY(0) rotateX(0) rotateY(0) scale(1); } }
@keyframes product-depth-reverse { from { transform: translateY(70px) rotateX(8deg) rotateY(10deg) scale(.88); } to { transform: translateY(0) rotateX(0) rotateY(0) scale(1); } }
@media (max-width: 900px) {
 #shop .shop-grid { gap: 32px; perspective: none; }
 #shop .shop-card:nth-child(n) { margin-inline: 0; grid-template-columns: minmax(0, 1fr); border-radius: 22px; transform: none; }
 #shop .shop-card-img-wrap { aspect-ratio: 4 / 3; }
 #shop .shop-card-body { padding: 24px; }
 #shop .shop-card-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 #shop .shop-card { animation: none !important; transform: none !important; }
}