/* OSH商品ページだけに限定 */
@supports selector(html:has(#hidden_goods)) {

  /* ========== PC（data-browse-mode="P"）========== */
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form {
    display: flex;
    flex-direction: column;
  }

  /* 製品名・価格は元の位置（先頭側）に固定 */
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-goods-name,
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-goods-price {
    order: 0;
  }

  /* 入れ替え：variation を前、sales-detail-append を後ろ */
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-variation {
    order: 20;
  }
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-goods-sales-detail-append {
    order: 30;
  }

  /* ほかの要素（カート/お気に入り/問い合わせ等）は後段に固定して位置崩れ防止 */
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-add-cart,
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-goods-favorite,
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > .block-contact-about-goods,
  html[data-browse-mode="P"]:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form > [id^="ordertee-bnrArea-"] {
    order: 40;
  }

  /* ========== スマホ（data-browse-mode="S"）========== */
  /* 親は .block-goods-detail。ここだけflex化（add-cartは別階層なので影響なし） */
  html[data-browse-mode="S"]:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail {
    display: flex;
    flex-direction: column;
  }

  /* 製品名・価格は元の位置（先頭側）に固定 */
  html[data-browse-mode="S"]:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail > .block-goods-name,
  html[data-browse-mode="S"]:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail > .block-goods-price {
    order: 0;
  }

  /* 入れ替え：variation を前、sales-detail-append を後ろ */
  html[data-browse-mode="S"]:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail > .block-variation {
    order: 20;
  }
  html[data-browse-mode="S"]:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail > .block-goods-sales-detail-append {
    order: 30;
  }

  /* （任意）上下の余白を安定させたいとき */
  html:has(#hidden_goods[value^="OSH-"])
  .pane-goods-right-side > form,
  html:has(#hidden_goods[value^="OSH-"])
  .block-goods-detail {
    row-gap: var(--goods-v-gap, 0);
  }
}












/* 元セレクトは視覚的に隠す（送信・フォーカスは保持） */
select[name="item_3"],
select[name="item_4"],
select[name="item_5"],
select[name="item_6"],
select[name="item_8"],
select[name="item_9"],
select[name="item_10"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

/* 置き換えUIのラッパー */
.pocket-select {
  position: relative;
  width: 100%;
  max-width: 480px; /* 必要に応じて */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 18px; /* 元14px → 約2.5倍に合わせて拡大 */
}

/* 表示エリア（選択中） */
.pocket-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 28px; /* 元: 8px 12px → 約2.5倍 */
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
}

.pocket-select__button-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.pocket-select__img {
  width: 60px;         /* 24 → 60px */
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

.pocket-select__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pocket-select__chevron {
  margin-left: auto;
  font-size: 12px;
  opacity: .7;
}

/* ドロップダウン（リスト） */
.pocket-select__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  max-height: 480px; /* リストが長い item_7/10 対策 */
  overflow: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 8px;
  box-sizing: border-box;
}

.pocket-select--open .pocket-select__list {
  display: block;
}

.pocket-select__option {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 12px; /* 元: 8px → 20px（約2.5倍） */
  border-radius: 10px;
  cursor: pointer;
}

.pocket-select__option:hover,
.pocket-select__option[aria-selected="true"] {
  background: #f5f7fa;
}

/* キーボードフォーカス */
.pocket-select__option:focus {
  outline: 2px solid #6aa6ff;
  outline-offset: 2px;
}

/* スクロールUI */
.pocket-select__list::-webkit-scrollbar {
  width: 12px;
}
.pocket-select__list::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 8px;
}