.detail-bags { --ink-3: #747773; --sec-y: clamp(64px, 7vw, 104px); }
.detail-bags main h1, .detail-bags main h2, .detail-bags main h3 { font-weight: 400; }
.detail-bags:lang(en) main :is(h1, h2, h3) { font-family: "Uocan Heading Latin", var(--font-ui); font-weight: 500; letter-spacing: -.025em; }
.bag-hero { background: #fff; }
.bag-hero-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4%; padding-block: 36px 48px; }
.bag-hero-copy { padding-left: 6%; }
.bag-eyebrow { font-size: 18px; color: #5e645e; }
.bag-hero h1 { margin-top: 28px; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.2; white-space: pre-line; }
.bag-intro { margin-top: 24px; font-size: 17px; line-height: 1.9; color: var(--ink-2); white-space: pre-line; }
.bag-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.detail-bags .bag-hero-actions .btn { min-height: 42px; height: auto; padding: 9px 24px; font-size: 14px; }
.bag-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 24px; margin-top: 32px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.bag-hero-figure { min-width: 0; }
.bag-hero-figure img { width: 100%; height: auto; }
.bag-section { padding-block: var(--sec-y); scroll-margin-top: calc(var(--nav-h) + 24px); }
.bag-soft { background: #f9f9fb; }
.bag-green { background: #f3f7f5; }
.bag-section-head { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.bag-section-head h2, .bag-final h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.4; white-space: pre-line; text-wrap: balance; }
.bag-section-head p { font-size: 16px; line-height: 1.9; color: var(--ink-2); margin-top: 22px; text-wrap: pretty; }
.bag-split { display: grid; grid-template-columns: .9fr 1.2fr; gap: 7%; align-items: center; }
.bag-split-reverse { grid-template-columns: 1.1fr 1fr; }
.bag-split .bag-section-head { text-align: left; margin-bottom: 24px; }
.bag-note { font-size: 13px; color: var(--ink-3); line-height: 1.8; margin-top: 16px; }
.bag-crop { position: relative; overflow: hidden; width: 100%; }
.bag-crop img { display: block; position: absolute; max-width: none; height: auto; }
.bag-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin-inline: auto; }
.bag-pair figcaption, .bag-proof-gallery figcaption { padding: 18px 8px 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.bag-editorial-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7%; }
.bag-editorial-pair .bag-section-head { text-align: left; margin: 30px 0 0; }
.bag-editorial-pair h2 { font-size: clamp(26px, 2.35vw, 34px); }
.bag-proof-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bag-proof-media { height: clamp(220px, 28vw, 380px); background: #f7f8fa; display: flex; align-items: center; overflow: hidden; }
.bag-guide-panel[hidden] { display: none; }
.bag-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; }
.bag-tabs button { min-height: 46px; min-width: 130px; border: 1px solid #d3d7d2; border-radius: 999px; padding: 9px 22px; color: var(--ink-2); }
.bag-tabs button[aria-selected="true"] { background: #337a40; border-color: #337a40; color: white; }
.bag-guide-panel > h3 { font-size: 24px; margin-bottom: 26px; }
.bag-install { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 5%; margin-bottom: 58px; }
.bag-install > div { min-width: 0; }
.bag-install a { display: block; background: #fff; }
.bag-guide-list { padding-left: 24px; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.bag-guide-list li + li { margin-top: 18px; }
.bag-packing { display: grid; grid-template-columns: repeat(var(--step-count), minmax(0, 1fr)); gap: 0 22px; }
.bag-packing figure { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.bag-packing figcaption { display: flex; align-items: flex-start; gap: 10px; padding: 18px 0 24px; }
.bag-packing figcaption p { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.bag-step-number { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #e6ece6; font-size: 12px; }
.bag-spec-photo { max-width: 440px; margin: 0 auto 44px; }
.bag-spec-table { max-width: 900px; margin: 0 auto; border-top: 1px solid #dedfdb; }
.bag-spec-table > div { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 20px; border-bottom: 1px solid #dedfdb; padding: 20px 18px; font-size: 15px; }
.bag-spec-table dt { color: #72766f; }
.bag-spec-table dd { overflow-wrap: anywhere; }
.bag-safety { max-width: 900px; margin: 26px auto 0; }
.bag-final { padding-block: 60px; background: #f3f7f5; }
.bag-final .wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.bag-final .bag-hero-actions { margin-top: 0; }
@media (max-width: 760px) {
  .detail-bags { --gutter: 6vw; }
  .bag-hero-inner { grid-template-columns: 1fr; gap: 30px; padding-block: 42px 0; }
  .bag-hero-copy { padding: 0; }
  .bag-eyebrow { font-size: 16px; }
  .bag-hero h1 { margin-top: 20px; font-size: clamp(40px, 10.5vw, 54px); }
  .bag-intro { font-size: 16px; margin-top: 20px; white-space: normal; }
  .bag-hero-figure { margin-inline: -6vw; }
  .bag-facts { gap: 8px 16px; margin-top: 24px; padding-top: 20px; }
  .bag-section-head { text-align: left; margin-bottom: 30px; }
  .bag-section-head h2, .bag-final h2 { font-size: clamp(26px, 7vw, 32px); }
  .bag-section-head p { font-size: 15px; margin-top: 18px; }
  .bag-split, .bag-split-reverse, .bag-editorial-pair, .bag-install { grid-template-columns: 1fr; gap: 32px; }
  .bag-split-reverse > figure { order: 1; }
  .bag-pair { gap: 14px; }
  .bag-pair figcaption { font-size: 13px; padding-top: 12px; }
  .bag-editorial-pair { gap: 52px; }
  .bag-editorial-pair .bag-section-head { margin-top: 24px; }
  .bag-proof-gallery { grid-template-columns: 1fr; gap: 30px; }
  .bag-proof-media { height: auto; }
  .bag-tabs { margin-bottom: 34px; gap: 10px; }
  .bag-tabs button { min-width: 116px; padding-inline: 16px; font-size: 14px; }
  .bag-guide-panel > h3 { font-size: 22px; }
  .bag-guide-list { font-size: 15px; }
  .bag-packing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .bag-packing figcaption { gap: 8px; }
  .bag-packing figcaption p { font-size: 13px; }
  .bag-spec-table > div { padding: 18px 0; grid-template-columns: 5em minmax(0, 1fr); gap: 18px; font-size: 14px; }
  .bag-final .wrap { display: block; }
  .bag-final .bag-hero-actions { margin-top: 24px; }
}

/* Preserve the original line geometry; map its green-channel ink coverage to black. */
#guide-mini .bag-crop img { filter: url("#bag-line-black"); }
#guide-mini .bag-step-stage { aspect-ratio: 325 / 600; display: grid; justify-items: center; align-items: start; background: #fff; }
#guide-mini .bag-step-stage > div { min-width: 0; }

/* Match the three panels and preserve the shared source drawing scale. */
#guide-pro .bag-step-stage { aspect-ratio: 535 / 735; display: grid; justify-items: center; align-items: start; background: #fff; }
#guide-pro .bag-step-stage > div { min-width: 0; }