/* The PDP Handbook · wireframe kit styles. Clean grey + one accent. */
.wf{--wf-bg:#F4F2EE;--wf-card:#fff;--wf-line:#DAD6CF;--wf-bar:#D8D4CC;--wf-ink:#2A2724;--wf-mute:#8C867D;--wf-acc:#FF7A59;--wf-acc-soft:#FFE8E0;
  background:var(--wf-bg);color:var(--wf-ink);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:5px;
  font:500 11px/1.35 'Inter',system-ui,sans-serif;text-align:left;width:100%;max-width:300px;box-sizing:border-box}
.wf *{box-sizing:border-box}
.wf.wide{max-width:640px}
.wf-ln{display:block;height:7px;border-radius:4px;background:var(--wf-bar)}
.wf-t{display:block}.wf-t.b{font-weight:700}.wf-t.mute{color:var(--wf-mute);font-weight:500}.wf-t.u{text-decoration:underline;color:var(--wf-mute)}.wf-t.acc{color:var(--wf-acc)}
.wf-h{display:block;font:800 14px/1.15 'Inter',sans-serif;letter-spacing:-.01em}
.wf-img{position:relative;border-radius:10px;background:#E4E1DB linear-gradient(to top right,transparent calc(50% - .6px),#CFCAC1 50%,transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),#CFCAC1 50%,transparent calc(50% + .6px));display:grid;place-items:center}
.wf-img span{background:var(--wf-bg);padding:2px 6px;border-radius:4px;color:var(--wf-mute);font-size:9.5px}
.wf-btn{height:32px;border-radius:999px;background:var(--wf-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px}
.wf-btn.acc{background:var(--wf-acc)}.wf-btn.ghost{background:transparent;color:var(--wf-ink);box-shadow:inset 0 0 0 1.5px var(--wf-ink)}
.wf-radio{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--wf-mute);flex:none;display:block}
.wf-radio.on{border-color:var(--wf-ink);background:radial-gradient(circle,var(--wf-ink) 0 3px,transparent 3.5px)}
.wf-radio.on.acc,.wf-card.acc .wf-radio.on{border-color:var(--wf-acc);background:radial-gradient(circle,var(--wf-acc) 0 3px,transparent 3.5px)}
.wf-badge{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--wf-ink);color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.wf-badge.acc{background:var(--wf-acc)}
.wf-stars{color:#BDB7AD;letter-spacing:1px;font-size:11px}.wf-stars.acc{color:var(--wf-acc)}
.wf-chk{display:flex;gap:6px;align-items:center}.wf-chk i{font-style:normal;width:13px;height:13px;border-radius:50%;background:var(--wf-ink);color:#fff;font-size:8px;display:grid;place-items:center;flex:none}
.wf-chk.acc i,.wf-card.acc .wf-chk i{background:var(--wf-acc)}
.wf-av{width:22px;height:22px;border-radius:50%;background:#CFCAC1;color:#fff;font-style:normal;font-weight:700;font-size:10px;display:grid;place-items:center;border:2px solid #fff}
.wf-av.acc{background:var(--wf-acc)}
.wf-avs{display:flex}.wf-avs .wf-av+.wf-av{margin-left:-7px}
.wf-chip{display:inline-block;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--wf-line);background:#fff;font-size:10px}
.wf-chip.on{box-shadow:inset 0 0 0 1.5px var(--wf-ink)}.wf-chip.acc{box-shadow:inset 0 0 0 1.5px var(--wf-acc);color:var(--wf-acc)}
.wf-price{font-weight:800;white-space:nowrap}.wf-price s{color:var(--wf-mute);font-weight:500}.wf-price.r{margin-left:auto}
.wf-row{display:flex;align-items:center;gap:7px}.wf-row.sp{justify-content:space-between}
.wf-col{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.wf-col.end{align-items:flex-end;flex:none}
.wf-card{background:var(--wf-card);border-radius:10px;padding:10px;box-shadow:inset 0 0 0 1px var(--wf-line);display:flex;flex-direction:column;gap:3px}
.wf-card.tight{padding:8px 10px}.wf-card.acc{box-shadow:inset 0 0 0 2px var(--wf-acc);background:#FFFBF9}.wf-card.rel{position:relative}
.wf-gap{display:block}
.wf-ctx{opacity:.38;display:flex;flex-direction:column;gap:4px}
.wf-seg{display:grid;grid-template-columns:1fr 1fr;background:#E7E3DC;border-radius:999px;padding:3px}
.wf-seg span{text-align:center;padding:5px;border-radius:999px;font-weight:700;color:var(--wf-mute)}
.wf-seg span.on{background:#fff;color:var(--wf-ink)}.wf-seg span.on.acc{box-shadow:inset 0 0 0 1.5px var(--wf-acc);color:var(--wf-acc)}
.wf-tab{position:absolute;right:10px;bottom:-8px;background:var(--wf-ink);color:#fff;font-size:8px;font-weight:800;letter-spacing:.12em;padding:2px 7px;border-radius:999px}
.wf-hl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:8px;background:var(--wf-acc-soft);box-shadow:inset 0 0 0 1.5px var(--wf-acc)}
.wf-q{font-weight:700;font-style:italic;font-size:12px}
.wf-accd{background:#fff;border-radius:9px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--wf-line)}
.wf-accd.acc{box-shadow:inset 0 0 0 2px var(--wf-acc)}.wf-plus{font-weight:700;color:var(--wf-mute)}.wf-accb{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.wf-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.wf-ladder div{background:var(--wf-acc-soft);border-radius:8px;padding:6px;text-align:center;display:flex;flex-direction:column;gap:1px}.wf-ladder i{font-style:normal}
.wf-receipt{border:1.5px dashed var(--wf-acc);border-radius:8px;padding:7px 8px;display:flex;flex-direction:column;gap:3px;font-family:ui-monospace,Menlo,monospace;font-size:10px}
.wf-receipt hr{border:0;border-top:1px dashed var(--wf-line);margin:3px 0}
.wf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.wf-steps div{border-radius:8px;padding:6px;box-shadow:inset 0 0 0 1px var(--wf-line);display:flex;flex-direction:column}
.wf-steps div.on{box-shadow:inset 0 0 0 2px var(--wf-acc);background:var(--wf-acc-soft)}
.wf-timeline{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--wf-acc);background:#FFFBF9}
.wf-timeline div{display:grid;grid-template-columns:12px auto 1fr;gap:6px;align-items:center}.wf-timeline i{width:9px;height:9px;border-radius:50%;background:var(--wf-acc)}
.wf-note{font-size:9.5px;color:var(--wf-mute)}
.wf.missing{min-height:120px;display:grid;place-items:center;color:var(--wf-mute)}

.wf-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.wf-tiers>div{position:relative;background:#fff;border-radius:9px;padding:14px 6px 8px;box-shadow:inset 0 0 0 1px var(--wf-line);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.wf-tiers>div.on{box-shadow:inset 0 0 0 2px var(--wf-acc);background:#FFFBF9}.wf-tiers.sm>div{padding:7px 4px}
.wf-tiers .wf-img{width:100%}
.wf-tabtop{position:absolute;top:-7px;left:50%;transform:translateX(-50%);background:var(--wf-ink);color:#fff;font-size:7.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;white-space:nowrap}.wf-tabtop.acc{background:var(--wf-acc)}
.wf-pill{font-size:9px;padding:1px 6px;border-radius:999px;background:#EEE;color:var(--wf-mute)}.wf-pill.acc{background:var(--wf-acc-soft);color:var(--wf-acc);font-weight:700}
.wf-hl-in{margin-left:auto;padding:2px 6px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--wf-acc)}
.wf-big{margin-left:auto;font:800 18px/1 'Inter',sans-serif;white-space:nowrap}.wf-big small{font-size:9px;font-weight:600;color:var(--wf-mute)}.wf-big.acc{color:var(--wf-acc)}
.wf-bar{display:block;height:6px;border-radius:4px;background:var(--wf-bar)}.wf-bar.acc{background:var(--wf-acc)}
.wf-adds{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.wf-adds>div{position:relative;background:#fff;border-radius:8px;padding:5px;box-shadow:inset 0 0 0 1px var(--wf-line);display:flex;flex-direction:column;gap:2px;text-align:center}
.wf-adds>div.on{box-shadow:inset 0 0 0 2px var(--wf-acc)}.wf-adds i{position:absolute;top:3px;right:4px;font-style:normal;font-size:9px;font-weight:800;color:var(--wf-acc)}
.wf-progress{height:6px;border-radius:4px;background:#E7E3DC;overflow:hidden;margin-top:4px}.wf-progress i{display:block;height:100%;background:var(--wf-acc)}
.wf-stepper{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--wf-acc);font-weight:700}.wf-stepper b{color:var(--wf-acc)}
.wf-sticky{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 -6px 14px rgba(0,0,0,.08),inset 0 0 0 2px var(--wf-acc)}.wf-sticky .wf-img{width:30px;flex:none}.wf-sticky .wf-btn{padding:0 12px;flex:none}
.wf-seal{width:30px;height:30px;border-radius:50%;background:var(--wf-acc);color:#fff;font-style:normal;font-weight:800;display:grid;place-items:center;flex:none}
.wf-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--wf-acc);background:#FFFBF9}.wf-icons>div{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:9.5px}.wf-icons i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--wf-acc)}
.wf-tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;font-size:10px}.wf-tbl th,.wf-tbl td{padding:6px;border-bottom:1px solid var(--wf-line);text-align:center}.wf-tbl td:first-child{text-align:left}
.wf-tbl th{font-weight:800;color:var(--wf-mute)}.wf-tbl .acc{background:var(--wf-acc-soft);color:var(--wf-ink);font-weight:700}.wf-tbl th.acc{color:var(--wf-acc)}
.wf-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wf-two>div{background:#fff;border-radius:10px;padding:9px;box-shadow:inset 0 0 0 1px var(--wf-line);display:flex;flex-direction:column;gap:4px}.wf-two>div.acc{box-shadow:inset 0 0 0 2px var(--wf-acc)}
.wf-gift{font-style:normal;font-size:20px}
.wf-announce{padding:7px 10px;border-radius:8px;background:var(--wf-acc);color:#fff;text-align:center;font-size:10px}.wf-announce b{font-family:ui-monospace,Menlo,monospace}
.wf-gcards{display:grid;grid-template-columns:1fr 1fr;gap:6px}.wf-gcards>div{background:var(--wf-acc-soft);border-radius:9px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 0 0 1.5px var(--wf-acc)}
.wf-thumbs{display:flex;gap:5px}.wf-thumbs i{flex:1;height:30px;border-radius:6px;background:#E4E1DB}.wf-thumbs i.on{box-shadow:inset 0 0 0 2px var(--wf-acc)}
.wf-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--wf-acc)}
.wf-overlay{position:relative}.wf-dots{position:absolute;left:10px;bottom:10px;display:flex;gap:5px}.wf-dots i{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}.wf-dots i.on{box-shadow:0 0 0 2px var(--wf-acc)}
.wf-chips{display:flex;flex-wrap:wrap;gap:5px}
.wf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--wf-line)}.wf-tabs span{padding:5px 8px;font-weight:700;color:var(--wf-mute)}.wf-tabs span.on{color:var(--wf-acc);box-shadow:inset 0 -2px 0 var(--wf-acc)}
.wf-expert{align-items:center;text-align:center}
/* blueprints */
.wf-stack{display:flex;flex-direction:column;gap:0;max-width:320px;background:#F4F2EE;border-radius:24px;padding:10px;box-shadow:inset 0 0 0 1px #DAD6CF}
.wf-stack .wf{max-width:none;border-radius:12px;background:transparent;padding:10px}
.wf-stack .wf-blk{position:relative;border-top:1px dashed #D5D0C7}.wf-stack .wf-blk:first-child{border-top:0}
.wf-blab{position:absolute;right:8px;top:6px;z-index:2;font:700 8.5px ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#2A2724;padding:2px 6px;border-radius:999px}
.wf-stack .wf-ctx{display:none}

.wf-x{font-style:normal;font-weight:800;color:#C2412D;width:13px;text-align:center}