/* 商品カルーセル（app/template/astroproducts/Block/productsCarousel.twig）のスマホ表示 2026-11-10
   トップのセール・週間ランキング・ベストセラー・メーカー新規取扱品などと、商品ページの「いまよく見られている商品！」で使う。
   読み込みは productsCarousel.twig の <link>（同じブロックが何回出ても同じファイル）。
   幅 959px 以下（テーマ style.css の SP と同じ）だけ。PC のスライダーはそのまま。
   - 枠線つきのカードをやめ、写真を薄いグレーの角丸タイルに載せる（白い背景の写真は multiply でなじむ）
   - 1枚を 42% 幅にして次のカードをのぞかせ、指を離すとカードの頭で止める。灰色のスクロールバーは出さない
   - 商品名は2行まで、価格はすぐ下（テーマの JS が見出しの高さをそろえて空きができていた）
   - 週間ランキング（is-rank）は写真の左上に順位。1〜3位は金・銀・銅 */
@media only screen and (max-width: 959px) {
  .is-carouselSP .commonProductList-list {
    gap: 10px;
    padding: 4px 0 4px 16px !important;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .is-carouselSP .commonProductList-list::-webkit-scrollbar { display: none; }
  /* 右端の余白は padding ではなくこの空の要素で取る（横スクロールの箱は、ブラウザによって padding-right が効かない）。gap 10px＋6px＝16px */
  .is-carouselSP .commonProductList-list::after { content: ""; flex: 0 0 6px; }
  .is-carouselSP .commonProductList-list-item {
    flex: 0 0 clamp(140px, 42%, 210px) !important;
    width: clamp(140px, 42%, 210px) !important;
    min-width: 0 !important; /* customize.css の min-width: 38.66vw を外す（タブレット幅で大きくなりすぎる） */
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .is-carouselSP .commonProductList-product {
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .is-carouselSP .commonProductList-product-wrap-head { min-height: 0 !important; }
  .is-carouselSP .commonProductList-product-imgBlock {
    position: relative;
    margin-bottom: 0 !important;
    background: #F5F5F5; /* テーマのグレー。#EDEDEA だと写真がくすむので明るめに（2026-11-10 ユーザー決定「案1」）。白にはしない */
    border-radius: 12px;
    overflow: hidden;
  }
  .is-carouselSP .commonProductList-product-imgBlock-img { background: #F5F5F5; }
  /* テーマが写真の上に描く 1px の枠（#DDD）も同じ角丸に。四角のままだと、外の角丸で角だけ欠けて薄く見えた（2026-11-10 ユーザー指摘）。色はタイルに合わせて薄く */
  .is-carouselSP .commonProductList-product-imgBlock-img::before { border-radius: 12px; border-color: #E6E6E6; }
  /* 写真はタイルいっぱい（縮小すると、テーマの translate(-50%,-50%) の中央寄せとずれて左上だけ空くので縮めない。2026-11-10 ユーザー「左上の余白不要」） */
  .is-carouselSP .commonProductList-product-imgBlock-img img {
    mix-blend-mode: multiply;
  }
  .is-carouselSP .commonProductList-product-name {
    min-height: 0 !important;
    height: 2.9em;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .is-carouselSP .commonProductList-product-priceBlock { margin-top: 4px; }
  .is-carouselSP .review-summary-container { margin-top: 2px !important; }

  /* 順位（週間ランキング） */
  .is-carouselSP.is-rank .commonProductList-list { counter-reset: rank; }
  .is-carouselSP.is-rank .commonProductList-list-item { counter-increment: rank; }
  .is-carouselSP.is-rank .commonProductList-product-imgBlock::before {
    content: counter(rank);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    background: #3A3A3A;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: 12px 0 10px 0;
  }
  .is-carouselSP.is-rank .commonProductList-list-item:nth-child(1) .commonProductList-product-imgBlock::before { background: #C59B2E; }
  .is-carouselSP.is-rank .commonProductList-list-item:nth-child(2) .commonProductList-product-imgBlock::before { background: #9AA1A9; }
  .is-carouselSP.is-rank .commonProductList-list-item:nth-child(3) .commonProductList-product-imgBlock::before { background: #A86B3C; }
}