/* ============================================================================
   ジュース選択 演出パーツ  スタイル  ver.4.5
   juice-select-effect.js と対で使います。
   jbx- 接頭辞で、他のCSSと衝突しないようにしています。

   ※ 文字サイズはすべて 16px 以上にしています。
   ============================================================================ */

.jbx{
  /* 果実の色（JSが差し替え） */
  --jbx-c:#E8A85C;
  /* 配色 */
  --jbx-bg:#fffdf9;         /* 全体の背景 */
  --jbx-accent:#F39C12;     /* 見出し・バー・ボタンの色 */
  --jbx-on-accent:#4A3208;  /* 上の色を背景に敷いたときの文字色（読みやすさ確保） */
  --jbx-ink:#3B3A31;        /* 本文 */
  --jbx-ink2:#7C7768;       /* 補助の文字 */
  --jbx-line:#EFE7D6;       /* 罫線 */
  --jbx-card:#FFFFFF;       /* カード */
  box-sizing:border-box;
  margin:16px 0 20px;
  padding: 18px 12px 16px;
  border:1px solid var(--jbx-line);
  border-radius:10px;
  background:var(--jbx-bg);
  font-family:inherit;
  color:var(--jbx-ink);
  /* 画面幅ではなく、このパーツ自身の横幅でレイアウトを切り替えます */
  container-type:inline-size;
}
.jbx *{box-sizing:border-box;}

/* ---- 見出し ---- */
.jbx__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  margin-bottom:11px;
}
.jbx__title{
  font-size:18px;font-weight:700;line-height:1.4;letter-spacing:.04em;
  color:var(--jbx-accent);
}
.jbx__count{
  flex:none;font-size:16px;font-weight:700;letter-spacing:.04em;
  color:var(--jbx-accent);white-space:nowrap;
}

/* ---- 甘さのバー ---- */
.jbx__meter{margin-bottom:14px;}
.jbx__meterTrack{
  position:relative;height:8px;border-radius:999px;
  background:#F2EADA;
  overflow:hidden;
}
.jbx__meterFill{
  position:absolute;left:0;top:0;bottom:0;
  width:50%;
  border-radius:999px;
  background:var(--jbx-accent);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}
.jbx__meterScale{
  display:flex;justify-content:space-between;
  margin-top:6px;
  font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--jbx-accent);
}

/* ---- カードの並び ---- */
.jbx__tray{position:relative;}
.jbx__slots{
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:stretch;
}

/* ---- 1枚のカード ---- */
.jbx__slot{
  position:relative;
  flex:1 1 126px;max-width:172px;min-width:110px;
  padding:10px 6px 0;
  border-radius:12px;
  background:var(--jbx-card);
  border:1px solid var(--jbx-line);
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(120,100,60,.07);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.jbx__slot:hover{box-shadow:0 4px 10px rgba(120,100,60,.14);}
.jbx__slot:focus-visible{outline:2px solid var(--jbx-accent);outline-offset:2px;}

.jbx__no{
  font-size:16px;font-weight:700;line-height:1.2;
  color:var(--jbx-ink2);letter-spacing:.06em;
}

/* ---- 瓶 ---- */
.jbx__stage{
  position:relative;z-index:1;
  height:152px;margin-top:6px;
  display:flex;align-items:flex-end;justify-content:center;
}
.jbx__bottle{
  position:relative;
  width:64px;height:148px;
  transform-origin:50% 100%;
}
.jbx__bottle img{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
}
/* 画像が無い果実のときの代替表示 */
.jbx__bottle.is-noimg img{display:none;}
.jbx__bottle.is-noimg::after{
  content:"";position:absolute;left:50%;bottom:0;width:38px;height:124px;
  transform:translateX(-50%);
  border-radius:16px 16px 7px 7px;
  background:var(--jbx-c);
}

/* ---- 果実名 ---- */
.jbx__name{
  margin-top:6px;padding:8px 2px 11px;
  border-top:1px solid var(--jbx-line);
  font-size:16px;font-weight:700;line-height:1.4;
  color:var(--jbx-ink);letter-spacing:.01em;
  word-break:break-all;
}
/* 名前が長いものは字間だけ詰めます（文字サイズは16pxのまま） */
.jbx__name[data-len="l"]{letter-spacing:-.02em;}

/* ---- 味の説明ふきだし ---- */
.jbx__tip{
  position:absolute;z-index:30;
  left:50%;bottom:calc(100% - 6px);
  width:290px;max-width:88vw;
  transform:translateX(calc(-50% + var(--jbx-tipX,0px))) translateY(6px);
  padding:14px 16px 15px;
  border:2px solid var(--jbx-accent);
  border-radius:10px;
  background:#fff;
  text-align:left;
  box-shadow:0 8px 20px rgba(150,100,20,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.jbx__slot.is-tip .jbx__tip{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(calc(-50% + var(--jbx-tipX,0px))) translateY(0);
}
/* ふきだしの三角（外側が境界線、内側が白背景） */
.jbx__tip::before,
.jbx__tip::after{
  content:"";position:absolute;top:100%;
  left:calc(50% + var(--jbx-arrowX,0px));
  border-style:solid;border-color:transparent;
}
.jbx__tip::before{margin-left:-9px;border-width:9px;border-top-color:var(--jbx-accent);}
.jbx__tip::after{margin-left:-7px;border-width:7px;border-top-color:#fff;}
.jbx__tipName{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:700;color:var(--jbx-accent);line-height:1.35;
  margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px solid var(--jbx-line);
  letter-spacing:.04em;
}
/* 果実の絵（citrusフォルダの画像） */
.jbx__tipIcon{
  flex:none;width:34px;height:34px;
  object-fit:contain;object-position:50% 50%;
  filter:drop-shadow(0 1px 2px rgba(74,50,8,.25));
}
/* 絵が無い果実のときは、代わりに丸印を出します */
.jbx__tipName.is-noicon .jbx__tipIcon{display:none;}
.jbx__tipName.is-noicon::before{
  content:"";width:12px;height:12px;border-radius:50%;flex:none;
  background:var(--jbx-accent);box-shadow:0 0 0 1px rgba(74,50,8,.2);
}
.jbx__tipDesc{
  display:block;font-size:16px;line-height:1.7;color:var(--jbx-ink);font-weight:400;
}
.jbx__tipBtn{
  display:block;width:100%;margin-top:12px;
  padding:9px 10px;border-radius:6px;
  border:1px solid var(--jbx-accent);background:#fff;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--jbx-accent);
  letter-spacing:.04em;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.jbx .jbx__tipBtn:hover,
.jbx .jbx__tipBtn:focus-visible{background:var(--jbx-accent);color:#fff !important;}

/* ---- 差し替えアニメーション ---- */
.jbx__slot.is-pop .jbx__bottle{animation:jbxDrop .6s cubic-bezier(.18,.9,.3,1.3) both;}
.jbx__slot.is-pop .jbx__bottle img{animation:jbxFlash .55s ease-out both;}
.jbx__slot.is-pop .jbx__ring{animation:jbxRing .6s ease-out both;}
.jbx__slot.is-pop .jbx__sparks i{animation:jbxSpark .6s ease-out both;}
.jbx__slot.is-pop{border-color:var(--jbx-accent);box-shadow:0 0 0 2px var(--jbx-accent);}

@keyframes jbxDrop{
  0%  {transform:translateY(-32px) scaleX(.92) scaleY(1.08);opacity:.15;}
  55% {transform:translateY(0)     scaleX(1.09) scaleY(.92);opacity:1;}
  75% {transform:translateY(-5px)  scaleX(.98) scaleY(1.03);}
  100%{transform:translateY(0)     scaleX(1)   scaleY(1);}
}
@keyframes jbxFlash{
  0%  {filter:brightness(1.6) saturate(.8);}
  45% {filter:brightness(1.15) saturate(.95);}
  100%{filter:brightness(1) saturate(1);}
}

.jbx__ring{
  position:absolute;left:50%;bottom:-4px;z-index:1;
  width:56px;height:14px;
  transform:translateX(-50%) scale(.4);
  border-radius:50%;border:2px solid var(--jbx-c);
  opacity:0;pointer-events:none;
}
@keyframes jbxRing{
  0%  {opacity:.85;transform:translateX(-50%) scale(.35);}
  100%{opacity:0;  transform:translateX(-50%) scale(1.9);}
}

.jbx__sparks{position:absolute;left:50%;top:46%;z-index:4;width:0;height:0;pointer-events:none;}
.jbx__sparks i{
  position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#FFD98A;opacity:0;
}
.jbx__sparks i:nth-child(1){--jbx-tx:-32px;--jbx-ty:-28px;}
.jbx__sparks i:nth-child(2){--jbx-tx: 32px;--jbx-ty:-28px;}
.jbx__sparks i:nth-child(3){--jbx-tx:-40px;--jbx-ty:  2px;}
.jbx__sparks i:nth-child(4){--jbx-tx: 40px;--jbx-ty:  2px;}
.jbx__sparks i:nth-child(5){--jbx-tx:-22px;--jbx-ty: 28px;}
.jbx__sparks i:nth-child(6){--jbx-tx: 22px;--jbx-ty: 28px;}
.jbx__sparks i:nth-child(7){--jbx-tx:  0px;--jbx-ty:-40px;width:5px;height:5px;}
.jbx__sparks i:nth-child(8){--jbx-tx:  2px;--jbx-ty: 36px;width:5px;height:5px;}
@keyframes jbxSpark{
  0%  {opacity:0;transform:translate(0,0) scale(.3);}
  25% {opacity:1;}
  100%{opacity:0;transform:translate(var(--jbx-tx),var(--jbx-ty)) scale(1);}
}

/* ---- おすすめボタン ---- */
.jbx__actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;
}
.jbx__btn{
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;
  border:2px solid var(--jbx-accent);
  border-radius:999px;
  background:transparent;
  font-family:inherit;font-size:16px;font-weight:700;
  color:var(--jbx-accent);letter-spacing:.04em;
  cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.jbx .jbx__btn:not(:disabled):hover,
.jbx .jbx__btn:not(:disabled):focus-visible{
  background:var(--jbx-accent);
  color:#fff !important;
}
.jbx__btn:disabled{opacity:.45;cursor:default;}
.jbx__btn:disabled:hover{background:transparent;color:var(--jbx-accent);}
/* 「ランダムで変更」だけ塗りにして目立たせます */
.jbx .jbx__btn--random{background:var(--jbx-accent);color:#fff !important;}
.jbx .jbx__btn--random:not(:disabled):hover,
.jbx .jbx__btn--random:not(:disabled):focus-visible{
  background:#DE8C08;
  color:#fff !important;
}
.jbx .jbx__btn--random:disabled:hover{background:var(--jbx-accent);color:#fff !important;}

/* サイコロ風の小さな印（CSSだけで描いています） */
.jbx__diceIcon{
  position:relative;flex:none;width:16px;height:16px;
  border:2px solid currentColor;border-radius:4px;
}
.jbx__diceIcon::before,.jbx__diceIcon::after{
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;
}
.jbx__diceIcon::before{top:2px;left:2px;}
.jbx__diceIcon::after{bottom:2px;right:2px;}
.jbx__btn.is-spin .jbx__diceIcon{animation:jbxSpin .6s ease-in-out infinite;}
@keyframes jbxSpin{100%{transform:rotate(360deg);}}

/* ---- 一覧・お知らせ・案内文 ---- */
.jbx__summaryWrap{position:relative;min-height:28px;margin:14px 2px 0;}
.jbx__summary{
  font-size:16px;line-height:1.7;font-weight:700;color:var(--jbx-accent);
  text-align:center;word-break:break-all;letter-spacing:.04em;
  transition:opacity .2s ease;
}
.jbx__summaryWrap.is-toast .jbx__summary{opacity:0;}
.jbx__toast{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(5px);
  max-width:100%;
  padding:7px 18px;border-radius:999px;
  background:var(--jbx-accent);color:var(--jbx-on-accent);
  font-size:16px;font-weight:700;line-height:1.4;white-space:nowrap;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.jbx__summaryWrap.is-toast .jbx__toast{opacity:1;transform:translate(-50%,-50%) translateY(0);}
.jbx__hint{
  margin:9px 2px 0;
  font-size:12px;line-height:14px;color:var(--jbx-ink2);text-align:center;letter-spacing:.02em;
}

/* ---- 「伊藤農園のおすすめ（おまかせ）」モード ----
   カードは隠さず、上に細い帯でお知らせします。 */
.jbx__omakase{
  display:none;
  align-items:center;gap:6px 12px;flex-wrap:wrap;
  margin-bottom:11px;padding:10px 10px;
  background:#FFF6E7;
  border-left:5px solid var(--jbx-accent);
}
.jbx__omakaseTitle{
  font-size:17px;font-weight:700;letter-spacing:.08em;color:var(--jbx-accent);line-height:1.4;
  white-space:nowrap;
}
.jbx__omakaseNote{
  font-size:16px;line-height:1.6;color:var(--jbx-ink);letter-spacing:.02em;
}
.jbx__omakaseHint{
  width:100%;
  font-size:10px;line-height:14px;color:var(--jbx-ink2);letter-spacing:.02em;
}
.jbx.is-omakase .jbx__omakase{display:flex;}
/* おまかせ中は、選び直す操作だけを隠します（表示と味の説明はそのまま） */
.jbx.is-omakase .jbx__actions,
.jbx.is-omakase .jbx__tipBtn{display:none;}

/* ---- 選択欄側のハイライト ---- */
.fs-c-productSelection__field.jbx-focus{animation:jbxFieldFlash 1.4s ease-out;border-radius:6px;}
@keyframes jbxFieldFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(243,156,18,0);}
  15%    {box-shadow:0 0 0 4px rgba(243,156,18,.45);}
  70%    {box-shadow:0 0 0 4px rgba(243,156,18,.22);}
}

/* 「伊藤農園のおすすめ」中は個別の選択欄を操作不可にします。
   select自体の値はカート送信に必要なため、disabled属性は使いません。 */
.fs-c-productSelection__field.jbx-choice-locked{
  opacity:.55;
  cursor:not-allowed;
}
.fs-c-productSelection__field.jbx-choice-locked select{
  pointer-events:none;
  cursor:not-allowed;
}

/* 旧版JavaScriptのキャッシュが残った場合も、選択欄の色チップは表示しません */
.jbx-chip{display:none !important;}

/* ---- PCの商品右カラムなど、パーツ自体の横幅が狭い場合 ----
   本番では画面が広くても商品カラムが約288pxのため、
   画面幅ではなくパーツの内容幅を基準に3列へ切り替えます。 */
@container (max-width:320px){
  .jbx__slots{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .jbx__slot{flex:none;min-width:0;max-width:none;padding:8px 3px 0;}
  .jbx__stage{height:60px;}
  .jbx__bottle{width:52px;height:120px;}
  .jbx__name{padding:7px 1px 9px;}
  .jbx__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .jbx__btn{padding:10px 4px;white-space:normal;line-height:1.3;}
  .jbx__btn--random{grid-column:1 / -1;}
  .jbx__tip{width:262px;}
}

/* Container Queriesに未対応の古いブラウザ向けの本番レイアウト用フォールバック */
@supports not (container-type:inline-size){
  @media screen and (min-width:560px){
    .fs-l-productLayout__item--2 .jbx__slots{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:6px;
    }
    .fs-l-productLayout__item--2 .jbx__slot{
      flex:none;min-width:0;max-width:none;padding:8px 3px 0;
    }
    .fs-l-productLayout__item--2 .jbx__stage{height:124px;}
    .fs-l-productLayout__item--2 .jbx__bottle{width:52px;height:120px;}
    .fs-l-productLayout__item--2 .jbx__name{padding:7px 1px 9px;}
    .fs-l-productLayout__item--2 .jbx__actions{
      display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
    }
    .fs-l-productLayout__item--2 .jbx__btn{
      padding:10px 4px;white-space:normal;line-height:1.3;
    }
    .fs-l-productLayout__item--2 .jbx__btn--random{grid-column:1 / -1;}
    .fs-l-productLayout__item--2 .jbx__tip{width:262px;}
  }
}

/* ---- スマホ ---- */
@media screen and (max-width:559px){
  .jbx{padding:14px 12px 13px;}
  /* 文字が大きいぶん、スマホでは升目に並べて幅を均等にします
     （flexのままだと、最後の1枚だけ横に伸びてしまうため） */
  .jbx__slots{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
    gap:6px;
  }
  .jbx__slot{flex:none;min-width:0;max-width:none;padding:8px 3px 0;}
  .jbx__stage{height:124px;}
  .jbx__bottle{width:52px;height:120px;}
  .jbx__name{padding:7px 1px 9px;}
  .jbx__title{font-size:17px;}
  /* 「ランダムで変更」は1行、残り3つは均等な3列に並べます */
  .jbx__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .jbx__btn{padding:10px 4px;white-space:normal;line-height:1.3;}
  .jbx__btn--random{grid-column:1 / -1;}
  .jbx__tip{width:262px;}
}

/* ---- アニメーションを控えたい設定の端末 ---- */
@media (prefers-reduced-motion:reduce){
  .jbx__slot.is-pop .jbx__bottle,
  .jbx__slot.is-pop .jbx__bottle img,
  .jbx__slot.is-pop .jbx__ring,
  .jbx__slot.is-pop .jbx__sparks i{animation:none;}
  .jbx__tip,.jbx__meterFill{transition:none;}
  .fs-c-productSelection__field.jbx-focus{animation:none;box-shadow:0 0 0 3px rgba(243,156,18,.4);}
}