/* ========================================
   拡張レコメンデーション用CSS
   PR枠・トッピング枠のスタイリング
======================================== */

/* PR枠カードは標準のfeatured状態を使用（統一化のため特別スタイル削除） */

/* トッピング枠カードは標準のfeatured状態を使用（統一化のため特別スタイル削除） */

/* ========================================
   統一化されたfeatured状態スタイル
   PR・トッピングカードも標準のfeatured効果を適用
======================================== */

/* PR枠・トッピング枠のfeatured状態は components.css の .food-card--featured を継承 */

/* 8枠対応のカルーセルコンテナ調整 */
@media (min-width: 1200px) {
    .food-cards-container {
        max-width: 100%;
    }
}

/* カルーセルドット拡張（8個対応） */
.carousel-dots-container {
    max-width: 400px;
    margin: 16px auto;
    flex-wrap: wrap;
    justify-content: center;
}

/* モバイル時のドット表示調整 */
@media (max-width: 768px) {
    .carousel-dots-container {
        gap: 6px;
        padding: 12px 20px;
    }
    
    .carousel-dot {
        width: 10px;
        height: 10px;
    }
    
    .carousel-dot--active::after {
        width: 5px;
        height: 5px;
    }
}

/* 商品説明セクション */
.recommendations-explanation {
    background: var(--light-gray);
    border: var(--border-light);
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 4px;
}

.recommendations-explanation h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mid-gray);
}

.explanation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.explanation-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.explanation-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    min-width: 40px;
}


.explanation-text {
    font-size: 11px;
    color: var(--dark-gray);
    line-height: 1.4;
}

/* PR枠のアニメーション（統一化のため削除） */