.product-gallery { padding: 120px 0; background: #f8f7fb; }
.product-gallery .section-heading { margin-bottom: 44px; }
.screenshot-carousel { max-width: 1120px; margin: 0 auto; }
.screenshot-carousel figure { margin: 0; overflow: hidden; border: 1px solid rgba(67, 54, 103, .14); border-radius: 24px; background: #fff; box-shadow: 0 28px 70px rgba(42, 32, 72, .14); }
.screenshot-carousel figure img { display: block; width: 100%; aspect-ratio: 1.506 / 1; object-fit: cover; }
.screenshot-carousel figcaption { padding: 16px 20px 18px; color: #5d586b; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 22px; }
.carousel-controls > button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; cursor: pointer; color: #302849; border: 1px solid rgba(67, 54, 103, .2); border-radius: 50%; background: #fff; font: 700 21px/1 system-ui, sans-serif; transition: transform .2s ease, background .2s ease; }
.carousel-controls > button:hover { transform: translateY(-2px); background: #edeaff; }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; cursor: pointer; border: 0; border-radius: 50%; background: #c5bfd1; transition: width .2s ease, background .2s ease; }
.carousel-dots button[aria-current="true"] { width: 24px; border-radius: 999px; background: #4e42b5; }
.detail-showcase { padding: 112px 0; background: #fff; }
.detail-heading { max-width: 650px; margin: 0 auto 42px; text-align: center; }
.detail-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.detail-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(67, 54, 103, .12); border-radius: 22px; background: #f8f7fb; box-shadow: 0 16px 38px rgba(42, 32, 72, .09); }
.detail-image-button { display: block; width: 100%; height: 230px; padding: 16px 16px 0; cursor: zoom-in; border: 0; background: #fff; }
.detail-image-button img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; transition: transform .25s ease; }
.detail-image-button:hover img { transform: scale(1.025); }
.detail-image-button:focus-visible { outline: 3px solid #6d5bea; outline-offset: -3px; }
.detail-card figcaption { padding: 19px 20px 22px; }
.detail-card figcaption > span { display: block; margin-bottom: 10px; color: #6355b2; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-card h3 { margin: 0 0 10px; color: #29233c; font-size: 20px; line-height: 1.08; letter-spacing: -.04em; }
.detail-card p { margin: 0; color: #706a7d; font-size: 14px; line-height: 1.5; }
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 32px; }
.lightbox-backdrop { position: absolute; inset: 0; cursor: zoom-out; border: 0; background: rgba(18, 14, 34, .78); backdrop-filter: blur(16px); }
.lightbox-content { position: relative; z-index: 1; display: grid; max-width: min(90vw, 880px); max-height: calc(100vh - 64px); place-items: center; }
.lightbox-content img { display: block; max-width: 100%; max-height: calc(100vh - 64px); border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .38); }
.lightbox-close { position: absolute; top: 14px; right: 14px; display: grid; width: 40px; height: 40px; place-items: center; cursor: pointer; color: #272039; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); font: 400 32px/1 system-ui, sans-serif; box-shadow: 0 5px 18px rgba(0, 0, 0, .16); }
.lightbox-open { overflow: hidden; }
@media (max-width: 700px) { .detail-showcase { padding: 78px 0; } .detail-heading { margin-bottom: 30px; } .detail-rail { display: flex; gap: 14px; width: calc(100% + 32px); margin-left: -16px; padding: 0 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .detail-rail::-webkit-scrollbar { display: none; } .detail-card { flex: 0 0 min(78vw, 310px); scroll-snap-align: start; } .detail-image-button { height: 218px; } .lightbox { padding: 16px; } .lightbox-content { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); } .lightbox-content img { max-height: calc(100vh - 32px); border-radius: 16px; } }
@media (max-width: 600px) { .product-gallery { padding: 78px 0; } .screenshot-carousel figure { border-radius: 16px; } .screenshot-carousel figcaption { padding: 13px 14px 15px; font-size: 13px; } }