/* Bag filter full-page Figma review. */
.product-bag-filter { --reviewed-feature-column:180px; --reviewed-related-width:min(calc(100% - 36px),1600px); --reviewed-related-padding:60px; }
.product-bag-filter.product-reviewed .detail-hero p { max-width:313px; }
@media(min-width:992px) { .product-bag-filter.product-reviewed .detail-overview-copy { padding:24px 41px 24px 39px; } }
.product-bag-filter.product-reviewed .detail-overview-copy p + p { margin-top:-20px; }
.product-bag-filter.product-reviewed .bag-highlights .highlight-list { padding:23px 29px 18px; justify-content:flex-start; }
.product-bag-filter.product-reviewed .bag-highlights p + p { margin-top:0; }
.bag-principle-text { display:grid; }
.bag-principle-text [data-principle-slide] { grid-area:1/1; }
.bag-principle .is-inactive { visibility:hidden; }
.bag-principle .bag-principle-media { display:grid; place-items:center; height:100%; min-height:497px; margin-right:21px; }
.bag-principle-window { position:relative; width:100%; max-width:669px; aspect-ratio:669/497; overflow:hidden; background:white; }
.bag-principle .bag-principle-design { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.bag-principle .bag-principle-flow { position:absolute; left:13.00448%; top:.40241%; width:74.28998%; height:100%; object-fit:contain; }
.bag-principle .bag-principle-copy { height:100%; min-height:497px; padding:30px; }
.bag-principle-copy h3 { font-size:clamp(22px,1.5vw,26px); }
.bag-principle-copy p { margin:0; font-size:16px; line-height:30px; }
.bag-principle-controls { gap:20px; margin-top:auto; padding-top:24px; }
.bag-principle-controls button { position:relative; flex:0 0 auto; width:clamp(48px,4vw,66px); height:clamp(48px,4vw,66px); padding:0; border:0; border-radius:50%; background:none; }
.bag-principle-controls img { display:block; width:100%; height:100%; }
.bag-principle-controls [data-principle-direction="-1"] img { transform:scaleX(-1); }
.bag-control-hover { position:absolute; inset:0; opacity:0; }
.bag-principle-controls button:hover .bag-control-hover,.bag-principle-controls button:focus-visible .bag-control-hover { opacity:1; }
.bag-principle-controls button:focus-visible { outline:3px solid var(--detail-green); outline-offset:4px; }
@media(max-width:991.98px) {
 .bag-principle .bag-principle-media { height:auto; min-height:0; margin:0; }
 .bag-principle .bag-principle-copy { min-height:0; padding:24px 14px 16px; }
}
.bag-spec-scroll { width:100%; overflow-x:auto; overflow-y:hidden; padding-block:1px; }
.bag-spec-scroll + .bag-spec-scroll { margin-top:28px; }
.bag-spec-scroll:focus-visible { outline:2px solid var(--detail-green); outline-offset:4px; }
.bag-spec-hint { color:#737373; font-size:13px; }
.bag-spec-table { width:100%; min-width:1200px; table-layout:fixed; border-collapse:collapse; font-family:"Times New Roman","Noto Sans SC",serif; color:#111; font-size:22px; line-height:1.1; }
.bag-spec-table th,.bag-spec-table td { border:1px solid #999; text-align:center; vertical-align:middle; padding:2px; font-weight:400; white-space:nowrap; }
.bag-spec-table th { background:#d1d1d1; }
.bag-model-table thead th { height:67px; }
.bag-model-table tbody tr { height:58.57px; }
.bag-size-table { font-size:20px; }
.bag-size-table thead tr { height:36.5px; }
.bag-size-table tbody tr { height:25px; }
.bag-size-table tbody th,.bag-size-table tbody td { padding-block:1px; }