/* ZeroShot-specific parts (brand colors live in standard.css .product-zeroshot). */
/* standard.css の .product-page .container { padding: 0 } が .product-intro-grid の下余白を打ち消すので、
   縦長のスマホ画像がスペック行に被らないよう、このページだけ高さと余白を確保する。 */
@media (min-width: 769px) {
    .product-zeroshot .product-intro-grid { padding-bottom: 72px; }
    .product-zeroshot .product-intro-art { min-height: 540px; }
    .product-zeroshot .product-intro-visual-phone { width: 42%; inset: 0 auto auto 24%; }
}
@media (max-width: 768px) {
    .product-zeroshot .product-intro-grid { padding-bottom: 40px; }
    .product-zeroshot .product-intro-art { min-height: 380px; }
}

.zeroshot-coming-soon { min-height: 54px; padding-inline: 22px; font-size: 13px; color: var(--tp-yellow-ink); }

.zeroshot-feature-showcase { grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.kpass-feature-highlight.zeroshot-feature-showcase .feature-text { order: 0; }
.zeroshot-feature-showcase--reverse { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); }
.kpass-feature-highlight.zeroshot-feature-showcase--reverse .feature-text { order: 2; }
.kpass-feature-highlight.zeroshot-feature-showcase--reverse .zeroshot-feature-shot { order: 1; }

/* 撮影画面は黒地なのでインクの台紙、白地の画面（Shots・設定）は --light で淡い色面に載せる */
.zeroshot-feature-shot { position: relative; margin: 0; justify-self: center; width: min(100%, 300px); padding: 18px; border-radius: 36px; background: var(--product-tint); }
.zeroshot-feature-shot--light { background: var(--tp-lavender-3); }
.zeroshot-feature-shot img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1391; object-fit: cover; border-radius: 26px; border: 5px solid var(--tp-ink); box-shadow: var(--tp-shadow-flat-sm); }

/* 2枚組: 少しずらして重ねる */
.zeroshot-feature-shot--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 420px); align-items: start; }
.zeroshot-feature-shot--pair img:last-child { margin-top: 36px; }
.zeroshot-feature-shot--pair img { border-width: 4px; border-radius: 20px; }

.zeroshot-step-number { font: 800 15px/1 var(--tp-font-display); color: var(--product-accent); }

/* サポートのカードは3枚なので、広い画面では3列にして端数を出さない */
@media (min-width: 1001px) {
    .product-zeroshot .support-simple-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .zeroshot-feature-showcase, .zeroshot-feature-showcase--reverse { grid-template-columns: 1fr; gap: 1.5rem; }
    .kpass-feature-highlight.zeroshot-feature-showcase--reverse .feature-text,
    .kpass-feature-highlight.zeroshot-feature-showcase--reverse .zeroshot-feature-shot { order: 0; }
}
@media (max-width: 640px) {
    .zeroshot-feature-shot { width: min(100%, 260px); border-radius: 28px; padding: 12px; }
    .zeroshot-feature-shot img { border-radius: 20px; }
    .zeroshot-feature-shot--pair { width: min(100%, 340px); gap: 10px; }
    .zeroshot-feature-shot--pair img { border-radius: 16px; }
    .zeroshot-feature-shot--pair img:last-child { margin-top: 24px; }
}