/* ============================================================
 * ua-reco-slider : UA レコメンド枠の Swiper 化スタイル（PC/SP 共通）
 *   挙動・見た目はカテゴリバナー(uacar.css)のナビ/矢印と同一。
 *   JS は js/ua-reco-slider.js。UA の footer.jsp でのみ読み込む。
 * ============================================================ */

/* 矢印の absolute 基準。既存レイアウトを壊さないため position のみ */
.uar-host { position: relative; }
.uar-viewport { position: relative; overflow: hidden; width: 100%; min-width: 0; max-width: 100%; } /* 矢印(absolute)の基準。width系は、親がflex等のとき viewport が中身20枚分の幅に広がって Swiper の可動域計算が壊れる(ほぼ動けなくなる)のを防ぐ */
/* Swiper 化後は flex 横並びが前提。既存の折返しグリッド(flex-wrap)や余白指定を打ち消す。
   wrapper の width:100% は「viewport が一時的に中身20枚分の幅で計測されて可動域計算が壊れる」対策とセット。
   ※スライドの幅はここでは決めない。ua-reco-slider.js の layoutSlides() が整数pxを inline !important で振る
     （%幅はサブピクセル累積で送るたびに右端が見切れるため。既存CSSの width!important にも inline で勝つ） */
.site_underarmour .uar-viewport > .swiper-wrapper { display: flex; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none; overflow: visible !important; }
/* ↑justify-content: ベース(.catalogList等)の space-between 打ち消し。件数が枠数未満のとき間延びせず左詰めにする */
/* ↑margin/padding の !important は、枠ごとのリスト余白(例: #recommend__coordinate .coordinate__2col{padding:0 16px})が
   wrapper に残って viewport の余白と二重になるのを防ぐ。左右余白は .uar-viewport 側で一元管理する */
/* グリッド時代の詰め物疑似要素(.catalogList:before/:after 等)は幽霊flexアイテムとして幅を占有し、
   「件数ぴったりでも右矢印が出て数pxだけ動く」原因になるため wrapper では全面無効化 */
.site_underarmour .uar-viewport > .swiper-wrapper:before,
.site_underarmour .uar-viewport > .swiper-wrapper:after {
  content: none !important;
}
/* ↑overflow:visible は、元が横スクロールコンテナだった枠(カートお気に入り .lc-row--scroll の overflow-x:scroll 等)で
   wrapper自体がスクロール領域になり、translateしても8枚目以降が内部に隠れて見えなくなるのを防ぐ */
/* height:auto は Swiper標準css(.swiper-slide{height:100%})の打ち消し。
   wrapper(align-items:stretch)で全カードが最大高に揃い、カード内の mt-auto 要素(カートに入れる等)の下端が揃う。
   ※width はここでは指定しない。%幅はサブピクセル累積でスライドごとに右端が見切れるため、
     ua-reco-slider.js が整数pxを計算して inline !important で振る（それが唯一の幅ソース） */
.site_underarmour .uar-viewport > .swiper-wrapper > .swiper-slide { flex: 0 0 auto !important; height: auto !important; margin: 0 2px 0 0 !important; }
.site_underarmour .uar-viewport > .swiper-wrapper > .swiper-slide:last-child { margin-right: 0 !important; }
/* SP(別テンプレート・狭幅): 2枚+右チラ見せ（従来の横スクロールと同等の幅）。
   スワイプ領域全体に左右15pxの余白（%幅の基準はpadding内側なので2枚組計算は不変。
   スクロール中のカードは余白部分で見切れる=uacarと同じ見え方） */
@media (max-width: 767px) {
  .site_underarmour .uar-viewport { padding: 0 15px; }
}

/* ページネーション（uacar と同じ濃色ピル） */
.uar-nav.swiper-pagination { position: static; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
.uar-nav .swiper-pagination-bullet { width: 6px; height: 6px; background: #cfcfcf; opacity: 1; border-radius: 999px; margin: 0 !important; transition: width .4s ease, background-color .3s ease; }
.uar-nav .swiper-pagination-bullet-active { width: 24px; background: #1d1d1d; }
/* 1画面に収まる枠(watchOverflowでlock)ではナビを出さない */
.uar-nav.swiper-pagination-lock { display: none; }

/* アロー（前へ/次へ）— uacar と同じチェブロン */
/* 上下中央は margin:auto でなく translate で行う（button への margin リセット等に負けないよう !important） */
.uar-viewport > .uar-arrow { position: absolute; top: 50% !important; bottom: auto !important; transform: translateY(-50%); margin: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; z-index: 2; transition: background .2s; }
.uar-arrow::before { content: ""; display: block; width: 8px; height: 8px; border-top: 1.5px solid #1d1d1d; border-right: 1.5px solid #1d1d1d; }
.uar-arrow--prev { left: 5px; }
.uar-arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.uar-arrow--next { right: 5px; }
.uar-arrow--next::before { transform: rotate(45deg); margin-right: 3px; }
/* 端(先頭/最終)では非表示。1画面に収まる枠(lock)も非表示 */
.uar-arrow.is-disabled,
.uar-arrow.swiper-button-lock { display: none; }

/* base(content-cart-koichi.css:1440)の「最近チェックは12件まで」制限を、スライダー化時のみ解除
   （20件化でナビだけ20個分・13件目以降が非表示になるのを防ぐ。初期化前・他ブランドは従来通り） */
.site_underarmour .cartPage .cart-recentry .catalogList.swiper-wrapper > li:nth-child(n + 13) {
  display: block;
}
/* 注文完了「お買い忘れ」の7件目以降非表示も同様にスライダー化時のみ解除
   （display:noneのスライドは幅0になり、Swiperが「ほぼ動けない」と誤計算して全件送れなくなる） */
.site_underarmour .wrap_orderComplete_recommend .catalogList.swiper-wrapper > li:nth-child(n + 7) {
  display: block;
}