/* ================= Before & after gallery: filter tabs + one panel per treatment ================= */

.bag-hero{padding-top:56px;padding-bottom:56px}
.bag-hero .lead{max-width:640px;margin:18px auto 0}
.bag-sec{padding-top:48px}

/* filter tabs */
.bag-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:40px}
.bag-tabs button{padding:10px 18px;border:1px solid var(--line);border-radius:99px;background:var(--surf);color:var(--head);font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bag-tabs button:hover{border-color:var(--acc)}
.bag-tabs button.on{background:var(--acc);border-color:var(--acc);color:#1A1715}

/* panels: two columns, one case visible at a time */
.bag-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bag-grid.solo{grid-template-columns:minmax(0,760px);justify-content:center}
.bag-panel{display:flex;flex-direction:column}
.bag-panel[hidden]{display:none}
.bag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.bag-head h3{margin:0}
.bag-head small{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;color:var(--muted,#888)}
.bag-nav{display:flex;gap:8px}
.bag-nav[hidden]{display:none}
.bag-nav button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surf);color:var(--head);font-size:18px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.bag-nav button:hover{border-color:var(--acc);color:var(--acc)}
.bag-track{position:relative;border-radius:18px;overflow:hidden;background:#141414;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.bag-case{display:none;margin:0;cursor:zoom-in}
.bag-case.on{display:block}
.bag-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:8/5}
.bag-pair span,.bag-one{position:relative;display:block;overflow:hidden}
.bag-one{aspect-ratio:8/5}
.bag-pair img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bag-one img{display:block;width:100%;height:100%;object-fit:contain}
.bag-pair b,.bag-one b{position:absolute;top:12px;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.bag-pair b{left:12px}
.bag-one b.l{left:12px}.bag-one b.r{right:12px}
/* Pari watermark (.wm), bottom-right of the after photo, only on results the service page marks; photos not done by Pari stay clean */
.wm .bag-pair span:last-child::after,.wm .bag-one::after{content:"";position:absolute;right:10px;bottom:8px;width:60px;height:60px;background:url(../img/pari-logo.webp) center/contain no-repeat;filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45));opacity:.75;pointer-events:none}
.bag-lb-in.wm .bag-pair span:last-child::after,.bag-lb-in.wm .bag-one::after{width:90px;height:90px;right:16px;bottom:12px}
.bag-case figcaption{padding:12px 16px;background:var(--surf);color:var(--head);font-size:14px;border-top:1px solid var(--line)}
.bag-link{align-self:flex-start;margin-top:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid currentColor;padding-bottom:2px;text-decoration:none}
.bag-note{margin-top:40px;text-align:center;font-size:13px;line-height:1.7;color:var(--muted,#888)}

/* lightbox */
.bag-lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(10,10,10,.92)}
.bag-lb[hidden]{display:none}
.bag-lb-in{width:min(1100px,100%);border-radius:14px;overflow:hidden}
.bag-lb-in figcaption{text-align:center}
.bag-x{position:absolute;top:14px;right:18px;border:0;background:none;color:#fff;font-size:40px;line-height:1;cursor:pointer}

@media(max-width:860px){.bag-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .bag-hero{padding-top:28px;padding-bottom:36px}
  .bag-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -20px 28px;padding:0 20px 4px;scrollbar-width:none}
  .bag-tabs::-webkit-scrollbar{display:none}
  .bag-tabs button{flex:none}
  .bag-pair{aspect-ratio:4/3}
  .bag-lb{padding:12px}
}