/**
 * 商品詳細ページ専用（ProductDetailHtml::apply 済みの <main> と併用）。
 * ギャラリー内のインライン script はテンプレート側に残す。
 */

/* 大きな解像度・横長画像も枠内に収める（Tailwind 未適用時の保険を含む） */
#wly-product-gallery #wly-product-gallery-main {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
#wly-product-gallery [data-wly-gallery-thumb] img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* 商品名 H1: テンプレに line-clamp-3 付与。CDN Tailwind が無い環境でも効くようフォールバック */
#main-content h1.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.btn-cart {
    background-color: var(--leaf-olive-dark);
    color: white;
    padding: 1.25rem;
    width: 100%;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    text-align: center;
}
.btn-cart:hover {
    background-color: #7A8E68;
    transform: translateY(-2px);
}

.swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}
.swatch.active {
    border-color: var(--leaf-olive-dark);
}

.spec-table th {
    width: 30%;
    text-align: left;
    padding: 1rem;
    background: var(--leaf-olive-pale);
    font-size: 13px;
    border-bottom: 1px solid #eee;
}
.spec-table td {
    padding: 1rem;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}

@media (max-width: 768px) {
    .mobile-sticky-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        display: flex;
        gap: 1rem;
    }
}