/* 商品詳細の詰め直し（2026-09-29・葉太指定）
 *
 * product-detail.css / product-comments.css の後に読む。方針は CLAUDE.md Section 9
 * （見慣れた形・商品が主役・無駄な余白を作らない）。
 *
 *   - お気に入り・共有: 1 行ずつ使っていたボタンを、画像の右上の丸ボタンに（全幅共通）
 *   - 数量とカートに追加を横 1 行、その下に今すぐ購入（全幅共通）
 *   - スマホ: 画像を画面いっぱい / 評価を名前のすぐ下 / 商品詳細・おすすめ・レビューは
 *     枠つきのカードをやめ、太い区切り線で分けた「行」にする / レビュー 0 件は 1 行
 */

/* ---- お気に入り・共有（画像の右上に重ねる） ---- */
.product-gallery { position: relative; }
.gallery-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gallery-tools .btn-favorite,
.gallery-tools .btn-share {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--geal-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(10, 10, 10, .16);
    color: #374151;
    font-size: 1rem;
}
.gallery-tools .btn-favorite:hover,
.gallery-tools .btn-share:hover { transform: none; }

/* ---- 数量 + カートに追加 → 今すぐ購入 ---- */
.action-buttons,
.product-buybox .action-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* product-detail.css のスマホ用 order（数量 = 13）を打ち消す。ボタンの中では DOM の順に並べる */
.action-buttons > * { order: 0 !important; }
.action-buttons .product-quantity-row { flex: 0 0 auto; margin-top: 0; }
.action-buttons .product-quantity-row .qty-label { display: none; }
.action-buttons .btn-add-cart,
.product-buybox .action-buttons .btn-add-cart { flex: 1 1 0; width: auto; min-width: 0; }
.action-buttons .btn-buy-now,
.product-buybox .action-buttons .btn-buy-now { flex: 1 0 100%; width: 100%; }
.action-buttons .btn-add-cart,
.action-buttons .btn-buy-now {
    height: 46px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.action-buttons .btn-add-cart { background: #6B21A8; }
.action-buttons .btn-add-cart:hover { transform: none; box-shadow: none; background: #581c87; }
.action-buttons .btn-buy-now { background: #0A0A0A; color: #fff; border: 0; }
.action-buttons .btn-buy-now:hover { transform: none; background: #262626; color: #fff; }
.action-buttons .qty-stepper { border-radius: 4px; }
.action-buttons .qty-btn,
.action-buttons .qty-input { height: 44px; }

/* ---- レビュー 0 件（1 行） ---- */
.review-empty-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--geal-border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--geal-text-secondary);
}
.review-empty-state a { font-size: 0.82rem; color: #6B21A8; }

/* ---- スマホ ---- */
@media (max-width: 768px) {
    /* 画像を画面いっぱいに（左右の余白・角丸・影・灰色の地をやめる） */
    .product-gallery { margin: -8px -16px 0; }
    .main-image-container {
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        margin-bottom: 0;
    }
    /* 横長の写真で上下に白い帯が出ないよう、枠は写真の縦横比に合わせる（最大で正方形） */
    .main-image-container { aspect-ratio: auto; max-height: 100vw; display: flex; align-items: center; justify-content: center; }
    .main-image { height: auto; max-height: 100vw; }
    .thumbnail-grid { padding: 8px 16px 0; }

    .store-member-section { justify-content: flex-start !important; }

    /* 評価（星）は名前・ブランドのすぐ下（以前は購入ボタンの下） */
    .review-section {
        order: 6;
        margin: -4px 0 0;
        padding: 0;
        border-bottom: 0;
        gap: 6px;
        font-size: 0.85rem;
    }
    .review-section:hover { background: none; padding: 0; margin: -4px 0 0; }

    .product-name { font-size: 1.25rem; line-height: 1.45; margin-bottom: 0; }
    .brand-name { margin-bottom: 0; }

    /* お届け日・ポイントなどは小さい行で詰める */
    .product-delivery-info,
    .benefits-area { margin: 0; padding: 0; border-bottom: 0; font-size: 0.88rem; }
    .price-shipping-area { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

    /* 返品・通報のリンクは小さく */
    .product-return-policy-link-wrap,
    .product-report-link-wrap { margin-top: 0 !important; font-size: 0.85rem; }

    /* 商品詳細・おすすめ・レビュー: 枠つきのカードをやめ、太い区切り線で分けた行にする */
    .product-description,
    .related-products,
    .customer-reviews-section {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0 -16px;
        padding: 18px 16px;
        border-top: 8px solid var(--geal-bg-secondary);
    }
    .product-description { margin-top: 18px; }
    .section-title,
    .related-products .section-title {
        font-size: 1.1rem;
        font-weight: 900;
        margin: 0 0 12px;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .description-content { font-size: 0.95rem; line-height: 1.8; }

    /* おすすめ・同じショップの商品は小さい横 1 列 */
    .related-products-scroll { gap: 10px; scrollbar-width: none; }
    .related-products-scroll::-webkit-scrollbar { display: none; }
    .related-products-scroll > .product-item,
    .related-products-scroll > .related-skeleton-item { width: 120px; }
}