/**
 * ヌキドコ プロモーションウィジェット スタイル（v3 — デザイン修正版）
 *
 * 配置:
 *   TOP: hero 直下フルワイド（index.php側 / variant='top'）
 *   その他アーカイブ: type-bar 直下（header.php側 / variant='pc'）
 *
 * 設計（v3 修正点）:
 *   - 見出しは既存 .section-head-v5 構造に踏襲（独自ヘッダーCSS削除）
 *   - 背景: 虹色グラデ → #fdfcf9（クリーム白）+ 控えめ影
 *   - .nuk-promo-inner 左右padding 10px固定
 *   - .nuk-promo-badge 赤透過に変更
 *   - TOPだけ margin-bottom: 20px 追加
 *
 * @version 3.0 (Day 8 hotfix / 2026-04-30)
 */

/* =====================================================================
   ラッパー: フルワイド帯（クリーム白・控えめ影）
   ===================================================================== */
.nuk-promo {
    margin: 0;
    padding: 18px 0;
    background: #fdfcf9;
    box-shadow: 0 0 5px #0000000a;
    overflow: hidden;
}

/* TOP（hero直下）だけ、下マージン20px入れて次セクションと余白を作る */
.nuk-promo--top {
    margin-bottom: 20px;
}

/* 左右padding 10px 固定（var(--pad-x)を使わず、画面端から10px固定） */
.nuk-promo-inner {
    max-width: 100%;
    padding: 0 10px;
}

/* =====================================================================
   ヘッダー部
   既存の .section-head-v5 構造を100%踏襲（kicker/title/desc + もっと見る）
   max-width 1400px で中央寄せして、商品トラックとの位置揃え
   ===================================================================== */
.nuk-promo .section-head-v5 {
    max-width: 1400px;
    margin: 0 auto 15px;
}

@media (max-width: 767px) {
    .nuk-promo {
        padding: 14px 0;
        margin-bottom: 20px;
    }
    .nuk-promo .section-head-v5 { margin-bottom: 10px; }
}

/* =====================================================================
   トラック（横スクロール）
   ===================================================================== */
.nuk-promo-track-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 端で見切れる演出 */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.nuk-promo-track-wrap::-webkit-scrollbar { display: none; }

.nuk-promo-track {
    display: flex;
    gap: 10px;
    padding: 4px 0 8px;
    margin: 0;
    list-style: none;
    width: max-content;
    min-width: 100%;
}

/* =====================================================================
   ナビボタン（左右矢印・PCのみ表示）
   ===================================================================== */
.nuk-promo-nav {
    position: relative;
}

.nuk-promo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-soft);
    background: var(--bg-card);
    color: var(--t1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: opacity var(--t-base), background var(--t-base), transform var(--t-base);
    padding: 0;
}

.nuk-promo-nav-btn:hover {
    background: var(--pink-subtle);
    border-color: var(--pink);
    transform: translateY(-50%) scale(1.05);
}

.nuk-promo-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.nuk-promo-nav-btn svg {
    width: 18px;
    height: 18px;
    color: var(--pink-deep);
}

.nuk-promo-nav-prev { left: 8px; }
.nuk-promo-nav-next { right: 8px; }

/* SP ではナビボタン非表示（タッチで横スワイプ） */
@media (max-width: 767px) {
    .nuk-promo-nav-btn { display: none; }
}

/* =====================================================================
   個別カード
   ===================================================================== */
.nuk-promo-item {
    flex: 0 0 auto;
    width: 220px;
}

@media (max-width: 1024px) {
    .nuk-promo-item { width: 180px; }
}

@media (max-width: 767px) {
    .nuk-promo-item { width: 240px; }
}

.nuk-promo-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--r2);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    height: 100%;
}

.nuk-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--s2);
    border-color: var(--pink);
}

/* サムネ: 4:3 固定 */
.nuk-promo-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bg3);
    overflow: hidden;
}

.nuk-promo-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-base);
}

.nuk-promo-card:hover .nuk-promo-thumb-img {
    transform: scale(1.04);
}

/* 割引バッジ（左上・赤透過） */
.nuk-promo-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    background: #e8002dbf;
    color: #fff;
    border-radius: var(--r-full);
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ボディ */
.nuk-promo-body {
    padding: 8px 10px 10px;
}

.nuk-promo-title-text {
    font-size: 11px;
    line-height: 1.45;
    color: var(--t1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    min-height: 2.9em;
}

.nuk-promo-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.2;
}

.nuk-promo-price-original {
    font-family: var(--font-inter);
    font-size: 10px;
    color: var(--t4);
    text-decoration: line-through;
}

.nuk-promo-price-current {
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 700;
    color: var(--pink-dark);
}

@media (max-width: 767px) {
    .nuk-promo-body { padding: 8px 10px 10px; }
}