/* ========================================================= PDP OOS Styles (MYRO) 目的： - 在庫なし時は ATC を「欠品中」化（見た目はATC互換で色のみグレー） - variable の在庫なし時は数量を非表示 - Woo の在庫テキスト

を視覚上隠す - simple × 在庫切れでは form.cart を非表示（置きボタン運用） - BIS（入荷お知らせ）ボタンの表示/非表示は aria-hidden / hidden で制御 ========================================================= */ /* ---------- カラートークン（必要に応じてテーマ側トークンに置換可） ---------- */ :root { /* Brand Blue（基準色） */ --brand-blue: #1f4063; /* BIS：Brand Blue系の淡色トーン */ --bis-bg: #8FA6BF; /* Base (L*≈68) */ --bis-bg-hover: #7C98B3; /* Hover (L*≈62) */ --bis-bg-active: #6C88A3; /* Active */ --bis-text: #ffffff; /* Text（白） */ --bis-ring: rgba(31, 64, 99, .38); /* Focus ring */ /* モーダル用（濃色） */ --myro-brand-blue: #1f4063; --myro-brand-blue-hover: #18324b; } /* ========================================================= 1) 欠品中ボタン（ATCと同じ形で色のみグレー） ========================================================= */ .myro-oos-cart .single_add_to_cart_button.is-oos, .myro-oos-cart .single_add_to_cart_button:disabled, .single_add_to_cart_button.is-oos, .single_add_to_cart_button:disabled { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pdp-cta-h, 48px); padding: 0 16px; border-radius: var(--pdp-cta-r, 9999px); /* ATCと同じ角丸 */ font-size: 16px; font-weight: 600; line-height: 1; background: #d1d5db !important; /* gray-300 */ color: #fff !important; border: 1px solid transparent !important; cursor: not-allowed !important; opacity: 1 !important; box-shadow: none !important; text-decoration: none; /* 同列BISと並置時のレイアウト安定化 */ flex: 1 1 auto; width: auto; min-width: 0; } .single_add_to_cart_button.is-oos:hover, .single_add_to_cart_button:disabled:hover { transform: none !important; filter: none !important; } /* ========================================================= 2) Woo の在庫テキストは出さない（視覚上） ========================================================= */ html.myro-pdp-oos .product .stock, .single-product .product p.stock.out-of-stock, .single-product .product .stock.outofstock, .variations_form .stock.out-of-stock, .variations_form .stock.outofstock { display: none !important; } /* ========================================================= 3) variable 在庫切れ：数量は出さない ========================================================= */ form.cart.is-oos-mode .quantity, html.myro-pdp-oos form.cart .quantity { display: none !important; } /* ========================================================= 4) simple × 在庫切れ：form.cart を隠す（置きボタン運用） ========================================================= */ /* JS が にフラグを付与（pdp-oos.js） */ html.myro-simple-oos form.cart { display: none !important; } /* ========================================================= 5) 置きボタン行レイアウト（BIS / ハート） ========================================================= */ .myro-oos-cart { margin: 1rem 0; } .myro-oos-cart, .myro-oos-cart .myro-ctaRow { display: flex; align-items: center; gap: 12px; width: 100%; } /* 右側ハート（お気に入り）は固定サイズで縦揃え */ .myro-oos-cart .pdp-wishlist-btn, .myro-oos-cart .myro-wishlist-wrap, .myro-oos-cart .myro-wishlist-wrap > * { flex: 0 0 var(--pdp-cta-h, 48px); width: var(--pdp-cta-h, 48px); height: var(--pdp-cta-h, 48px); display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; line-height: 1; } /* ========================================================= 6) BIS（入荷お知らせ）ボタンの可視制御 ========================================================= */ .myro-bis-cta[hidden], .myro-bis-cta[aria-hidden="true"] { display: none !important; } /* 表示時は行高さ・並置に馴染ませる（テーマ側の見た目を壊さない最低限） */ .myro-bis-cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pdp-cta-h, 48px); padding: 0 16px; border-radius: var(--pdp-cta-r, 9999px); font-size: 16px; font-weight: 600; line-height: 1; /* 色は下段「BIS CTA デザイン」で定義 */ } /* ========================================================= 7) ガイドブロックのダブり保険（DOM上は1つに寄せる想定） ========================================================= */ .pdp-guides { margin-top: 12px; } /* ========================================================= 8) 低速環境/ユーザー設定配慮 ========================================================= */ @media (prefers-reduced-motion: reduce) { .single_add_to_cart_button { transition: none !important; } .myro-bis-cta { transition: none !important; } } /* ========================================================= 9) FOUC対策： 初期ロードで在庫切れテキストがある間は ATC/数量を隠す （JSが .myro-ready を に付けるまで有効） ========================================================= */ html:not(.myro-ready) .single-product .summary .stock.out-of-stock ~ #myro-cta .single_add_to_cart_button, html:not(.myro-ready) .single-product .summary .stock.outofstock ~ #myro-cta .single_add_to_cart_button, html:not(.myro-ready) .single-product .summary .stock.out-of-stock ~ #myro-cta .quantity, html:not(.myro-ready) .single-product .summary .stock.outofstock ~ #myro-cta .quantity { display: none !important; } /* ========================================================= 10) BIS CTA（入荷通知）の見た目 ③ Brand Blue系の淡色（統一感） 文字色=白 / フォントウェイト=ノーマル ========================================================= */ .myro-bis-cta { /* ATC互換の横長・丸ボタン */ padding: 0 20px; font-weight: 400; /* ノーマル */ background: var(--bis-bg); color: var(--bis-text); border: 1px solid transparent; text-decoration: none; cursor: pointer; /* ハートと並置しても崩れないよう自然に伸縮 */ flex: 1 1 auto; width: auto; min-width: 0; transition: transform .08s ease, filter .12s ease, background-color .12s ease, box-shadow .12s ease; box-shadow: 0 0 0 0 rgba(0,0,0,0); } .myro-bis-cta:hover { background: var(--bis-bg-hover); } .myro-bis-cta:active { background: var(--bis-bg-active); transform: translateY(0.5px); } .myro-bis-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bis-ring); } /* テーマ側 .button が強い場合の上書き保険 */ .myro-bis-cta.button { background: var(--bis-bg) !important; color: var(--bis-text) !important; border-color: transparent !important; font-weight: 400 !important; /* ノーマル */ } .myro-bis-cta.button:hover { background: var(--bis-bg-hover) !important; } .myro-bis-cta.button:active { background: var(--bis-bg-active) !important; } /* ========================================================= 11) BIS Modal：submit/cancel の角丸・高さ・色をCTAと統一 ========================================================= */ .myro-bis-modal .myro-bis-submit, .myro-bis-modal button[type="submit"], .myro-bis-sheet .myro-bis-submit { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pdp-cta-h, 48px) !important; padding: 0 16px !important; border-radius: var(--pdp-cta-r, 9999px) !important; /* CTAと完全統一 */ background: var(--myro-brand-blue) !important; color: #fff !important; font-weight: 400 !important; /* Normal */ line-height: 1 !important; border: 1px solid transparent !important; box-shadow: none !important; } .myro-bis-modal .myro-bis-submit:hover, .myro-bis-modal button[type="submit"]:hover, .myro-bis-sheet .myro-bis-submit:hover { background: var(--myro-brand-blue-hover) !important; transform: none !important; filter: none !important; } /* キャンセル側も角丸・高さのみ合わせる（色はデフォルトのまま） */ .myro-bis-modal .myro-bis-cancel, .myro-bis-modal .button[data-action="cancel"] { border-radius: var(--pdp-cta-r, 9999px) !important; min-height: var(--pdp-cta-h, 48px) !important; line-height: 1 !important; }