.pb-compare { margin:24px 0; }
.pb-compare__controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pb-compare__controls[hidden],.pb-compare figure[hidden] { display:none!important; }
.pb-compare__controls button { white-space:normal; min-height:44px; border:1px solid #d9b66d; border-radius:24px; padding:10px 18px; background:#211c15; color:#f5eedf; font:inherit; }
.pb-compare__controls button[aria-pressed=true] { background:#eac277; color:#211b11; }
.pb-compare__controls button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.pb-compare__images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pb-compare[data-view=before] .pb-compare__images,.pb-compare[data-view=after] .pb-compare__images { grid-template-columns:minmax(0,1fr); max-width:650px; margin:auto; }
.pb-compare figure { margin:0; min-width:0; background:#11100e; border:1px solid #6e5a3c; border-radius:16px; overflow:hidden; }
.pb-product-process .pb-compare figure img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:0; }
.pb-compare figcaption { padding:12px 16px; color:#f1d49e; font-weight:600; }
.pb-compare__note { font-size:13px; color:#d3cabc; }
.pb-preparation { box-sizing:border-box; width:calc(100% - 32px); max-width:1200px; margin:24px auto; padding:24px; border:1px solid #77603e; border-radius:18px; background:#211b15; color:#f6ecdb; }
.pb-preparation h2 { font-size:24px; margin:0 0 16px; }
.pb-preparation ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.pb-preparation li { display:grid; gap:4px; overflow-wrap:anywhere; }
.pb-preparation p { font-size:14px; line-height:1.6; margin:16px 0 0; }
@media(max-width:600px) { .pb-compare__images { grid-template-columns:1fr; } .pb-preparation { padding:20px 16px; } }