/* =====================================================
   Woo 並び替えセレクト（orderby）— ピル型スタイル
   Scope: PLP（/shop, 検索結果, タグ等）
   ===================================================== */

/* ラッパ位置基準（擬似要素の矢印を載せるため） */
.before-shop-loop .woocommerce-ordering{
  position: relative;
  display: inline-block;
}

/* セレクト本体 */
.before-shop-loop .woocommerce-ordering .orderby{
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--c-bg, #fff);
  color: var(--c-fg, #1a1a1a);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-full, 9999px);

  /* 添付2のゆったり感 */
  padding: 10px 40px 10px 16px;
  font-size: var(--fs-14, 14px);
  line-height: 1;
  font-weight: var(--fw-regular, 400);

  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  transition: border-color var(--dur, 200ms) var(--ease, ease),
              box-shadow var(--dur, 200ms) var(--ease, ease),
              background-color var(--dur, 200ms) var(--ease, ease);
  cursor: pointer;

  /* iOS での余白暴れ防止 */
  background-clip: padding-box;
}

/* ホバー時：うっすら浮かせる */
.before-shop-loop .woocommerce-ordering .orderby:hover{
  border-color: rgba(0,0,0,.12);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
}

/* フォーカスリング（ブランドブルー） */
.before-shop-loop .woocommerce-ordering .orderby:focus{
  outline: none;
  border-color: var(--c-brand-blue, #1f4063);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--c-brand-blue, #1f4063) 20%, transparent),
    var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

/* ▼ のカスタム矢印（背景SVG） */
.before-shop-loop .woocommerce-ordering::after{
  content: "";
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;

  /* ダーク/ライト両用の単色SVG（currentColor相当） */
  /* stroke を %231a1a1a（= #1a1a1a）に URLエンコード */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3/svg%3E");
  opacity: .85;
}

/* 疑似要素の色をダークで上書き */
@media (prefers-color-scheme: dark){
  .before-shop-loop .woocommerce-ordering .orderby{
    background-color: #0f1115;
    color: #e7e7e7;
    border-color: #2b2f36;
    box-shadow: none;
  }
  .before-shop-loop .woocommerce-ordering::after{
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23e7e7e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3/svg%3E");
    opacity: .9;
  }
}

/* モバイル：横幅は自動/必要に応じて100%にしたい場合は下を有効化
@media (max-width: 767.98px){
  .before-shop-loop .woocommerce-ordering .orderby{ width: 100%; }
}
*/

/* ========== Orderby (pill select) : ensure chevron shows ========== */
/* WooCommerce の並び替えセレクトに矢印を描画 */
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce-ordering select.orderby {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 矢印（下向き）を右側に配置：data URI の SVG */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'>\
<path d='M1 1.5L6 6.5L11 1.5' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 14px center; /* 右の丸みと被らない位置 */
  background-size: 12px 8px;

  /* 矢印用の余白を確保（数値はお好みで） */
  padding-right: 40px;

  /* 既存のピルスタイルに合わせておく（重複OK） */
  border-radius: 9999px;
  border: 1px solid var(--c-border, #e5e7eb);
  background-color: var(--c-bg, #fff);
  line-height: 1.2;
}

/* Windows/IE系の既定矢印を非表示 */
.woocommerce .woocommerce-ordering select.orderby::-ms-expand {
  display: none;
}

/* フォーカス時の見え方（アクセシビリティ） */
.woocommerce .woocommerce-ordering select.orderby:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,64,99,0.15); /* brand-blue の淡いリング */
  border-color: var(--c-brand-blue, #1f4063);
}

/* ホバー時の軽いトーンアップ（任意） */
.woocommerce .woocommerce-ordering select.orderby:hover {
  border-color: #d7dce3;
}

/* ダークモード軽対応（任意） */
@media (prefers-color-scheme: dark) {
  .woocommerce .woocommerce-ordering select.orderby {
    background-color: #111418;
    border-color: #2b2f36;
    color: #e7eaf0;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'>\
<path d='M1 1.5L6 6.5L11 1.5' stroke='%23b8c0cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  }
}

/* ---------- Breadcrumb: add top spacing ---------- */
/* shop / category / search 共通 */
.plp-breadcrumbs{
  margin-top: var(--space-4, 12px); /* 12px 相当 */
}

/* 既存ルールで上書きされる場合の保険（!important なしで勝てるように少し強める） */
main.site-content .container > .plp-breadcrumbs{
  margin-top: var(--space-4, 12px);
}