/* Capsule Commerce (/products/capsule-commerce/): page layout only. Shared components live in
   components.css and fig.css; page-only classes are prefixed cc-. */

[data-section="capsule-commerce"] .chapter-section > .rule-dots + * { margin-top: var(--s-12); }

/* CC-1: Fig. 01 fills the hero aside */
.cc-hero-aside { display: block; min-height: 0; min-width: 0; }
.cc-hero-aside > .fig { width: 100%; }

/* CC-2: ledger at reading width */
.cc-ledger { max-width: 52rem; }

/* CC-3: S9 search figure */
.cc-search { max-width: 56rem; }
.cc-search .cc-glyph { fill: none; stroke: var(--accent); stroke-width: var(--fig-stroke-w); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--dur-s) var(--ease-out); }
.cc-search[data-mode="type"] .cc-glyph[data-glyph="type"],
.cc-search[data-mode="image"] .cc-glyph[data-glyph="image"],
.cc-search[data-mode="voice"] .cc-glyph[data-glyph="voice"] { opacity: 1; }
.cc-search .cc-cell { fill: var(--fig-node-fill); stroke: var(--ink-rule); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--dur-s) var(--ease-out), stroke var(--dur-s) var(--ease-out); }
.cc-search .cc-cell.is-on,
html:not(.js) .cc-search .cc-cell,
html[data-motion="reduce"] .cc-search .cc-cell,
.cc-search.is-static .cc-cell { fill: var(--fig-node-fill-lit); stroke: var(--fig-node-lit); stroke-width: var(--fig-stroke-w); }
.cc-search .cc-cell.is-on { transition-delay: calc(var(--o, 0) * 120ms); }
html[data-motion="reduce"] .cc-search :is(.cc-glyph, .cc-cell) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root .cc-search .cc-cell { fill: var(--fig-node-fill-lit); stroke: var(--fig-node-lit); stroke-width: var(--fig-stroke-w); }
  :root .cc-search :is(.cc-glyph, .cc-cell) { transition: none; }
}

/* CC-7: When Capsule. When SAP. */
.cc-when { display: grid; gap: var(--s-10); max-width: 64rem; }
.cc-when-col { min-width: 0; }
.cc-when-col .h3 { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.cc-when-link { display: inline-block; margin-top: var(--s-6); font-weight: 500; }
@media (min-width: 768px) {
  .cc-when { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
}

/* CC-1: the aside figure's plate lines up with the crumbs */
@media (min-width: 1024px) {
  .hero-int:has(> .cc-hero-aside) { align-items: start; }
  .cc-hero-aside { padding-top: 0.2rem; }
}

/* S9: larger query glyphs, so text, image and voice read apart; the packet kinds are local symbols */
.cc-search .packet:is(.cc-packet-img, .cc-packet-wave) { fill: var(--fig-packet-doc); }
.cc-search .cc-cell.is-on { transition-delay: calc(var(--o, 0) * 200ms); }