.duo-bags{height:320px;position:relative;display:grid;grid-template-columns:66% 34%;align-items:end;margin:3px 0 14px;padding-bottom:22px}.duo-bags>.bag-image{width:100%;height:302px;object-fit:contain;margin:0}.small-bag-scene{align-self:end;position:relative;padding-bottom:5px}.small-bag-scene img{width:132%;max-width:132%;margin-left:-25%;height:150px;object-fit:contain;mix-blend-mode:multiply}.small-bag-scene>span{display:block;font-size:10px;text-align:center}.big-bag-label{position:absolute;bottom:0;left:13%;font-size:10px}.container-filter{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:10px 0}.container-filter button{font-size:10px;padding:5px 8px;min-height:32px}.container-filter button[aria-pressed=true]{background:#47634a;color:white;border-color:#47634a}.container-badge{display:inline-block;font-size:9px;border-radius:3px;padding:1px 4px;background:#e1e5d7;color:#465e45;margin-top:4px}.container-badge.small{background:#dce5ec;color:#3d627c}.duo-total{border-top:1px solid #d5d8c6;border-bottom:1px solid #d5d8c6;padding:9px 0;margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px}.duo-total span{font-size:11px}.duo-total strong{font-size:17px;margin-left:auto}.duo-total small{font-size:9px;color:var(--muted);width:100%}.gear-tile .pack-item{min-height:147px}.weight-readout strong{font-size:20px}.bag-core{top:10px}.placement-badge{margin-top:2px}
@media(max-width:850px){.bag-core{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}.duo-bags{grid-column:1;grid-row:1/8;height:240px;grid-template-columns:64% 36%;align-self:start;margin:0;padding-bottom:16px}.duo-bags>.bag-image{height:221px;grid-row:auto;grid-column:auto}.small-bag-scene img{height:108px}.small-bag-scene span,.big-bag-label{font-size:9px}.big-bag-label{left:11%}.pack-invitation{grid-row:1;font-size:11px}.progress-caption{grid-row:2}.bag-core>progress{grid-row:3;margin-bottom:4px}.weight-readout{grid-row:4;grid-template-columns:1fr;gap:7px}.weight-readout>div{display:grid;grid-template-columns:1fr auto;gap:1px 4px}.weight-readout small{grid-column:1/-1}.weight-readout strong{font-size:14px}.duo-total{grid-column:2;grid-row:5;padding:6px 0;margin-top:3px;gap:0 5px}.duo-total span{font-size:9px}.duo-total strong{font-size:12px}.duo-total small{font-size:8px}.weight-warning{grid-row:6;font-size:9px}.bag-core>button{grid-row:7;font-size:9px}.container-filter{grid-column:1/-1;grid-row:8;justify-content:start}.container-filter button{min-height:34px;font-size:11px}.zone-filters{grid-row:9}.zone-explanation{grid-row:10}.illustration-note{grid-row:11}.container-badge,.placement-badge{font-size:10px}.gear-tile .pack-item{min-height:148px}}
.container-badge.road{background:#eee7d0;color:#8b6c31}

/* Blend once against the same paper, without multiplying overlapping cream pixels. */
.duo-bags{isolation:isolate;background:var(--paper)}
.duo-bags>.bag-image,.small-bag-scene img{mix-blend-mode:darken}
.duo-bags[data-view=big],.duo-bags[data-view=small]{display:flex;justify-content:center;align-items:flex-end}
.duo-bags[data-view=big]>.bag-image{width:100%;max-width:260px;height:302px}
.duo-bags[data-view=big]>.big-bag-label{left:50%;transform:translateX(-50%);white-space:nowrap}
.duo-bags[data-view=small]>.small-bag-scene{width:100%;max-width:245px;padding-bottom:0}
.duo-bags[data-view=small] .small-bag-scene img{width:100%;max-width:100%;height:270px;margin-left:0}
.duo-bags[data-view=small] .small-bag-scene>span{white-space:nowrap}
@media(max-width:850px){.duo-bags[data-view=big]>.bag-image{height:221px}.duo-bags[data-view=small] .small-bag-scene img{height:195px}.duo-bags[data-view=small]>.small-bag-scene{max-width:200px}}