.bag-gallery{--bag-accent:#f5a623;--bag-radius:12px;--bag-gap:22px;margin:1.5em 0;box-sizing:border-box}
.bag-gallery *,.bag-lightbox *{box-sizing:border-box}

/* Filters */
.bag-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.bag-filter-btn{border:1px solid rgba(0,0,0,.18);background:#fff;color:#222;padding:9px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;line-height:1;transition:background .2s,border-color .2s}
.bag-filter-btn:hover{border-color:var(--bag-accent)}
.bag-filter-btn[aria-pressed="true"]{background:var(--bag-accent);border-color:var(--bag-accent);color:#111}

/* Grid */
.bag-grid{display:grid;gap:var(--bag-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.bag-cols-1 .bag-grid{grid-template-columns:minmax(0,1fr)}
.bag-cols-2 .bag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bag-cols-3 .bag-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.bag-cols-4 .bag-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bag-cols-5 .bag-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.bag-cols-6 .bag-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1000px){
	.bag-cols-4 .bag-grid,.bag-cols-5 .bag-grid,.bag-cols-6 .bag-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
	.bag-cols-3 .bag-grid,.bag-cols-4 .bag-grid,.bag-cols-5 .bag-grid,.bag-cols-6 .bag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px){
	.bag-gallery .bag-grid{grid-template-columns:minmax(0,1fr)}
}

/* Card */
.bag-item{margin:0;background:#fff;border-radius:var(--bag-radius);box-shadow:0 2px 14px rgba(0,0,0,.09);overflow:hidden}
.bag-item[hidden]{display:none}
.bag-caption{padding:14px 16px 16px}
.bag-title{margin:0;font-size:1.05rem;line-height:1.3}
.bag-text{margin:6px 0 0;font-size:.92rem;line-height:1.5;color:#555}

/* Compare slider */
.bag-compare{--pos:50%;position:relative;overflow:hidden;aspect-ratio:var(--bag-ratio,4/3);background:#e9e9e9;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.bag-compare img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;display:block;pointer-events:none}
.bag-compare .bag-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}

.bag-label{position:absolute;top:10px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1;text-transform:uppercase;pointer-events:none}
.bag-label-before{left:10px}
.bag-label-after{right:10px}

.bag-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);outline:none}
.bag-handle::after{content:"\25C0\00a0\25B6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:#333;font-size:10px;line-height:42px;text-align:center;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s}
.bag-compare.is-dragging .bag-handle::after{transform:translate(-50%,-50%) scale(1.12)}
.bag-handle:focus-visible::after{outline:3px solid var(--bag-accent);outline-offset:2px}

.bag-zoom{position:absolute;right:10px;bottom:10px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.9}
.bag-zoom:hover,.bag-zoom:focus-visible{background:var(--bag-accent);color:#111;opacity:1}

/* Lightbox */
html.bag-lb-open{overflow:hidden}
.bag-lightbox{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:56px 16px 24px}
.bag-lightbox[hidden]{display:none}
.bag-lb-stage{display:flex;justify-content:center;width:100%}
.bag-lb-stage .bag-compare{max-width:100%;border-radius:8px}
.bag-lb-caption{color:#fff;text-align:center;margin-top:14px;max-width:760px}
.bag-lb-caption strong{display:block;font-size:1.1rem}
.bag-lb-caption span{display:block;margin-top:4px;font-size:.92rem;opacity:.8}
.bag-lb-btn{position:absolute;border:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bag-lb-btn:hover,.bag-lb-btn:focus-visible{background:#fff;color:#111}
.bag-lb-close{top:12px;right:12px}
.bag-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.bag-lb-next{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.bag-lb-prev,.bag-lb-next{top:auto;bottom:12px;transform:none}}

@media (prefers-reduced-motion:reduce){.bag-handle::after,.bag-filter-btn{transition:none}}