.ppm-products{
    --ppm-rubber-common-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect width='240' height='160' rx='16' fill='%23f5f6f8'/%3E%3Crect x='66' y='34' width='92' height='92' rx='8' fill='%23ed4c4c' transform='rotate(-8 112 80)'/%3E%3Ccircle cx='132' cy='79' r='38' fill='%232d2d2d'/%3E%3Ccircle cx='132' cy='79' r='28' fill='%23ed4c4c'/%3E%3Ccircle cx='181' cy='42' r='15' fill='white' stroke='%23ddd' stroke-width='3'/%3E%3C/svg%3E");
}

.ppm-rubber-section{
    padding:16px 0 14px;
    overflow:hidden;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.ppm-rubber-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin:0 48px 12px;
}

.ppm-rubber-heading h2{
    margin:0;
    padding:0;
    border:0;
    color:#333;
    font-size:20px;
    line-height:1.4;
}

.ppm-rubber-heading p{
    margin:2px 0 0;
    color:#777;
    font-size:12px;
    line-height:1.5;
}

.ppm-rubber-pr{
    flex:0 0 auto;
    margin-top:3px;
    padding:2px 7px;
    border:1px solid #bbb;
    border-radius:3px;
    color:#777;
    font-size:10px;
    font-weight:700;
    line-height:1.3;
}

.ppm-rubber-slider{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:10px;
    align-items:center;
}

.ppm-rubber-viewport{
    min-width:0;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.ppm-rubber-viewport::-webkit-scrollbar{
    display:none;
}

.ppm-rubber-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 48px) / 5);
    gap:12px;
    width:100%;
}

.ppm-rubber-card{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    width:auto;
    min-width:0;
    overflow:hidden;
    border:1px solid #e3e3e3;
    border-radius:10px;
    background:#fff;
    scroll-snap-align:start;
}

.ppm-rubber-visual{
    flex:0 0 108px;
    width:100%;
    height:108px;
    background-color:#f5f6f8;
    background-image:var(--ppm-rubber-common-image);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

.ppm-rubber-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:10px;
}

.ppm-rubber-card h3{
    min-height:2.7em;
    margin:0 0 4px;
    padding:0;
    border:0;
    color:#333;
    font-size:13px;
    line-height:1.35;
}

.ppm-rubber-description{
    display:-webkit-box;
    min-height:3.9em;
    margin:0 0 9px !important;
    overflow:hidden;
    color:#666;
    font-size:10px;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.ppm-rubber-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    margin-top:auto;
    padding:6px 5px;
    border-radius:5px;
    border: 2px #ed4c4c solid;
    color:#ed4c4c !important;
    font-size:10px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
    text-decoration:none !important;
}

.ppm-rubber-link:hover{
    color:#fff !important;
    opacity:.85;
}

.ppm-rubber-link.is-disabled{
    background:#e6e6e6;
    color:#888 !important;
}

.ppm-rubber-arrow{
    position:relative;
    width:36px;
    height:52px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.ppm-rubber-arrow::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:12px;
    border-top:3px solid #333;
    border-right:3px solid #333;
}

.ppm-rubber-arrow-prev::before{
    transform:translate(-35%,-50%) rotate(-135deg);
}

.ppm-rubber-arrow-next::before{
    transform:translate(-65%,-50%) rotate(45deg);
}

.ppm-rubber-arrow:disabled{
    cursor:default;
    opacity:.2;
}

@media screen and (max-width:834px){

    .ppm-rubber-section{
        padding:12px 0 8px;
        overflow:visible;
    }

    .ppm-rubber-heading{
        margin:0 0 10px;
    }

    .ppm-rubber-heading h2{
        font-size:20px;
    }

    .ppm-rubber-heading p{
        font-size:11px;
    }

    .ppm-rubber-slider{
        display:block;
        margin-right:-16px;
    }

    .ppm-rubber-arrow{
        display:none;
    }

    .ppm-rubber-viewport{
        padding:0 16px 0px 0;
        scroll-padding-left:0;
    }

    .ppm-rubber-track{
        display:flex;
        gap:10px;
        width:max-content;
    }

    .ppm-rubber-card{
        flex:0 0 clamp(150px,44vw,190px);
        width:clamp(150px,44vw,190px);
    }

    .ppm-rubber-visual{
        height:104px;
    }

    .ppm-rubber-card h3{
        font-size:13px;
    }
}

/* ==========================================
   人気ラバー：コンパクト表示（最終調整）
========================================== */

.ppm-products .ppm-rubber-section{
    padding:10px 0;
}

.ppm-products .ppm-rubber-heading{
    align-items:center;
    margin:0 8px 7px;
}

.ppm-products .ppm-rubber-heading h2{
    font-size:14px;
    line-height:1.3;
}

.ppm-products .ppm-rubber-pr{
    margin:0;
    padding:1px 5px;
    font-size:9px;
}

.ppm-products .ppm-rubber-slider{
    grid-template-columns:24px minmax(0,1fr) 24px;
    gap:6px;
}

.ppm-products .ppm-rubber-track{
    gap:11px;
    grid-auto-columns:calc((100% - 40px) / 5);
}

.ppm-products .ppm-rubber-card{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:8px;
    align-items:center;
    height:80px;
    min-height:80px;
    padding:5px;
    overflow:hidden;
    border:0;
    border-radius:5px;
    background:#fff;
}

.ppm-products .ppm-rubber-visual{
    align-self:center;
    flex:none;
    width:70px;
    height:70px;
    min-height:0;
    border-radius:4px;
    background-size:contain;
}

.ppm-products .ppm-rubber-card-body{
    display:flex;
    align-self:stretch;
    justify-content:flex-start;
    min-width:0;
    padding:0;
}

.ppm-products .ppm-rubber-card h3{
    display:block;
    height:1.3em;
    min-height:1.3em;
    max-height:1.3em;
    margin:0 0 2px;
    overflow:hidden;
    font-size:10px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ppm-products .ppm-rubber-description{
    display:block;
    height:1.2em;
    min-height:0;
    margin:0 0 3px !important;
    overflow:hidden;
    color:#777;
    font-size:8px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ppm-products .ppm-rubber-link{
    width:max-content;
    min-height:24px;
    margin:auto 0 0;
    padding:3px 8px;
    border-radius:3px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
}

.ppm-products .ppm-rubber-arrow{
    width:24px;
    height:40px;
}

.ppm-products .ppm-rubber-arrow::before{
    width:9px;
    height:9px;
    border-width:2px;
}

@media screen and (max-width:834px){

    .ppm-products .ppm-rubber-section{
        padding:8px 0 5px;
    }

    .ppm-products .ppm-rubber-heading{
        margin:0 0 6px;
    }

    .ppm-products .ppm-rubber-heading h2{
        font-size:12px;
    }

    .ppm-products .ppm-rubber-slider{
        margin-right:-16px;
    }

    .ppm-products .ppm-rubber-track{
        gap:16px;
    }

    .ppm-products .ppm-rubber-card{
        display:flex;
        flex:0 0 72px;
        flex-direction:column;
        gap:0;
        width:72px;
        height:auto;
        min-height:0;
        padding:0;
        border:0;
        border-radius:0;
    }

    .ppm-products .ppm-rubber-visual{
        flex:0 0 72px;
        width:72px;
        height:72px;
        aspect-ratio:1 / 1;
        border-radius:3px;
    }

    .ppm-products .ppm-rubber-card-body{
        width:100%;
        padding:4px 0 0;
    }

    .ppm-products .ppm-rubber-card h3{
        height:1.3em;
        min-height:1.3em;
        max-height:1.3em;
        margin:0 0 2px;
        font-size:10px;
    }

    .ppm-products .ppm-rubber-description{
        margin-bottom:3px !important;
        font-size:8px;
    }

    .ppm-products .ppm-rubber-link{
        width:100%;
        min-height:23px;
        padding:3px 2px;
        font-size:8px;
    }
}


/* フッターメニュー：大会登録のプラス */

/* 人気ラバー：商品名・コピー間隔の最終調整
   Cocoon／既存CSSより後に適用させるため、ここで強制上書き */
.ppm-products .ppm-rubber-card .ppm-rubber-card-body > h3{
    display:block !important;
    width:100% !important;
    height:13px !important;
    min-height:13px !important;
    max-height:13px !important;
    margin:0 0 1px !important;
    padding:0 !important;
    overflow:hidden !important;
    font-size:10px !important;
    line-height:13px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    -webkit-line-clamp:unset !important;
}

.ppm-products .ppm-rubber-card .ppm-rubber-card-body > .ppm-rubber-description{
    display:block !important;
    height:10px !important;
    min-height:10px !important;
    max-height:10px !important;
    margin:0 0 3px !important;
    padding:0 !important;
    overflow:hidden !important;
    font-size:8px !important;
    line-height:10px !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    -webkit-line-clamp:unset !important;
}

/* 人気ラバー：PC表示の位置・収まり調整 */
@media screen and (min-width:835px){
    /* PCは4件表示にして商品情報とボタンの横幅を確保 */
    .ppm-products .ppm-rubber-track{
        grid-auto-columns:calc((100% - 30px) / 4) !important;
    }

    .ppm-products .ppm-rubber-card{
        grid-template-columns:70px minmax(0,1fr) !important;
        gap:12px !important;
    }

    /* 画像の下端をボタンの下端に合わせる */
    .ppm-products .ppm-rubber-card .ppm-rubber-visual{
        align-self:end !important;
    }

    /* 商品名・コピーを8px下げる */
    .ppm-products .ppm-rubber-card .ppm-rubber-card-body{
        box-sizing:border-box !important;
        min-width:0 !important;
        padding:8px 0 0 !important;
        overflow:visible !important;
    }

    /* ボタンをカード幅に収め、下端を揃える */
    .ppm-products .ppm-rubber-card .ppm-rubber-link{
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:24px !important;
        margin:auto 0 0 !important;
        padding:3px 4px !important;
        overflow:visible !important;
        font-size:9px !important;
        white-space:nowrap !important;
    }
}

/* PRの文字を枠の上下左右中央に配置 */
.ppm-products .ppm-rubber-pr{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    height:18px !important;
    margin:0 !important;
    padding:0 5px !important;
    line-height:1 !important;
}

/* 人気ラバー：前後の余白・境界線・PR位置を調整 */




.ppm-products .ppm-rubber-section{
    margin-bottom:20px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
}

.ppm-products .ppm-rubber-heading{
    position:relative;
    z-index:2;
    margin-bottom:2px !important;
}

.ppm-products .ppm-rubber-pr{
    position:relative;
    z-index:3;
}

@media screen and (max-width:834px){
    

    .ppm-products .ppm-rubber-heading{
        margin-bottom:6px !important;
    }
}

/* 商品画像からもAmazonを開けるようにする */
.ppm-products .ppm-rubber-image-link{
    display:block;
    cursor:pointer;
    text-decoration:none !important;
}


/* 共通コンテナと詳細ページの余白 */
.ppm-products { width:100%; min-width:0; box-sizing:border-box; }
.match-page .ppm-products { margin:12px 0 20px 0; }
.ppm-products .ppm-rubber-section { margin-top:0; }
.ppm-products .ppm-rubber-card .ppm-rubber-link {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    text-align:center;
    line-height:16px !important;
}