/* Story images are an automatic part of the bag, with one scroll area on phones. */
.cm-bag-dialog .cm-bag-layout { display:block; overflow-y:auto; overscroll-behavior:contain; perspective:none; }
.cm-bag-dialog .cm-bag-receipt { display:block; border-left:0; border-top:7px solid var(--cm-signal); overflow:visible; }
.cm-bag-dialog .cm-bag-items { overflow:visible; padding-inline:24px; }
.cm-bag-dialog .cm-bag-heading { padding:23px 24px; }
.cm-bag-dialog .cm-bag-summary { padding:22px 24px; }
.cm-bag-dialog .cm-bag-note { font-size:11px; }
.cm-bag-dialog .cm-bag-item { grid-template-columns:80px minmax(0,1fr); padding-block:19px; gap:16px; }
.cm-bag-dialog .cm-bag-name { font-size:27px; }
.cm-bag-dialog .cm-bag-image,.cm-bag-dialog .cm-bag-image img { height:80px; min-height:80px; }
.cm-bag-dialog .cm-bag-edit-link { display:flex; width:100%; justify-content:space-between; border-top:1px solid var(--cm-line); padding:14px 24px; font-size:12px; font-weight:600; background:#eee4d9; min-height:49px; text-align:left; }
.cm-bag-dialog .be-card { padding:28px 24px 32px; border-top:1px solid var(--cm-ink); background:#e9e7df; }
.cm-bag-dialog .be-eyebrow { display:block; font:10px/1.5 var(--mono); letter-spacing:.08em; margin-bottom:10px; }
.cm-bag-dialog .be-title { font:38px/1.08 var(--display); text-transform:uppercase; letter-spacing:-.02em; }
.cm-bag-dialog .be-intro { font-size:13px; line-height:1.65; margin-top:12px; max-width:480px; }
.be-body { display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); align-items:center; gap:22px; margin-top:25px; }
.be-preview { width:100%; aspect-ratio:9/16; background:#ddd9cd; border:1px solid #bcb9ac; position:relative; box-shadow:4px 6px 0 #16171312; }
.be-image { display:block; width:100%; height:auto; }
.be-full-size { display:block; text-decoration:none; }
.be-full-size-label { display:block; padding:9px 6px; background:#f6f6f2; font:10px/1.4 var(--mono); text-align:center; }
.be-loading { position:absolute; inset:0; display:grid; place-items:center; padding:20px; font:12px/1.6 var(--mono); text-align:center; }
.be-controls { min-width:0; }
.cm-bag-dialog .be-ready { font-size:15px; line-height:1.5; font-weight:600; margin-bottom:18px; }
.cm-bag-dialog .be-action { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:50px; gap:14px; padding:14px; text-align:left; text-decoration:none; font:600 12px/1.4 var(--sans); border:1px solid var(--cm-ink); }
.cm-bag-dialog .be-save { color:#fff; background:var(--cm-ink); }
.be-save::after { content:'↓'; font-size:20px; }
.be-share::after,.be-instagram::after { content:'↗'; font-size:20px; }
.be-share,.be-instagram { margin-top:9px; background:transparent; }
.be-action[aria-disabled="true"],.be-action:disabled { opacity:.45; cursor:wait; }
.cm-bag-dialog .be-help { margin-top:14px; font-size:11px; line-height:1.7; color:#55564e; }
.cm-bag-dialog .be-status { font-size:12px; line-height:1.6; margin-top:12px; }
.be-status:empty { display:none; }
.cm-bag-dialog .be-retry { min-height:44px; margin-top:12px; padding:8px 0; text-decoration:underline; font-size:12px; }
.be-empty-brand { margin-top:24px; padding:23px; background:#d6452b; color:#171814; display:grid; overflow:hidden; }
.be-empty-brand > span:not(.be-empty-plus) { font:clamp(45px,7vw,96px)/1 var(--display); letter-spacing:-.02em; }
.be-empty-plus { margin-top:25px; font:11px var(--mono); }
.hp-make-edit { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-areas:"heading example" "copy example"; align-items:start; align-content:center; column-gap:50px; row-gap:25px; margin:0 5vw 50px; padding:40px 0; border-block:1px solid var(--ink); }
.hp-make-edit h2 { font:clamp(48px,5.5vw,82px)/1 var(--display); text-transform:uppercase; margin:10px 0 0; letter-spacing:-.025em; }
.hp-make-edit p:not(.hp-micro) { max-width:440px; font-size:15px; line-height:1.7; }
.hp-story-heading { grid-area:heading; align-self:end; }
.hp-story-details { grid-area:copy; }
.hp-story-example { grid-area:example; width:min(100%,260px); margin:0; justify-self:center; }
.hp-story-example-label { display:block; margin-bottom:10px; }
.hp-story-frame { position:relative; aspect-ratio:9/16; background:#e9e7df; border:1px solid #bcb9ac; box-shadow:6px 8px 0 #16171312; }
.hp-story-image { display:block; width:100%; height:auto; }
.hp-story-image[hidden],.hp-story-loading[hidden],.hp-story-retry[hidden] { display:none; }
.hp-make-edit .hp-story-loading { position:absolute; top:40%; left:16px; right:16px; text-align:center; font:12px/1.6 var(--mono); }
.hp-story-retry { position:absolute; top:58%; left:20%; width:60%; padding:12px; min-height:44px; border:1px solid var(--ink); font:12px var(--sans); }
.hp-story-example figcaption { font:12px/1.6 var(--sans); margin-top:15px; color:#55564e; }
.hp-edit-steps { font:10px/1.7 var(--mono); text-transform:uppercase; margin:18px 0; color:#5f615b; }
.hp-edit-actions { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
.hp-edit-actions .hp-route--solid { background:var(--ink); color:var(--paper); padding:14px 18px; min-height:50px; }
@media(min-width:1000px) and (min-height:650px) {
  .cm-bag-dialog .cm-bag-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); overflow:hidden; }
  .cm-bag-dialog .cm-bag-receipt { display:flex; overflow:hidden; border-top:0; border-left:7px solid var(--cm-signal); grid-column:2; grid-row:1; }
  .cm-bag-dialog .cm-bag-items { overflow-y:auto; }
  .cm-bag-dialog .cm-bag-edit-link { display:none; }
  .cm-bag-dialog .be-card { grid-column:1; grid-row:1; overflow-y:auto; border-top:0; padding:30px; }
  .be-body { grid-template-columns:minmax(0,220px) minmax(0,1fr); }
  .cm-bag-dialog .be-title { font-size:44px; }
}
@media(max-width:620px) {
  .be-body { grid-template-columns:minmax(0,132px) minmax(0,1fr); gap:16px; align-items:start; }
  .cm-bag-dialog .be-card { padding:25px 18px 28px; }
  .cm-bag-dialog .be-title { font-size:35px; }
  .cm-bag-dialog .be-ready { font-size:12px; margin-bottom:13px; }
  .cm-bag-dialog .be-action { padding:10px; font-size:11px; min-height:52px; }
  .cm-bag-dialog .be-help { font-size:11px; }
  .hp-make-edit { grid-template-columns:1fr; grid-template-areas:"heading" "example" "copy"; gap:22px; margin:0 18px 30px; padding:30px 0; }
  .hp-make-edit h2 { font-size:clamp(34px,9.5vw,48px); }
  .hp-story-example { width:min(100%,380px); }
  .hp-make-edit p:not(.hp-micro) { font-size:14px; }
}
@media(max-width:360px) {
  .be-body { grid-template-columns:minmax(0,105px) minmax(0,1fr); gap:12px; }
  .cm-bag-dialog .cm-bag-items,.cm-bag-dialog .cm-bag-heading,.cm-bag-dialog .cm-bag-summary { padding-inline:16px; }
  .cm-bag-dialog .cm-bag-item { grid-template-columns:65px minmax(0,1fr); gap:12px; }
  .cm-bag-dialog .cm-bag-name { font-size:24px; }
}