/* ウィッグ検索（inc/wig-finder.php）— すべて .dnc-wf- 接頭辞。既存テーマの要素セレクタ（a:link 等）に負けないよう詳細度を調整 */
.dnc-wf{
  --dnc-wf-yellow:#f7ee13;
  --dnc-wf-teal:#00d0bf;        /* Figma 指定 */
  --dnc-wf-ink:#333333;         /* Figma 指定 */
  --dnc-wf-fab-ink:#333333;
  --dnc-wf-text:#333333;
  --dnc-wf-line:#cccccc;
  --dnc-wf-red:#c30e23;         /* 既存: ログイン・カートボタン */
  --dnc-wf-tint:#f2fbfa;
  --dnc-wf-grad:linear-gradient(135deg,var(--dnc-wf-yellow) 25.481%,var(--dnc-wf-teal) 88.462%);
  --dnc-wf-chip-shadow:0 0 8px rgba(0,0,0,.1);
  --dnc-wf-z-fab:800;
  --dnc-wf-z-modal:2500;        /* 既存トップポップアップ（3000）より下 */
  --dnc-wf-safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:"Noto Sans JP","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,sans-serif;
}

/* テーマの section{float:left;width:100%;margin-bottom:40px}（css/content.css）を、この部品の中だけ打ち消す */
.dnc-wf section{float:none;width:auto;margin-bottom:0}

/* ---------- フローティングボタン ---------- */
.dnc-wf-fab{
  position:fixed;right:20px;bottom:calc(20px + var(--dnc-wf-safe-bottom));z-index:var(--dnc-wf-z-fab);
  display:inline-flex;align-items:center;gap:10px;padding:32px;
  border:0;border-radius:80px;cursor:pointer;
  background:linear-gradient(154.58deg,#f7ee13 25.481%,#00d0bf 88.462%);
  box-shadow:0 0 8px rgba(0,0,0,.15);
  font-family:inherit;font-size:12px;font-weight:bold;line-height:normal;color:var(--dnc-wf-fab-ink);
  opacity:0;transform:translateY(120%);pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
.dnc-wf-fab__icon{display:block;flex:none;width:32px;height:32px}
.dnc-wf-fab__label{white-space:nowrap}

/* 登場（1回だけ）：下から「ひょいっ」。出た後に動き続けない */
.dnc-wf-fab.is-in{opacity:1;transform:translateY(0);pointer-events:auto;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease-out}
.dnc-wf-fab.is-in.is-settled{transition:transform .2s ease,opacity .2s ease}
.dnc-wf-fab.is-in.is-settled:hover{transform:translateY(-3px)}
.dnc-wf-fab.is-in.is-settled:active{transform:translateY(0) scale(.98)}
.dnc-wf-fab:focus-visible{outline:3px solid var(--dnc-wf-ink);outline-offset:3px}
.dnc-wf-fab.is-covered{opacity:0;pointer-events:none;transition:opacity .15s ease}
@media (max-width:768px){
  .dnc-wf-fab{right:14px;padding:20px 24px}
}
@media (prefers-reduced-motion:reduce){
  .dnc-wf-fab{transform:none}
  .dnc-wf-fab.is-in{transition:opacity .3s ease-out}
  .dnc-wf-fab.is-in.is-settled:hover,.dnc-wf-fab.is-in.is-settled:active{transform:none}
}

/* ---------- モーダル ---------- */
html.dnc-wf-is-locked{overflow:hidden}
.dnc-wf-modal{position:fixed;inset:0;z-index:var(--dnc-wf-z-modal)}
.dnc-wf-modal[hidden]{display:none}
.dnc-wf-modal__backdrop{position:absolute;inset:0;background:rgba(20,10,40,.45);opacity:0}
.dnc-wf-modal__panel{
  position:absolute;right:20px;bottom:20px;display:flex;flex-direction:column;
  width:min(890px,calc(100vw - 40px));height:min(800px,calc(100vh - 40px));
  background:#fff;color:var(--dnc-wf-text);border-radius:8px;overflow:hidden;
  box-shadow:0 14px 48px rgba(20,10,40,.35);
  transform:scale(.35);opacity:0;transform-origin:var(--dnc-wf-ox,calc(100% - 50px)) var(--dnc-wf-oy,calc(100% - 46px));
  outline:none;
}
.dnc-wf-modal--center .dnc-wf-modal__panel{
  inset:0;margin:auto;width:min(980px,calc(100vw - 80px));height:min(86vh,840px)}
.dnc-wf-modal.is-open .dnc-wf-modal__backdrop{opacity:1;transition:opacity .25s ease}
.dnc-wf-modal.is-open .dnc-wf-modal__panel{transform:none;opacity:1;
  transition:transform .4s cubic-bezier(.2,.9,.25,1),opacity .2s ease-out}
.dnc-wf-modal.is-closing .dnc-wf-modal__backdrop{opacity:0;transition:opacity .22s ease}
.dnc-wf-modal.is-closing .dnc-wf-modal__panel{transition:transform .26s ease-in,opacity .22s ease-in}
@media (max-width:768px){
  .dnc-wf-modal__panel,.dnc-wf-modal--center .dnc-wf-modal__panel{
    inset:0;margin:0;width:100%;height:100%;height:100dvh;border-radius:0;
    transform:translateY(100%);opacity:1;transform-origin:50% 100%}
  .dnc-wf-modal.is-open .dnc-wf-modal__panel{transform:none}
  .dnc-wf-modal.is-closing .dnc-wf-modal__panel{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){
  .dnc-wf-modal__panel,.dnc-wf-modal--center .dnc-wf-modal__panel{transform:none;opacity:0}
  .dnc-wf-modal.is-open .dnc-wf-modal__panel{transition:opacity .2s ease-out;opacity:1}
  .dnc-wf-modal.is-closing .dnc-wf-modal__panel{transition:opacity .15s ease-in;opacity:0;transform:none}
}

.dnc-wf-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:32px;border-bottom:1px solid var(--dnc-wf-line);flex:none}
.dnc-wf-modal__title{margin:0;font-size:32px;line-height:normal;font-weight:bold;color:var(--dnc-wf-ink);letter-spacing:0}
.dnc-wf-modal__title::after{content:"";display:block;width:64px;height:4px;margin-top:8px;background:linear-gradient(176.42deg,var(--dnc-wf-yellow) 25.481%,var(--dnc-wf-teal) 88.462%)}
.dnc-wf-modal__lead{margin:16px 0 0;font-size:16px;line-height:normal;letter-spacing:0;color:var(--dnc-wf-text)}
.dnc-wf-modal__close{position:relative;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--dnc-wf-line);border-radius:8px;background:#fff;cursor:pointer}
.dnc-wf-modal__close::before,.dnc-wf-modal__close::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:2px;background:var(--dnc-wf-ink)}
.dnc-wf-modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.dnc-wf-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dnc-wf-modal__close:hover{background:var(--dnc-wf-tint)}
.dnc-wf-modal__close:focus-visible,.dnc-wf-chip:focus-visible,.dnc-wf .dnc-wf-card:focus-visible{outline:3px solid var(--dnc-wf-ink);outline-offset:2px}
.dnc-wf-modal__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:32px 32px 32px}

/* ---------- トップのセクション ---------- */
.dnc-wf-top{clear:both;width:100%;max-width:1000px;margin:0 auto 24px}   /* 親 section の margin-bottom:40px と合わせて、.ranking と同じ 64px */
.dnc-wf-top__lead{margin:0 0 24px;text-align:center;font-size:16px;line-height:normal;letter-spacing:0;color:var(--dnc-wf-text)}
/* トップでは選択肢・見出しを中央寄せ、結果は 3 列 */
.dnc-wf-top .dnc-wf-choices{justify-content:center}
.dnc-wf-top .dnc-wf-step__title{flex-direction:column;gap:8px}

/* ---------- STEP / 選択肢 ---------- */
.dnc-wf-step{margin-top:32px}
.dnc-wf-step:first-child{margin-top:0}
.dnc-wf-step__title{display:flex;align-items:center;gap:19px;margin:0 0 16px;font-size:16px;line-height:normal;letter-spacing:0;font-weight:bold;color:var(--dnc-wf-ink)}
.dnc-wf-step__num{display:inline-block;padding:8px 16px;border-radius:8px;background:linear-gradient(155.43deg,var(--dnc-wf-yellow) 25.481%,var(--dnc-wf-teal) 88.462%);font-size:12px;line-height:normal;letter-spacing:0;color:var(--dnc-wf-ink)}
.dnc-wf-choices{display:flex;flex-wrap:wrap;gap:16px}
.dnc-wf-choices--levels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
.dnc-wf-choices--levels .dnc-wf-chip{gap:16px;border-radius:8px}
.dnc-wf-chip{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 16px;text-align:center;font-family:inherit;font-size:16px;line-height:normal;letter-spacing:0;
  color:var(--dnc-wf-ink);cursor:pointer;border:2px solid transparent;border-radius:8px;
  background:#fff;box-shadow:var(--dnc-wf-chip-shadow);
  transition:box-shadow .2s ease;
}
.dnc-wf-chip:hover{box-shadow:0 0 12px rgba(0,0,0,.2)}
.dnc-wf-chip__name{font-weight:bold}
.dnc-wf-chip__sub{display:inline-block}
.dnc-wf-chip__desc{font-size:12px;font-weight:normal;color:var(--dnc-wf-text)}
.dnc-wf-chip__perm{display:inline-block;padding:0 7px;border:1px solid currentColor;border-radius:8px;font-size:11px;font-weight:bold;line-height:1.7}
.dnc-wf-chip__perm--ng{color:var(--dnc-wf-red)}
.dnc-wf-chip__perm--ok{color:#2c5a96}
/* 選択中：グラデの縁取り＋薄い地（Figma に選択状態の指定なし。トンマナから補った） */
.dnc-wf-chip.is-selected{
  background:linear-gradient(var(--dnc-wf-tint),var(--dnc-wf-tint)) padding-box,var(--dnc-wf-grad) border-box}
@media (max-width:768px){
  .dnc-wf-choices,.dnc-wf-choices--levels,.dnc-wf-top .dnc-wf-choices{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .dnc-wf-chip{font-size:14px}
  .dnc-wf-top{box-sizing:border-box;padding:0 16px}   /* 左右の余白 */
  .dnc-wf-top__lead{font-size:14px}
  .dnc-wf-modal__body{padding:24px 20px 36px}
  .dnc-wf-modal__head{padding:24px 20px;gap:8px}
  .dnc-wf-modal__title{font-size:24px}
  .dnc-wf-modal__lead{font-size:14px}
}

/* ---------- 結果 ---------- */
.dnc-wf-results{margin-top:32px;scroll-margin-top:8px}
.dnc-wf-results.is-ready{padding:32px;border-radius:8px;background:var(--dnc-wf-tint)}   /* 結果が出たら薄い地の上にカードを載せて目立たせる */
.dnc-wf-results__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.dnc-wf-results__title{margin:0;font-size:24px;line-height:normal;letter-spacing:0;font-weight:bold;color:var(--dnc-wf-ink)}
.dnc-wf-results__cond{margin:0;font-size:16px;font-weight:bold;line-height:normal;letter-spacing:0;color:var(--dnc-wf-ink)}
.dnc-wf-results__change{display:none;font-family:inherit;font-size:12.5px;color:var(--dnc-wf-ink);background:#fff;border:0;border-radius:8px;box-shadow:var(--dnc-wf-chip-shadow);padding:0 16px;height:40px;cursor:pointer}
.dnc-wf-results__hint{margin:16px 0 0;padding:16px;border:1px dashed var(--dnc-wf-line);border-radius:8px;text-align:center;font-size:13px;color:var(--dnc-wf-text)}
.dnc-wf-group{margin-top:32px}
.dnc-wf-group__title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:20px;line-height:normal;letter-spacing:0;font-weight:bold;color:var(--dnc-wf-ink)}
.dnc-wf-group__title::before{content:"";width:4px;height:24px;border-radius:2px;background:var(--dnc-wf-grad)}
.dnc-wf-group__count{font-size:14px;font-weight:bold;color:var(--dnc-wf-ink)}
.dnc-wf-group__count--zero{color:var(--dnc-wf-red)}
.dnc-wf-group__desc{margin:0 0 16px;font-size:14px;line-height:1.6;letter-spacing:0;color:var(--dnc-wf-text)}
.dnc-wf-list{display:grid;gap:16px;grid-template-columns:1fr}
.dnc-wf-modal--center .dnc-wf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.dnc-wf-top .dnc-wf-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.dnc-wf-empty{margin:0;padding:16px;border-radius:8px;background:#fff;font-size:14px;font-weight:bold;color:var(--dnc-wf-red)}

/* 商品カード（左に写真、右に品番・価格・在庫。カード全体がリンク） */
.dnc-wf-card{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:16px;background:#fff;border-radius:8px;box-shadow:var(--dnc-wf-chip-shadow);transition:box-shadow .2s ease}
.dnc-wf-card__photo{display:block;width:84px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#f4f4f4}
.dnc-wf-card__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dnc-wf-card.is-soldout .dnc-wf-card__img{opacity:.55}
.dnc-wf-card__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dnc-wf-card__code{margin:0;font-size:15px;line-height:1.4;font-weight:bold;color:var(--dnc-wf-ink);letter-spacing:.03em;word-break:break-all}
.dnc-wf-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;line-height:1.4}
.dnc-wf-price__regular{font-size:13px;color:#6b6b6b}
.dnc-wf-price__regular.is-struck{text-decoration:line-through}
.dnc-wf-price__now{font-size:17px;font-weight:bold;color:var(--dnc-wf-ink)}
.dnc-wf-price__sale{font-size:19px;font-weight:bold;color:var(--dnc-wf-red)}
.dnc-wf-price__tax{font-size:11px;color:#6b6b6b}
.dnc-wf-price__rate{display:inline-block;padding:0 7px;border:1px solid var(--dnc-wf-red);border-radius:8px;font-size:11px;font-weight:bold;line-height:1.6;color:var(--dnc-wf-red)}
.dnc-wf-stock{display:inline-block;padding:0 9px;border-radius:8px;font-size:11.5px;font-weight:bold;line-height:1.8}
.dnc-wf-stock--in{background:#e8f5ec;color:#1b5e35}
.dnc-wf-stock--few{background:#fff1dc;color:#7a3e00}
.dnc-wf-stock--out{background:#ececec;color:#555}
/* テーマの a:link / a:visited / a:hover（詳細度 0,1,1）に勝つため .dnc-wf を前置（モーダルもトップのセクションも .dnc-wf の中） */
.dnc-wf .dnc-wf-card:link,.dnc-wf .dnc-wf-card:visited{color:var(--dnc-wf-ink);text-decoration:none;opacity:1}
.dnc-wf .dnc-wf-card:hover{box-shadow:0 0 12px rgba(0,0,0,.2);color:var(--dnc-wf-ink);opacity:1}
.dnc-wf a:hover img{box-shadow:none}
@media (max-width:768px){
  .dnc-wf-results.is-ready{padding:16px;border-radius:8px}
  .dnc-wf-results__title{font-size:20px}
  .dnc-wf-results__change{display:inline-block}
  .dnc-wf-modal--center .dnc-wf-list,.dnc-wf-top .dnc-wf-list{grid-template-columns:1fr}
}
.dnc-wf-modal__foot{margin:22px 0 0;font-size:11.5px;color:#6b6b6b}