/* Product Detail Modal */
.product-card[role="button"] { cursor: pointer; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); justify-content: center; align-items: center; padding: 24px; }
.modal-overlay.is-open { display: flex; }
.modal-box { background: var(--color-bg-card, #fff); max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; z-index: 5; line-height: 1; }
.modal-close:hover { color: var(--color-text); }

/* Gallery */
.modal-gallery { background: #fff; padding: 24px; }
.modal-gallery-main { display: flex; align-items: center; justify-content: center; min-height: 280px; }
.modal-gallery-main img { max-height: 320px; max-width: 100%; object-fit: contain; }
.modal-gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.modal-gallery-thumbs img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--color-border); padding: 4px; cursor: pointer; background: #fff; transition: border-color 0.2s; }
.modal-gallery-thumbs img:hover, .modal-gallery-thumbs img.active { border-color: var(--color-accent); }

/* Body */
.modal-body { padding: 24px 28px 28px; }
.modal-catchcopy { font-size: 0.78rem; color: var(--color-accent); margin-bottom: 8px; }
.modal-name { font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
.modal-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.modal-price { font-size: 1.4rem; font-weight: 700; color: var(--color-accent); }
.modal-tax { font-size: 0.75rem; color: var(--color-text-muted); }
.modal-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.modal-badge { font-size: 0.7rem; padding: 3px 10px; border-radius: 2px; font-weight: 700; }
.badge-free-ship { background: #28a745; color: #fff; }
.badge-asuraku { background: #ff6b00; color: #fff; }
.badge-point { background: #e60012; color: #fff; }
.badge-card { background: #0d6efd; color: #fff; }
.badge-gift { background: #d63384; color: #fff; }
.modal-shop { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 4px; }
.modal-shop a { color: var(--color-accent); text-decoration: none; }
.modal-shop a:hover { text-decoration: underline; }
.modal-review { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 16px; }
.modal-desc { font-size: 0.82rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 24px; max-height: 160px; overflow-y: auto; }
#modal-cta-wrap { display: flex; flex-direction: column; gap: 8px; }
.modal-cta { display: block; width: 100%; padding: 14px; text-align: center; font-size: 0.95rem; font-weight: 700; color: #fff; border: none; cursor: pointer; transition: opacity 0.3s; text-decoration: none; }
.modal-cta:hover { opacity: 0.85; color: #fff; }
.modal-cta.cta-rakuten { background: #bf0000; }
.modal-cta.cta-yahoo { background: #ff0033; }
.modal-cta:not(.cta-rakuten):not(.cta-yahoo) { background: var(--color-accent); color: var(--color-bg); }

/* Similar items */
.modal-similar { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border, #e0e0e0); }
.modal-similar-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 12px; }
.modal-similar-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.modal-similar-list::-webkit-scrollbar { height: 4px; }
.modal-similar-list::-webkit-scrollbar-thumb { background: var(--color-border, #ccc); border-radius: 2px; }
.similar-item { flex: 0 0 140px; text-decoration: none; color: var(--color-text, #333); transition: opacity 0.2s; }
.similar-item:hover { opacity: 0.8; }
.similar-item-img { width: 140px; height: 140px; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border, #e0e0e0); margin-bottom: 8px; }
.similar-item-img img { max-width: 110px; max-height: 110px; object-fit: contain; }
.similar-item-name { font-size: 0.72rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.similar-item-price { font-size: 0.82rem; font-weight: 700; color: var(--color-accent); }
.similar-item-shop { font-size: 0.65rem; color: var(--color-text-muted, #999); }
.modal-similar-loading { font-size: 0.78rem; color: var(--color-text-muted, #999); }